/* ═══════════════════════════════════════════════════════════════
   ReMEDI, MD — Brand Identity System 2026
   A Cosmetic Division of Dermatology Associates, PC

   Palette and typography are taken from ReMEDI_MD_Brand_Identity_2026.pdf,
   NOT from the individual 360° playbooks — each of those drifted to its
   own colours (Laser Genesis navy #0D1B2A, ToLips petal pinks). The 2026
   identity is the current system and wins.

   Type: Cormorant Garamond 300/400 display · Jost 300/400/500 body + UI
   Rule: never set the tagline or body copy in Cormorant.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/jost-latin-200-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/jost-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jost-latin-500-normal.woff2') format('woff2')}

:root{
  /* Official 2026 palette */
  --cream:#F6F1E7;        /* web background  */
  --tan:#D7C7B8;          /* brand bg, logo bg */
  --navy:#1C3240;         /* logo, headings  */
  --rose:#C48E8E;         /* female · ToLips */
  --blue:#7C97AC;         /* male · Trichee  */
  --black:#1A1A1A;        /* device campaigns */
  --gold:#C9A227;
  --bronze:#9C6B30;
  --champagne:#E9D8B4;

  /* Text-safe variants. The brand accents are fills and rules only —
     rose is 2.45:1 on cream, blue 2.71, gold 2.15. These pass AA. */
  --rose-ink:#8E5A5A;
  --blue-ink:#4F6B7E;
  --gold-ink:#7E6416;

  --ink:#2B3A45;          /* body 10.4:1 */
  --ink-soft:#3A4A55;
  --ink-mute:#5A6B75;     /* 4.92:1 */
  --white:#FFFDF9;
  --rule:rgba(28,50,64,.14);
  --rule-soft:rgba(28,50,64,.07);

  --shadow-sm:0 1px 2px rgba(28,50,64,.04),0 4px 14px rgba(28,50,64,.05);
  --shadow-md:0 2px 8px rgba(28,50,64,.06),0 16px 44px rgba(28,50,64,.09);
  --shadow-lg:0 4px 14px rgba(28,50,64,.08),0 30px 76px rgba(28,50,64,.14);
  --maxw:1200px;
  --gut:clamp(1.25rem,4vw,3.25rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}


/* ═══ SERVICE THEMES ═══════════════════════════════════════════
   Each treatment gets its own world — page ground, surfaces, heading
   colour and accent — while structure, type and the logo stay fixed.
   That is what lets ToLips feel like ToLips and Contour Sculpt feel
   like Contour Sculpt without either stopping being ReMEDI, MD.

   Every theme redefines the same eight tokens. Nothing else in the
   stylesheet knows a theme exists.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --accent:var(--gold); --accent-ink:var(--gold-ink);
  --accent-tint:#EFE8DC; --accent-on:#FFFFFF;
  --ground:var(--cream); --surface:var(--white); --panel:var(--tan);
  --heading:var(--navy);
}

/* ToLips · the Petal palette from the ToLips playbook. Its own world:
   petal-white ground, blush panels, deep tulip headings. */
[data-theme=tolips]{
  --ground:#FFFBF7; --surface:#FFFFFF; --panel:#FAD0D3;
  --heading:#7A2230;
  --ink:#3F2229; --ink-soft:#6B4A51; --ink-mute:#5A3F45;
  --accent:#C48E8E; --accent-ink:#9B3341; --accent-tint:#FDE8E9;
  --rule:rgba(122,34,48,.15); --rule-soft:rgba(122,34,48,.08);
}

/* Device & body · Contour Sculpt, Morpheus8, PEARL, Physiq. The brand
   assigns Black to device campaigns and names Morpheus8 and BodyTite. */
[data-theme=device]{
  --ground:#F4EFE8; --surface:#FFFDFA; --panel:#DED4C7;
  --heading:#1A1A1A;
  --ink:#2A2A2A; --ink-soft:#3D3D3D; --ink-mute:#585552;
  --accent:#1A1A1A; --accent-ink:#7E5522; --accent-tint:#E7DFD4;
  --rule:rgba(26,26,26,.15); --rule-soft:rgba(26,26,26,.07);
}

/* Laser Genesis + PDO/IPL · the playbook teal, darkened until legible. */
/* Contour Sculpt — ContourSculpt 360° playbook, "Full website mockup".
   Near-black hero with a violet accent, lavender section grounds. */
[data-theme=contour]{
  --ground:#F4F1FB; --surface:#FFFFFF; --panel:#E7DEF7;
  --heading:#1E1030;
  --ink:#241738; --ink-soft:#453758; --ink-mute:#584A6B;
  --accent:#7C4DBE; --accent-ink:#5B2E9D; --accent-tint:#EDE5FA;
  --rule:rgba(30,16,48,.16); --rule-soft:rgba(30,16,48,.08);
}
[data-theme=laser]{
  --ground:#F4F7F7; --surface:#FFFFFF; --panel:#CFE0E4;
  --heading:#22454F;
  --ink:#25383D; --ink-soft:#344A50; --ink-mute:#4C6167;
  --accent:#7FB3C0; --accent-ink:#356170; --accent-tint:#E4F0F2;
  --rule:rgba(34,69,79,.15); --rule-soft:rgba(34,69,79,.07);
}

/* Trichee · brand Dusty Blue, the male line. */
[data-theme=trichee]{
  --ground:#F3F5F7; --surface:#FFFFFF; --panel:#CBD8E1;
  --heading:#22384A;
  --ink:#26353F; --ink-soft:#374854; --ink-mute:#4E606C;
  --accent:#7C97AC; --accent-ink:#415C6E; --accent-tint:#E6EDF2;
  --rule:rgba(34,56,74,.15); --rule-soft:rgba(34,56,74,.07);
}

/* Regenerative · the gold metallic, warm and clinical. */
[data-theme=regen]{
  --ground:#F8F3E8; --surface:#FFFDF7; --panel:#E4D6B4;
  --heading:#3B3115;
  --ink:#332B14; --ink-soft:#4A3F22; --ink-mute:#5F5330;
  --accent:#C9A227; --accent-ink:#6E5316; --accent-tint:#F2E9D2;
  --rule:rgba(59,49,21,.16); --rule-soft:rgba(59,49,21,.08);
}

/* ═══ CROSS-PAGE COLOUR TRANSITION ════════════════════════════
   Moving from the cream homepage into the ToLips blush should feel
   like a room changing light, not a flashbulb. Two mechanisms:

   1. View Transitions cross-fade the whole document between
      navigations where the browser supports it.
   2. The ground and panel colours also animate on their own, so the
      shift reads as a wash rather than a cut even without it.

   Both are disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

@view-transition{ navigation: auto; }

::view-transition-old(root){
  animation: rmFadeOut .34s cubic-bezier(.4,0,.6,1) both;
}
::view-transition-new(root){
  animation: rmFadeIn .46s cubic-bezier(.2,.6,.3,1) both;
}
@keyframes rmFadeOut{ to{ opacity:0 } }
@keyframes rmFadeIn{ from{ opacity:0; transform:translateY(6px) } }

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation: none; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}

*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:'Jost',system-ui,-apple-system,sans-serif;font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.7;color:var(--ink);
  background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1)}
img,svg{display:block;max-width:100%}a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,.display{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  line-height:1.08;letter-spacing:-.005em;color:var(--heading);text-wrap:balance}
h1{font-size:clamp(2.6rem,1.7rem + 4.2vw,4.9rem)}
h2{font-size:clamp(2rem,1.5rem + 2.3vw,3.25rem)}
h3{font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem)}
em,.em{font-style:italic}
.eyebrow{font-family:'Jost',sans-serif;font-weight:200;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.32em;color:var(--ink-mute);
  display:block;margin-bottom:1.1rem}
.lede{font-size:clamp(1.075rem,1rem + .4vw,1.3rem);line-height:1.62;color:var(--ink-soft);text-wrap:pretty}
.fine{font-size:.8125rem;line-height:1.6;color:var(--ink-mute)}
.rule{width:54px;height:1px;border:0;background:var(--accent);margin:1.5rem 0}
.rule--c{margin-inline:auto}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}
section{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative}
.head{max-width:740px;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.head--c{margin-inline:auto;text-align:center}

/* ── buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:1rem 2rem;min-height:54px;background:var(--heading);color:var(--surface);
  border:1px solid var(--heading);border-radius:2px;font-weight:400;font-size:.9375rem;
  letter-spacing:.02em;text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(28,50,64,.24);background:#142633}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn--ghost{background:transparent;color:var(--heading);border-color:var(--rule)}
.btn--ghost:hover{background:var(--accent-tint);color:var(--heading);box-shadow:none}
.btn--sm{padding:.7rem 1.35rem;min-height:44px;font-size:.8125rem}
.btn--wide{width:100%}
.btn__a{transition:transform .25s var(--ease)}.btn:hover .btn__a{transform:translateX(3px)}
.cta{display:flex;flex-wrap:wrap;gap:.875rem;align-items:center}.cta--c{justify-content:center}

/* ── nav ──────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.is-stuck{border-bottom-color:var(--rule-soft);box-shadow:0 1px 22px rgba(28,50,64,.06)}
.nav__in{display:flex;align-items:center;gap:1.5rem;min-height:78px}
.nav__logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.nav__links{display:flex;gap:1.9rem;list-style:none;padding:0}
.nav__links a{text-decoration:none;font-size:.875rem;color:var(--ink-soft);
  padding-block:.4rem;position:relative;transition:color .2s}
.nav__links a::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover{color:var(--heading)}.nav__links a:hover::after{transform:scaleX(1)}
.nav__links a[aria-current=page]{color:var(--heading)}
.nav__links a[aria-current=page]::after{transform:scaleX(1)}
.nav__tel{font-size:.875rem;text-decoration:none;color:var(--ink-soft);white-space:nowrap}
@media(max-width:960px){.nav__links li:not(.keep){display:none}.nav__links{gap:1.1rem}.nav__tel{display:none}.nav__in{min-height:66px;gap:1rem}}
/* Below ~560px the lockup, the last nav link and the button together are
   wider than the viewport, which gave the whole page a horizontal scroll
   on a small phone. The tagline and the last link go; the mark, the
   wordmark and the booking button stay, which is the part that matters. */
@media(max-width:560px){
  .nav__in{gap:.6rem}
  .nav__logo{gap:.5rem}
  .wordtag{display:none}
  .nav__links{display:none}
  .wordmark{font-size:1.16rem}
  .mark{width:38px}
  .nav .btn--sm{padding:.6rem .85rem;font-size:.78rem}
}
/* At 360px — an iPhone SE, and still a common width — even the shortened
   button runs past the edge. The nav keeps the lockup and drops to a
   phone icon; the booking CTA is already fixed to the bottom of the
   screen on mobile, so nothing is lost. */
@media(max-width:430px){
  /* Nothing but the lockup fits. Both calls to action are already in the
     fixed bar at the bottom of the screen on mobile, so the nav gives
     them up rather than pushing the page sideways. */
  .nav .btn--sm{display:none}
  .nav__tel{display:none}
}
/* Buttons must never be wider than the column they sit in. On a 360px
   screen a two-word ghost button was enough to give the whole document a
   horizontal scrollbar. */
.btn{max-width:100%}
@media(max-width:430px){
  .cta{width:100%}
  .cta .btn{flex:1 1 100%}
}

/* ── logo lockup ──────────────────────────────────────────── */
.mark{width:46px;height:34px;flex:none}
.wordmark{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.32rem;
  letter-spacing:.06em;color:var(--heading);line-height:1;white-space:nowrap}
.wordtag{display:block;font-family:'Jost',sans-serif;font-weight:200;font-size:.45rem;
  letter-spacing:.3em;color:var(--ink-mute);margin-top:.3rem;white-space:nowrap}

/* ── hero ─────────────────────────────────────────────────── */
.hero{background:linear-gradient(172deg,var(--panel) 0%,var(--accent-tint) 46%,var(--ground) 100%);
  transition:background .6s cubic-bezier(.4,0,.2,1);
  padding-block:clamp(3.5rem,8vw,7.5rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero--center{text-align:center}
.hero--center .head{margin-inline:auto}
.hero__sub{max-width:46ch;margin-block:1.5rem 2.25rem}
@media(max-width:940px){.hero__grid{grid-template-columns:1fr}}
/* Grid children default to min-width:auto, so a long word or a nested
   grid can push a track wider than its share and take the page with it.
   This is what made every service hero overflow on a 320px screen. */
.hero__grid>*,.grid>*,.stats>*{min-width:0}
.hero__grid,.grid,.stats{min-width:0}

/* ── stat row ─────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.stat{background:var(--ground);padding:1.6rem 1.25rem;text-align:center}
.stat__n{font-family:'Cormorant Garamond',serif;font-size:2.4rem;line-height:1;color:var(--heading)}
.stat__l{font-size:.8125rem;color:var(--ink-mute);margin-top:.5rem;line-height:1.45}

/* ── trust bar ────────────────────────────────────────────── */
.trust{background:var(--heading);color:var(--panel);padding-block:1.1rem}
.trust__in{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;justify-content:center;
  font-size:.8125rem;letter-spacing:.06em}
.trust__in span{display:flex;align-items:center;gap:.5rem}
.trust__in span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* ── cards ────────────────────────────────────────────────── */
.grid{display:grid;gap:1.125rem}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.grid--2{grid-template-columns:1fr 1fr}
@media(max-width:760px){.grid--2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--rule-soft);border-radius:3px;
  padding:2rem 1.85rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card h3{margin-bottom:.6rem}
.card p{font-size:.9375rem;line-height:1.65;color:var(--ink-soft)}
.card__n{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--accent-ink);
  display:block;margin-bottom:.75rem}
.list{list-style:none;padding:0;margin:1rem 0 0}
.list li{font-size:.875rem;line-height:1.5;color:var(--ink-soft);padding-left:1.25rem;
  position:relative;margin-bottom:.45rem}
.list li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}

/* ── lanes / services ─────────────────────────────────────── */
.lane{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule-soft)}
.lane:first-of-type{border-top:0}
.lane__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;margin-bottom:1.75rem}
.lane__role{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase}
.lane--navy .lane__role{color:var(--heading)}
.lane--blue .lane__role{color:var(--blue-ink)}
.lane--rose .lane__role{color:var(--rose-ink)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;
  background:var(--rule-soft);border:1px solid var(--rule-soft)}
.svc{background:var(--ground);padding:1.35rem 1.4rem;text-decoration:none;display:block;
  transition:background .2s}
.svc:hover{background:var(--surface)}
.svc__n{font-family:'Cormorant Garamond',serif;font-size:1.22rem;color:var(--heading);
  display:flex;align-items:center;gap:.5rem}
.svc__d{font-size:.8438rem;color:var(--ink-mute);margin-top:.35rem;line-height:1.5}
.svc__go{font-size:.75rem;color:var(--accent-ink);letter-spacing:.04em}

/* ── testimonials ─────────────────────────────────────────── */
/* Tan is darker than cream, so the muted tone has to darken with it —
   --ink-mute is 3.36:1 on tan and fails AA. */
/* Panels are darker than the page ground, so the muted tone has to
   darken with them or the eyebrow and the caption fail AA. Every theme
   inherits this automatically. */
.quotes{background:var(--panel);--ink-mute:var(--ink-soft)}
.quote{background:var(--ground);border-radius:3px;padding:1.9rem 1.75rem;
  display:flex;flex-direction:column}
.quote__stars{color:var(--accent);letter-spacing:.16em;font-size:.8rem;margin-bottom:.9rem}
.quote p{font-family:'Cormorant Garamond',serif;font-size:1.16rem;line-height:1.52;
  color:var(--heading);font-style:italic;margin-bottom:1.15rem;flex:1}
.quote__by{display:flex;align-items:center;gap:.7rem}
.quote__av{width:36px;height:36px;border-radius:50%;background:var(--heading);color:var(--panel);
  display:grid;place-items:center;font-size:.75rem;letter-spacing:.04em;flex:none}
.quote__n{font-size:.8438rem;color:var(--heading)}
.quote__m{font-size:.7188rem;color:var(--ink-mute);margin-top:.1rem}

/* ── pricing ──────────────────────────────────────────────── */
.price{background:var(--surface);border:1px solid var(--rule-soft);border-radius:3px;
  padding:2.1rem 1.9rem;display:flex;flex-direction:column;position:relative}
.price--best{border-color:var(--accent)}
.price__tag{position:absolute;top:-11px;left:1.9rem;background:var(--accent-ink);color:#fff;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;padding:.3rem .9rem;font-weight:500}
.price__k{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute)}
.price__n{font-size:1.6rem;margin:.4rem 0 .9rem}
.price__amt{font-family:'Cormorant Garamond',serif;font-size:2.5rem;line-height:1;color:var(--heading)}
.price__sub{font-size:.8125rem;color:var(--ink-mute);margin-top:.35rem}
.price .btn{margin-top:auto}
.callout{margin-top:2rem;padding:1.7rem;background:var(--surface);
  border:1px solid var(--accent);border-radius:3px;text-align:center}

.portrait{aspect-ratio:4/5;width:100%;object-fit:cover;border-radius:3px;box-shadow:var(--shadow-md)}
.portrait--empty{background:linear-gradient(160deg,var(--tan),#C9B6A5);display:grid;place-items:center;
  text-align:center;color:#3F5059;font-size:.8125rem;padding:2rem;line-height:1.6}

/* ── locations ────────────────────────────────────────────── */
.loc{background:var(--surface);border:1px solid var(--rule-soft);border-radius:3px;padding:1.9rem}
.loc h3{margin-bottom:.35rem}
.loc__c{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}

/* ── form ─────────────────────────────────────────────────── */
.formcard{background:var(--surface);border:1px solid var(--rule-soft);border-radius:3px;
  padding:clamp(1.75rem,3vw,2.4rem);box-shadow:var(--shadow-lg)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-mute);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;padding:.9rem 1rem;min-height:52px;
  background:var(--ground);border:1px solid var(--rule);border-radius:2px;
  font-size:1rem;font-weight:300;transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{min-height:94px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C3240' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:var(--surface);
  border-color:var(--heading);box-shadow:0 0 0 3px var(--accent-tint)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);opacity:.6}
.field--err input,.field--err select{border-color:#B3261E}
.field__e{font-size:.75rem;color:#B3261E;margin-top:.35rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.priv{display:flex;gap:.55rem;font-size:.75rem;line-height:1.5;color:var(--ink-mute);margin-top:1.1rem}
.steps{display:flex;align-items:center;gap:.5rem;margin-bottom:1.2rem}
.steps__d{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.6875rem;background:var(--accent-tint);color:var(--heading)}
.steps__d.on{background:var(--heading);color:var(--surface)}
.steps__b{flex:1;height:1px;background:var(--rule)}
.steps__l{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}

/* ── faq ──────────────────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--rule-soft)}
.faq-item summary{cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:'Cormorant Garamond',serif;font-size:clamp(1.05rem,1rem + .3vw,1.18rem);color:var(--heading)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';position:absolute;right:.5rem;top:50%;width:10px;height:10px;
  margin-top:-6px;border-right:1.5px solid var(--heading);border-bottom:1.5px solid var(--heading);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-item p{padding:0 2.5rem 1.5rem 0;color:var(--ink-soft);font-size:.9531rem;line-height:1.7}

/* ── closing + footer ─────────────────────────────────────── */
.closing{background:linear-gradient(180deg,var(--ground),var(--panel));text-align:center}
.geo{background:var(--heading);color:var(--panel);padding-block:2.4rem;text-align:center}
.geo__l{font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;opacity:.75;margin-bottom:.7rem}
.geo__t{font-size:.9375rem;line-height:1.9;color:#fff;opacity:.94;max-width:900px;margin-inline:auto}
.foot{background:var(--ground);padding-block:3rem 2.4rem;border-top:1px solid var(--rule-soft)}
.foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.25rem;margin-bottom:2.4rem}
.foot h4{font-family:'Jost',sans-serif;font-size:.6875rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:.9rem}
.foot ul{list-style:none;padding:0}.foot li{margin-bottom:.45rem;font-size:.875rem}
.foot a{text-decoration:none;color:var(--ink-soft)}.foot a:hover{color:var(--heading)}
.foot__b{border-top:1px solid var(--rule-soft);padding-top:1.6rem;display:flex;
  flex-wrap:wrap;gap:1rem;justify-content:space-between}
@media(max-width:800px){.foot__g{grid-template-columns:1fr 1fr;gap:1.75rem}}
@media(max-width:520px){.foot__g{grid-template-columns:1fr}}

/* ── utilities ────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:50%;transform:translate(-50%,-120%);z-index:500;background:var(--heading);
  color:#fff;padding:.7rem 1.4rem;text-decoration:none;transition:transform .2s}
.skip:focus{transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.sticky-cta{position:fixed;inset:auto 0 0 0;z-index:90;display:none;gap:.6rem;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ground) 96%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--rule-soft);
  transform:translateY(110%);transition:transform .35s var(--ease)}
.sticky-cta.on{transform:none}.sticky-cta .btn{flex:1;padding-inline:1rem}
@media(max-width:960px){.sticky-cta{display:flex}body{padding-bottom:74px}}

/* ── prose (privacy, long-form text pages) ─────────────────── */
.prose h2{font-size:1.25rem;margin:2.4rem 0 .7rem;color:var(--heading)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:.9375rem;line-height:1.75;color:var(--ink-soft);margin-bottom:1rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent-ink)}
.prose .ticks{list-style:none;padding:0;margin:1rem 0 1.4rem}
.prose .ticks li{font-size:.9375rem;line-height:1.7;color:var(--ink-soft);
  padding-left:1.5rem;position:relative;margin-bottom:.9rem}
.prose .ticks li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}

/* ── consent bar (only when consent_banner is on) ──────────── */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);
  border-top:1px solid var(--rule-soft);box-shadow:0 -6px 24px rgba(28,50,64,.09);
  padding:1rem var(--gut);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.9rem 1.5rem}
.cbar[hidden]{display:none}
.cbar p{font-size:.8125rem;line-height:1.6;color:var(--ink-soft);max-width:70ch;margin:0}
.cbar a{color:var(--accent-ink)}
.cbar__b{display:flex;gap:.6rem;flex-shrink:0}
@media (max-width:640px){.cbar{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}}

/* ══ ToLips landing page — built to the 360° playbook, Chapter 04 ══
   The playbook's mockup is a DARK deep-tulip hero, not the light blush
   hero the rest of the site uses. Two colours are darkened from the
   mockup: its rose CTA is 3.1:1 against white and fails WCAG AA, and so
   does the gold section label on cream. Same hues, legible. That contrast is the point: it is the
   first thing a visitor arriving from an ad sees, and it is what the
   client approved. Everything below matches that mockup. */

.tl-hero{background:linear-gradient(135deg,#5A2535 0%,#7A2230 46%,#8E2E3C 100%);
  text-align:center;padding-block:clamp(4rem,9vw,7.5rem);position:relative;overflow:hidden}
.tl-hero .wrap{position:relative;z-index:1}
.tl-eyebrow{display:block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:#E0C77E;margin-bottom:1.6rem}
.tl-hero h1{color:#FFF6F4;font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.06;
  max-width:16ch;margin-inline:auto}
.tl-hero h1 em{font-style:italic;color:#F4C4C9}
.tl-sub{color:#F6DDE0;font-size:clamp(1rem,1.9vw,1.2rem);line-height:1.6;
  max-width:46ch;margin:1.9rem auto 0;font-weight:300}
.tl-trust{color:#E9BEC4;font-size:clamp(.95rem,1.7vw,1.1rem);margin-top:.4rem;font-weight:300}
.tl-cta{margin-top:2.6rem}
.tl-btn{display:inline-block;background:#B45A6B;color:#fff;font-size:.86rem;
  letter-spacing:.19em;text-transform:uppercase;padding:1.25rem 2.6rem;border-radius:3px;
  text-decoration:none;transition:background .2s,transform .2s;font-weight:400}
.tl-btn:hover{background:#A34455;transform:translateY(-1px)}
.tl-micro{color:#D9A3AC;font-size:.82rem;margin-top:1rem;letter-spacing:.04em}
.tl-second{display:inline-block;margin-top:1.4rem;color:#F4C4C9;font-size:.9rem;
  letter-spacing:.08em;text-decoration:none;border-bottom:1px solid rgba(244,196,201,.4);
  padding-bottom:2px}
.tl-second:hover{color:#fff;border-color:#fff}

/* Conditions We Treat — the playbook's tile bar */
.cond{background:var(--ground);padding-block:clamp(2.6rem,5vw,4rem)}
.cond__l{display:block;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:#7E6416;margin-bottom:1.4rem}
.cond__g{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.cond__i{display:flex;align-items:center;gap:.85rem;background:var(--surface);
  border:1px solid var(--rule-soft);border-radius:8px;padding:1.15rem 1.3rem;
  font-size:1.02rem;color:var(--heading);box-shadow:var(--shadow-sm)}
.cond__e{font-size:1.3rem;line-height:1;flex-shrink:0}
@media (max-width:860px){.cond__g{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cond__g{grid-template-columns:1fr}}

/* Four-tier ladder — playbook Chapter 05 adds the $750 entry tier */
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--4{grid-template-columns:1fr}}
.price--entry{opacity:.94}

/* The playbook's mockup shows a dark nav sitting directly on the hero.
   ToLips lives inside the ReMEDI, MD site so it keeps the site's nav
   structure, but on this page the bar takes the hero's ground so the two
   read as one block, exactly as the mockup does. Reverts to the normal
   treatment once scrolled, so the rest of the page stays legible. */
[data-theme=tolips] .nav:not(.is-stuck){
  background:color-mix(in srgb,#5A2535 92%,transparent);border-bottom-color:transparent}
[data-theme=tolips] .nav:not(.is-stuck) .wordmark{color:#FFF6F4}
/* The monogram carries an inline colour from mark(), so it needs the override. */
[data-theme=tolips] .nav:not(.is-stuck) .nav__logo span[aria-hidden]{color:#FFF6F4!important}
[data-theme=tolips] .nav:not(.is-stuck) .wordtag{color:#E2AEB6}
[data-theme=tolips] .nav:not(.is-stuck) .nav__links a,
[data-theme=tolips] .nav:not(.is-stuck) .nav__tel{color:#F4D8DC}
[data-theme=tolips] .nav:not(.is-stuck) .nav__links a:hover,
[data-theme=tolips] .nav:not(.is-stuck) .nav__links a[aria-current=page]{color:#FFF6F4}
[data-theme=tolips] .nav:not(.is-stuck) .btn{background:#B45A6B;color:#fff}

/* ══ Contour Sculpt hero — the playbook's near-black opening ══════ */
.cs-hero{background:#0B0711;position:relative;overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem)}
.cs-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 120% at 78% 42%,rgba(124,77,190,.30),transparent 62%),
             radial-gradient(50% 80% at 8% 92%,rgba(158,106,54,.14),transparent 66%)}
.cs-hero .wrap{position:relative;z-index:1}
.cs-pill{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(196,170,232,.3);
  border-radius:999px;padding:.5rem 1.05rem;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:#C9B6E8;margin-bottom:1.9rem}
.cs-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:#C9A227;flex:none}
.cs-hero h1{color:#FFFFFF;font-size:clamp(2.4rem,5.6vw,4.2rem);line-height:1.07;max-width:17ch}
.cs-hero h1 em{font-style:italic;color:#C9AEEC;font-weight:300}
.cs-hero .lede{color:#BFB2CF;max-width:52ch;margin-top:1.6rem}
.cs-hero .cta{margin-top:2.2rem}
.cs-hero .btn{background:#6D3BAE;color:#fff;border-radius:999px;border-color:#6D3BAE}
.cs-hero .btn:hover{background:#7C4DBE}
.cs-hero .btn--ghost{background:transparent;color:#EDE6F7;border:1px solid rgba(201,182,232,.34)}
.cs-hero .btn--ghost:hover{background:rgba(201,182,232,.1);color:#fff}
.cs-hero .stats{background:transparent;border-top:1px solid rgba(201,182,232,.18);
  grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3.2rem;padding-top:2.2rem;box-shadow:none}
.cs-hero .stat{background:transparent;padding:0;text-align:left}
.cs-hero .stat__n{color:#FFFFFF}
.cs-hero .stat__l{color:#9C8FB0}
@media(max-width:860px){.cs-hero .stats{grid-template-columns:1fr 1fr;gap:1.6rem}}
@media(max-width:430px){.cs-hero .stats{grid-template-columns:1fr}}

/* Same treatment as ToLips: the nav takes the hero's ground so the two
   read as one block, as the mockup shows. */
[data-theme=contour] .nav:not(.is-stuck){background:color-mix(in srgb,#0B0711 92%,transparent);
  border-bottom-color:transparent}
[data-theme=contour] .nav:not(.is-stuck) .wordmark{color:#FFFFFF}
[data-theme=contour] .nav:not(.is-stuck) .nav__logo span[aria-hidden]{color:#FFFFFF!important}
[data-theme=contour] .nav:not(.is-stuck) .wordtag{color:#A78FC9}
[data-theme=contour] .nav:not(.is-stuck) .nav__links a,
[data-theme=contour] .nav:not(.is-stuck) .nav__tel{color:#CFC2E4}
[data-theme=contour] .nav:not(.is-stuck) .nav__links a:hover,
[data-theme=contour] .nav:not(.is-stuck) .nav__links a[aria-current=page]{color:#fff}
[data-theme=contour] .nav:not(.is-stuck) .btn{background:#6D3BAE;color:#fff;border-radius:999px}
/* Trust bar sits on lavender in the mockup, not on the hero's black. */
[data-theme=contour] .trust{background:var(--panel);color:var(--heading)}
[data-theme=contour] .trust__in span::before{background:var(--accent-ink)}