/* ============================================================
   CELL Performance Lab — v3 design system
   Lifted from the approved homepage (site/Main.dc.html) so the
   inner pages share its tokens, type scale and components
   exactly. The helix-specific rules are not carried over.

   Surface budget, from the brief, and the whole art direction:
   ~60% light and cool, ~25% photography, ~15% deep navy.
   Bronze is an accent, never a large surface except one band.
   Never two consecutive sections with the same treatment.
   ============================================================ */

@font-face{font-family:'Panchang';src:url(panchang-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Roboto',system-ui,sans-serif;font-weight:300;
  background:#F3EFE6;color:#071133;-webkit-font-smoothing:antialiased}
img{max-width:100%}

/* ---------- fluid scale ---------- */
.page{--gut:max(clamp(20px,6vw,96px),(100vw - 1720px) / 2);
  --sy:clamp(64px,7.5vw,112px);--hdrh:76px;
  width:100%;position:relative;background:#F3EFE6;color:#071133;overflow-x:clip}
.band{width:100%;padding:var(--sy) var(--gut)}
.d{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;margin:0}
.r{font-family:'Roboto',system-ui,sans-serif;margin:0}
/* Panchang goes chunky above 400 and that has already been rejected once.
   There is no bold heading anywhere in this system, on purpose. */
.h1{font-size:clamp(34px,5.2vw,64px);line-height:1.17;letter-spacing:-0.01em}
/* The homepage sets .h2 at up to 62px because its bands are the top level
   there. Inner pages already carry a 64px h1 in the navy head, so a 62px
   section heading flattened the hierarchy and simply read as too big. This
   file is not loaded by the homepage, so the two scales stay independent. */
.h2{font-size:clamp(26px,3.3vw,44px);line-height:1.14;letter-spacing:-0.01em}
.h3{font-size:clamp(25px,2.7vw,34px);line-height:1.2;letter-spacing:-0.01em}
.lead{font-size:clamp(16px,1.45vw,19px);line-height:1.62;font-weight:300;margin:0}
.body{font-size:clamp(15px,1.15vw,16px);line-height:1.62;margin:0}
.kick{font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.rule{display:block;width:28px;height:2px;background:#DC9741}
.kickwrap{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.measure{max-width:70ch}

/* ---------- controls ---------- */
.pill{color:inherit;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-size:15px;line-height:20px;font-weight:400;text-decoration:none;
  padding:15px 30px;border:1px solid transparent;min-height:48px;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.pill-bronze{background:#DC9741;color:#071133}
.pill-bronze:hover{background:#E8A959;color:#071133}
.pill-line{border-color:currentColor;background:transparent}
.pill-line:hover{color:#DC9741;border-color:#DC9741}
.pill-line.on-light:hover{color:#B87A2A;border-color:#B87A2A}
/* On the bronze band: white outline, navy on hover. The default bronze hover
   would vanish into the band it is sitting on. */
.pill-line.on-bronze{color:#FFFFFF;border-color:#FFFFFF}
.pill-line.on-bronze:hover{color:#071133;border-color:#071133}
.pill-white{background:#FFFFFF;color:#071133}
.pill-white:hover{background:#F3EFE6;color:#071133}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.chip{font-family:inherit;font-size:15px;line-height:20px;font-weight:400;border-radius:999px;
  padding:12px 22px;min-height:44px;border:1px solid #C9D4DA;background:transparent;
  color:#071133;cursor:pointer;transition:background .3s ease,border-color .3s ease}
a.chip{text-decoration:none;display:inline-flex;align-items:center}
.chip:hover{border-color:#DC9741}
.chip.on{background:#DC9741;border-color:#DC9741;color:#071133}
.txtlink{color:inherit;text-decoration:none;font-size:15px;font-weight:400;
  border-bottom:1px solid #DC9741;padding-bottom:3px}
.txtlink:hover{border-bottom-color:#E8A959}

/* ---------- cards ----------
   The gold gradient outline is the signature detail: bright bronze at the top
   corners falling away to almost nothing down the sides. Two backgrounds are
   painted into one box, the fill clipped to the padding box and the gradient
   to the border box, so the border itself carries the gradient. */
.card{border:1px solid transparent;border-radius:16px;
  background-origin:border-box;background-clip:padding-box,border-box;
  background-image:linear-gradient(#FFFFFF,#FFFFFF),
    linear-gradient(155deg,#E8A959 0%,#DC9741 30%,rgba(220,151,65,.62) 70%,rgba(184,122,42,.58) 100%);
  box-shadow:0 24px 48px -28px rgba(7,17,51,.28);transition:transform .5s ease}
.card:hover{transform:translateY(-4px)}
/* On navy the fill lifts, so cards never disappear tone on tone. */
.card-navy{background-image:linear-gradient(170deg,#1C2B5E 0%,#141F47 55%,#101A3C 100%),
  linear-gradient(155deg,#E8A959 0%,#DC9741 30%,rgba(220,151,65,.62) 70%,rgba(184,122,42,.58) 100%);
  box-shadow:none}
.card-navy:hover{transform:translateY(-8px)}
.edge{padding:1px;border-radius:16px;
  background:linear-gradient(155deg,#E8A959 0%,#DC9741 30%,rgba(220,151,65,.62) 70%,rgba(184,122,42,.58) 100%);
  box-shadow:0 24px 48px -28px rgba(7,17,51,.45);transition:transform .5s ease}
.edge:hover{transform:translateY(-4px)}
.edge>img{display:block;width:100%;border-radius:15px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;width:100%;min-height:var(--hdrh);
  padding:12px var(--gut);display:flex;align-items:center;justify-content:space-between;
  gap:16px;border-bottom:1px solid transparent;background:transparent;
  transition:background .45s ease,border-color .45s ease}
.hdr-on{background:#071133;border-bottom-color:rgba(220,151,65,.4)}
.hdr__mark{display:block;line-height:0;flex-shrink:0}
.hdr__mark img{height:clamp(22px,2.2vw,30px);width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.navlink{color:#F3EFE6;text-decoration:none;font-size:14px;line-height:20px;
  font-weight:400;white-space:nowrap}
.navlink:hover{color:#E8A959}
.navlink[aria-current="page"]{color:#DC9741}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(243,239,230,.55);border-radius:999px;
  color:#F3EFE6;cursor:pointer;flex-shrink:0}
.burger:hover{border-color:#DC9741;color:#DC9741}
.burger span{display:block;width:18px;height:1px;background:currentColor;
  position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:18px;height:1px;background:currentColor}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.menu{display:none}

/* Inner pages have no full-bleed hero behind the header, so it carries the
   navy from the first paint rather than fading in on scroll. */
.hdr--solid{background:#071133;border-bottom-color:rgba(220,151,65,.4)}

/* ---------- page head ----------
   The inner-page equivalent of the homepage hero: navy, compact, so the
   first light band underneath lands as a change of treatment. */
.phead{width:100%;background:#071133;color:#F3EFE6;
  padding:clamp(56px,7vw,104px) var(--gut) clamp(52px,6.5vw,92px)}
.phead .h1{color:#F3EFE6;max-width:18ch}
.phead .lead{color:#F3EFE6;margin-top:22px;max-width:62ch;opacity:.92}
.phead .kick{color:#DC9741}
.crumb{font-size:13px;line-height:20px;opacity:.7;margin:0 0 18px}
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(220,151,65,.5)}
.crumb a:hover{color:#E8A959}

/* ---------- photo bands ---------- */
.photoband{position:relative;width:100%;min-height:clamp(440px,48vw,840px);
  display:flex;align-items:center;overflow:hidden;background:#C9D4DA}
.photoband__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoband__scrim{position:absolute;inset:0}
.photoband__inner{position:relative;z-index:2;width:100%;
  max-width:calc(var(--gut) + min(820px,46vw) + 24px);
  padding:var(--sy) 24px var(--sy) var(--gut);display:flex;flex-direction:column;gap:20px}

/* ---------- divided row (outcomes pattern) ---------- */
.outcomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.outcome{padding:8px clamp(16px,2.2vw,32px);border-left:1px solid rgba(220,151,65,.7);
  display:flex;flex-direction:column;gap:12px}
.outcome:first-child{padding-left:0;border-left:none}
.outcome:last-child{padding-right:0}
.outcome h2,.outcome h3{font-size:clamp(21px,2.1vw,28px);line-height:1.22;margin:0;
  font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400}

/* ---------- chips + reveal panel ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;max-width:1000px}
.panel{margin-top:44px;padding:clamp(28px,3.6vw,48px) clamp(24px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px)}
.panel__stackrow{display:flex;align-items:baseline;gap:20px;padding:15px 0;border-top:1px solid #C9D4DA}

/* ---------- numbered steps ---------- */
.steps{margin-top:clamp(40px,5vw,60px);display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.step{padding:30px 26px;display:flex;flex-direction:column}
.step__n{font-size:clamp(38px,3.4vw,46px);line-height:1.05;font-weight:200;
  letter-spacing:.03em;color:#DC9741}
.step__rule{margin-top:14px;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,rgba(220,151,65,.8),rgba(220,151,65,.04))}
.step h3{margin:20px 0 0;font-size:clamp(20px,1.7vw,23px);line-height:1.26;
  font-weight:400;color:#F3EFE6}
.step p{margin:12px 0 0;font-size:15px;line-height:24px;color:#F3EFE6;opacity:.8}
/* the same step card on a light ground */
.steps--light .step h3{color:#071133}
.steps--light .step p{color:#071133;opacity:.78}

/* ---------- bronze split band ---------- */
.split{width:100%;display:grid;grid-template-columns:1fr 1fr;background:#DC9741}
.split__media{position:relative;min-height:clamp(280px,38vw,700px);overflow:hidden;background:#000D14}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.split__text{padding:var(--sy) var(--gut);display:flex;flex-direction:column;
  justify-content:center;gap:20px;color:#FFFFFF}
.split--flip .split__media{order:2}

/* ---------- alternating feature rows ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.feat + .feat{margin-top:clamp(56px,7vw,104px)}
.feat__text{display:flex;flex-direction:column;gap:18px}
.feat--flip .feat__media{order:2}
.feat__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:15px}

/* ---------- gallery marquee ---------- */
.strip{--fw:clamp(230px,26vw,420px);margin-top:clamp(36px,4.5vw,56px);
  margin-left:calc(-1 * var(--gut));width:calc(100% + 2 * var(--gut));overflow:hidden;
  padding:0 0 clamp(8px,2vw,24px) var(--gut);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - var(--gut)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - var(--gut)),transparent 100%)}
.track{display:flex;gap:24px;width:max-content;animation:loop 32s linear infinite;will-change:transform}
@keyframes loop{from{transform:translateX(0)}to{transform:translateX(calc(-4 * (var(--fw) + 24px)))}}
.shot{margin:0;display:flex;flex-direction:column;gap:14px;flex-shrink:0;width:var(--fw)}
.shot img{display:block;width:100%;aspect-ratio:420/440;object-fit:cover;border-radius:15px}
.shot figcaption{font-size:14px;line-height:22px;font-weight:400;color:#071133}

/* ---------- memberships ---------- */
.tiers{margin-top:clamp(44px,6vw,72px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);align-items:stretch}
.tier{padding:40px 36px;display:flex;flex-direction:column;gap:14px}
.tier--top{margin-top:-24px;padding:64px 36px 40px;position:relative;
  box-shadow:0 32px 64px -28px rgba(7,17,51,.38)}
.tier__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.amt{font-size:clamp(40px,4.4vw,56px);line-height:1.1}
.tier__foot{margin-top:auto;border-top:1px solid #C9D4DA;padding-top:18px;
  display:flex;flex-direction:column;gap:12px}
.tier__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots i{width:9px;height:9px;border-radius:50%;background:#DC9741;display:block}
.tag{position:absolute;top:-16px;left:36px;background:#DC9741;color:#FFFFFF;
  padding:7px 16px;border-radius:999px}
.fine{font-size:14px;line-height:22px;font-weight:400;color:#071133}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:15px;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;
  border-radius:50%;background:#DC9741}

/* ---------- comparison table ---------- */
.tblwrap{margin-top:clamp(36px,4.5vw,56px);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:640px}
.tbl th,.tbl td{text-align:left;padding:16px 18px;border-bottom:1px solid #C9D4DA;
  font-size:15px;line-height:1.5;font-weight:300}
.tbl thead th{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;
  font-size:17px;border-bottom:1px solid rgba(220,151,65,.7)}
.tbl tbody tr:hover{background:rgba(232,237,239,.6)}

/* ---------- accordion (FAQ) ---------- */
.acc{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid #C9D4DA}
.acc details{border-bottom:1px solid #C9D4DA}
.acc summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(16px,1.35vw,18px);line-height:1.45;font-weight:400;color:#071133}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:1px solid #DC9741;border-bottom:1px solid #DC9741;
  transform:rotate(45deg);transition:transform .3s ease}
.acc details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.acc summary:hover{color:#B87A2A}
.acc__body{padding:0 44px 24px 0;font-size:15px;line-height:1.68;font-weight:300;max-width:76ch}
.acc__body p{margin:0 0 14px}
.acc__body p:last-child{margin-bottom:0}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1 / -1}
.field label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:#071133}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;font-weight:300;
  color:#071133;background:#FFFFFF;border:1px solid #C9D4DA;border-radius:10px;
  padding:14px 16px;min-height:50px;transition:border-color .3s ease}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#DC9741}
.form__note{grid-column:1 / -1;font-size:14px;line-height:1.6;color:#071133;opacity:.75}

/* ---------- app row ---------- */
/* Contact details with no form beside them: three across, stacking narrow. */
.contactrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,44px);margin-top:clamp(30px,3.6vw,44px);align-items:start}
@media (max-width:820px){ .contactrow{grid-template-columns:minmax(0,1fr);gap:28px} }
.approw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,96px);align-items:center}
.appcard{padding:clamp(24px,3vw,36px) clamp(24px,3.2vw,40px);display:flex;flex-wrap:wrap;
  align-items:center;gap:clamp(24px,3.5vw,40px)}
.badges{display:flex;flex-direction:column;gap:14px;flex:1 1 190px;min-width:180px}
.badges img{display:block;width:190px;max-width:100%;height:auto}
.qr{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.qr img{display:block;width:132px;height:132px;border-radius:12px}

/* ---------- footer ----------
   Version 2s footer structure, kept whole: brand block with the tall
   wordmark, five auto-fitting columns, store badges, and a two-part legal
   bar. Only the palette changed. */
.foot{width:100%;background:#071133;color:rgba(243,239,230,.6);
  border-top:1px solid rgba(243,239,230,.12)}
.foot__grid{padding:clamp(56px,7vw,88px) var(--gut) 40px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:48px}
.foot__brand{display:flex;flex-direction:column;gap:18px;min-width:220px}
.foot__brand img{height:80px;width:auto;margin-left:-8px}
.foot__brand p{margin:0;font-size:14px;line-height:1.7;max-width:280px;
  color:rgba(243,239,230,.7)}
.foot__col{display:flex;flex-direction:column;gap:13px}
.foot__col a,.foot__col p{margin:0;font-size:14px;line-height:1.7;
  color:rgba(243,239,230,.7);text-decoration:none}
.foot__col a:hover{color:#F3EFE6}
.foot__label{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#DC9741}
/* TODO: live store URLs pending from the client. Not anchors until they arrive. */
.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.store-badge{display:inline-flex;border-radius:8px;overflow:hidden;cursor:default;
  transition:transform .25s ease,box-shadow .25s ease}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.store-badge img{display:block;width:auto;height:48px}
.foot__bar{padding:24px var(--gut) 40px;border-top:1px solid rgba(243,239,230,.12);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:12px;letter-spacing:.04em;color:rgba(243,239,230,.42)}

/* ---------- motion: slow or nothing ---------- */
.rise{animation:rise .9s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade{animation:fadein .6s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- breakpoints ---------- */
@media (max-width:1180px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
@media (max-width:1080px){
  .nav--main{display:none}
  .burger{display:inline-flex}
  .menu{display:block;position:absolute;left:0;right:0;top:100%;background:#071133;
    border-bottom:1px solid rgba(220,151,65,.4);padding:8px var(--gut) 24px}
  .menu[hidden]{display:none}
  .menu .nav{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .menu .navlink{font-size:16px}
  .hdr{position:relative}
}
@media (max-width:980px){
  .photoband__scrim{background:linear-gradient(180deg,rgba(232,237,239,.95) 0%,rgba(232,237,239,.86) 46%,rgba(232,237,239,.66) 100%) !important}
  .photoband__inner{max-width:none}
}
@media (max-width:900px){
  .outcomes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,5vw,40px)}
  .outcome:nth-child(odd){padding-left:0;border-left:none}
  .outcome:nth-child(even){padding-right:0}
  .panel{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .split--flip .split__media{order:0}
  .split__media{min-height:clamp(240px,50vw,360px)}
  .feat{grid-template-columns:minmax(0,1fr);gap:28px}
  .feat--flip .feat__media{order:0}
  .approw{grid-template-columns:minmax(0,1fr)}
  .tiers{grid-template-columns:minmax(0,1fr);max-width:520px}
  .tier--top{margin-top:0;padding:56px 36px 40px}
  .tag{left:24px}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .photoband__inner{max-width:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .outcomes{grid-template-columns:minmax(0,1fr)}
  .outcome{padding:24px 0 0;border-left:none;border-top:1px solid rgba(220,151,65,.7)}
  .outcome:first-child{border-top:none;padding-top:0}
  .steps{grid-template-columns:minmax(0,1fr);max-width:420px}
  .btnrow .pill{width:100%}
  .qr{align-items:flex-start}
  .foot__cols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .rise,.fade,.track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- step grid variants ----------
   Five steps with a paragraph each will not breathe in five columns. */
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps--3 .step{padding:34px 30px}
.step__sum{margin:10px 0 0;font-size:clamp(16px,1.35vw,18px);line-height:1.4;
  font-weight:400;color:#B87A2A}
.steps--light .step__sum{color:#B87A2A}

/* ---------- two-up prose ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.5vw,72px);
  margin-top:clamp(36px,4.5vw,56px)}
.duo h3{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;margin:0 0 14px;
  font-size:clamp(20px,1.9vw,26px);line-height:1.25}

/* ---------- therapy rows ---------- */
.tlist{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;
  gap:clamp(48px,6vw,88px)}
.tmeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tmeta span{font-size:13px;line-height:18px;padding:7px 14px;border-radius:999px;
  border:1px solid #C9D4DA;color:#071133}

@media (max-width:900px){
  .steps--3{grid-template-columns:minmax(0,1fr);max-width:520px}
  .duo{grid-template-columns:minmax(0,1fr)}
}

/* ---------- spec rows ---------- */
.spec{margin-top:8px;display:flex;flex-direction:column}
.spec__row{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:20px;
  padding:14px 0;border-top:1px solid #C9D4DA}
.spec__k{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#B87A2A;line-height:1.5}
.spec__v{font-size:15px;line-height:1.58;font-weight:300}
.spec__v b{font-weight:400}

/* ---------- device plate ----------
   Stands in for a photograph where we genuinely have none. Better an honest
   navy plate than stock imagery of a clinic that is not ours. */
.plate{position:relative;border-radius:15px;min-height:clamp(260px,32vw,420px);
  background:linear-gradient(170deg,#1C2B5E 0%,#141F47 55%,#101A3C 100%);
  border:1px solid transparent;background-origin:border-box;
  background-clip:padding-box,border-box;
  background-image:linear-gradient(170deg,#1C2B5E 0%,#141F47 55%,#101A3C 100%),
    linear-gradient(155deg,#E8A959 0%,#DC9741 30%,rgba(220,151,65,.62) 70%,rgba(184,122,42,.58) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:clamp(28px,3.4vw,44px);color:#F3EFE6}
.plate__k{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#DC9741}
.plate__n{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;margin:0;
  font-size:clamp(22px,2.3vw,32px);line-height:1.15;letter-spacing:-.01em}
.plate__d{margin:0;font-size:14px;line-height:1.6;opacity:.82}

@media (max-width:900px){
  .spec__row{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ---------- four-up tiers ---------- */
.tiers--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiers--4 .tier{padding:32px 26px;gap:12px}
.tiers--4 .amt{font-size:clamp(32px,3.2vw,42px)}
/* Thrive is lifted 24px and Elite carries a tag, so both need their top padding
   corrected, or their first line sits off the baseline the other cards share. */
.tiers--4 .tier--top{padding-top:56px}
.tier--tag{position:relative}
.tiers--4 .tier--tag{padding-top:32px}
/* Sub-lines in table cells are context, not data: mute them so the price reads first. */
.tbl .fine{opacity:.68}
.tier__name{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;margin:0;
  font-size:clamp(19px,1.7vw,23px);line-height:1.2}
.tier__sub{margin:0;font-size:14px;line-height:1.5;color:#B87A2A}

/* ---------- portrait ---------- */
.portrait{position:relative;border-radius:15px;overflow:hidden;
  box-shadow:0 32px 64px -30px rgba(7,17,51,.45)}
.portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- credential columns ---------- */
.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);margin-top:clamp(32px,4vw,48px)}
.creds .card{padding:32px 30px}
.creds h3{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;margin:0 0 16px;
  font-size:clamp(18px,1.6vw,22px);line-height:1.25}
.creds .ticks li{font-size:14px;line-height:1.5}
.creds .ticks li::before{width:7px;height:7px;top:.6em}

/* ---------- quote ----------
   Roboto italic, not the display face. Set in Panchang at heading size it
   fights the headline directly above it and the measure collapses to about
   thirty characters a line. Small, light and airy reads as a voice. */
.quote{margin:0;font-family:'Roboto',system-ui,sans-serif;
  font-weight:300;font-style:italic;
  font-size:clamp(15px,1.25vw,17px);line-height:1.76;letter-spacing:0;
  padding-left:clamp(18px,2vw,26px);border-left:1px solid #DC9741}

@media (max-width:1180px){ .tiers--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .tiers--4{grid-template-columns:minmax(0,1fr);max-width:520px}
  .creds{grid-template-columns:minmax(0,1fr)}
}

/* ---------- stat row ----------
   The numeral was sized for a full-width heading, not a quarter column, so
   it filled its cell and broke words at the hyphen. Smaller, with real
   breathing room between the four and between numeral and label. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(26px,3.2vw,48px);margin-top:clamp(36px,4.5vw,56px)}
.stat{display:flex;flex-direction:column;gap:12px;
  padding-left:clamp(18px,1.6vw,26px);
  border-left:1px solid rgba(220,151,65,.7)}
.stat__n{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;
  font-size:clamp(23px,2.2vw,32px);line-height:1.12;letter-spacing:-.01em;
  hyphens:none;-webkit-hyphens:none}
.stat__l{font-size:14px;line-height:1.6;opacity:.85;max-width:30ch}

/* ---------- map ---------- */
.map{border-radius:15px;overflow:hidden;border:1px solid #C9D4DA;background:#C9D4DA}
.map iframe{display:block;width:100%;height:clamp(300px,34vw,460px);border:0}

/* ---------- thank you ---------- */
.thanks{min-height:60vh;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:20px}

/* Four columns stop working before the 900px breakpoint: the longest
   numeral overflows its cell from about 1050px down. Drop to two there. */
@media (max-width:1060px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .stats{grid-template-columns:minmax(0,1fr)} }

/* ---------- FAQ groups ----------
   The category sits in its own column beside its questions, so a long list
   never loses its heading the way a flat accordion does. */
.qgroup{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.qgroup + .qgroup{margin-top:clamp(48px,6vw,88px);padding-top:clamp(48px,6vw,88px);
  border-top:1px solid #C9D4DA}
.qgroup__aside{position:sticky;top:calc(var(--hdrh) + 24px)}
@media (max-width:980px){
  .qgroup{grid-template-columns:minmax(0,1fr);gap:20px}
  .qgroup__aside{position:static}
}

/* ---------- two-up steps ----------
   Four cards in a three-column grid leave an orphan on its own row, which
   reads as a mistake. Two-up pairs them 1,2 / 3,4. Capped, because at full
   width two cards carrying three lines each stretch to an unreadable measure.
   Declared after the breakpoint block so the generic .steps rule there does
   not pull it back to three columns. */
.steps--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px}
@media (max-width:900px){
  .steps--2{grid-template-columns:minmax(0,1fr);max-width:520px}
}

/* Cards beside the clip while there is room for both, stacked when there is
   not. The cards need ~560px to keep two readable columns and the 9:16 clip
   about 340px, so below 1100px the row becomes a column and each goes full
   width — which is the layout that existed before. */
.specsplit{display:flex;gap:clamp(28px,3.5vw,48px);align-items:flex-start;
  margin-top:clamp(36px,4.5vw,52px)}
.specsplit__main{flex:1 1 auto;min-width:0}
/* Uncap the grid inside the split: the row, not the grid, owns the width. */
.specsplit .steps--2{max-width:none;margin-top:0}
.specsplit .vidfig--aside{flex:0 0 auto;margin-top:0}
.specsplit .vidfig--aside video{max-height:clamp(360px,34vw,520px)}
@media (max-width:1100px){
  .specsplit{flex-direction:column;gap:0}
  .specsplit .steps--2{max-width:1000px}
  .specsplit .vidfig--aside{margin-top:clamp(40px,5vw,64px)}
}

/* ============================================================
   FAQ — tabbed panels
   Version 2's structure kept intact: chips switch one panel at a
   time rather than stacking twelve categories down one page.
   Recoloured only: light ground, navy ink, bronze accent.
   ============================================================ */
.faqtabs{display:flex;flex-wrap:wrap;gap:10px;
  padding-bottom:clamp(24px,2.6vw,32px);border-bottom:1px solid #C9D4DA}
.faqtabs .chip[aria-selected="true"]{background:#DC9741;border-color:#DC9741;color:#071133}

.faqpanel{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start;padding-top:clamp(36px,4.5vw,56px)}
.faqpanel[hidden]{display:none}
.faqpanel__aside{position:sticky;top:calc(var(--hdrh) + 24px)}
.faqpanel__aside h2{margin:0;font-family:'Panchang','Roboto',system-ui,sans-serif;
  font-weight:400;font-size:clamp(24px,2.5vw,34px);line-height:1.18;letter-spacing:-.01em}
.faqpanel__aside p{margin:18px 0 0;font-size:15.5px;line-height:1.75;font-weight:300}
.faqpanel__count{margin-top:20px !important;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#B87A2A}

/* accordion */
.qa{border-bottom:1px solid #C9D4DA}
.qa:first-child{border-top:1px solid #C9D4DA}
.qa__q{width:100%;display:block;text-align:left;position:relative;cursor:pointer;
  background:none;border:0;font-family:inherit;padding:22px 46px 22px 0;
  font-size:clamp(16px,1.35vw,17.5px);line-height:1.45;font-weight:400;color:#071133}
.qa__q:hover{color:#B87A2A}
.qa__q::after{content:"";position:absolute;right:10px;top:50%;width:13px;height:13px;
  margin-top:-7px;
  background:
    linear-gradient(#DC9741,#DC9741) center/13px 1px no-repeat,
    linear-gradient(#DC9741,#DC9741) center/1px 13px no-repeat;
  transition:transform .3s ease}
.qa__q[aria-expanded="true"]::after{transform:rotate(45deg)}
.qa__a{padding:0 46px 26px 0;max-width:72ch;
  display:flex;flex-direction:column;gap:14px}
.qa__a[hidden]{display:none}
.qa__a p{margin:0;font-size:15.5px;line-height:1.8;font-weight:300}

/* callout — the one lifted surface inside a panel */
.callout{margin-top:clamp(26px,3vw,38px);padding:clamp(22px,2.6vw,32px);
  border-left:2px solid #DC9741;background:#E8EDEF;border-radius:0 12px 12px 0}
.callout .kick{color:#B87A2A}
.callout p{margin:12px 0 0;font-size:15.5px;line-height:1.8;font-weight:300}

/* prep list — the closing dark moment */
.prep{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.prep__list{margin:clamp(8px,1vw,0) 0 0;padding:0;list-style:none}
.prep__list li{display:flex;gap:20px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid rgba(201,212,218,.28)}
.prep__list li:first-child{border-top:1px solid rgba(201,212,218,.28)}
.prep__list li b{flex:0 0 auto;font-size:12px;letter-spacing:.14em;font-weight:400;color:#DC9741;padding-top:4px}
.prep__list li span{font-size:16px;line-height:1.6;font-weight:300}

@media (max-width:980px){
  .faqpanel{grid-template-columns:minmax(0,1fr);gap:24px}
  .faqpanel__aside{position:static}
  .prep{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ---------- bronze band heading ----------
   Was an inline style repeated across five pages. Two changes: a lower floor
   so it stops filling the column on a phone, and balanced wrapping, because
   "It starts with / an / assessment." left a one-word orphan mid-headline.
   text-wrap:balance is progressive — browsers without it just wrap normally. */
.split__text h2{margin:0;font-size:clamp(26px,3.9vw,50px);line-height:1.14;
  letter-spacing:-.01em;color:#FFFFFF;text-wrap:balance}

/* Same treatment for the rest of the display sizes: a headline should never
   drop a single short word onto its own line. */
.h1,.h2,.h3,.faqpanel__aside h2,.outcome h2,.outcome h3{text-wrap:balance}

/* ---------- flow rows ----------
   Five steps as editorial rows rather than cards. Cards boxed each step and
   broke the reading order into five separate objects; rows let the eye run
   straight down the numerals and read across. Numeral, then title with its
   one-line summary, then the body. */
/* Capped to its own content. The body column was minmax(0,1fr), so on a wide
   screen it stretched to 1157px while the capped paragraph filled only 533px
   of it, leaving 600px of empty ruled space and making the whole block look
   shoved to the left. The rules now end where the text ends. */
.flow{margin-top:clamp(36px,4.5vw,56px);border-top:1px solid #C9D4DA;max-width:1060px}
.flow__item{display:grid;
  grid-template-columns:auto minmax(0,clamp(190px,21vw,300px)) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);align-items:start;
  padding:clamp(26px,3.2vw,42px) 0;border-bottom:1px solid #C9D4DA}
.flow__n{font-family:'Panchang','Roboto',system-ui,sans-serif;font-weight:400;
  font-size:clamp(27px,2.8vw,38px);line-height:1.05;letter-spacing:.02em;
  color:#DC9741;min-width:2.4ch}
/* Roboto 400, matching how the homepage sets its step titles. Panchang is
   reserved for the band headings above. */
.flow__t{margin:0;font-family:'Roboto',system-ui,sans-serif;font-weight:400;
  font-size:clamp(18px,1.7vw,23px);line-height:1.26}
.flow__s{margin:8px 0 0;font-size:14.5px;line-height:1.5;font-weight:400;color:#B87A2A}
/* Capped: the body column runs to 835px on a wide screen, which is over a
   hundred characters a line. The brief asks for short measures. */
.flow__b{margin:0;font-size:15.5px;line-height:1.78;font-weight:300;max-width:62ch}

/* On a navy band the rules and body lift to stay legible. */
.flow--dark{border-top-color:rgba(201,212,218,.28)}
.flow--dark .flow__item{border-bottom-color:rgba(201,212,218,.28)}
.flow--dark .flow__t{color:#F3EFE6}
.flow--dark .flow__b{color:#F3EFE6;opacity:.86}

@media (max-width:900px){
  .flow__item{grid-template-columns:auto minmax(0,1fr);gap:14px 20px}
  .flow__b{grid-column:2}
}

/* ---------- centred block ----------
   A block narrower than its band, centred within it, with its contents still
   left-aligned. The flow rows are capped at a readable measure, so left-
   pinning them left a growing gap on the right as the screen widened. */
.inner{max-width:1060px;margin-inline:auto}

/* ---------- generic tab panel ----------
   The therapies page uses the same chips-switch-a-panel pattern as the FAQ. */
.tabpanel{padding-top:clamp(36px,4.5vw,56px)}
.tabpanel[hidden]{display:none}
/* A video sits where a photograph would in a feature row. The room clip is
   anamorphic: coded 1080x1080 but it displays 9:16, so ffprobe and the browser
   report different sizes. Forcing 1/1 cropped the top and bottom off it.
   Capped by height, or a 9:16 clip fills half the row and towers. */
.feat__media video{display:block;width:auto;max-width:100%;
  aspect-ratio:9/16;max-height:clamp(360px,48vw,560px);
  object-fit:cover;border-radius:15px;background:#071133;margin-inline:auto}

/* ---------- standalone video figure ---------- */
.vidfig{margin:clamp(40px,5vw,64px) 0 0;display:flex;flex-direction:column;gap:14px;
  align-items:flex-start;max-width:520px}
/* Height drives the box, not width. With width:100% the max-height fought
   the aspect-ratio and object-fit cropped the sides off a 9:16 clip. */
.vidfig video{display:block;width:auto;max-width:100%;aspect-ratio:9/16;
  max-height:clamp(380px,50vw,600px);object-fit:cover;
  border-radius:15px;background:#071133}
.vidfig figcaption{font-size:14px;line-height:1.6;color:#071133;opacity:.8}