/* ============================================================
   THE ORTHOTIC WORKS — production stylesheet (self-contained)
   Static site build. No external CSS deps except the webfont.
   ============================================================ */

/* ---- Webfont (Hanken Grotesk substitutes Sinkin Sans Light) ---- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap');

:root {
  /* Brand */
  --tow-navy:#002a54; --tow-cyan:#00b4e6;
  --navy-900:#001528; --navy-800:#001f3f; --navy-700:#002a54; --navy-600:#073a6b;
  --navy-500:#1d5085; --navy-400:#4a73a0; --navy-300:#8aa4c2; --navy-200:#c2d1e0;
  --navy-100:#e4ebf2; --navy-50:#f3f6fa;
  --cyan-700:#007fa6; --cyan-600:#009ccb; --cyan-500:#00b4e6; --cyan-400:#38c6ee;
  --cyan-300:#74d7f3; --cyan-200:#aae6f8; --cyan-100:#d6f3fc; --cyan-50:#ecfaff;
  --grey-900:#14181d; --grey-800:#272d35; --grey-700:#3d4651; --grey-600:#5a6573;
  --grey-500:#7a8593; --grey-400:#9aa4b1; --grey-300:#c2c9d1; --grey-200:#dfe3e8;
  --grey-100:#eef1f4; --grey-50:#f7f9fb; --white:#fff;
  --success:#1f9d6b; --success-soft:#e3f4ec; --warning:#e0922f; --warning-soft:#fbf0df;
  --danger:#d24b4b; --danger-soft:#fae6e6;

  /* Semantic */
  --brand:var(--tow-navy); --brand-accent:var(--tow-cyan);
  --text-strong:var(--navy-700); --text-body:var(--grey-700); --text-muted:var(--grey-500); --text-faint:var(--grey-400);
  --text-link:var(--cyan-600);
  --surface-page:var(--grey-50); --surface-card:var(--white); --surface-sunken:var(--navy-50);
  --surface-brand:var(--navy-700); --surface-brand-deep:var(--navy-800); --surface-accent:var(--cyan-50);
  --border:var(--grey-200); --border-strong:var(--grey-300); --border-accent:var(--cyan-300); --divider:var(--grey-100);

  /* Type */
  --font-brand:'Hanken Grotesk','Sinkin Sans','Helvetica Neue',Arial,sans-serif;
  --font-sans:var(--font-brand);
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  /* Effects */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(0,42,84,.06);
  --shadow-sm:0 1px 3px rgba(0,42,84,.08),0 1px 2px rgba(0,42,84,.04);
  --shadow-md:0 4px 14px rgba(0,42,84,.10);
  --shadow-lg:0 12px 32px rgba(0,42,84,.14);
  --shadow-xl:0 24px 60px rgba(0,42,84,.18);
  --shadow-focus:0 0 0 3px rgba(0,180,230,.35);
  --ease:cubic-bezier(.4,0,.2,1);
  --container:1200px;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-sans); font-weight:var(--fw-regular);
  font-size:16px; line-height:1.55; color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:var(--text-link); text-decoration:none;}
a:hover{opacity:.85;}

h1,h2,h3,h4{font-family:var(--font-brand); font-weight:var(--fw-light); color:var(--text-strong); line-height:1.08; margin:0;}
.display{font-weight:var(--fw-light); line-height:1.08; letter-spacing:-.01em; color:var(--text-strong); margin:0;}
.h1{font-size:44px; letter-spacing:-.01em;}
.h2{font-size:32px; letter-spacing:-.01em;}
.h3{font-size:24px;}
.h4{font-size:20px; font-weight:var(--fw-medium);}
p{margin:0;}

.eyebrow{font-family:var(--font-brand); font-weight:var(--fw-semibold); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-600);}
.lockup{font-family:var(--font-brand); font-weight:var(--fw-light); text-transform:uppercase; letter-spacing:.14em; color:var(--text-strong);}
.lead{font-size:18px; font-weight:var(--fw-light); line-height:1.7; color:var(--text-body);}
.rule{height:3px; width:56px; background:var(--brand-accent); border:0; border-radius:var(--radius-pill); margin:18px 0 0;}
.rule.center{margin-left:auto; margin-right:auto;}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--container); margin:0 auto; padding:0 40px;}
.section{padding:84px 40px;}
.section .inner{max-width:var(--container); margin:0 auto;}
.center{text-align:center;}
.grid{display:grid; gap:28px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.split.rev{grid-template-columns:.9fr 1.1fr;}
.stack{display:flex; flex-direction:column;}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-brand); font-weight:var(--fw-medium); letter-spacing:.04em; line-height:1;
  border-radius:var(--radius-pill); cursor:pointer; border:1px solid transparent;
  padding:11px 22px; font-size:16px; transition:all .2s var(--ease); text-decoration:none;}
.btn:hover{opacity:1;}
.btn.lg{padding:15px 30px; font-size:18px;}
.btn.sm{padding:8px 16px; font-size:14px;}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand);}
.btn.primary:hover{background:var(--navy-600); border-color:var(--navy-600);}
.btn.accent{background:var(--brand-accent); color:var(--navy-800); border-color:var(--brand-accent);}
.btn.accent:hover{background:var(--cyan-400); border-color:var(--cyan-400);}
.btn.secondary{background:transparent; color:var(--brand); border-color:var(--border-strong);}
.btn.secondary:hover{border-color:var(--brand);}
.btn.ghost{background:transparent; color:var(--brand); border-color:transparent;}
.btn.ghost.on-navy{color:#fff; border-color:rgba(255,255,255,.35);}
.btn.ghost.on-navy:hover{background:rgba(255,255,255,.08);}
.btn.block{width:100%;}
.btn:active{transform:scale(.97);}

/* ---- Cards ---- */
.card{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; position:relative;}
.card.pad{padding:24px;}
.card.pad-lg{padding:32px;}
.card.accent-top::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--brand-accent);}
.card.hover{transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.card.hover:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}

/* ---- Badge ---- */
.badge{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-brand); font-weight:var(--fw-semibold);
  font-size:12px; letter-spacing:.04em; line-height:1; padding:5px 11px; border-radius:var(--radius-pill);
  background:var(--navy-100); color:var(--navy-700);}
.badge.accent{background:var(--cyan-100); color:var(--cyan-700);}
.badge.neutral{background:var(--grey-100); color:var(--grey-700);}

/* ---- Section surfaces ---- */
.on-navy{background:var(--surface-brand); color:#fff;}
.on-navy .h1,.on-navy .h2,.on-navy .display,.on-navy h1,.on-navy h2,.on-navy h3{color:#fff;}
.on-navy .eyebrow{color:var(--cyan-300);}
.on-navy .lead{color:var(--navy-200);}
.on-white{background:var(--surface-card); border-top:1px solid var(--border);}
.on-accent{background:var(--surface-accent);}
.bordered{border-top:1px solid var(--border);}

/* ---- Ticked list ---- */
.ticks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.ticks li{display:flex; gap:10px; align-items:flex-start; color:var(--text-body); font-size:15px; line-height:1.5;}
.ticks svg{color:var(--brand-accent); flex-shrink:0; margin-top:2px;}

/* ---- Header ---- */
.tow-header-wrap{position:sticky; top:0; z-index:100;}
.topbar{background:var(--surface-brand-deep); color:var(--navy-200); font-size:13px;}
.topbar .inner{max-width:var(--container); margin:0 auto; padding:7px 24px; display:flex; justify-content:flex-end; gap:20px;}
.topbar a{color:var(--navy-200);}
.topbar a.phone{color:var(--cyan-300); font-weight:500;}
.mainbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
  padding:8px 28px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.brand-lockup{display:flex; align-items:center; flex-shrink:0;}
.brand-lockup img{height:88px; width:auto;}
.navscroll{order:3; flex-basis:100%; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 26px; padding:12px 4px 2px; border-top:1px solid var(--divider); margin-top:4px;}
.navscroll a{font-size:15px; white-space:nowrap; color:var(--text-muted); border-bottom:2px solid transparent; padding-bottom:4px;}
.navscroll a:hover{color:var(--brand);}
.navscroll a.active{color:var(--brand); font-weight:var(--fw-medium); border-bottom-color:var(--brand-accent);}
.hamburger{display:none; border:1px solid var(--border-strong); background:var(--surface-card); cursor:pointer;
  border-radius:var(--radius-sm); width:42px; height:42px; align-items:center; justify-content:center; color:var(--brand); flex-shrink:0;}
.mobile-menu{display:none; background:var(--surface-card); border-bottom:1px solid var(--border); box-shadow:var(--shadow-lg); padding:10px 18px 18px; flex-direction:column;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:16px; padding:13px 6px; border-bottom:1px solid var(--divider); color:var(--text-body);}
.mobile-menu a.active{color:var(--brand); font-weight:var(--fw-medium);}
.mobile-menu .btn{margin-top:16px;}

/* ---- Footer ---- */
.tow-footer{background:var(--surface-brand-deep); color:var(--navy-200); padding:64px 40px 36px;}
.tow-footer .cols{max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:48px;}
.tow-footer img{height:56px;}
.tow-footer .eyebrow{color:var(--cyan-300); margin-bottom:14px; display:block;}
.tow-footer a{color:var(--navy-200); font-size:14px;}
.tow-footer .linklist{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
.tow-footer .bottom{max-width:var(--container); margin:44px auto 0; border-top:1px solid var(--navy-600); padding-top:22px; display:flex; justify-content:space-between; font-size:13px; color:var(--navy-300);}

/* ---- Forms ---- */
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:14px; font-weight:var(--fw-medium); color:var(--text-strong);}
.field input,.field select,.field textarea{border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface-card); padding:11px 14px; font-family:var(--font-sans); font-size:16px; color:var(--text-body); width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--brand-accent); box-shadow:var(--shadow-focus);}
.field .hint{font-size:12px; color:var(--text-muted);}

/* ---- Accordion ---- */
.acc-item{border-bottom:1px solid var(--border);}
.acc-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:transparent; border:0; cursor:pointer; text-align:left; padding:22px 4px; font-family:var(--font-brand); font-size:18px; font-weight:var(--fw-medium); color:var(--text-strong);}
.acc-q .chev{color:var(--brand-accent); flex-shrink:0; transition:transform .2s var(--ease);}
.acc-item.open .chev{transform:rotate(180deg);}
.acc-a{max-height:0; overflow:hidden; transition:max-height .32s var(--ease);}
.acc-item.open .acc-a{max-height:400px;}
.acc-a p{padding:0 4px 24px; color:var(--text-body); font-size:15px; line-height:1.65; max-width:720px;}

/* ---- Hero watermark (removed at client request) ---- */
.hero{position:relative; overflow:hidden;}
.hero .watermark{display:none;}
.hero .inner{position:relative; z-index:1;}

/* ---- Stars ---- */
.stars{display:flex; gap:3px; color:var(--cyan-500);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:921px) and (max-width:1200px){
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
}
/* Tablet & down: stack split layouts and centre their content */
@media (max-width:1024px){
  .split,.split.rev{grid-template-columns:1fr !important; text-align:center; justify-items:center;}
  .split.rev .media{order:2;}
  .split .media{max-width:520px; margin:8px auto 0;}
  .split .rule{margin-left:auto; margin-right:auto;}
  .split .ticks{text-align:left; display:inline-flex;}
  .hero .inner{text-align:center;}
  .hero .inner > div{margin-left:auto; margin-right:auto;}
  .hero .inner div[style*="display:flex"]{justify-content:center !important;}
  .grid.g3 > div,.grid.g4 > div{text-align:center;}
  .grid.g3 .rule,.grid.g4 .rule{margin-left:auto; margin-right:auto;}
}
@media (max-width:920px){
  .section{padding:56px 22px !important;}
  .wrap,.mainbar,.tow-footer{padding-left:22px !important; padding-right:22px !important;}
  .g2,.g3,.g4,.split,.split.rev{grid-template-columns:1fr !important;}
  .split.rev .media{order:2;}
  .display{font-size:34px !important;}
  .h1{font-size:28px !important;}
  .h2{font-size:24px !important;}
  .navscroll{display:none !important;}
  .hamburger{display:flex !important; order:5;}
  #tow-cta-desktop{margin-left:auto;}
  .topbar .inner{justify-content:center !important;}
  .brand-lockup img{height:64px;}
  .tow-footer .cols{grid-template-columns:1fr !important; gap:32px; text-align:center; justify-items:center;}
  .tow-footer .linklist{justify-items:center;}
  .tow-footer .bottom{flex-direction:column; gap:8px; text-align:center;}
  .mainbar{padding:8px 18px !important;}
}
/* Stats row: 3 across (wide) → 2+1 centred (tablet/portrait) → stacked (phone) */
.wrap.grid.g3{grid-template-columns:repeat(3,1fr) !important;}
@media (max-width:1100px){
  .wrap.grid.g3{grid-template-columns:1fr 1fr !important; gap:36px 28px;}
  .wrap.grid.g3 > :last-child{grid-column:1 / -1;}
}
@media (max-width:560px){
  .wrap.grid.g3{grid-template-columns:1fr !important;}
  .wrap.grid.g3 > :last-child{grid-column:auto;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}