@font-face {
  font-family: "GW Inter";
  src: local("Inter Variable"), local("InterVariable"),
       url("../fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #090909;
  --ink-2: #121212;
  --paper: #f2f0e8;
  --paper-2: #e8e6de;
  --muted: #8f8f8a;
  --line-dark: rgba(255, 255, 255, .16);
  --line-light: rgba(10, 10, 10, .18);
  --lime: #c8ff00;
  --max: 1480px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 8px;
  --header-h: 104px;
  --font-sans: "GW Inter", Inter, Arial, Helvetica, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--lime); color: var(--ink); }

.skip-link {
  position: fixed;
  left: 20px;
  top: -60px;
  z-index: 1000;
  background: var(--lime);
  color: var(--ink);
  padding: 12px 18px;
  transition: top .2s ease;
}
.skip-link:focus { top: 20px; }

.container { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-light { background: var(--paper); color: var(--ink); }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-h);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(9,9,9,.78);
  backdrop-filter: blur(18px);
  border-color: var(--line-dark);
}
.brand { display: inline-flex; flex-direction: column; width: max-content; line-height: 1; }
.brand__name { display: flex; align-items: baseline; gap: .28em; white-space: nowrap; font-size: clamp(20px, 1.65vw, 29px); letter-spacing: .025em; }
.brand__primary { font-weight: 900; letter-spacing: .055em; }
.brand__secondary { font-weight: 650; letter-spacing: .025em; }
.brand__dot { color: var(--lime); font-weight: 900; margin-left: -.18em; }
.brand__meta { margin-top: 6px; font: 600 9px/1 var(--font-mono); letter-spacing: .14em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(30px, 3.2vw, 62px); }
.desktop-nav a { font: 650 clamp(13px, .78vw, 16px)/1 var(--font-sans); letter-spacing: .055em; text-transform: uppercase; position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--lime); transition: right .2s ease; }
.desktop-nav a:hover::after { right: 0; }
.desktop-cta { justify-self: end; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid var(--lime);
  min-height: 54px;
  padding: 0 26px;
  font: 700 13px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.button:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }
.button--small { min-height: 50px; padding-inline: 24px; }
.button--black { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.button--black:hover { background: transparent; color: var(--ink); }

.menu-button { display: none; border: 0; background: none; color: inherit; padding: 8px 0; text-transform: uppercase; font: 700 12px/1 var(--font-mono); letter-spacing: .08em; align-items: center; gap: 12px; }
.menu-icon { width: 22px; display: grid; gap: 5px; }
.menu-icon i { display: block; height: 1px; background: currentColor; transition: transform .2s ease; }
.menu-button[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu { display: none; }

.hero { min-height: 100svh; padding-top: var(--header-h); overflow: hidden; }
.hero__grid { min-height: calc(100svh - var(--header-h) - 68px); display: grid; grid-template-columns: 56% 44%; }
.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(70px, 10vh, 130px); }
.eyebrow, .section-kicker { margin: 0 0 26px; text-transform: uppercase; font: 600 11px/1.4 var(--font-mono); letter-spacing: .08em; }
.eyebrow { color: var(--lime); display: flex; align-items: center; gap: 16px; }
.eyebrow span { display: inline-block; width: 26px; height: 1px; background: currentColor; }
.hero h1 { margin: 0; font-size: clamp(72px, 8.9vw, 154px); line-height: .82; letter-spacing: -.07em; text-transform: uppercase; font-weight: 900; max-width: 8ch; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero__lead { max-width: 620px; margin: clamp(28px, 4vh, 48px) 0 0; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.55; color: #dfdfdc; }
.hero__actions { margin-top: 34px; display: flex; align-items: center; gap: clamp(24px, 4vw, 58px); }
.text-link { display: inline-flex; align-items: center; gap: 14px; font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .11em; }
.text-link span { color: var(--lime); font-size: 18px; }
.text-link--dark { color: var(--ink); }
.text-link--lime { color: var(--lime); }

.hero__graphic { position: relative; border-left: 1px solid var(--line-dark); min-height: 100%; }
.hero__monogram {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__g-mark {
  position: absolute;
  width: min(94%, 715px);
  height: auto;
  left: 56%;
  top: 53%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.hero__g-main,
.hero__g-guide,
.hero__g-bridge,
.hero__g-inner-bridge,
.hero__g-return,
.hero__g-tail,
.hero__g-axis,
.hero__g-reference {
  vector-effect: non-scaling-stroke;
}
.hero__g-main {
  stroke-width: 3.15;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 12px rgba(242,240,232,.025));
  animation: draw-g 1.12s .12s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero__g-guide {
  stroke-width: 2.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-g .94s .30s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero__g-bridge {
  stroke-width: 3.05;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(200,255,0,.09));
  animation: draw-accent .40s .68s ease forwards;
}
.hero__g-inner-bridge {
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .92;
  filter: drop-shadow(0 0 5px rgba(200,255,0,.045));
  animation: draw-accent .30s .78s ease forwards;
}
.hero__g-return {
  stroke-width: 3.15;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 9px rgba(200,255,0,.12));
  animation: draw-accent .42s .84s ease forwards;
}
.hero__g-tail {
  stroke: rgba(242,242,235,.40);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-accent .22s 1.08s ease forwards;
}
.hero__g-axis {
  stroke-width: 1;
  opacity: 0;
  animation: fade-g .7s .66s ease forwards;
}
.hero__g-axis--a { stroke: rgba(242,242,235,.07); }
.hero__g-axis--b { stroke: rgba(242,242,235,.035); }
.hero__gw-w,
.hero__gw-w-accent {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.hero__gw-w {
  stroke-width: 2.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(200,255,0,.045));
  animation: draw-accent .72s 1.04s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero__gw-w-accent {
  stroke-width: 2.95;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 10px rgba(200,255,0,.12));
  animation: draw-accent .28s 1.56s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero__g-reference {
  stroke-width: 1.05;
  opacity: 0;
  animation: fade-g .55s .82s ease forwards;
}
.hero__g-node,
.hero__g-reference-node {
  fill: var(--lime);
  stroke: none;
  opacity: 0;
  animation: node-in .25s 1.20s ease forwards;
}
.hero__g-reference-node { animation-delay: 1.28s; }
.hero__g-signature {
  position: absolute;
  left: 64%;
  top: calc(53% + min(22vw, 258px));
  width: min(87%, 650px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 24px;
  align-items: start;
  opacity: 0;
  animation: g-signature-in .62s 1.92s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero__g-signature-line {
  display: block;
  width: 100%;
  height: 1.25px;
  margin-top: 7px;
  background: linear-gradient(90deg, var(--lime), rgba(200,255,0,.08));
  transform: scaleX(0);
  transform-origin: left center;
  animation: g-signature-line .48s 1.82s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__g-signature-copy {
  display: grid;
  gap: 7px;
  transform: translateY(7px);
  opacity: 0;
  animation: g-signature-copy .52s 2.06s cubic-bezier(.2,.75,.2,1) forwards;
}
.hero__g-signature strong,
.hero__g-signature small {
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: .14em;
}
.hero__g-signature strong {
  color: var(--paper);
  font-size: 12.5px;
  line-height: 1.15;
  font-weight: 700;
}
.hero__g-signature small {
  color: #8f908b;
  font-size: 9.75px;
  line-height: 1.4;
  font-weight: 600;
}
@keyframes draw-g { to { stroke-dashoffset: 0; } }
@keyframes draw-accent { to { stroke-dashoffset: 0; } }
@keyframes fade-g { to { opacity: 1; } }
@keyframes node-in {
  0% { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
  100% { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; }
}
@keyframes g-signature-line { to { transform: scaleX(1); } }
@keyframes g-signature-in { to { opacity: 1; } }
@keyframes g-signature-copy { to { opacity: 1; transform: none; } }
.hero__coordinate { position: absolute; right: 18px; top: 12%; writing-mode: vertical-rl; font: 500 10px/1 var(--font-mono); letter-spacing: .16em; color: #a7a7a3; }
@media (max-width: 1100px) {
  .hero__g-mark { width: min(98%, 665px); left: 57%; top: 53%; }
}
.scroll-label { position: absolute; right: 18px; bottom: 26px; display: grid; gap: 12px; text-align: center; text-transform: uppercase; font: 600 10px/1 var(--font-mono); letter-spacing: .12em; transition: color .2s ease; cursor: pointer; }
.scroll-label b { font-size: 20px; font-weight: 300; transition: transform .2s ease; }
.scroll-label:hover, .scroll-label:focus-visible { color: var(--lime); }
.scroll-label:hover b, .scroll-label:focus-visible b { transform: translateY(4px); }
.scroll-label:focus-visible { outline: 1px solid var(--lime); outline-offset: 8px; }

.ticker { height: 68px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); display: flex; align-items: center; overflow: hidden; }
.ticker__inner { width: 100%; display: flex; align-items: center; justify-content: space-around; gap: clamp(26px, 3vw, 52px); padding-inline: var(--gutter); white-space: nowrap; }
.ticker span { font: 650 clamp(14px, 1.02vw, 18px)/1 var(--font-sans); text-transform: uppercase; letter-spacing: .055em; }
.ticker i { width: clamp(20px, 2.2vw, 36px); height: 2px; background: var(--lime); opacity: .78; }

.intro {
  padding-block: clamp(82px, 9vw, 150px) 0;
  overflow: hidden;
  scroll-margin-top: var(--header-h);
}
.intro__shell { display: grid; gap: 0; }
.intro__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding-bottom: clamp(30px, 4vw, 54px);
  border-bottom: 1px solid var(--line-light);
}
.section-kicker b { color: #9aca00; }
.section-kicker--dark { color: #b6b6b0; }
.section-kicker--dark b { color: var(--lime); }
.intro__micro {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  font: 650 11px/1.4 var(--font-mono);
  letter-spacing: .105em;
  color: #41413d;
}
.intro__micro i { width: 28px; height: 1px; background: #9aca00; }
.intro__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: end;
  padding-block: clamp(28px, 3.8vw, 58px) clamp(34px, 4.2vw, 62px);
}
.intro h2, .services h2, .about h2, .testimonial h2 {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(34px, 4vw, 68px);
  line-height: .97;
  letter-spacing: -.05em;
}
.intro h2 {
  font-size: clamp(64px, 7.4vw, 118px);
  line-height: .84;
  letter-spacing: -.07em;
  max-width: 9.6ch;
}
.intro h2 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink);
  text-stroke: 1.6px var(--ink);
}
.intro__lead-block { max-width: 520px; padding-bottom: 4px; }
.intro__statement {
  margin: 0;
  font-size: clamp(24px, 2.15vw, 35px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 650;
}
.body-copy { max-width: 620px; margin: 24px 0 0; color: #40403d; line-height: 1.72; font-size: 16px; }
.intro__lead-block .text-link { margin-top: 32px; }
.intro__principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  margin-bottom: clamp(34px, 4.5vw, 66px);
}
.intro-principle {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: clamp(28px, 3vw, 46px) clamp(22px, 3vw, 46px);
  border-right: 1px solid var(--line-light);
}
.intro-principle:first-child { padding-left: 0; }
.intro-principle:last-child { border-right: 0; padding-right: 0; }
.intro-principle > span {
  padding-top: 4px;
  color: #9aca00;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .08em;
}
.intro-principle h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(19px, 1.7vw, 27px);
  letter-spacing: -.035em;
}
.intro-principle p {
  margin: 12px 0 0;
  max-width: 340px;
  color: #55554f;
  font-size: 14px;
  line-height: 1.68;
}
.featured-stage {
  --project-lift: 138px;
  --project-scale: .80;
  --project-veil: .28;
  --project-saturation: .72;
  --project-contrast: .99;
  --stage-dark-opacity: 0;
  --project-copy-opacity: 0;
  --project-copy-y: 24px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 154svh;
  padding-inline: var(--gutter);
  background: var(--paper);
}
.featured-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 44%, rgba(62,70,55,.34), transparent 30%),
    linear-gradient(180deg, rgba(9,9,9,0) 0%, rgba(9,9,9,.14) 13%, rgba(9,9,9,.74) 30%, rgba(9,9,9,.97) 43%, var(--ink) 55%, var(--ink) 100%);
  opacity: var(--stage-dark-opacity);
  will-change: opacity;
}
.featured-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 64% 38%, rgba(200,255,0,.065), transparent 31%);
  opacity: var(--stage-dark-opacity);
}
.featured-stage__inner {
  position: sticky;
  z-index: 1;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  width: 100%;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.featured-stage .featured-card {
  width: min(80vw, 1540px);
  transform: translateY(var(--project-lift)) scale(var(--project-scale));
  transform-origin: center center;
  will-change: transform;
}
.featured-stage .project-visual {
  filter: saturate(var(--project-saturation)) contrast(var(--project-contrast));
  will-change: filter;
  box-shadow: 0 38px 110px rgba(0,0,0,.22);
}
.featured-stage .project-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(242,240,232,.46), rgba(242,240,232,.13) 42%, rgba(9,9,9,.08)),
    rgba(242,240,232,.16);
  opacity: var(--project-veil);
  mix-blend-mode: screen;
}
.featured-stage .featured-card__topline,
.featured-stage .project-overlay {
  opacity: var(--project-copy-opacity);
  transform: translateY(var(--project-copy-y));
  will-change: opacity, transform;
}

.featured-card { min-width: 0; }
.featured-card--wide { width: 100%; }
.project-visual {
  position: relative;
  aspect-ratio: 1.45;
  overflow: hidden;
  border-radius: var(--radius);
  background: #70716f;
}
.featured-card--wide .project-visual {
  aspect-ratio: 2.25;
  min-height: 470px;
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 22%, rgba(200,255,0,.10), transparent 19%),
    linear-gradient(118deg, #d7d8d5 0 31%, #888d8b 31.2% 42%, #262b2a 42.2% 62%, #0b0d0d 62.2% 100%);
  box-shadow: 0 30px 70px rgba(17,17,15,.12);
}
.project-visual--licht::before {
  content: "";
  position: absolute;
  inset: 16% -7% -26% 31%;
  border: 1px solid rgba(255,255,255,.30);
  transform: skewY(-14deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, transparent 0 82px, rgba(255,255,255,.08) 83px 84px),
    linear-gradient(180deg, rgba(255,255,255,.14), transparent);
}
.building-grid {
  position: absolute;
  inset: 31% 0 0 39%;
  background: repeating-linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,.24) 79px 80px);
  transform: skewY(-4deg);
}
.featured-card__topline {
  position: absolute;
  z-index: 3;
  inset: 28px 30px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,.82);
  text-transform: uppercase;
  font: 650 10px/1 var(--font-mono);
  letter-spacing: .12em;
}
.featured-card__topline span:first-child { color: var(--lime); }
.project-overlay {
  position: absolute;
  z-index: 3;
  inset: auto auto 10% 6%;
  color: #fff;
  text-shadow: 0 1px 18px rgba(0,0,0,.5);
}
.project-overlay p { margin: 0 0 10px; color: var(--lime); text-transform: uppercase; font: 700 10px/1 var(--font-mono); letter-spacing: .11em; }
.project-overlay h3 { margin: 0; font-size: clamp(42px, 5.3vw, 86px); text-transform: uppercase; line-height: .88; letter-spacing: -.055em; }
.project-overlay span { display: block; margin-top: 14px; text-transform: uppercase; font: 600 10px/1.4 var(--font-mono); letter-spacing: .12em; color: rgba(255,255,255,.72); }
.project-overlay a { display: inline-block; margin-top: 30px; color: var(--lime); text-transform: uppercase; font: 700 10px/1 var(--font-mono); letter-spacing: .1em; }
.featured-card__mark {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: -12%;
  font-size: clamp(150px, 22vw, 360px);
  line-height: .72;
  font-weight: 900;
  letter-spacing: -.11em;
  color: rgba(255,255,255,.055);
  user-select: none;
}

.projects { padding-block: clamp(80px, 9vw, 140px); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, 430px); gap: 50px; align-items: end; margin-bottom: 50px; }
.section-heading h2 { margin: 0; font-size: clamp(48px, 6vw, 92px); line-height: .88; text-transform: uppercase; letter-spacing: -.06em; font-weight: 500; }
.section-heading > p { margin: 0 0 8px; color: #b8b8b3; line-height: 1.6; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.project-card a { display: block; }
.project-card__visual { height: clamp(270px, 30vw, 460px); border: 1px solid var(--line-dark); border-radius: var(--radius); background: #171717; position: relative; overflow: hidden; padding: clamp(26px, 3vw, 46px); }
.project-no { position: absolute; top: 18px; left: 18px; color: var(--lime); font: 700 14px/1 var(--font-mono); z-index: 2; }
.mock-browser { position: absolute; width: 78%; aspect-ratio: 1.45; left: 50%; top: 50%; transform: translate(-50%, -42%); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; overflow: hidden; box-shadow: 0 40px 70px rgba(0,0,0,.38); padding: 36px 24px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .mock-browser { transform: translate(-50%, -47%) scale(1.035); }
.mock-bar { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.12); }
.mock-browser p { position: relative; z-index: 2; font-size: clamp(16px, 1.7vw, 30px); font-weight: 900; line-height: 1.02; }
.mock-hd { font-size: clamp(60px, 7vw, 110px); font-weight: 1000; letter-spacing: -.09em; opacity: .18; position: absolute; right: 12px; bottom: -10px; }
.project-card__visual--hd .mock-browser { background: linear-gradient(135deg, #0e0e0e, #242424); }
.project-card__visual--gb .mock-browser { background: linear-gradient(155deg, #1a2b42, #4380a8); }
.project-card__visual--wll .mock-browser { background: linear-gradient(155deg, #e6e6e3, #b8bbb8); color: #151515; }
.energy-lines, .people-lines { position: absolute; inset: auto -10% 0 25%; height: 55%; border-top: 1px solid rgba(255,255,255,.38); transform: skewY(-20deg); background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.12) 31px 32px); }
.people-lines { background: radial-gradient(circle at 30% 20%, #555 0 8%, transparent 8.5%), radial-gradient(circle at 60% 15%, #777 0 8%, transparent 8.5%), linear-gradient(90deg, rgba(0,0,0,.1), transparent); border: 0; transform: none; inset: 45% 0 0 0; }
.project-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 2px 0; }
.project-card h3 { margin: 0; text-transform: uppercase; font-size: 18px; }
.project-card__meta span { font: 600 9px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: #aaa; }
.project-card__meta .arrow { color: var(--lime); font-size: 18px; }
.projects__footer { display: flex; justify-content: flex-end; margin-top: 46px; }

.services { padding-block: clamp(75px, 8vw, 130px); }
.services__grid { display: grid; grid-template-columns: 34% 66%; gap: clamp(40px, 7vw, 110px); }
.services__intro { max-width: 420px; margin: 28px 0 0; color: #555550; font-size: 15px; line-height: 1.7; }
.services__list { border-top: 1px solid var(--line-light); }
.service { border-bottom: 1px solid var(--line-light); }
.service__trigger { width: 100%; border: 0; background: none; color: inherit; min-height: 82px; display: grid; grid-template-columns: 46px minmax(150px, .9fr) 1.4fr 30px; gap: 16px; align-items: center; text-align: left; cursor: pointer; padding: 0; }
.service__no { color: #9aca00; font: 700 12px/1 var(--font-mono); }
.service__trigger strong { text-transform: uppercase; font-size: 15px; }
.service__short { font-size: 12px; color: #555550; line-height: 1.45; }
.service__trigger i { font-style: normal; font-size: 28px; font-weight: 300; justify-self: end; transition: transform .2s ease; }
.service.is-open .service__trigger i { transform: rotate(45deg); }
.service__body { padding: 0 46px 24px; }
.service__body p { max-width: 650px; margin: 0; line-height: 1.65; color: #464640; }

.manifesto { padding-block: clamp(70px, 8vw, 120px); }
.manifesto__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; }
.manifesto h2 { margin: 0; text-transform: uppercase; font-size: clamp(56px, 7.3vw, 115px); letter-spacing: -.07em; line-height: .78; }
.manifesto h2 em { color: var(--lime); font-style: normal; }
.manifesto__copy { color: #d1d1ce; line-height: 1.6; }
.balance { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 44px; font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.balance div { height: 1px; background: #41413f; position: relative; }
.balance div::before { content: ""; position: absolute; inset: 0 35% 0 0; background: var(--lime); }
.balance i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); left: 65%; top: 50%; transform: translate(-50%,-50%); }

.stats { padding-block: 44px; border-bottom: 1px solid var(--line-light); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__grid > div { display: grid; place-items: center; min-height: 110px; text-align: center; border-right: 1px solid var(--line-light); }
.stats__grid > div:last-child { border-right: 0; }
.stats strong { display: block; font-size: clamp(34px, 4vw, 64px); letter-spacing: -.05em; }
.stats span { margin-top: 8px; font: 700 9px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }

.process { padding-block: clamp(80px, 9vw, 140px); }
.process__heading h2 { margin: 0; text-transform: uppercase; font-size: clamp(44px, 5vw, 80px); line-height: .95; letter-spacing: -.05em; }
.process__steps { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.process-step { position: relative; padding-top: 22px; border-top: 1px dashed rgba(200,255,0,.35); }
.process-step > span { color: var(--lime); font: 700 12px/1 var(--font-mono); }
.process-icon { margin-top: 24px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font: 500 18px/1 var(--font-mono); }
.process-step h3 { margin: 24px 0 0; text-transform: uppercase; font-size: 16px; }
.process-step p { margin: 10px 0 0; color: #aaa; line-height: 1.55; font-size: 13px; max-width: 230px; }

.about { padding-block: clamp(80px, 9vw, 140px); }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 140px); align-items: center; }
.about__portrait-image { width: 100%; aspect-ratio: .92; display: block; object-fit: cover; object-position: center; border-radius: var(--radius); }
.portrait-placeholder { aspect-ratio: .92; background: linear-gradient(145deg, #272724, #b1b0a9); position: relative; overflow: hidden; display: grid; place-items: center; border-radius: var(--radius); }
.portrait-placeholder::before { content: ""; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #6b6b66; top: 14%; }
.portrait-placeholder::after { content: ""; position: absolute; width: 78%; height: 54%; border-radius: 50% 50% 0 0; background: #555550; bottom: -8%; }
.portrait-placeholder span { position: relative; z-index: 2; font-size: clamp(70px, 11vw, 170px); color: rgba(242,240,232,.16); font-weight: 900; }
.portrait-placeholder small { position: absolute; z-index: 3; bottom: 18px; right: 18px; font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--paper); }
.lead-copy { font-size: clamp(18px, 1.8vw, 28px); font-weight: 600; margin: 30px 0 0; }
.about__facts { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.about__facts > div { padding: 20px 18px 20px 0; min-width: 0; }
.about__facts > div + div { padding-left: 18px; border-left: 1px solid var(--line-light); }
.about__facts span { display: block; margin-bottom: 9px; color: #8fb900; font: 700 9px/1 var(--font-mono); letter-spacing: .08em; }
.about__facts strong { display: block; font-size: 13px; line-height: 1.35; text-transform: uppercase; letter-spacing: -.01em; }
.about .text-link { margin-top: 34px; }

.testimonial { padding: 0 0 clamp(80px, 9vw, 140px); }
.testimonial__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 8vw, 140px); align-items: start; border-top: 1px solid var(--line-light); padding-top: clamp(60px, 7vw, 100px); }
blockquote { margin: 0; position: relative; }
.quote-mark { display: block; color: #9aca00; font-size: 80px; line-height: .6; font-weight: 900; }
blockquote p { margin: 24px 0 0; font-size: clamp(23px, 2.8vw, 43px); line-height: 1.18; letter-spacing: -.03em; }
blockquote footer { margin-top: 28px; font: 600 11px/1.5 var(--font-mono); color: #555; text-transform: uppercase; letter-spacing: .07em; }

.contact-cta { background: var(--lime); color: var(--ink); padding-block: clamp(72px, 9vw, 140px); }
.contact-cta__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }
.contact-cta h2 { margin: 0; font-size: clamp(66px, 9vw, 145px); line-height: .82; text-transform: uppercase; letter-spacing: -.07em; }
.contact-cta p { font-size: clamp(22px, 2vw, 32px); max-width: 400px; }
.contact-cta .button { margin-top: 22px; }
.contact-mail { display: block; margin-top: 28px; font: 700 12px/1 var(--font-mono); }

.site-footer { padding-block: 70px 38px; }
.footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 40px 80px; align-items: start; }
.brand--footer .brand__name { font-size: 27px; }
.site-footer address { font-style: normal; color: #c1c1bd; line-height: 1.7; font-size: 13px; }
.footer__contact { display: grid; gap: 10px; font-size: 13px; }
.footer__legal { grid-column: 1 / -1; border-top: 1px solid var(--line-dark); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 20px 32px; text-transform: uppercase; color: #aaa; font: 600 9px/1 var(--font-mono); letter-spacing: .1em; }
.footer__legal span { margin-right: auto; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .featured-stage {
    --project-lift: 0px !important;
    --project-scale: 1 !important;
    --project-veil: .04 !important;
    --project-saturation: 1 !important;
    --project-contrast: 1.05 !important;
    --stage-dark-opacity: 1 !important;
    --project-copy-opacity: 1 !important;
    --project-copy-y: 0px !important;
    min-height: auto;
    padding-block: clamp(48px, 6vw, 92px) clamp(76px, 8vw, 124px);
  }
  .featured-stage__inner {
    position: relative;
    top: auto;
    height: auto;
  }
}

@media (max-width: 1080px) {
  :root { --header-h: 78px; }
  .desktop-nav, .desktop-cta { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .menu-button { display: flex; }
  .mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0;
    background: rgba(9,9,9,.98);
    padding: 50px var(--gutter);
    flex-direction: column;
    gap: 0;
  }
  .mobile-menu:not([hidden]) { display: flex; }
  .mobile-menu a { padding: 24px 0; border-bottom: 1px solid var(--line-dark); font-size: clamp(28px, 7vw, 56px); text-transform: uppercase; letter-spacing: -.04em; font-weight: 800; }
  .mobile-menu a:last-child { color: var(--lime); }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__graphic { position: absolute; inset: var(--header-h) 0 68px 52%; border-left: 1px solid var(--line-dark); opacity: .58; }
  .hero__g-signature { display: none; }
  .hero__content { min-height: calc(100svh - var(--header-h) - 68px); padding-right: 26%; }
  .services__grid, .about__grid { grid-template-columns: 1fr; }
  .intro__hero { grid-template-columns: 1fr; gap: 40px; }
  .intro__lead-block { max-width: 720px; }
  .intro__principles { grid-template-columns: 1fr 1fr; }
  .intro-principle:nth-child(2) { border-right: 0; }
  .intro-principle:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line-light); padding-left: 0; }
  .featured-card { width: 100%; margin-left: 0; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card:last-child { grid-column: 1 / -1; width: calc(50% - 14px); }
  .services__grid { gap: 50px; }
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__copy { max-width: 600px; margin-left: auto; }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .about__portrait { max-width: 650px; }
  .testimonial__grid { grid-template-columns: 1fr; }
  .contact-cta__grid { grid-template-columns: 1fr; }
  .contact-cta__grid > div { max-width: 560px; margin-left: auto; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --header-h: 70px; }
  .brand__name { font-size: 18px; gap: .22em; }
  .brand__meta { font-size: 7px; letter-spacing: .11em; }
  .hero__content { padding-right: 0; min-height: calc(100svh - var(--header-h) - 44px); justify-content: center; }
  .hero h1 { font-size: clamp(68px, 22vw, 104px); max-width: 5.5ch; line-height: .82; }
  .hero__lead { max-width: 420px; font-size: 16px; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 28px; }
  .hero__graphic { inset: var(--header-h) -24% 50px 40%; opacity: .38; }
  .hero__coordinate, .scroll-label { display: none; }
  .ticker { height: 50px; }
  .ticker__inner { justify-content: flex-start; overflow: hidden; gap: 20px; }
  .ticker span { font-size: 11px; }
  .ticker i { width: 16px; }

  .projects, .services, .manifesto, .process, .about { padding-block: 72px; }
  .intro { padding-block: 72px 0; }
  .intro h2, .services h2, .about h2, .testimonial h2 { font-size: clamp(38px, 11vw, 58px); }
  .intro h2 { font-size: clamp(58px, 17vw, 88px); }
  .intro__top { display: grid; gap: 16px; }
  .intro__micro { justify-self: start; }
  .intro__hero { padding-block: 44px 50px; gap: 34px; }
  .intro__statement { font-size: 23px; }
  .intro__principles { grid-template-columns: 1fr; margin-bottom: 52px; }
  .intro-principle,
  .intro-principle:first-child,
  .intro-principle:last-child { grid-column: auto; border-right: 0; border-top: 1px solid var(--line-light); padding: 24px 0; }
  .intro-principle:first-child { border-top: 0; }
  .featured-stage {
    --project-lift: 72px;
    min-height: 126svh;
    padding-inline: var(--gutter);
  }
  .featured-stage__inner {
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
  }
  .featured-stage .featured-card { width: calc(100vw - (var(--gutter) * 2)); }
  .featured-card { width: 100%; }
  .featured-card--wide .project-visual { aspect-ratio: .92; min-height: 540px; }
  .project-visual { aspect-ratio: 1.08; }
  .project-visual--licht::before { inset: 22% -40% -8% 20%; }
  .building-grid { inset: 40% -15% 0 23%; }
  .featured-card__topline { inset: 20px; }
  .project-overlay { inset: auto 20px 9%; }
  .project-overlay h3 { font-size: clamp(46px, 15vw, 72px); }
  .project-overlay span { max-width: 280px; }
  .featured-card__mark { right: 1%; bottom: -2%; font-size: 54vw; }

  .section-heading { grid-template-columns: 1fr; margin-bottom: 34px; }
  .section-heading h2 { font-size: clamp(54px, 15vw, 82px); }
  .project-grid { grid-template-columns: 1fr; }
  .project-card:last-child { grid-column: auto; width: auto; }
  .project-card__visual { height: min(110vw, 520px); }
  .projects__footer { justify-content: flex-start; }

  .service__trigger { min-height: 88px; grid-template-columns: 36px 1fr 24px; gap: 12px; }
  .service__short { grid-column: 2 / 4; padding-bottom: 18px; margin-top: -16px; }
  .service__trigger i { grid-column: 3; grid-row: 1; }
  .service__body { padding: 0 0 22px 48px; }

  .manifesto h2 { font-size: clamp(58px, 16vw, 88px); }
  .manifesto__copy { margin-left: 0; }
  .stats { padding-block: 20px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid > div { min-height: 130px; border-bottom: 1px solid var(--line-light); }
  .stats__grid > div:nth-child(2) { border-right: 0; }
  .stats__grid > div:nth-child(3), .stats__grid > div:nth-child(4) { border-bottom: 0; }

  .process__steps { grid-template-columns: 1fr; margin-top: 50px; }
  .process-step { padding: 20px 0 24px 74px; }
  .process-step > span { position: absolute; left: 0; top: 24px; }
  .process-icon { position: absolute; left: 0; top: 48px; width: 48px; height: 48px; }
  .process-step h3 { margin-top: 0; }

  .about__grid { gap: 44px; }
  .about__portrait { max-width: none; }
  .about__facts { grid-template-columns: 1fr; }
  .about__facts > div { padding: 16px 0; }
  .about__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-light); }
  .testimonial { padding-bottom: 72px; }
  blockquote p { font-size: clamp(24px, 7.6vw, 38px); }

  .contact-cta { padding-block: 72px; }
  .contact-cta h2 { font-size: clamp(68px, 20vw, 110px); }
  .contact-cta__grid > div { margin-left: 0; }

  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__legal { grid-column: auto; }
  .footer__legal span { width: 100%; margin-right: 0; }
}

/* V21 — Featured project context / mini case study */
.featured-case {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  padding: clamp(92px, 9vw, 150px) 0 clamp(88px, 8vw, 132px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.featured-case__shell { position: relative; }
.featured-case__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-dark);
}
.featured-case__top .section-kicker { margin: 0; }
.featured-case__client {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #a8a8a2;
  text-transform: uppercase;
  font: 650 10px/1 var(--font-mono);
  letter-spacing: .12em;
}
.featured-case__client i { width: 28px; height: 1px; background: var(--lime); }
.featured-case__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
  gap: clamp(64px, 8vw, 150px);
  align-items: start;
  padding: clamp(58px, 6vw, 94px) 0 clamp(64px, 7vw, 106px);
}
.featured-case h3 {
  margin: 0;
  max-width: 10.6ch;
  text-transform: uppercase;
  font-size: clamp(54px, 6.4vw, 104px);
  line-height: .88;
  letter-spacing: -.06em;
}
.featured-case h3 em {
  display: inline-block;
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.2px rgba(242,240,232,.72);
  text-stroke: 1.2px rgba(242,240,232,.72);
}
.featured-case__copy { padding-top: 7px; }
.featured-case__lead {
  margin: 0 0 26px;
  max-width: 560px;
  color: var(--paper);
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -.025em;
}
.featured-case__copy > p:not(.featured-case__lead) {
  margin: 0;
  max-width: 560px;
  color: #aaa9a4;
  font-size: 15px;
  line-height: 1.75;
}
.featured-case__copy .text-link { margin-top: 36px; }
.featured-case__scope {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.featured-case__scope-item {
  min-height: 118px;
  padding: 29px clamp(20px, 2vw, 34px);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  border-right: 1px solid var(--line-dark);
}
.featured-case__scope-item:first-child { padding-left: 0; }
.featured-case__scope-item:last-child { border-right: 0; padding-right: 0; }
.featured-case__scope-item span {
  color: var(--lime);
  font: 700 10px/1.2 var(--font-mono);
  letter-spacing: .08em;
}
.featured-case__scope-item strong {
  text-transform: uppercase;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

@media (max-width: 1080px) {
  .featured-case__grid { grid-template-columns: 1fr; gap: 42px; }
  .featured-case h3 { max-width: 11ch; }
  .featured-case__copy { max-width: 700px; margin-left: auto; }
  .featured-case__scope { grid-template-columns: repeat(2, 1fr); }
  .featured-case__scope-item:nth-child(2) { border-right: 0; }
  .featured-case__scope-item:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .featured-case__scope-item:nth-child(3) { padding-left: 0; }
}

@media (max-width: 720px) {
  .featured-case { padding-block: 72px 76px; }
  .featured-case__top { align-items: flex-start; flex-direction: column; padding-bottom: 22px; }
  .featured-case__grid { padding-block: 46px 54px; gap: 32px; }
  .featured-case h3 { font-size: clamp(50px, 14vw, 76px); }
  .featured-case__lead { font-size: 22px; }
  .featured-case__copy > p:not(.featured-case__lead) { font-size: 14px; }
  .featured-case__scope { grid-template-columns: 1fr; }
  .featured-case__scope-item,
  .featured-case__scope-item:first-child,
  .featured-case__scope-item:nth-child(3),
  .featured-case__scope-item:last-child {
    min-height: 86px;
    padding: 22px 0;
    border-right: 0;
    border-top: 1px solid var(--line-dark);
  }
  .featured-case__scope-item:first-child { border-top: 0; }
}

/* V22 — Sticky handoff from featured project into the case study.
   The case study begins entering while the project is still pinned. As the
   sticky corridor ends, the project naturally leaves through the top while
   the case content continues upward. */
@media (min-width: 721px) {
  .featured-case {
    margin-top: -28svh;
    background:
      linear-gradient(
        180deg,
        rgba(9,9,9,0) 0,
        rgba(9,9,9,.10) 7svh,
        rgba(9,9,9,.48) 15svh,
        rgba(9,9,9,.90) 24svh,
        var(--ink) 30svh,
        var(--ink) 100%
      );
    border-top: 0;
  }
}

@media (max-width: 720px) {
  /* Keep the mobile handoff simpler and avoid excessive content overlap. */
  .featured-case {
    margin-top: -12svh;
    background:
      linear-gradient(180deg, rgba(9,9,9,0) 0, var(--ink) 15svh, var(--ink) 100%);
  }
}

/* V23 — True sticky handoff for the featured Licht Loidl reference.
   The project itself pins just below the fixed header. Its parent is sized so
   the case-study section reaches the image exactly as the sticky corridor ends.
   From that point onward, image and case content leave the viewport normally. */
.intro { overflow: visible; }

@media (min-width: 721px) {
  .featured-stage {
    overflow: visible;
    min-height: var(--featured-stage-height, 120svh);
  }

  .featured-stage__inner {
    position: sticky;
    top: calc(var(--header-h) + 14px);
    height: auto;
    width: 100%;
    display: block;
  }

  .featured-stage .featured-card {
    margin-inline: auto;
  }

  .featured-case {
    margin-top: 0;
    padding-top: clamp(54px, 5vw, 78px);
    background: var(--ink);
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .featured-case__grid {
    padding-top: clamp(44px, 4.5vw, 70px);
  }
}

@media (max-width: 720px) {
  .intro { overflow: hidden; }
  .featured-stage {
    overflow: clip;
    min-height: 126svh;
  }
  .featured-case { margin-top: -12svh; }
}

/* V24 — Horizontal overflow hardening without breaking sticky positioning.
   `overflow-x: clip` does not create a scroll container, so the featured
   project's sticky behavior remains intact. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* V23 needed visible overflow for the sticky corridor. The decorative
   background used to extend 2px beyond that corridor and could therefore
   increase the document scrollWidth. Keep it exactly inside its parent. */
.featured-stage::before {
  inset: 0;
}

/* Defensive containment for full-width layout rows. */
.site-header,
.hero,
.ticker,
.intro,
.featured-stage,
.featured-case,
.projects,
.services,
.manifesto,
.stats,
.process,
.about,
.testimonials,
.contact-cta,
.site-footer {
  max-width: 100%;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* V25 — Real Licht Loidl photography for the featured reference.
   The photograph stays recognisable and colourful; a restrained CSS overlay
   provides enough contrast for the project metadata and blends the image into
   the dark case-study handoff. */
.project-visual--licht {
  background: #0a0c10;
}

.project-visual--licht .project-visual__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transform: scale(1.01);
}

.project-visual--licht::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 0;
  transform: none;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,5,7,.16) 0%, rgba(3,5,7,.06) 38%, rgba(3,5,7,.32) 100%),
    linear-gradient(90deg, rgba(3,5,7,.30) 0%, rgba(3,5,7,.10) 52%, rgba(3,5,7,.14) 100%);
}

@media (max-width: 720px) {
  .project-visual--licht .project-visual__image {
    object-position: 42% 50%;
  }

  .project-visual--licht::before {
    background:
      linear-gradient(180deg, rgba(3,5,7,.18) 0%, rgba(3,5,7,.08) 34%, rgba(3,5,7,.38) 100%),
      linear-gradient(90deg, rgba(3,5,7,.28), rgba(3,5,7,.10));
  }
}


/* V26 — Clear reference handoff + brighter photography.
   The visitor is told before the image that this is a project reference.
   The photograph itself stays vivid; copy contrast is created locally instead
   of darkening the complete image. */
.featured-reference-intro {
  width: min(80vw, 1540px);
  margin: 0 auto;
  padding: clamp(56px, 6vw, 92px) 0 clamp(22px, 2vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #30302d;
  text-transform: uppercase;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
}
.featured-reference-intro p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.featured-reference-intro p i {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--lime);
}
.featured-reference-intro p span { color: #11110f; }
.featured-reference-intro > span { color: #77776f; }

/* Reduce the global wash over the photograph. */
.project-visual--licht::before {
  background:
    linear-gradient(180deg, rgba(3,5,7,.07) 0%, rgba(3,5,7,.015) 43%, rgba(3,5,7,.15) 100%),
    linear-gradient(90deg, rgba(3,5,7,.08) 0%, rgba(3,5,7,.01) 56%, rgba(3,5,7,.04) 100%);
}

/* Keep the metadata readable with a local glass/scrim instead of a dark photo. */
.project-overlay {
  width: min(620px, 48%);
  padding: 24px 26px 25px;
  background: linear-gradient(135deg, rgba(7,8,8,.82), rgba(7,8,8,.64));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-shadow: none;
}
.project-overlay h3 { font-size: clamp(40px, 4.6vw, 76px); }
.project-overlay span { color: rgba(255,255,255,.76); }

.featured-card__topline {
  text-shadow: 0 1px 18px rgba(0,0,0,.62);
}
.featured-card__topline span:first-child { color: rgba(255,255,255,.9); }

@media (max-width: 720px) {
  .featured-reference-intro {
    width: calc(100% - (var(--gutter) * 2));
    padding-top: 44px;
    font-size: 9px;
  }
  .featured-reference-intro > span { display: none; }
  .project-visual--licht::before {
    background:
      linear-gradient(180deg, rgba(3,5,7,.08) 0%, rgba(3,5,7,.02) 36%, rgba(3,5,7,.18) 100%);
  }
  .project-overlay {
    width: calc(100% - 40px);
    padding: 20px;
    background: linear-gradient(135deg, rgba(7,8,8,.86), rgba(7,8,8,.70));
  }
}


/* V27 - Brighter Licht Loidl photography + slightly stronger microtype.
   The full photograph stays close to the original exposure. Readability is
   handled by the local project scrim, not by darkening the entire image. */
.featured-stage {
  --project-veil: .10;
  --project-saturation: .90;
  --project-brightness: 1.10;
}
.featured-stage .project-visual {
  filter: brightness(var(--project-brightness)) saturate(var(--project-saturation)) contrast(var(--project-contrast));
}
.project-visual--licht::before {
  background:
    linear-gradient(180deg, rgba(3,5,7,.015) 0%, rgba(3,5,7,0) 48%, rgba(3,5,7,.045) 100%),
    linear-gradient(90deg, rgba(3,5,7,.018) 0%, rgba(3,5,7,0) 62%, rgba(3,5,7,.015) 100%);
}
.project-overlay {
  background: linear-gradient(135deg, rgba(7,8,8,.84), rgba(7,8,8,.68));
}
.featured-reference-intro { font-size: 12px; }
.featured-card__topline { font-size: 11.5px; }
.project-overlay p { font-size: 11.5px; }
.project-overlay span {
  max-width: 520px;
  font-size: 11.5px;
  line-height: 1.55;
}
.project-overlay a { font-size: 11.5px; }

@media (max-width: 720px) {
  .featured-stage {
    --project-veil: .08;
    --project-saturation: .94;
    --project-brightness: 1.07;
  }
  .featured-reference-intro { font-size: 10px; }
  .featured-card__topline { font-size: 10px; }
  .project-overlay p,
  .project-overlay span,
  .project-overlay a { font-size: 10.5px; }
  .project-visual--licht::before {
    background: linear-gradient(180deg, rgba(3,5,7,.02), rgba(3,5,7,0) 58%, rgba(3,5,7,.06));
  }
}


/* V28 — Stronger project-reference handoff + restrained monochrome-to-colour reveal.
   The reference is announced before the image as a deliberate editorial beat.
   The photograph itself starts almost monochrome and regains a controlled amount
   of colour only during the real sticky phase. Copy readability remains local. */
.featured-reference-intro {
  width: min(80vw, 1540px);
  margin: 0 auto;
  padding: clamp(54px, 6vw, 88px) 0 clamp(30px, 3vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(32px, 6vw, 96px);
  color: #11110f;
  text-transform: none;
  font-family: var(--font-sans);
  letter-spacing: normal;
}
.featured-reference-intro__title {
  min-width: 0;
}
.featured-reference-intro__title > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: #7e9f00;
  text-transform: uppercase;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
}
.featured-reference-intro__title > span::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--lime);
}
.featured-reference-intro__title strong {
  display: block;
  text-transform: uppercase;
  font-size: clamp(34px, 4.3vw, 70px);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 850;
}
.featured-reference-intro__title strong em {
  color: transparent;
  -webkit-text-stroke: 1px #3b3b37;
  font-style: normal;
  font-weight: 800;
}
.featured-reference-intro__meta {
  min-width: min(310px, 28vw);
  padding-bottom: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 22px;
  align-items: end;
}
.featured-reference-intro__meta strong {
  grid-column: 1;
  text-transform: uppercase;
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.featured-reference-intro__meta span {
  grid-column: 1;
  color: #686862;
  text-transform: uppercase;
  font: 700 11px/1.35 var(--font-mono);
  letter-spacing: .10em;
}
.featured-reference-intro__meta i {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #93ba00;
  font: 400 clamp(24px, 2.2vw, 36px)/1 var(--font-sans);
  font-style: normal;
}

/* Keep the photograph visually clean. The former tiny top-line inside the image
   has been removed, so the image can breathe and the reference intro does the
   orientation work before the sticky scene begins. */
.featured-stage {
  --project-veil: 0;
  --project-saturation: .08;
  --project-brightness: 1.055;
  --project-contrast: 1.015;
}
.featured-stage .project-visual::after {
  display: none;
}
.project-visual--licht::before {
  background: linear-gradient(180deg, rgba(3,5,7,.008), rgba(3,5,7,0) 68%, rgba(3,5,7,.025));
}
.project-overlay {
  width: min(650px, 50%);
  padding: 26px 28px 28px;
  background:
    linear-gradient(135deg, rgba(7,8,8,.88), rgba(7,8,8,.72));
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.project-overlay p,
.project-overlay span,
.project-overlay a {
  font-size: 12px;
}
.project-overlay span {
  max-width: 560px;
  line-height: 1.58;
}

@media (max-width: 720px) {
  .featured-reference-intro {
    width: calc(100% - (var(--gutter) * 2));
    padding: 44px 0 26px;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .featured-reference-intro__title > span { font-size: 9.5px; }
  .featured-reference-intro__title strong { font-size: clamp(38px, 12vw, 58px); }
  .featured-reference-intro__meta {
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr auto;
    padding-top: 18px;
    border-top: 1px solid var(--line-light);
  }
  .featured-reference-intro__meta strong { font-size: 18px; }
  .featured-reference-intro__meta span { font-size: 9.5px; }
  .featured-stage {
    --project-saturation: .18;
    --project-brightness: 1.04;
  }
  .project-overlay {
    width: calc(100% - 40px);
    padding: 20px;
  }
}


/* V29 — Final polish for the Licht Loidl reference.
   Start with a little residual colour, let colour return during the real
   sticky phase, keep the photograph globally clean, and let the local copy
   scrim dissolve softly into the image. */
.featured-reference-intro__title > span {
  color: #779600;
}
.featured-reference-intro__title strong {
  font-size: clamp(42px, 5vw, 82px);
}
.featured-reference-intro__meta strong {
  text-transform: uppercase;
  font-size: clamp(16px, 1.35vw, 22px);
  letter-spacing: -.02em;
}
.featured-reference-intro__meta span {
  color: #73736c;
}

.featured-stage {
  --project-saturation: .18;
  --project-brightness: 1.045;
  --project-contrast: 1.015;
}

/* No global dark wash: the photograph itself stays open and photographic. */
.project-visual--licht::before {
  background: none;
}

/* Local readability only. The dark field fades out instead of ending as a box. */
.project-overlay {
  width: min(760px, 58%);
  padding: 28px 88px 30px 30px;
  background: linear-gradient(
    90deg,
    rgba(7,8,8,.92) 0%,
    rgba(7,8,8,.86) 44%,
    rgba(7,8,8,.68) 64%,
    rgba(7,8,8,.28) 82%,
    rgba(7,8,8,0) 100%
  );
  border: 0;
  box-shadow: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.project-overlay > * {
  max-width: 560px;
}
.project-overlay p,
.project-overlay span,
.project-overlay a {
  font-size: 12.25px;
}

@media (max-width: 720px) {
  .featured-reference-intro__title strong {
    font-size: clamp(42px, 13vw, 62px);
  }
  .featured-stage {
    --project-saturation: .22;
    --project-brightness: 1.035;
  }
  .project-overlay {
    width: calc(100% - 32px);
    padding: 22px 44px 22px 22px;
    background: linear-gradient(
      90deg,
      rgba(7,8,8,.92) 0%,
      rgba(7,8,8,.84) 58%,
      rgba(7,8,8,.48) 78%,
      rgba(7,8,8,.12) 100%
    );
  }
}

/* V30 — Simplified reference handoff.
   The client name is deliberately withheld until the image itself. The intro
   only communicates that a real project reference is about to begin. */
.featured-reference-intro--simple {
  width: min(80vw, 1540px);
  margin: 0 auto;
  padding: clamp(54px, 5.2vw, 78px) 0 clamp(30px, 2.8vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid rgba(17,17,15,.16);
}
.featured-reference-intro__simple-copy {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2.2vw, 34px);
  min-width: 0;
}
.featured-reference-intro__index {
  flex: 0 0 auto;
  color: #7e9f00;
  font: 800 clamp(13px, 1vw, 16px)/1 var(--font-mono);
  letter-spacing: .10em;
}
.featured-reference-intro__simple-copy strong {
  display: block;
  color: #11110f;
  text-transform: uppercase;
  font-size: clamp(30px, 3.05vw, 52px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 850;
}
.featured-reference-intro__arrow {
  flex: 0 0 auto;
  color: #8bae00;
  font: 400 clamp(26px, 2.2vw, 38px)/1 var(--font-sans);
  transform: translateY(3px);
}

@media (max-width: 720px) {
  .featured-reference-intro--simple {
    width: calc(100% - (var(--gutter) * 2));
    padding: 38px 0 24px;
    gap: 20px;
  }
  .featured-reference-intro__simple-copy {
    gap: 14px;
  }
  .featured-reference-intro__index {
    font-size: 11px;
  }
  .featured-reference-intro__simple-copy strong {
    font-size: clamp(28px, 9vw, 42px);
  }
  .featured-reference-intro__arrow {
    font-size: 28px;
  }
}

/* V31 — light editorial portfolio after featured case */
.portfolio {
  position: relative;
  padding-block: clamp(92px, 10vw, 165px);
  overflow: clip;
}
.portfolio__shell { position: relative; }
.portfolio__heading {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 430px);
  align-items: end;
  gap: clamp(40px, 7vw, 110px);
  padding-bottom: clamp(46px, 5vw, 76px);
  border-bottom: 1px solid var(--line-light);
}
.portfolio__heading .section-kicker { margin-bottom: 28px; }
.portfolio__heading h2 {
  margin: 0;
  font-size: clamp(66px, 8vw, 128px);
  line-height: .82;
  letter-spacing: -.07em;
  text-transform: uppercase;
  font-weight: 900;
}
.portfolio__heading > p {
  margin: 0 0 7px;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.65;
  color: #55554f;
}
.portfolio-feature { padding-top: clamp(58px, 7vw, 104px); }
.portfolio-project__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  color: #55554f;
  font: 650 10px/1.2 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.portfolio-project__topline b { color: #91b900; }
.portfolio-feature__image,
.portfolio-project__image {
  position: relative;
  display: block;
  overflow: hidden;
  background: #d9d8d1;
  border: 1px solid rgba(9,9,9,.16);
}
.portfolio-feature__image { aspect-ratio: 2.02 / 1; }
.portfolio-project__image { aspect-ratio: 1.78 / 1; }
.portfolio-feature__image img,
.portfolio-project__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.75,.2,1), filter .5s ease;
}
.portfolio-feature__image:hover img,
.portfolio-project__image:hover img { transform: scale(1.018); }
.portfolio-project__view {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 12px 14px;
  background: rgba(9,9,9,.88);
  color: var(--lime);
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.portfolio-feature__image:hover .portfolio-project__view,
.portfolio-project__image:hover .portfolio-project__view { opacity: 1; transform: translateY(0); }
.portfolio-feature__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding-top: 24px;
}
.portfolio-feature__meta h3,
.portfolio-project__meta h3 {
  margin: 0;
  text-transform: uppercase;
  font-weight: 850;
  letter-spacing: -.04em;
}
.portfolio-feature__meta h3 { font-size: clamp(31px, 3vw, 52px); }
.portfolio-feature__meta p {
  max-width: 780px;
  margin: 12px 0 0;
  color: #595953;
  line-height: 1.65;
  font-size: clamp(13px, 1vw, 16px);
}
.portfolio-project__link {
  padding-bottom: 3px;
  color: #32322f;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.portfolio-project__link:hover { color: #6c8b00; }
.portfolio-duo {
  display: grid;
  grid-template-columns: 1.38fr .92fr;
  gap: clamp(24px, 4vw, 58px);
  align-items: start;
  margin-top: clamp(92px, 10vw, 160px);
}
.portfolio-project--narrow { margin-top: clamp(62px, 7vw, 110px); }
.portfolio-project__meta { padding-top: 20px; }
.portfolio-project__meta h3 { font-size: clamp(22px, 2vw, 34px); }
.portfolio-project__meta p {
  max-width: 620px;
  margin: 9px 0 0;
  color: #5b5b55;
  line-height: 1.55;
  font-size: clamp(12px, .9vw, 14px);
}
.portfolio__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(70px, 8vw, 120px);
  padding-top: 30px;
  border-top: 1px solid var(--line-light);
}

@media (max-width: 1080px) {
  .portfolio__heading { grid-template-columns: 1fr; gap: 30px; }
  .portfolio__heading > p { max-width: 620px; margin-left: auto; }
  .portfolio-duo { grid-template-columns: 1.15fr .85fr; gap: 26px; }
}

@media (max-width: 720px) {
  .portfolio { padding-block: 78px; }
  .portfolio__heading h2 { font-size: clamp(64px, 19vw, 92px); }
  .portfolio__heading > p { margin-left: 0; }
  .portfolio-project__topline { align-items: flex-start; flex-direction: column; gap: 7px; }
  .portfolio-feature__image { aspect-ratio: 1.18 / 1; }
  .portfolio-feature__image img { object-position: 50% 50%; }
  .portfolio-feature__meta { grid-template-columns: 1fr; gap: 20px; }
  .portfolio-duo { grid-template-columns: 1fr; margin-top: 78px; gap: 70px; }
  .portfolio-project--narrow { margin-top: 0; }
  .portfolio-project__image { aspect-ratio: 1.22 / 1; }
  .portfolio-project__view { opacity: 1; transform: none; font-size: 8px; }
  .portfolio__footer { justify-content: flex-start; }
}

/* V33 — Services are intentionally separated from the portfolio and put the
   core positioning "Individuell statt Baukasten" first. */
.services {
  position: relative;
  background: var(--paper-2);
  border-top: 1px solid rgba(9,9,9,.24);
  border-bottom: 1px solid rgba(9,9,9,.12);
  padding-block: clamp(88px, 9vw, 145px);
}
.services::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(90px, 10vw, 190px);
  height: 2px;
  background: var(--lime);
}
.services__grid {
  grid-template-columns: 39% 61%;
  gap: clamp(48px, 7vw, 112px);
}
.services__title h2 {
  margin: 24px 0 0;
  max-width: 8.4ch;
  font-size: clamp(58px, 6.1vw, 104px);
  line-height: .84;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.services__title h2 em {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  font-style: normal;
}
.services__intro {
  max-width: 510px;
  margin-top: 34px;
  color: #4f4f49;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.72;
}
.services__intro strong {
  color: var(--ink);
  font-weight: 800;
}
.services__list { border-top-color: rgba(9,9,9,.28); }
.service { border-bottom-color: rgba(9,9,9,.22); }
.service__trigger {
  min-height: 88px;
  grid-template-columns: 46px minmax(160px, .9fr) 1.4fr 30px;
}
.service__trigger strong { font-size: 16px; }
.service__short { font-size: 12.5px; color: #55554f; }
.service__body { padding: 2px 46px 30px; }
.service__body p {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.72;
  color: #3f3f3a;
}
.service.is-open { background: rgba(255,255,255,.14); }

@media (max-width: 1080px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__title h2 { max-width: 11ch; }
}

@media (max-width: 720px) {
  .services { padding-block: 76px; }
  .services__title h2 {
    font-size: clamp(50px, 14vw, 74px);
    max-width: 9ch;
  }
  .services__title h2 em { -webkit-text-stroke-width: 1px; }
  .service__trigger {
    grid-template-columns: 34px 1fr 28px;
    gap: 10px;
    min-height: 78px;
  }
  .service__short {
    grid-column: 2 / 3;
    padding-bottom: 14px;
    margin-top: -12px;
  }
  .service__trigger i { grid-column: 3; grid-row: 1 / span 2; }
  .service__body { padding: 0 0 26px 44px; }
}

/* V37 — navigation, scroll cue, contact section and shared project enquiry modal */
body.modal-open { overflow: hidden; }

.site-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 56px);
}
.desktop-nav {
  justify-content: center;
  gap: clamp(18px, 1.65vw, 32px);
  min-width: 0;
}
.desktop-nav a {
  white-space: nowrap;
  font-size: clamp(12px, .68vw, 14px);
}
.desktop-nav a.is-active::after,
.desktop-nav a[aria-current="location"]::after { right: 0; }
.desktop-nav a.is-active,
.desktop-nav a[aria-current="location"] { color: var(--paper); }
.button { background: transparent; color: inherit; cursor: pointer; }
.desktop-cta { white-space: nowrap; }

section[id],
.featured-reference-intro[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

.hero { position: relative; }
.hero-scroll-cue {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 92px;
  padding: 8px 10px 6px;
  color: rgba(242,240,232,.78);
  text-align: center;
  transition: color .2s ease, transform .2s ease;
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible { color: var(--lime); transform: translateX(-50%) translateY(-2px); }
.hero-scroll-cue:focus-visible { outline: 1px solid var(--lime); outline-offset: 6px; }
.hero-scroll-cue__mouse {
  width: 25px;
  height: 39px;
  border: 1.5px solid currentColor;
  border-radius: 16px;
  position: relative;
  display: block;
}
.hero-scroll-cue__mouse i {
  position: absolute;
  width: 2px;
  height: 7px;
  left: 50%;
  top: 7px;
  border-radius: 2px;
  background: var(--lime);
  transform: translateX(-50%);
  animation: hero-mouse-wheel 1.65s cubic-bezier(.45,0,.35,1) infinite;
}
.hero-scroll-cue__label {
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
}
.hero-scroll-cue small {
  font: 600 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(242,240,232,.44);
}
@keyframes hero-mouse-wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  25% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

.mobile-menu__cta {
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: none;
  color: var(--lime);
  padding: 24px 0;
  text-align: left;
  font-size: clamp(28px, 7vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.04em;
  font-weight: 800;
  cursor: pointer;
}
.mobile-menu a.is-active { color: var(--lime); }

.contact {
  position: relative;
  background: var(--paper-2);
  border-top: 1px solid rgba(9,9,9,.20);
  padding-block: clamp(90px, 9vw, 145px);
}
.contact::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(90px, 10vw, 190px);
  height: 2px;
  background: var(--lime);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(300px, .72fr) minmax(420px, 1.15fr);
  gap: clamp(46px, 6vw, 96px);
  align-items: start;
}
.contact__intro h2 {
  margin: 0;
  max-width: 7ch;
  font-size: clamp(58px, 6.4vw, 106px);
  line-height: .84;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.contact__intro > p:last-child {
  max-width: 420px;
  margin: 34px 0 0;
  color: #4a4a45;
  font-size: 16px;
  line-height: 1.7;
}
.contact__details { border-top: 1px solid rgba(9,9,9,.22); }
.contact__detail {
  padding: 20px 0 23px;
  border-bottom: 1px solid rgba(9,9,9,.18);
}
.contact__detail span {
  display: block;
  margin-bottom: 10px;
  color: #8fb900;
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.contact__detail strong,
.contact__detail a,
.contact__detail address {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  font-style: normal;
  font-weight: 650;
}
.contact__detail a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }

.contact-form,
.project-form { min-width: 0; }
.contact-form__heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(9,9,9,.22);
}
.contact-form__heading h3 { font-size: 19px; text-transform: uppercase; letter-spacing: -.02em; }
.contact-form__heading span { color: #686862; font-size: 12px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.form-field {
  display: grid;
  gap: 9px;
  padding: 19px 0 15px;
  border-bottom: 1px solid rgba(9,9,9,.20);
}
.form-field--wide { grid-column: 1 / -1; }
.form-field > span {
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #686862;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 16px/1.5 var(--font-sans);
  padding: 4px 0;
  border-radius: 0;
}
.form-field textarea { resize: vertical; min-height: 112px; }
.form-field select { cursor: pointer; }
.form-field:focus-within { border-bottom-color: var(--ink); }
.form-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}
.form-status { margin: 0; max-width: 360px; color: #575752; font-size: 12px; line-height: 1.5; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0 0;
  color: #b9b9b4;
  font-size: 11px;
  line-height: 1.55;
}
.form-check input { margin: 2px 0 0; accent-color: var(--lime); }
.form-check a { text-decoration: underline; text-underline-offset: 3px; }

.contact-cta__copy {
  max-width: 520px !important;
  margin-top: 16px !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.65 !important;
}

.project-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: stretch end;
}
.project-modal[hidden] { display: none; }
.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.project-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 92vw);
  height: 100%;
  overflow-y: auto;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(42px, 6vw, 84px);
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(44px, 6vw, 86px);
  align-content: center;
  box-shadow: -30px 0 80px rgba(0,0,0,.22);
  animation: modal-in .42s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes modal-in { from { transform: translateX(42px); opacity: 0; } to { transform: none; opacity: 1; } }
.project-modal__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--paper);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.project-modal__close:hover { border-color: var(--lime); color: var(--lime); }
.project-modal__intro h2 {
  margin: 0;
  font-size: clamp(62px, 6vw, 104px);
  line-height: .82;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.project-modal__intro > p:not(.section-kicker) {
  max-width: 400px;
  margin: 28px 0 0;
  color: #c4c4bf;
  font-size: 15px;
  line-height: 1.7;
}
.project-modal__direct { display: grid; gap: 8px; margin-top: 34px; font: 650 11px/1.4 var(--font-mono); letter-spacing: .05em; }
.project-modal__direct a:hover { color: var(--lime); }
.project-modal .form-field { border-bottom-color: var(--line-dark); }
.project-modal .form-field > span { color: #9a9a95; }
.project-modal .form-field input,
.project-modal .form-field textarea,
.project-modal .form-field select { color: var(--paper); }
.project-modal .form-field select { background: var(--ink); }
.project-modal .form-field:focus-within { border-bottom-color: var(--lime); }
.project-modal .form-status { color: #aaa9a5; }

.site-header,
.contact,
.project-modal,
.contact-cta { max-width: 100%; }

@media (max-width: 1240px) {
  .desktop-nav, .desktop-cta { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .menu-button { display: flex; }
  .mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0;
    background: rgba(9,9,9,.98);
    padding: 42px var(--gutter);
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
  }
  .mobile-menu:not([hidden]) { display: flex; }
}

@media (max-width: 1080px) {
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .contact-form { grid-column: 1 / -1; }
  .project-modal__dialog { grid-template-columns: 1fr; align-content: start; padding-top: 82px; }
}

@media (max-width: 720px) {
  .hero-scroll-cue {
    bottom: 58px;
    min-width: auto;
    gap: 5px;
  }
  .hero-scroll-cue__mouse { width: 21px; height: 33px; }
  .hero-scroll-cue small { display: none; }
  .hero-scroll-cue__label { font-size: 8px; }
  .contact { padding-block: 76px; }
  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .contact__intro h2 { font-size: clamp(56px, 17vw, 84px); }
  .contact-form { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--wide { grid-column: auto; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .project-modal__dialog {
    width: 100%;
    padding: 74px 20px 34px;
    gap: 44px;
  }
  .project-modal__close { top: 16px; right: 20px; }
  .project-modal__intro h2 { font-size: clamp(58px, 20vw, 92px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue__mouse i { animation: none; opacity: 1; }
  .project-modal__dialog { animation: none; }
}


/* V38 — clearer navigation wording, contact layout and roomier enquiry modal */
.contact__grid {
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.18fr);
  gap: clamp(70px, 8vw, 138px);
  align-items: start;
}
.contact__intro { min-width: 0; }
.contact__intro h2 {
  max-width: 9ch;
  font-size: clamp(58px, 5.8vw, 98px);
}
.contact__intro h2 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.4px var(--ink);
  text-stroke: 1.4px var(--ink);
}
.contact__intro > p:last-of-type {
  max-width: 560px;
  margin-top: 30px;
}
.contact__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(42px, 5vw, 70px);
  border-top: 1px solid rgba(9,9,9,.22);
}
.contact__detail {
  min-width: 0;
  padding: 20px 22px 24px 0;
}
.contact__detail:nth-child(odd) { border-right: 1px solid rgba(9,9,9,.16); }
.contact__detail:nth-child(even) { padding-left: 24px; }
.contact__detail strong,
.contact__detail a,
.contact__detail address {
  overflow-wrap: anywhere;
}
.contact-form { min-width: 0; }
.contact-form__heading { align-items: center; }
.contact-form__heading h3 { font-size: clamp(19px, 1.25vw, 23px); }
.contact-form__heading span { max-width: 240px; text-align: right; line-height: 1.45; }
.form-field--message {
  padding-top: 24px;
  border-bottom: 0;
}
.form-field--message textarea {
  display: block;
  min-height: 150px;
  margin-top: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(9,9,9,.22);
  background: rgba(255,255,255,.15);
  line-height: 1.55;
}
.form-field--message:focus-within textarea { border-color: var(--ink); }
.form-field textarea::placeholder,
.form-field input::placeholder { color: #92928c; opacity: 1; }

.project-modal__dialog {
  width: min(1240px, 96vw);
  padding: clamp(44px, 5vw, 76px);
  grid-template-columns: minmax(230px, .58fr) minmax(0, 1.42fr);
  gap: clamp(48px, 5.5vw, 86px);
}
.project-modal__intro h2 {
  font-size: clamp(50px, 4.6vw, 82px);
  line-height: .88;
}
.project-modal__intro > p:not(.section-kicker) {
  max-width: 330px;
  margin-top: 24px;
  font-size: 14px;
}
.project-modal__direct { margin-top: 26px; }
.project-form { align-self: center; }
.project-form__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
}
.project-form__heading h3 {
  color: var(--paper);
  font-size: clamp(20px, 1.45vw, 25px);
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.project-form__heading span {
  max-width: 300px;
  color: #9a9a95;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}
.project-modal .form-field { padding-block: 20px 16px; }
.project-modal .form-field input,
.project-modal .form-field textarea,
.project-modal .form-field select { font-size: 17px; }
.project-modal .form-field--message { border-bottom: 0; }
.project-modal .form-field--message textarea {
  min-height: 160px;
  border-color: rgba(242,240,232,.22);
  background: rgba(255,255,255,.025);
}
.project-modal .form-field--message:focus-within textarea { border-color: var(--lime); }

@media (max-width: 1360px) {
  .desktop-nav { gap: clamp(14px, 1.15vw, 22px); }
  .desktop-nav a { font-size: clamp(10.5px, .76vw, 12.5px); }
}

@media (max-width: 1080px) {
  .contact__grid { grid-template-columns: 1fr; gap: 64px; }
  .contact__intro { max-width: 820px; }
  .contact-form { grid-column: auto; }
  .project-modal__dialog {
    grid-template-columns: 1fr;
    width: min(760px, 100vw);
    align-content: start;
    padding-top: 82px;
  }
  .project-modal__intro h2 { font-size: clamp(54px, 10vw, 78px); }
  .project-form__heading { margin-top: 8px; }
}

@media (max-width: 720px) {
  .contact__details { grid-template-columns: 1fr; }
  .contact__detail:nth-child(odd) { border-right: 0; }
  .contact__detail:nth-child(even) { padding-left: 0; }
  .contact-form__heading,
  .project-form__heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .contact-form__heading span,
  .project-form__heading span { text-align: left; }
  .form-field--message textarea { min-height: 140px; }
  .project-modal__dialog { width: 100%; }
}

/* V40 — mobile-first polish: compact hero, readable service rail, static mobile
   featured project, robust full-screen menu, and legal modals. */
.site-header { z-index: 1100; }
.mobile-menu { z-index: 1050; }
.project-modal { z-index: 2000; }

body.menu-open .site-header {
  background: var(--ink) !important;
  border-color: var(--line-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.inline-legal-link,
.footer__legal button {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.inline-legal-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inline-legal-link:hover,
.inline-legal-link:focus-visible,
.footer__legal button:hover,
.footer__legal button:focus-visible { color: var(--lime); }

.legal-modal {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: grid;
  place-items: stretch end;
}
.legal-modal[hidden] { display: none; }
.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.legal-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 94vw);
  height: 100%;
  overflow-y: auto;
  padding: clamp(60px, 7vw, 100px);
  background: var(--ink);
  color: var(--paper);
  box-shadow: -30px 0 80px rgba(0,0,0,.24);
  animation: modal-in .42s cubic-bezier(.2,.75,.2,1) both;
}
.legal-modal__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--paper);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.legal-modal__close:hover,
.legal-modal__close:focus-visible { border-color: var(--lime); color: var(--lime); }
.legal-modal__heading {
  padding-bottom: clamp(34px, 5vw, 66px);
  border-bottom: 1px solid var(--line-dark);
}
.legal-modal__heading h2 {
  margin: 0;
  font-size: clamp(62px, 7vw, 112px);
  line-height: .84;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.legal-modal__content {
  width: min(100%, 720px);
  margin-left: auto;
  padding-top: clamp(34px, 5vw, 68px);
}
.legal-modal__block {
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--line-dark);
}
.legal-modal__block > span {
  display: block;
  margin-bottom: 12px;
  color: var(--lime);
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.legal-modal__block strong,
.legal-modal__block p {
  margin: 0;
  color: var(--paper);
  font-size: 16px;
  line-height: 1.7;
}
.legal-modal__block strong { font-size: 20px; line-height: 1.45; }
.legal-modal__block strong + p { margin-top: 14px; }
.legal-modal__block a:hover { color: var(--lime); }
.legal-modal__note {
  margin: 30px 0 0;
  color: #9d9d97;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1240px) {
  .mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 1050;
    background: var(--ink);
    padding: 32px var(--gutter) 42px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 720px) {
  :root { --header-h: 70px; }

  /* Hero: keep every word inside the viewport even around 360–400px wide. */
  .hero__grid { min-height: calc(100svh - var(--header-h) - 78px); }
  .hero__content {
    min-height: calc(100svh - var(--header-h) - 78px);
    padding-block: 52px 94px;
  }
  .hero h1 {
    max-width: none;
    width: 100%;
    font-size: clamp(52px, 16.5vw, 70px);
    line-height: .84;
    letter-spacing: -.065em;
  }
  .hero__lead { margin-top: 28px; font-size: 15.5px; line-height: 1.58; }
  .hero__actions { margin-top: 28px; gap: 24px; }
  .hero__graphic { inset: var(--header-h) -38% 78px 48%; opacity: .32; }
  .hero-scroll-cue { bottom: 88px; }

  /* Four services become a calm 2×2 rail instead of being clipped horizontally. */
  .ticker { height: 78px; overflow: hidden; }
  .ticker__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: 100%;
    gap: 0;
    padding: 0 var(--gutter);
    white-space: normal;
  }
  .ticker i { display: none; }
  .ticker span {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 9.5px;
    line-height: 1.15;
    letter-spacing: .045em;
  }
  .ticker span:nth-of-type(even) { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.08); }
  .ticker span:nth-of-type(n+3) { border-bottom: 0; }

  /* Mobile navigation must always sit above the page, independent of scroll position. */
  .mobile-menu {
    inset: var(--header-h) 0 0;
    padding-top: 22px;
  }
  .mobile-menu a,
  .mobile-menu__cta {
    padding: 17px 0;
    font-size: clamp(22px, 7.2vw, 32px);
  }

  /* Mobile reference: intentionally no sticky. A short editorial handoff is much
     more predictable on touch devices and avoids the huge reserved scroll corridor. */
  .featured-reference-intro--simple { padding-top: 34px; padding-bottom: 20px; }
  .featured-stage {
    min-height: auto !important;
    padding: 0 var(--gutter) !important;
    overflow: visible !important;
    background: var(--paper);
    --project-lift: 0px !important;
    --project-scale: 1 !important;
    --stage-dark-opacity: 0 !important;
    --project-copy-opacity: 1 !important;
    --project-copy-y: 0px !important;
  }
  .featured-stage::before,
  .featured-stage::after { display: none !important; }
  .featured-stage__inner {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    display: block !important;
  }
  .featured-stage .featured-card {
    width: 100% !important;
    transform: none !important;
  }
  .featured-stage .project-visual {
    filter: saturate(.58) brightness(1.035) contrast(1.03) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
  }
  .featured-card--wide .project-visual {
    min-height: 0;
    aspect-ratio: .82;
  }
  .project-overlay {
    inset: auto 12px 12px !important;
    width: calc(100% - 24px) !important;
    padding: 18px 28px 18px 18px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .project-overlay h3 { font-size: clamp(36px, 11.5vw, 50px); }
  .project-overlay p,
  .project-overlay span,
  .project-overlay a { font-size: 9.5px; }
  .project-overlay a { margin-top: 18px; }
  .featured-case {
    margin-top: 0 !important;
    padding-top: 62px !important;
    background: var(--ink) !important;
  }
  .featured-case__grid { padding-top: 38px; }

  .legal-modal__dialog {
    width: 100%;
    padding: 74px 20px 38px;
  }
  .legal-modal__close { top: 16px; right: 20px; }
  .legal-modal__heading h2 { font-size: clamp(52px, 17vw, 78px); }
  .legal-modal__content { margin-left: 0; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: clamp(50px, 15.8vw, 63px); }
  .brand__name { font-size: 16px; }
  .brand__meta { font-size: 6.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-modal__dialog { animation: none; }
}
@media (max-width: 1240px) {
  .mobile-menu a:last-of-type { color: inherit; }
  .mobile-menu a.is-active { color: var(--lime); }
  .mobile-menu__cta { color: var(--lime); }
}

/* V41 — mobile legal readability */
@media (max-width: 720px) {
  .footer__legal {
    gap: 18px 28px;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .08em;
  }
  .footer__legal button {
    font-size: inherit;
    line-height: inherit;
    padding-block: 5px;
  }

  .legal-modal__dialog {
    padding: 72px 22px 42px;
  }
  .legal-modal__heading {
    padding-bottom: 28px;
  }
  .legal-modal__heading h2 {
    font-size: clamp(38px, 11.5vw, 50px);
    line-height: .9;
    letter-spacing: -.05em;
    white-space: normal;
    overflow-wrap: normal;
  }
  .legal-modal__content {
    padding-top: 28px;
  }
  .legal-modal__block {
    padding: 24px 0 27px;
  }
  .legal-modal__block > span {
    margin-bottom: 13px;
    font-size: 10.5px;
    line-height: 1.25;
  }
  .legal-modal__block strong,
  .legal-modal__block p {
    font-size: 17px;
    line-height: 1.65;
  }
  .legal-modal__block strong {
    font-size: 21px;
    line-height: 1.4;
  }
  .legal-modal__note {
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.65;
  }
}

@media (max-width: 400px) {
  .legal-modal__heading h2 {
    font-size: clamp(36px, 11vw, 44px);
  }
  .legal-modal__block strong,
  .legal-modal__block p {
    font-size: 16.5px;
  }
}

/* V42 — footer legal readability + precise location label */
.footer__legal {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .085em;
}
.footer__legal button {
  font-size: inherit;
  line-height: inherit;
  padding-block: 4px;
}

@media (max-width: 720px) {
  .footer__legal {
    font-size: 12px;
    line-height: 1.4;
  }
}


/* V47 — final GW contrast polish, mobile monogram/ticker geometry and calmer desktop enquiry modal */

/* The first W leg receives a touch more contrast through the SVG gradient itself.
   Geometry of the V46 mark intentionally remains unchanged. */

@media (max-width: 720px) {
  /* Keep the full GW mark visible on phones instead of using it as a cropped half-circle. */
  .hero__grid,
  .hero__content {
    min-height: calc(100svh - var(--header-h) - 92px);
  }
  .hero__graphic {
    inset: auto -10px 122px auto;
    width: min(72vw, 280px);
    height: min(72vw, 280px);
    border-left: 0;
    opacity: .34;
  }
  .hero__monogram { overflow: visible; }
  .hero__g-mark {
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .hero-scroll-cue { bottom: 102px; }

  /* Four services: the separators live geometrically between the labels, not on them. */
  .ticker {
    height: 92px;
    position: relative;
  }
  .ticker__inner {
    position: relative;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .ticker__inner::before,
  .ticker__inner::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: rgba(255,255,255,.10);
  }
  .ticker__inner::before {
    left: var(--gutter);
    right: var(--gutter);
    top: 50%;
    height: 1px;
    transform: translateY(2px);
  }
  .ticker__inner::after {
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 1px;
  }
  .ticker span,
  .ticker span:nth-of-type(even),
  .ticker span:nth-of-type(n+3) {
    border: 0;
    padding: 0 12px 0 0;
  }
  .ticker span:nth-of-type(even) { padding-left: 14px; }
  .ticker span:nth-of-type(-n+2) { transform: translateY(-5px); }
  .ticker span:nth-of-type(n+3) { transform: translateY(5px); }
}

/* Desktop enquiry: two calm zones instead of one uninterrupted black surface. */
@media (min-width: 1081px) {
  .project-modal__dialog {
    --project-modal-pad: clamp(44px, 5vw, 76px);
    padding: var(--project-modal-pad);
    grid-template-columns: minmax(230px, .58fr) minmax(0, 1.42fr);
    gap: 0;
    background: #090909;
    overflow-x: hidden;
  }
  .project-modal__intro {
    padding-right: clamp(38px, 4.2vw, 68px);
  }
  .project-modal .project-form {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: calc(-1 * var(--project-modal-pad)) calc(-1 * var(--project-modal-pad)) calc(-1 * var(--project-modal-pad)) 0;
    padding: var(--project-modal-pad);
    padding-left: clamp(42px, 4.6vw, 76px);
    border-left: 1px solid rgba(242,240,232,.12);
    background: #0d0d0d;
  }
  .project-modal .form-field select { background: #0d0d0d; }
}

/* V48 — lock the GW mark; compact mobile service rail; stronger modal split */

@media (max-width: 720px) {
  /* Keep the 2x2 rail compact and center every label vertically in its cell. */
  .ticker {
    height: 80px;
  }
  .ticker__inner {
    grid-template-rows: repeat(2, 1fr);
    align-items: stretch;
  }
  .ticker span,
  .ticker span:nth-of-type(even),
  .ticker span:nth-of-type(n+3),
  .ticker span:nth-of-type(-n+2) {
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: none;
    padding-top: 0;
    padding-bottom: 0;
  }
  .ticker__inner::before {
    top: 50%;
    transform: translateY(-.5px);
  }
  .ticker__inner::after {
    top: 9px;
    bottom: 9px;
  }
}

@media (min-width: 1081px) {
  /* A slightly broader intro zone moves the divider away from the headline.
     The lighter left panel separates the modal from dark page sections; the
     form remains on the deeper black so its inputs stay visually calm. */
  .project-modal__dialog {
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
    background: #101010;
  }
  .project-modal__intro {
    padding-right: clamp(48px, 4.8vw, 78px);
  }
  .project-modal .project-form {
    border-left-color: rgba(242,240,232,.14);
    background: #090909;
  }
  .project-modal .form-field select {
    background: #090909;
  }
}

/* V49 — mobile hero rail flush to viewport + stronger process system */

/* Desktop process: one continuous technical line, stronger icons, clearer hierarchy. */
@media (min-width: 1081px) {
  .process__steps {
    position: relative;
    margin-top: 66px;
    padding-top: 28px;
    gap: 38px;
  }
  .process__steps::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(242,240,232,.12) 0%,
      rgba(200,255,0,.86) 28%,
      rgba(242,240,232,.22) 58%,
      rgba(200,255,0,.58) 100%
    );
  }
  .process-step {
    border-top: 0;
    padding-top: 0;
  }
  .process-step::before {
    content: "";
    position: absolute;
    top: -31px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 14px rgba(200,255,0,.25);
  }
  .process-icon {
    width: 70px;
    height: 70px;
    margin-top: 26px;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--ink), var(--ink)) padding-box,
      linear-gradient(145deg, rgba(242,240,232,.42), rgba(200,255,0,.78)) border-box;
    font-size: 21px;
  }
  .process-step h3 {
    margin-top: 26px;
    font-size: 17px;
  }
  .process-step p {
    margin-top: 11px;
    max-width: 260px;
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Tablet: keep the stronger visual language without forcing one line across two rows. */
@media (min-width: 721px) and (max-width: 1080px) {
  .process__steps { gap: 46px 34px; }
  .process-step {
    border-top: 0;
    padding-top: 24px;
  }
  .process-step::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(200,255,0,.76), rgba(242,240,232,.13));
  }
  .process-icon {
    width: 64px;
    height: 64px;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--ink), var(--ink)) padding-box,
      linear-gradient(145deg, rgba(242,240,232,.42), rgba(200,255,0,.72)) border-box;
    font-size: 20px;
  }
}

@media (max-width: 720px) {
  /* The 2x2 service rail closes the first viewport exactly — no residual black strip below it. */
  .hero__grid,
  .hero__content {
    min-height: calc(100svh - var(--header-h) - 80px);
  }
  .hero-scroll-cue { bottom: 90px; }

  .ticker {
    height: 80px;
    margin-bottom: 0;
  }
  .ticker__inner {
    padding-inline: 16px;
  }
  .ticker span,
  .ticker span:nth-of-type(even),
  .ticker span:nth-of-type(n+3),
  .ticker span:nth-of-type(-n+2) {
    justify-content: flex-start;
    padding-inline: 0 10px;
    line-height: 1.05;
  }
  .ticker span:nth-of-type(even) { padding-left: 14px; }
  .ticker__inner::before {
    left: 16px;
    right: 16px;
  }
  .ticker__inner::after {
    top: 8px;
    bottom: 8px;
  }

  /* Mobile process becomes a compact vertical technical timeline. */
  .process__steps {
    position: relative;
    margin-top: 44px;
    display: grid;
    gap: 0;
  }
  .process__steps::before {
    content: "";
    position: absolute;
    left: 31px;
    top: 10px;
    bottom: 22px;
    width: 1px;
    background: linear-gradient(
      180deg,
      rgba(200,255,0,.9) 0%,
      rgba(242,240,232,.24) 48%,
      rgba(200,255,0,.42) 100%
    );
  }
  .process-step {
    min-height: 138px;
    padding: 8px 0 28px 88px;
    border-top: 0;
  }
  .process-step > span {
    left: 0;
    top: 12px;
    font-size: 11px;
  }
  .process-icon {
    left: 4px;
    top: 34px;
    width: 56px;
    height: 56px;
    margin: 0;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--ink), var(--ink)) padding-box,
      linear-gradient(145deg, rgba(242,240,232,.48), rgba(200,255,0,.82)) border-box;
    font-size: 20px;
    z-index: 1;
  }
  .process-step h3 {
    margin-top: 8px;
    font-size: 16px;
  }
  .process-step p {
    margin-top: 9px;
    max-width: 100%;
    font-size: 13.5px;
    line-height: 1.58;
  }
}

/* V50 — process progression: neutral start -> lime launch */

@media (min-width: 1081px) {
  /* The line now tells the same story as the process: restrained at 01,
     progressively brighter towards the launch at 04 and just beyond it. */
  .process__steps::before {
    background: linear-gradient(
      90deg,
      rgba(242,240,232,.16) 0%,
      rgba(222,231,185,.20) 22%,
      rgba(200,255,0,.28) 46%,
      rgba(200,255,0,.58) 72%,
      rgba(200,255,0,.96) 100%
    );
  }

  .process-step::before {
    background: rgba(242,240,232,.42);
    box-shadow: 0 0 0 rgba(200,255,0,0);
  }
  .process-step:nth-child(2)::before {
    background: rgba(213,236,125,.62);
    box-shadow: 0 0 8px rgba(200,255,0,.05);
  }
  .process-step:nth-child(3)::before {
    background: rgba(200,255,0,.76);
    box-shadow: 0 0 10px rgba(200,255,0,.11);
  }
  .process-step:nth-child(4)::before {
    background: var(--lime);
    box-shadow: 0 0 14px rgba(200,255,0,.20);
  }

  /* Each ring gains a little more lime as the project approaches launch.
     The glow is deliberately tiny: it should feel illuminated, not neon. */
  .process-icon {
    --ring-lime: .18;
    --ring-glow: .015;
    background:
      linear-gradient(var(--ink), var(--ink)) padding-box,
      conic-gradient(
        from 215deg,
        rgba(242,240,232,.34) 0deg,
        rgba(242,240,232,.27) 220deg,
        rgba(200,255,0,var(--ring-lime)) 310deg,
        rgba(242,240,232,.24) 360deg
      ) border-box;
    box-shadow: 0 0 18px rgba(200,255,0,var(--ring-glow));
  }
  .process-step:nth-child(2) .process-icon { --ring-lime: .34; --ring-glow: .025; }
  .process-step:nth-child(3) .process-icon { --ring-lime: .58; --ring-glow: .045; }
  .process-step:nth-child(4) .process-icon { --ring-lime: .88; --ring-glow: .075; }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .process-step::after {
    background: linear-gradient(90deg, rgba(242,240,232,.18), rgba(200,255,0,.62));
  }
  .process-icon {
    --ring-lime: .30;
    background:
      linear-gradient(var(--ink), var(--ink)) padding-box,
      conic-gradient(from 215deg, rgba(242,240,232,.36), rgba(200,255,0,var(--ring-lime)), rgba(242,240,232,.24)) border-box;
    box-shadow: 0 0 16px rgba(200,255,0,.025);
  }
  .process-step:nth-child(2) .process-icon { --ring-lime: .42; }
  .process-step:nth-child(3) .process-icon { --ring-lime: .62; }
  .process-step:nth-child(4) .process-icon { --ring-lime: .86; box-shadow: 0 0 18px rgba(200,255,0,.07); }
}

@media (max-width: 720px) {
  /* On mobile the same progression runs from top to bottom. */
  .process__steps::before {
    background: linear-gradient(
      180deg,
      rgba(242,240,232,.18) 0%,
      rgba(200,255,0,.24) 36%,
      rgba(200,255,0,.52) 68%,
      rgba(200,255,0,.92) 100%
    );
  }
  .process-icon {
    --ring-lime: .22;
    background:
      linear-gradient(var(--ink), var(--ink)) padding-box,
      conic-gradient(from 215deg, rgba(242,240,232,.38), rgba(200,255,0,var(--ring-lime)), rgba(242,240,232,.26)) border-box;
    box-shadow: 0 0 14px rgba(200,255,0,.02);
  }
  .process-step:nth-child(2) .process-icon { --ring-lime: .38; }
  .process-step:nth-child(3) .process-icon { --ring-lime: .60; box-shadow: 0 0 15px rgba(200,255,0,.04); }
  .process-step:nth-child(4) .process-icon { --ring-lime: .88; box-shadow: 0 0 18px rgba(200,255,0,.075); }
}

/* V51 — process line starts alive; technical segmented icon rings */
@media (min-width: 1081px) {
  /* Start with visible lime already at step 01, then build steadily toward launch. */
  .process__steps::before {
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(200,255,0,.30) 0%,
      rgba(200,255,0,.38) 24%,
      rgba(200,255,0,.52) 47%,
      rgba(200,255,0,.72) 72%,
      rgba(200,255,0,.96) 100%
    );
    box-shadow: 0 0 10px rgba(200,255,0,.035);
  }

  .process-step::before {
    width: 6px;
    height: 6px;
    top: -31px;
    background: rgba(200,255,0,.42);
    box-shadow: none;
  }
  .process-step:nth-child(2)::before { background: rgba(200,255,0,.56); box-shadow: none; }
  .process-step:nth-child(3)::before { background: rgba(200,255,0,.76); box-shadow: 0 0 8px rgba(200,255,0,.06); }
  .process-step:nth-child(4)::before { background: var(--lime); box-shadow: 0 0 10px rgba(200,255,0,.10); }

  /* Segmented construction rings instead of a glowing full circle. */
  .process-icon {
    --ring-lime: .34;
    position: relative;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--paper);
  }
  .process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
      from 218deg,
      rgba(242,240,232,.34) 0deg 78deg,
      transparent 78deg 98deg,
      rgba(242,240,232,.20) 98deg 205deg,
      transparent 205deg 229deg,
      rgba(200,255,0,var(--ring-lime)) 229deg 332deg,
      transparent 332deg 348deg,
      rgba(242,240,232,.28) 348deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1.25px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1.25px));
  }
  .process-icon::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 9px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(242,240,232,.16), rgba(200,255,0,var(--ring-lime)));
  }
  .process-step:nth-child(2) .process-icon { --ring-lime: .48; }
  .process-step:nth-child(3) .process-icon { --ring-lime: .70; }
  .process-step:nth-child(4) .process-icon { --ring-lime: .94; }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .process-step::after {
    background: linear-gradient(90deg, rgba(200,255,0,.30), rgba(200,255,0,.76));
  }
  .process-icon {
    --ring-lime: .34;
    position: relative;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 218deg,
      rgba(242,240,232,.34) 0deg 78deg,
      transparent 78deg 98deg,
      rgba(242,240,232,.20) 98deg 205deg,
      transparent 205deg 229deg,
      rgba(200,255,0,var(--ring-lime)) 229deg 332deg,
      transparent 332deg 348deg,
      rgba(242,240,232,.28) 348deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
  }
  .process-icon::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(242,240,232,.14), rgba(200,255,0,var(--ring-lime)));
  }
  .process-step:nth-child(2) .process-icon { --ring-lime: .48; }
  .process-step:nth-child(3) .process-icon { --ring-lime: .70; }
  .process-step:nth-child(4) .process-icon { --ring-lime: .92; }
}

@media (max-width: 720px) {
  .process__steps::before {
    background: linear-gradient(
      180deg,
      rgba(200,255,0,.32) 0%,
      rgba(200,255,0,.44) 32%,
      rgba(200,255,0,.66) 68%,
      rgba(200,255,0,.94) 100%
    );
  }
  .process-icon {
    --ring-lime: .36;
    position: absolute;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 218deg,
      rgba(242,240,232,.36) 0deg 78deg,
      transparent 78deg 98deg,
      rgba(242,240,232,.22) 98deg 205deg,
      transparent 205deg 229deg,
      rgba(200,255,0,var(--ring-lime)) 229deg 332deg,
      transparent 332deg 348deg,
      rgba(242,240,232,.30) 348deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
  }
  .process-icon::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(242,240,232,.16), rgba(200,255,0,var(--ring-lime)));
  }
  .process-step:nth-child(2) .process-icon { --ring-lime: .50; }
  .process-step:nth-child(3) .process-icon { --ring-lime: .72; }
  .process-step:nth-child(4) .process-icon { --ring-lime: .94; }
}

/* V52 — process icons: lime only, intensity follows the process progression */
@media (min-width: 1081px) {
  .process-icon {
    --ring-alpha: .34;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
      from 222deg,
      rgba(200,255,0,var(--ring-alpha)) 0deg 326deg,
      transparent 326deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1.25px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1.25px));
  }
  .process-icon::after { content: none; }
  .process-step:nth-child(1) .process-icon { --ring-alpha: .38; }
  .process-step:nth-child(2) .process-icon { --ring-alpha: .52; }
  .process-step:nth-child(3) .process-icon { --ring-alpha: .72; }
  .process-step:nth-child(4) .process-icon { --ring-alpha: .96; }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .process-icon {
    --ring-alpha: .38;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
      from 222deg,
      rgba(200,255,0,var(--ring-alpha)) 0deg 326deg,
      transparent 326deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
  }
  .process-icon::after { content: none; }
  .process-step:nth-child(1) .process-icon { --ring-alpha: .40; }
  .process-step:nth-child(2) .process-icon { --ring-alpha: .54; }
  .process-step:nth-child(3) .process-icon { --ring-alpha: .74; }
  .process-step:nth-child(4) .process-icon { --ring-alpha: .96; }
}

@media (max-width: 720px) {
  .process-icon {
    --ring-alpha: .40;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
      from 222deg,
      rgba(200,255,0,var(--ring-alpha)) 0deg 326deg,
      transparent 326deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.2px), #000 calc(100% - 1.2px));
  }
  .process-icon::after { content: none; }
  .process-step:nth-child(1) .process-icon { --ring-alpha: .42; }
  .process-step:nth-child(2) .process-icon { --ring-alpha: .56; }
  .process-step:nth-child(3) .process-icon { --ring-alpha: .76; }
  .process-step:nth-child(4) .process-icon { --ring-alpha: .98; }
}

/* V53 — process icons: clean closed lime rings; mobile timeline disappears behind the icon */
@media (min-width: 1081px) {
  .process-icon {
    --ring-alpha: .46;
    position: relative;
    border: 1.5px solid rgba(200,255,0,var(--ring-alpha));
    border-radius: 50%;
    background: var(--ink);
    background-clip: padding-box;
    box-shadow: none;
  }
  .process-icon::before,
  .process-icon::after { content: none; }
  .process-step:nth-child(1) .process-icon { --ring-alpha: .46; }
  .process-step:nth-child(2) .process-icon { --ring-alpha: .60; }
  .process-step:nth-child(3) .process-icon { --ring-alpha: .78; }
  .process-step:nth-child(4) .process-icon { --ring-alpha: 1; }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .process-icon {
    --ring-alpha: .48;
    position: relative;
    border: 1.5px solid rgba(200,255,0,var(--ring-alpha));
    border-radius: 50%;
    background: var(--ink);
    background-clip: padding-box;
    box-shadow: none;
  }
  .process-icon::before,
  .process-icon::after { content: none; }
  .process-step:nth-child(1) .process-icon { --ring-alpha: .48; }
  .process-step:nth-child(2) .process-icon { --ring-alpha: .62; }
  .process-step:nth-child(3) .process-icon { --ring-alpha: .80; }
  .process-step:nth-child(4) .process-icon { --ring-alpha: 1; }
}

@media (max-width: 720px) {
  .process__steps::before {
    z-index: 0;
  }
  .process-step {
    position: relative;
    z-index: 1;
  }
  .process-icon {
    --ring-alpha: .50;
    position: absolute;
    z-index: 2;
    border: 1.6px solid rgba(200,255,0,var(--ring-alpha));
    border-radius: 50%;
    background: var(--ink);
    background-clip: padding-box;
    box-shadow: none;
  }
  .process-icon::before,
  .process-icon::after { content: none; }
  .process-step:nth-child(1) .process-icon { --ring-alpha: .50; }
  .process-step:nth-child(2) .process-icon { --ring-alpha: .64; }
  .process-step:nth-child(3) .process-icon { --ring-alpha: .82; }
  .process-step:nth-child(4) .process-icon { --ring-alpha: 1; }
}

/* V54 — custom process SVG icons: focus, live browser draft, code, browser launch */
.process-icon__svg {
  width: 25px;
  height: 25px;
  overflow: visible;
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.process-icon__svg rect,
.process-icon__svg path,
.process-icon__svg circle {
  vector-effect: non-scaling-stroke;
}
.process-icon__dot {
  fill: var(--paper);
  stroke: none;
}
.process-icon__launch-dot {
  fill: var(--lime);
  stroke: none;
}
.process-icon__svg--code { width: 27px; height: 27px; }
.process-icon__svg--launch { width: 27px; height: 27px; }

@media (max-width: 720px) {
  .process-icon__svg { width: 25px; height: 25px; }
  .process-icon__svg--code,
  .process-icon__svg--launch { width: 27px; height: 27px; }
}

/* V55 — process icons: stronger custom SVGs, optical centering and clearer visual weight */
.process-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.process-icon__svg {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-icon__svg rect,
.process-icon__svg path,
.process-icon__svg circle {
  vector-effect: non-scaling-stroke;
}
.process-icon__dot--outline {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 2.25;
}
.process-icon__launch-dot {
  fill: var(--lime);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.process-icon__svg--draft { width: 37px; height: 37px; }
.process-icon__svg--code { width: 37px; height: 37px; }
.process-icon__svg--launch { width: 38px; height: 38px; }

@media (max-width: 720px) {
  .process-icon__svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.35;
  }
  .process-icon__dot--outline { stroke-width: 2.35; }
  .process-icon__svg--draft,
  .process-icon__svg--code { width: 33px; height: 33px; }
  .process-icon__svg--launch { width: 34px; height: 34px; }
}


/* V56 — process icon redesign: eye, monitor, terminal and stronger launch; same optical center */
.process-icon__svg {
  width: 39px;
  height: 39px;
  transform: none;
  transform-origin: 50% 50%;
  overflow: visible;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-icon__svg--understand,
.process-icon__svg--design,
.process-icon__svg--develop,
.process-icon__svg--launch {
  width: 39px;
  height: 39px;
}
.process-icon__svg--design { stroke-width: 2.45; }
.process-icon__svg--develop { stroke-width: 3.05; }
.process-icon__svg--launch { stroke-width: 2.65; }
.process-icon__launch-arrow { stroke: var(--paper); }
.process-icon__launch-dot {
  fill: var(--lime);
  stroke: var(--ink);
  stroke-width: 1.35;
}
@media (max-width: 720px) {
  .process-icon__svg,
  .process-icon__svg--understand,
  .process-icon__svg--design,
  .process-icon__svg--develop,
  .process-icon__svg--launch {
    width: 35px;
    height: 35px;
  }
  .process-icon__svg { stroke-width: 2.8; }
  .process-icon__svg--design { stroke-width: 2.55; }
  .process-icon__svg--develop { stroke-width: 3.15; }
  .process-icon__svg--launch { stroke-width: 2.75; }
}


/* V57 — optical centering only: per-icon SVG groups handle the offset; terminal gets a touch more visual mass */
.process-icon__svg--develop { width: 42px; height: 42px; }
@media (max-width: 720px) {
  .process-icon__svg--develop { width: 38px; height: 38px; }
}


/* V59 — launch icon hierarchy: quiet website frame, strong unmistakable arrow */
.process-icon__launch-frame {
  opacity: .42;
  stroke-width: 1.9;
}
.process-icon__launch-arrow {
  opacity: 1;
  stroke: var(--paper);
  stroke-width: 3.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-icon__launch-dot { display: none; }
@media (max-width: 720px) {
  .process-icon__launch-frame { stroke-width: 2; opacity: .40; }
  .process-icon__launch-arrow { stroke-width: 3.65; }
}


/* V60 — one coherent process icon family: same visual box, same stroke language */
.process-icon__svg,
.process-icon__svg--understand,
.process-icon__svg--design,
.process-icon__svg--develop,
.process-icon__svg--launch {
  width: 39px;
  height: 39px;
  transform: none;
  margin: 0;
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-icon__svg--develop { width: 39px; height: 39px; stroke-width: 2.85; }
.process-icon__launch-frame {
  opacity: .46;
  stroke-width: 1.85;
}
.process-icon__launch-arrow {
  opacity: 1;
  stroke: var(--paper);
  stroke-width: 3.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 720px) {
  .process-icon__svg,
  .process-icon__svg--understand,
  .process-icon__svg--design,
  .process-icon__svg--develop,
  .process-icon__svg--launch {
    width: 35px;
    height: 35px;
    stroke-width: 2.75;
  }
  .process-icon__svg--develop { width: 35px; height: 35px; stroke-width: 2.95; }
  .process-icon__launch-frame { stroke-width: 1.9; opacity: .44; }
  .process-icon__launch-arrow { stroke-width: 3.25; }
}


/* V61 — final launch emphasis: shared monitor recedes, launch arrow becomes the focal point */
.process-icon__launch-frame {
  opacity: .28;
  stroke-width: 1.7;
}
.process-icon__launch-arrow {
  opacity: 1;
  stroke: var(--paper);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 720px) {
  .process-icon__launch-frame { opacity: .26; stroke-width: 1.8; }
  .process-icon__launch-arrow { stroke-width: 4.15; }
}

/* V62 — launch icon optical recentering after stronger arrow emphasis */
.process-icon__svg--launch {
  transform: translate(-2px, 1px);
}
@media (max-width: 720px) {
  .process-icon__svg--launch {
    transform: translate(-1.8px, 1.2px);
  }
}

/* V63 — launch simplified to one clear arrow */
.process-icon__svg--launch {
  transform: none;
  width: 39px;
  height: 39px;
}
.process-icon__launch-arrow {
  opacity: 1;
  stroke: var(--paper);
  stroke-width: 3.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 720px) {
  .process-icon__svg--launch {
    transform: none;
    width: 35px;
    height: 35px;
  }
  .process-icon__launch-arrow { stroke-width: 3.9; }
}

/* V64 — final process polish: drawn desktop line, dark arrows on light links */
.text-link--dark > span {
  color: var(--ink);
}

@media (min-width: 1081px) {
  .process__steps::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.35s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .process__steps.is-line-visible::before {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1081px) {
  .process__steps::before {
    transform: none;
    transition: none;
  }
}


/* V67 — fixed back-to-top control */
.back-to-top {
  position: fixed;
  right: clamp(16px, 1.8vw, 28px);
  bottom: clamp(16px, 1.8vw, 28px);
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(183, 255, 0, .58);
  background: rgba(8, 8, 8, .82);
  color: var(--paper);
  border-radius: 0;
  cursor: pointer;
  z-index: 900;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .24s ease, opacity .24s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.back-to-top.is-visible:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}
.modal-open .back-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 720px) {
  .back-to-top {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
  }
  .back-to-top svg {
    width: 17px;
    height: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
  .back-to-top.is-visible:hover { transform: none; }
}

/* V69: PHP / PHPMailer form states */
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.form-status {
  min-height: 1.5em;
  transition: color .2s ease;
}
.form-status.is-success { color: #526800; }
.form-status.is-error { color: #9f2f28; }
.project-modal .form-status.is-success { color: var(--lime); }
.project-modal .form-status.is-error { color: #ff9a8f; }
.form-actions button[disabled] {
  cursor: wait;
  opacity: .68;
}

/* V70 — production 404 page */
.error-page {
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
}
.error-header {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  min-height: var(--header-h);
  padding: 28px var(--gutter) 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.error-header__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.error-header__back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: var(--lime);
  transition: right .2s ease;
}
.error-header__back:hover::after,
.error-header__back:focus-visible::after { right: 0; }
.error-404 {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 46px) 0 72px;
}
.error-404::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--gutter);
  right: var(--gutter);
  top: var(--header-h);
  height: 1px;
  background: var(--line-dark);
}
.error-404__content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.error-404 h1 {
  max-width: 1000px;
  margin: 20px 0 28px;
  font-size: clamp(64px, 8.6vw, 156px);
  line-height: .83;
  letter-spacing: -.066em;
  text-transform: uppercase;
}
.error-404 h1 em {
  color: var(--lime);
  font-style: normal;
  font-weight: inherit;
}
.error-404__text {
  max-width: 620px;
  margin: 0 0 38px;
  color: rgba(242, 240, 232, .68);
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.65;
}
.error-404__code {
  position: absolute;
  z-index: 0;
  right: -2vw;
  bottom: -12vw;
  color: var(--paper);
  opacity: .035;
  font-size: clamp(260px, 43vw, 760px);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.09em;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 720px) {
  .error-header {
    min-height: 88px;
    padding-top: 22px;
    align-items: flex-start;
  }
  .error-header__back {
    margin-top: 4px;
    font-size: 10px;
  }
  .error-404 {
    padding-top: 150px;
    align-items: start;
  }
  .error-404::before { top: 102px; }
  .error-404 h1 {
    margin-top: 18px;
    font-size: clamp(52px, 17vw, 82px);
  }
  .error-404__text {
    max-width: 34rem;
    font-size: 16px;
  }
  .error-404__code {
    right: -8vw;
    bottom: 4vh;
    font-size: 70vw;
  }
}


/* V71 — responsive featured image wrapper without changing the visual crop. */
.project-visual--licht .project-visual__picture {
  position: absolute;
  inset: 0;
  display: block;
}


/* V72 — accessibility, keyboard focus and form feedback */
#main:focus { outline: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline-offset: 3px;
}

.form-field [aria-invalid="true"] {
  border-color: #8b2d27 !important;
}
.project-modal .form-field [aria-invalid="true"] {
  border-color: #ff9a8f !important;
}

.contact-form__heading h3,
.project-form__heading h3 {
  margin: 0;
  font-weight: 700;
}

.form-check > input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.form-check__copy {
  min-width: 0;
}
.form-check__copy label {
  cursor: pointer;
}
.form-check__copy .inline-legal-link {
  margin-left: .22em;
}

.form-status:focus {
  outline: none;
}
.form-status.is-error:focus {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.service__trigger:focus-visible {
  outline-offset: 6px;
}

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

@media (forced-colors: active) {
  .button,
  .back-to-top,
  .project-modal__close,
  .legal-modal__close {
    border: 1px solid ButtonText;
  }
  .process-icon,
  .hero-scroll-cue__mouse {
    forced-color-adjust: auto;
  }
}

/* V72 — readable helper text on both light and dark form surfaces */
.contact-form .form-check {
  color: #686862;
}
.contact-form .form-field textarea::placeholder,
.contact-form .form-field input::placeholder {
  color: #686862;
}
.project-modal .form-check {
  color: #b9b9b4;
}
.project-modal .form-field textarea::placeholder,
.project-modal .form-field input::placeholder {
  color: #92928c;
}

/* V74 — keep the inline privacy link readable on the light contact form. */
.contact-form .inline-legal-link:hover,
.contact-form .inline-legal-link:focus-visible {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

/* V78 — project enquiry modal: compact, readable, clearly layered */
.project-modal {
  padding: 24px;
  place-items: center end;
}

.project-modal__dialog {
  width: min(1160px, calc(100vw - 64px));
  height: min(900px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr);
  gap: 0;
  align-content: stretch;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 232, .11);
  background: #181818;
  box-shadow: -24px 22px 80px rgba(0,0,0,.38);
}

.project-modal__intro {
  min-width: 0;
  padding: clamp(54px, 5vw, 72px) clamp(40px, 4vw, 58px);
  padding-top: clamp(76px, 6vw, 92px);
  background: #181818;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-modal__intro h2 {
  margin-top: 12px;
  font-size: clamp(58px, 4.5vw, 76px);
  line-height: .88;
  letter-spacing: -.065em;
}

.project-modal__intro > p:not(.section-kicker) {
  max-width: 360px;
  margin-top: 28px;
  color: #d5d4cf;
  font-size: 16.5px;
  line-height: 1.68;
}

.project-modal__direct {
  gap: 10px;
  margin-top: 34px;
  color: #f2f0e8;
  font: 650 13px/1.45 var(--font-mono);
  letter-spacing: .025em;
}

.project-modal .project-form {
  min-width: 0;
  margin: 0;
  padding: clamp(48px, 4.4vw, 64px) clamp(46px, 4.7vw, 68px);
  border-left: 1px solid rgba(242,240,232,.12);
  background: #0e0e0e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.project-form__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(242,240,232,.15);
}

.project-form__heading h3 {
  color: var(--paper);
  font-size: clamp(27px, 2vw, 32px);
  line-height: 1;
  letter-spacing: -.035em;
}

.project-form__heading span {
  max-width: 440px;
  color: #c8c7c1;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.project-modal .form-grid {
  gap: 12px;
  padding-top: 22px;
}

.project-modal .form-field {
  gap: 10px;
  padding: 13px 15px 14px;
  border: 1px solid rgba(242,240,232,.16);
  background: #151515;
  transition: border-color .18s ease, background-color .18s ease;
}

.project-modal .form-field > span {
  color: #b9b8b2;
  font-size: 10px;
  letter-spacing: .105em;
}

.project-modal .form-field input,
.project-modal .form-field textarea,
.project-modal .form-field select {
  padding: 1px 0;
  background: transparent;
  color: #f4f2ea;
  font-size: 16px;
  line-height: 1.5;
}

.project-modal .form-field select {
  background: #151515;
}

.project-modal .form-field:focus-within {
  border-color: var(--lime);
  background: #171717;
}

.project-modal .form-field--message {
  padding-top: 13px;
  border: 1px solid rgba(242,240,232,.16);
}

.project-modal .form-field--message textarea {
  min-height: 138px;
  margin-top: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
}

.project-modal .form-field--message:focus-within textarea {
  border-color: transparent;
}

.project-modal .form-field textarea::placeholder,
.project-modal .form-field input::placeholder {
  color: #8f8e89;
}

.project-modal .form-check {
  gap: 12px;
  padding: 6px 1px 0;
  color: #d0cfc9;
  font-size: 12.5px;
  line-height: 1.55;
}

.project-modal .form-check > input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.project-modal .inline-legal-link {
  color: #e7e5de;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-modal .inline-legal-link:hover,
.project-modal .inline-legal-link:focus-visible {
  color: var(--lime);
}

.project-modal .form-actions {
  margin-top: 24px;
}

.project-modal .form-actions .button {
  min-height: 54px;
  padding-inline: 25px;
  border-color: var(--lime);
  background: var(--lime);
  color: var(--ink);
  font-weight: 750;
}

.project-modal .form-actions .button:hover {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.project-modal .form-status {
  color: #c4c3bd;
  font-size: 13px;
}

.project-modal__close {
  z-index: 3;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  background: rgba(14,14,14,.92);
  border-color: rgba(242,240,232,.18);
}

@media (max-width: 1080px) {
  .project-modal {
    padding: 12px;
    place-items: center;
  }
  .project-modal__dialog {
    width: min(760px, calc(100vw - 24px));
    height: auto;
    max-height: calc(100vh - 24px);
    grid-template-columns: 1fr;
    align-content: start;
    overflow-y: auto;
  }
  .project-modal__intro {
    padding: 76px 32px 38px;
    justify-content: flex-start;
  }
  .project-modal__intro h2 {
    font-size: clamp(54px, 10vw, 76px);
  }
  .project-modal__intro > p:not(.section-kicker) {
    max-width: 580px;
    font-size: 16px;
  }
  .project-modal .project-form {
    overflow: visible;
    padding: 38px 32px 44px;
    border-left: 0;
    border-top: 1px solid rgba(242,240,232,.12);
  }
}

@media (max-width: 720px) {
  .project-modal {
    padding: 0;
  }
  .project-modal__dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
  }
  .project-modal__intro {
    padding: 72px 20px 34px;
  }
  .project-modal__intro h2 {
    font-size: clamp(56px, 18vw, 76px);
  }
  .project-modal__intro > p:not(.section-kicker) {
    margin-top: 22px;
    font-size: 15.5px;
  }
  .project-modal__direct {
    margin-top: 26px;
    font-size: 12px;
  }
  .project-modal .project-form {
    padding: 34px 20px 42px;
  }
  .project-form__heading h3 {
    font-size: 26px;
  }
  .project-form__heading span {
    font-size: 13.5px;
  }
  .project-modal .form-grid {
    gap: 10px;
  }
  .project-modal .form-field {
    padding: 13px 14px;
  }
  .project-modal .form-field input,
  .project-modal .form-field textarea,
  .project-modal .form-field select {
    font-size: 16px;
  }
  .project-modal .form-check {
    font-size: 12px;
  }
  .project-modal .form-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* V80 — Licht Loidl case: layered anthracite instead of one long black block */
.featured-stage {
  --licht-case-bg: #131310;
  --licht-case-bg-deep: #0f0f0d;
}

.featured-stage::before {
  background:
    radial-gradient(circle at 67% 42%, rgba(151,124,77,.14), transparent 32%),
    linear-gradient(
      180deg,
      rgba(19,19,16,0) 0%,
      rgba(19,19,16,.12) 13%,
      rgba(19,19,16,.66) 30%,
      rgba(19,19,16,.92) 43%,
      var(--licht-case-bg) 57%,
      var(--licht-case-bg) 100%
    );
}

.featured-stage::after {
  background:
    radial-gradient(circle at 68% 38%, rgba(195,143,64,.07), transparent 26%),
    radial-gradient(circle at 58% 48%, rgba(200,255,0,.035), transparent 31%);
}

.featured-case {
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 9%, rgba(191,137,56,.075), transparent 24%),
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.018), transparent 31%),
    linear-gradient(180deg, #141411 0%, #121210 62%, #151512 100%) !important;
  border-top-color: rgba(242,240,232,.13);
}

.featured-case__top {
  border-bottom-color: rgba(242,240,232,.15);
}

.featured-case__client {
  color: #c5c2b8;
}

.featured-case h3 em {
  -webkit-text-stroke-color: rgba(232,228,216,.82);
  text-stroke-color: rgba(232,228,216,.82);
}

.featured-case__lead {
  color: #f2f0e8;
  font-size: clamp(23px, 2.05vw, 32px);
  line-height: 1.28;
}

.featured-case__copy > p:not(.featured-case__lead) {
  color: #c8c5bb;
  font-size: 16px;
  line-height: 1.82;
}

.featured-case__scope {
  gap: 10px;
  border-top: 0;
  border-bottom: 0;
}

.featured-case__scope-item,
.featured-case__scope-item:first-child,
.featured-case__scope-item:last-child {
  min-height: 124px;
  padding: 28px clamp(20px, 2vw, 30px);
  border: 1px solid rgba(242,240,232,.095);
  background: rgba(255,255,255,.025);
}

.featured-case__scope-item strong {
  color: #ece9df;
}

@media (max-width: 1080px) {
  .featured-case__scope {
    gap: 8px;
  }
  .featured-case__scope-item:nth-child(2),
  .featured-case__scope-item:nth-child(n+3),
  .featured-case__scope-item:nth-child(3) {
    border: 1px solid rgba(242,240,232,.095);
    padding: 26px clamp(20px, 2vw, 30px);
  }
}

@media (max-width: 720px) {
  .featured-case {
    background:
      radial-gradient(circle at 88% 6%, rgba(191,137,56,.07), transparent 22%),
      linear-gradient(180deg, #151512 0%, #121210 72%, #161613 100%) !important;
  }

  .featured-case__lead {
    font-size: 23px;
    line-height: 1.32;
  }

  .featured-case__copy > p:not(.featured-case__lead) {
    color: #c6c3b9;
    font-size: 15.5px;
    line-height: 1.8;
  }

  .featured-case__scope {
    gap: 8px;
  }

  .featured-case__scope-item,
  .featured-case__scope-item:first-child,
  .featured-case__scope-item:nth-child(2),
  .featured-case__scope-item:nth-child(3),
  .featured-case__scope-item:last-child,
  .featured-case__scope-item:nth-child(n+3) {
    min-height: 82px;
    padding: 20px 18px;
    border: 1px solid rgba(242,240,232,.095);
    background: rgba(255,255,255,.028);
  }
}


/* V81 — Licht Loidl case: three distinct visual zones */
.featured-case {
  padding: 0 !important;
  background: #171714 !important;
  border-top-color: rgba(242,240,232,.14);
}

.featured-case__story-zone {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 9vw, 150px) 0 clamp(82px, 7.5vw, 118px);
  background:
    radial-gradient(ellipse at 76% 33%, rgba(188,136,63,.105) 0%, rgba(188,136,63,.045) 18%, transparent 43%),
    linear-gradient(180deg, #1b1b18 0%, #181815 56%, #171714 100%);
}

.featured-case__story-zone::after {
  content: "";
  position: absolute;
  top: 16%;
  right: -9%;
  width: 42vw;
  height: 44%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(229,177,91,.055), transparent 67%);
  filter: blur(18px);
}

.featured-case__story-zone > .container {
  position: relative;
  z-index: 1;
}

.featured-case__grid {
  padding: clamp(68px, 7vw, 108px) 0 clamp(72px, 7.4vw, 118px);
}

.featured-case__copy {
  padding-top: 12px;
}

.featured-case__lead {
  margin-bottom: 34px;
}

.featured-case__copy > p:not(.featured-case__lead) {
  color: #d0cdc3;
  font-size: 16.5px;
  line-height: 1.86;
}

.featured-case__copy .text-link {
  margin-top: 46px;
}

.featured-case__scope-zone {
  padding: clamp(42px, 4.6vw, 72px) 0 clamp(54px, 5.4vw, 86px);
  border-top: 1px solid rgba(242,240,232,.13);
  background:
    linear-gradient(90deg, rgba(255,255,255,.015), transparent 34%, rgba(200,255,0,.012) 100%),
    #11110f;
}

.featured-case__scope {
  gap: 12px;
}

.featured-case__scope-item,
.featured-case__scope-item:first-child,
.featured-case__scope-item:last-child {
  min-height: 132px;
  padding: 31px clamp(20px, 2vw, 30px);
  border: 1px solid rgba(242,240,232,.105);
  background: #171714;
}

.featured-case__scope-item strong {
  color: #f0eee5;
}

@media (max-width: 1080px) {
  .featured-case__scope-item:nth-child(2),
  .featured-case__scope-item:nth-child(n+3),
  .featured-case__scope-item:nth-child(3) {
    border: 1px solid rgba(242,240,232,.105);
    padding: 29px clamp(20px, 2vw, 30px);
  }
}

@media (max-width: 720px) {
  .featured-case__story-zone {
    padding: 72px 0 62px;
    background:
      radial-gradient(ellipse at 88% 28%, rgba(188,136,63,.075), transparent 38%),
      linear-gradient(180deg, #1b1b18 0%, #181815 62%, #171714 100%);
  }

  .featured-case__story-zone::after {
    display: none;
  }

  .featured-case__grid {
    padding: 52px 0 68px;
    gap: 38px;
  }

  .featured-case__lead {
    margin-bottom: 28px;
  }

  .featured-case__copy > p:not(.featured-case__lead) {
    color: #cecbc1;
    font-size: 15.5px;
    line-height: 1.86;
  }

  .featured-case__copy .text-link {
    margin-top: 40px;
  }

  .featured-case__scope-zone {
    padding: 30px 0 54px;
  }

  .featured-case__scope {
    gap: 10px;
  }

  .featured-case__scope-item,
  .featured-case__scope-item:first-child,
  .featured-case__scope-item:nth-child(2),
  .featured-case__scope-item:nth-child(3),
  .featured-case__scope-item:last-child,
  .featured-case__scope-item:nth-child(n+3) {
    min-height: 88px;
    padding: 21px 18px;
    border: 1px solid rgba(242,240,232,.105);
    background: #171714;
  }
}

/* V82 — Licht Loidl case: shorter dark run, stronger tonal separation */
.featured-case {
  background: #1b1b18 !important;
}

.featured-case__story-zone {
  padding: clamp(72px, 6.6vw, 108px) 0 clamp(66px, 5.8vw, 94px);
  background:
    radial-gradient(ellipse at 78% 30%, rgba(188,136,63,.11) 0%, rgba(188,136,63,.045) 17%, transparent 38%),
    linear-gradient(180deg, #1c1c19 0%, #191916 58%, #181815 100%);
}

.featured-case__story-zone::after {
  top: 18%;
  right: -5%;
  width: 34vw;
  height: 36%;
  background: radial-gradient(ellipse, rgba(229,177,91,.065), transparent 66%);
  filter: blur(15px);
}

.featured-case__grid {
  padding: clamp(52px, 5.2vw, 82px) 0 clamp(58px, 5.6vw, 90px);
}

.featured-case__copy {
  padding-top: 8px;
}

.featured-case__lead {
  margin-bottom: 28px;
}

.featured-case__copy > p:not(.featured-case__lead) {
  color: #d9d6cc;
  font-size: 17px;
  line-height: 1.8;
}

.featured-case__copy .text-link {
  margin-top: 38px;
}

.featured-case__scope-zone {
  padding: clamp(34px, 3.6vw, 56px) 0 clamp(44px, 4.2vw, 68px);
  border-top: 1px solid rgba(242,240,232,.22);
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), transparent 34%, rgba(200,255,0,.015) 100%),
    #232320;
}

.featured-case__scope {
  gap: 12px;
}

.featured-case__scope-item,
.featured-case__scope-item:first-child,
.featured-case__scope-item:last-child {
  min-height: 118px;
  padding: 27px clamp(20px, 2vw, 30px);
  border: 1px solid rgba(242,240,232,.14);
  background: #292925;
}

.featured-case__scope-item strong {
  color: #f4f2e9;
}

@media (max-width: 1080px) {
  .featured-case__scope-item:nth-child(2),
  .featured-case__scope-item:nth-child(n+3),
  .featured-case__scope-item:nth-child(3) {
    padding: 26px clamp(20px, 2vw, 30px);
    border-color: rgba(242,240,232,.14);
  }
}

@media (max-width: 720px) {
  .featured-case__story-zone {
    padding: 58px 0 50px;
    background:
      radial-gradient(ellipse at 88% 28%, rgba(188,136,63,.085), transparent 35%),
      linear-gradient(180deg, #1c1c19 0%, #191916 64%, #181815 100%);
  }

  .featured-case__grid {
    padding: 42px 0 54px;
    gap: 34px;
  }

  .featured-case__lead {
    margin-bottom: 24px;
  }

  .featured-case__copy > p:not(.featured-case__lead) {
    color: #d7d4ca;
    font-size: 16px;
    line-height: 1.8;
  }

  .featured-case__copy .text-link {
    margin-top: 34px;
  }

  .featured-case__scope-zone {
    padding: 26px 0 42px;
    background: #232320;
  }

  .featured-case__scope-item,
  .featured-case__scope-item:first-child,
  .featured-case__scope-item:nth-child(2),
  .featured-case__scope-item:nth-child(3),
  .featured-case__scope-item:last-child,
  .featured-case__scope-item:nth-child(n+3) {
    min-height: 82px;
    padding: 19px 18px;
    border-color: rgba(242,240,232,.14);
    background: #292925;
  }
}

/* V83 — Hero copy reduction + slightly brighter Licht Loidl story text */
.featured-case__copy > p:not(.featured-case__lead) {
  color: #e5e2d8;
}

/* V85 — targeted mobile headline corrections; V84 broad overrides intentionally discarded */
@media (max-width: 430px) {
  /* Long two-line portfolio title: every word must fit without clipping. */
  .portfolio__heading h2 {
    font-size: clamp(50px, 14.6vw, 62px);
    line-height: .86;
    letter-spacing: -.06em;
  }

  /* Preserve the intended line breaks while leaving room on narrow iPhones. */
  .process__heading h2 {
    font-size: clamp(38px, 10.6vw, 46px);
    line-height: .94;
    letter-spacing: -.045em;
  }

  .about__copy h2 {
    font-size: clamp(35px, 9.8vw, 43px);
    line-height: .9;
    letter-spacing: -.05em;
  }

  .contact__intro h2 {
    font-size: clamp(48px, 13.2vw, 58px);
    line-height: .88;
    letter-spacing: -.055em;
  }

  .contact-cta h2 {
    font-size: clamp(50px, 14vw, 62px);
    line-height: .86;
    letter-spacing: -.055em;
  }
}

@media (max-width: 360px) {
  .portfolio__heading h2 { font-size: 49px; }
  .process__heading h2 { font-size: 37px; }
  .about__copy h2 { font-size: 34px; }
  .contact__intro h2 { font-size: 46px; }
  .contact-cta h2 { font-size: 48px; }
}

/* V86 — two targeted mobile overflow corrections */
@media (max-width: 430px) {
  .featured-reference-intro__simple-copy strong {
    font-size: clamp(24px, 7.4vw, 32px);
    line-height: .94;
    letter-spacing: -.04em;
  }

  .portfolio-feature__meta h3 {
    font-size: clamp(26px, 7.6vw, 32px);
    line-height: .96;
    letter-spacing: -.035em;
  }
}

@media (max-width: 360px) {
  .featured-reference-intro__simple-copy strong { font-size: 25px; }
  .portfolio-feature__meta h3 { font-size: 26px; }
}

/* V87 — mobile services accordion: balanced vertical rhythm */
@media (max-width: 720px) {
  .service__trigger {
    min-height: 0;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    padding: 14px 0 15px;
  }

  .service__no {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .service__trigger strong {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    line-height: 1.18;
  }

  .service__short {
    grid-column: 2 / 3;
    grid-row: 2;
    margin: 0;
    padding: 0;
    line-height: 1.4;
  }

  .service__trigger i {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    line-height: 1;
  }

  .service__body {
    padding: 4px 0 26px 44px;
  }
}

/* V88 — project modal mobile headline refinement */
@media (max-width: 720px) {
  .project-modal__intro h2 {
    font-size: clamp(48px, 15vw, 64px);
    line-height: .9;
  }
  .project-modal__intro > p:not(.section-kicker) {
    margin-top: 16px;
  }
}

/* V90 — desktop hero headline refinement: slightly narrower clearance to center line */
@media (min-width: 1081px) {
  .hero h1 {
    font-size: clamp(72px, 8.2vw, 142px);
  }
}