/* FORMANT 3.4 READY — release layer. Loaded after app.css intentionally. */
:root{
  --release-build:"3.10-balanced";
  --header-compact-width:1240px;
  --touch:44px;
}

/* Header: top = wide rounded capsule, scroll = continuously narrower capsule.
   No shape swap, no square phase, no bottom-line-only state. */
#header{padding:14px var(--page-pad) 0!important;left:0!important;right:0!important;inset-block-start:0!important;contain:none!important}
#header .nav,
body.scrolled #header .nav{
  width:min(var(--nav-width,100%),100%)!important;
  max-width:none!important;
  min-width:0!important;
  height:var(--nav-height,72px)!important;
  margin-inline:auto!important;
  border:1px solid rgba(13,13,12,.13)!important;
  border-radius:28px!important;
  background:rgba(241,240,236,.84)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
  box-shadow:0 10px 34px rgba(13,13,12,calc(.035 + var(--header-progress,0)*.05))!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden;
  transition:background-color .26s ease,border-color .26s ease,box-shadow .26s ease!important;
  will-change:width,height;
  overflow:hidden;
}
#header .nav nav{font-size:16.5px!important;font-weight:570!important;letter-spacing:0!important}
#header .nav nav a{padding:19px 0!important}
#header .wordmark{font-size:20px!important}
#header .nav-cta{min-height:48px!important;font-size:14.5px!important}
.locale button,.mobile-bottom button{min-width:var(--touch)!important;min-height:var(--touch)!important;padding:0 8px!important;border-radius:10px!important}
.locale button:hover{background:rgba(13,13,12,.05)}
.menu-btn,.mobile-top button{min-width:var(--touch)!important;min-height:var(--touch)!important;display:grid;place-items:center;padding:0!important}

/* Typography: enforce sans display and readable Cyrillic rhythm. */
.display-xl,.display-l,.display-editorial,
.product-copy h2,.work-index-item h2,.chapter h2,.process-step h3,.type-list strong,
.discipline-list h3,.atlas-row h3,.related h2,.finish-list strong,.principles blockquote,
.process-index strong,.stat strong,.footer-commission strong,.brief-step h2,.brief-success h2,
.contact-grid a{
  font-family:var(--display)!important;
  font-weight:700!important;
  font-style:normal!important;
  text-transform:none!important;
  letter-spacing:-.035em!important;
  word-spacing:0!important;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1;
}
html[lang="ru"] .display-xl,
html[lang="ru"] .display-l,
html[lang="ru"] .display-editorial,
html[lang="ru"] .product-copy h2,
html[lang="ru"] .work-index-item h2,
html[lang="ru"] .chapter h2,
html[lang="ru"] .process-step h3,
html[lang="ru"] .brief-step h2{
  letter-spacing:-.018em!important;
  word-spacing:.005em!important;
  line-height:1.01!important;
  text-wrap:pretty!important;
}
html[lang="ru"] .display-xl{font-size:clamp(60px,6.35vw,132px)!important;line-height:.98!important}
html[lang="ru"] .display-l{font-size:clamp(50px,4.8vw,100px)!important;line-height:1.01!important}
html[lang="ru"] .display-editorial{font-size:clamp(44px,4vw,84px)!important;line-height:1.035!important}
body{font-size:clamp(17px,.98vw,19px)!important;line-height:1.62!important}
.lede,.body-lg{line-height:1.58!important;letter-spacing:-.006em!important}

/* Vertical rhythm: prevent CTA/text collisions and compressed sections. */
.eyebrow{margin-bottom:clamp(62px,5vw,94px)!important}
.section-head{margin-bottom:clamp(82px,6.4vw,128px)!important}
.section-head>.lede,.section-head>.body-lg{margin-top:36px!important}
.body-lg+.btn,.lede+.btn,.hero-sub+.btn{margin-top:48px!important}
.text-link{margin-top:42px!important}
.product-actions{margin-top:50px!important}

/* Buttons: always visibly interactive. Salmon fill becomes outlined on hover,
   without changing geometry. */
.btn,.nav-cta,.text-link{border-width:1px!important;border-style:solid!important}
.btn{min-height:50px!important;font-size:14.5px!important;font-weight:630!important}
.btn.signal{background:var(--signal)!important;border-color:var(--signal)!important;color:#fff!important}
.btn.signal:hover{background:transparent!important;color:var(--signal)!important;border-color:var(--signal)!important}
.text-link{min-height:48px!important;border-color:currentColor!important;border-radius:13px!important;padding-inline:18px!important;font-size:15.5px!important;font-weight:620!important}

/* Work filters: clear numbered tabs, generous reading size. */
.filters{gap:clamp(34px,3.4vw,68px)!important;margin-top:80px!important}
.filters button{font-size:17px!important;font-weight:600!important;min-width:74px!important;min-height:70px!important;padding-bottom:16px!important}
.filters button:before{font-size:13px!important}
.filters button:after{height:3px!important}

/* Process score: clean signal bars, no square nodes or dirty connector line. */
.process-line{gap:clamp(18px,1.8vw,34px)!important;margin-top:78px!important}
.process-line span{min-height:112px!important;font-size:15.5px!important;padding-top:24px!important}
.process-line span:before{height:1px!important;background:rgba(13,13,12,.32)!important}
.process-line span:after{width:4px!important;height:4px!important;border-radius:50%!important;background:var(--signal)!important;left:15px!important;top:-2px!important}
.process-line b{font-size:clamp(25px,1.7vw,34px)!important}

/* Bespoke process rows: each visual belongs to its step; no sticky drift. */
.process-step{align-items:start!important;min-height:0!important;padding:48px 0 92px!important}
.process-step>div:first-child{position:relative!important;top:auto!important;align-self:start!important;grid-column:1/5!important;padding-right:clamp(24px,2vw,44px)!important}
.process-step>.asset{grid-column:7/13!important;align-self:start!important;margin:0!important;max-height:none!important}
.process-step h3{margin:0!important;max-width:12ch!important}

/* References and upload areas: FORMANT flat surface, zero gradient. */
.reference-dock,.upload{background:#E9E6DE!important;background-image:none!important;border:1px solid rgba(13,13,12,.24)!important;box-shadow:none!important}
.reference-dock:hover,.upload:hover{background:#E2DED5!important;background-image:none!important;border-color:var(--signal)!important;box-shadow:none!important}
.reference-skip-choice{border:1px solid rgba(13,13,12,.26)!important;background:transparent!important}
.reference-skip-choice.selected{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.reference-skip-choice strong{font-size:17px!important}
.reference-link-add{min-height:44px!important;padding-inline:18px!important;font-size:15px!important;font-weight:620!important;border:1px solid var(--ink)!important;background:transparent!important}
.reference-link-add:hover{background:var(--ink)!important;color:var(--paper)!important}

/* Production captions stay readable but secondary. */
.asset-caption{font-size:13px!important;line-height:1.4!important}
.asset-caption span:last-child{font-size:12.5px!important}
.mono,.meta,.core-cap,.ui-note,.anno{font-size:12.5px!important;letter-spacing:0!important;text-transform:none!important}

@media(max-width:1100px){
  #header .nav,body.scrolled #header .nav{width:100%!important;height:62px!important;border-radius:22px!important}
  #header .nav nav{font-size:15.5px!important}
  .process-step>div:first-child{grid-column:1/5!important}.process-step>.asset{grid-column:6/13!important}
}
@media(max-width:720px){
  #header{padding:8px 12px 0!important}
  #header .nav,body.scrolled #header .nav{width:100%!important;height:58px!important;border-radius:19px!important}
  .menu-btn{display:grid!important}
  .display-xl,.display-l,.display-editorial{letter-spacing:-.02em!important}
  html[lang="ru"] .display-xl,html[lang="ru"] .display-l,html[lang="ru"] .display-editorial{letter-spacing:-.006em!important;line-height:1.05!important}
  .process-step{display:block!important;padding:32px 0 64px!important}
  .process-step>div:first-child{padding-right:0!important}.process-step>.asset{margin-top:38px!important}
  .filters{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important;gap:30px!important}
  .filters::-webkit-scrollbar{display:none}
  .filters button{font-size:15.5px!important;min-width:68px!important;white-space:nowrap!important}
}

/* Mobile Cyrillic product pages: long technical headings must wrap inside the
   viewport instead of enlarging the document. */
@media(max-width:720px){
  html[lang="ru"] .specs .display-l{font-size:clamp(38px,10.8vw,46px)!important;line-height:1.04!important;overflow-wrap:anywhere!important;word-break:normal!important}
  html[lang="ru"] .related h2{font-size:clamp(34px,9.8vw,42px)!important;line-height:1.05!important;overflow-wrap:anywhere!important;word-break:normal!important;max-width:100%!important}
}

/* ========================================================================== 
   FORMANT 3.7 FINAL — interaction cleanup and spacing correction
   ========================================================================== */
:root{
  --release-build:"3.10-balanced";
  --header-compact-width:1340px;
}

/* Header: wide at the hero, then contracts toward the centre. Content inside
   has deliberate breathing room; desktop never shows a redundant menu icon. */
#header{padding-inline:var(--page-pad)!important}
#header .nav,body.scrolled #header .nav{
  grid-template-columns:minmax(170px,1fr) auto minmax(290px,1fr)!important;
  padding-inline:26px 22px!important;
}
#header .nav nav{gap:clamp(30px,2.15vw,46px)!important}
#header .nav-actions{gap:22px!important;padding-left:28px!important}
#header .locale{gap:9px!important}
#header .nav-cta{margin-left:2px!important}
#header .menu-btn{display:none!important}
@media(max-width:1100px){
  #header .nav,body.scrolled #header .nav{grid-template-columns:1fr auto!important;padding-inline:18px 12px!important}
  #header .nav nav,#header .nav-cta{display:none!important}
  #header .menu-btn{display:grid!important}
  #header .nav-actions{padding-left:0!important;gap:12px!important}
}

/* The logo and every action button use exactly the same identity glyph. */
.mark,.action-mark{
  position:relative!important;display:inline-block!important;flex:none!important;
  width:23px!important;height:14px!important;background:none!important;transform:none!important;
}
.mark i,.action-mark i{
  position:absolute!important;width:3px!important;background:currentColor!important;
  transform:skewX(-14deg)!important;transition:transform .28s var(--ease),height .28s var(--ease),top .28s var(--ease)!important;
}
.wordmark .mark{color:var(--signal)!important}
.mark i:first-child,.action-mark i:first-child{left:1px!important;top:0!important;height:13px!important}
.mark i:last-child,.action-mark i:last-child{left:9px!important;top:3px!important;height:9px!important}
.mark:after,.action-mark:after{
  content:""!important;position:absolute!important;right:1px!important;top:2px!important;
  width:3px!important;height:3px!important;border-radius:50%!important;background:currentColor!important;opacity:1!important;
}
a:hover>.action-mark i:first-child,button:hover>.action-mark i:first-child{transform:skewX(-14deg) translateX(-2px)!important}
a:hover>.action-mark i:last-child,button:hover>.action-mark i:last-child{transform:skewX(-14deg) translateX(2px)!important}
a:hover>.action-mark:after,button:hover>.action-mark:after{transform:none!important;opacity:1!important}

/* Text links that perform navigation should read as controls. Remove the
   orange/black underline bars that looked like accidental decoration. */
.text-link{
  min-height:50px!important;padding:0 18px!important;margin-top:42px!important;
  border:1px solid currentColor!important;border-radius:14px!important;
  display:inline-flex!important;align-items:center!important;gap:16px!important;
  font-size:15.5px!important;font-weight:630!important;line-height:1!important;
  background:transparent!important;text-decoration:none!important;
  transition:background .22s ease,color .22s ease,border-color .22s ease!important;
}
.text-link:before,.text-link:after{display:none!important}
.text-link .action-mark{display:inline-block!important}
.ink .text-link{color:var(--paper)!important;border-color:rgba(241,240,236,.55)!important}
.ink .text-link:hover{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--paper)!important}
:not(.ink) .text-link:hover{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}

/* CTA geometry is stable and never gets a stray signal strip. */
.btn,.nav-cta{position:relative!important;overflow:hidden!important}
.btn:before,.btn:after,.nav-cta:before,.nav-cta:after{box-shadow:none!important}

/* Home bespoke process: a clean registry, not a decorative timeline. */
.process-line{
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:0!important;margin-top:76px!important;border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;background:transparent!important;
}
.process-line span{
  min-height:124px!important;padding:22px 18px 24px!important;border-right:1px solid var(--line)!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important;gap:24px!important;
  transform:none!important;font-size:15.5px!important;line-height:1.25!important;font-weight:590!important;
}
.process-line span:last-child{border-right:0!important}
.process-line span:before,.process-line span:after,.process-line b:before,.process-line b:after{display:none!important}
.process-line b{
  margin:0!important;font-family:var(--text)!important;font-size:13px!important;line-height:1!important;
  font-weight:700!important;color:var(--signal)!important;letter-spacing:0!important;
}
@media(max-width:900px){
  .process-line{display:flex!important;overflow-x:auto!important;scroll-snap-type:x proximity;scrollbar-width:none!important}
  .process-line::-webkit-scrollbar{display:none!important}
  .process-line span{flex:0 0 190px!important;scroll-snap-align:start!important}
}

/* Project filters keep the current editorial idea, but get clearer geometry. */
.filters{border-bottom:1px solid var(--line)!important;gap:clamp(28px,3vw,58px)!important}
.filters button{min-width:max-content!important;padding-inline:0!important}
.filters button:after{left:0!important;right:0!important}

/* Brief: option rows use a quiet radio state instead of the brand logo. */
.choice-state{
  width:22px;height:22px;border:1px solid rgba(13,13,12,.38);border-radius:50%;
  display:grid;place-items:center;justify-self:end;transition:border-color .2s ease,background .2s ease;
}
.choice-state:after{content:"";width:8px;height:8px;border-radius:50%;background:transparent;transition:background .2s ease,transform .2s ease;transform:scale(.6)}
.brief-option:hover .choice-state,.reference-skip-choice:hover .choice-state{border-color:var(--ink)}
.brief-option.selected .choice-state,.reference-skip-choice.selected .choice-state{border-color:var(--signal)!important;background:var(--signal)!important}
.brief-option.selected .choice-state:after,.reference-skip-choice.selected .choice-state:after{background:var(--paper)!important;transform:scale(1)}
.option-mark,.upload-mark{display:none!important}

/* References: flat, deliberate, and obvious. No gradients, orange side rails,
   decorative triple rules or hidden white-on-white buttons. */
.reference-workbench{gap:30px!important}
.reference-dock{
  min-height:180px!important;padding:34px 82px 34px 34px!important;
  border:1px solid rgba(13,13,12,.28)!important;border-radius:16px!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  display:block!important;
}
.reference-dock:before,.reference-dock:after{display:none!important}
.reference-dock:hover{background:rgba(13,13,12,.025)!important;border-color:var(--ink)!important;box-shadow:none!important}
.reference-dock strong{font-family:var(--text)!important;font-size:clamp(21px,1.55vw,28px)!important;font-weight:700!important;letter-spacing:-.015em!important}
.reference-dock p{margin:10px 0 0!important}
.upload-plus{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:1px solid rgba(13,13,12,.34);border-radius:50%;
  display:grid;place-items:center;font-family:var(--text);font-size:28px;font-weight:400;line-height:1;color:var(--ink);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.reference-dock:hover .upload-plus,.upload:hover .upload-plus{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.reference-link-block{margin-top:8px!important}
.reference-link-row{display:grid!important;grid-template-columns:minmax(0,1fr) 128px!important;gap:12px!important}
.reference-link-row input{color:var(--ink)!important;background:transparent!important;border:1px solid rgba(13,13,12,.28)!important;padding-inline:18px!important}
.reference-link-add{
  color:var(--ink)!important;background:transparent!important;border:1px solid var(--ink)!important;border-radius:13px!important;
  opacity:1!important;visibility:visible!important;
}
.reference-link-add:hover{color:var(--paper)!important;background:var(--ink)!important}
.reference-skip{padding-top:8px!important;gap:24px!important}
.reference-skip-choice{
  min-height:76px!important;padding:0 20px!important;grid-template-columns:48px 1fr 24px!important;
  border-radius:14px!important;background:transparent!important;
}
.reference-skip-choice.selected{background:var(--ink)!important;color:var(--paper)!important}
.reference-skip-choice.selected .choice-state{border-color:var(--signal)!important}
.reference-skip p{margin:0!important}

/* Final-step upload follows the exact same flat upload grammar. */
.upload{
  position:relative!important;min-height:132px!important;padding:28px 80px 28px 28px!important;
  border:1px solid rgba(13,13,12,.28)!important;border-radius:16px!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;
}
.upload:before,.upload:after{display:none!important}
.upload:hover{background:rgba(13,13,12,.025)!important;border-color:var(--ink)!important}
.upload .upload-plus{right:24px!important}
.upload-title{font-family:var(--text)!important;font-size:20px!important;font-weight:700!important;letter-spacing:-.01em!important}
.upload-format{color:var(--muted)!important}

/* Better spacing in the brief controls. */
.brief-controls{margin-top:52px!important;gap:16px!important;align-items:center!important}
.brief-controls .btn{min-width:150px!important}
.reference-workbench + .brief-controls{margin-top:58px!important}

@media(max-width:720px){
  .text-link{min-height:48px!important;margin-top:34px!important}
  .reference-dock{padding:26px 70px 26px 24px!important;min-height:166px!important}
  .upload-plus{right:20px;width:40px;height:40px;font-size:25px}
  .reference-link-row{grid-template-columns:1fr!important}.reference-link-add{width:100%!important;min-height:50px!important}
  .reference-skip{grid-template-columns:1fr!important}.reference-skip-choice{min-height:72px!important}
  .upload{padding:24px 68px 24px 24px!important}
}

/* ========================================================================== 
   FORMANT 3.7 FINAL — spacing, header balance, brief controls, upload identity
   ========================================================================== */
:root{
  --release-build:"3.10-balanced";
  --header-compact-width:1180px;
}

/* Balanced header: equal optical gaps between logo / nav / utilities.
   The shell still contracts smoothly via --nav-width from app.js. */
#header .nav,body.scrolled #header .nav{
  grid-template-columns:auto auto auto!important;
  justify-content:space-between!important;
  column-gap:clamp(34px,4vw,64px)!important;
  padding-inline:24px!important;
}
#header .wordmark{justify-self:start!important}
#header .nav nav{justify-self:center!important;gap:clamp(26px,2vw,38px)!important}
#header .nav-actions{justify-self:end!important;padding-left:0!important;gap:16px!important}
#header .locale{gap:6px!important;padding-right:4px!important}
#header .locale .locale-sep{opacity:.28;font-size:12px;transform:translateY(-.5px)}
#header .nav-cta{margin-left:0!important;padding-inline:19px!important}
@media(max-width:1100px){
  #header .nav,body.scrolled #header .nav{grid-template-columns:1fr auto!important;column-gap:14px!important;padding-inline:18px 12px!important}
}

/* Brief options: preserve the airy row, but bring the state control into the
   composition instead of pinning it to the viewport edge. */
.brief-options{overflow:hidden}
.brief-option{
  grid-template-columns:54px minmax(0,1fr) 22px!important;
  padding:24px 30px 24px 8px!important;
  min-height:84px!important;
  column-gap:16px!important;
}
.brief-option:hover{padding-left:12px!important;padding-right:30px!important}
.brief-option.selected{padding-left:12px!important;padding-right:30px!important}
.brief-option .choice-state{justify-self:end!important;margin-right:0!important}
.brief-option .option-index{padding-left:0!important}
@media(min-width:1500px){
  .brief-option{padding-right:40px!important}
  .brief-option:hover,.brief-option.selected{padding-right:40px!important}
}
@media(max-width:720px){
  .brief-option{grid-template-columns:42px minmax(0,1fr) 20px!important;padding:20px 18px 20px 4px!important;min-height:74px!important;column-gap:12px!important}
  .brief-option:hover,.brief-option.selected{padding-left:8px!important;padding-right:18px!important}
}

/* Skip choice follows the exact same right inset and radio geometry. */
.reference-skip-choice{
  grid-template-columns:48px minmax(0,1fr) 22px!important;
  padding:0 30px 0 20px!important;
  column-gap:14px!important;
}
@media(max-width:720px){.reference-skip-choice{padding-inline:18px!important}}

/* Upload surfaces use one clear visual grammar on steps 07 and 09.
   The brand glyph sits quietly in the top-right; the actual affordance is a
   small text action with a simple plus, never a giant circled plus. */
.reference-dock,.upload{
  background:transparent!important;
  border-color:rgba(13,13,12,.28)!important;
  transition:background .2s ease,border-color .2s ease!important;
}
.reference-dock:hover,.upload:hover{background:rgba(13,13,12,.025)!important;border-color:rgba(13,13,12,.72)!important}
.upload-plus{display:none!important}
.upload-identity{
  position:absolute!important;
  top:22px!important;
  right:24px!important;
  color:var(--signal)!important;
  pointer-events:none!important;
}
.upload-identity .action-mark{width:23px!important;height:14px!important}
.upload-action{
  position:absolute!important;
  right:24px!important;
  bottom:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  color:var(--ink)!important;
  font-family:var(--text)!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1!important;
  pointer-events:none!important;
}
.upload-action i{
  position:relative!important;
  width:14px!important;
  height:14px!important;
  display:block!important;
}
.upload-action i:before,.upload-action i:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:12px!important;
  height:1px!important;
  background:currentColor!important;
  transform:translate(-50%,-50%)!important;
}
.upload-action i:after{transform:translate(-50%,-50%) rotate(90deg)!important}
.reference-dock{padding:34px 132px 58px 34px!important}
.upload{padding:28px 150px 54px 28px!important}
.upload-format{position:absolute!important;left:28px!important;bottom:22px!important;margin:0!important}
.reference-dock p{max-width:64ch!important}
@media(max-width:720px){
  .reference-dock{padding:26px 68px 58px 24px!important}
  .upload{padding:24px 68px 58px 24px!important}
  .upload-identity{top:20px!important;right:20px!important}
  .upload-action{right:20px!important;bottom:20px!important}
  .upload-format{left:24px!important;bottom:20px!important}
}

/* Link entry is a real control. Text can never disappear against the surface. */
.reference-link-add{
  color:var(--ink)!important;
  background:var(--paper)!important;
  border-color:rgba(13,13,12,.72)!important;
  opacity:1!important;
  -webkit-text-fill-color:var(--ink)!important;
}
.reference-link-add:hover{color:var(--paper)!important;background:var(--ink)!important;-webkit-text-fill-color:var(--paper)!important}

/* Slightly more breathing room before actions on the reference screen. */
.reference-skip{margin-top:8px!important}
.reference-workbench + .brief-controls{margin-top:68px!important}
/* Filter tabs remain editorial, but every tab has a deliberate click target. */
.filters button{min-width:64px!important;padding-inline:4px!important}
@media(max-width:720px){.filters button{min-width:64px!important}}


/* ========================================================================== 
   FORMANT 3.10 — retained mobile QA cleanup
   Touch and precision-trackpad scrolling stay native; discrete mouse-wheel input is lightly interpolated in app.js.
   ========================================================================== */
@media(max-width:900px){
  /* The seven-stage registry stacks instead of creating a second horizontal
     scroll surface on touch devices. This keeps the page's only primary
     scroll direction vertical. */
  .process-line{
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  .process-line span{
    flex:none!important;
    min-height:78px!important;
    padding:18px 14px 18px!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
    display:grid!important;
    grid-template-columns:42px 1fr!important;
    align-items:center!important;
    gap:14px!important;
  }
  .process-line span:last-child{border-bottom:0!important}
}

/* Final QA: the document itself never creates a secondary horizontal scroll.
   Components may still manage their own overflow when intentional. */
html,body{overflow-x:clip!important;scroll-behavior:auto!important}
@media(max-width:900px){
  .work-card h3,.work-index-item h2,.case-card h3{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important}
}

/* ================================================================
   FORMANT 3.10 — Channel Selector + balanced wheel inertia
   ================================================================ */
:root{--release-build:"3.10-balanced"}

/* Work taxonomy is a FORMANT channel selector, not a generic tab row. */
.filters{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;
  width:100%!important;margin-top:clamp(58px,5vw,86px)!important;border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;overflow:visible!important;background:transparent!important
}
.filters button{
  position:relative!important;display:grid!important;grid-template-columns:auto 1fr auto!important;grid-template-rows:1fr!important;
  align-items:center!important;column-gap:14px!important;min-height:84px!important;padding:0 clamp(18px,1.5vw,28px)!important;
  border:0!important;border-left:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;
  color:var(--muted)!important;font-family:var(--text)!important;text-align:left!important;transition:color .24s ease,background .24s ease!important
}
.filters button:first-child{border-left:0!important}.filters button:before,.filters button:after{content:none!important;display:none!important}
.filter-index{font-size:12.5px;line-height:1;font-weight:650;color:var(--signal);font-variant-numeric:tabular-nums}
.filter-label{font-size:clamp(14.5px,1vw,16.5px);line-height:1.15;font-weight:570;letter-spacing:-.012em;color:inherit;white-space:normal}
.filter-mark{position:relative;width:29px;height:24px;display:block;opacity:.34;transition:opacity .22s ease,transform .3s var(--ease-silk)}
.filter-mark i{position:absolute;top:3px;width:3px;height:17px;border-radius:3px;background:currentColor;transform:skewX(-14deg);transition:transform .3s var(--ease-silk),background .22s ease}
.filter-mark i:first-child{left:6px}.filter-mark i:nth-child(2){left:14px;height:12px;top:7px}.filter-mark b{position:absolute;right:1px;top:5px;width:4px;height:4px;border-radius:50%;background:var(--signal);opacity:.2;transition:opacity .22s ease,transform .3s var(--ease-silk)}
.filters button:hover{color:var(--ink)!important;background:rgba(13,13,12,.018)!important}.filters button:hover .filter-mark{opacity:.72;transform:translateX(2px)}
.filters button.on{color:var(--ink)!important;background:rgba(241,91,58,.035)!important}.filters button.on .filter-label{font-weight:670}.filters button.on .filter-mark{opacity:1}.filters button.on .filter-mark i{background:var(--signal)}.filters button.on .filter-mark i:first-child{transform:skewX(-14deg) translateX(-2px)}.filters button.on .filter-mark i:nth-child(2){transform:skewX(-14deg) translateX(2px)}.filters button.on .filter-mark b{opacity:1;transform:translateX(1px)}
.filters button:focus-visible{outline:2px solid var(--signal);outline-offset:-3px;z-index:2}

@media(max-width:900px){
  .filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .filters button{min-height:74px!important;border-bottom:1px solid var(--line)!important}
  .filters button:nth-child(odd){border-left:0!important}.filters button:nth-last-child(-n+2){border-bottom:0!important}
  .filters button:last-child{grid-column:1/-1;border-left:0!important;border-top:1px solid var(--line)!important;border-bottom:0!important}
}
@media(max-width:520px){
  .filters{grid-template-columns:1fr!important}
  .filters button,.filters button:nth-child(odd),.filters button:last-child{grid-column:auto!important;border-left:0!important;border-top:0!important;border-bottom:1px solid var(--line)!important;min-height:68px!important;padding-inline:14px!important}
  .filters button:last-child{border-bottom:0!important}
  .filter-label{font-size:15px}.filter-mark{width:26px}
}


/* ==========================================================================
   FORMANT 3.10 — header locked to the content grid
   The capsule's open state must start and end on exactly the same vertical
   lines as `.container` (max-width var(--max), inset by var(--page-pad)).
   Previously #header was padded by --page-pad against the full viewport, so
   above --max the capsule ran wider than the content column on both sides.
   `100%` here resolves against the viewport, so the padding becomes the
   container's own gutter at every width.
   ========================================================================== */
#header{
  padding-inline:max(var(--page-pad),calc((100% - var(--max))/2 + var(--page-pad)))!important;
}
/* The open capsule is the grid width by construction, so it is correct before
   any script runs and cannot go stale on resize. --header-progress (0 open,
   1 compact) is the only value the scroll handler still drives. */
#header .nav,body.scrolled #header .nav{
  width:calc(100% - (100% - var(--header-compact-width,1180px)) * var(--header-progress,0))!important;
  max-width:100%!important;
  margin-inline:auto!important;
}


/* ==========================================================================
   FORMANT 3.11 - /engineering/ blocks 03-05, native technical drawings
   Replaces the old fake charts (a skewed border-top with border-radius:50%
   standing in for a response curve) with real SVG. Everything here is stroke
   work on transparent ground, so one rule set serves the paper sections and
   the ink ones - `.ink` only flips the ink token.
   ========================================================================== */
.dwg-pair,.charts{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,3vw,56px);
  margin-top:clamp(18px,2vw,34px);
}
.calib{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(28px,3vw,56px);align-items:start;
  margin-top:clamp(18px,2vw,34px);
}
.dwg,.chartfig,.calib-plan,.calib-curve{margin:0;min-width:0}
.dwg svg,.chartfig svg,.calib-plan svg,.calib-curve svg{width:100%;height:auto;display:block;overflow:visible}

/* --- shared ink token ------------------------------------------------- */
.dwg,.chartfig,.calib-plan,.calib-curve{--dwg:var(--ink);--dwg-soft:rgba(13,13,12,.34);--dwg-faint:rgba(13,13,12,.13);
  --dwg-fill:rgba(13,13,12,.06);--dwg-fill2:rgba(13,13,12,.12);--dwg-solid:rgba(13,13,12,.22)}
.ink .dwg,.ink .chartfig,.ink .calib-plan,.ink .calib-curve{--dwg:var(--paper);--dwg-soft:rgba(241,240,236,.42);--dwg-faint:rgba(241,240,236,.16);
  --dwg-fill:rgba(241,240,236,.09);--dwg-fill2:rgba(241,240,236,.17);--dwg-solid:rgba(241,240,236,.30)}

.dwg figcaption,.calib-plan figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font:500 13px/1.4 var(--text);letter-spacing:0;color:var(--muted)
}
.ink .dwg figcaption,.ink .calib-plan figcaption{border-top-color:var(--lineInv);color:#b8b7b1}
.dwg figcaption b{font:650 15px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ink .dwg figcaption b{color:var(--paper)}

/* --- charts ------------------------------------------------------------ */
.plot{fill:none;stroke:var(--dwg-soft);stroke-width:1}
.t line{stroke:var(--dwg-faint);stroke-width:1}
.t text{font:500 11px/1 var(--mono);letter-spacing:.06em;fill:var(--dwg-soft);text-anchor:middle}
.chartfig .t text,.calib-curve .t text{text-anchor:middle}
polyline{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
polyline.sig{stroke:var(--signal);stroke-width:2.4}
polyline.alt{stroke:var(--dwg);stroke-width:1.6;stroke-dasharray:7 5;opacity:.75}
polyline.raw{stroke:var(--dwg);stroke-width:1.5;opacity:.42}
polyline.fam{stroke:var(--dwg);stroke-width:1.2;opacity:.34}
polygon.band{fill:var(--signal);opacity:.075;stroke:none}

.chartfig figcaption,.calib-curve figcaption{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font:500 13px/1.4 var(--text);letter-spacing:0;color:var(--muted)
}
.ink .chartfig figcaption,.ink .calib-curve figcaption{border-top-color:var(--lineInv);color:#b8b7b1}
.chartfig figcaption b{flex:1 0 100%;font:650 15px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ink .chartfig figcaption b{color:var(--paper)}
.chartfig figcaption .note,.calib-curve figcaption .note{margin-left:auto;opacity:.72}

/* legend keys */
.k{width:22px;height:0;border-top-width:2px;border-top-style:solid;display:inline-block;margin-right:-8px}
.k.sig{border-color:var(--signal);border-top-width:2.4px}
.k.alt{border-color:currentColor;border-top-style:dashed;opacity:.75}
.k.raw{border-color:currentColor;opacity:.42}
.k.band{height:9px;border:0;background:var(--signal);opacity:.16;margin-top:-4px}

/* --- room plan ---------------------------------------------------------- */
.calib-plan .room{fill:none;stroke:var(--dwg-soft);stroke-width:1.4}
.calib-plan .thin{fill:none;stroke:var(--dwg-faint);stroke-width:1}
.calib-plan .thin.dash{stroke-dasharray:6 6}
.calib-plan .obj rect{fill:var(--dwg);stroke:none}
.calib-plan .tri{fill:none;stroke:var(--dwg-soft);stroke-width:1;stroke-dasharray:6 5}
.calib-plan .head{fill:none;stroke:var(--signal);stroke-width:2}
.calib-plan .refl{stroke:var(--signal);stroke-width:3;fill:none}
.calib-plan .arc{fill:none;stroke:var(--signal);stroke-width:1.2}
.calib-plan .ang{font:500 12px/1 var(--mono);letter-spacing:.06em;fill:var(--signal)}
.calib-plan .lab{font:500 11px/1 var(--mono);letter-spacing:.08em;fill:var(--dwg-soft)}
.calib-plan .lab.sigt{fill:var(--signal)}

@media(max-width:1100px){
  .calib{grid-template-columns:1fr;gap:clamp(30px,5vw,52px)}
}
@media(max-width:860px){
  .dwg-pair,.charts{grid-template-columns:1fr;gap:clamp(34px,7vw,54px)}
  .lead text,.dim text,.t text,.calib-plan .lab{font-size:13px}
  .chartfig figcaption .note,.calib-curve figcaption .note{margin-left:0;flex:1 0 100%}
}

/* ==========================================================================
   FORMANT 3.11 - /objects/ index: one stage height for all four objects
   The four rows sit on different column spans by design, so an aspect-ratio
   frame gave each object a different height and one row was a photograph while
   the rest were cutouts. Every row is a transparent cutout now, and the stage
   is a fixed height instead of a ratio, so the objects share one baseline and
   keep their true relative proportions inside it via object-fit:contain.
   ========================================================================== */
.product-index .asset-frame{
  aspect-ratio:auto!important;
  height:clamp(300px,34vw,560px)!important;
  background:transparent!important;border-color:transparent!important;
}
.product-index .asset-real{object-fit:contain!important}
.product-index .ghost svg{max-height:100%}
@media(max-width:860px){
  .product-index .asset-frame{height:clamp(260px,58vw,420px)!important}
}

/* ==========================================================================
   FORMANT 3.11 - vertical rhythm between a heading and the copy under it
   The display faces all carry margin:0, and the paragraph that follows them
   inside .story / .tech-split had no top margin either, so a 48px heading sat
   flush against its own body copy (measured gap: 0px on /objects/column/,
   /objects/arc/, /objects/node/, /objects/mass/, /work/house-n/).
   The step scales with the size of the heading it follows.
   ========================================================================== */
.display-xl + p,.display-xl + .body-lg,.display-xl + .lede{margin-top:clamp(24px,2vw,38px)}
.display-l + p,.display-l + .body-lg,.display-l + .lede{margin-top:clamp(22px,1.7vw,32px)}
.display-editorial + p,.display-editorial + .body-lg,.display-editorial + .lede{margin-top:clamp(20px,1.5vw,30px)}
.story h2 + p,.tech-split h2 + p,.split h2 + p{margin-top:clamp(20px,1.5vw,30px)}

/* Discipline and material lists: a 38-46px heading needs more than 16px. */
.discipline-list h3 + *,.atlas-row h3 + *,.type-list strong + *,
.finish-list strong + *,.process-step h3 + *{margin-top:clamp(22px,1.7vw,30px)}

/* Floor for any remaining heading/copy pair, so nothing can drop below the
   smallest step in the scale. */
h1 + p,h2 + p,h3 + p,h1 + .body-lg,h2 + .body-lg,h3 + .body-lg{margin-top:max(22px,var(--head-step,0px))}

/* The heading itself keeps clear of whatever sits above it. */
.story h2,.tech-split h2,.split h2{margin-block:0}

/* ==========================================================================
   FORMANT 3.11 - home block 03: annotation chips over the new exploded ARC
   The old positions were set for a different image. Measuring the alpha of
   F02-ARC-EXPLODED-01 on a 10x10 grid gives the clear cells; each chip now
   sits in one of them, next to the part it names: the shells run full height
   at the far left and right, the core stack is centre, and the isolation
   platform and disc base sit at the bottom centre.
   ========================================================================== */
.exploded .anno.a1{top:7%;left:0;right:auto;bottom:auto}      /* outer shell  */
.exploded .anno.a2{top:83%;left:24%;bottom:auto;right:auto}   /* isolation    */
.exploded .anno.a3{top:34%;right:0;left:auto;bottom:auto}     /* core 02      */
.exploded .anno{
  max-width:min(46%,190px);
  box-shadow:0 2px 10px rgba(13,13,12,.10);
  z-index:4;
}
@media(max-width:860px){
  .exploded .anno.a1{top:3%}
  .exploded .anno.a2{top:84%;left:16%;bottom:auto}
  .exploded .anno.a3{top:38%}
  .exploded .anno{max-width:52%}
}

/* Footnote under a spec table: the shell varies by configuration, the core does not. */
.spec-note{
  margin-top:clamp(22px,2vw,34px);padding-top:16px;border-top:1px solid var(--line);
  font:500 13.5px/1.55 var(--text);color:var(--muted);max-width:62ch
}
.ink .spec-note{border-top-color:var(--lineInv);color:#b8b7b1}

/* ==========================================================================
   FORMANT 3.11b - /engineering/ 03 drivers, 04 calibration
   The hand-drawn SVG sections read as foreign next to a page built entirely
   from photoreal renders, so block 03 is a technical text block: two module
   cards with real metadata. Block 04 keeps its measured curve but explains
   the process in copy instead of a schematic room plan.
   ========================================================================== */
.modules{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,3vw,56px);margin-top:clamp(20px,2.4vw,40px)
}
.module{border-top:1px solid var(--lineInv);padding-top:clamp(20px,1.8vw,30px)}
.module header{margin-bottom:clamp(20px,1.8vw,30px)}
.module header .mono{display:block;color:var(--signal);margin-bottom:10px}
.module h3{
  font:650 clamp(21px,1.9vw,30px)/1.2 var(--display);letter-spacing:-.02em;
  margin:0;color:var(--paper);text-wrap:balance
}
.module dl{margin:0;display:grid;gap:0}
.module dl>div{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:16px 20px;padding:14px 0;border-top:1px solid rgba(241,240,236,.10)
}
.module dl>div:first-child{border-top:0}
.module dt{font:500 12.5px/1.4 var(--text);letter-spacing:.02em;color:#8f8e88;text-transform:uppercase}
.module dd{margin:0;font:500 14.5px/1.5 var(--text);color:#d8d7d2}
.module-note{
  margin-top:clamp(28px,2.6vw,44px);padding-top:18px;border-top:1px solid var(--lineInv);
  font:500 14px/1.6 var(--text);color:#b8b7b1;max-width:70ch
}

/* Block 04: copy column beside the measured curve. */
.calib{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:clamp(30px,3.4vw,64px);align-items:start;margin-top:clamp(20px,2.4vw,40px)
}
.calib-copy .body-lg{margin:0 0 clamp(28px,2.6vw,42px)}
.calib-steps{list-style:none;margin:0;padding:0;counter-reset:none}
.calib-steps li{
  display:grid;grid-template-columns:44px 1fr;gap:4px 16px;
  padding:18px 0;border-top:1px solid var(--line)
}
.calib-steps li:first-child{border-top:0;padding-top:0}
.calib-steps .mono{grid-row:1/3;color:var(--signal);padding-top:3px}
.calib-steps strong{font:650 16px/1.3 var(--display);letter-spacing:-.01em}
.calib-steps p{margin:6px 0 0;font:500 14px/1.55 var(--text);color:var(--muted);max-width:52ch}

@media(max-width:1100px){
  .calib{grid-template-columns:1fr;gap:clamp(32px,5vw,52px)}
}
@media(max-width:860px){
  .modules{grid-template-columns:1fr;gap:clamp(30px,6vw,46px)}
  .module dl>div{grid-template-columns:1fr;gap:6px}
}

/* ==========================================================================
   FORMANT 3.11c - keyboard focus
   Focus rings existed for six component classes only. Every plain link - the
   wordmark, the nav, the footer, the product rows, the skip link - fell back
   to whatever the browser drew, and the brief's own inputs explicitly removed
   their outline. One ring, in the signal colour, for anything focusable.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--signal)!important;
  outline-offset:3px!important;
  border-radius:2px;
}
.ink a:focus-visible,.ink button:focus-visible{outline-color:var(--signal)!important}
/* Inside the brief the field already reads as a box, so the ring sits inside it. */
.brief-contact input:focus-visible,
.brief-contact textarea:focus-visible{outline-offset:-2px!important}
/* The skip link must be visible the moment it takes focus. */
.skip:focus,.skip:focus-visible{top:12px;outline-offset:2px!important}

/* An empty filter result is a state, not a blank page. */
.work-empty{
  display:none;padding:clamp(48px,6vw,88px) 0;border-top:1px solid var(--line);
  font:500 clamp(15px,1.2vw,17px)/1.6 var(--text);color:var(--muted);max-width:56ch
}
.work-empty.on{display:block}
.work-empty b{display:block;font:650 clamp(20px,1.8vw,26px)/1.25 var(--display);letter-spacing:-.015em;color:var(--ink);margin-bottom:10px}

/* 404: a real view, not the home page rendered under a wrong address. */
.notfound-path{
  margin-top:clamp(20px,1.6vw,28px);padding:10px 14px;display:inline-block;
  border:1px solid var(--line);color:var(--muted);
  font-family:var(--text);font-size:12.5px;letter-spacing:.02em;text-transform:none
}
.notfound-links{
  display:flex;flex-wrap:wrap;gap:14px 30px;
  margin:clamp(30px,3vw,48px) 0 clamp(30px,3vw,44px);
  padding-top:clamp(24px,2.4vw,34px);border-top:1px solid var(--line)
}

/* ==========================================================================
   FORMANT 3.11d - touch targets
   COMPOSITION_RULES.md asks for 44px minimum on touch. The footer navigation,
   the wordmarks and the footer CTA were 16-24px tall on a phone. Padding is
   used rather than height so the visual rhythm of the footer is unchanged.
   ========================================================================== */
@media(max-width:860px){
  .footer-nav a,
  .footer-bottom a,
  #footer .footer-word,
  #header .wordmark,
  .footer-commission{
    min-height:44px;display:flex;align-items:center
  }
  .footer-nav a{padding-block:10px}
  /* The CTA inside the open mobile menu is the primary action on that screen. */
  .mobile-bottom>a{min-height:52px;display:flex;align-items:center;gap:12px}
  .footer-commission{align-items:flex-start;flex-direction:column;justify-content:center}
}

/* Objects index: final mirrored rhythm and Mass visual alignment. */
.product-index .product-row.row-2 .product-copy,.product-index .product-row.row-4 .product-copy{text-align:left!important;display:block!important}
.product-index .product-row.row-4{margin-bottom:clamp(-760px,-30vw,-340px)}
.product-index .product-row.row-4 .asset{transform:translateY(-72%)!important}
@media(max-width:720px){.product-index .product-row.row-4{margin-bottom:0}.product-index .product-row.row-4 .asset{transform:none!important}.product-index .product-row.row-4 .asset-real{transform:none!important}}

/* Responsive full-bleed scenes: preserve subject composition on tablet and phone. */
@media(max-width:1024px){
  .gallery-stage{min-height:min(72svh,760px)!important}
  .gallery-stage>.asset .asset-real{object-fit:contain!important;object-position:center center!important}
  .gallery-stage>.asset .asset-frame{background:var(--ink)!important}
}
@media(max-width:720px){
  .gallery-stage{min-height:min(68svh,640px)!important}
  .gallery-stage>.asset[data-asset="E01-FIGURE-CG-HERO-01"] .asset-real{object-fit:cover!important;object-position:72% center!important}
  .gallery-stage>.asset[data-asset="E01-FIGURE-CG-HERO-01"] .asset-frame{background:#171715!important}
  .gallery-copy{max-width:calc(100% - 40px)!important}
}
/* Edition hero contrast: preserve the pale object, protect editorial copy. */
.gallery-stage>.asset[data-asset="E01-FIGURE-CG-HERO-01"] .asset-frame:after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,13,12,.88) 0%,rgba(13,13,12,.69) 34%,rgba(13,13,12,.24) 57%,rgba(13,13,12,0) 76%),linear-gradient(0deg,rgba(13,13,12,.42) 0%,rgba(13,13,12,0) 48%);
}
.gallery-stage>.asset[data-asset="E01-FIGURE-CG-HERO-01"]+.gallery-copy{color:var(--paper)!important;text-shadow:0 2px 18px rgba(0,0,0,.36)}
.gallery-stage>.asset[data-asset="E01-FIGURE-CG-HERO-01"]+.gallery-copy p{color:rgba(241,240,236,.86)!important}
@media(max-width:720px){
  .gallery-stage>.asset[data-asset="E01-FIGURE-CG-HERO-01"] .asset-frame:after{background:linear-gradient(180deg,rgba(13,13,12,.08) 0%,rgba(13,13,12,.26) 45%,rgba(13,13,12,.91) 100%)}
}
/* ===========================================================================
   FORMANT 3.12 — mobile hierarchy, contrast and technical-reading pass
   =========================================================================== */
/* Light in-situ imagery must support the editorial overlay copy. */
.gallery-stage>.asset[data-asset$="-INTERIOR-01"] .asset-frame::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,13,12,.74) 0%,rgba(13,13,12,.49) 37%,rgba(13,13,12,.12) 68%,transparent 100%),linear-gradient(0deg,rgba(13,13,12,.25),transparent 54%);
}
.gallery-stage>.asset[data-asset$="-INTERIOR-01"]+.gallery-copy{position:relative;z-index:5;color:var(--paper)!important;text-shadow:0 2px 18px rgba(0,0,0,.42)}
.gallery-stage>.asset[data-asset$="-INTERIOR-01"]+.gallery-copy p{color:rgba(241,240,236,.88)!important}

@media(max-width:720px){
  /* Keep the Studio column wide enough for its longest navigation label. */
  .footer-nav{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;column-gap:26px!important}
  .footer-nav a[href="/engineering/"]{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;font-size:15px!important;letter-spacing:-.025em!important}

  /* The commission CTA uses breathing room on both sides of its divider lines. */
  .footer-commission{min-height:236px!important;padding-block:32px!important;justify-content:space-between!important}
  .footer-commission .footer-kicker{margin-top:0!important}
  .footer-commission .footer-commission-meta{margin-bottom:0!important}

  /* Active work selector uses the exact two-stroke + calibration-dot identity mark. */
  .filter-mark{position:relative!important;width:28px!important;height:18px!important;display:block!important;transform:none!important}
  .filter-mark i{position:absolute!important;width:3px!important;border-radius:3px!important;background:currentColor!important;transform:skewX(-14deg)!important}
  .filter-mark i:first-child{left:5px!important;top:1px!important;height:16px!important}
  .filter-mark i:nth-child(2){left:14px!important;top:6px!important;height:11px!important}
  .filter-mark b{position:absolute!important;left:22px!important;right:auto!important;top:5px!important;width:4px!important;height:4px!important;border-radius:50%!important;background:var(--signal)!important}
  .filters button.on .filter-mark{color:var(--signal)!important}

  /* Preserve a full-chart overview but enlarge every technical label to a usable optical size. */
  .charts{gap:58px!important}
  .chartfig,.calib-curve{margin-top:38px!important}
  .chartfig .t text,.calib-curve .t text{font-size:20px!important;font-weight:600!important;letter-spacing:.02em!important}
  .chartfig figcaption,.calib-curve figcaption{font-size:14px!important;line-height:1.5!important;gap:10px 16px!important;margin-top:20px!important;padding-top:18px!important}
  .chartfig figcaption b{font-size:17px!important}

  /* Table heading and the first specification need a deliberate pause. */
  .specs h2{margin-bottom:38px!important}
  .specs dl{margin-top:0!important}

  /* Every mobile Form story gets a true content-to-image gap. */
  .story>.asset{margin-top:44px!important}

  /* Portrait scenes need a denser vertical veil behind the white type. */
  .gallery-stage>.asset[data-asset$="-INTERIOR-01"] .asset-frame::after{background:linear-gradient(180deg,rgba(13,13,12,.08) 0%,rgba(13,13,12,.28) 35%,rgba(13,13,12,.8) 100%)}
}

/* FORMANT 3.12.1 — repair pass: footer rhythm, plot clearance, scene copy. */
/* Both footer columns share the same label band and link baselines. */
@media(max-width:720px){
  .footer-nav>div{display:grid!important;grid-template-rows:42px repeat(4,48px)!important;row-gap:0!important;align-items:stretch!important}
  .footer-label{min-height:42px!important;margin:0!important;align-content:start!important}
  .footer-nav a{min-height:48px!important;padding-block:0!important;display:flex!important;align-items:center!important}
}

/* Interior copy remains in the lower-left editorial field; only the veil adds contrast. */
.gallery-stage>.asset[data-asset$="-INTERIOR-01"]+.gallery-copy{
  position:absolute!important;left:var(--page-pad)!important;bottom:var(--page-pad)!important;top:auto!important;z-index:5!important;
}
@media(max-width:720px){
  .gallery-stage>.asset[data-asset$="-INTERIOR-01"]+.gallery-copy{left:18px!important;right:18px!important;bottom:22px!important;top:auto!important}
}