/* ==========================================================================
   The Fix Health + Aesthetics: styles.css
   Single source of truth. Plain CSS, no build step.
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
input{font:inherit;}

/* ---------- Overflow guard (never let the page scroll sideways) ---------- */
html{overflow-x:hidden;overflow-x:clip;}
body{overflow-x:hidden;overflow-x:clip;}

/* ---------- Tokens ---------- */
:root{
  --void:#000000;
  --canvas:#0A0A0C;
  --panel:#131316;
  --panel-hi:#1B1B20;
  --chrome-hi:#FFFFFF;
  --chrome-mid:#C9C9D2;
  --chrome-lo:#8A8A93;
  --accent:#FF2D8E;
  --accent-deep:#C21D6E;
  --accent-muted:rgba(255,45,142,.22);
  --text-primary:#EDEAEE;
  --text-secondary:#A9A5AD;
  --btn-ink:#14060D;
  --hairline:rgba(255,45,142,.35);
  --hairline-quiet:rgba(169,165,173,.18);

  --font-display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --font-sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --font-script:'Great Vibes',cursive;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --header-h:76px;
  --gutter:clamp(20px,6vw,64px);
  --stagger:80ms;
}

/* ---------- Base ---------- */
body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

::selection{background:var(--accent-muted);color:var(--chrome-hi);}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1000;
  background:var(--accent);color:var(--btn-ink);
  padding:12px 18px;border-radius:6px;
  font-family:var(--font-sans);font-weight:500;text-decoration:none;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:12px;}

/* ---------- Focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--font-sans);font-weight:300;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;color:var(--accent);
  margin:0 0 14px;
}
.script-tag{
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--chrome-mid);
  margin:10px 0;
}
h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem,4vw,2.6rem);
  line-height:1.15;
  color:var(--text-primary);
}
h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.2rem,2.4vw,1.5rem);
  color:var(--text-primary);
}
p.lede{
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--text-secondary);
  max-width:52ch;
}
.body-copy{
  color:var(--text-secondary);
  font-size:1rem;
  max-width:64ch;
}

/* chrome gradient headline: gradient clip on the element, a text-shadow-only
   duplicate on ::after (attr(data-text), set by JS) carries the magenta rim
   so the glow never fights the background-clip. */
.chrome-text{
  position:relative;
  display:inline-block;
  background:linear-gradient(180deg,var(--chrome-hi) 0%,var(--chrome-mid) 55%,var(--chrome-lo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.chrome-text::after{
  content:attr(data-text);
  position:absolute;inset:0;
  color:transparent;
  text-shadow:0 0 1px rgba(255,45,142,.5),0 0 20px rgba(255,45,142,.35);
  z-index:-1;
  pointer-events:none;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* placeholder facts flagged for swap before launch. outline (not border-bottom)
   on purpose: several todo-swap hosts (.btn-ghost, .btn-outline, .contact-tile)
   already set the `border` shorthand, which would silently win over a
   border-bottom and hide the flag. outline never collides with border. */
.todo-swap{
  outline:1px dashed var(--accent);
  outline-offset:3px;
  border-radius:inherit;
  cursor:help;
}
/* on a solid pink button the pink dashed outline nearly disappears against the
   fill color it sits next to; swap to a dark dash so the flag stays legible. */
.btn-primary.todo-swap{
  outline-color:var(--btn-ink);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-sans);font-weight:500;
  font-size:.95rem;letter-spacing:.02em;
  text-decoration:none;
  transition:transform .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  text-shadow:none;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);
  color:var(--btn-ink);
  box-shadow:0 0 0 rgba(255,45,142,0);
}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  color:var(--chrome-hi);
  border:1px solid rgba(255,255,255,.5);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn-outline{
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--hairline-quiet);
}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-small{padding:10px 20px;font-size:.85rem;}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ---------- Fixed background environment ---------- */
/* Motion-free build: no drifting gradient, no motes. The static near-black
   canvas comes from the --canvas token already set on body above. */

/* ---------- Section dividers ---------- */
.divider{
  display:flex;align-items:center;justify-content:center;
  padding:0;height:1px;
  background:linear-gradient(90deg,rgba(255,45,142,0) 0%,var(--hairline) 50%,rgba(255,45,142,0) 100%);
  position:relative;
}
.divider .diamond{
  position:absolute;left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--accent);
  box-shadow:0 0 10px rgba(255,45,142,.6);
}

/* ---------- Layout primitives ---------- */
main{display:block;}
.section{
  position:relative;
  padding:clamp(64px,11vw,140px) var(--gutter);
}
.section-inner{max-width:1180px;margin:0 auto;}
.section-head{margin-bottom:clamp(32px,6vw,56px);}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.section-head h2{max-width:20ch;}
.section-head.center h2{margin-left:auto;margin-right:auto;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  width:100%;
  max-width:1280px;margin:0 auto;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
/* the supplied logo is baked on pure black, so screen blending drops its
   ground out against the near-black canvas instead of showing a dark plate */
/* no wordmark in the header (client request): the nav centres in the space
   left of the CTA so the bar stays balanced without a left-hand mark */
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;}
.header-inner nav{grid-column:2;justify-self:center;}
.header-inner > .btn{grid-column:3;justify-self:end;}
/* header CTA hides while the hero's CTA is on screen, returns once scrolled past;
   .cta-armed is set by JS so a no-JS visitor always sees the button */
.site-header.cta-armed:not(.cta-visible) > .header-inner > .btn{animation:none!important;opacity:0!important;visibility:hidden!important;opacity:0;pointer-events:none;visibility:hidden;}
.site-header.cta-armed.cta-visible > .header-inner > .btn{opacity:1;pointer-events:auto;visibility:visible;}
@media (max-width:767px){ .site-header .header-inner > .btn{display:none;} }  /* the bottom bar has Book */
.nav-list{
  display:flex;gap:32px;
}
.nav-list a{
  text-decoration:none;
  font-size:.9rem;letter-spacing:.03em;
  color:var(--text-secondary);
  position:relative;
  padding:4px 0;
  transition:color .25s var(--ease);
}
.nav-list a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);
  transition:right .3s var(--ease);
}
.nav-list a:hover{color:var(--text-primary);}
.nav-list a:hover::after{right:0;}
.nav-list a[aria-current="page"]{color:var(--accent);}
@media (max-width:768px){
  .nav-list{display:none;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:var(--void);}
.hero-stage{
  position:relative;
  min-height:100svh;
  min-height:max(100svh,560px);
  overflow:hidden;
  background:var(--void);
  display:flex;
  align-items:flex-start;   /* top-anchored: the mark sits on the black, not the ripples */
  justify-content:center;
}
/* Poster composed the same way on every device: anchored to its bottom and
   overscaled so the floating droplet crops away entirely. The chrome
   ripples become a horizon band and the settle content sits on clean black.
   The two radial gradients + background-color underneath are the CSS
   stand-in that shows if the photo fails to load. */
.poster{
  position:absolute;inset:0;
  background-image:
    image-set(url('hero-poster.jpg') 1x),
    radial-gradient(ellipse 90% 55% at 50% 98%, rgba(255,45,142,.30) 0%, rgba(255,45,142,.10) 30%, rgba(0,0,0,0) 62%),
    radial-gradient(ellipse 130% 110% at 50% 0%, #0d0d11 0%, #000 55%);
  background-color:#000;
  background-size:auto 172%;
  background-position:50% 100%;
}
.hero-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.95) 0%, rgba(0,0,0,.92) 38%,
    rgba(0,0,0,.78) 58%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.22) 88%, rgba(0,0,0,.05) 100%);
}

.hero-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:2px;
  padding:calc(var(--header-h) + 9vh) var(--gutter) 40px;
  text-shadow:var(--tshadow);
}
.hero-content .btn{text-shadow:none;}
.hero-content .eyebrow{color:var(--chrome-hi);}   /* client request: white, not pink */
/* Landscape screens see a wider slice of the frame, which puts the ripple
   centre mid-height. Overscale further so only the outer ripples remain as a
   horizon low in frame, and deepen the gradient where the CTAs land. */
@media (min-aspect-ratio:4/3){
  /* The ripple centre sits at ~80% of the frame's height, so bottom-anchoring
     can't crop it; a LARGER overscale pushes it up the screen. 140% crops the
     droplet (top 29% of frame) while leaving the ripple centre at ~72% of the
     viewport, under the subline rather than behind the mark. */
  .poster{background-size:auto 160%;}
  .hero-stage::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.96) 0%, rgba(0,0,0,.93) 40%,
      rgba(0,0,0,.86) 56%, rgba(0,0,0,.8) 70%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.1) 100%);
  }
}

.hero-h1{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(2.2rem,6.4vw,4.4rem);
  margin:14px 0 14px;
  line-height:0;
}
.hero-logo{
  width:clamp(205px,38vw,415px);
  height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 0 30px rgba(255,45,142,.34));
}
.hero-content .script-tag{margin:10px 0;}
.hero-content .hero-sub{
  color:var(--text-secondary);
  font-size:1.05rem;
  max-width:44ch;
  margin:6px 0 0;
}
.hero-content .cta-row{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  margin-top:28px;
}
.hero .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}
.hero .btn-ghost:hover{background:transparent;color:#fff;border-color:var(--accent);}

/* ==========================================================================
   TWO PATHS
   ========================================================================== */
.paths-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hairline-quiet);
  border:1px solid var(--hairline-quiet);
  border-radius:18px;
  overflow:hidden;
}
.path-card{
  background:var(--panel);
  padding:clamp(28px,4vw,48px);
  display:flex;flex-direction:column;gap:14px;
}
.path-card .kicker{
  font-family:var(--font-sans);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;
  color:var(--chrome-lo);
}
.path-card h3{font-size:clamp(1.3rem,2.6vw,1.7rem);max-width:16ch;}
.path-card p{color:var(--text-secondary);max-width:36ch;}
.path-card .path-link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);text-decoration:none;font-weight:500;
  font-size:.92rem;
}
.path-card .path-link svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.path-card .path-link:hover svg{transform:translateX(4px);}
@media (max-width:720px){
  .paths-grid{grid-template-columns:1fr;}
}

/* ---------- Positioning band ---------- */
.positioning{text-align:center;}
.positioning .section-inner{max-width:760px;}
.chip-row{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:28px;
}
.chip{
  background:rgba(8,8,15,.55);
  border:1px solid rgba(96,96,126,.3);
  border-radius:999px;
  padding:9px 18px;
  font-size:.82rem;letter-spacing:.02em;
  color:var(--text-secondary);
  backdrop-filter:blur(10px);
}

/* ==========================================================================
   AESTHETICS PATH, numbered rail
   ========================================================================== */
.aesthetics{background:var(--canvas);}
.rail{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px 28px;
  margin-top:40px;
}
.rail-item{display:contents;}
.rail-num{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1.6rem;color:var(--chrome-lo);
  position:relative;
}
.rail-item:not(:last-child) .rail-num::after{
  content:"";position:absolute;left:50%;top:2.4em;bottom:-1.6em;
  width:1px;background:var(--hairline-quiet);
  transform:translateX(-50%);
}
.rail-body h3{font-size:1.15rem;margin-bottom:6px;}
.rail-body p{color:var(--text-secondary);max-width:56ch;}
.rail-item:not(:last-child) .rail-body{padding-bottom:24px;}

/* ==========================================================================
   WELLNESS PATH, split panel, opposite skeleton from aesthetics
   ========================================================================== */
.wellness{background:var(--panel);}
.wellness .section-inner{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);
  align-items:start;
}
.wellness-intro{position:sticky;top:calc(var(--header-h) + 24px);}
.wellness-list{display:flex;flex-direction:column;gap:28px;}
.wellness-item{
  border-left:1px solid var(--hairline-quiet);
  padding-left:22px;
  position:relative;
}
.wellness-item::before{
  content:"";position:absolute;left:-4px;top:6px;
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
}
.wellness-item h3{font-size:1.1rem;margin-bottom:6px;}
.wellness-item p{color:var(--text-secondary);max-width:52ch;}
@media (max-width:860px){
  .wellness .section-inner{grid-template-columns:1fr;}
  .wellness-intro{position:relative;top:auto;}
}

/* ==========================================================================
   ELIZABETH: portrait + bio
   ========================================================================== */
.elizabeth .section-inner{
  display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(32px,5vw,72px);
  align-items:center;
}
.monogram-frame{
  aspect-ratio:4/5;
  border-radius:22px;
  background:radial-gradient(ellipse 120% 90% at 50% 100%,rgba(255,45,142,.16),rgba(255,45,142,0) 60%),
             linear-gradient(160deg,#161619,#0a0a0c 70%);
  border:1px solid var(--hairline-quiet);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.monogram-frame .monogram{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(4rem,10vw,7rem);
  letter-spacing:-.02em;
}
.monogram-frame .frame-note{
  position:absolute;bottom:14px;left:14px;right:14px;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--chrome-lo);
  text-align:center;
}
.bio h2{margin-bottom:6px;}
.bio .role-sub{color:var(--text-secondary);font-size:1rem;margin-bottom:18px;}
.name-flourish{display:block;width:min(280px,60%);height:26px;margin:4px 0 18px;}
.name-flourish path{
  fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-linecap:round;
}
.bio p.body-copy{margin-bottom:20px;}
@media (max-width:860px){
  .elizabeth .section-inner{grid-template-columns:1fr;}
  .monogram-frame{max-width:320px;margin:0 auto;}
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:40px;
}
.testimonial-card{
  background:var(--panel);
  border:1px solid var(--hairline-quiet);
  border-radius:16px;
  padding:28px 24px;
  position:relative;
}
.testimonial-card .quote-mark{
  font-family:var(--font-display);font-style:italic;
  font-size:2.6rem;line-height:1;color:var(--accent);
  display:block;margin-bottom:8px;
  filter:drop-shadow(0 0 10px rgba(255,45,142,.35));
}
.testimonial-card p{color:var(--text-secondary);font-size:.94rem;}
.testimonial-card .attribution{
  display:block;margin-top:16px;
  font-family:var(--font-sans);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:.72rem;color:var(--chrome-mid);
}
.testimonial-card:nth-child(4),.testimonial-card:nth-child(5){grid-column:span 1;}
@media (max-width:960px){
  .testimonials-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .testimonials-grid{grid-template-columns:1fr;}
}
.disclaimer{
  margin-top:28px;color:var(--chrome-lo);font-size:.8rem;max-width:70ch;
}

/* ==========================================================================
   EXAM SECTION: conversion, syringe illustration (static, decorative)
   ========================================================================== */
.exam{
  background:radial-gradient(ellipse 90% 70% at 50% 100%,rgba(255,45,142,.08),rgba(255,45,142,0) 60%),var(--void);
  border-top:1px solid var(--hairline-quiet);
  border-bottom:1px solid var(--hairline-quiet);
}
.exam .section-inner{
  display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,80px);
  align-items:center;
}
.exam-copy{max-width:56ch;}
.exam-copy .body-copy{margin-bottom:16px;}
.exam-copy .script-tag{margin:4px 0 20px;}
.reassure{
  color:var(--accent);
  text-shadow:0 0 16px rgba(255,45,142,.5);
}
.exam-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;}

.syringe-wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  justify-self:center;
  padding:20px;
}
.syringe{width:min(210px,44vw);height:auto;overflow:visible;
  filter:drop-shadow(0 0 26px rgba(255,45,142,.22));}
.syringe-draw line,.syringe-draw rect,.syringe-draw path{
  fill:none;stroke:var(--chrome-mid);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.syringe-draw .accent-part{stroke:var(--accent);stroke-width:2.4;}
.syringe-fill{
  fill:var(--accent);
  opacity:.85;
  transform:scaleY(1);
}

/* ==========================================================================
   SERVICE AREA: minimal centered
   ========================================================================== */
.service-area{text-align:center;}
.service-area .section-inner{max-width:640px;}

/* ==========================================================================
   CONTACT: tile row
   ========================================================================== */
.contact-tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin-top:36px;
}
.contact-tile{
  background:var(--panel);
  border:1px solid var(--hairline-quiet);
  border-radius:14px;
  padding:26px 20px;
  text-align:center;
  text-decoration:none;
  color:var(--text-primary);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.contact-tile:hover{border-color:var(--accent);transform:translateY(-3px);}
.contact-tile svg{width:26px;height:26px;margin:0 auto 12px;color:var(--accent);}
.contact-tile .tile-label{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chrome-lo);margin-bottom:6px;
}
.contact-tile .tile-value{font-size:1rem;}
.contact-meta{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;
  margin-top:32px;color:var(--text-secondary);font-size:.92rem;
}
.contact-meta strong{color:var(--text-primary);font-weight:500;}
@media (max-width:720px){
  .contact-tiles{grid-template-columns:1fr;}
}

/* ==========================================================================
   SIGNUP: narrow centered form
   ========================================================================== */
.signup{text-align:center;}
.signup .section-inner{max-width:560px;}
.signup-form{
  display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;justify-content:center;
}
.signup-form input[type="email"]{
  flex:1 1 260px;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--hairline-quiet);
  border-radius:999px;
  padding:14px 20px;
  color:var(--text-primary);
  transition:border-color .3s var(--ease);
}
.signup-form input[type="email"]::placeholder{color:var(--chrome-lo);}
.signup-form input[type="email"]:focus{border-color:var(--accent);outline:none;}
.signup-success{
  margin-top:20px;color:var(--accent);font-size:1rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:var(--void);
  padding:56px var(--gutter) calc(56px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hairline-quiet);
}
.footer-inner{
  max-width:1180px;margin:0 auto;
  display:flex;flex-direction:column;gap:18px;
}
.footer-brand{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1.2rem;
}
.footer-line{color:var(--text-secondary);font-size:.88rem;max-width:70ch;}
.footer-social{display:flex;gap:16px;margin-top:6px;}
.footer-social a{
  color:var(--chrome-lo);text-decoration:none;
  border:1px solid var(--hairline-quiet);
  border-radius:50%;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.footer-social a:hover{color:var(--accent);border-color:var(--accent);}
.footer-social svg{width:16px;height:16px;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--hairline-quiet);
  color:var(--chrome-lo);font-size:.78rem;
}

/* padding at the very bottom of the page so the sticky mobile bar never
   covers the footer's last line */
@media (max-width:767px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
}

/* ==========================================================================
   STICKY MOBILE BAR
   ========================================================================== */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:rgba(10,10,12,.92);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
  padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
}
.mobile-bar-inner{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:520px;margin:0 auto;
}
.mobile-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  min-height:44px;
  padding:6px 4px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text-primary);
  font-size:.72rem;letter-spacing:.03em;
  transition:background-color .25s var(--ease);
}
.mobile-bar a svg{width:18px;height:18px;color:var(--accent);}
.mobile-bar a:active{background:rgba(255,45,142,.12);}
.mobile-bar a.bar-book{color:var(--btn-ink);background:var(--accent);}
.mobile-bar a.bar-book svg{color:var(--btn-ink);}
@media (max-width:767px){
  .mobile-bar{display:block;}
}

/* ==========================================================================
   ENTRANCE: motion-free build. Every element renders in its final state on
   load, so there is no .in / .reveal / .stagger choreography to gate here.
   ========================================================================== */

/* one living element per section: a whisper glow on the hero CTA, static
   (no pulse) so it reads as a design accent, not a motion graphic. */
.cta-glow{position:relative;}
.cta-glow::after{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(255,45,142,.35),rgba(255,45,142,0) 70%);
  opacity:.4;
  z-index:-1;
  pointer-events:none;
}

/* ==========================================================================
   REDUCED MOTION: only the hover/focus transitions below can ever animate,
   so this block just shortens them to nothing for prefers-reduced-motion.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
  }
}

:target,[id]{scroll-margin-top:calc(var(--header-h) + 16px);}

/* ---------- Responsive base ---------- */
@media (max-width:768px){
  .section{padding:56px var(--gutter);}
}

/* Phones carry the sticky Call / Text / Book bar, so the hero's own buttons are
   the same actions twice. Hide them there; desktop and tablets keep them. */
@media (max-width:767px){ .hero-content .cta-row{display:none;} }

/* Phones: the header has nothing left in it (no mark, nav hidden, CTA in the
   bar), so it collapses. --header-h goes to 0 so every offset that used it
   (hero padding, anchor scroll margin) collapses with it. */
@media (max-width:767px){
  :root{--header-h:0px;}
  .site-header{display:none;}
}

/* back-to-top in the footer: the header has no home mark any more, and on phones
   the header is collapsed entirely, so this is the way up on every device */
.to-top{
  display:inline-block;margin-bottom:14px;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chrome-lo);text-decoration:none;
  border-bottom:1px solid var(--hairline-quiet);padding-bottom:2px;
}
.to-top:hover{color:var(--accent);border-color:var(--accent);}