/* ==========================================================================
   Apple Wellness Chiropractic Center - Winchester, VA
   The Customer Factory. Palette derived from the clinic logo:
   apple red, leaf green, stethoscope charcoal.
   ========================================================================== */

:root{
  --ink:#16181c;
  --ink-2:#2b3038;
  --ink-3:#5d6570;
  --apple:#c8102e;
  --apple-dk:#9e0c24;
  --apple-lt:#f6e3e6;
  --leaf:#2e7d4f;
  --leaf-dk:#24623d;
  --cream:#faf7f4;
  --soft:#f2eee9;
  --line:#e5ded6;
  --white:#fff;
  --shadow:0 2px 5px rgba(0,0,0,.28);
  --card:0 1px 2px rgba(22,24,28,.05),0 8px 24px rgba(22,24,28,.07);
  --wrap:1180px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink-2);
  font:400 17px/1.72 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--apple);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{
  font-family:'Fraunces','Georgia',serif;color:var(--ink);
  line-height:1.14;margin:0 0 .5em;font-weight:600;letter-spacing:-.015em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.12rem}
p{margin:0 0 1.15em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
section{padding:76px 0}
.bg-soft{background:var(--soft)}
.bg-cream{background:var(--cream)}
.bg-ink{background:var(--ink);color:#d7dae0}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff}
.eyebrow{
  font:600 .78rem/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--apple);margin:0 0 .9rem;display:block;
}
/* .hero and .page-hero are dark but are not .bg-ink, so the accent-red eyebrow
   needs the same lift or it sits at 2.8:1 on the dark gradient. */
.bg-ink .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow{color:#ff8494}
.lede{font-size:1.16rem;color:var(--ink-3)}
.center{text-align:center}
.center .eyebrow{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:14px 28px;border-radius:999px;
  font:600 1rem/1 'Inter',sans-serif;text-align:center;cursor:pointer;border:0;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{
  background:linear-gradient(180deg,#d9203c 0%,var(--apple) 55%,var(--apple-dk) 100%);
  color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:var(--shadow);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 9px rgba(0,0,0,.3)}
.btn-leaf{
  background:linear-gradient(180deg,#37945e 0%,var(--leaf) 55%,var(--leaf-dk) 100%);
  color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:var(--shadow);
}
.btn-leaf:hover{transform:translateY(-1px);box-shadow:0 4px 9px rgba(0,0,0,.3)}
/* ghost buttons stay flat - no gradient, no shadow */
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--apple);color:var(--apple)}
/* Every dark surface must flip ghost buttons to white, or they render
   near-black on near-black. .hero and .page-hero are dark gradients that are
   NOT .bg-ink, so they have to be listed explicitly. */
.bg-ink .btn-ghost,
.hero .btn-ghost,
.page-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.bg-ink .btn-ghost:hover,
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.center .btn-row{justify-content:center}

/* ---------- top utility strip ---------- */
.topbar{background:var(--ink);color:#b9bfc9;font-size:.86rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.topbar .tagline{letter-spacing:.02em}
.topbar .phones{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar a:hover{color:#ff8494;text-decoration:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:46px;width:auto}
.nav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative}
.nav a,.nav .drop-t{
  display:block;padding:10px 13px;border-radius:8px;color:var(--ink-2);
  font:500 .95rem/1 'Inter',sans-serif;background:none;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;white-space:nowrap;
}
.nav a:hover,.nav .drop-t:hover{background:var(--soft);color:var(--apple);text-decoration:none}
.nav .current>a,.nav .current>.drop-t{color:var(--apple);font-weight:600}
.nav .drop-t::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
/* CTA nav item */
.nav a.nav-cta{
  background:linear-gradient(180deg,#d9203c 0%,var(--apple) 55%,var(--apple-dk) 100%);
  color:#fff;font-weight:600;padding:11px 22px;border-radius:999px;margin-left:8px;
  text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:var(--shadow);
}
.nav a.nav-cta:hover{transform:translateY(-1px);color:#fff;background:linear-gradient(180deg,#e02745 0%,#c8102e 55%,#9e0c24 100%)}

/* dropdown: DIRECT-CHILD selector above keeps these stacked, not sideways */
.menu{
  display:block;position:absolute;top:calc(100% + 8px);left:0;min-width:255px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--card);
  padding:8px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  max-height:74vh;overflow-y:auto;
}
.menu.wide{column-count:2;column-gap:4px;min-width:460px}
li:hover>.menu,li:focus-within>.menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu li{break-inside:avoid}
.menu a{padding:9px 12px;font-size:.92rem;border-radius:7px}

/* burger */
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(155deg,#1b1e24 0%,#24282f 46%,#33383f 100%);
  color:#dfe3e9;padding:78px 0 84px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-140px;top:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,16,46,.28),transparent 68%);pointer-events:none;
}
.hero h1{color:#fff}
.hero .lede{color:#c3c9d2;font-size:1.2rem;max-width:44ch}
.hero-grid{
  display:grid;gap:46px;align-items:center;position:relative;z-index:1;
  grid-template-columns:1.15fr .85fr;
  grid-template-areas:"copy portrait" "trust portrait";
  align-content:start;
}
.hero-copy{grid-area:copy}
.hero-portrait{grid-area:portrait}
.hero-trust{grid-area:trust}
.hero-portrait img{border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.42);width:100%}
.hero-trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  font-size:.86rem;color:#e6eaf0;
}
.chip b{color:#fff;font-weight:600}

/* page hero (interior pages) */
.page-hero{background:linear-gradient(155deg,#1b1e24,#2c3138);color:#dfe3e9;padding:56px 0 60px}
.page-hero h1{color:#fff;margin-bottom:.35em}
.page-hero .lede{color:#c3c9d2;max-width:62ch}
.crumbs{font-size:.85rem;color:#9aa3b0;margin-bottom:1.1rem}
.crumbs a{color:#c3c9d2}
.crumbs span{margin:0 7px;opacity:.5}

/* ---------- generic grids / cards ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--card);
}
.card h3{font-size:1.22rem;margin-bottom:.4em}
.card p{margin-bottom:0;color:var(--ink-3);font-size:.97rem}
.card .ico{
  width:46px;height:46px;border-radius:12px;background:var(--apple-lt);color:var(--apple);
  display:grid;place-items:center;font-size:1.35rem;margin-bottom:14px;
}
a.card{color:inherit;display:block;transition:transform .16s ease,box-shadow .16s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(22,24,28,.12);text-decoration:none;border-color:#d6ccc1}
a.card:hover h3{color:var(--apple)}
.card-img{border-radius:12px;overflow:hidden;margin:-26px -26px 18px;aspect-ratio:3/2;background:var(--soft)}
.card-img img{width:100%;height:100%;object-fit:cover}
.more{font-weight:600;color:var(--apple);font-size:.93rem;margin-top:12px;display:inline-block}

/* split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split img{border-radius:var(--r);box-shadow:var(--card);width:100%}
.split.flip>*:first-child{order:2}

/* tick list */
.ticks{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li{position:relative;padding:7px 0 7px 34px;color:var(--ink-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:14px;width:19px;height:19px;border-radius:50%;
  background:var(--leaf);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/19px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/19px no-repeat;
}
.bg-ink .ticks li{color:#d7dae0}

/* callout */
.callout{
  border-left:5px solid var(--apple);background:var(--apple-lt);
  padding:24px 28px;border-radius:0 var(--r) var(--r) 0;margin:30px 0;
}
.callout p:last-child{margin-bottom:0}
.callout h3{margin-top:0}

/* ---------- video ---------- */
.vid{
  position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:#000;box-shadow:var(--card);cursor:pointer;border:0;padding:0;width:100%;display:block;
}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .3s ease}
.vid:hover img{transform:scale(1.035);opacity:.85}
.vid::after{
  content:"";position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  background:rgba(200,16,46,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center/32px no-repeat;
  box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .2s ease;pointer-events:none;
}
.vid:hover::after{transform:scale(1.09)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid.playing::after{display:none}
/* Vertical uploads (patient testimonials, Shorts) get a portrait facade.
   Forcing them into the 16:9 box would either letterbox them into a strip or
   crop the subject's head off. */
.vid.portrait{aspect-ratio:3/4;max-width:400px;margin-inline:auto}
.vid.portrait img{object-position:center 30%}
.vid-cap{font-size:.93rem;color:var(--ink-3);margin-top:11px;line-height:1.45}
.bg-ink .vid-cap{color:#aab1bc}
.vid-feature{
  background:linear-gradient(150deg,#1e2229,#2f343c);border-radius:var(--r);
  padding:34px;box-shadow:0 18px 46px rgba(0,0,0,.3);
}

/* ---------- reviews ---------- */
.stars{color:#e8a13a;letter-spacing:2px;font-size:1.02rem;margin-bottom:10px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--card)}
.review p{font-size:.98rem;color:var(--ink-2);margin-bottom:14px}
.review .who{font-weight:600;color:var(--ink);font-size:.94rem}
.review .src{font-size:.82rem;color:var(--ink-3)}

/* ---------- form ---------- */
.form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--card)}
.form-wrap iframe{width:100%;border:0;min-height:640px;display:block}
.form-note{font-size:.85rem;color:var(--ink-3);margin-top:12px}

/* ---------- contact / map ---------- */
.map{border-radius:var(--r);overflow:hidden;box-shadow:var(--card);border:1px solid var(--line);line-height:0}
.map iframe{width:100%;height:400px;border:0;display:block}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.info-list li:last-child{border-bottom:0}
.info-list .k{font-weight:600;color:var(--ink);min-width:96px;flex-shrink:0}
.hours{width:100%;border-collapse:collapse;font-size:.97rem}
.hours th,.hours td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line)}
.hours th{font-weight:500;color:var(--ink-3)}
.hours td{text-align:right;font-weight:600;color:var(--ink)}
.hours tr.closed td{color:var(--ink-3);font-weight:500}
/* The same hours table also sits in the dark footer, where the light-surface
   colours above render near-black on near-black. Re-state them for that
   surface or the opening hours are invisible. */
.site-footer .hours th,.site-footer .hours td{border-bottom-color:rgba(255,255,255,.12)}
.site-footer .hours th{color:#b9bfc9}
.site-footer .hours td{color:#fff}
.site-footer .hours tr.closed td{color:#98a0ab}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(150deg,#a50d26,#c8102e 55%,#8d0b20);color:#fff;padding:66px 0}
.cta-band h2{color:#fff}
.cta-band p{color:#ffdde2;font-size:1.1rem;max-width:56ch;margin-inline:auto}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.cta-band .btn-ghost:hover{background:#fff;color:var(--apple);border-color:#fff}
.cta-band .btn-white{background:#fff;color:var(--apple);box-shadow:var(--shadow);text-shadow:none}
.cta-band .btn-white:hover{transform:translateY(-1px)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#a9b0bb;padding:60px 0 0;font-size:.95rem}
.site-footer h4{color:#fff;font-family:'Inter',sans-serif;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.site-footer a{color:#cfd5dd}
.site-footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:46px;padding-bottom:44px}
.foot-brand img{height:52px;margin-bottom:16px}
.foot-links{list-style:none;padding:0;margin:0;columns:2;column-gap:20px}
.foot-links li{margin-bottom:9px;break-inside:avoid}
.socials{display:flex;gap:11px;margin-top:18px}
.socials a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;transition:background .16s ease;
}
.socials a:hover{background:var(--apple)}
.socials svg{width:18px;height:18px;fill:#fff}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.11);padding:20px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.87rem;
}
.foot-bottom a{text-decoration:underline}

/* ---------- mobile sticky call bar ---------- */
.callbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);border-top:1px solid rgba(255,255,255,.14);
  padding:9px 11px;gap:9px;box-shadow:0 -4px 18px rgba(0,0,0,.24);
}
.callbar a{flex:1;padding:14px 8px;border-radius:10px;font:600 .97rem/1 'Inter',sans-serif;text-align:center}
.callbar .c{
  background:linear-gradient(180deg,#d9203c,var(--apple) 55%,var(--apple-dk));color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:var(--shadow);
}
.callbar .r{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.42)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .nav a,.nav .drop-t{padding:10px 9px;font-size:.9rem}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:940px){
  section{padding:60px 0}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split{gap:34px}
  .hero-grid{grid-template-columns:1fr .8fr;gap:30px}
}
@media (max-width:760px){
  body{font-size:16px}
  section{padding:50px 0}
  /* backdrop-filter makes the header a containing block for position:fixed
     descendants, which traps the off-canvas nav inside the 75px header box.
     Drop it on mobile so .nav is positioned against the viewport again. */
  .site-header{backdrop-filter:none;background:#fff}
  .topbar .tagline{display:none}
  .topbar .wrap{justify-content:center}
  .brand img{height:38px}
  .burger{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,340px);background:#fff;
    padding:86px 20px 120px;overflow-y:auto;transform:translateX(100%);
    transition:transform .28s ease;box-shadow:-8px 0 30px rgba(0,0,0,.18);
  }
  .nav.open{transform:translateX(0)}
  .nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a,.nav .drop-t{padding:13px 12px;font-size:1rem;width:100%;text-align:left}
  .nav a.nav-cta{margin:14px 0 0;text-align:center}
  .menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;padding:2px 0 6px 12px;
    margin:0 0 6px 12px;min-width:0;max-height:none;display:none;
  }
  .menu.wide{column-count:1;min-width:0}
  li.open>.menu{display:block}
  li:hover>.menu{opacity:1;visibility:visible}
  .nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;opacity:0;visibility:hidden;transition:.25s}
  .nav-scrim.on{opacity:1;visibility:visible}
  .hero{padding:48px 0 56px}
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "portrait" "trust";
    gap:26px;
  }
  .hero .lede{max-width:none}
  .hero-portrait img{max-width:340px;margin:0 auto}
  .hero .btn-call{display:none}     /* sticky bar covers this job on mobile */
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.flip>*:first-child{order:0}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-links{columns:2}
  .callbar{display:flex}
  body{padding-bottom:72px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .vid-feature{padding:20px}
  .map iframe{height:300px}
}
@media (max-width:400px){
  .brand img{height:33px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}