/* Apex Chiropractic — shared site styles (brand-guide.md) */
:root{
  --sage:#9fb28b;--deep:#4a5a3e;--darkest:#343e2c;--sage-ink:#2a3222;--tint:#dfe5d5;
  --cream:#f7f2e8;--deep-cream:#efe6d4;--paper:#fffdf8;--line:#e4d9c3;
  --ink:#2b2b26;--muted:#5e5440;--gold:#b08a3e;--dark-gold:#7a5c24;--light-gold:#e3c98e;
  --radius:20px;--arch:240px 240px 20px 20px;--wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Raleway','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.65;min-width:320px}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep)}a:hover{color:var(--darkest)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--paper);padding:10px 16px;border-radius:999px}
.skip:focus{left:8px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-gold)}
.h2{font-size:clamp(30px,3.4vw,42px);line-height:1.15;font-weight:800;color:var(--deep)}
.lead{font-size:18px;line-height:1.7}
.section{padding:clamp(56px,7vw,96px) 0}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:filter .3s;text-align:center}
.btn:hover{filter:brightness(.92)}
.btn-primary{background:var(--deep);color:var(--cream)}.btn-primary:hover{color:var(--cream)}
.btn-light{background:var(--cream);color:var(--deep)}.btn-light:hover{color:var(--deep)}
.btn-outline{border:2px solid var(--deep);color:var(--deep);background:transparent}
.btn-lg{min-height:56px;padding:0 34px;font-size:18px;font-weight:800}

/* Top bar */
.topbar{background:var(--darkest);color:var(--cream);font-size:14px;font-weight:500}
.topbar .wrap{padding-top:10px;padding-bottom:10px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
.topbar a{color:var(--cream);text-decoration:none}
.topbar .stars{color:var(--light-gold);letter-spacing:2px}
.topbar .phone{color:var(--light-gold);font-weight:700}

/* Header */
.site-header{background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:20}
.site-header .wrap{padding-top:14px;padding-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:58px;width:auto}
.nav{display:flex;gap:28px;align-items:center;font-weight:600}
.nav a,.nav summary{text-decoration:none;color:var(--ink);cursor:pointer}
.nav a:hover,.nav summary:hover{color:var(--deep)}
.nav details{position:relative}
.nav summary{list-style:none;display:flex;align-items:center;gap:6px}
.nav summary::-webkit-details-marker{display:none}
.nav .drop{position:absolute;top:calc(100% + 14px);left:-18px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px;min-width:230px;display:flex;flex-direction:column;box-shadow:0 14px 30px rgba(52,62,44,.1)}
.nav .drop a{padding:10px 12px;border-radius:10px}
.nav .drop a:hover{background:var(--tint)}
.header-actions{display:flex;gap:10px;align-items:center}
.menu-btn{display:none}
.mobile-nav{display:none}

/* Footer */
.site-footer{background:var(--darkest);color:var(--cream);padding:60px 0 32px}
.site-footer .wrap{display:flex;flex-direction:column;gap:36px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px}
.foot-col{display:flex;flex-direction:column;gap:8px;font-size:15px}
.foot-col .label{font-weight:700;color:var(--light-gold)}
.foot-col a{color:var(--cream);text-decoration:none}
.foot-col a:hover{text-decoration:underline;color:var(--cream)}
.foot-col address{font-style:normal;line-height:1.55}
.foot-logo{height:64px;width:auto;align-self:flex-start}
.social{display:flex;gap:12px}
.social a{width:44px;height:44px;border-radius:999px;border:1px solid var(--light-gold);display:flex;align-items:center;justify-content:center}
.foot-bottom{border-top:1px solid var(--deep);padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:14px;color:var(--tint)}
.foot-bottom a{color:var(--tint)}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:8px 18px}

/* Sticky mobile booking bar */
.mbar{display:none}


/* Shared page building blocks (service pages) */
.split{display:flex;flex-wrap:wrap;gap:48px 72px;align-items:center}
.split>*{min-width:0}
.stack{display:flex;flex-direction:column;gap:18px}
.arch{border-radius:var(--arch)}
.rounded{border-radius:var(--radius)}
.page-h1{font-size:clamp(36px,4.6vw,56px);line-height:1.08;font-weight:800;color:var(--deep)}
.sticker{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:0 10px 30px rgba(52,62,44,.08);display:flex;align-items:center;gap:12px;max-width:260px;line-height:1.35}
.sticker strong{display:block;font-weight:800;color:var(--deep)}
.sticker span{font-size:13px;color:var(--muted)}
.final{background:var(--deep);color:var(--cream);padding:clamp(64px,8vw,104px) 0}
.final .wrap{max-width:720px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.final h2{font-size:clamp(30px,3.6vw,44px);line-height:1.15;font-weight:800;color:var(--cream)}
.final .round{width:120px;height:120px;object-fit:cover;border-radius:999px;border:3px solid var(--light-gold)}
.final a.tel{color:var(--light-gold);font-weight:700;white-space:nowrap}
.btn-md{min-height:52px;padding:0 28px;font-size:17px}
@media (max-width:560px){.h2{font-size:28px}.lead{font-size:17px}}

@media (max-width:820px){
  .nav,.hide-phone{display:none}
  .menu-btn{display:inline-flex;width:48px;height:48px;border-radius:999px;border:2px solid var(--deep);align-items:center;justify-content:center;cursor:pointer;list-style:none}
  .menu-btn::-webkit-details-marker{display:none}
  .mobile-menu{position:static}
  .mobile-menu[open] .mobile-nav{display:flex}
  .mobile-nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;padding:8px 24px 20px;box-shadow:0 14px 30px rgba(52,62,44,.1)}
  .mobile-nav a{display:flex;align-items:center;min-height:48px;text-decoration:none;color:var(--ink);font-weight:600;font-size:17px;border-bottom:1px solid var(--line)}
  .mobile-nav .sub{padding-left:16px;font-weight:500}
  .mobile-nav .btn{margin-top:14px;border:0}
  .logo img{height:48px}
  /* Phones/tablets: the header (logo + menu button) stays at the top while scrolling. */
  .site-header{position:sticky;top:0;z-index:40}
  .mobile-nav{max-height:calc(100vh - 80px);overflow-y:auto}
  .mbar{display:flex;position:sticky;bottom:0;z-index:30;background:var(--darkest);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -10px 30px rgba(52,62,44,.12)}
  .mbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-weight:700;text-decoration:none}
  .mbar .call{border:2px solid var(--light-gold);color:var(--light-gold)}
  .mbar .book{flex:1.6;background:var(--cream);color:var(--deep)}
  .full-phone{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}