/* ==========================================================================
   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;
  height: 100vh;
  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,.78) 0%, rgba(10,10,9,.62) 28%, rgba(10,10,9,.30) 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,.40) 0%, rgba(10,10,9,0) 75%);
}

@media (max-width: 700px){
  .hero__scrim{
    background: linear-gradient(to bottom, rgba(10,10,9,.62) 0%, rgba(10,10,9,.36) 34%, rgba(10,10,9,.46) 64%, rgba(10,10,9,.86) 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:300;
  font-size: clamp(2.85rem, 8.2vw, 7.4rem);
  line-height: .95;
  letter-spacing: -.022em;
  max-width: 15ch;
  /* A soft halo keeps the headline crisp now the photograph is brighter. */
  text-shadow: 0 2px 30px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.28);
}
.hero__title em{ font-style:italic; color: var(--gold-soft); }

.hero__lede{
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 52ch;
  font-size: clamp(1rem, .45vw + .9rem, 1.15rem);
  color: rgba(241,236,228,.94);
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
  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;
}
.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 and holds the three meta items */
.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);
}

.hero__caption{
  font-size:.64rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color: rgba(241,236,228,.58);
  transition: opacity .5s var(--ease);
}
.hero__caption.is-swapping{ opacity:0; }

.hero__counter{
  display:flex; align-items:center; gap:1rem;
  font-size:.68rem; 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: 900px){
  .hero__caption{ display:none; }
}
@media (max-width: 700px){
  .hero__counter{ display:none; }
  .hero__bar{ justify-content:center; }
  .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:.6rem; 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:300; font-size:2.4rem; line-height:1;
  color: var(--gold-soft);
}
.intro__badge i{
  font-style:normal; font-size:.6rem; 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 "1500+" as "I5oo+". */
  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:300;
  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:.7rem; 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:.66rem; font-weight:500; letter-spacing:.2em;
  color: var(--gold);
  transition: opacity .4s;
}
.svc__name{
  font-family: var(--serif); font-weight:300;
  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:.66rem; 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:400;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height:1.3;
  transition: color .4s;
}
.gal__loc{
  font-size:.64rem; 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:300;
  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:300;
  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:400;
  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(4, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.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:.66rem; font-weight:500; letter-spacing:.24em;
  color: var(--gold);
  margin-bottom:.9rem;
}
.step__name{
  font-family: var(--serif); font-weight:300;
  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:300;
  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 "1500+" read as "I5oo+". */
.qt-2 b{ font-weight:300; 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:400;
  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:.92rem; 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:.78rem; 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;
  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:.66rem; 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:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color: rgba(241,236,228,.5);
}
.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:.72rem; 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); }
}