/* =====================================================================
   THE BIG PINK PHYSIO — shared stylesheet
   Built from the TBPP Brand & Design Guide.
   Pink shouts, black grounds, white breathes.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand pink scale */
  --pink-50:#fff1f6; --pink-100:#ffe0ec; --pink-200:#ffc2d9; --pink-300:#ff9bbf;
  --pink-400:#fd77a5; --pink-500:#fa5891; --pink-600:#ec3d7b; --pink-700:#cf2762;
  --pink-800:#a51d4e; --pink-900:#7a1a3d;

  /* Ink / neutrals */
  --black:#000000; --ink-900:#0b0b0d; --ink-800:#141317; --ink-700:#201d24;
  --ink-600:#2e2a33; --ink-500:#4a444f; --ink-400:#6f6875; --ink-300:#9a939f;
  --ink-200:#c8c2cc; --ink-100:#e7e3ea; --ink-50:#f5f3f6;
  --white:#ffffff; --paper:#fbf9fb;

  /* Plum (pink's shadow — dark depth only) */
  --plum-1:#4a1230; --plum-2:#34102a; --plum-3:#21091b;

  /* Status */
  --success:#1f9d6b; --warning:#e8a13a; --danger:#e0324d; --info:#3d7bd6;

  /* Type */
  --font-display:"Fira Sans Extra Condensed","Fira Sans",Arial,sans-serif;
  --font-body:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Spacing (4px grid) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  /* Radius */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-pill:999px;

  /* Shadow */
  --shadow-soft:0 8px 24px rgba(11,11,13,.09);
  --shadow-pink:0 10px 30px rgba(250,88,145,.35);

  --container:1200px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --section:clamp(4rem,8vw,8rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink-900);
  background:var(--paper);
  line-height:1.6;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--pink-600);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Typography ---------- */
h1,h2,h3,h4,.eyebrow,.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:900;
  line-height:.94;
  letter-spacing:.005em;
  margin:0 0 var(--s-4);
}
.display{font-size:clamp(3rem,1.5rem + 6.5vw,6.5rem);}
h1{font-size:clamp(2.4rem,1.6rem + 3vw,4rem);}
h2{font-size:clamp(2rem,1.4rem + 2.4vw,2.9rem);}
h3{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.1rem);}
h4{font-size:1.4rem;}
.eyebrow{
  font-size:.82rem;letter-spacing:.14em;font-weight:800;
  color:var(--pink-500);margin-bottom:var(--s-3);display:inline-block;
}
.eyebrow--rule{
  border-left:4px solid var(--pink-500);
  padding-left:var(--s-3);line-height:1.1;
}
p{margin:0 0 var(--s-4);}
.lead{font-size:1.375rem;line-height:1.45;color:var(--ink-700);}
.accent{color:var(--pink-500);}
.prose{max-width:68ch;}
.prose p,.prose li{font-size:1.0625rem;color:var(--ink-700);}
.prose li{margin-bottom:var(--s-2);}
.muted{color:var(--ink-400);}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section);}
.section--paper{background:var(--paper);}
.section--ink{background:var(--ink-900);color:var(--ink-100);}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--white);}
.section--ink .lead{color:var(--ink-200);}
.section--pink{background:var(--pink-500);color:var(--black);}
.section--pink h1,.section--pink h2,.section--pink h3{color:var(--black);}
.section--pink .eyebrow{color:var(--black);}
.center{text-align:center;}
.narrow{max-width:820px;margin-inline:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  letter-spacing:.03em;font-size:1rem;
  padding:.85rem 1.6rem;border-radius:var(--r-pill);
  border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease-out,background .15s ease-out,
             color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;
  text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:scale(.97);}
.btn--primary{background:var(--pink-500);color:var(--black);box-shadow:var(--shadow-pink);}
.btn--primary:hover{background:var(--pink-600);color:var(--black);}
.btn--primary:active{background:var(--pink-700);}
.btn--secondary{background:var(--black);color:var(--white);}
.btn--secondary:hover{background:var(--ink-700);color:var(--white);}
.btn--outline{background:transparent;border-color:currentColor;color:inherit;}
.btn--outline:hover{background:rgba(250,88,145,.12);border-color:var(--pink-500);color:var(--pink-500);}
.section--ink .btn--outline{color:var(--white);}
.section--ink .btn--outline:hover{color:var(--pink-500);}
.btn--ghost{background:transparent;color:var(--pink-600);}
.btn--ghost:hover{background:var(--pink-50);}
.btn--lg{font-size:1.15rem;padding:1.05rem 2rem;}
.btn--sm{font-size:.85rem;padding:.6rem 1.1rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;}

/* ---------- Tags / chips ---------- */
.tag{
  display:inline-block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;font-size:.72rem;letter-spacing:.08em;
  padding:.35rem .75rem;border-radius:var(--r-pill);
  background:var(--ink-100);color:var(--ink-700);
}
.tag--pink{background:var(--pink-500);color:var(--black);}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,13,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-700);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);padding-block:var(--s-3);
}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand__mark{width:34px;height:34px;flex:none;}
.brand__word{
  font-family:var(--font-display);text-transform:uppercase;font-weight:900;
  color:var(--white);line-height:.9;font-size:1.05rem;letter-spacing:.01em;
}
.brand__word .accent{color:var(--pink-500);}

/* Horizontal wordmark logo lockup (replaces emblem) */
.wordmark{
  display:inline-flex;flex-direction:column;justify-content:center;
  font-family:var(--font-display);text-transform:uppercase;font-weight:900;
  color:var(--white);line-height:.82;
}
.wordmark__the{
  font-size:.62rem;letter-spacing:.16em;font-weight:800;
  color:var(--white);margin-bottom:2px;
}
.wordmark__main{
  font-size:1.4rem;letter-spacing:.01em;white-space:nowrap;
}
.wordmark__main .accent{color:var(--pink-500);}
.brand:hover .wordmark{opacity:.9;}
.wordmark--footer{color:var(--white);}
.wordmark--footer .wordmark__the{font-size:.8rem;}
.wordmark--footer .wordmark__main{font-size:2rem;}
@media (max-width:420px){
  .wordmark__main{font-size:1.2rem;}
}
.nav__links{display:flex;align-items:center;gap:var(--s-6);list-style:none;margin:0;padding:0;}
.nav__links a{
  font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  letter-spacing:.04em;font-size:.95rem;color:var(--ink-100);
  padding-block:var(--s-1);border-bottom:2px solid transparent;
  transition:color .12s ease-out,border-color .12s ease-out;
}
.nav__links a:hover{color:var(--pink-500);border-bottom-color:var(--pink-500);text-decoration:none;}
.nav__links a.is-active{color:var(--white);border-bottom-color:var(--pink-500);}
.nav__cta{margin-left:var(--s-2);}
.nav__toggle{
  display:none;background:none;border:0;cursor:pointer;padding:var(--s-2);
  color:var(--white);
}
.nav__toggle svg{width:28px;height:28px;}

@media (max-width:880px){
  .nav__toggle{display:inline-flex;}
  .nav__links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ink-900);border-bottom:1px solid var(--ink-700);
    padding:var(--s-3) var(--gutter);
    max-height:0;overflow:hidden;transition:max-height .2s ease-out;
  }
  .nav__links.is-open{max-height:520px;}
  .nav__links li{width:100%;}
  .nav__links a{display:block;width:100%;padding:var(--s-3) 0;border-bottom:1px solid var(--ink-700);}
  .nav__links a.btn{margin-top:var(--s-2);border:2px solid transparent;width:auto;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--ink-900);color:var(--white);
  overflow:hidden;
}
.hero::after{ /* subtle plum depth, not a candy gradient */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 10%,rgba(74,18,48,.55),transparent 60%);
}
.hero__inner{position:relative;z-index:1;padding-block:clamp(4.5rem,10vw,9rem);}
.hero .display{max-width:16ch;}
.hero__sub{max-width:52ch;color:var(--ink-200);font-size:1.375rem;line-height:1.45;margin-bottom:var(--s-8);}
.hero .btn-row{margin-top:var(--s-6);}

/* ---------- Cards ---------- */
.grid{display:grid;gap:var(--s-6);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

.card{
  background:var(--white);border:1px solid var(--ink-100);
  border-radius:var(--r-md);padding:var(--s-6);
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease-out,box-shadow .15s ease-out,border-color .15s ease-out;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-2px);border-color:var(--pink-200);}
.card--dark{background:var(--ink-800);border-color:var(--ink-600);color:var(--ink-100);box-shadow:none;}
.card--dark h3,.card--dark h4{color:var(--white);}
.card--dark:hover{border-color:var(--pink-500);}
.card--link{cursor:pointer;}
.card__icon{color:var(--pink-500);margin-bottom:var(--s-3);}
.card__icon svg{width:34px;height:34px;}
.card h3,.card h4{margin-bottom:var(--s-2);}
.card p{color:var(--ink-600);margin-bottom:var(--s-3);}
.card--dark p{color:var(--ink-200);}
.card__more{
  margin-top:auto;font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;letter-spacing:.04em;font-size:.85rem;color:var(--pink-600);
  display:inline-flex;align-items:center;gap:6px;
}
.card--dark .card__more{color:var(--pink-500);}

/* Pink top-accent card */
.card--accent{border-top:4px solid var(--pink-500);}

/* ---------- Feature list ---------- */
.checklist{list-style:none;padding:0;margin:0;}
.checklist li{
  position:relative;padding-left:1.9rem;margin-bottom:var(--s-3);
  color:var(--ink-700);font-size:1.0625rem;
}
.checklist li::before{
  content:"+";position:absolute;left:0;top:-.05em;
  font-family:var(--font-display);font-weight:900;color:var(--pink-500);
  font-size:1.35rem;line-height:1;
}
.section--ink .checklist li{color:var(--ink-200);}

/* ---------- Split section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
@media (max-width:820px){.split{grid-template-columns:1fr;}}

/* ---------- Stat / callout band ---------- */
.callout{
  background:var(--ink-900);color:var(--white);border-radius:var(--r-lg);
  padding:clamp(2rem,5vw,3.5rem);
}
.callout .eyebrow{color:var(--pink-500);}

/* ---------- Reassurance strip ---------- */
.reassure{
  border-left:4px solid var(--pink-500);padding-left:var(--s-6);
  font-size:1.375rem;line-height:1.45;font-weight:500;color:var(--ink-800);
  max-width:60ch;
}
.section--ink .reassure{color:var(--white);}

/* ---------- Placeholder block (for you to fill) ---------- */
.placeholder{
  border:2px dashed var(--pink-400);background:var(--pink-50);
  border-radius:var(--r-md);padding:var(--s-6);color:var(--pink-800);
}
.placeholder .eyebrow{color:var(--pink-700);}
.placeholder p{color:var(--pink-800);}

/* ---------- Anchor offset for sticky nav ---------- */
.anchor{scroll-margin-top:90px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:var(--ink-200);padding-block:var(--s-16) var(--s-8);}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-8);}
@media (max-width:760px){.footer__top{grid-template-columns:1fr;gap:var(--s-6);}}
.footer__brand .brand__word{font-size:1.6rem;}
.footer__mark{width:44px;height:44px;margin-bottom:var(--s-4);}
.footer__tagline{color:var(--ink-300);max-width:34ch;margin-top:var(--s-3);}
.footer h4{color:var(--white);font-size:1rem;letter-spacing:.06em;margin-bottom:var(--s-4);}
.footer ul{list-style:none;padding:0;margin:0;}
.footer li{margin-bottom:var(--s-2);}
.footer a{color:var(--ink-200);font-size:.95rem;}
.footer a:hover{color:var(--pink-500);text-decoration:none;}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);
  border-top:1px solid var(--ink-700);margin-top:var(--s-12);padding-top:var(--s-6);
  color:var(--ink-400);font-size:.85rem;
}
.footer__bottom a{color:var(--ink-400);}
.footer__bottom a:hover{color:var(--pink-500);}

/* ---------- Page header (interior pages) ---------- */
.page-head{background:var(--ink-900);color:var(--white);padding-block:clamp(3rem,7vw,5.5rem);position:relative;overflow:hidden;}
.page-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 90% 0%,rgba(74,18,48,.5),transparent 60%);}
.page-head__inner{position:relative;z-index:1;}
.page-head .lead{color:var(--ink-200);max-width:60ch;}

/* ---------- Misc ---------- */
.divider{height:1px;background:var(--ink-100);border:0;margin-block:var(--s-8);}
.badge-note{font-size:.85rem;color:var(--ink-400);}
.skip-link{position:absolute;left:-999px;}
.skip-link:focus{left:var(--s-3);top:var(--s-3);z-index:100;background:var(--pink-500);color:#000;padding:.5rem 1rem;border-radius:var(--r-sm);}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}