@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/Newsreader-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --chalk: #f3f1eb;
  --paper: #fbfaf6;
  --graphite: #181b19;
  --graphite-soft: #2b2f2c;
  --stone: #d9d5cc;
  --plaster: #e7e3db;
  --line: #adafa9;
  --line-dark: #626762;
  --muted: #474e49;
  --oxide: #733f30;
  --oxide-light: #bd806c;
  --white: #fff;
  --display: "Instrument Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --page: min(1440px, calc(100% - 64px));
  --gap: clamp(16px, 1.7vw, 28px);
  --section: clamp(80px, 8vw, 128px);
  --ease: cubic-bezier(.22, .75, .25, 1);
  --fast: 240ms;
  --medium: 760ms;
  --spatial: 920ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--chalk); }
body { margin: 0; overflow-x: hidden; background: var(--chalk); color: var(--graphite); font-family: var(--display); font-size: 16px; line-height: 1.62; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; font-synthesis: none; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
img { display: block; width: auto; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--oxide); color: var(--white); }

:focus-visible { outline: 2px solid var(--oxide); outline-offset: 4px; }
.site-header :focus-visible, .site-footer :focus-visible, .inquiry-transition :focus-visible, .nc-contact-route :focus-visible, .studio-manifesto :focus-visible { outline-color: var(--oxide-light); }
.skip-link { position: fixed; z-index: 200; left: 16px; top: 12px; padding: 12px 16px; background: var(--graphite); color: var(--white); font-weight: 700; transform: translateY(-160%); transition: transform var(--fast); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shell { width: var(--page); margin-inline: auto; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.section-block { padding-block: var(--section); }

h1, h2, h3, p { margin-top: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
h1 { margin-bottom: 26px; font-size: clamp(3.25rem, 4.5vw, 4.25rem); font-weight: 500; letter-spacing: -.052em; line-height: 1.01; }
h2 { margin-bottom: 22px; font-size: clamp(2.25rem, 3.6vw, 3.5rem); font-weight: 500; letter-spacing: -.042em; line-height: 1.07; }
h3 { margin-bottom: 16px; font-size: clamp(1.5rem, 2.15vw, 2.1rem); font-weight: 500; letter-spacing: -.028em; line-height: 1.12; }
.eyebrow, .section-code, .technical-line, .project-type, .project-number, .project-facts, figcaption, .entry-number, .entry-marker, .opening-index, .contact-code, .manifesto-code, .footer-year { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { margin-bottom: 16px; color: var(--oxide); font-size: .72rem; font-weight: 600; letter-spacing: .115em; line-height: 1.45; text-transform: uppercase; }
.section-code { display: flex; align-items: flex-start; gap: 18px; color: var(--oxide); font-size: .72rem; font-weight: 600; letter-spacing: .1em; line-height: 1.4; }
.section-code span:first-child { min-width: 28px; color: var(--graphite); }
.section-code--light { color: #c7cbc6; }
.section-code--light span:first-child { color: var(--oxide-light); }
.text-route, .section-route { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 1px solid currentColor; font-size: .86rem; font-weight: 700; }
.text-route:hover, .section-route:hover { color: var(--oxide); }
.primary-route, .light-route { display: inline-flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 28px; padding: 0 18px; border: 1px solid var(--graphite); background: var(--graphite); color: var(--white); font-size: .84rem; font-weight: 700; }
.primary-route:hover { background: var(--oxide); border-color: var(--oxide); }
.light-route { border-color: #8f948f; background: transparent; }
.light-route:hover { border-color: var(--white); }

/* Header */
.site-header { position: sticky; z-index: 50; top: 0; height: 72px; border-bottom: 1px solid var(--line); background: rgba(243, 241, 235, .96); }
@supports (backdrop-filter: blur(12px)) { .site-header { background: rgba(243, 241, 235, .88); backdrop-filter: blur(12px); } }
.header-inner { position: relative; z-index: 3; display: grid; height: 72px; grid-template-columns: minmax(205px, 3fr) minmax(430px, 6fr) auto auto; align-items: center; column-gap: 24px; }
.brand { display: inline-flex; width: max-content; min-height: 44px; flex-direction: column; justify-content: center; line-height: 1; }
.brand span { font-size: 1.08rem; font-weight: 700; letter-spacing: -.03em; }
.brand small { margin-top: 6px; color: var(--muted); font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .08em; }
.primary-nav { display: flex; justify-self: center; align-items: stretch; gap: clamp(18px, 2vw, 34px); }
.primary-nav a { position: relative; display: inline-flex; min-height: 44px; align-items: center; font-size: .8rem; font-weight: 650; letter-spacing: -.01em; }
.primary-nav a::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 1px; background: var(--oxide); content: ""; transform: scaleX(0); transform-origin: right; transition: transform var(--fast) var(--ease); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.mobile-nav-cta { display: none !important; }
.language-switch { display: flex; align-items: center; justify-self: end; gap: 4px; }
.language-switch button { position: relative; display: inline-flex; min-width: 48px; min-height: 44px; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font-family: var(--mono); font-size: .67rem; font-weight: 600; }
.language-switch button::after { position: absolute; right: 4px; bottom: 5px; left: 4px; height: 1px; background: var(--oxide); content: ""; transform: scaleX(0); transition: transform var(--fast); }
.language-switch button[aria-pressed="true"] { color: var(--graphite); }
.language-switch button[aria-pressed="true"]::after { transform: scaleX(1); }
.language-switch img { width: 18px; height: 12px; object-fit: cover; }
.header-brief { display: flex; min-height: 72px; align-items: center; gap: 18px; padding-left: 20px; border-left: 1px solid var(--line); font-size: .76rem; font-weight: 700; }
.header-brief:hover { color: var(--oxide); }
.menu-toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); background: transparent; }
.menu-icon { display: grid; width: 18px; gap: 5px; }
.menu-icon i { display: block; height: 1px; background: currentColor; transition: transform var(--fast), width var(--fast); }
.menu-icon i:last-child { width: 12px; justify-self: end; }
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child { width: 18px; transform: translateY(-3px) rotate(-45deg); }
.nav-backdrop { display: none; }

/* Home */
.home-hero { min-height: min(800px, calc(100svh - 72px)); padding-block: clamp(38px, 4.25vw, 62px); border-bottom: 1px solid var(--line); background-color: var(--chalk); background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(173,175,169,.22) 1px); background-size: calc((100% - 64px) / 12) 100%; overflow: hidden; }
.hero-grid { position: relative; min-height: min(652px, calc(100svh - 148px)); align-items: center; }
.hero-copy { grid-column: 1 / 7; max-width: 690px; padding-right: clamp(0px, 2vw, 28px); }
.technical-line { display: flex; max-width: 520px; justify-content: space-between; margin-bottom: clamp(44px, 5.4vh, 64px); padding-top: 10px; border-top: 1px solid var(--graphite); color: var(--muted); font-size: .66rem; letter-spacing: .085em; }
.hero-copy h1 { max-width: 640px; font-size: clamp(3.4rem, 4.65vw, 4.35rem); line-height: .99; }
.hero-lead { max-width: 580px; margin-bottom: 28px; color: var(--muted); font-size: clamp(1rem, 1.18vw, 1.075rem); line-height: 1.7; }
.hero-routes { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero-visual { position: relative; grid-column: 8 / 13; margin: 0; justify-self: stretch; }
.hero-visual::before { position: absolute; z-index: 1; top: -18px; right: 18px; bottom: 38px; left: -18px; border: 1px solid var(--line); content: ""; pointer-events: none; }
.hero-visual img { position: relative; z-index: 2; width: 100%; height: clamp(430px, 59vh, 610px); object-fit: cover; object-position: 53% center; }
.hero-visual figcaption { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 18px; margin-top: 12px; color: var(--muted); font-size: .64rem; letter-spacing: .065em; }
.hero-dimension { position: absolute; right: -22px; bottom: 7px; display: flex; width: calc(50% - 10px); align-items: center; gap: 8px; color: var(--muted); font-family: var(--mono); font-size: .62rem; transform: translateY(100%); }
.hero-dimension i { height: 1px; flex: 1; background: var(--line); }

.principle-band { padding-block: clamp(64px, 7vw, 100px); background: var(--graphite); color: var(--white); }
.principle-band .section-code { grid-column: 1 / 3; color: #c5c9c4; }
.principle-band .section-code span:first-child { color: var(--oxide-light); }
.principle-band h2 { grid-column: 3 / 9; max-width: 760px; margin: 0; font-size: clamp(2.05rem, 3.1vw, 3rem); }
.principle-band > .shell > p { grid-column: 10 / 13; align-self: end; margin: 0; color: #cbd0cb; font-size: .94rem; line-height: 1.7; }

.section-heading { align-items: end; margin-bottom: clamp(50px, 6vw, 80px); }
.section-heading .section-code { grid-column: 1 / 3; align-self: start; }
.section-title-wrap { grid-column: 3 / 10; }
.section-title-wrap h2 { max-width: 880px; margin-bottom: 18px; }
.section-title-wrap p { max-width: 660px; margin: 0; color: var(--muted); }
.section-heading .section-route { grid-column: 11 / 13; justify-self: end; }

.selected-projects { background: var(--paper); }
.project-index-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.project-index-visual { position: relative; overflow: hidden; }
.project-index-visual::after { position: absolute; inset: 0; border: 1px solid transparent; content: ""; transition: border-color var(--fast); }
.project-index-visual:hover::after, .project-index-visual:focus-visible::after { border-color: var(--oxide); }
.project-index-visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.project-index-item--one .project-index-visual { grid-column: 1 / 8; }
.project-index-item--one .project-index-copy { grid-column: 9 / 13; }
.project-index-item--two .project-index-visual { grid-column: 6 / 13; }
.project-index-item--two .project-index-copy { grid-column: 1 / 5; grid-row: 1; }
.project-index-copy { padding-top: 8px; }
.project-number { display: block; margin-bottom: clamp(34px, 5.5vw, 68px); color: var(--oxide); font-size: 1rem; }
.project-type { margin-bottom: 14px; color: var(--muted); font-size: .67rem; letter-spacing: .075em; }
.project-index-copy h3 { margin-bottom: 26px; font-size: clamp(2.45rem, 4vw, 4.05rem); }
.project-index-copy h3 a:hover { color: var(--oxide); }
.project-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 28px; border-block: 1px solid var(--line); font-size: .68rem; }
.project-facts div { padding: 10px 0; }
.project-facts dt { color: var(--muted); }
.project-facts dd { margin: 5px 0 0; font-weight: 600; }
.project-index-copy > p { max-width: 480px; margin-bottom: 28px; color: var(--muted); }

.services-preview { border-top: 1px solid var(--line); background: var(--chalk); }
.service-schedule { border-top: 1px solid var(--graphite); }
.schedule-row { display: grid; min-height: 148px; grid-template-columns: 84px minmax(220px, 3fr) minmax(280px, 5fr) 52px; align-items: center; column-gap: var(--gap); border-bottom: 1px solid var(--line); }
.schedule-row > span { color: var(--oxide); font-family: var(--mono); font-size: .72rem; }
.schedule-row h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 2rem); }
.schedule-row p { max-width: 680px; margin: 0; color: var(--muted); }
.schedule-row > a { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; justify-self: end; border: 1px solid var(--line); }
.schedule-row > a:hover { border-color: var(--oxide); color: var(--oxide); }

.process-section { background: var(--plaster); }
.process-section .section-code { grid-column: 1 / 3; }
.process-intro { grid-column: 3 / 8; }
.process-intro h2 { font-size: clamp(2.25rem, 3.25vw, 3.25rem); }
.process-intro p { max-width: 600px; color: var(--muted); }
.process-line { position: relative; grid-column: 3 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 72px 0 0; padding: 0; list-style: none; }
.process-line::before { position: absolute; top: 13px; right: 0; left: 0; height: 1px; background: var(--line); content: ""; }
.process-line li { position: relative; min-height: 170px; padding: 52px 24px 0 0; }
.process-line li::before { position: absolute; z-index: 1; top: 8px; left: 0; width: 11px; height: 11px; border: 2px solid var(--oxide); background: var(--plaster); content: ""; }
.process-line span { display: block; margin-bottom: 24px; color: var(--oxide); font-family: var(--mono); font-size: .68rem; }
.process-line strong { display: block; margin-bottom: 8px; font-size: 1.15rem; }
.process-line p { max-width: 250px; margin: 0; color: var(--muted); font-size: .9rem; }

.inquiry-transition { position: relative; padding-block: clamp(88px, 9vw, 142px); background: var(--graphite); color: var(--white); overflow: hidden; }
.inquiry-transition .section-code { grid-column: 1 / 3; }
.inquiry-copy { position: relative; z-index: 2; grid-column: 3 / 9; }
.inquiry-copy h2 { max-width: 820px; }
.inquiry-copy p { max-width: 630px; margin-bottom: 34px; color: #cbd0cb; }
.inquiry-diagram { grid-column: 9 / 13; width: 100%; align-self: center; opacity: .9; }

/* Projects */
.projects-opening { padding-block: clamp(72px, 7.5vw, 116px); border-bottom: 1px solid var(--line); background: var(--stone); }
.opening-index { grid-column: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; }
.opening-index > span { margin-bottom: 24px; font-size: .63rem; letter-spacing: .1em; }
.opening-index strong { font-size: clamp(4.75rem, 7.6vw, 7.4rem); font-weight: 400; letter-spacing: -.075em; line-height: .88; }
.opening-index small { margin-top: 24px; color: var(--muted); font-size: .63rem; letter-spacing: .075em; }
.opening-copy { grid-column: 3 / 10; }
.opening-copy h1 { max-width: 900px; font-size: clamp(3rem, 4.55vw, 4.5rem); }
.opening-copy > p:last-child { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.72; }
.project-jump { grid-column: 10 / 13; align-self: end; border-top: 1px solid var(--graphite); }
.project-jump a { display: grid; min-height: 78px; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-dark); }
.project-jump span, .project-jump small { font-family: var(--mono); font-size: .66rem; }
.project-jump strong { font-size: .86rem; }
.project-jump a:hover { color: var(--oxide); }

.case-study { padding-block: var(--section); background: var(--paper); scroll-margin-top: 72px; }
.case-study--inverse { background: var(--plaster); }
.case-header { align-items: end; margin-bottom: clamp(46px, 6vw, 82px); }
.case-number { grid-column: 1 / 3; display: flex; align-items: center; gap: 14px; color: var(--oxide); font-family: var(--mono); font-size: 1.1rem; }
.case-number i { height: 1px; flex: 1; background: var(--line); }
.case-title { grid-column: 3 / 8; }
.case-title h2 { margin: 0; font-size: clamp(3.35rem, 5vw, 5.15rem); }
.case-meta { grid-column: 9 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; border-top: 1px solid var(--graphite); font-family: var(--mono); font-size: .67rem; }
.case-meta div { padding-top: 12px; }
.case-meta dt { color: var(--muted); }
.case-meta dd { margin: 5px 0 0; font-weight: 600; }
.case-primary { margin-top: 0; margin-bottom: 0; }
.case-primary img { width: 100%; max-height: 760px; aspect-ratio: 16 / 8.4; object-fit: cover; }
.case-primary figcaption, .case-detail figcaption, .concept-diagram figcaption, .studio-landscape figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: var(--muted); font-size: .64rem; letter-spacing: .055em; }
.case-narrative { align-items: start; padding-top: clamp(64px, 8vw, 116px); }
.case-statement { grid-column: 1 / 6; }
.case-statement h3 { max-width: 650px; font-size: clamp(2.05rem, 3.2vw, 3.2rem); line-height: 1.1; }
.case-explanation { grid-column: 7 / 10; }
.case-explanation > p { color: var(--muted); }
.design-notes { margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.design-notes li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.design-notes span:first-child { color: var(--oxide); font-family: var(--mono); font-size: .62rem; }
.case-detail, .concept-diagram { grid-column: 10 / 13; margin: 0; }
.case-detail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }
.concept-diagram img { width: 100%; aspect-ratio: 1 / 1; background: var(--chalk); object-fit: cover; }

.material-study { padding-block: var(--section); border-top: 1px solid var(--line); background: var(--chalk); }
.material-study .section-code { grid-column: 1 / 3; }
.material-intro { grid-column: 3 / 8; }
.material-intro h2 { font-size: clamp(2.35rem, 3.45vw, 3.45rem); }
.material-intro p { max-width: 620px; color: var(--muted); }
.material-swatches { grid-column: 3 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 64px; }
.swatch { position: relative; display: flex; min-height: 240px; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid var(--line); }
.swatch span { font-family: var(--mono); font-size: .62rem; }
.swatch strong { max-width: 160px; font-size: .83rem; }
.swatch--timber { background: #8f6a4b; color: var(--white); }
.swatch--mineral { background: #dedbd2; }
.swatch--graphite { background: var(--graphite-soft); color: var(--white); }
.swatch--oxide { background: var(--oxide); color: var(--white); }

.next-page-link { border-top: 1px solid var(--line); background: var(--paper); }
.next-page-link .shell { display: grid; min-height: 190px; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.next-page-link .shell > span { color: var(--muted); font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; }
.next-page-link a { display: flex; align-items: center; gap: clamp(28px, 5vw, 80px); }
.next-page-link strong { font-size: clamp(2.35rem, 4.2vw, 4.2rem); font-weight: 500; letter-spacing: -.048em; }
.next-page-link a:hover { color: var(--oxide); }

/* Services */
.services-opening { padding-block: clamp(78px, 8.5vw, 128px); background: var(--graphite); color: var(--white); }
.service-axis { grid-column: 1 / 3; display: flex; flex-direction: column; align-items: flex-start; color: var(--oxide-light); font-family: var(--mono); font-size: .68rem; }
.service-axis i { width: 1px; height: 180px; margin: 12px 0 12px 6px; background: var(--line-dark); }
.services-opening-copy { grid-column: 3 / 10; }
.services-opening-copy .eyebrow { color: var(--oxide-light); }
.services-opening-copy h1 { max-width: 820px; font-size: clamp(3.1rem, 4.55vw, 4.4rem); }
.services-opening-copy > p:last-child { max-width: 690px; margin: 0; color: #cbd0cb; line-height: 1.72; }
.services-opening-note { grid-column: 10 / 13; align-self: end; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.services-opening-note span { color: var(--oxide-light); font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; }
.services-opening-note p { margin: 16px 0 0; color: #c4c9c4; font-size: .88rem; line-height: 1.68; }
.service-ledger { background: var(--paper); }
.service-entry { padding-block: clamp(64px, 7vw, 102px); border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.service-entry .shell { align-items: start; }
.entry-number { grid-column: 1 / 3; color: var(--oxide); font-size: 2rem; }
.entry-number span { margin-left: 6px; color: var(--muted); font-size: .68rem; }
.entry-title { grid-column: 3 / 7; }
.entry-title h2 { font-size: clamp(2.55rem, 3.8vw, 3.75rem); }
.entry-copy { grid-column: 8 / 12; }
.entry-copy > p { color: var(--muted); line-height: 1.7; }
.entry-copy ul { margin: 30px 0 0; padding: 0; border-top: 1px solid var(--graphite); list-style: none; }
.entry-copy li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .83rem; }
.entry-marker { grid-column: 12 / 13; justify-self: end; color: var(--muted); font-size: .6rem; writing-mode: vertical-rl; }
.service-method { padding-block: var(--section); background: var(--stone); }
.service-method .section-code { grid-column: 1 / 3; }
.method-copy { grid-column: 3 / 8; }
.method-copy p { max-width: 650px; color: var(--muted); }
.service-method img { grid-column: 8 / 13; width: 100%; align-self: center; }

/* Studio */
.studio-manifesto { padding-block: clamp(78px, 8.5vw, 128px); background: var(--graphite); color: var(--white); }
.manifesto-code { grid-column: 1 / 3; display: flex; flex-direction: column; }
.manifesto-code > span { color: var(--oxide-light); font-size: 4rem; font-weight: 500; letter-spacing: -.075em; line-height: .82; }
.manifesto-code small { margin-top: 24px; color: #bdc2bd; font-size: .62rem; letter-spacing: .075em; }
.manifesto-copy { grid-column: 3 / 10; }
.manifesto-copy .eyebrow { color: var(--oxide-light); }
.manifesto-copy h1 { max-width: 900px; font-size: clamp(3.15rem, 4.75vw, 4.7rem); }
.manifesto-note { grid-column: 10 / 13; align-self: end; margin: 0; color: #cbd0cb; font-size: .9rem; line-height: 1.7; }
.manifesto-rule { grid-column: 3 / 13; display: flex; align-items: center; gap: 12px; margin-top: 64px; color: #aeb4af; font-family: var(--mono); font-size: .62rem; }
.manifesto-rule i { height: 1px; flex: 1; background: var(--line-dark); }
.studio-image-section { padding-block: var(--section); background: var(--paper); }
.studio-landscape { grid-column: 1 / 9; margin: 0; }
.studio-landscape img { width: 100%; max-height: 620px; aspect-ratio: 16 / 9; object-fit: cover; }
.studio-thesis { grid-column: 9 / 13; align-self: end; padding-bottom: 26px; }
.studio-thesis h2 { font-size: clamp(2rem, 2.7vw, 2.75rem); }
.studio-thesis > p:last-child { color: var(--muted); }
.thinking-section { padding-block: var(--section); border-top: 1px solid var(--line); background: var(--chalk); }
.thinking-section .section-code { grid-column: 1 / 3; }
.thinking-heading { grid-column: 3 / 9; }
.thinking-ledger { grid-column: 3 / 13; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--graphite); border-left: 1px solid var(--line); }
.thinking-ledger article { min-height: 280px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.thinking-ledger article > span { color: var(--oxide); font-family: var(--mono); font-size: .65rem; }
.thinking-ledger h3 { margin-top: 56px; }
.thinking-ledger p { color: var(--muted); font-size: .9rem; }
.workflow-section { padding-block: var(--section); background: var(--stone); }
.workflow-section img { grid-column: 1 / 7; width: 100%; align-self: center; }
.workflow-copy { grid-column: 8 / 13; }
.workflow-copy h2 { font-size: clamp(2.35rem, 3.45vw, 3.45rem); }
.workflow-copy ol { margin: 42px 0 0; padding: 0; border-top: 1px solid var(--graphite); list-style: none; }
.workflow-copy li { display: grid; grid-template-columns: 54px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.workflow-copy li span { color: var(--oxide); font-family: var(--mono); font-size: .65rem; }

/* Contact */
.contact-opening { padding-block: clamp(72px, 7.5vw, 112px); border-bottom: 1px solid var(--line); background: var(--stone); }
.contact-code { grid-column: 1 / 3; display: flex; flex-direction: column; }
.contact-code > span { font-size: .63rem; letter-spacing: .1em; }
.contact-code strong { margin-top: 18px; font-size: 4.5rem; font-weight: 400; letter-spacing: -.075em; line-height: 1; }
.contact-code small { margin-top: 16px; color: var(--muted); font-size: .62rem; letter-spacing: .075em; }
.contact-opening-copy { grid-column: 3 / 10; }
.contact-opening-copy h1 { max-width: 860px; font-size: clamp(3rem, 4.35vw, 4.25rem); }
.contact-opening-copy > p:last-child { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.72; }
.concept-disclosure { grid-column: 10 / 13; align-self: end; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line-dark); }
.concept-disclosure span { color: var(--oxide); font-family: var(--mono); font-size: .65rem; font-weight: 600; letter-spacing: .09em; }
.concept-disclosure p { margin: 12px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.68; }
.brief-section { padding-block: var(--section); background: var(--paper); }
.brief-aside { grid-column: 1 / 5; padding-right: 24px; }
.brief-aside h2 { font-size: clamp(2.05rem, 2.85vw, 2.85rem); }
.brief-aside > dl { margin: 54px 0 0; border-top: 1px solid var(--graphite); }
.brief-aside > dl div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; }
.brief-aside dt { color: var(--muted); }
.brief-aside dd { margin: 0; }
.concept-form { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--gap); padding: clamp(24px, 4vw, 54px); border: 1px solid var(--line); background: var(--chalk); }
.form-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--graphite); font-family: var(--mono); font-size: .67rem; }
.form-heading p { margin: 0; color: var(--muted); }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .72rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-dark); }
.field [aria-invalid="true"] { border-color: #a32626; }
.form-truth { display: flex; gap: 12px; padding: 14px; border-left: 2px solid var(--oxide); background: var(--plaster); }
.form-truth p { margin: 0; color: var(--muted); font-size: .8rem; }
.form-submit { grid-column: 1 / -1; display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 18px; border: 1px solid var(--graphite); background: var(--graphite); color: var(--white); font-weight: 700; }
.form-submit:hover { border-color: var(--oxide); background: var(--oxide); }
.form-status { grid-column: 1 / -1; min-height: 0; margin: 0; font-size: .84rem; font-weight: 650; }
.form-status:not(:empty) { min-height: 48px; padding: 13px 14px; border: 1px solid var(--line); background: var(--paper); }
.form-status[data-state="success"] { border-left: 3px solid #3f654e; color: #284936; }
.form-status[data-state="error"] { border-left: 3px solid #a32626; color: #762020; }
.nc-contact-route { padding-block: clamp(80px, 8vw, 120px); background: var(--graphite); color: var(--white); }
.nc-contact-route .section-code { grid-column: 1 / 3; }
.nc-contact-route > .shell > div:nth-child(2) { grid-column: 3 / 9; }
.nc-contact-route h2 { font-size: clamp(2.35rem, 3.4vw, 3.4rem); }
.nc-contact-route p { max-width: 620px; margin: 0; color: #cbd0cb; }
.nc-contact-route .light-route { grid-column: 10 / 13; align-self: end; }

/* Footer */
.site-footer { padding-block: 42px; border-top: 1px solid var(--line-dark); background: var(--graphite); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 3fr 3fr 4fr auto; gap: 28px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand strong { font-size: .95rem; }
.footer-brand span { margin-top: 9px; color: #aeb4af; font-size: .72rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-nav a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; color: #c7cbc7; font-size: .74rem; }
.footer-nav a:hover { color: var(--white); }
.footer-provenance { display: flex; flex-direction: column; align-items: flex-start; }
.footer-provenance a { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; color: #c7cbc7; font-size: .72rem; }
.footer-provenance a:first-child { color: var(--oxide-light); font-family: var(--mono); font-size: .65rem; }
.footer-provenance a:hover { color: var(--white); }
.footer-year { color: #bdc2bd; font-size: .67rem; }

@media (max-width: 1120px) {
  :root { --page: min(100% - 48px, 1440px); }
  .header-inner { grid-template-columns: minmax(190px, 2fr) minmax(390px, 5fr) auto auto; column-gap: 16px; }
  .primary-nav { gap: 18px; }
  .header-brief { padding-left: 14px; }
  .hero-copy { grid-column: 1 / 7; }
  .hero-visual { grid-column: 7 / 13; margin-left: 18px; }
  .case-explanation { grid-column: 7 / 11; }
  .case-detail, .concept-diagram { grid-column: 9 / 13; grid-row: 2; margin-top: 38px; }
  .case-explanation { grid-column: 7 / 13; }
}

@media (max-width: 960px) {
  :root { --page: calc(100% - 40px); --section: clamp(72px, 10vw, 104px); }
  .header-inner { grid-template-columns: 1fr auto auto; }
  .brand { grid-column: 1; }
  .language-switch { grid-column: 2; grid-row: 1; }
  .menu-toggle { display: inline-flex; grid-column: 3; grid-row: 1; }
  .header-brief { display: none; }
  .primary-nav { position: fixed; z-index: 2; top: 72px; right: 0; display: flex; width: min(420px, 100vw); height: calc(100dvh - 72px); flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding: 34px 24px; border-left: 1px solid var(--line); background: var(--chalk); clip-path: inset(0 0 0 100%); opacity: 0; pointer-events: none; transition: clip-path var(--medium) var(--ease), opacity var(--fast); }
  .primary-nav.is-open { clip-path: inset(0); opacity: 1; pointer-events: auto; }
  .primary-nav a { min-height: 56px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .primary-nav a::after { display: none; }
  .primary-nav a[aria-current="page"] { color: var(--oxide); }
  .mobile-nav-cta { display: flex !important; min-height: 54px !important; justify-content: center; margin-top: 28px; border: 1px solid var(--graphite) !important; background: var(--graphite); color: var(--white) !important; }
  .nav-backdrop:not([hidden]) { position: fixed; z-index: 1; inset: 72px 0 0; display: block; width: 100%; height: calc(100dvh - 72px); padding: 0; border: 0; background: rgba(24, 27, 25, .48); }

  .home-hero { min-height: auto; background-size: calc((100% - 40px) / 6) 100%; }
  .hero-grid { min-height: auto; align-items: start; }
  .hero-copy { grid-column: 1 / 13; max-width: 760px; }
  .technical-line { margin-bottom: 48px; }
  .hero-visual { grid-column: 1 / 13; width: min(100%, 720px); margin-top: 52px; margin-left: auto; }
  .hero-visual img { height: auto; max-height: 560px; aspect-ratio: 4 / 3; }
  .hero-dimension { display: none; }

  .principle-band .section-code, .section-heading .section-code, .process-section .section-code, .material-study .section-code, .service-method .section-code, .thinking-section .section-code, .nc-contact-route .section-code { grid-column: 1 / 4; }
  .principle-band h2 { grid-column: 4 / 13; }
  .principle-band > .shell > p { grid-column: 4 / 10; margin-top: 30px; }
  .section-title-wrap { grid-column: 4 / 11; }
  .section-heading .section-route { grid-column: 11 / 13; }
  .project-index-item--one .project-index-visual, .project-index-item--two .project-index-visual { grid-column: 1 / 8; }
  .project-index-item--one .project-index-copy, .project-index-item--two .project-index-copy { grid-column: 9 / 13; grid-row: auto; }
  .schedule-row { grid-template-columns: 58px minmax(190px, 2fr) 3fr 48px; }
  .process-intro { grid-column: 4 / 11; }
  .process-line { grid-column: 4 / 13; }
  .inquiry-transition .section-code { grid-column: 1 / 4; }
  .inquiry-copy { grid-column: 4 / 10; }
  .inquiry-diagram { grid-column: 10 / 13; }

  .opening-index, .contact-code, .manifesto-code, .service-axis { grid-column: 1 / 4; }
  .opening-copy, .contact-opening-copy, .manifesto-copy, .services-opening-copy { grid-column: 4 / 13; }
  .project-jump, .concept-disclosure, .manifesto-note, .services-opening-note { grid-column: 4 / 10; margin-top: 46px; }
  .case-number { grid-column: 1 / 4; }
  .case-title { grid-column: 4 / 13; }
  .case-meta { grid-column: 4 / 13; margin-top: 32px; }
  .case-statement { grid-column: 1 / 7; }
  .case-explanation { grid-column: 7 / 13; }
  .case-detail, .concept-diagram { grid-column: 7 / 13; grid-row: auto; margin-top: 38px; }
  .material-intro { grid-column: 4 / 12; }
  .material-swatches { grid-column: 1 / 13; }
  .material-swatches { grid-template-columns: repeat(2, 1fr); }
  .swatch { min-height: 200px; }

  .entry-number { grid-column: 1 / 4; }
  .entry-title { grid-column: 4 / 13; }
  .entry-copy { grid-column: 4 / 12; margin-top: 24px; }
  .entry-marker { grid-column: 12 / 13; grid-row: 2; }
  .method-copy { grid-column: 4 / 12; }
  .service-method img { grid-column: 4 / 13; margin-top: 42px; }

  .studio-landscape { grid-column: 1 / 9; }
  .studio-thesis { grid-column: 9 / 13; }
  .thinking-heading { grid-column: 4 / 12; }
  .thinking-ledger { grid-column: 1 / 13; }
  .workflow-section img { grid-column: 1 / 7; }
  .workflow-copy { grid-column: 7 / 13; }

  .brief-aside { grid-column: 1 / 5; }
  .concept-form { grid-column: 5 / 13; }
  .nc-contact-route > .shell > div:nth-child(2) { grid-column: 4 / 10; }
  .nc-contact-route .light-route { grid-column: 10 / 13; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --page: calc(100% - 32px); --gap: 16px; }
  body { font-size: 15px; }
  h1 { font-size: clamp(2.45rem, 10.6vw, 2.9rem); line-height: 1.02; }
  h2 { font-size: clamp(2.1rem, 9vw, 2.7rem); }
  .brand small { display: none; }
  .brand span { font-size: .98rem; }
  .language-switch button { min-width: 44px; padding: 0 2px; }

  .home-hero { padding-block: 32px 38px; }
  .hero-copy { grid-column: 1 / 13; }
  .technical-line { margin-bottom: 34px; }
  .hero-copy h1 { max-width: 610px; font-size: clamp(2.35rem, 9.8vw, 2.9rem); line-height: 1.01; }
  .hero-lead { margin-bottom: 24px; font-size: 1rem; }
  .hero-visual { grid-column: 1 / 13; margin-top: 38px; }
  .hero-visual::before { top: -10px; right: 10px; bottom: 32px; left: -10px; }
  .hero-visual img { height: auto; max-height: none; aspect-ratio: 4 / 3; object-position: center; }
  .hero-visual figcaption { flex-direction: column; gap: 3px; }

  .principle-band .section-code, .section-heading .section-code, .process-section .section-code, .material-study .section-code, .service-method .section-code, .thinking-section .section-code, .nc-contact-route .section-code, .inquiry-transition .section-code { grid-column: 1 / 13; margin-bottom: 36px; }
  .principle-band h2, .principle-band > .shell > p, .section-title-wrap, .process-intro, .material-intro, .method-copy, .thinking-heading, .nc-contact-route > .shell > div:nth-child(2), .inquiry-copy { grid-column: 1 / 13; }
  .principle-band > .shell > p { margin-top: 26px; }
  .section-heading { margin-bottom: 50px; }
  .section-heading .section-route { grid-column: 1 / 13; justify-self: start; margin-top: 22px; }

  .project-index-item--one .project-index-visual, .project-index-item--two .project-index-visual { grid-column: 1 / 13; }
  .project-index-item--one .project-index-copy, .project-index-item--two .project-index-copy { grid-column: 1 / 13; grid-row: auto; }
  .project-index-item--two .project-index-copy { grid-row: 2; }
  .project-number { margin-bottom: 32px; }
  .project-index-copy h3 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .project-index-visual img { aspect-ratio: 4 / 3; }

  .schedule-row { min-height: 0; grid-template-columns: 42px 1fr 48px; padding: 24px 0; }
  .schedule-row h3 { grid-column: 2; }
  .schedule-row p { grid-column: 2 / 4; margin-top: 12px; }
  .schedule-row > a { grid-column: 3; grid-row: 1; }
  .process-line { grid-column: 1 / 13; display: block; margin-top: 42px; padding-left: 24px; }
  .process-line::before { top: 0; bottom: 0; left: 5px; width: 1px; height: auto; }
  .process-line li { min-height: 0; padding: 0 0 38px 28px; }
  .process-line li::before { top: 4px; left: -24px; }
  .process-line span { margin-bottom: 12px; }
  .inquiry-diagram { grid-column: 1 / 13; width: min(100%, 420px); margin-top: 42px; }

  .projects-opening, .services-opening, .studio-manifesto, .contact-opening { padding-block: 64px 76px; }
  .opening-index, .contact-code, .manifesto-code, .service-axis { grid-column: 1 / 13; margin-bottom: 52px; }
  .opening-index { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .opening-index > span { margin: 0; }
  .opening-index strong { grid-row: 1 / 3; grid-column: 2; font-size: 5.4rem; }
  .opening-index small { margin-top: 10px; }
  .opening-copy, .contact-opening-copy, .manifesto-copy, .services-opening-copy { grid-column: 1 / 13; }
  .opening-copy h1, .manifesto-copy h1, .services-opening-copy h1, .contact-opening-copy h1 { font-size: clamp(2.5rem, 10.5vw, 3.05rem); }
  .opening-copy h1 { font-size: clamp(2rem, 8.7vw, 2.6rem); }
  .project-jump, .concept-disclosure, .manifesto-note, .services-opening-note { grid-column: 1 / 13; margin-top: 40px; }
  .service-axis { flex-direction: row; align-items: center; }
  .service-axis i { width: 120px; height: 1px; margin: 0 12px; }
  .manifesto-rule { grid-column: 1 / 13; margin-top: 44px; }

  .case-header { margin-bottom: 44px; }
  .case-number, .case-title, .case-meta { grid-column: 1 / 13; }
  .case-number { margin-bottom: 32px; }
  .case-title h2 { font-size: clamp(3.05rem, 13.5vw, 4rem); }
  .case-meta { grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .case-primary img { max-height: none; aspect-ratio: 4 / 3; }
  .case-primary figcaption, .case-detail figcaption, .concept-diagram figcaption, .studio-landscape figcaption { flex-direction: column; gap: 3px; }
  .case-statement, .case-explanation, .case-detail, .concept-diagram { grid-column: 1 / 13; }
  .case-explanation { margin-top: 24px; }
  .case-detail, .concept-diagram { margin-top: 38px; }
  .case-detail img, .concept-diagram img { aspect-ratio: 4 / 3; }
  .material-swatches { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; }
  .swatch { min-height: 156px; padding: 14px; }
  .next-page-link .shell { min-height: 150px; }

  .entry-number, .entry-title, .entry-copy { grid-column: 1 / 13; }
  .entry-number { margin-bottom: 32px; }
  .entry-copy { margin-top: 14px; }
  .entry-marker { display: none; }
  .service-method img { grid-column: 1 / 13; }

  .studio-landscape, .studio-thesis, .workflow-section img, .workflow-copy { grid-column: 1 / 13; }
  .studio-landscape img { max-height: none; aspect-ratio: 4 / 3; }
  .studio-thesis { margin-top: 40px; padding-bottom: 0; }
  .thinking-ledger { grid-column: 1 / 13; display: block; margin-top: 42px; }
  .thinking-ledger article { min-height: 0; }
  .thinking-ledger h3 { margin-top: 42px; }
  .workflow-copy { margin-top: 40px; }

  .brief-aside, .concept-form { grid-column: 1 / 13; }
  .brief-aside { padding-right: 0; }
  .concept-form { grid-template-columns: 1fr; margin-top: 44px; padding: 22px 18px; }
  .field--full, .form-heading, .form-submit, .form-status { grid-column: 1; }
  .form-heading { flex-direction: column; }
  .nc-contact-route .light-route { grid-column: 1 / 13; justify-self: start; margin-top: 34px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-nav { margin-top: 8px; }
  .footer-provenance { margin-top: 8px; }
  .footer-year { margin-top: 8px; }
}

@media (max-width: 420px) {
  :root { --page: calc(100% - 24px); }
  .site-header, .header-inner { height: 68px; }
  .primary-nav { top: 68px; height: calc(100dvh - 68px); }
  .nav-backdrop:not([hidden]) { top: 68px; height: calc(100dvh - 68px); }
  .brand span { max-width: 118px; font-size: .9rem; }
  .language-switch { gap: 0; }
  .language-switch button { min-width: 44px; }
  .menu-toggle { width: 44px; height: 44px; }
  .technical-line { font-size: .58rem; }
  .hero-routes { align-items: stretch; }
  .primary-route { flex: 1; }
  .hero-visual img { aspect-ratio: 16 / 10; }
  .project-facts { grid-template-columns: 1fr; }
  .material-swatches { grid-template-columns: 1fr; }
  .swatch { min-height: 138px; }
  .case-meta { grid-template-columns: 1fr 1fr; }
}

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

/* Phase 2 — signature spatial system */
body { font-variation-settings: "wdth" 99; }
h1, h2, h3 { font-variation-settings: "wdth" 94; }
.brand span { font-weight: 660; letter-spacing: -.045em; font-variation-settings: "wdth" 93; }
.brand small { margin-top: 5px; letter-spacing: .105em; }
.primary-nav a, .header-brief, .primary-route, .light-route { font-weight: 620; }
.language-switch button { font-family: var(--display); font-weight: 620; }

.home-hero { min-height: min(860px, calc(100svh - 72px)); padding-block: clamp(28px, 3.25vw, 48px); }
.hero-grid { min-height: min(740px, calc(100svh - 128px)); isolation: isolate; }
.hero-copy { position: relative; z-index: 3; grid-column: 1 / 6; grid-row: 1; max-width: 610px; padding-right: 0; }
.technical-line { max-width: 470px; margin-bottom: clamp(38px, 5vh, 58px); }
.hero-copy h1 { max-width: 590px; font-size: clamp(3.7rem, 4.8vw, 5rem); font-weight: 520; letter-spacing: -.062em; line-height: .94; }
.hero-lead { max-width: 520px; }

.spatial-study { position: relative; z-index: 1; grid-column: 5 / 13; grid-row: 1; min-width: 0; align-self: stretch; margin: 0 0 0 clamp(-48px, -2.5vw, -24px); }
.spatial-study-frame { position: relative; display: grid; min-height: min(730px, calc(100svh - 132px)); grid-template-rows: auto 1fr auto; border: 1px solid rgba(98, 103, 98, .72); background: rgba(231, 227, 219, .42); overflow: hidden; }
.spatial-study-frame::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(98,103,98,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(98,103,98,.13) 1px, transparent 1px); background-size: 12.5% 12.5%; content: ""; pointer-events: none; }
.study-rail { position: relative; z-index: 4; display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 18px; padding-inline: 14px; color: var(--muted); font-family: var(--mono); font-size: .59rem; letter-spacing: .08em; }
.study-rail--top { border-bottom: 1px solid rgba(98, 103, 98, .66); }
.study-rail--bottom { border-top: 1px solid rgba(98, 103, 98, .66); }
.study-rail--bottom span:last-child { color: var(--oxide); font-weight: 600; }
.spatial-study-stage { position: relative; min-height: 0; perspective: 1100px; overflow: hidden; }
.spatial-study-canvas, .spatial-study-fallback { position: absolute; inset: 0; }
.spatial-study-canvas { z-index: 2; opacity: 0; transition: opacity var(--medium) var(--ease); }
.spatial-study-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.spatial-study-fallback { z-index: 1; display: grid; place-items: center; opacity: 1; transition: opacity var(--medium) var(--ease); }
.spatial-study[data-webgl="ready"] .spatial-study-canvas { opacity: 1; }
.spatial-study[data-webgl="ready"] .spatial-study-fallback { opacity: 0; }
.fallback-board { position: relative; width: min(74%, 640px); aspect-ratio: 1.35; transform: rotateX(58deg) rotateZ(-31deg) translate3d(4%, -2%, 0); transform-style: preserve-3d; }
.fallback-plane { position: absolute; display: block; border: 1px solid var(--line-dark); background: rgba(243, 241, 235, .96); box-shadow: 18px 20px 30px rgba(24,27,25,.08); }
.fallback-plane--floor { inset: 6% 3% 12% 5%; background-image: linear-gradient(rgba(98,103,98,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(98,103,98,.18) 1px, transparent 1px); background-size: 20% 20%; }
.fallback-plane--wall-a { top: 7%; bottom: 13%; left: 5%; width: 10%; transform: rotateY(76deg) translateZ(26px); transform-origin: left center; }
.fallback-plane--wall-b { top: 6%; right: 4%; width: 58%; height: 11%; transform: rotateX(72deg) translateZ(24px); transform-origin: center top; }
.fallback-plane--platform { right: 18%; bottom: 22%; width: 28%; height: 26%; background: var(--stone); transform: translateZ(22px); }
.fallback-plane--zone { left: 21%; bottom: 23%; width: 26%; height: 29%; border-color: var(--oxide); background: rgba(115, 63, 48, .12); transform: translateZ(5px); }
.study-zone { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; color: var(--oxide); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; pointer-events: none; }
.study-zone i { display: block; width: clamp(36px, 5vw, 76px); height: 1px; background: currentColor; }
.study-zone--a { top: 35%; left: 3%; }
.study-zone--b { top: 20%; right: 3%; flex-direction: row-reverse; }
.study-axis { position: absolute; z-index: 4; color: var(--muted); font-family: var(--mono); font-size: .52rem; letter-spacing: .08em; pointer-events: none; }
.study-axis--x { right: 12px; bottom: 10px; }
.study-axis--y { top: 14px; left: 12px; writing-mode: vertical-rl; }

.project-index-visual, .case-primary, .case-detail, .concept-diagram, .studio-landscape { transform-style: preserve-3d; }
.project-index-visual img, .case-primary img { transition: transform var(--spatial) var(--ease), filter var(--medium) var(--ease); }
.project-index-visual img { filter: saturate(.88) contrast(1.025); }
.project-index-visual::before, .case-primary::before { position: absolute; z-index: 3; inset: 12px; border-top: 1px solid rgba(243,241,235,.7); border-left: 1px solid rgba(243,241,235,.7); content: ""; pointer-events: none; }
.schedule-row { position: relative; isolation: isolate; overflow: hidden; }
.schedule-row::before { position: absolute; z-index: -1; top: 18px; right: 0; bottom: 18px; width: 13%; border: 1px solid rgba(115,63,48,.46); background: rgba(115,63,48,.035); content: ""; opacity: 0; transform: translateX(16px); transition: opacity var(--fast), transform var(--medium) var(--ease); }
.schedule-row > * { position: relative; z-index: 1; }
.service-entry { position: relative; overflow: hidden; }
.service-entry::after { position: absolute; top: 18%; right: 3%; width: min(22vw, 280px); aspect-ratio: 1.45; border: 1px solid rgba(115,63,48,.15); background-image: linear-gradient(rgba(115,63,48,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(115,63,48,.09) 1px, transparent 1px); background-size: 25% 33.333%; content: ""; pointer-events: none; transform: skewY(-4deg); }
.concept-diagram, .service-method img, .workflow-section img, .inquiry-diagram { border: 1px solid rgba(98,103,98,.56); background-color: rgba(231,227,219,.3); box-shadow: 14px 16px 0 rgba(98,103,98,.07); }
.concept-diagram img { filter: contrast(1.04); }

@media (hover: hover) and (pointer: fine) {
  .project-index-visual:hover img, .project-index-visual:focus-visible img { transform: translate3d(0, -5px, 0) scale(1.008); }
  .case-primary:hover img { transform: translate3d(0, -4px, 0) scale(1.004); }
  .schedule-row:hover::before, .schedule-row:focus-within::before { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1180px) {
  .hero-copy h1 { font-size: clamp(3.35rem, 5.2vw, 4.4rem); }
  .spatial-study-frame { min-height: min(660px, calc(100svh - 132px)); }
  .study-zone--a { top: 39%; }
}

@media (max-width: 960px) {
  .home-hero { min-height: auto; }
  .hero-grid { min-height: auto; }
  .hero-copy { grid-column: 1 / 13; max-width: 760px; }
  .hero-copy h1 { max-width: 680px; }
  .spatial-study { grid-column: 1 / 13; grid-row: 2; width: 100%; margin: 48px 0 0; }
  .spatial-study-frame { min-height: 570px; }
  .service-entry::after { opacity: .6; }
}

@media (max-width: 720px) {
  .home-hero { padding-block: 26px 30px; }
  .hero-copy h1 { max-width: 630px; font-size: clamp(2.65rem, 11.5vw, 3.2rem); line-height: .95; }
  .technical-line { margin-bottom: 30px; }
  .spatial-study { margin-top: 30px; }
  .spatial-study-frame { min-height: 430px; }
  .study-rail { min-height: 38px; padding-inline: 10px; font-size: .54rem; }
  .study-zone--a { top: 42%; left: 2%; }
  .study-zone--b { top: 18%; right: 2%; }
  .service-entry::after { top: 10%; right: -8%; width: 44vw; opacity: .45; }
  .project-index-visual::before, .case-primary::before { inset: 8px; }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: clamp(2.48rem, 11.2vw, 2.85rem); }
  .hero-lead { line-height: 1.62; }
  .spatial-study-frame { min-height: 380px; }
  .study-rail--bottom span:first-child { max-width: 115px; }
  .study-rail--bottom span:last-child { max-width: 150px; text-align: right; }
  .study-zone--b { display: none; }
  .study-zone--a i { width: 34px; }
  .fallback-board { width: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .spatial-study-canvas, .spatial-study-fallback, .project-index-visual img, .case-primary img, .schedule-row::before { transition: none !important; }
}

/* Final lock — editorial residential studio */
h1, h2 { font-family: var(--serif); font-optical-sizing: auto; font-variation-settings: "opsz" 72; font-weight: 430; letter-spacing: -.045em; }
.project-index-copy h3, .case-statement h3, .next-page-link strong { font-family: var(--serif); font-optical-sizing: auto; font-weight: 430; }
.section-title-wrap h2, .material-intro h2, .method-copy h2, .workflow-copy h2, .brief-aside h2 { letter-spacing: -.038em; }

.home-hero { min-height: min(860px, calc(100svh - 72px)); padding-block: clamp(32px, 3.6vw, 54px); }
.hero-grid { min-height: min(748px, calc(100svh - 140px)); align-items: stretch; }
.hero-copy { grid-column: 1 / 6; grid-row: 1; align-self: center; max-width: 620px; padding: 24px 0; }
.technical-line { max-width: 500px; margin-bottom: clamp(34px, 5vh, 54px); }
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy h1 { max-width: 660px; margin: 0 0 28px; font-size: clamp(5.1rem, 7.35vw, 7.9rem); font-variation-settings: "opsz" 72; font-weight: 410; letter-spacing: -.072em; line-height: .79; }
.hero-copy h1 span { display: block; }
.hero-lead { max-width: 470px; margin-bottom: 30px; color: var(--muted); font-size: clamp(.98rem, 1.08vw, 1.08rem); line-height: 1.65; }
.editorial-hero-visual { position: relative; z-index: 1; grid-column: 5 / 13; grid-row: 1; min-width: 0; align-self: stretch; margin: 0; }
.editorial-image-wrap { position: relative; height: 100%; min-height: min(748px, calc(100svh - 140px)); overflow: hidden; background: var(--stone); }
.editorial-image-wrap > img { width: 100%; height: 100%; object-fit: cover; object-position: 16% center; filter: saturate(.76) contrast(1.045) brightness(.88); }
.editorial-hero-visual figcaption { display: flex; justify-content: space-between; gap: 18px; margin-top: 10px; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .075em; }
.drafting-overlay { position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(243,241,235,.72); pointer-events: none; }
.drafting-overlay::before, .drafting-overlay::after { position: absolute; background: rgba(243,241,235,.58); content: ""; }
.drafting-overlay::before { top: 11%; bottom: 11%; left: 16.66%; width: 1px; }
.drafting-overlay::after { right: 8%; bottom: 20%; left: 8%; height: 1px; }
.crop-mark { position: absolute; width: 24px; height: 24px; }
.crop-mark::before, .crop-mark::after { position: absolute; background: var(--oxide-light); content: ""; }
.crop-mark::before { width: 24px; height: 1px; }
.crop-mark::after { width: 1px; height: 24px; }
.crop-mark--tl { top: 18px; left: 18px; }
.crop-mark--br { right: 18px; bottom: 18px; transform: rotate(180deg); }
.drawing-measure { position: absolute; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.9); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; }
.drawing-measure i { display: block; width: 42px; height: 1px; background: currentColor; }
.drawing-measure--top { top: 26px; right: 40px; }
.drawing-measure--side { right: 18px; bottom: 34%; transform: rotate(90deg) translateX(50%); transform-origin: right center; }
.drawing-ref { position: absolute; padding: 4px 6px; background: rgba(24,27,25,.74); color: var(--white); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; }
.drawing-ref--a { left: 20%; bottom: 18%; }
.drawing-ref--b { right: 8%; top: 14%; }

.principle-band { position: relative; padding-block: clamp(86px, 8.5vw, 136px); overflow: hidden; }
.principle-band::after { position: absolute; right: 2vw; bottom: -8%; color: rgba(255,255,255,.035); content: "AF"; font-family: var(--display); font-size: clamp(13rem, 23vw, 28rem); font-weight: 700; letter-spacing: -.1em; line-height: .7; pointer-events: none; }
.principle-band > .shell { position: relative; z-index: 1; }
.principle-band h2 { max-width: 900px; font-size: clamp(3.15rem, 4.9vw, 5rem); font-variation-settings: "opsz" 72; line-height: .95; }
.principle-band > .shell > p { max-width: 360px; }

.spatial-evidence { border-bottom: 1px solid var(--line); background: var(--stone); }
.spatial-evidence-grid { align-items: center; }
.spatial-evidence-copy { grid-column: 1 / 5; padding-right: clamp(12px, 3vw, 44px); }
.spatial-evidence-copy .section-code { margin-bottom: clamp(54px, 7vw, 92px); }
.spatial-evidence-copy .eyebrow { margin-bottom: 14px; }
.spatial-evidence-copy h2 { max-width: 440px; font-size: clamp(2.9rem, 4vw, 4.25rem); line-height: .94; }
.spatial-evidence-copy > p:last-child { max-width: 410px; margin: 30px 0 0; color: var(--muted); }
.spatial-evidence .spatial-study { grid-column: 5 / 13; grid-row: auto; align-self: stretch; width: 100%; margin: 0; }
.spatial-evidence .spatial-study-frame { min-height: clamp(500px, 49vw, 650px); background: rgba(243,241,235,.4); }

.selected-projects .section-title-wrap h2 { max-width: 760px; }
.project-index-item { padding-block: clamp(64px, 7.5vw, 112px); }
.project-index-copy h3 { font-size: clamp(3rem, 4.8vw, 5.15rem); letter-spacing: -.055em; line-height: .9; }
.project-number { margin-bottom: clamp(40px, 7vw, 86px); font-size: 1.35rem; }
.project-index-item--one .project-index-visual img { aspect-ratio: 16 / 10; object-position: 20% center; }
.project-index-item--two .project-index-visual img { aspect-ratio: 4 / 3; }

.case-title h2 { font-size: clamp(4rem, 6vw, 6.2rem); line-height: .86; }
.case-statement h3 { font-size: clamp(2.5rem, 3.8vw, 3.9rem); letter-spacing: -.04em; line-height: 1; }
.case-study--inverse .case-primary { width: min(1280px, calc(100% - 12vw)); margin-right: 6vw; }
.case-study--inverse .case-primary img { aspect-ratio: 16 / 9.5; }
.case-study--inverse .case-statement { grid-column: 7 / 12; }
.case-study--inverse .case-explanation { grid-column: 3 / 6; grid-row: 1; }
.case-study--inverse .concept-diagram { grid-column: 10 / 13; grid-row: 2; }

.services-preview .section-title-wrap h2 { max-width: 690px; }
.schedule-row { min-height: 156px; }
.schedule-row h3 { letter-spacing: -.025em; }
.thinking-ledger article { min-height: 260px; background: rgba(251,250,246,.42); }
.concept-form { border-color: var(--line-dark); background: rgba(243,241,235,.72); }
.field input, .field select, .field textarea { border-color: #9ea19c; background: var(--paper); }

.inquiry-transition { background: var(--plaster); color: var(--graphite); }
.inquiry-transition .section-code { color: var(--oxide); }
.inquiry-transition .section-code span:first-child { color: var(--graphite); }
.inquiry-copy h2 { max-width: 850px; }
.inquiry-copy p { color: var(--muted); }
.inquiry-diagram { opacity: .72; }

@media (max-width: 1180px) {
  .hero-copy h1 { font-size: clamp(4.6rem, 7.3vw, 6.35rem); }
  .editorial-hero-visual { grid-column: 5 / 13; }
  .spatial-evidence-copy { grid-column: 1 / 5; }
  .spatial-evidence .spatial-study { grid-column: 5 / 13; }
  .case-study--inverse .case-primary { width: var(--page); margin-inline: auto; }
}

@media (max-width: 960px) {
  .hero-grid { min-height: auto; }
  .hero-copy { grid-column: 1 / 13; grid-row: 1; max-width: 780px; padding: 16px 0 0; }
  .hero-copy h1 { max-width: 760px; font-size: clamp(5rem, 11vw, 7rem); }
  .hero-lead { max-width: 600px; }
  .editorial-hero-visual { grid-column: 1 / 13; grid-row: 2; margin-top: 46px; }
  .editorial-image-wrap { height: 560px; min-height: 0; }
  .spatial-evidence-copy { grid-column: 1 / 13; padding-right: 0; }
  .spatial-evidence-copy .section-code { margin-bottom: 46px; }
  .spatial-evidence-copy > p:last-child { max-width: 620px; }
  .spatial-evidence .spatial-study { grid-column: 1 / 13; margin-top: 48px; }
  .spatial-evidence .spatial-study-frame { min-height: 540px; }
  .case-study--inverse .case-statement { grid-column: 1 / 6; }
  .case-study--inverse .case-explanation { grid-column: 7 / 13; grid-row: auto; }
  .case-study--inverse .concept-diagram { grid-column: 9 / 13; grid-row: 2; }
}

@media (max-width: 720px) {
  h1, h2 { letter-spacing: -.04em; }
  .home-hero { padding-block: 22px 34px; }
  .technical-line { margin-bottom: 28px; }
  .hero-copy .eyebrow { margin-bottom: 14px; }
  .hero-copy h1 { max-width: 100%; margin-bottom: 24px; font-size: clamp(4.1rem, 18vw, 5.35rem); line-height: .78; }
  .hero-lead { max-width: 540px; margin-bottom: 24px; font-size: 1rem; line-height: 1.55; }
  .editorial-hero-visual { margin-top: 30px; }
  .editorial-image-wrap { height: 430px; }
  .editorial-hero-visual figcaption { font-size: .58rem; }
  .drawing-measure--side, .drawing-ref--a { display: none; }
  .principle-band { padding-block: 78px; }
  .principle-band h2 { font-size: clamp(3rem, 13vw, 4.4rem); }
  .spatial-evidence-copy h2 { font-size: clamp(2.9rem, 12vw, 4rem); }
  .spatial-evidence .spatial-study { margin-top: 34px; }
  .spatial-evidence .spatial-study-frame { min-height: 420px; }
  .project-index-copy h3 { font-size: clamp(3.4rem, 15vw, 4.5rem); }
  .project-number { margin-bottom: 28px; }
  .case-title h2 { font-size: clamp(3.5rem, 15vw, 4.8rem); }
  .case-statement h3 { font-size: clamp(2.55rem, 10.5vw, 3.5rem); }
  .case-study--inverse .case-statement, .case-study--inverse .case-explanation, .case-study--inverse .concept-diagram { grid-column: 1 / 13; grid-row: auto; }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: clamp(3.65rem, 17.2vw, 4.2rem); }
  .hero-routes { gap: 16px; }
  .hero-routes .primary-route { flex: 0 0 100%; }
  .editorial-image-wrap { height: 322px; }
  .editorial-image-wrap > img { object-position: 13% center; }
  .drawing-measure--top { top: 18px; right: 22px; }
  .drawing-measure i { width: 26px; }
  .drawing-ref--b { right: 6%; top: 20%; }
  .principle-band h2 { font-size: 3.15rem; }
  .spatial-evidence .spatial-study-frame { min-height: 360px; }
  .study-rail { font-size: .58rem; }
  .project-index-item { padding-block: 58px; }
}

/* Business 500 — shared editorial composition */
.business500 {
  --rail-width: 86px;
  --page: min(1520px, calc(100% - 64px));
  overflow-x: clip;
  background: var(--paper);
}

.business500 .site-header,
.business500 main,
.business500 .site-footer { margin-left: var(--rail-width); }

.atelier-rail {
  position: fixed;
  z-index: 90;
  inset: 0 auto 0 0;
  display: flex;
  width: 86px;
  align-items: center;
  flex-direction: column;
  background: #111311;
  color: var(--white);
}

.rail-mark {
  margin-top: 27px;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 410;
  letter-spacing: -.05em;
  line-height: 1;
}

.rail-index {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin-top: 52px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
}

.rail-index i { width: 1px; height: 15px; background: rgba(255,255,255,.48); }
.rail-name {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--serif);
  font-size: 1.48rem;
  font-weight: 380;
  letter-spacing: .025em;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.rail-reference {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 28px;
  color: rgba(255,255,255,.6);
  font-family: var(--mono);
  font-size: .46rem;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}

.rail-reference i { width: 1px; height: 38px; background: rgba(255,255,255,.28); }

.business500 .site-header { background: rgba(251,250,246,.95); }
.business500 .header-inner { grid-template-columns: minmax(270px, 1fr) auto auto; }
.business500 .brand { flex-direction: row; align-items: center; gap: 18px; }
.business500 .brand span { font-family: var(--serif); font-size: 1.12rem; font-weight: 520; }
.business500 .brand small { margin: 0; padding-left: 18px; border-left: 1px solid var(--line); }
.business500 .primary-nav { justify-self: end; }

.business500 .landing-hero {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}

.business500 .landing-hero .shell { width: 100%; }
.business500 .landing-hero .hero-grid {
  min-height: min(790px, calc(100svh - 72px));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.business500 .landing-hero .hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  max-width: none;
  min-width: 0;
  grid-column: 1 / 6;
  grid-row: 1;
  justify-content: center;
  flex-direction: column;
  padding: clamp(54px, 7vw, 118px) clamp(42px, 5vw, 88px);
  background-color: var(--paper);
  background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(173,175,169,.2) 1px);
  background-size: 25% 100%;
}

.business500 .landing-hero .technical-line {
  position: absolute;
  top: 34px;
  right: clamp(42px, 5vw, 88px);
  left: clamp(42px, 5vw, 88px);
  max-width: none;
  margin: 0;
}

.business500 .landing-hero .eyebrow { margin-bottom: 18px; }
.business500 .landing-hero h1 {
  max-width: 620px;
  margin-bottom: 30px;
  font-size: clamp(4.75rem, 6.45vw, 7.55rem);
  font-weight: 410;
  letter-spacing: -.066em;
  line-height: .82;
}

.business500 .landing-hero .hero-lead { max-width: 490px; margin-bottom: 30px; }
.business500 .landing-hero .editorial-hero-visual {
  display: flex;
  min-width: 0;
  grid-column: 6 / 13;
  grid-row: 1;
  flex-direction: column;
  margin: 0;
}

.business500 .landing-hero .editorial-image-wrap { min-height: 0; height: 100%; }
.business500 .landing-hero .editorial-image-wrap > img {
  object-position: 18% center;
  filter: saturate(.72) contrast(1.035) brightness(.84);
}
.business500 .landing-hero figcaption { min-height: 34px; margin: 0; align-items: center; padding: 0 18px; background: var(--paper); }

@media (max-width: 1120px) {
  .business500 { --rail-width: 0px; }
  .atelier-rail { display: none; }
  .business500 .site-header,
  .business500 main,
  .business500 .site-footer { margin-left: 0; }
  .business500 .landing-hero h1 { font-size: clamp(4.5rem, 7.7vw, 6rem); }
}

@media (max-width: 960px) {
  .business500 .header-inner { grid-template-columns: 1fr auto auto; }
  .business500 .brand { flex-direction: column; align-items: flex-start; gap: 0; }
  .business500 .brand small { margin-top: 5px; padding: 0; border: 0; }
  .business500 .landing-hero .hero-grid { min-height: auto; }
  .business500 .landing-hero .hero-copy { grid-column: 1 / 13; padding: 58px 32px 42px; }
  .business500 .landing-hero .technical-line { position: static; margin-bottom: 42px; }
  .business500 .landing-hero h1 { max-width: 760px; font-size: clamp(4.8rem, 11vw, 6.5rem); }
  .business500 .landing-hero .editorial-hero-visual { grid-column: 1 / 13; grid-row: 2; }
  .business500 .landing-hero .editorial-image-wrap { height: 560px; }
}

@media (max-width: 720px) {
  .business500 { --page: calc(100% - 24px); }
  .business500 .brand small { display: none; }
  .business500 .landing-hero .hero-copy { padding: 34px 12px 28px; }
  .business500 .landing-hero .technical-line { margin-bottom: 28px; }
  .business500 .landing-hero h1 { margin-bottom: 24px; font-size: clamp(3.9rem, 17.3vw, 5.1rem); line-height: .8; }
  .business500 .landing-hero .hero-lead { font-size: .96rem; line-height: 1.52; }
  .business500 .landing-hero .editorial-image-wrap { height: 350px; }
  .business500 .landing-hero .editorial-image-wrap > img { object-position: 14% center; }
  .business500 .landing-hero figcaption { min-height: 42px; padding-inline: 12px; }
  .business500 .landing-hero .drawing-measure--side,
  .business500 .landing-hero .drawing-ref--a { display: none; }
}

@media (max-width: 420px) {
  .business500 .landing-hero h1 { font-size: clamp(3.55rem, 16.5vw, 4rem); }
  .business500 .landing-hero .hero-routes .primary-route { flex-basis: auto; }
  .business500 .landing-hero .editorial-image-wrap { height: 318px; }
}

.business500 .landing-section { padding-block: clamp(72px, 7vw, 108px); border-bottom: 1px solid var(--line); }
.business500 #projekti,
.business500 #usluge,
.business500 #o-studiju,
.business500 #kontakt { scroll-margin-top: 72px; }

.landing-label {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
  color: var(--oxide);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .09em;
}
.landing-label > span:first-child { color: var(--graphite); }
.landing-label i { width: 44px; height: 1px; background: var(--line); }
.landing-label--light { color: #c8cbc7; }
.landing-label--light > span:first-child { color: var(--oxide-light); }
.landing-label--light i { background: #555a56; }

.landing-projects { background: var(--paper); }
.landing-projects-layout { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); gap: clamp(42px, 6vw, 96px); }
.landing-section-intro { align-self: start; padding-top: 4px; }
.landing-section-intro h2 { max-width: 340px; margin-bottom: 24px; font-size: clamp(2.3rem, 3.35vw, 3.65rem); line-height: .98; }
.landing-section-intro > p { max-width: 330px; color: var(--muted); font-size: .94rem; }
.landing-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.landing-project-card { min-width: 0; }
.landing-project-card figure { position: relative; margin: 0; overflow: hidden; background: var(--stone); }
.landing-project-card figure::after { position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.42); content: ""; pointer-events: none; }
.landing-project-card img { width: 100%; aspect-ratio: 1.3 / 1; object-fit: cover; filter: saturate(.78) contrast(1.02); transition: transform 420ms var(--ease); }
.landing-project-card:first-child img { object-position: 20% center; }
.landing-project-card:hover img { transform: scale(1.012); }
.landing-project-number { position: absolute; z-index: 2; top: 11px; left: 16px; color: var(--white); font-family: var(--serif); font-size: clamp(3.1rem, 4.4vw, 4.6rem); font-weight: 350; letter-spacing: -.05em; line-height: 1; text-shadow: 0 1px 12px rgba(0,0,0,.22); }
.landing-project-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 0 11px; border-bottom: 1px solid var(--line); }
.landing-project-heading h3 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.015em; text-transform: uppercase; }
.landing-project-heading > span,
.landing-project-meta { font-family: var(--mono); font-size: .61rem; letter-spacing: .045em; }
.landing-project-meta { display: flex; justify-content: space-between; gap: 18px; padding-top: 10px; color: var(--muted); }
.landing-project-card > p { max-width: 520px; margin: 20px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.landing-project-card--offset { padding-top: 42px; }

.landing-services { background: var(--chalk); }
.landing-inline-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 50px; }
.landing-inline-heading .landing-label { margin: 0; }
.landing-inline-heading h2 { margin: 0; font-size: clamp(2.15rem, 3vw, 3rem); }
.landing-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-services-grid article { position: relative; min-height: 292px; padding: 30px clamp(24px, 3vw, 48px) 34px 0; }
.landing-services-grid article + article { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
.landing-services-grid article > span { display: block; margin-bottom: 24px; color: var(--oxide); font-family: var(--mono); font-size: .62rem; }
.landing-services-grid h3 { margin-bottom: 14px; font-size: 1.08rem; font-weight: 650; letter-spacing: -.015em; text-transform: uppercase; }
.landing-services-grid p { max-width: 350px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.service-glyph { position: relative; display: block; width: 48px; height: 42px; margin-bottom: 28px; color: var(--line-dark); }
.service-glyph::before,
.service-glyph::after { position: absolute; border: 1px solid currentColor; content: ""; }
.service-glyph--plan::before { inset: 0; background-image: linear-gradient(90deg, transparent 48%, currentColor 49%, currentColor 51%, transparent 52%), linear-gradient(transparent 48%, currentColor 49%, currentColor 51%, transparent 52%); opacity: .72; }
.service-glyph--plan::after { inset: 7px 12px; border-color: var(--oxide); }
.service-glyph--concept::before { right: 7px; bottom: 5px; left: 7px; height: 22px; border-radius: 15px 15px 3px 3px; }
.service-glyph--concept::after { right: 13px; bottom: 0; left: 13px; height: 5px; border-width: 0 1px; }
.service-glyph--material::before { top: 4px; bottom: 4px; left: 2px; width: 25px; background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(115,63,48,.35) 5px 6px); }
.service-glyph--material::after { top: 4px; right: 2px; bottom: 4px; width: 20px; background: rgba(115,63,48,.1); }

.landing-philosophy { position: relative; padding-block: clamp(78px, 8vw, 126px); background: #141614; color: var(--white); overflow: hidden; }
.landing-philosophy::after { position: absolute; right: -2vw; bottom: -13%; color: rgba(255,255,255,.025); content: "AF"; font-family: var(--serif); font-size: clamp(18rem, 29vw, 34rem); font-weight: 500; letter-spacing: -.1em; line-height: .75; pointer-events: none; }
.landing-philosophy > .shell { position: relative; z-index: 1; align-items: center; }
.landing-philosophy-copy { grid-column: 1 / 7; }
.landing-philosophy-copy h2 { max-width: 720px; margin-bottom: 30px; font-size: clamp(3.25rem, 4.8vw, 5rem); font-weight: 390; letter-spacing: -.047em; line-height: .96; }
.landing-philosophy-copy > p { max-width: 580px; margin: 0; color: #c9cdc9; font-size: .98rem; line-height: 1.7; }
.landing-philosophy-drawing { position: relative; grid-column: 8 / 13; min-height: 360px; border: 1px solid rgba(255,255,255,.1); }
.landing-philosophy-drawing img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; opacity: .58; mix-blend-mode: screen; }

.landing-contact { padding-block: clamp(68px, 6.5vw, 96px); background: var(--paper); }
.landing-contact > .shell { align-items: stretch; }
.landing-contact-copy { display: flex; grid-column: 1 / 7; justify-content: center; flex-direction: column; padding: 22px 7vw 22px 0; }
.landing-contact-copy h2 { max-width: 650px; margin-bottom: 18px; font-size: clamp(3rem, 4.4vw, 4.6rem); line-height: .98; }
.landing-contact-copy > p { max-width: 510px; margin-bottom: 28px; color: var(--muted); }
.landing-contact-copy .primary-route { align-self: flex-start; }
.landing-contact-visual { grid-column: 7 / 13; margin: 0; overflow: hidden; background: var(--stone); }
.landing-contact-visual img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 18% center; filter: saturate(.68) contrast(1.02) brightness(.92); }

.business500 .landing-footer { min-height: 170px; padding-block: 42px; }
.landing-footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; align-items: start; gap: 42px; }
.business500 .landing-footer .footer-nav { justify-self: center; }
.business500 .landing-footer .footer-provenance { display: flex; align-items: flex-end; justify-self: end; flex-direction: column; gap: 14px; text-align: right; }
.business500 .landing-footer .footer-provenance > span { color: #aeb3af; font-size: .75rem; }

@media (max-width: 1120px) {
  .landing-projects-layout { grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); gap: 42px; }
  .landing-project-card > p { font-size: .84rem; }
  .landing-philosophy-copy { grid-column: 1 / 8; }
  .landing-philosophy-drawing { grid-column: 8 / 13; }
}

@media (max-width: 960px) {
  .landing-projects-layout { grid-template-columns: 1fr; }
  .landing-section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 42px; }
  .landing-section-intro .landing-label { grid-column: 1 / -1; }
  .landing-section-intro h2,
  .landing-section-intro > p { max-width: none; }
  .landing-project-card--offset { padding-top: 30px; }
  .landing-philosophy-copy { grid-column: 1 / 8; }
  .landing-philosophy-drawing { grid-column: 8 / 13; min-height: 320px; }
  .landing-philosophy-drawing img { min-height: 320px; }
  .landing-contact-copy { grid-column: 1 / 7; padding-right: 42px; }
  .landing-contact-visual { grid-column: 7 / 13; }
}

@media (max-width: 720px) {
  .business500 .landing-section { padding-block: 64px; }
  .landing-label { margin-bottom: 26px; }
  .landing-section-intro { display: block; }
  .landing-section-intro h2 { margin-bottom: 20px; font-size: 2.8rem; }
  .landing-section-intro > p { margin-bottom: 40px; }
  .landing-project-grid { grid-template-columns: 1fr; gap: 54px; }
  .landing-project-card--offset { padding-top: 0; }
  .landing-project-card img { aspect-ratio: 1.22 / 1; }
  .landing-project-card > p { margin-top: 16px; font-size: .88rem; }
  .landing-inline-heading { display: block; margin-bottom: 34px; }
  .landing-inline-heading .landing-label { margin-bottom: 24px; }
  .landing-inline-heading h2 { font-size: 2.65rem; }
  .landing-services-grid { grid-template-columns: 1fr; }
  .landing-services-grid article { display: grid; min-height: 0; grid-template-columns: 34px 58px 1fr; gap: 0 14px; padding: 26px 0; }
  .landing-services-grid article + article { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .landing-services-grid article > span { grid-column: 1; grid-row: 1 / 3; margin: 2px 0 0; }
  .landing-services-grid .service-glyph { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .landing-services-grid h3 { grid-column: 3; margin-bottom: 8px; font-size: .98rem; }
  .landing-services-grid p { grid-column: 3; font-size: .86rem; }
  .landing-philosophy { padding-block: 72px; }
  .landing-philosophy-copy,
  .landing-philosophy-drawing { grid-column: 1 / 13; }
  .landing-philosophy-copy h2 { font-size: clamp(3.05rem, 13vw, 4rem); }
  .landing-philosophy-drawing { min-height: 250px; margin-top: 46px; }
  .landing-philosophy-drawing img { min-height: 250px; }
  .landing-contact { padding-block: 64px 0; }
  .landing-contact-copy,
  .landing-contact-visual { grid-column: 1 / 13; }
  .landing-contact-copy { padding: 0 0 48px; }
  .landing-contact-copy h2 { font-size: 3.1rem; }
  .landing-contact-visual { margin-right: -12px; margin-left: -12px; }
  .landing-contact-visual img { min-height: 300px; }
  .landing-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .business500 .landing-footer .footer-nav { justify-self: start; }
  .business500 .landing-footer .footer-provenance { align-items: flex-start; justify-self: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .business500 * { scroll-behavior: auto !important; }
  .landing-project-card img { transition: none; }
}

/* Business website refinements */
body.is-scroll-locked { overflow: hidden; }

.home-intro { padding-block: clamp(72px, 7vw, 108px); border-bottom: 1px solid var(--line); background: var(--chalk); }
.home-intro .section-code { grid-column: 1 / 3; }
.home-intro h2 { grid-column: 3 / 9; max-width: 720px; margin: 0; font-size: clamp(2.65rem, 4vw, 4.3rem); font-family: var(--serif); font-weight: 420; letter-spacing: -.047em; line-height: .98; }
.home-intro-copy { grid-column: 9 / 13; align-self: end; }
.home-intro-copy p { margin-bottom: 26px; color: var(--muted); }
.project-preview-image { position: relative; display: block; }
.project-card-route { margin-top: 22px; }
.services-overview-route { margin-top: 30px; }
.philosophy-route { margin-top: 34px; }
.service-contact-route { margin-top: 26px; }
.field-optional { color: var(--muted); font-size: .72rem; font-weight: 400; }

.gallery-trigger { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; text-align: inherit; }
.gallery-trigger img { transition: transform var(--medium) var(--ease), filter var(--fast) var(--ease); }
.gallery-hint { position: absolute; z-index: 4; right: 14px; bottom: 14px; display: inline-flex; min-height: 42px; align-items: center; gap: 18px; padding: 0 14px; background: rgba(24,27,25,.9); color: var(--white); font-family: var(--mono); font-size: .59rem; font-weight: 600; letter-spacing: .07em; }
.gallery-trigger:hover img { transform: scale(1.012); filter: saturate(.92); }
.gallery-trigger:focus-visible { outline-offset: 6px; }

.lightbox { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 24px; }
.lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(10,12,10,.92); }
.lightbox-panel { position: relative; z-index: 1; display: grid; width: min(1500px, calc(100vw - 48px)); height: min(920px, calc(100dvh - 48px)); grid-template-rows: auto minmax(0, 1fr) auto auto; padding: 24px; background: #111311; color: var(--white); box-shadow: 0 28px 80px rgba(0,0,0,.36); }
.lightbox-topline { display: flex; min-height: 40px; justify-content: space-between; padding-right: 130px; color: #bfc3bf; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; }
.lightbox-close { position: absolute; top: 14px; right: 18px; display: inline-flex; min-height: 44px; align-items: center; gap: 16px; padding: 0 10px; border: 0; background: transparent; color: var(--white); font-family: var(--mono); font-size: .61rem; letter-spacing: .07em; }
.lightbox-close span:last-child { color: var(--oxide-light); font-size: 1.5rem; line-height: 1; }
.lightbox-stage { display: grid; min-height: 0; place-items: center; overflow: hidden; }
.lightbox-stage img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-caption { margin: 14px 0 0; color: #d7dad7; font-size: .78rem; }
.lightbox-controls { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; }
.lightbox-controls button { display: inline-flex; min-width: 150px; min-height: 48px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 14px; border: 1px solid #656a65; background: transparent; color: var(--white); font-family: var(--mono); font-size: .61rem; letter-spacing: .07em; }
.lightbox-controls button:hover:not(:disabled) { border-color: var(--oxide-light); color: var(--oxide-light); }
.lightbox-controls button:disabled { opacity: .3; cursor: default; }
.lightbox :focus-visible { outline-color: var(--oxide-light); }

@media (max-width: 960px) {
  .home-intro .section-code { grid-column: 1 / 13; margin-bottom: 38px; }
  .home-intro h2 { grid-column: 1 / 8; }
  .home-intro-copy { grid-column: 8 / 13; }
}

@media (max-width: 720px) {
  .home-intro { padding-block: 64px; }
  .home-intro h2,
  .home-intro-copy { grid-column: 1 / 13; }
  .home-intro h2 { margin-bottom: 28px; font-size: 3rem; }
  .gallery-hint { right: 8px; bottom: 8px; min-height: 38px; }
  .lightbox { padding: 0; }
  .lightbox-panel { width: 100vw; height: 100dvh; padding: 16px 12px max(14px, env(safe-area-inset-bottom)); }
  .lightbox-topline { min-height: 48px; align-items: center; padding-right: 104px; font-size: .56rem; }
  .lightbox-close { top: 10px; right: 8px; }
  .lightbox-caption { min-height: 42px; margin-top: 10px; }
  .lightbox-controls { gap: 10px; }
  .lightbox-controls button { min-width: 0; flex: 1; min-height: 52px; gap: 10px; padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-trigger img { transition: none; }
}

/* Final Business 500 micro-polish */
.landing-project-card--centar .project-preview-image { overflow: hidden; }
.landing-project-card.landing-project-card--centar img { object-position: left 70%; transform: scale(1.45); transform-origin: left 70%; }
.landing-project-card.landing-project-card--centar:hover img { transform: scale(1.48); }
.case-primary--centar .gallery-trigger img { object-position: left bottom; transform: scale(1.1); transform-origin: left bottom; }
.case-primary--centar .gallery-trigger:hover img { transform: scale(1.12); }
.form-truth { gap: 8px; padding: 0; border: 0; background: transparent; }
.form-truth > span { color: var(--oxide); }
.form-truth p { font-family: var(--mono); font-size: .68rem; letter-spacing: .025em; }

@media (min-width: 961px) {
  .contact-opening-copy { grid-column: 3 / 11; }
}

@media (max-width: 960px) {
  .primary-nav { height: auto; max-height: calc(100dvh - 72px); padding: 28px 24px 30px; overflow-y: auto; }
  .mobile-nav-cta { margin-top: 22px; }
}

@media (max-width: 720px) {
  .primary-nav { top: 68px; height: auto; max-height: calc(100dvh - 68px); padding: 24px 20px 26px; }
  .site-footer { padding-block: 34px; }
  .business500 .landing-footer { min-height: 0; padding-block: 34px; }
  .footer-grid,
  .landing-footer-grid { gap: 24px; }
  .footer-nav { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 24px; row-gap: 0; }
  .footer-nav a { min-height: 48px; }
}