/* ===================================================================
   Pro Motion Clinic — Design System  (dark "sporty / high-performance / luxury")
   Aesthetic: near-black editorial, electric-blue accent, condensed display.
   Display: Oswald (condensed, on-brand) · Body: Hanken Grotesk
   Theme converted from the approved staging concept — applied site-wide
   onto the existing markup vocabulary (no structural HTML changes).
   =================================================================== */

/* ---- Self-hosted fonts (no external CDN dependency) ---- */
@font-face { font-family:"Oswald"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/Oswald-500.woff2") format("woff2"); }
@font-face { font-family:"Oswald"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/Oswald-600.woff2") format("woff2"); }
@font-face { font-family:"Oswald"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/Oswald-700.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/HankenGrotesk-400.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/HankenGrotesk-500.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/HankenGrotesk-600.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/HankenGrotesk-700.woff2") format("woff2"); }

:root {
  /* Surfaces (light — DC Chiropractic) */
  --bg:        #ffffff;   /* white base */
  --bg-2:      #f1f6f7;   /* raised panel / alt section (soft teal tint) */
  --bg-3:      #ffffff;   /* card */
  --bg-4:      #f6f9fa;   /* form fields */

  /* Accent (DC teal-navy) */
  --accent:    #1e5169;   /* deep teal-navy — primary brand */
  --accent-2:  #2f7d97;   /* mid-teal highlight (readable on white) */
  --navy:      #163d4f;   /* deep accent band */

  /* Ink */
  --text:      #17323f;   /* near-navy heading ink */
  --body:      #3f4c55;   /* body copy */
  --muted:     #5c6b74;   /* muted / lede */
  --line:      rgba(22,61,79,.12);
  --line-2:    rgba(22,61,79,.20);

  /* Legacy aliases (kept so any remaining token references resolve on light) */
  --navy-2:    var(--navy);
  --blue:      var(--accent);
  --amber:     var(--accent);
  --amber-dk:  var(--accent-2);
  --ink:       var(--text);
  --canvas:    var(--bg);
  --paper:     var(--bg-3);
  --sand:      var(--bg-2);

  /* Type */
  --display: "Oswald", "Arial Narrow", sans-serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;

  /* Rhythm */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --shadow: 0 24px 50px -32px rgba(22,61,79,.35);
  --shadow-sm: 0 14px 34px -26px rgba(22,61,79,.30);
  --ring: 0 0 0 3px rgba(30, 81, 105, .35);
  --glow: 0 12px 30px -14px rgba(30,81,105,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); color: var(--text); font-weight: 600; line-height: 1.04; margin: 0 0 .5em; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(2.6rem, 6vw, 4.7rem); letter-spacing: .005em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: .02em; }
p { margin: 0 0 1.1em; }
a { color: var(--accent-2); text-decoration: none; }
img { max-width: 100%; display: block; }
strong { color: var(--text); font-weight: 700; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .26em;
  font-size: .76rem; font-weight: 600; color: var(--accent); margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg,var(--accent),transparent); display: inline-block; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
  font-size: .9rem; padding: .9rem 1.6rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #ffffff;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  box-shadow: var(--glow);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -14px rgba(30,81,105,.5); }
.btn--ghost { background: transparent; color: var(--accent); border-color: var(--line-2); box-shadow: none; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(30,81,105,.06); }
.btn--navy { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #ffffff; box-shadow: var(--glow); }
.btn--navy:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -14px rgba(30,81,105,.5); }
.btn--outline { background: transparent; color: var(--accent); border-color: var(--line-2); box-shadow: none; }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); background: rgba(30,81,105,.06); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 6px;
}

/* ---------- Utility top bar ---------- */
.topbar { background: var(--navy); color: #cfe0e5; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar .wrap { display: flex; gap: 1.4rem; align-items: center; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: #d7e2ee; }
.topbar a:hover { color: var(--accent-2); }
.topbar .sep { margin-left: auto; }
.topbar .chip { display: inline-flex; align-items: center; gap: .4rem; }
.topbar .chip svg { width: 14px; height: 14px; opacity: .8; }

/* ---------- Social icons ---------- */
.social { display: inline-flex; align-items: center; gap: .4rem; }
.social a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: inherit; transition: background .2s, color .2s, transform .2s; }
.social a svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.social a:hover { transform: translateY(-2px); }
.topbar .social a { width: 28px; height: 28px; }
.topbar .social a:hover { color: var(--accent); }
.site-footer .social { gap: .55rem; margin-top: .4rem; }
.site-footer .social a { background: rgba(30,81,105,.10); color: var(--accent); }
.site-footer .social a:hover { background: var(--accent); color: #ffffff; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(22,61,79,.94);
  backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.10); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; }
.brand img { height: 52px; width: auto; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.main-nav > a:not(.btn), .has-dropdown > .nav-top {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
  font-size: .9rem; color: rgba(255,255,255,.82); padding: .6rem .8rem; border-radius: 8px;
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; background: none; border: 0;
}
.main-nav > a:not(.btn):hover, .has-dropdown:hover > .nav-top { color: #ffffff; }
.main-nav > a.active:not(.btn) { color: #9fd; color: #a9dbe4; }
.nav-phone { font-family: var(--display); font-weight: 600; color: #cfe6ec; letter-spacing: .03em; padding: .6rem .6rem; }

/* Cascading dropdown */
.has-dropdown { position: relative; }
.has-dropdown .chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.has-dropdown:hover .chev, .has-dropdown.open .chev { transform: rotate(225deg) translateY(-1px); }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s;
}
.dropdown--mini { min-width: 190px; }
.dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); }
.dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .62rem .8rem; border-radius: 9px; color: var(--body); font-weight: 500; font-size: .95rem; }
.dropdown a:hover { background: rgba(30,81,105,.12); color: var(--accent-2); }
.dropdown a small { color: var(--muted); font-weight: 400; font-size: .8rem; }
.dropdown a .go { color: var(--accent); font-family: var(--display); }
.dd-item { position: relative; }
.flyout {
  position: absolute; top: -.5rem; left: 100%; margin-left: .5rem;
  min-width: 250px; max-height: calc(100vh - 9.5rem); overflow-y: auto; overflow-x: hidden;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .5rem; opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .16s, transform .16s; z-index: 70;
}
.flyout::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.7rem; width: .7rem; }
.dd-item:hover > .flyout, .dd-item:focus-within > .flyout, .dd-item.open > .flyout { opacity: 1; visibility: visible; transform: translateX(0); }
.flyout a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--body); font-weight: 500; font-size: .88rem; white-space: nowrap; }
.flyout a:hover { background: rgba(30,81,105,.12); color: var(--accent-2); }
.flyout a.flyout-all { font-weight: 700; color: var(--accent-2); border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: .15rem; }
.flyout a.flyout-all::after { content: " →"; opacity: .6; font-weight: 500; }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(30,81,105,.18), transparent 60%),
    radial-gradient(90% 70% at -10% 110%, rgba(30,81,105,.12), transparent 55%);
}
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero h1 { color: var(--text); font-weight: 700; letter-spacing: .005em; }
.hero h1 .accent { color: transparent; -webkit-text-stroke: 1.4px var(--accent-2); }
.hero-sub { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: clamp(1.05rem, 2.1vw, 1.35rem); line-height: 1.3; color: var(--accent-2); margin: .7rem 0 0; max-width: 32ch; }
.hero .lede { max-width: 38ch; color: #d6dde4; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-trust { display: flex; gap: 0; margin-top: 2.4rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.hero-trust .t { line-height: 1.15; padding-right: 2rem; margin-right: 2rem; border-right: 1px solid var(--line); }
.hero-trust .t:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-trust .t b { font-family: var(--display); font-size: 1.9rem; color: var(--accent-2); display: block; line-height: 1; }
.hero-trust .t span { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.hero-media { position: relative; }
.hero-media .shot { border-radius: 20px; box-shadow: var(--shadow); aspect-ratio: 4/4.4; object-fit: cover; width: 100%;
  border: 1px solid var(--line-2); }
.hero-media .tag { position: absolute; left: -8px; bottom: 26px; background: rgba(10,12,16,.78); backdrop-filter: blur(8px); color: #fff;
  padding: 1rem 1.2rem; border-radius: 14px; box-shadow: var(--shadow); max-width: 240px; border: 1px solid var(--line-2); }
.hero-media .tag .k { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.hero-media .tag .s { font-size: .82rem; color: var(--accent-2); }
.hero-media .ring { position: absolute; top: -22px; right: -22px; width: 120px; height: 120px;
  border: 3px dashed rgba(30,81,105,.55); border-radius: 50%; z-index: -1; }

/* ---------- Section scaffolding ---------- */
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-head { max-width: 60ch; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.bg-paper { background: var(--bg); }
.bg-navy { background: linear-gradient(160deg, #0e2640, var(--navy)); color: #c8d6e6; }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-sand { background: var(--bg-2); }

/* ---------- Services grid ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.svc-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.6rem; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; }
.svc-card::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: linear-gradient(90deg,var(--accent-2),var(--accent)); transition: width .35s; }
.svc-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.svc-card:hover::after { width: 100%; }
.svc-card .num { font-family: var(--display); font-size: .8rem; color: var(--accent-2); letter-spacing: .1em; }
.svc-card h3 { margin: .5rem 0 .5rem; color: var(--text); }
.svc-card p { font-size: .95rem; margin: 0 0 1rem; color: var(--muted); }
.svc-card .more { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--accent-2); display: inline-flex; gap: .3rem; }
.svc-card .more .arr { transition: transform .2s; }
.svc-card:hover .more .arr { transform: translateX(4px); }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
.step { position: relative; padding: 1.7rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-3); }
.step .n { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: rgba(30,81,105,.5); }
.step h3 { margin: .4rem 0 .5rem; color: var(--text); }
.step p { font-size: .94rem; color: var(--muted); }

/* ---------- Split / why ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3.4rem); align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow-sm); width: 100%; object-fit: cover; border: 1px solid var(--line); }
.checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--body); }
.checklist li::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306121d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; }
.quote { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; position: relative; }
.quote .stars { color: var(--accent-2); letter-spacing: .15em; font-size: .9rem; }
.quote p { font-size: .98rem; color: var(--text); margin: .7rem 0 1rem; }
.quote .who { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; color: var(--accent-2); }
.quote::before { content: "\201C"; position: absolute; top: 6px; right: 18px; font-family: var(--display); font-size: 4rem; color: rgba(255,255,255,.06); line-height: 1; }

/* ---------- Location ---------- */
.loc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: stretch; }
.loc .map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 340px; border: 1px solid var(--line); width: 100%; }
.loc .fact { display: flex; gap: .8rem; margin-bottom: 1rem; }
.loc .fact .ic { flex: 0 0 40px; height: 40px; background: rgba(30,81,105,.1); border: 1px solid rgba(30,81,105,.3); border-radius: 10px; display: grid; place-items: center; }
.loc .fact .ic svg { width: 18px; height: 18px; stroke: var(--accent-2); }
.loc .fact b { display: block; margin-bottom: .15rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--text); font-size: .85rem; }
.loc .fact > div:last-child { min-width: 0; color: var(--muted); }
.loc .fact > div:last-child a { color: var(--body); }
.loc .fact > div:last-child a:hover { color: var(--accent-2); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; }
.team-grid.compact { grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); justify-content: center; gap: 1.4rem; }
.member { text-align: center; }
.member .ph { display: block; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.member .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(.35) contrast(1.03); transition: filter .4s, transform .4s; transform: scale(var(--zoom,1)); transform-origin: center var(--zoomy,50%); }
.member:hover .ph { transform: translateY(-3px); transition: transform .3s; }
.member:hover .ph img { filter: grayscale(0); }
.member .nm { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; color: var(--text); margin-top: .7rem; }
.member .rl { font-size: .8rem; color: var(--accent-2); text-transform: uppercase; letter-spacing: .04em; }
.member .bio { font-size: .86rem; color: var(--body); margin-top: .55rem; text-align: left; line-height: 1.5; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; margin: 1.4rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
a.member { display: block; text-decoration: none; }
a.member:hover .rl { color: var(--accent); }

/* ---------- Associations strip ---------- */
.assoc-strip { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.assoc-strip .wrap { display: flex; align-items: center; gap: clamp(.9rem,2.4vw,1.9rem); flex-wrap: wrap; justify-content: center; padding-block: 2rem; }
.assoc-strip .lbl { display: none; }
.assoc-card { background: transparent; border-radius: 12px; padding: .75rem 1.2rem; display: inline-flex; align-items: center; transition: transform .2s, opacity .2s; }
.assoc-card:hover { transform: translateY(-3px); opacity: .78; }
.assoc-card img { height: 84px; width: auto; object-fit: contain; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(160deg, #205a72, var(--navy)); color: #fff; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  padding: clamp(2.2rem,5vw,3.6rem); display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border: 30px solid rgba(255,255,255,.08); border-radius: 50%; }
.cta-band h2 { color: #fff; margin: 0 0 .4rem; }
.cta-band p { color: #d7e6ea; margin: 0; }
.cta-band .eyebrow { color: #9fd3dd; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.12); }
.cta-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-2); color: var(--muted); padding-top: clamp(3rem,5vw,4.2rem); font-size: .92rem; border-top: 1px solid var(--accent); }
.site-footer h4 { color: var(--accent-2); font-size: .92rem; letter-spacing: .12em; margin-bottom: 1.1rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; }
.site-footer a:not(.btn) { color: var(--muted); }
.site-footer a:not(.btn):hover { color: var(--text); }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.foot-brand img { width: auto; height: 96px; max-width: 100%; margin-bottom: 1rem; }
.land-ack { border-top: 1px solid var(--line); margin-top: 2.6rem; padding: 1.6rem 0; font-size: .82rem; color: var(--muted); }
.land-ack p { margin: 0 0 .8rem; }
.land-ack p:last-child { margin-bottom: 0; }
.foot-badge { margin-top: 1.3rem; }
.foot-badge img { width: 96px; height: auto; max-width: 96px; opacity: 1; }
.foot-bottom { border-top: 1px solid var(--line); margin-top: 1.75rem; padding: 1.2rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .82rem; }

/* ---------- Page hero (interior) ---------- */
.page-hero { background: radial-gradient(120% 130% at 80% -20%, rgba(30,81,105,.16), transparent 55%), var(--bg-2); color: var(--body); padding: clamp(3rem,6vw,5rem) 0; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero::after { content: ""; position: absolute; right: -40px; bottom: -80px; width: 280px; height: 280px; border: 28px solid rgba(30,81,105,.12); border-radius: 50%; }
.page-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; position: relative; z-index: 1; }
.page-hero h1 { color: var(--text); }
.page-hero--text .wrap { grid-template-columns: 1fr; }
.page-hero--text .lede { max-width: 66ch; }
/* Text-only hero sits on a LIGHT background, so the lede must be dark ink. The
   image-hero variant re-lightens it (see .page-hero--image .lede) for its dark
   photo overlay. */
.page-hero .lede { color: var(--body); }
.page-hero .crumbs { font-size: .76rem; color: var(--muted); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .12em; font-family: var(--display); }
.page-hero .crumbs a { color: var(--accent-2); }
.page-hero .shot { border-radius: var(--radius); border: 1px solid var(--line-2); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ---------- Native forms (on-brand, replace vendor iframes) ---------- */
.pm-form { display: grid; gap: 1rem; }
.pm-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pm-field { display: grid; gap: .35rem; }
.pm-field label { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: .76rem; color: var(--accent-2); font-weight: 600; }
.pm-field .req { color: var(--accent); }
.pm-form input, .pm-form select, .pm-form textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--text); background: var(--bg-4);
  border: 1.5px solid var(--line-2); border-radius: 10px; padding: .8rem .9rem; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.pm-form input::placeholder, .pm-form textarea::placeholder { color: #6f7d8c; }
.pm-form select option { color: var(--text); background: var(--bg-3); }
.pm-form input:focus, .pm-form select:focus, .pm-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.pm-form textarea { resize: vertical; min-height: 110px; }
.pm-form .btn { width: 100%; justify-content: center; margin-top: .2rem; }
.pm-form .fineprint { font-size: .78rem; color: var(--muted); margin: 0; }
.pm-form-status { font-size: .85rem; color: #cf3a3a; margin: 0; font-weight: 600; }
.pm-form-success { display: none; text-align: center; padding: 2rem 1rem; }
.pm-form-success .ok { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306121d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/26px no-repeat; }
.pm-form-success h3 { color: var(--accent-2); margin: 0 0 .4rem; }
form.sent .pm-form { display: none; }
form.sent .pm-form-success { display: block; }

/* Newsletter inline form (compact) */
.pm-form--inline { grid-template-columns: 1fr auto; align-items: end; }
.pm-form--inline .pm-field { grid-column: 1; }
.pm-form--inline .btn { width: auto; grid-column: 2; grid-row: 2; }
@media (max-width: 520px) { .pm-form--inline { grid-template-columns: 1fr; } .pm-form--inline .btn { grid-column: 1; grid-row: auto; width: 100%; } .pm-form .row2 { grid-template-columns: 1fr; } }

/* ---------- Embeds (review widget, video) ---------- */
.embed-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.embed-frame { width: 100%; border: 0; display: block; }
.review-embed { width: 100%; }
.review-disclaimer { text-align: center; font-size: .8rem; color: var(--muted); margin: 1rem 0 0; font-style: italic; }
.review-embed iframe.lc_reviews_widget { width: 100%; min-width: 100%; min-height: 320px; border: 0; display: block; background: transparent; }
.review-cta { text-align: center; margin-top: 1.4rem; }
/* GoHighLevel inline form embed — the form_embed.js script auto-sizes the iframe;
   min-height avoids a zero-height flash before the script runs. */
.ghl-form-embed { width: 100%; }
.ghl-form-embed iframe { width: 100%; min-height: 620px; border: 0; display: block; background: transparent; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3rem); align-items: start; }
.newsletter { background: radial-gradient(120% 140% at 20% 0%, rgba(30,81,105,.16), transparent 60%), var(--bg-2); color: var(--text); }
.newsletter h2 { color: #fff; }
.newsletter .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem,4vw,3rem); align-items: center; }
.newsletter .embed-card { background: var(--bg-3); }
@media (max-width: 1024px) { .consult-grid, .newsletter .wrap { grid-template-columns: 1fr; } }

/* prose */
.prose { max-width: 70ch; line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.15rem; color: var(--body); }
.prose h2 { margin: 2.6rem 0 .85rem; color: var(--text); line-height: 1.25; clear: both; }
.prose h3 { margin: 1.9rem 0 .55rem; color: var(--accent-2); line-height: 1.3; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: .5rem; margin: 1rem 0 1.5rem; }
.prose ol { margin: 1rem 0 1.5rem; }
.prose ul li { position: relative; padding-left: 1.4rem; color: var(--body); }
.prose ul li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--display); }
/* --- Digestibility helpers (service pages) --------------------------------- */
/* Short "services offered / conditions treated" lists render as a scannable
   multi-column chip grid (buckets) instead of a tall single-column bullet run. */
.prose ul.chip-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .6rem; margin: 1.3rem 0 1.9rem; }
.prose ul.chip-grid li { padding: .7rem .95rem .7rem 2.1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; font-size: .93rem; line-height: 1.35; color: var(--text); }
.prose ul.chip-grid li::before { content: "✓"; left: .85rem; top: .66rem; color: var(--accent); font-family: var(--body); font-weight: 700; font-size: .82rem; }
/* Opening paragraph reads as a lead. */
.prose p.lead-p { font-size: 1.14rem; line-height: 1.7; color: var(--text); }
/* Section rhythm + cohesion: a short accent rule under each section heading. */
.prose h2 { padding-bottom: .1rem; }
.prose h2::after { content: ""; display: block; width: 46px; height: 3px; margin-top: .6rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 2px; }
.prose .nap { clear: both; background: var(--bg-3); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; padding: 1rem 1.2rem; line-height: 1.75; font-size: .95rem; }
.bio-portrait { float: right; width: min(46%, 320px); margin: .2rem 0 1.2rem 1.8rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.bio-portrait img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 15%; border-radius: var(--radius); display: block; transform: scale(var(--zoom,1)); transform-origin: center var(--zoomy,50%); }
@media (max-width: 720px) { .bio-portrait { float: none; width: 100%; max-width: 320px; margin: 0 auto 1.4rem; } }
.prose-figure { margin: 1.9rem 0; }
.prose-figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; border: 1px solid var(--line); }
.prose-figure--side { float: right; width: min(44%, 300px); margin: .4rem 0 1.4rem 2.2rem; }
.prose-figure--side.prose-figure--left { float: left; margin: .4rem 2.2rem 1.4rem 0; }
.prose-figure--side img { aspect-ratio: 1/1; object-fit: cover; height: auto; }
@media (max-width: 720px) { .prose-figure--side, .prose-figure--side.prose-figure--left { float: none; width: 100%; margin: 1.4rem 0; } }

/* photo gallery carousel */
.carousel { position: relative; margin: 1.8rem 0; }
.carousel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; }
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.carousel-track figure { flex: 0 0 auto; width: min(82%, 420px); scroll-snap-align: center; margin: 0; }
.carousel-track img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block; border: 1px solid var(--line); }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(10,12,16,.85); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; z-index: 2; display: grid; place-items: center; transition: background .2s; }
.carousel-btn:hover { background: var(--accent); color: #06121d; }
.carousel-btn.prev { left: .5rem; } .carousel-btn.next { right: .5rem; }

.layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.6rem,4vw,3rem); align-items: start; }
/* About / team page — one card per practitioner: photo left, bio right. */
.bio-cards { display: grid; gap: 1.6rem; }
.bio-card { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-sm); }
.bio-card__photo { margin: 0; border-radius: calc(var(--radius) - 4px); overflow: hidden; background: var(--bg-2); }
.bio-card__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4/5; object-fit: cover; }
.bio-card__body { min-width: 0; }
.bio-card__name { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.bio-card__role { display: block; color: var(--accent); font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; margin: .25rem 0 1rem; }
.bio-card__body > p { margin: 0 0 .85rem; }
.bio-card__body ul { margin: .7rem 0 .3rem; padding-left: 1.1rem; }
.bio-card__body ul li { margin: .2rem 0; }
@media (max-width: 640px) {
  .bio-card { grid-template-columns: 1fr; gap: 1.2rem; }
  .bio-card__photo { max-width: 320px; }
  .bio-card__photo img { aspect-ratio: 4/3; }
}
.sidebar { position: sticky; top: 100px; display: grid; gap: 1.2rem; }
.sidebar-figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.sidebar-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.card.accent { background: linear-gradient(160deg, #205a72, var(--navy)); border-color: rgba(255,255,255,.12); color: #dbe6ea; }
.card.accent h3, .card.accent .navy-num { color: #fff; }
.card.accent .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.card.accent .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.12); }
.subsvc { display: grid; gap: .4rem; }
.subsvc a { display: flex; justify-content: space-between; padding: .7rem .9rem; border-radius: 10px; background: var(--bg-2); color: var(--body); font-weight: 500; transition: background .2s, color .2s; }
.subsvc a:hover { background: rgba(30,81,105,.12); color: var(--accent-2); }
/* Article-title variant (blog sidebar): titles wrap, arrow stays top-aligned. */
.subsvc--stack a { align-items: flex-start; gap: .6rem; font-size: .9rem; line-height: 1.35; font-weight: 600; }
.subsvc--stack .subsvc__go { flex: 0 0 auto; color: var(--accent); margin-top: .1rem; }

/* What We Treat — condition grid */
.treat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.8rem; margin: 1.5rem 0 .5rem; }
.treat-item { padding-left: 1.05rem; border-left: 3px solid var(--accent); }
.treat-item h4 { font-family: var(--display); text-transform: none; letter-spacing: .005em; font-size: 1.1rem; font-weight: 600; color: var(--accent-2); margin: 0 0 .3rem; }
.treat-item p { font-size: .94rem; line-height: 1.6; margin: 0; color: var(--muted); }
@media (max-width: 720px) { .treat-grid { grid-template-columns: 1fr; gap: 1rem; } }

/* FAQ */
.faq details { background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .7rem; padding: .2rem 1.2rem; }
.faq summary { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; color: var(--text); cursor: pointer; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--accent-2); line-height: 1; }
.faq details[open] summary { color: var(--accent-2); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1rem; font-size: .96rem; color: var(--muted); }

/* reveal on load — content is ALWAYS visible by default; the fade-in only
   applies when motion is allowed, and fill-mode:both keeps the resting state. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}
}

/* ---------- Our Fees — per-discipline pricing cards ---------- */
.fee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 1.6rem); }
.fee-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.fee-card h3 { color: var(--accent-2); margin: 0 0 .9rem; font-size: 1.25rem; }
.fee-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.fee-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fee-row > span:first-child { color: var(--body); }
.fee-row .price { font-family: var(--display); color: var(--accent-2); font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) { .fee-grid { grid-template-columns: 1fr; } }

/* ---------- Opening hours — aligned day / time rows ---------- */
.hours { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; }
.hours li { display: flex; justify-content: space-between; gap: 1.5rem; font-size: .95rem; }
.hours li span:first-child { color: var(--muted); }
.hours li span:last-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.hours li.closed span:last-child { color: var(--muted); font-weight: 500; }

/* ---------- Image framing — keep faces in frame ---------- */
.shot { object-position: center 22%; }
.split img, .embed-card img, .prose-figure img, .hero-media .shot { object-position: center 25%; }
.split img { object-position: center 35%; }
.hero-media .shot--wide { aspect-ratio: 4 / 5 !important; object-fit: cover !important; object-position: center !important; }
.split-figure { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; align-self: center; border: 1px solid var(--line); }
.split-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; border: 0; }

/* Contact links inside the page hero lede stay readable */
.page-hero .lede a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.page-hero .lede a:hover { color: var(--text); }

/* CTA band: generous padding */
.cta-band { padding: clamp(2rem,4vw,3.2rem) clamp(1.5rem,4vw,2.8rem); }
.cta-actions { margin-top: 0; }

.hero-tagline { font-size: 1.14rem; line-height: 1.65; color: var(--body); margin: 1.05rem 0 0; max-width: 48ch; }
.hero h1 { margin: .15rem 0 .1rem; }
.hero .hero-cta { margin-top: 1.7rem; }
.hero .hero-trust { margin-top: 2.1rem; }
.reviews-frame { width: 100%; border: 0; min-height: 0; height: 440px; }
.review-embed { margin-bottom: 0; }

/* ---- Direct-billing insurer / claims logo strip (Our Team page) ---- */
.insurer-logos { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin: 1.6rem 0 .5rem; }
.ins-logo { background: #fff; border-radius: 12px; padding: .4rem .9rem; width: 156px; height: 84px; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -20px rgba(0,0,0,.8); }
.ins-logo img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; display: block; }
@media (max-width: 620px) { .ins-logo { width: 44%; height: 82px; } .ins-logo img { max-height: 66px; } }

/* ---- Associations strip per-logo sizing (DC Chiropractic — CCO ultrawide, rest 1:1) ---- */
.assoc-card--oca img,
.assoc-card--ccpa img,
.assoc-card--icpa img { max-height: 78px; max-width: 78%; width: auto; height: auto; object-fit: contain; }
.assoc-card--cco img { max-height: 40px; max-width: 94%; width: auto; height: auto; object-fit: contain; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 460px; }
  .svc-grid, .quotes { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(3,1fr); }
  .page-hero .wrap, .split, .loc, .layout { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .sidebar { position: static; }
}
@media (max-width: 760px) {
  .topbar .wrap { justify-content: center; text-align: center; gap: .25rem 1rem; padding-top: .45rem; padding-bottom: .45rem; min-height: 0; }
  .topbar .sep { margin-left: 0; }
  .topbar .chip { font-size: .78rem; }
  .topbar .chip:first-child { flex-basis: 100%; justify-content: center; }

  /* Drawer is anchored to the header (top:100%) rather than a hardcoded offset —
     the topbar shifts the header down at scroll-top, so `fixed; top:74px` overlapped it.
     The header bar is dark navy and the nav links are white, so the drawer carries
     that same dark surface and re-colours the nested dropdown/flyout links, which
     otherwise inherit the light-theme body ink. */
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.12); padding: .4rem var(--gut) 1rem;
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity .22s, transform .22s, visibility .22s;
    box-shadow: var(--shadow); max-height: calc(100vh - 120px); overflow: auto; }
  .main-nav.open { opacity: 1; transform: none; visibility: visible; }
  .main-nav > a:not(.btn), .has-dropdown > .nav-top { padding: .9rem .4rem; border-bottom: 1px solid rgba(255,255,255,.10); border-radius: 0; }
  .main-nav > a.btn { margin: .8rem .4rem 0 !important; justify-content: center; }
  .has-dropdown { width: 100%; }
  .has-dropdown > .nav-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .main-nav .dropdown { position: static; box-shadow: none; border: 0; min-width: 0; padding: 0; display: none; background: transparent; }
  .has-dropdown.open > .dropdown { display: block; transform: none; opacity: 1; visibility: visible; padding: .1rem 0 .5rem 1rem; }
  .main-nav .dropdown a { padding: .7rem .4rem; }
  .main-nav .dd-item > a { display: flex; align-items: center; justify-content: space-between; }
  .main-nav .flyout { position: static; box-shadow: none; border: 0; min-width: 0; max-height: none; overflow: visible;
    margin: 0 0 .3rem .9rem; padding: 0; display: none; background: transparent; }
  .dd-item.open > .flyout { display: block; transform: none; opacity: 1; visibility: visible; }
  .flyout a { font-size: .82rem; padding: .45rem .5rem; }
  .main-nav .dropdown a, .main-nav .flyout a { color: rgba(255,255,255,.78); }
  .main-nav .dropdown a small { color: rgba(255,255,255,.52); }
  .main-nav .dropdown a .go, .main-nav .flyout a.flyout-all { color: #a9dbe4; }
  .main-nav .flyout a.flyout-all { border-bottom-color: rgba(255,255,255,.14); }
  .main-nav .dropdown a:hover, .main-nav .flyout a:hover { background: rgba(255,255,255,.10); color: #ffffff; }
  .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(255,255,255,.08); cursor: pointer; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width: 22px; height: 2px; background: #ffffff; position: relative; }
  .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; }
  .svc-grid, .quotes, .steps, .team-grid, .foot-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
}
@media (max-width: 460px) { .svc-grid, .quotes, .steps, .team-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Full-bleed photographic heroes (from the approved concept)
   Placed last so they override the base .hero/.page-hero layout
   rules at equal specificity regardless of source order.
   ============================================================ */
/* Home hero — image variant */
.hero.hero--image { padding: 0; min-height: min(88vh, 820px); display: flex; align-items: flex-end; overflow: hidden; position: relative; isolation: isolate; }
.hero.hero--image::before { display: none; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* Hero background video layers over the poster <img> (which stays as the LCP
   paint + the fallback if the video can't play). The .hero__bg::after scrim is
   painted after both, so the white hero text keeps its contrast. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; border: 0; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,40,53,.62) 0%, rgba(13,40,53,.5) 34%, rgba(13,40,53,.9) 88%, rgba(13,40,53,.96) 100%); }
.hero.hero--image h1, .hero.hero--image .eyebrow { color: #ffffff; }
.hero.hero--image h1 .accent { color: #9fd6e0; -webkit-text-stroke: 0; }
.hero.hero--image .btn--outline { color: #fff; border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.06); }
.hero.hero--image .btn--outline:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.16); }
.hero.hero--image .hero-tagline { color: #e6edf0; }
.hero.hero--image .eyebrow::before { background: linear-gradient(90deg,#7ebec5,transparent); }
.hero.hero--image .hero-trust .t b { color: #a9dbe4; }
.hero.hero--image .hero-trust .t span { color: #cdd9df; }
.hero__glow { position: absolute; z-index: -1; width: 60vw; height: 60vw; left: -12vw; top: -14vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,81,105,.22), transparent 62%); filter: blur(24px); pointer-events: none; }
.hero.hero--image .wrap { display: block; }
.hero.hero--image .hero__inner { max-width: var(--maxw); padding-block: clamp(3rem,7vw,6rem) clamp(2.4rem,5vw,4rem); }
.hero.hero--image .hero__inner h1 { max-width: 16ch; }
.hero.hero--image .hero__inner .hero-tagline { max-width: 48ch; }
.hero.hero--image h1 { font-size: clamp(2.8rem, 8vw, 6rem); line-height: .95; margin: 1rem 0 1.1rem; }
.hero.hero--image .hero-tagline { color: #d8dfe6; max-width: 54ch; }
.hero.hero--image .hero-trust { border-top-color: rgba(255,255,255,.14); }

/* Interior hero — image variant (service / hub / content pages) */
.page-hero.page-hero--image { padding: 0; min-height: 58vh; display: flex; align-items: flex-end; overflow: hidden; position: relative; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-hero.page-hero--image::after { display: none; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.page-hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,40,53,.66), rgba(13,40,53,.55) 40%, rgba(13,40,53,.92) 92%, rgba(13,40,53,.97)); }
.page-hero.page-hero--image .wrap { display: block; }
.page-hero.page-hero--image .page-hero__inner { max-width: var(--maxw); padding-block: clamp(3rem,6vw,5rem) clamp(2rem,4vw,3.2rem); position: relative; z-index: 1; }
.page-hero.page-hero--image .page-hero__inner h1 { max-width: 18ch; }
.page-hero.page-hero--image .page-hero__inner .lede { max-width: 52ch; }
.page-hero.page-hero--image h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: .98; margin: .6rem 0 1rem; color: #ffffff; }
.page-hero.page-hero--image .eyebrow { margin-bottom: .3rem; color: #a9dbe4; }
.page-hero.page-hero--image .eyebrow::before { background: linear-gradient(90deg,#7ebec5,transparent); }
.page-hero.page-hero--image .lede { color: #dbe6ea; max-width: 58ch; }
.page-hero.page-hero--image .crumbs { margin-bottom: .8rem; color: #bcd0d6; }
.page-hero.page-hero--image .crumbs a { color: #dbe6ea; }
/* The "Call …" button and any contact link in the lede otherwise keep their
   light-theme colours (--accent / --accent-2) over the hero's dark scrim, which
   measures 1.8:1 and 3.3:1 — below the 4.5:1 minimum, and the reason the phone
   number read as blue-on-blue. Re-tint for the dark surface, matching what
   .cta-band, .card.accent and .hero--image already do. */
.page-hero.page-hero--image .btn--ghost,
.page-hero.page-hero--image .btn--outline { color: #fff; border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.06); }
.page-hero.page-hero--image .btn--ghost:hover,
.page-hero.page-hero--image .btn--outline:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.16); }
.page-hero.page-hero--image .lede a { color: #ffffff; text-decoration-color: rgba(255,255,255,.6); }
.page-hero.page-hero--image .lede a:hover { color: #ffffff; text-decoration-color: #ffffff; }
/* Mobile: a heavily-cropped full-bleed photo cuts the subject off in a tall,
   narrow box. Instead show the photo as a properly-framed full-width banner on
   top, with the text block flowing below on the solid dark surface.
   That copy is white, so the surface it lands on MUST be the dark hero ink —
   it used to inherit var(--bg), which is white on this light theme, leaving the
   headline invisible. #0d2835 is the same colour the scrim already fades toward,
   so the photo blends seamlessly into the copy block. */
@media (max-width: 760px) {
  .hero.hero--image, .page-hero.page-hero--image {
    display: block; min-height: 0; padding: 0; background: #0d2835;
  }
  .hero.hero--image .hero__glow { display: none; }
  .hero.hero--image .hero__bg, .page-hero.page-hero--image .page-hero__bg {
    position: relative; inset: auto; height: 60vw; min-height: 220px; max-height: 300px; z-index: 0;
  }
  .hero.hero--image .hero__bg img, .page-hero.page-hero--image .page-hero__bg img {
    object-position: center 26%;
  }
  .hero.hero--image .hero__bg::after, .page-hero.page-hero--image .page-hero__bg::after {
    background: linear-gradient(180deg, rgba(13,40,53,.10) 0%, rgba(13,40,53,.45) 62%, #0d2835 100%);
  }
  .hero.hero--image .wrap.hero__inner {
    padding-top: 1.5rem; padding-bottom: 2.4rem;
  }
  .page-hero.page-hero--image .wrap.page-hero__inner {
    padding-top: 1.4rem; padding-bottom: 2rem;
  }
}

/* ============================================================
   CTA "buckets" — centered radial-glow panels (approved concept)
   ============================================================ */
.cta-band { display: block; grid-template-columns: none; text-align: center;
  background: linear-gradient(160deg, #205a72, var(--navy));
  border: 1px solid rgba(255,255,255,.10); border-radius: 22px;
  padding: clamp(2.6rem,6vw,4.4rem) clamp(1.5rem,4vw,2.8rem); }
.cta-band::after { display: none; }
.cta-band .eyebrow { justify-content: center; margin-bottom: .4rem; color: #9fd6e0; }
.cta-band h2 { color: #fff; margin: 0 0 .7rem; }
.cta-band h2 .accent { color: #9fd6e0; -webkit-text-stroke: 0; }
.cta-band p { color: #d7e6ea; margin: 0 auto 1.7rem; max-width: 58ch; }
.cta-band .cta-actions { justify-content: center; margin-top: 0; }

/* Homepage complimentary-consultation bucket */
.consult-panel { background: radial-gradient(120% 150% at 15% -10%, rgba(30,81,105,.14), transparent 60%), var(--bg-3);
  border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(1.8rem,4vw,3rem); }
.consult-panel .embed-card { background: var(--bg-2); border-color: var(--line); }

/* Sidebar booking panel — solid teal-navy highlight box (light theme) */
.card.accent { background: linear-gradient(160deg, #205a72, var(--navy));
  border-color: rgba(255,255,255,.12); box-shadow: 0 20px 50px -30px rgba(30,81,105,.5); }
.card.accent p { color: #d0e0e5 !important; }

/* ---- Homepage: conditions grid, hours table, learn-more link ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.quote .more, a.more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
  font-weight: 600; color: var(--accent); }
.quote .more:hover, a.more:hover { color: var(--accent-2); }
.quote h3 { color: var(--accent); margin-bottom: .5rem; }
.hours-table { width: 100%; border-collapse: collapse; margin: .4rem 0 .2rem; font-size: .95rem; }
.hours-table th { text-align: left; font-weight: 600; color: var(--text); padding: .38rem 0; font-family: var(--sans); }
.hours-table td { text-align: right; color: var(--body); padding: .38rem 0; }
.hours-table tr + tr th, .hours-table tr + tr td { border-top: 1px solid var(--line); }

/* ============================================================
   Web Interface Guidelines polish (Step 16 auto-resolve pass)
   ============================================================ */
/* Skip-to-content link — visually hidden until keyboard-focused. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 10px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
  transition: top .18s ease;
}
.skip-link:focus-visible { top: 0; outline: none; box-shadow: var(--ring); }

/* Sticky header (~74px) would hide the top of any in-page anchor target; give
   headings and [id] targets a scroll offset so smooth-scroll lands cleanly. */
:where(h1, h2, h3, h4, [id]) { scroll-margin-top: 90px; }

/* Interactive elements: remove the 300ms tap delay on touch and set an
   intentional tap-highlight instead of the browser default flash. */
.btn, a, button, summary, .nav-toggle, .faq summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(30, 81, 105, .18);
}

/* Mobile nav drawer scrolls internally — contain overscroll so a flick at the
   drawer's scroll boundary doesn't chain to the page behind it. */
@media (max-width: 760px) {
  .main-nav { overscroll-behavior: contain; }
}