/* === LUMAE AESTHETICS AND WELLNESS ===
   Realigned onto the client brand directive:
   "Lumae_Brand_Guide_Marketing_Team.pdf" (Drive, folder "Lumae Woodlands").

   Directive section 7 asks for a website that is "primarily black, editorial
   typography, strategic dark florals around the edges, controlled raspberry/
   pink glow and antique-gold details". Lumae Black is therefore the page
   ground and Warm Ivory is the type; the champagne build this replaces had
   those two roles the other way round.

   Every value below is either a colour the directive names outright or a step
   derived from one. Contrast figures are measured, not estimated - regenerate
   them with the brand skill's scripts/contrast.py audit.

   Directive section 2 also warns that hot pink is experiential, reserved for
   neon and campaign moments. The pre-champagne dark theme used #FF2E93 as a
   corporate accent; that is the specific mistake this file must not repeat.
   The glow here is raspberry and restrained.
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- Grounds: Lumae Black and steps warmed toward Amber ----
     The directive names one black. The raised steps are derived from it so
     sections separate by elevation rather than by inverting to a light band -
     "primarily black" survives a page that still has rhythm. */
  --ink:#11100F;        /* Lumae Black - page ground, dominant environmental colour */
  --noir:#171514;       /* raised band */
  --charcoal:#1E1B19;   /* card */
  --elev:#262220;       /* highest surface */

  /* ---- Type: Warm Ivory ----
     15.84:1 on Lumae Black. The directive's "primary light text and
     negative-space colour". */
  --ivory:#F2E9DF;
  --dim:rgba(242,233,223,0.74);
  --faint:rgba(242,233,223,0.60);
  --line:rgba(242,233,223,0.14);
  --line-pink:rgba(169,95,99,0.30);
  --line-strong:rgba(242,233,223,0.28);

  /* ---- Raspberry: the feminine accent ----
     Raspberry #A95F63 measures 4.08:1 on Lumae Black, so it clears AA for
     large text and UI but NOT for body copy. Small raspberry text uses
     --pink-text; the base value stays exactly as the directive specifies so
     fills, rules and large display type remain the true brand colour. */
  --pink:#A95F63;        /* Raspberry, as named in the directive */
  --pink-text:#B7797C;   /* Calibrated against --elev, the lightest surface it can
                            land on: 4.53:1 there, 5.47:1 on the page ground.
                            Calibrating against the page ground alone leaves it
                            failing on every raised card. */
  --pink-glow:#C4787C;   /* 5.72:1 - hover and emphasis */
  --pink-deep:#7E3F45;   /* pressed */
  --pink-blush:#D2A09B;  /* Dusty Rose - 8.36:1, excellent secondary body text */

  /* ---- Oxblood: the button ----
     Section 7 offers "oxblood or muted raspberry with ivory type". Measured,
     only one of those is safe at button label sizes: Oxblood carries Warm
     Ivory at 10.25:1, raspberry at its true value manages 3.88:1. Primary
     fills are therefore Oxblood, and --pink-fill is raspberry muted just far
     enough (4.55:1) to be a legal hover. */
  --purple:#57252C;      /* Oxblood, as named in the directive */
  --purple-glow:#6E3038;
  --pink-fill:#9D5458;   /* muted raspberry that still carries ivory type */

  /* ---- Antique Gold: trim, and on black it may also carry text ----
     6.79:1 on Lumae Black. On the champagne ground gold measured 2.33:1 and
     was banned from type entirely; the dark ground gives it back. Section 2
     still rules out large metallic blocks - fine borders and details only. */
  --gold:#B99559;
  --gold-bright:#D0B27C;
  --gold-deep:#8A6E42;

  /* ---- Botanical and product support colours ----
     Named in the directive and absent from the champagne build. Deep Olive
     carries greenery and foliage; Amber carries glassware and warm styling.
     Both are grounds or fields, never type - each sits near 1.5:1 on black. */
  --olive:#283127;
  --olive-lift:#3A4739;
  --amber:#6B4A2E;
  --amber-lift:#8A6440;

  /* Leopard is the surprise, not the identity (section 4) - one element per
     composition. Tied to Antique Gold so it reads as brand, not costume. */
  --leopard-tan:#B99559;
  --leopard-spot:#2A1C12;

  /* Controlled glow. Raspberry, low alpha, no hot pink. */
  --neon-shadow:0 0 18px rgba(169,95,99,0.28);
  --gold-shadow:0 0 14px rgba(185,149,89,0.20);

  --radius:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --rhythm:8rem;   /* the single vertical step; every section gap is this or a fraction */

  /* The former "on-dark" set. The page is now dark throughout, so these
     resolve to the page values and the handful of var(--d-dim) usages left in
     the markup keep working without a sweep through 13 files. */
  --d-ground:#11100F;
  --d-raised:#171514;
  --d-text:#F2E9DF;
  --d-dim:rgba(242,233,223,0.74);
  --d-line:rgba(242,233,223,0.16);

  /* Section 8 allows an ivory background for education panels. Anything
     placed on --l-ground must take --l-text, never --ivory. */
  --l-ground:#F2E9DF;
  --l-text:#11100F;
  --l-dim:rgba(17,16,15,0.72);

  /* Legacy tokens still referenced by inline styles on the utility pages.
     Kept so those pages do not fall back to transparent. */
  --ice:#1A1716;
  --sage:#D2A09B;
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  background:var(--ink);
  color:var(--ivory);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse at 20% 0%, rgba(169,95,99,0.06) 0%, transparent 45%),
                   radial-gradient(ellipse at 80% 100%, rgba(185,149,89,0.05) 0%, transparent 45%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;line-height:1.06;font-weight:600;letter-spacing:0}
em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500}

/* Neon utility */
.neon{color:var(--pink-text);text-shadow:var(--neon-shadow)}
.neon-gold{color:var(--gold);text-shadow:var(--gold-shadow)}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.1rem 2rem;background:linear-gradient(to bottom, rgba(17,16,15,0.92) 0%, rgba(17,16,15,0.55) 70%, rgba(17,16,15,0));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}
.nav-logo{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
.nav-logo img{height:40px;width:auto;filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(169,95,99,0.4))}
.nav-logo-text{display:flex;flex-direction:column;gap:2px;min-width:max-content}
.nav-logo-name{font-family:'Montserrat',sans-serif;font-size:1.2rem;font-weight:800;letter-spacing:0.24em;white-space:nowrap;color:var(--ivory);line-height:1;text-shadow:0 0 12px rgba(169,95,99,0.4)}
.nav-logo-tagline{font-size:0.42rem;font-weight:600;letter-spacing:0.3em;white-space:nowrap;color:var(--pink-text);line-height:1;text-transform:uppercase;text-shadow:0 0 6px rgba(169,95,99,0.5)}
.nav-menu{display:flex;gap:2.5rem;justify-content:center;list-style:none}
.nav-menu a{position:relative;font-size:0.8rem;font-weight:500;letter-spacing:0.14em;color:var(--ivory);text-transform:uppercase;transition:color .3s var(--ease),text-shadow .3s var(--ease)}
.nav-menu a:hover,.nav-menu a.active{color:var(--pink-text);text-shadow:0 0 10px rgba(169,95,99,0.6)}
.nav-cta{white-space:nowrap;display:inline-flex;align-items:center;gap:0.5rem;background:var(--pink);color:var(--ivory);padding:0.7rem 1.4rem;border-radius:100px;font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);box-shadow:0 0 0 1px rgba(169,95,99,0.3), 0 0 24px rgba(169,95,99,0.35)}
.nav-cta:hover{background:var(--pink-glow);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(169,95,99,0.5), 0 0 34px rgba(169,95,99,0.55)}
.nav-cta svg{width:14px;height:14px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ivory);margin:5px 0;transition:.25s;box-shadow:0 0 6px rgba(169,95,99,0.5)}
.nav-mobile{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--noir);z-index:99;padding:6rem 2rem 2rem;flex-direction:column;gap:1.25rem}
.nav-mobile a{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2rem;color:var(--ivory);border-bottom:1px solid var(--line);padding-bottom:1rem}
.nav-mobile.open{display:flex}
@media(max-width:1024px){.nav-menu{display:none}.nav-toggle{display:block}.nav-cta{display:none}}

/* ============ MARQUEE ============ */
.marquee{position:relative;overflow:hidden;padding:1.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--noir)}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;animation:marq 40s linear infinite;width:max-content}
.marquee.reverse .marquee-track{animation-direction:reverse;animation-duration:50s}
.marquee-item{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,5vw,4rem);font-style:italic;color:var(--ivory);letter-spacing:-0.02em}
.marquee-item.dim{color:var(--faint)}
.marquee-item .sep{color:var(--pink-text);font-style:normal;padding:0 1.5rem;text-shadow:var(--neon-shadow)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;padding:8rem 2rem 4rem;overflow:hidden;background:var(--ink)}
.hero::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center 20%;opacity:0.28;filter:saturate(1.2) contrast(1.1) blur(0px);z-index:0;mix-blend-mode:screen}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%, rgba(169,95,99,0.22) 0%, rgba(87,37,44,0.10) 30%, rgba(17,16,15,0.75) 60%, var(--ink) 88%);z-index:1;pointer-events:none}
.hero-inner{max-width:1400px;margin:0 auto;position:relative;z-index:3}
.hero-3d-scene{z-index:2}

/* ============ WALLPAPER BAND (full-bleed brand statement) ============
   The floral photograph this band was built around is retired: .bg has its
   background-image overridden to none further down, and the band now carries
   an oxblood and raspberry wash instead. The rules below still reference the
   image because the override is what wins, not because the image is in use. */
.wallpaper-band{position:relative;padding:0;min-height:520px;overflow:hidden;background:var(--noir);border-top:1px solid var(--line-pink);border-bottom:1px solid var(--line-pink)}
.wallpaper-band .bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;filter:saturate(1.1)}
.wallpaper-band .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(17,16,15,0.92) 0%, rgba(17,16,15,0.45) 40%, rgba(17,16,15,0.45) 60%, rgba(17,16,15,0.92) 100%), linear-gradient(180deg, rgba(17,16,15,0.65) 0%, transparent 30%, transparent 70%, rgba(17,16,15,0.65) 100%)}
.wallpaper-band .inner{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:6rem 2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.wallpaper-band .copy{background:rgba(17,16,15,0.72);backdrop-filter:blur(6px);padding:2.5rem 2rem;border:1px solid var(--line-pink);border-radius:var(--radius)}
.wallpaper-band .kicker{font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--purple);font-weight:700;text-shadow:0 0 8px rgba(87,37,44,0.5);margin-bottom:1.25rem;display:block}
.wallpaper-band h2{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1;margin-bottom:1.5rem;color:var(--ivory)}
.wallpaper-band h2 em{color:var(--pink-text);font-family:'Cormorant Garamond',serif;text-shadow:var(--neon-shadow)}
.wallpaper-band p{color:var(--dim);font-size:1.05rem;line-height:1.75}
.wallpaper-band .neon-sign{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;color:var(--pink-text);font-size:clamp(3rem,7vw,6rem);line-height:0.95;text-align:center;text-shadow:0 0 18px rgba(169,95,99,0.75), 0 0 42px rgba(169,95,99,0.4), 0 0 82px rgba(87,37,44,0.35);letter-spacing:-0.01em}
.wallpaper-band .neon-sign small{display:block;font-family:'Montserrat',sans-serif;font-size:0.7rem;letter-spacing:0.5em;color:var(--gold);text-shadow:var(--gold-shadow);text-transform:uppercase;font-style:normal;margin-top:1rem;font-weight:600}
@media(max-width:900px){.wallpaper-band .inner{grid-template-columns:1fr;gap:2.5rem;padding:4rem 1.5rem}.wallpaper-band .bg::after{background:linear-gradient(180deg, rgba(17,16,15,0.9) 0%, rgba(17,16,15,0.55) 50%, rgba(17,16,15,0.9) 100%)}}

/* ============ HERO — 3D ROTATING PRISM (Promora-style) ============
   Hexagonal prism: 6 tiles arranged around a shared Y-axis so their
   inner edges meet at center. backface-visibility:visible so we see the
   back tiles bleed through with mirrored text — the signature Promora look.
*/
.hero-3d-scene{position:absolute;inset:0;pointer-events:none;perspective:1600px;perspective-origin:50% 50%;z-index:1;overflow:hidden}
.hero-3d-scene::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%, transparent 25%, rgba(17,16,15,0.55) 65%, var(--ink) 90%);z-index:3;pointer-events:none}

/* Giant background marquee text behind the prism */
.hero-bg-text{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;padding:6rem 0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg-text .row{overflow:hidden;white-space:nowrap;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(6rem,15vw,14rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,233,223,0.08);letter-spacing:-0.03em}
.hero-bg-text .row.solid{color:rgba(242,233,223,0.04);-webkit-text-stroke:0}
.hero-bg-text .track{display:inline-flex;gap:3rem;animation:bg-scroll 55s linear infinite;padding-left:0}
.hero-bg-text .row.reverse .track{animation-direction:reverse;animation-duration:65s}
.hero-bg-text .row .track span{display:inline-block;padding-right:3rem}
@keyframes bg-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hero-3d-turntable{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(-6deg) rotateZ(12deg);animation:turntable 30s linear infinite;z-index:2}
@keyframes turntable{
  from{transform:translate(-50%,-50%) rotateX(-6deg) rotateZ(12deg) rotateY(0deg)}
  to  {transform:translate(-50%,-50%) rotateX(-6deg) rotateZ(12deg) rotateY(360deg)}
}
/* 6 tiles arranged as faces of a hexagonal prism.
   tile width 260, height 380. Hex apothem = 260 / (2*tan(30°)) ≈ 225px translateZ.
   backface-visibility:visible so back-facing tiles show mirrored — the signature effect.
*/
.tile3d{position:absolute;top:-190px;left:-130px;width:260px;height:380px;border-radius:8px;overflow:hidden;border:1px solid rgba(169,95,99,0.35);background:linear-gradient(160deg, var(--charcoal) 0%, var(--noir) 55%, var(--ink) 100%);box-shadow:0 40px 80px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(185,149,89,0.1) inset, 0 0 32px rgba(169,95,99,0.18)}
.tile3d::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, transparent 35%, rgba(17,16,15,0.88) 100%);z-index:2;pointer-events:none}
.tile3d::after{content:'✦';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ivory);font-size:2.2rem;z-index:3;opacity:0.9;text-shadow:0 0 18px rgba(255,255,255,0.85), 0 0 32px rgba(169,95,99,0.6);pointer-events:none}
.tile3d .lbl{position:absolute;z-index:3;color:var(--ivory)}
.tile3d .lbl.top{top:1rem;left:1rem;font-size:0.68rem;letter-spacing:0.28em;font-weight:700;color:var(--gold);text-shadow:var(--gold-shadow)}
.tile3d .lbl.bottom{bottom:1.1rem;left:1.1rem;right:1.1rem;font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;text-align:center}
.tile3d .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.15) contrast(1.05) brightness(0.85);z-index:1}
.tile3d._1{transform:rotateY(  0deg) translateZ(225px)}
.tile3d._2{transform:rotateY( 60deg) translateZ(225px)}
.tile3d._3{transform:rotateY(120deg) translateZ(225px)}
.tile3d._4{transform:rotateY(180deg) translateZ(225px)}
.tile3d._5{transform:rotateY(240deg) translateZ(225px)}
.tile3d._6{transform:rotateY(300deg) translateZ(225px)}
.hero:hover .hero-3d-turntable{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-3d-turntable{animation:none}}
@media(max-width:900px){
  .hero-3d-scene{perspective:1100px;opacity:0.85}
  .tile3d{width:180px;height:260px;top:-130px;left:-90px}
  .tile3d._1{transform:rotateY(  0deg) translateZ(156px)}
  .tile3d._2{transform:rotateY( 60deg) translateZ(156px)}
  .tile3d._3{transform:rotateY(120deg) translateZ(156px)}
  .tile3d._4{transform:rotateY(180deg) translateZ(156px)}
  .tile3d._5{transform:rotateY(240deg) translateZ(156px)}
  .tile3d._6{transform:rotateY(300deg) translateZ(156px)}
  .hero-bg-text .row{font-size:clamp(4rem,20vw,8rem)}
}

.hero-badge{display:inline-flex;align-items:center;gap:0.55rem;background:rgba(169,95,99,0.14);border:1px solid rgba(169,95,99,0.5);color:var(--pink-text);padding:0.5rem 1.1rem;border-radius:100px;font-size:0.7rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;margin-bottom:2rem;text-shadow:0 0 8px rgba(169,95,99,0.5);box-shadow:0 0 20px rgba(169,95,99,0.15)}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(169,95,99,0.25), 0 0 12px var(--pink);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.hero-title{font-size:clamp(3rem,10vw,8rem);line-height:0.95;letter-spacing:-0.03em;margin:0 auto;max-width:12ch;text-align:center;color:var(--ivory);text-shadow:0 4px 24px rgba(17,16,15,0.85), 0 0 60px rgba(17,16,15,0.55)}
.hero-title em{color:var(--pink-text);text-shadow:var(--neon-shadow);font-weight:600}
.hero-title .sm{display:inline-block;font-size:0.35em;vertical-align:super;color:var(--gold);font-style:normal;letter-spacing:0.06em;margin-left:0.15em;font-family:'Montserrat',sans-serif;font-weight:400}
.hero-sub{max-width:600px;margin:2.5rem auto 3rem;text-align:center;font-size:1.05rem;color:var(--dim);line-height:1.75;text-shadow:0 2px 12px rgba(17,16,15,0.75)}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:5rem}
.hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;padding-top:2rem;border-top:1px solid var(--line);color:var(--dim);font-size:0.85rem}
.hero-meta strong{color:var(--ivory);font-weight:600}

/* ============ BUTTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;gap:0.6rem;padding:1rem 2rem;border-radius:100px;font-size:0.8rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);cursor:pointer;border:none;overflow:hidden}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translate(4px,-4px) rotate(-45deg)}
.btn-gold{background:transparent;color:var(--gold);border:1px solid var(--gold);box-shadow:none}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 0 34px rgba(185,149,89,0.5)}
.btn-pink{background:var(--pink);color:var(--ivory);box-shadow:0 0 0 1px rgba(169,95,99,0.3), 0 0 24px rgba(169,95,99,0.4)}
.btn-pink:hover{background:var(--pink-glow);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(169,95,99,0.5), 0 0 36px rgba(169,95,99,0.6)}
.btn-ghost{background:transparent;color:var(--ivory);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink-text);text-shadow:0 0 10px rgba(169,95,99,0.5)}

/* ============ SECTIONS ============ */
/* ---- Vertical rhythm ----
   One token drives section spacing; the modifiers are fractions of it. Before
   this, section padding was set with ad-hoc inline styles and the site carried
   nine distinct vertical gaps, so no two pages breathed the same way. Reach for
   a modifier, never an inline padding. */
.section{position:relative;padding:var(--rhythm) 2rem}
.section--tight{padding-top:calc(var(--rhythm) * 0.5);padding-bottom:calc(var(--rhythm) * 0.5)}
.section--tight-top{padding-top:calc(var(--rhythm) * 0.5)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section-inner{max-width:1400px;margin:0 auto}
.section-eyebrow{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--pink-text);margin-bottom:2rem;font-weight:600;text-shadow:0 0 8px rgba(169,95,99,0.4)}
.section-eyebrow::before{content:'✲';color:var(--pink-text);font-size:1rem;text-shadow:0 0 6px rgba(169,95,99,0.6);text-shadow:var(--gold-shadow)}
.scroll-title{position:relative;font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,7vw,5.5rem);font-style:italic;color:var(--faint);letter-spacing:-0.02em;overflow:hidden;padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:5rem}
.scroll-title .st-track{display:inline-flex;gap:2rem;white-space:nowrap;animation:st-scroll 32s linear infinite;padding-left:0}
.scroll-title .st-track span.st-piece{display:inline-block;padding-right:2rem}
.scroll-title .st-track .sep,.scroll-title .st-track > span > span{color:var(--pink-text);font-style:normal;padding:0 1rem;text-shadow:0 0 12px rgba(169,95,99,0.4)}
@keyframes st-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Legacy fallback for scroll-title using inline <span> as divider (still supported) */
.scroll-title > span{color:var(--pink-text);font-style:normal;padding:0 1rem;text-shadow:0 0 12px rgba(169,95,99,0.4)}

/* ============ SERVICES / PRODUCTS LIST ============ */
.services-list{border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2rem;align-items:center;padding:2.5rem 0;border-bottom:1px solid var(--line);transition:background .3s var(--ease);cursor:pointer;position:relative}
.service-row:hover{background:rgba(169,95,99,0.05)}
.service-row:hover .service-name{color:var(--pink-text);text-shadow:0 0 12px rgba(169,95,99,0.3)}
.service-row:hover .service-arrow{background:var(--pink);color:var(--ivory);transform:rotate(-45deg);border-color:var(--pink);box-shadow:0 0 20px rgba(169,95,99,0.5)}
.service-num{font-size:0.78rem;color:var(--pink-text);letter-spacing:0.18em;font-weight:600;text-transform:uppercase;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.service-name{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.2rem);font-style:italic;color:var(--ivory);transition:color .3s var(--ease),text-shadow .3s var(--ease);line-height:1.05}
.service-name em{color:var(--pink-text);font-family:inherit}
.service-name .sub{display:block;font-family:'Montserrat',sans-serif;font-style:normal;font-size:0.82rem;color:var(--dim);letter-spacing:0.16em;text-transform:uppercase;margin-top:0.75rem;font-weight:500}
.service-arrow{justify-self:end;width:52px;height:52px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;transition:all .3s var(--ease);color:var(--ivory)}
.service-arrow svg{width:18px;height:18px}
@media(max-width:768px){.service-row{grid-template-columns:auto 1fr auto;gap:1rem;padding:1.75rem 0}.service-name{font-size:1.8rem}}

/* ============ FEATURE / SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.split-copy .kicker{display:inline-block;font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--pink-text);margin-bottom:1.5rem;font-weight:600;text-shadow:0 0 8px rgba(169,95,99,0.4)}
.split-copy h2{font-size:clamp(2.4rem,5vw,4rem);line-height:1;margin-bottom:2rem;color:var(--ivory)}
.split-copy h2 em{color:var(--pink-text);text-shadow:var(--neon-shadow);font-family:'Cormorant Garamond',serif;font-weight:500}
.split-copy p{color:var(--dim);font-size:1.05rem;line-height:1.8;margin-bottom:1.5rem;max-width:52ch}
/* Placard = a black card carrying a per-service photograph, with the widget
   chrome floating on top. Each instance sets its own background-image inline
   (assets/placards/*.jpg), which is why there is no default here — the old
   dark-floral tile fallback was never in effect and its asset is retired.
   Transmission through the veil and chrome is a solved system; see
   docs/placard-spec.md before touching any alpha in this block. */
.split-visual{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-pink);background-color:var(--noir);background-size:cover;background-position:center;box-shadow:0 0 50px rgba(169,95,99,0.28), 0 0 0 1px rgba(169,95,99,0.08) inset, 0 30px 80px -30px rgba(0,0,0,0.9)}
/* Layered veil: soft pink wash at top-left + dark base — keeps text readable but LETS the wallpaper breathe */
.split-visual::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(ellipse at 20% 15%, rgba(169,95,99,0.15) 0%, transparent 45%),
  radial-gradient(ellipse at 80% 85%, rgba(87,37,44,0.10) 0%, transparent 50%),
  linear-gradient(180deg, rgba(17,16,15,0.16) 0%, rgba(17,16,15,0.56) 55%, rgba(17,16,15,0.82) 100%)}
/* Subtle inner pink glow ring on the frame */
.split-visual::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 60px rgba(169,95,99,0.15), inset 0 0 0 1px rgba(169,95,99,0.18);border-radius:var(--radius)}
.split-visual > *{position:relative;z-index:2}
.split-visual .badge{position:absolute;top:1.5rem;left:1.5rem;background:rgba(17,16,15,0.85);backdrop-filter:blur(10px);color:var(--pink-text);padding:0.5rem 1rem;border-radius:100px;font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;z-index:3;border:1px solid rgba(169,95,99,0.5);text-shadow:0 0 8px rgba(169,95,99,0.55);box-shadow:0 0 18px rgba(169,95,99,0.25)}

/* ============ WIDGET (interactive placard: drip builder, unit calc, etc.) ============ */
.widget{position:absolute;inset:5.5rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:0.9rem;z-index:3;color:var(--ivory)}
.widget .w-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.6rem;line-height:1.1;color:var(--ivory);margin-bottom:0.4rem;text-shadow:0 1px 3px rgba(17,16,15,0.9), 0 0 10px rgba(17,16,15,0.65)}
.widget .w-title em{color:var(--pink-text);text-shadow:0 0 12px rgba(169,95,99,0.5)}
.widget label,.widget .w-label{font-size:0.62rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--pink-text);font-weight:700;text-shadow:0 0 6px rgba(169,95,99,0.45);margin-bottom:0.35rem;display:block}
.widget select,.widget input[type="range"],.widget input[type="number"]{width:100%;background:rgba(17,16,15,0.50);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line-strong);border-radius:8px;padding:0.7rem 0.9rem;color:var(--ivory);font-family:inherit;font-size:0.9rem;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.widget select:focus,.widget input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(169,95,99,0.15)}
.widget select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23A83255'><path d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 0.9rem center;background-size:10px}
.widget .w-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.6rem 0.8rem;background:rgba(17,16,15,0.34);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:.2s var(--ease)}
.widget .w-row.on{border-color:var(--pink);background:rgba(169,95,99,0.14);backdrop-filter:blur(4px) saturate(1.4);-webkit-backdrop-filter:blur(4px) saturate(1.4);box-shadow:0 0 18px rgba(169,95,99,0.28), 0 0 0 1px rgba(169,95,99,0.15) inset}
.widget .w-row .w-name{font-size:0.8rem;font-weight:600;color:var(--ivory);text-shadow:0 1px 3px rgba(17,16,15,0.9), 0 0 10px rgba(17,16,15,0.65)}
.widget .w-row .w-desc{font-size:0.66rem;color:var(--ivory);opacity:0.72;letter-spacing:0.06em;text-shadow:0 1px 3px rgba(17,16,15,0.9), 0 0 10px rgba(17,16,15,0.65)}
.widget .w-toggle{border:none;background:transparent;color:var(--pink-text);font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;padding:0.35rem 0.75rem;border-radius:100px;transition:.2s}
.widget .w-row.on .w-toggle{background:var(--pink);color:var(--ivory);box-shadow:0 0 12px rgba(169,95,99,0.5)}
.widget .w-total{margin-top:auto;padding:1rem;border:1px solid var(--line-pink);border-radius:10px;background:linear-gradient(180deg, rgba(169,95,99,0.14) 0%, rgba(17,16,15,0.46) 100%);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);text-align:center;box-shadow:0 0 24px rgba(169,95,99,0.18), inset 0 1px 0 rgba(255,255,255,0.06)}
.widget .w-total .lbl{font-size:0.6rem;letter-spacing:0.28em;color:var(--pink-text);font-weight:700;text-transform:uppercase;margin-bottom:0.35rem;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.widget .w-total .amt{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:2.6rem;color:var(--ivory);line-height:1;text-shadow:0 0 24px rgba(169,95,99,0.5), 0 2px 6px rgba(17,16,15,0.95)}
.widget .w-total .note{font-size:0.68rem;color:var(--ivory);opacity:0.75;margin-top:0.4rem;letter-spacing:0.04em;text-shadow:0 1px 3px rgba(17,16,15,0.9), 0 0 10px rgba(17,16,15,0.65)}
/* The ketamine picker names the chosen protocol instead of totalling a price
   (client, 2026-09-17). A protocol name is four or five words, so it cannot
   ride the 2.6rem display size a dollar figure was sized for. */
.widget .w-total .amt--words{font-size:1.15rem;font-style:normal;font-family:'Montserrat',sans-serif;font-weight:500;line-height:1.35;letter-spacing:0.01em;text-shadow:0 2px 6px rgba(17,16,15,0.95)}
.widget .w-list{display:flex;flex-direction:column;gap:0.4rem;overflow-y:auto}
.widget .w-list::-webkit-scrollbar{width:4px}
.widget .w-list::-webkit-scrollbar-thumb{background:var(--pink);border-radius:4px}
@media(max-width:900px){.widget{position:static;inset:auto;padding:1.5rem 1.25rem;min-height:auto}.split-visual{aspect-ratio:auto;min-height:auto}}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.5rem}}

/* ============ PILLAR CARDS ============ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pillar{position:relative;padding:2.5rem 2rem;background:linear-gradient(180deg, var(--charcoal) 0%, var(--noir) 100%);border:1px solid var(--line);border-radius:var(--radius);transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);overflow:hidden}
.pillar::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);opacity:0;transition:opacity .35s var(--ease)}
.pillar:hover{transform:translateY(-6px);border-color:var(--line-pink);box-shadow:0 30px 60px -20px rgba(169,95,99,0.25)}
.pillar:hover::before{opacity:1}
.pillar-num{font-size:0.72rem;letter-spacing:0.28em;color:var(--pink-text);font-weight:700;margin-bottom:1.25rem;text-transform:uppercase;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.pillar h3{font-size:1.9rem;line-height:1.1;margin-bottom:1rem;color:var(--ivory)}
.pillar h3 em{color:var(--pink-text);font-family:'Cormorant Garamond',serif;text-shadow:0 0 10px rgba(169,95,99,0.35)}
.pillar p{color:var(--dim);font-size:0.95rem;line-height:1.7;margin-bottom:1.75rem}
.pillar-list{list-style:none;margin-bottom:2rem}
.pillar-list li{padding:0.6rem 0;border-top:1px solid var(--line);color:var(--ivory);font-size:0.9rem;display:flex;align-items:center;gap:0.75rem}
.pillar-list li::before{content:'✲';color:var(--pink-text);font-size:0.85rem;text-shadow:0 0 6px rgba(169,95,99,0.5)}
.pillar-list--links li{padding:0}
.pillar-list--links li a{display:flex;align-items:flex-start;gap:0.75rem;padding:0.6rem 0;color:var(--ivory);text-decoration:none;line-height:1.45;transition:color .25s var(--ease)}
.pillar-list--links li::before{display:none}
.pillar-list--links li a::before{content:'✲';color:var(--pink-text);font-size:0.85rem;text-shadow:0 0 6px rgba(169,95,99,0.5);flex:none;line-height:1.45}
.pillar-list--links li a:hover,.pillar-list--links li a:focus-visible{color:var(--pink-text)}
.pillar-list--links li a::after{content:'→';margin-left:auto;padding-left:0.5rem;color:var(--gold);opacity:0;transition:opacity .25s var(--ease)}
.pillar-list--links li a:hover::after{opacity:1}
/* At phone width a one-line pillar link measures 39px, five under the 44px
   floor. Give it the difference in padding rather than in font size, so the
   type scale is untouched. Keyed to width and not to (pointer:coarse): the
   audit measures a real layout at a real width, and a pointer query it cannot
   satisfy is a fix that is never proved. */
@media(max-width:900px){.pillar-list--links li a{padding:0.85rem 0;min-height:44px;align-items:center}}
.pillar-link{display:inline-flex;align-items:center;gap:0.5rem;color:var(--pink-text);font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.pillar-link svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.pillar:hover .pillar-link svg{transform:translate(4px,-4px) rotate(-45deg)}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}

/* ============ FOUNDING ============ */
.founding{position:relative;padding:6rem 3rem;border-radius:var(--radius);background:linear-gradient(135deg, var(--noir) 0%, #1F0F16 100%);overflow:hidden;text-align:center;border:1px solid var(--line-pink);box-shadow:0 0 60px rgba(169,95,99,0.15), inset 0 0 0 1px rgba(185,149,89,0.06)}
.founding::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%, rgba(169,95,99,0.22), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(185,149,89,0.15), transparent 60%);pointer-events:none}
.founding-spots{display:inline-flex;align-items:center;gap:0.6rem;background:rgba(169,95,99,0.15);color:var(--pink-text);padding:0.55rem 1.25rem;border-radius:100px;font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;margin-bottom:2.5rem;position:relative;z-index:2;border:1px solid rgba(169,95,99,0.4);text-shadow:0 0 8px rgba(169,95,99,0.5);box-shadow:0 0 20px rgba(169,95,99,0.2)}
.founding h2{font-size:clamp(2.5rem,6vw,5rem);line-height:1;margin-bottom:1.5rem;position:relative;z-index:2;color:var(--ivory)}
.founding h2 em{color:var(--pink-text);font-family:'Cormorant Garamond',serif;text-shadow:var(--neon-shadow)}
.founding h2 .strike{position:relative;color:var(--dim)}
.founding h2 .strike::after{content:'';position:absolute;left:-4%;right:-4%;top:52%;height:2px;background:var(--pink);transform:rotate(-4deg);box-shadow:0 0 8px var(--pink)}
.founding p{max-width:640px;margin:0 auto 3rem;color:var(--dim);font-size:1.1rem;line-height:1.7;position:relative;z-index:2}
.founding-form{display:flex;gap:0.5rem;max-width:520px;margin:0 auto;background:rgba(17,16,15,0.7);border:1px solid var(--line-strong);border-radius:100px;padding:0.5rem;position:relative;z-index:2}
.founding-form input{flex:1;background:transparent;border:none;padding:0.85rem 1.25rem;color:var(--ivory);font-size:0.9rem;font-family:inherit;outline:none}
.founding-form input::placeholder{color:var(--faint)}
.founding-fine{font-size:0.72rem;color:var(--faint);margin-top:1.25rem;position:relative;z-index:2;letter-spacing:0.1em}

/* ============ TESTIMONIAL / TRUST ============ */
.testimonial{padding:6rem 3rem;text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--noir);position:relative;overflow:hidden}
.testimonial::before{content:'"';position:absolute;top:-2rem;left:2rem;font-family:'Cormorant Garamond',serif;font-size:14rem;color:rgba(169,95,99,0.06);line-height:1;font-style:italic}
.testimonial-body{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.35;font-style:italic;max-width:900px;margin:0 auto 2.5rem;color:var(--ivory);position:relative}
.testimonial-attribution{color:var(--pink-text);font-size:0.78rem;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;text-shadow:0 0 8px rgba(169,95,99,0.5)}

/* ---- Intro list (service pages) — a lead line + bullets inside .media-editorial;
   inherits the paragraph colour so it measures the same as the copy around it */
.media-editorial .intro-list{list-style:none;margin:-0.35rem 0 1.15rem;padding:0}
.media-editorial .intro-list li{color:var(--ivory);font-size:1.02rem;line-height:1.7;padding:0.55rem 0;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:0.75rem}
.media-editorial .intro-list li:last-child{border-bottom:1px solid var(--line)}
.media-editorial .intro-list li::before{content:'✲';color:var(--pink-text);font-size:0.85rem;line-height:1.7;text-shadow:0 0 6px rgba(169,95,99,0.5);flex:none}

/* ---- Wellness journey — the four-step program from the client's landing page.
   Same surface recipe as .pillar (charcoal→noir gradient, --line border) so every
   text/ground pair here is one the sweep has already measured */
.journey-wrap{margin-top:4rem}
.journey-wrap--section{margin-top:0}
.journey-wrap--section .menu-heading{margin-top:0}
.journey-wrap .section-lede{margin-bottom:0}
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem}
.journey-step{position:relative;padding:2.25rem 1.75rem 2rem;background:linear-gradient(180deg, var(--charcoal) 0%, var(--noir) 100%);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease)}
.journey-step::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, transparent, var(--pink), var(--gold), transparent);opacity:0;transition:opacity .35s var(--ease)}
.journey-step:hover{transform:translateY(-4px);border-color:var(--line-pink)}
.journey-step:hover::before{opacity:1}
.journey-num{font-family:'Cormorant Garamond',serif;font-size:3.2rem;line-height:1;color:var(--gold);margin-bottom:1rem;font-style:italic}
.journey-step h3{font-size:1.35rem;line-height:1.2;color:var(--ivory);margin-bottom:0.75rem}
.journey-step p{color:var(--dim);font-size:0.92rem;line-height:1.7;margin:0}
@media(max-width:1100px){.journey{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.journey{grid-template-columns:1fr;gap:1rem}.journey-step{padding:1.75rem 1.5rem}.journey-num{font-size:2.6rem}}

/* ---- Stories — the client's own patient quotes, carried over from the previous
   site. A quieter cousin of .testimonial: same --noir card, same --line border */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem}
.quote{position:relative;padding:2.5rem 2.25rem;background:var(--noir);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.quote::before{content:'"';position:absolute;top:-1.4rem;left:1.25rem;font-family:'Cormorant Garamond',serif;font-size:8rem;color:rgba(169,95,99,0.08);line-height:1;font-style:italic}
.quote p.quote-lead{font-family:'Cormorant Garamond',serif;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.3;font-style:italic;color:var(--ivory);margin:0 0 0.9rem;position:relative}
.quote p{color:var(--dim);font-size:0.95rem;line-height:1.75;margin:0;position:relative}
.quote-attribution{margin-top:1.25rem;color:var(--pink-text);font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;text-shadow:0 0 8px rgba(169,95,99,0.5)}
/* Individual-results disclaimer under the patient quotes. The FTC's endorsement
   guides want it near the claim, not buried in the footer, so it sits with the
   cards - fine print in weight, not in legibility. */
.quotes-fine{margin:1.75rem 0 0;font-size:0.78rem;line-height:1.7;color:var(--faint);font-style:italic}
/* 0.78rem lands at 12.5px on a phone, under the 14px prose floor. The FTC
   disclosure has to be readable to do its job, so it goes up on small screens
   rather than being excused as a caption. */
@media(max-width:480px){.quotes-fine{font-size:0.875rem}}
@media(max-width:900px){.quotes{grid-template-columns:1fr;gap:1rem}.quote{padding:2rem 1.5rem}}

/* ============ FAQ ============ */
/* Topic chips. Filled state is Oxblood, not Raspberry: ivory on --purple
   measures 10.25:1, ivory on --pink only 3.88:1 and these carry small text. */
.faq-filters{display:flex;flex-wrap:wrap;gap:0.6rem;margin:0 0 1.25rem}
.faq-chip{font-family:'Montserrat',sans-serif;font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:var(--pink-text);background:rgba(169,95,99,0.08);border:1px solid var(--line-pink);border-radius:100px;padding:0.6rem 1.15rem;cursor:pointer;transition:.25s var(--ease);min-height:44px}
.faq-chip:hover{background:rgba(169,95,99,0.16);border-color:var(--pink);color:var(--pink-glow)}
.faq-chip.is-on{background:var(--purple);border-color:var(--purple-glow);color:var(--ivory);box-shadow:var(--neon-shadow)}
.faq-count{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--faint);margin:0 0 1.5rem;min-height:1em}
.faq-empty{color:var(--dim);font-size:0.95rem;padding:2.5rem 0;text-align:center}

.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item[hidden]{display:none}

/* The control is a real <button>, so every inherited button style has to be
   unset before the editorial type shows through. */
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:2rem 0;margin:0;background:none;border:0;border-radius:0;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.faq-q:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.faq-num{font-size:0.7rem;color:var(--pink-text);letter-spacing:0.2em;font-weight:700;margin-right:1rem;text-shadow:0 0 6px rgba(169,95,99,0.5);flex-shrink:0}
.faq-title{flex:1;font-family:'Cormorant Garamond',serif;font-size:clamp(1.25rem,2.5vw,1.75rem);font-style:italic;color:var(--ivory);line-height:1.25}
.faq-cat{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:var(--gold);border:1px solid rgba(185,149,89,0.32);border-radius:100px;padding:0.35rem 0.75rem;white-space:nowrap;flex-shrink:0}
.faq-q:hover .faq-title{color:var(--pink-glow)}
.faq-plus{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:.3s var(--ease);flex-shrink:0;position:relative}
.faq-plus::before,.faq-plus::after{content:'';position:absolute;width:14px;height:2px;background:var(--ivory);transition:transform .3s var(--ease)}
.faq-plus::after{transform:rotate(90deg)}
.faq-item.open .faq-plus{background:var(--pink);border-color:var(--pink);box-shadow:0 0 20px rgba(169,95,99,0.5)}
.faq-item.open .faq-plus::before,.faq-item.open .faq-plus::after{background:var(--ivory)}
.faq-item.open .faq-plus::after{transform:rotate(0)}

/* Animating grid-template-rows 0fr -> 1fr instead of max-height. The old
   max-height:400px capped the panel, and these answers are now long enough to
   be clipped by it - a clipped answer on a medical FAQ silently loses the
   contraindication paragraph, which is the half that matters. 0fr..1fr costs
   nothing to measure and fits any length. */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease);color:var(--dim);font-size:1rem;line-height:1.75;padding-left:2.5rem}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;min-height:0}
.faq-item.open .faq-a-inner{padding-bottom:2rem}
.faq-a p{margin:0 0 1rem}
.faq-a p:last-child{margin-bottom:0}
.faq-a strong{color:var(--ivory);font-weight:600}
.faq-a em{color:var(--pink-blush);font-style:italic}
.faq-a a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(169,95,99,0.45)}
.faq-a a:hover{color:var(--pink-glow);text-decoration-color:var(--pink)}

.faq-foot{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.faq-foot p{color:var(--faint);font-size:0.9rem;margin:0}
.faq-foot a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}

/* A deep-linked question flashes its rule so the jump target is obvious. */
@keyframes faq-ping{0%,100%{border-color:var(--line)}30%{border-color:var(--pink)}}
.faq-item.is-target{animation:faq-ping 1.6s var(--ease) 1}

@media(prefers-reduced-motion:reduce){
  .faq-a{transition:none}
  .faq-plus,.faq-plus::before,.faq-plus::after,.faq-chip{transition:none}
  .faq-item.is-target{animation:none}
}

/* ============ LOCATION ============ */
.location{padding:8rem 2rem;text-align:center;background:linear-gradient(180deg, var(--ink) 0%, #1A0810 100%);border-top:1px solid var(--line);position:relative;overflow:hidden}
.location::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%, rgba(169,95,99,0.15), transparent 55%);pointer-events:none}
.location .eyebrow{color:var(--pink-text);font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;font-weight:700;margin-bottom:1.5rem;display:inline-flex;align-items:center;gap:0.6rem;text-shadow:0 0 8px rgba(169,95,99,0.5);position:relative;z-index:2}
.location h2{font-size:clamp(3rem,7vw,6rem);line-height:1;margin-bottom:1.5rem;color:var(--ivory);position:relative;z-index:2}
.location h2 em{color:var(--pink-text);font-family:'Cormorant Garamond',serif;text-shadow:var(--neon-shadow)}
.location p{color:var(--dim);font-size:1.1rem;max-width:600px;margin:0 auto 2.5rem;position:relative;z-index:2}
.location .btn{position:relative;z-index:2}

/* ============ FOOTER ============ */
.footer{padding:6rem 2rem 2rem;background:var(--noir);border-top:1px solid var(--line);position:relative;overflow:hidden}
.footer-inner{max-width:1400px;margin:0 auto;position:relative;z-index:2}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:4rem;border-bottom:1px solid var(--line)}
.footer-brand h3{font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:0.28em;color:var(--ivory);margin-bottom:0.6rem;text-shadow:0 0 14px rgba(169,95,99,0.45)}
.footer-brand .tag{font-size:0.55rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--pink-text);margin-bottom:1.5rem;font-weight:600;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.footer-brand p{color:var(--dim);font-size:0.9rem;line-height:1.7;max-width:36ch}
.footer-col h4{font-family:'Montserrat',sans-serif;font-size:0.7rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--pink-text);font-weight:700;margin-bottom:1.5rem;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.footer-col a{display:block;color:var(--dim);font-size:0.92rem;margin-bottom:0.85rem;transition:color .25s var(--ease),text-shadow .25s var(--ease)}
.footer-col a:hover{color:var(--pink-text);text-shadow:0 0 8px rgba(169,95,99,0.5)}
.footer-social{display:flex;gap:0.75rem;margin-top:1.75rem}
.footer-social a{width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;color:var(--ivory);transition:.3s var(--ease)}
.footer-social a svg{width:16px;height:16px}
.footer-social a:hover{background:var(--pink);color:var(--ivory);border-color:var(--pink);box-shadow:0 0 20px rgba(169,95,99,0.5)}
.footer-legal{padding:2.5rem 0;color:var(--faint);font-size:0.72rem;line-height:1.7;border-bottom:1px solid var(--line)}
.footer-legal strong{color:var(--dim)}
.footer-legal-links{padding:1.5rem 0;display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.footer-legal-links a{color:var(--dim);font-size:0.78rem;transition:color .25s}
.footer-legal-links a:hover{color:var(--pink-text)}
.footer-bottom{padding-top:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--faint);font-size:0.72rem}
.footer-bottom a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.footer-mega{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(6rem,20vw,18rem);line-height:0.85;color:rgba(169,95,99,0.08);white-space:nowrap;pointer-events:none;position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);z-index:1;letter-spacing:-0.04em;text-shadow:0 0 40px rgba(169,95,99,0.15)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:2.5rem}.footer-brand{grid-column:1/-1}.footer-bottom{justify-content:center;text-align:center}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}}

/* ============ BREADCRUMB + SUB-HERO ============ */
.subhero{padding:9rem 2rem 5rem;background:radial-gradient(ellipse at 20% 30%, rgba(169,95,99,0.15) 0%, var(--ink) 65%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.subhero-inner{max-width:1400px;margin:0 auto;position:relative;z-index:2}
.crumb{font-size:0.72rem;letter-spacing:0.2em;color:var(--dim);text-transform:uppercase;margin-bottom:2rem;font-weight:500}
.crumb a{color:var(--dim);transition:color .25s var(--ease)}
.crumb a:hover{color:var(--pink-text);text-shadow:0 0 6px rgba(169,95,99,0.4)}
.crumb .sep{color:var(--pink-text);margin:0 0.6rem}
.subhero h1{font-size:clamp(3rem,8vw,6.5rem);line-height:0.95;letter-spacing:-0.03em;margin-bottom:2rem;max-width:14ch;color:var(--ivory)}
.subhero h1 em{color:var(--pink-text);font-family:'Cormorant Garamond',serif;text-shadow:var(--neon-shadow);font-weight:500}
.subhero-lede{max-width:560px;color:var(--dim);font-size:1.1rem;line-height:1.75}

/* ============ PRICING MENU ============ */
.menu{border-top:1px solid var(--line)}
.menu-row{display:grid;grid-template-columns:1fr 3fr auto auto;gap:1.5rem;align-items:baseline;padding:1.75rem 0;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.menu-row:hover{background:rgba(169,95,99,0.03)}
.menu-idx{color:var(--pink-text);font-size:0.7rem;letter-spacing:0.22em;font-weight:700;text-transform:uppercase;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.menu-body h4{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-style:italic;color:var(--ivory);margin-bottom:0.35rem;font-weight:500}
.menu-body p{font-size:0.88rem;color:var(--dim);line-height:1.6;max-width:60ch}
.menu-tag{font-size:0.68rem;color:var(--dim);letter-spacing:0.18em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.menu-price{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.65rem;color:var(--pink-text);white-space:nowrap;font-weight:500;text-shadow:0 0 10px rgba(169,95,99,0.3)}
/* A row whose price the client has asked us not to publish. Montserrat at body
   scale rather than the Cormorant display italic, so the column still answers
   "what does this cost" without competing with the rows that do carry a number.
   --dim on --elev measures 7.4:1; it stays legible at the 0.72rem size. */
.menu-price--quiet{font-family:'Montserrat',sans-serif;font-style:normal;font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--dim);text-shadow:none}
/* Same idea inside the generated pricing tables and the drip cards, where the
   price cell is a <td class="p"> or a .drip-price rather than a menu column. */
.price-quiet{font-family:'Montserrat',sans-serif;font-style:normal;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--dim);white-space:nowrap;text-shadow:none}
.drip-price .price-quiet{font-size:0.66rem}
@media(max-width:768px){.menu-row{grid-template-columns:auto 1fr;gap:0.75rem 1rem}.menu-idx{grid-row:1}.menu-tag{grid-column:1/-1;font-size:0.65rem}.menu-price{grid-column:1/-1;font-size:1.4rem}}

/* ============ UTIL ============ */
.center{text-align:center}
.spacer{height:5rem}
.spacer-lg{height:8rem}
.mt-lg{margin-top:5rem}
.hidden-sm{display:initial}

/* ==================== RESPONSIVE + TOUCH ====================
   Breakpoints:
     <400   small phone (iPhone SE, small Android)
     400-599 standard phone
     600-767 large phone / small tablet portrait
     768-1023 tablet portrait (iPad)
     1024-1279 tablet landscape / small laptop (iPad Pro, MacBook Air)
     1280-1599 desktop
     1600+ wide desktop
*/

/* Global touch/text behavior — iOS Safari + Android Chrome */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(169,95,99,0.25);text-rendering:optimizeLegibility}
button,a,select,input,.w-toggle,.w-row,.faq-item,.service-row,.tile3d,.pillar,.nav-toggle{-webkit-tap-highlight-color:rgba(169,95,99,0.25)}
input,select,textarea{font-size:16px}  /* prevents iOS auto-zoom on focus */
img,video,iframe{max-width:100%;height:auto}

/* iOS notch — respect the safe-area on the nav + hero + footer + fixed things */
.nav{padding-left:max(2rem, env(safe-area-inset-left));padding-right:max(2rem, env(safe-area-inset-right));padding-top:max(1.1rem, env(safe-area-inset-top))}
.nav-mobile{padding-left:max(2rem, env(safe-area-inset-left));padding-right:max(2rem, env(safe-area-inset-right));padding-top:max(6rem, calc(6rem + env(safe-area-inset-top)));padding-bottom:max(2rem, env(safe-area-inset-bottom))}
.hero{padding-left:max(2rem, env(safe-area-inset-left));padding-right:max(2rem, env(safe-area-inset-right))}
.footer{padding-left:max(2rem, env(safe-area-inset-left));padding-right:max(2rem, env(safe-area-inset-right));padding-bottom:max(2rem, calc(2rem + env(safe-area-inset-bottom)))}

/* Landscape orientation on phones (short viewport heights) — the hero can't be 100vh */
@media(max-height:600px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:6rem;padding-bottom:3rem}
  .hero-3d-scene{opacity:0.4}
  .hero-bg-text .row{font-size:clamp(3rem,10vw,6rem)}
}

/* Wide desktop 1600+ — give the hero more room, wider max container */
@media(min-width:1600px){
  .nav-inner,.section-inner,.wallpaper-band .inner,.hero-inner,.footer-inner,.subhero-inner{max-width:1560px}
  .hero{min-height:100vh}
  .hero-title{font-size:clamp(4rem,8vw,9rem)}
}

/* Tablet landscape / small laptop 1024-1279 — nav stays visible but tighter */
@media(min-width:1024px) and (max-width:1279px){
  .nav-menu{gap:1.75rem}
  .nav-menu a{font-size:0.78rem;letter-spacing:0.12em}
  .hero-title{font-size:clamp(3rem,8vw,6.5rem)}
  .pillars{gap:1rem}
}

/* Tablet portrait 768-1023 — 2-col pillars, keep desktop hero framing */
@media(min-width:768px) and (max-width:1023px){
  .nav{padding:1rem 1.5rem}
  .nav-menu{gap:1.4rem}
  .nav-menu a{font-size:0.72rem;letter-spacing:0.1em}
  .nav-cta{padding:0.55rem 1.1rem;font-size:0.72rem}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillars > .pillar:last-child{grid-column:1/-1;max-width:520px;justify-self:center}
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split-visual{aspect-ratio:auto;min-height:640px}
  .widget{position:static;inset:auto;padding:5.5rem 1.75rem 1.75rem;min-height:640px}
  .hero-title{font-size:clamp(3.5rem,10vw,6rem)}
  .footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
}

/* Large phone / small tablet 600-767 — nav flips to hamburger, split=1col */
@media(max-width:767px){
  html,body{overflow-x:hidden}
  .nav{padding:0.9rem 1.25rem}
  .nav-logo img{height:36px}
  .nav-logo-name{font-size:1rem;letter-spacing:0.22em}
  .nav-logo-tagline{font-size:0.4rem;letter-spacing:0.35em}
  /* Horizontal only. The vertical step already shrinks via --rhythm, and a
     `padding` shorthand here would outrank the .section--tight/--flush-top
     modifiers and flatten the whole scale back to one value on phones. */
  .section{padding-left:1.25rem;padding-right:1.25rem}
  .section-eyebrow{font-size:0.65rem;letter-spacing:0.24em}
  .hero{padding-top:6rem;padding-bottom:3rem;min-height:auto}
  .hero-title{font-size:clamp(2.6rem,11vw,4.2rem);max-width:15ch}
  .hero-sub{font-size:0.98rem;margin:1.75rem auto 2rem;padding:0 0.5rem}
  .hero-ctas{margin-bottom:3rem}
  .hero-meta{gap:1.2rem;font-size:0.78rem;justify-content:flex-start}
  .hero-meta span{flex:1 1 auto;min-width:45%}
  .hero-badge{font-size:0.62rem;letter-spacing:0.16em;padding:0.42rem 0.9rem}
  .hero-3d-scene{opacity:0.5}
  .hero-bg-text{padding:3rem 0}
  .hero-bg-text .row{font-size:clamp(3.2rem,14vw,5.5rem)}
  .btn{padding:0.85rem 1.4rem;font-size:0.72rem;letter-spacing:0.12em;min-height:44px}
  .btn svg{width:12px;height:12px}
  .marquee{padding:1rem 0}
  .marquee-item{font-size:clamp(1.6rem,7vw,2.6rem)}
  .wallpaper-band .inner{padding:3rem 1.25rem;grid-template-columns:1fr;gap:2rem}
  .wallpaper-band .copy{padding:1.75rem 1.25rem}
  .wallpaper-band h2{font-size:clamp(2rem,8vw,3.2rem)}
  .wallpaper-band .neon-sign{font-size:clamp(2.5rem,12vw,4.5rem)}
  .scroll-title{font-size:clamp(1.8rem,7vw,3.4rem);margin-bottom:3rem}
  .founding{padding:3.5rem 1.5rem}
  .founding h2{font-size:clamp(2rem,8vw,3.2rem)}
  .founding p{font-size:0.98rem}
  .founding-form{flex-direction:column;padding:0.6rem;background:rgba(17,16,15,0.55);border-radius:14px;gap:0.6rem}
  .founding-form input{width:100%;text-align:center}
  .founding-form button{width:100%;min-height:48px}
  .testimonial{padding:3.5rem 1.5rem}
  .testimonial-body{font-size:clamp(1.15rem,4.5vw,1.6rem)}
  .location{padding:5rem 1.25rem}
  .location h2{font-size:clamp(2.4rem,10vw,4rem)}
  .subhero{padding:7.5rem 1.25rem 3.5rem}
  .subhero h1{font-size:clamp(2.6rem,10vw,4.5rem);max-width:16ch}
  .subhero-lede{font-size:0.98rem}
  .split{grid-template-columns:1fr;gap:2rem}
  .split-visual{aspect-ratio:auto;min-height:auto}
  .widget{position:static;inset:auto;padding:1.5rem 1.15rem;gap:0.8rem}
  .widget .w-title{font-size:1.35rem}
  .widget label,.widget .w-label{font-size:0.58rem;letter-spacing:0.24em}
  .widget select,.widget input[type="number"],.widget input[type="range"]{min-height:48px;font-size:16px}
  .widget .w-row{padding:0.7rem 0.85rem;min-height:56px}
  .widget .w-toggle{min-height:36px;min-width:64px;padding:0.5rem 0.9rem;font-size:0.68rem}
  .widget .w-total .amt{font-size:2.2rem}
  .split-visual .badge{top:1rem;left:1rem;font-size:0.6rem;padding:0.35rem 0.75rem;letter-spacing:0.18em}
  .services-list a.service-row{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0.5rem 0.75rem;padding:1.5rem 0;min-height:88px}
  .service-num{grid-column:1;grid-row:1;font-size:0.68rem}
  .service-name{grid-column:1;grid-row:2;font-size:1.65rem;line-height:1.1}
  .service-name .sub{margin-top:0.5rem;font-size:0.7rem;letter-spacing:0.12em}
  .service-arrow{grid-column:2;grid-row:1/span 2;align-self:center;width:44px;height:44px}
  .service-arrow svg{width:16px;height:16px}
  .faq-q{gap:0.75rem;padding:1.5rem 0}
  .faq-cat{display:none}
  .faq-chip{font-size:0.6rem;padding:0.55rem 0.9rem;letter-spacing:0.14em}
  .faq-num{font-size:0.68rem;margin-right:0.5rem}
  .faq-title{font-size:1.05rem;line-height:1.3}
  .faq-plus{width:36px;height:36px}
  .faq-a{padding-left:0;font-size:0.94rem}
  .footer{padding:4.5rem 1.25rem 1.5rem}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}
  .footer-brand{grid-column:1/-1}
  .footer-col h4{font-size:0.65rem}
  .footer-col a{font-size:0.88rem;padding:0.3rem 0;min-height:32px;display:block}
  .footer-legal{font-size:0.68rem;padding:2rem 0}
  .footer-legal-links a{padding:0.35rem 0}
  .footer-bottom{justify-content:center;text-align:center;flex-direction:column;gap:0.4rem}
  .footer-mega{font-size:clamp(5rem,25vw,10rem);bottom:-0.5rem}
  .menu-row{padding:1.35rem 0}
  .menu-body h4{font-size:1.15rem}
  .menu-body p{font-size:0.82rem}
  .menu-price a.pay-link,.menu-price{font-size:1.2rem;min-height:44px;display:inline-flex;align-items:center;padding:0.35rem 0.75rem;border:1px solid var(--line-pink);border-radius:100px;background:rgba(169,95,99,0.06)}
}

/* Standard phone 400-599 — sharper reductions */
@media(max-width:599px){
  .nav-mobile a{font-size:1.65rem;padding-bottom:0.75rem;min-height:56px;display:flex;align-items:center}
  .nav-toggle{padding:10px;min-height:44px;min-width:44px}
  .nav-toggle span{width:24px}
  .hero-badge .dot{width:5px;height:5px}
  .hero-meta{border-top:1px solid var(--line);padding-top:1.5rem}
  .hero-meta span{min-width:100%;text-align:left}
  .pillar{padding:2rem 1.5rem}
  .pillar h3{font-size:1.6rem}
  .pillar p{font-size:0.9rem}
  .pillar-list li{font-size:0.875rem;padding:0.55rem 0}
  .split-copy .kicker{font-size:0.62rem;letter-spacing:0.22em}
  .split-copy h2{font-size:clamp(2rem,8vw,3rem)}
  .split-copy p{font-size:0.98rem}
  .crumb{font-size:0.65rem;letter-spacing:0.16em}
}

/* Small phone <400 — iPhone SE, tiny Androids */
@media(max-width:399px){
  .nav-logo img{height:32px}
  .nav-logo-name{font-size:0.9rem;letter-spacing:0.18em}
  .nav-logo-tagline{display:none}
  .hero-title{font-size:clamp(2.3rem,12vw,3.6rem);max-width:14ch}
  .hero-badge{font-size:0.58rem;padding:0.35rem 0.7rem;letter-spacing:0.14em}
  .hero-sub{font-size:0.92rem}
  .btn{padding:0.75rem 1.2rem;font-size:0.68rem}
  .btn-ghost,.btn-pink,.btn-gold{width:100%;justify-content:center}
  .hero-ctas{flex-direction:column;align-items:stretch;padding:0 0.5rem}
  .marquee-item{font-size:clamp(1.4rem,8vw,2.2rem)}
  .founding h2{font-size:clamp(1.8rem,9vw,2.8rem)}
  .wallpaper-band .neon-sign{font-size:clamp(2.2rem,14vw,3.8rem)}
  .subhero h1{font-size:clamp(2.3rem,11vw,3.8rem)}
  .widget .w-title{font-size:1.2rem}
  .widget .w-total .amt{font-size:1.9rem}
  .service-name{font-size:1.45rem}
  .testimonial-body{font-size:clamp(1.05rem,5vw,1.4rem)}
  .footer-top{grid-template-columns:1fr;gap:1.5rem}
}

/* Print + save-data */
@media print{
  .nav,.hero-3d-scene,.hero-bg-text,.marquee,.founding-form,.faq-plus,.footer-mega,.hero-3d-turntable{display:none !important}
  body{background:#fff;color:#000}
  h1,h2,h3,h4{color:#000}
}
@media(prefers-reduced-data:reduce){
  .hero::before,.split-visual{background-image:none}
  .wallpaper-band .bg{background-image:none;background:linear-gradient(135deg,#0A0708,#3A0E22)}
}

.hidden-sm{display:initial}
@media(max-width:768px){.hidden-sm{display:none}}

/* ============ LEGAL + UTILITY PAGES ============
   terms · privacy-policy · hipaa-notice · book-now · telehealth-portal
   These pages predate the 2026-08 rebuild and carried their own class
   vocabulary. Their nav/footer markup was renamed onto the shared classes; what
   remains here is the page-body styling those pages still need. */

/* Legacy tokens remapped onto dark surfaces so the inline styles still living
   on these pages resolve instead of voiding out. --sage was the old green
   accent; it maps to pink because the client's direction is explicitly no
   green, which makes the remap a brand correction and not just a shim. */
:root{--cream:var(--ink);--cream-dark:var(--noir);--cream-faint:var(--faint);--sage:var(--pink-blush);--ice:var(--elev)}

.container{max-width:1000px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
.hero-visual{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(380px,32vw);opacity:0.10;filter:drop-shadow(0 0 40px rgba(169,95,99,0.5));pointer-events:none;z-index:0}

.legal-content{position:relative;z-index:2;color:var(--ivory)}
.legal-content h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;margin:3rem 0 1rem;color:var(--ivory)}
.legal-content h2:first-child{margin-top:0}
.legal-content h2 em{color:var(--pink-text);font-family:'Cormorant Garamond',serif;text-shadow:0 0 10px rgba(169,95,99,0.35)}
.legal-content h3{font-size:1.15rem;margin:2rem 0 0.75rem;color:var(--pink-text);text-shadow:0 0 8px rgba(169,95,99,0.3)}
.legal-content p,.legal-content li{color:var(--dim);font-size:0.96rem;line-height:1.8}
.legal-content p{margin-bottom:1.1rem}
.legal-content ul,.legal-content ol{margin:0 0 1.5rem 1.25rem}
.legal-content li{margin-bottom:0.55rem}
.legal-content li::marker{color:var(--pink-text)}
.legal-content strong{color:var(--ivory);font-weight:600}
.legal-content a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(169,95,99,0.45)}
.legal-content a:hover{text-decoration-color:var(--pink);text-shadow:0 0 8px rgba(169,95,99,0.4)}
.legal-content table{width:100%;border-collapse:collapse;margin:0 0 1.75rem}
.legal-content th,.legal-content td{padding:0.85rem 1rem;border:1px solid var(--line);text-align:left;font-size:0.9rem}
.legal-content th{background:rgba(169,95,99,0.10);color:var(--pink-text);text-transform:uppercase;letter-spacing:0.14em;font-size:0.68rem;font-weight:700}
.legal-content td{color:var(--dim)}

.effective-date{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--pink-text);background:rgba(169,95,99,0.10);border:1px solid rgba(169,95,99,0.35);padding:0.55rem 1.15rem;border-radius:100px;margin-bottom:2.5rem;text-shadow:0 0 8px rgba(169,95,99,0.45)}
.effective-date::before{content:'✲'}

.notice-box{position:relative;padding:1.75rem 1.75rem 1.75rem 2.25rem;margin:2rem 0;border:1px solid var(--line-pink);border-left:3px solid var(--pink);border-radius:var(--radius);background:linear-gradient(180deg,rgba(169,95,99,0.10) 0%,rgba(17,16,15,0.55) 100%);box-shadow:0 0 30px rgba(169,95,99,0.12)}
.notice-box p:last-child{margin-bottom:0}
.notice-box strong{color:var(--pink-text);text-shadow:0 0 8px rgba(169,95,99,0.4)}

.footer-brand-name{font-family:'Cormorant Garamond',serif;font-size:1.6rem;letter-spacing:0.28em;color:var(--ivory);margin-bottom:0.35rem}
.footer-brand-tagline{font-size:0.6rem;letter-spacing:0.3em;color:var(--pink-text);text-transform:uppercase;font-weight:700;margin-bottom:1.25rem;text-shadow:0 0 6px rgba(169,95,99,0.4)}
.footer-brand-sub{font-size:0.85rem;color:var(--dim);line-height:1.8}
.social-row{display:flex;gap:0.75rem;margin-top:1.5rem}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-pink);background:rgba(169,95,99,0.06);font-size:1rem;transition:.25s var(--ease)}
.social-icon:hover{background:rgba(169,95,99,0.18);box-shadow:0 0 18px rgba(169,95,99,0.35);transform:translateY(-2px)}

@media(max-width:768px){
  :root{--rhythm:4.5rem}
  .container{padding:0 1.25rem}
  .hero-visual{display:none}
  .legal-content h2{font-size:1.45rem;margin-top:2.25rem}
  .notice-box{padding:1.35rem 1.25rem}
  .legal-content table{display:block;overflow-x:auto}
}

/* ============ CONSENT — cookies + tracking ============
   Injected by js/consent.js on every page. Shows until the visitor records a
   choice; reopenable any time from the "Cookie Preferences" footer link. */

.consent-scrim{position:fixed;inset:0;z-index:9998;background:rgba(17,16,15,0.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.consent-scrim.on{opacity:1;pointer-events:auto}

.consent{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,140%);z-index:9999;width:min(920px,calc(100vw - 2.5rem));background:linear-gradient(180deg,var(--charcoal) 0%,var(--ink) 100%);border:1px solid var(--line-pink);border-radius:var(--radius);box-shadow:0 0 60px rgba(169,95,99,0.30),0 30px 80px -20px rgba(0,0,0,0.95),inset 0 1px 0 rgba(255,255,255,0.05);padding:1.85rem 2rem;transition:transform .45s var(--ease);max-height:calc(100vh - 3rem);overflow-y:auto}
.consent.on{transform:translate(-50%,0)}
.consent::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),var(--gold),transparent);border-radius:var(--radius) var(--radius) 0 0}

.consent-eyebrow{display:inline-flex;align-items:center;gap:0.55rem;font-size:0.62rem;letter-spacing:0.28em;text-transform:uppercase;font-weight:700;color:var(--pink-text);margin-bottom:0.85rem;text-shadow:0 0 8px rgba(169,95,99,0.45)}
.consent-eyebrow::before{content:'✲'}
.consent h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;line-height:1.15;color:var(--ivory);margin-bottom:0.6rem}
.consent h2 em{color:var(--pink-text);text-shadow:0 0 12px rgba(169,95,99,0.5)}
.consent p{font-size:0.88rem;line-height:1.7;color:var(--dim);margin-bottom:1.25rem;max-width:70ch}
.consent p a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}

#consent-title:focus{outline:none}
.consent-updated{margin-top:0.85rem;font-size:0.7rem;letter-spacing:0.08em;color:var(--faint)}
.consent-actions{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center}
.consent-btn{appearance:none;font-family:inherit;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;padding:0.85rem 1.65rem;border-radius:100px;cursor:pointer;transition:.25s var(--ease);border:1px solid transparent;min-height:44px}
.consent-btn-accept{background:var(--pink);color:var(--ivory);box-shadow:0 0 22px rgba(169,95,99,0.45)}
.consent-btn-accept:hover{box-shadow:0 0 32px rgba(169,95,99,0.7);transform:translateY(-2px)}
.consent-btn-reject{background:rgba(169,95,99,0.08);color:var(--ivory);border-color:var(--line-pink)}
.consent-btn-reject:hover{background:rgba(169,95,99,0.16);border-color:var(--pink)}
.consent-btn-prefs{background:transparent;color:var(--dim);border-color:var(--line);margin-left:auto}
.consent-btn-prefs:hover{color:var(--ivory);border-color:var(--line-strong)}

.consent-prefs{display:none;margin:1.4rem 0 0;border-top:1px solid var(--line);padding-top:1.4rem}
.consent-prefs.on{display:block}
.consent-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;padding:0.95rem 0;border-bottom:1px solid var(--line)}
.consent-cat:last-child{border-bottom:none}
.consent-cat-name{font-size:0.86rem;font-weight:600;color:var(--ivory);margin-bottom:0.2rem}
.consent-cat-desc{font-size:0.75rem;color:var(--dim);line-height:1.6;max-width:62ch}
.consent-switch{position:relative;flex:0 0 auto;width:48px;height:26px;border-radius:100px;border:1px solid var(--line-strong);background:rgba(17,16,15,0.6);cursor:pointer;transition:.25s var(--ease);margin-top:0.15rem}
.consent-switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--dim);transition:.25s var(--ease)}
.consent-switch[aria-checked="true"]{background:rgba(169,95,99,0.25);border-color:var(--pink);box-shadow:0 0 14px rgba(169,95,99,0.35)}
.consent-switch[aria-checked="true"]::after{transform:translateX(22px);background:var(--pink);box-shadow:0 0 10px rgba(169,95,99,0.8)}
.consent-switch[disabled]{opacity:0.5;cursor:not-allowed}
.consent-switch:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

.consent-btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

@media(max-width:768px){
  .consent{left:0.75rem;right:0.75rem;bottom:0.75rem;width:auto;transform:translateY(140%);padding:1.5rem 1.35rem}
  .consent.on{transform:translateY(0)}
  .consent h2{font-size:1.3rem}
  .consent-actions{flex-direction:column;align-items:stretch}
  .consent-btn{width:100%;text-align:center}
  .consent-btn-prefs{margin-left:0;order:3}
  .consent-cat{gap:0.85rem}
}
@media(prefers-reduced-motion:reduce){
  .consent,.consent-scrim{transition:none}
}

/* ==========================================================================
   BRAND OVERRIDES — realigned to the brand directive PDF
   The tokens above put the whole sheet on Lumae Black. What follows sets the
   pieces that need more than a colour substitution. Note the bands below that
   were ALREADY dark under the champagne build — wallpaper, founding, footer,
   placards: their scrims are authored in the opposite polarity from the page,
   so a sheet-wide inversion double-flips them. They are held here deliberately.
   ========================================================================== */

/* ---- type: Cormorant Garamond headlines over Montserrat, per directive section 3 ---- */
body{font-family:'Montserrat',system-ui,-apple-system,sans-serif;background:var(--ink);color:var(--ivory)}
h1,h2,h3,h4,.hero-title,.footer-brand-name{font-family:'Cormorant Garamond',serif}
.nav-menu a,.nav-cta,.btn,.kicker,.section-eyebrow,.crumb{font-family:'Montserrat',sans-serif}

/* ---- nav: light glass over champagne ---- */
.nav{background:linear-gradient(to bottom,rgba(17,16,15,0.94) 0%,rgba(17,16,15,0.72) 70%,rgba(17,16,15,0));border-bottom:1px solid var(--line)}
.nav-logo-name{color:var(--ivory)}
.nav-logo-tagline{color:var(--pink-text)}
.nav-menu a{color:var(--dim)}
.nav-menu a:hover,.nav-menu a.active{color:var(--pink-text)}
.nav-cta{background:var(--purple);color:var(--ivory);box-shadow:none;border:1px solid var(--purple)}
.nav-cta:hover{background:var(--pink-fill);border-color:var(--pink-fill);color:var(--ivory)}
.nav-cta:hover{transform:translateY(-1px)}
.nav-toggle span{background:var(--ivory)}
.nav-mobile{background:var(--elev);border-top:1px solid var(--line)}
.nav-mobile a{color:var(--ivory)}

/* ---- hero: the old floral photograph is retired ---- */
.hero{background:var(--ink);min-height:auto;padding:11rem 2rem 6rem}
.hero::before{
  background-image:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(169,95,99,0.22) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 82% 78%, rgba(185,149,89,0.10) 0%, transparent 60%),
    linear-gradient(165deg, #262220 0%, #11100F 45%, #201C1B 100%);
  opacity:1;mix-blend-mode:normal;filter:none}
.hero-title{color:var(--ivory);text-shadow:none}
.hero-title em{color:var(--pink-text);text-shadow:none}
.hero-sub{color:var(--dim)}
.hero-badge{background:rgba(169,95,99,0.08);border:1px solid var(--line-pink);color:var(--pink-text);text-shadow:none;box-shadow:none}
.hero-badge .dot{background:var(--pink);box-shadow:none}
.hero-meta span{color:var(--faint)}
.hero-bg-text{color:rgba(242,233,223,0.045)}
.tile3d{border-color:var(--line-pink);box-shadow:0 18px 40px -22px rgba(87,37,44,0.35)}

/* ---- buttons ---- */
.btn-pink,.btn-primary,.btn-book{background:var(--purple);color:var(--ivory);border:1px solid var(--purple);box-shadow:none}
.btn-pink:hover,.btn-primary:hover,.btn-book:hover{background:var(--pink-fill);border-color:var(--pink-fill);color:var(--ivory)}
.btn-pink:hover,.btn-primary:hover,.btn-book:hover{transform:translateY(-2px)}
.btn-ghost,.btn-sage{background:transparent;color:var(--ivory);border:1px solid var(--line-strong)}
.btn-ghost:hover,.btn-sage:hover{border-color:var(--pink);color:var(--pink-text)}
.btn-gold{background:transparent;color:var(--gold);border:1px solid var(--gold)}

/* ---- raised surfaces ---- */
.pillar{background:linear-gradient(180deg,var(--elev) 0%,var(--noir) 100%);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.pillar:hover{border-color:var(--line-pink);box-shadow:0 24px 50px -28px rgba(87,37,44,0.35)}
.testimonial{background:var(--elev);border:1px solid var(--line)}
.testimonial .testimonial-attribution{color:var(--pink-glow)}
.testimonial-body{color:var(--ivory)}
.marquee{background:var(--noir);border-block:1px solid var(--line)}
.marquee-item{color:var(--pink-text)}
.faq-plus{border-color:var(--line-strong);color:var(--pink-text)}
.menu-row{border-color:var(--line)}
.menu-price,.menu-price a.pay-link{color:var(--pink-text);border-color:var(--line-pink);background:rgba(169,95,99,0.05)}
.service-row:hover .service-name{color:var(--pink-text)}
.notice-box{background:linear-gradient(180deg,rgba(169,95,99,0.07) 0%,rgba(17,16,15,0) 100%)}
.effective-date{text-shadow:none}
.social-icon{background:rgba(169,95,99,0.05)}
.social-icon:hover{box-shadow:none}

/* ---- bands that were already dark: hold their polarity, do not re-invert ---- */
.wallpaper-band{background:var(--d-ground);border-block:1px solid rgba(185,149,89,0.28)}
.wallpaper-band .bg{background-image:none;background:
  radial-gradient(ellipse at 25% 30%, rgba(87,37,44,0.9) 0%, transparent 60%),
  radial-gradient(ellipse at 78% 72%, rgba(169,95,99,0.32) 0%, transparent 62%),
  linear-gradient(160deg,#171314 0%,#11100F 100%)}
.wallpaper-band .bg::after{background:none}
.wallpaper-band .copy{background:rgba(17,16,15,0.55);border-color:rgba(185,149,89,0.3)}
.wallpaper-band .kicker{color:var(--gold);text-shadow:none}
.wallpaper-band h2{color:var(--d-text)}
.wallpaper-band h2 em{color:var(--gold);text-shadow:none}
.wallpaper-band p{color:var(--d-dim)}
.wallpaper-band .neon-sign{text-shadow:none;color:var(--gold)}
.wallpaper-band .neon-sign small{color:var(--d-dim);text-shadow:none}

.founding{background:linear-gradient(140deg,var(--purple) 0%,#11100F 100%);border:1px solid rgba(185,149,89,0.28);box-shadow:none}
.founding::before{background:radial-gradient(ellipse at 30% 20%,rgba(169,95,99,0.35),transparent 58%),radial-gradient(ellipse at 72% 82%,rgba(185,149,89,0.18),transparent 62%)}
.founding h2{color:var(--d-text)}
.founding h2 em{color:var(--gold);text-shadow:none}
.founding h2 .strike{color:rgba(242,233,223,0.5)}
.founding-spots{background:rgba(242,233,223,0.1);color:var(--gold);border-color:rgba(185,149,89,0.4);text-shadow:none;box-shadow:none}
.founding-fine{color:var(--d-dim)}
/* The pill already carries the border and the fill. Giving the input its own
   as well paints a square-cornered box inside the rounded pill — the field
   sits flush and inherits the pill's shape instead. This override was
   written when the surrounding band was the only dark thing on a light
   page and the field needed its own edge to be visible; it does not now. */
.founding-form input{background:transparent;border:none;color:var(--d-text)}
.founding-form input::placeholder{color:rgba(242,233,223,0.45)}

.footer{background:var(--d-ground);border-top:1px solid rgba(185,149,89,0.25);color:var(--d-text)}
.footer-brand-name,.footer-col h4{color:var(--d-text)}
.footer-brand-tagline{color:var(--gold);text-shadow:none}
.footer-brand-sub,.footer-col a,.footer-legal{color:var(--d-dim)}
.footer-col a:hover{color:var(--gold)}
.footer-legal-links a{color:var(--d-dim)}
.footer-legal-links a:hover{color:var(--gold)}
.footer-bottom,.footer-bottom span{color:rgba(242,233,223,0.6)}
.footer-mega{color:rgba(242,233,223,0.04)}
.footer .social-icon{border-color:rgba(185,149,89,0.3);background:rgba(242,233,223,0.06)}

/* ---- placards keep their dark treatment: they sit over photographs.
        Veil alphas are the solved system in docs/placard-spec.md section 5. ---- */
.split-visual{background-color:var(--d-ground);border:1px solid rgba(185,149,89,0.3);box-shadow:0 30px 70px -30px rgba(0,0,0,0.55)}
.split-visual::before{background:
  radial-gradient(ellipse at 20% 15%, rgba(169,95,99,0.15) 0%, transparent 45%),
  radial-gradient(ellipse at 80% 85%, rgba(87,37,44,0.10) 0%, transparent 50%),
  linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.56) 55%, rgba(0,0,0,0.82) 100%)}
.split-visual::after{box-shadow:inset 0 0 60px rgba(0,0,0,0.25),inset 0 0 0 1px rgba(185,149,89,0.2)}
.split-visual .badge{background:rgba(0,0,0,0.85);color:var(--gold);border-color:rgba(185,149,89,0.5);text-shadow:none;box-shadow:none}
.widget{color:var(--d-text)}
.widget .w-title{color:var(--d-text);text-shadow:0 1px 3px rgba(0,0,0,0.9)}
.widget .w-title em{color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,0.9)}
.widget label,.widget .w-label{color:var(--gold);text-shadow:0 1px 3px rgba(0,0,0,0.9)}
.widget select,.widget input[type="number"]{background:rgba(0,0,0,0.5);border-color:rgba(242,233,223,0.28);color:var(--d-text)}
.widget .w-row{background:rgba(17,16,15,0.34);border-color:rgba(242,233,223,0.18)}
.widget .w-row.on{background:rgba(169,95,99,0.3);border-color:var(--pink-glow);box-shadow:none}
.widget .w-row .w-name,.widget .w-row .w-desc{color:var(--d-text);text-shadow:0 1px 3px rgba(0,0,0,0.9)}
.widget .w-row .w-desc{opacity:0.75}
.widget .w-toggle{color:var(--gold)}
.widget .w-row.on .w-toggle{background:var(--pink-fill);color:var(--ivory);box-shadow:none}
.widget .w-total{background:linear-gradient(180deg,rgba(169,95,99,0.22) 0%,rgba(0,0,0,0.46) 100%);border-color:rgba(185,149,89,0.35);box-shadow:none}
.widget .w-total .lbl{color:var(--gold);text-shadow:none}
.widget .w-total .amt{color:var(--d-text);text-shadow:0 2px 6px rgba(0,0,0,0.95)}
.widget .w-total .note{color:var(--d-dim);text-shadow:0 1px 3px rgba(0,0,0,0.9)}
.widget .w-list::-webkit-scrollbar-thumb{background:var(--gold)}

/* ---- consent: matches the page ---- */
.consent{background:linear-gradient(180deg,var(--elev) 0%,var(--ink) 100%);border:1px solid var(--line-pink);box-shadow:0 30px 70px -25px rgba(87,37,44,0.4)}
.consent::before{background:linear-gradient(90deg,transparent,var(--pink),var(--gold),transparent)}
.consent-eyebrow{color:var(--pink-text);text-shadow:none}
.consent h2{color:var(--ivory)}
.consent h2 em{color:var(--pink-text);text-shadow:none}
.consent-scrim{background:rgba(87,37,44,0.5)}
.consent-btn-accept{background:var(--purple);color:var(--ivory);box-shadow:none}
.consent-btn-accept:hover{background:var(--pink-deep);box-shadow:none}
.consent-btn-reject{background:rgba(169,95,99,0.07);color:var(--ivory);border-color:var(--line-pink)}
.consent-btn-prefs{color:var(--dim);border-color:var(--line-strong)}
.consent-switch{background:rgba(242,233,223,0.12);border-color:var(--line-strong)}
.consent-switch::after{background:rgba(242,233,223,0.4)}
.consent-switch[aria-checked="true"]{background:rgba(169,95,99,0.25);border-color:var(--pink);box-shadow:none}
.consent-switch[aria-checked="true"]::after{background:var(--pink);box-shadow:none}

/* ---- classes the cream sheet used to own (book-now / telehealth-portal /
        intake). They lost their styling when those pages moved off it. ---- */
.section-sm{padding:5rem 2rem;position:relative}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;margin-bottom:1.25rem;color:var(--ivory)}
.section-title em{color:var(--pink-text);font-family:'Cormorant Garamond',serif}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.service-card{padding:2rem 1.75rem;background:linear-gradient(180deg,var(--elev) 0%,var(--noir) 100%);border:1px solid var(--line);border-radius:var(--radius);transition:.3s var(--ease)}
.service-card:hover{border-color:var(--line-pink);transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(87,37,44,0.35)}
.service-card h3{font-size:1.25rem;margin-bottom:0.6rem;color:var(--ivory)}
.service-card p{color:var(--dim);font-size:0.9rem;line-height:1.7}
.service-card-icon{font-size:1.6rem;margin-bottom:1rem;display:block}
.card-link{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.25rem;color:var(--pink-text);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700}
.card-link:hover{gap:0.8rem}
.steps-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;margin-top:2.5rem}
.step-item{position:relative;padding-top:1.25rem;border-top:2px solid var(--line-pink)}
.step-item h4{font-size:1.05rem;margin-bottom:0.5rem;color:var(--ivory)}
.step-item p{color:var(--dim);font-size:0.88rem;line-height:1.7}
.step-num{display:block;font-size:0.68rem;letter-spacing:0.28em;text-transform:uppercase;font-weight:700;color:var(--pink-text);margin-bottom:0.6rem}
.integration{padding:1.75rem;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--elev);color:var(--dim);font-size:0.9rem;line-height:1.7}
.intake{position:relative}
.intake-hint{font-size:0.82rem;color:var(--faint);margin-top:1rem;line-height:1.7}
.jotform-shell{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--elev);min-height:520px}
.jotform-frame{width:100%;min-height:820px;border:0;display:block;background:var(--elev)}
.jotform-fallback{padding:3.5rem 2rem;text-align:center;color:var(--dim)}
.jotform-fallback h3{color:var(--ivory);margin-bottom:0.85rem;font-size:1.4rem}

@media(max-width:768px){
  .hero{padding:8.5rem 1.25rem 4rem}
  .section-sm{padding:3.5rem 1.25rem}
  .steps-row{gap:1.25rem}
}

/* ---- fixes found by sweeping the rendered pages ----
   .nav-menu a is (0,1,1) and was beating the (0,1,0) CTA rules, painting the
   book-now buttons raspberry-on-raspberry. Match the anchor explicitly. */
.nav-menu a.nav-cta,.nav-menu a.btn-book,.nav-menu a.btn-primary{background:var(--purple);color:var(--ivory);border:1px solid var(--purple)}
.nav-menu a.nav-cta:hover,.nav-menu a.btn-book:hover,.nav-menu a.btn-primary:hover{background:var(--pink-fill);border-color:var(--pink-fill);color:var(--ivory)}
.nav-menu a.btn-book.active,.nav-menu a.nav-cta.active{color:var(--ivory)}

/* strong inside the dark footer inherited --dim, which is now near-black */
.footer-legal strong,.footer strong{color:var(--d-text)}
.footer-legal-links span{color:rgba(242,233,223,0.40)}

/* ---- contrast pass, driven by a sweep of all 13 rendered pages ----
   Every value below was measured against its actual composited ground, not
   guessed. WCAG AA is 4.5:1 for body text, 3:1 for large. */

/* Dark sections carry bare h3/p/a in places, not just the named classes, so
   the old rules missed them and left near-black text on black. */
.footer h3,.footer h4,.footer-brand h3{color:var(--d-text)}
.footer p,.footer li,.footer-brand p{color:var(--d-dim)}
.footer a{color:var(--d-dim)}
.footer a:hover{color:var(--gold)}
.footer-bottom a,.footer-bottom span a{color:rgba(242,233,223,0.78)}
.founding p,.founding li{color:var(--d-dim)}
.wallpaper-band p,.wallpaper-band li{color:var(--d-dim)}
.founding strong,.footer strong,.wallpaper-band strong{color:var(--d-text)}

/* Separators were rgba(...,0.4) = 3.28:1. */
.footer-legal-links span,.footer-bottom .sep{color:rgba(242,233,223,0.62)}

/* Gold is 3.0:1 on champagne — it cannot carry text on a light ground.
   On light it becomes the darker bronze or raspberry; on black it stays gold. */
.tile3d .lbl,.tile3d .lbl.top{color:var(--gold-deep)}
.hero-title .sm{color:var(--gold-deep)}
.split-copy strong,.split-copy em{color:var(--pink-text)}

/* Raspberry on the deeper card ground measured 4.36:1 — just short. */
.card-link,.service-card .card-link{color:var(--pink-text)}
.service-card{background:linear-gradient(180deg,var(--elev) 0%,#191615 100%)}

/* .tag sits on black and was raspberry at 3.03:1. */
.wallpaper-band .tag,.founding .tag,.footer .tag{color:var(--gold)}

/* ---- hero turntable, retuned for the pale ground ----
   Tiles used to be floral crops with a heavy black drop shadow, which
   only worked against the old near-black hero. On champagne they read as
   soft blush cards with gold hairlines. */
.tile3d{border:1px solid rgba(185,149,89,0.55);box-shadow:0 26px 55px -26px rgba(87,37,44,0.42),0 0 0 1px rgba(255,255,255,0.5) inset}
.tile3d::before{background:linear-gradient(180deg,transparent 40%,rgba(17,16,15,0.72) 100%)}
.tile3d::after{color:var(--pink-text);opacity:0.55;text-shadow:none}
.tile3d .lbl.bottom{color:var(--ivory)}
.tile3d .bg{filter:none}
.hero-3d-scene{opacity:0.85}
.hero-3d-scene::before{background:radial-gradient(ellipse at 50% 50%,transparent 20%,rgba(17,16,15,0.6) 62%,var(--ink) 88%)}
/* keep the headline and CTAs above the turntable */
.hero-inner{position:relative;z-index:5}

/* ==========================================================================
   OPENING · OUR STORY · DR. RAHIMI · SERVICE CATALOG
   The hero photograph and 3D turntable are retired. The page now opens on
   type, per directive section 3: Cormorant Garamond headline, Montserrat body,
   champagne ground with raspberry and gold.
   ========================================================================== */

.opening{position:relative;padding:12rem 2rem 6rem;background:
  radial-gradient(ellipse 65% 55% at 20% 12%, rgba(169,95,99,0.20) 0%, transparent 62%),
  radial-gradient(ellipse 55% 45% at 85% 80%, rgba(185,149,89,0.08) 0%, transparent 60%),
  linear-gradient(170deg,#262220 0%,#11100F 55%,#1A1716 100%);
  border-bottom:1px solid rgba(185,149,89,0.28);overflow:hidden}
.opening-inner{max-width:1400px;margin:0 auto;position:relative;z-index:2;text-align:center}
/* The rising-sun mark, set behind the opening type.
   Shipped as a grayscale MASK rather than a gold PNG, and painted with
   var(--gold). Three reasons: the alpha-channel WebP of the same artwork was
   251KB against 19KB for the mask; the colour then comes from the brand token,
   so it can never drift from the rest of the site; and the wordmark is not in
   the file at all - this is the mark alone, which is what belongs behind type
   that already says the name.
   Section 2 of the directive rules out large metallic blocks. At 0.13 this is a
   fine-line watermark, not a metal panel, and the text sits over the arc's open
   centre rather than over the rays. */
.opening-mark{
  position:absolute;
  left:50%;
  top:clamp(3rem,11vh,9rem);
  width:clamp(320px,58vw,760px);
  aspect-ratio:1200/1020;
  transform:translateX(-50%);
  background-color:var(--gold);
  -webkit-mask-image:url(../assets/lumae-mark.webp);
  mask-image:url(../assets/lumae-mark.webp);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center top;mask-position:center top;
  opacity:0.13;
  z-index:1;                 /* above the gradient, under .opening-inner's z-index:2 */
  pointer-events:none;
}
/* Fade the rays out at the bottom so the mark dissolves into the ground instead
   of ending on a hard edge behind the lede. */
.opening-mark::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,var(--ink) 96%)}

@media(max-width:768px){
  .opening-mark{width:min(88vw,420px);top:clamp(2rem,7vh,4rem);opacity:0.10}
}
@media(prefers-reduced-motion:no-preference){
  .opening-mark{animation:mark-rise 1.6s var(--ease) both}
}
@keyframes mark-rise{from{opacity:0;transform:translateX(-50%) translateY(14px)}
                     to{opacity:0.13;transform:translateX(-50%) translateY(0)}}

/* Dusty Rose, not --pink-text. The mark behind this adds gold at 13%, and on
   the bright end of the opening gradient (#262220) that drops --pink-text to
   3.68:1 - under AA for text this size. Measured with the mark in place:
   --pink-text 3.68, --pink-glow 3.85, --pink-blush 5.63. Dusty Rose is a
   directive colour and stays in the raspberry family, so the fix is a token
   swap rather than dimming the mark the design is built around. */
.opening-eyebrow{display:inline-block;font-size:0.66rem;letter-spacing:0.42em;text-transform:uppercase;font-weight:600;color:var(--pink-blush);margin-bottom:2rem}
.opening-title{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,9vw,7rem);line-height:0.98;letter-spacing:-0.015em;color:var(--ivory);margin-bottom:1.75rem}
.opening-title em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--pink-text)}
.opening-lede{max-width:62ch;margin:0 auto 2.75rem;font-size:1.05rem;line-height:1.85;color:var(--dim)}
.opening-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:4rem}
.opening-meta{display:flex;justify-content:center;gap:0;flex-wrap:wrap;border-top:1px solid rgba(242,233,223,0.1);padding-top:2rem;max-width:760px;margin:0 auto}
.opening-meta span{flex:1;min-width:130px;font-size:0.68rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--faint);position:relative}
.opening-meta span strong{font-weight:600;color:var(--ivory)}
.opening-meta span+span::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(242,233,223,0.1)}

/* ---- our story ---- */
.story{display:grid;grid-template-columns:0.85fr 1.15fr;gap:4rem;align-items:start}
.story-lead h2{font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.05;color:var(--ivory);margin-bottom:1.75rem}
.story-lead h2 em{font-family:'Cormorant Garamond',serif;color:var(--pink-text)}
.story-pull{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.45rem;line-height:1.45;color:var(--pink-text);padding-left:1.25rem;border-left:2px solid var(--gold)}
.story-body p{font-size:1rem;line-height:1.9;color:var(--dim);margin-bottom:1.35rem}
.story-close{font-size:1.15rem !important;color:var(--ivory) !important;border-top:1px solid var(--line);padding-top:1.35rem;margin-top:0.5rem}
.story-close em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--pink-text)}

/* ---- dr. rahimi ---- */
.bio-role{font-size:0.68rem !important;letter-spacing:0.24em;text-transform:uppercase;font-weight:600;color:var(--pink-text) !important;margin-bottom:1.5rem !important}
/* The role line carries two full titles, so on a phone it is read rather than
   glanced at. Ease the tracking with it - uppercase at 0.24em wraps badly once
   the type grows. */
@media(max-width:480px){.bio-role{font-size:0.875rem !important;letter-spacing:0.14em}}
.credential-card{position:relative;padding:3rem 2.25rem;border-radius:var(--radius);background:linear-gradient(150deg,var(--purple) 0%,#0C0C0C 100%);border:1px solid rgba(185,149,89,0.3);box-shadow:0 30px 70px -30px rgba(87,37,44,0.5);text-align:center}
.credential-monogram{font-family:'Cormorant Garamond',serif;font-size:3.4rem;line-height:1;letter-spacing:0.08em;color:var(--gold);margin-bottom:1.25rem}
.credential-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--d-text);margin-bottom:0.3rem}
.credential-title{font-size:0.64rem;letter-spacing:0.3em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:2.25rem}
.credential-list{text-align:left;border-top:1px solid rgba(17,16,15,0.16)}
.credential-list > div{padding:1rem 0;border-bottom:1px solid rgba(17,16,15,0.16)}
.credential-list dt{font-size:0.6rem;letter-spacing:0.26em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:0.35rem}
.credential-list dd{margin:0;font-size:0.92rem;line-height:1.6;color:var(--d-text)}
.credential-note{margin-top:1.5rem;font-size:0.72rem;line-height:1.7;color:var(--d-dim)}
/* Portrait placard (team.html, when team.json sets `photo`). The photograph
   sits in a window at the top of the card (--win) and masks out into the
   card's own oxblood gradient, fully gone by the time the name starts - so
   every line of type sits on exactly the ground the plain card measured on.
   The window is fixed-height, not a percentage of the card: the card grows
   taller on phones and a percentage veil walks the text onto the face. A thin
   oxblood wash over the photo ties it into the placard rather than pasting
   a photograph on top of it. */
/* Doubled class: the <=768px `.credential-card{padding:...}` shorthand sits
   later in the sheet and would otherwise zero the window on phones. */
.credential-card.credential-card--photo{--win:clamp(16rem,26vw,22rem);overflow:hidden;isolation:isolate;padding-top:calc(var(--win) + 1rem)}
.credential-photo,
.credential-card--photo::before{position:absolute;top:0;left:0;right:0;height:calc(var(--win) + 1rem);z-index:-1;pointer-events:none}
/* Eased fade - a two-stop mask leaves a visible shelf where it starts. */
.credential-photo{width:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,0.86) 52%,rgba(0,0,0,0.6) 66%,rgba(0,0,0,0.3) 80%,rgba(0,0,0,0.1) 91%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,0.86) 52%,rgba(0,0,0,0.6) 66%,rgba(0,0,0,0.3) 80%,rgba(0,0,0,0.1) 91%,transparent 100%)}
.credential-card--photo::before{content:"";background:linear-gradient(180deg,rgba(87,37,44,0.10) 0%,rgba(87,37,44,0.22) 60%,rgba(87,37,44,0) 100%);mix-blend-mode:multiply;z-index:0}

/* ---- service catalog ---- */
.section-lede{max-width:70ch;font-size:1rem;line-height:1.85;color:var(--dim);margin-bottom:3rem}
.menu-heading{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.1;color:var(--ivory);margin:5rem 0 2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
.menu-heading em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--pink-text)}
.menu-fine{margin-top:1.75rem;font-size:0.78rem;line-height:1.75;color:var(--faint);font-style:italic}
.journey-cta{margin-top:2.75rem;display:flex;justify-content:center}

/* ---- socials sit centred in the slimmer footers ---- */
.footer-social{display:flex;gap:0.75rem;margin-top:1.5rem}
.footer-inner > .footer-social{justify-content:center;margin:0 0 2rem}
.footer-social .social-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(185,149,89,0.3);background:rgba(17,16,15,0.06);color:var(--d-text);transition:.25s var(--ease)}
.footer-social .social-icon svg{width:17px;height:17px}
.footer-social .social-icon:hover{background:rgba(185,149,89,0.2);border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

@media(max-width:900px){
  .story{grid-template-columns:1fr;gap:2.5rem}
  .credential-card{margin-top:2rem}
}
@media(max-width:768px){
  .opening{padding:9rem 1.25rem 4rem}
  .opening-eyebrow{letter-spacing:0.3em;font-size:0.6rem}
  .opening-ctas{flex-direction:column;align-items:stretch}
  .opening-ctas .btn{width:100%;justify-content:center}
  .opening-meta{gap:0.75rem 0}
  .opening-meta span{min-width:50%;padding:0.4rem 0}
  .opening-meta span+span::before{display:none}
  .menu-heading{margin-top:3.25rem}
  .credential-card{padding:2.25rem 1.5rem}
}

/* ---- cross-link from the pillar page to the full catalog ---- */
.catalog-cta{display:grid;grid-template-columns:1.6fr auto;gap:2.5rem;align-items:center;padding:3rem 2.5rem;border:1px solid var(--line-pink);border-radius:var(--radius);background:linear-gradient(150deg,var(--elev) 0%,#1C1918 100%)}
.catalog-cta h2{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.1;color:var(--ivory);margin-bottom:0.9rem}
.catalog-cta h2 em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--pink-text)}
.catalog-cta p{color:var(--dim);font-size:0.96rem;line-height:1.8;max-width:62ch;margin:0}
@media(max-width:768px){.catalog-cta{grid-template-columns:1fr;padding:2rem 1.5rem;gap:1.75rem}.catalog-cta .btn{width:100%;justify-content:center}}

/* ==========================================================================
   PLATFORM PASS — 2026-08-30
   Everything below is device-shape work rather than brand work: focus
   affordances, notch and overscan safe areas, and the large-format tiers the
   earlier responsive pass stopped short of.
   ========================================================================== */

/* ---- Focus affordances ----
   The site is navigable by keyboard and, on a TV, by D-pad. Without a visible
   ring, remote navigation is guesswork — you cannot see what is selected. The
   ring uses --pink-glow rather than --pink because at 5.72:1 it stays legible
   from across a room, and it clears the 3:1 minimum for non-text UI either way. */
:where(a, button, [tabindex], input, select, textarea, summary, [role="button"]):focus-visible{
  outline:2px solid var(--pink-glow);
  outline-offset:3px;
  border-radius:4px;
}
/* Older TV and embedded browsers (Tizen, WebOS, some Android WebViews) never
   implemented :focus-visible, so they would get no ring at all. Give those a
   plain :focus fallback rather than leaving the interface unnavigable. */
@supports not selector(:focus-visible){
  a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus{
    outline:2px solid var(--pink-glow);
    outline-offset:3px;
  }
}

/* ---- Safe area for the masthead ----
   .opening replaced .hero as the first section, and the notch rules were
   written before that swap, so it was the one full-bleed band left unprotected
   on a notched phone in landscape. */
.opening{
  padding-left:max(2rem, env(safe-area-inset-left));
  padding-right:max(2rem, env(safe-area-inset-right));
}

/* ---- Large format: wide desktop, then TV ----
   There is no reliable CSS signal for "this is a television" — the `tv` media
   type is dead and pointer/hover queries do not distinguish a remote from a
   trackpad. Width tiers are the honest approximation. A 1080p desktop monitor
   also matches the first tier, which is fine: slightly larger type on a large
   display is an improvement, not a regression. */
@media(min-width:1920px){
  html{font-size:17px}                 /* rem-based type scales with this */
  .nav-inner,.section-inner,.wallpaper-band .inner,.opening-inner,
  .footer-inner,.subhero-inner,.legal-content{max-width:1720px}
  .nav-menu{gap:3rem}
}

/* Television overscan. Many sets still crop roughly 3–5% of each edge, so
   anything flush to the viewport edge can be physically cut off. Pull the
   fixed and full-bleed surfaces inside a title-safe margin. */
@media(min-width:2560px){
  html{font-size:19px}
  .nav-inner,.section-inner,.wallpaper-band .inner,.opening-inner,
  .footer-inner,.subhero-inner,.legal-content{max-width:2100px}
  .nav{padding-left:max(4vw, env(safe-area-inset-left));
       padding-right:max(4vw, env(safe-area-inset-right));
       padding-top:max(2.5vh, env(safe-area-inset-top))}
  .opening{padding-left:max(4vw, env(safe-area-inset-left));
           padding-right:max(4vw, env(safe-area-inset-right))}
  .footer{padding-left:max(4vw, env(safe-area-inset-left));
          padding-right:max(4vw, env(safe-area-inset-right));
          padding-bottom:max(4vh, env(safe-area-inset-bottom))}
  /* At three metres, 12px eyebrow text is unreadable. Lift the smallest
     recurring labels rather than scaling the whole page again. */
  .section-eyebrow,.opening-eyebrow,.kicker,.card-link,.service-num,
  .menu-idx,.faq-num,.footer-col h4{font-size:0.9rem}
}

/* ---- Touch targets, phones only ----
   WCAG 2.5.8 asks for a 44px minimum on pointer targets but exempts links sitting
   inline inside a sentence, where padding would wreck the line box. These are the
   standalone controls that were measuring short — footer columns, breadcrumbs,
   card CTAs, social icons and the widget toggles. Sized with inline-flex and a
   min-height so the tap area grows without moving anything around it. */
@media (max-width:767px), (max-height:520px) and (orientation:landscape){
  .footer-col a,
  .footer-legal-links a,
  .crumb a,
  .card-link,
  .pillar-link,
  .nav-logo,
  .nav-toggle,
  .widget select,
  .widget .w-toggle,
  .menu-price a.pay-link,
  .btn, .btn-primary, .btn-pink, .btn-book, .btn-ghost, .btn-gold, .btn-sage{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .footer-col a,
  .footer-legal-links a{ min-width:44px; }
  .social-icon,
  .footer-social .social-icon,
  .footer .social-icon{ width:44px; height:44px; }
  /* The footer credit reads as one sentence, so it keeps its line box and gains
     the tap area vertically instead. */
  .footer-bottom a{ display:inline-block; padding-block:0.9rem; }
}

/* ==========================================================================
   ICONOGRAPHY + FOOTER BAR — 2026-08-30
   ========================================================================== */

/* ---- Line icons ----
   Directive section 7 asks service cards for "simple line icons"; the build was
   using emoji, which render as someone else's artwork in someone else's colour
   and read as clip-art next to Cormorant. These are stroke-only and inherit
   currentColor, so they take the gold or raspberry of wherever they sit. */
.line-icon{width:100%;height:100%;display:block;stroke:currentColor}
.service-card-icon{width:30px;height:30px;margin-bottom:1.1rem;display:block;color:var(--gold)}
.icon-lg{width:34px;height:34px;margin-bottom:1rem;color:var(--gold)}
.icon-xl{width:46px;height:46px;margin:0 auto 1rem;color:var(--gold)}

/* ---- Footer bar ----
   Three symmetric columns: the practice on the left, the motto centred, the
   maker's credit on the right. The outer columns are both 1fr so the motto sits
   on the true centre line regardless of how long either side runs. */
.footer-bottom{
  padding-top:1.5rem;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:2rem;
  color:var(--faint);
  font-size:0.72rem;
}
.fb-left{display:flex;align-items:center;gap:1.5rem;justify-self:start;flex-wrap:wrap}
.fb-address{
  color:var(--dim);
  letter-spacing:0.06em;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.fb-address:hover{color:var(--gold);border-bottom-color:var(--gold)}
.fb-left .footer-social{margin:0;gap:0.6rem}
.fb-phone{
  color:var(--dim);
  letter-spacing:0.06em;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.fb-phone:hover{color:var(--gold);border-bottom-color:var(--gold)}
.fb-motto{
  justify-self:center;
  font-family:'Montserrat',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.fb-right{justify-self:end;text-align:right;color:var(--faint);letter-spacing:0.04em}
.fb-right a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.fb-right a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.footer-baseline{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  padding-top:1.25rem;
  margin-top:1.25rem;
  border-top:1px solid var(--line);
  color:var(--faint);
  font-size:0.68rem;
  letter-spacing:0.05em;
  text-align:center;
}
.fb-note{color:var(--faint)}

/* Below the three-column width the bar stacks and centres; the motto leads,
   because it is the line worth reading first when everything is on one axis. */
@media(max-width:900px){
  .footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.5rem}
  .fb-left{justify-self:center;justify-content:center;flex-direction:column;gap:1rem;order:2}
  .fb-motto{order:1}
  .fb-right{justify-self:center;text-align:center;order:3}
  .footer-baseline{flex-direction:column;gap:0.5rem}
}

/* ---- Booking surface ----
   Shown until a scheduling provider is published in assets/booking-config.json.
   It is a real offer with a real phone number rather than an empty frame or a
   note to the developer, because this page is public. */
.booking-pending{
  background:linear-gradient(180deg,var(--elev) 0%,var(--noir) 100%);
  border:1px solid var(--line-pink);
  border-radius:var(--radius);
  padding:3.5rem 2rem;
  min-height:400px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.25rem;text-align:center;
}
.booking-pending h3{font-size:1.5rem;color:var(--ivory)}
.booking-pending p{color:var(--dim);font-size:0.94rem;max-width:42ch;line-height:1.7}
.booking-pending .booking-fine{font-size:0.74rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold);margin-top:0.25rem}
@media(max-width:600px){.booking-pending{padding:2.5rem 1.25rem}
  .booking-pending .btn{width:100%;justify-content:center}}

/* ==========================================================================
   GAUNTLET REMEDIATION — 2026-08-30
   Five rendered gates found real defects on device shapes a desktop review
   never reaches. Fixes below, each scoped to the shape that has the problem.
   ========================================================================== */

/* ---- iOS: a field under 16px makes Safari zoom the page on focus, and it
   does not zoom back. The founding-form input was still at 0.9rem, so anyone
   subscribing from an iPhone finished on a page they could not see. */
.founding-form input{font-size:16px;min-height:48px}

/* ---- Landscape phone (844x390 and similar).
   These min-heights are right in portrait — a placard needs room, a booking
   panel needs presence. On a short landscape viewport they hold a full screen
   of nothing above the copy, so the reader scrolls past an empty band before
   reading a word. Relax them where the viewport is short, not where it is
   narrow: this keeps the portrait composition intact. */
@media (max-height:520px) and (orientation:landscape){
  .wallpaper-band{min-height:auto}
  .split-visual{min-height:auto;aspect-ratio:16/9}
  .widget{min-height:auto;padding:2rem 1.5rem 1.5rem}
  .jotform-shell{min-height:auto}
  .jotform-frame{min-height:520px}
  .booking-pending{min-height:auto;padding:2rem 1.5rem}
  .opening{padding-top:6rem;padding-bottom:3rem}
}

/* ---- Prose floor on phones.
   Fine print is allowed to be smaller than body copy — that hierarchy is the
   point — but below 14px it stops being readable at arm's length on a phone.
   These are the captions and disclaimers the gauntlet measured under the floor. */
@media(max-width:600px){
  .menu-body p{font-size:0.875rem}
  .credential-note{font-size:0.875rem}
  .menu-fine{font-size:0.875rem}
  .legal-content p,
  .portal-note p,
  .footer-legal{font-size:0.875rem}
}

/* ---- Touch targets missed on the width axis.
   A control can clear 44px tall and still be 41px wide, which passes a
   height-only check and is still a miss on the axis nobody looks at. */
@media (max-width:767px), (max-height:520px) and (orientation:landscape){
  .crumb a,
  .card-link,
  .pillar-link,
  .footer-col a,
  .footer-legal-links a{min-width:44px}
  /* Standalone links that were sitting at their line-box height. */
  .notice-box a,
  .intake-hint a,
  .portal-contact a,
  .booking-pending a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- Safe area for the consent scrim.
   It covers the viewport, so on a notched phone in landscape the dialog inside
   it could sit under the sensor housing. */
.consent-scrim{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* Visually hidden, still read by assistive technology. Clip-path rather than
   display:none, which would remove it from the accessibility tree entirely. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---- Physician-Guided Services: a deliberate 4 x 4 ----
   The catalog holds exactly sixteen treatments, so it reads as a grid rather
   than a list. auto-fit was giving five columns at desktop width and leaving a
   ragged final row of one; four fixed columns square it off.
   minmax(0,1fr) rather than 1fr so a long treatment name wraps inside its card
   instead of widening the track and unbalancing the row. */
#all-services .services-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.1rem;
}
#all-services .service-card{padding:1.75rem 1.4rem}
#all-services .service-card h3{font-size:1.15rem;line-height:1.2}

/* Four across stops being readable before the tablet breakpoint — each track
   is under 230px by 1100 — so it halves there and stacks on a phone. */
@media(max-width:1100px){
  #all-services .services-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(max-width:640px){
  #all-services .services-grid{grid-template-columns:1fr}
}

/* ---- Four-up service row ----
   The booking page offers exactly four routes in, so they read as one even row
   rather than whatever auto-fit happens to produce at a given width. Same
   reasoning as the sixteen-card catalog: minmax(0,1fr) keeps a long service
   name inside its card instead of widening the track and breaking the rhythm. */
.services-grid--four{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.1rem;
  align-items:stretch;
}
.services-grid--four .service-card{display:flex;flex-direction:column}
.services-grid--four .service-card .card-link{margin-top:auto}
@media(max-width:1023px){ .services-grid--four{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media(max-width:600px){  .services-grid--four{grid-template-columns:1fr} }

/* ---- Pricing text carries no fill ----
   A price is type, not a control. The faint raspberry rectangle behind it had
   no padding and no radius, so it read as a highlighter smear across the number
   rather than as a considered surface. Colour alone carries the emphasis. */
.menu-price,
.menu-price a.pay-link{ background:none; }

/* ---- One sizing rule for every CTA icon ----
   .nav-cta and .btn each had their own svg sizing, but the variants that carry
   neither class — .btn-book, .btn-primary and friends used as a bare nav pill —
   had none, so an icon added there rendered at its natural size and blew the
   nav apart. Sizing every CTA icon in one place means adding an arrow to a
   button can never do that again.
   inline-flex + align-items keeps the glyph on the text baseline rather than
   sitting on it. */
.btn, .btn-primary, .btn-pink, .btn-book, .btn-ghost, .btn-gold, .btn-sage,
.card-link, .pillar-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
/* .nav-cta is deliberately absent from the list above. It already lays itself
   out, and it is display:none below 1024px so the hamburger can take over —
   setting display here would win on source order and put a full-width pill back
   into a collapsed nav. Its icon is still sized by the rule below. */
.nav-cta{ align-items:center; gap:0.5rem; }
.btn svg, .btn-primary svg, .btn-pink svg, .btn-book svg, .btn-ghost svg,
.btn-gold svg, .btn-sage svg, .nav-cta svg{
  width:14px;
  height:14px;
  flex:0 0 auto;
}
.card-link svg{ width:12px; height:12px; flex:0 0 auto; }
@media(max-width:600px){
  .btn svg, .btn-primary svg, .btn-pink svg, .btn-book svg, .btn-ghost svg,
  .btn-gold svg, .btn-sage svg, .nav-cta svg{ width:12px; height:12px; }
}

/* ============ MEDIA: photographic injection ============
   One master image, several deliberate placements. The frames below are the
   only sanctioned ways a photograph enters a page - each is art-directed
   against the fact that these frames are ~90% black by area, so they are
   composited into the ground rather than pasted on top of it as a rectangle.

   Every figure is generated by scripts/build_figures.py from the manifest, so
   width/height/srcset always match the file on disk. Intrinsic dimensions are
   always present: a photograph that reflows the page after it decodes is a
   layout shift, and on a page this dark the shift is the first thing you see. */

.media-frame{position:relative;margin:0;overflow:hidden;border-radius:var(--radius);background:var(--ink);isolation:isolate}
.media-frame img,.media-frame video{display:block;width:100%;height:100%;object-fit:cover}

/* The LQIP sits underneath as a background so first paint carries the
   photograph's own tonality. A grey placeholder box would read as a hole. */
.media-frame::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;background-image:var(--lqip);filter:blur(12px);transform:scale(1.08);z-index:-1}

/* Gold hairline, not a metallic block - section 2 rules out large metallic
   fills, and this is the compliant way to give an image an edge. */
.media-frame::after{content:'';position:absolute;inset:0;border-radius:var(--radius);border:1px solid rgba(185,149,89,0.22);pointer-events:none}

/* Ground fade. The image is dark at its edges by construction, so bleeding it
   into the page ground removes the rectangle without a vignette overlay. */
.media-frame--fade img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%)}
.media-frame--fade::after{display:none}

/* --- Variant: editorial inset ---------------------------------------------
   The photograph sits inside the prose and the text runs around it, the way a
   magazine sets a picture into a column - not beside the copy as a second slab
   competing with it for the eye.

   This replaced a half-width image ~880px across. At that size the picture read
   as the section and the writing read as a caption, which is backwards: on a
   service page the clinical copy is the point and the still life is atmosphere.
   Roughly a third the width puts them back in the right order, and floating it
   into the text is what makes the two feel like one block rather than two.

   The measure is capped at 840px so the wrapped column stays readable - text
   flowing around a float in a 1400px container gives lines nobody can track. */
/* ---- skip link -------------------------------------------------------------
   It had no rule at all until 2026-09-17, which meant it rendered as ordinary
   visible body text at the top of the two pages that carried one, and measured
   122x19px - a real 44px miss for the keyboard and switch-control users it
   exists to serve.

   Positioned off the top of the viewport rather than `display:none`, because a
   hidden element is not focusable and a skip link that cannot be focused is
   not a skip link. On focus it drops into the corner at a full target size. */
.skip-link{position:absolute;left:0.75rem;top:-6rem;z-index:1200;
  display:inline-flex;align-items:center;min-height:44px;padding:0.6rem 1.25rem;
  background:var(--oxblood);color:var(--ivory);border:1px solid var(--gold);
  border-radius:100px;font-family:'Montserrat',sans-serif;font-size:0.8rem;
  font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;transition:top .18s var(--ease)}
.skip-link:focus,.skip-link:focus-visible{top:calc(0.75rem + env(safe-area-inset-top,0px))}

.media-editorial{max-width:840px;margin:0 auto}
/* The memberships credit note carries the members photograph as an inset. It is
   one paragraph rather than an essay, so it does not want the editorial block's
   own bottom margin stacking on top of the section's. */
.media-editorial--flush{margin-bottom:3rem}
.media-editorial--flush .member-credit-note{margin:0}
.media-editorial::after{content:'';display:block;clear:both}
.media-editorial h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;color:var(--ivory);margin:0 0 1.35rem}
.media-editorial h2 em{color:var(--pink-text);font-style:italic;text-shadow:0 0 14px rgba(169,95,99,0.32)}
.media-editorial p{color:var(--dim);line-height:1.85;font-size:1.02rem;margin:0 0 1.15rem}
.media-editorial p:last-child{margin-bottom:0}
.media-split-kicker{font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:1rem}

/* shape-outside lets the wrap follow the rounded corner instead of the bounding
   box, so the text tucks into the radius rather than standing off a phantom
   square edge. */
.media-inset{float:right;width:clamp(180px,28%,250px);margin:0.4rem -2.5rem 1.25rem 2.25rem;shape-outside:inset(0 2.5rem 1.25rem 0 round var(--radius));shape-margin:0.5rem}
.media-inset--left{float:left;margin:0.4rem 2.25rem 1.25rem -2.5rem;shape-outside:inset(0 0 1.25rem 2.5rem round var(--radius))}
/* 4:5 rather than the master's 2:3. A portrait at full ratio finishes well
   below the copy and the block ends with a column of nothing beside it; 4:5
   lands the picture and the last line of text at roughly the same place, which
   is what makes the two read as one object. */
.media-inset .media-frame{width:100%;aspect-ratio:4/5;height:auto;margin:0}
.media-statement .media-inset{width:clamp(170px,24%,220px)}
.media-inset-cap{display:block;font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--faint);line-height:1.6;margin-top:0.85rem;padding-top:0.7rem;border-top:1px solid rgba(185,149,89,0.3)}

@media(max-width:760px){
  /* Wrapping a float in a phone column leaves two-word lines. Stack it, and
     square the crop so a portrait still does not eat the whole screen. */
  .media-inset,.media-inset--left{float:none;width:100%;margin:0 0 1.75rem;shape-outside:none}
  .media-inset .media-frame{aspect-ratio:1/1}
  .media-editorial{max-width:none}
}

/* --- Variant: statement band -----------------------------------------------
   The homepage and services statements sit on a raised ground with rules top
   and bottom, so they still read as a band - but the composition inside is the
   same editorial inset the service pages use.

   This has now been wrong twice in opposite directions. It began as a scrim
   overlay with the copy set over the photograph, which spent the picture to buy
   contrast. It then became a 50/50 split, which at 1440 gave the image a
   720px-wide half of the screen - a billboard next to three lines of type. The
   inset is the version that works: the statement leads, the photograph supports
   at a quarter of the measure, and the two occupy one block rather than two. */
.media-statement{background:var(--noir);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* --- Variant: detail tile -------------------------------------------------
   A square art-directed crop of the same master. object-position picks the
   region, so a second file is never uploaded for a second crop. */
.media-tile{aspect-ratio:1/1}
.media-tile img{transition:transform .8s var(--ease)}
.media-tile:hover img{transform:scale(1.06)}

/* --- Scroll behaviour -----------------------------------------------------
   Reveal is opacity+translate on enter. Parallax shifts the image inside its
   own frame, so nothing outside the frame ever moves and no scrollbar appears. */
.media-frame[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.media-frame[data-reveal].is-in{opacity:1;transform:none}
.media-frame[data-parallax] img{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .media-frame[data-reveal]{opacity:1;transform:none;transition:none}
  .media-frame[data-parallax] img{transform:none !important}
  .media-tile img{transition:none}
  .media-tile:hover img{transform:none}
}

@media(max-width:900px){
}

/* ============ JOURNAL ============
   Long-form reading on a near-black ground. The measure is deliberately narrow
   and the body colour is --dim rather than --ivory: full-strength ivory at
   15.84:1 held for four hundred words is genuinely tiring to read, while --dim
   still clears AA comfortably. Headings step back up to ivory so the hierarchy
   survives the softer body. */

.journal-featured{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2.25rem);transition:.3s var(--ease);background:linear-gradient(180deg,rgba(38,34,32,0.55) 0%,rgba(17,16,15,0.2) 100%)}
.journal-featured:hover{border-color:var(--line-pink);box-shadow:0 0 40px rgba(169,95,99,0.10)}
.journal-featured .media-frame{width:100%;height:min(44vh,340px)}
.journal-featured-body h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.14;color:var(--ivory);margin:0.75rem 0 1rem}
.journal-featured:hover .journal-featured-body h2{color:var(--pink-glow)}
.journal-featured-body p{color:var(--dim);line-height:1.8;margin:0 0 1.25rem;max-width:54ch}

.journal-meta,.journal-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.85rem;font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.journal-cat{color:var(--gold);border:1px solid rgba(185,149,89,0.32);border-radius:100px;padding:0.35rem 0.8rem}
.journal-card-more{display:inline-block;font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--pink-text)}

.journal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.journal-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--charcoal);transition:.3s var(--ease)}
.journal-card:hover{border-color:var(--line-pink);transform:translateY(-3px);box-shadow:0 0 32px rgba(169,95,99,0.10)}
.journal-card-link{display:block;padding:1.75rem;text-decoration:none;height:100%}
.journal-card h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;line-height:1.22;color:var(--ivory);margin:0.9rem 0 0.75rem}
.journal-card:hover h3{color:var(--pink-glow)}
.journal-card p{color:var(--dim);font-size:0.93rem;line-height:1.75;margin:0 0 1.25rem}

.journal-article{padding:clamp(3rem,7vw,6rem) 0}
.journal-article .section-inner{max-width:820px}
.journal-article h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;color:var(--ivory);margin:1.25rem 0 1.5rem}
.journal-lede{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.55;color:var(--pink-blush);margin:0 0 2.5rem}
.journal-art{width:100%;height:min(46vh,400px);margin:0 0 3rem}

.journal-body{color:var(--dim);font-size:1.03rem;line-height:1.85}
.journal-body p{margin:0 0 1.5rem}
.journal-body h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.35rem,2.6vw,1.85rem);color:var(--ivory);margin:2.75rem 0 1rem;line-height:1.2}
.journal-body strong{color:var(--ivory);font-weight:600}
.journal-body em{color:var(--pink-blush)}
.journal-body ul,.journal-body ol{margin:0 0 1.75rem 1.25rem}
.journal-body li{margin-bottom:0.85rem}
.journal-body li::marker{color:var(--pink-text)}
.journal-body a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(169,95,99,0.45)}
.journal-body a:hover{color:var(--pink-glow)}
/* The standing disclaimer. Visually distinct from the argument around it -
   section 11 asks that medical education read differently from decorative copy. */
.journal-body .journal-note{font-size:0.875rem;color:var(--faint);border-left:2px solid var(--line-pink);padding:0.9rem 0 0.9rem 1.25rem;margin-top:2.5rem;line-height:1.7}

.journal-sources{margin:3.5rem 0 0;padding:1.75rem 2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--noir)}
.journal-sources h2{font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0 0 1rem}
.journal-sources ol{margin:0 0 1rem 1.1rem;padding:0}
.journal-sources li{color:var(--dim);font-size:0.88rem;line-height:1.7;margin-bottom:0.1rem}
.journal-sources li::marker{color:var(--pink-text)}
.journal-sources a{display:inline-block;padding:0.7rem 0;min-height:44px;color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.journal-sources p{font-size:0.875rem;color:var(--faint);margin:0}

.journal-cta{margin:3.5rem 0 0;padding:2.5rem;border:1px solid var(--line-pink);border-radius:var(--radius);background:linear-gradient(180deg,rgba(169,95,99,0.10) 0%,rgba(17,16,15,0.5) 100%);text-align:center}
.journal-cta h2{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--ivory);margin:0 0 0.6rem}
.journal-cta p{color:var(--dim);margin:0 0 1.5rem}
.journal-cta a[href^="tel"]{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}

.journal-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.journal-pager-link{display:block;padding:1.35rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ivory);font-family:'Cormorant Garamond',serif;font-size:1.05rem;line-height:1.3;transition:.25s var(--ease)}
.journal-pager-link:hover{border-color:var(--line-pink);color:var(--pink-glow)}
.journal-pager-link span{display:block;font-family:'Montserrat',sans-serif;font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--pink-text);margin-bottom:0.5rem}
.journal-pager-link--prev{text-align:right}
.journal-pager-link--prev:only-child{grid-column:2}

.journal-note-box{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);padding:1.5rem 1.75rem;background:var(--noir)}
.journal-note-box p{color:var(--dim);font-size:0.92rem;line-height:1.8;margin:0}
.journal-note-box strong{color:var(--ivory)}

@media(max-width:900px){
  .journal-featured{grid-template-columns:1fr;gap:1.5rem}
  .journal-featured .media-frame{height:min(40vh,300px)}
  .journal-art{height:min(38vh,280px);margin-bottom:2rem}
  .journal-pager{grid-template-columns:1fr}
  .journal-pager-link--prev{text-align:left}
  .journal-pager-link--prev:only-child{grid-column:1}
  .journal-sources,.journal-cta{padding:1.5rem 1.25rem}
}

/* ============ GALLERY ============ */
.gallery-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;grid-auto-flow:dense}
.gallery-cell{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--noir);isolation:isolate}
.gallery-cell::before{content:'';position:absolute;inset:0;background-image:var(--lqip);background-size:cover;background-position:center;filter:blur(14px);transform:scale(1.1);z-index:-1}
.gallery-cell--wide{grid-column:span 2}
.gallery-cell--tall{grid-row:span 2}
.gallery-cell--feature{grid-column:span 2;grid-row:span 2}
.gallery-open{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;position:relative;aspect-ratio:1/1}
.gallery-cell--tall .gallery-open,.gallery-cell--feature .gallery-open{aspect-ratio:auto;height:100%}
.gallery-open img,.gallery-open video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease),filter .5s var(--ease)}
.gallery-open:hover img,.gallery-open:hover video{transform:scale(1.05)}
.gallery-open:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.gallery-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(17,16,15,0.55);backdrop-filter:blur(4px);pointer-events:none}
.gallery-play::after{content:'';position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:14px solid var(--ivory);border-top:9px solid transparent;border-bottom:9px solid transparent}
.gallery-cell figcaption{padding:0.85rem 0.25rem 0;font-size:0.82rem;color:var(--dim);line-height:1.6;display:flex;flex-wrap:wrap;gap:0.6rem;align-items:baseline}
.gallery-credit{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:var(--pink-text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.gallery-empty{border:1px dashed var(--line-pink);border-radius:var(--radius);padding:clamp(2.5rem,7vw,4.5rem);text-align:center;background:linear-gradient(180deg,rgba(169,95,99,0.07) 0%,rgba(17,16,15,0.4) 100%)}
.gallery-empty p{color:var(--dim);font-size:1.02rem;line-height:1.8;max-width:52ch;margin:0 auto 1.75rem}
.gallery-foot{margin-top:2.5rem;font-size:0.9rem;color:var(--faint)}
.gallery-foot a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}

/* Lightbox. Opaque near-black rather than a translucent scrim: over a page that
   is already #11100F a translucent overlay barely reads as a mode change. */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(9,8,8,0.97);display:grid;place-items:center;padding:calc(clamp(1rem,5vw,4rem) + env(safe-area-inset-top)) calc(clamp(1rem,5vw,4rem) + env(safe-area-inset-right)) calc(clamp(1rem,5vw,4rem) + env(safe-area-inset-bottom)) calc(clamp(1rem,5vw,4rem) + env(safe-area-inset-left))}
.lightbox[hidden]{display:none}
.lightbox-stage{max-width:min(92vw,1100px);max-height:78vh;display:grid;place-items:center}
.lightbox-stage img,.lightbox-stage video{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:var(--radius);display:block}
.lightbox-caption{margin:1.25rem 0 0;color:var(--dim);font-size:0.92rem;text-align:center;max-width:60ch}
.lightbox button{position:absolute;background:rgba(38,34,32,0.8);border:1px solid var(--line-strong);border-radius:50%;width:48px;height:48px;cursor:pointer;transition:.25s var(--ease)}
.lightbox button:hover{background:var(--purple);border-color:var(--purple-glow)}
.lightbox button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lightbox-close{top:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-top));right:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-right))}
.lightbox-close::before,.lightbox-close::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--ivory);transform-origin:center}
.lightbox-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.lightbox-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lightbox-nav{top:50%;transform:translateY(-50%)}
.lightbox-prev{left:clamp(0.5rem,2vw,2rem)}
.lightbox-next{right:clamp(0.5rem,2vw,2rem)}
.lightbox-nav::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;border-right:2px solid var(--ivory);border-bottom:2px solid var(--ivory)}
.lightbox-prev::after{transform:translate(-35%,-50%) rotate(135deg)}
.lightbox-next::after{transform:translate(-65%,-50%) rotate(-45deg)}

@media(max-width:1100px){.gallery-mosaic{grid-template-columns:repeat(2,1fr)}.gallery-cell--feature{grid-column:span 2}}
@media(max-width:700px){
  .gallery-mosaic{grid-template-columns:1fr;gap:1.5rem}
  .gallery-cell--wide,.gallery-cell--feature{grid-column:span 1}
  .gallery-cell--tall,.gallery-cell--feature{grid-row:span 1}
  .gallery-cell--tall .gallery-open,.gallery-cell--feature .gallery-open{aspect-ratio:4/5}
  .lightbox-nav{top:auto;bottom:clamp(1rem,4vw,2rem);transform:none}
}
@media(prefers-reduced-motion:reduce){.gallery-open img,.gallery-open video{transition:none}.gallery-open:hover img,.gallery-open:hover video{transform:none}}

/* ============ INSTAGRAM (consent-gated facade) ============
   The card is ours: our poster, our type, our play control. Instagram's own
   embed is a white Meta-chromed card that fights a near-black editorial page,
   and more importantly it phones Meta on load. Nothing here contacts Meta until
   the visitor presses play. */
.ig-row{display:flex;flex-wrap:wrap;gap:1.75rem}
.ig-row--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.75rem}
.ig-card{margin:0;flex:0 1 380px;max-width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--charcoal);overflow:hidden;transition:.3s var(--ease)}
.ig-card:hover{border-color:var(--line-pink);box-shadow:0 0 34px rgba(169,95,99,0.12)}

.ig-stage{position:relative;aspect-ratio:1/1.18;background:var(--ink);overflow:hidden}
.ig-poster{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:.5s var(--ease)}
.ig-card:hover .ig-poster{opacity:.85;transform:scale(1.03)}
.ig-poster--blank{width:100%;height:100%;background:linear-gradient(160deg,var(--noir) 0%,var(--ink) 100%)}
/* Show the reel, not Instagram's card.
   Measured against the live embed: the video begins exactly 54px down (their
   handle row) and renders at width x 1.25 regardless of width - they letterbox
   a 9:16 reel into a 4:5 frame. So the stage is 4:5, the iframe is pulled up by
   that 54px, and the action row, like count and comment line below the video
   are clipped by the stage.

   The iframe is given generous extra height rather than an exact one, because
   Instagram lays the card out itself and a tight box makes it reflow into a
   scrolling state. Everything past the video is hidden either way.

   The stage is 1:1.18, not the 1:1.25 the video measures at top level: inside a
   tall iframe Instagram lays the card out slightly differently and the video
   comes up about 5% short. 1.18 is the video's real height there, so the whole
   frame shows and their card begins exactly at the stage edge.

   That is a one-pixel margin, so the bottom edge also carries a 4px inset mask
   in the page ground. Sub-pixel rounding at some widths would otherwise let a
   pale hairline of their card through, and on a near-black page a white
   hairline is the first thing the eye finds. Four pixels of footage is a
   cheaper price than that.

   Attribution does not disappear with the chrome: the card carries the handle
   and a "Watch on Instagram" link in our own type, so credit and a route back
   to the source are still on the page. */
/* Overhang the right edge by a scrollbar's width so the embed's own
   scrollbar is clipped by the stage rather than drawn as a pale strip down
   the side of an otherwise black card. */
/* max-width:none is load-bearing: the responsive reset at line ~530 sets
   img,video,iframe{max-width:100%}, which silently clamps the overhang back
   to the stage width and puts the scrollbar sliver right back. */
.ig-stage iframe{position:absolute;top:-54px;left:0;width:calc(100% + 22px);max-width:none;height:calc(100% + 54px + 140px);border:0;background:#000;pointer-events:auto;scrollbar-width:none}
.ig-stage.is-loaded{background:#000;box-shadow:inset 0 -4px 0 var(--ink)}

.ig-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:0.7rem;padding:1.1rem 1.4rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:rgba(17,16,15,0.55);backdrop-filter:blur(6px);cursor:pointer;transition:.25s var(--ease);min-width:44px;min-height:44px}
.ig-play:hover{background:var(--purple);border-color:var(--purple-glow);box-shadow:var(--neon-shadow)}
.ig-play:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ig-play-icon{width:0;height:0;border-left:18px solid var(--ivory);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.ig-play-label{font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--ivory)}

.ig-badge{position:absolute;top:0.9rem;left:0.9rem;font-size:0.56rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--gold);border:1px solid rgba(185,149,89,0.34);border-radius:100px;padding:0.3rem 0.7rem;background:rgba(17,16,15,0.6)}

.ig-meta{padding:1.4rem 1.5rem 1.6rem}
.ig-label{font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--pink-text)}
.ig-title{font-family:'Cormorant Garamond',serif;font-size:1.35rem;line-height:1.24;color:var(--ivory);margin:0.6rem 0 0.6rem}
.ig-blurb{color:var(--dim);font-size:0.93rem;line-height:1.75;margin:0 0 1rem}
.ig-link{display:inline-block;min-height:44px;padding:0.75rem 0;font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--pink-text);text-decoration:underline;text-underline-offset:4px}
.ig-link:hover{color:var(--pink-glow)}
.ig-note{margin-top:1.75rem;font-size:0.875rem;color:var(--faint);line-height:1.7}
.ig-note a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}

/* The consent prompt replaces the play control rather than covering it, so the
   visitor is told what is about to happen before anything is requested. */
.ig-consent{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:1.5rem;background:rgba(17,16,15,0.94);text-align:left}
.ig-consent p{color:var(--dim);font-size:0.875rem;line-height:1.7;margin:0}
.ig-consent strong{color:var(--ivory)}
.ig-consent-actions{display:flex;flex-wrap:wrap;gap:0.65rem}
.ig-consent button,.ig-consent a{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;border-radius:100px;padding:0.75rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}
.ig-consent .ig-allow{background:var(--purple);border:1px solid var(--purple-glow);color:var(--ivory)}
.ig-consent .ig-allow:hover{background:var(--purple-glow)}
.ig-consent .ig-external{background:none;border:1px solid var(--line-pink);color:var(--pink-text)}
.ig-consent .ig-external:hover{border-color:var(--pink);color:var(--pink-glow)}
.ig-consent button:focus-visible,.ig-consent a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:700px){
  .ig-row{gap:1.5rem}
  .ig-card{flex:1 1 100%}
  .ig-stage{max-height:70vh}
}
@media(prefers-reduced-motion:reduce){
  .ig-poster,.ig-card{transition:none}
  .ig-card:hover .ig-poster{transform:none}
}

/* A wall of 9:16 reels. The default mosaic assumes mixed shapes and square
   cells; a set that is entirely portrait needs narrower columns at the media's
   own ratio, or every clip paints as a billboard and seven of them is a scroll.
   Span modifiers are neutralised here - they exist to break up mixed media, and
   in a uniform set they only make one item shout. */
.gallery-mosaic--reels{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.25rem}
.gallery-mosaic--reels .gallery-open{aspect-ratio:9/16;height:auto}
.gallery-mosaic--reels .gallery-cell--wide,
.gallery-mosaic--reels .gallery-cell--tall,
.gallery-mosaic--reels .gallery-cell--feature{grid-column:auto;grid-row:auto}
.gallery-mosaic--reels figcaption{font-size:0.78rem}
@media(max-width:700px){
  .gallery-mosaic--reels{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
}

/* ============ SERVICE MENU (generated from content/pricing.json) ============
   A price list on a medical site has one job: be unambiguous. So the numbers are
   the largest thing in each card, the unit count sits right under the name where
   the eye lands next, and the qualifying footnote is present rather than hidden
   behind a tooltip - the client's packet carries those footnotes for regulatory
   reasons, not decorative ones. */
.menu-block{max-width:1100px;margin:0 auto}
.menu-head{text-align:center;margin-bottom:3rem}
.menu-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;color:var(--ivory);margin:0 0 0.9rem}
.menu-intro{color:var(--dim);font-size:1.02rem;line-height:1.8;max-width:60ch;margin:0 auto}
.menu-lede{color:var(--dim);line-height:1.85;max-width:62ch;margin:0 auto 2.5rem;text-align:center}
.menu-foot{margin-top:2rem;font-size:0.875rem;line-height:1.7;color:var(--faint);max-width:78ch}

/* --- package tiers --- */
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.tier{border:1px solid var(--line);border-radius:var(--radius);background:var(--charcoal);padding:1.75rem 1.35rem;text-align:center;display:flex;flex-direction:column;transition:.3s var(--ease)}
.tier:hover{border-color:var(--line-pink);transform:translateY(-3px)}
/* The featured tier is marked with a gold hairline, not a filled panel -
   section 2 rules out large metallic blocks. */
.tier--featured{border-color:rgba(185,149,89,0.55);box-shadow:0 0 34px rgba(185,149,89,0.10)}
.tier-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--ivory);line-height:1.2}
.tier-units{font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0.5rem 0 1rem}
.tier-blurb{color:var(--dim);font-size:0.88rem;line-height:1.65;margin:0 0 1.5rem;flex:1}
.tier-price{font-family:'Cormorant Garamond',serif;font-size:2.1rem;color:var(--ivory);line-height:1}
.tier-rate{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);margin-top:0.45rem}

/* --- drips --- */
.drips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.drip{padding:1.4rem 1.2rem}
.drip-head{flex-direction:column;align-items:flex-start;gap:0.25rem}
.drip-head h3{font-size:1.3rem}
.drip-price{font-size:1.5rem}
@media(max-width:1100px){.tiers,.drips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.tiers,.drips{grid-template-columns:repeat(2,minmax(0,1fr))}}
.drip{border:1px solid var(--line);border-radius:var(--radius);background:var(--charcoal);padding:1.75rem;transition:.3s var(--ease)}
.drip:hover{border-color:var(--line-pink);transform:translateY(-3px)}
.drip--featured{border-color:rgba(185,149,89,0.55);box-shadow:0 0 34px rgba(185,149,89,0.10)}
.drip-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:0.75rem}
.drip-head h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--ivory);margin:0;line-height:1.15}
.drip-price{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--pink-text);white-space:nowrap}
.drip-blurb{color:var(--dim);font-size:0.92rem;line-height:1.7;margin:0 0 1.1rem}
.drip-contains{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.4rem}
.drip-contains li{font-size:0.68rem;letter-spacing:0.06em;color:var(--faint);border:1px solid var(--line);border-radius:100px;padding:0.32rem 0.7rem}

/* --- tables --- */
.menu-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:3.5rem}
.menu-table h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--ivory);margin:0 0 0.3rem}
.menu-table-sub{font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0 0 1rem}
.menu-table--wide{max-width:720px;margin:3rem auto 0}
.menu-table table{width:100%;border-collapse:collapse}
.menu-table tr{border-bottom:1px solid var(--line)}
.menu-table th{text-align:left;font-weight:500;font-size:0.98rem;color:var(--ivory);padding:0.85rem 0.5rem 0.85rem 0}
.menu-table td{padding:0.85rem 0 0.85rem 0.5rem;vertical-align:baseline}
.menu-table td.u{color:var(--faint);font-size:0.8rem;line-height:1.5}
.menu-table td.p{text-align:right;color:var(--pink-text);font-family:'Cormorant Garamond',serif;font-size:1.2rem;white-space:nowrap}
.rx{color:var(--gold);text-decoration:none;cursor:help;font-size:0.8em;vertical-align:super}

/* --- ingredient glossary --- */
.glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:0}
.gloss{border-left:2px solid rgba(185,149,89,0.32);padding-left:1.1rem}
.gloss dt{font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:0.5rem}
.gloss dd{margin:0;color:var(--dim);font-size:0.9rem;line-height:1.75}

@media(max-width:700px){
  .tiers,.drips{grid-template-columns:1fr}
  .menu-tables{grid-template-columns:1fr;gap:2.5rem}
  .drip-head{flex-direction:column;gap:0.25rem}
  .menu-table td.p{font-size:1.05rem}
}

/* ============================================================================
   SERVICES MENU, INDIVIDUAL SERVICE PAGES, AND THE TRAILING-RULE FIX
   Appended 2026-09-03. Colours are tokens only; every pair below was measured
   against the ground it actually lands on with scripts/contrast.py before it
   was written. The panel ground is --noir, so --gold reads 6.51:1, --pink-text
   5.23:1 and --dim 8.68:1 on it.
   ========================================================================= */

/* ---- The trailing hairline under the last service placard ----
   .services-list draws a rule on top of itself and a rule under every row, so
   the last row's border-bottom hangs in space between the list and the next
   section and reads as a page break. The rule belongs BETWEEN rows. Same for
   the priced .menu lists, which have the identical construction. */
.services-list .service-row:last-child{border-bottom:0}
.menu > .menu-row:last-child{border-bottom:0}

/* ============ DESKTOP: the Services mega-panel ============ */
.nav-has-mega{position:static}
.nav-menu .mega-trigger{display:inline-flex;align-items:center;gap:0.35rem;position:relative}
/* The panel hangs off the bottom edge of .nav, but the menu item is centred in
   it, so measured at 1400px there is a 27px strip of bare header between the
   two. The pointer crosses that strip on its way down, elementFromPoint returns
   .nav, mouseleave fires on the <li> and the menu shuts in your face. This
   pseudo-element extends the item's hit box down through the strip - the
   trigger's own width only, so Gallery and Journal stay hoverable. */
.nav-menu .mega-trigger::after{content:"";position:absolute;left:0;right:0;top:100%;height:34px}
.mega-chev{width:12px;height:12px;flex-shrink:0;transition:transform .25s var(--ease)}
.nav-has-mega.open .mega-trigger .mega-chev{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--noir);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-pink);
  box-shadow:0 32px 60px -30px rgba(0,0,0,0.85);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
/* [hidden] is the no-JS state: the trigger is a real link to services.html, so
   with the panel never revealed the header still works exactly as before. */
.mega[hidden]{display:none}
.nav-has-mega.open .mega{opacity:1;transform:translateY(0);pointer-events:auto}

.mega-inner{
  max-width:1400px;margin:0 auto;padding:2.25rem 2rem 1.5rem;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 2rem;
}
.mega-col-head{
  display:block;font-family:'Montserrat',sans-serif;font-size:0.62rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);
  padding-bottom:0.7rem;margin-bottom:0.7rem;border-bottom:1px solid var(--line);
}
.mega-col-head:hover{color:var(--gold-bright)}
.mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mega-list a{
  display:block;padding:0.42rem 0;font-family:'Montserrat',sans-serif;
  font-size:0.82rem;font-weight:400;letter-spacing:0.01em;line-height:1.35;
  color:var(--dim);text-transform:none;transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.mega-list a:hover,.mega-list a:focus-visible,.mega-list a.active{color:var(--pink-text);padding-left:0.35rem}
.mega-list a.active{font-weight:600}

.mega-foot{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  border-top:1px solid var(--line);margin-top:0.5rem;padding-top:1.1rem;
}
.mega-all,.mega-book{
  display:inline-flex;align-items:center;gap:0.45rem;
  font-family:'Montserrat',sans-serif;font-size:0.7rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
}
.mega-all{color:var(--pink-text)}
.mega-all:hover{color:var(--pink-glow)}
.mega-book{margin-left:auto;background:var(--purple);color:var(--ivory);
  border:1px solid var(--purple);border-radius:100px;padding:0.6rem 1.2rem}
.mega-book:hover{background:var(--pink-fill);border-color:var(--pink-fill)}
.mega-all svg,.mega-book svg{width:12px;height:12px}

@media(min-width:1025px) and (max-width:1240px){
  .mega-inner{padding:1.75rem 1.5rem 1.25rem;gap:1.25rem 1.5rem}
  .mega-list a{font-size:0.78rem}
}

/* ============ MOBILE / TABLET: the same tree as an accordion ============
   Twenty-two links at the old 2rem display size ran three screens deep. Groups
   are collapsed by default so the whole menu is on screen at once on a small
   phone, and each opens in place. Rows stay >=44px for touch. */
@media(max-width:1024px){
  .mega{display:none !important}
}
.nav-mobile{gap:0}
.navm-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-bottom:1rem;
}
.nav-mobile .navm-link{
  display:flex;align-items:center;min-height:48px;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;
  color:var(--ivory);border-bottom:1px solid var(--line);padding:0.35rem 0;
}
.nav-mobile .navm-link:hover{color:var(--pink-text)}

.navm-groups{padding:0.35rem 0 0.6rem}
.navm-group{border-bottom:1px solid var(--line)}
.navm-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  min-height:48px;padding:0.5rem 0;margin:0;background:none;border:0;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:0.68rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);text-align:left;
}
.navm-head:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.navm-head .mega-chev{width:14px;height:14px;color:var(--dim)}
.navm-group.open .navm-head{color:var(--gold-bright)}
.navm-group.open .navm-head .mega-chev{transform:rotate(180deg)}
.navm-list[hidden]{display:none}
.navm-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;
  padding:0 0 0.7rem;
}
.nav-mobile .navm-list a{
  display:flex;align-items:center;min-height:44px;
  font-family:'Montserrat',sans-serif;font-style:normal;font-size:0.82rem;
  line-height:1.3;color:var(--dim);border:0;padding:0.25rem 0;
}
.nav-mobile .navm-list a:hover,.nav-mobile .navm-list a.active{color:var(--pink-text)}

.nav-mobile .navm-cta{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:0.5rem;
  min-height:52px;margin-top:0.75rem;border-radius:100px;
  background:var(--purple);border:1px solid var(--purple);color:var(--ivory);
  font-family:'Montserrat',sans-serif;font-size:0.78rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
}
.nav-mobile .navm-cta:hover{background:var(--pink-fill);border-color:var(--pink-fill)}
.nav-mobile .navm-cta svg{width:13px;height:13px}

@media(max-width:1024px){
  .nav-toggle{justify-self:end}
}
/* Two columns are kept all the way down. Measured on a 390x844 phone: one
   column made an opened group 778px of content in a 647px well, so the menu
   scrolled; two columns bring it to ~630px and the whole thing is on screen
   with a group open, which is the point of the accordion. Below 340px the
   longest label has nowhere to go and one column is honest. */
@media(max-width:400px){
  .navm-list{gap:0 0.75rem}
  .nav-mobile .navm-list a{font-size:0.78rem}
  .nav-mobile .navm-link{font-size:1.3rem;min-height:46px}
}
@media(max-width:339px){
  .navm-list{grid-template-columns:1fr}
}
/* Landscape phone: the panel is only ~360px tall, so the display face has to
   give way or nothing but Home is reachable. */
@media(max-height:520px) and (orientation:landscape){
  .nav-mobile{padding-top:max(4.25rem, calc(4.25rem + env(safe-area-inset-top)))}
  .nav-mobile .navm-link{font-size:1.1rem;min-height:44px}
  .navm-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============ Individual service pages ============ */
/* The generated menus use <h3> where the hand-written ones used <h4>; both are
   the same row title and must look identical. */
.menu-body h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-style:italic;
  color:var(--ivory);margin-bottom:0.35rem;font-weight:500}
@media(max-width:768px){.menu-body h3{font-size:1.2rem}}

/* ============ Homepage catalogue: the whole placard is the link ============
   The cards used to carry a small text link, so most of a large tap target did
   nothing. The <a> is stretched over the card; the visible link text stays as
   the affordance and the accessible name. */
.service-card{position:relative}
.service-card .card-link::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.service-card:focus-within{border-color:var(--line-pink);outline:2px solid var(--gold);outline-offset:3px}
.service-card .card-link:focus-visible{outline:none}
.service-card:hover .card-link{color:var(--pink-glow)}

/* ============ Gallery: the reel wall ============
   Seven 9:16 clips in an auto-fill grid painted six across at desktop width and
   dropped a single orphan onto a second row. Four across balances 4+3, and the
   flex wrap centres whatever the last row happens to hold instead of leaving a
   hole on the right. */
.gallery-mosaic--reels{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:1.25rem;grid-template-columns:none;
}
.gallery-mosaic--reels .gallery-cell{flex:0 1 calc((100% - 3 * 1.25rem) / 4);min-width:0}
@media(max-width:1100px){
  .gallery-mosaic--reels .gallery-cell{flex-basis:calc((100% - 2 * 1.25rem) / 3)}
}
@media(max-width:700px){
  .gallery-mosaic--reels{gap:0.85rem}
  .gallery-mosaic--reels .gallery-cell{flex-basis:calc((100% - 0.85rem) / 2)}
}

/* ============ Footer map — a rounded rectangle under the brand block ============
   Click-to-load, for the same reason the Instagram cards are (see CLAUDE.md):
   a Google Maps iframe contacts Google on load and hands over the visitor's IP
   and the URL of the page they are on. This footer is on every page including
   intake.html, which collects PHI — auto-embedding would tell Google someone is
   filling in a medical intake form before they agreed to anything. The facade
   is ours; Google is contacted only when the visitor asks for the map.

   Colours are the on-dark set (--d-*), not the page set. The footer repaints
   itself against --d-ground, and a --dim here would be calibrated against the
   wrong ground. */
.footer-map{
  position:relative;width:100%;max-width:340px;aspect-ratio:16/10;
  margin:1.5rem 0 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(185,149,89,0.28);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(185,149,89,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #1B1917 0%, var(--d-ground) 100%);
}
/* The faint street grid: two repeating-linear-gradients, so the placeholder
   reads as a map without shipping an image or asking Google for a static tile. */
.footer-map::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(242,233,223,0.07) 46px 47px),
    repeating-linear-gradient(0deg,  transparent 0 38px, rgba(242,233,223,0.07) 38px 39px),
    linear-gradient(28deg, transparent 47%, rgba(185,149,89,0.16) 47% 49%, transparent 49%);
}
.footer-map-load{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.3rem;
  background:none;border:0;cursor:pointer;padding:1rem;
  font-family:'Montserrat',sans-serif;color:var(--d-text);
  transition:background .25s var(--ease);
}
.footer-map-load:hover{background:rgba(169,95,99,0.10)}
.footer-map-load:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:var(--radius)}
.footer-map-pin{
  position:relative;                 /* the dot below anchors to the pin, not the
                                        map box - without this it positions
                                        against .footer-map and drifts */
  width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--purple);border:1px solid var(--gold);margin-bottom:0.55rem;
  box-shadow:0 0 18px rgba(169,95,99,0.35);
}
.footer-map-pin::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
}
.footer-map-label{font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase}
/* Antique Gold is 6.51:1 on this ground; the ivory --d-dim above it is 8.68:1. */
.footer-map-note{font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold)}
.footer-map-out{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0.5rem 0.75rem;text-align:center;
  font-family:'Montserrat',sans-serif;font-size:0.6rem;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--d-text);background:rgba(17,16,15,0.82);
  border-top:1px solid rgba(185,149,89,0.22);
  min-height:34px;display:flex;align-items:center;justify-content:center;
}
.footer-map-out:hover{color:var(--gold-bright);background:rgba(17,16,15,0.92)}
/* Once the iframe is in, the facade is gone and the frame fills the rectangle.
   The outbound link stays: it is the one route that needs no third party. */
.footer-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.footer-map.is-loaded .footer-map-load{display:none}
.footer-map.is-loaded::before{display:none}

/* On the seven pages whose footer has no brand column the map sits under the
   address in .fb-left, which is a centred column below 900px. */
.fb-left .footer-map{margin-top:1.25rem}
@media(max-width:900px){
  .fb-left .footer-map{margin-left:auto;margin-right:auto}
}
@media(max-width:600px){
  .footer-map{max-width:100%}
}

/* ---- Footer link columns are a stacked list, not inline controls ----
   The touch-target passes above turn a shared list of selectors into
   `display:inline-flex` to give them a 44px box. That is right for a breadcrumb
   link, a card CTA or a button sitting in a row, and wrong for .footer-col a,
   which the base rule sets to display:block precisely so the links stack. Below
   767px the inline-flex won and the four service links ran together on one line
   as "IV TherapyAestheticsKetamineTelehealth" on every phone. display:flex keeps
   the 44px target and puts them back one per line. */
@media (max-width:767px), (max-height:520px) and (orientation:landscape){
  .footer-col a{display:flex}
}

/* ---- Footer columns align on the type, not on the box ----
   The grid was stretching every column, so .footer-brand-name and .footer-col h4
   shared a box top (measured: both at y=5803) while the visible wordmark sat
   ~15px lower — Cormorant at 1.6rem carries a 41px line box and the 0.7rem
   Montserrat heading only 12px, so equal box tops read as misaligned type.
   Aligning the grid on the first baseline puts SERVICES / CLINIC / LEGAL on the
   same line as LUMAE and keeps doing so if either face or size changes, which a
   hand-tuned margin would not. Columns size to their content instead of
   stretching, which is what the top-aligned layout wants anyway. */
.footer-top{align-items:baseline}

/* ============================================================================
   PLACARD MOTION — one hover behaviour for every card-like surface
   ============================================================================
   Before this each card type invented its own: .service-card lifted 4px,
   .pillar changed border colour only, .tier and .drip did nothing at all, and
   the gallery cells only scaled their poster. Same gesture everywhere now —
   lift, a warmer border, a raspberry bloom under the card, and a gold hairline
   that wipes across the top edge.

   The hairline is a ::before on a 1px strip rather than an animated
   border-image, so it composites on the GPU and never triggers layout.

   Everything here is opt-out under prefers-reduced-motion at the foot of the
   block: transform and the sweep are removed, the colour change is kept. A
   vestibular trigger is not a style preference, and a card that gives no
   feedback at all is worse than one that only changes colour. */

.service-card,
.pillar,
.tier,
.drip,
.gallery-cell,
.split-visual,
.member-card{
  position:relative;
  transition:transform .38s var(--ease),
             border-color .38s var(--ease),
             box-shadow .38s var(--ease),
             background-color .38s var(--ease);
  will-change:transform;
}

/* The gold wipe. Sits on the top edge, clipped to the card's radius. */
.service-card::before,
.pillar::before,
.tier::before,
.drip::before,
.member-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(185,149,89,0.0) 15%,
    var(--gold-bright) 50%,
    rgba(185,149,89,0.0) 85%,
    transparent 100%);
  transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:transform .55s var(--ease), opacity .3s var(--ease);
  pointer-events:none;border-radius:var(--radius) var(--radius) 0 0;
}
.service-card:hover::before,
.service-card:focus-within::before,
.pillar:hover::before,
.tier:hover::before,
.drip:hover::before,
.member-card:hover::before,
.member-card:focus-within::before{transform:scaleX(1);opacity:1}

.service-card:hover,
.service-card:focus-within,
.pillar:hover,
.tier:hover,
.drip:hover,
.member-card:hover,
.member-card:focus-within{
  transform:translateY(-6px);
  border-color:var(--line-pink);
  box-shadow:0 28px 60px -30px rgba(0,0,0,0.85),
             0 0 40px -12px rgba(169,95,99,0.35);
}

/* The icon and the CTA move with the card rather than sitting still on it. */
.service-card .service-card-icon,
.pillar .pillar-num{transition:transform .38s var(--ease),color .38s var(--ease)}
.service-card:hover .service-card-icon,
.pillar:hover .pillar-num{transform:translateY(-2px)}
.service-card .card-link,
.pillar .pillar-link,
.member-card .btn{transition:color .3s var(--ease),gap .3s var(--ease)}
.service-card .card-link svg,
.pillar .pillar-link svg{transition:transform .3s var(--ease)}
.service-card:hover .card-link svg,
.pillar:hover .pillar-link svg{transform:translateX(4px)}

/* Priced cards read as a menu, so they lift less and warm instead. */
.tier:hover,.drip:hover{transform:translateY(-4px);background:rgba(169,95,99,0.05)}
.tier--featured:hover,.drip--featured:hover{transform:translateY(-6px)}

/* Gallery: the poster scales inside its frame, the frame itself only lifts, so
   nothing bleeds past the rounded corner. */
.gallery-cell .gallery-open{overflow:hidden;border-radius:var(--radius)}
.gallery-cell img,.gallery-cell video{transition:transform .6s var(--ease)}
.gallery-cell:hover{transform:translateY(-4px)}
.gallery-cell:hover img,.gallery-cell:hover video{transform:scale(1.045)}
.gallery-cell:hover .gallery-play{transform:translate(-50%,-50%) scale(1.08)}
.gallery-play{transition:transform .38s var(--ease),background .38s var(--ease)}

/* The interactive placards carry a widget, so they must not move under the
   pointer while someone is using it — the frame glows, the contents do not. */
.split-visual:hover{
  border-color:var(--pink);
  box-shadow:0 0 60px rgba(169,95,99,0.34),
             0 0 0 1px rgba(169,95,99,0.14) inset,
             0 34px 90px -32px rgba(0,0,0,0.95);
}

/* Rows already tint on hover; give the arrow the same travel as the cards. */
.service-row .service-arrow{transition:transform .3s var(--ease),background .3s var(--ease),
  color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}

/* Touch devices have no hover state to reward, and :hover sticks after a tap on
   many of them — leaving a card lifted until you tap elsewhere. */
@media (hover:none){
  .service-card:hover,.pillar:hover,.tier:hover,.drip:hover,
  .gallery-cell:hover,.member-card:hover{transform:none;box-shadow:none}
  .service-card::before,.pillar::before,.tier::before,
  .drip::before,.member-card::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .service-card,.pillar,.tier,.drip,.gallery-cell,.split-visual,.member-card,
  .service-card .service-card-icon,.pillar .pillar-num,
  .gallery-cell img,.gallery-cell video,.gallery-play,
  .service-card .card-link svg,.pillar .pillar-link svg{
    transition:border-color .2s linear, background-color .2s linear, color .2s linear;
  }
  .service-card:hover,.service-card:focus-within,.pillar:hover,.tier:hover,.drip:hover,
  .gallery-cell:hover,.member-card:hover,.member-card:focus-within{transform:none}
  .gallery-cell:hover img,.gallery-cell:hover video{transform:none}
  .service-card:hover .card-link svg,.pillar:hover .pillar-link svg{transform:none}
  .service-card::before,.pillar::before,.tier::before,
  .drip::before,.member-card::before{display:none}
}

/* ============ MEMBERSHIPS ============
   Tiers side by side with the middle one featured, following the layout the
   client pointed at. Card grounds and type reuse the .pillar / .tier system
   so a membership card and a Botox package card read as the same object; the
   only new thing is the price block and the benefit list. */
.member-credit-note{
  max-width:62ch;margin:0 0 2.5rem;color:var(--dim);
  font-size:1rem;line-height:1.8;
  border-left:2px solid var(--line-pink);padding-left:1.25rem;
}
.member-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  align-items:stretch;max-width:1180px;margin:0 auto;
}
.member-card{
  display:flex;flex-direction:column;
  padding:1.75rem 1.5rem;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--charcoal) 0%,var(--noir) 100%);
  border:1px solid var(--line);overflow:hidden;
}
.member-card--featured{
  border-color:var(--line-pink);
  background:linear-gradient(180deg,#241519 0%,var(--noir) 100%);
  box-shadow:0 0 50px -20px rgba(169,95,99,0.35);
}
.member-badge{
  align-self:flex-start;margin-bottom:0.75rem;
  font-family:'Montserrat',sans-serif;font-size:0.56rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ivory);
  background:var(--purple);border:1px solid var(--purple-glow);
  border-radius:100px;padding:0.4rem 0.9rem;
}
.member-name{
  font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-style:italic;
  font-weight:500;color:var(--ivory);margin:0 0 0.5rem;line-height:1.1;
}
.member-price{display:flex;align-items:baseline;gap:0.5rem;margin-bottom:0.6rem}
.member-amount{
  font-family:'Cormorant Garamond',serif;font-size:2.3rem;line-height:1;
  color:var(--pink-text);text-shadow:0 0 18px rgba(169,95,99,0.28);
}
.member-cadence{
  font-family:'Montserrat',sans-serif;font-size:0.62rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--faint);
}
.member-tagline{
  color:var(--dim);font-size:0.84rem;line-height:1.6;margin:0 0 1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line);
}
.member-benefits{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;
  flex-direction:column;gap:0.45rem;flex:1 1 auto}
.member-benefits li{
  position:relative;padding-left:1.35rem;color:var(--dim);
  font-size:0.82rem;line-height:1.5;
}
/* The tick is a rotated L rather than a glyph, so it never falls back to a
   font that does not carry it. */
.member-benefits li::before{
  content:"";position:absolute;left:0;top:0.42em;
  width:6px;height:10px;border:solid var(--gold);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
/* Phone floor. 0.84rem and 0.82rem land at 13.4px and 13.1px, under the 14px
   the audit holds prose to, and these cards are body copy rather than
   captions. This has to sit AFTER both base rules: a media query adds no
   specificity, so the same block placed above `.member-benefits li` loses to
   it at every width. 480px covers the 428px large phone, not just the 375px one. */
@media(max-width:480px){.member-tagline,.member-benefits li{font-size:0.875rem}}
.member-card .btn{align-self:flex-start;margin-top:auto}

@media(max-width:1000px){
  .member-grid{gap:0.75rem}
  .member-card{padding:1.5rem 1.2rem}
  .member-amount{font-size:2rem}
}
@media(max-width:700px){
  .member-grid{grid-template-columns:1fr;gap:1rem;max-width:560px}
}
@media(max-width:600px){
  .member-credit-note{font-size:0.94rem;padding-left:1rem}
  .member-card .btn{align-self:stretch;justify-content:center}
}

/* ---- Three contrast failures and one touch target, from the rendered audit ----
   All four were invisible to a static read, and the first was invisible to the
   simpler contrast sweep too: .founding-spots sits on a GRADIENT band, so its
   ancestor's computed background-color is transparent and a sweep that walks
   only background-color credits it with the page ground instead of the lighter
   raspberry it actually sits on. Measured on the real painted pixels it was
   3.38:1. Darkening the pill's own ground is what fixes it - the token stays. */
.founding-spots{
  background:rgba(17,16,15,0.62);
  color:var(--gold-bright);
  border-color:rgba(185,149,89,0.5);
}
/* 4.40:1, just under. Antique Gold is right for these labels; the brighter step
   of the same hue clears AA without changing the colour they read as. */
.credential-title,
.credentials dt,
.credential-card dt{color:var(--gold-bright)}

/* The map's outbound bar was 34px tall on a small phone. It is a standalone
   control, so WCAG 2.5.8 wants 44 and the inline-prose exemption does not
   apply to it. */
.footer-map-out{min-height:44px}