/* ════════════════════════════════════════════════════════════
   CHANRI · MULTI-PAGE COMPONENTS
   Loaded after main.css on every page.
   ════════════════════════════════════════════════════════════ */

/* ---------- NAV · active state + mobile drawer ---------- */
.nav-links a.on{color:var(--mocha)}
.nav-links a:not(.nav-cta).on::after{width:100%}
nav:not(.scrolled) .nav-links a.on{color:#fff}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:.62rem;color:var(--espresso)}
nav:not(.scrolled) .nav-burger{color:#fff}
/* Mobile nav is a dropdown sheet under the bar, not a side drawer: `nav` carries a
   backdrop-filter, which makes it the containing block for fixed descendants — a
   position:fixed drawer gets trapped and clipped inside the 66px bar. Absolute
   positioning under the bar sidesteps that entirely. */
@media(max-width:900px){
  .nav-burger{display:flex;align-items:center}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.4rem 1.4rem 1.3rem;
    background:rgba(250,239,220,.985);
    border-bottom:1px solid rgba(140,110,85,.14);
    box-shadow:0 30px 50px rgba(43,39,36,.18);
    opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none;
    transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s;
    display:flex}
  .nav-links.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s}
  .nav-links a{font-size:1.02rem;padding:.8rem .2rem;border-bottom:1px solid rgba(140,110,85,.1)}
  .nav-links a:not(.nav-cta)::after{display:none}
  nav:not(.scrolled) .nav-links a:not(.nav-cta){color:var(--espresso)}
  nav:not(.scrolled) .nav-links a.on{color:var(--mocha)}
  .nav-links .nav-cta{margin-top:1rem;border-bottom:none;text-align:center;padding:.7rem 1.3rem}
  nav:not(.scrolled) .nav-cta{background:var(--espresso);color:var(--ivory)!important;border-color:var(--espresso)}
}

/* ---------- PAGE HERO · inner pages ---------- */
.page-hero{position:relative;background:var(--espresso);padding:10.5rem 5% 5rem;text-align:center;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(90% 120% at 50% 0%,rgba(201,168,106,.16),transparent 62%);pointer-events:none}

/* Photographic page heroes.
   A single flat dim across the whole image — no localised pooling, no text
   shadows. The image itself is darkened evenly so the headline reads cleanly
   against it, which keeps the photograph looking like a photograph. */
.page-hero.has-img{
  background-image:var(--hero-img);
  background-size:cover;
  background-position:var(--hero-pos,center);
  background-repeat:no-repeat;
  min-height:clamp(430px,54vh,580px);
  display:flex;align-items:center;justify-content:center;
}
/* --dim = uniform darkening, tuned per image.
   The vertical gradient on top is only a slight lift at the very top and
   bottom edges, so the nav and the section seam below stay clean. */
.page-hero.has-img::before{
  background:
    linear-gradient(180deg,
      rgba(20,17,15,.28) 0%,
      rgba(20,17,15,0) 22%,
      rgba(20,17,15,0) 78%,
      rgba(20,17,15,.24) 100%),
    linear-gradient(rgba(20,17,15,var(--dim,.5)),rgba(20,17,15,var(--dim,.5)));
}
.page-hero.has-img p{color:rgba(250,239,220,.94)}
.page-hero.has-img .crumbs{color:rgba(250,239,220,.78)}
/* Brighter gradient on photo heroes — standard gold sits too close in tone to
   warm brick and lamplight. */
.page-hero.has-img h1 em{
  background:linear-gradient(135deg,#F7E4B8,var(--gold) 68%,#EBD59A);
  -webkit-background-clip:text;background-clip:text;
}

/* --dim = how much each photograph is darkened. Tuned per image: the bright
   sunlit walls behind the Salon and Clinic headlines need more than the
   already-dark night exterior on Contact. */

.hero-team{--hero-img:url('../assets/images/hero/team.jpeg');--hero-pos:center 40%;--dim:.55}
/* Salon and Clinic are shot against bright sunlit walls that sit directly
   behind the headline, so they need noticeably more dim than the others. */
.hero-salon{--hero-img:url('../assets/images/hero/salon.png');--hero-pos:center 34%;--dim:.76}
.hero-clinic{--hero-img:url('../assets/images/hero/clinic.png');--hero-pos:center 44%;--dim:.82}
.hero-gallery{--hero-img:url('../assets/images/hero/gallery.png');--hero-pos:center 32%;--dim:.42}
/* night exterior — already dark, needs the least */
.hero-contact{--hero-img:url('../assets/images/hero/contact.png');--hero-pos:center 46%;--dim:.46}

@media(max-width:768px){
  .page-hero.has-img{min-height:400px;padding-top:9rem}
  .hero-team{--hero-pos:center 38%}
  /* On a phone the hero shows only the middle ~half of these landscape photos,
     which is empty wall in each. Shift the horizontal focus to the subject:
     salon stylist sits left, clinic doctor and gallery portrait sit right. */
  .hero-salon{--hero-pos:18% 40%}
  .hero-clinic{--hero-pos:92% 42%}
  .hero-gallery{--hero-pos:100% 38%}
}
.page-hero::after{content:'';position:absolute;left:50%;bottom:0;width:min(760px,86%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(184,153,122,.5),transparent)}
.phero-in{position:relative;max-width:760px;margin:0 auto}
.page-hero .s-ey{color:var(--camel)}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:400;line-height:1.1;color:var(--ivory);margin-bottom:1rem}
.page-hero h1 em{font-style:italic;background:linear-gradient(135deg,var(--gold),#e3c98f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-hero p{font-size:.95rem;line-height:1.85;color:rgba(197,189,177,.7);font-weight:300;max-width:520px;margin:0 auto}
.crumbs{position:relative;margin-bottom:1.3rem;font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(197,189,177,.45)}
.crumbs a{color:var(--camel);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--ivory)}

/* ---------- SPONSORSHIPS & EVENTS BANNER · home ----------
   The photographs are the point of this band, so they are sized large and
   deliberately break out past the section edges. `overflow` stays visible for
   that reason — the ::before glow is inset, so nothing else escapes. */
.promo{position:relative;background:linear-gradient(150deg,var(--espresso) 0%,#3a332e 100%)}
.promo::before{content:'';position:absolute;inset:0;background:radial-gradient(80% 130% at 100% 0%,rgba(201,168,106,.2),transparent 60%);pointer-events:none}
.promo-in{position:relative;max-width:1440px;margin:0 auto;padding:4.5rem 5%;
  display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,2fr);gap:3.2rem;align-items:center}
.promo-copy{position:relative;z-index:2}
.promo-copy .s-ey{color:var(--gold);margin-bottom:.7rem}
.promo-title{font-family:var(--serif);font-size:clamp(1.7rem,3.1vw,2.5rem);font-weight:400;line-height:1.16;color:var(--ivory);margin-bottom:.85rem}
.promo-title em{font-style:italic;background:linear-gradient(135deg,var(--gold),#e3c98f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.promo-text{font-size:.88rem;line-height:1.8;color:rgba(197,189,177,.68);font-weight:300;max-width:400px;margin-bottom:1.5rem}
.promo-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.7rem;border-radius:999px;border:1px solid rgba(201,168,106,.55);background:rgba(201,168,106,.1);color:var(--cream);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;transition:gap .3s var(--ease),background .3s,color .3s,transform .3s var(--ease)}
.promo-cta:hover{gap:1rem;background:var(--gold);color:var(--espresso);border-color:var(--gold);transform:translateY(-2px)}

/* The strip pulls up and down past the band's padding so the photographs
   overhang the sections above and below. */
/* The strip breaks out on three sides: up and down past the band's padding,
   and rightward toward the viewport edge, so the photographs read large
   rather than being boxed inside the text container. */
/* Zig-zag: photo 1 up, photo 2 down, photo 3 up — each clearing the band edge.
   align-items:start puts every photo on the same baseline, then --y does the
   staggering. translateY does not affect layout, so the band height stays
   predictable and only the visual position alternates. */
.promo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;
  margin:-2rem calc(-1 * min(4.5vw, 64px)) -2rem 0;position:relative;z-index:1;
  align-items:start}
.promo-shot{position:relative;height:clamp(280px,30vw,400px);border-radius:18px;overflow:hidden;
  border:1px solid rgba(184,153,122,.22);background:rgba(255,255,255,.04);margin:0;
  box-shadow:0 18px 44px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.18);
  /* --y is the resting offset that fans the three photos; the float
     animation and the hover lift are both expressed relative to it. */
  transform:translateY(var(--y,0px));
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s;
  animation:promoFloat var(--dur,7s) ease-in-out var(--delay,0s) infinite}
.promo-shot:nth-child(1){--y:-60px;--dur:11s;--delay:0s}
.promo-shot:nth-child(2){--y:60px;--dur:9.5s;--delay:-3.4s}
.promo-shot:nth-child(3){--y:-60px;--dur:12s;--delay:-6.8s}
/* the middle photograph sits largest */
.promo-shot:nth-child(2){border-color:rgba(201,168,106,.36)}

@keyframes promoFloat{
  0%,100%{transform:translateY(var(--y,0px))}
  50%{transform:translateY(calc(var(--y,0px) - 6px))}
}

@keyframes promoLift{
  to{transform:translateY(calc(var(--y,0px) - 9px)) scale(1.018)}
}
.promo-shot:hover{animation:promoLift .55s var(--ease) forwards;
  border-color:rgba(201,168,106,.55);
  box-shadow:0 26px 60px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.2);z-index:3}
.promo-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.promo-shot:hover img{transform:scale(1.05)}
.promo-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .7rem;
  background:linear-gradient(to top,rgba(28,25,22,.92),transparent);
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(250,239,220,.9)}

@media(max-width:900px){
  .promo-in{grid-template-columns:1fr;gap:2rem;padding:3.4rem 7% 3.2rem}
  .promo-strip{margin:0;gap:.6rem;align-items:stretch}
  /* :nth-child(n) matches the 0-2-0 specificity of the desktop --y offsets — a bare
     .promo-shot loses that fight and shots 1 & 3 stay lifted 60px over the CTA. */
  .promo-shot:nth-child(n){--y:0px;height:clamp(150px,40vw,240px);animation:none;border-radius:14px}
  .promo-shot figcaption{font-size:.52rem;letter-spacing:.08em;padding:1.4rem .6rem .55rem}
}
@media(prefers-reduced-motion:reduce){
  .promo-shot{animation:none;transform:translateY(var(--y,0px))}
}

/* ---------- PLACEHOLDER SLOTS · awaiting client assets ---------- */
.slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1rem;text-align:center;background:repeating-linear-gradient(45deg,rgba(184,153,122,.08),rgba(184,153,122,.08) 10px,transparent 10px,transparent 20px);border:1px dashed rgba(184,153,122,.45);color:var(--camel)}
.slot b{font-family:var(--serif);font-size:.8rem;font-weight:400;letter-spacing:.03em}
.slot span{font-size:.53rem;letter-spacing:.13em;text-transform:uppercase;opacity:.72}
.slot svg{opacity:.5}
.promo-shot .slot{border-color:rgba(184,153,122,.3)}

/* ---------- HOME · Our Founder ----------
   Portrait beside the quote. The arch echoes the brand mark used across the
   site, and the quote hangs off the image edge so the two feel joined
   rather than parked side by side. */
.about .about-inner{max-width:1100px}
.fdr{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:3.4rem;align-items:center;text-align:left;margin-bottom:1rem}
.fdr-img{position:relative;margin:0;aspect-ratio:4/5;border-radius:200px 200px 22px 22px;overflow:hidden;background:var(--cream);box-shadow:0 26px 60px rgba(43,39,36,.17)}
.fdr-img::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(201,168,106,.42);pointer-events:none}
.fdr-img img{width:100%;height:100%;object-fit:cover;object-position:52% center;display:block;transition:transform 1.1s var(--ease)}
.fdr-img:hover img{transform:scale(1.04)}
/* soft gold wash tying the portrait to the ivory section */
.fdr-img::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(201,168,106,.1) 0%,transparent 34%,rgba(43,39,36,.16) 100%)}
.fdr-copy{position:relative}
.fdr-copy .about-lead{margin:0 0 1.6rem;max-width:none;font-size:clamp(1.35rem,2.4vw,1.95rem)}
/* opening quote mark, set behind the text */
.fdr-copy::before{content:'\201C';position:absolute;left:-2.4rem;top:-2.6rem;font-family:var(--serif);
  font-size:8rem;line-height:1;color:rgba(201,168,106,.16);pointer-events:none}
.fdr-copy .about-body{grid-template-columns:1fr;gap:1rem;max-width:none;margin:1.6rem 0 0;text-align:left}
.fdr-copy .about-sig{font-size:1.15rem}
@media(max-width:900px){
  .fdr{grid-template-columns:1fr;gap:2.2rem;text-align:center}
  .fdr-img{max-width:330px;margin:0 auto;aspect-ratio:4/5}
  .fdr-copy::before{display:none}
  .fdr-copy .about-body{text-align:left}
}

/* ---------- HOME · clinic tiles match salon tiles, darker tone ----------
   Same structure and carousel as the salon panel; the espresso surface and a
   deepened image are what set the clinical side apart. */
.svc-card.clinic.has-img{padding:0 0 2rem;background:var(--espresso)}
.svc-card.clinic.has-img .svc-body{padding:1.7rem 2rem 0;display:flex;flex-direction:column;flex:1}
.svc-card.clinic .svc-img{background:#211d1b}
.svc-card.clinic .svc-img img{filter:none;transition:transform .7s var(--ease),filter .5s}
.svc-card.clinic:hover .svc-img img{filter:brightness(1.04)}
.svc-card.clinic .svc-img::after{background:linear-gradient(180deg,rgba(43,39,36,0) 72%,rgba(43,39,36,.5) 100%)}
.svc-card.clinic.has-img .svc-ic{background:var(--espresso);border-color:rgba(201,168,106,.5);color:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.svc-card.clinic.has-img:hover .svc-ic{background:var(--gold);color:var(--espresso)}
.svc-card.clinic.has-img .svc-name{margin-top:.15rem}

/* The icon badge was set to hang 22px below the image, but .svc-img clips its
   overflow — so nearly half of every icon was being cut off. Sit it fully
   inside the image instead. Applies to both panels so they stay identical. */
.svc-card.has-img .svc-ic{bottom:14px}
.svc-card.has-img .svc-body{padding-top:1.3rem}

/* The category label above each heading was a filled pill, which read as
   highlighted text. Plain lettering instead. */
.svc-card .c-badge{
  background:none;border:0;padding:0;
  margin:0 0 .5rem;letter-spacing:.16em;color:var(--camel);
}
.svc-card.clinic .c-badge{color:var(--gold)}
.svc-card.clinic.has-img .c-badge{margin-top:.35rem}
.svc-card.clinic .slot{background:repeating-linear-gradient(45deg,rgba(201,168,106,.09),rgba(201,168,106,.09) 10px,transparent 10px,transparent 20px);border-color:rgba(201,168,106,.3);color:var(--camel)}

/* ---------- SHARED · section wrapper ---------- */
.sec{padding:6rem 5%;background:var(--ivory)}
.sec.alt{background:#fff}
.sec.dark{background:var(--espresso)}
.sec.dark .s-title{color:var(--ivory)}
.sec.dark .s-title em{font-style:italic;background:linear-gradient(135deg,var(--gold),#e3c98f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec.dark .s-ey{color:var(--camel)}
.sec.dark .div{background:rgba(184,153,122,.4)}
.sec-hd{text-align:center;max-width:660px;margin:0 auto 2.8rem}
.sec-hd .div{margin-left:auto;margin-right:auto}
.sec-lead{font-size:.92rem;line-height:1.85;color:#7a6f68;font-weight:300}
.sec.dark .sec-lead{color:rgba(197,189,177,.66)}

/* ---------- SALON SERVICES · catalog categories (accordion) ---------- */
.cats-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:1.2rem}
.cat{background:#fff;border:1px solid rgba(184,153,122,.2);border-radius:22px;overflow:hidden;box-shadow:0 12px 32px rgba(43,39,36,.05);transition:box-shadow .45s var(--ease),border-color .45s}
.cat:hover{box-shadow:0 22px 48px rgba(43,39,36,.1);border-color:rgba(201,168,106,.4)}
.cat[open]{border-color:rgba(201,168,106,.42);box-shadow:0 22px 48px rgba(43,39,36,.1)}
.cat-hd{display:flex;align-items:center;gap:1.1rem;padding:1.9rem 2.1rem;cursor:pointer;list-style:none;border-bottom:1px solid transparent;transition:border-color .35s,background .35s}
.cat-hd::-webkit-details-marker{display:none}
.cat-hd:hover{background:#FCF8F1}
.cat[open] .cat-hd{border-bottom-color:rgba(184,153,122,.16)}
.cat-hd:focus-visible{outline:2px solid var(--camel);outline-offset:-3px}
.cat-chev{color:var(--camel);flex-shrink:0;transition:transform .4s var(--ease),color .3s}
.cat[open] .cat-chev{transform:rotate(180deg)}
.cat-hd:hover .cat-chev{color:var(--espresso)}
@keyframes catIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cat[open] .cat-body{animation:catIn .42s var(--ease)}
.cat-ic{width:48px;height:48px;min-width:48px;border-radius:50%;border:1px solid rgba(184,153,122,.4);display:flex;align-items:center;justify-content:center;color:var(--mocha);transition:background .35s,color .35s,transform .35s}
.cat:hover .cat-ic{background:var(--mocha);color:#fff;transform:rotate(-6deg)}
.cat-t{flex:1}
.cat-name{font-family:var(--serif);font-size:1.35rem;font-weight:500;color:var(--espresso);line-height:1.2}
.cat-sub{font-size:.78rem;color:#7a6f68;font-weight:300;margin-top:.2rem}
.cat-n{font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;color:var(--camel);border:1px solid rgba(184,153,122,.35);border-radius:999px;padding:.32rem .8rem;white-space:nowrap}
.cat-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:0 1.6rem;padding:1.5rem 2.1rem}
.cat-list li{display:flex;align-items:flex-start;gap:.6rem;padding:.42rem 0;font-size:.85rem;line-height:1.5;color:#5a524d;font-weight:300}
.cat-list li::before{content:'';width:4px;height:4px;min-width:4px;background:var(--camel);border-radius:50%;margin-top:.52rem}
.cat-ft{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.4rem 2.1rem 1.7rem}
.cat-note{font-size:.72rem;color:var(--taupe);font-style:italic}
@media(max-width:640px){
  .cat-hd,.cat-list,.cat-ft{padding-left:1.4rem;padding-right:1.4rem}
  .cat-list{grid-template-columns:1fr}
}

/* ---------- CLINICAL · treatment cards (photo + description) ---------- */
.tx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:1.5rem;max-width:1180px;margin:0 auto}
.tx{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(184,153,122,.2);border-radius:22px;overflow:hidden;box-shadow:0 12px 32px rgba(43,39,36,.06);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.tx:hover{transform:translateY(-7px);box-shadow:0 26px 54px rgba(43,39,36,.15);border-color:rgba(201,168,106,.42)}
.tx-img{position:relative;height:200px;overflow:hidden;background:var(--cream)}
.tx-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.tx:hover .tx-img img{transform:scale(1.07)}
.tx-body{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.7rem 1.7rem}
.tx-badge{align-self:flex-start;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(184,153,122,.16);color:var(--mocha);border:1px solid rgba(184,153,122,.28);border-radius:999px;padding:.22rem .62rem;margin-bottom:.7rem}
.tx-name{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--espresso);margin-bottom:.5rem}
.tx-desc{font-size:.83rem;line-height:1.8;color:#7a6f68;font-weight:300;margin-bottom:.95rem}
.tx-meta{display:flex;flex-wrap:wrap;gap:.3rem}
.tx-book{margin-top:auto;padding-top:1.1rem;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--espresso);text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;transition:gap .25s,color .25s}
.tx-book:hover{gap:.8rem;color:var(--mocha)}

/* ---------- CLINICAL · consultation steps + FAQ ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:1.1rem;max-width:1080px;margin:0 auto}
.step-c{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(184,153,122,.18);border-radius:20px;padding:2rem 1.6rem 1.7rem;transition:transform .5s var(--ease),background .5s,border-color .5s}
.step-c:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(201,168,106,.45)}
.step-n{font-family:var(--serif);font-size:2.3rem;background:linear-gradient(135deg,var(--gold),var(--camel));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:.6rem}
.step-t{font-family:var(--serif);font-size:1.02rem;color:var(--ivory);margin-bottom:.4rem}
.step-d{font-size:.79rem;line-height:1.7;color:rgba(197,189,177,.6);font-weight:300}
.faqs{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem}
.faq{background:#fff;border:1px solid rgba(184,153,122,.2);border-radius:16px;overflow:hidden;transition:border-color .35s,box-shadow .35s}
.faq[open]{border-color:rgba(201,168,106,.45);box-shadow:0 14px 32px rgba(43,39,36,.08)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;padding:1.15rem 1.5rem;font-family:var(--serif);font-size:1rem;color:var(--espresso);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--mocha)}
.faq summary::after{content:'+';font-size:1.3rem;color:var(--camel);transition:transform .3s var(--ease);line-height:1}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 1.5rem 1.3rem;font-size:.85rem;line-height:1.85;color:#7a6f68;font-weight:300}

/* ---------- ABOUT · team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1.1rem;max-width:1080px;margin:0 auto}
.tm{background:#fff;border:1px solid rgba(184,153,122,.2);border-radius:22px;overflow:hidden;box-shadow:0 12px 30px rgba(43,39,36,.05);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.tm:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(43,39,36,.14);border-color:rgba(201,168,106,.42)}
.tm-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream)}
.tm-img img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--tm-zoom,1));transition:transform .7s var(--ease)}
.tm:hover .tm-img img{transform:scale(calc(var(--tm-zoom,1) * 1.06))}
/* The founder photograph is landscape and this tile is 4:5, so cover fits it
   by height — leaving no vertical crop and framing her full-length, which
   reads small in a team grid. Zoom toward her face for a proper portrait.
   The hover lift composes on top via the variable above. */
.tm-zoom{--tm-zoom:1.5}
.tm-zoom img{object-position:52% center;transform-origin:53% 26%}
.tm-body{padding:1.3rem 1.4rem 1.5rem;text-align:center}
.tm-name{font-family:var(--serif);font-size:1.06rem;color:var(--espresso);margin-bottom:.22rem}
.tm-role{font-size:.59rem;letter-spacing:.14em;text-transform:uppercase;color:var(--camel)}
.tm-cred{font-size:.69rem;line-height:1.6;color:var(--taupe);margin-top:.5rem;font-weight:300}

/* ---------- ABOUT · sponsored events ----------
   One card per event: photograph, sponsorship role, date and venue, then the
   description. Built to take more entries as the client sends them. */
.ev-list{display:flex;flex-direction:column;gap:1.6rem;max-width:1000px;margin:0 auto}
.ev{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;
  background:#fff;border:1px solid rgba(184,153,122,.2);border-radius:22px;overflow:hidden;
  box-shadow:0 12px 32px rgba(43,39,36,.05);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.ev:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(43,39,36,.12);
  border-color:rgba(201,168,106,.42)}
.ev:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.ev:nth-child(even) .ev-media{order:2}
.ev-media{position:relative;min-height:260px;background:var(--cream);overflow:hidden}
.ev-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.ev:hover .ev-media img{transform:scale(1.05)}
/* Portrait cards (e.g. the Nugasewana TV thumbnail) show whole via contain,
   with the letterbox filled by a blurred, scaled copy of the same image. */
.ev-media--fit img{object-fit:contain;z-index:1}
.ev-media--fit::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--photo) center/cover no-repeat;
  filter:blur(24px) brightness(.9) saturate(1.05);transform:scale(1.25)}
.ev-body{padding:2rem 2.1rem;display:flex;flex-direction:column;justify-content:center}
.ev-role{align-self:flex-start;display:inline-block;font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--espresso);background:linear-gradient(135deg,var(--gold),#e3c98f);
  border-radius:999px;padding:.3rem .8rem;margin-bottom:.85rem;font-weight:500}
.ev-role.secondary{background:none;border:1px solid rgba(201,168,106,.55);color:var(--mocha)}
.ev-name{font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:500;
  color:var(--espresso);line-height:1.2;margin-bottom:.6rem}
.ev-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-bottom:.9rem}
.ev-meta span{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  letter-spacing:.06em;color:var(--camel)}
.ev-meta svg{opacity:.8}
.ev-desc{font-size:.86rem;line-height:1.85;color:#7a6f68;font-weight:300}
@media(max-width:820px){
  .ev,.ev:nth-child(even){grid-template-columns:1fr}
  .ev:nth-child(even) .ev-media{order:0}
  .ev-media{min-height:220px}
  .ev-body{padding:1.6rem 1.5rem}
}

/* ---------- ABOUT · history timeline ---------- */
.tl{position:relative;max-width:720px;margin:0 auto;padding-left:1.6rem}
.tl::before{content:'';position:absolute;left:0;top:.4rem;bottom:.4rem;width:1px;background:linear-gradient(180deg,transparent,var(--camel),transparent)}
.tl-i{position:relative;padding:0 0 2rem .6rem}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:'';position:absolute;left:calc(-1.6rem - 4px);top:.4rem;width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--camel);transition:background .35s,transform .35s}
.tl-i:hover::before{background:var(--gold);transform:scale(1.25)}
.tl-y{font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;color:var(--camel);margin-bottom:.28rem}
.tl-t{font-family:var(--serif);font-size:1.1rem;color:var(--espresso);margin-bottom:.32rem}
.tl-d{font-size:.85rem;line-height:1.8;color:#7a6f68;font-weight:300}

/* ---------- BRANCH TILES · photo backgrounds ----------
   Used by the home "CHANRI Family" row (.sc) only. The photo sits behind a
   dark gradient so the copy stays legible; text flips to ivory.
   The branch cards on About and Contact (.br) used to share this treatment,
   but printing the address over the photo meant the storefront could only
   read at ~19%. They now show the photo as its own banner instead — see
   BRANCH CARDS below. */
.sc.has-bg{
  background-image:
    linear-gradient(180deg,rgba(20,17,15,.66) 0%,rgba(20,17,15,.82) 55%,rgba(20,17,15,.93) 100%),
    var(--branch-img);
  background-size:cover;
  background-position:var(--branch-pos,center);
  background-repeat:no-repeat;
  border-color:rgba(201,168,106,.34);
  overflow:hidden;
}
/* the photo lifts slightly on hover */
.sc.has-bg{transition:transform .45s var(--ease),box-shadow .45s var(--ease),
  border-color .45s,background-size .7s var(--ease)}
.sc.has-bg:hover{background-size:112% auto;border-color:rgba(201,168,106,.6)}
/* the radial hover wash would muddy a photo */
.sc.has-bg::after{display:none}

/* copy on photo tiles */
.sc.has-bg .sc-name{color:var(--ivory)}
.sc.has-bg .sc-loc{color:var(--gold)}
.sc.has-bg a{color:var(--cream)}
.sc.has-bg a::before{background:var(--gold)}
.sc.has-bg a:hover{color:#fff}

/* per-branch artwork */
.b-esthetica{--branch-img:url('../assets/images/locations/CHANRI%20La%20Esthetica.jpg');--branch-pos:center 62%}
.b-brisk{--branch-img:url('../assets/images/locations/CHANRI%20Brisk.jpeg');--branch-pos:center 34%}

/* ---------- BRANCH CARDS ---------- */
.br-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:1.4rem;max-width:1180px;margin:0 auto}
.br{position:relative;background:#fff;border:1px solid rgba(184,153,122,.2);border-radius:22px;padding:0;overflow:hidden;box-shadow:0 12px 32px rgba(43,39,36,.05);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}

/* Storefront banner. The photo gets its own space at full brightness — no
   scrim, no copy on top — so the building is actually recognisable. All the
   text sits below it on white, which is why nothing has to be dimmed. */
.br-photo{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.br-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.br:hover .br-photo img{transform:scale(1.045)}
/* a whisper of shading at the very bottom edge only, so the photo meets the
   white body without a hard seam */
.br-photo::after{content:'';position:absolute;inset:auto 0 0 0;height:32%;pointer-events:none;
  background:linear-gradient(to top,rgba(20,17,15,.16),transparent)}
/* About · Where To Find Us — show each storefront photo in full (contain) and
   fill the letterbox with a blurred copy of the same image (--photo per card).
   Scoped to #branches so the detailed Contact cards keep their cover crop. */
#branches .br-photo img{position:relative;z-index:1;object-fit:contain}
#branches .br-photo::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--photo) center/cover no-repeat;filter:blur(20px) brightness(.92);transform:scale(1.2)}
#branches .br-photo::after{display:none}
.br-in{padding:1.5rem 1.9rem 2rem}
/* 58px left the CHANRI wordmark under the arch illegible — the mark needs
   this much height before the branch name reads at a glance. */
.br-logo{height:78px;width:auto;display:block;margin:0 0 .95rem;
  filter:drop-shadow(0 2px 6px rgba(43,39,36,.09))}
.br-soon .br-in{padding-top:2rem}
.br::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--camel),var(--gold));transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.br:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(43,39,36,.13);border-color:rgba(201,168,106,.42)}
.br:hover::before{transform:scaleY(1)}
.br-tag{display:inline-block;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--camel);border:1px solid rgba(184,153,122,.35);border-radius:999px;padding:.24rem .66rem;margin-bottom:.8rem}
.br-name{font-family:var(--serif);font-size:1.3rem;color:var(--espresso);margin-bottom:.9rem}
.br-rows{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.15rem}
.br-row{display:flex;align-items:flex-start;gap:.7rem;font-size:.85rem;line-height:1.6;color:#5a524d;font-weight:300}
.br-row svg{min-width:15px;margin-top:.24rem;color:var(--camel)}
.br-row a{color:#5a524d;text-decoration:none;transition:color .2s}
.br-row a:hover{color:var(--mocha)}
.br-row b{font-weight:500;color:var(--espresso)}
.br-map{width:100%;height:180px;border:0;border-radius:14px;display:block;filter:grayscale(.18) contrast(1.03);margin-bottom:1.1rem;background:var(--cream)}
.br-soon{border-style:dashed;background:linear-gradient(180deg,#fff,var(--ivory))}
.br-soon .br-name{opacity:.72}
.br-cta{display:inline-flex;align-items:center;gap:.5rem;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--espresso);text-decoration:none;transition:gap .25s,color .25s}
.br-cta:hover{gap:.8rem;color:var(--mocha)}

/* ---------- GALLERY · filter + grid ---------- */
.gf{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;padding:3rem 5% 0;background:var(--ivory)}
.gf-b{font-family:var(--sans);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mocha);background:transparent;border:1px solid rgba(140,110,85,.3);padding:.7rem 1.5rem;border-radius:999px;cursor:pointer;transition:all .3s var(--ease)}
.gf-b:hover{border-color:var(--mocha);color:var(--espresso)}
.gf-b.active{background:var(--espresso);color:var(--ivory);border-color:var(--espresso);transform:translateY(-1px);box-shadow:0 8px 20px rgba(43,39,36,.22)}
.gal-wrap{padding:2.4rem 5% 6rem;background:var(--ivory)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:.8rem;max-width:1180px;margin:0 auto}
.gi{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid rgba(184,153,122,.2);background:var(--cream);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.gi:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(43,39,36,.16)}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.gi:hover img{transform:scale(1.07)}
.gi-cap{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .9rem .75rem;background:linear-gradient(to top,rgba(28,25,22,.88),transparent);opacity:0;transition:opacity .35s}
.gi:hover .gi-cap{opacity:1}
.gi-cap b{display:block;font-family:var(--serif);font-size:.9rem;font-weight:400;color:#fff}
.gi-cap span{font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;color:var(--camel)}
.gi[hidden]{display:none}

/* ---------- CTA band ---------- */
.cta-band{position:relative;background:linear-gradient(150deg,var(--espresso),#3a332e);padding:5rem 5%;text-align:center;overflow:hidden}

/* Floral tracery over the CTA band. The background colour is untouched — the
   pattern sits on top as a faint gold overlay, fading out toward the centre
   so it never competes with the headline or the buttons. */
.cta-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../assets/images/decor/floral.svg') repeat;
  background-size:300px 300px;
  opacity:.13;
  -webkit-mask-image:radial-gradient(ellipse 62% 68% at 50% 50%,transparent 18%,#000 78%);
  mask-image:radial-gradient(ellipse 62% 68% at 50% 50%,transparent 18%,#000 78%);
}
.cta-band > *{position:relative;z-index:1}

/* Same tracery for light sections — the enquiry block on Contact. Weaker,
   because gold on ivory has far less room before it starts to shout. */
.sec.floral{position:relative;overflow:hidden}
.sec.floral::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../assets/images/decor/floral.svg') repeat;
  background-size:300px 300px;
  opacity:.09;
  -webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,transparent 22%,#000 82%);
  mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,transparent 22%,#000 82%);
}
.sec.floral > *{position:relative;z-index:1}
.cta-band .s-title{color:var(--ivory)}
.cta-band .s-title em{font-style:italic;background:linear-gradient(135deg,var(--gold),#e3c98f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-band .s-ey{color:var(--camel)}
.cta-band p{font-size:.9rem;line-height:1.8;color:rgba(197,189,177,.66);font-weight:300;max-width:460px;margin:0 auto 1.9rem}
.cta-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- CONTACT PAGE · form on light background ---------- */
.form-light{background:#fff;border:1px solid rgba(184,153,122,.22);border-radius:22px;padding:1.9rem;box-shadow:0 14px 36px rgba(43,39,36,.06);max-width:560px;margin:0 auto}
.form-light .s-ey{color:var(--mocha)}
.form-light input,.form-light select{width:100%;background:var(--ivory);border:1px solid rgba(184,153,122,.28);color:var(--espresso);padding:.78rem .95rem;font-size:.85rem;outline:none;font-family:var(--sans);border-radius:10px;margin-bottom:.65rem;transition:border-color .25s}
.form-light input::placeholder{color:rgba(140,110,85,.5)}
.form-light input:focus,.form-light select:focus{border-color:var(--camel)}
.form-light .form-btn{border-radius:999px}
.form-note{font-size:.68rem;line-height:1.6;color:var(--taupe);text-align:center;margin-top:.8rem}

/* ---------- HOME · The CHANRI Standard — editorial rows (replaces the pinned .ss) ---------- */
.exp{padding:6.5rem 7% 5rem;
  /* organic botanical accents in the style of the client's supplied reference —
     corner washes + leaf sprigs, centre kept clear so the rows stay legible */
  background:
    url('../assets/images/decor/exp-leaf-tr.svg') no-repeat right -34px top 120px / min(330px,25vw) auto,
    url('../assets/images/decor/exp-leaf-bl.svg') no-repeat left -30px bottom 140px / min(300px,23vw) auto,
    url('../assets/images/decor/exp-blob-tl.svg') no-repeat left 0 top 0 / min(420px,32vw) auto,
    url('../assets/images/decor/exp-blob-br.svg') no-repeat right 0 bottom 0 / min(460px,34vw) auto,
    var(--ivory)}
.exp-head{text-align:center;margin-bottom:1.6rem}
.exp-row{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2.4rem,6vw,6.5rem);align-items:center;max-width:1150px;margin:0 auto;padding:3.6rem 0}
.exp-row+.exp-row{border-top:1px solid rgba(140,110,85,.16)}
.exp-row.rev .exp-img{order:2}
.exp-img{position:relative;margin:0;aspect-ratio:4/5;width:100%;max-width:430px;justify-self:center;border-radius:200px 200px 22px 22px;overflow:hidden;background:var(--cream);box-shadow:0 26px 60px rgba(43,39,36,.14)}
.exp-img::after{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(201,168,106,.42);pointer-events:none}
.exp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.exp-row:hover .exp-img img{transform:scale(1.035)}
.exp-copy{position:relative;padding-top:1.2rem}
.exp-num{position:absolute;top:-1.4rem;right:0;font-family:var(--serif);font-size:clamp(4.6rem,7vw,6.4rem);line-height:1;color:rgba(184,153,122,.14);pointer-events:none;user-select:none}
@supports(-webkit-text-stroke:1px #000){
  .exp-num{color:transparent;-webkit-text-stroke:1px rgba(184,153,122,.3)}
}
.exp-kicker{display:flex;align-items:center;gap:.8rem;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mocha);margin-bottom:1.1rem}
.exp-kicker::before{content:'';width:26px;height:1px;background:var(--camel)}
.exp-title{font-family:var(--serif);font-size:clamp(1.85rem,3.1vw,2.6rem);font-weight:400;line-height:1.1;color:var(--espresso);margin-bottom:1.2rem}
.exp-title em{font-style:italic;color:var(--mocha)}
.exp-desc{font-size:.92rem;line-height:1.85;color:#5a524d;font-weight:300;max-width:470px;margin-bottom:1.4rem}
.exp-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.9rem;padding:0}
.exp-list li{display:flex;align-items:flex-start;gap:.65rem;font-size:.85rem;line-height:1.6;color:#5a524d;font-weight:300}
.exp-list li::before{content:'';width:5px;height:5px;min-width:5px;background:var(--camel);border-radius:50%;margin-top:.45rem}
@media(max-width:900px){
  .exp{padding:5rem 7% 3.5rem}
  .exp-row{grid-template-columns:1fr;gap:2.2rem;padding:3rem 0}
  .exp-row.rev .exp-img{order:0}
  .exp-img{max-width:330px}
  .exp-num{top:-.6rem}
}

/* ---------- HOME · Our Work — expanding gallery panels (replaces the pinned .hgal) ---------- */
.gx{background:var(--espresso);padding:6.5rem 5% 7rem}
.gx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;max-width:1240px;margin:0 auto 2.8rem}
.gx-head .s-ey{color:var(--camel)}
.gx-head .s-title{color:var(--ivory);margin:0}
.gx-head .s-title em{color:var(--camel)}
.gx-strip{display:flex;gap:10px;height:min(70vh,600px);max-width:1240px;margin:0 auto}
.gx-item{position:relative;flex:1;margin:0;overflow:hidden;border-radius:16px;cursor:pointer;outline-offset:3px;transition:flex .85s cubic-bezier(.22,1,.32,1)}
.gx-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.68);transition:filter .85s ease}
.gx-item.on{flex:3.4}
.gx-item.on img{filter:none}
.gx-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(180deg);writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(250,239,220,.85);white-space:nowrap;transition:opacity .45s ease;pointer-events:none}
.gx-item.on .gx-tag{opacity:0}
.gx-cap{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.6rem 1.3rem;background:linear-gradient(to top,rgba(28,25,22,.85),transparent);opacity:0;transform:translateY(10px);transition:opacity .55s ease .22s,transform .55s ease .22s;pointer-events:none}
.gx-item.on .gx-cap{opacity:1;transform:none}
.gx-cap b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:400;color:#fff;margin-bottom:.15rem;white-space:nowrap}
.gx-cap span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--camel);white-space:nowrap}
@media(max-width:768px){
  .gx{padding:4.5rem 6% 5rem}
  .gx-head{flex-direction:column;align-items:flex-start;gap:1.2rem;margin-bottom:2.2rem}
  .gx-strip{flex-direction:column;height:auto;gap:9px}
  .gx-item{flex:none;height:96px;transition:height .7s cubic-bezier(.22,1,.32,1)}
  .gx-item.on{flex:none;height:min(58vh,430px)}
  .gx-tag{writing-mode:horizontal-tb;transform:translate(-50%,-50%)}
}

/* ---------- MOBILE POLISH · R27 ---------- */
@media(max-width:768px){
  /* hero trust line on one line */
  .h-trust{font-size:.58rem;gap:.45rem;margin-top:2.2rem;white-space:nowrap}
  .h-trust span{white-space:nowrap}
  /* ghost numeral: absolute top-right collides with the full-width title on a
     phone — dock it above the kicker instead */
  .exp-num{position:static;display:block;font-size:3.2rem;margin-bottom:.5rem}
}

/* ---------- VIDEO LINKS · Nugasewana (R28) ----------
   Used wherever a sponsorship item opens a YouTube video rather than a photo:
   the About event card banner, the Gallery tile and the home teaser strip.
   The play badge is the affordance — without it a linked photo looks like a
   photo, and nobody clicks. */
a.ev-media,a.gi-link{display:block;text-decoration:none;color:inherit}
a.gi-link{position:absolute;inset:0;z-index:2}
.ev-play{position:absolute;left:50%;top:50%;z-index:3;
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  transform:translate(-50%,-50%);
  background:rgba(20,17,15,.5);border:1px solid rgba(250,239,220,.7);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;
  transition:transform .4s var(--ease),background .3s,border-color .3s,color .3s}
.ev-play svg{margin-left:3px}
a.ev-media:hover .ev-play,a.ev-media:focus-visible .ev-play,
a.gi-link:hover .ev-play,a.gi-link:focus-visible .ev-play,
.promo-shot:hover .ev-play{
  transform:translate(-50%,-50%) scale(1.08);
  background:var(--gold);border-color:var(--gold);color:var(--espresso)}
.ev-play.sm{width:46px;height:46px}
/* On the contained Nugasewana card, tuck the play badge into the top-right
   corner rather than centring it over the portrait. */
.ev-media--fit .ev-play{left:auto;top:14px;right:14px;transform:none}
a.ev-media--fit:hover .ev-play,a.ev-media--fit:focus-visible .ev-play{transform:scale(1.08)}
/* "Watch on YouTube" strip along the bottom of the event banner */
.ev-watch{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:1.6rem .9rem .75rem;text-align:center;
  background:linear-gradient(to top,rgba(20,17,15,.88),transparent);
  font-size:.57rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(250,239,220,.94)}
a.ev-media:focus-visible,a.gi-link:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

/* ---------- MONTHLY PROMOTION POPUP (R29) ----------
   Markup is injected by assets/js/promo.js — see that file to change the
   monthly poster. Sized to the poster's own aspect ratio, so square, portrait
   and story-shaped social stills all sit correctly without cropping. */
/* Scroll-lock while the popup is open. A class (not an inline style) so the
   unlock reverts the root to its exact original state — clearing an inline
   root `overflow` can leave overflow-y computed as hidden via root-overflow
   propagation, which risked freezing the page after the popup closed. */
html.pm-lock{overflow:hidden}
.pm-wrap{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:1.2rem;
  background:rgba(20,17,15,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .32s var(--ease)}
.pm-wrap.on{opacity:1}
.pm-box{position:relative;width:min(430px,100%);max-height:92vh;overflow:auto;
  background:var(--ivory);border:1px solid rgba(201,168,106,.4);border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.985);transition:transform .38s var(--ease);
  scrollbar-width:none}
.pm-box::-webkit-scrollbar{display:none}
.pm-wrap.on .pm-box{transform:none}
.pm-img{width:100%;height:auto;display:block;border-radius:20px 20px 0 0;background:var(--cream)}
.pm-x{position:absolute;top:.7rem;right:.7rem;z-index:2;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(20,17,15,.55);border:1px solid rgba(250,239,220,.45);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .25s,transform .25s var(--ease)}
.pm-x:hover{background:var(--espresso);transform:rotate(90deg)}
.pm-foot{padding:1.15rem 1.3rem 1.35rem;text-align:center}
.pm-cap{font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mocha);margin-bottom:.75rem}
.pm-cta{display:inline-flex!important}
/* dots — only rendered when there is more than one poster to rotate through */
.pm-dots{display:flex;gap:.15rem;justify-content:center;margin:0 0 .9rem}
.pm-dot{width:26px;height:20px;padding:0;border:0;background:transparent;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.pm-dot::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(140,110,85,.32);transition:background .3s,transform .3s}
.pm-dot.on::before{background:var(--mocha);transform:translate(-50%,-50%) scale(1.25)}
@media(max-width:768px){
  .pm-wrap{padding:.8rem}
  .pm-box{width:min(360px,100%);max-height:88vh}
  .pm-foot{padding:1rem 1rem 1.15rem}
  /* 36px is an uncomfortable thumb target on a phone */
  .pm-x{width:44px;height:44px;top:.55rem;right:.55rem}
}
@media(prefers-reduced-motion:reduce){
  .pm-wrap,.pm-box{transition:none}
}

/* ---------- HOME · CLIENT DIARIES · video testimonials (R38) ----------
   The supplied clips are 1080x1920 (9:16), so the cards are built portrait —
   reel-shaped rather than letterboxed into a landscape frame. Nothing loads
   until the visitor presses play: the poster is the only cost on page load. */
.vt{background:var(--ivory);padding:5.5rem 5% 6rem}
.vt-hd{text-align:center;margin-bottom:2.6rem}
.vt-lead{font-size:.88rem;line-height:1.8;color:#7a6f68;font-weight:300;max-width:440px;margin:1.1rem auto 0}
.vt-row{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;max-width:1100px;margin:0 auto}
.vt-card{margin:0;width:min(290px,80vw)}
.vt-frame{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:var(--cream);border:1px solid rgba(184,153,122,.24);
  box-shadow:0 14px 38px rgba(43,39,36,.09);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.vt-card:hover .vt-frame{transform:translateY(-5px);box-shadow:0 26px 54px rgba(43,39,36,.16)}
.vt-frame img,.vt-frame video{width:100%;height:100%;object-fit:cover;display:block}
.vt-frame video{background:#000}
.vt-play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:linear-gradient(to top,rgba(20,17,15,.34),transparent 42%);
  display:grid;place-items:center}
.vt-play .ev-play{position:static;transform:none}
.vt-play:hover .ev-play,.vt-play:focus-visible .ev-play{
  transform:scale(1.08);background:var(--gold);border-color:var(--gold);color:var(--espresso)}
.vt-play:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.vt-cap{padding:.95rem .2rem 0;text-align:center}
.vt-cap b{display:block;font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--espresso)}
.vt-cap span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha)}
@media(max-width:768px){
  .vt{padding:4.5rem 6% 5rem}
  .vt-row{gap:1.2rem}
  .vt-card{width:min(260px,78vw)}
}