:root {
  --ink: #101411;
  --ink-soft: #525a53;
  --paper: #f1f0ea;
  --paper-deep: #e7e7df;
  --line: rgba(16, 20, 17, 0.16);
  --acid: #d7ff3f;
  --mint: #a8c7b3;
  --white: #fbfbf6;
  --radius: 20px;
  --headline: "Mozilla Headline", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--acid);
  color: var(--ink);
}
.skip-link:focus { top: 16px; }

.topbar {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 36px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--white);
  mix-blend-mode: difference;
}
.monogram {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  letter-spacing: .06em;
}
.topbar nav { display: flex; gap: 28px; font-size: 12px; }
.topbar nav a, .contact-link { opacity: .78; transition: opacity .2s ease; }
.topbar nav a:hover, .contact-link:hover { opacity: 1; }
.contact-link { justify-self: end; font-size: 12px; }

.section-shell { padding-left: clamp(20px, 5vw, 78px); padding-right: clamp(20px, 5vw, 78px); }
.hero {
  min-height: 100svh;
  padding-top: clamp(124px, 16vh, 190px);
  padding-bottom: 28px;
  background:
    radial-gradient(circle at 82% 16%, rgba(215,255,63,.13), transparent 24%),
    linear-gradient(135deg, #101411 0%, #18211b 60%, #0d110e 100%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.hero-grid {
  max-width: 1180px;
}
.eyebrow, .section-index, .detail-kicker, .dialog-index {
  margin: 0 0 24px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.68); }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(215,255,63,.1);
}
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { font-family: var(--headline); }
h1 {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(58px, 8.2vw, 132px);
  line-height: .88;
  font-weight: 470;
  letter-spacing: -.065em;
}
h1 em { color: var(--acid); font-family: var(--headline); font-weight: 400; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.statement-visual { display:block; }
.statement-visual > span { display:block; }
.statement-visual .statement-lead { display:block;white-space:nowrap; }
.action-text { display:inline-block;width:6.2em;margin-left:.12em;color:var(--acid);white-space:nowrap;vertical-align:baseline;opacity:1;transition:opacity .24s ease; }
.action-text.is-changing { opacity:0; }
.hero-deck {
  max-width: 720px;
  margin: 38px 0 0;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.52;
  color: rgba(255,255,255,.68);
}
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 42px; }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 13px;
  transition: transform .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--acid); color: var(--ink); }
.text-button, .case-link {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.hero-foot {
  margin-top: 90px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  letter-spacing: .04em;
}
.hero-foot p { margin: 0; }

.leadership { padding-top: clamp(100px, 12vw, 190px); padding-bottom: clamp(100px, 12vw, 190px); }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 60px;
  align-items: end;
}
.section-index { color: #6b746c; }
.section-heading h2, .work-footer h2, .dialog-inner h2 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(42px, 5.2vw, 82px);
  line-height: .98;
  letter-spacing: -.052em;
  font-weight: 500;
}
.section-heading > p, .work-heading > p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.system-layout {
  margin-top: clamp(70px, 9vw, 138px);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 620px;
  border-top: 1px solid var(--line);
}
.system-visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-right: 1px solid var(--line);
}
.orbit { position: absolute; inset: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: min(470px, 75%); aspect-ratio: 1; }
.orbit-two { width: min(670px, 105%); aspect-ratio: 1; border-style: dashed; opacity: .55; animation: orbit 28s linear infinite; }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.system-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 184px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  box-shadow: 0 18px 45px rgba(16,20,17,.18);
}
.system-core span { color: rgba(255,255,255,.48); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.system-core strong { font-family: var(--headline); font-size: 25px; line-height: 1; font-weight: 400; }
.system-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: .25s ease;
}
.system-node span { font-size: 9px; opacity: .5; }
.system-node:hover, .system-node.is-active { background: var(--acid); border-color: var(--acid); transform: scale(1.04); }
.node-direction { left: 15%; top: 19%; }
.node-systems { right: 9%; top: 45%; }
.node-people { left: 16%; bottom: 16%; }
.system-detail { align-self: center; padding: 70px clamp(30px, 6vw, 96px); }
.detail-kicker { color: #7d857e; }
.system-detail h3 { margin: 0; font-family: var(--headline); font-size: clamp(34px, 3vw, 50px); line-height: 1.08; font-weight: 400; }
.system-detail > p:not(.detail-kicker) { margin: 30px 0; color: var(--ink-soft); line-height: 1.7; font-size: 16px; }
.system-detail ul { margin: 0; padding: 0; list-style: none; }
.system-detail li { padding: 15px 0; border-top: 1px solid var(--line); font-size: 13px; }
.system-detail li::before { content: "↳"; margin-right: 10px; color: #7e877f; }
.detail-hint { margin-top: 36px; color: #8e958f; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

.work { background: var(--ink); color: var(--white); padding-top: clamp(100px, 12vw, 180px); padding-bottom: clamp(110px, 14vw, 210px); }
.work .section-index { color: rgba(255,255,255,.4); }
.work-heading { display: block; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 70px; background: rgba(255,255,255,.13); border-top: 1px solid rgba(255,255,255,.13); }
.case-card { background: var(--ink); min-width: 0; transition: opacity .25s ease; }
.case-visual { position: relative; min-height: 420px; overflow: hidden; display: grid; place-items: center; }
.case-photo { isolation: isolate; background: #1b201c; }
.case-photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(5, 8, 6, .72) 100%);
  pointer-events: none;
}
.case-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}
.case-thumbnail:hover img, .case-thumbnail:focus-visible img { transform: scale(1.035); filter: saturate(1.08); }
.visual-slot img { object-position: center 42%; }
.case-visual-label {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 21px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.case-visual-label span { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; opacity: .72; }
.case-visual-label strong { font-family: var(--headline); font-size: 22px; font-weight: 400; }
.case-visual-label-dark { color: var(--ink); text-shadow: 0 2px 18px rgba(255,255,255,.5); }
.case-content { padding: 34px 34px 42px; }
.case-meta { display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.4); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.case-content h3 { margin: 28px 0 18px; max-width: 690px; font-size: clamp(26px, 2.4vw, 40px); line-height: 1.08; font-weight: 480; letter-spacing: -.035em; }
.case-content > p { margin: 0; max-width: 620px; color: rgba(255,255,255,.48); line-height: 1.65; font-size: 14px; }
.case-result { display: flex; align-items: end; gap: 14px; margin-top: 38px; }
.case-result strong { color: var(--acid); font-size: 42px; line-height: .9; font-weight: 460; }
.case-result span { max-width: 250px; color: rgba(255,255,255,.42); font-size: 11px; line-height: 1.4; }
.case-actions { margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.case-link { font-size: 12px; }
.case-link span { margin-left: 8px; }

.visual-typus { background: radial-gradient(circle at 70% 30%, #6f39e6, transparent 35%), linear-gradient(145deg,#170d32,#341267); }
.mock-browser { width: 76%; aspect-ratio: 1.45; padding: 15px; background: rgba(10,6,22,.82); border: 1px solid rgba(255,255,255,.28); border-radius: 12px; transform: perspective(850px) rotateY(-8deg) rotateX(6deg); box-shadow: 30px 38px 80px rgba(0,0,0,.45); }
.browser-bar { display:flex; gap:5px; height: 20px; }
.browser-bar i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.35); }
.typus-layout { height: 64%; display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.typus-copy { display:flex; flex-direction:column; gap:8px; }
.typus-copy span,.typus-copy strong,.typus-copy em { display:block; background:rgba(255,255,255,.2); border-radius:2px; }
.typus-copy span { width:30%;height:4px; }.typus-copy strong { width:82%;height:12px; }.typus-copy em { width:62%;height:4px; }.typus-copy button { width:42%;height:16px;background:#d7ff3f;border:0;border-radius:8px; }
.typus-orbit { display:grid;place-items:center; }.typus-orbit div { width:72px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#d7ff3f 10%,#7b34d6 50%,transparent 52%);box-shadow:0 0 35px #7b34d6; }
.typus-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }.typus-metrics i { height:32px;border:1px solid rgba(255,255,255,.13);border-radius:4px; }
.visual-caption { position:absolute;right:22px;bottom:18px;font-family:var(--sans);font-style:italic;font-size:12px;color:rgba(255,255,255,.5); }
.visual-ops { background: #c8d5cc; }
.ops-lanes { width:78%; display:grid; gap:8px; transform:rotate(-4deg); }
.ops-lanes > div { min-height:52px;padding:8px 10px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.58);border:1px solid rgba(16,20,17,.12);border-radius:8px;box-shadow:0 15px 30px rgba(16,20,17,.08); }
.ops-lanes span { width:48px;font-size:8px;text-transform:uppercase;letter-spacing:.1em; }
.ops-lanes i { height:32px;flex:1;border-radius:5px;background:var(--ink);opacity:.8; }
.ops-lanes > div:nth-child(2) i:nth-child(2){background:#5d805f}.ops-lanes > div:nth-child(2) i:nth-child(3){background:#d7ff3f}.ops-lanes > div:nth-child(3) i{background:#a46f5b}.ops-lanes > div:nth-child(4) i{background:#6571a4}
.ops-pulse { position:absolute; width:260px; aspect-ratio:1; border:1px solid rgba(16,20,17,.18); border-radius:50%; box-shadow:0 0 0 40px rgba(16,20,17,.04),0 0 0 80px rgba(16,20,17,.025); }
.visual-c88 { background:linear-gradient(145deg,#230811,#60142a); }
.c88-shell { width:74%;aspect-ratio:1.35;padding:14px;background:#12080c;border:1px solid rgba(255,255,255,.18);border-radius:14px;transform:perspective(700px) rotateX(4deg) rotateY(7deg);box-shadow:-24px 30px 70px rgba(0,0,0,.45); }
.c88-nav { height:8px;width:35%;background:rgba(255,255,255,.22);border-radius:4px;margin-bottom:12px; }
.c88-hero { height:48%;display:grid;grid-template-columns:1.3fr .7fr;gap:8px; }.c88-hero span { background:linear-gradient(135deg,#8b1b3d,#eb9b73);border-radius:7px; }.c88-hero span+span{background:linear-gradient(135deg,#2e3130,#8a786f)}
.c88-tiles { display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:8px; }.c88-tiles i { height:42px;border-radius:5px;background:linear-gradient(180deg,#493138,#241419); }
.market-tag { position:absolute;right:13%;bottom:13%;padding:8px 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(255,255,255,.7);font-size:9px;text-transform:uppercase;letter-spacing:.12em;background:rgba(0,0,0,.2);backdrop-filter:blur(8px); }
.visual-game { background:linear-gradient(150deg,#101927,#283853);grid-template-columns:repeat(3,70px);gap:8px; }
.game-reel { height:220px;display:flex;flex-direction:column;gap:6px;padding:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:9px;transform:translateY(-10px); }
.game-reel-second { transform:translateY(18px); }.game-reel-third { transform:translateY(-4px); }
.game-reel span { flex:1;display:grid;place-items:center;border-radius:5px;background:linear-gradient(145deg,#c0954f,#71431d);font-family:var(--headline);font-size:26px;color:#fff5d9; }
.quality-line { position:absolute;bottom:27px;left:14%;right:14%;height:1px;background:rgba(255,255,255,.16); }.quality-line span { display:block;width:68%;height:1px;background:var(--acid);box-shadow:0 0 9px var(--acid); }

.about { padding-top:clamp(100px,12vw,180px);padding-bottom:clamp(100px,12vw,180px);background:var(--paper);color:var(--ink); }
.about-intro { display:grid;grid-template-columns:.72fr 2.28fr;gap:clamp(30px,6vw,100px);align-items:start; }
.about-intro .section-index { color:#7d857e; }
.about-intro h2 { max-width:1050px;margin:0;font-size:clamp(48px,6.5vw,98px);line-height:.98;font-weight:470;letter-spacing:-.05em; }
.about-grid { margin-top:clamp(70px,9vw,130px);padding-top:34px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(42px,8vw,140px); }
.about-lead { max-width:780px;margin:0;font-family:var(--headline);font-size:clamp(28px,3vw,46px);line-height:1.16;letter-spacing:-.025em; }
.about-lead strong { color:#334b39;font-weight:650; }
.about-copy { max-width:600px; }
.about-copy p { margin:0;color:var(--ink-soft);font-size:16px;line-height:1.75; }
.about-copy strong { color:var(--ink);font-weight:650; }
.about-copy p+p { margin-top:24px; }
.about-signals { margin-top:clamp(70px,9vw,130px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.about-signals>div { min-height:210px;padding:26px 30px 30px 0;display:flex;flex-direction:column; }
.about-signals>div+div { padding-left:30px;border-left:1px solid var(--line); }
.about-signals span { color:#788078;font-size:10px;letter-spacing:.13em;text-transform:uppercase; }
.about-signals strong { margin-top:auto;font-family:var(--headline);font-size:clamp(32px,4vw,58px);font-weight:470;letter-spacing:-.04em; }
.about-signals p { margin:10px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.5; }

.contact { min-height:100svh;padding-top:clamp(110px,14vw,210px);padding-bottom:36px;background:radial-gradient(circle at 80% 20%,rgba(215,255,63,.12),transparent 28%),var(--ink);color:var(--white);display:flex;flex-direction:column; }
.contact-heading { display:grid;grid-template-columns:.72fr 2.28fr;gap:clamp(30px,6vw,100px); }
.contact-heading .section-index { color:rgba(255,255,255,.4); }
.contact-heading h2 { max-width:1050px;margin:0;font-size:clamp(52px,7vw,108px);line-height:.94;font-weight:470;letter-spacing:-.055em; }
.contact-heading>p:last-child { grid-column:2;max-width:620px;margin:30px 0 0;color:rgba(255,255,255,.52);font-size:17px;line-height:1.65; }
.contact-list { margin-top:clamp(70px,9vw,130px);border-top:1px solid rgba(255,255,255,.15); }
.contact-list a { min-height:104px;display:grid;grid-template-columns:.72fr 2.28fr;gap:clamp(30px,6vw,100px);align-items:center;border-bottom:1px solid rgba(255,255,255,.15);transition:color .2s ease,background .2s ease; }
.contact-list a:hover { color:var(--acid);background:rgba(255,255,255,.025); }
.contact-list span { color:rgba(255,255,255,.4);font-size:10px;letter-spacing:.13em;text-transform:uppercase; }
.contact-list strong { font-family:var(--headline);font-size:clamp(24px,3.2vw,48px);font-weight:430;letter-spacing:-.03em;overflow-wrap:anywhere; }
.footer-meta { grid-column:1/-1;align-self:end;padding-top:26px;border-top:1px solid rgba(255,255,255,.15);display:grid;grid-template-columns:1fr 1fr 1fr;color:rgba(255,255,255,.35);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }
.footer-meta span:nth-child(2){text-align:center}.footer-meta span:last-child{text-align:right}

dialog { border:0; padding:0; }
dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(8px); }
.case-dialog { width:min(1320px,calc(100vw - 24px));height:calc(100svh - 24px);max-height:none;margin:auto;background:var(--paper);color:var(--ink);border-radius:18px; }
.dialog-close { position:sticky;z-index:2;top:20px;float:right;margin:20px 20px 0 0;border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:rgba(241,240,234,.88);backdrop-filter:blur(8px);cursor:pointer;font-size:11px; }
.dialog-close span { margin-left:10px; }
.dialog-inner { padding:clamp(50px,8vw,110px);clear:both; }
.dialog-inner h2 { max-width:900px; }
.dialog-summary { max-width:730px;margin:30px 0 70px;color:var(--ink-soft);font-size:20px;line-height:1.6; }
.decision-grid { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.decision-grid > div { padding:28px 28px 28px 0; }.decision-grid > div+div{padding-left:28px;border-left:1px solid var(--line)}
.decision-grid span { display:block;margin-bottom:18px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#707970; }
.decision-grid p { margin:0;line-height:1.62;font-size:14px; }
.dialog-inner blockquote { margin:70px 0 0;max-width:850px;font-family:var(--headline);font-size:clamp(28px,4vw,52px);line-height:1.1; }
.case-study-body { margin-top:clamp(80px,10vw,140px); }
.study-media { margin:40px 0 0; }
.study-media img,.study-media video { display:block;width:100%;height:auto;border-radius:14px;background:#d9d9d3; }
.study-media figcaption { margin-top:12px;color:#737b74;font-size:11px;line-height:1.55; }
.study-section { margin-top:clamp(90px,11vw,150px);padding-top:32px;border-top:1px solid var(--line); }
.study-section>h3 { max-width:900px;margin:0 0 28px;font-family:var(--headline);font-size:clamp(34px,4vw,58px);line-height:1.06;font-weight:400;letter-spacing:-.025em; }
.study-section>p:not(.study-eyebrow) { max-width:850px;margin:0 0 28px;color:var(--ink-soft);font-size:17px;line-height:1.72; }
.study-eyebrow { margin:0 0 40px;color:#6b746c;font-size:10px;letter-spacing:.14em;text-transform:uppercase; }
.study-subtitle { margin:54px 0 18px;font-size:20px; }
.study-section ul { margin:0;padding:0;list-style:none; }
.study-section li { position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:14px;line-height:1.58; }
.study-section li::before { content:"↳";position:absolute;left:0;color:#737c74; }
.study-columns { display:grid;grid-template-columns:1fr 1fr;gap:0;margin:42px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.study-columns>div { padding:32px 34px 32px 0; }.study-columns>div+div{padding-left:34px;border-left:1px solid var(--line)}
.study-columns h4 { margin:0 0 20px;font-size:21px; }.study-columns p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.65}
.study-columns-compact { margin-top:30px; }
.study-media-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start; }
.study-media-grid .study-media { margin-top:18px; }
.study-media-grid-tall img { max-height:850px;object-fit:contain;background:#e6e6e0; }
.study-metrics { display:grid;grid-template-columns:repeat(4,1fr);margin:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.study-metrics>div { min-height:150px;padding:26px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px; }
.study-metrics>div+div { border-left:1px solid var(--line); }
.study-metrics strong { font-size:clamp(28px,3vw,48px);font-weight:500;letter-spacing:-.04em; }
.study-metrics span { color:#737c74;font-size:11px;line-height:1.45; }
.study-metrics-large strong { color:#425a47; }
.study-card-grid { display:grid;grid-template-columns:1fr 1fr;margin-top:36px;border-top:1px solid var(--line);border-left:1px solid var(--line); }
.study-card-grid article { min-height:260px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); }
.study-card-grid article>span,.study-decision>div>span { color:#768078;font-size:10px;letter-spacing:.12em; }
.study-card-grid h4 { margin:46px 0 14px;font-size:24px; }.study-card-grid p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.65}
.study-card-grid-three { grid-template-columns:repeat(3,1fr); }
.study-decision { display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;align-items:start;padding:50px 0;border-top:1px solid var(--line); }
.study-decision>div>h4 { margin:25px 0 14px;font-size:24px; }.study-decision>div>p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.65}
.study-decision .study-media { margin:0; }
.study-quote-grid { display:grid;grid-template-columns:repeat(3,1fr);margin:42px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.study-quote-grid blockquote { margin:0;padding:32px;font-family:var(--headline);font-size:22px;line-height:1.35; }
.study-quote-grid blockquote+blockquote { border-left:1px solid var(--line); }
.study-quote-grid-two { grid-template-columns:1fr 1fr; }
.study-callout-list { margin-top:26px!important; }
.study-gallery { display:grid;grid-template-columns:1fr;gap:34px;margin-top:30px; }
.study-gallery .study-media { margin:0; }
.study-gallery-two { grid-template-columns:1fr 1fr;gap:22px; }
.study-gallery-two .study-media img { aspect-ratio:4/3;object-fit:cover; }
.study-impact { margin-bottom:30px;padding:clamp(34px,5vw,64px);background:#e5e8df;border:0;border-radius:20px; }
.study-impact .study-card-grid { border-color:rgba(16,20,17,.18); }
@media (max-width: 980px) {
  .section-heading,.system-layout { grid-template-columns:1fr; }
  .hero { min-height:auto; }
  .system-visual { border-right:0;border-bottom:1px solid var(--line); }
  .system-detail { padding-left:0;padding-right:0; }
  .case-grid { grid-template-columns:1fr; }
  .case-featured { grid-column:auto; }
  .about-intro,.about-grid,.contact-heading { grid-template-columns:1fr; }
  .contact-heading>p:last-child { grid-column:auto; }
}

@media (max-width: 680px) {
  .topbar { height:64px;padding:0 18px;grid-template-columns:1fr 1fr; }.topbar nav{display:none}.contact-link{font-size:0}.contact-link span{font-size:17px;border:1px solid currentColor;border-radius:50%;width:38px;height:38px;display:grid;place-items:center}
  .hero { padding-top:118px;padding-bottom:20px; }h1{font-size:clamp(38px,11vw,72px);line-height:.9}.hero-deck{margin-top:28px;font-size:17px}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px;margin-top:32px}.hero-actions .button{width:100%}
  .hero-foot{margin-top:55px;display:block}.hero-foot span{display:none}
  .section-heading{gap:22px}.section-heading h2,.work-footer h2,.dialog-inner h2{font-size:clamp(40px,12vw,58px)}
  .system-layout{margin-top:54px;min-height:0}.system-visual{min-height:480px}.orbit-one{width:330px}.orbit-two{width:470px}.system-core{width:140px}.system-core strong{font-size:21px}.system-node{padding:10px 12px;font-size:12px}.node-direction{left:3%;top:18%}.node-systems{right:1%;top:45%}.node-people{left:7%;bottom:16%}.system-detail{padding-top:54px;padding-bottom:0}
  .case-grid{margin-top:48px}
  .case-visual{min-height:310px}.case-content{padding:26px 4px 46px}.case-meta{font-size:9px}.case-content h3{font-size:31px}.mock-browser{width:87%}.visual-game{grid-template-columns:repeat(3,56px)}
  .about{padding-top:90px;padding-bottom:90px}.about-intro h2,.contact-heading h2{font-size:clamp(46px,13vw,66px)}.about-grid{margin-top:60px;padding-top:28px;gap:34px}.about-lead{font-size:30px}.about-signals{grid-template-columns:1fr;margin-top:64px}.about-signals>div,.about-signals>div+div{min-height:160px;padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}.about-signals>div:last-child{border-bottom:0}.about-signals strong{margin-top:34px}
  .contact{min-height:auto;padding-top:100px}.contact-heading{gap:0}.contact-heading>p:last-child{margin-top:28px}.contact-list{margin-top:65px}.contact-list a{min-height:96px;grid-template-columns:1fr;gap:12px;padding:22px 0}.contact-list strong{font-size:28px}.footer-meta{margin-top:90px;grid-template-columns:1fr 1fr}.footer-meta span:nth-child(2){text-align:right}.footer-meta span:last-child{display:none}
  .case-dialog{width:100vw;height:100svh;max-width:none;max-height:none;border-radius:0}.dialog-inner{padding:58px 22px 45px}.dialog-summary{margin-bottom:45px;font-size:17px}.decision-grid{grid-template-columns:1fr}.decision-grid>div,.decision-grid>div+div{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}.decision-grid>div:last-child{border-bottom:0}
  .case-study-body{margin-top:72px}.study-section{margin-top:82px}.study-section>p:not(.study-eyebrow){font-size:15px}.study-columns,.study-media-grid,.study-card-grid,.study-card-grid-three,.study-decision,.study-quote-grid,.study-quote-grid-two,.study-gallery-two{grid-template-columns:1fr}.study-columns>div,.study-columns>div+div{padding:26px 0;border-left:0;border-bottom:1px solid var(--line)}.study-columns>div:last-child{border-bottom:0}.study-metrics{grid-template-columns:1fr 1fr}.study-metrics>div:nth-child(odd){border-left:0}.study-metrics>div:nth-child(n+3){border-top:1px solid var(--line)}.study-card-grid article{min-height:220px}.study-decision{gap:26px}.study-quote-grid blockquote+blockquote{border-left:0;border-top:1px solid var(--line)}.study-gallery-two .study-media img{aspect-ratio:auto}.study-impact{padding:28px 20px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .action-text { transition:none; }
}

/* Project thumbnails open the case study with native keyboard support. */
.case-thumbnail { width: 100%; padding: 0; border: 0; border-radius: 0; appearance: none; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.case-thumbnail:focus-visible { outline: 3px solid var(--acid); outline-offset: -3px; }
.case-thumbnail-arrow { position: absolute; z-index: 2; top: 24px; right: 24px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(10,14,11,.55); color: #fff; font-size: 22px; transition: background .25s ease, color .25s ease, transform .25s ease; }
.case-thumbnail:hover .case-thumbnail-arrow, .case-thumbnail:focus-visible .case-thumbnail-arrow { background: var(--acid); color: var(--ink); transform: translate(2px,-2px); }
@media (prefers-reduced-motion: reduce) { .case-thumbnail img, .case-thumbnail-arrow { transition: none; } }