/* =====================================================
   Eternal Hair & Esthetics — Redesign
   All-sans · Eight Sleep–inspired luxe + Maxim service structure
   Mobile-first refinements
   ===================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:        #0A0A0A;
  --bg-2:      #111114;
  --bg-cream:  #F5EFE6;
  --bg-cream-2:#EFE6D6;
  --ink:       #FFFFFF;
  --ink-soft:  #B8B8B8;
  --ink-mute:  #7E7E7E;
  --ink-dark:  #0A0A0A;
  --ink-dark-soft:#3A3A3A;
  --line:      rgba(255,255,255,0.10);
  --line-dark: rgba(0,0,0,0.10);
  --gold:      #C9A66B;
  --gold-hi:   #E2C088;
  --copper:    #B85042;

  --max:       1480px;
  --pad:       clamp(18px, 4vw, 64px);
  --r-sm:      6px;
  --r:         10px;
  --r-lg:      18px;

  /* Helvetica Neue theme — single family, full weight range, system stack */
  --font-sans: 'Helvetica Neue', 'HelveticaNeue', Helvetica, 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-disp: 'Helvetica Neue', 'HelveticaNeue', Helvetica, 'Inter', 'Segoe UI', Arial, sans-serif;

  --ease:      cubic-bezier(.2,.6,.2,1);

  /* Mobile bottom-bar safe-area */
  --bottom-bar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px; line-height:1.55; font-weight:400;
  letter-spacing:-0.005em;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--gold); color:#000; }

/* ---------- Type ---------- */
.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:24px; height:1px; background:var(--gold);
}

h1,h2,h3,h4{
  font-family:var(--font-disp);
  font-weight:300;
  letter-spacing:-0.035em;
  line-height:1.02;
  margin:0;
}
h1{ font-size:clamp(44px, 8vw, 120px); letter-spacing:-0.045em; }
h2{ font-size:clamp(32px, 5.4vw, 80px); letter-spacing:-0.04em; }
h3{ font-size:clamp(20px, 2.4vw, 30px); font-weight:400; letter-spacing:-0.02em; }
p{ margin:0; }
.lede{
  font-size:clamp(15px, 1.3vw, 19px); color:var(--ink-soft); max-width:62ch; line-height:1.5;
  font-weight:400;
}
.italic{ font-style:italic; }

/* Italic accent — colored gold/copper, NOT serif */
em{ font-style:italic; font-weight:300; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding-top:clamp(64px, 9vw, 160px); padding-bottom:clamp(64px, 9vw, 160px); position:relative; }
.section.tight{ padding-top:clamp(36px, 6vw, 80px); padding-bottom:clamp(36px, 6vw, 80px); }
.cream{ background:var(--bg-cream); color:var(--ink-dark); }
.cream .lede{ color:var(--ink-dark-soft); }
.cream .eyebrow{ color:var(--copper); }
.cream .eyebrow::before{ background:var(--copper); }

.divider{ height:1px; background:var(--line); width:100%; }
.cream .divider{ background:var(--line-dark); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-size:13px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase;
  border-radius:999px;
  transition:all .35s var(--ease);
  border:1px solid transparent;
  white-space:nowrap;
  font-family:var(--font-sans);
}
.btn-primary{ background:var(--ink); color:var(--ink-dark); }
.btn-primary:hover{ background:var(--gold); color:var(--ink-dark); transform:translateY(-1px); }
.cream .btn-primary{ background:var(--ink-dark); color:var(--ink); }
.cream .btn-primary:hover{ background:var(--copper); color:var(--ink); }

.btn-gold{ background:var(--gold); color:var(--ink-dark); }
.btn-gold:hover{ background:var(--gold-hi); color:var(--ink-dark); transform:translateY(-1px); }

.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.cream .btn-ghost{ border-color:rgba(0,0,0,0.18); color:var(--ink-dark); }
.cream .btn-ghost:hover{ border-color:var(--copper); color:var(--copper); }

.btn-icon{ width:18px; height:18px; }

@media (max-width: 600px){
  .btn{ padding:14px 20px; font-size:12px; }
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,10,0.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-top:12px; padding-bottom:12px;
}
.nav-logo{ display:flex; align-items:center; gap:12px; font-size:18px; letter-spacing:-0.01em; }
.nav-logo img{ height:72px; width:auto; transition: height .35s var(--ease); }
.nav.scrolled .nav-logo img{ height:54px; }
@media (max-width: 700px){
  .nav-logo img{ height:54px; }
  .nav.scrolled .nav-logo img{ height:44px; }
}
.nav-links{ display:flex; align-items:center; gap:28px; font-size:13px; letter-spacing:0.04em; font-weight:500; }
.nav-links a{ color:var(--ink-soft); transition:color .3s var(--ease); position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-tel{ font-size:13px; color:var(--ink-soft); letter-spacing:0.02em; font-weight:500; }
.nav-tel:hover{ color:var(--gold); }
.nav-burger{
  display:none;
  width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border:1px solid var(--line); border-radius:999px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav-burger span{ display:block; width:18px; height:1px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-burger:hover{ border-color:var(--gold); }

@media (max-width: 1100px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width: 700px){
  .nav-tel{ display:none; }
  .nav-cta .btn-primary{ padding:12px 16px; font-size:11px; }
}
@media (max-width: 480px){
  .nav-cta .btn-primary{ display:none; }
}

/* ---------- Mobile drawer (accordion) ---------- */
.drawer{
  position:fixed; inset:0; z-index:60;
  background:rgba(10,10,10,0.7); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px, 92vw); background:#0A0A0A; border-left:1px solid var(--line);
  padding:72px 0 32px;
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-close{
  position:absolute; top:18px; right:18px;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center;
  transition:border-color .3s var(--ease); z-index:2;
}
.drawer-close:hover{ border-color:var(--gold); }
.drawer-close svg{ width:16px; height:16px; }

/* Accordion sections */
.drawer-section{ border-bottom:1px solid var(--line); }
.drawer-section[open]{ background:rgba(255,255,255,0.02); }
.drawer-section summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 28px;
  font-family:var(--font-disp); font-size:24px; font-weight:300; letter-spacing:-0.025em;
  color:var(--ink); transition:color .25s var(--ease);
}
.drawer-section summary::-webkit-details-marker{ display:none; }
.drawer-section summary::after{
  content:""; width:10px; height:10px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease);
  opacity:0.6;
}
.drawer-section[open] summary::after{ transform:rotate(-135deg) translateY(0px); opacity:1; color:var(--gold); }
.drawer-section[open] summary{ color:var(--gold); }
.drawer-sub{ padding:0 28px 18px; display:flex; flex-direction:column; gap:2px; }
.drawer-sub a{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  font-size:15.5px; color:var(--ink-soft); transition:color .25s var(--ease);
  font-weight:400; letter-spacing:-0.005em;
}
.drawer-sub a::after{ content:"→"; opacity:0; font-size:13px; transition:opacity .25s var(--ease), transform .3s var(--ease); }
.drawer-sub a:active, .drawer-sub a:hover{ color:var(--ink); }
.drawer-sub a:hover::after{ opacity:0.7; transform:translateX(2px); }

/* Promoted top-level links (Home, Results, Press) */
.drawer-link-flat{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid var(--line);
  font-family:var(--font-disp); font-size:22px; font-weight:300; letter-spacing:-0.025em;
  color:var(--ink); transition:color .25s var(--ease);
}
.drawer-link-flat::after{ content:"→"; font-family:var(--font-sans); font-size:14px; opacity:0.4; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.drawer-link-flat:hover, .drawer-link-flat:active{ color:var(--gold); }
.drawer-link-flat:hover::after{ opacity:1; transform:translateX(4px); }

.drawer-cta-row{ margin:24px 28px 0; display:flex; flex-direction:column; gap:10px; }
.drawer-cta-row .btn{ justify-content:center; padding:16px 22px; font-size:13px; }

.drawer-meta{
  margin:32px 28px 0; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; letter-spacing:0.06em; color:var(--ink-mute);
}
.drawer-meta a{ color:var(--ink-soft); }
.drawer-meta a:hover{ color:var(--gold); }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-top:120px; padding-bottom:60px;
  color:var(--ink); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 35%, rgba(10,10,10,0.95) 100%);
}
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; }
.hero-inner{ position:relative; z-index:1; width:100%; }
.hero h1{
  font-size:clamp(48px, 9vw, 152px); line-height:0.95;
  font-weight:200; max-width:14ch; letter-spacing:-0.05em;
}
.hero h1 em{ font-style:italic; color:var(--gold); font-weight:200; }
.hero-sub{ margin-top:24px; font-size:clamp(15px, 1.35vw, 19px); color:var(--ink-soft); max-width:55ch; line-height:1.55; }
.hero-ctas{ margin-top:36px; display:flex; gap:12px; flex-wrap:wrap; }

.hero-meta{ display:flex; gap:32px; margin-top:54px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.hero-meta .stat{ }
.hero-meta .stat .num{ font-family:var(--font-disp); font-size:clamp(26px, 3vw, 40px); font-weight:300; letter-spacing:-0.03em; }
.hero-meta .stat .label{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px; }

@media (max-width: 600px){
  .hero{ padding-top:100px; padding-bottom:40px; }
  .hero-meta{
    display: flex; flex-wrap: nowrap; gap: 14px;
    margin-top: 32px; padding-top: 22px;
  }
  .hero-meta .stat{ flex: 1 1 0; min-width: 0; }
  .hero-meta .stat .num{ font-size: 18px; }
  .hero-meta .stat .label{ font-size: 9px; letter-spacing: 0.12em; }
  /* Hide the 98% Restoration Success stat on mobile (kept on desktop) */
  .hero-meta .stat.hide-mobile{ display: none; }
}

/* ===========================================================
   HERO TRUST PILL — mobile only (Google rating above title)
   Hides full trust ribbon on mobile.
   =========================================================== */
.hero-trust-pill{ display: none; }
@media (max-width: 700px){
  .hero-trust-pill{
    display: inline-flex; align-items: center; gap: 10px;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    margin-bottom: 18px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
    color: var(--ink);
    width: fit-content;
  }
  .hero-trust-pill .stars{
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: 600; color: var(--ink);
  }
  .hero-trust-pill .stars span{ color: var(--gold); font-size: 13px; }
  .hero-trust-pill .src{
    color: rgba(255,255,255,0.78);
    font-weight: 400;
  }

  /* Hide the full trust ribbon on mobile — replaced by the pill above */
  .trust-ribbon{ display: none !important; }
}

/* ---------- Marquee (As Featured In) ---------- */
.marquee{
  padding:36px 0; overflow:hidden; position:relative;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#000; /* solid black so inverted-JPG-bg blends seamlessly */
}
.cream .marquee{ background:#FAF5EC; border-color:rgba(0,0,0,0.08); }
.marquee-label{
  position:absolute; left:var(--pad); top:50%; transform:translateY(-50%);
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute);
  background:#000; padding:14px 18px 14px 0; z-index:2;
  font-weight:500;
}
.cream .marquee-label{ background:#FAF5EC; color:#7A6F5F; }
.marquee-track{
  display:flex; align-items:center; gap:64px;
  animation:marquee 36s linear infinite;
  width:max-content;
  padding-left:200px;
}
/* invert + grayscale: white bgs become black (blends to page bg), dark logo content becomes light */
.marquee-track img{
  height:30px; width:auto; opacity:0.78;
  filter: invert(1) grayscale(1) contrast(1.15);
  transition: opacity .3s var(--ease);
  flex:0 0 auto;
}
.cream .marquee-track img{ filter:grayscale(1); opacity:0.55; }
.marquee-track img:hover{ opacity:1; }
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (max-width: 700px){
  .marquee-label{ position:static; transform:none; display:block; padding:0 var(--pad) 16px; background:transparent; }
  .marquee-track{ padding-left:var(--pad); gap:48px; }
  .marquee-track img{ height:24px; }
}

/* ---------- Generic two-column ---------- */
.two-col{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px, 6vw, 100px);
  align-items:center;
}
.two-col.flip{ grid-template-columns:1fr 1.1fr; }
@media (max-width: 900px){ .two-col, .two-col.flip{ grid-template-columns:1fr; gap:36px; } }

.media-frame{ overflow:hidden; border-radius:var(--r-lg); position:relative; aspect-ratio:4/5; }
.media-frame img,.media-frame video{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.media-frame:hover img{ transform:scale(1.04); }

/* ---------- SERVICE BENTO GRID ----------
   3-col grid with equal-height rows, wide cards span 2 columns.
   Every row is fully filled, no empty space.
---------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows: clamp(320px, 28vw, 460px);
  gap:14px;
}
.svc-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  cursor:pointer;
  background:#1A1A1F;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  grid-column: span 1;
}
.svc-card.wide{ grid-column: span 2; }
.svc-card:hover{ box-shadow: 0 14px 50px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,166,107,0.25) inset; }

@media (max-width: 900px){
  .svc-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(280px, 50vw, 420px);
  }
  .svc-card.wide{ grid-column: span 2; }
}
@media (max-width: 600px){
  .svc-grid{
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(280px, 70vw, 420px);
  }
  .svc-card.wide{ grid-column: span 1; }
}

.svc-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.2s var(--ease), filter .8s var(--ease);
  filter: brightness(0.95) saturate(1.05);
}
.svc-card:hover img{ transform:scale(1.05); filter: brightness(0.82) saturate(1.1); }

.svc-card-content{
  position:absolute; left:0; right:0; bottom:0; padding:clamp(20px, 2.4vw, 32px);
  z-index:2;
  display:flex; flex-direction:column; gap:10px;
}
.svc-card-content::before{
  content:""; position:absolute; inset:auto 0 0 0; height:100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%);
  z-index:-1;
}
.svc-card-content .kicker{
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-hi);
  display:inline-flex; align-items:center; gap:8px; font-weight:500;
}
.svc-card-content .title{
  font-family:var(--font-disp); font-size:clamp(20px, 2.3vw, 32px); font-weight:300; letter-spacing:-0.03em; line-height:1.05;
  color: var(--ink);
}
.svc-card.wide .svc-card-content .title{ font-size:clamp(24px, 2.8vw, 40px); }
.svc-card-content .arrow{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft);
  font-weight:500;
  transition: color .3s var(--ease), gap .35s var(--ease);
}
.svc-card:hover .arrow{ color:var(--gold); gap:14px; }

/* Signature gold pill */
.svc-card .pill{
  position:absolute; top:18px; left:18px; z-index:3;
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color: var(--ink-dark);
  background: var(--gold);
  padding:6px 12px; border-radius:999px;
  font-weight:600;
}

/* ===========================================================
   RESULT CARDS — for clinic's pre-composed before/after images
   (Source photos are wide composites with B|A side-by-side)
   =========================================================== */
.result-card{
  position:relative; aspect-ratio: 8/3; overflow:hidden; border-radius:var(--r-lg);
  background:#0c0c0e;
  box-shadow: 0 10px 40px -16px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.cream .result-card{ background:#FFFFFF; box-shadow: 0 14px 40px -16px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06) inset; }
.result-card img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.result-card .ba-tag{
  position:absolute; top:14px; padding:6px 12px; border-radius:999px;
  background:rgba(10,10,10,0.65); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.18);
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
  z-index:2; font-weight:500;
}
.cream .result-card .ba-tag{ background:rgba(10,10,10,0.7); }
.ba-tag-before{ left:14px; }
.ba-tag-after{ right:14px; }

.result-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 900px){ .result-row{ grid-template-columns:1fr; gap:24px; } }

.result-card-meta{
  margin-top:14px; display:flex; justify-content:space-between; align-items:baseline;
  color:var(--ink-soft); font-size:13px; gap:14px; flex-wrap:wrap;
}
.cream .result-card-meta{ color:var(--ink-dark-soft); }
.result-card-meta strong{
  color:var(--ink); font-weight:400; font-family:var(--font-disp); font-size:18px; letter-spacing:-0.02em;
}
.cream .result-card-meta strong{ color:var(--ink-dark); }
.result-card-meta .ba-spec{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; font-weight:500;
}
.cream .result-card-meta .ba-spec{ color:#7A6F5F; }
.result-case-num{
  font-family:var(--font-disp); font-style:italic; font-size:13px; color:var(--gold); font-weight:400; display:block; margin-bottom:12px;
}
.cream .result-case-num{ color:var(--copper); }

/* Featured large card */
.result-feature{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
@media (max-width: 900px){ .result-feature{ grid-template-columns:1fr; gap:24px; } }
.result-feature .result-card{ aspect-ratio: 8/4; }
@media (max-width: 700px){ .result-feature .result-card{ aspect-ratio: 8/3; } }

/* ---------- Before / After Drag-to-Compare Slider
     The source images are pre-composed B|A collages (left=before, right=after)
     so we render the SAME image as two background layers, one positioned to the
     left half, one to the right half, and clip the top layer to drag between them.
---------- */
.ba-slider{
  position:relative; aspect-ratio: 4/3; overflow:hidden; border-radius:var(--r-lg);
  background:#0c0c0e;
  user-select:none; touch-action:pan-y; cursor:ew-resize;
  isolation:isolate;
  box-shadow: 0 10px 40px -16px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.cream .ba-slider{ box-shadow: 0 14px 40px -16px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.5) inset; background:#FFFFFF; }
.ba-slider .ba-after,
.ba-slider .ba-before{
  position:absolute; inset:0;
  background-size:200% 100%;
  background-repeat:no-repeat;
  pointer-events:none;
}
.ba-slider .ba-after{ background-position: 100% center; }   /* right half = after */
.ba-slider .ba-before{
  background-position: 0% center;                            /* left half = before */
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}

.ba-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width: 900px){ .ba-row{ grid-template-columns:1fr; gap:32px; } }
.ba-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 900px){ .ba-row-2{ grid-template-columns:1fr; gap:24px; } }

.ba-feature{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
@media (max-width: 900px){ .ba-feature{ grid-template-columns:1fr; gap:28px; } }
.ba-feature .ba-slider{ aspect-ratio: 4/3; }

.ba-divider{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.85) 25%, rgba(255,255,255,0.85) 75%, transparent 100%);
  transform:translateX(-1px); pointer-events:none; z-index:2;
}

.ba-handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0.18); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1.5px solid rgba(255,255,255,0.85);
  display:grid; place-items:center;
  pointer-events:none; z-index:3;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.ba-handle::before, .ba-handle::after{
  content:""; width:6px; height:6px;
  border-top:1.5px solid #fff; border-left:1.5px solid #fff;
}
.ba-handle::before{ transform:rotate(-45deg) translate(2px, 0); }
.ba-handle::after{ transform:rotate(135deg) translate(2px, 0); margin-left:6px; }

.ba-slider:hover .ba-handle{ background:rgba(255,255,255,0.3); transform:translate(-50%,-50%) scale(1.06); }
.ba-slider.dragging .ba-handle{ background:var(--gold); border-color:var(--gold); transform:translate(-50%,-50%) scale(1.12); }
.ba-slider.dragging .ba-handle::before, .ba-slider.dragging .ba-handle::after{ border-color:#0a0a0a; }

@media (max-width: 700px){
  .ba-handle{ width:64px; height:64px; }
  .ba-handle::before, .ba-handle::after{ width:8px; height:8px; }
}

.ba-hint{
  position:absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% + 56px));
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
  background:rgba(10,10,10,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:6px 12px; border-radius:999px; pointer-events:none; z-index:3;
  opacity:0.95; transition:opacity .6s var(--ease);
  border:1px solid rgba(255,255,255,0.18);
  font-weight:500;
}
.ba-slider.touched .ba-hint{ opacity:0; }

.ba-tag{
  position:absolute; top:14px; padding:6px 12px; border-radius:999px;
  background:rgba(10,10,10,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.14);
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink);
  z-index:3; font-weight:500;
}
.ba-tag-before{ left:14px; }
.ba-tag-after{ right:14px; }

.ba-meta{
  margin-top:16px; display:flex; justify-content:space-between; align-items:baseline; color:var(--ink-soft); font-size:13px;
  gap:14px; flex-wrap:wrap;
}
.cream .ba-meta{ color:var(--ink-dark-soft); }
.ba-meta strong{ color:var(--ink); font-weight:400; font-family:var(--font-disp); font-size:18px; letter-spacing:-0.02em; }
.cream .ba-meta strong{ color:var(--ink-dark); }
.ba-meta .ba-spec{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; font-weight:500; }
.cream .ba-meta .ba-spec{ color:#7A6F5F; }

/* Numbered case label above each slider */
.ba-case-num{
  font-family:var(--font-disp); font-style:italic; font-size:13px; color:var(--gold); letter-spacing:0; font-weight:400; display:block; margin-bottom:12px;
}
.cream .ba-case-num{ color:var(--copper); }

/* ---------- Testimonial Video Grid (legacy keep) ---------- */
.test-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:18px;
  grid-auto-rows:auto;
}
@media (max-width: 900px){ .test-grid{ grid-template-columns:1fr; } }

.test-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  aspect-ratio:3/4; cursor:pointer; background:#1A1A1F;
}
.test-card.feature{ aspect-ratio:4/5; grid-row:span 2; }
@media (max-width: 900px){ .test-card.feature{ aspect-ratio:4/5; grid-row:auto; } }

.test-card img,.test-card video{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.test-card:hover img{ transform:scale(1.04); }
.test-play{
  position:absolute; inset:auto auto 22px 22px;
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,0.92); color:#000;
  display:grid; place-items:center;
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.test-play::before{
  content:""; width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #000;
  margin-left:3px;
}
.test-card:hover .test-play{ transform:scale(1.08); background:var(--gold); }
.test-quote{
  position:absolute; left:0; right:0; bottom:0; padding:18px 22px;
  font-family:var(--font-disp); font-style:italic; font-size:15px; line-height:1.4;
  color:var(--ink); z-index:2; font-weight:300;
}
.test-quote::before{
  content:""; position:absolute; inset:auto 0 0 0; height:120%;
  background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  z-index:-1;
}
.test-quote .name{
  display:block; margin-top:6px; font-family:var(--font-sans); font-style:normal; font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); font-weight:500;
}

/* ---------- Stat ribbon ---------- */
.stats-ribbon{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
@media (max-width: 700px){ .stats-ribbon{ grid-template-columns:repeat(2, 1fr); } }
.cream .stats-ribbon{ background:var(--line-dark); }
.stat-cell{ background:var(--bg); padding:32px 26px; }
.cream .stat-cell{ background:var(--bg-cream); }
.stat-cell .num{ font-family:var(--font-disp); font-size:clamp(34px, 4.6vw, 64px); font-weight:300; letter-spacing:-0.04em; line-height:1; }
.stat-cell .num em{ font-style:italic; color:var(--gold); font-weight:300; }
.cream .stat-cell .num em{ color:var(--copper); }
.stat-cell .lbl{ margin-top:8px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; }

/* ---------- Sub-service cards (Maxim style) ---------- */
.sub-svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .sub-svc{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .sub-svc{ grid-template-columns:1fr; } }
.sub-card{
  position:relative; padding:30px 26px; border-radius:var(--r-lg);
  background:#15151A; border:1px solid var(--line);
  transition:transform .5s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.cream .sub-card{ background:#FFFFFF; border-color:rgba(0,0,0,0.08); }
.sub-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.cream .sub-card:hover{ border-color:var(--copper); }
.sub-card .num{
  font-family:var(--font-disp); font-style:italic; font-size:13px; color:var(--gold);
  display:block; margin-bottom:16px; letter-spacing:0; font-weight:400;
}
.cream .sub-card .num{ color:var(--copper); }
.sub-card h3{ margin-bottom:12px; }
.sub-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; }
.cream .sub-card p{ color:var(--ink-dark-soft); }
.sub-card .arrow{
  display:inline-block; margin-top:16px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-mute); transition:color .3s var(--ease), transform .4s var(--ease); font-weight:500;
}
.sub-card:hover .arrow{ color:var(--gold); transform:translateX(4px); }
.cream .sub-card:hover .arrow{ color:var(--copper); }

/* ---------- CTA Stack ---------- */
.cta-stack{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.cream .cta-stack{ background:var(--line-dark); border-color:var(--line-dark); }
@media (max-width: 800px){ .cta-stack{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 480px){ .cta-stack{ grid-template-columns:1fr; } }
.cta-cell{
  padding:26px 22px; background:#0E0E10; transition:background .3s var(--ease);
  display:flex; flex-direction:column; gap:10px;
}
.cream .cta-cell{ background:#FFFFFF; }
.cta-cell:hover{ background:#15151A; }
.cream .cta-cell:hover{ background:#FAF5EC; }
.cta-cell .ico{ width:24px; height:24px; color:var(--gold); }
.cream .cta-cell .ico{ color:var(--copper); }
.cta-cell .title{ font-family:var(--font-disp); font-size:18px; font-weight:400; letter-spacing:-0.02em; }
.cta-cell .sub{ font-size:12.5px; color:var(--ink-mute); letter-spacing:0; }
.cream .cta-cell .sub{ color:#7A6F5F; }
.cta-cell .arrow{ margin-top:auto; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.cream .cta-cell .arrow{ color:var(--ink-dark-soft); }

/* ---------- Process Steps ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
@media (max-width: 900px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .process-grid{ grid-template-columns:1fr; } }
.process-step{ padding:26px 0; border-top:1px solid var(--line); }
.cream .process-step{ border-color:var(--line-dark); }
.process-step .step-num{
  font-family:var(--font-disp); font-style:italic; font-size:13px; color:var(--gold); font-weight:400;
}
.cream .process-step .step-num{ color:var(--copper); }
.process-step h3{ margin:14px 0 10px; }
.process-step p{ color:var(--ink-soft); font-size:14px; line-height:1.55; }
.cream .process-step p{ color:var(--ink-dark-soft); }

/* Process with photos — image per step */
.process-photo-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
@media (max-width: 900px){ .process-photo-grid{ grid-template-columns:1fr 1fr; } }

/* Mobile: turn the 4-step grid into a single swipeable row with the next
   card peeking in from the right edge. */
@media (max-width: 700px){
  .process-photo-grid{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding: 6px var(--pad) 18px;
    /* Tight right padding so card 2 peeks in past the page edge */
    padding-right: 14vw;
    scroll-padding-left: var(--pad);
  }
  .process-photo-grid::-webkit-scrollbar{ display: none; }
  .process-photo-grid .proc-photo{
    flex: 0 0 auto;
    width: clamp(240px, 78vw, 340px);
    scroll-snap-align: start;
  }
}
.proc-photo{
  position:relative; overflow:hidden; border-radius:var(--r-lg); aspect-ratio:3/4;
  background:#15151A;
}
.proc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.proc-photo:hover img{ transform:scale(1.05); }
.proc-photo .pn{
  position:absolute; top:16px; left:16px;
  font-family:var(--font-disp); font-size:13px; color:var(--gold); font-weight:400; font-style:italic;
  background:rgba(10,10,10,0.55); border:1px solid rgba(255,255,255,0.18);
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(10px);
}
.proc-photo .lbl{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px;
  z-index:2;
}
.proc-photo .lbl::before{
  content:""; position:absolute; inset:auto 0 0 0; height:130%;
  background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  z-index:-1;
}
.proc-photo .lbl h4{ font-size:18px; font-weight:400; margin-bottom:4px; letter-spacing:-0.02em; }
.proc-photo .lbl p{ font-size:12px; color:var(--ink-soft); line-height:1.45; }

/* ---------- Footer ---------- */
.footer{ padding:80px 0 max(40px, calc(var(--bottom-bar-h) + var(--safe-bottom) + 24px)); background:#070708; }
.footer .top{
  display:grid; grid-template-columns:1.3fr repeat(3, 1fr); gap:40px;
  padding-bottom:60px; border-bottom:1px solid var(--line);
}
@media (max-width: 800px){ .footer .top{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width: 480px){ .footer .top{ grid-template-columns:1fr; } }
.footer h4{ font-family:var(--font-sans); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:18px; font-weight:500; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--ink-soft); }
.footer ul a:hover{ color:var(--gold); }
.footer .brand{ font-family:var(--font-disp); font-size:24px; font-weight:300; letter-spacing:-0.03em; }
.footer .addr{ margin-top:18px; color:var(--ink-soft); font-size:14px; line-height:1.7; }
.footer .bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:32px; font-size:12px; letter-spacing:0.06em; color:var(--ink-mute);
}

/* ---------- Reveal Animations ---------- */
.js-reveal .reveal{ opacity:0; transform:translateY(28px); }
.reveal{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.js-reveal .reveal-stagger > *{ opacity:0; transform:translateY(28px); }
.reveal-stagger > *{ transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.40s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.48s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.56s; }

/* ---------- Float CTAs (luxe sticky bar — desktop) ---------- */
.float-bar{
  position:fixed; right:24px; bottom:24px; z-index:30;
  display:flex; flex-direction:column; gap:10px;
}
.float-pill{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; background:rgba(10,10,10,0.85); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  font-size:12px; letter-spacing:0.05em; backdrop-filter:blur(12px);
  transition:all .3s var(--ease); font-weight:500;
}
.float-pill:hover{ background:var(--gold); color:var(--ink-dark); border-color:var(--gold); transform:translateY(-2px); }
.float-pill .dot{ width:8px; height:8px; border-radius:50%; background:#34C759; }

@media (max-width: 800px){
  .float-bar{ display:none; }
}

/* ---------- Mobile bottom CTA bar ---------- */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(10,10,10,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:12px 12px calc(12px + var(--safe-bottom));
  gap:8px;
}
.mobile-bar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:10px 8px; border-radius:12px;
  font-size:11px; letter-spacing:0.06em; color:var(--ink); font-weight:500;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.mobile-bar a:active{ background:rgba(255,255,255,0.08); }
.mobile-bar a.primary{ background:var(--gold); color:var(--ink-dark); }
.mobile-bar a.primary:active{ background:var(--gold-hi); }
.mobile-bar a svg{ width:20px; height:20px; }
.mobile-bar a span{ font-size:11px; }

@media (max-width: 800px){
  .mobile-bar{ display:flex; }
  body{ padding-bottom:var(--bottom-bar-h); }
}

/* Quick reach-out card (inline mid-page CTA, very loud) */
.reach{
  position:relative; padding:clamp(40px, 6vw, 80px); border-radius:var(--r-lg);
  background:linear-gradient(135deg, #14141A 0%, #1F1A14 100%);
  border:1px solid var(--line);
  overflow:hidden;
}
.cream .reach{ background:linear-gradient(135deg, #FFF 0%, #F5EFE6 100%); border-color:rgba(0,0,0,0.08); }
.reach-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
@media (max-width: 800px){ .reach-grid{ grid-template-columns:1fr; gap:24px; } }
.reach h3{
  font-size:clamp(28px, 4vw, 56px); font-weight:200; letter-spacing:-0.04em; line-height:1.05;
}
.reach h3 em{ color:var(--gold); font-style:italic; font-weight:200; }
.cream .reach h3 em{ color:var(--copper); }
.reach p{ margin-top:16px; color:var(--ink-soft); font-size:15px; line-height:1.55; max-width:55ch; }
.cream .reach p{ color:var(--ink-dark-soft); }
.reach-actions{ display:flex; flex-direction:column; gap:10px; }
.reach-actions .btn{ justify-content:center; padding:18px 22px; font-size:13px; }

/* ---------- Section heading block ---------- */
.shead{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:56px; }
@media (max-width: 900px){ .shead{ grid-template-columns:1fr; gap:20px; margin-bottom:40px; } }

/* ---------- Page specific: detail page hero ---------- */
.detail-hero{
  position:relative; min-height:72vh; padding-top:140px; padding-bottom:60px;
  display:flex; align-items:flex-end; overflow:hidden;
}
/* Compact variant: tighter, less commanding */
.detail-hero.compact{
  min-height: 58vh; padding-top: 110px; padding-bottom: 40px;
}
.detail-hero.compact h1{
  font-size: clamp(36px, 5.6vw, 84px) !important;
  letter-spacing: -0.04em;
}
.detail-hero.compact .hero-sub{
  font-size: clamp(14.5px, 1.2vw, 17px); margin-top: 16px;
}
.detail-hero.compact .hero-meta{ margin-top: 36px; padding-top: 24px; gap: 28px; }
.detail-hero.compact .hero-meta .stat .num{ font-size: clamp(22px, 2.4vw, 32px); }
@media (max-width: 700px){
  .detail-hero.compact{ min-height: 52svh; padding-top: 92px; }
}
.detail-hero-bg{ position:absolute; inset:0; z-index:0; }
.detail-hero-bg img{ width:100%; height:100%; object-fit:cover; }
.detail-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.5), rgba(10,10,10,0.95));
}
.detail-hero-inner{ position:relative; z-index:1; width:100%; }
.crumbs{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:28px; font-weight:500; }
.crumbs a{ color:var(--ink-soft); }
.crumbs a:hover{ color:var(--gold); }

/* ---------- FAQ ---------- */
.faq-list{ border-top:1px solid var(--line); }
.cream .faq-list{ border-color:var(--line-dark); }
.faq{ border-bottom:1px solid var(--line); padding:24px 0; }
.cream .faq{ border-color:var(--line-dark); }
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  list-style:none; cursor:pointer;
  font-family:var(--font-disp); font-size:clamp(18px, 2vw, 26px); font-weight:300; letter-spacing:-0.025em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--font-sans); font-weight:300; font-size:24px; color:var(--gold);
  transition:transform .3s var(--ease);
}
.cream .faq summary::after{ color:var(--copper); }
.faq[open] summary::after{ transform:rotate(45deg); }
.faq-body{
  margin-top:16px; color:var(--ink-soft); font-size:15px; line-height:1.65; max-width:80ch;
}
.cream .faq-body{ color:var(--ink-dark-soft); }

/* ---------- MEGA-MENU ---------- */
.nav-item{ position:relative; }
.nav-item > a{ display:flex; align-items:center; gap:6px; padding:10px 0; }
.nav-item .has-sub-arrow{
  display:inline-block; width:8px; height:8px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease);
  opacity:0.7;
}
.nav-item:hover .has-sub-arrow{ transform:rotate(225deg) translate(2px,2px); }

.mega{
  position:fixed; left:0; right:0; top:64px; z-index:49;
  background:rgba(10,10,10,0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:42px var(--pad) 50px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
}
.nav.scrolled + .mega, .mega.scrolled{ top:54px; }
.mega.open{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr 1fr 1.3fr; gap:48px;
}
.mega h5{
  font-family:var(--font-sans); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px; font-weight:500;
}
.mega ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.mega ul a{
  font-family:var(--font-disp); font-size:18px; font-weight:300; letter-spacing:-0.02em;
  color:var(--ink-soft); display:inline-flex; align-items:center; gap:10px;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.mega ul a:hover{ color:var(--gold); transform:translateX(4px); }
.mega ul a span.ar{ opacity:0; transition:opacity .25s var(--ease); font-family:var(--font-sans); }
.mega ul a:hover span.ar{ opacity:1; }
.mega-feature{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
}
.mega-feature img{ width:100%; height:100%; object-fit:cover; }
.mega-feature .mega-feature-content{
  position:absolute; left:0; right:0; bottom:0; padding:22px;
  background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
}
.mega-feature .kicker{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:8px; font-weight:500; }
.mega-feature h4{
  font-family:var(--font-disp); font-size:24px; font-weight:300; letter-spacing:-0.025em; line-height:1.1; margin:0 0 8px; color:var(--ink);
}
.mega-feature p{ font-size:13px; color:var(--ink-soft); margin:0; }

@media (max-width: 1100px){ .mega{ display:none; } }

/* ---------- PRESS QUOTE WALL ---------- */
.press-wall{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:18px;
}
.press-quote{
  position:relative; padding:32px 28px; border-radius:var(--r-lg);
  background:#13131A; border:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px;
  transition:transform .5s var(--ease), border-color .35s var(--ease);
}
.cream .press-quote{ background:#FFFFFF; border-color:rgba(0,0,0,0.08); }
.press-quote:hover{ transform:translateY(-4px); border-color:var(--gold); }
.cream .press-quote:hover{ border-color:var(--copper); }

.press-quote.span-6{ grid-column:span 6; }
.press-quote.span-4{ grid-column:span 4; }
.press-quote.span-8{ grid-column:span 8; }
.press-quote.span-12{ grid-column:span 12; }
@media (max-width: 900px){ .press-quote{ grid-column:span 12 !important; } }

.press-logo{
  height:24px; width:auto; max-width:140px; opacity:0.7;
  filter:grayscale(1) brightness(0) invert(1);
}
.cream .press-logo{ filter:grayscale(1) brightness(0); opacity:0.6; }
.press-quote blockquote{
  margin:0; font-family:var(--font-disp); font-style:italic; font-weight:300;
  font-size:clamp(18px, 1.7vw, 26px); line-height:1.35; letter-spacing:-0.025em;
  color:var(--ink);
}
.cream .press-quote blockquote{ color:var(--ink-dark); }
.press-quote .src{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); margin-top:auto; font-weight:500; }
.cream .press-quote .src{ color:#7A6F5F; }

/* ---------- BIG MOMENT ---------- */
.big-moment{
  position:relative; padding:clamp(64px, 10vw, 160px) 0; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cream .big-moment{ border-color:var(--line-dark); }
.big-moment-num{
  font-family:var(--font-disp); font-style:italic; font-weight:200;
  font-size:clamp(96px, 22vw, 360px); line-height:0.85; letter-spacing:-0.05em;
  color:var(--gold); opacity:0.95;
}
.cream .big-moment-num{ color:var(--copper); }
.big-moment-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:end; }
@media (max-width: 900px){ .big-moment-grid{ grid-template-columns:1fr; gap:20px; } }
.big-moment .pull{
  font-family:var(--font-disp); font-style:italic; font-size:clamp(20px, 2vw, 30px); font-weight:300;
  line-height:1.35; letter-spacing:-0.025em; color:var(--ink);
}
.cream .big-moment .pull{ color:var(--ink-dark); }
.big-moment .meta{ font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:16px; font-weight:500; }

/* ---------- TEAM ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width: 900px){ .team-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg); background:#15151A;
  aspect-ratio:3/4;
}
.cream .team-card{ background:#FFFFFF; }
.team-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.team-card:hover img{ transform:scale(1.04); }
.team-card-content{ position:absolute; left:0; right:0; bottom:0; padding:22px 26px; z-index:2; }
.team-card-content::before{
  content:""; position:absolute; inset:auto 0 0 0; height:130%;
  background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  z-index:-1;
}
.team-card-content .role{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.team-card-content .nm{ font-family:var(--font-disp); font-size:26px; font-weight:300; letter-spacing:-0.03em; margin-top:6px; color:var(--ink); }
.team-card-content .bio{ font-size:13px; color:var(--ink-soft); margin-top:8px; line-height:1.5; }

/* ---------- TAPE / EDITORIAL ---------- */
.tape{
  padding:32px 0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#0c0c0e;
}
.cream .tape{ background:#FAF5EC; border-color:rgba(0,0,0,0.08); }
.tape-track{
  display:flex; gap:80px; align-items:center;
  animation:marquee 50s linear infinite; width:max-content;
  font-family:var(--font-disp); font-style:italic; font-size:clamp(30px, 5vw, 80px); font-weight:200;
  color:var(--ink); white-space:nowrap; letter-spacing:-0.04em;
}
.cream .tape-track{ color:var(--ink-dark); }
.tape-track .dot{ color:var(--gold); }
.cream .tape-track .dot{ color:var(--copper); }

/* ---------- CINEMATIC VIDEO TESTIMONIALS ----------
   Modern single-row layout. Vertical 9:16 cards (TikTok/Reels feel).
   Horizontal scroll-snap on mobile.
---------- */
.cine-row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:14px;
}
.cine-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  aspect-ratio: 9/16;
  background:#0c0c0e; cursor:pointer; isolation:isolate;
  transition: transform .5s var(--ease);
}
.cine-card:hover{ transform: translateY(-4px); }

@media (max-width: 1100px){
  .cine-row{
    display:flex; overflow-x:auto;
    gap:14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding: 4px var(--pad) 16px;
    scrollbar-width: none;
  }
  .cine-row::-webkit-scrollbar{ display:none; }
  .cine-row .cine-card{
    flex: 0 0 auto;
    width: clamp(220px, 62vw, 320px);
    scroll-snap-align: start;
  }
}
.cine-card img, .cine-card video{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease), filter .8s var(--ease);
  filter:saturate(1.05) brightness(0.92);
}
.cine-card:hover img{ transform:scale(1.06); filter:saturate(1.1) brightness(1); }
.cine-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:60%;
  background:linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  pointer-events:none;
}

.cine-content{
  position:absolute; left:0; right:0; bottom:0; padding: 18px 18px 20px; z-index:2;
  display:flex; flex-direction:column; gap:6px;
}
.cine-quote{
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
}
.cine-byline{
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color: rgba(255,255,255,0.7); font-weight:500;
}

.cine-runtime{
  position:absolute; top:14px; right:14px; z-index:2;
  font-size:10.5px; letter-spacing:0.14em;
  color: #fff;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  padding:5px 9px; border-radius:999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-weight:500;
}

/* Persistent play button — visible always, gold on hover */
.cine-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:54px; height:54px; border-radius:50%;
  background: rgba(255,255,255,0.92);
  border: 0;
  display:grid; place-items:center; z-index:2;
  transition: transform .45s var(--ease), background .35s var(--ease);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.cine-play::before{
  content:""; width:0; height:0; border-style:solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #0a0a0a;
  margin-left: 3px;
  transition: border-color .3s var(--ease);
}
.cine-card:hover .cine-play{
  transform: translate(-50%,-50%) scale(1.1);
  background: var(--gold);
}

@media (max-width: 600px){
  .cine-play{ width: 48px; height: 48px; }
  .cine-play::before{ border-width: 7px 0 7px 11px; }
  .cine-quote{ font-size: 14.5px; }
}

/* Hide the old cine-pill — not used in new layout */
.cine-pill{ display:none; }

/* ---------- GALLERY STRIP — wide composites, fit fully ---------- */
.gal-strip{ overflow:hidden; padding:24px 0; }
.gal-track{
  display:flex; gap:16px; animation:marquee 60s linear infinite; width:max-content;
  /* Keeps scrolling even when hovered/touched — no pause */
  pointer-events: none;
}
.gal-item{
  flex:0 0 auto; width:clamp(280px, 32vw, 460px); aspect-ratio: 8/3;
  border-radius:var(--r-lg); overflow:hidden; background:#15151A; position:relative;
}
.gal-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-item .pin{
  position:absolute; top:14px; left:14px;
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#fff;
  background:rgba(10,10,10,0.65); border:1px solid rgba(255,255,255,0.18);
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(8px); font-weight:500; z-index:2;
}

/* ---------- REVIEW CAROUSEL ---------- */
.review-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width: 900px){ .review-row{ grid-template-columns:1fr; } }
.review{
  padding:30px 26px; border-radius:var(--r-lg);
  background:#13131A; border:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .4s var(--ease), border-color .3s var(--ease);
}
.cream .review{ background:#FFFFFF; border-color:rgba(0,0,0,0.08); }
.review:hover{ transform:translateY(-3px); border-color:var(--gold); }
.cream .review:hover{ border-color:var(--copper); }
.review-stars{ color:var(--gold); font-size:14px; letter-spacing:2px; }
.cream .review-stars{ color:var(--copper); }
.review-body{
  font-family:var(--font-disp); font-style:italic; font-size:18px; line-height:1.45; font-weight:300; color:var(--ink); letter-spacing:-0.025em;
}
.cream .review-body{ color:var(--ink-dark); }
.review-by{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.review-by .av{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--copper));
  display:grid; place-items:center; color:#0a0a0a; font-weight:600; font-size:13px;
}
.review-by .nm{ font-size:13px; color:var(--ink); font-weight:500; }
.cream .review-by .nm{ color:var(--ink-dark); }
.review-by .src{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-top:2px; font-weight:500; }
.cream .review-by .src{ color:#7A6F5F; }

/* ---------- TRUST RIBBON ---------- */
.trust-ribbon{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; align-items:center;
  padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cream .trust-ribbon{ border-color:var(--line-dark); }
.trust-cell{ display:flex; flex-direction:column; gap:6px; }
.trust-cell .num{
  font-family:var(--font-disp); font-size:clamp(22px, 2.6vw, 32px); font-weight:300; letter-spacing:-0.03em;
  display:flex; align-items:baseline; gap:4px;
}
.trust-cell .lbl{
  font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); display:block; font-weight:500;
}
.trust-stars{ color:var(--gold); font-size:18px; letter-spacing:2px; }
.cream .trust-stars{ color:var(--copper); }
@media (max-width: 800px){
  .trust-ribbon{ grid-template-columns:repeat(2, 1fr); gap:16px 24px; padding:20px 0; }
}
@media (max-width: 380px){
  .trust-ribbon{ grid-template-columns:1fr; gap:12px; }
}

/* ---------- IMAGE MOSAIC (clinic / behind-the-scenes) ---------- */
.mosaic{
  display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-rows:120px; gap:14px;
}
@media (max-width: 900px){ .mosaic{ grid-auto-rows:100px; gap:10px; } }
@media (max-width: 600px){ .mosaic{ grid-auto-rows:80px; gap:8px; } }
.mos{
  position:relative; overflow:hidden; border-radius:var(--r-lg); background:#15151A;
}
.mos img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.mos:hover img{ transform:scale(1.05); }
.mos .cap{
  position:absolute; left:14px; bottom:14px;
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:#fff;
  background:rgba(10,10,10,0.55); border:1px solid rgba(255,255,255,0.18);
  padding:5px 10px; border-radius:999px; backdrop-filter:blur(8px); font-weight:500;
}
.mos.a{ grid-column:span 5; grid-row:span 4; }
.mos.b{ grid-column:span 4; grid-row:span 2; }
.mos.c{ grid-column:span 3; grid-row:span 2; }
.mos.d{ grid-column:span 4; grid-row:span 2; }
.mos.e{ grid-column:span 3; grid-row:span 2; }
@media (max-width: 900px){
  .mos.a{ grid-column:span 12; grid-row:span 4; }
  .mos.b, .mos.c, .mos.d, .mos.e{ grid-column:span 6; grid-row:span 2; }
}

/* ---------- IMAGE BAND (full-bleed photo divider) ---------- */
.band{
  position:relative; height:clamp(280px, 50vw, 560px); overflow:hidden;
}
.band img{ width:100%; height:100%; object-fit:cover; }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.0) 30%, rgba(10,10,10,0.0) 70%, rgba(10,10,10,0.55) 100%);
}
.band-content{
  position:absolute; left:0; right:0; bottom:0; padding:clamp(28px, 5vw, 56px) var(--pad);
  z-index:2;
}
.band-content h3{
  font-size:clamp(28px, 4.5vw, 64px); font-weight:200; letter-spacing:-0.04em; color:#fff; max-width:14ch;
}
.band-content h3 em{ color:var(--gold); font-style:italic; font-weight:200; }
.band-content .pre{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; font-weight:500; }

/* ===========================================================
   OFFER MODAL — $199/mo announcement (Eight Sleep–style)
   =========================================================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:80;
  background:rgba(10,10,10,0.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  display:grid; place-items:center;
  padding:20px;
}
.modal-backdrop.open{ opacity:1; visibility:visible; }

.modal{
  background:var(--bg-cream);
  border-radius:var(--r-lg);
  max-width:920px; width:100%;
  max-height:92vh;
  overflow:auto;
  display:grid; grid-template-columns: 1fr 1fr;
  position:relative;
  transform:scale(0.96) translateY(14px);
  transition: transform .45s var(--ease);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  color: var(--ink-dark);
}
.modal-backdrop.open .modal{ transform:none; }

.modal-img{
  background-size:cover; background-position:center;
  min-height:480px;
}
.modal-content{
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.2vw, 48px);
  display:flex; flex-direction:column; gap:14px;
}

.modal-eyebrow{
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color: var(--copper); font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.modal-eyebrow::before{
  content:""; width:18px; height:1px; background:var(--copper);
}

.modal h2{
  font-family: var(--font-disp);
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight:300; letter-spacing:-0.045em; line-height:1.02;
  color: var(--ink-dark);
  margin:0;
}
.modal h2 em{ color: var(--copper); font-style:italic; font-weight:300; }

.modal-sub{
  font-size: clamp(14.5px, 1.2vw, 16.5px);
  color: var(--ink-dark-soft); line-height:1.5;
  max-width: 38ch;
  margin:0;
}

.modal-pills{
  display:flex; flex-direction:column; gap:10px; margin-top:12px;
}
.modal-pills a{
  display:block; padding:15px 22px; border-radius:14px;
  background: rgba(184,80,66,0.08);
  text-align:center; font-size:15px; font-weight:500;
  color: var(--ink-dark);
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}
.modal-pills a:hover{
  background: rgba(184,80,66,0.18);
  transform: translateY(-1px);
}

.modal-pills a.primary{
  background: var(--ink-dark); color: var(--bg-cream);
}
.modal-pills a.primary:hover{
  background: var(--copper); color: #fff;
}

.modal-foot{
  font-size:11px; color: var(--ink-mute); text-align:center; margin-top:6px;
  letter-spacing:0.02em;
}

.modal-skip{
  display:inline-block; align-self:center; margin-top:8px;
  font-size:13px; color: var(--ink-dark-soft);
  text-decoration:underline; text-underline-offset:4px;
  cursor:pointer;
  transition: color .25s var(--ease);
}
.modal-skip:hover{ color: var(--copper); }

.modal-close{
  position:absolute; top:18px; right:18px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background: rgba(0,0,0,0.08); border:0;
  display:grid; place-items:center; cursor:pointer;
  transition: background .25s var(--ease);
  color: var(--ink-dark);
}
.modal-close:hover{ background: rgba(0,0,0,0.18); }
.modal-close svg{ width:14px; height:14px; }

/* Mobile: image on top, content below */
@media (max-width: 720px){
  .modal{ grid-template-columns: 1fr; max-width: 440px; max-height: 95vh; }
  .modal-img{ min-height: 180px; aspect-ratio: 16/10; }
  .modal-close{ background: rgba(255,255,255,0.92); width:34px; height:34px; }
}

/* ===========================================================
   SERVICES ROW — single-line vertical-card layout
   (cream bg, pill header, 5 tall cards, arrow corners)
   =========================================================== */
.svc-row-section{ background: var(--bg-cream); color: var(--ink-dark); }
.svc-row-head{
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px;
  align-items: end; margin-bottom: 56px;
}
@media (max-width: 900px){
  .svc-row-head{ grid-template-columns: 1fr; gap: 28px; align-items: start; margin-bottom: 36px; }
}

.svc-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid rgba(0,0,0,0.08);
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.svc-pill svg{ width: 14px; height: 14px; }

.svc-row-title{
  font-family: var(--font-disp);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-top: 18px;
  color: var(--ink-dark);
}
.svc-row-title em{ color: var(--copper); font-style: italic; font-weight: 300; }

.svc-row-right{
  display: flex; flex-direction: column; align-items: flex-end; gap: 24px;
  text-align: right;
}
@media (max-width: 900px){
  .svc-row-right{ align-items: flex-start; text-align: left; }
}
.svc-row-lede{
  font-size: 16px; line-height: 1.5; color: var(--ink-dark-soft);
  max-width: 38ch;
}

.svc-row-cta{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--bg-cream-2);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-dark);
  transition: background .3s var(--ease), transform .3s var(--ease);
  border: 1px solid transparent;
}
.svc-row-cta:hover{ background: var(--copper); color: #fff; }
.svc-row-cta .ar{
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink-dark);
  color: var(--bg-cream);
  transition: background .3s var(--ease);
}
.svc-row-cta:hover .ar{ background: #fff; color: var(--ink-dark); }
.svc-row-cta .ar svg{ width: 13px; height: 13px; }

/* The card row — single line, horizontal scroll on every viewport */
.svc-row-grid{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* full-bleed edges so first and last cards land flush with content padding */
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  padding: 4px var(--pad) 16px;
  scroll-padding-left: var(--pad);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.svc-row-grid::-webkit-scrollbar{ display: none; }

.svc-row-card{
  flex: 0 0 auto;
  width: clamp(260px, 21vw, 360px);
  scroll-snap-align: start;
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 9/16;
  background: #1A1A1F;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.svc-row-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.4);
}

.svc-row-card img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
  filter: brightness(0.96) saturate(1.05);
}
.svc-row-card:hover img{ transform: scale(1.06); filter: brightness(0.85); }

.svc-row-card::after{
  content: ""; position: absolute; inset: auto 0 0 0; height: 70%;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
  pointer-events: none;
}

.svc-corner{
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  color: #fff;
  transition: background .3s var(--ease), transform .4s var(--ease), border-color .3s var(--ease);
}
.svc-row-card:hover .svc-corner{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-dark);
  transform: rotate(45deg);
}
.svc-corner svg{ width: 14px; height: 14px; }

.svc-row-name{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 22px 24px;
  font-family: var(--font-disp);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  z-index: 2;
}

/* Mobile sizing */
@media (max-width: 900px){
  .svc-row-card{ width: clamp(220px, 68vw, 320px); }
}
@media (max-width: 600px){
  .svc-row-card{ width: clamp(220px, 76vw, 300px); }
}

/* Arrow controls (desktop only — mobile has natural touch swipe) */
.svc-arrows{
  display: flex; gap: 10px;
  margin-top: 8px;
}
.svc-arrow{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-cream-2);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--ink-dark);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), opacity .25s;
}
.svc-arrow:hover:not(:disabled){
  background: var(--ink-dark);
  color: var(--bg-cream);
  transform: translateY(-2px);
}
.svc-arrow:disabled{
  opacity: 0.35;
  cursor: not-allowed;
}
.svc-arrow svg{ width: 16px; height: 16px; }

@media (max-width: 900px){
  .svc-arrows{ display: none; }
}

/* ===========================================================
   PATIENT JOURNEY — sticky-scroll storytelling
   Image stays sticky on left, steps scroll on right.
   Active step highlighted, image cross-fades.
   =========================================================== */
.journey-section{ position: relative; }
.journey-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.journey-sticky{
  position: sticky; top: 100px;
  height: fit-content;
}

.journey-photos{
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--r-lg); overflow: hidden;
  background: #15151A;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.45);
}
.cream .journey-photos{ box-shadow: 0 20px 60px -20px rgba(0,0,0,0.18); }
.journey-photos img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s var(--ease), transform 2.5s var(--ease);
}
.journey-photos img.active{
  opacity: 1; transform: scale(1);
}

.journey-progress{
  position: absolute; bottom: 22px; left: 22px; right: 22px;
  z-index: 2; display: flex; gap: 6px;
}
.journey-progress span{
  flex: 1; height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow: hidden;
}
.journey-progress span.active{ background: var(--gold); }
.journey-progress span.done{ background: rgba(255,255,255,0.7); }

.journey-pill{
  position: absolute; top: 22px; left: 22px; z-index: 2;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; font-weight: 500;
  background: rgba(10,10,10,0.55); border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.journey-steps{
  display: flex; flex-direction: column;
}
.journey-step{
  padding: clamp(50px, 8vw, 90px) 0;
  border-top: 1px solid var(--line);
  opacity: 0.32;
  transition: opacity .6s var(--ease);
  cursor: pointer;
}
.cream .journey-step{ border-color: var(--line-dark); }
.journey-step:first-child{ border-top: 0; padding-top: 0; }
.journey-step.active{ opacity: 1; }
.journey-step .step-num{
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.cream .journey-step .step-num{ color: var(--copper); }
.journey-step .step-num::before{
  content: ""; width: 22px; height: 1px; background: currentColor;
}
.journey-step h3{
  font-family: var(--font-disp);
  font-size: clamp(28px, 3.4vw, 48px); font-weight: 300;
  letter-spacing: -0.04em; line-height: 1.05;
  margin-top: 18px;
}
.journey-step h3 em{ color: var(--gold); font-style: italic; font-weight: 300; }
.cream .journey-step h3 em{ color: var(--copper); }
.journey-step p{
  margin-top: 18px; color: var(--ink-soft);
  font-size: 15.5px; line-height: 1.55; max-width: 50ch;
}
.cream .journey-step p{ color: var(--ink-dark-soft); }
.journey-step .step-meta{
  margin-top: 16px; display: flex; gap: 28px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.journey-step .step-meta strong{
  display: block; font-family: var(--font-disp);
  font-size: 22px; font-weight: 300; letter-spacing: -0.02em;
  color: var(--ink); margin-top: 4px;
}
.cream .journey-step .step-meta strong{ color: var(--ink-dark); }

@media (max-width: 900px){
  .journey-grid{ grid-template-columns: 1fr; gap: 32px; }
  .journey-sticky{ position: relative; top: 0; }
  .journey-photos{ aspect-ratio: 16/10; }
  .journey-step{
    opacity: 1; padding: 32px 0;
  }
  .journey-step h3{ font-size: clamp(24px, 5vw, 36px); }
}

/* ===========================================================
   DISABLED NAV LINKS — visually identical to active links,
   but not clickable. (Preview / coming-soon state.)
   =========================================================== */
.disabled-link,
a.disabled-link {
  pointer-events: none !important;
}

/* ===========================================================
   LIVE CHAT WIDGET (desktop)
   Panel slides up from bottom-right, conversation flows to WhatsApp
   =========================================================== */
.float-pill.chat-trigger{
  cursor: pointer;
  font-family: var(--font-sans);
}
.float-pill.chat-trigger:hover{
  background: var(--gold); color: var(--ink-dark); border-color: var(--gold); transform: translateY(-2px);
}

.chat-widget{
  position: fixed; bottom: 80px; right: 24px; z-index: 35;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.chat-widget.open{
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

@media (max-width: 800px){
  /* Mobile uses bottom bar for messaging — hide chat widget */
  .chat-widget{ display: none !important; }
}

.chat-panel{
  background: #FFFFFF;
  border-radius: 18px;
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 28px 60px -12px rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.04);
  font-family: var(--font-sans);
  color: var(--ink-dark);
}

.chat-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 16px;
  background: #0A0A0A; color: #fff;
}
.chat-id{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--copper));
  display: grid; place-items: center;
  color: #0A0A0A; font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.chat-id-text{ min-width: 0; }
.chat-id-text strong{
  display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-status{
  font-size: 11px; color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
}
.chat-status .dot{
  width: 7px; height: 7px; border-radius: 50%; background: #34C759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.22);
  animation: chat-pulse 2.4s ease-in-out infinite;
}
@keyframes chat-pulse{
  0%, 100%{ box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.22); }
  50%{ box-shadow: 0 0 0 5px rgba(52, 199, 89, 0.08); }
}
.chat-close{
  background: rgba(255,255,255,0.08); border: 0; color: rgba(255,255,255,0.85);
  font-size: 18px; cursor: pointer; padding: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.chat-close:hover{ background: rgba(255,255,255,0.16); color: #fff; }
.chat-close svg{ width: 13px; height: 13px; }

.chat-body{
  flex: 1; padding: 16px 16px 20px; overflow-y: auto;
  background: #F2F2F4;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-msg{ display: flex; flex-direction: column; max-width: 86%; }
.chat-msg.incoming{ align-self: flex-start; align-items: flex-start; }
.chat-msg.outgoing{ align-self: flex-end; align-items: flex-end; }
.chat-msg p{
  background: #FFFFFF;
  padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  font-size: 14px; line-height: 1.4;
  color: #0A0A0A; margin: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.chat-msg.outgoing p{
  background: var(--ink-dark); color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.chat-msg .chat-time{
  font-size: 10.5px; color: var(--ink-mute);
  margin-top: 4px; padding: 0 4px;
}

.chat-quick{
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px;
  align-self: flex-start; max-width: 100%;
}
.chat-quick button{
  padding: 8px 13px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(0,0,0,0.08);
  font-size: 12.5px; color: var(--ink-dark);
  cursor: pointer; font-family: inherit;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.chat-quick button:hover{
  background: var(--ink-dark); color: #fff; border-color: var(--ink-dark);
}
.chat-quick button:active{ transform: scale(0.96); }

.chat-foot{
  display: flex; align-items: center; gap: 8px;
  padding: 12px;
  background: #fff; border-top: 1px solid rgba(0,0,0,0.06);
}
.chat-input{
  flex: 1; border: 0; padding: 11px 16px;
  background: #F2F2F4;
  border-radius: 999px;
  font-size: 14px; outline: 0;
  font-family: inherit;
  color: var(--ink-dark);
}
.chat-input::placeholder{ color: #8E8E93; }
.chat-send{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink-dark); color: #fff;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s var(--ease), transform .15s var(--ease);
  flex-shrink: 0;
}
.chat-send:hover{ background: var(--gold); color: var(--ink-dark); }
.chat-send:active{ transform: scale(0.92); }
.chat-send svg{ width: 16px; height: 16px; }

/* ===========================================================
   MOBILE PREMIUM POLISH — final layer
   Tactile press states, tighter spacing, refined components
   =========================================================== */

/* Touch-friendly tap behavior — no 300ms delay, no highlight flash */
a, button, .btn, .svc-row-card, .cine-card, .svc-card, .sub-card,
.modal-pills a, .cta-cell, .review, .press-quote, .test-card,
.svc-corner, .ba-tag, .drawer-link-flat, .drawer-sub a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Tactile press states on all cards (visible feedback when tapped) */
@media (hover: none) and (pointer: coarse){
  .svc-row-card:active,
  .svc-card:active,
  .sub-card:active,
  .cine-card:active,
  .test-card:active,
  .press-quote:active,
  .review:active,
  .team-card:active{
    transform: scale(0.985);
    transition: transform .15s var(--ease);
  }
  .btn:active{
    transform: scale(0.97);
    transition: transform .12s var(--ease);
  }
  .cta-cell:active{
    background: rgba(255,255,255,0.04);
  }
  .cream .cta-cell:active{
    background: rgba(0,0,0,0.04);
  }
}

/* Tighter section spacing on small screens (more content visible per scroll) */
@media (max-width: 700px){
  .section{ padding-top: clamp(48px, 11vw, 80px); padding-bottom: clamp(48px, 11vw, 80px); }
  .section.tight{ padding-top: clamp(28px, 7vw, 56px); padding-bottom: clamp(28px, 7vw, 56px); }
}

/* Hero: tighter padding + scaled headline on mobile */
@media (max-width: 600px){
  .hero{ padding-top: 92px; padding-bottom: 32px; }
  .hero h1{ font-size: clamp(40px, 11vw, 64px); line-height: 0.96; max-width: 16ch; }
  .hero-sub{ margin-top: 18px; font-size: 14.5px; line-height: 1.5; }
  .hero-ctas{ margin-top: 24px; gap: 8px; }
  .hero-ctas .btn{ flex: 1 1 auto; justify-content: center; }
  .hero-meta{ margin-top: 32px; padding-top: 20px; gap: 18px 24px; }
}

/* Detail hero — extra refined on phones */
@media (max-width: 600px){
  .detail-hero.compact{ min-height: 52svh; padding-top: 88px; padding-bottom: 28px; }
  .detail-hero h1{ font-size: clamp(34px, 9vw, 52px) !important; }
  .detail-hero .crumbs{ font-size: 10px; margin-bottom: 18px; }
}

/* Drawer — premium feel: slightly slower opening, softer shadow, frosted edge */
.drawer-panel{
  box-shadow: -20px 0 60px -10px rgba(0,0,0,0.6);
}
.drawer.open .drawer-panel{
  transition: transform .55s cubic-bezier(.16, .84, .25, 1);
}
.drawer-section summary{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.drawer-sub a:active{ background: rgba(255,255,255,0.04); }

/* Mobile bottom CTA bar — premium polish */
.mobile-bar{
  /* refined frosted appearance */
  background: rgba(8, 8, 10, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid rgba(255,255,255,0.12);
  padding: 10px 10px calc(10px + var(--safe-bottom));
  gap: 6px;
}
.mobile-bar a{
  position: relative;
  padding: 12px 8px;
  border-radius: 14px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
  font-size: 10.5px; letter-spacing: 0.06em;
  font-weight: 500;
}
.mobile-bar a:active{
  background: rgba(255,255,255,0.08);
  transform: scale(0.96);
}
.mobile-bar a.primary{
  background: var(--gold);
  color: var(--ink-dark);
  box-shadow: 0 6px 18px -6px rgba(201, 166, 107, 0.5);
}
.mobile-bar a.primary:active{
  background: var(--gold-hi);
  transform: scale(0.96);
}
.mobile-bar a svg{ width: 18px; height: 18px; }
.mobile-bar a span{ font-size: 10.5px; line-height: 1; margin-top: 1px; }

/* SVC row arrows — bigger tap targets on tablet */
@media (min-width: 700px) and (max-width: 1100px){
  .svc-arrow{ width: 52px; height: 52px; }
}

/* Cine cards (patient stories) — slight polish on mobile */
@media (max-width: 600px){
  .cine-card{ border-radius: 14px; }
  .cine-content{ padding: 14px 14px 16px; gap: 4px; }
  .cine-quote{ font-size: 14px; }
  .cine-byline{ font-size: 10px; }
  .cine-runtime{ top: 12px; right: 12px; padding: 4px 9px; font-size: 10px; }
}

/* Footer — tighter on mobile */
@media (max-width: 600px){
  .footer{ padding: 56px 0 calc(28px + var(--bottom-bar-h) + var(--safe-bottom)); }
  .footer .top{ padding-bottom: 36px; gap: 24px; }
  .footer .bottom{ padding-top: 24px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Reach card — better mobile stacking */
@media (max-width: 600px){
  .reach{ padding: 36px 24px 32px; }
  .reach-actions .btn{ padding: 16px 20px; font-size: 12px; }
}

/* Sub-card visual lift on press (mobile) */
@media (hover: none) and (pointer: coarse){
  .sub-card{ transition: transform .25s var(--ease), border-color .25s var(--ease); }
}

/* Smoother scroll on iOS */
html{ -webkit-overflow-scrolling: touch; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > *{ opacity: 1 !important; transform: none !important; }
}

/* ---------- Misc helpers ---------- */
.text-center{ text-align:center; }
.flex{ display:flex; }
.gap-12{ gap:12px; }
.gap-20{ gap:20px; }
.mt-20{ margin-top:20px; }
.mt-40{ margin-top:40px; }
.mt-60{ margin-top:60px; }
.cap-w{ max-width:65ch; }