/* ============================================================
   Steady State — site styles
   ============================================================ */

:root{
  --ink:#191c1e;
  --ink-80:rgba(25,28,30,.80);
  --ink-62:rgba(25,28,30,.72);
  --ink-45:rgba(25,28,30,.66);
  --ink-22:rgba(25,28,30,.22);
  --rule:rgba(25,28,30,.13);
  --bone:#f5f2ed;
  --bone-2:#efebe4;
  --sand:#e7e0d5;
  --clay:#a4674a;
  --clay-text:#8c5439;   /* darker clay, 4.5:1 on every background — small text only */
  --clay-soft:rgba(164,103,74,.14);
  --slate:#1f2629;

  --sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  --pad:clamp(1.25rem,5vw,4.5rem);
  --maxw:1240px;
  --gap:clamp(2rem,4vw,4rem);
  --sec:clamp(5rem,11vw,9.5rem);
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.68;
  font-weight:400;
  letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.018em;
  line-height:1.1;
  margin:0;
  font-optical-sizing:auto;
}
h1{font-size:clamp(2.3rem,1.1rem + 4.4vw,4.4rem)}
h2{font-size:clamp(1.95rem,1rem + 3.1vw,3.35rem)}
h3{font-size:clamp(1.3rem,1.05rem + .9vw,1.72rem);line-height:1.22}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--sans);
  font-size:.735rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-45);
  margin:0 0 1.5rem;
  display:block;
}
.eyebrow--light{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.65)}
.eyebrow--under{margin:1.7rem 0 0}

.lede{
  font-size:clamp(1.12rem,1rem + .55vw,1.4rem);
  line-height:1.6;
  color:var(--ink-80);
  letter-spacing:-.006em;
}
.muted{color:var(--ink-62)}
.serif-lede{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.45rem,1.05rem + 1.65vw,2.35rem);
  line-height:1.36;
  letter-spacing:-.014em;
}

/* ── link with arrow ──────────────────────────────────────── */
.arrow-link{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);
  font-size:.83rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;
  padding-bottom:.45em;
  border-bottom:1px solid var(--ink-22);
  transition:border-color .3s ease,color .3s ease,gap .3s ease;
}
.arrow-link:hover{border-color:var(--ink);gap:.95em}
.arrow-link .ar{transition:transform .3s ease;display:inline-block}
.arrow-link:hover .ar{transform:translateX(3px)}
.arrow-link--light{color:#fff;border-color:rgba(255,255,255,.4)}
.arrow-link--light:hover{border-color:#fff}
.arrow-link--clay{color:var(--clay-text);border-color:rgba(164,103,74,.35)}
.arrow-link--clay:hover{border-color:var(--clay)}

/* ── layout ───────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:820px}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.section--sand{background:var(--sand)}
.section--bone2{background:var(--bone-2)}
.section--dark{background:var(--slate);color:#f3efe9}
.section--dark .muted,.section--dark .lede{color:rgba(243,239,233,.72)}
.section--dark .eyebrow{color:rgba(243,239,233,.6)}

.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ── header ───────────────────────────────────────────────── */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.site-head__in{
  max-width:var(--maxw);margin-inline:auto;padding:1.15rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.brand{
  display:grid;line-height:0;text-decoration:none;flex:none;
}
.brand__img{
  grid-area:1 / 1;height:clamp(30px,2.7vw,38px);width:auto;
  transition:opacity .35s ease;
}
.brand__img--light{opacity:0}
body:has([data-hero]) .site-head:not([data-scrolled="1"]):not([data-navopen="1"]) .brand__img--light{opacity:1}
body:has([data-hero]) .site-head:not([data-scrolled="1"]):not([data-navopen="1"]) .brand__img--dark{opacity:0}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem)}
.nav a{
  font-size:.79rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;opacity:.72;
  transition:opacity .25s ease;position:relative;padding-block:.25rem;
}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.15rem;height:1px;background:currentColor;opacity:.5;
}
/* over-hero state — driven by the presence of a hero, so every page's
   header markup is byte-identical and safe to copy between files */
body:has([data-hero]) .site-head:not([data-scrolled="1"]):not([data-navopen="1"]){color:#fff}
.site-head[data-scrolled="1"]{
  background:rgba(245,242,237,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--rule);
  color:var(--ink);
}
.site-head[data-navopen="1"]{color:var(--ink)}

.nav-toggle{
  display:none;background:none;border:0;padding:.4rem;cursor:pointer;color:inherit;
  font-size:.79rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}
@media (max-width:820px){
  .nav{
    position:fixed;inset:0;background:var(--bone);color:var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.6rem;padding:var(--pad);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .45s cubic-bezier(.4,0,.2,1),visibility 0s linear .45s;
  }
  .nav[data-open="1"]{
    transform:translateY(0);visibility:visible;
    transition:transform .45s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
  }
  .nav a{font-family:var(--serif);font-size:2rem;text-transform:none;letter-spacing:-.01em;opacity:1;font-weight:300}
  .nav a::after{display:none}
  .nav-toggle{display:block;position:relative;z-index:70}
  .brand{position:relative;z-index:70}
}

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:min(100svh,900px);
  display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;
}
.hero--short{min-height:min(76svh,720px)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;
  /* Default: the short page-header heroes. Their photos are bright at the top
     and the text sits high, so these need banded cover. */
  background:
    linear-gradient(to bottom,rgba(16,18,20,.68) 0%,rgba(16,18,20,.28) 20%,rgba(16,18,20,0) 42%),
    linear-gradient(to right,rgba(16,18,20,.84) 0%,rgba(16,18,20,.74) 32%,rgba(16,18,20,.34) 60%,rgba(16,18,20,0) 84%),
    linear-gradient(to top,rgba(16,18,20,.50) 0%,rgba(16,18,20,.20) 38%,rgba(16,18,20,0) 68%);
}
/* The tall home hero is the one photograph people actually look at, so it gets
   an ellipse behind the headline instead of bands across the whole frame.
   Roughly twice as much of the image survives, and the type still clears AA. */
.hero:not(.hero--short) .hero__scrim{
  /* The home hero is back to the original gradient — two soft bands off the
     top and bottom edges, nothing across the middle of the photograph. */
  background:
    linear-gradient(to bottom,rgba(16,18,20,.5) 0%,rgba(16,18,20,.14) 20%,rgba(16,18,20,0) 40%),
    linear-gradient(to top,rgba(16,18,20,.72) 0%,rgba(16,18,20,.46) 24%,rgba(16,18,20,.12) 54%,rgba(16,18,20,0) 76%);
}
/* On a narrow screen the text fills the width, so neither the sideways bands
   nor the ellipse have anywhere to fade to — both become top-and-bottom. */
@media (max-width:900px){
  .hero__scrim,
  .hero:not(.hero--short) .hero__scrim{
    background:
      linear-gradient(to bottom,rgba(16,18,20,.70) 0%,rgba(16,18,20,.32) 22%,rgba(16,18,20,.10) 46%),
      linear-gradient(to top,rgba(16,18,20,.88) 0%,rgba(16,18,20,.78) 34%,rgba(16,18,20,.52) 64%,rgba(16,18,20,.22) 90%);
  }
}

.hero__in{position:relative;width:100%;padding-block:clamp(3.5rem,8vw,6rem)}
.hero h1{max-width:21ch;text-wrap:balance;text-shadow:0 1px 30px rgba(0,0,0,.22)}
.hero--statement h1{max-width:26ch}
.hero__foot{
  margin-top:clamp(1.8rem,3.5vw,2.8rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;
}
.hero__note{
  font-size:.92rem;letter-spacing:.01em;color:rgba(255,255,255,.9);max-width:42ch;margin:0;
  text-shadow:0 1px 16px rgba(0,0,0,.45);
}

/* full-bleed statement band */
.statement{
  position:relative;min-height:min(78svh,720px);display:grid;place-items:center;
  color:#fff;overflow:hidden;text-align:center;
}
.statement__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statement__scrim{position:absolute;inset:0;background:linear-gradient(rgba(16,18,20,.56),rgba(16,18,20,.48) 50%,rgba(16,18,20,.56))}
.statement__in{position:relative;padding:var(--sec) var(--pad);width:100%}
.statement p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,1rem + 2.6vw,3.1rem);
  line-height:1.28;letter-spacing:-.016em;
  text-wrap:balance;text-shadow:0 1px 34px rgba(0,0,0,.3);
  max-width:19ch;margin-inline:auto;
}

/* page header without a photo */
.page-head{padding-top:clamp(8rem,14vw,12rem);padding-bottom:0}

/* ── intro block ──────────────────────────────────────────── */
.intro-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--gap);align-items:start;
}
@media (max-width:860px){.intro-grid{grid-template-columns:1fr;gap:2rem}}

/* ── three principle blocks ───────────────────────────────── */
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.75rem)}
@media (max-width:900px){.blocks{grid-template-columns:1fr;gap:3rem}}
.block__media{
  aspect-ratio:4/5;overflow:hidden;background:var(--sand);margin-bottom:1.6rem;
}
.block__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.block:hover .block__media img{transform:scale(1.035)}
.block h3{margin-bottom:.7rem}
.block p{color:var(--ink-62);margin:0}
.block__num{
  font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.2em;
  color:var(--ink-45);display:block;margin-bottom:.85rem;
}

/* type-only variant of the three blocks — no photograph required */
.block--type{border-top:1.5px solid var(--ink);padding-top:1.5rem}
.block--type .block__num{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,1.2rem + 1.1vw,2rem);
  color:var(--clay-text);letter-spacing:0;line-height:1;margin-bottom:1.1rem;
}
.block--type h3{margin-bottom:.7rem}

/* ── numbered process steps ───────────────────────────────── */
.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(2.75rem,5vw,4.25rem);
  border-top:1px solid var(--rule);
  align-items:start;
}
.step:last-child{border-bottom:1px solid var(--rule)}
.step__n{
  font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem);
  font-weight:300;color:var(--clay);line-height:1;padding-top:.15em;min-width:2.2ch;
}
.step__body h2{font-size:clamp(1.3rem,1.05rem + .9vw,1.72rem);line-height:1.22;margin-bottom:.85rem}
.step__body p{color:var(--ink-62);margin:0;max-width:62ch}
.step__media{overflow:hidden;background:var(--sand);aspect-ratio:5/4}
.step__media img{width:100%;height:100%;object-fit:cover}
.step__aside{
  border-top:1px solid var(--ink-22);padding-top:1.1rem;
}
.step__aside b{
  display:block;font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--clay-text);margin-bottom:.7rem;
}
.step__aside p{
  font-family:var(--serif);font-weight:300;font-size:1.06rem;line-height:1.42;
  color:var(--ink-80);margin:0;letter-spacing:-.008em;
}
@media (max-width:900px){.step__aside{grid-column:1 / -1;margin-top:1.6rem}}
@media (max-width:900px){
  .step,.step--notmedia{grid-template-columns:auto minmax(0,1fr)}
  .step__media{grid-column:1 / -1;margin-top:1.75rem;aspect-ratio:16/10}
}

/* ── principle list (how we build) ────────────────────────── */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (max-width:820px){.principles{grid-template-columns:1fr}}
.principle{
  padding:clamp(1.9rem,3.2vw,2.9rem) 0;
  border-top:1px solid var(--rule);
}
.principle:nth-child(odd){padding-right:clamp(1.5rem,4vw,3.5rem)}
.principle:nth-child(even){padding-left:clamp(1.5rem,4vw,3.5rem);border-left:1px solid var(--rule)}
@media (max-width:820px){
  .principle:nth-child(odd),.principle:nth-child(even){padding-inline:0;border-left:0}
}
.principle h3{margin-bottom:.75rem;display:flex;gap:.8rem;align-items:baseline}
.principle h3 span{
  font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.18em;
  color:var(--clay-text);flex:none;
}
.principle p{color:var(--ink-62);margin:0;max-width:52ch}

/* ── diagram ──────────────────────────────────────────────── */
.diagram{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--gap);align-items:center;
}
@media (max-width:900px){.diagram{grid-template-columns:1fr}}
.diagram__fig{margin:0;background:var(--bone);padding:clamp(1rem,2.5vw,2rem)}
.diagram__fig img{width:100%}
.diagram figcaption{
  font-size:.78rem;letter-spacing:.02em;color:var(--ink-45);margin-top:1rem;
}

/* ── quote / personal ─────────────────────────────────────── */
.personal{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--gap);align-items:start;
}
@media (max-width:900px){.personal{grid-template-columns:1fr}}
.personal__fig{margin:0}
.personal__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand)}
.personal__fig figcaption{
  font-size:.75rem;letter-spacing:.02em;color:var(--ink-45);margin-top:.85rem;
}
.personal__body{
  border-left:2px solid var(--clay);padding-left:clamp(1.25rem,3vw,2.5rem);
}
.personal__body p{color:var(--ink-80)}

/* ── credentials list ─────────────────────────────────────── */
.creds{margin:2.2rem 0 0;display:grid;gap:.85rem;max-width:46ch}
.creds div{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  border-bottom:1px dotted var(--ink-22);padding-bottom:.6rem;
}
.creds dt{
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);flex:none;
}
.creds dd{margin:0;text-align:right;font-size:.98rem;color:var(--ink-80)}
@media (max-width:480px){
  .creds div{flex-direction:column;gap:.25rem}
  .creds dd{text-align:left}
}

/* ── pull stat row ────────────────────────────────────────── */
.mini-steps{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--rule);
}
@media (max-width:900px){.mini-steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.mini-steps{grid-template-columns:repeat(2,1fr)}}
.mini-step{
  padding:1.5rem 1.1rem 1.6rem;border-right:1px solid var(--rule);
  text-align:center;
}
.mini-step:last-child{border-right:0}
.mini-step b{
  display:block;font-family:var(--sans);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;color:var(--clay-text);margin-bottom:.55rem;
}
.mini-step span{
  font-family:var(--serif);font-size:clamp(1.02rem,.95rem + .35vw,1.22rem);
  font-weight:300;line-height:1.25;display:block;
}
@media (max-width:900px){
  .mini-step{border-bottom:1px solid var(--rule)}
  .mini-steps{border-bottom:0}
}

/* ── CTA band ─────────────────────────────────────────────── */
.cta{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  min-height:min(70svh,640px);display:grid;place-items:center;
}
.cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__scrim{position:absolute;inset:0;background:linear-gradient(rgba(16,18,20,.70),rgba(16,18,20,.65) 50%,rgba(16,18,20,.70))}
.cta__in{position:relative;padding:var(--sec) var(--pad)}
.cta h2{margin-bottom:1.6rem;text-shadow:0 1px 30px rgba(0,0,0,.28)}
.cta p{max-width:46ch;margin-inline:auto;color:rgba(255,255,255,.82)}
.cta h2{max-width:17ch;margin-inline:auto}

/* ── form ─────────────────────────────────────────────────── */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.6rem}
.field label{
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
}
.field input,.field textarea,.field select{
  font:inherit;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--ink-22);
  padding:.65rem 0;border-radius:0;
  transition:border-color .25s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--clay);
}
/* the clean underline is for mouse clicks; keyboard focus gets a real ring */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:3px solid var(--clay-text);outline-offset:3px;
}
.field textarea{resize:vertical;min-height:7.5rem;line-height:1.6}
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:var(--bone);border:0;cursor:pointer;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 2.1rem;text-decoration:none;
  transition:background .28s ease,transform .28s ease;
}
.btn:hover{background:var(--clay)}
[hidden]{display:none !important}
.btn[disabled]{opacity:.55;cursor:default}
.btn[disabled]:hover{background:var(--ink)}
.form-note{font-size:.78rem;color:var(--ink-45);margin-top:1.5rem}
.form-status{
  margin-top:1.5rem;padding:1rem 1.15rem;font-size:.95rem;line-height:1.55;
  border-left:3px solid var(--clay-text);background:rgba(164,103,74,.07);
  max-width:52ch;
}
.form-status:focus-visible{outline:3px solid var(--clay-text);outline-offset:3px}
.form-status[data-kind="ok"]{
  border-left-color:#3f6b4f;background:rgba(63,107,79,.09);color:var(--ink);
  font-family:var(--serif);font-size:1.12rem;font-weight:300;line-height:1.5;
}
.contact-aside dl{margin:0;display:grid;gap:1.5rem}
.contact-aside dt{
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:.4rem;
}
.contact-aside dd{margin:0;font-size:1.02rem}
.contact-aside a{text-decoration:none;border-bottom:1px solid var(--ink-22)}
.contact-aside a:hover{border-color:var(--ink)}

/* ── footer ───────────────────────────────────────────────── */
.site-foot{
  background:var(--slate);color:rgba(243,239,233,.9);
  padding-block:clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden;
}
.site-foot::before{
  content:"";position:absolute;right:-4%;bottom:-34%;
  width:min(42%,460px);aspect-ratio:1;
  background:url("../img/logo-mark-light@8x.png") center/contain no-repeat;
  opacity:.055;pointer-events:none;
}
.site-foot .wrap{position:relative}
.foot-logo{display:block;line-height:0;margin-bottom:1.4rem}
.foot-logo img{height:42px;width:auto}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;gap:2.5rem}}
.foot-tag{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);line-height:1.3;
  color:#f3efe9;margin:0 0 1.4rem;max-width:22ch;
}
.foot-col h2{
  font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(243,239,233,.6);margin:0 0 1.1rem;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.foot-col li{font-size:.95rem;line-height:1.5}
.foot-col a{
  text-decoration:none;color:rgba(243,239,233,.82);
  transition:color .25s ease;
}
.foot-col a:hover{color:#fff}
.foot-base{
  margin-top:clamp(3rem,6vw,5rem);padding-top:1.6rem;
  border-top:1px solid rgba(243,239,233,.14);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  font-size:.78rem;color:rgba(243,239,233,.6);letter-spacing:.02em;
}

/* ── reveal ───────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .block__media img{transition:none}
}

/* image focus helpers */
.pos-40{object-position:center 40%}
.pos-60{object-position:center 60%}
.pos-70{object-position:center 70%}
.pos-80{object-position:center 80%}

/* ── misc ─────────────────────────────────────────────────── */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
  padding:.8rem 1.2rem;z-index:100;font-size:.85rem;
}
.skip:focus{left:1rem;top:1rem}

/* ── keyboard focus ───────────────────────────────────────────
   Every interactive thing gets a visible ring when tabbed to.
   :focus-visible means mouse clicks don't show it, keyboards do. */
:focus-visible{
  outline:3px solid var(--clay-text);
  outline-offset:3px;
  border-radius:2px;
}
.hero :focus-visible,.cta :focus-visible,.statement :focus-visible,
.site-foot :focus-visible,.section--dark :focus-visible,
.site-head[data-over] :focus-visible{
  outline-color:#fff;
}
.foot-base a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(243,239,233,.32);
  display:inline-block;padding-block:.32rem}
.foot-base a:hover{color:#fff;border-bottom-color:rgba(243,239,233,.7)}
.page-doc h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2.05rem);line-height:1.2;margin-bottom:.85rem}
.page-doc h2:not(:first-of-type){margin-top:clamp(2.75rem,5.5vw,4rem)}
.page-doc>p+h2{margin-top:clamp(2.75rem,5.5vw,4rem)}
.page-doc a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--clay-text)}
.a11y-list{margin:1.2rem 0 0;padding-left:1.15rem;display:grid;gap:.75rem;color:var(--ink-62);max-width:64ch}
.a11y-list li{line-height:1.6}
::selection{background:var(--clay-soft)}
.comp-note{
  background:var(--sand);border-top:1px solid var(--rule);
  font-size:.74rem;color:var(--ink-45);letter-spacing:.02em;
  padding:.9rem var(--pad);text-align:center;
}