/* ============================================================
   RUSSO 2026 — Stylesheet
   ------------------------------------------------------------
   TABLE OF CONTENTS
   0. Fonts (@font-face)
   1. Design Tokens (CSS variables)
   2. Reset & Base
   3. Layout helpers (container)
   4. Reusable components (buttons)
   5. Section 1: Header + Hero
   ============================================================ */

/* ============================================================
   0. FONTS
   Swap the src paths for the licensed font files you provide.
   Family names are kept identical to the Figma design so the
   rest of the CSS never has to change.
   ============================================================ */
@font-face {
  font-family: "Classy Vogue";
  src: url("../assets/fonts/ClassyVogue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("../assets/fonts/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("../assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Inter (variable) — covers weights 100–900. Used as the fallback
   for Aeonik and as the source for "Aeonik Light" spots, since no
   Aeonik Light file was supplied. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Colors */
  --color-bg: #01060d;
  --color-bg-slate: #0e1826;
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-dark: #01060d;
  --color-gold: #c0924e;
  --color-gold-stroke: #d1a255;
  --color-border-subtle: rgba(255, 255, 255, 0.12);

  /* Gold accent gradient (primary CTA / accents) */
  --gradient-gold: linear-gradient(90deg, #8e5b08 0%, #ff9d00 100%);

  /* Typography families (fallbacks approximate the licensed fonts) */
  --font-serif: "Classy Vogue", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Aeonik", "Inter", system-ui, -apple-system, sans-serif;
  --font-grotezk: "Apfel Grotezk", "Inter", system-ui, sans-serif;

  /* Layout */
  --container-max: 1440px;
  --container-pad: 72px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  background-image: url("../images/bodybg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ============================================================
   4. REUSABLE COMPONENTS — Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 34px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1;
  border: 0;
  border-radius: 100px; /* pill */
  cursor: pointer;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.btn--gold {
  background: var(--gradient-gold);
  color: var(--color-dark);
  font-weight: 500;
}

.btn--gold:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ============================================================
   5. SECTION 1 — HEADER + HERO
   ============================================================ */

/* --- Header --- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 28px;
}

.header__logo img {
  height: 56px;
  width: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__link {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--color-gold-stroke);
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 956px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fade-to-black at the bottom (Figma "Rectangle 10", 166px) so the
   hero blends smoothly into the Date & Location band below. Sits above
   the portrait, like in the design. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 166px;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(1, 6, 13, 0) 0%,
    var(--color-bg) 100%
  );
  pointer-events: none;
}

/* Dark scrim: darkest on the left so the headline stays legible,
   fading to transparent so the portrait on the right stays visible. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(1, 6, 13, 0.85) 0%,
    rgba(1, 6, 13, 0.55) 40%,
    rgba(1, 6, 13, 0) 70%
  );
}

/* Cut-out portrait layered on the right, standing on the hero's base */
.hero__portrait {
  position: absolute;
  right: 6%;
  bottom: 0;
  z-index: 1;
  height: 92%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-top: 120px;
}

/* Text block = Figma "Frame 14": 835px wide, vertical column with a
   uniform 31px gap between items. */
.hero__content {
  max-width: 835px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 31px;
}

/* Eyebrow: gold sparkle + white label on a single line */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 22px;
  color: var(--color-text);
}

.hero__eyebrow-star {
  flex-shrink: 0;
  color: var(--color-gold-stroke);
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 1.06;
}

.hero__location {
  font-family: var(--font-grotezk);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-text);
}

.hero__subtitle {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text-muted);
}

/* ============================================================
   Reusable — Gold sparkle icon
   ============================================================ */
.sparkle {
  flex-shrink: 0;
  color: var(--color-gold-stroke);
}

/* ============================================================
   6. SECTION 2 — DATE & LOCATION BAND
   ============================================================ */
.date-band {
  position: relative;
  overflow: hidden;
  padding-block: 120px;
  z-index: 999;
}

/* Faint street-map graphic sitting behind the text, centred-right */
.date-band__map {
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%);
  width: 58%;
  max-width: 820px;
  height: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  z-index: 6;
}

.date-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.date-band__date {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 18px;
}

.date-band__location {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 22px;
  color: var(--color-text);
  margin-bottom: 8px;
}

.date-band__note {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-muted);
}

.date-band__capacity {
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Right-hand block: right-aligned, dropped down to line up with the
   left column's location line (below the large date). */
.date-band__secondary {
  text-align: right;
  margin-top: 82px;
  flex-shrink: 0;
}

.date-band__location--plain {
  display: block;
}

/* ============================================================
   7. SECTION 3 — INTRO / INVITATION COPY
   ============================================================ */
.intro {
  background-color: transparent; /* let the body background show through */
  padding-block: 120px;
  text-align: center;
}

.intro__inner {
  max-width: 980px;
}

.intro__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 36px;
}

.intro__lead {
  max-width: 760px;
  margin: 0 auto 34px;
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text);
}

.intro__body {
  max-width: 840px;
  margin: 0 auto 22px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Second paragraph is set lighter/quieter than the first */
.intro__body--light {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   7b. SECTION — YOUR EVENING INCLUDES (feature card rail)
   ============================================================ */
.evening {
  padding-block: 110px;
  overflow: hidden; /* clip the rail where it overflows the viewport */
  text-align: center;
}

.evening__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: 56px;
  text-transform: uppercase;
}

/* Horizontal rail — clips the overflowing, auto-scrolling track. */
.evening__rail {
  overflow: hidden;
}

/* The track holds two identical card sets and scrolls left forever.
   Translating by -50% lands exactly on the start of the 2nd set, so the
   loop is seamless. Hovering pauses it; reduced-motion users get no motion. */
.evening__track {
  display: flex;
  width: max-content;
  align-items: stretch;
  animation: evening-scroll 40s linear infinite;
}

.evening__rail:hover .evening__track {
  animation-play-state: paused;
}

@keyframes evening-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .evening__track {
    animation: none;
  }
}

/* --- Card ---
   Cards are sheared into parallelograms (slanted dividers). The card is
   skewed; the image and text are counter-skewed so they stay upright.
   Adjacent skewed boxes share their slanted edge, so they tile with no gap. */
.ecard {
  position: relative;
  flex: 0 0 361px;
  height: 566px;
  margin-right: 20px; /* gap between slides (kept on the card so the loop stays seamless) */
  overflow: hidden;
  transform: skewX(-10deg);
  /* Gold gradient border (Figma 4px, ~53% opacity) */
  border: 4px solid;
  border-image: linear-gradient(
      180deg,
      rgba(255, 157, 0, 0.53) 0%,
      rgba(142, 91, 8, 0.53) 100%
    )
    1;
}

.ecard--wide {
  flex-basis: 701px;
}

.ecard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Counter-skew + slight zoom so the photo stays upright and fills the
     sheared frame without triangular gaps. */
  transform: skewX(10deg) scale(1.3);
}

/* Dark scrim so the title stays legible over the photo */
.ecard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

.ecard__body {
  position: absolute;
  z-index: 2;
  left: 40px;
  right: 28px;
  bottom: 30px;
  text-align: left;
  transform: skewX(10deg); /* counter-skew so text is upright */
  transform-origin: bottom left;
}

.ecard__title {
  font-family: var(--font-grotezk);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-text);
}

.ecard__desc {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text);
}

/* ============================================================
   8. SECTION — ABOUT FRANK J. RUSSO
   ============================================================ */
.about {
  position: relative;
  background-color: transparent; /* body background shows through */
}

/* Centered copy sitting over a very faint (3%) logo watermark */
.about__intro {
  position: relative;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  padding: 96px 72px 24px;
  height: 500px;
}

.about__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 930px;
  max-width: 66%;
  height: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

.about__copy {
  position: relative;
  z-index: 1;
  max-width: 847px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.about__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-text);
}

.about__bio {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-text);
}

.about__link {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text);
  margin-top: 16px;
}

.about__link a {
  color: var(--color-gold-stroke);
  text-decoration: none;
}

.about__link a:hover {
  text-decoration: underline;
}

/* Statement paragraph below the portrait */
.about__statement {
  padding: 80px 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about__statement p {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-text-muted);
}

/* Full-bleed brick-wall portrait */
.about__portrait {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 15px;
}

/* Dark gala photo band with centered text overlay */
.about__band {
  position: relative;
}

.about__band-img {
  display: block;
  width: 100%;
  height: auto;
}

.about__band-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 21px;
  text-align: center;
  padding: 0 72px;
}

.about__band-emblem {
  width: 113px;
  height: auto;
}

/* "✦ Floridians First ✦" tagline */
.about__band-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 24px;
  color: var(--color-text);
}

.about__band-kicker {
  font-family: var(--font-sans);
  font-size: 36px;
  color: var(--color-text);
}

.about__band-title {
  max-width: 900px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ============================================================
   9. SECTION — EVENING SCHEDULE
   ============================================================ */
.schedule {
  padding-block: 110px;
}

.schedule__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  margin-bottom: 60px;
}

.schedule__list {
  counter-reset: schedule;
  padding: 0px;
}

/* Each row: text on the left, number on the right, divider beneath */
.schedule__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 34px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.44);
}

.schedule__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-text);
}

.schedule__desc {
  max-width: 720px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.schedule__num {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text-muted);
}

/* ============================================================
   10. SECTION — PROPERTY GALLERY (scroll-snap slider)
   ============================================================ */
.gallery {
  padding-block: 40px 90px;
}

.gallery__viewport {
  position: relative;
}

/* Swiper: each slide sizes to its image's natural width (slidesPerView: auto) */
.gallery__swiper {
  width: 100%;
}

.gallery__swiper .swiper-slide {
  width: auto;
}

.gallery__swiper .swiper-slide img {
  height: 493px;
  width: auto;
  object-fit: cover;
  display: block;
}

/* Gold circular prev/next controls, vertically centred over the track */
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: filter 0.2s ease;
  border: none;
}

.gallery__arrow:hover {
  filter: brightness(1.08);
}

.gallery__arrow--prev {
  left: 24px;
}

.gallery__arrow--next {
  right: 24px;
}

/* "Listed at $42,500,000" */
.gallery__price {
  text-align: center;
  margin-top: 44px;
}

.gallery__price-label {
  font-family: var(--font-sans);
  font-size: 20px;
  color: var(--color-text);
  margin-bottom: 18px;
}

.gallery__price-value {
  display: inline-block;
  padding: 12px 36px;
  border: 1px solid var(--color-gold-stroke);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* ============================================================
   11. SECTION — ESTATE (waterfront + represented by)
   ============================================================ */
.estate {
  padding-block: 100px;
}

/* Each row is a centred ~1026px block (text 611 + 28px gap + media 387) */
.estate__row {
  display: flex;
  align-items: center;
  gap: 37px;
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.estate__row + .estate__row {
  margin-top: 120px;
}

/* Row 2 puts the media first (left) and the text second (right) —
   the DOM already reflects that, so no reordering is needed. */

.estate__text {
  flex: 1 1 0;
}

.estate__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 11px;
}

.estate__desc {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 30px;
  color: var(--color-text);
}

/* Gold-bordered media frame (Figma: 387×560, 5px gold gradient border) */
.estate__media {
  position: relative;
  flex: 0 0 560px;
  width: 560px;
  border: 8px solid;
  border-image: linear-gradient(180deg, #ff9d00 0%, #8e5b08 100%) 1;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transform: skewX(-3deg) scale(1);
}

.estate__media--video {
  height: 500px;
}

.estate__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(0deg);
}

.estate__media--photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Custom gold play button, centred on the video (Figma: 67px) */
.estate__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 67px;
  padding-left: 3px; /* optically centre the triangle */
  border: 0;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

.estate__play:hover {
  filter: brightness(1.08);
}

/* Hidden once the video is playing */
.estate__media--video.is-playing .estate__play {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   12. SECTION — ATTIRE BAND
   ============================================================ */
.attire {
  position: relative;
  min-height: 555px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: url("../images/attire-bg.jpg");
  background-size: cover;
  background-position: center;
}

/* 86% dark overlay (Figma #01060d @ 0.86) */
.attire::before {
  content: "";
  position: absolute;
  inset: 0;
}

.attire__inner {
  position: relative;
  z-index: 1;
  max-width: 847px;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.attire__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 24px;
  color: var(--color-text);
}

.attire__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.1;
  color: var(--color-text);
  text-transform: uppercase;
}

.attire__note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-text);
}

/* ============================================================
   13. SECTION — REQUEST INVITATION FORM
   ============================================================ */
.request {
  padding-block: 110px;
}

.request__head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.request__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text);
}

.request__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 20px;
}

.request__intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Two-column form with underline inputs */
.request__form {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 34px;
}

.field {
  display: flex;
  flex-direction: column;
}

.field__label {
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 14px;
}

.field__input {
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--color-text);
  transition: border-color 0.2s ease;
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--color-gold-stroke);
}

/* Submit spans both columns, left-aligned */
.request__actions {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.request__submit {
  padding: 14px 44px;
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer {
  padding-top: 56px;
  text-align: center;
}

.site-footer__logo {
  display: inline-block;
  margin-bottom: 40px;
}

.site-footer__logo img {
  height: 92px;
  width: auto;
}

.site-footer__divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.site-footer__text {
  padding-block: 50px 72px;
}

.site-footer__disclaimer {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  color: var(--color-text-muted);
  margin-bottom: 30px;
}

.site-footer__meta {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  color: var(--color-text-muted);
}

/* ============================================================
   15. SECTION — INFO CARDS
   ============================================================ */
.info-cards {
  padding-block: 90px;
}

.info-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch; /* all cards match the tallest one's height */
}

.info-card {
  padding: 36px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(27px);
  -webkit-backdrop-filter: blur(25px);
}

.info-card__icon {
  display: inline-flex;
  color: var(--color-gold-stroke);
  margin-bottom: 22px;
}

.info-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.info-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 18px;
}

.info-card__details p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
}

.info-card__details p + p {
  margin-top: 6px;
}

.info-card__contact {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-card__contact svg {
  flex-shrink: 0;
  color: var(--color-gold-stroke);
}

.info-card__contact a {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.info-card__contact a:hover {
  color: var(--color-gold-stroke);
}

/* ============================================================
   16. RESPONSIVE
   Additive only. Desktop (>=1440px) rendering is unchanged:
   the fluid clamp() rules cap at the original desktop px, and
   the layout overrides live in max-width media queries.
   ============================================================ */

/* --- Fluid display type ---------------------------------------
   clamp(min, preferred-vw, max) — max equals the original desktop
   size, so at large widths these resolve to the exact same values. */
.hero__title {
  font-size: clamp(34px, 8vw, 76px);
}
.intro__title {
  font-size: clamp(30px, 7vw, 64px);
}
.intro__lead {
  font-size: clamp(20px, 3.4vw, 32px);
}
.date-band__date {
  font-size: clamp(34px, 7vw, 60px);
}
.about__title {
  font-size: clamp(28px, 6vw, 52px);
}
.about__band-kicker {
  font-size: clamp(22px, 4vw, 36px);
}
.about__band-title {
  font-size: clamp(28px, 6.5vw, 56px);
}
.evening__heading {
  font-size: clamp(30px, 7vw, 64px);
}
.schedule__heading {
  font-size: clamp(30px, 7vw, 64px);
}
.schedule__title {
  font-size: clamp(22px, 3.4vw, 32px);
}
.gallery__price-value {
  font-size: clamp(20px, 4vw, 26px);
}
.estate__title {
  font-size: clamp(28px, 6vw, 52px);
}
.attire__title {
  font-size: clamp(28px, 6vw, 52px);
}
.request__title {
  font-size: clamp(28px, 6vw, 52px);
}

/* --- Hamburger toggle (hidden until the header collapses) --- */
.header__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
}

/* 3-bar icon drawn with the middle bar + its two pseudo-elements */
.header__toggle-bars,
.header__toggle-bars::before,
.header__toggle-bars::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.header__toggle-bars {
  top: 21px;
}
.header__toggle-bars::before {
  top: -7px;
}
.header__toggle-bars::after {
  top: 7px;
}

/* Animate into an X while the menu is open */
.site-header.is-nav-open .header__toggle-bars {
  background: transparent;
}
.site-header.is-nav-open .header__toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
}
.site-header.is-nav-open .header__toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ============================================================
   Breakpoint: <= 1024px  (tablet / small laptop)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --container-pad: 40px;
  }

  .nav__list {
    gap: 26px;
  }
  .nav__link {
    font-size: 16px;
  }

  .hero {
    min-height: 760px;
  }
  .hero__portrait {
    height: 80%;
    right: 2%;
    opacity: 0.9;
  }

  .date-band {
    padding-block: 90px;
  }
  .date-band__map {
    width: 70%;
  }

  .intro,
  .evening,
  .schedule,
  .estate,
  .request {
    padding-block: 80px;
  }

  .estate__row + .estate__row {
    margin-top: 80px;
  }
  .estate__media {
    flex-basis: 440px;
    width: 440px;
  }
}

/* The in-menu CTA only appears when the nav collapses (mobile). */
.nav__cta {
  display: none;
}

/* ============================================================
   Breakpoint: <= 860px  (collapse the header nav to a menu)
   ============================================================ */
@media (max-width: 860px) {
  .header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The desktop inline CTA is replaced by the one inside the menu */
  .header__cta {
    display: none;
  }

  /* Full-width dropdown panel spanning the container, anchored under
     the header — reads as an intentional sheet, not a floating box. */
  .header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--container-pad);
    right: var(--container-pad);
    margin-top: 12px;
    padding: 28px;
    background: rgba(1, 6, 13, 0.98);
    border: 1px solid var(--color-border-subtle);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }
  .site-header.is-nav-open .header__nav {
    display: block;
  }

  /* Links stacked full-width, each with a subtle divider */
  .header__nav .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .header__nav .nav__list li + li {
    border-top: 1px solid var(--color-border-subtle);
  }
  .header__nav .nav__link {
    display: block;
    padding: 16px 4px;
    font-size: 19px;
  }

  /* CTA sits at the bottom of the menu as a full-width button */
  .nav__cta {
    display: flex;
    width: 100%;
    margin-top: 22px;
  }
}

/* ============================================================
   Breakpoint: <= 768px  (tablet portrait — stack everything)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --container-pad: 24px;
  }

  body {
    font-size: 17px;
  }

  /* Hero: no giant fixed height, portrait sits behind/below text */
  .hero {
    min-height: 0;
    padding-block: 130px 60px;
  }
  .hero__inner {
    padding-top: 0;
  }
  .hero__portrait {
    display: none;
  }
  .hero__content {
    max-width: 100%;
  }
  .hero__eyebrow {
    font-size: 18px;
  }
  .hero__location {
    font-size: 20px;
  }

  /* Date band: single centered column, drop the magic offset */
  .date-band {
    padding-block: 70px;
  }
  .date-band__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
  }
  .date-band__location {
    justify-content: center;
  }
  .date-band__secondary {
    text-align: center;
    margin-top: 0;
  }
  .date-band__map {
    width: 100%;
    max-width: 520px;
    opacity: 0.5;
  }

  /* About: let the intro grow, shrink the watermark, reflow the band */
  .about__intro {
    height: auto;
    padding: 70px 24px 24px;
  }
  .about__watermark {
    max-width: 88%;
  }
  /* Keep the text overlaid on the photo, but darken so it stays legible
     and let the photo grow tall enough to hold the wrapped text. */
  .about__band {
    display: grid;
  }
  .about__band-img,
  .about__band-text {
    grid-area: 1 / 1;
  }
  .about__band-img {
    min-height: 500px;
    object-fit: cover;
  }
  .about__band-text {
    padding: 40px 24px;
    background: rgba(1, 6, 13, 0.5);
  }

  /* Evening rail: smaller cards */
  .ecard {
    flex-basis: 260px;
    height: 420px;
  }
  .ecard--wide {
    flex-basis: 480px;
  }

  /* Schedule: number above the title, stacked */
  .schedule__item {
    flex-direction: column;
    gap: 8px;
  }
  .schedule__num {
    order: -1;
  }

  /* Gallery: shorter images, tuck the arrows in */
  .gallery__swiper .swiper-slide img {
    height: 300px;
  }
  .gallery__arrow {
    width: 52px;
    height: 52px;
  }
  .gallery__arrow--prev {
    left: 12px;
  }
  .gallery__arrow--next {
    right: 12px;
  }

  /* Estate: stack each row, media full-width */
  .estate__row,
  .estate__row--reverse {
    flex-direction: column;
    gap: 28px;
    padding-inline: var(--container-pad);
  }
  .estate__media {
    flex: 1 1 auto;
    width: 100%;
    max-width: 520px;
    transform: none; /* drop the skew once the frame goes full-width */
  }
  .estate__media--video {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* Attire */
  .attire {
    min-height: 420px;
  }

  /* Form: single column */
  .request__form {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 26px;
  }

  /* Info cards: single column stack */
  .info-cards {
    padding-block: 60px;
  }
  .info-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Breakpoint: <= 480px  (phone)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --container-pad: 20px;
  }

  .btn {
    padding: 14px 24px;
    font-size: 16px;
  }

  /* Keep the header uncluttered: logo + menu button only */
  .header__cta {
    display: none;
  }

  .hero__portrait {
    display: none;
  }

  /* Drop the width-sensitive skew on the small cards */
  .ecard {
    flex-basis: 220px;
    height: 380px;
    transform: none;
    margin-right: 14px;
  }
  .ecard__img {
    transform: scale(1.02);
  }
  .ecard__body {
    transform: none;
    left: 22px;
    right: 18px;
  }

  /* Estate media: drop the skew so the frame sits square */
  .estate__media {
    transform: none;
  }

  .gallery__price-value {
    padding: 14px 32px;
  }

  .about__statement,
  .intro,
  .evening,
  .schedule,
  .estate,
  .request {
    padding-block: 56px;
  }
}