@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  --ink: #08090b;
  --ink-raised: #111318;
  --paper: #f5f6f7;
  --silver: #d9dde3;
  --muted: #a7adb7;
  --line: rgba(217, 221, 227, .16);
  --line-dark: rgba(8, 9, 11, .14);
  --lime: #c8ff3d;
  --max: 1440px;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Manrope, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.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; }
::selection { background: var(--lime); color: var(--ink); }

.skip-link { position: fixed; z-index: 100; top: -4rem; left: 1rem; background: var(--lime); color: var(--ink); padding: .75rem 1rem; font-weight: 800; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.site-shell { overflow: clip; }
.container { max-width: var(--max); padding-left: var(--pad); padding-right: var(--pad); margin: auto; }
.eyebrow { display: flex; align-items: center; gap: .65rem; font: 500 .66rem/1 "DM Mono", monospace; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .7; }
.label { font: 500 .65rem/1.2 "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.display { margin: 0; font-size: clamp(3.2rem, 8.3vw, 8.8rem); line-height: .91; letter-spacing: -.07em; font-weight: 600; }
.display em { font-family: "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: -.075em; }
.headline { margin: 0; max-width: 11ch; font-size: clamp(2.4rem, 5vw, 5.75rem); letter-spacing: -.065em; line-height: .98; }
.lede { max-width: 38rem; color: var(--silver); font-size: clamp(1rem, 1.5vw, 1.23rem); line-height: 1.68; }
.section { padding: clamp(6rem, 12vw, 11rem) 0; }
.section-rule { border-top: 1px solid var(--line); }
.on-light { color: var(--ink); background: var(--paper); }
.on-light .eyebrow, .on-light .label { color: #5d6066; }
.on-light .lede { color: #44474d; }
.on-light .section-rule { border-color: var(--line-dark); }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; height: 5.25rem; transition: background .35s var(--ease), border-color .35s, transform .35s var(--ease); border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(8, 9, 11, .82); backdrop-filter: blur(18px); border-color: var(--line); }
.nav-inner { height: 100%; max-width: var(--max); padding: 0 var(--pad); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-size: 1.28rem; font-weight: 800; letter-spacing: -.09em; position: relative; z-index: 1; }
.wordmark::after { content: ""; display: inline-block; height: .38rem; width: .38rem; margin: 0 0 .72rem .11rem; background: var(--lime); border-radius: 50%; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.7rem); font-size: .73rem; font-weight: 600; color: var(--silver); }
.nav-links a { position: relative; }
.nav-links a:not(.nav-cta)::after { content: ""; position: absolute; width: 0; height: 1px; background: var(--lime); left: 0; bottom: -.45rem; transition: width .25s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-cta { color: var(--ink); background: var(--lime); padding: .78rem 1.06rem; border-radius: 100px; font-size: .7rem; }
.nav-toggle { display: none; color: var(--paper); border: 0; background: none; padding: .7rem 0 .7rem .7rem; }
.nav-toggle span { display: block; width: 1.45rem; height: 1px; background: currentColor; margin: .34rem; transition: transform .2s; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.3rem; }
.button { border: 1px solid var(--line); min-height: 3.35rem; padding: .9rem 1.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; border-radius: 100px; color: var(--paper); background: transparent; font-size: .74rem; font-weight: 700; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.button:hover { transform: translateY(-2px); border-color: var(--silver); }
.button-primary { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.button-primary:hover { background: var(--paper); border-color: var(--paper); }
.button .arrow { font-size: 1.05rem; line-height: 0; transition: transform .25s; }
.button:hover .arrow { transform: translateX(.2rem); }
.on-light .button { color: var(--ink); border-color: var(--line-dark); }
.on-light .button-primary { color: var(--ink); background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* hero */
.hero { min-height: min(860px, 100svh); padding-top: 5.25rem; position: relative; display: grid; align-items: end; isolation: isolate; }
.hero::before { content: ""; z-index: -2; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 68% at 82% 45%, #22282a 0%, transparent 55%), linear-gradient(120deg, #08090b 24%, #101216 100%); }
.hero-grid { min-height: min(775px, calc(100svh - 5.25rem)); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 1.2rem; padding-bottom: clamp(3rem, 8vw, 6rem); }
.hero-copy { position: relative; z-index: 2; padding-top: 5.5rem; }
.hero-copy .lede { margin: 2rem 0 0; }
.hero-stamp { position: absolute; z-index: 3; bottom: 2.1rem; left: var(--pad); font: .58rem/1.3 "DM Mono", monospace; color: var(--muted); letter-spacing: .11em; text-transform: uppercase; writing-mode: vertical-rl; }
.hero-art { min-height: 30rem; height: min(62vw, 44rem); position: relative; }
.orbital { --x: 0px; --y: 0px; position: absolute; width: min(49vw, 43rem); aspect-ratio: 1; right: -8%; top: 50%; transform: translate(var(--x), var(--y)) translateY(-50%); transition: transform .8s var(--ease); }
.orbital::before, .orbital::after { content: ""; position: absolute; border-radius: 50%; inset: 7%; border: 1px solid rgba(242,241,238,.22); transform: rotateX(68deg) rotateZ(-32deg); }
.orbital::after { inset: 24%; border-color: rgba(215,255,110,.65); transform: rotateX(72deg) rotateZ(45deg); box-shadow: 0 0 45px rgba(215,255,110,.15); }
.orbital-core { position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #eff0e8, #a3a5a3 13%, #232728 48%, #0b0c0f 72%); box-shadow: inset -2.5rem -2rem 5rem rgba(0,0,0,.8), 0 0 7rem rgba(218,235,197,.12); }
.orbital-core::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.orbital-node { position: absolute; height: .52rem; width: .52rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 1.4rem .35rem rgba(215,255,110,.35); top: 18%; left: 50%; }
.orbital-caption { position: absolute; z-index: 2; bottom: 2%; right: 8%; width: 12rem; padding-top: .8rem; color: var(--muted); border-top: 1px solid var(--line); font: .56rem/1.55 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.hero-index { position: absolute; z-index: 2; right: var(--pad); bottom: 2.1rem; color: var(--silver); font: .6rem "DM Mono", monospace; }

/* home */
.manifesto { display: grid; grid-template-columns: 1fr 1.95fr; gap: 2rem; }
.manifesto-copy { margin: 0; max-width: 14ch; font-size: clamp(2rem, 4.2vw, 4.7rem); line-height: 1.05; letter-spacing: -.06em; }
.manifesto-copy em { color: var(--lime); font-family: "Playfair Display", serif; font-weight: 500; }
.manifesto-aside { align-self: end; max-width: 27rem; justify-self: end; }
.capabilities { border-top: 1px solid var(--line); margin-top: 5rem; }
.capability { min-height: 6.75rem; display: grid; grid-template-columns: 8% 1fr auto; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), background .35s, color .35s; }
.capability:hover { background: var(--lime); color: var(--ink); padding-inline: 1rem; }
.capability-num { font: .6rem "DM Mono", monospace; color: var(--muted); }
.capability h3 { margin: 0; font-weight: 500; font-size: clamp(1.35rem, 2.5vw, 2.25rem); letter-spacing: -.055em; }
.capability p { display: none; }
.capability-arrow { font-size: 1.5rem; }
.section-top { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.section-top .headline { max-width: 10ch; }
.case-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.1rem; }
.case { min-height: 35rem; display: flex; flex-direction: column; padding: 1.55rem; position: relative; overflow: hidden; color: var(--paper); }
.case::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform .7s var(--ease); }
.case:hover::before { transform: scale(1.045); }
.case-nova::before { background: radial-gradient(circle at 76% 20%, #dde1c4 0%, #767b67 12%, transparent 29%), linear-gradient(130deg, #111614, #303a35 52%, #0d100e); }
.case-arc::before { background: radial-gradient(ellipse at 18% 72%, #f8eee0 0%, #795f50 17%, transparent 48%), linear-gradient(140deg, #181414, #362b29); }
.case-pulse::before { background: radial-gradient(circle at 62% 25%, #c9d6e5 0 3%, #415d75 4% 17%, transparent 18%), linear-gradient(135deg, #071116, #123043); }
.case-wide { grid-row: span 2; }
.case-meta { display: flex; justify-content: space-between; gap: 1rem; font: .61rem "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.case h3 { margin: auto 0 0; font-size: clamp(1.8rem, 3.2vw, 3.5rem); letter-spacing: -.065em; line-height: .95; font-weight: 600; max-width: 8ch; }
.case .case-arrow { position: absolute; bottom: 1.55rem; right: 1.55rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.case-text { margin: .7rem 0 0; max-width: 23rem; font-size: .78rem; color: rgba(242,241,238,.75); line-height: 1.5; }
.innovation-panel { display: grid; grid-template-columns: 1fr 1fr; min-height: 38rem; background: #d9d9d1; color: var(--ink); overflow: hidden; }
.innovation-copy { padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: space-between; }
.innovation-copy .headline { max-width: 8ch; }
.innovation-visual { position: relative; background: #1c2020; overflow: hidden; }
.innovation-visual::before { content:""; position: absolute; width: 130%; aspect-ratio: 1; border-radius: 50%; top: -20%; left: -25%; background: repeating-radial-gradient(circle, #d7ff6e 0 1px, transparent 1px 2.1rem), radial-gradient(circle, #a5c653, #1b201b 60%); opacity: .9; }
.innovation-visual::after { content: ""; position: absolute; inset: 15%; border: 1px solid rgba(215,255,110,.5); transform: rotate(38deg); }
.process-list { margin-top: 4.5rem; border-top: 1px solid var(--line); }
.process-step { display: grid; grid-template-columns: 4.5rem 1fr 1.2fr; align-items: center; gap: 1rem; min-height: 7rem; border-bottom: 1px solid var(--line); transition: padding .3s, color .3s; }
.process-step:hover { color: var(--lime); padding-left: 1rem; }
.process-step .number { font: .65rem "DM Mono", monospace; color: var(--muted); }
.process-step h3 { margin: 0; font-size: 1.55rem; letter-spacing: -.055em; }
.process-step p { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.quote-block { min-height: 80svh; display: grid; place-items: center; position: relative; background: #111416; }
.quote-block::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 4.5rem 4.5rem; mask-image: radial-gradient(circle at center, black 8%, transparent 70%); }
.quote { position: relative; margin: 0; max-width: 19ch; text-align: center; font-size: clamp(2.45rem, 5.2vw, 6.2rem); letter-spacing: -.065em; line-height: 1.02; }
.quote em { color: var(--lime); font-family: "Playfair Display", serif; font-weight: 500; }
.closing { padding: clamp(7rem, 15vw, 13rem) 0; background: var(--lime); color: var(--ink); }
.closing .display { max-width: 9ch; }
.closing .button { margin-top: 2.5rem; border-color: var(--ink); }
.closing .button:hover { background: var(--ink); color: var(--paper); }

/* interior pages */
.page-hero { padding: clamp(11rem, 19vw, 16rem) 0 clamp(4.5rem, 9vw, 8.5rem); min-height: 62svh; position: relative; background: radial-gradient(ellipse 70% 85% at 95% 0%, #252a2a 0%, transparent 48%); }
.page-hero .lede { margin: 2.1rem 0 0 max(0px, 12vw); }
.page-hero .display { max-width: 11ch; }
.page-hero .display em { color: var(--silver); }
.page-hero-index { position: absolute; right: var(--pad); bottom: 2rem; font: .62rem "DM Mono", monospace; color: var(--muted); }
.editorial-grid { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(2rem, 10vw, 11rem); }
.editorial-grid .sticky-label { align-self: start; position: sticky; top: 7rem; }
.body-copy { font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.42; letter-spacing: -.04em; max-width: 30ch; margin: 0; }
.body-copy + .body-copy { margin-top: 1.7em; color: #a9aaa7; font-size: 1rem; line-height: 1.7; letter-spacing: 0; max-width: 43rem; }
.values { margin-top: 6rem; }
.value { border-top: 1px solid var(--line); display: grid; grid-template-columns: .6fr 1.4fr; padding: 1.7rem 0 3.2rem; gap: 1rem; }
.value h3 { margin: 0; font-size: 1.6rem; letter-spacing: -.05em; }
.value p { margin: .15rem 0; color: var(--muted); font-size: .9rem; line-height: 1.7; max-width: 33rem; }
.vision-image { margin-top: 7rem; height: min(56vw, 44rem); position: relative; background: linear-gradient(135deg, #c9ccc4, #6c716b); overflow: hidden; }
.vision-image::before { content:""; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid #252825; left: 12%; top: 16%; border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255,255,255,.08), 0 0 0 10rem rgba(0,0,0,.05); }
.vision-image::after { content: "S / L"; position: absolute; right: 4%; bottom: 3%; font: 500 clamp(4rem, 17vw, 16rem)/.7 "DM Mono", monospace; color: rgba(8,9,11,.83); letter-spacing: -.15em; }

/* services */
.service-list { border-top: 1px solid var(--line); }
.service { display: grid; grid-template-columns: .5fr 1fr 1fr .25fr; align-items: start; padding: 2rem 0; border-bottom: 1px solid var(--line); gap: 1rem; transition: padding .35s, background .35s; }
.service:hover { background: #111417; padding-inline: 1.3rem; }
.service-num { font: .61rem "DM Mono", monospace; color: var(--muted); padding-top: .55rem; }
.service h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.6rem); letter-spacing: -.06em; line-height: 1; }
.service-copy { margin: .1rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.7; max-width: 27rem; }
.service-detail { display: none; grid-column: 2/4; padding-top: 2rem; grid-template-columns: 1fr 1fr; gap: 3rem; }
.service.is-open .service-detail { display: grid; }
.service.is-open { background: #111417; }
.service-detail ul { list-style: none; margin: .75rem 0 0; padding: 0; font-size: .78rem; color: var(--silver); line-height: 2; }
.service-toggle { justify-self: end; border: 1px solid var(--line); border-radius: 50%; background: transparent; width: 2.3rem; height: 2.3rem; color: var(--paper); font-size: 1.25rem; transition: transform .25s; }
.service.is-open .service-toggle { transform: rotate(45deg); }

/* work */
.work-feature { min-height: 55rem; display: grid; grid-template-columns: 1fr 1fr; background: #1a1e1d; }
.work-art { min-height: 28rem; position: relative; background: #79866f; overflow: hidden; }
.work-art::after { content:""; position: absolute; width: 120%; height: 70%; left: -10%; bottom: -17%; background: radial-gradient(ellipse at 50% 0, transparent 40%, #101411 41% 45%, transparent 46%), repeating-radial-gradient(ellipse at 50% 120%, transparent 0 1rem, rgba(242,241,238,.35) 1.05rem 1.1rem); transform: perspective(500px) rotateX(56deg); }
.work-info { padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; }
.work-info h2 { margin: auto 0 0; font-size: clamp(3rem, 5.4vw, 5.7rem); letter-spacing: -.08em; line-height: .9; }
.work-info .lede { font-size: .95rem; margin: 1.5rem 0 0; }
.project-data { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3.4rem; gap: 1rem; }
.project-data span { display: block; margin-top: .5rem; font-size: .78rem; color: var(--silver); }
.project-list { border-top: 1px solid var(--line); }
.project-row { padding: 2.5rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: .7fr 1.2fr 1fr auto; align-items: center; gap: 1rem; }
.project-row h3 { margin: 0; font-size: clamp(1.65rem, 3vw, 3.1rem); letter-spacing: -.06em; }
.project-row p { color: var(--muted); font-size: .8rem; line-height: 1.6; max-width: 27rem; }
.project-row .project-arrow { font-size: 1.5rem; color: var(--lime); }

/* innovation */
.signal { min-height: 65svh; margin: 0 var(--pad); background: #151a19; position: relative; overflow: hidden; display: grid; place-items: center; }
.signal::before { content:""; position: absolute; width: 150vw; height: 150vw; max-width: 130rem; max-height: 130rem; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 2.8rem, rgba(215,255,110,.23) 2.82rem 2.86rem); animation: pulse 8s linear infinite; }
.signal::after { content:""; width: 4.5rem; aspect-ratio: 1; position: absolute; border-radius: 50%; background: var(--lime); box-shadow: 0 0 5rem 2rem rgba(215,255,110,.25); }
.signal-text { position: relative; z-index: 2; color: var(--paper); text-align: center; font: .6rem "DM Mono", monospace; letter-spacing: .18em; text-transform: uppercase; }
@keyframes pulse { to { transform: rotate(360deg) scale(1.08); } }
.innovation-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.innovation-columns h3 { font-size: 1.7rem; letter-spacing: -.055em; margin: 1rem 0; }
.innovation-columns p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.75; }

/* insights */
.featured-story { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 32rem; background: var(--paper); color: var(--ink); }
.featured-image { background: linear-gradient(135deg, #7d8580, #d9dad2); position: relative; overflow: hidden; }
.featured-image::after { content: "↗"; font-size: 18rem; position: absolute; line-height: 1; bottom: -2.5rem; left: 14%; color: rgba(8,9,11,.8); }
.featured-copy { padding: clamp(2rem, 5vw, 5.5rem); display: flex; flex-direction: column; }
.featured-copy h2 { margin: auto 0 .7rem; font-size: clamp(2rem, 4vw, 4.35rem); letter-spacing: -.07em; line-height: .96; }
.story-list { border-top: 1px solid var(--line); }
.story { display: grid; grid-template-columns: .45fr 1.2fr .9fr auto; gap: 1rem; align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.story time, .story-type { font: .59rem "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.story h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.85rem); letter-spacing: -.055em; }
.story p { color: var(--muted); font-size: .76rem; line-height: 1.6; }

/* contact */
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 10vw, 10rem); }
.contact-side { display: flex; flex-direction: column; gap: 3.5rem; }
.contact-side p { margin: .7rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.7; max-width: 19rem; }
.contact-side a { display: inline-block; margin-top: .85rem; font-size: 1rem; text-decoration: underline; text-underline-offset: .3rem; }
.contact-form { border-top: 1px solid var(--line); }
.form-field { display: block; border-bottom: 1px solid var(--line); padding: 1.5rem 0 .8rem; }
.form-field span { display: block; font: .61rem "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.form-field input, .form-field textarea, .form-field select { width: 100%; background: none; border: 0; color: var(--paper); padding: .25rem 0; font-size: 1.08rem; outline: none; border-radius: 0; }
.form-field select { appearance: auto; }
.form-field textarea { min-height: 7rem; resize: vertical; }
.form-field:focus-within { border-color: var(--lime); }
.form-status { margin: 1rem 0 0; color: var(--lime); font-size: .78rem; min-height: 1.2rem; }

/* footer */
.footer { padding: 1.5rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; font: .59rem "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.footer-inner .wordmark { color: var(--paper); justify-self: center; }
.footer-inner a { justify-self: end; }

/* motion/a11y */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .nav { height: 4.5rem; } .nav-links { position: fixed; inset: 4.5rem 0 auto; display: grid; gap: 0; background: #101216; border-bottom: 1px solid var(--line); padding: .75rem var(--pad) 1.4rem; transform: translateY(-135%); transition: transform .35s var(--ease); }
  .nav-links.is-open { transform: translateY(0); } .nav-links a { padding: .8rem 0; font-size: .86rem; } .nav-links a::after { display: none; } .nav-cta { margin-top: .65rem; text-align: center; }
  .nav-toggle { display: block; } .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .hero { min-height: 47rem; } .hero-grid { grid-template-columns: 1fr; min-height: 47rem; padding-bottom: 2.5rem; } .hero-copy { padding-top: 5.8rem; align-self: start; } .hero-art { position: absolute; z-index: -1; inset: 0 -15% auto auto; width: 92%; height: 75%; min-height: 0; opacity: .75; } .orbital { width: 29rem; right: -35%; top: 48%; } .hero-stamp { display: none; }
  .manifesto, .case-grid, .innovation-panel, .featured-story, .contact-layout, .work-feature { grid-template-columns: 1fr; } .manifesto-aside { justify-self: start; } .case { min-height: 24rem; } .case-wide { grid-row: auto; } .innovation-panel { min-height: auto; } .innovation-visual { min-height: 20rem; order: -1; }
  .process-step { grid-template-columns: 3.4rem 1fr; padding: .9rem 0; } .process-step p { grid-column: 2; margin: 0 0 .4rem; } .section-top { display: block; } .section-top .lede { margin-top: 1.7rem; }
  .page-hero { min-height: 0; padding-top: 9rem; } .page-hero .lede { margin-left: 0; } .editorial-grid { grid-template-columns: 1fr; gap: 2rem; } .editorial-grid .sticky-label { position: static; }
  .service { grid-template-columns: 2.3rem 1fr auto; } .service-copy { grid-column: 2; } .service-detail { grid-column: 2/4; grid-template-columns: 1fr; gap: 1.5rem; } .service-toggle { grid-column: 3; grid-row: 1; }
  .project-row { grid-template-columns: .45fr 1fr auto; padding: 1.8rem 0; } .project-row p { grid-column: 2; margin: 0; } .project-data { gap: .5rem; }
  .innovation-columns { grid-template-columns: 1fr; gap: 2rem; } .story { grid-template-columns: 1fr auto; gap: .75rem; } .story h3 { grid-column: 1/3; } .story p { grid-column: 1/3; margin: 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner .wordmark { grid-row: 1; grid-column: 1/3; } .footer-inner a { justify-self: end; }
}
@media (max-width: 420px) { .actions .button { flex: 1; } .project-data { grid-template-columns: 1fr; } .display { font-size: clamp(3rem, 15vw, 4.6rem); } .orbital-caption { display: none; } }

/* --------------------------------------------------------------------------
   Silvlum art direction pass — signal, structure, restraint
   -------------------------------------------------------------------------- */
body { background: var(--ink); }
body::before { content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 50; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.display { font-weight: 500; letter-spacing: -.078em; }
.display em { color: var(--silver); }
.headline { font-weight: 500; }
.lede { color: var(--muted); font-size: clamp(.95rem, 1.25vw, 1.1rem); line-height: 1.72; }
.eyebrow { color: var(--muted); }
.eyebrow::before { width: 1.25rem; }
.label { color: var(--muted); }

/* navigation becomes a quiet instrument panel */
.nav { height: 5rem; }
.nav.is-scrolled { background: rgba(8, 9, 11, .92); backdrop-filter: blur(12px); }
.nav-inner { max-width: 1600px; }
.wordmark { font-weight: 800; letter-spacing: -.095em; }
.wordmark::after { width: .28rem; height: .28rem; margin-bottom: .62rem; }
.nav-links { gap: clamp(1rem, 1.8vw, 2.35rem); font: 500 .63rem/1 "DM Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
.nav-links a:not(.nav-cta)::after { background: var(--lime); bottom: -.62rem; }
.nav-cta { background: transparent; color: var(--paper); border: 1px solid var(--line); padding: .65rem .88rem; border-radius: 0; transition: color .25s, border-color .25s, background .25s; }
.nav-cta:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* buttons: a controlled lime signature, never a pill field */
.button { min-height: 3.1rem; padding: .78rem 1rem  .78rem 1.12rem; border-radius: 0; border-color: var(--line); font: 500 .67rem/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .065em; }
.button-primary { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.button-primary:hover { color: var(--paper); background: var(--ink-raised); border-color: var(--paper); }
.button .arrow { border-left: 1px solid currentColor; padding-left: .75rem; }
.actions { gap: .55rem; margin-top: 2.5rem; }

/* hero: an identity object built as a physical light instrument */
.hero { min-height: min(900px, 100svh); background: #08090b; }
.hero::before { background: radial-gradient(ellipse 52% 70% at 73% 46%, #252b2f 0%, #13171b 30%, transparent 67%), linear-gradient(90deg, #08090b 12%, #0b0d10 100%); }
.hero::after { content: ""; pointer-events: none; position: absolute; inset: 0; z-index: -1; opacity: .55; background: linear-gradient(90deg, transparent 0 49.95%, rgba(217,221,227,.08) 50%, transparent 50.05%), linear-gradient(0deg, transparent 0 17%, rgba(217,221,227,.06) 17.1%, transparent 17.2%); background-size: 100% 100%, 100% 100%; }
.hero-grid { min-height: min(810px, calc(100svh - 5rem)); grid-template-columns: .92fr 1.08fr; max-width: 1600px; }
.hero-copy { padding-top: 3.5rem; }
.hero-copy .display { max-width: 8.1ch; font-size: clamp(4rem, 7.35vw, 8rem); }
.hero-copy .display em { color: var(--paper); }
.hero-copy .lede { margin-top: 1.8rem; max-width: 31rem; }
.hero-art { min-height: 36rem; height: min(65vw, 46rem); }
.orbital { --x: 0px; --y: 0px; --tilt: 0deg; --scroll: 0px; width: min(48vw, 43rem); right: 3%; transform: translate3d(var(--x), calc(var(--y) + var(--scroll)), 0) rotate(var(--tilt)); transform-style: preserve-3d; perspective: 1000px; transition: transform .8s cubic-bezier(.16,.8,.25,1); }
.orbital::before { inset: 2%; border-color: rgba(217,221,227,.18); transform: rotateX(70deg) rotateZ(-26deg); box-shadow: 0 0 7rem rgba(217,221,227,.055); }
.orbital::after { inset: 13%; border-color: rgba(217,221,227,.35); transform: rotateX(74deg) rotateZ(51deg); box-shadow: none; }
.orbital-core { inset: 26%; background: radial-gradient(circle at 34% 25%, #f5f6f7 0%, #bdc2c8 9%, #777f88 24%, #2b3036 46%, #0b0d10 74%); box-shadow: inset -2rem -2rem 4rem rgba(0,0,0,.75), inset 1.2rem 1.1rem 2rem rgba(255,255,255,.15), 0 1rem 5rem rgba(0,0,0,.8); transform: translateZ(2rem); }
.orbital-core::before { inset: 10%; border-color: rgba(245,246,247,.28); }
.orbital-core::after { content: ""; position: absolute; inset: -21%; border-radius: 50%; border: 1px solid rgba(200,255,61,.3); transform: rotateX(67deg) rotateZ(13deg); }
.orbital-node { height: .42rem; width: .42rem; background: var(--lime); top: 17%; left: 51%; box-shadow: 0 0 1.1rem .22rem rgba(200,255,61,.35); }
.orbit-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(245,246,247,.11); transform: rotateX(70deg) rotateZ(-66deg); }
.orbit-ring.ring-two { inset: 34%; border-color: rgba(200,255,61,.34); transform: rotateX(60deg) rotateZ(27deg); }
.orbit-particles { position: absolute; inset: 0; border-radius: 50%; background-image: radial-gradient(circle at 19% 38%, var(--lime) 0 1px, transparent 1.5px), radial-gradient(circle at 76% 24%, rgba(245,246,247,.9) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 67%, rgba(217,221,227,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 35% 81%, rgba(245,246,247,.7) 0 1px, transparent 1.5px); opacity: .78; animation: field-drift 12s linear infinite; }
@keyframes field-drift { to { transform: rotate(360deg); } }
.orbital-caption { right: 1%; bottom: 7%; width: 11.5rem; border-top-color: rgba(217,221,227,.35); color: var(--muted); }
.hero-index { right: var(--pad); bottom: 1.8rem; }
.hero-stamp { color: var(--muted); }

/* quiet editorial cadence */
.section { padding: clamp(6.5rem, 11vw, 12rem) 0; }
.manifesto { grid-template-columns: .72fr 1.7fr; }
.manifesto-copy { max-width: 15ch; font-size: clamp(2rem, 3.65vw, 4rem); }
.manifesto-copy em { color: var(--paper); }
.capabilities { margin-top: 7rem; }
.capability { min-height: 7.6rem; grid-template-columns: 9% 1fr minmax(10rem, .55fr) auto; }
.capability::after { content: "Different disciplines. One clear system."; opacity: 0; transform: translateX(-.5rem); color: var(--muted); font: .66rem/1.5 "DM Mono", monospace; letter-spacing: .03em; transition: opacity .25s, transform .25s; }
.capability:hover { background: transparent; color: var(--paper); padding-inline: .6rem; }
.capability:hover::after { opacity: 1; transform: none; }
.capability:hover .capability-arrow { color: var(--lime); }
.capability-num { color: var(--muted); }
.capability h3 { font-weight: 500; }
.section-top { margin-bottom: clamp(3.4rem, 6vw, 6rem); }

/* work previews remove card treatment in favour of image fields */
.case-grid { grid-template-columns: 1.45fr .8fr; gap: 1px; background: var(--line); }
.case { min-height: 33rem; padding: clamp(1.25rem, 2.5vw, 2.2rem); background: var(--ink); }
.case::before { filter: saturate(.72) contrast(1.1); }
.case:hover::before { transform: scale(1.025); }
.case::after { content: ""; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,.18), rgba(8,9,11,.14) 48%, rgba(8,9,11,.86)); }
.case > * { position: relative; z-index: 1; }
.case-nova::before { background: radial-gradient(circle at 72% 26%, #f5f6f7 0%, #aab1b5 7%, #3b4646 27%, transparent 28%), linear-gradient(150deg, #070a0a, #303d3c 58%, #101718); }
.case-arc::before { background: radial-gradient(ellipse at 25% 76%, #e2e4e4 0%, #6e777d 14%, transparent 43%), linear-gradient(150deg, #0a0c0f, #363b41); }
.case-pulse::before { background: radial-gradient(circle at 64% 25%, #e5e9ea 0 2%, #455b67 3% 17%, transparent 18%), linear-gradient(140deg, #071015, #12303e); }
.case-meta { font-size: .56rem; color: var(--silver); }
.case h3 { max-width: 10ch; font-size: clamp(2rem, 3.5vw, 4.1rem); }
.case-text { font-size: .72rem; color: var(--silver); }
.case .case-arrow { width: 2.2rem; height: 2.2rem; border-radius: 0; border-color: rgba(245,246,247,.34); }
.case:hover .case-arrow { background: var(--lime); color: var(--ink); border-color: var(--lime); }

.innovation-panel { background: var(--ink-raised); color: var(--paper); min-height: 39rem; border: 1px solid var(--line); }
.innovation-copy .headline { max-width: 9ch; }
.innovation-copy .headline em { color: var(--lime); }
.innovation-copy .lede { color: var(--muted); }
.innovation-visual { background: #0c0f12; }
.innovation-visual::before { width: 130%; background: repeating-radial-gradient(circle, rgba(217,221,227,.48) 0 1px, transparent 1px 2.1rem), radial-gradient(circle, #2d3637, #0b0d0f 63%); }
.innovation-visual::after { border-color: rgba(200,255,61,.5); }

.process-list { margin-top: 5.5rem; }
.process-step { min-height: 7.55rem; grid-template-columns: 5rem 1fr .7fr; }
.process-step:hover { padding-left: 1.4rem; color: var(--paper); }
.process-step:hover h3::after { content: "—"; color: var(--lime); padding-left: .5rem; }
.quote-block { min-height: 74svh; background: #0d1013; }
.quote-block::before { opacity: .12; background-size: 5.5rem 5.5rem; }
.quote em { color: var(--silver); }
.closing { background: #111318; color: var(--paper); border-top: 1px solid var(--line); }
.closing .display { max-width: 10ch; }
.closing .display em { color: var(--lime); }
.closing .button { border-color: var(--lime); color: var(--lime); }
.closing .button:hover { background: var(--lime); color: var(--ink); }

/* interior page rhythm */
.page-hero { min-height: 58svh; padding-top: clamp(10.5rem, 16vw, 14rem); background: radial-gradient(ellipse 40% 70% at 96% 14%, #252b2d 0%, transparent 57%); }
.page-hero .display { max-width: 10ch; font-size: clamp(3.5rem, 6.4vw, 7rem); }
.page-hero .display em { color: var(--silver); }
.page-hero .lede { margin-top: 1.65rem; }
.on-light { background: var(--paper); }
.body-copy { font-weight: 500; }
.value { padding: 1.8rem 0 3.5rem; }
.value h3 { font-weight: 500; }
.vision-image { background: linear-gradient(135deg, #e3e5e7, #7c838a); }
.vision-image::before { border-color: #262b30; }

/* Services: an editorial switchboard, not an accordion */
.services-experience { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.service-list { border-top-color: rgba(217,221,227,.3); }
.service { grid-template-columns: 3rem minmax(10rem, 1fr) minmax(11rem, .83fr) 2rem; min-height: 8rem; padding: 1.55rem 0; background: transparent; transition: min-height .45s var(--ease), padding .45s var(--ease), background .45s var(--ease); }
.service:hover, .service.is-open { background: transparent; padding-inline: 0; }
.service.is-open { min-height: 15.5rem; }
.service h2 { font-size: clamp(1.45rem, 2.35vw, 2.55rem); font-weight: 500; transition: color .35s, transform .35s; }
.service.is-open h2 { color: var(--paper); transform: translateX(.25rem); }
.service-copy { font-size: .75rem; transition: color .35s; }
.service.is-open .service-copy { color: var(--silver); }
.service-toggle { width: 2rem; height: 2rem; border: 0; border-radius: 0; color: var(--muted); padding: 0; }
.service-toggle::before { content: "↗"; }
.service-toggle { font-size: 0; }
.service.is-open .service-toggle { transform: none; color: var(--lime); }
.service.is-open .service-toggle::before { content: "—"; }
.service-detail { grid-column: 2/4; padding-top: 1.6rem; opacity: 0; transform: translateY(.6rem); animation: service-in .45s var(--ease) forwards; }
@keyframes service-in { to { opacity: 1; transform: none; } }
.service-detail ul { color: var(--silver); }
.service-stage { position: sticky; top: 9.5rem; min-height: 31rem; overflow: hidden; background: #101419; border: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.service-stage::before { content: ""; position: absolute; width: 135%; aspect-ratio: 1; left: -46%; bottom: -28%; border: 1px solid rgba(217,221,227,.25); border-radius: 50%; box-shadow: 0 0 0 2.9rem rgba(217,221,227,.025), 0 0 0 6.3rem rgba(217,221,227,.025); transform: rotate(-26deg); transition: transform .7s var(--ease); }
.service-stage::after { content: ""; position: absolute; right: 12%; top: 22%; width: 2.25rem; height: 2.25rem; background: var(--lime); box-shadow: 0 0 2rem rgba(200,255,61,.3); opacity: .85; transition: transform .7s var(--ease), top .7s var(--ease); }
.service-stage.is-shifted::before { transform: translate(18%, -8%) rotate(22deg); }
.service-stage.is-shifted::after { top: 42%; transform: scale(.65); }
.stage-top, .stage-bottom { position: relative; z-index: 1; }
.stage-index { display: block; font: 500 clamp(5.5rem, 10vw, 10rem)/.78 "DM Mono", monospace; letter-spacing: -.14em; color: var(--silver); transition: opacity .3s, transform .45s var(--ease); }
.stage-name { margin: 1rem 0 0; max-width: 12ch; font-size: 1.08rem; line-height: 1.12; letter-spacing: -.045em; }
.stage-bottom { padding-top: 1rem; border-top: 1px solid var(--line); }
.stage-system { margin: .55rem 0 0; color: var(--muted); font: .59rem/1.55 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .07em; }

/* Work: full-bleed capability studies with distinct spatial identities */
.work-intro { max-width: 37rem; margin-left: auto; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.case-study { min-height: 47rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr); border-top: 1px solid var(--line); }
.case-study + .case-study { margin-top: clamp(5rem, 12vw, 11rem); }
.case-study:nth-child(even) { grid-template-columns: minmax(19rem, .85fr) minmax(0, 1.15fr); }
.case-study:nth-child(even) .case-study-art { order: 2; }
.case-study-art { min-height: 32rem; position: relative; overflow: hidden; background: #171d1f; }
.case-study-art::before, .case-study-art::after { content: ""; position: absolute; transition: transform 1.1s var(--ease); }
.case-study:hover .case-study-art::before { transform: scale(1.04); }
.case-study-a .case-study-art { background: radial-gradient(circle at 65% 30%, #f5f6f7 0 1.8%, #9aa5a7 2% 15%, transparent 15.2%), linear-gradient(135deg, #0b0f10, #3a4c4b 64%, #111617); }
.case-study-a .case-study-art::before { width: 85%; aspect-ratio: 1; top: 17%; left: 8%; border-radius: 50%; border: 1px solid rgba(245,246,247,.32); box-shadow: 0 0 0 3.2rem rgba(245,246,247,.04), 0 0 0 8rem rgba(245,246,247,.03); }
.case-study-a .case-study-art::after { width: 72%; height: 29%; left: 14%; top: 37%; border: 1px solid rgba(200,255,61,.55); border-radius: 50%; transform: rotate(-23deg); }
.case-study-b .case-study-art { background: linear-gradient(145deg, #0c1016, #333d49); }
.case-study-b .case-study-art::before { width: 84%; aspect-ratio: 1; bottom: -27%; right: -4%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 1.8rem, rgba(245,246,247,.25) 1.85rem 1.9rem), radial-gradient(circle, #c1c6c9 0, #4e5d6a 45%, #12171d 66%); }
.case-study-b .case-study-art::after { height: 125%; width: 1px; left: 27%; top: -11%; background: rgba(245,246,247,.55); transform: rotate(37deg); }
.case-study-c .case-study-art { background: #d9dde3; }
.case-study-c .case-study-art::before { width: 92%; height: 60%; left: 4%; top: 20%; background: #10151a; clip-path: polygon(0 40%, 19% 12%, 39% 52%, 58% 18%, 79% 70%, 100% 33%, 100% 100%, 0 100%); }
.case-study-c .case-study-art::after { width: 9rem; aspect-ratio: 1; border-radius: 50%; top: 19%; left: 45%; background: var(--lime); box-shadow: 0 0 4rem rgba(200,255,61,.38); }
.case-study-copy { padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; background: #0c0f13; }
.case-study-copy h2 { max-width: 7.5ch; margin: auto 0 0; font-size: clamp(2.6rem, 4.5vw, 5.6rem); font-weight: 500; line-height: .91; letter-spacing: -.08em; }
.case-study-copy h2 em { font-family: "Playfair Display", serif; font-weight: 500; color: var(--silver); }
.case-study-copy .lede { margin: 1.6rem 0 0; max-width: 27rem; }
.study-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1rem; margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.study-meta span:not(.label) { display: block; margin-top: .55rem; color: var(--silver); font-size: .72rem; line-height: 1.45; }
.case-study .study-arrow { position: absolute; top: 1.4rem; right: 1.4rem; color: var(--ink); background: var(--paper); width: 2.35rem; height: 2.35rem; display: grid; place-items: center; }
.case-study:hover .study-arrow { background: var(--lime); }

/* Contact begins with an emotional resolution, then earns the practical form */
.contact-manifesto { padding: clamp(7rem, 12vw, 12rem) 0 clamp(4rem, 8vw, 8rem); position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.contact-manifesto::before { content: ""; position: absolute; height: 150%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(217,221,227,.18); right: -20%; top: -48%; box-shadow: 0 0 0 5rem rgba(217,221,227,.02), 0 0 0 11rem rgba(217,221,227,.02); }
.contact-manifesto .display { max-width: 10ch; position: relative; }
.contact-manifesto .display em { color: var(--lime); }
.contact-manifesto-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.contact-manifesto-grid p { max-width: 25rem; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.contact-manifesto-grid .label { justify-self: end; }
.contact-field { background: #0d1014; padding: clamp(3rem, 6vw, 6rem) 0; }
.contact-layout { grid-template-columns: .6fr 1.35fr; }
.contact-side { border-top: 1px solid var(--line); padding-top: 1.4rem; gap: 3.1rem; }
.contact-side p { color: var(--muted); }
.contact-form { border-top-color: rgba(217,221,227,.4); }
.form-field { padding: 1.25rem 0 .72rem; }
.form-field input, .form-field textarea, .form-field select { font-size: 1rem; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #69707a; }

/* restrained page entry and reveal */
@keyframes page-arrival { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }
#app { animation: page-arrival .45s var(--ease) both; }
.reveal { transform: translateY(1rem); transition-duration: .85s; }

@media (max-width: 800px) {
  .nav { height: 4.35rem; } .nav-links { inset: 4.35rem 0 auto; background: #0d1014; padding: 1.25rem var(--pad) 1.6rem; } .nav-links a { font: 500 .74rem/1 "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; padding: .9rem 0; } .nav-cta { margin-top: .9rem; }
  .hero { min-height: 45rem; } .hero::after { background: none; } .hero-grid { min-height: 45rem; } .hero-copy { padding-top: 5.5rem; } .hero-copy .display { font-size: clamp(3.65rem, 15vw, 5.6rem); max-width: 8.4ch; } .hero-copy .lede { max-width: 21rem; font-size: .9rem; } .hero-art { right: -17%; width: 98%; opacity: .64; } .orbital { width: 30rem; right: -37%; top: 50%; } .orbital-caption { display: none; }
  .section { padding: 6.5rem 0; } .manifesto { display: block; } .manifesto-copy { margin-top: 2rem; } .manifesto-aside { margin: 2rem 0 0; } .capabilities { margin-top: 4rem; } .capability { min-height: 6.6rem; grid-template-columns: 2.2rem 1fr auto; } .capability::after { display: none; }
  .case-grid { display: block; background: transparent; } .case { min-height: 28rem; margin-bottom: 1px; } .case h3 { font-size: 2.75rem; }
  .page-hero { padding-top: 8.9rem; min-height: 0; } .page-hero .display { font-size: clamp(3.15rem, 13.5vw, 4.9rem); } .page-hero .lede { max-width: 22rem; } .page-hero-index { bottom: 1.5rem; }
  .services-experience { grid-template-columns: 1fr; gap: 2.5rem; } .service { grid-template-columns: 2.3rem minmax(0,1fr) 2rem; } .service-copy { grid-column: 2; } .service-detail { grid-column: 2/4; } .service-stage { position: relative; top: auto; min-height: 17rem; order: -1; } .stage-index { font-size: 6.2rem; } .service-stage::before { width: 80%; left: 34%; bottom: -45%; }
  .case-study, .case-study:nth-child(even) { display: flex; flex-direction: column; min-height: 0; } .case-study:nth-child(even) .case-study-art { order: 0; } .case-study-art { min-height: 23rem; } .case-study-copy { min-height: 28rem; padding: 2rem var(--pad) 2.5rem; } .case-study-copy h2 { font-size: clamp(2.7rem, 12vw, 4.2rem); } .case-study + .case-study { margin-top: 5rem; }
  .contact-manifesto { padding-top: 6rem; } .contact-manifesto-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.75rem; } .contact-manifesto-grid .label { justify-self: start; } .contact-layout { grid-template-columns: 1fr; } .contact-side { gap: 2.4rem; } .contact-field { padding: 4.5rem 0; }
}
@media (max-width: 420px) { .hero { min-height: 43rem; } .hero-grid { min-height: 43rem; } .hero-copy { padding-top: 5.25rem; } .hero-copy .display { font-size: clamp(3.25rem, 15vw, 4.5rem); } .actions { margin-top: 1.8rem; } .button { min-height: 2.95rem; padding-inline: .8rem; letter-spacing: .02em; } .orbital { opacity: .8; } .case { min-height: 25rem; } .case h3 { font-size: 2.35rem; } }