/* Zdev site styles. Source: docs/design/approved-homepage.html. Rules: docs/design/design-contract.md. One dark look: red on ink. */
:root {
  --ink: #0f0d0d;
  --ink-2: #191515;
  --ink-3: #241e1d;
  --line: #3a3130;
  --paper: #f6f1ec;
  --muted: #b9ada7;
  --red: #ff3d21;
  --red-deep: #c2200b;
  --display: "Archivo Variable", "Arial Black", system-ui, sans-serif;
  --body: "Archivo Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.6; margin: 0; }
h1, h2, h3 { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.03; margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.muted { color: var(--muted); }
.kp { color: var(--red); }
.nw { white-space: nowrap; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--gut); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

/* ---------- the homepage ---------- */
.site-head { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; gap: 24px; padding-block: 20px; }
.site-head img { height: 30px; width: auto; display: block; }
.site-head nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.site-head nav a { color: var(--paper); text-decoration: none; font-weight: 600; font-size: 15px; position: relative; }
.site-head nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.site-head nav a:not(.btn):hover::after { transform: scaleX(1); }
@media (max-width: 820px) { .site-head nav a:not(.btn) { display: none; } .site-head img { height: 24px; } }

.hero { position: relative; min-height: min(92svh, 780px); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.hero { background: radial-gradient(60% 70% at 72% 22%, color-mix(in srgb, var(--red-deep) 22%, transparent), transparent 70%), var(--ink); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -3; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink) 10%, color-mix(in srgb, var(--ink) 60%, transparent) 48%, transparent 80%), linear-gradient(0deg, var(--ink) 0%, transparent 30%); }
.hero .copy { display: grid; gap: 22px; padding-block: 120px 80px; max-width: 700px; }
.hero h1 { font-size: clamp(40px, 6vw, 84px); }
.hero .lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--paper); opacity: .85; max-width: 46ch; }

.hero > .wrap { width: 100%; }
@media (max-width: 820px) {
  .hero { align-items: start; min-height: 700px; }
  .hero .copy { padding-block: 96px 48px; }
  .hero::after { background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 80%, transparent) 55%, color-mix(in srgb, var(--ink) 25%, transparent) 100%); }
}
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 700; font-size: 15px; cursor: pointer; background: var(--red-deep); color: var(--paper); text-decoration: none; min-height: 44px; transition: transform .25s var(--ease), background .25s; }
.btn:hover { background: var(--red); color: var(--ink); transform: translateY(-2px); }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn.ghost { background: color-mix(in srgb, var(--ink) 55%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); }
.btn.ghost:hover { border-color: var(--paper); color: var(--paper); background: color-mix(in srgb, var(--paper) 12%, transparent); }
.btn.sm { padding: 9px 16px; min-height: 38px; font-size: 14px; }
.rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.rise .w > span { display: inline-block; animation: rise 1s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.fade-in { animation: fadeUp .9s var(--ease) both; animation-delay: var(--d, 700ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.clients { border-block: 1px solid var(--line); }
.clients .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px; padding-block: 22px; }
.clients span:first-child { font-size: 14px; color: var(--muted); }
.clients b { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.01em; color: var(--paper); opacity: .8; }

.sec { padding-block: clamp(64px, 9vw, 120px); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.sec-head h2 { font-size: clamp(32px, 4.4vw, 60px); }
.sec-head p { font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); max-width: 60ch; }

/* the logo's six branches are the six kinds of work: every card carries the tree mark */
.glyph { overflow: visible; display: block; }
.glyph path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-spine { stroke: var(--red-deep); stroke-width: 3.4; }
.g-node { fill: var(--red-deep); }
.g-off path { stroke: color-mix(in srgb, var(--paper) 22%, transparent); stroke-width: 2; }
.g-off circle { fill: color-mix(in srgb, var(--paper) 22%, transparent); }
.g-on path { stroke: var(--red); stroke-width: 2.8; }
.g-on circle { fill: var(--red); }

/* what we build: an index of six branches, not a card grid */
.kinds { border-top: 1px solid var(--line); }
.kind { position: relative; isolation: isolate; overflow: hidden; width: 100%; border-bottom: 0 !important; display: grid; grid-template-columns: 40px 52px minmax(0, 1fr) minmax(0, 32ch) 54px; grid-template-areas: "n g name proof go"; gap: 0 clamp(14px, 2vw, 30px); align-items: center; padding: clamp(18px, 2.2vw, 26px) clamp(8px, 1.5vw, 20px); background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.kind::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red-deep); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.kind:hover::before, .kind:focus-visible::before { transform: scaleX(1); }
.k-n { grid-area: n; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s; }
.k-g { grid-area: g; }
.k-g .glyph { height: 64px; width: auto; }
.k-name { grid-area: name; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(34px, 5.4vw, 80px); line-height: .95; letter-spacing: -0.03em; transition: transform .6s var(--ease); }
.k-proof { grid-area: proof; color: var(--muted); font-size: 16px; line-height: 1.5; transition: color .3s; }
.k-go { grid-area: go; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 20px; transition: transform .5s var(--ease), background .3s, border-color .3s; }
.kind:hover .k-name, .kind:focus-visible .k-name { transform: translateX(14px); }
.kind:hover .k-proof, .kind:hover .k-n, .kind:focus-visible .k-proof { color: var(--paper); }
.kind:hover .k-go, .kind:focus-visible .k-go { background: var(--ink); border-color: var(--ink); transform: rotate(-45deg); }
.kind:hover .g-spine, .kind:focus-visible .g-spine { stroke: var(--ink); }
.kind:hover .g-node, .kind:focus-visible .g-node { fill: var(--ink); }
.kind:hover .g-on path, .kind:focus-visible .g-on path { stroke: var(--paper); }
.kind:hover .g-on circle, .kind:focus-visible .g-on circle { fill: var(--paper); }
.kind:hover .g-off path, .kind:focus-visible .g-off path { stroke: color-mix(in srgb, var(--ink) 45%, transparent); }
.kind:hover .g-off circle, .kind:focus-visible .g-off circle { fill: color-mix(in srgb, var(--ink) 45%, transparent); }
@media (max-width: 760px) {
  .kind { grid-template-columns: 36px minmax(0, 1fr) 44px; grid-template-areas: "g name go" "g proof go"; gap: 6px 14px; }
  .k-n { display: none; }
  .k-g .glyph { height: 52px; }
  .k-go { width: 44px; height: 44px; }
  .k-proof { font-size: 15px; }
}

/* work: a bento of projects, three featured wide */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; font-size: 14px; min-height: 40px; transition: background .25s, border-color .25s; }
.filters button:hover { border-color: var(--paper); }
.filters button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
@media (max-width: 1000px) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .work { grid-template-columns: minmax(0, 1fr); } }
.wcard { position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 20px; background: var(--ink-2); padding: 26px 26px 24px; min-height: 330px; display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer; transition: background .4s, transform .6s var(--ease), opacity .8s var(--ease); }
.wcard.wide { grid-column: span 2; min-height: 360px; padding: 32px; }
@media (max-width: 640px) { .wcard.wide { grid-column: auto; } }
.wcard::after { content: ""; position: absolute; left: 0; top: 0; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 15%, transparent), transparent); opacity: 0; transform: translate(var(--mx, 70%), var(--my, 80%)); transition: opacity .5s; z-index: -1; pointer-events: none; }
.wcard:hover { background: var(--ink-3); }
.wcard:hover::after { opacity: 1; }
.w-top { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--muted); padding-right: 64px; }
.w-idx { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--red); }
.w-client { font-weight: 700; font-size: 15px; margin-top: 14px; }
.wcard h3 { font-size: clamp(22px, 1.9vw, 27px); letter-spacing: -0.015em; max-width: 18ch; }
.wcard.wide h3 { font-size: clamp(28px, 3vw, 44px); max-width: 16ch; }
.w-body { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 44ch; }
.wcard.wide .w-body { font-size: 18px; max-width: min(48ch, calc(100% - 190px)); }
.work-more { margin: 28px 0 0; font-size: 17px; color: var(--muted); }
.work-more a { color: var(--paper); font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.w-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.w-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.w-tags span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; }
.w-glyph { flex: none; }
.w-glyph .glyph { height: 110px; width: auto; }
.wcard.wide .w-glyph { position: absolute; right: 40px; bottom: 28px; }
.wcard.wide .w-glyph .glyph { height: 240px; }
.w-tab { position: absolute; top: 0; right: 0; width: 64px; height: 64px; background: var(--ink-3); clip-path: polygon(0 0, 100% 0, 100% 100%); transform-origin: top right; transition: background .3s, transform .5s var(--ease); }
.w-tab i { position: absolute; top: 9px; right: 11px; font-style: normal; font-size: 16px; font-weight: 700; }
.wcard:hover .w-tab, .wcard:focus-visible .w-tab { background: var(--red-deep); transform: scale(1.3); }
@media (max-width: 640px) { .wcard.wide .w-glyph { position: static; } .wcard.wide .w-glyph .glyph { height: 110px; } .wcard.wide .w-body { max-width: none; } }
.wcard.enter { animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--k) * 50ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }


/* ---------- card motion (from /animate) ---------- */
/* signature: the tree draws itself as a card scrolls in: trunk, then lit branches, then nodes */
.glyph .g-spine, .glyph g path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.glyph circle { transform-box: fill-box; transform-origin: center; }
.js .rv:not(.in) .glyph .g-spine, .js .rv:not(.in) .glyph g path { stroke-dashoffset: 1; }
.js .rv:not(.in) .glyph circle { transform: scale(0); }
.rv.in .glyph .g-spine { transition: stroke-dashoffset .8s var(--ease) calc(var(--d, 0ms) + 150ms), stroke .3s; }
.rv.in .glyph g path { transition: stroke-dashoffset .7s var(--ease) calc(var(--d, 0ms) + 450ms + var(--i) * 60ms), stroke .3s; }
.rv.in .glyph circle { transition: transform .5s var(--ease) calc(var(--d, 0ms) + 750ms + var(--i) * 60ms), fill .3s; }
/* filter re-entry redraws the tree */
.wcard.enter .glyph .g-spine, .wcard.enter .glyph g path { animation: draw .8s var(--ease) both; animation-delay: calc(var(--k) * 50ms + 150ms); }
.wcard.enter .glyph circle { animation: pop .5s var(--ease) both; animation-delay: calc(var(--k) * 50ms + 500ms); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.work { transition: opacity .15s ease-out; }
.work.swap { opacity: 0; }

/* feedback: on hover a signal runs up the trunk and out each lit branch; the tip pulses as it lands */
.g-sig { fill: none; stroke: var(--red); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: .1 1.2; stroke-dashoffset: .1; opacity: 0; filter: drop-shadow(0 0 3px var(--red)); }
.kind:hover .g-sig, .kind:focus-visible .g-sig, .wcard:hover .g-sig, .wcard:focus-visible .g-sig { opacity: 1; animation: sig 1.6s cubic-bezier(.45, 0, .2, 1) infinite; animation-delay: calc(var(--i) * 140ms); }
.kind:hover .g-sig, .kind:focus-visible .g-sig { stroke: var(--paper); filter: drop-shadow(0 0 3px var(--paper)); }
@keyframes sig { 0% { stroke-dashoffset: .1; } 70%, 100% { stroke-dashoffset: -1; } }
.kind:hover .g-on circle, .wcard:hover .g-on circle { animation: tip 1.6s var(--ease) infinite; }
@keyframes tip { 0%, 55% { transform: scale(1); } 66% { transform: scale(1.8); } 100% { transform: scale(1); } }

/* project cards lift, press down, and the glow follows the pointer */
.wcard.in:hover, .wcard.in:focus-visible { transform: translateY(-6px); }
.wcard.in:active { transform: translateY(-2px) scale(.99); transition-duration: .1s; }
.wcard .w-tab i { transition: transform .4s var(--ease); }
.wcard:hover .w-tab i { transform: translate(2px, -2px) scale(.8); }

/* index rows slide in from the left while their rule draws */
.kind::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; transition: transform 1s var(--ease) var(--d, 0ms); }
.js .kind.rv:not(.in) { transform: translateX(-28px); }
.js .kind.rv:not(.in)::after { transform: scaleX(0); }
.kind:active .k-go { transform: rotate(-45deg) scale(.9); transition-duration: .1s; }

/* who you talk to */
.who { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .who { grid-template-columns: minmax(0, 1fr); } }
.who h2 { font-size: clamp(32px, 4.4vw, 60px); margin-top: 14px; }
.who .person { display: flex; gap: 18px; align-items: center; margin-top: 28px; }
.who .photo { width: 88px; height: 88px; border-radius: 50%; background: var(--ink-3); border: 2px dashed var(--line); display: grid; place-items: center; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; flex: none; }
.who .person b { display: block; font-size: 18px; }
.who > .rv:first-child { position: sticky; top: 96px; }
@media (max-width: 860px) { .who > .rv:first-child { position: static; } }
/* facts: a hairline spec sheet; each fact carries a small live instrument that proves it */
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.fx { background: var(--ink); padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 18px; min-width: 0; transition: background .4s; }
.fx:hover { background: var(--ink-2); }
.fx.wide { grid-column: span 2; }
.fx dt { display: flex; gap: 12px; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fx dt i { font-style: normal; color: var(--red); font-variant-numeric: tabular-nums; }
.fx dd { margin: 0; display: grid; grid-template-areas: "viz" "head" "text"; gap: 12px; align-content: start; }
.fx.wide dd { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "head viz" "text viz"; column-gap: clamp(20px, 3vw, 44px); align-items: center; }
.fx dd > b { grid-area: head; font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.fx dd > span { grid-area: text; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 46ch; }
.fx-viz { grid-area: viz; width: 100%; min-width: 0; }
svg.fx-viz { height: 48px; overflow: visible; margin-bottom: 6px; }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); } .fx.wide { grid-column: auto; } .fx.wide dd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "viz" "head" "text"; } }

/* team: a straight line, five nodes, the one you talk to is lit */
.fx svg path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx svg circle { fill: var(--ink-3); stroke: var(--muted); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.fx svg circle.lit { fill: var(--red); stroke: var(--red); }
.t-line, .h-main { stroke: var(--line); stroke-width: 2; }
.h-ours { stroke: var(--red); stroke-width: 2; }
.fx svg circle.ours { stroke: var(--red); }
.t-sig { stroke: var(--red); stroke-width: 3.4; stroke-dasharray: .12 1.2 !important; stroke-dashoffset: .12; opacity: 0; filter: drop-shadow(0 0 3px var(--red)); }
.fx-team:hover .t-sig { opacity: 1; animation: sig 1.8s cubic-bezier(.45, 0, .2, 1) infinite; }
.fx-team:hover circle.lit, .fx-how:hover circle.lit { animation: tip 1.8s var(--ease) infinite; }
.js .facts:not(.in) .fx svg path:not(.t-sig) { stroke-dashoffset: 1; }
.js .facts:not(.in) .fx svg circle { transform: scale(0); }
.facts.in .fx svg path { transition: stroke-dashoffset 1s var(--ease) calc(var(--i) * 120ms + 300ms); }
.facts.in .fx svg .h-ours { transition-delay: calc(var(--i) * 120ms + 650ms); }
.facts.in .fx svg circle { transition: transform .5s var(--ease) calc(var(--i) * 120ms + 500ms + var(--n) * 90ms); }

/* hours: live local time on a 24-hour track, with the 09:00-17:00 day shaded */
.clocks { display: grid; gap: 14px; }
.clk { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 3.2em; gap: 14px; align-items: center; font-size: 14px; font-weight: 600; }
.clk em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-left: 4px; }
.clk time { font-variant-numeric: tabular-nums; text-align: right; color: var(--paper); }
.trk { position: relative; height: 8px; border-radius: 99px; background: var(--ink-3); }
.trk s { position: absolute; top: 0; bottom: 0; left: 37.5%; width: 33.3%; border-radius: 99px; background: var(--line); transform-origin: left; }
.clk.us .trk s { background: color-mix(in srgb, var(--red) 35%, var(--ink-3)); }
.trk u { position: absolute; top: 50%; left: var(--p, 50%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px var(--ink); }
.clk.us .trk u { background: var(--red); }
.clk.us .trk u::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--red); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.js .facts:not(.in) .trk s { transform: scaleX(0); }
.facts.in .trk s { transition: transform .9s var(--ease) calc(var(--i) * 120ms + 300ms); }
.js .facts:not(.in) .trk u { transform: scale(0); }
.facts.in .trk u { transition: transform .5s var(--ease) calc(var(--i) * 120ms + 800ms); }

/* first step: ten working days fill in, then the quote */
.days { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; }
.wk { display: grid; gap: 8px; }
.wk small { font-size: 12px; font-weight: 600; color: var(--muted); }
.dd { display: flex; gap: 5px; }
.dd i { position: relative; overflow: hidden; width: clamp(18px, 2.2vw, 26px); aspect-ratio: 1; border-radius: 5px; background: var(--ink-3); }
.dd i::after { content: ""; position: absolute; inset: 0; background: var(--red-deep); transform-origin: left; }
.js .facts:not(.in) .dd i::after { transform: scaleX(0); }
.facts.in .dd i::after { transition: transform .45s var(--ease) calc(var(--i) * 120ms + 400ms + var(--n) * 70ms); }
.quote { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 700; }
.quote { text-decoration: none; }
.quote .arr { transition: transform .3s var(--ease); }
.quote:hover { background: var(--red); }
.quote:hover .arr { transform: translateX(4px); }
.js .facts:not(.in) .quote { opacity: 0; transform: translateX(-12px); }
.facts.in .quote { transition: opacity .5s var(--ease) calc(var(--i) * 120ms + 1200ms), transform .6s var(--ease) calc(var(--i) * 120ms + 1200ms), background .3s; }

/* tiles arrive one after another */
.js .facts:not(.in) .fx { opacity: 0; transform: translateY(18px); }
.facts.in .fx { transition: opacity .7s var(--ease) calc(var(--i) * 120ms), transform .8s var(--ease) calc(var(--i) * 120ms), background .4s; }

/* closing card */
.cta-card { border-radius: 32px; overflow: hidden; background: radial-gradient(90% 140% at 90% 20%, #ff5a3c 0%, var(--red-deep) 38%, #5a0f06 100%); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; min-height: 380px; color: var(--paper); }
.cta-card .copy { padding: clamp(28px, 5vw, 64px); align-self: center; display: grid; gap: 18px; }
.cta-card h2 { font-size: clamp(34px, 4.6vw, 64px); }
.cta-card p { max-width: 44ch; font-size: 17px; }
.cta-card .btn { background: var(--ink); }
.cta-card .btn:hover { background: var(--paper); color: var(--ink); }
.cta-card .bot { justify-self: center; width: min(300px, 90%); }
@media (max-width: 720px) { .cta-card { grid-template-columns: minmax(0, 1fr); } .cta-card .bot { width: 200px; } }

.site-foot { border-top: 1px solid var(--line); margin-top: clamp(64px, 8vw, 110px); }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-block: 44px; }
.site-foot img { height: 28px; width: auto; }
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; font-size: 15px; }
.site-foot .cols a { color: var(--muted); text-decoration: none; }
.site-foot .cols a:hover { color: var(--paper); }
.site-foot .mono-foot { width: 92px; }
.site-foot small { display: block; margin-top: 18px; color: var(--muted); font-size: 13px; }

/* ---------- services top ---------- */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 600px; overflow: hidden; }
.stage .copy { padding: clamp(24px, 5vw, 64px) var(--gut); display: grid; gap: 18px; align-content: center; }
.stage h1, .stage h2 { font-size: clamp(34px, 4.8vw, 66px); }
.stage p { font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); max-width: 44ch; }
.viz { position: relative; min-height: 420px; }
.viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 820px) {
  .stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .stage .copy { padding-block: 32px 8px; }
    .viz { min-height: 360px; height: 360px; }
}

/* mascot motion */
.m-bob { animation: bob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.m-float { animation: float 3.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.m-blink { animation: blink 4.6s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.m-wave { animation: wave 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-8deg); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-4deg); } }
.m-glow { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.m-cursor { animation: cur 1s steps(1) infinite; }
@keyframes cur { 50% { opacity: 0; } }
.eyes { transition: transform .25s var(--ease); }

/* scroll reveal (only once JS runs) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s; transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

body.still *, body.still *::before, body.still *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* Inner pages and site chrome. Everything here is derived from the approved page; see design-contract.md section 5. */

@font-face { font-family: "Archivo Variable"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/fonts/archivo-latin-ext-standard-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Variable"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/fonts/archivo-latin-standard-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
img, svg { max-width: 100%; }
a { color: inherit; }
.prose a, .foot-note a, .work-more a, .legal a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.btn:hover .arr { transform: translateX(4px); }
a.wcard, a.kind { color: inherit; text-decoration: none; }

/* site header: over the hero animation on the home page, on ink everywhere else */
.site-head { z-index: 20; }
.site-head .logo { display: block; line-height: 0; }
.site-head nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.site-head.solid { position: relative; border-bottom: 1px solid var(--line); }
.menu-btn { display: none; margin-left: 0; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--paper); font-weight: 700; font-size: 14px; cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.menu { display: none; }
@media (max-width: 820px) {
  .menu-btn { display: inline-flex; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 1px solid var(--line); z-index: 30; }
  .menu.open { display: block; }
  .menu .wrap { display: grid; padding-block: 8px 20px; }
  .menu a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: 22px; text-decoration: none; }
  .menu a[aria-current="page"] { color: var(--red); }
}

/* pause motion control (WCAG 2.2.2) */
.pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper); font-weight: 600; font-size: 13px; cursor: pointer; }
.pause:hover { border-color: var(--paper); }
.pause i { width: 10px; height: 12px; display: inline-block; border-inline: 3px solid currentColor; box-sizing: border-box; }
.pause[aria-pressed="true"] i { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.hero .pause { position: absolute; right: var(--gut); bottom: 24px; z-index: 2; }
@media (max-width: 820px) { .hero .pause { bottom: 16px; } }

/* page head for inner pages: the hero's type and motion, on ink */
.phead { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.phead .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 80px); align-items: end; }
.phead .copy { display: grid; gap: 20px; max-width: 820px; }
.phead h1 { font-size: clamp(34px, 4.8vw, 66px); }
.phead .lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); max-width: 60ch; }
.phead .aside .glyph { height: clamp(160px, 22vw, 300px); width: auto; }
@media (max-width: 760px) { .phead .wrap { grid-template-columns: minmax(0, 1fr); } .phead .aside { order: -1; } .phead .aside .glyph { height: 80px; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--red); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* meta row under a case head */
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-block: 1px solid var(--line); }
.meta div { padding: 16px 0 18px; display: grid; gap: 4px; }
.meta dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.meta dd { margin: 0; font-weight: 600; }
.kdots { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kdots span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: 1px; }

/* case study body */
.cs { display: grid; gap: clamp(48px, 7vw, 96px); padding-block: clamp(40px, 6vw, 80px); }
.cs-sec { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(16px, 4vw, 64px); }
.cs-sec > h2 { font-family: var(--body); font-stretch: 100%; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); line-height: 1.4; padding-top: 6px; }
.cs-sec .body { display: grid; gap: 16px; max-width: 68ch; }
.cs-sec .body p { font-size: clamp(17px, 1.3vw, 19px); }
@media (max-width: 760px) { .cs-sec { grid-template-columns: minmax(0, 1fr); } }
.hard { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: pretty; }
.built { font-size: 15px; color: var(--muted); }
.built b { color: var(--paper); font-weight: 700; margin-right: 8px; }

/* sibling projects and related work: the same cards, smaller grid */
.work.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .work.two { grid-template-columns: minmax(0, 1fr); } }

/* services: one block per kind of work */
.kblock { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.kblock .kh { display: grid; gap: 16px; align-content: start; position: sticky; top: 24px; }
.kblock .kh .glyph { height: 96px; width: auto; }
.kblock .kname { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(44px, 6vw, 88px); line-height: .95; letter-spacing: -0.03em; }
.kblock h2 { font-size: clamp(24px, 2.4vw, 32px); }
.kblock .kh p { color: var(--muted); font-size: 17px; max-width: 44ch; }
.kblock .klist { display: grid; gap: 14px; }
@media (max-width: 860px) { .kblock { grid-template-columns: minmax(0, 1fr); } .kblock .kh { position: static; } }
.krow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 20px 22px; border-radius: 16px; background: var(--ink-2); text-decoration: none; transition: background .3s, transform .5s var(--ease); }
.krow:hover, .krow:focus-visible { background: var(--ink-3); transform: translateX(6px); }
.krow small { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.krow small b { color: var(--red); font-weight: 700; margin-right: 8px; }
.krow strong { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.15; letter-spacing: -0.01em; }
.krow .go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .5s var(--ease), background .3s; }
.krow:hover .go { transform: rotate(-45deg); background: var(--red-deep); border-color: var(--red-deep); }
.kjump { display: flex; flex-wrap: wrap; gap: 8px; }
.kjump a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .25s; }
.kjump a:hover { border-color: var(--paper); }




/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact .note { color: var(--muted); font-size: 15px; max-width: 52ch; }
.direct { margin: 0; border-top: 1px solid var(--line); }
.direct div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.direct dt { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.direct dd { margin: 0; font-size: 17px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.direct a { text-decoration: none; }
.direct a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.copy-btn { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--paper); padding: 6px 14px; min-height: 36px; font-weight: 600; font-size: 13px; cursor: pointer; }
.copy-btn:hover { border-color: var(--paper); }
.form { border-radius: 24px; background: var(--ink-2); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.form h2 { font-size: clamp(24px, 2.2vw, 30px); }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 700; }
.field label span { color: var(--muted); font-weight: 600; }
.field input, .field textarea { font: inherit; font-size: 16px; color: var(--paper); background: var(--ink); border: 1px solid var(--muted); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.field.bad input { border: 2px solid var(--red); }
.field .err { display: flex; gap: 12px; align-items: center; color: #ff8b78; font-size: 15px; font-weight: 600; }
.field .err span[data-mono] { width: 52px; flex: none; }
.field .err svg { width: 100%; height: auto; display: block; }
.sent { display: grid; justify-items: start; gap: 14px; }
.sent .bot { width: 140px; }
.sent h2 { font-size: clamp(26px, 2.6vw, 34px); }
.sent p { color: var(--muted); max-width: 46ch; }

/* legal and statement pages */
.legal { display: grid; gap: clamp(36px, 5vw, 56px); padding-block: clamp(24px, 4vw, 48px) 0; max-width: 820px; }
.legal section { display: grid; gap: 14px; }
.legal h2 { font-size: clamp(24px, 2.4vw, 32px); font-stretch: 112%; }
.legal p, .legal li { color: var(--muted); font-size: 17px; max-width: 68ch; }
.legal strong { color: var(--paper); }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.legal li::marker { color: var(--red); }
.foot-note { color: var(--muted); font-size: 14px; }

/* empty filter and 404: Mono at a moment */
.empty { display: grid; justify-items: start; gap: 12px; padding: 32px; border-radius: 20px; background: var(--ink-2); }
.empty .bot { width: 130px; }
.empty h3 { font-size: 24px; }
.empty p { color: var(--muted); }
.nf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 80px); align-items: center; padding-block: clamp(56px, 8vw, 120px); }
.nf .bot { width: clamp(180px, 22vw, 280px); }
@media (max-width: 760px) { .nf { grid-template-columns: minmax(0, 1fr); } .nf .bot { order: -1; width: 180px; } }

/* footer additions */
.site-foot .row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 18px; }
.site-foot .row small { margin-top: 0; }
.site-foot .pause { border-color: var(--line); background: transparent; }
@media (max-width: 560px) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr); } .site-foot .mono-foot { justify-self: start; } }
/* Services hero: line the copy up with the page wrap on wide screens */
.stage .copy { padding-left: calc(max(0px, (100vw - 1320px) / 2) + var(--gut)); }
/* Pause motion stops loops, but entrance animations must still end in their visible state */
body.still .rise .w > span, body.still .fade-in, body.still .wcard.enter, body.still .wcard.enter .glyph * { animation: none !important; }
/* Real photo replaces the dashed placeholder */
img.photo { border: 2px solid var(--line); object-fit: cover; background: var(--ink-3); }

/* in-page links to a section heading land below the header */
.sec-head h2[id] { scroll-margin-top: 96px; }

/* ---------- inner-page lists and cards (from /bolder) ---------- */
/* pointer glow shared by every card that is not a work card */
.glow { position: relative; isolation: isolate; overflow: hidden; }
.glow::after { content: ""; position: absolute; left: 0; top: 0; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 15%, transparent), transparent); opacity: 0; transform: translate(var(--mx, 70%), var(--my, 80%)); transition: opacity .5s; z-index: -1; pointer-events: none; }
.glow:hover::after { opacity: 1; }
@keyframes liftIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* questions: an accordion on the tree's spine; the open question lights its node and segment */
.qa { position: relative; max-width: 940px; }
.qa::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--line); transform-origin: top; transition: transform 1.2s var(--ease); }
.q { position: relative; padding-left: 44px; }
.q::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); z-index: 1; }
.q[open]::before { transform: scaleY(1); }
.q + .q > summary { border-top: 1px solid var(--line); }
.q summary { position: relative; list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px; gap: 16px; align-items: center; padding: clamp(20px, 2.4vw, 28px) 0; cursor: pointer; }
.q summary::-webkit-details-marker { display: none; }
.q summary i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.q summary h3 { font-size: clamp(20px, 2.2vw, 30px); transition: transform .5s var(--ease); }
.q summary:hover h3 { transform: translateX(6px); }
.q-dot { position: absolute; left: -40px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--ink); border: 2px solid var(--line); z-index: 2; transition: transform .4s var(--ease), background .3s, border-color .3s; }
.q summary:hover .q-dot { border-color: var(--paper); transform: scale(1.2); }
.q[open] .q-dot { background: var(--red); border-color: var(--red); }
.q[open] .q-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--red); animation: ping 2.4s var(--ease) infinite; }
.q-x { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); transition: transform .5s var(--ease), background .3s, border-color .3s; }
.q-x::before, .q-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 2px; }
.q-x::after { transform: rotate(90deg); }
.q summary:hover .q-x { border-color: var(--paper); }
.q[open] .q-x { transform: rotate(135deg); background: var(--red-deep); border-color: var(--red-deep); }
.q-a { padding: 0 60px clamp(22px, 2.6vw, 30px) 44px; }
.q-a p { color: var(--muted); font-size: 17px; max-width: 64ch; }
.q[open] .q-a { animation: slideIn .6s var(--ease) both; }
.q::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.q[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }
@media (max-width: 560px) { .q summary { grid-template-columns: minmax(0, 1fr) 40px; } .q summary i { display: none; } .q-x { width: 40px; height: 40px; } .q-a { padding: 0 0 22px; } }

/* commitments: a bento; each fact with an instrument acts out what it promises */
.cmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cm { border-radius: 20px; background: var(--ink-2); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 22px; min-height: 280px; transition: background .4s, transform .6s var(--ease); }
.cm:hover { background: var(--ink-3); transform: translateY(-4px); }
.cm.w2 { grid-column: span 2; }
.cm.w3 { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "k viz" "t viz"; column-gap: clamp(24px, 4vw, 64px); align-items: center; min-height: 0; }
.cm.w3 .cm-k { grid-area: k; align-self: end; } .cm.w3 .cv { grid-area: viz; } .cm.w3 .cm-t { grid-area: t; align-self: start; }
.cm-k { display: flex; gap: 12px; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cm-k i { font-style: normal; color: var(--red); font-variant-numeric: tabular-nums; }
.cm-t { margin-top: auto; display: grid; gap: 10px; }
.cm-t h3 { font-size: clamp(22px, 2vw, 30px); }
.cm-t p { color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 52ch; }
@media (max-width: 1000px) { .cmts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm.w3 { grid-column: span 2; } }
@media (max-width: 700px) { .cmts { grid-template-columns: minmax(0, 1fr); } .cm.w2, .cm.w3 { grid-column: auto; } .cm.w3 { display: flex; align-items: stretch; } .cm.w3 .cm-k { align-self: auto; } .cm { min-height: 0; } }
/* ownership: a commit line; the first commit is already yours, a signal runs down it on hover */
.own { display: grid; gap: 12px; }
.o-trk { position: relative; height: 28px; display: flex; justify-content: space-between; align-items: center; }
.o-trk s { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); transform-origin: left; transition: transform 1s var(--ease) .3s; }
.o-trk i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); border: 2px solid var(--muted); transition: transform .5s var(--ease) calc(.5s + var(--n) * 110ms); }
.o-trk i:first-of-type { width: 24px; height: 24px; background: var(--red); border-color: var(--red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 22%, transparent); }
.o-trk b { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; opacity: 0; }
.o-trk b::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.cm:hover .o-trk b { animation: travel 1.8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes travel { 0% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; transform: translateX(calc(100% - 8px)); } 100% { opacity: 0; transform: translateX(calc(100% - 8px)); } }
.o-lab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.o-lab span:first-child { color: var(--red); }
/* security: access per environment, granted for the work, revoked when it ends (hover) */
.env { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.env li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--ink); font-size: 14px; font-weight: 600; }
.env em { display: grid; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: right; }
.env em u { grid-area: 1 / 1; text-decoration: none; transition: opacity .3s calc(var(--n) * 90ms); }
.env em u:first-child { color: var(--red); }
.env em u + u { color: var(--muted); opacity: 0; }
.tg { position: relative; width: 36px; height: 20px; border-radius: 99px; background: var(--red-deep); transition: background .3s calc(var(--n) * 90ms); }
.tg i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); transform: translateX(16px); transition: transform .45s var(--ease) calc(var(--n) * 90ms); }
.cm:hover .tg { background: var(--line); }
.cm:hover .tg i { transform: none; }
.cm:hover .env em u:first-child { opacity: 0; }
.cm:hover .env em u + u { opacity: 1; }
@keyframes tgOn { from { transform: none; } to { transform: translateX(16px); } }
/* accessibility: a type sample and a stamp that presses on */
.a11y { display: flex; align-items: center; gap: 22px; }
.aa { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(56px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.stamp { position: relative; width: 88px; height: 88px; display: grid; place-content: center; text-align: center; color: var(--red); transform: rotate(-8deg); transition: transform .5s var(--ease); }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp circle { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) .5s; }
.stamp b { font-size: 24px; font-weight: 800; line-height: 1; }
.stamp small { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.cm:hover .stamp { transform: rotate(0) scale(1.06); }
@keyframes stampIn { from { opacity: 0; transform: rotate(-20deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg); } }
/* people: three named seats; each gets its tag */
.ppl { display: flex; gap: 12px; }
.ppl span { display: grid; justify-items: center; gap: 8px; padding: 14px 12px 10px; border-radius: 14px; background: var(--ink); transition: transform .5s var(--ease) calc(var(--n) * 60ms); }
.ppl svg { width: 36px; height: 36px; }
.ppl circle, .ppl path { fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; transition: stroke .3s calc(var(--n) * 60ms); }
.ppl b { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--paper); border-radius: 99px; padding: 2px 8px; transform-origin: center; }
.cm:hover .ppl span { transform: translateY(-4px); }
.cm:hover .ppl circle, .cm:hover .ppl path { stroke: var(--paper); }
@keyframes tagIn { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
/* response times: severity bands; a critical incident pings on hover */
.sev { display: grid; gap: 10px; }
.sev span { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; font-weight: 600; }
.sev em { font-style: normal; }
.sev s { position: relative; height: 8px; border-radius: 99px; background: var(--ink-3); }
.sev s i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--red-deep); width: calc(38% + var(--n) * 28%); transform-origin: left; transition: transform .9s var(--ease) calc(var(--n) * 120ms + 400ms); }
.sev span:first-child s i { background: var(--red); }
.sev span:first-child s i::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--red); opacity: 0; }
.cm:hover .sev span:first-child s i::after { animation: ping 1.6s var(--ease) infinite; }
.sev small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* documentation: three sheets fan out from one stack */
.docs { position: relative; height: 200px; }
.docs span { --x: 0px; --r: 0deg; position: absolute; left: 50%; top: 16px; width: 180px; height: 160px; margin-left: -90px; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--line); padding: 14px; display: grid; align-content: start; gap: 9px; transform-origin: 50% 130%; transform: translateX(var(--x)) rotate(var(--r)); transition: transform .8s var(--ease) calc(var(--n) * 70ms); }
.docs span:nth-child(1) { --x: -150px; --r: -9deg; }
.docs span:nth-child(2) { z-index: 1; background: var(--ink-2); }
.docs span:nth-child(3) { --x: 150px; --r: 9deg; }
.cm:hover .docs span:nth-child(1) { --x: -175px; --r: -13deg; }
.cm:hover .docs span:nth-child(2) { transform: translateY(-10px); }
.cm:hover .docs span:nth-child(3) { --x: 175px; --r: 13deg; }
.docs b { font-size: 13px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.docs i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.docs i:nth-of-type(2) { width: 80%; } .docs i:nth-of-type(3) { width: 58%; }
@media (max-width: 1000px) { .docs span { width: 150px; margin-left: -75px; } .docs span:nth-child(1), .cm:hover .docs span:nth-child(1) { --x: -100px; } .docs span:nth-child(3), .cm:hover .docs span:nth-child(3) { --x: 100px; } }
@media (max-width: 700px) { .docs span { width: 130px; margin-left: -65px; } .docs span:nth-child(1), .cm:hover .docs span:nth-child(1) { --x: -78px; } .docs span:nth-child(3), .cm:hover .docs span:nth-child(3) { --x: 78px; } }

/* engagements: five cards; the assessment is the way in, so it leads in red */
.eng { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); gap: 14px; }
.ec { border-radius: 20px; background: var(--ink-2); padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 14px; min-height: 240px; transition: background .4s, transform .6s var(--ease); }
.ec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.ec:hover { background: var(--ink-3); transform: translateY(-4px); }
.ec:hover::before { transform: scaleX(1); }
.ec-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.ec-top i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.ec-top em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--paper); color: var(--ink); padding: 5px 12px; border-radius: 99px; }
.ec h3 { font-size: clamp(22px, 2vw, 28px); }
.ec-shape { align-self: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 5px 12px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.ec-get { margin-top: auto; display: grid; gap: 4px; font-size: 16px; line-height: 1.45; }
.ec-get span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ec.start { grid-row: span 2; background: var(--red-deep); }
.ec.start:hover { background: var(--red-deep); }
.ec.start::before { background: var(--paper); }
.ec.start::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--paper) 14%, transparent), transparent); }
.ec.start .ec-top i, .ec.start .ec-get span { color: var(--paper); }
.ec.start h3 { font-size: clamp(30px, 3.2vw, 48px); max-width: 10ch; }
.ec.start .ec-shape { border-color: color-mix(in srgb, var(--paper) 55%, transparent); }
.ec.start .ec-get { font-size: 18px; margin-top: 12px; }
.ec-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .3s var(--ease); }
.ec-go:hover { transform: translateY(-2px); }
.ec-go .arr { transition: transform .3s var(--ease); }
.ec-go:hover .arr { transform: translateX(4px); }
.ec-go:focus-visible { outline-color: var(--paper); }
@media (max-width: 1000px) { .eng { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ec.start { grid-column: span 2; grid-row: auto; } .ec.start h3 { max-width: none; } }
@media (max-width: 640px) { .eng { grid-template-columns: minmax(0, 1fr); } .ec.start { grid-column: auto; } .ec { min-height: 0; } }

/* case study: what we did, as numbered nodes on a spine */
.did { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: did; }
.did::before { content: ""; position: absolute; left: 15px; top: 20px; bottom: 20px; width: 2px; background: var(--line); transform-origin: top; transition: transform 1.2s var(--ease) .2s; }
.did li { position: relative; counter-increment: did; padding: 14px 0 14px 54px; font-size: 17px; }
.did li::before { content: counter(did, decimal-leading-zero); position: absolute; left: 0; top: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; transition: background .3s, border-color .3s, color .3s, transform .4s var(--ease); }
.did li:hover::before { background: var(--red-deep); border-color: var(--red-deep); color: var(--paper); transform: scale(1.1); }

/* case study: before and after; an arrow draws across each row, then the result arrives */
.pairs { margin: 0; display: grid; gap: 10px; }
.pairs .pr { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.2fr); gap: 14px; align-items: center; padding: 18px clamp(16px, 2.4vw, 28px); border-radius: 16px; background: var(--ink-2); transition: background .3s; }
.pairs .pr:not(.ph):hover { background: var(--ink-3); }
.pairs .ph { background: none; padding-block: 0 2px; }
.pairs .ph span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pairs .ph span:last-child { color: var(--red); }
.pairs .from { color: var(--muted); }
.pairs .to { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.25; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 140ms + 700ms); }
.pairs .ar { position: relative; height: 2px; font-size: 0; background: var(--red); transform-origin: left; transition: transform .6s var(--ease) calc(var(--i) * 140ms + 350ms); }
.pairs .ar::after { content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg); }
.pairs .ph .ar, .pairs .ph span[aria-hidden] { background: none; }
@media (max-width: 560px) { .pairs .pr { grid-template-columns: minmax(0, 1fr); gap: 6px; } .pairs .ar, .pairs .ph span:last-child, .pairs .ph span[aria-hidden] { display: none; } .pairs .to::before { content: "→ "; color: var(--red); } }

/* limits: each line gets a "no" sign that draws itself */
.wont { list-style: none; margin: 0; padding: 0; max-width: 1000px; }
.wont li { display: grid; grid-template-columns: clamp(34px, 3.4vw, 48px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: center; padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(21px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.wont li:first-child { border-top: 1px solid var(--line); }
.no { display: block; width: 100%; height: auto; overflow: visible; transition: transform .6s var(--ease); }
.no circle, .no path { fill: none; stroke: var(--red); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.no circle { transition: stroke-dashoffset .7s var(--ease) calc(var(--i) * 140ms + 250ms); }
.no path { transition: stroke-dashoffset .4s var(--ease) calc(var(--i) * 140ms + 750ms); }
.wont li span { transition: transform .5s var(--ease); }
.wont li:hover .no { transform: rotate(90deg); }
.wont li:hover span { transform: translateX(8px); }

/* meta row and contact details: small staggers */
.meta div, .direct div { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 90ms + 150ms); }
.kdots span::before { transition: transform .4s var(--ease) .6s; }
.direct div:hover dt { color: var(--red); }
.direct dt { transition: color .3s; }

/* entrance states, only when motion is welcome; everything is visible without JS */
@media (prefers-reduced-motion: no-preference) {
  .js .qa:not(.in)::before, .js .rv:not(.in) .did::before { transform: scaleY(0); }
  .js .qa:not(.in) .q, .js .cmts:not(.in) .cm, .js .eng:not(.in) .ec, .js .rv:not(.in) .did li, .js .wont:not(.in) li span { opacity: 0; }
  .qa.in .q { animation: slideIn .7s var(--ease) backwards; animation-delay: calc(var(--i) * 90ms + 200ms); }
  .cmts.in .cm, .eng.in .ec { animation: liftIn .8s var(--ease) backwards; animation-delay: calc(var(--i) * 90ms); }
  .rv.in .did li { animation: slideIn .6s var(--ease) backwards; animation-delay: calc(var(--i) * 110ms + 300ms); }
  .wont.in li span { animation: slideIn .6s var(--ease) backwards; animation-delay: calc(var(--i) * 140ms + 100ms); }
  .js .cmts:not(.in) .o-trk s { transform: scaleX(0); }
  .js .cmts:not(.in) .o-trk i { transform: scale(0); }
  .cmts.in .tg i { animation: tgOn .5s var(--ease) backwards; animation-delay: calc(var(--n) * 120ms + 700ms); }
  .js .cmts:not(.in) .stamp circle { stroke-dashoffset: 1; }
  .cmts.in .stamp { animation: stampIn .6s var(--ease) backwards; animation-delay: 1s; }
  .js .cmts:not(.in) .docs span { transform: none; }
  .js .cmts:not(.in) .sev s i { transform: scaleX(0); }
  .cmts.in .ppl b { animation: tagIn .5s var(--ease) backwards; animation-delay: calc(var(--n) * 140ms + 600ms); }
  .js .rv:not(.in) .pairs .ar { transform: scaleX(0); }
  .js .rv:not(.in) .pairs .to { opacity: 0; transform: translateX(-10px); }
  .js .wont:not(.in) .no circle, .js .wont:not(.in) .no path { stroke-dashoffset: 1; }
  .js .rv:not(.in) .meta div, .js .meta.rv:not(.in) div, .js .rv:not(.in) .direct div { opacity: 0; transform: translateY(10px); }
  .js .meta.rv:not(.in) .kdots span::before { transform: scale(0); }
}
/* Pause motion: entrance animations finish at once so nothing stays hidden */
body.still .in, body.still .in * { animation: none !important; }