:root {
  --ink: #080808;
  --ink-soft: #111111;
  --paper: #f1eee7;
  --paper-bright: #fbfaf6;
  --line-dark: rgba(255,255,255,.18);
  --line-light: rgba(8,8,8,.17);
  --muted-dark: rgba(255,255,255,.66);
  --muted-light: rgba(8,8,8,.63);
  --display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --page-pad: clamp(1.25rem, 4vw, 5rem);
  --max: 1500px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --accent: #7650a1; /* held in reserve; currently used only for text selection */
  color-scheme: dark light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
html.is-cinematic-scrolling { scroll-behavior: auto !important; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: color-mix(in srgb, var(--accent) 55%, white); color: var(--ink); }
a { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed; z-index: 999; left: 1rem; top: 1rem; padding: .8rem 1rem;
  background: white; color: black; transform: translateY(-180%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }
.progress { position: fixed; z-index: 110; inset: 0 0 auto 0; height: 2px; pointer-events: none; }
.progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: currentColor; color: white; }

.site-header {
  position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 78px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  padding: 0 var(--page-pad); color: white;
  background: rgba(8,8,8,.90); border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: background .45s var(--ease), border-color .45s var(--ease), opacity .6s var(--ease);
  opacity: 1;
}
body.motion-enabled .site-header { opacity: 1; }
body.motion-enabled.is-ready .site-header { opacity: 1; transition-delay: 0s; }
.brand { display: inline-flex; align-items: baseline; gap: .08em; text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .19em; }
.brand .brand-name,
.brand:link .brand-name,
.brand:visited .brand-name,
.brand:hover .brand-name,
.brand:focus .brand-name { color: #fff; font-weight: 700; opacity: 1; }
.brand .brand-legal,
.brand:link .brand-legal,
.brand:visited .brand-legal,
.brand:hover .brand-legal,
.brand:focus .brand-legal { color: rgba(255,255,255,.58); font-weight: 400; opacity: 1; }
.site-nav { display: flex; gap: clamp(1rem, 2.5vw, 2.6rem); font-size: .69rem; letter-spacing: .14em; text-transform: uppercase; }
.site-nav a { text-decoration: none; position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.language-switch { justify-self: end; display: inline-flex; align-items: center; gap: .48rem; color: rgba(255,255,255,.50); font-size: .66rem; letter-spacing: .16em; }
.language-switch button { appearance: none; border: 0; padding: .35rem 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color .3s var(--ease); }
.language-switch button:hover, .language-switch button.is-active { color: white; }
.language-switch button.is-active { font-weight: 700; }

.section-ink { background: var(--ink); color: white; }
.section-light { background: var(--paper); color: var(--ink); }
.section-label { margin: 0; font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; }
.section-label.light { color: rgba(255,255,255,.67); }

/* OPENER 0.2.3: chaos resolves into an NL bullseye; the page then
   moves itself to the readable hero state while retaining the target motif. */
.intro { position: relative; height: 260vh; background: var(--ink); color: white; }
.intro-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
.intro-grid {
  position: absolute; inset: -8%; opacity: calc(.042 * (1 - var(--intro-p, 0)));
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 8vw 8vw;
  transform: perspective(1000px) rotateX(66deg) translateY(calc(15vh - var(--intro-p, 0) * 12vh)) scale(1.18);
  transform-origin: center 62%; z-index: -4;
}
.intro-vignette { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 43%, rgba(255,255,255,.035) 0, rgba(0,0,0,.10) 32%, rgba(0,0,0,.78) 90%); }
.complexity-cloud { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
body.motion-enabled .complexity-cloud { display: block; }
.complexity-cloud span {
  position: absolute; left: 50%; top: 50%; white-space: nowrap;
  color: rgba(255,255,255,.78); font-size: clamp(.98rem, 1.45vw, 1.42rem);
  letter-spacing: .105em; font-weight: 600; opacity: 0;
  transform: translate(-50%,-50%) translate(var(--x),var(--y));
  filter: blur(5px); will-change: transform, opacity, filter;
}
.complexity-cloud .term-major { font-size: clamp(1.14rem, 1.88vw, 1.85rem); color: rgba(255,255,255,.94); letter-spacing: .08em; }
body.motion-enabled.intro-auto-running .complexity-cloud span { animation: termResolve 3.35s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--delay); }
@keyframes termResolve {
  0%, 3% { opacity: 0; filter: blur(6px); transform: translate(-50%,-50%) translate(var(--x),var(--y)) scale(.96); }
  13% { opacity: .94; filter: blur(0); transform: translate(-50%,-50%) translate(var(--x),var(--y)) scale(1); }
  54% { opacity: .82; filter: blur(0); transform: translate(-50%,-50%) translate(var(--x),var(--y)) scale(1); }
  83%, 100% { opacity: 0; filter: blur(7px); transform: translate(-50%,-50%) translate(0,0) scale(.5); }
}
.intro-logo {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: clamp(16rem, 29vw, 32rem); aspect-ratio: 1;
  transform: translate(-50%, calc(-50% + var(--logo-y, 0px))) scale(var(--logo-scale, .72));
  opacity: var(--logo-opacity, .10); filter: blur(var(--logo-blur, 10px));
  will-change: transform, opacity, filter; display: grid; place-items: center;
}
body.motion-enabled.intro-auto-running .intro-logo { animation: targetResolve 4.55s var(--ease) both; }
@keyframes targetResolve {
  0%, 45% { opacity: 0; filter: blur(12px); transform: translate(-50%,-50%) scale(.68); }
  67% { opacity: 1; filter: blur(0); transform: translate(-50%,-50%) scale(1.02); }
  76% { transform: translate(-50%,-50%) scale(.992); }
  82%, 100% { opacity: 1; filter: blur(0); transform: translate(-50%,-50%) scale(1); }
}
.nl-mark { width: 28%; max-height: 34%; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 0 26px rgba(255,255,255,.11)); }
.logo-rings { position: absolute; inset: 0; z-index: 1; }
.logo-rings i { position: absolute; border-radius: 50%; transform: scale(var(--ring-scale, .72)); opacity: var(--ring-opacity, 0); }
.logo-rings i:nth-child(1) { inset: 2%; border: 1.1px solid rgba(255,255,255,.31); }
.logo-rings i:nth-child(2) { inset: 18%; border: 1.15px solid rgba(255,255,255,.49); }
.logo-rings i:nth-child(3) { inset: 31%; border: 1.45px solid rgba(255,255,255,.84); box-shadow: 0 0 28px rgba(255,255,255,.10); }
body.motion-enabled.intro-auto-running .logo-rings i { animation: ringResolve 4.55s var(--ease) both; }
body.motion-enabled.intro-auto-running .logo-rings i:nth-child(2) { animation-delay: .08s; }
body.motion-enabled.intro-auto-running .logo-rings i:nth-child(3) { animation-delay: .16s; }
@keyframes ringResolve { 0%, 51% { opacity: 0; transform: scale(.54); } 70% { opacity: 1; transform: scale(1.03); } 79%,100% { opacity: 1; transform: scale(1); } }
.intro-message {
  position: absolute; z-index: 6; left: var(--page-pad); right: var(--page-pad); bottom: 6.2vh;
  max-width: var(--max); margin: 0 auto; opacity: 1; transform: translateY(0); will-change: transform, opacity;
}
body.motion-enabled .intro-message { opacity: var(--message-opacity, 0); transform: translateY(var(--message-y, 40px)); }
.intro-kicker { margin: 0 0 1.25rem; color: rgba(255,255,255,.62); font-size: .65rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.intro-message h1 { margin: 0; max-width: 1100px; font-family: var(--display); font-weight: 400; font-size: clamp(3.1rem, 6.8vw, 8.2rem); line-height: .91; letter-spacing: -.048em; }
.intro-message h1 em { font-weight: 400; color: rgba(255,255,255,.54); }
.intro-deck { margin-top: 2.2rem; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.22); display: grid; grid-template-columns: minmax(0, 39rem) auto; gap: 2rem; align-items: end; }
.intro-deck p { margin: 0; color: var(--muted-dark); line-height: 1.58; font-size: clamp(.92rem, 1.1vw, 1.06rem); }
.text-link { display: inline-flex; gap: 1rem; align-items: center; justify-content: space-between; min-width: 13rem; padding: .8rem 0; text-decoration: none; border-bottom: 1px solid currentColor; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover span:last-child { transform: translate(4px,-4px); }
.text-link.light { color: white; }
.scroll-cue { position: absolute; z-index: 8; right: var(--page-pad); bottom: 1.9rem; width: 10rem; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; color: rgba(255,255,255,.48); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; opacity: var(--cue-opacity, 0); }
.scroll-cue i { display: block; width: 1px; height: 2.3rem; background: linear-gradient(white, transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
.intro-index { position: absolute; right: var(--page-pad); top: 6.2rem; display: flex; gap: 1.1rem; font-size: .53rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.32); opacity: .32; }

.manifesto { height: 240vh; }
.manifesto-sticky { position: sticky; top: 0; min-height: 100vh; padding: 15vh var(--page-pad) 8vh; display: grid; grid-template-columns: 1fr minmax(0,3fr); grid-template-rows: 1fr auto; gap: 2rem; align-items: start; }
.manifesto-stage { align-self: center; }
.manifesto-line { margin: .15em 0; font-family: var(--display); font-size: clamp(3rem, 6.5vw, 7.3rem); line-height: .98; letter-spacing: -.045em; color: rgba(8,8,8,.17); transition: color .5s var(--ease), transform .7s var(--ease); }
.manifesto-line span { color: inherit; font-style: italic; }
.manifesto-line.is-active { color: var(--ink); transform: translateX(-.04em); }
.manifesto-note { grid-column: 2; justify-self: end; max-width: 38rem; margin: 0; color: var(--muted-light); line-height: 1.65; }

.expertise { padding: 10rem var(--page-pad) 6rem; }
.section-head { max-width: var(--max); margin: 0 auto 5rem; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.section-intro { margin: 0; color: var(--muted-dark); max-width: 42rem; text-align: right; line-height: 1.5; }
.expertise-list { max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--line-dark); }
.expertise-item { min-height: 70vh; padding: clamp(3rem,7vw,7rem) 0; display: grid; grid-template-columns: .42fr 2.2fr 1fr; gap: 2rem; align-items: center; border-bottom: 1px solid var(--line-dark); opacity: .37; transform: scale(.982); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.expertise-item.is-active { opacity: 1; transform: scale(1); }
.expertise-no { align-self: start; font-family: var(--display); font-size: 1.2rem; color: rgba(255,255,255,.46); }
.expertise-copy h2 { margin: 0 0 2rem; font-family: var(--display); font-size: clamp(3rem,5.8vw,6.9rem); line-height: .94; font-weight: 400; letter-spacing: -.045em; }
.expertise-copy p { max-width: 44rem; margin: 0; color: var(--muted-dark); line-height: 1.65; font-size: 1.02rem; }
.expertise-tags { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.expertise-tags span { border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: .62rem .9rem; color: rgba(255,255,255,.71); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; }

.architecture { height: 220vh; }
.architecture-sticky { position: sticky; top: 0; min-height: 100vh; padding: 14vh var(--page-pad) 8vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,1.25fr); gap: clamp(2rem,7vw,9rem); align-items: center; overflow: hidden; }
.architecture-copy h2 { margin: 2rem 0; font-family: var(--display); font-size: clamp(3rem,5vw,6.5rem); font-weight: 400; line-height: .96; letter-spacing: -.04em; }
.architecture-copy > p:last-child { max-width: 36rem; color: var(--muted-light); line-height: 1.65; }
.architecture-system { position: relative; width: min(68vh,700px); aspect-ratio: 1; justify-self: end; }
.system-lines { width: 100%; height: 100%; overflow: visible; transform: rotate(var(--system-rotate,0deg)); transition: transform .1s linear; }
.system-lines circle, .system-lines line { fill: none; stroke: rgba(8,8,8,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.system-core { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 9.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; font-size: .62rem; letter-spacing: .17em; }
.system-node { position: absolute; z-index: 3; left: 50%; top: 50%; font-size: .64rem; font-weight: 700; letter-spacing: .12em; }
.node-a { margin: -42% 0 0 -1%; } .node-b { margin: -26% 0 0 35%; } .node-c { margin: 1% 0 0 43%; } .node-d { margin: 31% 0 0 26%; }
.node-e { margin: 39% 0 0 -3%; } .node-f { margin: 25% 0 0 -34%; } .node-g { margin: -3% 0 0 -42%; } .node-h { margin: -30% 0 0 -31%; }

.clients { padding: 11rem var(--page-pad) 0; overflow: hidden; }
.clients-grid { max-width: var(--max); margin: 0 auto 8rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(3rem,8vw,10rem); }
.clients h2 { margin: 2rem 0 0; font-family: var(--display); font-size: clamp(3rem,5.1vw,6.5rem); line-height: .95; font-weight: 400; letter-spacing: -.04em; }
.client-types { border-top: 1px solid var(--line-dark); }
.client-types article { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.2rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line-dark); }
.client-types span { color: rgba(255,255,255,.50); font-family: var(--display); }
.client-types p { margin: 0; color: var(--muted-dark); line-height: 1.6; }
.marquee { width: calc(100% + 2 * var(--page-pad)); margin-left: calc(-1 * var(--page-pad)); border-top: 1px solid var(--line-dark); overflow: hidden; }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 1.4rem; padding: 1.45rem 0; animation: marquee 28s linear infinite; font-family: var(--display); font-size: clamp(2rem,4vw,4.5rem); color: rgba(255,255,255,.22); }
.marquee-track i { font-family: var(--sans); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.boutique { padding: 11rem var(--page-pad) 10rem; }
.boutique-intro { max-width: var(--max); margin: 0 auto 10rem; display: grid; grid-template-columns: .48fr 1.45fr .8fr; gap: 2rem; align-items: start; }
.boutique-intro h2 { margin: 0; font-family: var(--display); font-size: clamp(3rem,5.3vw,6.7rem); line-height: .95; font-weight: 400; letter-spacing: -.045em; }
.boutique-intro > p:last-child { margin: .25rem 0 0; color: var(--muted-light); line-height: 1.65; }
.profile { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(300px,.82fr) 1.18fr; gap: clamp(3rem,8vw,9rem); align-items: center; }
.profile-image { --parallax-y: 0px; transform: translateY(var(--parallax-y)); will-change: transform; }
.portrait-frame { position: relative; overflow: hidden; min-height: min(70vh,780px); background: #d8d5ce; }
.portrait-frame img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.04); transform: scale(1.025); }
.portrait-wash { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(0,0,0,.12)); mix-blend-mode: multiply; }
.portrait-caption { margin: .8rem 0 0; color: var(--muted-light); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.profile-copy h3 { margin: 2rem 0; font-family: var(--display); font-size: clamp(3.2rem,5.5vw,6.8rem); line-height: .93; font-weight: 400; letter-spacing: -.045em; }
.profile-lead { max-width: 43rem; color: var(--muted-light); font-size: 1.05rem; line-height: 1.65; }
.profile-facts { margin: 3rem 0; border-top: 1px solid var(--line-light); }
.profile-facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line-light); }
.profile-facts dt { font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.profile-facts dd { margin: 0; color: var(--muted-light); }

.contact { min-height: 100vh; padding: 15vh var(--page-pad) 7vh; display: flex; align-items: center; }
.contact-inner { width: min(100%,var(--max)); margin: 0 auto; }
.contact h2 { margin: 2rem 0 2.5rem; font-family: var(--display); font-size: clamp(4rem,8vw,10rem); line-height: .87; font-weight: 400; letter-spacing: -.05em; }
.contact-note { color: var(--muted-dark); }
.contact-mail { margin-top: 4rem; padding: 1.4rem 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-family: var(--display); font-size: clamp(1.8rem,4vw,4.5rem); }
.contact-mail span:last-child { font-family: var(--sans); transition: transform .35s var(--ease); }
.contact-mail:hover span:last-child { transform: translate(8px,-8px); }
.contact-meta { margin-top: 1.4rem; display: flex; justify-content: space-between; gap: 2rem; color: var(--muted-dark); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.contact-details { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.contact-save { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-end; gap: .5625rem; }
.contact-meta .contact-save-link { min-height: 1rem; color: rgba(255,255,255,.68); text-decoration: none; font-family: var(--sans); font-size: .65625rem; font-weight: 500; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.contact-meta .contact-save-link:visited,
.contact-meta .contact-save-link:hover,
.contact-meta .contact-save-link:focus { color: rgba(255,255,255,.68); }
.contact-save-qr { display: block; width: 60px; height: 60px; overflow: hidden; background: #e9e6df; line-height: 0; }
.contact-save-qr img { display: block; width: 60px; height: 60px; }
.site-footer { padding: 1.4rem var(--page-pad); display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; background: var(--ink); color: rgba(255,255,255,.48); border-top: 1px solid var(--line-dark); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }
.site-footer > div:last-child { justify-self: end; }
.footer-links { display: flex; gap: 1.4rem; }
.footer-links a { text-decoration: none; }
.noscript { position: fixed; z-index: 999; left: 0; right: 0; bottom: 0; padding: .8rem; text-align: center; background: white; color: black; }

/* Production accessibility and route-based language links. */
.language-switch a {
  color: inherit;
  padding: .35rem 0;
  text-decoration: none;
  transition: color .3s var(--ease);
}
.language-switch a:hover,
.language-switch a.is-active { color: white; }
.language-switch a.is-active { font-weight: 700; }
:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .intro { height: 245vh; }
  .intro-logo { width: clamp(12rem,45vw,25rem); }
  .intro-message { bottom: 8vh; }
  .intro-deck { grid-template-columns: 1fr; }
  .intro-deck .text-link { justify-self: start; }
  .manifesto-sticky { grid-template-columns: 1fr; }
  .manifesto-note { grid-column: 1; }
  .expertise-item { grid-template-columns: .25fr 1.75fr; }
  .expertise-tags { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
  .architecture-sticky { grid-template-columns: 1fr; padding-top: 11vh; }
  .architecture-system { width: min(55vh,620px); justify-self: center; }
  .clients-grid, .boutique-intro { grid-template-columns: 1fr; }
  .boutique-intro { margin-bottom: 6rem; }
  .profile { grid-template-columns: 1fr; }
  .profile-image { max-width: 680px; }
}

@media (max-width: 640px) {
  :root { --page-pad: 1.2rem; }
  .site-header { height: 66px; }
  .brand { font-size: .68rem; }
  .language-switch { font-size: .60rem; }
  .intro { height: 240vh; }
  .intro-grid { background-size: 20vw 20vw; }
  .complexity-cloud span { font-size: clamp(.72rem,2.4vw,.9rem); letter-spacing:.07em; }
  .complexity-cloud .term-major { font-size: clamp(.82rem,3vw,1.08rem); }
  .intro-logo { width: 72vw; max-width: 23rem; }
  .intro-message { bottom: 9vh; }
  .intro-message h1 { font-size: clamp(2.7rem,12vw,4.7rem); }
  .intro-deck p { font-size: .88rem; }
  .intro-index { display: none; }
  .scroll-cue { left: auto; right: 1rem; transform: none; }
  .manifesto { height: auto; }
  .manifesto-sticky { position: relative; min-height: auto; padding: 8rem var(--page-pad); }
  .manifesto-line { color: var(--ink); font-size: clamp(2.5rem,12vw,4.4rem); }
  .manifesto-line + .manifesto-line { margin-top: .5em; }
  .expertise { padding-top: 7rem; }
  .section-head { display: block; }
  .section-intro { text-align: left; margin-top: 1.2rem; }
  .expertise-item { min-height: auto; padding: 5rem 0; grid-template-columns: 1fr; }
  .expertise-no, .expertise-tags { grid-column: 1; }
  .expertise-copy h2 { font-size: clamp(2.8rem,13vw,4.5rem); }
  .architecture { height: auto; }
  .architecture-sticky { position: relative; min-height: auto; padding: 8rem var(--page-pad); }
  .architecture-system { width: 92vw; max-width: 480px; margin-top: 4rem; }
  .system-node { font-size: .48rem; }
  .clients { padding-top: 8rem; }
  .clients-grid { margin-bottom: 5rem; }
  .clients h2 { font-size: clamp(2.8rem,13vw,4.5rem); }
  .boutique { padding-top: 8rem; }
  .boutique-intro h2 { font-size: clamp(2.8rem,13vw,4.5rem); }
  .portrait-frame { min-height: 62vh; }
  .profile-copy h3 { font-size: clamp(3rem,14vw,5rem); }
  .profile-facts div { grid-template-columns: 1fr; }
  .contact h2 { font-size: clamp(3.5rem,17vw,6rem); }
  .contact-meta { flex-direction: column; }
  .contact-details { align-items: flex-start; text-align: left; }
  .contact-phone { min-height: 44px; display: inline-flex; align-items: center; }
  .contact-save { margin-top: 0; align-items: flex-start; }
  .contact-meta .contact-save-link { min-height: 44px; display: inline-flex; align-items: center; }
  .contact-save-qr { display: none; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div:last-child { justify-self: start; }
}



/* Static fallback when scripts are blocked. */
body:not(.motion-enabled) .complexity-cloud { display: none; }
body:not(.motion-enabled) .intro-logo { --logo-scale: .68; --logo-opacity: .50; --logo-blur: 0px; --logo-y: -25vh; }
body:not(.motion-enabled) .logo-rings i { --ring-scale: 1; --ring-opacity: .65; }
body:not(.motion-enabled) .intro-message { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .intro { height: 100vh; }
  .complexity-cloud { display: none; }
  .intro-logo { --logo-scale: 1; --logo-opacity: .2; --logo-blur: 0px; --logo-y: -16vh; }
  .intro-wordmark { --wordmark-opacity: 1; }
  .intro-message { --message-opacity: 1; --message-y: 0px; }
  .scroll-cue { display: none; }
  .manifesto, .architecture { height: auto; }
  .manifesto-sticky, .architecture-sticky { position: relative; }
  .manifesto-line { color: var(--ink); }
  .expertise-item { opacity: 1; transform: none; }
}

.contact-meta a { color: inherit; text-decoration: none; }
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .language-switch { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  .intro-logo { width: min(78vw, 22rem); }
  .nl-mark { width: 29%; }
  .logo-rings i:nth-child(1) { inset: 4%; }
  .logo-rings i:nth-child(2) { inset: 20%; }
  .logo-rings i:nth-child(3) { inset: 32%; }
  .intro-message { bottom: 7.5vh; }
  .intro-message h1 { font-size: clamp(2.55rem, 11.4vw, 4.45rem); }
  .intro-deck { margin-top: 1.3rem; padding-top: 1rem; }
  .scroll-cue { display: none; }
}


/* =============================================================
   Prototype 0.2.5 — cleanly based on 0.2.3
   Only the approved opener, header and expertise-navigation changes.
   ============================================================= */

/* The navigation remains perfectly centred in the original 3-column grid. */
.site-nav {
  justify-self: center;
  align-items: center;
  height: 78px;
}
.site-nav > a,
.nav-group {
  height: 78px;
  display: inline-flex;
  align-items: center;
}
.nav-group { position: relative; }
.nav-group__trigger { height: 100%; display: inline-flex; align-items: center; }
.nav-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: min(31rem, 48vw);
  padding: .72rem 0;
  background: rgba(8,8,8,.975);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.38);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%,-.55rem);
  transition: opacity .28s var(--ease), transform .38s var(--ease), visibility 0s linear .38s;
  pointer-events: none;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: rgba(255,255,255,.30);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .42s var(--ease);
}
.nav-dropdown a {
  display: block;
  padding: .78rem 1.15rem;
  color: rgba(255,255,255,.62);
  font-size: .65rem;
  line-height: 1.35;
  letter-spacing: .075em;
  text-transform: none;
  white-space: nowrap;
  transition: color .22s var(--ease), background .22s var(--ease), padding-left .28s var(--ease);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.045);
  padding-left: 1.42rem;
  outline: none;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,0);
  transition-delay: 0s;
  pointer-events: auto;
}
.nav-group:hover .nav-dropdown::before,
.nav-group:focus-within .nav-dropdown::before,
.nav-group.is-open .nav-dropdown::before { transform: scaleX(1); }

/* The menu is intentionally absent during the wow sequence and appears
   only when the target settles into its still frame. As it is fixed,
   this never shifts the layout. */
.site-header {
  transition: background .45s var(--ease), border-color .45s var(--ease), opacity .52s var(--ease), transform .68s var(--ease);
}
body.motion-enabled .site-header {
  opacity: 0;
  transform: translateY(-102%);
  pointer-events: none;
}
body.motion-enabled.intro-lock-state .site-header,
body.motion-enabled.intro-auto-complete .site-header {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* NL has clear air inside the smallest ring. LEGAL sits outside and below
   the outer ring, remains bright white and scales/moves with the full target. */
.nl-mark {
  width: 22%;
  max-height: 26%;
  filter: brightness(1.28) drop-shadow(0 0 24px rgba(255,255,255,.15));
}
.intro-legal {
  position: absolute;
  left: 50%;
  top: calc(100% + clamp(1rem, 1.35vw, 1.45rem));
  z-index: 3;
  transform: translateX(-50%);
  color: #fff;
  opacity: var(--legal-opacity, 0);
  font-size: clamp(.98rem, 1.28vw, 1.28rem);
  font-weight: 500;
  letter-spacing: .62em;
  line-height: 1;
  text-indent: .62em;
  white-space: nowrap;
  text-shadow: 0 0 24px rgba(255,255,255,.15);
  will-change: opacity, transform, filter;
}
body.motion-enabled.intro-auto-running .intro-logo,
body.motion-enabled.intro-auto-running .logo-rings i {
  animation-duration: 4.1s;
}
body.motion-enabled.intro-auto-running .intro-legal {
  animation: legalResolve 4.1s var(--ease) both;
}
@keyframes legalResolve {
  0%, 72% { opacity: 0; transform: translateX(-50%) translateY(.6rem); filter: blur(5px); }
  88%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); }
}

/* The approved shorter underline leaves visual space before the scroll cue. */
.intro-deck .text-link {
  min-width: 0;
  width: clamp(10.8rem, 12vw, 12rem);
  padding-right: .1rem;
}

body:not(.motion-enabled) .intro-legal { --legal-opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .intro-legal { --legal-opacity: 1; }
  .site-header { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}
@media (max-width: 980px) {
  .site-nav { height: auto; }
}
@media (max-width: 640px) {
  .nl-mark { width: 22%; max-height: 26%; }
  .intro-legal { top: calc(100% + .8rem); font-size: .8rem; }
}


/* ========================================================================
   Prototype 0.2.9 — refined directly on stable 0.2.8
   ======================================================================== */

/* The rings breathe permanently whenever the bullseye is in view. The
   movement is deliberately more legible than in 0.2.8, but remains slow and
   restrained. It does not stop after manual scrolling, so returning to the
   hero restores the same living brand state. */
body.motion-enabled .logo-rings {
  animation: nlTargetBreath 2.65s cubic-bezier(.45,0,.55,1) infinite;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}
@keyframes nlTargetBreath {
  0%, 100% {
    transform: scale(1);
    opacity: .90;
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  50% {
    transform: scale(1.042);
    opacity: 1;
    filter: drop-shadow(0 0 17px rgba(255,255,255,.10));
  }
}

/* Release variables are applied only after the automatic intro completes. */
.nl-mark {
  opacity: var(--mark-opacity, 1);
  transition: opacity .08s linear;
}
.logo-rings i { filter: blur(var(--ring-blur, 0px)); }

/* The bullseye remains the brand lock-up in the final hero composition. */
.hero-wordmark {
  display: none;

  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(6.9rem, 12.5vh, 9.4rem);
  width: clamp(14rem, 20vw, 20rem);
  height: auto;
  opacity: var(--wordmark-opacity, 0);
  transform: translate(-50%, var(--wordmark-y, 26px)) scale(var(--wordmark-scale, .9));
  filter: brightness(1.22) drop-shadow(0 0 28px rgba(255,255,255,.10));
  pointer-events: none;
  will-change: opacity, transform;
}

/* Precise architecture animation: no orbiting or per-frame wobble. */
.system-lines { transition: none; will-change: transform, opacity; }
.system-core { will-change: transform, opacity; }
.system-node { opacity: .18; will-change: transform, opacity; }

/* Mandates is a complete black viewport and remains pinned while its three
   client groups are introduced. */
.clients {
  height: 210vh;
  padding: 0;
  overflow: visible;
  background: var(--ink);
}
.clients-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 11vh var(--page-pad) 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
}
.clients-grid {
  width: min(100%, var(--max));
  flex: 1;
  margin: 0 auto 2rem;
  align-items: center;
}
.client-types article {
  opacity: .30;
  transform: translateY(12px);
  transition: opacity .48s var(--ease), transform .55s var(--ease), border-color .48s var(--ease);
}
.client-types article.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255,255,255,.34);
}
.marquee { flex: none; }

/* Boutique is also a complete pinned chapter. The portrait is a restrained
   editorial element rather than the dominant content. */
.boutique {
  height: 205vh;
  padding: 0;
  background: var(--paper);
}
.boutique-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 9vh var(--page-pad) 5vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--paper);
}
.boutique-intro {
  width: min(100%, var(--max));
  margin: 0 auto 3.8vh;
  grid-template-columns: .38fr 1.32fr .82fr;
}
.boutique-intro h2 { font-size: clamp(2.75rem, 4.55vw, 5.55rem); }
.profile {
  width: min(100%, var(--max));
  min-height: 0;
  grid-template-columns: minmax(230px, .52fr) 1.48fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.profile-image {
  width: min(22vw, 330px);
  max-width: 330px;
  justify-self: start;
  opacity: var(--profile-image-opacity, 1);
  transform: translateY(calc(var(--parallax-y, 0px) + var(--profile-image-y, 0px))) scale(var(--profile-image-scale, 1));
}
.portrait-frame { min-height: 0; aspect-ratio: 4 / 5; }
.portrait-frame img {
  min-height: 0;
  width: 100%;
  height: 100%;
  object-position: center 10%;
}
.profile-copy {
  opacity: var(--profile-copy-opacity, 1);
  transform: translateY(var(--profile-copy-y, 0px));
  will-change: opacity, transform;
}
.profile-copy h3 { margin: 1.25rem 0; font-size: clamp(2.7rem, 4.55vw, 5.45rem); }
.profile-lead { font-size: 1rem; }
.profile-facts { margin: 1.8rem 0; }
.profile-facts div { padding: .88rem 0; }

@media (max-height: 820px) and (min-width: 981px) {
  .boutique-sticky { padding-top: 7.3vh; padding-bottom: 3.5vh; }
  .boutique-intro { margin-bottom: 2.2vh; }
  .boutique-intro h2 { font-size: clamp(2.4rem, 3.9vw, 4.6rem); }
  .profile-image { width: min(18vw, 270px); }
  .profile-copy h3 { font-size: clamp(2.35rem, 3.9vw, 4.55rem); }
  .profile-facts { margin: 1.15rem 0; }
  .profile-facts div { padding: .62rem 0; }
}

@media (max-width: 980px) {
  .hero-wordmark { top: 9vh; width: clamp(11rem, 30vw, 15rem); }
  .clients, .boutique { height: auto; }
  .clients-sticky, .boutique-sticky {
    position: relative;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .clients-sticky { padding: 8rem var(--page-pad) 0; }
  .boutique-sticky { padding: 8rem var(--page-pad); }
  .profile-image { width: min(54vw, 330px); }
}

@media (max-width: 640px) {
  .hero-wordmark { top: 7.7vh; width: 10.8rem; }
  .clients-sticky, .boutique-sticky { min-height: auto; }
  .profile-image { width: min(70vw, 290px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wordmark {
    --wordmark-opacity: 1;
    --wordmark-y: 0px;
    --wordmark-scale: 1;
  }
}


/* Prototype 0.2.8 — contact subtitle removed pending a stronger solution. */
.contact h2 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  body.motion-enabled .logo-rings { animation: none !important; filter: none !important; }
}


/* ========================================================================
   Prototype 0.2.11 — simplified navigation and refined mandate chapter
   ======================================================================== */

/* The header remains deliberately quiet: no expertise dropdown, four direct
   destinations and the language switch as the final control. */
.site-nav {
  gap: clamp(.95rem, 2.15vw, 2.35rem);
}
.site-nav > a {
  height: 78px;
  display: inline-flex;
  align-items: center;
}
.nav-group,
.nav-dropdown { display: none !important; }

/* The structure chapter is an editorial bridge rather than a navigation
   destination; its small label identifies the working method. */
.architecture .section-label { letter-spacing: .235em; }

/* The moving typographic layer remains characteristic, but no longer competes
   with the mandate content. */
.clients-sticky .marquee {
  margin-bottom: clamp(.9rem, 1.8vh, 1.35rem);
}
.clients-sticky .marquee-track {
  padding: 1.25rem 0;
  animation-duration: 31s;
  font-size: clamp(1.72rem, 3.44vw, 3.87rem);
  color: rgba(255,255,255,.60);
}

@media (max-width: 980px) {
  .site-nav { gap: 1.35rem; }
}
@media (max-width: 640px) {
  .clients-sticky .marquee-track {
    font-size: clamp(1.55rem, 8vw, 2.35rem);
    animation-duration: 34s;
  }
}

/* ========================================================================
   Prototype 0.2.12 — quieter mandate typography, editorial boutique portrait,
   and navigation indicators contained within the black header.
   ======================================================================== */

/* Header lines live entirely inside the permanent black band, so hover and
   active states remain equally legible over dark and light page chapters. */
.site-nav > a::after {
  left: 10%;
  right: 10%;
  bottom: 11px;
  height: 1px;
  background: #fff;
  opacity: .72;
  transform-origin: center;
  transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .26s ease;
}
.site-nav > a:hover::after,
.site-nav > a:focus-visible::after,
.site-nav > a.is-active::after {
  transform: scaleX(1);
  transform-origin: center;
}
.site-nav > a.is-active::after { opacity: 1; }
.site-nav > a:focus-visible { outline: none; }

/* The mandate marquee remains an editorial motion layer, but is deliberately
   subordinate to the actual client situations. */
.clients-sticky .marquee {
  margin-bottom: clamp(1.15rem, 2.15vh, 1.7rem);
}
.clients-sticky .marquee-track {
  padding: 1.08rem 0;
  animation-duration: 34s;
  font-size: clamp(1.55rem, 3.10vw, 3.48rem);
  color: rgba(255,255,255,.57);
}

/* Boutique portrait: an open editorial composition instead of a framed card.
   The monochrome image is composited on the same warm paper as the page, with
   no black side bars, no heavy border and no memorial-like presentation. */
.profile {
  grid-template-columns: minmax(270px, .62fr) 1.38fr;
  gap: clamp(3.5rem, 7.5vw, 8.5rem);
}
.profile-image {
  position: relative;
  width: min(25vw, 390px);
  max-width: 390px;
  padding-left: clamp(.65rem, 1.2vw, 1.2rem);
  clip-path: inset(0 var(--profile-clip, 0%) 0 0);
  will-change: transform, opacity, clip-path;
}
.profile-image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7%;
  bottom: 13%;
  width: 1px;
  background: rgba(8,8,8,.17);
}
.portrait-frame {
  min-height: 0;
  aspect-ratio: 1320 / 1720;
  overflow: visible;
  background: transparent;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: none;
  background: transparent;
}
.portrait-wash { display: none; }
.portrait-caption {
  margin: .7rem 0 0 clamp(.35rem, .7vw, .7rem);
  color: rgba(8,8,8,.46);
  font-size: .58rem;
  letter-spacing: .145em;
}

@media (max-height: 820px) and (min-width: 981px) {
  .profile-image { width: min(21vw, 325px); }
}
@media (max-width: 980px) {
  .profile-image {
    width: min(50vw, 360px);
    max-width: 360px;
    justify-self: start;
  }
}
@media (max-width: 640px) {
  .clients-sticky .marquee-track {
    font-size: clamp(1.35rem, 7vw, 2.1rem);
    animation-duration: 38s;
  }
  .profile-image {
    width: min(72vw, 310px);
    max-width: 310px;
    padding-left: .75rem;
  }
  .portrait-caption { font-size: .54rem; }
}

/* ========================================================================
   Prototype 0.2.14 — content refinements only, based on stable 0.2.12.
   The intro, hero timeline, ring animation and navigation logic are unchanged.
   ======================================================================== */

/* Mandate: remove the adjacent repetition of “Komplexität” and clarify the
   business situation in a restrained supporting sentence. */
.mandates-deck {
  max-width: 42rem;
  margin: 1.45rem 0 0;
  color: rgba(255,255,255,.56);
  font-family: var(--sans);
  font-size: clamp(.91rem, 1.02vw, 1.04rem);
  line-height: 1.58;
}

/* The moving principles are a quiet system layer, not a second headline. */
.clients-sticky .marquee {
  margin-bottom: clamp(1.45rem, 2.65vh, 2.05rem);
}
.clients-sticky .marquee-track {
  padding: .82rem 0;
  animation-duration: 42s;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.55vw, 1.62rem);
  font-weight: 500;
  letter-spacing: .105em;
  color: rgba(255,255,255,.39);
  gap: 1rem;
}

/* Boutique: remove the remaining separator and integrate the portrait into
   the paper as an open editorial image rather than a profile card. */
.profile {
  grid-template-columns: minmax(255px, .58fr) 1.42fr;
  gap: clamp(4rem, 8.2vw, 9.25rem);
  align-items: center;
}
.profile-image {
  width: min(24vw, 370px);
  max-width: 370px;
  padding-left: 0;
  justify-self: center;
  margin-left: clamp(.75rem, 2vw, 2.5rem);
  clip-path: inset(0 var(--profile-clip, 0%) 0 0);
}
.profile-image::before,
.profile-image::after {
  content: none !important;
  display: none !important;
}
.portrait-frame {
  aspect-ratio: 1320 / 1720;
  overflow: visible;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: translateX(2.5%);
  background: transparent;
}
.portrait-caption {
  margin: .3rem 0 0 4.5%;
  color: rgba(8,8,8,.40);
  font-size: .53rem;
  letter-spacing: .15em;
}
.profile-copy {
  padding-top: clamp(.35rem, 1vh, .9rem);
}

@media (max-height: 820px) and (min-width: 981px) {
  .profile-image { width: min(20.5vw, 315px); }
  .mandates-deck { margin-top: 1rem; font-size: .88rem; }
}
@media (max-width: 980px) {
  .profile {
    grid-template-columns: 1fr;
    gap: 3.1rem;
  }
  .profile-image {
    width: min(52vw, 360px);
    max-width: 360px;
    justify-self: start;
    margin-left: 0;
  }
  .clients-sticky .marquee-track {
    font-size: clamp(.92rem, 3.8vw, 1.25rem);
    animation-duration: 45s;
  }
}
@media (max-width: 640px) {
  .mandates-deck { margin-top: 1.15rem; font-size: .88rem; }
  .profile-image {
    width: min(72vw, 310px);
    max-width: 310px;
  }
  .portrait-caption { font-size: .49rem; }
  .clients-sticky .marquee-track {
    font-size: clamp(.78rem, 4.2vw, 1rem);
    animation-duration: 48s;
    letter-spacing: .09em;
  }
}


/* ========================================================================
   Prototype 0.2.15 — ultrawide layout discipline and full-width principles
   Built directly on stable 0.2.14. Intro timing, ring animation and automatic
   scrolling logic remain untouched.
   ======================================================================== */

/* On very wide, relatively shallow displays, width-based scaling otherwise
   causes the claim to rise into the NL lock-up. Limit both elements by the
   available height and preserve a deliberate visual pause below LEGAL. */
@media (min-width: 1600px) and (max-height: 900px) and (min-aspect-ratio: 11 / 5) {
  .intro-logo {
    width: clamp(15rem, 38vh, 18rem);
  }
  .intro-message {
    bottom: clamp(.8rem, 2vh, 1.25rem);
    max-width: 980px;
  }
  .intro-message h1 {
    max-width: 900px;
    font-size: clamp(4rem, 10.4vh, 5.8rem);
  }
  .intro-kicker {
    margin-bottom: .9rem;
  }
  .intro-deck {
    grid-template-columns: minmax(0, 34rem) auto;
    margin-top: 1.45rem;
    padding-top: 1rem;
  }
  .scroll-cue {
    bottom: 1rem;
  }
}

/* At extreme desktop widths, keep the same centered reading rhythm rather
   than allowing the hero to expand merely because horizontal space exists. */
@media (min-width: 2200px) and (max-height: 1050px) {
  .intro-message {
    max-width: 940px;
  }
  .intro-message h1 {
    max-width: 860px;
    font-size: clamp(4rem, 9.4vh, 5.45rem);
  }
  .intro-logo {
    width: clamp(14.5rem, 34vh, 17.5rem);
  }
}

/* The approach chapter is one centered editorial stage. Its two elements no
   longer anchor to opposing viewport edges on ultrawide monitors. */
.architecture-sticky {
  width: min(calc(100% - var(--page-pad) - var(--page-pad)), 1480px);
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  grid-template-columns: minmax(360px, 1fr) minmax(380px, .92fr);
  gap: clamp(4rem, 6vw, 7.5rem);
}
.architecture-copy {
  max-width: 43rem;
}
.architecture-system {
  justify-self: center;
  width: min(58vh, 575px);
}

@media (min-width: 1700px) {
  .architecture-sticky {
    grid-template-columns: minmax(390px, 1fr) minmax(400px, .88fr);
    gap: clamp(4.5rem, 5.6vw, 7rem);
  }
  .architecture-copy h2 {
    max-width: 10.8ch;
  }
  .architecture-copy > p:last-child {
    max-width: 35rem;
  }
  .architecture-system {
    width: min(54vh, 535px);
  }
}

@media (max-width: 980px) {
  .architecture-sticky {
    width: 100%;
    margin-inline: 0;
    padding: 8rem var(--page-pad);
  }
}

/* The principles ticker is independent from the 1500px content grid. Two
   identical sequences create a seamless full-bleed loop on any viewport. */
.clients-sticky .marquee {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}
.clients-sticky .marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation-name: marquee;
  animation-duration: 58s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.clients-sticky .marquee-sequence {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
}
.clients-sticky .marquee-sequence span,
.clients-sticky .marquee-sequence i {
  flex: none;
}

@media (max-width: 980px) {
  .clients-sticky .marquee-track { animation-duration: 62s; }
}
@media (max-width: 640px) {
  .clients-sticky .marquee-track { animation-duration: 66s; }
}

/* Final ultrawide calibration after viewport review. */
@media (min-width: 1600px) and (max-height: 900px) and (min-aspect-ratio: 11 / 5) {
  .intro-logo {
    top: 48.5%;
  }
  .intro-message h1 {
    font-size: clamp(3.85rem, 9.8vh, 5.5rem);
  }
  .architecture-sticky {
    grid-template-columns: minmax(600px, 1.12fr) minmax(420px, .88fr);
  }
  .architecture-copy h2 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(3.45rem, 7.8vh, 4.45rem);
    line-height: .98;
  }
  .architecture-system {
    width: min(54vh, 500px);
  }
}

/* ========================================================================
   Prototype 0.2.16 — stable ultrawide composition
   Built directly on 0.2.15. The intro timeline, target animation and
   cinematic scrolling code are unchanged.
   ======================================================================== */

/* Keep the brand, central navigation and language control inside the same
   editorial width as the page content. On ultrawide displays the two outer
   controls therefore retain deliberate margins instead of drifting into the
   physical screen corners. */
.site-header {
  display: block;
  padding: 0;
}
.header-inner {
  width: min(100%, calc(var(--max) + 2 * var(--page-pad)));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

/* The approach chapter uses the same centred editorial frame as Expertise.
   Its internal grid remains unchanged; only the excessive ultrawide spread
   is removed. */
.manifesto-sticky {
  width: min(100%, calc(var(--max) + 2 * var(--page-pad)));
  margin-inline: auto;
}

/* At short ultrawide ratios, anchor the message from the top instead of the
   bottom. This prevents the claim from rising into LEGAL and preserves a
   consistent visual pause between the target lock-up and the text. The claim
   is modestly height-limited so the complete deck remains visible. */
@media (min-width: 1600px) and (max-height: 920px) and (min-aspect-ratio: 11 / 5) {
  .intro-logo {
    top: 48.5%;
    width: clamp(14.5rem, 36vh, 17rem);
  }
  .intro-message {
    top: clamp(25rem, 57.5vh, 29rem);
    bottom: auto;
    max-width: 920px;
  }
  .intro-message h1 {
    max-width: 900px;
    font-size: clamp(3.75rem, 8.6vh, 4.45rem);
    line-height: .91;
  }
  .intro-kicker {
    margin-bottom: .72rem;
  }
  .intro-deck {
    grid-template-columns: minmax(0, 32rem) auto;
    margin-top: 1.05rem;
    padding-top: .82rem;
    gap: 1.6rem;
  }
  .intro-deck p {
    font-size: .82rem;
    line-height: 1.48;
  }
  .scroll-cue {
    bottom: .65rem;
  }
}

@media (max-width: 980px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }
}


/* ========================================================================
   Prototype 0.2.17 — resilient hero lock-up across aspect ratios
   Built directly on stable 0.2.16. The intro timeline, ring animation,
   automatic scrolling and all other sections remain unchanged.
   ======================================================================== */

/* A wide browser window must not narrow the headline column and force the
   third line to wrap. Keep the final phrase on one line on all desktop
   layouts and cap its type by viewport height as well as width. */
@media (min-width: 981px) {
  .intro-message h1 {
    max-width: none;
  }
  .intro-message h1 em {
    display: inline-block;
    white-space: nowrap;
  }
}

/* Aspect-ratio based handling also works on high-DPI displays where the CSS
   viewport may be considerably narrower than the physical screenshot width.
   The final target and copy are tied together by a fixed visual gap, so a
   resize cannot pull the claim upward into LEGAL or the rings. */
@media (min-width: 981px) and (min-aspect-ratio: 2 / 1) {
  .intro-logo {
    top: 50%;
    width: clamp(12rem, min(29vw, 36vh), 26rem);
  }

  .intro-message {
    top: calc(30vh + clamp(6rem, min(14.5vw, 18vh), 13rem) + clamp(3.5rem, 8vh, 5rem));
    bottom: auto;
    max-width: 1180px;
  }

  .intro-message h1 {
    max-width: none;
    font-size: clamp(3rem, min(6.8vw, 9.2vh), 5.4rem);
    line-height: .91;
  }

  .intro-kicker {
    margin-bottom: clamp(.62rem, 1.4vh, .9rem);
  }

  .intro-deck {
    grid-template-columns: minmax(0, 34rem) auto;
    margin-top: clamp(.9rem, 2vh, 1.35rem);
    padding-top: clamp(.72rem, 1.7vh, 1rem);
    gap: 1.6rem;
  }

  .intro-deck p {
    font-size: clamp(.78rem, 1.45vh, .92rem);
    line-height: 1.48;
  }
}

/* On exceptionally shallow windows, preserve the same lock-up gap while
   reducing only the typography and supporting copy. */
@media (min-width: 981px) and (min-aspect-ratio: 2 / 1) and (max-height: 650px) {
  .intro-logo {
    width: clamp(11.25rem, 34vh, 13.5rem);
  }
  .intro-message {
    top: calc(30vh + clamp(5.625rem, 17vh, 6.75rem) + 3.25rem);
  }
  .intro-message h1 {
    font-size: clamp(2.8rem, 8.8vh, 3.55rem);
  }
  .intro-deck {
    margin-top: .72rem;
    padding-top: .62rem;
  }
  .intro-deck p {
    font-size: .76rem;
  }
}


/* ========================================================================
   Prototype 0.2.18 — finalised core messaging and production-style footer.
   Built directly on stable 0.2.17. Intro timing, ring animation, automatic
   scrolling and responsive hero lock-up remain unchanged.
   ======================================================================== */

/* Footer content follows the same centred editorial grid as the header and
   page chapters. The copyright now sits directly beneath the footer brand and
   no longer drifts into a physical screen corner on ultrawide displays. */
.site-footer {
  display: block;
  padding: 0 var(--page-pad);
}
.site-footer-inner {
  width: min(100%, calc(var(--max) + 2 * var(--page-pad)));
  margin-inline: auto;
  padding: 1.8rem var(--page-pad) 1.7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}
.footer-brand-block {
  display: grid;
  gap: .42rem;
  justify-items: start;
}
.footer-brand {
  color: rgba(255,255,255,.82);
  font-size: .76rem;
  letter-spacing: .135em;
}
.footer-copyright {
  color: rgba(255,255,255,.42);
  font-size: .58rem;
  letter-spacing: .105em;
}
.site-footer .footer-links {
  justify-self: end;
  align-self: end;
}

@media (max-width: 640px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.35rem;
    padding-block: 1.6rem;
  }
  .site-footer .footer-links {
    justify-self: start;
    flex-wrap: wrap;
  }
}


/* ========================================================================
   Prototype 0.2.19 — footer refinement only.
   The standalone footer wordmark is removed; legal links remain optically
   centred while the copyright stays inside the shared editorial grid.
   ======================================================================== */
.site-footer {
  display: block;
  padding: 0 var(--page-pad);
}
.site-footer-inner {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding: 1.8rem 0 1.7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}
.footer-brand-block,
.footer-brand {
  display: none !important;
}
.footer-copyright {
  justify-self: start;
  color: rgba(255,255,255,.50);
  font-size: .58rem;
  letter-spacing: .105em;
}
.site-footer .footer-links {
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
}
.footer-balance {
  min-width: 0;
}
@media (max-width: 640px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1rem;
    padding-block: 1.55rem;
    text-align: center;
  }
  .footer-copyright,
  .site-footer .footer-links {
    justify-self: center;
  }
  .site-footer .footer-links {
    flex-wrap: wrap;
  }
  .footer-balance { display: none; }
}


/* ========================================================================
   Prototype 0.2.20 — firm-first boutique and refined narrative copy.
   Built directly on stable 0.2.19. The opener, hero lock-up, ring motion,
   cinematic auto-scroll and all preceding chapter animations are unchanged.
   ======================================================================== */

/* Firm-first boutique: institutional proof and operating model replace the
   personal portrait. The visual system uses three connected layers rather
   than repeating the hero's circular target motif. */
.boutique-firm-first {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  row-gap: clamp(.8rem, 1.7vh, 1.5rem);
  padding-top: clamp(4.8rem, 7.2vh, 6.2rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.6rem);
}
.boutique-firm-first .boutique-intro {
  margin-bottom: 0;
}
.boutique-firm-first .boutique-intro p:last-child {
  max-width: 35rem;
  line-height: 1.55;
}
.boutique-firm-layout {
  width: min(100%, var(--max));
  min-height: 0;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
  gap: clamp(4rem, 7vw, 8rem);
  align-items: center;
}
.boutique-model {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1.22 / 1;
  justify-self: center;
  isolation: isolate;
  will-change: opacity, transform;
}
.model-grid {
  position: absolute;
  inset: 0;
  opacity: .23;
  background-image:
    linear-gradient(rgba(8,8,8,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,8,8,.08) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(135deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.model-axis {
  position: absolute;
  z-index: 1;
  background: rgba(8,8,8,var(--model-line-opacity, .42));
}
.model-axis-horizontal { left: 2%; right: 2%; top: 52%; height: 1px; }
.model-axis-vertical { top: 3%; bottom: 3%; left: 52%; width: 1px; }
.model-layer {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(8,8,8,.30);
  background: rgba(241,238,231,.80);
  box-shadow: 0 18px 55px rgba(8,8,8,.035);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.model-layer span {
  position: absolute;
  left: 1rem;
  top: .8rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .19em;
}
.model-layer-experience {
  left: 3%; top: 7%; width: 62%; height: 38%;
  transform: translate(calc(var(--model-spread, 0px) * -1), calc(var(--model-spread, 0px) * -1));
}
.model-layer-accountability {
  left: 19%; top: 29%; width: 67%; height: 38%;
}
.model-layer-execution {
  left: 36%; top: 51%; width: 60%; height: 38%;
  transform: translate(var(--model-spread, 0px), var(--model-spread, 0px));
}
.model-core {
  position: absolute;
  z-index: 4;
  left: 52%; top: 52%;
  transform: translate(-50%, -50%);
  padding: .78rem 1rem .72rem;
  color: white;
  background: var(--ink);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .17em;
  white-space: nowrap;
}
.boutique-principles {
  min-width: 0;
  align-self: stretch;
  display: grid;
  align-content: center;
}
.boutique-principle {
  display: grid;
  grid-template-columns: 3.15rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(.85rem, 1.7vh, 1.25rem) 0;
  border-top: 1px solid var(--line-light);
  will-change: opacity, transform;
}
.boutique-principle:last-child { border-bottom: 1px solid var(--line-light); }
.principle-no {
  padding-top: .15rem;
  color: rgba(8,8,8,.64);
  font-size: .58rem;
  letter-spacing: .16em;
}
.boutique-principle h3 {
  margin: 0 0 .45rem;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.boutique-principle p {
  max-width: 39rem;
  margin: 0;
  color: var(--muted-light);
  font-size: clamp(.86rem, .92vw, .98rem);
  line-height: 1.55;
}
.boutique-credentials {
  width: min(100%, var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  will-change: opacity, transform;
}
.boutique-credentials > div {
  min-width: 0;
  padding: clamp(.75rem, 1.45vh, 1.05rem) clamp(.8rem, 1.35vw, 1.35rem);
  border-left: 1px solid var(--line-light);
}
.boutique-credentials > div:first-child { border-left: 0; padding-left: 0; }
.boutique-credentials > div:last-child { padding-right: 0; }
.boutique-credentials span,
.boutique-credentials strong {
  display: block;
}
.boutique-credentials span {
  margin-bottom: .38rem;
  color: rgba(8,8,8,.64);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.boutique-credentials strong {
  color: rgba(8,8,8,.76);
  font-size: clamp(.7rem, .72vw, .82rem);
  font-weight: 500;
  line-height: 1.4;
}
.boutique-founder {
  width: min(100%, var(--max));
  margin: 0 auto;
  color: rgba(8,8,8,.64);
  font-size: .58rem;
  letter-spacing: .095em;
  text-align: right;
  will-change: opacity, transform;
}

/* With motion disabled or unavailable, all firm-first content remains fully
   visible and does not depend on JS-driven state. */
body:not(.motion-enabled) .boutique-model,
body:not(.motion-enabled) .boutique-principle,
body:not(.motion-enabled) .boutique-credentials,
body:not(.motion-enabled) .boutique-founder { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .boutique-model,
  .boutique-principle,
  .boutique-credentials,
  .boutique-founder { opacity: 1 !important; transform: none !important; }
}

@media (max-height: 820px) and (min-width: 981px) {
  .boutique-firm-first {
    padding-top: 4.65rem;
    padding-bottom: 1rem;
    row-gap: .58rem;
  }
  .boutique-firm-first .boutique-intro h2 { font-size: clamp(2.25rem, 3.7vw, 4.25rem); }
  .boutique-firm-first .boutique-intro p:last-child { font-size: .82rem; line-height: 1.45; }
  .boutique-firm-layout { grid-template-columns: minmax(300px, .88fr) minmax(430px, 1.12fr); }
  .boutique-model { width: min(100%, 430px); }
  .boutique-principle { padding: .58rem 0; }
  .boutique-principle p { font-size: .78rem; line-height: 1.42; }
  .boutique-credentials > div { padding-top: .55rem; padding-bottom: .55rem; }
  .boutique-credentials strong { font-size: .65rem; }
  .boutique-founder { font-size: .52rem; }
}

@media (max-width: 980px) {
  .boutique-firm-first {
    display: block;
    height: auto;
    padding: 8rem var(--page-pad) 5rem;
    overflow: visible;
  }
  .boutique-firm-first .boutique-intro { margin-bottom: 4rem; }
  .boutique-firm-layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .boutique-model { width: min(100%, 590px); justify-self: start; }
  .boutique-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4rem;
  }
  .boutique-credentials > div:nth-child(3) { border-left: 0; }
  .boutique-founder { margin-top: 1.4rem; text-align: left; }
}

@media (max-width: 640px) {
  .boutique-firm-first { padding-top: 6.8rem; padding-bottom: 4rem; }
  .boutique-firm-first .boutique-intro { margin-bottom: 3rem; }
  .boutique-firm-layout { gap: 3rem; }
  .boutique-model { width: 100%; }
  .model-layer span { left: .7rem; top: .6rem; font-size: .48rem; }
  .model-core { padding: .62rem .72rem .58rem; font-size: .52rem; }
  .boutique-principle { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; }
  .boutique-credentials { grid-template-columns: 1fr; }
  .boutique-credentials > div,
  .boutique-credentials > div:first-child,
  .boutique-credentials > div:last-child {
    padding: 1rem 0;
    border-left: 0;
    border-top: 1px solid var(--line-light);
  }
  .boutique-credentials > div:first-child { border-top: 0; }
}


/* ========================================================================
   Prototype 0.2.23 — mobile navigation and iPhone/Safari layout repair.
   This final cascade layer intentionally overrides historical prototype
   rules only below 980px. Desktop, opener timing and approved motion remain
   unchanged.
   ======================================================================== */
.mobile-menu-toggle,
.mobile-menu { display: none; }

@media (max-width: 980px) {
  :root { --mobile-header-height: 78px; }

  body.mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 1rem;
  }
  .site-nav,
  .language-switch { display: none !important; }

  .mobile-menu-toggle {
    justify-self: end;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 12px 8px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    place-content: center;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform .28s var(--ease), opacity .2s ease;
  }
  .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.25); }
  .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu-toggle:focus-visible { outline: 1px solid rgba(255,255,255,.72); outline-offset: 2px; }

  .mobile-menu {
    position: fixed;
    z-index: 99;
    inset: var(--mobile-header-height) 0 0;
    display: block;
    height: calc(100dvh - var(--mobile-header-height));
    min-height: calc(100svh - var(--mobile-header-height));
    color: #fff;
    background: #080808;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .28s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .mobile-menu__inner {
    width: min(100%, 760px);
    min-height: 100%;
    margin-inline: auto;
    padding: clamp(3rem, 9vh, 5.5rem) var(--page-pad) max(2rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }
  .mobile-menu__nav { display: grid; }
  .mobile-menu__nav a {
    padding: .72rem 0 .82rem;
    border-bottom: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-family: var(--display);
    font-size: clamp(2.35rem, 8vw, 4rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.035em;
    text-decoration: none;
  }
  .mobile-menu__nav a:first-child { border-top: 1px solid rgba(255,255,255,.16); }
  .mobile-menu__nav a.is-active { font-style: italic; }
  .mobile-menu__language {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-top: 2.4rem;
    color: rgba(255,255,255,.38);
    font-size: .72rem;
    letter-spacing: .18em;
  }
  .mobile-menu__language button,
  .mobile-menu__language a {
    appearance: none;
    border: 0;
    padding: .45rem 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-menu__language .is-active,
  .mobile-menu__language button[aria-pressed="true"] { color: #fff; font-weight: 700; }
  .mobile-menu__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
    margin-top: auto;
    padding-top: 2.5rem;
    color: rgba(255,255,255,.52);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mobile-menu__meta a { color: inherit; text-decoration: none; }
}

@media (max-width: 760px) {
  :root { --mobile-header-height: 66px; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  main, section, section > div,
  .architecture-copy, .architecture-system,
  .boutique-intro, .boutique-intro > *,
  .boutique-firm-layout, .boutique-firm-layout > *,
  .boutique-principles, .boutique-credentials,
  .clients-grid, .clients-grid > * { min-width: 0; max-width: 100%; }

  .brand { white-space: nowrap; }
  .mobile-menu__inner { padding-inline: 1.45rem; }

  /* Content-rich chapters use natural document flow on iPhone. */
  .architecture,
  .clients,
  .boutique { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .architecture-sticky,
  .clients-sticky,
  .boutique-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Working Method: copy first, complete system graphic below it. */
  .architecture-sticky {
    width: 100% !important;
    margin: 0 !important;
    padding: 7.4rem var(--page-pad) 5.5rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3.3rem !important;
    align-items: start !important;
  }
  .architecture-copy { width: 100%; }
  .architecture-copy h2 {
    max-width: 100% !important;
    margin: 1.7rem 0 1.55rem;
    font-size: clamp(2.7rem, 11.5vw, 3.8rem) !important;
    line-height: .96;
    overflow-wrap: normal;
  }
  .architecture-copy > p:last-child {
    max-width: 100% !important;
    margin-bottom: 0;
    font-size: .98rem;
    line-height: 1.62;
  }
  .architecture-system {
    width: min(74vw, 310px) !important;
    max-width: calc(100vw - 3.4rem) !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  .system-core {
    width: clamp(5.1rem, 22vw, 6.4rem);
    font-size: .46rem;
    letter-spacing: .12em;
  }
  .system-node {
    font-size: .40rem !important;
    letter-spacing: .075em !important;
    white-space: nowrap;
  }
  .node-a { margin: -41% 0 0 -5% !important; }
  .node-b { margin: -26% 0 0 27% !important; }
  .node-c { margin: 0 0 0 32% !important; }
  .node-d { margin: 29% 0 0 20% !important; }
  .node-e { margin: 37% 0 0 -7% !important; }
  .node-f { margin: 22% 0 0 -35% !important; }
  .node-g { margin: -4% 0 0 -37% !important; }
  .node-h { margin: -29% 0 0 -31% !important; }

  /* Client chapter: no pinning on mobile; retain the moving principles strip. */
  .clients-sticky {
    display: block !important;
    padding: 7.2rem var(--page-pad) 0 !important;
  }
  .clients-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3.2rem !important;
    margin-bottom: 3.5rem !important;
  }
  .clients h2 { font-size: clamp(2.75rem, 11.5vw, 3.9rem) !important; }
  .client-types article { opacity: 1 !important; transform: none !important; }

  /* Firm-first Boutique: force the introductory desktop triptych into one
     coherent mobile reading column before the model and proof points. */
  .boutique-firm-first {
    display: block !important;
    width: 100% !important;
    padding: 7rem var(--page-pad) 4.8rem !important;
  }
  .boutique-firm-first .boutique-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    margin: 0 0 3.4rem !important;
    gap: 1.35rem !important;
  }
  .boutique-firm-first .boutique-intro h2 {
    max-width: 100% !important;
    font-size: clamp(3rem, 13.2vw, 4.15rem) !important;
    line-height: .92;
    overflow-wrap: anywhere;
  }
  .boutique-firm-first .boutique-intro p:last-child {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .96rem;
    line-height: 1.58;
  }
  .boutique-firm-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 3.2rem !important;
  }
  .boutique-model {
    width: min(100%, 340px) !important;
    margin-inline: auto;
    justify-self: center !important;
  }
  .boutique-principles { width: 100%; }
  .boutique-credentials {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    margin-top: 3.5rem !important;
  }
  .boutique-founder { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-toggle span { transition: none !important; }
  .client-types article { opacity: 1 !important; transform: none !important; }
}

/* ========================================================================
   Prototype 0.2.24 — stable iOS hero landing and restrained mobile menu
   Built directly on stable 0.2.23. Desktop layout and approved motion remain
   unchanged. These final rules intentionally win the mobile cascade.
   ======================================================================== */
@media (max-width: 760px) {
  /* Keep the long animated intro dimension stable while Safari's browser
     chrome appears and disappears. The JS destination is recalculated against
     the live visual viewport, so the hero cannot overshoot into an empty frame. */
  .intro { height: 230svh !important; }
  .intro-sticky { height: 100svh !important; min-height: 100svh; }

  /* The message remains anchored near the lower edge. The target is moved and
     reduced by the motion timeline, leaving a deliberate gap below LEGAL. */
  .intro-message { bottom: max(5.5svh, 2.6rem) !important; top: auto !important; }
  .intro-message h1 { font-size: clamp(2.45rem, 11.1vw, 4.15rem) !important; }
  .intro-kicker { margin-bottom: .85rem !important; }
  .intro-deck { margin-top: 1.15rem !important; padding-top: .9rem !important; }

  /* Mobile navigation is a precise utility layer, not another editorial
     headline. Use the sans face, restrained scale and compact vertical rhythm. */
  .mobile-menu__inner {
    padding-top: clamp(1.65rem, 4.5svh, 2.5rem) !important;
  }
  .mobile-menu__nav a {
    padding: 1rem 0 1.05rem !important;
    font-family: var(--sans) !important;
    font-size: clamp(.98rem, 4.2vw, 1.16rem) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
  }
  .mobile-menu__nav a.is-active {
    font-style: normal !important;
    color: #fff;
  }
  .mobile-menu__language { margin-top: 1.65rem !important; }
  .mobile-menu__meta {
    margin-top: auto;
    padding-top: 2rem !important;
    line-height: 1.55;
  }
}

@media (max-width: 760px) {
  /* `overflow-x:hidden` turns the page into a containing scroll box in mobile
     browsers and disables the sticky intro. `clip` suppresses horizontal
     overflow without breaking position:sticky. */
  html, body { overflow-x: clip !important; }
}