/* =========================================================
   Blossom Professional — homepage prototype
   Design tokens — neutral near-black + gold (moxito-style, no green/brown tint)
   ========================================================= */
:root{
  /* color */
  --ink:        #0C0C0B;   /* page background — neutral near-black */
  --ink-soft:   #131312;   /* alt section background */
  --surface:    #181816;   /* card background */
  --line:       rgba(212,181,120,.20);   /* hairline default */
  --line-strong:rgba(212,181,120,.42);   /* hairline hover/active */
  --gold-1:     #EFD8A0;   /* light gold */
  --gold-2:     #C4A05C;   /* deep gold */
  --cream:      #F5F3EC;   /* headings / high-emphasis text / nav */
  --mist:       #ACACA7;   /* body text on dark — neutral grey */
  --mist-dim:   #737371;   /* tertiary text */

  /* type — single sans system */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;

  --fs-hero:    clamp(2.4rem, 1.1rem + 4.8vw, 5rem);
  --fs-h2:      clamp(1.9rem, 1.1rem + 3vw, 3.1rem);
  --fs-h3:      clamp(1.25rem, 1rem + .9vw, 1.55rem);
  --fs-lead:    clamp(1.05rem, .95rem + .4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-eyebrow: .76rem;

  /* space */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-section: clamp(4rem, 3rem + 6vw, 7.5rem);

  --container: 1240px;
  --edge: clamp(1.25rem, .6rem + 3vw, 4rem);

  --radius: 3px;
  --ease: cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(239,216,160,.06), transparent 60%),
    var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   Scroll reveal — three beats, not one flat entrance. The
   heading announces the section first (short, quick rise);
   supporting media follows a beat later; the body content
   settles in last and travels the furthest. The observed
   container (JS toggles .is-visible on it) rarely animates
   itself — the visible motion happens on its own heading /
   body children, which is what actually reads as "the title
   arrived separately from the content" rather than a block
   popping in as one unit.
   ========================================================= */
.section-head > h2,
.about-heading,
.founder-text > h2,
.courses-text > h2,
.split-text > h2,
.book-copy > h2,
.reviews-row h2{
  opacity:0;
  transform:translateY(14px);
  filter:blur(5px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.about-media, .founder-media, .work-slider,
.services-slider, .cert-slider, .warranty-grid,
.courses-media, .split-media, .info-grid, .content-split,
.gallery-strip, .contact-grid, .book-quote{
  opacity:0;
  transform:translateY(30px) scale(.97);
  filter:blur(7px);
  transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  transition-delay:.1s;
}
.section-head > .lead,
.about-body,
.founder-text > *:not(h2),
.courses-text > *:not(h2),
.split-text > *:not(h2),
.text-block,
.terms-list,
.book-copy > *:not(h2),
.reviews-row .lead, .reviews-row .reviews-badge, .reviews-grid{
  opacity:0;
  transform:translateY(24px);
  filter:blur(5px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay:.22s;
}
.section-head.is-visible > h2,
.about-heading.is-visible,
.founder-text.is-visible > h2,
.courses-text.is-visible > h2,
.split-text.is-visible > h2,
.book-copy.is-visible > h2,
.reviews-row.is-visible h2,
.section-head.is-visible > .lead,
.about-body.is-visible,
.founder-text.is-visible > *:not(h2),
.courses-text.is-visible > *:not(h2),
.split-text.is-visible > *:not(h2),
.text-block.is-visible,
.terms-list.is-visible,
.book-copy.is-visible > *:not(h2),
.reviews-row.is-visible .lead, .reviews-row.is-visible .reviews-badge,
.reviews-grid.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.about-media.is-visible, .founder-media.is-visible, .work-slider.is-visible, .work-gallery.is-visible,
.services-slider.is-visible, .cert-slider.is-visible, .warranty-grid.is-visible,
.courses-media.is-visible, .split-media.is-visible, .info-grid.is-visible,
.content-split.is-visible, .gallery-strip.is-visible,
.contact-grid.is-visible, .book-quote.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--edge);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-1);
  margin:0 0 var(--sp-3);
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:linear-gradient(90deg,var(--gold-1),transparent);
}

.gold-text{
  background:linear-gradient(100deg,
    var(--gold-2) 15%, var(--gold-1) 38%,
    #fff6df 48%, var(--gold-1) 58%, var(--gold-2) 85%);
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(239,216,160,.35));
}
.gold-text.shine-play{ animation:goldShine 1.7s cubic-bezier(.22,.8,.25,1) forwards; }
@keyframes goldShine{
  from{ background-position:120% 0; }
  to{ background-position:-10% 0; }
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--cream);
  font-weight:600;
  line-height:1.06;
  margin:0;
  letter-spacing:-0.01em;
}
h2{ font-size:var(--fs-h2); line-height:1.1; }
@keyframes glowPulse{
  0%, 100%{ filter:drop-shadow(0 0 8px rgba(239,216,160,.14)); }
  50%{ filter:drop-shadow(0 0 22px rgba(239,216,160,.32)); }
}
.about-heading h1{ animation:glowPulse 5s ease-in-out infinite; }
.section-head h2, .founder-text h2, .split-text h2, .content-split > h2, .book-copy h2, .reviews-row h2{
  animation:glowPulse 6s ease-in-out infinite;
  animation-delay:-2s;
}
h3{ font-size:var(--fs-h3); font-weight:600; }

p{ margin:0; }
.lead{ font-size:var(--fs-lead); color:var(--mist); max-width:46ch; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:1.05em 1.8em;
  border-radius:1px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
  white-space:nowrap;
}
/* Fixed gold, not the section-scoped --gold-1/--gold-2 — those are tuned
   darker on light sections for text contrast, which made this same button
   look gold in dark sections but muddy brown wherever it sat on a light
   background. A solid-fill button needs one consistent gold everywhere. */
.btn-primary{
  position:relative;
  overflow:hidden;
  background:#D6B677;
  color:#16130A;
  box-shadow:0 0 0 rgba(239,216,160,0);
  transition:background .35s var(--ease), box-shadow .5s var(--ease);
}
.btn-primary::after{
  content:"";
  position:absolute;
  top:-60%; left:-60%;
  width:35%; height:220%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-20deg);
  transition:left .75s cubic-bezier(.22,.8,.25,1);
  pointer-events:none;
}
.btn-primary:hover{ background:#E4C68F; box-shadow:0 0 30px rgba(239,216,160,.55); }
.btn-primary:hover::after{ left:130%; }
.btn-ghost{
  background:transparent;
  color:var(--cream);
  border-color:var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--gold-1); color:var(--gold-1); }
.btn-arrow{ transition:transform .35s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

:focus-visible{
  outline:2px solid var(--gold-1);
  outline-offset:3px;
}

/* =========================================================
   Header — logo + always-visible booking CTA + hamburger
   ========================================================= */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  padding-block:var(--sp-2);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(11,20,15,.88);
  backdrop-filter:blur(10px);
  padding-block:.6rem;
  border-color:var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
}

.wordmark{ display:flex; align-items:center; }
.logo-img{ height:44px; width:auto; display:block; }

.header-actions{ display:flex; align-items:center; gap:var(--sp-3); }
@media(max-width:640px){
  .header-book{ display:none; }
}

.nav-toggle{
  width:46px; height:46px;
  border:1px solid rgba(245,243,236,.4);
  background:rgba(245,243,236,.06);
  border-radius:2px;
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav-toggle:hover{ border-color:#C4A05C; }
/* Built as an SVG rather than three CSS divs — a hairline 2px div under a
   non-integer device pixel ratio rasterizes inconsistently frame to frame
   (one bar reads thicker, or the weight visibly shifts on hover/repaint).
   An SVG stroke renders as one deterministic vector, immune to that. */
.nav-toggle-icon{ overflow:visible; }
.nav-toggle .bar{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .3s var(--ease), opacity .3s var(--ease), stroke .3s var(--ease);
}
.nav-toggle.is-open .bar-1{ transform:translateY(7px) rotate(45deg); stroke:#C4A05C; }
.nav-toggle.is-open .bar-2{ opacity:0; }
.nav-toggle.is-open .bar-3{ transform:translateY(-7px) rotate(-45deg); stroke:#C4A05C; }

/* =========================================================
   Full-screen nav drawer
   ========================================================= */
.nav-drawer{
  position:fixed;
  inset:0;
  z-index:99;
  background:var(--ink);
  display:grid;
  grid-template-columns:1.3fr 1fr;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  overflow-y:auto;
}
.nav-drawer.is-open{ transform:translateX(0); }
.nav-drawer-main{
  padding:clamp(5rem,8vw,6.5rem) var(--edge) var(--sp-5);
  border-right:1px solid var(--line);
  overflow-y:auto;
}
.lang-switch{
  display:flex; align-items:center; gap:.5em;
  margin-bottom:var(--sp-4);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.06em;
}
.lang-switch a{ color:var(--mist-dim); transition:color .3s var(--ease); }
.lang-switch a.is-active{ color:var(--gold-1); }
.lang-switch a:hover{ color:var(--gold-1); }
.lang-switch span{ color:var(--mist-dim); }
.nav-drawer-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.1em;
}
.nav-drawer-list > li > a{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
  font-weight:600;
  color:var(--cream);
  padding:.22em 0;
  transition:color .3s var(--ease);
}
.nav-drawer-list > li > a:hover{ color:var(--gold-1); }
.nav-services{
  list-style:none; margin:.1em 0 .6em; padding:0 0 0 .2em;
  display:grid; gap:.05em;
}
.nav-services a{
  display:block;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--mist);
  padding:.22em 0;
}
.nav-services a:hover{ color:var(--gold-1); }
.nav-services a.is-active{ color:var(--gold-1); }
.nav-drawer-side{
  padding:clamp(5rem,8vw,6.5rem) var(--edge) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-5);
  background:var(--ink-soft);
  overflow-y:auto;
}
@media(max-width:820px){
  .nav-drawer-side{
    padding:var(--sp-4) var(--edge) var(--sp-4);
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--sp-3);
  }
}
.nav-drawer-side .eyebrow{ margin-bottom:var(--sp-2); }
.nav-drawer-side ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6em; }
.nav-drawer-side a{ font-size:var(--fs-small); color:var(--mist); }
.nav-drawer-side a:hover{ color:var(--gold-1); }
.nav-drawer-contact{ font-size:var(--fs-small); }
.nav-drawer-contact p + p{ margin-top:.6em; }

@media(max-width:820px){
  .nav-drawer{ grid-template-columns:1fr; }
  .nav-drawer-main{ border-right:none; border-bottom:1px solid var(--line); }
}

/* =========================================================
   Video block — dark, graded, minimal
   ========================================================= */
.video-block{
  position:relative;
  height:88vh;
  min-height:480px;
  max-height:860px;
  overflow:hidden;
  background:var(--ink);
}
.video-bg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  filter:brightness(.62) contrast(1.18) saturate(.85);
}
.video-block::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,20,15,.65) 0%, rgba(11,20,15,.15) 32%, rgba(11,20,15,.2) 62%, rgba(11,20,15,.85) 100%);
  pointer-events:none;
}
.video-caption{
  position:absolute;
  /* .video-block is edge-to-edge (no .container), so a flat var(--edge)
     inset drifts left of the header logo once the viewport is wider than
     --container and the header's .container starts centering itself.
     This replicates that same centered-container left edge. */
  left:max(var(--edge), calc((100% - var(--container)) / 2 + var(--edge)));
  bottom:var(--sp-5);
  z-index:2;
}
.video-caption .eyebrow{ margin:0; color:var(--cream); }
.video-toggle{
  display:none;
  position:absolute;
  right:max(var(--edge), calc((100% - var(--container)) / 2 + var(--edge)));
  bottom:var(--sp-5);
  z-index:2;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(245,243,236,.5);
  background:rgba(11,20,15,.4);
  backdrop-filter:blur(6px);
  /* Fixed white, not var(--cream) — these glass circles float over photos
     in both dark and light sections; --cream flips to near-black inside
     .section-light and made the arrow disappear against its own dark
     glass backing. */
  color:#F5F3EC;
  align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.video-toggle:hover{ border-color:var(--gold-1); color:var(--gold-1); }
.video-toggle svg{ width:18px; height:18px; }
.video-toggle .icon-play{ display:none; }
.video-block.is-paused .icon-pause{ display:none; }
.video-block.is-paused .icon-play{ display:block; }
@media(min-width:900px){
  .video-toggle{ display:flex; }
}

/* =========================================================
   Section shell
   ========================================================= */
.section{ padding-block:var(--sp-section); }
.section-alt{ background:var(--ink-soft); }

/* Light section variant — same components, warm-paper palette instead of ink.
   Overriding the shared tokens locally means every component (headings, body
   text, hairlines, ghost buttons) adapts automatically without duplicate rules. */
.section-light{
  --ink:        #F5F1E8;
  --ink-soft:   #EEE8D9;
  --surface:    #FFFFFF;
  --line:       rgba(23,20,15,.14);
  --line-strong:rgba(23,20,15,.46);
  --gold-1:     #C9A45C;
  --gold-2:     #9C7830;
  --cream:      #17140F;
  --mist:       #55524A;
  --mist-dim:   #8C887C;
  background:var(--ink);
  /* Re-establish inherited text color here — body sets color:var(--mist) using
     the dark-theme value, and that resolved value inherits straight past this
     section's token overrides unless we set `color` fresh on this element too.
     Without this, plain text and currentColor icons stay dark-theme-pale. */
  color:var(--mist);
}

.section-head{
  display:grid;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}
@media(min-width:900px){
  .section-head{ grid-template-columns:1.1fr .9fr; align-items:end; }
  /* Opt-in override: align-items:end is right when the h2 column holds
     only the heading (it settles onto the lead's baseline). It's wrong
     the moment something else (a stat-highlight, extra content) follows
     the h2 in that same visual column below the section-head — the
     whole column reads as one block, and end-aligning strands it low
     with dead space above. Add this class only where that's the case. */
  .section-head.align-start{ align-items:start; }
  /* When a third element (a stat-highlight) follows the heading in
     source order, it must render directly under the h2 — not after the
     row's full height, which is set by the taller lead column and would
     otherwise strand it below empty space. Named areas put it in the
     heading's own column, second row. */
  .section-head.has-stat{
    grid-template-areas:
      "heading lead"
      "stat    lead";
    grid-template-rows:auto 1fr;
  }
  .section-head.has-stat > h2{ grid-area:heading; }
  .section-head.has-stat > .lead{ grid-area:lead; }
  /* Override .stat-highlight's own margin-top:var(--sp-5) — that spacing
     was tuned for when it stands alone after a full section-head row.
     Nested here, the grid's own row-gap already separates it from the
     heading, so the extra margin just pushed it lower than requested. */
  .section-head.has-stat > .stat-highlight{ grid-area:stat; align-self:start; margin-top:0; }
}

/* =========================================================
   About
   ========================================================= */
.about-grid{
  display:grid;
  gap:var(--sp-4);
  grid-template-areas:
    "heading"
    "media"
    "body";
}
.about-heading{ grid-area:heading; }
.about-media{ grid-area:media; }
.about-body{ grid-area:body; }
.about-body > * + *{ margin-top:var(--sp-3); }
@media(min-width:900px){
  .about-grid{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:
      "heading media"
      "body media";
    align-items:center;
    gap:var(--sp-3) var(--sp-6);
  }
}
.about-media{
  position:relative;
  aspect-ratio:4/5;
  border:1px solid var(--line);
  overflow:hidden;
}
.about-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.about-media:hover img{ transform:scale(1.03); }
.about-media::after{
  content:"";
  position:absolute; top:14px; left:14px;
  width:32px; height:32px;
  border-top:1.5px solid var(--gold-1);
  border-left:1.5px solid var(--gold-1);
  pointer-events:none;
}
.about-heading h1{
  font-size:var(--fs-hero);
  max-width:15ch;
  font-family:var(--font-display);
  color:var(--cream);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.01em;
}
.about-quote{
  margin-top:var(--sp-5);
  padding-left:var(--sp-3);
  border-left:2px solid var(--gold-1);
}
.about-quote p{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-h3);
  color:var(--cream);
  line-height:1.3;
}
.about-quote cite{
  display:block;
  margin-top:var(--sp-2);
  font-style:normal;
  font-size:var(--fs-small);
  color:var(--mist-dim);
  letter-spacing:.04em;
}
.about-actions{
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
  margin-top:var(--sp-5);
}

/* Shared stat row — bordered columns of number + label. Used by Founder
   (4-up) and the Book/Trust block (3-up). */
.stat-row{
  margin-top:var(--sp-6);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}
.stat-row strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--cream);
  font-weight:700;
  margin-bottom:.2em;
}
.stat-row div{ font-size:var(--fs-small); color:var(--mist); }
@media(min-width:640px){
  .founder-stats{ grid-template-columns:repeat(4,1fr); }
}

/* =========================================================
   Warranties — icon cards, light background
   ========================================================= */
.warranty-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-5);
}
@media(min-width:640px){
  .warranty-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-6); }
}
@media(min-width:1000px){
  .warranty-grid{ grid-template-columns:repeat(4,1fr); }
}
.warranty-card .icon-ring, .info-card .icon-ring{
  width:64px; height:64px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.warranty-card svg, .info-card .icon-ring svg{ width:29px; height:29px; color:#D6B677; }
.info-card .icon-ring{ margin-bottom:var(--sp-3); }
.warranty-card h3{
  margin-top:var(--sp-3);
  font-size:1.4rem;
}
.warranty-card p{
  margin-top:.6em;
  font-size:var(--fs-small);
  color:var(--mist);
  max-width:32ch;
}
@media(min-width:1000px){
  .warranty-grid{ border-top:1px solid var(--line); padding-top:var(--sp-6); }
  .warranty-card{
    padding-left:var(--sp-5);
    border-left:1px solid var(--line);
  }
  .warranty-grid > .warranty-card:first-child{ border-left:none; padding-left:0; }
}

/* =========================================================
   Founder — Yulia Skorokhod
   ========================================================= */
.founder-section{ background:var(--ink-soft); }
.founder-grid{
  display:grid;
  gap:var(--sp-6);
}
@media(min-width:900px){
  .founder-grid{ grid-template-columns:.95fr 1.05fr; align-items:center; }
}
.founder-media{
  position:relative;
  aspect-ratio:4/5;
  border:1px solid var(--line);
  overflow:hidden;
}
.founder-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.founder-media:hover img{ transform:scale(1.03); }
.founder-media::after{
  content:"";
  position:absolute; bottom:14px; right:14px;
  width:32px; height:32px;
  border-bottom:1.5px solid var(--gold-1);
  border-right:1.5px solid var(--gold-1);
  pointer-events:none;
}
.founder-text > * + *{ margin-top:var(--sp-3); }
.founder-role{
  font-size:var(--fs-small);
  color:var(--gold-1);
  font-weight:700;
}

/* =========================================================
   Services — full-bleed photo tiles (edge-to-edge, no card chrome)
   ========================================================= */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
}
.service-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-block:var(--sp-4);
}

.services-slider{ position:relative; }
.services-prev, .services-next{ display:none; }

@media(min-width:700px){
  .services-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    cursor:grab;
  }
  .services-grid::-webkit-scrollbar{ display:none; }
  .service-tile{
    flex:0 0 30%;
    padding-block:var(--sp-5);
    border-left:1px solid var(--line);
    scroll-snap-align:start;
  }
  .services-grid > .service-tile:first-child{ border-left:none; }
  .services-prev, .services-next{
    display:flex;
    top:38%;
  }
  .services-prev{ left:calc(var(--edge) * .4); }
  .services-next{ right:calc(var(--edge) * .4); }
}
.service-photo{
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
}
.service-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.service-tile:hover .service-photo img{ transform:scale(1.04); }
.service-tile h3{
  margin-top:var(--sp-4);
  font-size:clamp(1.4rem, 1rem + 1.5vw, 1.8rem);
}
.tile-arrow{
  margin-top:var(--sp-3);
  width:44px; height:44px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.tile-arrow svg{ width:16px; height:16px; }
.service-tile:hover .tile-arrow{ border-color:var(--gold-1); color:var(--gold-1); transform:translateX(2px); }

.services-more{ text-align:center; padding-top:var(--sp-6); }

/* Courses tile — desktop-only preview, not a link yet (no page to send
   it to). Hidden below the grid's own 700px breakpoint rather than the
   site's usual 900px "desktop" cut, so it only ever appears inside the
   horizontal-scroll row, never stacked into the mobile single-column list. */
.service-tile-soon{ cursor:default; }
.service-tile-soon:hover .service-photo img{ transform:none; }
.service-tile-soon:hover .tile-arrow{ border-color:var(--line-strong); color:var(--cream); transform:none; }
@media(max-width:699px){
  .service-tile-soon{ display:none; }
}

/* =========================================================
   Portfolio / Our Work — single-photo slider
   ========================================================= */
.work-slider{
  position:relative;
  height:80vh;
  min-height:420px;
  max-height:760px;
  overflow:hidden;
  background:var(--surface);
}
.work-slider-track{
  display:flex;
  height:100%;
  transition:transform .6s var(--ease);
}
.work-slide{ flex:0 0 100%; height:100%; }
.work-slide img{ width:100%; height:100%; object-fit:cover; }
.work-arrow{
  position:absolute;
  top:50%; translate:0 -50%;
  z-index:2;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(245,243,236,.5);
  background:rgba(11,20,15,.4);
  backdrop-filter:blur(6px);
  /* Fixed white, not var(--cream) — these glass circles float over photos
     in both dark and light sections; --cream flips to near-black inside
     .section-light and made the arrow disappear against its own dark
     glass backing. */
  color:#F5F3EC;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.work-arrow svg{ width:18px; height:18px; }
.work-arrow:hover{ border-color:var(--gold-1); color:var(--gold-1); }
.work-prev{ left:var(--edge); }
.work-next{ right:var(--edge); }
.work-dots{
  display:flex; justify-content:center; gap:.5em;
  margin-top:var(--sp-4);
}
.work-dots button{
  width:8px; height:8px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  padding:0;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.work-dots button.is-active{ background:var(--gold-1); border-color:var(--gold-1); }

/* Certificates have 31 slides vs Our Work's 8 — the shared .work-dots row
   (8px dots, .5em gap) wraps into a ragged multi-row block at that count.
   Dots are also the only visible pager below 900px (arrows are desktop-only,
   see .work-prev/.work-next below), so this can't just be hidden on mobile.
   Shrink + keep to one row; overflow-x is a safety net for the narrowest
   phones where even the shrunk row wouldn't fully fit. */
.cert-dots{
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:.35em;
  overflow-x:auto;
  scrollbar-width:none;
  padding-inline:var(--edge);
  margin-inline:calc(-1 * var(--edge));
}
.cert-dots::-webkit-scrollbar{ display:none; }
.cert-dots button{ width:6px; height:6px; flex-shrink:0; }

/* Desktop: the single-photo slider (built for the narrow mobile viewport,
   matching the client's old-site reference) has too much empty space at
   wide widths — a static full-bleed mosaic reads far better there. */
@media(min-width:900px){
  .work-slider{ height:auto; min-height:0; max-height:none; }
  .work-slider-track{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    transform:none !important;
    transition:none;
  }
  .work-slide{ flex:none; height:auto; aspect-ratio:3/4; }
  .work-prev, .work-next, .work-dots{ display:none; }
}
.gallery-cta{ text-align:center; padding-top:var(--sp-6); }

/* =========================================================
   Achievements — non-clickable diploma strip
   ========================================================= */

/* Paged, zoomable certificate gallery */
.cert-slider{
  position:relative;
  margin-inline:calc(-1 * var(--edge));
  /* Without this, the flex/grid item refuses to shrink below the intrinsic
     width of its (overflowing) content, so cert-track's own overflow-x:auto
     never kicks in locally — the whole section, and the page with it,
     stretches horizontally instead. */
  min-width:0;
}
.cert-track{
  display:flex;
  gap:var(--sp-3);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding-inline:var(--edge);
}
.cert-track::-webkit-scrollbar{ display:none; }
.cert-slide{
  flex:0 0 auto;
  width:150px;
  aspect-ratio:3/4;
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:2px;
  padding:0;
  background:#fff;
  cursor:zoom-in;
  overflow:hidden;
  box-shadow:0 16px 32px -22px rgba(23,20,15,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cert-slide:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -20px rgba(23,20,15,.45); }
.cert-slide img{ width:100%; height:100%; object-fit:cover; }
.cert-prev, .cert-next{ display:none; }

@media(min-width:900px){
  .cert-slider{ margin-inline:0; }
  .cert-track{ padding-inline:0; gap:var(--sp-4); }
  .cert-slide{ width:190px; }
  .cert-prev, .cert-next{ display:flex; top:50%; }
  .cert-prev{ left:-8px; }
  .cert-next{ right:-8px; }
}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,8,7,.92);
  align-items:center; justify-content:center;
  padding:var(--sp-5);
}
.lightbox.is-open{ display:flex; }
.lightbox-img{
  max-width:min(90vw, 720px);
  max-height:86vh;
  width:auto; height:auto;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute; top:var(--sp-4); right:var(--sp-4);
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(245,243,236,.4);
  background:rgba(245,243,236,.06);
  color:#F5F3EC;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.lightbox-close svg{ width:18px; height:18px; }
.lightbox-close:hover{ border-color:var(--gold-1); color:var(--gold-1); }

/* =========================================================
   Reviews
   ========================================================= */
.reviews-row{
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-end;
  gap:var(--sp-4);
  margin-bottom:var(--sp-5);
}
.reviews-badge{ display:flex; align-items:center; gap:.6em; flex-wrap:wrap; }
.reviews-badge strong{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--cream);
  font-weight:700;
}
.reviews-stars{ color:var(--gold-1); letter-spacing:.1em; }
.reviews-badge a{ font-size:var(--fs-small); font-weight:700; color:var(--gold-1); margin-left:.4em; }
.reviews-grid{
  display:grid;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
}
@media(min-width:700px){
  .reviews-grid{ grid-template-columns:repeat(3,1fr); }
}
.review-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--sp-4);
}
.review-card .stars{ color:var(--gold-1); font-size:.8rem; letter-spacing:.15em; }
.review-card p{ margin-top:.8em; font-size:var(--fs-small); color:var(--mist); }
.review-card cite{
  display:block;
  margin-top:var(--sp-3);
  font-style:normal;
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--cream);
}
.reviews-placeholder{
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  padding:var(--sp-5);
  font-size:var(--fs-small);
  color:var(--mist-dim);
  text-align:center;
}

/* =========================================================
   Courses — training photo + copy, mirrors Founder's split but
   with media on the right (About put media right, Founder put
   it left — this keeps the alternation going).
   ========================================================= */
.courses-grid{
  display:grid;
  gap:var(--sp-6);
  /* Mobile stacks photo above copy (grid-area, not source order — same
     technique as .about-grid) so the DOM keeps text before media for
     reading order while the visual stack leads with the photo. */
  grid-template-areas:
    "media"
    "text";
}
.courses-media{ grid-area:media; }
.courses-text{ grid-area:text; }
@media(min-width:900px){
  .courses-grid{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"text media";
    align-items:center;
    gap:var(--sp-3) var(--sp-6);
  }
}
.courses-media{
  position:relative;
  aspect-ratio:4/5;
  border:1px solid var(--line);
  overflow:hidden;
}
.courses-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.courses-media:hover img{ transform:scale(1.03); }
.courses-media::after{
  content:"";
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  border-top:1.5px solid var(--gold-1);
  border-right:1.5px solid var(--gold-1);
  pointer-events:none;
}
.courses-text > * + *{ margin-top:var(--sp-3); }
.courses-actions{ margin-top:var(--sp-5); }

/* =========================================================
   Ticker strip — decorative service marquee. Sole purpose is a
   light "threshold" beat between two dark sections (Courses,
   Book); text repeats content already listed in nav/Services,
   so the whole strip is aria-hidden rather than read twice.
   ========================================================= */
.ticker-strip{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:var(--sp-4);
}
.ticker-track{
  display:flex;
  width:max-content;
  /* Duration scales with the 3x-repeated .ticker-set content (see HTML
     comment) so the on-screen scroll speed stays the same regardless of
     how many repeats were needed to outrun the widest viewport. */
  animation:tickerScroll 96s linear infinite;
}
.ticker-set{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding-right:var(--sp-4);
  flex-shrink:0;
}
.ticker-set span:not(.ticker-dot){
  font-family:var(--font-display);
  font-size:clamp(1.1rem, .9rem + 1vw, 1.6rem);
  font-weight:600;
  color:var(--cream);
  white-space:nowrap;
  letter-spacing:-.01em;
}
.ticker-dot{ color:var(--gold-1); font-size:.7em; }
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================================
   Book block — clean panel, no illustration (kept calm & premium)
   ========================================================= */
.book-block{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 90% at 85% 20%, rgba(239,216,160,.08), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(239,216,160,.05), transparent 60%),
    var(--ink-soft);
}
.book-block .container{
  position:relative;
  padding-block:var(--sp-section);
}
.book-copy{ max-width:560px; }
.book-block h2{ max-width:16ch; }
.book-block .lead{ margin-top:var(--sp-3); }
/* Service-page CTA: heading and copy sit in separate .content-split
   columns (not stacked in one flow like .book-copy), so the lead is
   the first thing in its own column — it needs to start flush at the
   column's top, level with the heading opposite it, not carry the
   spacing that's normally there to separate it from a heading above
   it in the same column. */
.book-block .content-split > div > .lead{ margin-top:0; }
.book-actions{
  display:flex; flex-wrap:wrap;
  gap:var(--sp-3); margin-top:var(--sp-5);
}
.book-quote{ display:none; margin:0; padding-left:var(--sp-4); border-left:2px solid var(--gold-1); }
.book-quote p{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  font-weight:500;
  color:var(--cream);
  line-height:1.35;
}
.book-quote cite{
  display:block;
  margin-top:var(--sp-3);
  font-style:normal;
  font-size:var(--fs-small);
  color:var(--mist-dim);
}
@media(min-width:900px){
  .book-block-grid{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:var(--sp-6); }
  .book-quote{ display:block; }
}

/* =========================================================
   Contact
   ========================================================= */
.contact-grid{
  display:grid;
  gap:var(--sp-5);
}
@media(min-width:900px){
  .contact-grid{
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    gap:var(--sp-6);
    padding:var(--sp-6);
    border:1px solid var(--line);
  }
}
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.contact-list dt{
  font-size:var(--fs-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist-dim);
  margin-bottom:.4em;
}
.contact-list dd{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1rem;
  color:var(--cream);
}
@media(min-width:700px){
  .contact-list dd{ font-size:1.25rem; }
}
.social-row{
  display:flex; gap:var(--sp-3); margin-top:var(--sp-5);
}
.social-row a{
  width:56px; height:56px;
  border:1px solid rgba(196,160,92,.5);
  background:rgba(196,160,92,.08);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#17140F;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.social-row a:hover{ border-color:#C4A05C; background:rgba(196,160,92,.16); transform:translateY(-2px); }
.social-row svg{ width:24px; height:24px; }

.map-panel{
  position:relative;
  border:1px solid var(--line);
  min-height:340px;
  background:var(--ink-soft);
  overflow:hidden;
  border-radius:var(--radius);
}
.map-panel::after{
  content:"";
  position:absolute; top:12px; right:12px;
  width:28px; height:28px;
  border-top:1.5px solid var(--gold-1);
  border-right:1.5px solid var(--gold-1);
  pointer-events:none;
  z-index:1;
}
.map-panel iframe{
  width:100%; height:100%;
  min-height:340px;
  border:0;
  display:block;
  filter:grayscale(.15) contrast(1.02);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:var(--sp-6) var(--sp-4);
  background:var(--ink-soft);
}
.footer-top{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4) var(--sp-3);
  padding-bottom:var(--sp-5);
}
.footer-brand{ grid-column:1 / -1; }
@media(min-width:700px){
  .footer-top{ grid-template-columns:1.4fr repeat(2,1fr); gap:var(--sp-5); padding-bottom:var(--sp-6); }
  .footer-brand{ grid-column:auto; }
}
@media(min-width:1100px){
  .footer-top{ grid-template-columns:1.4fr repeat(5,1fr); }
}
.footer-brand .logo-img{ height:38px; }
.footer-brand address{ font-style:normal; margin-top:var(--sp-3); font-size:var(--fs-small); }
.footer-brand .maps-link{
  display:inline-flex; align-items:center; gap:.4em;
  margin-top:.6em; font-size:var(--fs-small); font-weight:700; color:var(--gold-1);
}
.footer-brand .btn{ margin-top:var(--sp-4); }
.footer-col h4{
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist-dim);
  margin:0 0 var(--sp-3);
  font-weight:700;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7em; }
.footer-col a{ font-size:var(--fs-small); color:var(--mist); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--gold-1); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  justify-content:space-between; align-items:center;
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--fs-small);
  color:var(--mist-dim);
}

@media(max-width:600px){
  .video-block{ height:90vh; min-height:560px; }
}

/* Service-page hero video, mobile only — match the homepage hero video's
   own mobile sizing (.video-block above) exactly. Desktop/tablet keeps
   .page-hero's normal shorter height; only pages with a video hero carry
   this modifier, static-photo heroes (Memberships, Contact) are unaffected. */
@media(max-width:600px){
  .page-hero.has-video{ height:90vh; min-height:560px; max-height:860px; }
}

/* =========================================================
   Service-page template — shared components for single-service
   pages (manicure.html and future pedicure/extension/etc.).
   Generic names, not tied to any one service.
   ========================================================= */

/* Page hero — a static-photo band for a subpage header. Same
   caption-positioning trick as .video-caption (the left offset
   keeps text aligned with the header logo past --container width)
   but shorter and without video — the homepage keeps the video
   hero as its one big motion moment; subpages stay quieter. */
.page-hero{
  position:relative;
  height:56vh;
  min-height:380px;
  max-height:620px;
  overflow:hidden;
  background:var(--ink);
}
.page-hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.6) contrast(1.12) saturate(.9);
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,20,15,.55) 0%, rgba(11,20,15,.1) 35%, rgba(11,20,15,.18) 60%, rgba(11,20,15,.82) 100%);
  pointer-events:none;
}
.page-hero-caption{
  position:absolute;
  left:max(var(--edge), calc((100% - var(--container)) / 2 + var(--edge)));
  right:var(--edge);
  bottom:var(--sp-5);
  z-index:2;
  max-width:38ch;
}
.page-hero-caption .eyebrow{ color:var(--cream); margin-bottom:var(--sp-2); }
.page-hero-caption h1{
  font-size:clamp(2.2rem, 1.4rem + 3.5vw, 4rem);
  color:var(--cream);
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.01em;
}

/* Plain readable text block — for intro paragraphs with no split
   media (About/Founder-style spacing, without the grid). */
.text-block{ max-width:62ch; }
/* Opt-in: let a specific text-block use the full container width on
   desktop instead of the default readable-width column — e.g. a closing
   paragraph pair that follows a full-width chip-list and would otherwise
   look like a stray half-width column next to empty space. Mobile is
   untouched: 62ch already exceeds any phone viewport there. */
@media(min-width:900px){
  .text-block.is-wide{ max-width:none; }
}
.text-block > * + *{ margin-top:var(--sp-3); }

/* Split panel — text one side, photo the other. Same mechanics as
   the homepage's .courses-grid (mobile stacks photo first via
   grid-area, desktop goes 2-col) under a generic name so it's
   reusable across service pages without borrowing Courses' name. */
.split-grid{
  display:grid;
  gap:var(--sp-6);
  grid-template-areas:
    "media"
    "text";
}
.split-media{ grid-area:media; }
.split-text{ grid-area:text; }
@media(min-width:900px){
  .split-grid{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"text media";
    align-items:center;
    gap:var(--sp-3) var(--sp-6);
  }
}
.split-media{
  position:relative;
  aspect-ratio:4/5;
  border:1px solid var(--line);
  overflow:hidden;
}
.split-media img, .split-media video{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.split-media:hover img, .split-media:hover video{ transform:scale(1.03); }
.split-text > * + *{ margin-top:var(--sp-3); }

/* Content split — generic 2-col pairing for body content, not just
   section headers. A lone text block (a lead paragraph, a stat) left
   flush against a wide desktop row otherwise strands the right half
   empty — pair it with a second block instead of stacking both in one
   narrow column. Unlike .split-grid, neither side is a fixed photo box,
   so this works for plain text, a stat-highlight, a chip-list — whatever
   two blocks need to sit side by side. */
.content-split{
  display:grid;
  gap:var(--sp-4);
}
@media(min-width:900px){
  .content-split{ grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:start; }
}

/* Chip list — decorative technique/material tags (Chrome Effect,
   Cat Eye, Foils…). Quiet, bordered, no fill — matches the site's
   restrained "outline, not block-color" chrome elsewhere. */
.chip-list{
  display:flex; flex-wrap:wrap; gap:.6em;
  margin-top:var(--sp-4);
  list-style:none; padding:0;
}
.chip{
  padding:.5em 1.1em;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:var(--fs-small);
  color:var(--mist);
}
.chip-list + .text-block{ margin-top:var(--sp-4); }
.info-grid + .text-block{ margin-top:var(--sp-6); }

/* Stat highlight — one big count-up number as a section's visual
   anchor (reuses the same JS as Founder/Reviews stats — just add
   the element to countTargets). */
.stat-highlight{ margin-top:var(--sp-5); }
.stat-highlight strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 1.6rem + 3vw, 4rem);
  font-weight:700;
  line-height:1;
}
.stat-highlight span{ display:block; margin-top:.5em; font-size:var(--fs-small); color:var(--mist); }

/* Info grid — ONE generic N-card row, reused for whatever a given
   service needs: hygiene's 4 numbered steps, a 2-up duration/comfort
   pairing, 3 duration tiers, a technique comparison — anything that's
   "a few short cards side by side." The numbered badge (.info-num) is
   optional per card; add it only where a sequence/step makes sense.
   Column count is a modifier, not a fixed layout, since that count
   varies per use (2, 3 or 4) rather than being baked into one component
   the way the old .process-steps/.duo-grid split was. */
.info-grid{
  list-style:none; margin:var(--sp-5) 0 0; padding:0;
  display:grid; gap:var(--sp-5);
}
@media(min-width:640px){
  .info-grid.cols-2{ grid-template-columns:repeat(2,1fr); gap:var(--sp-6); }
  .info-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
}
@media(min-width:900px){
  .info-grid.cols-4{ grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
}
.info-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  color:var(--gold-1);
  margin-bottom:var(--sp-3);
}
.info-card h3{ font-size:1.15rem; }
.info-card p{ margin-top:.5em; font-size:var(--fs-small); color:var(--mist); }
.info-card .stat-highlight{ margin-top:0; margin-bottom:var(--sp-3); }

/* Gallery strip — "Our Work" for a single service. Vertical/portrait
   cards (fixed aspect-ratio, object-fit:cover crops whatever source
   photo — manicure's are 3:4, others are square or landscape, this
   normalizes all of them), several visible at once in a horizontal
   scroll-snap row. Same mechanism as the homepage's Achievements
   certificate strip, just bigger cards and no lightbox/zoom. Media
   slot takes <img> or <video> interchangeably. */
/* Mobile: matches the homepage's "Our Work" .work-slider exactly — a
   full-bleed, viewport-height single photo with arrows overlaid on top
   (same .work-arrow glass-circle style) and dots below. Desktop (900px+)
   keeps the existing multi-card strip untouched — only the sub-900px
   rules below changed from the previous "card + peek" mobile layout. */
.gallery-strip{
  position:relative;
  min-width:0;
  height:80vh;
  min-height:420px;
  max-height:760px;
  overflow:hidden;
  background:var(--surface);
}
.gallery-track{
  display:flex;
  height:100%;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-card{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  scroll-snap-align:start;
  overflow:hidden;
  border:none;
  border-radius:0;
}

/* Mute toggle for the gallery's video card — video autoplays muted (only
   way autoplay is allowed), this is the opt-in to turn sound on. Same
   glass-circle treatment as the homepage hero's .video-toggle. */
.gallery-mute{
  position:absolute;
  top:14px; right:14px;
  z-index:2;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(245,243,236,.5);
  background:rgba(11,20,15,.4);
  backdrop-filter:blur(6px);
  color:#F5F3EC;
  display:flex;
  align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.gallery-mute:hover{ border-color:var(--gold-1); color:var(--gold-1); }
.gallery-mute svg{ width:17px; height:17px; }
.gallery-mute .icon-unmuted{ display:none; }
.gallery-mute.is-unmuted .icon-muted{ display:none; }
.gallery-mute.is-unmuted .icon-unmuted{ display:block; }

/* Mute toggle for a service page's hero video (.page-hero-bg) — same
   glass-circle button and muted/unmuted icon swap as .gallery-mute
   above. Kept at .gallery-mute's own top-right corner rather than the
   homepage .video-toggle's bottom-right: .page-hero-caption carries a
   full h1 (not just an eyebrow line) and can wrap wide on mobile, which
   collided with the button down there. Unlike .video-toggle
   (desktop-only play/pause), sound control stays visible on mobile too —
   there's no other way to reach it there. */
.page-hero-mute{
  top:var(--sp-7);
  right:max(var(--edge), calc((100% - var(--container)) / 2 + var(--edge)));
  width:48px; height:48px;
}
.page-hero-mute svg{ width:18px; height:18px; }
.gallery-card img, .gallery-card video{ width:100%; height:100%; object-fit:cover; }
.gallery-prev, .gallery-next{ display:flex; top:50%; }
.gallery-prev{ left:var(--edge); }
.gallery-next{ right:var(--edge); }
@media(min-width:900px){
  .gallery-strip{ height:auto; min-height:0; max-height:none; overflow:visible; background:none; }
  .gallery-track{ height:auto; padding-inline:0; gap:var(--sp-4); }
  .gallery-card{
    flex:0 0 auto;
    width:360px;
    height:auto;
    aspect-ratio:4/5;
    border:1px solid var(--line);
    border-radius:2px;
  }
  /* Inset from the block's own edge (var(--edge), same as .work-prev/
     .work-next — gallery-strip sits outside .container just like
     .work-slider does) — NOT a negative offset like .cert-prev/.cert-next
     use, which only stays safe there because cert-slider sits inside a
     padded .container to begin with. Here that negative offset pushed
     the buttons past the actual viewport edge: clipped, and on desktop
     widths near the container's max-width, a real horizontal scrollbar. */
  .gallery-prev{ left:var(--edge); }
  .gallery-next{ right:var(--edge); }
}

/* =========================================================
   Memberships & Contact pages
   ========================================================= */

/* Terms & Conditions — numbered clause list, same gold-counter language
   as .info-num but inline per-line instead of a standalone circle badge.
   Single column reads fine narrow; a 9-item list left in one ~62ch
   column on a full-width desktop section stranded most of the row in
   whitespace, so it flows into two text columns once there's room. */
.terms-list{
  counter-reset:term;
  list-style:none; margin:var(--sp-5) 0 0; padding:0;
}
.terms-list li{
  position:relative;
  padding-left:2em;
  margin-top:var(--sp-3);
  font-size:var(--fs-small);
  color:var(--mist);
  break-inside:avoid;
}
.terms-list li:first-child{ margin-top:0; }
.terms-list li::before{
  counter-increment:term;
  content:counter(term);
  position:absolute; left:0; top:0;
  font-family:var(--font-display); font-weight:600;
  color:var(--gold-1);
}
@media(min-width:820px){
  .terms-list{ columns:2; column-gap:var(--sp-6); }
  .terms-list li{ margin-top:0; margin-bottom:var(--sp-3); }
}

/* Map panel paired inside .contact-grid (Contact page) — taller than the
   homepage's teaser-sized default so it reads as the section's main
   content, not a small aside. */
@media(min-width:700px){
  .map-panel-wide{ min-height:420px; }
  .map-panel-wide iframe{ min-height:420px; }
}

/* Icon + text handle, e.g. Contact page's Instagram link under the
   address block — the homepage's .social-row is icon-only; wrapping
   the handle as a sibling (not another .social-row child) keeps it out
   of that circle-button rule. */
.social-block{
  display:flex; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-4);
}
.social-block .social-row{ margin-top:0; }
.social-handle{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1rem;
  color:var(--cream);
  transition:color .3s var(--ease);
}
.social-handle:hover{ color:var(--gold-1); }

/* Partner cards (Contact page "Also from Blossom") — Swiss Nails Academy
   and Blossom Professional Shop are separate businesses from the studio,
   each scoped to its own links. Up to three buttons share one card row,
   so they use a compact size with a leading icon instead of .btn's full
   CTA padding, which was sized for one or two buttons standing alone. */
.partner-actions{
  display:flex; flex-wrap:wrap; gap:.6em;
  margin-top:var(--sp-4);
}
.btn-compact{
  padding:.65em 1.1em;
  font-size:.72rem;
  gap:.5em;
}
.btn-compact svg{ width:16px; height:16px; flex:0 0 auto; }

/* =========================================================
   Price List page — numbered menu-board sections with a
   sticky category quick-nav and clean name/price rows, built
   entirely from the site's existing gold/hairline/serif
   language. No new palette, type or component chrome.
   ========================================================= */

/* Sticky quick-nav — gold pill row, jumps to each numbered
   section below. Docks just under the fixed header once the
   header has shrunk to its scrolled height (any scroll past
   8px triggers .is-scrolled, and by the time this bar is
   actually stuck the header is already in that state). */
.price-quicknav{
  position:sticky;
  top:64px;
  z-index:40;
  background:rgba(11,20,15,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-block:var(--sp-2);
}
.price-quicknav-list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:.6em;
  overflow-x:auto;
  scrollbar-width:none;
}
.price-quicknav-list::-webkit-scrollbar{ display:none; }
.price-quicknav-item{
  display:block;
  flex:0 0 auto;
  padding:.6em 1.2em;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.03em;
  color:var(--mist);
  white-space:nowrap;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
a.price-quicknav-item:hover{ color:var(--gold-1); border-color:var(--gold-1); }
a.price-quicknav-item.is-active{
  color:#16130A;
  background:#D6B677;
  border-color:#D6B677;
}
/* Placeholder pill for a category with no priced section yet — visible
   in the nav so the full 6-item layout can be previewed, but inert. */
.price-quicknav-item.is-soon{ opacity:.4; cursor:default; }
.price-quicknav-item.is-soon em{
  margin-left:.5em;
  font-style:normal;
  font-size:.82em;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mist-dim);
}

/* Sections jumped to from the quick-nav (or a service page's
   "View Prices" CTA) need to clear the fixed header + sticky
   quick-nav bar, not land flush under them. */
.price-section{ scroll-margin-top:132px; }

/* Packages — a small featured panel above the numbered
   sections, for the combined Mani+Pedi bundles. */
.price-packages .info-card h3{ margin-bottom:.3em; }
.price-packages .price-list{ margin-top:var(--sp-3); }
.price-inclusions{
  list-style:none; margin:var(--sp-2) 0 0; padding:0;
  font-size:var(--fs-small); color:var(--mist);
}
.price-inclusions li{ padding-left:1.1em; position:relative; }
.price-inclusions li::before{ content:"–"; position:absolute; left:0; color:var(--gold-1); }
.price-inclusions li + li{ margin-top:.2em; }
.price-package-note{ margin-top:.6em; font-weight:700; color:var(--gold-1); }

/* Numbered section head — pairs the site's existing circular
   .info-num badge with a photo, per the outline's "photo/small
   visual, then the full price list" per section. Same mechanics
   as .split-grid/.split-media elsewhere on the site (mobile
   stacks the photo first via grid-area, desktop goes to a real
   two-column split with a properly sized image) rather than a
   small fixed-width thumbnail floating beside the heading. */
.price-section-head{
  display:grid;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
  grid-template-areas:
    "media"
    "text";
}
.price-section-media{ grid-area:media; }
.price-section-text{ grid-area:text; }
@media(min-width:800px){
  .price-section-head{
    grid-template-columns:1.3fr .9fr;
    grid-template-areas:"text media";
    align-items:center;
    gap:var(--sp-3) var(--sp-6);
  }
}
.price-section-media{
  position:relative;
  aspect-ratio:16/10;
  border:1px solid var(--line);
  overflow:hidden;
}
@media(min-width:800px){
  .price-section-media{ aspect-ratio:4/5; }
}
.price-section-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.price-section-media:hover img{ transform:scale(1.03); }

/* Price groups & rows — name left, price right */
.price-groups{
  display:grid;
  gap:var(--sp-5);
}
@media(min-width:820px){
  .price-groups.cols-2{ grid-template-columns:repeat(2,1fr); column-gap:var(--sp-6); }
}
.price-group-label{
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-1);
  margin:0 0 var(--sp-2);
}
.price-list{ list-style:none; margin:0; padding:0; }
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  column-gap:var(--sp-4);
  padding-block:.55em;
}
.price-row + .price-row{ border-top:1px solid var(--line); }
.price-row-name{
  color:var(--cream);
  font-weight:600;
  flex:1 1 auto;
  /* Without this, a flex item won't shrink below its own min-content
     width, so a long name refuses to wrap onto a second line and
     instead pushes the price off — or forces the whole row wider
     than the viewport on mobile. This is what actually keeps the
     price pinned to the right at any name length. */
  min-width:0;
}
.price-row-price{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--gold-1);
  white-space:nowrap;
}
.price-row-note{
  display:block;
  width:100%;
  margin-top:.25em;
  font-size:var(--fs-small);
  color:var(--mist-dim);
}

/* Additional services — small closing block per section,
   set off from the main price groups above it. */
.price-extra{
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.price-extra-label{
  font-size:var(--fs-eyebrow);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist-dim);
  margin:0 0 var(--sp-4);
}

/* Callout — instructional notice (Nail Design's "send us a
   WhatsApp photo first" note), not a price row. Dashed border
   matches .reviews-placeholder's language for "read this, it's
   not a normal list item." */
.price-callout{
  margin-top:var(--sp-6);
  padding:var(--sp-4);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
}
.price-callout p{ font-size:var(--fs-small); color:var(--mist); }
.price-callout p + p{ margin-top:.6em; }
/* This button's label is long enough that .btn's site-wide
   white-space:nowrap pushes it past the callout's own padding
   on narrow screens — scoped override, not a global .btn change,
   since every other button on the site is short enough to fit. */
.price-callout .btn{
  margin-top:var(--sp-3);
  max-width:100%;
  white-space:normal;
  text-align:center;
}

/* =========================================================
   Our Work — masonry gallery page
   ========================================================= */

/* CSS-columns masonry: no JS layout library, cheap and reliable.
   Items flow down each column before wrapping to the next, so reading
   order is column-major rather than strict row-major "true" masonry —
   an accepted trade-off for a photo wall like this. break-inside:avoid
   stops a photo being split across two columns. */
.work-gallery{
  columns: 2;
  column-gap: var(--sp-3);
}
.work-gallery-item{
  display:block;
  width:100%;
  margin:0 0 var(--sp-3);
  padding:0;
  border:none;
  border-radius:2px;
  background:var(--surface);
  cursor:zoom-in;
  overflow:hidden;
  break-inside:avoid;
  box-shadow:0 16px 32px -22px rgba(23,20,15,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.work-gallery-item:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -20px rgba(23,20,15,.45); }
.work-gallery-item img{
  width:100%; height:auto; display:block;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.work-gallery-item img.is-loaded{ opacity:1; }

@media(min-width:700px){
  .work-gallery{ columns: 3; column-gap: var(--sp-4); }
  .work-gallery-item{ margin-bottom:var(--sp-4); }
}
@media(min-width:1100px){
  .work-gallery{ columns: 4; }
}