:root {
  color-scheme: light;
  --paper: #f2f3ef;
  --ink: #242824;
  --muted: #626960;
  --red: #b6353c;
  --line: #d3d7cf;
  --control-background: #f2f3eff0;
  --control-border: #b8beb2;
  --control-hover: #e3e7dc;
  --grid: #5a685009;
  --approach-background: #252b27;
  --gutter: 64px;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0;
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181a19;
  --ink: #edede8;
  --muted: #adb4ab;
  --red: #ee827c;
  --line: #383d38;
  --control-background: #202420f5;
  --control-border: #535c50;
  --control-hover: #30362f;
  --grid: #e0e7d509;
  --approach-background: #222722;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { border-radius: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
::selection { color: white; background: var(--red); }
h1, h2, h3, p { margin: 0; }
svg { width: 20px; height: 20px; stroke-width: 1.5; flex: 0 0 auto; }
[hidden] { display: none !important; }
.mono, .eyebrow { font: 400 11px/1.6 "IBM Plex Mono", monospace; letter-spacing: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px; color: var(--paper); background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { min-height: 88px; margin: 0 var(--gutter); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 40px; }
.logo { font-size: 33px; line-height: 1; font-weight: 800; display: inline-flex; align-items: flex-end; gap: 5px; }
.logo-mark { display: inline-block; width: 7px; height: 7px; background: var(--red); margin-bottom: 3px; }
.header-descriptor { color: var(--muted); }
.site-header nav { margin-left: auto; display: flex; gap: 32px; align-items: center; }
.site-header nav a { font-size: 12px; font-weight: 600; padding: 12px 0; }
.site-header nav a:hover { color: var(--red); }
.nav-contact { display: flex; align-items: center; gap: 8px; }
.hero { position: relative; height: min(760px, calc(100svh - 132px)); min-height: 560px; border-bottom: 1px solid var(--line); overflow: hidden; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 96px 96px; }
.architecture-scene { position: absolute; inset: 0; touch-action: pan-y; }
.architecture-scene canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.architecture-scene canvas:active { cursor: grabbing; }
.hero-copy { pointer-events: none; position: relative; z-index: 1; padding: 42px var(--gutter) 0; width: max-content; max-width: 100%; }
.eyebrow { display: flex; gap: 12px; align-items: center; text-transform: uppercase; color: var(--muted); }
.red-rule { width: 22px; height: 2px; background: var(--red); }
.hero h1 { font-size: 108px; line-height: 1.06; font-weight: 600; margin: 16px 0 18px; }
.hero h1 span { font-size: 46px; font-weight: 400; margin-left: 16px; }
.hero-description { font-size: 17px; line-height: 1.7; color: var(--muted); }
.hero-bottom { position: absolute; bottom: 24px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.study-caption { display: flex; flex-direction: column; gap: 5px; }
.study-caption > span:last-child { font-size: 11px; color: var(--muted); }
.model-controls { display: flex; flex-direction: column; gap: 10px; }
.model-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.feature-toggles { display: flex; gap: 12px; }
.feature-toggles label { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 12px; cursor: pointer; }
.feature-toggles input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.exterior-colors { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.exterior-colors > span { margin-right: 4px; }
.exterior-colors input { appearance: none; width: 24px; height: 24px; margin: 0; flex-shrink: 0; border: 3px solid var(--paper); border-radius: 50%; outline: 1px solid var(--control-border); cursor: pointer; }
.exterior-colors input[value="orange"] { background: #e05a08; }
.exterior-colors input[value="silver"] { background: #b8bfc2; }
.exterior-colors input[value="dark-grey"] { background: #45494b; }
.exterior-colors input:checked { outline: 2px solid var(--ink); }
.model-options input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.view-controls { display: flex; gap: 10px; align-items: center; }
.view-segments { display: grid; grid-template-columns: repeat(5, 56px) 88px; border: 1px solid var(--control-border); padding: 3px; background: var(--control-background); }
.view-segments button { background: transparent; border: none; padding: 9px 8px; font-size: 11px; min-height: 36px; min-width: 0; }
.view-segments button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.view-segments button:not([aria-pressed="true"]):hover { background: var(--control-hover); }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--control-border); background: var(--control-background); }
.icon-button:hover { color: var(--red); }
.theme-toggle { flex-shrink: 0; }
[data-theme="dark"] .theme-dark-icon, [data-theme="light"] .theme-light-icon { display: none; }
.hero-next { position: absolute; bottom: 24px; left: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; }
.hero-next:hover { color: var(--red); }
.scene-status { position: absolute; top: 64%; left: 50%; transform: translateX(-50%); font: 12px/1.6 "IBM Plex Mono", monospace; color: var(--muted); }
.adu-study { border-bottom: 1px solid var(--line); }
.adu-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 38px var(--gutter) 0; }
.adu-heading h2 { font-size: 48px; margin-top: 10px; }
.adu-heading > p { color: var(--muted); }
.adu-viewer { position: relative; height: 580px; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 96px 96px; }
.adu-bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.adu-caption { color: var(--muted); flex-shrink: 0; }
#adu-controls { flex-wrap: wrap; justify-content: flex-end; }
#adu-controls label:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
#adu-controls input:disabled { opacity: 0.45; cursor: not-allowed; }
.section-pad { padding: 52px var(--gutter) 76px; }
#studio { padding-top: 20px; }
.section-heading { display: flex; justify-content: space-between; gap: 24px; }
.section-number { color: var(--red); }
.side-note { color: var(--muted); }
.studio-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; margin-top: 50px; }
h2 { font-size: 46px; line-height: 1.22; font-weight: 500; }
.soft-text { color: var(--muted); }
.studio-copy { max-width: 450px; margin-left: auto; padding-top: 3px; }
.studio-copy p:first-child { font-size: 19px; line-height: 1.6; margin-bottom: 18px; }
.studio-copy p + p { font-size: 14px; line-height: 1.9; color: var(--muted); margin-top: 18px; }
.text-link { display: inline-flex; gap: 34px; align-items: center; font-size: 12px; padding: 14px 0 6px; margin-top: 18px; border-bottom: 1px solid var(--ink); }
.text-link:hover { color: var(--red); border-color: var(--red); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; padding-top: 30px; border-top: 1px solid var(--line); }
.principles > div { padding: 0 30px; border-left: 1px solid var(--line); }
.principles > div:first-child { padding-left: 0; border: none; }
.principles .mono { color: var(--muted); }
.principles h3 { font-size: 20px; font-weight: 500; margin: 22px 0 12px; }
.principles p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.approach { color: #f2f3ef; background: var(--approach-background); display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-top: 66px; padding-bottom: 82px; }
.approach .section-number { color: #c7cbbb; }
.approach h2 { margin-top: 40px; font-size: 44px; }
.approach h2 span { color: #a7b29f; }
.approach-intro > p { color: #c0c7bc; font-size: 13px; line-height: 1.8; margin-top: 28px; max-width: 280px; }
.approach-steps { margin-top: 36px; }
.approach details { border-top: 1px solid #535b52; }
.approach details:last-child { border-bottom: 1px solid #535b52; }
.approach summary { list-style: none; display: flex; align-items: center; gap: 22px; min-height: 88px; padding: 20px 0; }
.approach summary::-webkit-details-marker { display: none; }
.approach summary > .mono { color: #a7b29f; }
.approach summary h3 { font-size: 18px; font-weight: 500; }
.approach summary svg { margin-left: auto; }
.approach details[open] summary svg { transform: rotate(45deg); }
.approach details p { color: #c0c7bc; font-size: 14px; line-height: 1.9; padding: 0 28px 26px 36px; max-width: 480px; }
.contact { padding-top: 64px; padding-bottom: 90px; }
.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 50px; margin-top: 40px; }
.contact h2 { font-size: 54px; }
.contact-copy { margin-left: auto; }
.contact-copy p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.contact-link { display: flex; gap: 32px; align-items: center; border-bottom: 1px solid var(--ink); font-size: 22px; font-weight: 500; padding: 16px 0 8px; margin-top: 14px; }
.contact-link:hover { color: var(--red); border-color: var(--red); }
.site-footer { margin: 0 var(--gutter); padding: 28px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 36px; }
.site-footer .logo { font-size: 29px; }
.site-footer > p { color: var(--muted); }
.site-footer > span { color: var(--muted); margin-left: auto; font-size: 10px; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero-copy { animation: arrive 800ms ease both; }
@media (min-width: 1180px) {
  .model-controls { flex-direction: row; align-items: center; gap: 20px; }
  .model-options { gap: 20px; }
  .hero-next { left: calc(var(--gutter) + 196px); }
}
@media (min-width: 1800px) { :root { --gutter: 100px; } .hero { height: min(880px, calc(100svh - 140px)); } .hero-copy { padding-top: 64px; } .hero h1 { font-size: 132px; } }
@media (max-width: 1050px) { :root { --gutter: 36px; } .studio-layout { gap: 40px; } h2 { font-size: 38px; } .approach { gap: 48px; } .approach h2 { font-size: 38px; } .contact h2 { font-size: 44px; } .contact-link { font-size: 19px; gap: 18px; } .hero h1 { font-size: 88px; } }
@media (max-width: 1050px) {
  .view-segments { grid-template-columns: repeat(4, 56px); }
  .view-segments [data-view="top"], .view-segments [data-view="isometric"] { grid-column: span 2; }
}
@media (min-width: 721px) and (max-width: 1050px) { .hero-next { left: calc(var(--gutter) + 196px); } }
@media (max-width: 720px) {
  :root { --gutter: 22px; }
  .adu-heading { padding-top: 30px; }
  .adu-heading > p { display: none; }
  .adu-heading h2 { font-size: 40px; }
  .adu-viewer { height: 520px; }
  .adu-bottom { flex-direction: column; align-items: stretch; gap: 12px; bottom: 18px; }
  #adu-controls .model-options { flex-direction: column; align-items: stretch; gap: 6px; }
  #adu-controls .feature-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  #adu-controls .feature-toggles label { font-size: 11px; gap: 5px; }
  .site-header { min-height: 76px; gap: 12px; }
  .header-descriptor { display: none; }
  .site-header nav { gap: 12px; }
  .site-header nav a { font-size: 11px; }
  .logo { font-size: 29px; }
  .nav-contact svg { display: none; }
  .hero { height: calc(100svh - 116px); min-height: 520px; max-height: 810px; background-size: 64px 64px; }
  .hero-copy { padding-top: 30px; }
  .eyebrow { font-size: 9px; }
  .hero h1 { font-size: 76px; margin-top: 14px; margin-bottom: 12px; }
  .hero h1 span { font-size: 34px; margin-left: 10px; }
  .hero-description { font-size: 14px; line-height: 1.8; }
  .hero-bottom { flex-direction: column; align-items: flex-start; bottom: 18px; gap: 12px; }
  .study-caption { gap: 2px; }
  .study-caption .mono { font-size: 9px; }
  .study-caption > span:last-child { font-size: 10px; }
  .hero-next { left: auto; right: var(--gutter); bottom: 160px; }
  .model-controls { width: 100%; }
  .view-controls { width: 100%; gap: 8px; align-items: flex-end; }
  .view-segments { flex: 1; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .view-segments button { min-height: 40px; padding: 8px 4px; }
  .view-controls .icon-button { flex-shrink: 0; }
  .section-pad { padding-top: 36px; padding-bottom: 48px; }
  .side-note { display: none; }
  .studio-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  h2 { font-size: 34px; }
  .studio-copy { margin: 0; max-width: 100%; }
  .studio-copy p:first-child { font-size: 17px; }
  .principles { grid-template-columns: 1fr; margin-top: 40px; padding: 0; }
  .principles > div, .principles > div:first-child { padding: 24px 0; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 52px 1fr; gap: 8px 12px; }
  .principles h3 { font-size: 19px; margin: 0; }
  .principles p { grid-column: 2; }
  .approach { grid-template-columns: 1fr; gap: 26px; }
  .approach h2 { font-size: 36px; margin-top: 28px; }
  .approach-intro > p { max-width: 100%; }
  .approach-steps { margin-top: 4px; }
  .approach summary { min-height: 78px; gap: 16px; }
  .approach summary h3 { font-size: 17px; }
  .approach details p { padding-left: 30px; padding-right: 10px; }
  .contact-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .contact h2 { font-size: 40px; }
  .contact-copy { margin: 0; }
  .contact-link { width: fit-content; max-width: 100%; font-size: 20px; }
  .site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .site-footer > p { grid-column: 1 / -1; grid-row: 2; font-size: 9px; }
  .site-footer > span { text-align: right; font-size: 9px; }
}
@media (max-width: 360px) { :root { --gutter: 16px; } .site-header nav { gap: 8px; } .hero h1 { font-size: 64px; } .hero h1 span { font-size: 30px; } h2 { font-size: 30px; } .contact-link { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-copy { animation: none; } }