/* =====================================================================
   CFR2 — Cranial Facial Release · Shared Design System ("Warm Authority")
   ---------------------------------------------------------------------
   Canonical look mirrored from /index.html. Drop this stylesheet on any
   content page, paste the shared <header>/<footer> chrome, and style the
   body from these classes. Page-specific CSS should be minimal.

   Palette : PURPLE chrome sitewide · AQUA accent · coral + maroon lanes · gold CTA.
   Type    : Source Serif 4 (display) + Manrope (body) · 19px body · big & bold
   Load fonts in <head>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --base:#F4EEE1;       /* warm cream canvas          */
  --surface:#FFFFFF;    /* card / panel surface       */
  --ink:#241A2E;        /* violet ink (text)          */
  --muted:#574B63;      /* secondary text — violet-grey */
  --line:#E6DCC9;       /* warm hairline border       */
  --action:#CE3A1E;     /* coral-red accent (his sinus red) */
  --patient:#D14A22;    /* patient lane               */
  --doctor:#7B283B;     /* maroon — doctor lane       */
  --trim:#9C7A24;       /* soft gold — TRIM ONLY      */
  --doctor-band:#3E2A78;/* VIOLET authority band (was olive) */
  --navy:#3E2A78; --navy-deep:#291A52;  /* violet band range */
  --teal:#4F9E86; --teal-light:#A1D3BF;
  --aqua:#8FD3C1; --aqua-deep:#5FB49E;  /* aqua accent — buttons/map-page bars */
  --gold:#CBA14B; --gold-light:#EBD28C; --gold-deep:#A67C2C;  /* shiny CTA gold */
  --lav:#CEC2F0;        /* lavender: subheadings on violet */

  --font-d:'Source Serif 4','Georgia',serif;
  --font-b:'Manrope',system-ui,sans-serif;

  --maxw:1280px;
  --gutter:32px;
  --radius:14px;
  --radius-lg:18px;
  --shadow-card:0 10px 28px rgba(26,35,50,.07);
  --shadow-pop:0 30px 70px rgba(26,35,50,.30);
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);
  /* cream ground with the subtle gold scale texture (the Elite-list treatment, dialed down) */
  background:
    radial-gradient(circle at 50% 0%, transparent 60%, rgba(181,136,47,.05) 61%, rgba(181,136,47,.05) 67%, transparent 68%) 0 0 / 64px 44px repeat,
    radial-gradient(circle at 50% 0%, transparent 60%, rgba(181,136,47,.05) 61%, rgba(181,136,47,.05) 67%, transparent 68%) 32px 22px / 64px 44px repeat,
    var(--base);
  color:var(--ink);
  font-size:22px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* reveal.js side-entrances translate ±16px: never let that widen the page */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- BASE TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:var(--font-d);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-0.01em;
  text-wrap:balance;          /* HARD RULE: headings balance their lines */
  color:var(--ink);
}
h1{font-size:clamp(3rem,5.6vw,5rem)}
h2{font-size:clamp(2.6rem,4.7vw,3.9rem)}      /* subheadings +30% */
h3{font-size:clamp(1.95rem,3.1vw,2.7rem)}     /* subheadings +30% */
h4{font-size:clamp(1.55rem,2.3vw,1.9rem)}     /* +30% */
p{text-wrap:pretty}            /* HARD RULE: body copy gets pretty wrapping */
em{font-style:italic;color:var(--action)}      /* serif-italic accent word  */
strong,b{font-weight:700}
hr{border:none;border-top:2px solid var(--line);margin:40px 0}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--gutter)}    /* readable column for articles */

/* Full-bleed band = section padding-Y + child width:100% (no 100vw hack) */
section{padding:64px 0}
section > .wrap,section > .wrap-narrow{width:100%}

/* ---------- EYEBROW / SECTION LABEL ---------- */
.eyebrow,.sec-ey{
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--action);
  font-size:.84rem;
  margin-bottom:12px;
  display:block;
}
.kicker{                        /* hero kicker — slightly wider tracking */
  font-weight:800;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--action);
  font-size:.86rem;
  margin-bottom:18px;
  display:block;
}
.text-center{text-align:center}
.lead-text{font-size:1.7rem;color:var(--muted);max-width:60ch;line-height:1.5}
.sub{color:var(--muted);font-size:1.53rem;margin-bottom:30px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-b);font-weight:800;letter-spacing:.02em;
  font-size:1.15rem;padding:20px 38px;border-radius:10px;cursor:pointer;
  border:none;text-transform:uppercase;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-action{background:var(--action);color:#fff;box-shadow:0 8px 24px rgba(192,57,43,.32)}
.btn-ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--action);color:var(--action)}
.btn-white{background:#fff;color:var(--ink)}      /* for use on dark bands */
.btn-lg{font-size:1.35rem;padding:24px 48px}
.btn-sm{font-size:.94rem;padding:13px 24px}

/* ---------- STICKY HEADER (cream — the PURPLE lives in the hero bands) ---------- */
header{
  background:var(--base);
  border-bottom:2px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;             /* 32px horizontal padding — IMPORTANT */
  gap:28px;
}
.logo{display:flex;align-items:center;gap:16px}
/* logo consistency: height-driven, width:auto (the serene tile is 704x768;
   a forced 56x56 box stretched it ~9% wide on every cfr2 page) */
.logo .mark{height:56px;width:auto;flex:0 0 auto}
.logo .name{
  font-family:var(--font-d);font-weight:700;font-size:1.42rem;
  line-height:1.0;letter-spacing:-0.01em;white-space:nowrap;color:var(--ink);
}
.logo .name small{
  display:block;font-family:var(--font-b);font-weight:600;font-size:.58rem;
  letter-spacing:.28em;color:var(--muted);margin-top:5px;
}
nav.menu{display:flex;gap:22px;flex-wrap:nowrap;align-items:center}
nav.menu a{
  font-weight:700;font-size:1.04rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink);padding:6px 0;border-bottom:3px solid transparent;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
}
nav.menu a:hover,nav.menu a.active{border-bottom-color:var(--action);color:var(--action)}
/* nav item "Recommended CFR Doctors": 2-line title in the gold-box nav pill */
nav.menu a.nav-2line{white-space:normal;line-height:1.08;text-align:center;max-width:15ch;font-size:.8rem;
  padding:8px 12px;border-radius:10px;color:#3A3214;border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(135deg,#F6E2A4 0%,#E5C472 30%,#CBA14B 62%,#DCB85E 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:0 2px 0 rgba(255,255,255,.5) inset,0 -2px 6px rgba(120,86,16,.28) inset,0 5px 14px rgba(180,130,30,.32)}
nav.menu a.nav-2line:hover,nav.menu a.nav-2line.active{border-bottom-color:transparent;color:#241A0A}
nav.menu a.nav-2line{position:relative;overflow:hidden}
nav.menu a.nav-2line::after{content:'';position:absolute;top:-20%;left:-65%;width:40%;height:140%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);animation:goldSheen 4.6s ease-in-out infinite;pointer-events:none}
@keyframes goldSheen{0%{left:-65%}26%,100%{left:135%}}
@media (prefers-reduced-motion:reduce){nav.menu a.nav-2line::after{animation:none}}
.bar .btn{padding:13px 24px;font-size:.94rem;white-space:nowrap}

/* ---------- PAGE HEADER / TITLE BLOCK ---------- */
.page-head{text-align:center;padding:56px 0 14px}
.page-head h1{margin:0 auto 16px;max-width:24ch}
.page-head .sub{margin:0 auto;max-width:60ch}

/* Navy hero variant for interior pages (authority band as a page header) */
.hero-band{background:var(--doctor-band);color:#fff;text-align:center;padding:72px 0}
.hero-band h1{color:#fff;margin:0 auto 16px;max-width:24ch}
.hero-band .eyebrow,.hero-band .sec-ey{color:var(--lav)}
.hero-band .sub,.hero-band p{color:rgba(255,255,255,.85)}

/* ---------- BANDS / SECTIONS ---------- */
/* Navy authority/proof/CTA band — reserved for emphasis */
.band{background:var(--doctor-band);color:#fff;text-align:center;padding:62px 0}
.band h2{color:#fff;margin-bottom:12px}
.band .eyebrow,.band .sec-ey{color:var(--lav)}
/* a purple band may never sit directly on the purple footer: a page's CLOSING
   band flips to the aqua treatment via the aqua-close class */
.band.aqua-close{background:linear-gradient(160deg,#B4E4D7 0%,var(--aqua) 60%,#7CC8B4 100%);color:#17262F}
.band.aqua-close h2{color:#17262F}
.band.aqua-close p{color:#24443A}
.band.aqua-close .eyebrow,.band.aqua-close .sec-ey{color:#2E5C4E}
.band.aqua-close .btn-white{background:#fff;color:var(--ink)}
.band p{color:rgba(255,255,255,.85);font-size:1.56rem;max-width:52ch;margin:0 auto 30px;line-height:1.5}
.band a:not(.btn){color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}

/* Cream-on-white section (subtle lift off the base canvas) */
.section-cream{
  background:
    radial-gradient(circle at 50% 0%, transparent 60%, rgba(181,136,47,.04) 61%, rgba(181,136,47,.04) 67%, transparent 68%) 0 0 / 64px 44px repeat,
    radial-gradient(circle at 50% 0%, transparent 60%, rgba(181,136,47,.04) 61%, rgba(181,136,47,.04) 67%, transparent 68%) 32px 22px / 64px 44px repeat,
    var(--surface);
  border-top:2px solid var(--line);
  border-bottom:2px solid var(--line);
  padding:60px 0;
}
.section-cream h2{text-align:center;margin-bottom:6px}
.section-cream .note{text-align:center;color:var(--muted);font-size:1.43rem;margin-bottom:34px}

/* ---------- PROSE (article / long-form body content) ---------- */
.prose{
  font-size:1.53rem;
  line-height:1.75;
  color:var(--muted);
  max-width:74ch;
}
.prose.center{margin-left:auto;margin-right:auto}
.prose > * + *{margin-top:1.15em}     /* vertical rhythm between blocks */
.prose h2{
  font-size:clamp(2.3rem,3.6vw,3.1rem);
  color:var(--ink);
  margin-top:1.6em;
  margin-bottom:.1em;
}
.prose h3{
  font-size:clamp(1.8rem,2.6vw,2.2rem);
  color:var(--ink);
  margin-top:1.4em;
  margin-bottom:.1em;
}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-top:1.1em;text-wrap:pretty}
.prose p:first-child{margin-top:0}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose a{
  color:var(--action);font-weight:600;
  border-bottom:2px solid rgba(192,57,43,.28);
  transition:border-color .15s ease;
}
.prose a:hover{border-bottom-color:var(--action)}
.prose ul,.prose ol{margin-top:1.1em;padding-left:1.4em}
.prose li{margin-top:.55em}
.prose li::marker{color:var(--action)}
.prose blockquote{
  margin:1.6em 0;padding:6px 0 6px 28px;
  border-left:4px solid var(--trim);
  font-family:var(--font-d);font-style:italic;font-size:1.3rem;
  color:var(--ink);line-height:1.5;
}
.prose blockquote cite{
  display:block;margin-top:10px;font-style:normal;font-family:var(--font-b);
  font-weight:700;font-size:.92rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
.prose figure{margin:1.8em 0}
.prose figure img{border-radius:var(--radius);border:1px solid var(--line)}
.prose figcaption{
  margin-top:10px;font-size:.92rem;color:var(--muted);text-align:center;
}
.prose img{border-radius:var(--radius)}
.prose hr{border:none;border-top:2px solid var(--line);margin:2em 0}

/* ---------- CARD ---------- */
.card{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 30px;
  box-shadow:var(--shadow-card);
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(26,35,50,.12)}
.card .eyebrow,.card .sec-ey{margin-bottom:10px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:1.4rem;line-height:1.55}
.card a.more{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:.92rem;color:var(--action);
}
.card-link{display:block;color:inherit}     /* wrap a whole card in an anchor */

/* Card grid helpers */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- TWO-LANE "DOOR" PANELS (patient / doctor) ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:54px 0}
.door{
  border-radius:var(--radius-lg);padding:46px 40px;color:#fff;
  position:relative;overflow:hidden;min-height:330px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.door .ey{font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:.82rem;opacity:.9;margin-bottom:14px}
.door h2{font-size:clamp(2rem,3.4vw,2.9rem);color:#fff;margin-bottom:14px}
.door p{font-size:1.53rem;opacity:.95;margin-bottom:26px;max-width:34ch}
.door .go{
  display:inline-flex;align-items:center;gap:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;font-size:1.53rem;
  background:#fff;color:var(--ink);padding:18px 34px;border-radius:10px;align-self:flex-start;
}
.door.patient{background:linear-gradient(150deg,var(--patient),color-mix(in srgb,var(--patient) 66%,#000))}
.door.doctor{background:linear-gradient(150deg,var(--doctor),color-mix(in srgb,var(--doctor) 66%,#000))}
.door::after{content:'';position:absolute;right:-40px;top:-40px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08)}

/* ---------- LINKED LIST (conditions-style two-column index) ---------- */
.clist{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;max-width:900px;margin:0 auto}
.clist a{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 6px;border-bottom:1px solid var(--line);
  font-family:var(--font-d);font-size:1.5rem;font-weight:500;
  transition:color .15s ease;
}
.clist a:hover{color:var(--action)}
.clist a span{color:var(--action);font-family:var(--font-b);font-weight:800;font-size:1.4rem}

/* ---------- METRIC (80/20 standout) ---------- */
.metric{
  display:inline-flex;align-items:center;gap:clamp(22px,4.5vw,52px);
  margin:0 auto 14px;padding:18px 34px;
  background:var(--surface);border:2px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-card);
}
.metric .m{text-align:center}
.metric .m b{display:block;font-family:var(--font-d);font-weight:700;font-size:clamp(2.6rem,5.2vw,3.6rem);line-height:1;color:var(--muted)}
.metric .m.hot b{color:var(--action)}
.metric .m span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.metric .vs{font-family:var(--font-d);font-style:italic;font-size:1.3rem;color:var(--trim);font-weight:600}

/* ============================================================
   ANSWER-FIRST AQUA TREATMENT, sitewide.
   The recipe from /find-a-doctor/: aqua panel #DFF2EA + aqua border
   + deep shadow on purple, soft shadow on cream; labels deep green.
   ============================================================ */
.aqua-panel{
  background:#DFF2EA !important;
  border:1.5px solid rgba(143,211,193,.7) !important;
  box-shadow:0 10px 26px rgba(29,18,64,.16);
}
.aqua-panel .eyebrow,.aqua-panel .sec-ey{color:#2E5C4E}

/* ---------- FOOTER ---------- */
/* sitewide purple footer: deep violet #1D1240, one step DEEPER than the
   --navy/--navy-deep content bands so a purple section above never blends into it.
   Matches the legacy-chrome .site-footer (--blue-900), unifying all three chromes. */
footer{
  background:#1D1240;
  padding:46px 0;text-align:center;
  color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.7;
}
footer a{color:var(--lav);font-weight:700}
/* logo consistency: every footer carries the serene mark (matches the legacy-chrome footers) */
footer .foot-mark{height:44px;width:auto;display:block;margin:0 auto 14px}
footer a:hover{text-decoration:underline;color:#fff}
footer .gls{margin-top:18px}
/* cream wordmark on the dark footer → light + muted, per the GLS footer-credit standard */
footer .gls .gls-mark{display:inline-block;height:24px;width:auto;opacity:.6}

/* ---------- UTILITIES ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:36px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:12px}.mb-2{margin-bottom:24px}.mb-3{margin-bottom:36px}
.center-x{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}
.accent{color:var(--action)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:880px){
  :root{--gutter:22px}
  .doors{grid-template-columns:1fr}
  .clist{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  nav.menu{display:none}            /* swap in a mobile menu per page if needed */
  .bar{padding:16px 22px}
  section{padding:48px 0}
  .prose{font-size:1.35rem}
}
@media(max-width:600px){
  .bar{padding:14px 18px;gap:10px}
  .logo{gap:11px}
  .logo .mark{height:46px;width:auto}
  .logo .name{font-size:1.04rem;white-space:normal;line-height:1.08;max-width:9em}
  .logo .name small{display:none}
  .bar .btn{padding:12px 15px;font-size:.84rem}
}
@media(max-width:560px){
  .metric{flex-direction:column;gap:14px}
  .btn{width:100%;justify-content:center}
  .bar .btn{width:auto}
}

/* ---------- ENTRANCE MOTION (driven by /js/reveal.js) ---------- */
html,body{overflow-x:hidden}
.mo{opacity:0;transition:opacity .75s ease,transform .75s ease;will-change:opacity,transform}
.mo-l{transform:translateX(-52px)}
.mo-r{transform:translateX(52px)}
.mo-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mo{opacity:1;transform:none;transition:none}}

/* ---------- BAND-LITE (house rule: never two purple bands in a row —
   js/reveal.js flips the second of any violet pair to this light band) ---------- */
.band-lite{background:#F1EDFA !important;background-image:none !important;color:#241A2E !important;
  --on-dark:#3A3050;--white:#241A2E;
  --cfr-mist:rgba(36,26,46,.8);--cfr-fog:rgba(36,26,46,.55);
  --cfr-thin:rgba(41,26,82,.16);--cfr-divider:rgba(41,26,82,.12)}
.band-lite h1,.band-lite h2,.band-lite h3,.band-lite h4{color:#3E2A78 !important}
.band-lite p,.band-lite li{color:#3A3050}
.band-lite .btn-ghost{border-color:rgba(41,26,82,.32) !important;color:#241A2E !important;background:transparent !important}
.band-lite .btn-ghost:hover{background:rgba(41,26,82,.06) !important;border-color:rgba(41,26,82,.5) !important;color:#241A2E !important}
.band-lite .section-index{color:#53409B !important}
.band-lite .eyebrow{color:#CE3A1E !important}
