/* ============================================================
   INSIGHT CHIROPRACTIC — header + hero, 2026-09-12 pass
   Loaded AFTER insight.css on the Homepage only. Everything here is
   scoped to .masthead and .hero-ink so no other page changes until its
   turn. Fold into insight.css once Gary approves the header.

   Tokens: gold #A7916C, the logo gold (Gary, 9/12 evening). 6.19:1 on ink,
   5.07:1 on the warm ink end. Cinzel headings, Poppins body/nav/buttons.
   Ground: ink gradient, from the Dribbble reference in his own colours.

   Specificity note: insight.css styles `.masthead nav` and, under 620px,
   `.masthead nav a:not(.btn):not(.masthead__tel)`. The pill and menu rules
   below carry enough weight to beat both; keep it that way when folding in.
   ============================================================ */

:root{
  --gold:#A7916C;         /* brand gold; 6.19:1 on ink. Ink labels on gold fills. Text on dark only. */
  --cream:#E3D3B3;        /* third color, locked by Gary 9/12: accents, icons and key phrases on dark grounds */
  --gold-text:#7A6644;    /* gold text on light: 5.51:1 white, 5.20:1 paper */
  --gold-ui:#867250;      /* rules and focus rings on light: 4.63:1 white, 4.37:1 paper */
  --ink-deep:#0B0907;
  --ink-warm:#2B2412;     /* ink pulled toward the gold hue */
  --brand-display:'Cinzel',ui-serif,Georgia,serif;
  --brand-text:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rail-wide:1320px;
  --nav-h:112px; /* the real header: 36px ink strip + 76px white bar. A larger value
                    leaves a dark sliver of the hero ground above the photo panel. */
}
.rail--wide{width:min(var(--rail-wide),100%)}

/* ---- masthead · Option A on white: ink strip (phone) + solid white bar, always ---- */
.masthead{font-family:var(--brand-text);background:#fff;border-bottom:1px solid rgba(20,17,13,.10)}
.masthead__strip{background:var(--ink-deep);border-bottom:1px solid rgba(167,145,108,.28)}
.masthead__striprow{display:flex;justify-content:flex-end;align-items:center;min-height:36px}
.masthead__striprow .masthead__tel{font-size:13px;font-weight:400;color:rgba(255,255,255,.85);
  letter-spacing:.03em;font-variant-numeric:tabular-nums;transition:color .18s ease;
  display:inline-flex;align-items:center;gap:8px}
.masthead__striprow .tel-ic{width:13px;height:13px;flex:none;opacity:.85}
.masthead__striprow .masthead__tel:hover{color:#fff}
/* 9/19 (Gary): the strip is the phone and nothing else. A muted Call sits in front of the
   number so the line reads as an instruction rather than a stray string of digits, and the
   number itself carries the weight. No icon, no rule, no button.
   CARLOS: one text link in the strip row, right aligned. The span is the muted word. */
.masthead__striprow .masthead__tel{gap:0;font-size:13px;letter-spacing:.04em;
  color:rgba(255,255,255,.94);font-weight:500}
.masthead__tel-lab{margin-right:9px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  font-size:11px;color:rgba(255,255,255,.62);transition:color .18s ease}
.masthead__striprow .masthead__tel:hover .masthead__tel-lab{color:rgba(255,255,255,.85)}

.masthead__tel .tel-ic{width:15px;height:15px;color:var(--gold);flex:none}
/* 10-13 (Carlos): Patient Center and Contact Us sit in the strip, left of the phone, with a
   hairline before the number. Phones have them in the Menu control instead. */
.masthead nav.masthead__striplinks{display:flex;align-items:center;gap:22px;margin:0}
/* One 22px gap between all three items, on every header. */
.masthead .masthead__striprow,.masthead.masthead--arc .masthead__striprow{gap:22px}
.masthead nav.masthead__striplinks a{font-size:13px;font-weight:400;letter-spacing:.03em;color:rgba(255,255,255,.78);
  text-decoration:none;white-space:nowrap;transition:color .18s ease}
.masthead nav.masthead__striplinks a:hover,.masthead nav.masthead__striplinks a[aria-current="page"]{color:#fff}
/* Each link and the phone with its icon on the left (Carlos, 10-13); phones keep the icon only. */
.masthead nav.masthead__striplinks a{display:inline-flex;align-items:center;gap:7px}
.masthead nav.masthead__striplinks a i,.masthead__tel-icon{font-size:12px;color:var(--gold)}
.masthead__tel-icon{margin-right:7px}
/* The phone reads like the two links beside it: same size, weight and color (Carlos, 10-13). */
.masthead .masthead__striprow .masthead__tel,.masthead.masthead--arc .masthead__striprow .masthead__nap{font-size:13px;font-weight:400;
  letter-spacing:.03em;color:rgba(255,255,255,.78)}
.masthead .masthead__striprow .masthead__tel:hover{color:#fff}
/* Phones: icons only, right-aligned, each a 36px tap target. */
@media (max-width:700px){
  .masthead .masthead__striprow,.masthead.masthead--arc .masthead__striprow{justify-content:flex-end;gap:4px}
  .masthead nav.masthead__striplinks{gap:4px;margin:0;padding:0;border:0}
  /* Outranks insight.css's phone rule that hides links in header navs. */
  .masthead .masthead__strip .masthead__striprow nav.masthead__striplinks a,.masthead .masthead__striprow .masthead__tel{display:inline-flex;align-items:center;
    justify-content:center;width:36px;height:36px;color:rgba(255,255,255,.88)}
  .masthead nav.masthead__striplinks a i,.masthead__tel-icon{display:inline-block;margin:0;font-size:16px;color:var(--gold)}
  .masthead__striplabel,.masthead__telnum{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.masthead__in{display:flex;align-items:center;gap:clamp(16px,2vw,28px);min-height:76px}
.masthead__brand{flex:none;line-height:0}
.masthead__brand img{display:block;height:58px;width:auto;max-width:none;background:transparent;
  transition:height .3s ease}
.masthead nav.masthead__links{margin-left:auto;display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(2px,.6vw,8px)}
.masthead nav.masthead__links a{font-family:'Open Sans',var(--brand-text);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  padding:9px 12px;border-radius:8px;white-space:nowrap;position:relative;transition:color .18s ease}
/* 9/19 (Gary): the hover rule is a row of dots rather than a solid bar, so it reads as a
   run of vertebrae. It wipes in left to right with clip-path, which keeps the dots round
   instead of stretching them the way scaleX did.
   CARLOS: pure CSS, a repeating radial gradient on the link pseudo-element. No markup. */
.masthead nav.masthead__links a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:4px;
  background-image:radial-gradient(circle at center,var(--gold) 1.5px,transparent 1.8px);
  background-size:7px 4px;background-repeat:repeat-x;background-position:left center;
  clip-path:inset(0 100% 0 0);transition:clip-path .28s ease}
.masthead nav.masthead__links a:hover{color:#867250}
.masthead nav.masthead__links a:hover::after{clip-path:inset(0 0 0 0)}
.masthead nav.masthead__links a[aria-current="page"]{color:#867250}
/* ---- Home icon · 9/20 (Gary). First nav item on every page except the Homepage. Icon only,
   no label, because the word Home costs nav width. CARLOS: an HTML/icon module ahead of the
   menu, hidden on the front page. ---- */
.masthead__home{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.masthead nav.masthead__links a.masthead__home{padding:9px 10px}
.masthead__home svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.masthead nav.masthead__links a.masthead__home::after{display:none}
.masthead nav.masthead__links a.masthead__home:hover{color:#867250}
.masthead nav.masthead__links a.masthead__home[aria-current="page"]{color:var(--gold-text,#867250)}
.masthead__tel{font-size:14px;font-weight:500;color:var(--on-dark);text-decoration:none;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.masthead__tel:hover{color:var(--gold)}
.masthead__book{background:var(--gold);color:#fff;font-family:var(--brand-text);white-space:nowrap;flex:none;
  border-radius:8px;padding:12px 22px;font-size:14px;font-weight:600;letter-spacing:.04em;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.masthead__book:hover{background:var(--ink);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,17,13,.25)}
.masthead a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* 9/19 (Gary): one header, one lockup size, every page. --solid is now only the white
   bar itself, which interior pages carry from the top. The shrink lives in --stuck, which
   the scroll script adds on every page at 80px, so the Homepage and the interior pages
   start at the same 58px lockup and shrink the same way.
   CARLOS: --solid = appearance, --stuck = scrolled state. Do not merge them again. */
.masthead--solid{background:#fff;border-bottom:1px solid rgba(20,17,13,.14)}
.masthead--stuck{box-shadow:0 8px 24px rgba(20,17,13,.08)}
.masthead--stuck .masthead__in{min-height:64px}
.masthead--stuck .masthead__brand img{height:44px}
.masthead--stuck .masthead__book{padding:10px 18px}
/* 10-13 (Carlos): the bar, Book Now and the shadow ease into the stuck size like the logo,
   instead of snapping. */
.masthead{transition:box-shadow .3s ease}
.masthead .masthead__in{transition:min-height .3s ease}
/* Additional CSS (Customizer) sets every button's transition with !important; this one also eases its padding. */
body .masthead .masthead__book{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,padding .3s ease !important}
@media (prefers-reduced-motion:reduce){.masthead,.masthead .masthead__in{transition:none}body .masthead .masthead__book{transition:background-color .2s ease,color .2s ease !important}}

/* mobile header: the link pill folds into a Menu control; Book Now never hides */
.masthead__menu{display:none;position:relative;flex:none}
.masthead__menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:8px;border:1px solid rgba(134,114,80,.5);color:var(--ink);
  font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.masthead__menu summary::-webkit-details-marker{display:none}
.masthead__menu summary::before{content:"";width:16px;height:2px;background:currentColor;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
.masthead__menu[open] summary{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.masthead .masthead__menu nav{position:absolute;right:0;top:calc(100% + 12px);min-width:260px;margin:0;
  background:var(--ink-deep);border:1px solid rgba(167,145,108,.35);border-radius:18px;padding:10px;
  display:flex;flex-direction:column;flex-wrap:nowrap;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.masthead .masthead__menu.masthead__menu nav a{display:block;color:var(--on-dark);text-decoration:none;
  font-size:16px;font-weight:500;padding:13px 16px;border-radius:12px;white-space:nowrap}
.masthead .masthead__menu.masthead__menu nav a:hover{background:rgba(255,255,255,.08)}
.masthead .masthead__menu.masthead__menu nav a[aria-current="page"]{color:var(--gold)}
.masthead .masthead__menu.masthead__menu nav a.masthead__tel{margin-top:6px;border-top:1px solid rgba(255,255,255,.12);
  border-radius:0 0 12px 12px;padding-top:16px;color:var(--gold)}

@media (max-width:1100px){
  .masthead nav.masthead__links{display:none}
  .masthead__book{margin-left:auto}
  .masthead__menu{display:block}
}
@media (max-width:620px){
  .masthead__brand img{height:36px}
  .masthead__book{padding:11px 16px;font-size:13px}
}

/* ---- hero · ink gradient, gold watermark, cut-out figure ---- */
.hero-ink{position:relative;color:var(--on-dark);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px));
  background:
    linear-gradient(135deg,var(--ink-deep) 0%,var(--ink) 45%,var(--ink-warm) 100%);
  background-color:var(--ink)}
.hero-ink__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,56px);align-items:end}
.hero-ink__copy{padding-block:clamp(6px,1.5vw,20px) clamp(56px,8vw,112px)}
.hero-ink__h1{font-family:var(--brand-display);font-weight:600;font-size:clamp(16px,1.4vw,20px);
  letter-spacing:.22em;text-transform:uppercase;color:#fff;margin:0 0 18px;
  display:flex;align-items:center;gap:14px;line-height:1.2}
.hero-ink__h1::before{content:"";width:38px;height:1px;background:var(--gold);flex:none}
.hero-ink__display{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.3vw,60px);
  line-height:1.08;color:var(--on-dark);margin:0 0 22px;max-width:15ch;text-wrap:balance}
.hero-ink .lede{font-family:var(--brand-text);color:rgba(255,255,255,.86);
  font-size:clamp(17px,1.55vw,20px);line-height:1.7;max-width:50ch;margin:0}
.hero-ink .lede .hl{font-style:normal;color:var(--gold);font-weight:600}
.hero-ink__checks{list-style:none;padding:0;margin:26px 0 0;display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content));gap:14px 44px}
.hero-ink__checks li{display:flex;align-items:center;gap:10px;font-family:var(--brand-text);
  font-size:15px;font-weight:500;color:var(--on-dark)}
.hero-ink__checks .mk{width:20px;height:20px;flex:none;color:var(--gold)}
.hero-ink__checks i{color:var(--gold);font-size:19px;width:22px;text-align:center;flex:none;
  transition:transform .22s ease,color .22s ease}
.hero-ink__checks li:hover i{transform:translateY(-3px) scale(1.18);color:#C9B896}
@media (prefers-reduced-motion:reduce){.hero-ink__checks i{transition:none}.hero-ink__checks li:hover i{transform:none}}
.hero-ink .btn-row{margin-top:32px;gap:14px}
.hero-ink .btn{font-family:var(--brand-text);border-radius:8px;padding:17px 30px;font-size:16px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.hero-ink .btn:hover{transform:translateY(-2px)}
.hero-ink .btn--gold:hover{box-shadow:0 10px 26px rgba(167,145,108,.35)}
.hero-ink .btn--gold{background:var(--gold);color:#fcfcfc}
.hero-ink .btn--gold:hover{background:var(--on-dark);color:var(--ink)}
.hero-ink .btn--ghost-on-dark{color:var(--on-dark);border-color:rgba(255,255,255,.5)}
.hero-ink .btn--ghost-on-dark:hover{border-color:var(--gold);color:var(--gold)}
.hero-ink .btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hero-ink__rating{display:flex;align-items:center;gap:10px;margin:28px 0 0;font-family:var(--brand-text);
  font-size:14px;color:rgba(255,255,255,.82)}
.hero-ink__rating .g-logo{width:17px;height:17px;flex:none;opacity:.9}
.hero-ink__rating strong{color:#fff;font-weight:600}
.hero-ink__stars{color:#FBBC05;letter-spacing:2px;font-size:14px;line-height:1}
.hero-ink__figure{align-self:stretch;position:relative;min-width:0;display:flex;justify-content:flex-end;align-items:flex-end}
/* colour panel + brand mark behind the cut-out, per the reference */
.hero-ink__figure::before{content:"";position:absolute;left:2%;right:-10%;top:6%;bottom:-1px;
  background:radial-gradient(ellipse at 60% 72%,rgba(167,145,108,.30) 0%,rgba(167,145,108,.12) 48%,transparent 74%)}
.hero-ink__mark{position:absolute;top:-2%;right:25%;width:min(16vw,290px);height:auto;aspect-ratio:1/2;
  color:rgba(167,145,108,.17);transform:rotate(14deg)}
.hero-ink__figure img{position:relative;display:block;width:100%;max-width:100%;
  height:100%;max-height:none;object-fit:cover;object-position:72% bottom;background:transparent}
/* interior heroes carry a real photograph, so the crop is per page. Default sits the
   subject a third down; each img overrides with --hero-crop. */
.hero-ink--int .hero-ink__figure img{object-position:var(--hero-crop,50% 32%)}

/* ---- hero photo variant · photograph held to the right column ----
   9/13: the photo lives in the figure column and bleeds to the viewport's right
   edge, so the copy never sits over Dr. Cox at any width. Left edge dissolves
   into the ink ground with a mask. Toggle: remove .hero-ink--photo; cut-out
   build frozen in "Insight Chiropractic - Homepage (ink hero, saved).html". */
.hero-ink--photo .hero-ink__figure{margin-right:calc((min(var(--rail-wide),100vw) - 100vw)/2)}
.hero-ink--photo .hero-ink__figure::before,
.hero-ink--photo .hero-ink__mark{display:none}
.hero-ink--photo .hero-ink__figure img{object-position:56% 26%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
@media (max-width:900px){
  .hero-ink--photo .hero-ink__figure{margin-right:0}
  .hero-ink--photo .hero-ink__figure img{width:100%;max-height:min(70vw,420px);object-fit:cover;
    -webkit-mask-image:none;mask-image:none;border-radius:12px}
}

/* ---- motion pass · entrance stagger + ambient drift. SPEC for Carlos: re-apply natively in BB. ---- */
@keyframes hero-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-fig{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mark-drift{0%,100%{transform:rotate(14deg) translateY(0)}50%{transform:rotate(15.5deg) translateY(-14px)}}
.hero-ink__h1,.hero-ink__display,.hero-ink .lede,.hero-ink__checks,.hero-ink .btn-row,.hero-ink__rating{
  animation:hero-rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-ink__h1{animation-delay:.05s}.hero-ink__display{animation-delay:.15s}.hero-ink .lede{animation-delay:.25s}
.hero-ink__checks{animation-delay:.35s}.hero-ink .btn-row{animation-delay:.45s}.hero-ink__rating{animation-delay:.55s}
.hero-ink__figure img{animation:hero-fig .9s cubic-bezier(.2,.7,.2,1) .2s both}
.hero-ink__mark{animation:mark-drift 9s ease-in-out 1.2s infinite}
@media (prefers-reduced-motion:reduce){
  .hero-ink__h1,.hero-ink__display,.hero-ink .lede,.hero-ink__checks,.hero-ink .btn-row,.hero-ink__rating,
  .hero-ink__figure img,.hero-ink__mark{animation:none}
  .masthead nav.masthead__links a::after{transition:none}

  .masthead__book,.hero-ink .btn{transition:background-color .2s ease,color .2s ease}
  .masthead__book:hover,.hero-ink .btn:hover{transform:none;box-shadow:none}
}

/* ---- conditions · ruled index on an ink panel — the hero's ground carried down ---- */
.cond-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B0907,#14110D 45%,#2B2412)}
.cond-section h2{color:#fff}
.cond-section .lede{color:rgba(255,255,255,.72)}
.cond-section__mark{display:none}
.cond-section .cond-lede{font-family:var(--brand-text);font-size:clamp(18px,1.85vw,24px);line-height:1.5;
  color:rgba(255,255,255,.85);max-width:none}
.cond-section .cond-lede .gd{color:var(--cream);border-bottom:1px solid rgba(227,211,179,.5);padding-bottom:2px}
.cond-section .rail{position:relative}
.cond-section .cond-row{border-bottom:1px solid rgba(167,145,108,.30)}
.cond-section .cond-txt h3{color:#fff}
.cond-section .cond-txt p{color:rgba(255,255,255,.60)}
.cond-section .cond-row:hover .cond-txt h3{color:var(--cream)}
.cond-section .cond-row:hover .cond-ic{color:var(--cream)}
/* scroll reveal: header, lede underline wipe, then rows stagger in. SPEC for Carlos: re-apply natively. */
.js .cond-section h2,.js .cond-section .cond-lede{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.cond-section .cond-lede{transition-delay:.12s}
.cond-section .cond-lede .gd{background:linear-gradient(90deg,rgba(227,211,179,.5),rgba(227,211,179,.5)) no-repeat left bottom/0% 1px;border-bottom:none;padding-bottom:2px;transition:background-size .7s ease .8s}
.js .cond-section .cond-row{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.cond-index .cond-row:nth-child(1){transition-delay:.20s}.cond-index .cond-row:nth-child(2){transition-delay:.28s}
.cond-index .cond-row:nth-child(3){transition-delay:.36s}.cond-index .cond-row:nth-child(4){transition-delay:.44s}
.cond-index .cond-row:nth-child(5){transition-delay:.52s}.cond-index .cond-row:nth-child(6){transition-delay:.60s}
.cond-index .cond-row:nth-child(7){transition-delay:.68s}.cond-index .cond-row:nth-child(8){transition-delay:.76s}
.cond-section.cond-in h2,.cond-section.cond-in .cond-lede,.cond-section.cond-in .cond-row{opacity:1;transform:none}
.cond-section.cond-in .cond-lede .gd{background-size:100% 1px}
@media (prefers-reduced-motion:reduce){
  .cond-section h2,.cond-section .cond-lede,.cond-section .cond-row{opacity:1;transform:none;transition:none}
  .cond-section .cond-lede .gd{background-size:100% 1px;transition:none}}
/* ambient icon drift · Gary 9/13: motion beyond the mouseover. Runs only after the
   section reveals; uses `translate` so the hover `transform` still composes.
   SPEC for Carlos: port with the motion layer, disabled under reduced motion. */
@keyframes cond-drift{0%,100%{translate:0 0}50%{translate:0 -4px}}
.cond-section.cond-in .cond-ic{animation:cond-drift 5.2s ease-in-out infinite}
.cond-index .cond-row:nth-child(1) .cond-ic{animation-delay:.0s}
.cond-index .cond-row:nth-child(2) .cond-ic{animation-delay:.65s}
.cond-index .cond-row:nth-child(3) .cond-ic{animation-delay:1.3s}
.cond-index .cond-row:nth-child(4) .cond-ic{animation-delay:1.95s}
.cond-index .cond-row:nth-child(5) .cond-ic{animation-delay:2.6s}
.cond-index .cond-row:nth-child(6) .cond-ic{animation-delay:3.25s}
.cond-index .cond-row:nth-child(7) .cond-ic{animation-delay:3.9s}
.cond-index .cond-row:nth-child(8) .cond-ic{animation-delay:4.55s}
@media (prefers-reduced-motion:reduce){.cond-section.cond-in .cond-ic{animation:none}}
.cond-section .cond-cta{justify-content:center;margin-top:48px}
.cond-section .cond-cta a.btn--gold{color:#fff}
.js .cond-section .cond-cta{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.2,1) .8s,transform .55s cubic-bezier(.2,.7,.2,1) .8s}
.cond-section.cond-in .cond-cta{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .cond-section .cond-cta{opacity:1;transform:none;transition:none}}
.cond-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 72px;margin-top:40px}
.cond-row{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-bottom:1px solid rgba(20,17,13,.14);text-decoration:none}
.cond-ic{flex:none;width:48px;font-size:30px;line-height:1.15;text-align:center;color:var(--cream);
  transition:transform .22s ease,color .22s ease}
.cond-txt{min-width:0}
.cond-ic--svg{width:48px;height:34px;color:var(--cream)}
.cond-txt h3{font-family:var(--display);font-weight:500;font-size:25px;margin:0;color:var(--ink);
  display:flex;align-items:baseline;gap:12px;transition:color .18s ease}
.cond-txt p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--fineprint)}
.cond-row:hover .cond-txt h3{color:#867250}
.cond-row:hover .cond-ic{transform:translateY(-2px) scale(1.08);color:#867250}
.cond-row:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
@media (max-width:760px){.cond-index{grid-template-columns:1fr;gap:0}}
@media (prefers-reduced-motion:reduce){.cond-ic{transition:none}.cond-row:hover .cond-ic{transform:none}}

/* ---- reviews · Trustindex/Google presentation ---- */
.reviews__head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.reviews__head h2{max-width:16ch;margin-bottom:0}
.reviews__lockup{display:flex;align-items:center;gap:16px;padding-bottom:6px}
.reviews__score{font-family:var(--brand-text);font-weight:600;font-size:52px;line-height:1;color:var(--ink)}
.reviews__meta{display:flex;flex-direction:column;gap:3px}
.reviews__stars{color:#FBBC05;font-size:17px;letter-spacing:2px;line-height:1}
.reviews__meta small{font-size:13.5px;color:var(--fineprint)}
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:36px}
.rev{background:#fff;border:1px solid rgba(20,17,13,.10);border-radius:14px;padding:22px 22px 24px;
  box-shadow:0 4px 14px rgba(20,17,13,.05);display:flex;flex-direction:column;gap:10px}
.rev__head{display:flex;align-items:center;gap:12px}
.rev__av{flex:none;width:42px;height:42px;border-radius:50%;color:#fff;display:grid;place-items:center;
  font:600 17px/1 var(--brand-text)}
.rev__who{display:flex;flex-direction:column;gap:1px;min-width:0}
.rev__who strong{font-size:15px;color:var(--ink)}
.rev__who small{font-size:12.5px;color:var(--fineprint)}
.rev__g{width:20px;height:20px;margin-left:auto;flex:none}
.rev__stars{margin:0;color:#FBBC05;font-size:15px;letter-spacing:2px;line-height:1;display:flex;align-items:center;gap:8px}
.rev__vf{color:#1D9BF0;font-size:14px}
.rev__txt{margin:0;font-size:14.5px;line-height:1.65;color:var(--body)}

/* ---- footer v2 · ink ground, wordmark, CTA row ---- */
.sitefoot--v2{background:linear-gradient(135deg,#0B0907,#14110D 55%,#2B2412);color:rgba(255,255,255,.72);
  font-family:var(--brand-text)}
.sitefoot--v2 .sitefoot__top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  padding:44px 0 32px;border-bottom:1px solid rgba(167,145,108,.30)}
.sitefoot--v2 .sitefoot__logo{display:block;height:52px;width:auto;max-width:100%;margin:0}
.sitefoot--v2 .sitefoot__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sitefoot--v2 .sitefoot__tel{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
  font-weight:600;font-size:16px}
.sitefoot--v2 .sitefoot__tel i{color:var(--gold);font-size:14px}
.sitefoot--v2 .sitefoot__tel:hover{color:var(--cream)}
.sitefoot--v2 .sitefoot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;
  padding:36px 0 40px}
.sitefoot--v2 h3{font-family:var(--brand-text);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);margin:0 0 12px}
.sitefoot--v2 p{margin:0 0 10px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.72)}
.sitefoot--v2 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sitefoot--v2 a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14.5px;transition:color .18s ease}
.sitefoot--v2 a:hover{color:var(--cream)}
.sitefoot--v2 .sitefoot__legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 0 22px;border-top:1px solid rgba(167,145,108,.30);font-size:13px;color:rgba(255,255,255,.55)}
.sitefoot--v2 .sitefoot__legal-links{display:flex;gap:22px}
.sitefoot--v2 .sitefoot__legal a{font-size:13px}

/* breadcrumb band under the hero */
.crumb-band{background:var(--paper);border-bottom:1px solid var(--hairline)}
.crumb-band .crumbs{margin:0;padding:12px 0;font-size:13px;color:var(--fineprint)}
.crumb-band .crumbs a{color:var(--fineprint);text-decoration:none}
.crumb-band .crumbs a:hover{color:#7A6644;text-decoration:underline}

/* ---- interior hero · ink ground + photo placeholder ---- */
.hero-ink--int .hero-ink__copy{padding-block:clamp(20px,3vw,44px) clamp(40px,6vw,80px)}
.hero-ink--int .crumbs{color:rgba(255,255,255,.6);font-size:13px;margin:0 0 18px}
.hero-ink--int .crumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.hero-ink--int .crumbs a:hover{color:var(--cream)}
.hero-ink--int .hero-ink__display{font-size:clamp(30px,3.4vw,48px)}
.hero-ink__figure--ph{align-self:stretch;display:flex;padding:clamp(20px,3vw,44px) 0 clamp(28px,4vw,56px)}
.ph-hero{width:100%;min-height:240px;border:2px dashed rgba(167,145,108,.55);border-radius:12px;
  display:grid;place-items:center;text-align:center;color:var(--cream);
  font:600 14px/1.7 var(--brand-text);letter-spacing:.1em;text-transform:uppercase}
.ph-hero small{display:block;color:rgba(255,255,255,.5);font-weight:400;letter-spacing:.02em;text-transform:none}

@media (max-width:900px){
  .hero-ink__grid{grid-template-columns:1fr;gap:8px}
  .hero-ink__copy{padding-bottom:16px}
  .hero-ink__display{max-width:none}
  .hero-ink__figure{justify-content:center;align-self:auto}
  .hero-ink__figure img{height:auto;max-height:min(70vw,500px)}
  .hero-ink__mark{width:min(52vw,380px)}
  .hero-ink{background-position:0 0,right -120px top 40px,0 0;background-size:auto,640px auto,auto}
}
@media (max-width:620px){
  .hero-ink .btn-row{flex-direction:column;align-items:stretch}
  .hero-ink .btn{justify-content:center}
}

/* ---- hero light-photo variant · 9/13 ----
   Gary: the ink header is too dark and the seated photo is the right warmth.
   The photo is cropped (hero-cox-seated-right.jpg, left 74% of the frame) so
   Dr. Cox lands in the right quarter; a warm paper scrim carries the copy on
   the left and fades out before it reaches him. Ink text on light ground.
   Toggle: swap hero-ink--light off to return to the ink build (also frozen in
   "Insight Chiropractic - Homepage (ink hero, saved).html"). */
.hero-ink--light{color:var(--ink);background:
  linear-gradient(92deg,rgba(250,248,245,.97) 0%,rgba(250,248,245,.93) 36%,rgba(250,248,245,.62) 52%,rgba(250,248,245,0) 67%),
  var(--hero-photo,url("../img/hero-cox-seated-right.jpg")) right 30%/cover no-repeat;
  background-color:var(--paper)}
.hero-ink--light .hero-ink__figure{display:none}
.hero-ink--light .hero-ink__copy{padding-block:clamp(24px,3vw,48px) clamp(120px,12vw,150px)}
.hero-ink--light .hero-ink__h1{color:var(--ink)}
.hero-ink--light .hero-ink__h1::before{background:var(--gold-ui)}
.hero-ink--light .hero-ink__display{color:var(--ink)}
.hero-ink--light .lede{color:var(--body)}
.hero-ink--light .lede .hl{color:var(--gold-text)}
.hero-ink--light .hero-ink__checks li{color:var(--ink)}
.hero-ink--light .hero-ink__checks i{color:var(--gold-text)}
.hero-ink--light .hero-ink__checks li:hover i{color:var(--gold-ui)}
/* hero button mouseovers · 9/13: ink fill rises from the bottom edge, label flips to white,
   deeper lift shadow. Spec for Carlos: transform-based, no layout shift; reduced-motion snaps. */
.hero-ink--light .btn{position:relative;overflow:hidden;isolation:isolate;
  transition:color .26s ease,border-color .26s ease,transform .2s ease,box-shadow .26s ease}
.hero-ink--light .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom center;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hero-ink--light .btn:hover::before{transform:scaleY(1)}
.hero-ink--light .btn--gold:hover{background:var(--gold);color:#fff;
  box-shadow:0 14px 30px rgba(20,17,13,.30)}
.hero-ink--light .btn--ghost-on-dark:hover{border-color:var(--ink);color:#fff;
  box-shadow:0 14px 30px rgba(20,17,13,.16)}
.hero-ink--light .btn:focus-visible{outline-color:var(--gold-ui)}
.hero-ink--light .hero-ink__rating{color:var(--body)}
.hero-ink--light .hero-ink__rating strong{color:var(--ink)}
.hero-ink--light .btn--gold{color:#fff}
.hero-ink--light .btn--ghost-on-dark{color:var(--ink);border-color:rgba(20,17,13,.45)}
@media (prefers-reduced-motion:reduce){.hero-ink--light .btn::before{transition:none}}
/* ---- belief band · ink v3 centered, 9/13 spec: 760px rail, centered stack — question,
   answer, gold rule, quote, attribution, link. Gold top rule, scroll reveal. ---- */
.belief--v3{position:relative;overflow:hidden;border-top:1px solid rgba(167,145,108,.30);
  padding-block:clamp(56px,7.5vw,106px);
  background:radial-gradient(ellipse 75% 85% at 50% 42%,rgba(167,145,108,.15) 0%,rgba(167,145,108,.05) 48%,transparent 72%) var(--ink)}
.belief--v3 .rail{position:relative}
.belief--v3 .belief-center{max-width:760px;text-align:center}
.belief--v3 .statement{font-family:var(--brand-display);font-weight:600;font-size:clamp(30px,3.3vw,44px);
  line-height:1.22;color:#fff;margin:0 auto;max-width:18ch;text-wrap:balance}
.belief--v3 .belief-answer{font-family:var(--text);font-weight:400;font-size:20px;line-height:1.7;
  color:rgba(255,255,255,.86);max-width:52ch;margin:24px auto 0}
.belief--v3 .belief-q{margin:28px 0 0}
.belief--v3 .belief-q::before{content:"";display:block;width:38px;height:2px;background:var(--gold);margin:0 auto 28px}
.belief--v3 .belief-q p{font-family:var(--text);font-weight:400;font-size:clamp(21px,2.1vw,24px);
  line-height:1.5;color:#fff;margin:0 auto;max-width:44ch}
.belief--v3 .belief-q .cm{color:var(--cream)}
.belief--v3 .belief-cite-row{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;
  gap:12px 28px;margin:20px 0 0}
.belief--v3 .belief-q cite{display:block;font-style:normal;font-family:var(--text);font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.belief--v3 .belief-cite-row a.belief-read{font-family:var(--text);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:6px;text-decoration-color:var(--gold);
  transition:color .18s ease,text-decoration-color .18s ease}
.belief--v3 .belief-cite-row a.belief-read:hover{color:var(--cream);text-decoration-color:var(--cream)}
.belief--v3 .belief-cite-row a.belief-read:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.belief--v3 .belief-read span{display:inline-block;transition:transform .2s ease}
.belief--v3 .belief-read:hover span{transform:translateX(3px)}
/* staggered reveal · question → answer → rule draws → quote → link; cream phrase underlines last */
.js .belief--v3 .statement,.js .belief--v3 .belief-answer,.js .belief--v3 .belief-q{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.belief--v3 .belief-answer{transition-delay:.12s}
.belief--v3 .belief-q{transition-delay:.24s}
.belief--v3.belief-in .statement,.belief--v3.belief-in .belief-answer,
.belief--v3.belief-in .belief-q{opacity:1;transform:none}
.js .belief--v3 .belief-q::before{transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1) .5s}
.belief--v3.belief-in .belief-q::before{transform:scaleX(1)}
.js .belief--v3 .cm{background:linear-gradient(90deg,rgba(227,211,179,.55),rgba(227,211,179,.55)) no-repeat left bottom/0% 1px;
  padding-bottom:2px;transition:background-size .7s ease .95s}
.belief--v3.belief-in .cm{background-size:100% 1px}
@media (max-width:900px){.belief--v3 .statement{font-size:30px}}
@media (prefers-reduced-motion:reduce){
  .belief--v3 .statement,.belief--v3 .belief-answer,.belief--v3 .belief-q{opacity:1;transform:none;transition:none}
  .belief--v3 .belief-q::before{transform:none;transition:none}
  .belief--v3 .cm{background-size:100% 1px;transition:none}
}

/* ---- injury band · divider-list on warm ink, 9/13 ----
   Ground #2B2412 (gold 5.07:1, cream 9.66:1, white .72 ≈ 9.5:1 — all computed).
   Photo .88fr sticky left, copy 1.12fr right, 72px gap. Under 900px the photo
   stacks above at 4:3. Rows: hairline-ruled, no numbers, no cards, no hover. */
.injury{background:#2B2412;padding-block:120px}
.injury__grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:72px;align-items:start}
/* media column stretches to row height so the sticky frame has travel; copy stays top-aligned */
.injury__mediacol{align-self:stretch}
.injury__sticky{position:sticky;top:96px}
.injury__media{margin:0;width:100%;height:620px;border-radius:10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 10px 22px rgba(0,0,0,.18),0 28px 56px rgba(0,0,0,.28)}
.injury__media img{display:block;width:100%;height:100%;object-fit:cover}
/* parallax · the frame stays sticky; the image inside is oversized (scale 1.14 buys ~7% travel
   each way) and drifts on --injury-par set from scroll progress. Reduced-motion snaps to center. */
.js .injury__media img{transform:scale(1.14) translateY(calc(var(--injury-par,0)*1px));will-change:transform}
@media (prefers-reduced-motion:reduce){.js .injury__media img{transform:scale(1.14) translateY(0)}}
.ph-slot--injury{width:100%;height:620px;border:2px dashed rgba(255,255,255,.28);border-radius:10px;
  display:grid;place-items:center;color:rgba(255,255,255,.55);
  font:600 13px/1.5 var(--text);letter-spacing:.1em;text-transform:uppercase}
.injury .eyebrow{color:var(--cream)}
.injury__lede{max-width:600px;color:rgba(255,255,255,.72)}
.injury__rows{margin-top:40px}
.injury__row{padding-block:26px;border-top:1px solid rgba(255,255,255,.14)}
.injury__row:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
/* Row labels per the KF divider-list contract: uppercase accent, weight 800, .12em.
   Sized up from 13px/600 cream (Gary 9/13: "really hard to see"). Cream = 9.66:1 on #2B2412. */
.injury__row h3{margin:0 0 10px;font-family:var(--text);font-weight:800;font-size:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.injury__row p{margin:0;color:rgba(255,255,255,.72);max-width:62ch}
.injury__fine{margin:28px 0 20px;font-size:14px;color:rgba(255,255,255,.55);max-width:62ch}
.injury__btns{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.injury .btn{display:inline-block;text-align:center;text-decoration:none;font-family:var(--brand-text);
  border-radius:8px;padding:17px 30px;font-size:16px;font-weight:600;letter-spacing:.02em;
  border:1px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.injury .btn:hover{transform:translateY(-2px)}
/* Gary 9/13: white label on the gold fill, matching the hero. NOTE: #fff on #A7916C computes 3.04:1,
   under the 4.5:1 button contract in the palette register. */
.injury .btn--gold{background:var(--gold);color:#fff}
.injury .btn--gold:hover{background:var(--cream);color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.injury .btn--ghost-on-dark{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.55)}
.injury .btn--ghost-on-dark:hover{border-color:var(--gold);color:var(--gold)}
.injury .btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* section reveal · reduced-motion safe */
.js .injury .injury__grid{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.injury.injury-in .injury__grid{opacity:1;transform:none}
@media (max-width:900px){
  .injury__grid{grid-template-columns:1fr;gap:36px}
  .injury__sticky{position:static}
  .injury__media,.ph-slot--injury{height:auto;aspect-ratio:4/3}
}
@media (max-width:480px){
  .injury__btns{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .js .injury .injury__grid{opacity:1;transform:none;transition:none}
  .injury .btn{transition:none}.injury .btn:hover{transform:none}
}

/* ---- reviews · read-all link, right-aligned under the grid (Gary 9/13). Mirrors the belief-read
   treatment on light ground: --accent-text = 5.51:1 on white. ---- */
.reviews__all{display:flex;justify-content:flex-end;margin-top:28px}
.reviews__all-link{font-family:var(--text);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:6px;text-decoration-color:var(--accent-text);
  transition:color .18s ease,text-decoration-color .18s ease}
.reviews__all-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.reviews__all-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.reviews__all-link span{display:inline-block;transition:transform .2s ease}
.reviews__all-link:hover span{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.reviews__all-link,.reviews__all-link span{transition:none}}

/* photo hover · same lift family as .fv__media (KF): -6px rise, shadow deepens, no zoom. */
.portrait-card--below .crop{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.portrait-card--below .crop:hover{transform:translateY(-6px);box-shadow:0 36px 68px -22px rgba(20,17,13,.44)}
@media (prefers-reduced-motion:reduce){.portrait-card--below .crop,.fv__media{transition:none}}

/* ---- first visit · split-feature ×2, 9/13 spec ----
   Exam row: copy 1.12fr left, photo .88fr right; treatment row reversed. 72px gap,
   96px between rows, per-row reveal. Photos 4:5 (520px / 600px tall), warm layered shadow. */
.fv__row{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:72px;align-items:start;margin-top:52px}
.fv__row + .fv__row{margin-top:96px}
.fv__row--rev{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.fv .day1{grid-template-columns:1fr;margin-top:0}
/* conditions-style rows · sticky-step-list spotlight (KF How We Work), Insight skin:
   active row fills INK with white text and cream icon (gold fill + white label is barred).
   Scroll-spy: row nearest 45% viewport goes active. SPEC for Carlos: custom scroll-spy. */
.fv .day1__head{border-top:0;padding-top:0;margin-bottom:14px}
.fv .day1__head h3{font-size:clamp(24px,2.4vw,30px)}
.fv .day1 li{display:flex;gap:20px;align-items:flex-start;padding:20px 18px;margin:0 -18px;
  border-radius:10px;border-bottom:1px solid var(--hairline);
  transition:background-color .35s ease,box-shadow .35s ease}
.fv .day1 li::before{content:none}
.fv .day1 li.step-on{background:var(--ink);border-bottom-color:transparent;
  box-shadow:0 14px 34px rgba(20,17,13,.22)}
.fv .day1 li.step-on h4{color:#fff}
.fv .day1 li.step-on p{color:rgba(255,255,255,.78)}
.fv .day1 li.step-on .fv-ic{color:var(--cream)}
@media (prefers-reduced-motion:reduce){.fv .day1 li{transition:none}}
.fv .fv-ic{flex:none;width:48px;font-size:26px;line-height:1.25;text-align:center;color:var(--gold-text)}
.fv .fv-ic--svg{width:48px;height:34px}
.fv .fv-txt{min-width:0}
.fv .day1 li h4{font-family:var(--display);font-weight:600;font-size:22px;margin:0;color:var(--ink)}
.fv .day1 li p{margin:4px 0 0}
.fv__media{margin:0;min-width:0;overflow:hidden;border-radius:10px;background:var(--hairline);align-self:start;
  box-shadow:0 1px 2px rgba(20,17,13,.06),0 10px 22px rgba(20,17,13,.10),0 28px 56px rgba(43,36,18,.16);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
/* photo hover · ONE family across the page (KF lift): frame rises 6px, warm shadow deepens.
   No zooms, no ratio changes (Gary 9/13). Parallax frames (exam, injury) sit still. */
.fv__media:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(20,17,13,.08),0 14px 30px rgba(20,17,13,.14),0 36px 72px rgba(43,36,18,.20)}
.fv__media--par:hover{transform:none;box-shadow:0 1px 2px rgba(20,17,13,.06),0 10px 22px rgba(20,17,13,.10),0 28px 56px rgba(43,36,18,.16)}
.fv__img{display:block;width:100%;height:520px;object-fit:cover;object-position:70% center}
/* exam photo · first-visit-exam.jpg (the cord-free frame). 9/19 (Gary): the crop moved
   right, so the foreground figure is a shoulder at the edge and Dr. Cox and the model
   hold the frame. Light right-anchored zoom keeps the parallax slack. */
.fv__img--exam{object-position:100% top;transform:scale(1.22) translateY(calc(var(--fv-par,0)*1px));transform-origin:100% 0}
@media (prefers-reduced-motion:reduce){.fv__img--exam{transform:scale(1.22) translateY(0)}}
.fv__img--treat{height:600px}
.fv .ph-slot{width:100%;height:600px;border:2px dashed var(--hairline-strong);border-radius:10px;
  display:grid;place-items:center;color:var(--fineprint);font:600 13px/1.5 var(--text);
  letter-spacing:.1em;text-transform:uppercase}
.fv__mediacol{min-width:0}
.fv__mediacol .btn-row{margin-top:28px}
/* per-row reveal · reduced-motion safe */
.js .fv .fv__row{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.fv .fv__row.row-in{opacity:1;transform:none}
@media (max-width:900px){
  .fv__row,.fv__row--rev{grid-template-columns:1fr;gap:28px;margin-top:44px}
  .fv__row + .fv__row{margin-top:64px}
  .fv__row .fv__media{order:-1}
  .fv__img,.fv__img--treat{width:100%;height:auto;aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .js .fv .fv__row{opacity:1;transform:none;transition:none}
  .fv__img{transition:none}.fv__media:hover .fv__img{transform:none}
}

/* ---- seam · hero → conditions: pointer divider (picked 9/13 over medallion + wave + diagonal) ----
   SVG sits at the hero's bottom edge; the warm ground dips to a soft point aimed
   into Conditions We Treat. Gold hairline draws along the edge when the
   conditions section reveals (.seam-in via the cond-section observer). */
.seamx{position:absolute;left:0;bottom:-1px;width:100%;height:96px;z-index:3;display:block}
.seamx__stroke{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.seamx.seam-in .seamx__stroke{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .seamx__stroke{transition:none;stroke-dashoffset:0}
}

@media (max-width:900px){
  .hero-ink--light{background:
    linear-gradient(rgba(250,248,245,.95),rgba(250,248,245,.95)),
    var(--hero-photo,url("../img/hero-cox-seated-right.jpg")) center 25%/cover no-repeat;
    background-position:center 25%;background-size:cover}
}


/* ---- who-we-serve · 9/13 rebuild v3: soft plate cards. White surface fully rounded,
   sitting on a gold-tint plate that peeks at the bottom and carries the centered route caption.
   Icon top-left per the homepage icon system. SPEC for Carlos: UABB info-box inside a styled
   BB column; plate is the column background, surface the info-box. ---- */
.wws__head{max-width:none}
.wws__more{display:flex;justify-content:flex-end;margin-top:26px}
.wws__all{display:inline-block;font-family:var(--text);font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  transition:color .22s ease}
.wws__all:hover{color:var(--ink)}
.wws__all:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.wws__all span{display:inline-block;transition:transform .22s ease}
.wws__all:hover span{transform:translateX(5px)}
.wws__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px}
.wws-card{display:flex;flex-direction:column;text-decoration:none;
  background:var(--accent-tint);border:1px solid var(--hairline-strong);border-radius:20px;
  box-shadow:0 10px 26px rgba(20,17,13,.06);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.wws-card__body{display:flex;flex-direction:column;flex:1;background:#fff;
  border:1px solid var(--hairline);border-radius:19px;margin:-1px -1px 0;padding:30px 30px 26px}
.wws-card__top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.wws-card__ic{font-size:26px;line-height:1;color:var(--gold-ochre);transition:transform .22s ease,color .22s ease}
.wws-card h3{font-size:25px;color:var(--ink);margin:0}
.wws-card__top h3{margin-left:4px}
.wws-card__body p{font-family:var(--text);font-size:15px;line-height:1.6;color:var(--fineprint);max-width:none;margin:0 0 24px}
.wws-card__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.wws-chip{font-family:var(--text);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);background:#fff;border:1px solid var(--hairline-strong);border-radius:999px;padding:4px 9px;white-space:nowrap}
.wws-card__plate{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;
  font-family:var(--text);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold-ochre);color:var(--ink);border-radius:0 0 19px 19px;
  transition:background-color .22s ease,color .22s ease}
.wws-card:hover .wws-card__plate,.wws-card:focus-visible .wws-card__plate{background:var(--ink);color:#fff}
.wws-card:hover .wws-card__ic,.wws-card:focus-visible .wws-card__ic{color:var(--ink)}
.wws-card__plate .arr{display:inline-block;transition:transform .22s ease}
.wws-card:hover,.wws-card:focus-visible{transform:translateY(-6px);border-color:#867250;
  box-shadow:0 24px 48px rgba(20,17,13,.14)}
.wws-card:hover .arr,.wws-card:focus-visible .arr{transform:translateX(5px)}
.wws-card:hover .wws-card__ic,.wws-card:focus-visible .wws-card__ic{transform:translateY(-2px)}
.wws-card:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
@media (max-width:760px){.wws__cards{grid-template-columns:1fr}}
/* scroll reveal · belief-band pattern: js-gated, fade + 16px rise, 90ms stagger. */
.js .wws .wws-card{opacity:0}
.wws.wws-in .wws-card{opacity:1;animation:wws-rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.wws.wws-in .wws-card:nth-child(2){animation-delay:.09s}
.wws.wws-in .wws-card:nth-child(3){animation-delay:.18s}
@keyframes wws-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .wws .wws-card{opacity:1;animation:none}
  .wws.wws-in .wws-card{animation:none}
  .wws-card,.wws-card__ic,.wws-card__plate,.wws-card__plate .arr,.wws__all,.wws__all span{transition:none}
  /* keep the hover lift as an instant state change; only the easing is motion */
  .wws-card:hover .arr,.wws-card:hover .wws-card__ic,.wws__all:hover span{transform:none}}

/* ---- affordability · divider-list (figures variant), 9/13 spec ----
   White ground, left header capped at 62ch, hairline across the rail, four plain paper
   figure tiles, insurance line, Florida 72-hour disclosure. Tiles are NOT links: no hover,
   lift, top bar or shadow. ChiroHealthUSA is a discount plan, and the support line says so.
   SPEC for Carlos: BB row (white) → heading + text modules, separator, 4-column row of
   styled columns (paper, 8px radius, 28px 24px), then two text modules. ---- */
.afford{background:var(--surface)}
.afford__top{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,3vw,64px);flex-wrap:wrap}
.afford__head{flex:1 1 300px;min-width:0}
.afford__logo{flex:0 1 auto;width:clamp(230px,36vw,509px);height:auto;display:block;background:transparent;
  margin-right:clamp(0px,3vw,64px);margin-top:50px}
@media (max-width:620px){.afford__logo{margin-top:8px}}
.afford__head{max-width:62ch}
.afford__head h2{margin:0}
.afford__lede{margin:18px 0 0;max-width:none}
/* divider-list treatment: no card chrome, hairline-ruled columns. Ink figures are what you pay,
   gold figures what you save. CARLOS: 4-column BB row, 1px left borders, no column background. */
.afford__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:44px;padding-top:0;border-top:1px solid var(--hairline)}
.afford-tile{background:transparent;border:0;border-radius:0;
  border-left:1px solid var(--hairline);padding:30px clamp(12px,1.4vw,22px) 32px}
.afford-tile:first-child{border-left:0;padding-left:0}
.afford-tile h3{font-family:var(--display);font-weight:600;font-size:clamp(46px,5vw,68px);line-height:.94;
  letter-spacing:-.01em;color:var(--ink);margin:0;font-variant-numeric:lining-nums}
.afford-tile--save h3{color:var(--ink)}
.afford-tile p{font-family:var(--text);font-size:16px;line-height:1.6;color:var(--body);
  margin:14px 0 0;max-width:none;text-wrap:pretty}
/* footer row of the block: support line left, Terms disclosure right, one hairline above. */
.afford__foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(16px,3vw,48px);flex-wrap:wrap;
  margin-top:0;padding-top:22px;border-top:1px solid var(--hairline)}
.afford__insurance{font-family:var(--text);font-size:16px;line-height:1.6;color:var(--body);
  margin:0;max-width:62ch}
.afford__insurance a{font-family:var(--text);font-weight:600;color:var(--gold-text);
  text-decoration:underline;text-underline-offset:3px}
.afford__insurance a:focus-visible{outline:3px solid var(--gold-text);outline-offset:3px}
.afford__terms{margin:0;flex:0 0 auto}
.afford__terms>summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--text);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-text);list-style:none;padding:4px 0}
.afford__terms>summary::-webkit-details-marker{display:none}
.afford__terms>summary:focus-visible{outline:3px solid var(--gold-text);outline-offset:3px}
.afford__terms-caret{transition:transform .18s ease;flex:none}
.afford__terms[open]>summary .afford__terms-caret{transform:rotate(180deg)}
.afford__disclosure,
.afford__legal{font-family:var(--text);font-size:14px;line-height:1.6;letter-spacing:.02em;
  color:var(--fineprint);margin:16px 0 0;max-width:none}
.afford__terms[open]{flex:1 1 100%}
@media (prefers-reduced-motion:reduce){.afford__terms-caret{transition:none}}
@media (max-width:900px){
  .afford__foot{display:block}
  .afford__terms{margin-top:18px}
  .afford__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .afford-tile:nth-child(3){border-left:0;padding-left:0}
  .afford-tile:nth-child(n+3){border-top:1px solid var(--hairline);margin-top:8px}
}
@media (max-width:560px){
  .afford__grid{grid-template-columns:1fr}
  .afford-tile{border-left:0;padding-left:0;border-top:1px solid var(--hairline);margin-top:0;padding-top:24px}
  .afford-tile:first-child{border-top:0}
  .afford-tile p{max-width:none}
}
/* scroll reveal · belief-band pattern: js-gated, fade + 16px rise, 90ms stagger. */
.js .afford .afford-tile{opacity:0}
.afford.afford-in .afford-tile{opacity:1;animation:afford-rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.afford.afford-in .afford-tile:nth-child(2){animation-delay:.09s}
.afford.afford-in .afford-tile:nth-child(3){animation-delay:.18s}
.afford.afford-in .afford-tile:nth-child(4){animation-delay:.27s}
@keyframes afford-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .afford .afford-tile{opacity:1;animation:none}
  .afford.afford-in .afford-tile{animation:none}}

/* ---- final CTA · two-panel band, 9/13 rebuild ----
   Photo 54% left at its own 3:2, whole frame, untouched (no radius, shadow, scrim, filter);
   1px gold hairline between; copy 46% right on warm ink #2B2412, 64px inset, max 520px.
   Band height set by the photo panel. Footer hairline seam kept. */
.cta-duo{display:grid;grid-template-columns:54% 46%;background:#2B2412;border-bottom:1px solid rgba(255,255,255,.14);
  min-height:clamp(360px,30vw,470px)}
.cta-duo__photo{margin:0;min-width:0;align-self:stretch;border-right:1px solid var(--gold)}
.cta-duo__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cta-duo__copywrap{min-width:0;display:flex;align-items:center}
.cta-duo__copy{max-width:520px;padding:56px 64px;text-align:left}
.cta-duo__copy .eyebrow{color:var(--cream)}
.cta-duo__copy h2{color:#fff;margin:0 0 .45em;font-size:clamp(28px,2.9vw,40px)}
.cta-duo__line{color:rgba(255,255,255,.80);font-size:clamp(17px,1.7vw,19px);line-height:1.62;max-width:46ch;margin:0 0 28px}
.cta-duo__line a{color:var(--accent)}
.cta-duo__copy .btn-row{justify-content:flex-start;margin:0}
/* copy-only reveal · reduced-motion safe */
.js .cta-duo .cta-duo__copy{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.cta-duo.ctaduo-in .cta-duo__copy{opacity:1;transform:none}
@media (max-width:900px){
  .cta-duo{grid-template-columns:1fr;min-height:0}
  .cta-duo__photo{aspect-ratio:3/2;border-right:0;border-bottom:1px solid var(--gold)}
  .cta-duo__copy{padding:56px;max-width:none}
}
@media (max-width:480px){
  .cta-duo__copy .btn-row{flex-direction:column;align-items:stretch}
  .cta-duo__copy .btn{display:block;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .js .cta-duo .cta-duo__copy{opacity:1;transform:none;transition:none}
}