/* TessentialZ: dark Swiss-grid theme. Hairline lines, square corners, numbered sections, brand green (#185434)
   for actions and a brighter green (#8fd1a8) for highlights. Project colours appear only inside the work. Outfit throughout. */
:root {
  --bg: #0c0d0f;
  --bg-2: #111316;
  --paper: #f2f0ea;
  --text: rgba(242,240,234,.74);
  --muted: rgba(242,240,234,.54);
  --hair: rgba(242,240,234,.18);
  --hair-strong: rgba(242,240,234,.38);
  --green: #185434;
  --green-deep: #123524;
  --green-bright: #8fd1a8;
  --live: #1f9d55; --launching: #d9822b; --building: #3b6fd8;
  --max: 1480px;
  --gutter: clamp(20px, 3vw, 40px);
  --reading: 720px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { color: var(--paper); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 96px); line-height: .96; letter-spacing: -0.045em; }
h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-size: 22px; letter-spacing: -0.02em; }
p { margin: 0 0 14px; }
::selection { background: var(--green-bright); color: var(--bg); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--green-bright); flex: none; }
.lede { font-size: clamp(18px, 1.7vw, 21px); color: var(--text); max-width: 640px; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; background: var(--paper); color: var(--bg); padding: 8px 12px; z-index: 60; }
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 3px; }

/* film grain over everything */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 45; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* buttons: square, bordered */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; cursor: pointer; }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: #1e6a42; border-color: #1e6a42; }
.btn-solid, .btn-light { background: var(--paper); color: var(--bg); border-color: var(--paper); }
.btn-solid:hover { background: var(--green-bright); border-color: var(--green-bright); }
.btn-light:hover { background: var(--bg); color: #fff; border-color: var(--bg); }
.btn-ghost, .btn-line { background: transparent; color: var(--paper); border-color: var(--hair-strong); }
.btn-ghost:hover, .btn-line:hover { border-color: var(--paper); background: rgba(242,240,234,.06); }
.arrow::after { content: "→"; display: inline-block; transition: transform .15s; }
.btn:hover .arrow::after, a:hover > .arrow::after, a:hover .more .arrow::after { transform: translateX(3px); }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(12,13,15,.82); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
.brand img { height: 30px; width: auto; }
.brand .z { color: var(--green-bright); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: rgba(242,240,234,.72); text-decoration: none; font-weight: 500; font-size: 16px; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav .btn { padding: 11px 18px; font-size: 15px; color: #fff; }
.menu-btn { display: none; background: none; border: 1px solid var(--hair-strong); padding: 9px 10px; cursor: pointer; }
.menu-btn span { display: block; width: 20px; height: 2px; background: var(--paper); margin: 4px 0; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav { position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--hair);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 22px; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--hair); font-size: 18px; }
  .nav .btn { margin-top: 16px; justify-content: center; border-bottom: 1px solid var(--green); }
}

/* sections */
section { scroll-margin-top: 80px; }
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section.tight { padding-top: 0; }
.sec-head { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; padding-top: 22px; border-top: 1px solid var(--hair); margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head .no { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.sec-head .no b { color: var(--paper); margin-right: 10px; }
.sec-head h2 { max-width: 900px; }
.sec-head.with-art { grid-template-columns: 220px 1fr minmax(260px, 400px); align-items: center; }
.sec-head.with-art .art { margin: -40px 0 -50px; }
@media (max-width: 1100px) { .sec-head.with-art { grid-template-columns: 220px 1fr; } .sec-head.with-art .art { grid-column: 1 / -1; max-width: 420px; margin: 0 auto -20px; width: 100%; } }
@media (max-width: 800px) { .sec-head, .sec-head.with-art { grid-template-columns: 1fr; gap: 12px; } }

/* hero backgrounds: blueprint grid fading out + green glow */
.gfx-hero { position: relative; isolation: isolate; overflow: hidden; }
.gfx-hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(rgba(242,240,234,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(242,240,234,.055) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 78% 18%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 78% 18%, #000 20%, transparent 75%); }
.gfx-hero::after { content: ""; position: absolute; z-index: -1; width: 900px; height: 700px; right: -220px; top: -260px; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow, rgba(52,160,100,.28)), transparent); filter: blur(10px); }
.gfx-art { position: absolute; z-index: -1; pointer-events: none;
  right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); top: 110px; width: min(600px, 40vw); }
.gfx-hero h1 { max-width: 58%; }
@media (max-width: 1100px) { .gfx-art { opacity: .16; width: 80vw; top: 50px; } .gfx-hero h1 { max-width: none; } }

/* shared svg graphic language */
.gfx .wire { fill: none; stroke: rgba(242,240,234,.22); stroke-width: 1; }
.gfx .ring { fill: none; stroke: rgba(242,240,234,.16); stroke-width: 1; }
.gfx .ring.dash { stroke-dasharray: 2 6; stroke: rgba(242,240,234,.28); }
.gfx .flow { fill: none; stroke: var(--green-bright); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 10 190; animation: flow 4.5s linear infinite; }
.gfx .flow.b { stroke: #6f8cff; animation-duration: 5.5s; } .gfx .flow.c { stroke: #f0a24a; animation-duration: 6.5s; } .gfx .flow.d { stroke: #e0609a; animation-duration: 5s; }
.gfx .node { fill: var(--bg); stroke: rgba(242,240,234,.5); stroke-width: 1; }
.gfx .hub { fill: var(--green); stroke: var(--green-bright); stroke-width: 1.2; }
.gfx .lbl { fill: rgba(242,240,234,.55); font: 600 10px/1 "Outfit", sans-serif; letter-spacing: .12em; }
.gfx .hub-lbl { fill: #fff; font: 700 11px/1 "Outfit", sans-serif; letter-spacing: .14em; }
.gfx .blink { animation: blink 2.4s ease-in-out infinite; }
.gfx .spin { transform-box: view-box; transform-origin: 50% 50%; animation: spin 60s linear infinite; }
.gfx .spin.rev { animation-direction: reverse; animation-duration: 90s; }
.gfx .spin .keep { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite reverse; }
@keyframes flow { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.55); } 70% { box-shadow: 0 0 0 8px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }

/* homepage hero */
.hero { padding: clamp(56px, 8vw, 96px) 0 0; }
.hero h1 { margin: 26px 0 30px; }
.hero h1 em { font-style: normal; color: var(--green-bright); }
.hero .kicker::before { animation: pulse 2s infinite; }
.hero-foot { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end; padding-bottom: 56px; }
.hero-foot .lede { margin: 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-foot .actions { justify-content: flex-end; }
@media (max-width: 800px) { .hero-foot { grid-template-columns: 1fr; } .hero-foot .actions { justify-content: flex-start; } }

/* counters strip */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.counter { border-right: 1px solid var(--hair); padding: 22px 20px; }
.counter:last-child { border-right: 0; }
.counter b { display: block; font-size: clamp(36px, 4vw, 48px); color: var(--paper); line-height: 1; letter-spacing: -0.03em; font-weight: 600; }
.counter span { font-size: 14.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-top: 10px; }
@media (max-width: 760px) { .counters { grid-template-columns: repeat(2, 1fr); } .counter:nth-child(2) { border-right: 0; } .counter:nth-child(-n+2) { border-bottom: 1px solid var(--hair); } }
.dot { width: 8px; height: 8px; display: inline-block; flex: none; }
.dot.live { background: var(--live); animation: pulse 2s infinite; } .dot.launching { background: var(--launching); } .dot.building { background: var(--building); }

/* screenshot strip under the homepage hero */
.strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.strip figure { margin: 0; border-right: 1px solid var(--hair); padding: clamp(16px, 2vw, 26px); position: relative; overflow: hidden; height: clamp(220px, 24vw, 330px); }
.strip figure img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border: 1px solid var(--hair-strong); }
.strip figcaption { position: absolute; left: clamp(16px, 2vw, 26px); bottom: clamp(16px, 2vw, 26px); background: var(--c); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 12px; }
@media (max-width: 900px) { .strip { grid-template-columns: 1fr 1fr; } .strip figure:nth-child(3) { display: none; } }
@media (max-width: 560px) { .strip { grid-template-columns: 1fr; } .strip figure:nth-child(2) { display: none; } }

/* ticker */
.ticker { border-bottom: 1px solid var(--hair); overflow: hidden; padding: 20px 0; position: relative; }
.ticker.top-line { border-top: 1px solid var(--hair); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.ticker-track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker-track { align-items: center; }
.ticker-track span { font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; color: var(--paper); white-space: nowrap; padding: 0 clamp(22px, 2.6vw, 36px); }
.ticker-track span:nth-of-type(2n) { color: var(--green-bright); }
/* separator: a short circuit wire with a green node in the middle that softly pulses */
.sep { position: relative; flex: none; width: clamp(36px, 4vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, rgba(143,209,168,.6) 30%, rgba(143,209,168,.6) 70%, transparent); }
.sep::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--green-bright); transform: translate(-50%, -50%);
  animation: sep-pulse 2.4s ease-in-out infinite; }
.sep:nth-of-type(2n)::after { animation-delay: -1.2s; }
@keyframes sep-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(143,209,168,.55); } 50% { box-shadow: 0 0 0 6px rgba(143,209,168,0), 0 0 14px rgba(143,209,168,.6); } }
@keyframes tick { to { transform: translateX(-50%); } }

/* work grid (bento tiles) */
.glow-work { position: relative; isolation: isolate; overflow: clip; }
.glow-work::before { content: ""; position: absolute; z-index: -1; left: -10%; top: 10%; width: 60%; height: 60%; background: radial-gradient(closest-side, rgba(77,92,224,.14), transparent); pointer-events: none; }
.glow-work::after { content: ""; position: absolute; z-index: -1; right: -10%; bottom: 0; width: 55%; height: 55%; background: radial-gradient(closest-side, rgba(204,61,120,.1), transparent); pointer-events: none; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 28px; }
.filters button { font: inherit; font-size: 15px; font-weight: 500; border: 1px solid var(--hair-strong); background: transparent; color: var(--paper); padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.filters button:hover { border-color: var(--paper); }
.filters button[aria-pressed="true"] { background: var(--paper); color: var(--bg); border-color: var(--paper); }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); counter-reset: t; }
.tile { grid-column: span 3; position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; min-height: 480px;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); isolation: isolate; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(155deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--bg))); opacity: 0; transition: opacity .35s; }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile.big { grid-column: span 4; }
.tile.small { grid-column: span 2; }
.tile.wide { grid-column: span 6; min-height: 0; }
.tile .top { padding: 24px 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair-strong); padding: 5px 12px 5px 10px; font-size: 13px; font-weight: 600; color: var(--paper); }
.kind { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,240,234,.7); }
.tile h3 { font-size: 26px; line-height: 1.15; margin: 14px 24px 8px; }
.tile.big h3 { font-size: clamp(26px, 2.4vw, 34px); max-width: 620px; }
.tile h3::before { counter-increment: t; content: counter(t, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: color-mix(in srgb, var(--accent) 55%, #fff); margin-bottom: 10px; }
.tile:hover h3::before { color: #fff; }
.tile p { margin: 0 24px; font-size: 15.5px; }
.tile:hover p { color: rgba(255,255,255,.88); }
.tile .shot { margin: 26px 24px 24px; flex: 1; position: relative; min-height: 190px; }
.tile .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; border: 1px solid rgba(242,240,234,.3); transition: transform .4s; }
.tile:hover .shot img { transform: translateY(-4px); }
.metric { position: absolute; right: -1px; bottom: -1px; background: var(--accent); padding: 12px 16px; max-width: 240px; }
.metric b { display: block; font-size: 28px; line-height: 1; color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.metric span { display: block; font-size: 12.5px; color: rgba(255,255,255,.88); margin-top: 4px; line-height: 1.35; }
.progress { margin: 16px 24px 0; }
.progress .bar { height: 6px; border: 1px solid rgba(242,240,234,.4); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 50%, #fff); }
.progress small { display: block; margin-top: 6px; font-size: 13px; }
.tile.all { padding: 30px 24px; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tile.all strong { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; color: var(--paper); }
.tile.all .kind { font-size: 13.5px; }
.tile[hidden] { display: none; }
@media (max-width: 1100px) { .tile, .tile.big, .tile.small { grid-column: span 3; } .tile.big h3 { font-size: 26px; } }
@media (max-width: 700px) { .tile, .tile.big, .tile.small { grid-column: span 6; min-height: 440px; } .tile.all { min-height: 0; } }

/* numbered cells: services and process */
.cells { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); counter-reset: c; }
.cell { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 30px 28px 34px; position: relative; transition: background .3s; min-height: 320px; display: flex; flex-direction: column; }
.cell::before { counter-increment: c; content: counter(c, decimal-leading-zero); font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.cell h3 { font-size: 26px; margin: 0 0 12px; padding-top: 70px; }
.cell p { font-size: 16px; margin: 0; }
.services .cell:hover { background: var(--green); }
.services .cell:hover::before, .services .cell:hover p { color: rgba(255,255,255,.88); }
.cell .ico { position: absolute; right: 26px; top: 26px; width: 34px; height: 34px; border: 1px solid var(--hair-strong); display: grid; place-items: center; }
.cell .ico svg { width: 18px; height: 18px; stroke: var(--paper); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.process .cell::before { font-size: clamp(56px, 6vw, 88px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--hair-strong); letter-spacing: -0.04em; font-weight: 600; transition: color .3s; }
.process .cell:hover::before { color: var(--green-bright); -webkit-text-stroke: 0; }
.process .cell h3 { padding-top: 40px; }
@media (max-width: 1100px) { .cells { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cells { grid-template-columns: 1fr; } .cell { min-height: 0; } .cell h3 { padding-top: 30px; } }

/* about */
.about { display: grid; grid-template-columns: 1.1fr 1fr; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.about > div { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: clamp(26px, 3vw, 40px); }
.about .lede { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--paper); max-width: none; }
.about .pt { padding: 24px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 48px 1fr; }
.about .pt:first-child { padding-top: 0; } .about .pt:last-child { border-bottom: 0; padding-bottom: 0; }
.about .pt span { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--green-bright); padding-top: 4px; }
.about .pt h3 { font-size: 20px; margin: 0 0 6px; }
.about .pt p { margin: 0; font-size: 16px; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

/* call to action band */
.cta-band { background: var(--green); display: grid; grid-template-columns: 1.5fr 1fr; position: relative; overflow: hidden; }
.cta-band > div { padding: clamp(36px, 5vw, 64px) clamp(26px, 4vw, 56px); position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(32px, 4.6vw, 68px); line-height: .98; letter-spacing: -0.04em; }
.cta-band p { color: rgba(255,255,255,.84); font-size: 18px; margin: 20px 0 0; max-width: 560px; }
.cta-band .actions { border-left: 1px solid rgba(255,255,255,.22); flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 16px; }
.cta-band .mail { color: #fff; font-size: 18px; font-weight: 500; text-decoration: none; }
.cta-band::after { content: ""; position: absolute; right: -40px; top: -60px; width: 360px; height: 340px; background: url("/assets/brand/mark-white.png") center/contain no-repeat; opacity: .07; }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; } .cta-band .actions { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); } }

/* footer */
.site-footer { padding: 0 0 40px; color: var(--muted); font-size: 15px; }
.site-footer .top { display: flex; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; padding: 40px 0; border-bottom: 1px solid var(--hair); align-items: center; }
.site-footer nav { display: flex; gap: 12px 28px; flex-wrap: wrap; }
.site-footer nav a { color: var(--paper); text-decoration: none; }
.site-footer nav a:hover { color: var(--green-bright); }
.site-footer .legal { padding-top: 22px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* case studies index hero */
.board-hero { padding: clamp(56px, 7vw, 88px) 0 clamp(36px, 4vw, 48px); }
.board-hero h1 { font-size: clamp(42px, 5.8vw, 86px); margin: 18px 0 18px; }
.board-hero .lede { margin-bottom: 40px; }

/* case study article */
.article-hero { padding: clamp(48px, 6vw, 72px) 0 0; --glow: color-mix(in srgb, var(--accent, #34a064) 40%, transparent); }
.article-hero .crumbs { font-size: 15px; margin-bottom: 26px; }
.article-hero .crumbs a { text-decoration: none; color: var(--muted); }
.article-hero .crumbs a:hover { color: var(--paper); }
.article-hero h1 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.04em; margin: 18px 0 20px; }
.article-hero .lede { max-width: 700px; }
.article-hero .actions { margin-top: 28px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); border: 1px solid var(--hair-strong); padding: 4px 10px; }
.tag:first-child { background: var(--accent, var(--green)); border-color: var(--accent, var(--green)); color: #fff; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: clamp(40px, 5vw, 56px); }
.facts div { padding: 20px 22px; font-size: 16px; color: var(--paper); border-right: 1px solid var(--hair); }
.facts div:last-child { border-right: 0; }
.facts b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } .facts div:nth-child(2) { border-right: 0; } .facts div:nth-child(-n+2) { border-bottom: 1px solid var(--hair); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } .facts div { border-right: 0; border-bottom: 1px solid var(--hair); } .facts div:last-child { border-bottom: 0; } }
.article { display: grid; grid-template-columns: 220px minmax(0, var(--reading)); gap: 72px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(72px, 9vw, 110px); counter-reset: h; }
.article aside { position: sticky; top: 100px; align-self: start; font-size: 15px; }
.article aside a { display: block; color: var(--muted); text-decoration: none; padding: 7px 0 7px 14px; border-left: 1px solid var(--hair); transition: color .15s, border-color .15s; }
.article aside a:hover, .article aside a.on { color: var(--paper); border-left-color: var(--green-bright); }
.article h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 64px 0 18px; padding-top: 18px; border-top: 1px solid var(--hair); }
.article h2::before { counter-increment: h; content: counter(h, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--accent, var(--green-bright)); margin-bottom: 12px; }
.article h2:first-child { margin-top: 0; }
.article p { color: var(--text); }
.article ul, .article ol { padding-left: 22px; margin: 0 0 18px; }
.article li { margin-bottom: 10px; }
.article li::marker { color: var(--accent, var(--green-bright)); }
.article li b, .article p b { color: var(--paper); font-weight: 600; }
.article figure { margin: 36px 0 40px; }
.article figure img { border: 1px solid var(--hair-strong); }
.article figcaption { font-size: 15px; color: var(--muted); margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--accent, var(--green-bright)); }
.article code { font-size: .88em; background: rgba(242,240,234,.07); border: 1px solid var(--hair); padding: 1px 6px; color: var(--paper); }
.callout { background: rgba(242,240,234,.04); border: 1px solid var(--hair); border-left: 3px solid var(--accent, var(--green-bright)); padding: 20px 24px; margin: 24px 0; color: var(--paper); }
.callout .muted { color: var(--muted); }
@media (max-width: 1000px) { .article { grid-template-columns: 1fr; gap: 0; } .article aside { display: none; } }

/* step diagram inside articles */
.flow { list-style: none; counter-reset: flow; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 !important; margin: 30px 0 34px !important;
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.flow li { counter-increment: flow; position: relative; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 16px 16px 18px; margin: 0; font-size: 15px; line-height: 1.45; }
.flow li::before { content: counter(flow, decimal-leading-zero); display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--accent, var(--green-bright)); margin-bottom: 10px; }
.flow li b { display: block; margin-bottom: 4px; color: var(--paper); }
@media (max-width: 760px) { .flow { grid-auto-flow: row; } }

/* 404 */
.lost { min-height: calc(100vh - 72px); display: flex; align-items: center; padding: 60px 0; }
.lost > .wrap { width: 100%; }
.lost .big { font-size: clamp(110px, 22vw, 300px); line-height: .8; letter-spacing: -0.06em; font-weight: 600; color: transparent; -webkit-text-stroke: 1px var(--hair-strong); }

/* reveal on scroll (content stays visible without JS) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; }
  .gfx .flow, .gfx .blink, .gfx .spin, .gfx .spin .keep, .ticker-track, .sep::after, .dot.live, .hero .kicker::before { animation: none !important; }
}