/* Spine & Scoliosis Clinic — theme
   Palette sampled from the client's live site: primary #257CE1, teal accent #5EEAD4. */
:root{
  --blue:#257CE1;
  --blue-deep:#1B64B9;
  --blue-ink:#123A6B;
  --teal:#5EEAD4;
  --teal-deep:#2BB9A3;
  --ink:#1c2430;
  --gray:#4D4D4D;
  --muted:#6b7480;
  --line:#e6ecf3;
  --bg:#ffffff;
  --bg-soft:#F8FBFF;
  --bg-blue:#0f2f57;
  --white:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 40px -18px rgba(18,58,107,.28);
  --shadow-sm:0 8px 22px -12px rgba(18,58,107,.25);
  --wrap:1180px;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px;
}
h1,h2,h3,h4{font-weight:700;line-height:1.15;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.01em}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
a{color:var(--blue);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.8rem}
.eyebrow.on-dark{color:var(--teal)}
.center{text-align:center}
.section{padding:84px 0}
.section.soft{background:var(--bg-soft)}
.lead{font-size:1.15rem;color:var(--gray);max-width:640px}
.center .lead{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:1rem;padding:.85em 1.6em;
  border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.18s ease;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 22px -10px rgba(37,124,225,.7)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost.on-dark:hover{background:#fff;color:var(--blue-deep);border-color:#fff}
.btn-lg{padding:1.05em 2em;font-size:1.05rem}

/* Top bar */
.topbar{background:var(--blue-ink);color:#dbe7f7;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:8px;padding-bottom:8px}
.topbar a{color:#fff;font-weight:600}
.topbar .tb-hours{opacity:.85}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 24px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink);font-size:1.05rem;line-height:1.1;flex-shrink:0}
.brand .mark{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--teal-deep));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.15rem;box-shadow:var(--shadow-sm)}
.brand small{display:block;font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.brand-logo{height:104px;width:auto;display:block;flex-shrink:0}
.footer-logo{height:48px;width:auto;margin-bottom:16px;display:block}
@media(max-width:760px){.brand-logo{height:72px}}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu>li>a{display:block;padding:10px 14px;color:var(--ink);font-weight:500;border-radius:9px;font-size:.97rem}
.menu>li>a:hover,.menu>li.active>a{color:var(--blue);background:var(--bg-soft)}
.has-drop>a::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6}
.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.16s ease;list-style:none;margin:0}
.menu>li:hover .drop,.menu>li:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop li a{display:block;padding:9px 12px;border-radius:8px;color:var(--gray);font-size:.93rem}
.drop li a:hover{background:var(--bg-soft);color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-phone{font-weight:700;color:var(--ink);white-space:nowrap}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:3px;background:var(--ink);border-radius:2px;transition:.2s}

/* Hero */
.hero{position:relative;background:
    radial-gradient(1100px 500px at 80% -10%,rgba(94,234,212,.22),transparent 60%),
    linear-gradient(160deg,#f3f9ff 0%,#eaf3ff 55%,#e5eefc 100%);
  overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"text art" "trust art";
  column-gap:48px;row-gap:20px;align-items:center;padding-top:70px;padding-bottom:80px}
.hero-text{grid-area:text}
.hero-art{grid-area:art}
.hero-trust{grid-area:trust}
.hero h1 span{color:var(--blue)}
.hero .sub{font-size:1.2rem;color:var(--gray);max-width:520px;margin-bottom:1.6rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.4rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;font-size:.9rem;color:var(--gray);font-weight:500}
.hero-trust span{display:flex;align-items:center;gap:7px}
.hero-trust .dot{width:8px;height:8px;border-radius:50%;background:var(--teal-deep)}
.hero-art{position:relative;aspect-ratio:4/5;border-radius:26px;box-shadow:var(--shadow);
  background:linear-gradient(160deg,#cfe2ff,#9dc4f2);display:grid;place-items:center;color:#33507a}
.hero-art .ph{color:#33507a;font-weight:600;text-align:center;padding:20px;opacity:.8}
.hero-badge{position:absolute;left:-18px;bottom:32px;background:#fff;border-radius:16px;padding:14px 18px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;font-weight:600}
.hero-badge .big{font-size:1.5rem;color:var(--blue);font-weight:800;line-height:1}
.hero-badge small{color:var(--muted);font-weight:500}

/* Trust strip */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px 24px}
.trust-item{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.98rem}
.trust-item .ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--bg-soft);color:var(--blue);
  display:grid;place-items:center;font-size:1.15rem}

/* Section heading block */
.sec-head{max-width:660px;margin:0 auto 52px}
.sec-head.left{margin-left:0}

/* E.A.T. protocol */
.eat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.eat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;
  box-shadow:var(--shadow-sm);opacity:0;transform:translateY(26px);transition:.6s ease}
.eat-card.in{opacity:1;transform:none}
.eat-card:nth-child(2){transition-delay:.15s}
.eat-card:nth-child(3){transition-delay:.3s}
.eat-letter{font-size:2.4rem;font-weight:800;color:var(--teal-deep);line-height:1}
.eat-card h3{margin:.5rem 0 .4rem}
.eat-card p{color:var(--gray);margin:0;font-size:.97rem}
.eat-arrow{position:absolute;top:50%;right:-16px;transform:translateY(-50%);color:var(--blue);font-size:1.6rem;
  z-index:2;opacity:.55}
.eat-grid .eat-card:last-child .eat-arrow{display:none}

/* Tech band (dark) */
.tech{background:linear-gradient(160deg,#0f2f57,#123a6b);color:#dfeafb}
.tech h2{color:#fff}
.tech .lead{color:#bcd2ef}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.tech-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:30px 26px;transition:.25s}
.tech-card{overflow:hidden;padding-top:0}
.tech-card:hover{background:rgba(94,234,212,.1);border-color:rgba(94,234,212,.4);transform:translateY(-4px)}
.tc-img{margin:0 -26px 20px;height:180px;overflow:hidden}
.tc-img img{width:100%;height:100%;object-fit:cover;display:block}
.tech-card .ic{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--teal),var(--blue));
  display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px}
.tech-card h3{color:#fff}
.tech-card p{color:#bcd2ef;font-size:.95rem;margin:0}

/* Spine / where does it hurt */
.spine-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.spine-figure{position:relative;background:var(--bg-soft);border-radius:24px;padding:30px;min-height:420px;
  display:grid;place-items:center}
.spine-svg{width:100%;max-width:260px;height:auto}
.spine-hot{cursor:pointer;transition:.2s;fill:var(--blue);opacity:.28}
.spine-hot:hover,.spine-hot.active{opacity:.9;fill:var(--teal-deep)}
.spine-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.spine-list a{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:#fff;
  border:1px solid var(--line);border-radius:12px;font-weight:600;color:var(--ink);transition:.18s}
.spine-list a:hover,.spine-list a.active{border-color:var(--blue);background:var(--bg-soft);color:var(--blue);transform:translateX(4px)}
/* Spine showcase — moved high on the home page and made to pop */
.spine-section{background:var(--bg-soft)}
.spine-card{position:relative;border-radius:28px;padding:48px 42px;border:2px solid transparent;
  box-shadow:0 34px 80px -34px rgba(37,124,225,.45);
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(125deg,var(--teal),var(--blue)) border-box}
.spine-card .sec-head{margin-bottom:32px}
.spine-card h2{font-size:clamp(2.1rem,4vw,3.2rem)}
.pill{display:inline-block;background:linear-gradient(120deg,var(--blue),var(--teal-deep));color:#fff;
  font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 18px;border-radius:999px;
  margin-bottom:16px;box-shadow:0 8px 20px -8px rgba(37,124,225,.7)}
.spine-section .spine-svg{max-width:300px}
.spine-section .spine-list a{padding:17px 20px;font-size:1.05rem}
@media(max-width:760px){.spine-card{padding:30px 20px}}
.spine-list a span.arr{color:var(--blue)}

/* Doctor */
.doc{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.doc-photo{aspect-ratio:4/5;border-radius:22px;background:linear-gradient(160deg,#dbe9fb,#b9d3f2);box-shadow:var(--shadow);
  display:grid;place-items:center;color:#33507a;font-weight:600;text-align:center;padding:20px}

/* Stats */
.stats{background:linear-gradient(120deg,var(--blue),var(--blue-deep));color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;padding:56px 24px}
.stat .num{font-size:2.6rem;font-weight:800;line-height:1;color:#fff}
.stat .lbl{font-size:.95rem;color:#dbe7f7;margin-top:6px}

/* Reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.stars{color:#f5a623;letter-spacing:2px;margin-bottom:10px}
.rev-card p{font-style:italic;color:var(--gray)}
.rev-card .who{font-weight:700;color:var(--ink);font-style:normal;margin-top:12px}

/* Map / area */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.map-frame{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);min-height:340px}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* CTA band */
.cta-band{background:linear-gradient(135deg,#0f2f57,#1B64B9);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#cfe0f7;max-width:560px;margin:0 auto 1.6rem}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Footer */
.footer{background:#0c1522;color:#9fb0c4;padding:64px 0 0}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px}
.footer h4{color:#fff;font-size:1rem;letter-spacing:.03em;margin-bottom:1rem}
.footer a{color:#9fb0c4}
.footer a:hover{color:#fff}
.footer .f-brand .mark{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--teal-deep));
  display:grid;place-items:center;color:#fff;font-weight:800}
.footer .f-brand .row{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;margin-bottom:14px}
.f-links{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.95rem}
.f-contact{font-size:.95rem;display:grid;gap:10px}
.f-social{display:flex;gap:10px;margin-top:16px}
.f-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.f-social a:hover{background:var(--blue)}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding:20px 0;font-size:.85rem}
.f-bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Mobile sticky call bar */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:#fff;border-top:1px solid var(--line);
  padding:8px;gap:8px;box-shadow:0 -8px 24px -14px rgba(0,0,0,.3)}
.callbar a{flex:1;justify-content:center;text-align:center}
.callbar .btn{width:100%}

/* Mobile drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:#fff;z-index:80;transform:translateX(100%);
  transition:.28s ease;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);padding:22px;overflow-y:auto}
.drawer.open{transform:none}
.drawer .close{background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--ink);float:right}
.drawer nav{clear:both;margin-top:20px}
.drawer nav a{display:block;padding:12px 6px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
.drawer nav details summary{padding:12px 6px;border-bottom:1px solid var(--line);font-weight:600;cursor:pointer;list-style:none}
.drawer nav details a{padding-left:20px;font-weight:400;font-size:.95rem}
.overlay{position:fixed;inset:0;background:rgba(10,20,35,.45);z-index:75;opacity:0;visibility:hidden;transition:.25s}
.overlay.show{opacity:1;visibility:visible}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:.6s ease}
.reveal.in{opacity:1;transform:none}

/* ---- Photos filling their frames ---- */
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;border-radius:26px}
.hero-art .hero-badge{z-index:2}
.doc-photo,.split-img{padding:0;overflow:hidden}
.doc-photo img,.split-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Inner pages ---- */
.pagehero{background:
    radial-gradient(900px 420px at 85% -20%,rgba(94,234,212,.2),transparent 60%),
    linear-gradient(160deg,#f3f9ff,#e7f0fd);padding:56px 0 60px;border-bottom:1px solid var(--line)}
.pagehero .crumbs{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.pagehero .crumbs a{color:var(--muted)}
.pagehero h1{max-width:15ch}
.pagehero .sub{font-size:1.15rem;color:var(--gray);max-width:620px;margin:0 0 1.4rem}
.pagehero .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* Page hero with a photo/carousel beside the text (CBP uses the E.A.T. slideshow). */
.pagehero .hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.pagehero .hero-split h1{max-width:none}
.pagehero .hero-split .sub{max-width:none}
.pagehero .hero-media{min-width:0}
.pagehero .hero-media .slider{margin:0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.split.rev{direction:rtl}.split.rev>*{direction:ltr}
.split-img{aspect-ratio:5/4;border-radius:20px;background:linear-gradient(160deg,#dbe9fb,#b9d3f2);
  box-shadow:var(--shadow-sm);display:grid;place-items:center;color:#33507a;font-weight:600;text-align:center;
  padding:0}   /* was 20px, which drew the gradient as a blue frame around every photo */
/* A portrait photo in a split column. The 5:4 box crops ~47% of a 2:3 photo, which on
   personal training was cutting off both faces and the feet. "natural" drops the fixed box
   and lets the photo keep its own shape; the card treatment moves onto the img itself. */
.split-img.natural{aspect-ratio:auto;background:none;box-shadow:none}
.split-img.natural img{width:100%;max-width:460px;height:auto;
  object-fit:contain;border-radius:20px;box-shadow:var(--shadow-sm)}
.split-img.natural.sm img{max-width:380px}   /* per-page: smaller, for a softer source */
.check-list{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:12px}
/* Full-width bands: a 5-item list across 1240px reads sparse in one column. */
.check-list.two{grid-template-columns:1fr 1fr;gap:14px 44px;max-width:900px;margin-inline:auto;text-align:left}
.check-list li{position:relative;padding-left:34px;color:var(--gray)}
.check-list li::before{content:"✓";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;
  background:var(--teal);color:#0f2f57;font-weight:800;font-size:.8rem;display:grid;place-items:center}
/* Lead-in band between the treatment cards and the patient quote.
   Was saturated --teal-deep with near-black text: passed contrast (5.8:1) but read heavy.
   Now a soft mint with deep-teal text at 8.8:1, with teal hairlines top and bottom so it
   still separates the white section above from the soft section below.
   (White text on the OLD teal would have been 2.5:1, i.e. worse. Do not go back to that.) */
.band{background:#E4F7F2;color:#0d4f45;text-align:center;padding:30px 0;
  border-top:2px solid var(--teal-deep);border-bottom:2px solid var(--teal-deep)}
.band p{margin:0;font-size:1.2rem;font-weight:600;max-width:820px;margin-inline:auto}
.band .hl{color:var(--teal-deep)}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.tcard{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm);
  transition:.2s;color:var(--ink)}
.tcard:hover{transform:translateY(-4px);border-color:var(--blue)}
.tcard h3{font-size:1.08rem;margin:0 0 .3rem}
.tcard p{margin:0;color:var(--gray);font-size:.93rem}
.tcard .arr{color:var(--blue);font-weight:700}
.quote{max-width:760px;margin:0 auto;text-align:center;font-size:1.35rem;line-height:1.5;color:var(--ink);font-style:italic}
.quote .who{display:block;font-size:1rem;font-style:normal;font-weight:700;color:var(--blue);margin-top:16px}
.form-embed{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden}
.form-embed iframe{width:100%;min-height:950px;border:0;border-radius:20px;display:block}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow-sm)}
.info-card h3{font-size:1.05rem}
.info-card .ic{width:44px;height:44px;border-radius:11px;background:var(--bg-soft);color:var(--blue);
  display:grid;place-items:center;font-size:1.2rem;margin-bottom:12px}
.pdf-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:720px}
.pdf-list a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm);transition:.18s}
.pdf-list a:hover{border-color:var(--blue);color:var(--blue);transform:translateX(4px)}
.pdf-list .ic{width:40px;height:40px;border-radius:10px;background:var(--bg-soft);color:var(--blue);
  display:grid;place-items:center;font-size:1.1rem}
.prose{max-width:760px}
.prose h2{margin-top:1.6em}
/* An eyebrow immediately followed by the section heading should not inherit the
   1.6em gap meant for headings that break up running text. */
.prose > .eyebrow + h2, .prose > h2:first-child{margin-top:0}

/* Responsive */
@media(max-width:1100px){          /* collapse nav to hamburger before the menu crowds the logo */
  .menu,.nav-phone{display:none}
  .burger{display:flex}
}
@media(max-width:940px){
  .split,.info-grid,.tcards{grid-template-columns:1fr}
  .pagehero .hero-split{grid-template-columns:1fr;gap:32px}
  .check-list.two{grid-template-columns:1fr}
  .split.rev{direction:ltr}
  .form-embed iframe{min-height:1050px}
  /* mobile hero: headline -> photo -> trust list; Book Now/Call removed (header + sticky bar cover it) */
  .hero .wrap{display:flex;flex-direction:column;gap:22px}
  .hero-text{order:1}
  .hero-art{order:2}
  .hero-trust{order:3}
  .hero-cta{display:none}
  .hero-art{width:100%;max-width:460px;margin:0 auto;aspect-ratio:auto;background:none;box-shadow:none}
  .hero-art img{position:static;display:block;width:100%;height:auto;border-radius:22px;box-shadow:var(--shadow)}
  .hero-badge{display:none}
  .trust-strip .wrap{grid-template-columns:1fr 1fr}
  .tech-grid,.rev-grid,.eat-grid{grid-template-columns:1fr 1fr}
  .eat-arrow{display:none}
  .spine-wrap,.doc,.area-grid{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .menu,.nav-phone{display:none}
  .burger{display:flex}
  .topbar .tb-hours{display:none}
  .section{padding:60px 0}
  .callbar{display:flex}
  body{padding-bottom:68px}
  .tech-grid,.rev-grid,.eat-grid,.trust-strip .wrap,.stats .wrap,.footer .cols{grid-template-columns:1fr}
  .hero-cta .btn-ghost{display:none} /* sticky bar covers calling on mobile */
  .spine-section{display:none}      /* "Where Does It Hurt?" too tight for phones */
}

/* ---- Photo galleries (client photo drop 2026-08-05) ------------------------
   Sources max out at 640px, so cards are capped around 420px displayed and
   cropped to a consistent 4:3 so mixed portrait/landscape shots still line up. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal-item{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(20,40,70,.06)}
.gal-item img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .35s ease}
.gal-item:hover img{transform:scale(1.04)}
@media(max-width:940px){.gallery{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}

/* ---- Slideshow / carousel -------------------------------------------------
   Built on native scroll-snap so it swipes on touch and still works with JS off.
   JS only adds the arrows, dots and caption. Two slides up on desktop because the
   source photos cap at 640px and a single full-width slide would upscale and blur. */
.slider{position:relative}
.sl-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  border-radius:var(--radius)}
.sl-track::-webkit-scrollbar{display:none}
.sl-track:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.sl-slide{flex:0 0 calc(50% - 8px);margin:0;scroll-snap-align:start;
  border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(20,40,70,.06)}
.sl-slide img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sl-arrow{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);color:var(--ink);font-size:1.5rem;line-height:1;
  cursor:pointer;box-shadow:0 2px 10px rgba(20,40,70,.18);
  display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s}
.sl-arrow:hover{background:#fff}
.sl-arrow[disabled]{opacity:.3;cursor:default}
.sl-prev{left:10px}
.sl-next{right:10px}
.sl-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.sl-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#cfdcea;
  cursor:pointer;transition:background .2s,width .2s}
.sl-dot.on{background:var(--blue);width:24px;border-radius:5px}
.sl-caption{text-align:center;color:var(--muted);font-size:.93rem;margin:12px 0 0;min-height:1.4em}
@media(max-width:760px){
  .sl-slide{flex:0 0 100%}
  .sl-arrow{width:40px;height:40px;font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){.sl-track{scroll-behavior:auto}}

/* ---- Service / condition cards WITH a photo (services.html) ----------------
   .tcard.has-img drops the padding onto an inner .tc-body so the image can go
   edge to edge at the top of the card. Plain .tcard (the treatment cards on the
   condition pages) is untouched and keeps its own padding. */
.tcard.has-img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tc-thumb{display:block;overflow:hidden;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.tc-thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s ease}
.tcard.has-img:hover .tc-thumb img{transform:scale(1.05)}
.tc-body{display:block;padding:20px 22px 22px}
.tcard.has-img .arr{margin-top:.6rem;display:inline-block}

/* ---- Condition pages: "Signs It May Be..." card -----------------------------
   Client note: "the SIGNS IT MAY BE, my computer I must scroll down to see this,
   any way we can make it part of the page?" It used to be its own full section,
   so ~170px of section padding pushed it below the fold. It now sits inside the
   intro section as a card, and the list runs two columns so it is shorter. */
.signs-card{margin-top:52px;background:var(--bg-soft);border:1px solid var(--line);
  border-left:5px solid var(--teal-deep);border-radius:var(--radius);
  padding:32px 34px;box-shadow:var(--shadow-sm)}
.signs-head{margin-bottom:18px}
.signs-head .eyebrow{margin-bottom:.4rem}
.signs-head h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:0}
.signs-list{columns:2;column-gap:38px;margin:0 0 14px}
.signs-list li{break-inside:avoid;margin-bottom:.55rem}
.signs-foot{margin:0;color:var(--gray);font-size:.97rem}
@media(max-width:760px){
  .signs-card{margin-top:36px;padding:24px 22px}
  .signs-list{columns:1}
}

/* "Request Appointment" is a much longer label than the old "Book Now", so the header
   button needs to give ground before it starts crowding the logo and the burger. */
.nav-book{font-size:.92rem;padding:.7em 1.15em}
@media(max-width:1080px){.nav-book{font-size:.86rem;padding:.62em .95em}}
@media(max-width:860px){.nav-book{font-size:.8rem;padding:.58em .8em}}
@media(max-width:520px){.nav-book{display:none}} /* bigger logo needs the room; sticky bottom bar covers it */

/* Condition pages show four treatment cards (chiropractic, physiotherapy, personal
   training, nutrition). In the default 3-column grid the fourth would sit alone on
   its own row, so give that grid its own 4-up track. */
.tcards.four{grid-template-columns:repeat(4,1fr);gap:18px}
.tcards.four .tcard{padding:20px 18px}
.tcards.four h3{font-size:1rem}
@media(max-width:1080px){.tcards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tcards.four{grid-template-columns:1fr}}

/* ---- FAQ accordion (native <details>, no JS) -------------------------------- */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 44px 20px 2px;position:relative;
  font-weight:600;font-size:1.06rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--blue)}
.faq-item summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.faq-item summary::after{content:"";position:absolute;right:10px;top:50%;width:.55em;height:.55em;
  margin-top:-.35em;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-.15em}
.faq-a{padding:0 44px 22px 2px;color:var(--gray)}
.faq-a p{margin:0}
@media(prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}}

/* ---- E.A.T. band with photos (chiropractic page) --------------------------- */
.eat-card{overflow:hidden;padding:0}
.eat-img{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.eat-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.eat-body{padding:22px 24px 26px}
.eat-body .eat-letter{font-size:2rem;line-height:1}
.eat-body h3{margin:.35rem 0 .45rem}
.eat-body p{color:var(--gray);margin:0;font-size:.97rem}
/* Cards are revealed by IntersectionObserver. Only hide them if JS is actually running,
   otherwise a script failure would leave the whole band blank. */
.eat-card{opacity:1;transform:none}
html.js .eat-card{opacity:0;transform:translateY(26px)}
html.js .eat-card.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .eat-card{opacity:1;transform:none}}
@media(max-width:940px){.eat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.eat-grid{grid-template-columns:1fr}}

/* ---- Scoliosis bracing animation ------------------------------------------- */
.brace-art{text-align:center}
.brace-art img{max-width:420px;width:100%;margin:0 auto;border-radius:var(--radius)}
.brace-cap{margin:14px auto 0;max-width:420px;color:var(--muted);font-size:.92rem;line-height:1.5}

/* ---- Overview card rows that do not divide evenly ---------------------------
   10 services in a 3-column grid strands the 10th card alone on the left.
   .flow lays them out as centred flex rows so a short final row sits centred. */
.tcards.flow{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.tcards.flow > .tcard{flex:0 1 calc(33.333% - 14px);min-width:250px}
@media(max-width:940px){.tcards.flow > .tcard{flex:0 1 calc(50% - 10px)}}
@media(max-width:600px){.tcards.flow > .tcard{flex:1 1 100%}}

/* ---- Video testimonials (Vimeo) -------------------------------------------
   Five items, so a rigid 3-column grid would leave two adrift. Centred flex
   rows instead. Iframes are lazy: five players is a lot to load up front. */
.vid-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.vid-item{flex:0 1 calc(33.333% - 16px);min-width:280px;margin:0}
.vid-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:#0f2f57;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-item figcaption{margin-top:12px;text-align:center;font-weight:600;color:var(--ink)}
@media(max-width:940px){.vid-item{flex:0 1 calc(50% - 12px)}}
@media(max-width:620px){.vid-item{flex:1 1 100%}}


}

/* ---- Newspaper feature, shown whole -----------------------------------------
   NOT inside .doc-photo: that container is aspect-ratio 4/5 with overflow:hidden
   and object-fit:cover, which sliced the masthead off the article. This one sizes
   to the image's own proportions so the whole page is readable. */
.news-art{margin:0;align-self:center}
.news-art img{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}
.news-art figcaption{margin-top:12px;font-size:.9rem;color:var(--muted);text-align:center}

/* ---- Click-to-enlarge lightbox --------------------------------------------- */
.zoomable{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.zoomable img{transition:transform .3s ease}
.zoomable:hover img{transform:scale(1.02)}
.zoomable:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:12px}
.zoom-hint{position:absolute;right:10px;bottom:10px;background:rgba(18,58,107,.88);color:#fff;
  font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;pointer-events:none;
  opacity:0;transition:opacity .25s ease}
.zoomable:hover .zoom-hint,.zoomable:focus-visible .zoom-hint{opacity:1}
/* .lightbox sets display:flex, and a class selector outranks the [hidden]
   attribute's display:none. Without this rule, lb.hidden=true does nothing
   and the overlay can never be dismissed. Keep it directly above. */
.lightbox[hidden]{display:none !important}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,20,36,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.lb-scroll{flex:1;width:100%;overflow:auto;display:flex;align-items:flex-start;justify-content:center;
  padding:64px 20px 12px}
.lightbox img{max-width:min(1500px,94vw);height:auto;border-radius:8px;background:#fff;cursor:zoom-in;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.lightbox.actual img{max-width:none;width:2400px;cursor:zoom-out}
.lb-close{position:absolute;top:14px;right:18px;z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-tip{color:#cfe0f5;font-size:.85rem;margin:0;padding:0 20px 16px;text-align:center}
@media(prefers-reduced-motion:reduce){.zoomable:hover img{transform:none}}

/* ---- Single-slide carousel (E.A.T. inside the Our Clinic split) ------------- */
.slider.solo .sl-slide{flex:0 0 100%}
.eat-slider-col{align-self:center}
.eat-slider-col .sl-slide img{aspect-ratio:4/3}
.eat-slider-col .sl-caption{font-size:.9rem;margin-top:10px}

/* a single emphatic line inside body copy, e.g. "You have been rear-ended." */
.lede-strong{font-size:1.25rem;font-weight:700;color:var(--blue-ink);margin:1.1rem 0}

/* ---- Three-beat escalation band (auto injury) --------------------------------
   "First SURPRISE. Then ANGER. Then PAIN." read as a sequence rather than a
   sentence. Dark band so it lands as a hard stop between two light sections. */
.beats-band{background:var(--bg-blue);padding:46px 0}
.beats{display:flex;align-items:center;justify-content:center;gap:0;
  list-style:none;margin:0;padding:0;flex-wrap:wrap}
.beat{display:flex;flex-direction:column;align-items:center;padding:0 clamp(18px,4vw,52px);
  position:relative}
.beat + .beat::before{content:"";position:absolute;left:0;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);opacity:.85}
.beat-when{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:6px}
.beat-word{font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;color:#fff;line-height:1}
/* the sequence escalates: each word a shade heavier than the last */
.beat:nth-child(1) .beat-word{opacity:.72}
.beat:nth-child(2) .beat-word{opacity:.88}
.beat:nth-child(3) .beat-word{opacity:1;color:#fff;text-shadow:0 0 26px rgba(94,234,212,.35)}
@media(max-width:620px){
  .beats{flex-direction:column;gap:22px}
  .beat{padding:0}
  .beat + .beat::before{left:50%;top:-16px;margin:0 0 0 -5px;transform:rotate(45deg)}
}

/* ---- Case-study figure + SRS-22r call to action (scoliosis) ----------------- */
.case-figure{margin:0 auto 40px;max-width:900px}
.case-figure img{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:12px;background:#fff}
.case-figure figcaption{margin-top:12px;font-size:.9rem;color:var(--muted);text-align:center}
.srs-cta{max-width:720px;margin:0 auto;text-align:center;background:var(--bg-soft);
  border:1px solid var(--line);border-left:5px solid var(--teal-deep);
  border-radius:var(--radius);padding:32px 30px}
.srs-cta h3{margin:0 0 .5rem}
.srs-cta p{color:var(--gray)}
.srs-cta p:last-child{margin:1.2rem 0 0}

/* ---- Standalone video figure (laser page) ----------------------------------- */
.video-figure{margin:0 auto;max-width:900px}
.video-figure .vid-frame{border-radius:var(--radius)}
/* Prose sections were running airy: tighten the list and the trailing paragraph gap. */
.prose .check-list{margin:1rem 0 1.4rem}
.prose .check-list li{padding-left:32px}
.prose > p:last-child{margin-bottom:0}

/* ---- Contour Light device shot ---------------------------------------------
   The supplied product photo sits on a pure black background. Rather than cut it
   out at 183px wide, it goes on a dark panel with screen blending, which drops the
   black and keeps the red glow. Falls back to a black block if blending is absent. */
.device-art{margin:0;align-self:center;background:radial-gradient(circle at 50% 40%,#16233a,#080d16);
  border:1px solid #1d2b44;border-radius:var(--radius);padding:28px 20px 20px;text-align:center}
.device-art img{width:auto;max-width:220px;margin:0 auto;mix-blend-mode:screen}
.device-art figcaption{margin-top:16px;color:#a8c0dc;font-size:.88rem}
/* four-across card grid, used for the Contour Light reasons */
.info-grid.four-up{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.info-grid.four-up{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.info-grid.four-up{grid-template-columns:1fr}}
.footnote{margin:26px auto 0;max-width:820px;font-size:.85rem;color:var(--muted);text-align:center}
.fn-ref{font-weight:700;text-decoration:none}

/* five cards do not divide by three, so centre the short final row */
.info-grid.flow{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.info-grid.flow > .info-card{flex:0 1 calc(33.333% - 15px);min-width:260px}
@media(max-width:940px){.info-grid.flow > .info-card{flex:0 1 calc(50% - 11px)}}
@media(max-width:600px){.info-grid.flow > .info-card{flex:1 1 100%}}

/* ---- Cited paper card (SEAS research) --------------------------------------
   A link, so the whole block is clickable rather than just the arrow. */
.paper-card{display:block;max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-left:5px solid var(--teal-deep);border-radius:var(--radius);padding:30px 32px;
  box-shadow:var(--shadow-sm);transition:.2s ease}
.paper-card:hover{transform:translateY(-3px);border-color:var(--blue);border-left-color:var(--blue)}
.paper-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);margin-bottom:.9rem}
.paper-card h3{font-size:1.12rem;line-height:1.4;color:var(--ink);margin:0 0 .8rem}
.paper-meta{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0 0 1rem}
.paper-card .arr{color:var(--blue);font-weight:700;font-size:.95rem}
@media(max-width:600px){.paper-card{padding:24px 22px}}

/* ---- "Call today to attend" band (Youth & Vitality Workshop) ---------------
   Sits directly under the hero, so the booking action is the first thing after
   the headline rather than waiting for the CTA at the foot of the page. */
.attend-band{background:linear-gradient(135deg,#0f2f57,#1B64B9);color:#fff;padding:48px 0}
.attend{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center}
.attend h2{color:#fff;margin:0 0 .6rem;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.attend p{color:#cfe0f7;margin:0;max-width:560px}
.attend-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.attend-cta .btn{justify-content:center}
@media(max-width:860px){
  .attend{grid-template-columns:1fr;gap:24px}
  .attend-cta{flex-direction:row;flex-wrap:wrap}
  .attend-cta .btn{flex:1 1 auto}
}