:root{
  --bg:#F6F8FA;
  --surface:#FFFFFF;
  --text:#1D2A3A;
  --accent:#2E7C86;
  --accent-dark:#245E66;
  --font:'Figtree', 'Figtree', system-ui, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius:4px;
  --grad-from:#F6F8FA;
  --grad-to:#EDF1F4;
}
@layer tokens{
:root{
--sp-1:clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
--sp-2:clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
--sp-3:clamp(0.75rem, 0.663rem + 0.4348vw, 1rem);
--sp-4:clamp(1rem, 0.8696rem + 0.6522vw, 1.375rem);
--sp-5:clamp(1.5rem, 1.3261rem + 0.8696vw, 2rem);
--sp-6:clamp(2rem, 1.7391rem + 1.3043vw, 2.75rem);
--sp-7:clamp(3rem, 2.6087rem + 1.9565vw, 4.125rem);
--sp-8:clamp(4rem, 3.3913rem + 3.0435vw, 5.75rem);
--sp-9:clamp(6rem, 5.2174rem + 3.913vw, 8.25rem);
--sp-10:clamp(8rem, 6.9565rem + 5.2174vw, 11rem);
--sp-11:clamp(10rem, 8.6087rem + 6.9565vw, 14rem);
--sp-12:clamp(12rem, 9.913rem + 10.4348vw, 18rem);
--step--1:clamp(0.8333rem, 0.7971rem + 0.1812vw, 0.9375rem);
--step-0:clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
--step-1:clamp(1.2rem, 1.1478rem + 0.2609vw, 1.35rem);
--step-2:clamp(1.44rem, 1.3774rem + 0.313vw, 1.62rem);
--step-3:clamp(1.728rem, 1.6529rem + 0.3757vw, 1.944rem);
--step-4:clamp(2.0736rem, 1.9834rem + 0.4508vw, 2.3328rem);
--step-5:clamp(2.4883rem, 2.3801rem + 0.5409vw, 2.7994rem);
--step-6:clamp(2.986rem, 2.8562rem + 0.6491vw, 3.3592rem);
--lh-tight:1.15;
--lh-normal:1.5;
--lh-loose:1.7;
--measure:62ch;
--measure-narrow:44ch;
--radius-sm:0.25rem;
--radius-md:0.625rem;
--radius-lg:1.25rem;
--bw-1:1px;
--bw-2:2px;
--bw-3:4px;
/* type-ratio 1.2 <- emotion:safety */
}
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--step-0);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
em{font-style:italic;font-weight:inherit}

:focus-visible{
  outline:var(--bw-2) solid var(--accent);
  outline-offset:var(--sp-1);
  border-radius:var(--radius-sm);
}

/* ---- shared type roles ---- */
[data-role="headline"]{
  font-size:var(--step-5);
  line-height:var(--lh-tight);
  font-weight:600;
  letter-spacing:-0.01em;
  max-width:20ch;
}
[data-role="subheadline"]{
  font-size:var(--step-2);
  line-height:var(--lh-normal);
  font-weight:400;
  color:color-mix(in srgb, var(--text) 78%, var(--bg));
}
[data-role="body"]{
  font-size:var(--step-0);
  line-height:var(--lh-loose);
  max-width:var(--measure);
  color:color-mix(in srgb, var(--text) 90%, var(--bg));
}

/* mono voice: labels, tags, metadata */
.label{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  letter-spacing:0.02em;
  color:var(--accent-dark);
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
}
.label::before{
  content:"";
  width:var(--sp-4);
  height:0;
  border-top:var(--bw-2) solid var(--accent);
}

/* ---- ridgeline signature device (expresses "Hill Country") ---- */
.ridge{
  --ridge-h:var(--sp-8);
  height:var(--ridge-h);
  width:100%;
  background:
    radial-gradient(90% 130% at 12% 118%, var(--accent-dark) 0 40%, transparent 41%),
    radial-gradient(80% 120% at 42% 122%, var(--accent) 0 42%, transparent 43%),
    radial-gradient(95% 140% at 74% 116%, color-mix(in srgb, var(--accent) 62%, var(--bg)) 0 44%, transparent 45%),
    radial-gradient(70% 120% at 96% 124%, var(--accent-dark) 0 46%, transparent 47%);
  background-repeat:no-repeat;
}
.ridge--tall{--ridge-h:var(--sp-10)}
.ridge--contour{
  background:
    repeating-radial-gradient(120% 160% at 50% 200%,
      transparent 0 calc(var(--sp-3)),
      color-mix(in srgb, var(--accent) 22%, transparent) calc(var(--sp-3)) calc(var(--sp-3) + 1px)),
    linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 8%, var(--bg)));
}

/* section-transition seams (soft cool-paper gradient + ridgeline) */
[data-role="section-transition"]{
  display:block;
  height:var(--sp-7);
  background:linear-gradient(to bottom, var(--grad-from), var(--grad-to));
}
.seam--ridge{
  height:var(--sp-9);
  background:
    radial-gradient(85% 130% at 30% 128%, color-mix(in srgb, var(--accent) 30%, var(--bg)) 0 45%, transparent 46%),
    radial-gradient(95% 150% at 78% 126%, color-mix(in srgb, var(--accent-dark) 32%, var(--bg)) 0 47%, transparent 48%),
    linear-gradient(to bottom, var(--grad-from), var(--grad-to));
  background-repeat:no-repeat;
}

/* ---- header / nav shell ---- */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:var(--bw-1) solid color-mix(in srgb, var(--text) 12%, var(--bg));
}
.nav-wrap{
  max-width:78rem;
  margin:0 auto;
  padding:var(--sp-3) var(--sp-5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-weight:600;
  font-size:var(--step-1);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.brand-mark{
  width:var(--sp-6);
  height:var(--sp-5);
  flex:none;
  background:
    radial-gradient(90% 130% at 20% 120%, var(--accent-dark) 0 44%, transparent 45%),
    radial-gradient(85% 130% at 66% 122%, var(--accent) 0 46%, transparent 47%);
  background-repeat:no-repeat;
  border-bottom:var(--bw-2) solid var(--accent);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
[data-role="nav-primary"]{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
}
.nav-links{display:none}
[data-role="nav-item"]{
  font-size:var(--step-0);
  color:color-mix(in srgb, var(--text) 82%, var(--bg));
  padding:var(--sp-1) 0;
  border-bottom:var(--bw-2) solid transparent;
  transition:color .2s, border-color .2s;
}
[data-role="nav-item"]:hover{color:var(--accent-dark);border-color:var(--accent)}

/* ---- buttons ---- */
[data-role="btn-primary"],[data-role="btn-secondary"]{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--step-0);
  font-weight:600;
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--radius);
  transition:background .2s, color .2s, transform .2s;
}
[data-role="btn-primary"]{
  background:var(--accent);
  color:var(--surface);
  border:var(--bw-2) solid var(--accent);
}
[data-role="btn-primary"]:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-1px)}
[data-role="btn-secondary"]{
  background:transparent;
  color:var(--accent-dark);
  border:var(--bw-1) solid color-mix(in srgb, var(--accent) 55%, var(--bg));
}
[data-role="btn-secondary"]:hover{background:color-mix(in srgb, var(--accent) 12%, var(--bg))}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}

/* ---- layout scaffolds ---- */
[data-role="section"]{padding:var(--sp-8) var(--sp-5)}
.wrap{max-width:78rem;margin:0 auto}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}

/* ---- HERO full-bleed ---- */
.hero{
  position:relative;
  min-height:74vh;
  display:flex;
  align-items:flex-end;
  padding:0;
  background:
    radial-gradient(120% 90% at 78% 22%, color-mix(in srgb, var(--accent) 26%, var(--grad-to)) 0%, transparent 55%),
    linear-gradient(160deg, var(--grad-to) 0%, color-mix(in srgb, var(--accent-dark) 30%, var(--grad-to)) 100%);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:var(--sp-9);
  background:
    radial-gradient(80% 150% at 22% 130%, color-mix(in srgb, var(--accent-dark) 40%, transparent) 0 46%, transparent 47%),
    radial-gradient(90% 150% at 80% 128%, color-mix(in srgb, var(--accent) 34%, transparent) 0 48%, transparent 49%);
  background-repeat:no-repeat;
  pointer-events:none;
}
.hero [data-role="text-on-image"]{
  position:relative;
  z-index:2;
  width:100%;
  padding:var(--sp-9) var(--sp-5) var(--sp-7);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--text) 62%, transparent) 0%,
    color-mix(in srgb, var(--text) 34%, transparent) 26%,
    transparent 60%);
}
.hero .inner{max-width:78rem;margin:0 auto}
.hero [data-role="headline"]{
  color:var(--surface);
  font-size:var(--step-6);
  max-width:16ch;
  text-shadow:0 2px 18px color-mix(in srgb, var(--text) 70%, transparent);
}
.hero [data-role="subheadline"]{
  color:color-mix(in srgb, var(--surface) 92%, var(--accent));
  margin-top:var(--sp-3);
  text-shadow:0 1px 10px color-mix(in srgb, var(--text) 60%, transparent);
}
.hero .label{color:color-mix(in srgb, var(--surface) 90%, var(--accent))}
.hero .label::before{border-color:var(--surface)}

/* ---- media placeholders ---- */
[data-role="media"]{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:var(--sp-11);
  background:
    radial-gradient(110% 80% at 20% 15%, color-mix(in srgb, var(--accent) 20%, var(--grad-to)) 0%, transparent 60%),
    linear-gradient(150deg, var(--grad-from) 0%, color-mix(in srgb, var(--accent-dark) 22%, var(--grad-to)) 100%);
}
[data-role="media"]::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:var(--sp-7);
  background:
    radial-gradient(80% 150% at 30% 130%, color-mix(in srgb, var(--accent-dark) 34%, transparent) 0 46%, transparent 47%),
    radial-gradient(90% 150% at 82% 128%, color-mix(in srgb, var(--accent) 30%, transparent) 0 48%, transparent 49%);
  background-repeat:no-repeat;
}
[data-role="media"] [data-role="text-on-image"]{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:var(--sp-4);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--text) 60%, transparent) 0%,
    transparent 78%);
  color:var(--surface);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  text-shadow:0 1px 8px color-mix(in srgb, var(--text) 60%, transparent);
}

/* ---- two-column alternating ---- */
.split{display:grid;gap:var(--sp-6);align-items:center}
.split .media{min-height:var(--sp-11)}

/* ---- multi-column grid (services) ---- */
.grid3{display:grid;gap:var(--sp-5)}
.card{
  background:var(--surface);
  border:var(--bw-1) solid color-mix(in srgb, var(--text) 10%, var(--bg));
  border-top:var(--bw-3) solid var(--accent);
  border-radius:var(--radius);
  padding:var(--sp-5);
}
.card h3{font-size:var(--step-1);font-weight:600;line-height:var(--lh-tight);margin-bottom:var(--sp-2)}
.card p{font-size:var(--step--1);line-height:var(--lh-normal);color:color-mix(in srgb, var(--text) 84%, var(--bg))}
.card .label{margin-bottom:var(--sp-3)}

/* ---- centered narrow palate cleanser ---- */
.centered{
  text-align:center;
  background:linear-gradient(to bottom, var(--grad-from), var(--grad-to));
}
.centered .inner{max-width:var(--measure-narrow);margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4);align-items:center}
.centered [data-role="body"]{max-width:var(--measure);text-align:left}

/* ---- gallery rail carousel ---- */
.gallery{background:linear-gradient(to bottom, var(--surface), var(--grad-to))}
.gallery-head{max-width:78rem;margin:0 auto var(--sp-5);padding:0 var(--sp-5)}
.gallery-head .ridge{margin-top:var(--sp-4);border-radius:var(--radius)}
[data-role="rail"]{
  display:flex;
  gap:var(--sp-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0 var(--sp-5) var(--sp-4);
  -webkit-overflow-scrolling:touch;
}
[data-role="rail-item"]{
  flex:0 0 78%;
  scroll-snap-align:start;
}
[data-role="rail-item"]:first-child{flex-basis:74%}
[data-role="rail-item"] .media{min-height:var(--sp-12)}

/* ---- founder anchor ---- */
[data-role="founder-anchor"]{
  background:linear-gradient(160deg, var(--grad-to) 0%, color-mix(in srgb, var(--accent-dark) 14%, var(--grad-to)) 100%);
}
.founder-grid{display:grid;gap:var(--sp-6);align-items:center}
[data-founder-portrait]{min-height:var(--sp-12)}
[data-founder-name]{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  letter-spacing:0.02em;
  color:var(--accent-dark);
}
[data-founder-voice]{
  font-size:var(--step-2);
  line-height:var(--lh-normal);
  font-weight:500;
  max-width:var(--measure);
}
.onboard-note{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  color:color-mix(in srgb, var(--text) 62%, var(--bg));
  line-height:var(--lh-normal);
  max-width:var(--measure);
}

/* ---- footer ---- */
[data-role="footer"]{
  background:var(--text);
  color:color-mix(in srgb, var(--surface) 86%, var(--text));
}
[data-role="footer-closing"]{
  text-align:center;
  padding:var(--sp-8) var(--sp-5) var(--sp-6);
  border-bottom:var(--bw-1) solid color-mix(in srgb, var(--surface) 16%, var(--text));
}
.footer-monogram{
  width:min(28rem, 80%);
  margin:0 auto var(--sp-4);
  height:var(--sp-8);
  background:
    radial-gradient(90% 130% at 18% 120%, var(--accent-dark) 0 44%, transparent 45%),
    radial-gradient(85% 130% at 44% 124%, var(--accent) 0 46%, transparent 47%),
    radial-gradient(95% 140% at 74% 120%, color-mix(in srgb, var(--accent) 66%, var(--text)) 0 45%, transparent 46%),
    radial-gradient(70% 130% at 96% 126%, var(--accent-dark) 0 47%, transparent 48%);
  background-repeat:no-repeat;
  border-bottom:var(--bw-2) solid var(--accent);
}
.wordmark{
  font-size:var(--step-4);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--surface);
}
.footer-closing-line{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  color:color-mix(in srgb, var(--surface) 66%, var(--text));
  margin-top:var(--sp-3);
}
.footer-cols{
  max-width:78rem;
  margin:0 auto;
  padding:var(--sp-7) var(--sp-5);
  display:grid;
  gap:var(--sp-6);
}
.footer-cols h4{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  letter-spacing:0.04em;
  color:var(--accent);
  margin-bottom:var(--sp-3);
}
.footer-cols ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
[data-role="footer"] a{color:color-mix(in srgb, var(--surface) 82%, var(--text))}
[data-role="footer"] a:hover{color:var(--surface)}
.footer-legal{
  border-top:var(--bw-1) solid color-mix(in srgb, var(--surface) 16%, var(--text));
  padding:var(--sp-4) var(--sp-5);
  text-align:center;
  font-family:var(--font-mono);
  font-size:var(--step--1);
  color:color-mix(in srgb, var(--surface) 58%, var(--text));
}

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(var(--sp-3));animation:settle .7s ease forwards}
@keyframes settle{to{opacity:1;transform:none}}

/* ---- desktop restructure ---- */
@media (min-width:768px){
  .nav-links{display:flex;gap:var(--sp-5)}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  [data-role="section"]{padding:var(--sp-9) var(--sp-6)}
  .split{grid-template-columns:1fr 1fr}
  .split--media-first .text{order:2}
  .split--media-first .media{order:1}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .founder-grid{grid-template-columns:5fr 7fr}
  .hero [data-role="headline"]{font-size:var(--step-6)}
  .footer-cols{grid-template-columns:2fr 1fr 1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{animation:none;opacity:1;transform:none}
  *{transition:none!important}
}
/* R3 full-bleed hero (generator). The photo must FILL the hero band, headline OVERLAID on the image
   (text-over-photo — Jonah likes it). We override ONLY the marked hero, so caption-sized media slots
   keep C10B's stronger legibility band. Specificity (section + .hero + 2 attrs) beats C10B's rule. */
section.hero[data-hero="full-bleed"]{
  min-height:78vh;                 /* belt: a tall band for a full-bleed render (composition owns the
                                      gate's .hero min-height rule; this never lowers it) */
}
/* KILL the C10B near-opaque .94/.84/.74 flat band on the hero's text region — that band, sized for
   small caption slots, is what makes a tall hero read as a strip (~35%). We replace it with a
   DIRECTIONAL legibility gradient (R6c): the hero headline is left-aligned, so a LEFT-anchored
   gradient darkens the text's own background enough for WCAG >=3:1 white-on-photo, while the RIGHT
   of the hero stays bright photo — full-width coverage bands keep their mean >= the coverage floor,
   so both hero gates (coverage >=62% AND text-legibility >=3:1) hold at once. The bright R6b photo is
   untouched; this is a text-protection layer, not a photo change. Brand-agnostic: no color/slot/subject
   hardcode beyond the composition's own ink tone; keyed on the data-hero="full-bleed" marker. */
section.hero[data-hero="full-bleed"] [data-role="text-on-image"]{
  background-image:linear-gradient(90deg,
      rgba(11,9,7,.90) 0%, rgba(11,9,7,.80) 28%, rgba(11,9,7,.44) 50%,
      rgba(11,9,7,.14) 64%, rgba(11,9,7,0) 76%) !important;
  color:#F7F2E8;
  text-shadow:0 2px 22px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.55);
}

/* ================= D3 RHYTHM LADDER (C19 deterministic normalization, D3/JD6) =================
   Deliberately UNEVEN, strictly increasing: related pairs (eyebrow+headline) sit tightest,
   loose pairs (body->CTA) sit widest. Derived per brand; enforced by the `rhythm-monotony`
   rule in the QA harness. Do not flatten these back to a single shared value. */
:root{
  --gap-eyebrow-head:27px;
  --gap-head-sub:40px;
  --gap-sub-body:60px;
  --gap-body-cta:90px;
}
[data-role="eyebrow"]:has(+ [data-role="headline"]){margin-bottom:0 !important}
[data-role="eyebrow"] + [data-role="headline"]{margin-top:var(--gap-eyebrow-head) !important}

[data-role="headline"]:has(+ [data-role="subheadline"]){margin-bottom:0 !important}
[data-role="headline"] + [data-role="subheadline"]{margin-top:var(--gap-head-sub) !important}

[data-role="subheadline"]:has(+ [data-role="body"]){margin-bottom:0 !important}
[data-role="subheadline"] + [data-role="body"]{margin-top:var(--gap-sub-body) !important}
[data-role="headline"]:has(+ [data-role="body"]){margin-bottom:0 !important}
[data-role="headline"] + [data-role="body"]{margin-top:var(--gap-sub-body) !important}

/* The CTA is usually a BUTTON ROW wrapping the btn roles, so match the wrapper generically
   (`:has(> [data-role^="btn"])`) rather than any brand's class name for it. */
[data-role="body"]:has(+ [data-role^="btn"]){margin-bottom:0 !important}
[data-role="body"] + [data-role^="btn"],
[data-role="body"] + *:has(> [data-role^="btn"]){margin-top:var(--gap-body-cta) !important}
/* ================= end D3 RHYTHM LADDER ================= */