/* ==========================================================================
   ChinnA's Events: sections.css
   One block per homepage section, in page order.
   ========================================================================== */

/* Shared section header */
.sec-head{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  align-items:end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.sec-head__aside{
  max-width: 34ch;
  color: var(--on-light-muted);
  padding-bottom:.5rem;
}
.sec-head--center{
  grid-template-columns: 1fr;
  justify-items:center;
  text-align:center;
}
@media (max-width: 820px){
  .sec-head{ grid-template-columns:1fr; align-items:start; }
}


/* ==========================================================
   01 · HERO
   ========================================================== */
.hero{
  position:relative;
  min-height: 640px;
  /* min-height, not height: the rail (arrows + counter) and the slide tagline
     must never be clipped on a short laptop screen. */
  min-height: 100vh;
  min-height: 100svh;
  display:grid;
  grid-template-rows: 1fr auto;
  align-items:end;
  padding-block: calc(var(--nav-h) + 3rem) clamp(1.5rem, 4vh, 2.6rem);
  color: var(--on-dark);
  background: var(--ink-deep);
  overflow:hidden;
}

.hero__media{ position:absolute; inset:-2% 0 -6%; z-index:0; will-change:transform; }
.hero__slide{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active{ opacity:1; }
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
  /* Near-natural exposure. Darkness is added only where the type sits (see the
     scrim), not as a veil over the whole photograph. */
  filter: saturate(.96) contrast(1.04) brightness(.92);
}
.hero__slide.is-active img{ animation: kenburns 9.5s linear forwards; }
@keyframes kenburns{ from{ transform: scale(1.06); } to{ transform: scale(1.16); } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    /* Shade only where it's needed: the text column on the left, a band under
       the nav, and the bottom rail. The middle and right, where the couple and
       the palace are, stay close to the photograph's own light. */
    linear-gradient(to right,  rgba(10,10,9,.84) 0%, rgba(10,10,9,.70) 28%, rgba(10,10,9,.38) 50%, rgba(10,10,9,.06) 72%, rgba(10,10,9,.10) 100%),
    linear-gradient(to bottom, rgba(10,10,9,.55) 0%, rgba(10,10,9,.05) 22%, rgba(10,10,9,.08) 60%, rgba(10,10,9,.75) 100%),
    /* Sits on the text block itself (not the screen edge), so it still covers
       the copy on wide screens where the centred container moves inward. */
    radial-gradient(55% 60% at 32% 52%, rgba(10,10,9,.48) 0%, rgba(10,10,9,0) 75%);
}

@media (max-width: 700px){
  .hero__scrim{
    background: linear-gradient(to bottom, rgba(10,10,9,.66) 0%, rgba(10,10,9,.48) 34%, rgba(10,10,9,.56) 64%, rgba(10,10,9,.88) 100%);
  }
}

/* Fine film grain, barely there, but it stops the gradients banding and
   pushes the whole frame towards "cinema still" rather than "stock photo". */
.hero__grain{
  position:absolute; inset:0;
  opacity:.04;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__body{ position:relative; z-index:2; padding-bottom: clamp(1.5rem, 5vh, 4rem); }
.hero__eyebrow{ color: var(--gold-soft); text-shadow: 0 1px 10px rgba(0,0,0,.6); }

.hero__title{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(2.7rem, 7.4vw, 6.6rem);
  line-height: .95;
  letter-spacing: -.015em;
  /* Wide enough that "Crafting Moments." holds one line at weight 500. */
  max-width: 19ch;
  /* A wide halo lifts the headline off the photograph; the tight shadow gives
     each letter an edge where it crosses bright gold or white. */
  text-shadow: 0 2px 26px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}
.hero__title em{ font-style:italic; color: var(--gold-soft); }

/* Rotates with the hero slide, one line per slide, set by initHero. */
.hero__tagline{
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--serif); font-weight:500; font-style:italic;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height:1.3;
  color: var(--gold-soft);
  text-shadow: 0 2px 20px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35);
  transition: opacity .45s var(--ease);
}
.hero__tagline span{ display:block; }
.hero__tagline.is-swapping{ opacity:0; }

.hero__lede{
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 40ch;
  font-size: clamp(1.08rem, .45vw + .98rem, 1.28rem);
  color: rgba(241,236,228,.94);
  text-shadow: 0 1px 14px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.35);
  opacity:0; transform: translateY(18px);
  transition: opacity .9s var(--ease) .75s, transform .9s var(--ease) .75s;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  opacity:0; transform: translateY(18px);
  transition: opacity .9s var(--ease) .92s, transform .9s var(--ease) .92s;
}
/* The hero carries one call to action, so it can afford to be larger. */
.hero__cta .btn{ padding: 1.2rem 2.6rem; font-size:.82rem; }

.is-ready .hero__lede,
.is-ready .hero__cta,
html.no-js .hero__lede,
html.no-js .hero__cta{ opacity:1; transform:none; }

.hero__foot{ position:relative; z-index:2; }

/* Hairline rail that gives the frame a base: scroll cue left, slide counter right */
.hero__bar{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-top: clamp(.9rem, 1.6vh, 1.35rem);
  border-top:1px solid rgba(241,236,228,.18);
}

/* Manual slide controls, sat on the hero's bottom rail. */
/* Sits with the counter on the right, not stranded mid-rail. */
.hero__nav{ display:flex; gap:.6rem; margin-left:auto; margin-right: clamp(1rem, 2.5vw, 2.25rem); }
.hbtn{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.95rem;
  color: var(--gold-soft);
  border:1px solid rgba(241,236,228,.28);
  background: rgba(10,10,9,.25);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: color .35s var(--ease), background-color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.hbtn:hover{ color: var(--ink); background: var(--gold); border-color: var(--gold); }
.hbtn[data-hero="prev"]:hover{ transform: translateX(-3px); }
.hbtn[data-hero="next"]:hover{ transform: translateX(3px); }
.hbtn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.hero__counter{
  display:flex; align-items:center; gap:1rem;
  font-size:.75rem; font-weight:500; letter-spacing:.2em;
  color: rgba(241,236,228,.6);
}
.hero__index{ color: var(--gold-soft); }
.hero__track{ display:block; width: clamp(60px, 10vw, 120px); height:1px; background: rgba(241,236,228,.2); }
.hero__track i{ display:block; height:100%; width:0; background: var(--gold); }

@media (max-width: 700px){
  .hero__counter{ display:none; }
  /* Drop the leading rule so the eyebrow fits on one line on phones. */
  .hero__eyebrow::before{ display:none; }
  .hbtn{ width:38px; height:38px; }
  .hero__cta .btn{ flex:1 1 auto; }
}


/* ==========================================================
   02 · INTRO / TRUST
   ========================================================== */
.intro{ position:relative; background: var(--ivory); }

.intro__edge{
  position:absolute; left: calc(var(--gutter) / 2.6); top:50%;
  transform: rotate(-90deg) translateX(50%);
  transform-origin: left center;
  font-size:.75rem; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase;
  color: rgba(23,23,23,.3);
  white-space:nowrap;
}
@media (max-width: 1280px){ .intro__edge{ display:none; } }

.intro__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  /* Centring the short text column against the tall editorial image
     keeps the section balanced instead of leaving a void bottom-right. */
  align-items:center;
}

.intro__media{ grid-column: 1 / span 6; position:relative; padding-bottom: 4rem; }
.intro__figA{
  position:relative; overflow:hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream);
}
.intro__figA img{ width:100%; height:100%; object-fit:cover; }

.intro__figB{
  position:absolute; right: -8%; bottom:0;
  width: 46%; overflow:hidden;
  aspect-ratio: 3 / 4;
  border: 8px solid var(--ivory);
  background: var(--cream);
}
.intro__figB img{ width:100%; height:100%; object-fit:cover; }

.intro__badge{
  position:absolute; left:-1.5rem; top: 8%;
  display:flex; align-items:center; gap:.85rem;
  background: var(--navy); color: var(--ivory);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  padding: 1rem 1.35rem;
}
.intro__badge b{
  font-family: var(--serif); font-weight:500; font-size:2.4rem; line-height:1;
  color: var(--gold-soft);
}
.intro__badge i{
  font-style:normal; font-size:.75rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.5;
  color: rgba(241,236,228,.72);
}

.intro__text{ grid-column: 8 / span 5; padding-top: clamp(1rem, 5vw, 4.5rem); }
.intro__text p + p{ margin-top:1.25rem; color: var(--on-light-muted); }
.intro__text .lede{ color: var(--on-light); }
.intro__text .link-arrow{ margin-top:2.5rem; }

@media (max-width: 1024px){
  .intro__media{ grid-column: 1 / span 7; }
  .intro__text{ grid-column: 8 / span 5; padding-top:0; }
}
@media (max-width: 860px){
  /* Collapse to one track, 11 gaps of a 12-column grid overflow a phone. */
  .intro__grid{ grid-template-columns: 1fr; }
  .intro__media{ grid-column: auto; padding-bottom: 4rem; }
  .intro__text{ grid-column: auto; }
  .intro__figB{ right:0; width: 42%; }
  .intro__badge{ left:0; }
}


/* ==========================================================
   03 · STATS
   ========================================================== */
.stats{
  background: var(--navy);
  /* Cormorant's default old-style figures read "1300+" as "I3oo+". */
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.stats__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:0;
}
.stat{
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2.5vw, 2.5rem);
  border-left:1px solid var(--line-dark-soft);
}
.stat:first-child{ border-left:0; padding-left:0; }

.stat__num{
  /* Fixed box + bottom alignment so every label starts on the same line,
     including the non-numeric "End-to-End" stat. */
  display:flex; align-items:flex-end;
  min-height: clamp(2.6rem, 5.4vw, 4.75rem);
  font-family: var(--serif); font-weight:500;
  font-size: clamp(2.6rem, 5.4vw, 4.75rem);
  line-height:1; letter-spacing:-.02em;
}
.stat__num i{ font-style:normal; color: var(--gold); margin-left:.06em; }
.stat__num--word{
  font-size: clamp(1.7rem, 3.1vw, 2.85rem);
  color: var(--gold-soft);
  font-style:italic;
  line-height:1.12;
}
.stat__label{
  display:block; margin-top:1.1rem;
  max-width: 21ch;
  font-size:.78rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  line-height:1.7;
  color: var(--on-dark-muted);
}

@media (max-width: 900px){
  .stats__grid{ grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
  .stat{ border-left:0; padding-inline:0; }
  .stat:nth-child(even){ border-left:1px solid var(--line-dark-soft); padding-left: 1.5rem; }
}


/* ==========================================================
   04 · SERVICES
   ========================================================== */
.services{ background: var(--ivory); }

.services__grid{
  display:grid;
  grid-template-columns: 1fr .68fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items:start;
}

.svc{ border-top:1px solid var(--line-light-soft); }
.svc:last-child{ border-bottom:1px solid var(--line-light-soft); }

.svc a{
  position:relative;
  display:grid;
  grid-template-columns: 3.75rem 1fr auto;
  align-items:center;
  gap: 1rem;
  padding: clamp(.9rem, 1.5vw, 1.15rem) 0;
  transition: padding-left .55s var(--ease), opacity .45s var(--ease), color .4s;
}
.svc a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin:left;
  transition: transform .7s var(--ease);
}
.svc__no{
  font-size:.75rem; font-weight:500; letter-spacing:.2em;
  color: var(--gold);
  transition: opacity .4s;
}
.svc__name{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  line-height:1.24; letter-spacing:-.01em;
}
.svc__go{
  font-size:1rem; color: var(--gold);
  opacity:0; transform: translateX(-10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

@media (hover: hover){
  /* Hovering the list recedes every row but the one under the cursor. */
  .svc-list:hover .svc a{ opacity:.4; }
  .svc-list .svc a:hover{ opacity:1; padding-left: 1.35rem; }
  .svc a:hover::after{ transform: scaleX(1); }
  .svc a:hover .svc__go{ opacity:1; transform:none; }
}
.svc a:focus-visible{ padding-left:1.35rem; }

/* Sticky preview panel */
.svc-visual{
  position:sticky;
  top: calc(var(--nav-h) + 3vh);
}
.svc-visual__frame{
  position:relative;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  background: var(--cream);
}
.svc-visual__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transform: scale(1.04);
  transition: opacity .8s var(--ease), transform 1.4s var(--ease);
}
.svc-visual__img.is-on{ opacity:1; transform: scale(1); }
.svc-visual__cap{
  margin-top:1.1rem;
  font-size:.75rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--on-light-muted);
}

.services__foot{ margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 900px){
  .services__grid{ grid-template-columns: 1fr; }
  .svc-visual{ display:none; }
  .svc a{ grid-template-columns: 2.75rem 1fr auto; }
  .svc__go{ opacity:1; transform:none; }
}


/* ==========================================================
   05 · GALLERY
   ========================================================== */
.gallery{ background: var(--cream); }

.gal{
  columns: 3;
  column-gap: clamp(1rem, 2vw, 2rem);
}
.gal__item{
  break-inside: avoid;
  margin: 0 0 clamp(1.5rem, 3vw, 2.75rem);
  display:inline-block; width:100%;
}
.gal__frame{
  position:relative; overflow:hidden;
  background: var(--champagne);
  aspect-ratio: 4 / 3;
}
.gal__item--tall .gal__frame{ aspect-ratio: 3 / 4; }
.gal__frame::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(13,13,12,.42), rgba(13,13,12,0) 55%);
  opacity:0; transition: opacity .7s var(--ease);
}
.gal__frame img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.3s var(--ease), filter 1s var(--ease);
}
.gal__item figcaption{
  display:flex; flex-direction:column; gap:.3rem;
  padding-top:1.1rem;
}
.gal__type{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height:1.3;
  transition: color .4s;
}
.gal__loc{
  font-size:.74rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--on-light-muted);
}

@media (hover: hover){
  .gal__item:hover .gal__frame img{ transform: scale(1.055); }
  .gal__item:hover .gal__frame::after{ opacity:1; }
  .gal__item:hover .gal__type{ color: var(--gold-deep); }
}

.gallery__foot{ margin-top: clamp(1rem, 2vw, 2rem); }

@media (max-width: 1000px){ .gal{ columns: 2; } }

/* Mobile: swipeable rail */
@media (max-width: 620px){
  .gal{
    columns:auto;
    display:flex;
    gap:1rem;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.5rem;
    /* Bleed to the screen edge, but keep the first card on the page gutter.
       scroll-padding stops snap from swallowing that inset. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .gal::-webkit-scrollbar{ display:none; }
  .gal__item{
    flex: 0 0 76%;
    margin-bottom:0;
    scroll-snap-align:start;
  }
  .gal__frame,
  .gal__item--tall .gal__frame{ aspect-ratio: 3 / 4; }
}


/* ==========================================================
   06 · WHY CHINNA'S EVENTS
   ========================================================== */
.why{ background: var(--ink-deep); color: var(--on-dark); }

.why__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
.why__head{
  grid-column: 1 / span 5;
  position:sticky; top: calc(var(--nav-h) + 4vh);
  align-self:start;
}
.why__head .rule{ background: var(--gold); }
.why__note{
  font-family: var(--serif); font-style:italic; font-weight:500;
  font-size:1.2rem; color: var(--gold-soft);
}

.why__list{ grid-column: 7 / span 6; }
.why__row{
  display:grid;
  grid-template-columns: clamp(4.75rem, 6.2vw, 6.5rem) 1fr;   /* room for the larger numerals */
  gap:1rem;
  padding: clamp(1.6rem, 2.6vw, 2.3rem) 0;
  border-top:1px solid var(--line-dark-soft);
  transition: border-color .5s;
}
.why__row:last-child{ border-bottom:1px solid var(--line-dark-soft); }
.why__no{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(2.4rem, 3.3vw, 3.4rem); line-height:.9;
  letter-spacing:-.01em;
  /* Lining figures: Cormorant's default old-style numerals sit low and make
     "02" read as "o2". */
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  margin-top:-.08em;              /* optically level with the title's cap height */
  color: var(--gold);
  opacity:.9;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.why__title{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height:1.25;
  margin-bottom:.6rem;
}
.why__row p{ color: var(--on-dark-muted); max-width: 46ch; }

@media (hover: hover){
  .why__row:hover .why__no{ opacity:1; transform: translateY(-2px); }
  .why__row:hover{ border-color: rgba(184,155,94,.4); }
}

@media (max-width: 960px){
  /* Same reason as .intro__grid, drop the 12-track grid on narrow screens. */
  .why__grid{ grid-template-columns: 1fr; }
  .why__head{ grid-column: auto; position:static; }
  .why__list{ grid-column: auto; }
}
@media (max-width: 480px){
  .why__row{ grid-template-columns: 3rem 1fr; }
}


/* ==========================================================
   06b · MOMENTS REEL
   Two full-bleed rows of photographs drifting in opposite
   directions, a breather between the text-heavy Why Us and
   Process sections. JS duplicates each row so the loop is
   seamless; without JS (or with reduced motion) the rows sit
   still and scroll by hand. Cream, not ivory, so there is a
   tonal step into Process below.
   ========================================================== */
.reel{
  --reel-h:   clamp(170px, 20vw, 300px);
  --reel-gap: clamp(10px, 1.1vw, 16px);
  background: var(--cream);
  padding-block: clamp(4.5rem, 8vw, 7rem);
  overflow:hidden;
}
.reel .sec-head{ margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }

.reel__rows{ display:flex; flex-direction:column; gap: var(--reel-gap); }

.reel__row{
  overflow:hidden;
  /* Photographs fade in and out at the screen edges instead of being cut. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.reel__track{ display:flex; width:max-content; will-change:transform; }

.reel__item{
  flex:none; margin:0;
  /* Spacing is a trailing margin, not flex gap, so one set is exactly half the
     track and the -50% loop lands without a jump. */
  margin-right: var(--reel-gap);
  height: var(--reel-h);
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-radius: 6px;
  background: var(--champagne);
}
.reel__item--tall{ aspect-ratio: 4 / 5; }
.reel__item img{
  width:100%; height:100%; object-fit:cover;
  filter: var(--img-grade);
  transition: filter .7s var(--ease), transform 1.2s var(--ease);
}

.reel.is-running .reel__row[data-dir="rtl"] .reel__track{ animation: reel-rtl var(--reel-dur, 60s) linear infinite; }
.reel.is-running .reel__row[data-dir="ltr"] .reel__track{ animation: reel-ltr var(--reel-dur, 60s) linear infinite; }
@keyframes reel-rtl{ from{ transform: translate3d(0,0,0); }    to{ transform: translate3d(-50%,0,0); } }
@keyframes reel-ltr{ from{ transform: translate3d(-50%,0,0); } to{ transform: translate3d(0,0,0); } }

/* Hovering a row stops it so a photograph can actually be looked at;
   off-screen, both rows stop to save work. */
.reel.is-paused .reel__track,
.reel__row:hover .reel__track{ animation-play-state: paused; }

@media (hover:hover){
  .reel__item:hover img{ filter: var(--img-grade-off); transform: scale(1.04); }
}

/* Static fallback: no JS or reduced motion, the rows scroll by hand. */
.reel:not(.is-running) .reel__row{ overflow-x:auto; scrollbar-width:none; }
.reel:not(.is-running) .reel__row::-webkit-scrollbar{ display:none; }


/* ==========================================================
   07 · PROCESS
   ========================================================== */
.process{ background: var(--ivory); }

.steps{
  position:relative;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}
.steps__rail{
  position:absolute; top:5px; left:0; right:0; height:1px;
  background: var(--line-light-soft);
  overflow:hidden;
}
.steps__rail i{
  display:block; height:100%; width:0;
  background: var(--gold); opacity:.6;
  transition: width 1.7s var(--ease) .15s;
}
.steps__rail.is-in i{ width:100%; }

.step{ position:relative; padding-top: 3rem; }
.step__dot{
  position:absolute; top:0; left:0;
  width:11px; height:11px; border-radius:50%;
  background: var(--ivory);
  border:1px solid var(--gold);
}
.step__dot::after{
  content:""; position:absolute; inset:3px;
  border-radius:50%; background: var(--gold);
  transform: scale(0);
  transition: transform .5s var(--ease) .5s;
}
.step.is-in .step__dot::after{ transform: scale(1); }

.step__no{
  display:block;
  font-size:.75rem; font-weight:500; letter-spacing:.24em;
  color: var(--gold);
  margin-bottom:.9rem;
}
.step__name{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height:1.15; letter-spacing:-.01em;
  margin-bottom:.85rem;
}
.step p{ color: var(--on-light-muted); max-width: 32ch; }

@media (max-width: 860px){
  .steps{ grid-template-columns:1fr; gap: 2.5rem; padding-left: 2.25rem; }
  .steps__rail{
    top:5px; bottom:0; left:5px; right:auto;
    width:1px; height:auto;
  }
  .steps__rail i{ width:100%; height:0; transition: height 1.7s var(--ease) .15s; }
  .steps__rail.is-in i{ height:100%; width:100%; }
  .step{ padding-top:0; }
  .step__dot{ left: -2.25rem; top:5px; }
  .step p{ max-width:46ch; }
}


/* ==========================================================
   08 · TESTIMONIALS
   Centred-card carousel. The active card comes forward on ivory,
   its neighbours sit either side dimmed, the section always shows
   three endorsements while still reading one at a time.
   ========================================================== */
.quotes{ background: var(--navy); color: var(--on-dark); overflow:hidden; }

/* Stacked, staggered heading: two muted lines lead into one bright one. */
.quotes__head{
  display:flex; flex-direction:column; align-items:center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.quotes__title{
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--serif); font-weight:500;
  line-height:.96; letter-spacing:-.02em;
  text-align:left;
}
.quotes__title span{ display:block; }
.qt-1{ font-size: clamp(1.5rem, 2.4vw, 2.2rem); color: rgba(241,236,228,.45); margin-bottom:.15em; }
.qt-2{ font-size: clamp(3rem, 7.2vw, 6.2rem); color: rgba(241,236,228,.45); }
/* Cormorant defaults to old-style figures, which make "1300+" read as "I3oo+". */
.qt-2 b{ font-weight:500; color: var(--gold-soft); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.qt-3{ font-size: clamp(3rem, 7.2vw, 6.2rem); color: var(--ivory); padding-left:.85em; }

/* All cards share one grid cell, so the track is as tall as the tallest card
   and every card matches it. Position is purely a transform off the centre. */
.ttrack{
  --cw:  clamp(290px, 30vw, 410px);
  --gap: clamp(14px, 1.6vw, 22px);
  display:grid;
  touch-action: pan-y;
}
.tcard{
  --t-head: var(--ivory);
  --t-body: rgba(241,236,228,.72);
  --t-name: var(--ivory);
  --t-meta: rgba(241,236,228,.55);
  --t-acc:  var(--gold-soft);

  grid-area: 1 / 1;
  justify-self:center;
  width: var(--cw);
  display:flex; flex-direction:column;
  padding: clamp(1.75rem, 2.6vw, 2.4rem);
  border-radius: 16px;
  border: 1px solid rgba(241,236,228,.10);
  background: rgba(241,236,228,.05);
  cursor:pointer;
  transition:
    transform .8s var(--ease),
    opacity .6s var(--ease),
    background-color .6s var(--ease),
    border-color .6s var(--ease),
    box-shadow .6s var(--ease);
}
.tcard[data-pos="prev"]  { transform: translateX(calc(-100% - var(--gap))) scale(.96); opacity:.5; z-index:1; }
.tcard[data-pos="next"]  { transform: translateX(calc(100% + var(--gap)))  scale(.96); opacity:.5; z-index:1; }
.tcard[data-pos="hidden"]{ transform: scale(.86); opacity:0; z-index:0; pointer-events:none; }
.tcard[data-pos="active"]{
  --t-head: var(--navy);
  --t-body: rgba(23,23,23,.72);
  --t-name: var(--navy);
  --t-meta: rgba(23,23,23,.55);
  --t-acc:  var(--gold-deep, #8E7442);
  transform:none; opacity:1; z-index:2;
  background: var(--ivory);
  border-color: var(--ivory);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  cursor:default;
}
@media (hover:hover){
  .tcard[data-pos="prev"]:hover,
  .tcard[data-pos="next"]:hover{ opacity:.75; }
}

.tcard__head,
.tcard__body p,
.tcard__name,
.tcard__meta,
.tcard__meta b,
.tcard__avatar{ transition: color .6s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease); }

.tcard__head{
  font-family: var(--serif); font-weight:500;
  font-size: clamp(1.55rem, 2.1vw, 2.05rem);
  line-height:1.1; letter-spacing:-.01em;
  color: var(--t-head);
}
.tcard__body{ margin-top: clamp(.9rem, 1.4vw, 1.15rem); }
.tcard__body p{
  font-size:1rem; line-height:1.72;
  color: var(--t-body);
}

/* Pinned to the base so people and stars line up across the three cards. */
.tcard__person{
  margin-top:auto;
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  display:flex; align-items:center; gap:.85rem;
}
.tcard__avatar{
  flex:none;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--serif); font-size:1.02rem; letter-spacing:.04em;
  color: var(--gold-soft);
  background: rgba(212,187,139,.12);
  border: 1px solid rgba(212,187,139,.42);
}
.tcard[data-pos="active"] .tcard__avatar{ color: var(--ink); background: var(--gold); border-color: var(--gold); }
.tcard__who{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.tcard__name{ font-size:.9rem; font-weight:500; color: var(--t-name); }
.tcard__meta{ font-size:.85rem; color: var(--t-meta); }
.tcard__meta b{ font-weight:500; color: var(--t-acc); }

.tcard__stars{
  margin-top: clamp(1.2rem, 2vw, 1.5rem);
  font-size:.78rem; letter-spacing:.22em;
  color: var(--gold);
}

.tnav{
  display:flex; justify-content:center; gap:.6rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.tbtn{
  width:46px; height:46px; border-radius:10px;
  display:grid; place-items:center;
  font-size:.95rem;
  color: var(--ivory);
  background: rgba(241,236,228,.05);
  border: 1px solid rgba(241,236,228,.16);
  transition: color .35s, background-color .35s, border-color .35s;
}
.tbtn:hover{ color: var(--ink); background: var(--gold); border-color: var(--gold); }

/* Phones: one card with a sliver of each neighbour showing, so it still
   reads as swipeable. */
@media (max-width: 700px){
  .ttrack{ --cw: min(82vw, 340px); }
  .tcard[data-pos="prev"],
  .tcard[data-pos="next"]{ opacity:.35; }
  .qt-3{ padding-left:.5em; }
}


/* ==========================================================
   09 · FINAL CTA
   ========================================================== */
.cta{
  position:relative;
  display:grid; align-items:center;
  min-height: clamp(520px, 78vh, 760px);
  padding-block: clamp(4rem, 8vw, 7rem);
  color: var(--on-dark);
  background: var(--ink-deep);
  overflow:hidden;

  /* Last section in <main>, so this rounds off the whole page: the content
     curves away and the footer behind it shows through the corners. */
  border-bottom-left-radius:  clamp(32px, 4.6vw, 88px);
  border-bottom-right-radius: clamp(32px, 4.6vw, 88px);
  isolation:isolate;            /* keeps the rounded clip crisp over the parallax image */
}
.js.footer-reveal .cta{ box-shadow: 0 26px 60px rgba(0,0,0,.6); }
.cta__media{
  position:absolute; inset:0; z-index:0;
  /* Fixed attachment pins the photograph to the viewport, so the content
     scrolls over a still image. Swap the URL here, not in the markup. */
  background-image:url("https://images.unsplash.com/photo-1708606811579-23b18fc48007?auto=format&fit=crop&w=1920&q=76");
  background-size: cover;
  background-position: center;
  /* Pinned with background-attachment, which repaints on every scroll frame.
     With inertia scrolling that shows, so Lenis pages get the scrolling
     version instead (the parallax look is carried by the hero anyway). */
  background-attachment: fixed;
}
/* iOS Safari renders fixed attachment as scroll and repaints the whole layer
   doing it, so touch and small screens get the normal treatment. */
@media (max-width: 900px), (hover: none){
  .cta__media{ background-attachment: scroll; }
}
.cta__scrim{
  position:absolute; inset:0;
  /* Weighted left so the headline holds, but light enough through the middle
     and right that the venue actually reads. The contact card carries its own
     backdrop, so it does not need the scrim's help. */
  background:
    linear-gradient(to right,  rgba(10,10,9,.82) 0%, rgba(10,10,9,.58) 34%, rgba(10,10,9,.16) 62%, rgba(10,10,9,.28) 100%),
    linear-gradient(to bottom, rgba(10,10,9,.55) 0%, rgba(10,10,9,.18) 38%, rgba(10,10,9,.30) 70%, rgba(10,10,9,.62) 100%);
}

/* Hairline tracing the curved foot of the page. Both the CTA and the footer sit
   at near-black, so the curve needs its own edge to read; the mask fades the
   ring out as it travels up the sides, leaving only the curve lit. */
.cta::after{
  content:"";
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(212,187,139,.55);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 88px, transparent 200px);
          mask-image: linear-gradient(to top, #000 0, #000 88px, transparent 200px);
}
.cta__body{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  align-items:center;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.cta__body .eyebrow{ color: var(--gold-soft); }
.cta__title{ max-width: 15ch; }
.cta__text{
  margin-top: clamp(1.25rem, 2.5vw, 1.9rem);
  max-width: 46ch;
  color: rgba(241,236,228,.88);
}
.cta__actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* Contact card, the reason this section can honestly own id="contact". */
.cta__card{
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  border: 1px solid rgba(212,187,139,.34);
  background: rgba(10,10,9,.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta__card-head{
  font-size:.75rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-soft);
  padding-bottom: clamp(.9rem, 1.6vw, 1.2rem);
  border-bottom: 1px solid rgba(241,236,228,.14);
}
.cta__list{ list-style:none; margin:0; padding:0; }
.cta__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.25rem;
  padding: clamp(.85rem, 1.5vw, 1.05rem) 0;
  border-bottom: 1px solid rgba(241,236,228,.09);
}
.cta__label{
  flex:none;
  font-size:.75rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color: rgba(241,236,228,.64);
}
.cta__value{
  text-align:right;
  font-size:.95rem;
  color: var(--ivory);
  transition: color .35s var(--ease);
}
a.cta__value:hover{ color: var(--gold-soft); }
.cta__value--plain{ color: rgba(241,236,228,.8); }
.cta__note{
  margin-top: clamp(1rem, 1.8vw, 1.35rem);
  font-size:.82rem; line-height:1.6;
  color: rgba(241,236,228,.52);
}

@media (max-width: 940px){
  .cta__body{ grid-template-columns:1fr; gap: clamp(2rem, 5vw, 3rem); }
  .cta__title{ max-width: 18ch; }
  /* Single column: text spans the full width, so a left-weighted scrim leaves
     the right half of every line on bright ceiling. Darken evenly instead. */
  .cta__scrim{
    background:
      linear-gradient(to bottom, rgba(10,10,9,.84) 0%, rgba(10,10,9,.68) 40%, rgba(10,10,9,.54) 70%, rgba(10,10,9,.72) 100%);
  }
}
@media (max-width: 520px){
  .cta__actions .btn{ width:100%; }
  .cta__list li{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .cta__value{ text-align:left; }
}


/* ==========================================================
   11 · SHARED PHOTOGRAPHIC GRADE
   The portfolio is sourced from many shoots, a yellow haldi, a
   gold palace, a purple stage, and side by side they read as a
   stock grab-bag. One grade across every editorial image pulls
   them into a single warm family. Gallery tiles return to full
   colour on hover, so the restraint reads as deliberate.
   The hero keeps its own darker grade and is deliberately excluded.
   ========================================================== */
:root{
  --img-grade:     saturate(.74) contrast(1.06) sepia(.13);
  --img-grade-off: saturate(1)   contrast(1)    sepia(0);
}

.intro__figA img,
.intro__figB img,
.svc-visual__img,
.gal__frame img{ filter: var(--img-grade); }

.svc-visual__img{
  transition: opacity .8s var(--ease), transform 1.4s var(--ease), filter .9s var(--ease);
}
.gal__frame img{
  transition: transform 1.3s var(--ease), filter .9s var(--ease);
}

@media (hover:hover){
  .gal__item:hover .gal__frame img{ filter: var(--img-grade-off); }
}


/* Stats · Google reviews cell ---------------------------------------------
   A fifth stat that is also a link out to the Google profile. */
.stat--google{ display:block; transition: opacity .35s var(--ease); }
.stat--google:hover{ opacity:.85; }
.stat--google:hover .stat__label{ color: var(--ivory); }
.stat__stars{
  display:block; margin-top:.55rem;
  font-size:1rem; letter-spacing:.14em;
  color: var(--gold);
}
.stat__go{ display:inline-block; margin-left:.35rem; color: var(--gold); transition: transform .4s var(--ease); white-space:nowrap; }
.stat--google:hover .stat__go{ transform: translateX(3px); }

/* Five across needs its own steps down to two. */
.stats__grid{ grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px){
  .stats__grid{ grid-template-columns: repeat(3, 1fr); row-gap: clamp(2rem, 4vw, 2.75rem); }
  .stat:nth-child(3n+1){ border-left:0; padding-left:0; }
}
@media (max-width: 900px){
  .stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3n+1){ border-left:1px solid var(--line-dark-soft); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  /* Odd one out on a two-column grid: let it run full width. */
  .stat--google{ grid-column: 1 / -1; border-left:0; padding-left:0; }
}


/* PDF item 16: closing line under the portfolio strip */
.gal-cta{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-light);
  text-align:center;
}
.gal-cta__kicker{
  font-size:.78rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-deep);
}
.gal-cta__line{
  margin-top:.7rem;
  font-family: var(--serif); font-weight:500; font-style:italic;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.15;
  color: var(--navy);
}
.gal-cta .btn{ margin-top: clamp(1.5rem, 2.5vw, 2rem); }

/* PDF item 19: Google reviews link under the testimonials */
.quotes__reviews{ margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align:center; }
.link-arrow--light{ color: var(--gold-soft); }
.link-arrow--light:hover{ color: var(--ivory); }


/* Five steps are tight below laptop widths, fold to a grid, and drop the rail
   that only makes sense on one row. */
@media (max-width: 1100px){
  .steps{ grid-template-columns: repeat(3, 1fr); row-gap: clamp(2rem, 4vw, 3rem); }
  .steps__rail{ display:none; }
}
@media (max-width: 760px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .steps{ grid-template-columns: 1fr; } }


/* Short laptop screens: the hero now carries an eyebrow, a two-line headline, a
   two-line slide tagline, a four-line description, a button AND the rail with
   arrows. Tighten the vertical rhythm so all of it stays above the fold. */
/* Laptops. A 13" screen with browser chrome and a taskbar leaves roughly
   600-680px of viewport, and the hero has to fit the eyebrow, headline,
   tagline, lede, button and bottom rail inside it. Rather than stepping down
   at fixed breakpoints, every size here is also capped in vh, so the block
   shrinks smoothly as the window gets shorter and the closing line of the
   lede is never cut off. */
@media (max-height: 960px) and (min-width: 701px){
  .hero{ padding-block: calc(var(--nav-h) + min(1.5rem, 2.2vh)) min(1.5rem, 2.2vh); }
  .hero__body{ padding-bottom: min(1.25rem, 1.8vh); }
  .hero__title{ font-size: clamp(1.95rem, min(5.6vw, 8.4vh), 4.6rem); }
  .hero__tagline{
    margin-top: min(.8rem, 1.3vh);
    font-size: clamp(1.02rem, min(1.7vw, 2.6vh), 1.5rem);
  }
  .hero__lede{
    margin-top: min(1rem, 1.6vh);
    font-size: clamp(.94rem, min(1.1vw, 2.3vh), 1.125rem);
    max-width: 46ch;
  }
  .hero__cta{ margin-top: min(1.5rem, 2.4vh); }
}
/* Below this the bottom rail itself has to give a little. */
@media (max-height: 700px) and (min-width: 701px){
  .hero__bar{ padding-top: min(.9rem, 1.4vh); }
  .hbtn{ width:34px; height:34px; }
}

/* Small phones (iPhone SE and similar) need the same treatment. */
@media (max-width: 700px) and (max-height: 740px){
  .hero{ padding-block: calc(var(--nav-h) + 1rem) 1rem; }
  .hero__body{ padding-bottom: 1rem; }
  .hero__title{ font-size: clamp(2rem, 9vw, 2.5rem); }
  .hero__tagline{ margin-top: .7rem; font-size: 1.1rem; }
  .hero__lede{ margin-top: .9rem; font-size: 1rem; }
  .hero__cta{ margin-top: 1.25rem; }
}


html.lenis .cta__media{ background-attachment: scroll; }