/* ============ WEBSITE RHYTHM · MOBILE · WCAG 2.1 AA ============ */
:root{
  /* fluid vertical scale — mobile breathes, desktop is generous, neither is a canyon */
  --sp-sec: clamp(3rem, 6vw, 5rem);
  --sp-half:clamp(1.25rem, 2.6vw, 2.25rem);
  --sp-band:clamp(2rem, 4vw, 3rem);  /* 20px -> 36px, each side */
  --sp-hero:clamp(3.5rem, 7vw, 5.5rem);
  --sp-card:clamp(1.6rem, 3.5vw, 2.3rem);
  --gutter: clamp(1.25rem, 5vw, 2rem);   /* 20px on phones, 32px on desktop */
  --measure:66ch;
  --gold-text:#96681A;   /* 4.73:1 on paper — AA compliant gold for TEXT */
  --gold-rule:#C08A22;   /* 3.0:1 — AA compliant for non-text UI */
}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
*{ min-width:0; }
img,svg,canvas,video,table{ max-width:100%; }
p,li,h1,h2,h3,h4{ overflow-wrap:break-word; }

.wrap{ padding-left:var(--gutter) !important; padding-right:var(--gutter) !important; }
.section{ padding:var(--sp-half) 0 !important; }
.hero{ padding:var(--sp-hero) 0 var(--sp-band) !important; }
.pull{ padding:var(--sp-band) var(--gutter) !important; }
.deep{ padding:var(--sp-sec) 0 !important; }
footer.site{ padding:var(--sp-sec) 0 !important; }
.cards{ padding-bottom:0 !important; gap:clamp(1rem,2.5vw,1.5rem) !important; }
.card{ padding:var(--sp-card) !important; }
.lead,.dek{ max-width:var(--measure); }
p{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; }

/* AA contrast: gold text darkened, gold rules strengthened */
.eyebrow{ color:var(--gold-text) !important; }
.eyebrow::before{ background:var(--gold-rule) !important; }
a{ color:var(--gold-text); }
.deep .eyebrow,.deep a,.pull .eyebrow{ color:var(--gold) !important; }

/* focus visible everywhere — WCAG 2.4.7 */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold-text); outline-offset:3px; border-radius:2px; }
.skip:focus{ position:fixed; top:.75rem; left:.75rem; z-index:999; background:var(--ink);
  color:#fff; padding:.75rem 1.1rem; border-radius:3px; width:auto; height:auto; clip:auto; }

/* tap targets — WCAG 2.5.8 (24px min; we ship 44px) */
header.site nav a,.filterbar button,.btn,.navbtn{ min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; }

/* ---------- MOBILE ---------- */
@media (max-width:820px){
  header.site .wrap{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  header.site nav{ display:flex; flex-wrap:wrap; gap:0 1.15rem; width:100%; }
  header.site nav a{ padding:.4rem 0; }
  .cards{ grid-template-columns:1fr !important; }
  .steps{ grid-template-columns:1fr 1fr !important; }
  figure.wide,.wide{ max-width:100% !important; margin-left:0 !important; }
}
@media (max-width:480px){
  .steps{ grid-template-columns:1fr !important; }
  h1{ font-size:clamp(2rem,9vw,2.6rem) !important; line-height:1.12 !important; }
  h2{ font-size:clamp(1.5rem,6.5vw,1.9rem) !important; }
  .pull p,.pull blockquote{ font-size:1.15rem !important; }
}
@media (min-width:1100px){ .steps{ grid-template-columns:repeat(4,1fr); } }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; } }

/* single-direction rhythm: adjacent sections share one gap, not two */
.section{ padding:var(--sp-half) 0 !important; }
.section:first-of-type{ padding-top:var(--sp-band) !important; }
.section:last-of-type{ padding-bottom:var(--sp-band) !important; }
.pull,.deep{ padding:var(--sp-band) 0 !important; }
.hero + .section, .strip + .section{ padding-top:var(--sp-band) !important; }

/* eyebrow keeps its look even when it is semantically an <h2> */
h2.eyebrow,h3.eyebrow{ font-size:.72rem !important; font-weight:700 !important;
  letter-spacing:.2em !important; line-height:1.4 !important; margin:0 0 1rem !important;
  text-transform:uppercase; }
/* WCAG 2.5.8 — standalone links are real targets, not 17px slivers */
.card > a, .usecase > a, section > a, .pull > a, a.more, .more,
li > a, .plist a, footer a{ min-height:44px; display:inline-flex; align-items:center; }
/* readability floor — nothing under 12px */
.meta,.fine,.rt,.cat,.tag,small,.kicker{ font-size:max(.75rem,.75em) !important; }

/* eyebrow to 12px — nothing on the page reads below it */
.eyebrow{ font-size:.75rem !important; }
h2.eyebrow,h3.eyebrow{ font-size:.75rem !important; }
.meta,.fine,.rt,.cat,.tag,small,.kicker,.sub{ font-size:.75rem !important; }
/* every standalone link is a 44px target */
a{ }
.card a,.usecase a,.plist a,section > a,.pull a,footer a,.more{ min-height:44px; display:inline-flex; align-items:center; }
/* ---- MOBILE: compact the offer/system cards, they were 3.2 screens ---- */
@media (max-width:820px){
  .card{ padding:1.35rem 1.25rem !important; }
  .cards{ gap:.85rem !important; }
  .card h3,.card h4{ margin-bottom:.45rem !important; line-height:1.25 !important; }
  .card p{ margin:.4rem 0 !important; line-height:1.55 !important; }
  .card > a,.card .btn{ margin-top:.7rem !important; }
  .step{ padding:1rem 1.1rem !important; }
  .pull p,.pull blockquote{ line-height:1.4 !important; }
}

/* final type floor: nothing renders below 12px */
.strip span,.strip .item,.step .k,.k{ font-size:.75rem !important; }
.step h3{ font-size:1.02rem !important; margin:.15rem 0 .4rem !important; letter-spacing:-.01em; }

/* height attr was overriding aspect-ratio, so cover cropped the sides off every portrait */
.portrait{ height:auto !important; }

/* a hero with a portrait centres its columns; 'end' left a 487px void beside a short headline */
.hero:has(img.portrait){ align-items:center !important; }
.hero:has(img.portrait) .hero-side{ align-self:center; }
@supports not selector(:has(*)){ .hero{ align-items:center !important; } }

/* demo previews on life-door cards (2026-07-28) */
.cardshot{ display:block; margin:-1.35rem -1.25rem 1.05rem; overflow:hidden; border-bottom:1px solid #E6DFD3; border-radius:4px 4px 0 0; }
.cardshot img{ display:block; width:100%; height:auto; aspect-ratio:1000/672; object-fit:cover; object-position:top; filter:saturate(.97); transition:transform .35s ease; }
.cardshot:hover img{ transform:scale(1.02); }