/* ==========================================================================
   Modern Self-Defense Center — Redesign Draft
   Design system / shared stylesheet
   Type:  Teko (headlines) · Jost (UI + body) · Ubuntu (long-form body)
   Color: #F34E3A accent · #1A1A1A ink · #3A3A3A slate
   ========================================================================== */


:root{
  /* ---- Brand ---- */
  --accent:        #F34E3A;
  --accent-dark:   #C93826;
  --accent-glow:   rgba(243,78,58,.28);
  --ink:           #1A1A1A;
  --slate:         #3A3A3A;

  /* ---- Derived surfaces ---- */
  --bg:            #1A1A1A;
  --bg-raise:      #232323;
  --bg-card:       #262626;
  --bg-light:      #F4F2F0;
  --line:          #3A3A3A;
  --line-soft:     rgba(255,255,255,.09);

  /* ---- Text ---- */
  --text:          #E9E6E3;
  --text-dim:      #A9A5A1;
  --text-on-light: #1A1A1A;
  --text-dim-light:#5A5652;

  /* ---- Type ---- */
  --font-display: 'Teko', 'Oswald', Impact, sans-serif;
  --font-ui:      'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Ubuntu', 'Jost', Arial, sans-serif;

  /* ---- Layout ---- */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --gut: 24px;
  --radius: 3px;
  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --header-h: 78px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
hr{ border:0; border-top:1px solid var(--line); margin:48px 0; }

/* ---------- Type scale ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.01em;
  line-height:.95; margin:0 0 .4em;
}
h1{ font-size:clamp(3rem, 7.5vw, 6.2rem); }
h2{ font-size:clamp(2.3rem, 4.6vw, 3.7rem); }
h3{ font-size:clamp(1.6rem, 2.4vw, 2.1rem); }
h4{ font-size:1.45rem; }
h5{ font-size:1.15rem; letter-spacing:.04em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; color:#fff; }
em{ font-style:italic; }

.eyebrow{
  font-family:var(--font-ui); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.24em; color:var(--accent);
  margin:0 0 14px; display:block;
}
.lede{
  font-family:var(--font-ui); font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.62; color:var(--text);
}
.small{ font-size:.9rem; color:var(--text-dim); }
.center{ text-align:center; }
.accent{ color:var(--accent); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.wrap-narrow{ width:100%; max-width:var(--wrap-narrow); margin:0 auto; padding:0 var(--gut); }
section{ padding:96px 0; }
section.tight{ padding:60px 0; }
.sec-light{ background:var(--bg-light); color:var(--text-on-light); }
.sec-light .lede,.sec-light p{ color:#332F2C; }
.sec-light .small{ color:var(--text-dim-light); }
.sec-light strong{ color:#000; }
.sec-raise{ background:var(--bg-raise); }
.sec-head{ max-width:720px; margin-bottom:52px; }
.sec-head.center{ margin-inline:auto; }

.grid{ display:grid; gap:26px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-ui); font-weight:600;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.14em;
  padding:16px 30px; border:2px solid var(--accent); background:var(--accent);
  color:#fff; border-radius:var(--radius); cursor:pointer;
  transition:.18s ease; text-align:center;
}
.btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 24px var(--accent-glow); }
.btn-ghost{ background:transparent; color:var(--accent); }
.btn-ghost:hover{ background:var(--accent); color:#fff; }
.btn-quiet{ background:transparent; border-color:var(--line); color:var(--text); }
.btn-quiet:hover{ background:transparent; border-color:var(--accent); color:var(--accent); box-shadow:none; }
.sec-light .btn-quiet{ border-color:#C9C4BE; color:var(--ink); }
.btn-sm{ padding:11px 20px; font-size:.72rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row.center{ justify-content:center; }

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:rgba(26,26,26,.94); backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line-soft);
}
.hdr-in{ height:100%; display:flex; align-items:center; gap:28px; }
.logo{ font-family:var(--font-display); font-size:1.7rem; line-height:1; text-transform:uppercase; color:#fff; letter-spacing:.02em; white-space:nowrap; }
.logo:hover{ text-decoration:none; }
.logo b{ color:var(--accent); font-weight:600; }
.logo span{ display:block; font-family:var(--font-ui); font-size:.5rem; letter-spacing:.3em; color:var(--text-dim); font-weight:500; margin-top:3px; }

/* ---------- Logo mark ----------
   Two files rather than one recoloured file: currentColor cannot cross an
   <img> boundary, so the glow is baked into the dark-ground variant. Light is
   variant is chosen per instance in the markup -- a stylesheet cannot swap an
   <img> src. Use msdc-logo-glow.svg on --bg / --bg-raise / --ink grounds and
   msdc-logo-light.svg inside .sec-light. Sized by height; the SVG's own
   ratio sets the width, and the
   width/height attributes reserve the box so the sticky header cannot reflow
   while the file loads. alt="" on both instances is deliberate: the wordmark
   beside it in the header and the h5 beneath it in the footer already carry the
   name, so announcing it again would just repeat. */
.msdc-mark{ display:block; width:auto; }

/* Header: the mark accompanies the wordmark rather than replacing it. On its
   own at header scale the diamond closes up and stops reading. */
.logo{ display:flex; align-items:center; gap:12px; }
.logo .logo-wordmark{
  display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1;
  text-transform:uppercase; color:#fff; letter-spacing:.02em; font-weight:400;
}
.hdr .msdc-mark{ height:34px; }
@media (max-width:960px){ .hdr .msdc-mark{ height:28px; } }

/* Footer: more room here, so the mark can carry at a size where it reads. */
.ftr .msdc-mark{ height:62px; margin:0 0 18px; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav a{
  font-family:var(--font-ui); font-weight:500; font-size:.79rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--text);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--accent); text-decoration:none; }
.nav .btn{ color:#fff; }
.burger{ display:none; margin-left:auto; background:none; border:1px solid var(--line); color:#fff; font-size:1.1rem; padding:9px 13px; border-radius:var(--radius); cursor:pointer; }

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:120px 0 96px; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% 8%, rgba(243,78,58,.17), transparent 62%),
    linear-gradient(180deg,#1A1A1A 0%,#212121 55%,#1A1A1A 100%);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"SELF DEFENSE"; position:absolute; right:-3%; bottom:-6%;
  font-family:var(--font-display); font-size:clamp(6rem,17vw,15rem);
  line-height:.8; color:rgba(255,255,255,.028); letter-spacing:-.02em;
  pointer-events:none; white-space:nowrap;
}
.hero-in{ position:relative; z-index:2; max-width:880px; }
.hero h1{ margin-bottom:22px; }
.hero .lede{ max-width:620px; margin-bottom:34px; }
.hero-sub{ font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,2.1rem); color:var(--accent); text-transform:uppercase; margin:0 0 14px; }
.page-hero{ padding:88px 0 72px; }
.page-hero h1{ font-size:clamp(2.6rem,6vw,5rem); }

/* ---------- Trust bar ---------- */
.trust{ background:var(--ink); border-bottom:1px solid var(--line); padding:26px 0; }
.trust-in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:22px; }
.trust-item{ flex:1 1 160px; }
.trust-item b{ display:block; font-family:var(--font-display); font-size:2.3rem; line-height:1; color:var(--accent); font-weight:600; }
.trust-item span{ font-family:var(--font-ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--text-dim); }

/* ---------- Cards ---------- */
.card{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px 28px; transition:.2s ease;
  display:flex; flex-direction:column;
}
.card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow); }
.card h3,.card h4{ margin-bottom:12px; }
.card .kicker{ font-family:var(--font-ui); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:var(--accent); margin-bottom:10px; }
.card p{ font-size:.98rem; color:var(--text-dim); }
.card .card-cta{ margin-top:auto; padding-top:22px; }
.card-link{ font-family:var(--font-ui); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; }
.card-link::after{ content:" \2192"; }
.sec-light .card{ background:#fff; border-color:#E2DDD7; }
.sec-light .card p{ color:#55504B; }

.card-price{
  font-family:var(--font-display); font-size:2.6rem; line-height:1; color:#fff;
  font-weight:600; margin:0 0 4px;
}
.card-price small{ font-family:var(--font-ui); font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); }
.sec-light .card-price{ color:var(--ink); }
.card-feature{ border-color:var(--accent); position:relative; }
.badge{
  position:absolute; top:-13px; left:28px; background:var(--accent); color:#fff;
  font-family:var(--font-ui); font-size:.64rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; padding:5px 12px; border-radius:2px;
}

/* ---------- Checklists ---------- */
.ticks{ list-style:none; margin:0 0 4px; padding:0; }
.ticks li{ position:relative; padding:0 0 12px 27px; font-family:var(--font-ui); font-size:.96rem; line-height:1.5; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em; width:11px; height:6px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.bars{ list-style:none; margin:0; padding:0; }
.bars li{ border-left:3px solid var(--accent); padding:2px 0 2px 16px; margin-bottom:16px; font-family:var(--font-ui); }

/* ---------- Numbered steps ---------- */
.steps{ counter-reset:s; list-style:none; margin:0; padding:0; }
.steps li{ counter-increment:s; position:relative; padding:0 0 30px 62px; }
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-6px;
  font-family:var(--font-display); font-size:2.6rem; font-weight:600;
  color:var(--accent); line-height:1;
}
.steps h4{ margin-bottom:6px; }
.steps p{ font-size:.98rem; color:var(--text-dim); margin:0; }
.sec-light .steps p{ color:#55504B; }

/* ---------- Quote / testimonial ---------- */
.quote{
  border-left:3px solid var(--accent); padding:6px 0 6px 24px;
  font-family:var(--font-ui); font-style:italic; font-size:1.08rem; line-height:1.62;
}
.quote cite{ display:block; margin-top:12px; font-style:normal; font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); }
/* Quote body copy is white sitewide, rather than inheriting --text #E9E6E3.
   Nine of the ten quotes sit on dark grounds where white is comfortable:
     on --bg #1A1A1A          17.3:1
     on --bg-raise #232323    15.3:1
     through an .80 scrim      9.2:1  (worst case, over a blown-out photo)

   The exception is the About page quote, which sits inside .sec-light on
   #F4F2F0 -- white there measures about 1.05:1 and would disappear. It keeps
   the light-section body colour. The override has to be explicit: .sec-light p
   is (0,1,1), the same as .quote p, so it would otherwise lose on source order.

   cite is left on --accent -- it is attribution rather than the quote itself. */
.quote p{ color:#FFFFFF; }
.sec-light .quote p{ color:#332F2C; }

/* ---------- Logo / client strip ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.chips li{
  font-family:var(--font-ui); font-size:.78rem; font-weight:500;
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; color:var(--text-dim);
}
.sec-light .chips li{ border-color:#D8D2CB; color:#55504B; }

/* ---------- Tables (ranks page) ---------- */
.tbl{ width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:.95rem; margin:0 0 40px; }
.tbl th,.tbl td{ text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line); }
.tbl th{ font-weight:600; color:#fff; width:22%; }
.tbl td:nth-child(2){ width:26%; }
.tbl caption{ text-align:left; font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; color:var(--accent); padding-bottom:10px; }

/* ---------- Forms ---------- */
.form-panel{
  background:var(--bg-card); border:1px solid var(--line);
  border-top:3px solid var(--accent); border-radius:var(--radius);
  padding:40px 36px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-ui); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--text-dim);
}
.field .req{ color:var(--accent); }
.field input,.field select,.field textarea{
  font-family:var(--font-ui); font-size:1rem; color:#fff;
  background:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px 14px; width:100%;
}
.field textarea{ min-height:112px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
.opts{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{
  display:flex; align-items:center; gap:9px; font-family:var(--font-ui); font-size:.92rem;
  border:1px solid var(--line); border-radius:var(--radius); padding:11px 16px; cursor:pointer;
}
.opt:hover{ border-color:var(--accent); }
.opt input{ accent-color:var(--accent); width:auto; }
.form-note{ font-family:var(--font-ui); font-size:.82rem; color:var(--text-dim); margin-top:18px; }
.form-ok{ display:none; border:1px solid var(--accent); background:rgba(243,78,58,.08); padding:18px 20px; border-radius:var(--radius); font-family:var(--font-ui); margin-bottom:22px; }
.form-ok.show{ display:block; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--font-ui); font-weight:600; font-size:1.04rem; color:#fff;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:18px; color:var(--accent); font-size:1.5rem; font-family:var(--font-display); }
.faq details[open] summary::after{ content:"\2013"; }
.faq .faq-body{ padding:0 0 24px; color:var(--text-dim); font-size:1rem; max-width:760px; }
.sec-light .faq summary{ color:var(--ink); }
.sec-light .faq .faq-body{ color:#55504B; }

/* ---------- CTA band ---------- */
/* Monochrome white mark above the CTA heading. Added via ::before rather than
   markup because .cta-band lives in page content on 14 pages -- one rule here
   covers all of them and reverts in one line, where editing blocks would mean
   14 separate content edits.

   Purely decorative, so an empty content string is correct: the heading beneath
   already names the business, and CSS backgrounds are ignored by screen readers
   anyway. Sized by height; 872x741 native means it downscales at 64px, so it
   stays sharp on retina.

   White on the accent gradient measures 3.5:1 against #F34E3A -- fine for a
   graphic of this size, and it is not carrying any text. */
.cta-band::before{
  content:"";
  display:block;
  height:64px;
  margin:0 0 26px;
  background:url('/wp-content/uploads/2026/08/MSDC-logo-monochrome-white.png') center center / contain no-repeat;
}
@media (max-width:620px){ .cta-band::before{ height:52px; margin-bottom:20px; } }

.cta-band{
  background:linear-gradient(120deg,var(--accent-dark),var(--accent));
  padding:78px 0; text-align:center; color:#fff;
}
.cta-band h2{ color:#fff; margin-bottom:10px; }
.cta-band .lede{ color:rgba(255,255,255,.94); max-width:640px; margin:0 auto 30px; }
.cta-band .btn{ background:#fff; color:var(--accent-dark); border-color:#fff; }
.cta-band .btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:none; }
.cta-band .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.cta-band .btn-ghost:hover{ background:#fff; color:var(--accent-dark); border-color:#fff; }

/* ---------- Media figure ---------- */
.figure{ background:var(--slate); border:1px solid var(--line); border-radius:var(--radius); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; }
.figure span{ font-family:var(--font-ui); font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; color:var(--text-dim); }

/* ---------- Note callout (design / SEO annotations) ---------- */
.note{
  border:1px dashed var(--accent); background:rgba(243,78,58,.06);
  border-radius:var(--radius); padding:22px 24px; margin:0 0 34px;
  font-family:var(--font-ui); font-size:.93rem;
}
.note h5{ font-family:var(--font-ui); font-size:.72rem; letter-spacing:.18em; color:var(--accent); margin-bottom:10px; }
.note ul{ margin:0; padding-left:20px; }
.note li{ margin-bottom:8px; }
.sec-light .note{ background:rgba(243,78,58,.05); }

/* ---------- Footer ---------- */
.ftr{ background:var(--ink); border-top:1px solid var(--line); padding:66px 0 30px; font-family:var(--font-ui); }
.ftr-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:38px; }
.ftr h5{ font-family:var(--font-ui); font-size:.72rem; letter-spacing:.18em; color:var(--accent); margin-bottom:16px; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr li{ margin-bottom:10px; font-size:.92rem; }
.ftr a{ color:var(--text-dim); }
.ftr a:hover{ color:var(--accent); }
.ftr p{ font-size:.92rem; color:var(--text-dim); }
.ftr-bar{ margin-top:46px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.8rem; color:var(--text-dim); }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:34px; }
  .ftr-grid{ grid-template-columns:1fr 1fr; }
  .nav{ display:none; position:absolute; top:var(--header-h); left:0; right:0; background:var(--bg-raise); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 22px; }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--line-soft); }
  .nav .btn{ margin-top:14px; border-bottom:none; }
  .burger{ display:block; }
}
@media (max-width:620px){
  section{ padding:66px 0; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .form-panel{ padding:28px 20px; }
  .ftr-grid{ grid-template-columns:1fr; }
  .trust-in{ gap:18px; }
  .trust-item{ flex:1 1 42%; }
  .tbl th,.tbl td{ display:block; width:auto; padding:8px 0; border:0; }
  .tbl tr{ display:block; border-bottom:1px solid var(--line); padding:14px 0; }
}

/* ---------- Additions: About / Chris Martell / Ranks pages ---------- */
.tbl thead th{ color:var(--accent); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; width:auto; }
.tbl.facts{ font-size:.92rem; margin-bottom:0; }
.tbl.facts th{ width:38%; }
.tbl.facts td{ width:auto; color:var(--text-dim); }
.tbl th[scope="row"]{ font-family:var(--font-ui); }
.sec-light .tbl th,.sec-light .tbl td{ border-color:#DDD7D0; }
.sec-light .tbl th[scope="row"]{ color:var(--ink); }
.sec-light .tbl td{ color:#55504B; }
.chips a{ color:inherit; text-decoration:none; }
.chips li:has(a):hover{ border-color:var(--accent); color:var(--accent); }

/* Image placeholder on light sections — the dark slate fill reads as a hole
   against #F4F2F0, so soften it to a tonal neighbour of the section ground. */
.sec-light .figure{ background:#E7E2DC; border-color:#D8D2CB; }
.sec-light .figure span{ color:#6B6660; }

/* ==========================================================================
   MOBILE COMPATIBILITY FIXES
   Appended deliberately at the end of the file: several rules below must win
   ties against earlier same-specificity declarations (notably the .tbl and
   .burger rules), and cascade order is what does that. Do not relocate.
   ========================================================================== */

/* ---- 1. Long-token overflow --------------------------------------------
   A 47-char URL in a <code> on proof.html was forcing horizontal scroll at
   every phone width; nothing in the sheet was allowed to break it. ------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-wrap:break-word; }
code,kbd,samp{ overflow-wrap:anywhere; word-break:break-word; }

/* ---- 2. iOS blur parity -------------------------------------------------
   Cosmetic only — the header ground is 94% opaque, so this degrades fine. */
.hdr{ -webkit-backdrop-filter:blur(9px); }

/* ---- 3. Mobile nav: scrollable, never taller than the viewport ----------
   The panel is absolutely positioned inside a sticky header, so anything
   past the fold could not be reached by scrolling the page. ------------- */
@media (max-width:960px){
  .nav{
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .burger{
    display:flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; padding:0 13px; line-height:1;
    touch-action:manipulation;
  }
}

/* ---- 4. Stacked tables keep their column labels -------------------------
   Previously `thead` was stacked too (it matches `.tbl th`), producing an
   orphan block of column names above unlabelled data. Now the head is
   removed visually but left for screen readers, and each cell carries its
   own label via data-label, injected by site.js. ------------------------ */
@media (max-width:620px){
  .tbl thead{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .tbl td[data-label]::before{
    content:attr(data-label);
    display:block; margin-bottom:2px;
    font-family:var(--font-ui); font-size:.64rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.14em; color:var(--accent);
  }
  .tbl th[scope="row"]{
    font-family:var(--font-display); font-size:1.5rem; line-height:1.05;
    text-transform:uppercase; color:#fff; padding:0 0 6px;
  }
  .sec-light .tbl th[scope="row"]{ color:var(--ink); }
  .tbl tr{ padding:18px 0; }
  .tbl caption{ font-size:1.3rem; }
}

/* ---- 5. Touch targets ---------------------------------------------------
   Scoped to coarse pointers and small screens so the desktop density of the
   footer is left exactly as designed. ----------------------------------- */
.chips li:has(a){ padding:0; }
.chips a{ display:block; padding:12px 18px; }
.opt{ min-height:44px; }
.btn,.burger{ touch-action:manipulation; }

@media (hover:none),(max-width:960px){
  .ftr li{ margin-bottom:4px; }
  .ftr li a{ display:inline-block; padding:10px 0; }
  .ftr-bar a{ display:inline-block; padding:12px 0; }
  /* All 16 .card-link instances are the only child of a .card-cta, so the
     wrapper's top padding can absorb the link's new padding exactly:
     10 + 12 = the original 22px gap, with a 44px tall target. */
  .card-link{ display:inline-block; padding:12px 0; }
  .card .card-cta{ padding-top:10px; }
}

/* ---- 6. Hover affordances that stick on touch --------------------------- */
@media (hover:none){
  .card:hover{ transform:none; box-shadow:none; border-color:var(--line); }
  .sec-light .card:hover{ border-color:#E2DDD7; }
  .btn:hover{ transform:none; box-shadow:none; }
}

/* ---- 7. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .card:hover,.btn:hover{ transform:none; }
}

/* ---------- Lightbox ----------
   Opens a grid photograph at full size with its caption beneath. The overlay
   is appended to <body>, so .sec-light rules do not reach it -- the caption
   uses --text on a dark scrim regardless of which section it came from. */
.home .grid figure.wp-block-image img{ cursor:zoom-in; }
.msdc-lb{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background:rgba(12,12,12,.94); padding:64px 24px 32px;
}
.msdc-lb.is-open{ display:flex; }
.msdc-lb figure{ margin:0; display:flex; flex-direction:column; align-items:center; max-width:min(1200px,92vw); max-height:100%; }
.msdc-lb img{ display:block; max-width:100%; max-height:calc(100vh - 190px); width:auto; height:auto; border:1px solid var(--line); border-radius:var(--radius); }
.msdc-lb figcaption{ margin:18px 0 0; max-width:820px; text-align:center; font-family:var(--font-ui); font-size:.94rem; line-height:1.55; color:var(--text); }
.msdc-lb figcaption strong{ color:#fff; font-weight:600; }
.msdc-lb-close{ position:absolute; top:16px; right:20px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); font-size:1.6rem; line-height:1; cursor:pointer; }
.msdc-lb-close:hover,.msdc-lb-close:focus-visible{ border-color:var(--accent); color:var(--accent); }
@media (max-width:620px){ .msdc-lb{ padding:56px 14px 24px; } .msdc-lb img{ max-height:calc(100vh - 200px); } }