/* =========================================================================
   SAMIE WEDDING PLANNER & DECOR — Stylesheet
   -------------------------------------------------------------------------
   ANIMATION TIMING: every duration/easing/distance used for motion lives in
   the custom properties below (`--dur-*`, `--ease-*`, `--dist-*`, `--stagger`)
   or in js/main.js CONFIG. Change values there to retime the whole site.
   ========================================================================= */

:root{
  /* ---------- Palette ---------- */
  /* Strict 5-tone organic green system, darkest to lightest. No colors
     outside this ramp are used anywhere in the site.
       moss    — primary/darkest background (body, preloader, footer)
       cypress — secondary background, alternated in for section rhythm
                 (process, contact, featured card) and as muted/secondary
                 text on the light aloe card surfaces
       olive   — mid-tone accent: hover states, decorative bullets/dots,
                 borders where a slightly warmer touch reads well — NOT
                 used for small/critical text (its contrast against both
                 dark tones is too low to read reliably at small sizes)
       cedar   — light structural accent: hairline dividers/borders only
       aloe    — lightest tone. Carries virtually all readable text sitting
                 on moss/cypress (headings at full opacity, body copy at
                 reduced opacity for hierarchy), plus every light "clean
                 text" card surface and every filled CTA/highlight, since
                 it's the only tone with dependably strong contrast against
                 every other tone in the ramp.
     Also exposed as *-rgb channel lists so overlays/borders can alpha-blend
     via rgba() without duplicating hex-to-rgb conversions inline. */
  --color-moss:        #2C3424;
  --color-moss-rgb:     44,52,36;
  --color-cypress:     #4C583E;
  --color-cypress-rgb:  76,88,62;
  --color-olive:       #768064;
  --color-olive-rgb:    118,128,100;
  --color-cedar:       #959581;
  --color-cedar-rgb:    149,149,129;
  --color-aloe:        #DADED8;
  --color-aloe-rgb:     218,222,216;

  /* ---------- Type ---------- */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;
  --font-script:  'Tangerine', cursive;

  /* ---------- Motion tokens (edit here to retime the whole site) ---------- */
  --ease-out:      cubic-bezier(.16,.84,.32,1);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --ease-elastic:  cubic-bezier(.2,1.4,.4,1);

  --dur-instant:   .25s;
  --dur-fast:      .45s;
  --dur-base:      .85s;
  --dur-slow:      1.4s;
  --dur-marquee:   38s;
  --dur-carousel:  .7s;

  --dist-up:       46px;
  --dist-up-sm:    18px;

  --stagger:       .09s;   /* delay increment used by data-delay (ms) too */

  /* ---------- Layout ---------- */
  --container: 1220px;
  --pad: clamp(24px, 5vw, 72px);
  --radius: 4px;
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
input,textarea{ font:inherit; }
svg{ fill:currentColor; }

body{
  font-family:var(--font-body);
  background:var(--color-moss);
  color:var(--color-aloe);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--color-olive); color:var(--color-aloe); }

/* ============ TYPE SCALE ============ */
.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--color-aloe);
  font-weight:500;
  margin-bottom:14px;
  display:block;
}
.eyebrow--light{ color:var(--color-aloe); }

.h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.12;
  color:var(--color-aloe);
  letter-spacing:.01em;
}
.h2--light{ color:var(--color-aloe); }
.h2--script{ font-family:var(--font-script); font-size:clamp(3.2rem, 7vw, 5rem); font-weight:700; line-height:1; }

/* Body copy sits at reduced opacity against aloe's full brightness — that
   opacity step (not a separate hex) is what creates the heading/body
   hierarchy while staying strictly inside the 5-tone ramp. */
.body-lg{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--color-aloe); font-weight:300; line-height:1.75; opacity:.92; }
.body{ font-size:1rem; color:var(--color-aloe); font-weight:300; line-height:1.85; margin-top:16px; opacity:.78; }
.body:first-of-type{ margin-top:0; }

.section__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
}
.section{ padding:min(14vw,140px) 0; position:relative; }

/* ============ BUTTONS ============ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:999px;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  transition:transform var(--dur-base) var(--ease-out);
}
.btn--primary{ color:var(--color-moss); }
.btn--primary::before{ background:var(--color-aloe); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(var(--color-aloe-rgb),.5); }
.btn--primary:hover::before{ transform:scale(1.06); }

/* ============ GLASS BUTTON — frosted glassmorphism ============
   Adapted from a "GlassButton" component (translucent frosted pill +
   separate floating shadow layer) into plain CSS. .btn::before is
   switched off (content:none) since the glass fill IS the background
   here, not an opaque pseudo-element; backdrop-filter blurs whatever
   sits behind the button (the hero photo). .btn__glass-shadow is a
   soft blurred ellipse beneath the pill for a "floating glass" lift,
   independent of the pill's own box-shadow. */
.btn--glass{
  color:var(--color-aloe);
  overflow:visible;
  background:rgba(var(--color-aloe-rgb),.12);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(var(--color-aloe-rgb),.3);
  box-shadow:
    inset 0 1px 0 rgba(var(--color-aloe-rgb),.4),
    inset 0 -12px 16px -12px rgba(0,0,0,.18);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn--glass::before{ content:none; }
.btn--glass:hover{
  transform:translateY(-3px);
  background:rgba(var(--color-aloe-rgb),.2);
  box-shadow:
    inset 0 1px 0 rgba(var(--color-aloe-rgb),.5),
    inset 0 -12px 16px -12px rgba(0,0,0,.18);
}

.btn__glass-shadow{
  position:absolute; z-index:-1; left:10%; right:10%; bottom:-8px; height:18px;
  background:rgba(0,0,0,.4);
  filter:blur(10px);
  border-radius:999px;
  opacity:.7;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--glass:hover .btn__glass-shadow{ opacity:.9; transform:translateY(3px) scaleX(1.04); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .btn--glass{ background:rgba(0,0,0,.55); }
}

/* Thin-bordered outline button — light text on dark/photo backgrounds,
   fills solid on hover using the same ::before sweep as .btn--primary. */
.btn--outline{ color:var(--color-aloe); border:1px solid rgba(var(--color-aloe-rgb),.7); }
.btn--outline::before{ background:transparent; }
.btn--outline:hover{ color:var(--color-moss); transform:translateY(-3px); }
.btn--outline:hover::before{ background:var(--color-aloe); transform:scale(1); }

.btn--small{ padding:11px 22px; font-size:.68rem; }
.btn--full{ width:100%; }

.btn__label{ position:relative; z-index:1; }

/* magnetic hover handled in JS via inline transform on .btn[data-magnetic] */
[data-magnetic]{ transition:transform var(--dur-instant) var(--ease-out); }

/* ============ PRELOADER — video intro ============
   The video is a centered "logo card" (not fullscreen) — sized to ~65% of
   viewport width, capped at 450px on desktop, matching the source clip's
   own aspect ratio so nothing gets cropped. The dark forest-green backdrop
   (--color-moss) fills the rest of the viewport around it and shows straight
   through the video's near-black background via mix-blend-mode:screen.
   Retime the fade with --dur-slow above, or override just this transition
   here. */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--color-moss);
  overflow:hidden;
  isolation:isolate; /* scope the video's mix-blend-mode to this element's own background only */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(28px, 5vw, 48px);
  transition:opacity var(--dur-slow) var(--ease-in-out), visibility var(--dur-slow);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.preloader__video{
  width:65vw;
  max-width:450px;
  height:auto;
  aspect-ratio:1020 / 720; /* intro1.mp4's native dimensions — keeps it uncropped at any size */
  object-fit:contain;
  background:var(--color-moss);
  /* screen blend mode makes black in the source transparent (the parent's
     --color-moss shows straight through) while leaving white/light pixels
     essentially untouched — but only pixels that are actually pure black
     disappear completely. This clip's background isn't uniformly near-
     black: areas near the glow/lens-flare around the ring read as a
     visibly lighter grey-green, and screen-blending anything short of
     true 0 always lands brighter than the pure-moss backdrop around it —
     that brightness gap is what reads as a rectangular seam. contrast(3)
     is deliberately aggressive: it pushes every pixel hard toward
     whichever extreme (0 or 255) it started closer to, forcing that
     lighter background all the way to true black before the blend ever
     happens, so screen(0, moss) == moss exactly. Tradeoff worth knowing:
     that same aggressiveness can slightly harden the logo's own anti-
     aliased edges (less smooth than at contrast(1.1)) — a reasonable
     trade for actually killing the seam. */
  filter:contrast(3) brightness(0.8) grayscale(1);
  /* Tighter feather than before (opaque core only to 30%, fully gone by
     70%) using an ellipse matched to the box's own aspect ratio, so the
     outer edges/corners — the areas most likely to still show a hint of
     seam — are cropped away entirely rather than partially shown. */
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  mix-blend-mode:screen;
  /* GPU-composited scaling instead of software-rasterized — smoother on
     large/high-resolution displays and avoids repainting the rest of the
     page while the video plays. */
  transform:translateZ(0);
  backface-visibility:hidden;
}

.preloader__vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Plain overlay, no blend mode — sits above everything else in the
     preloader (including the screen-blended video) and darkens by simple
     alpha compositing, so it doesn't interact with or undo the black-to-
     transparent trick above. Center stays fully transparent so the video
     card itself never dims; only the edges/corners darken. */
  background:radial-gradient(circle, transparent 40%, rgba(0,0,0,.65) 100%);
}

/* ============ CLICK-THE-LOGO TO ENTER ============
   Once js/main.js's 'ended' handler on the preloader video fires, it adds
   .video-ended to #preloader itself (also making it the click/keyboard
   target — see initPreloader()). The logo gets a continuous, cinematic
   "breathing" glow — two stacked drop-shadows (a tight bright core plus
   a wide soft bloom) layered onto its existing filter stack, animated
   between a dim-but-never-fully-dark resting state and a brighter peak
   so it never reads as "off" the way a 0-alpha trough would. Because the
   video is mix-blend-mode:screen, that glow blooms straight into the
   moss backdrop around it rather than sitting on top as a flat shadow.
   Cursor switches to a pointer across the whole overlay (the click
   target), and hovering the logo itself speeds the pulse up and swells
   it further plus a very subtle scale, inviting the click. */
.preloader.video-ended{ cursor:pointer; }
.preloader.video-ended:focus-visible{
  outline:1px solid rgba(var(--color-aloe-rgb),.5);
  outline-offset:-10px;
}
.preloader.video-ended .preloader__video{
  animation:preloaderLogoPulse 3.2s var(--ease-in-out) infinite;
  transition:transform var(--dur-fast) var(--ease-out);
}
.preloader.video-ended .preloader__video:hover,
.preloader.video-ended .preloader__video:focus-visible{
  animation:preloaderLogoPulseHover 1.5s var(--ease-in-out) infinite;
  transform:translateZ(0) scale(1.02);
}

@keyframes preloaderLogoPulse{
  0%, 100%{
    filter:contrast(3) brightness(0.82) grayscale(1)
      drop-shadow(0 0 8px rgba(var(--color-aloe-rgb),.25))
      drop-shadow(0 0 26px rgba(var(--color-aloe-rgb),.15));
  }
  50%{
    filter:contrast(3) brightness(0.95) grayscale(1)
      drop-shadow(0 0 18px rgba(var(--color-aloe-rgb),.65))
      drop-shadow(0 0 55px rgba(var(--color-aloe-rgb),.4));
  }
}
@keyframes preloaderLogoPulseHover{
  0%, 100%{
    filter:contrast(3) brightness(0.9) grayscale(1)
      drop-shadow(0 0 14px rgba(var(--color-aloe-rgb),.45))
      drop-shadow(0 0 38px rgba(var(--color-aloe-rgb),.28));
  }
  50%{
    filter:contrast(3) brightness(1.05) grayscale(1)
      drop-shadow(0 0 26px rgba(var(--color-aloe-rgb),.9))
      drop-shadow(0 0 80px rgba(var(--color-aloe-rgb),.55));
  }
}

@media (prefers-reduced-motion: reduce){
  .preloader.video-ended .preloader__video,
  .preloader.video-ended .preloader__video:hover,
  .preloader.video-ended .preloader__video:focus-visible{
    animation:none; transition:none; transform:translateZ(0);
    filter:contrast(3) brightness(0.85) grayscale(1) drop-shadow(0 0 14px rgba(var(--color-aloe-rgb),.4));
  }
}

/* ============ CUSTOM CURSOR (desktop only, decorative) ============ */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--color-olive); pointer-events:none; z-index:9998; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width var(--dur-instant) var(--ease-out), height var(--dur-instant) var(--ease-out), opacity var(--dur-instant);
  opacity:0;
}
.cursor-dot.is-active{ opacity:1; }
.cursor-dot.is-hover{ width:34px; height:34px; }
@media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:26px var(--pad);
  transition:padding var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled{
  padding:14px var(--pad);
  background:rgba(var(--color-moss-rgb),.88);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 30px -18px rgba(var(--color-moss-rgb),.45);
}
.nav__inner{ position:relative; max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:flex-end; gap:34px; }

/* Centered absolutely within the header row, independent of the CTA's width */
.nav__links{
  display:flex; gap:34px;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.nav__links a{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-aloe);
  position:relative; padding-bottom:4px; transition:color var(--dur-fast);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:currentColor;
  transition:width var(--dur-fast) var(--ease-out);
}
.nav__links a:hover::after{ width:100%; }

.nav__burger{ display:none; flex-direction:column; gap:5px; width:26px; z-index:1001; }
.nav__burger span{ height:1.5px; background:var(--color-aloe); transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast), background var(--dur-fast); }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden; color:var(--color-aloe);
  text-align:center;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transform:scale(1.12);
  animation:heroKenBurns 16s var(--ease-in-out) infinite alternate;
}
@keyframes heroKenBurns{ from{ transform:scale(1.12) translateY(0);} to{ transform:scale(1.02) translateY(-1.5%);} }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.72) 100%);
}
.hero__frame{
  position:absolute; inset:18px; border:1px solid rgba(var(--color-aloe-rgb),.35); z-index:2; pointer-events:none;
}
.hero__content{ position:relative; z-index:3; padding:0 24px; max-width:900px; }

.hero__logo{ display:flex; justify-content:center; margin-bottom:28px; }
.hero__logo img{
  width:clamp(96px, 11vw, 148px); height:auto; object-fit:contain;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.35));
}

.hero__title{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:1.06; letter-spacing:.01em; }
.hero__title-line{ display:block; }
.hero__title--script{ font-family:var(--font-script); font-weight:700; font-size:1.5em; margin-top:.05em; }

.hero__sub{ margin-top:26px; font-size:.95rem; letter-spacing:.08em; color:var(--color-aloe); opacity:.85; }

.hero__actions{ margin-top:30px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* Uniform sizing: equal-width buttons (never smaller than their own label),
   sharing one flex row so height/padding/radius all match exactly. */
.hero__actions .btn{ flex:0 0 auto; width:266px; }
.hero__actions .btn__label{ white-space:nowrap; }

.hero__scroll{
  position:absolute; bottom:46px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--color-aloe), transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--color-olive);
  animation:scrollLine 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
.hero__scroll-text{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; opacity:.75; }

.hero__marquee{
  position:absolute; bottom:0; left:0; right:0; z-index:3;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  border-top:1px solid rgba(var(--color-aloe-rgb),.18);
  padding:14px 0; overflow:hidden; white-space:nowrap;
}
.marquee__track{
  display:inline-flex; gap:18px; font-family:var(--font-display); font-style:italic; font-size:1rem;
  letter-spacing:.03em; color:var(--color-aloe);
  animation:marquee var(--dur-marquee) linear infinite;
}
.marquee__track .dot{ color:var(--color-aloe); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ SCROLL-REVEAL BASE STATES ============
   Elements tagged data-anim start hidden; JS adds .is-visible via IntersectionObserver.
   Timing/distance pulled from the tokens above so it's centrally tunable. */
[data-anim]{ transition-timing-function:var(--ease-out); transition-duration:var(--dur-base); transition-property:opacity, transform, clip-path; }

[data-anim="fade-up"]{ opacity:0; transform:translateY(var(--dist-up)); }
[data-anim="fade-up"].is-visible{ opacity:1; transform:translateY(0); }

[data-anim="fade-in"]{ opacity:0; }
[data-anim="fade-in"].is-visible{ opacity:1; }

[data-anim="reveal-mask"]{ position:relative; overflow:hidden; }
[data-anim="reveal-mask"] img{ transform:scale(1.18); opacity:.4; transition:transform 1.3s var(--ease-out), opacity 1.3s var(--ease-out); }
[data-anim="reveal-mask"]::after{
  content:""; position:absolute; inset:0; background:var(--color-cypress); transform-origin:right;
  transform:scaleX(1); transition:transform 1s var(--ease-in-out);
  z-index:1;
}
[data-anim="reveal-mask"].is-visible::after{ transform:scaleX(0); }
[data-anim="reveal-mask"].is-visible img{ transform:scale(1); opacity:1; }
[data-anim="reveal-mask"]:hover img{ transform:scale(1.06); }

[data-anim="card-in"]{ opacity:0; transform:translateY(var(--dist-up)) scale(.97); }
[data-anim="card-in"].is-visible{ opacity:1; transform:translateY(0) scale(1); }

/* ============ HERO HEADING — bubble text hover ============
   Each letter is split into a .char span by initHeroTitle() in
   js/main.js. Hovering a letter highlights it; neighboring letters
   escalate by distance via opacity only (color stays aloe throughout,
   per the strict 5-tone palette), fading back to the heading's resting
   opacity a couple of letters out. Desktop/pointer devices only —
   js/main.js skips the split on touch, so mobile just gets the
   plain heading. */
.hero__title .word{
  display:inline-block; white-space:nowrap; /* keep each word intact when the line wraps */
}
.hero__title .char{
  display:inline-block;
  color:var(--color-aloe);
  opacity:.82;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero__title .char.is-near-2{ opacity:.88; }
.hero__title .char.is-near-1{ opacity:.95; transform:translateY(-.03em); }
.hero__title .char.is-hover{
  opacity:1; font-weight:600; transform:translateY(-.08em) scale(1.1);
}

@media (prefers-reduced-motion: reduce){
  [data-anim], .hero__bg img{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
  .hero__title .char{ transition:none !important; }
}

/* ============ CINEMATIC VIDEO FEATURE — "We Are" ============
   Full-bleed looping background video, dark moss overlay for text
   contrast, content centered on top. js/main.js pauses the video for
   prefers-reduced-motion visitors (first frame just shows as a static
   backdrop instead) — everything else here is pure CSS. */
.video-feature{
  position:relative;
  min-height:80vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  text-align:center;
  color:var(--color-aloe);
}
.video-feature__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
}
.video-feature__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(0,0,0,.45); /* keeps the aloe text high-contrast over any footage */
}
.video-feature__content{
  position:relative; z-index:2;
  max-width:680px;
  padding:min(14vw,120px) 24px;
}
.video-feature .body-lg{ color:var(--color-aloe); margin-top:22px; }
.video-feature .btn{ margin-top:38px; }

/* ============ WHY (split section) ============ */
.why__grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,90px); align-items:center;
}
.why__image{ border-radius:var(--radius); position:relative; aspect-ratio:4/5; }
.why__image img{ width:100%; height:100%; object-fit:cover; }
.why__image-caption{
  position:absolute; left:20px; bottom:20px; z-index:2;
  color:var(--color-aloe); font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  padding:10px 18px; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); border-radius:999px;
}

/* ============ ABOUT (centered editorial layout) ============
   No split/image — eyebrow, a big uppercase serif heading, a narrow
   centered copy block, a 3-column stats row, and a minimal underline
   CTA, all centered on the section. */
.about__centered{ text-align:center; display:flex; flex-direction:column; align-items:center; }

.about__heading{
  margin-top:14px;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.18;
  max-width:820px;
}

.about__copy{ max-width:680px; margin:34px auto 0; }
.about__copy .body{ text-align:center; }
.about__signature{ margin-top:28px; font-family:var(--font-script); font-size:2.2rem; color:var(--color-aloe); }

.about__stats{
  margin-top:clamp(48px, 8vw, 88px);
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(28px, 5vw, 64px);
  width:100%; max-width:980px;
}
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat__num{
  font-family:var(--font-display); font-weight:400; color:var(--color-aloe);
  font-size:clamp(2.8rem, 6vw, 5rem); line-height:1;
}
.stat__plus{ font-size:.55em; vertical-align:.42em; margin-left:.05em; color:var(--color-aloe); opacity:.7; }
.stat__label{
  margin-top:14px; max-width:220px;
  font-family:var(--font-display); font-style:italic; font-size:.98rem;
  color:var(--color-aloe); line-height:1.5;
}

.about__cta{
  margin-top:clamp(40px, 6vw, 64px);
  position:relative;
  font-family:var(--font-body); font-weight:500; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-aloe);
  padding-bottom:6px;
}
.about__cta::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor;
  transform:scaleX(1); transform-origin:left; transition:transform var(--dur-fast) var(--ease-out);
}
.about__cta:hover::after{ transform:scaleX(0); transform-origin:right; }

/* ============ PROCESS ============ */
.process{ background:var(--color-cypress); }
.process__head{ max-width:640px; margin-bottom:56px; }
.process__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,80px); align-items:start; }
.process__image{ aspect-ratio:4/5; border-radius:var(--radius); position:sticky; top:120px; }
.process__image img{ width:100%; height:100%; object-fit:cover; }

.process__list{ display:flex; flex-direction:column; }
.process__item{
  display:flex; gap:28px; align-items:baseline; padding:26px 0; border-bottom:1px solid rgba(var(--color-aloe-rgb),.14);
  transition:padding var(--dur-fast) var(--ease-out);
}
.process__item:first-child{ padding-top:0; }
.process__item:hover{ padding-left:10px; }
.process__num{ font-family:var(--font-display); font-size:1.4rem; color:var(--color-aloe); flex-shrink:0; width:44px; }
.process__item h3{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; color:var(--color-aloe); }
.process__item p{ margin-top:6px; color:var(--color-aloe); opacity:.78; font-size:.95rem; font-weight:300; }

.process__note{ margin-top:56px; max-width:640px; font-style:italic; color:var(--color-aloe); font-family:var(--font-display); font-size:1.2rem; line-height:1.6; }

/* ============ PACKAGES ============ */
.packages__banner{ position:relative; height:58vh; min-height:420px; overflow:hidden; margin-bottom:min(10vw,90px); }
.packages__banner img{ width:100%; height:100%; object-fit:cover; }
.packages__banner-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.65)); }
.packages__banner-text{ position:absolute; left:0; right:0; bottom:56px; text-align:center; z-index:2; padding:0 var(--pad); }

.packages__intro{ max-width:720px; margin-bottom:56px; }

/* ---------- Glassy pricing cards ----------
   Adapted from a "ModernPricingPage / PricingCard" React+Tailwind
   component into plain CSS. Each card is a frosted pane of the page's
   own dark palette (a moss/cypress gradient at low alpha, blurred via
   backdrop-filter) rather than an opaque block, so the section's own
   background subtly shows through. The reference's neon cyan divider,
   ring and badge are replaced with a soft olive → cedar → aloe blend —
   the closest "warm highlight" available inside our strict 5-tone
   palette (aloe stands in for the "soft cream" the brief asked for).
   The featured card gets a brighter border + stronger glow instead of
   the reference's cyan ring. No WebGL shader background was ported —
   decorative noise wasn't part of the brief and doesn't fit a static
   site. */
.package-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.package-card{
  position:relative;
  background:linear-gradient(160deg, rgba(var(--color-cypress-rgb),.34), rgba(var(--color-moss-rgb),.5));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(var(--color-aloe-rgb),.14);
  border-radius:18px;
  padding:38px; overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.package-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -28px rgba(0,0,0,.5); border-color:rgba(var(--color-aloe-rgb),.28); }
.package-card--featured{
  grid-column:span 2;
  background:linear-gradient(160deg, rgba(var(--color-cypress-rgb),.46), rgba(var(--color-moss-rgb),.6));
  border-color:rgba(var(--color-cedar-rgb),.4);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
}
.package-card--featured:hover{ border-color:rgba(var(--color-cedar-rgb),.6); box-shadow:0 34px 80px -26px rgba(0,0,0,.6); }

.package-card__ribbon{
  position:absolute; top:22px; right:-34px;
  background:linear-gradient(135deg, var(--color-olive), var(--color-cedar));
  color:var(--color-moss);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:6px 40px; transform:rotate(38deg);
  font-weight:600;
}

.package-card__tag{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-aloe); opacity:.65; }
.package-card__head{ position:relative; margin-bottom:18px; padding-bottom:20px; }
.package-card__head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(var(--color-olive-rgb),.5) 18%,
    rgba(var(--color-cedar-rgb),.65) 50%,
    rgba(var(--color-aloe-rgb),.5) 82%,
    transparent);
}
.package-card__head h3{ font-family:var(--font-display); font-size:2rem; font-weight:500; margin-top:6px; color:var(--color-aloe); }
.package-card__head h3 em{ font-style:italic; color:var(--color-cedar); }
.package-card__price{ display:inline-block; margin-top:10px; font-family:var(--font-display); font-size:1.3rem; color:var(--color-cedar); }
.package-card__desc{ font-size:.95rem; color:var(--color-aloe); opacity:.82; font-weight:300; line-height:1.7; margin-bottom:20px; }

.package-card__list{ display:flex; flex-direction:column; gap:10px; }
.package-card__list li{
  position:relative; padding-left:20px; font-size:.9rem; font-weight:300; color:var(--color-aloe); opacity:.82; line-height:1.5;
}
.package-card__list li::before{ content:"—"; position:absolute; left:0; color:var(--color-cedar); opacity:1; }

.package-card__phases{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; }
.package-card__phases h4{ font-family:var(--font-display); font-size:1.15rem; color:var(--color-cedar); margin-bottom:8px; font-weight:500; }
.package-card__phases p{ font-size:.86rem; font-weight:300; color:var(--color-aloe); opacity:.82; line-height:1.6; }

.package-card__footnote{ margin-top:16px; font-size:.78rem; font-style:italic; color:var(--color-aloe); opacity:.6; }

.other-services{ margin-top:70px; }
.other-services__title{ font-family:var(--font-display); font-size:1.7rem; font-weight:500; margin-bottom:28px; color:var(--color-aloe); }
.other-services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.other-service{
  padding:30px; border:1px solid rgba(var(--color-aloe-rgb),.14); border-radius:8px; transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.other-service:hover{ transform:translateY(-6px); border-color:var(--color-olive); }
.other-service__price{ font-size:.72rem; letter-spacing:.1em; color:var(--color-aloe); text-transform:uppercase; font-weight:500; }
.other-service h4{ font-family:var(--font-display); font-size:1.35rem; margin:8px 0 10px; font-weight:500; color:var(--color-aloe); }
.other-service p{ font-size:.88rem; color:var(--color-aloe); opacity:.78; font-weight:300; line-height:1.65; }

/* ============ COUPLES — interactive image accordion ============
   4 panels in a flex row, each flex-grow:1 at rest. Hovering (desktop),
   focusing (keyboard), or tapping (touch, via .is-active toggled in
   js/main.js) grows that panel to flex-grow:5 and the others yield —
   width is purely a flex-grow transition, no JS layout math needed.
   Collapsed panels show a rotated name label; the active panel fades in
   its full text block over the same cover photo. The scrim is a plain
   neutral black gradient (never tinted) so the photography stays true
   to its own color, per the "no green over media" rule established
   elsewhere in this stylesheet. */
.couples__head{ max-width:680px; margin-bottom:min(10vw,90px); }

.couples-accordion{
  display:flex; gap:14px;
  height:min(58vw, 560px);
}

.couple-panel{
  position:relative;
  flex:1 1 0%;
  min-width:0;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  outline:none;
  transition:flex-grow var(--dur-base) var(--ease-out);
}
.couple-panel:hover,
.couple-panel:focus-within,
.couple-panel.is-active{
  flex-grow:5;
}
.couple-panel:focus-visible{ box-shadow:inset 0 0 0 2px rgba(var(--color-aloe-rgb),.6); }

.couple-panel__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
}

.couple-panel__scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 42%, transparent 62%);
  transition:background var(--dur-base) var(--ease-out);
}
.couple-panel:hover .couple-panel__scrim,
.couple-panel:focus-within .couple-panel__scrim,
.couple-panel.is-active .couple-panel__scrim{
  background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 55%, transparent 80%);
}

.couple-panel__label{
  position:absolute; left:50%; bottom:70px;
  transform:translateX(-50%) rotate(-90deg);
  transform-origin:center;
  white-space:nowrap;
  font-family:var(--font-display); font-style:italic; font-size:1.05rem; font-weight:500;
  color:var(--color-aloe);
  letter-spacing:.02em;
  transition:opacity var(--dur-fast) var(--ease-out);
  pointer-events:none;
}
.couple-panel:hover .couple-panel__label,
.couple-panel:focus-within .couple-panel__label,
.couple-panel.is-active .couple-panel__label{
  opacity:0;
}

.couple-panel__content{
  position:absolute; left:0; right:0; bottom:0;
  max-height:78%; overflow-y:auto;
  padding:28px 26px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events:none;
}
.couple-panel:hover .couple-panel__content,
.couple-panel:focus-within .couple-panel__content,
.couple-panel.is-active .couple-panel__content{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

.couple-panel__no{ font-family:var(--font-display); font-size:.85rem; color:var(--color-aloe); opacity:.7; letter-spacing:.1em; }
.couple-panel__names{ font-family:var(--font-display); font-size:clamp(1.3rem,2vw,1.7rem); font-weight:400; margin-top:4px; color:var(--color-aloe); }
.couple-panel__names span{ font-style:italic; opacity:.8; margin:0 .12em; }
.couple-panel__venue{ margin-top:8px; font-family:var(--font-body); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-aloe); opacity:.75; }
.couple-panel__quote{ margin-top:14px; font-family:var(--font-display); font-style:italic; font-size:.9rem; line-height:1.6; color:var(--color-aloe); opacity:.92; }
.couple-panel__chapters{ margin-top:10px; font-family:var(--font-body); font-size:.7rem; color:var(--color-aloe); opacity:.65; letter-spacing:.02em; }

/* ============ TESTIMONIALS ============ */
.testimonials{ position:relative; color:var(--color-aloe); overflow:hidden; }
.testimonials__bg{ position:absolute; inset:0; z-index:0; }
.testimonials__bg img{ width:100%; height:100%; object-fit:cover; }
.testimonials .section__inner{ position:relative; z-index:2; }
.testimonials::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.85));
}

.testimonial-carousel{ margin-top:56px; max-width:820px; }
.testimonial-track{ position:relative; min-height:220px; }
.testimonial-slide{
  position:absolute; inset:0;
  opacity:0; transform:translateX(24px);
  transition:opacity var(--dur-carousel) var(--ease-in-out), transform var(--dur-carousel) var(--ease-in-out);
  pointer-events:none;
}
.testimonial-slide.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; position:relative; }
.testimonial-slide__quote{ font-family:var(--font-display); font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.65; font-weight:400; font-style:italic; }
.testimonial-slide footer{ margin-top:26px; display:flex; align-items:center; gap:12px; }
.testimonial-slide__name{ font-family:var(--font-body); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; color:var(--color-aloe); }
.testimonial-slide__role{ font-size:.78rem; color:var(--color-aloe); opacity:.7; }

.testimonial-controls{ display:flex; align-items:center; gap:22px; margin-top:44px; }
.testimonial-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(var(--color-aloe-rgb),.35);
  display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.testimonial-arrow:hover{ background:var(--color-olive); color:var(--color-moss); border-color:var(--color-olive); transform:scale(1.08); }
.testimonial-dots{ display:flex; gap:9px; }
.testimonial-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(var(--color-aloe-rgb),.35); transition:background var(--dur-fast), transform var(--dur-fast); }
.testimonial-dots button.is-active{ background:var(--color-olive); transform:scale(1.3); }

/* ============ CONTACT ============ */
.contact{ background:var(--color-cypress); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); }
.contact__list{ margin-top:32px; display:flex; flex-direction:column; gap:18px; }
.contact__list li{ display:flex; flex-direction:column; gap:2px; }
.contact__label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-aloe); }
.contact__list a, .contact__list span:not(.contact__label){ font-family:var(--font-display); font-size:1.35rem; color:var(--color-aloe); }
.contact__list a{ transition:color var(--dur-fast); border-bottom:1px solid transparent; }
.contact__list a:hover{ color:var(--color-olive); border-color:currentColor; }

.contact__socials{ display:flex; gap:26px; margin-top:40px; }
.contact__socials a{ display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--color-aloe); opacity:.78; transition:color var(--dur-fast), opacity var(--dur-fast), transform var(--dur-fast); }
.contact__socials a:hover{ color:var(--color-olive); opacity:1; transform:translateY(-2px); }
.contact__socials svg{ width:20px; height:20px; }

.contact__form{ display:flex; flex-direction:column; gap:22px; }
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid rgba(var(--color-aloe-rgb),.3);
  padding:12px 2px; font-size:1rem; color:var(--color-aloe); transition:border-color var(--dur-fast);
  resize:none;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--color-olive); }
.field label{
  position:absolute; left:2px; top:12px; font-size:1rem; color:var(--color-aloe); opacity:.78; pointer-events:none;
  transition:transform var(--dur-fast) var(--ease-out), font-size var(--dur-fast) var(--ease-out), color var(--dur-fast), opacity var(--dur-fast);
  transform-origin:left top;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-22px); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-olive); opacity:1;
}
.contact__form-note{ font-size:.85rem; color:var(--color-aloe); min-height:1.2em; }

/* ============ FOOTER ============ */
.footer{ background:var(--color-moss); color:var(--color-aloe); padding:70px var(--pad) 30px; text-align:center; }
.footer__logo{ width:46px; margin:0 auto 18px; opacity:.9; }
.footer__tagline{ font-family:var(--font-display); font-style:italic; font-size:1.2rem; color:var(--color-aloe); }
.footer__bottom{
  margin-top:50px; padding-top:24px; border-top:1px solid rgba(var(--color-aloe-rgb),.12);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:.78rem; opacity:.65;
}
.footer__top{ opacity:1; letter-spacing:.06em; transition:color var(--dur-fast), transform var(--dur-fast); }
.footer__top:hover{ color:var(--color-olive); transform:translateY(-2px); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .why__grid, .process__grid, .contact__grid{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr; gap:40px; }
  .process__image{ position:static; aspect-ratio:16/9; }
  .package-cards{ grid-template-columns:1fr; }
  .package-card--featured{ grid-column:span 1; }
  .package-card__phases{ grid-template-columns:1fr; gap:16px; }
  .other-services__grid{ grid-template-columns:1fr; }
  /* Hover-driven accordions don't translate to touch — stack into a
     simple column of always-expanded photo cards instead. */
  .couples-accordion{ flex-direction:column; height:auto; gap:20px; }
  .couple-panel{ flex:none; height:380px; }
  .couple-panel__label{ display:none; }
  .couple-panel__scrim{ background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 55%, transparent 80%); }
  .couple-panel__content{ opacity:1; transform:none; pointer-events:auto; }
}

@media (max-width: 800px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .nav__links{
    display:flex; flex-direction:column; position:fixed; inset:0; transform:none; padding:120px 40px;
    background:var(--color-moss); z-index:1000; gap:26px;
  }
  .nav.is-open .nav__links a{ color:var(--color-aloe); font-size:1.4rem; }
  .nav.is-open .nav__burger span{ background:var(--color-aloe); }
  .nav.is-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 560px){
  .hero__actions{ flex-direction:column; width:100%; }
  .hero__actions .btn{ flex:none; width:100%; max-width:none; }
  .hero__marquee{ display:none; }
  /* Three full-width stacked buttons can run close to (or past) the fixed-
     position scroll cue on shorter phones — it's decorative, so drop it here
     rather than let it overlap the last button. */
  .hero__scroll{ display:none; }
  .couple-panel{ height:320px; }
}