/* Brand site engine, adapted 2026-09-21 from the ExecRecon site refresh (site-v2).
   One stylesheet for every page of every brand site. Colour comes only from
   tokens.css, which each brand's build writes from its approved kit. Every
   scroll effect is written so that its END state is the default: with no
   script, or with reduced motion, each page is complete and still. */

:root {
  --ink: var(--brand-ink);
  --ink-2: color-mix(in srgb, var(--ink) 62%, var(--paper));
  --rule: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --rule-strong: color-mix(in srgb, var(--ink) 48%, var(--paper));
  --rule-dark: color-mix(in srgb, var(--paper) 17%, var(--ground));
  --rule-dark-strong: color-mix(in srgb, var(--paper) 38%, var(--ground));
  --paper-dim: color-mix(in srgb, var(--paper) 74%, var(--ground));
  --bar: 64px;
  --pin: calc(100vh - var(--bar));
  --ease-out: var(--motion-ease-out);
  --display: var(--font-display);
  --mono: var(--font-label);
  /* scroll variables rest at the end state */
  --p: 1; --e: 1; --p2: 1; --pc: 0; --v: 0;
  --seen: 1; --t: 1; --c: 1; --r: 1; --l: 1; --l2: 0; --read: 0; --fit: 1;
  --i: 0; --n: 1; --dx: 0px; --len: 2.4; --shots: 3; --z: 2; --pos: 50% 50%;
  /* the narrow-screen caption panel starts hidden until the script places it */
  --o: 0; --vis: hidden;
}
@supports (height: 100svh) { :root { --pin: calc(100svh - var(--bar)); } }
@media (max-width: 860px) { :root { --bar: 56px; } }

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 17px; line-height: 1.6; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
body { margin: 0; overflow-x: clip; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
img { max-width: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus-light); outline-offset: 3px; }
.dark :focus-visible, .masthead :focus-visible, .site-foot :focus-visible { outline-color: var(--focus-dark); }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--cta-bg); color: var(--cta-fg); padding: 10px 14px; font-weight: 600; }
.skip:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- masthead: the approved gold lockup is drawn for a dark ground, so the bar is dark ---------- */
.masthead { position: fixed; inset: 0 0 auto 0; height: var(--bar); z-index: 60; background: var(--ground); color: var(--paper); border-bottom: 1px solid var(--rule-dark); }
.masthead-in { height: 100%; display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter); }
.logo { display: block; flex: none; }
.logo img { width: 186px; height: auto; }
.routes { display: flex; gap: clamp(12px, 1.5vw, 22px); margin-left: auto; font-size: 14px; }
.routes a { text-decoration: none; color: var(--paper-dim); padding: 6px 0; transition: color var(--motion-fast) var(--ease-out); }
.routes a:hover { color: var(--paper); }
.routes a[aria-current="page"] { color: var(--paper); box-shadow: 0 2px 0 var(--mark); }
.menu-toggle { display: none; margin-left: auto; font: inherit; font-size: 14px; color: var(--paper); background: none; border: 1px solid var(--rule-dark-strong); border-radius: var(--radius); padding: 7px 12px; cursor: pointer; }
@media (max-width: 1180px) {
  html.js .menu-toggle { display: block; }
  html.js .routes { display: none; position: absolute; top: var(--bar); left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--ground); padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--rule-dark); font-size: 16px; }
  html.js .routes.open { display: flex; }
  html.js .routes a { padding: 11px 0; border-bottom: 1px solid var(--rule-dark); }
  html.js .routes a[aria-current="page"] { box-shadow: none; color: var(--mark-text); }
  html:not(.js) .masthead { position: static; height: auto; }
  html:not(.js) .masthead-in { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  html:not(.js) .routes { flex-wrap: wrap; margin-left: 0; }
  .logo img { width: 160px; }
}
main { padding-top: var(--bar); }
html:not(.js) main { padding-top: 0; }
@media (min-width: 1181px) { html:not(.js) main { padding-top: var(--bar); } }

/* ---------- the one action ---------- */
.cta { display: inline-block; font: inherit; font-weight: 600; padding: 13px 20px; border: 0; border-radius: var(--radius); background: var(--cta-bg); color: var(--cta-fg); cursor: pointer; text-decoration: none; transition: background var(--motion-fast) var(--ease-out), transform 100ms var(--ease-out); }
.cta:hover { background: var(--cta-bg-hi); }
.dark .cta, .open .cta, .site-foot .cta { background: var(--cta-bg-dark); color: var(--cta-fg-dark); }
.dark .cta:hover, .open .cta:hover, .site-foot .cta:hover { background: var(--cta-bg-dark-hi); }
.cta:active { transform: scale(.98); }

/* ---------- shared type ---------- */
.dark { background: var(--ground); color: var(--paper); }
.light { background: var(--paper); color: var(--ink); }
.say { font-weight: 600; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(2rem, 4vw, 3.5rem); max-width: 18ch; text-wrap: balance; }
.sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 40ch; margin-top: 1.1em; text-wrap: pretty; }
.dark .sub { color: var(--paper-dim); }
.hint { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.go { font-weight: 600; text-decoration: none; box-shadow: 0 1px 0 currentColor; white-space: nowrap; }
.go span { display: inline-block; transition: transform 180ms var(--ease-out); }
.go:hover span { transform: translateX(4px); }
.prose p + p { margin-top: 1em; }
.prose p { max-width: var(--reading-max); text-wrap: pretty; }
.note { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
.dark .note { color: var(--paper-dim); }
.sec-h { font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.7rem, 3vw, 2.6rem); max-width: 20ch; text-wrap: balance; }

/* ---------- pinned scenes ---------- */
.ks { position: relative; padding: 72px var(--gutter); }
html.js:not(.rm) .ks { padding: 0; height: calc(var(--len, 2.4) * 100vh); }
html.js:not(.rm) .ks .pin { position: sticky; top: var(--bar); height: var(--pin); overflow: clip; padding: 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.k-big { font-weight: 600; letter-spacing: -.035em; line-height: 1.02; font-size: calc(clamp(2.1rem, 7.2vw, 6rem) * var(--fit, 1)); }
.k-big span { display: block; }
.k-mid { font-weight: 600; letter-spacing: -.035em; line-height: 1.04; font-size: calc(clamp(2rem, 5.6vw, 4.6rem) * var(--fit, 1)); max-width: 20ch; }
.k-mid span { display: block; }
@media (min-width: 800px) { html.js .k-big span { white-space: nowrap; } }
@media (max-width: 799px) { .k-big { font-size: clamp(1.7rem, 7.6vw, 3rem); } .k-big .k-run { max-width: calc(100% - 8vw); } .k-mid { font-size: clamp(1.7rem, 7.4vw, 2.8rem); } }

/* the opening: a photograph, a headline that leans with the speed of the scroll */
.open { background: var(--ground); color: var(--paper); overflow: clip; }
.open .k-big, .open .k-mid, .open .hint, .open .sub, .open .open-sub { position: relative; z-index: 2; }
.open .sub { color: var(--paper); opacity: .84; max-width: 44ch; }
.plate { position: absolute; inset: 0; overflow: clip; }
.plate img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.plate.side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--ground) 80%, transparent), color-mix(in srgb, var(--ground) 20%, transparent) 70%); }
html:not(.js) .open, html.rm .open { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; }
html.js:not(.rm) .open .plate img { transform: scale(calc(1.16 - .16 * var(--e))); }
html.js:not(.rm) .k-run { transform: translateX(calc(var(--e) * 16vw)) skewX(calc(var(--v) * -9deg)); transform-origin: 0 100%; will-change: transform; }
html.js:not(.rm) .k-stay { opacity: calc(.28 + .72 * var(--p2)); transform: translateX(calc(var(--e) * -1.5vw)); }
html.js:not(.rm) .open .sub { transform: translateX(calc(var(--e) * -1.5vw)); }
.k-mid .k-run { transform: none; }
html.js:not(.rm) .k-mid .k-run { transform: translateX(calc(var(--e) * 8vw)) skewX(calc(var(--v) * -7deg)); }
@media (max-width: 799px) {
  html.js:not(.rm) .k-run { transform: translateX(calc(var(--e) * 7vw)) skewX(calc(var(--v) * -9deg)); }
  html.js:not(.rm) .k-mid .k-run { transform: translateX(calc(var(--e) * 4vw)); }
  .plate.side::after { background: color-mix(in srgb, var(--ground) 62%, transparent); }
}
/* each pinned scene stays in place while the next section slides up over it, so no screen is ever empty */
html.js:not(.rm) .cover { position: relative; z-index: var(--z, 2); margin-top: calc(-1 * var(--pin)); min-height: var(--pin); }
.cover.light { border-top: 1px solid var(--rule); }
.cover.dark { border-top: 1px solid var(--rule-dark); }

/* the scatter (home): three nouns leave the list they started in */
.k2-lede { display: block; font-weight: 400; letter-spacing: 0; font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.4; max-width: 24ch; color: var(--ink-2); text-wrap: pretty; }
.k2-nouns { display: block; margin-top: clamp(20px, 4vh, 48px); }
.k2-nouns span { display: block; font-weight: 600; letter-spacing: -.035em; line-height: 1; font-size: clamp(2.4rem, 8vw, 7rem); width: max-content; will-change: transform; }
html.js:not(.rm) .k2-nouns span { opacity: calc(1 - .78 * var(--pc, 0)); }
html.js:not(.rm) .k2-nouns span:nth-child(1) { transform: translate(calc(var(--e) * 46vw), calc(var(--p2) * -20vh)) rotate(calc(var(--e) * 6deg)); }
html.js:not(.rm) .k2-nouns span:nth-child(2) { transform: translate(calc(var(--e) * 8vw), calc(var(--e) * 4vh)) rotate(calc(var(--e) * -4deg)); }
html.js:not(.rm) .k2-nouns span:nth-child(3) { transform: translate(calc(var(--e) * 30vw), calc(var(--e) * 6vh)) rotate(calc(var(--e) * 3deg)); }
@media (max-width: 799px) {
  html.js:not(.rm) .k2-nouns span:nth-child(1) { transform: translate(calc(var(--e) * 30vw), calc(var(--e) * -3vh)) rotate(calc(var(--e) * 6deg)); }
  html.js:not(.rm) .k2-nouns span:nth-child(2) { transform: translate(calc(var(--e) * 2vw), calc(var(--e) * 4vh)) rotate(calc(var(--e) * -5deg)); }
  html.js:not(.rm) .k2-nouns span:nth-child(3) { transform: translate(calc(var(--e) * 38vw), calc(var(--e) * 9vh)) rotate(calc(var(--e) * 4deg)); }
}

/* the statement: one sentence that lights word by word as it is read */
.statement .said { font-weight: 600; letter-spacing: -.03em; line-height: 1.12; font-size: clamp(1.9rem, 4.6vw, 4rem); max-width: 22ch; text-wrap: balance; }
.statement .said .w { transition: none; }
html.js:not(.rm) .statement .said .w { opacity: clamp(.16, calc(var(--p) * var(--n) * 1.2 - var(--i) + .6), 1); }
.statement .sub { max-width: 46ch; }
html.js:not(.rm) .statement .sub { opacity: calc(.2 + .8 * var(--p2)); }

/* ---------- the diagram: one picture that keeps changing while the captions pass ---------- */
.evo { position: relative; background: var(--paper); }
.evo-field { position: relative; height: 56vh; border-bottom: 1px solid var(--rule); }
.evo-field canvas { width: 100%; height: 100%; display: block; }
.evo-step { padding: 64px var(--gutter); }
.evo-step .step-name { display: block; }
html.js .evo-field { position: sticky; top: var(--bar); height: var(--pin); border: 0; }
html.js .evo-steps { position: relative; margin-top: calc(-1 * var(--pin)); pointer-events: none; }
html.js .evo-step { min-height: var(--pin); display: flex; flex-direction: column; justify-content: center; width: 44%; padding: 0 0 0 var(--gutter); }
html.js .evo-step > div { pointer-events: auto; }
html.js:not(.rm) .evo-step.last { min-height: calc(var(--pin) * 1.6); }
html.js:not(.rm) .evo.home .evo-step.last { min-height: calc(var(--pin) * 2.9); }
@media (min-width: 861px) { html.js:not(.rm) .evo-step.last { justify-content: flex-start; } html.js:not(.rm) .evo-step.last > div { position: sticky; top: calc(var(--bar) + var(--pin) * .3); } }
@media (max-width: 860px) {
  /* narrow screens: the steps become scroll length only, and their words share one caption panel */
  html.js .evo-step { width: 100%; padding: 0; }
  html.js .evo-step > div { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--pin) * .42); z-index: 2; background: var(--paper); border-top: 1px solid var(--rule); padding: 22px var(--gutter) 24px; visibility: var(--vis, hidden); overflow: hidden; }
  html.js .evo-step > div > * { opacity: var(--o, 0); transition: opacity 140ms var(--ease-out); }
  html.js .evo.is-pinned .evo-step > div { position: fixed; }
  html.js .evo.is-before .evo-step > div { top: calc(var(--pin) * .58); bottom: auto; }
  html.js .evo-step:first-child > div { visibility: visible; }
  .evo .say { font-size: clamp(1.4rem, 5.8vw, 2rem); }
  .evo .sub { font-size: .98rem; margin-top: .7em; }
}
html:not(.js) .evo-field, html:not(.js) .pick-out { display: none; }
.evo .say.small { font-size: clamp(1.7rem, 3.2vw, 2.8rem); max-width: 20ch; }
/* a real sequence: the method's four stages are an ordered list with CSS counters */
ol.evo-steps { counter-reset: stage; }
ol.evo-steps > li { counter-increment: stage; }
ol.evo-steps > li .say::before { content: counter(stage) "  "; font-family: var(--mono); font-size: .32em; font-weight: 500; letter-spacing: 0; vertical-align: .9em; color: var(--ink-2); margin-right: .5em; }

/* the hands-on moment on home: the four columns of the last state can be picked */
.picker { display: none; }
html.js .picker { display: block; position: absolute; inset: 0; pointer-events: none; }
.pick { position: absolute; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; cursor: pointer; pointer-events: none; opacity: 0; transition: border-color var(--motion-fast) var(--ease-out), opacity var(--motion-base) var(--ease-out); }
.picker.live .pick { pointer-events: auto; opacity: 1; border-color: var(--rule); }
.picker.live .pick:hover { border-color: var(--rule-strong); }
.picker.live .pick[aria-pressed="true"] { border-color: var(--ink); }
.pick-out { min-height: 5.2em; }
.pick-out b { font-weight: 600; color: var(--ink); }
.step-ask { margin-top: 18px; }
@media (max-width: 860px) { .pick-out { min-height: 4.4em; } .step-ask { margin-top: 10px; } .step-ask .cta { padding: 10px 16px; } }

/* ---------- the close on home: a line on its own, an iris onto a photograph, then the title card ---------- */
.shot { position: relative; min-height: 88vh; overflow: clip; display: flex; }
.shot.dark .sub { color: var(--paper); opacity: .8; }
.shot-text { position: relative; z-index: 2; padding: clamp(28px, 6vh, 72px) var(--gutter); }
html.js:not(.rm) .cine { height: calc(var(--shots, 3) * 125vh); }
html.js:not(.rm) .cine-stage { position: sticky; top: var(--bar); height: var(--pin); overflow: clip; }
html.js:not(.rm) .shot { position: absolute; inset: 0; min-height: 0; clip-path: var(--clip, none); will-change: clip-path; }
html.js:not(.rm) .cut-iris { --clip: inset(calc((1 - var(--r)) * 50%) calc((1 - var(--r)) * 50%)); }
html.js:not(.rm) .cut-left { --clip: inset(0 calc((1 - var(--r)) * 100%) 0 0); }
.beat { align-items: center; }
.beat-line { font-weight: 600; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(2.1rem, 6vw, 5.2rem); max-width: 16ch; text-wrap: balance; }
html.js:not(.rm) .beat-line { opacity: calc(1 - .85 * var(--l2, 0)); }
html.js:not(.rm) .people .plate img { transform: scale(calc(1.12 - .12 * var(--l))); }
.title { flex-direction: column; justify-content: center; }
.title-word { display: flex; font-weight: 600; letter-spacing: -.04em; line-height: .95; font-size: clamp(3.4rem, 13vw, 11rem); }
.title-word span { will-change: transform; margin-right: -.035em; }
html.js:not(.rm) .title-word span { transform: translateX(calc((1 - var(--t)) * var(--dx))); opacity: calc(.25 + .75 * var(--t)); }
.title .go { display: inline-block; margin-top: 1.6em; }

/* ---------- the forward leg: one 2px gold rule per page, always in front of the page's one action ---------- */
.leg { display: block; border: 0; height: 2px; background: var(--leg); margin: 0 calc(-1 * var(--gutter)) 0 0; transform-origin: 0 50%; }
html.js:not(.rm) .leg { transform: scaleX(var(--t, 1)); }
.title-leg { margin-top: clamp(28px, 6vh, 56px); }

/* ---------- offers: the lexicon, one name at a time, plain words first ---------- */
.offers { padding: clamp(80px, 11vw, 150px) var(--gutter); }
.offers-in { max-width: var(--content-max); margin: 0 auto; display: grid; gap: clamp(32px, 6vw, 96px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.offers-head { position: sticky; top: calc(var(--bar) + 48px); }
html:not(.js) .offers-head, html.rm .offers-head { position: static; }
.offers-head .sub { max-width: 34ch; }
.terms { border-top: 1px solid var(--rule); }
.dark .terms { border-top-color: var(--rule-dark); }
.terms > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 28px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.dark .terms > div { border-bottom-color: var(--rule-dark); }
.terms dt { font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; }
.terms dt small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.dark .terms dt small { color: var(--paper-dim); }
.terms dd { color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.dark .terms dd { color: var(--paper-dim); }
.terms dd a { font-weight: 600; }
html.js:not(.rm) .terms > div { opacity: calc(.22 + .78 * var(--seen, 1)); transform: translateY(calc((1 - var(--seen, 1)) * 14px)); }
.offers .note { margin-top: 28px; }
@media (max-width: 860px) {
  .offers-in { grid-template-columns: 1fr; }
  .offers-head { position: static; }
  .terms > div { grid-template-columns: 1fr; }
}

/* a real sequence inside a page: the way an engagement runs */
.seq { counter-reset: seq; border-top: 1px solid var(--rule); }
.seq li { counter-increment: seq; display: grid; grid-template-columns: 3.2rem minmax(0, 13rem) minmax(0, 1fr); gap: 8px 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.seq li::before { content: counter(seq, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding-top: .45em; }
.seq .seq-name { font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; }
.seq .seq-what { color: var(--ink-2); max-width: 52ch; }
html.js:not(.rm) .seq li { opacity: calc(.22 + .78 * var(--seen, 1)); transform: translateY(calc((1 - var(--seen, 1)) * 14px)); }
@media (max-width: 860px) { .seq li { grid-template-columns: 2.4rem minmax(0, 1fr); } .seq .seq-what { grid-column: 2; } }

/* ---------- the story (About): a heading that holds while the paragraphs pass ---------- */
.story { padding: clamp(80px, 11vw, 150px) var(--gutter); }
.story-in { max-width: var(--content-max); margin: 0 auto; display: grid; gap: clamp(32px, 6vw, 96px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.story .prose p { font-size: 1.12rem; line-height: 1.65; }
.story .prose p + p { margin-top: 1.2em; }
.principles { margin-top: 40px; border-top: 1px solid var(--rule-dark); }
.principles li { padding: 18px 0; border-bottom: 1px solid var(--rule-dark); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.words { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-family: var(--mono); font-size: 14px; }
@media (max-width: 860px) { .story-in { grid-template-columns: 1fr; } }

/* ---------- the shape table (Pricing) ---------- */
.shape { padding: clamp(80px, 11vw, 140px) var(--gutter); }
.shape-in { max-width: 1320px; margin: 0 auto; }
.shape .sub { max-width: 52ch; }
.table-wrap { margin-top: 40px; overflow-x: auto; border-top: 1px solid var(--rule); }
.table-wrap:focus-visible { outline-offset: 6px; }
.shape table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.shape caption { text-align: left; }
.shape th, .shape td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.shape thead th { font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; padding-top: 22px; }
.shape tbody th { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); width: 9rem; padding-top: 19px; }
.shape td { color: var(--ink-2); }
.dark .table-wrap, .dark.shape th, .dark.shape td { border-color: var(--rule-dark); }
.dark.shape td, .dark.shape tbody th { color: var(--paper-dim); }
html.js:not(.rm) .shape [data-col] { opacity: calc(.12 + .88 * var(--c, 1)); }
.shape .note { margin-top: 24px; }

/* ---------- the list: the one action on every page ---------- */
.list { padding: clamp(72px, 10vw, 140px) var(--gutter); }
.list-in { max-width: var(--content-max); margin: 0 auto; display: grid; gap: clamp(40px, 6vw, 88px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.list .leg { margin-bottom: clamp(40px, 6vw, 72px); grid-column: 1 / -1; }
.list h2 { font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.6rem, 2.6vw, 2.3rem); max-width: 20ch; text-wrap: balance; }
.list-note { margin-top: 16px; max-width: 44ch; color: var(--ink-2); }
.notify { margin-top: 28px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: transparent; color: var(--ink); width: 100%; }
.field textarea { min-height: 7.5em; resize: vertical; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.notify .cta { justify-self: start; margin-top: 6px; }
.reply-line { min-height: 1.5em; font-size: 14px; color: var(--ink-2); }
.door { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.door:last-of-type { border-bottom: 1px solid var(--rule); }
.door-name { font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; }
.door-for { color: var(--ink-2); }
.door-go { font-family: var(--mono); font-size: 13px; transition: transform 180ms var(--ease-out); }
.door:hover .door-go { transform: translateX(4px); }
.door.lead .door-name { font-size: 1.9rem; }
.doors-h { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-bottom: 14px; }
@media (max-width: 800px) { .list-in { grid-template-columns: 1fr; } .door { grid-template-columns: 1fr auto; } .door-for { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- legal pages: the index holds beside the text and marks where the reader is ---------- */
.legal { padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(80px, 10vw, 140px); }
.legal-in { max-width: var(--content-max); margin: 0 auto; display: grid; gap: clamp(32px, 6vw, 96px); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.legal-contents { position: sticky; top: calc(var(--bar) + 40px); font-size: 14px; }
.legal-contents { border-top: 1px solid var(--rule); }
.legal-contents a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink-2); transition: color var(--motion-fast) var(--ease-out); }
.legal-contents a:hover { color: var(--ink); }
.legal-contents a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.legal-part + .legal-part { margin-top: clamp(56px, 8vw, 96px); }
.legal-part > h2 { font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-size: clamp(1.6rem, 2.6vw, 2.3rem); max-width: 22ch; padding: 14px 0 18px; background: var(--paper); border-bottom: 1px solid var(--rule); }
html.js:not(.rm) .legal-part > h2 { position: sticky; top: var(--bar); z-index: 2; }
.clause { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.clause h3 { font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: 8px; }
.clause p, .clause li { color: var(--ink-2); max-width: var(--reading-max); }
.clause ul { list-style: disc; padding-left: 1.2em; }
.clause li + li { margin-top: .5em; }
.clause .counsel { margin-top: 12px; font-family: var(--mono); font-size: 12px; }
.legal .note { margin-top: 32px; }
.progress { position: fixed; left: 0; right: 0; top: var(--bar); height: 2px; z-index: 55; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--leg); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
html:not(.js) .progress, html.rm .progress { display: none; }
@media (max-width: 860px) { .legal-in { grid-template-columns: 1fr; } .legal-contents { position: static; } }

/* ---------- plain sections (Contact, Welcome) ---------- */
.plain { padding: clamp(72px, 10vw, 140px) var(--gutter); }
.plain-in { max-width: var(--content-max); margin: 0 auto; }
.plain .prose { margin-top: 20px; }

/* ---------- reduced motion: the scroll choreography is already off (html.rm); this takes the small transitions with it ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ---------- footer ---------- */
.site-foot { position: relative; z-index: 5; background: var(--ground); color: var(--paper-dim); padding: 56px var(--gutter) 64px; font-size: 14px; }
.foot-in { max-width: var(--content-max); margin: 0 auto; display: grid; gap: 28px; }
.foot-in img { width: 150px; height: auto; }
.foot-routes { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-routes a { text-decoration: none; }
.foot-routes a:hover { color: var(--paper); }
.foot-legal { max-width: 72ch; font-size: 13px; line-height: 1.55; }
.foot-legal + .foot-legal { margin-top: -16px; }

/* the shape table reads column by column on a phone: one short list per part instead of a sideways scroll */
.shape-list { display: none; }
.shape-list h3 { font-weight: 600; font-size: 1.35rem; letter-spacing: -.02em; margin: 40px 0 8px; }
.shape-list .terms > div { padding: 14px 0; }
.shape-list .terms dt { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 800px) { .shape .table-wrap { display: none; } .shape-list { display: block; } }

/* ======================================================================
   Brand-site additions (2026-09-21). Everything below extends the engine
   for sites with few routes, a mark-led opening, contact forms and the
   one-page placeholder layout. Colour still comes only from tokens.css.
   ====================================================================== */

/* headline weight and tracking are brand tokens (Alterity sets 800 and -.04em) */
.k-big, .k-mid, .say, .beat-line, .title-word, .sec-h, .list h2, .legal-part > h2, .k2-nouns span, .statement .said { font-weight: var(--h-weight, 600); }
.k-big, .k-mid, .beat-line, .k2-nouns span { letter-spacing: var(--h-track, -.035em); }

/* the logo is sized by height, because the lockups differ a great deal in width */
.logo img { width: auto; height: var(--logo-h, 30px); max-width: min(62vw, 340px); }
@media (max-width: 1180px) { .logo img { width: auto; height: calc(var(--logo-h, 30px) * .9); } }

/* few routes: the list stays in the bar at every width, no menu button */
.masthead.few .menu-toggle { display: none !important; }
.masthead.few .routes { display: flex !important; position: static !important; flex-direction: row !important; background: none !important; padding: 0 !important; border: 0 !important; gap: clamp(14px, 2vw, 26px) !important; font-size: 14px !important; margin-left: auto !important; }
.masthead.few .routes a { padding: 6px 0 !important; border: 0 !important; white-space: nowrap; }
@media (max-width: 560px) { .masthead.few .routes a.opt { display: none !important; } }
html:not(.js) .masthead.few { position: fixed; height: var(--bar); }
html:not(.js) .masthead.few .masthead-in { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
html:not(.js) body.few-routes main { padding-top: var(--bar); }

/* a light bar, for identities drawn for a light ground */
.masthead.light-bar { background: var(--paper); color: var(--ink); border-bottom-color: var(--rule); }
.masthead.light-bar .routes a { color: var(--ink-2); }
.masthead.light-bar .routes a:hover, .masthead.light-bar .routes a[aria-current="page"] { color: var(--ink); }
.masthead.light-bar :focus-visible { outline-color: var(--focus-light); }
.masthead.light-bar .menu-toggle { color: var(--ink); border-color: var(--rule-strong); }
@media (max-width: 1180px) { html.js .masthead.light-bar .routes { background: var(--paper); border-bottom-color: var(--rule); } html.js .masthead.light-bar .routes a { border-bottom-color: var(--rule); } }

/* the opening can carry a sub line and a short label above it */
.open .open-sub { margin-top: clamp(18px, 3vh, 30px); max-width: 46ch; color: var(--paper); opacity: .86; }
.open .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--paper); opacity: .72; margin-bottom: clamp(14px, 2.4vh, 24px); position: relative; z-index: 2; }

/* a mark-led opening: the approved mark stands where a photograph would, on the dark ground, lit from behind */
.plate.mark { display: flex; align-items: center; justify-content: flex-end; padding-right: clamp(20px, 6vw, 120px); background: radial-gradient(ellipse 46% 58% at 78% 52%, color-mix(in srgb, var(--glow, var(--mark)) 22%, transparent), transparent 72%), var(--ground); }
.plate.mark img { width: auto; height: min(50vh, 27vw); max-width: 27vw; object-fit: contain; opacity: .96; }
/* the same falloff the photographs have: the mark is lit from the right and the headline side stays dark */
.plate.mark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, color-mix(in srgb, var(--ground) 94%, transparent) 0%, color-mix(in srgb, var(--ground) 78%, transparent) 36%, color-mix(in srgb, var(--ground) 20%, transparent) 60%, transparent 74%); }
/* as the headline runs right, the mark gives way: it drifts right and dims under the words */
html.js:not(.rm) .open .plate.mark img { transform: translateX(calc(var(--e) * 4vw)) scale(calc(1.06 - .06 * var(--e))); transform-origin: 70% 50%; opacity: calc(.96 - .5 * var(--e)); }
@media (max-width: 799px) {
  .plate.mark { justify-content: center; align-items: flex-start; padding: 5vh 0 0; background: radial-gradient(ellipse 80% 36% at 50% 18%, color-mix(in srgb, var(--glow, var(--mark)) 22%, transparent), transparent 72%), var(--ground); }
  .plate.mark img { height: 19vh; max-width: 64vw; opacity: .9; }
  .plate.mark::after { background: none; }
  html.js:not(.rm) .open .plate.mark img { transform: scale(calc(1.04 - .04 * var(--e))); transform-origin: 50% 0; opacity: calc(.9 - .4 * var(--e)); }
}

/* a drawn opening (no photograph): contour lines behind the headline */
.plate.drawn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
html.js:not(.rm) .open .plate.drawn svg { transform: scale(calc(1.1 - .1 * var(--e))); transform-origin: 60% 60%; }

/* the title card's word sizes itself to its letter count */
.title-word { font-size: clamp(2.6rem, calc(118vw / (var(--chars, 6) + 2.2)), 11rem); }

/* forms: the note under a form, a textarea, and a line that has been answered */
.form-note { margin-top: 2px; }
.form-note a { color: inherit; }
.reply-line.said { color: var(--ink); font-weight: 600; }
.field textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: transparent; color: var(--ink); width: 100%; min-height: 7.5em; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.pair { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } }

/* door rows that fill the form instead of opening a page */
.door[data-interest] { cursor: pointer; }
.doors-h { margin-top: 4px; }

/* the removal form on the privacy page */
.remove-form { margin-top: 18px; display: grid; gap: 12px; max-width: 30rem; }
.remove-form .cta { justify-self: start; }

/* not found */
.lost { min-height: calc(100vh - var(--bar)); display: flex; flex-direction: column; justify-content: center; padding: 72px var(--gutter); }
.lost .k-mid { max-width: 16ch; }
.lost .sub { max-width: 44ch; }
.lost-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; }

/* inner-page plate without a photograph behind the headline */
.open.plain-open { min-height: 0; }

/* a typeset name, for a brand whose horizontal logo is not approved yet */
.logo-text { font-weight: 700; font-size: 16px; letter-spacing: .01em; line-height: 1; color: inherit; text-decoration: none; white-space: nowrap; }
.logo-text:hover { color: inherit; }
.foot-name { font-weight: 700; font-size: 19px; letter-spacing: .01em; color: var(--paper); margin: 0 0 14px; }
/* a long route label gets a short one on a phone */
.r-short { display: none; }
@media (max-width: 560px) { .r-long { display: none; } .r-short { display: inline; } }