/* Iteration-02 reference colors: faithful dark artwork, shared roles for light.
   Interface colors are centralized here; immutable SVG artwork is not recolored. */
:root {
  color-scheme: light dark;
  --light-bg: #F4F6F2;
  --graphite-900: #0C1214;
  --gruvery-green: #8DE16D;
  --color-bg: light-dark(var(--light-bg), var(--graphite-900));
  --color-page: var(--color-bg);
  --color-brand: var(--gruvery-green);
  --color-surface: light-dark(#EDF2ED, #111A1C);
  --color-text: light-dark(#172726, #F1F4ED);
  --color-text-secondary: light-dark(#53665D, #B4BEBA);
  --color-text-muted: var(--color-text-secondary);
  --color-technical: light-dark(#526B60, #8FA49D);
  --color-line: light-dark(#CAD7CF, #263436);
  --color-line-strong: light-dark(#8EA398, #3B4C4E);
  --color-border: var(--color-line-strong);
  --color-focus: light-dark(#267A34, #B7EB83);
  --color-action: light-dark(#2B861E, #B4ED83);
  --color-action-hover: light-dark(#206B17, #D1F4AE);
  --color-accent-text: light-dark(#267A34, var(--color-brand));
  --accent-green: var(--color-accent-text);
  --accent-blue: light-dark(#377BAA, #73AFDD);
  --color-selection-text: light-dark(#FFFFFF, #07100C);
  --color-skip-text: light-dark(#FFFFFF, #081009);
  --color-shell-line: light-dark(#D9E3DE, #172224);
  --color-wordmark-muted: light-dark(#5C7168, #9BABAD);
  --color-nav-text: light-dark(#536A60, #A5B4B2);
  --color-language-muted: light-dark(#526B60, #7F908E);
  --color-headline-muted: light-dark(#52665D, #A8B6B2);
  --color-number-line: light-dark(#93ABA2, #485B55);
  --color-hero-text: light-dark(#304A3E, #D3DED8);
  --color-hero-muted: light-dark(#526B60, #899C97);
  --color-link-line: light-dark(#607C69, #7D9984);
  --color-hero-start: light-dark(#F2F6F1, #121D20);
  --color-hero-middle: light-dark(#EDF3EF, #101B1E);
  --color-hero-end: light-dark(#E7EFEB, #0C1518);
  --color-mark-heading: light-dark(#536B61, #849B98);
  --color-mark-guide: light-dark(#A4B7AC, #335252);
  --color-mark-callout: light-dark(#3E5B4F, #A9C4B7);
  --color-mark-callout-muted: light-dark(#536B60, #71958E);
  --color-mark-footer-line: light-dark(#D4DED7, #203133);
  --color-mark-footer: light-dark(#52695E, #A5B5B2);
  --color-mark-footer-end: light-dark(#536B60, #6E8D88);
  --color-intro-text: light-dark(#486056, #A6B6AF);
  --color-card-hover: light-dark(#E6EEE8, #172325);
  --color-pill-border: light-dark(#A2B5A7, #36504A);
  --color-pill-text: light-dark(#35613D, #A1C99D);
  --color-glyph-border: light-dark(#607F6C, #71958B);
  --color-card-text: light-dark(#526B60, #94A6A0);
  --color-card-meta: light-dark(#536B60, #7F958D);
  --color-note-text: light-dark(#526B60, #80948E);
  --color-work-label: light-dark(#526B60, #728884);
  --color-work-text: light-dark(#526B60, #9BAEA9);
  --color-work-kind: light-dark(#536B60, #708A82);
  --color-graphic-bg: light-dark(#ECF2ED, #121D1F);
  --color-graphic-heading: light-dark(#526B60, #839B95);
  --color-graphic-index: light-dark(#536B60, #839B95);
  --color-software-bg: light-dark(#ECF2ED, #111B1D);
  --color-cycle-border: light-dark(#94AB9C, #334745);
  --color-cycle-bg: light-dark(#E4EEE6, #192729);
  --color-cycle-active-border: light-dark(#608970, #496C5D);
  --color-cycle-number: light-dark(#526B60, #839B95);
  --color-cycle-arrow: light-dark(#5B7A68, #77958E);
  --color-feedback-text: light-dark(#526B60, #6F8A83);
  --color-org-bg: light-dark(#ECF2ED, #111A1D);
  --color-layer-border: light-dark(#94AB9C, #304542);
  --color-layer-bg: light-dark(#E5EEE7, #1A292A);
  --color-layer-number: light-dark(#526B60, #839B95);
  --color-layer-bar-green: light-dark(#6A8C76, #52746A);
  --color-layer-bar-blue: light-dark(#377BAA, #567C98);
  --color-graphic-caption: light-dark(#526B60, #829B94);
  --color-project-text: light-dark(#526B60, #A4B5AD);
  --color-project-footer: light-dark(#526B60, #789089);
  --color-contact: light-dark(#E8F0E9, #162322);
  --color-contact-border: light-dark(#BBCDBF, #324841);
  --color-contact-stripe-line: light-dark(#CAD9CE, #314541);
  --color-contact-stripe: var(--color-technical);
  --color-contact-text: light-dark(#486056, #AABEB5);
  --color-action-text: light-dark(#FFFFFF, #0D1913);
  --color-signature: var(--color-technical);
  --color-footer-text: light-dark(#526B60, #69817A);
  --color-footer-link: light-dark(#486056, #A1B7AE);
  --ref-header-bg: light-dark(rgba(244,246,242,.98), rgba(12,18,20,.98));
  --ref-signal-halo: light-dark(rgba(145,226,109,.1), rgba(145,226,109,.1));
  --ref-mark-glow: light-dark(rgba(112,168,132,.14), rgba(30,66,53,.35));
  --ref-mark-grid: light-dark(rgba(75,113,97,.06), rgba(122,161,157,.035));
  --ref-software-glow: light-dark(rgba(96,160,112,.10), rgba(65,122,108,.10));
  --ref-org-grid: light-dark(rgba(75,113,97,.06), rgba(95,129,118,.055));
  --ref-project-glow: light-dark(rgba(100,165,119,.10), rgba(58,112,105,.19));
  --ref-contact-glow: light-dark(rgba(108,170,121,.10), rgba(77,132,115,.13));
  --ref-mask: #000000;
  --font-sans: "Inter", "Manrope", "Clear Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cousine", "SFMono-Regular", Consolas, monospace;
  --font-display: var(--font-sans);
  --tracking-heading: -.04em;
  --tracking-title: -.025em;
  --size-content: 1680px;
  --space-gutter: clamp(22px, 4.55vw, 88px);
  --header-offset: 99px;
  --header-control-width: 36px;
  --radius-md: 14px;
  --speed-fast: 180ms;
  --speed-mid: 360ms;
  --curve: cubic-bezier(.22, 1, .36, 1);
  --hero-rotation: 0deg;
  --ref-preview-backdrop: rgba(0,0,0,.78);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-offset) - 1px)
}
body {
  margin:0;
  background:var(--color-page);
  color:var(--color-text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--color-focus);
  outline-offset:5px
}
::selection {
  background:var(--accent-green);
  color:var(--color-selection-text)
}
.site-shell {
  max-width:var(--size-content);
  margin:0 auto;
  border-left:1px solid var(--color-shell-line);
  border-right:1px solid var(--color-shell-line);
  overflow:clip
}
.skip-link {
  position:absolute;
  left:16px;
  top:-80px;
  padding:10px 20px;
  background:var(--color-action);
  color:var(--color-skip-text);
  z-index:100
}
.skip-link:focus {
  top:15px
}
.site-header {
  height:99px;
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--color-line);
  padding:0 var(--space-gutter);
  background:var(--ref-header-bg)
}
.brand {
  display:inline-flex;
  align-items:center;
  min-width:0;
  gap:6px;
  font-weight:610;
  font-size:24px;
  line-height:1
}
.brand-mark {
  width:43px;
  height:43px;
  margin-left:-8px
}
.brand-name {
  white-space:nowrap
}
.brand-dot {
  color:var(--accent-green)
}
.brand-suffix {
  color:var(--color-wordmark-muted);
  font-weight:400
}
.site-nav {
  display:flex;
  gap:clamp(18px,3.4vw,56px);
  align-items:center;
  margin-left:auto;
  margin-right:clamp(8px,1.5vw,24px)
}
.site-nav a {
  position:relative;
  display:grid;
  place-items:center;
  min-height:44px;
  font-size:12px;
  font-weight:650;
  letter-spacing:.05em;
  color:var(--color-nav-text);
  transition:color var(--speed-fast)
}
.header-end {
  display:flex;
  flex:none;
  align-items:center;
  gap:16px
}
.theme-switch {
  display:inline-flex;
  color:var(--color-language-muted)
}
.theme-switch[hidden] {
  display:none
}
.theme-option {
  position:relative;
  display:grid;
  place-items:center;
  width:var(--header-control-width);
  height:44px;
  cursor:pointer;
  transition:color 150ms ease
}
.theme-option input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:inherit
}
.site-nav a:hover,.site-nav a[aria-current=location],
.language-switch a:hover,.language-switch a[aria-current=page],
.theme-option:has(input:checked),.theme-option:hover {
  color:var(--accent-green)
}
.site-nav a[aria-current=location]::after,
.theme-option:has(input:checked)::after,.language-switch a[aria-current=page]::after {
  content:"";
  position:absolute;
  left:50%;
  width:16px;
  transform:translateX(-50%);
  bottom:5px;
  height:1px;
  background:currentColor;
  pointer-events:none
}
.theme-option:has(input:focus-visible) {
  outline:2px solid var(--color-focus);
  outline-offset:2px
}
.theme-option svg {
  width:18px;
  height:18px;
  pointer-events:none
}
.brand:hover .brand-name,.brand:active .brand-name {
  color:var(--accent-green)
}
.header-line,.language-switch::after {
  height:22px;
  width:1px;
  background:var(--color-line-strong)
}
.language-switch {
  display:flex;
  align-items:center;
  gap:8px;
  font:600 11px var(--font-mono);
  letter-spacing:.04em
}
.language-switch::after {
  flex:none
}
.header-end:has(.theme-switch:not([hidden])) .language-switch::after {
  content:""
}
.language-switch a {
  position:relative;
  border:0;
  background:none;
  padding:7px 8px;
  min-height:44px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--color-language-muted);
  transition:color var(--speed-fast)
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,1.055fr) minmax(0,.945fr);
  min-height:680px;
  border-bottom:1px solid var(--color-line)
}
.hero-copy {
  padding:clamp(86px,8.6vw,134px) clamp(26px,5vw,88px) 64px var(--space-gutter);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0
}
.eyebrow,.overline,.work-label,.work-kind,.section-tag,.section-index,.diagram-topline,.diagram-footer,.graphic-header,.project-kicker,.section-number,.pill-index,.principle-bottom,.contact-stripe,.site-footer,.signature-detail,.graphic-caption,.feedback-line,.cycle-num,.layer-no,.project-footer {
  font-family:var(--font-mono);
  font-weight:400;
  letter-spacing:.13em
}
.section-number,.section-index,.work-label,.contact-stripe {
  font-size:10px
}
.eyebrow {
  font-size:10px;
  line-height:1.6;
  color:var(--color-text-secondary);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:12px
}
.signal-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-green);
  box-shadow:0 0 0 4px var(--ref-signal-halo)
}
h1,h2,h3,p {
  margin-top:0
}
h2,h3,h4 {
  overflow-wrap:break-word
}
.hero h1,.section h2,.contact-content h2 {
  letter-spacing:var(--tracking-heading)
}
.brand,.headline-muted,.request-question-link,.principle h3,.work-info h3,.project-info h4,.signature-name {
  letter-spacing:var(--tracking-title)
}
.hero h1 {
  margin:35px 0 0;
  font-family:var(--font-display);
  font-size:clamp(56px,4.8vw,84px);
  line-height:1.075;
  font-weight:570;
  white-space:normal;
  overflow-wrap:break-word
}
.headline-muted {
  color:var(--color-headline-muted);
  font-size:.72em;
  white-space:normal
}
.hero-bottom {
  margin-top:auto;
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  gap:32px;
  padding-top:70px
}
.section-number {
  display:flex;
  align-items:flex-start;
  white-space:nowrap
}
.section-marker {
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:18px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.13em;
  white-space:nowrap;
  color:var(--color-text-secondary);
  transition:color 150ms ease
}
[data-section-active] .section-marker {
  color:var(--accent-green)
}
.section-marker::before,.section-marker::after {
  position:absolute;
  top:0;
  color:inherit;
  opacity:0;
  transition:opacity 150ms ease;
  pointer-events:none
}
.section-marker::before {
  content:"[";
  right:calc(100% + 6px)
}
.section-marker::after {
  content:"]";
  left:calc(100% + 6px)
}
.number-line {
  position:absolute;
  top:calc(100% + 16px);
  left:0;
  height:1px;
  background:var(--color-number-line);
  width:100%;
  opacity:0;
  transition:opacity 150ms ease;
  pointer-events:none
}
[data-section-active] .section-marker::before,
[data-section-active] .section-marker::after,
[data-section-active] .number-line {
  opacity:1
}
.hero-description {
  max-width:455px
}
.hero-description p {
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.58;
  letter-spacing:-.02em;
  color:var(--color-hero-text);
  margin:0 0 18px
}
.hero-description .muted {
  color:var(--color-hero-muted);
  font-size:15px;
  line-height:1.68;
  margin-bottom:31px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:var(--color-text);
  font-size:12px;
  font-weight:650;
  padding-bottom:10px;
  border-bottom:1px solid var(--color-link-line);
  transition:color var(--speed-fast),border-color var(--speed-fast)
}
.text-link:hover {
  color:var(--accent-green);
  border-color:var(--accent-green)
}
.link-arrow {
  font-size:21px;
  line-height:1;
  color:var(--accent-green);
  font-weight:350;
  transition:transform var(--speed-mid) var(--curve)
}
.text-link:hover .link-arrow {
  transform:translate(3px,-3px)
}
.hero-visual {
  position:relative;
  min-height:680px;
  background:radial-gradient(ellipse at 51% 40%,var(--ref-mark-glow),transparent 50%),linear-gradient(145deg,var(--color-hero-start) 0%,var(--color-hero-middle) 42%,var(--color-hero-end) 100%);
  border-left:1px solid var(--color-line);
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.hero-visual::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(to right,var(--ref-mark-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ref-mark-grid) 1px,transparent 1px);
  background-size:45px 45px;
  mask-image:linear-gradient(to bottom,transparent 0,var(--ref-mask) 25%,var(--ref-mask) 75%,transparent 100%);
  pointer-events:none
}
.diagram-topline {
  padding:32px 39px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--color-mark-heading);
  font-size:10px;
  position:relative;
  z-index:2
}
.diagram-topline span:first-child {
  color:var(--accent-green)
}
.diagram-stage {
  position:relative;
  display:grid;
  place-items:center;
  flex:1;
  min-height:520px
}
.diagram-guides {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  overflow:visible
}
.diagram-guides circle,.diagram-guides path {
  fill:none;
  stroke:var(--color-mark-guide);
  stroke-width:.7;
  opacity:.56
}
.diagram-guides .guide-point {
  fill:var(--accent-green);
  stroke:none;
  opacity:.8
}
.hero-symbol-trigger {
  width:min(72%,440px);
  position:relative;
  pointer-events:none;
  z-index:1
}
.hero-symbol-hitarea {
  position:absolute;
  inset:18% 19%;
  z-index:2;
  pointer-events:auto
}
.hero-symbol {
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  position:relative;
  z-index:1;
  transform:rotate(0deg);
  transform-origin:center;
  transition:transform 1s var(--curve)
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .hero-symbol {
    transform:rotate(var(--hero-rotation, 0deg))
  }
}
.mark-callout {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--color-mark-callout);
  font:10px var(--font-mono);
  letter-spacing:.08em
}
.mark-callout small {
  display:inline;
  color:var(--color-mark-callout-muted);
  font-size:inherit;
  margin-left:14px;
  letter-spacing:.1em
}
.callout-one .callout-index {
  color:var(--accent-green)
}
.callout-two .callout-index {
  color:var(--accent-blue)
}
.callout-one {
  top:19%;
  right:10%
}
.callout-two {
  bottom:18%;
  left:9%
}
.callout-one .callout-line {
  width:40px;
  height:1px;
  background:var(--accent-green);
  opacity:.7
}
.callout-two .callout-line {
  width:38px;
  height:1px;
  background:var(--accent-blue);
  opacity:.7
}
.diagram-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 38px 26px;
  border-top:1px solid var(--color-mark-footer-line);
  font-size:9px;
  text-transform:uppercase;
  color:var(--color-mark-footer);
  position:relative;
  z-index:2
}
.diagram-footer>span {
  display:inline-flex;
  align-items:center;
  gap:9px
}
.request-selector {
  display:grid;
  grid-template-columns:21% minmax(0,1fr);
  gap:14px;
  padding:28px var(--space-gutter) 32px;
  border-bottom:1px solid var(--color-line)
}
.request-label {
  margin:0;
  padding-top:14px;
  font:400 11px/1.6 var(--font-mono);
  letter-spacing:.13em;
  color:var(--color-text-secondary)
}
.request-body {
  min-width:0
}
.request-options {
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,36px);
  margin-bottom:22px
}
.request-option {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--color-text-secondary)
}
.request-option::before {
  content:"";
  flex:none;
  width:5px;
  height:5px;
  border-radius:50%;
  background:transparent
}
.request-option[aria-selected="true"],.request-option:hover {
  color:var(--color-text)
}
.request-option[aria-selected="true"]::before {
  background:var(--accent-green)
}
.request-option[aria-selected="true"] {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:6px
}
.request-questions {
  display:grid;
  gap:18px
}
.request-selector[data-enhanced] .request-panel {
  grid-area:1 / 1
}
.request-panel[aria-hidden="true"] {
  visibility:hidden;
  pointer-events:none
}
.request-question-link {
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:820px;
  font-size:24px;
  line-height:1.3;
  overflow-wrap:break-word
}
.request-question-link:hover {
  color:var(--accent-green)
}
.request-arrow {
  flex:none;
  font-size:20px;
  color:var(--accent-green)
}
.section {
  padding:clamp(86px,10vw,156px) var(--space-gutter) clamp(96px,10vw,160px);
  border-bottom:1px solid var(--color-line)
}
.section-heading {
  display:grid;
  grid-template-columns:21% minmax(0,1fr);
  gap:14px;
  margin-bottom:63px
}
.section-heading-left {
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding-top:8px
}
.section-index,.section-tag {
  color:inherit
}
.section-tag {
  font-size:11px
}
.overline {
  margin:0 0 23px;
  color:var(--accent-green);
  font-size:10px
}
.section h2 {
  font-size:clamp(44px,5.2vw,78px);
  font-weight:570;
  line-height:1.12;
  margin:0 0 25px
}
.section-intro {
  color:var(--color-intro-text);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.65;
  max-width:570px;
  margin:0
}
.principle-flow {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--color-surface)
}
.principle {
  min-width:0;
  min-height:340px;
  border-right:1px solid var(--color-line);
  padding:30px 27px 22px;
  display:flex;
  flex-direction:column;
  transition:background var(--speed-mid)
}
.principle:last-child {
  border-right:0
}
.principle:hover {
  background:var(--color-card-hover)
}
.principle-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:48px
}
.pill-index {
  border:1px solid var(--color-pill-border);
  border-radius:50%;
  height:37px;
  width:37px;
  display:grid;
  place-items:center;
  font-size:10px;
  line-height:1;
  letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--color-pill-text)
}
.principle-glyph {
  position:relative;
  width:47px;
  height:47px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-blue);
  font-size:27px
}
.g-focus::before {
  content:"";
  display:block;
  width:33px;
  height:33px;
  border-radius:50%;
  border:1px solid var(--color-glyph-border)
}
.g-focus::after {
  content:"";
  display:block;
  width:9px;
  height:9px;
  background:var(--accent-green);
  border-radius:50%;
  position:absolute;
  top:19px;
  left:19px
}
.g-structure {
  gap:3px
}
.g-structure span {
  width:7px;
  height:20px;
  border:1px solid var(--color-glyph-border);
  border-radius:3px
}
.g-structure span:nth-child(2) {
  height:34px;
  border-color:var(--accent-blue)
}
.g-connect path {
  stroke:var(--color-glyph-border)
}
.g-connect circle {
  stroke:var(--accent-green)
}
.g-connect circle:nth-of-type(2) {
  stroke:var(--accent-blue)
}
.g-iterate {
  height:43px;
  width:43px
}
.g-iterate rect {
  stroke:var(--accent-green)
}
.g-iterate path {
  stroke:var(--accent-blue)
}
.principle h3 {
  font-size:clamp(21px,2.1vw,29px);
  font-weight:570;
  margin:44px 0 13px
}
.principle p {
  color:var(--color-card-text);
  font-size:14px;
  line-height:1.65;
  max-width:260px;
  margin:0 0 38px
}
.principle-bottom {
  display:flex;
  margin-top:auto;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:var(--color-card-meta)
}
.connector-arrow {
  font-size:20px;
  color:var(--accent-green);
  font-family:var(--font-sans);
  line-height:1
}
.below-note {
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0 0;
  font-size:13px;
  color:var(--color-note-text)
}
.note-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  height:1px;
  width:24px
}
.what-section {
  padding-bottom:115px
}
.what-section .section-heading {
  margin-bottom:73px
}
.work-row {
  display:grid;
  grid-template-columns:35% minmax(0,1fr);
  gap:3%;
  border-top:1px solid var(--color-line);
  padding:42px 0 48px
}
.work-row:last-child {
  border-bottom:1px solid var(--color-line)
}
.work-info {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding-right:20px
}
.work-label {
  display:flex;
  gap:20px;
  color:var(--color-work-label)
}
.work-label span:first-child {
  color:var(--accent-green)
}
.work-info h3 {
  font-weight:550;
  line-height:1.09;
  font-size:clamp(31px,3.3vw,50px);
  margin:39px 0 19px
}
.title-period {
  color:var(--accent-green)
}
.work-title {
  white-space:pre-line
}
.work-info p {
  max-width:340px;
  color:var(--color-work-text);
  font-size:15px;
  line-height:1.66;
  margin-bottom:34px
}
.work-kind {
  color:var(--color-work-kind);
  font-size:9px;
  margin-top:auto
}
.work-graphic {
  min-height:365px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  position:relative;
  overflow:hidden;
  background:var(--color-graphic-bg)
}
.graphic-header {
  position:absolute;
  z-index:3;
  top:23px;
  left:27px;
  right:27px;
  display:flex;
  justify-content:space-between;
  color:var(--color-graphic-heading);
  font-size:9px
}
.graphic-header span:last-child {
  color:var(--color-graphic-index)
}
.software-graphic {
  background-image:radial-gradient(circle at 72% 70%,var(--ref-software-glow),transparent 48%),linear-gradient(var(--color-software-bg),var(--color-software-bg))
}
.cycle-grid {
  position:absolute;
  left:35px;
  right:35px;
  top:94px;
  bottom:88px;
  display:grid;
  align-items:center;
  grid-template-columns:repeat(3,minmax(0,1fr) 22px) minmax(0,1fr);
  gap:7px
}
.cycle-step {
  min-width:0;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  border:1px solid var(--color-cycle-border);
  background:var(--color-cycle-bg);
  border-radius:8px;
  padding:15px 12px;
  height:154px;
  position:relative
}
.cycle-step:nth-of-type(3) {
  border-color:var(--color-cycle-active-border)
}
.cycle-symbol {
  font-size:30px;
  line-height:1;
  color:var(--accent-green)
}
.cycle-square {
  color:var(--accent-blue)
}
.cycle-diamond {
  color:var(--accent-green)
}
.cycle-refresh {
  color:var(--accent-blue)
}
.cycle-num {
  position:absolute;
  right:13px;
  top:15px;
  font-size:9px;
  color:var(--color-cycle-number)
}
.cycle-step strong {
  font-size:clamp(11px,1.1vw,15px);
  font-weight:550;
  margin-top:auto
}
.cycle-junction {
  color:var(--color-cycle-arrow);
  font-family:var(--font-mono);
  font-size:20px;
  text-align:center
}
.feedback-line {
  position:absolute;
  bottom:31px;
  left:39px;
  right:39px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:9px;
  color:var(--color-feedback-text)
}
.feedback-line span:first-child,.feedback-line span:last-child,.note-arrow {
  font:22px var(--font-sans);
  color:var(--accent-green)
}
.organization-graphic {
  background-image:linear-gradient(to right,var(--ref-org-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--ref-org-grid) 1px,transparent 1px);
  background-size:32px 32px;
  background-color:var(--color-org-bg)
}
.layers {
  position:absolute;
  top:86px;
  left:15%;
  right:15%;
  display:flex;
  flex-direction:column;
  gap:11px
}
.layers::before {
  content:"";
  position:absolute;
  left:19px;
  top:17px;
  bottom:17px;
  width:1px;
  background:linear-gradient(var(--accent-green),var(--accent-blue));
  z-index:2
}
.layer {
  display:flex;
  align-items:center;
  gap:18px;
  height:45px;
  border:1px solid var(--color-layer-border);
  border-radius:7px;
  background:var(--color-layer-bg);
  padding:0 16px;
  position:relative
}
.layer:nth-child(2) {
  margin-left:24px;
  margin-right:-24px
}
.layer:nth-child(3) {
  margin-left:46px;
  margin-right:-46px
}
.layer:nth-child(4) {
  margin-left:23px;
  margin-right:-23px
}
.layer-dot {
  width:6px;
  height:6px;
  position:relative;
  z-index:4;
  background:var(--accent-green);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--color-layer-bg)
}
.layer:nth-child(even) .layer-dot {
  background:var(--accent-blue)
}
.layer-no {
  font-size:9px;
  color:var(--color-layer-number)
}
.layer strong {
  font-size:14px;
  font-weight:550;
  white-space:nowrap
}
.layer-bar {
  margin-left:auto;
  width:20%;
  height:1px;
  background:var(--color-layer-bar-green)
}
.layer:nth-child(even) .layer-bar {
  background:var(--color-layer-bar-blue)
}
.graphic-caption {
  position:absolute;
  bottom:20px;
  left:27px;
  right:27px;
  font-size:9px;
  line-height:1.6;
  color:var(--color-graphic-caption);
  letter-spacing:.03em;
  display:flex;
  gap:12px
}
.tiny-cross {
  font-size:15px;
  line-height:1;
  color:var(--accent-green)
}
.projects-graphic {
  background:radial-gradient(circle at 25% 45%,var(--ref-project-glow),transparent 55%),var(--color-software-bg)
}
.project-preview {
  display:flex;
  align-items:center;
  gap:35px;
  position:absolute;
  top:78px;
  left:8%;
  right:7%;
  bottom:66px
}
.project-icon {
  width:clamp(110px,12vw,180px);
  height:auto;
  aspect-ratio:1451 / 1084;
  display:grid;
  place-items:center;
  flex:none
}
.project-icon img {
  display:block;
  width:100%;
  height:auto;
  border-radius:8px
}
.promo-dialog {
  padding:52px 0 0;
  border:0;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  overflow:visible;
  background:transparent;
  color:var(--color-text)
}
.promo-dialog::backdrop {
  background:var(--ref-preview-backdrop)
}
.promo-dialog img {
  display:block;
  max-width:100%;
  max-height:calc(100dvh - 100px);
  object-fit:contain;
  border-radius:var(--radius-md)
}
.promo-close {
  position:absolute;
  top:0;
  right:0;
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-text);
  cursor:pointer
}
.project-info {
  min-width:0
}
.project-kicker {
  font-size:9px;
  color:var(--accent-green);
  margin:0 0 14px
}
.project-info h4 {
  font-size:clamp(22px,2.6vw,41px);
  font-weight:570;
  margin:0;
  line-height:1.1
}
.project-info p:last-child {
  font-size:14px;
  color:var(--color-project-text);
  line-height:1.65;
  margin:19px 0 0;
  max-width:330px
}
.project-footer {
  position:absolute;
  bottom:24px;
  left:28px;
  right:28px;
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--color-project-footer);
  font-size:9px
}
.contact-section {
  background:var(--color-contact);
  border-top:1px solid var(--color-contact-border)
}
.contact-stripe {
  padding:24px var(--space-gutter);
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--color-contact-stripe-line);
  color:var(--color-contact-stripe)
}
.contact-content {
  min-height:560px;
  display:flex;
  justify-content:space-between;
  gap:50px;
  padding:102px var(--space-gutter) 81px;
  background:radial-gradient(ellipse at 105% 100%,var(--ref-contact-glow),transparent 52%)
}
.contact-main {
  max-width:780px
}
.contact-star {
  color:var(--accent-green);
  font-size:20px
}
.contact-content h2 {
  font-size:clamp(42px,5vw,77px);
  font-weight:540;
  line-height:1.13;
  margin:33px 0 29px
}
.contact-content p {
  font-size:18px;
  line-height:1.65;
  color:var(--color-contact-text);
  margin-bottom:29px
}
.contact-button {
  display:inline-flex;
  gap:46px;
  align-items:center;
  justify-content:space-between;
  padding:17px 19px 17px 25px;
  background:var(--color-action);
  color:var(--color-action-text);
  border-radius:7px;
  font-size:14px;
  font-weight:650;
  transition:background var(--speed-fast),transform var(--speed-mid) var(--curve)
}
.contact-button:hover {
  background:var(--color-action-hover);
  transform:translateY(-2px)
}
.button-arrow {
  font-size:25px;
  font-weight:400;
  line-height:1
}
.contact-author {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:24px
}
.contact-portrait {
  flex:none;
  width:96px;
  height:96px;
  overflow:hidden;
  border-radius:50%
}
.contact-portrait img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.contact-author-copy {
  min-width:0;
  max-width:390px
}
.contact-author-name {
  display:block;
  font-size:19px;
  font-weight:600;
  line-height:1.4;
  color:var(--color-text)
}
.contact-author-role {
  display:block;
  margin-top:5px;
  font-size:14px;
  line-height:1.55;
  color:var(--color-contact-text)
}
.contact-links {
  display:flex;
  gap:24px;
  margin-top:14px;
  font:13px var(--font-mono);
  color:var(--color-text)
}
.contact-links a,.project-footer a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.contact-links a:hover,.project-footer a:hover {
  color:var(--accent-green)
}
.contact-signature {
  align-self:flex-end;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  text-align:right
}
.contact-signature img {
  opacity:.74
}
.signature-name {
  font-size:20px;
  font-weight:560
}
.signature-detail {
  display:block;
  margin-top:8px;
  color:var(--color-signature);
  font-size:11px;
  white-space:nowrap
}
.site-footer {
  height:92px;
  padding:0 var(--space-gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--color-footer-text);
  font-size:10px
}
.site-footer a {
  color:var(--color-footer-link);
  transition:color var(--speed-fast)
}
.site-footer a:hover {
  color:var(--accent-green)
}
@media (min-width:1680px) {
  .hero h1 {
    font-size:84px
  }
}
@media (max-width:1240px) {
  .hero h1 {
    font-size:clamp(48px,5vw,67px)
  }
  .hero-bottom {
    grid-template-columns:1fr;
    gap:24px;
    padding-top:55px
  }
  .section-number {
    flex-direction:row;
    align-items:center;
    gap:15px
  }
  .principle {
    padding:25px 18px
  }
  .cycle-grid {
    left:20px;
    right:20px;
    gap:3px;
    grid-template-columns:repeat(3,minmax(0,1fr) 16px) minmax(0,1fr)
  }
  .cycle-step {
    padding:12px 9px
  }
  .diagram-footer {
    gap:10px;
    padding:20px
  }
  .mark-callout {
    display:none
  }
}
@media (max-width:970px) {
  .request-selector {
    grid-template-columns:150px minmax(0,1fr)
  }
  :root {
    --header-offset:82px;
    --header-control-width:28px
  }
  .site-header {
    height:82px;
    gap:clamp(8px,1.25vw,12px)
  }
  .site-nav {
    gap:clamp(8px,1.25vw,18px);
    margin-right:0
  }
  .header-end {
    gap:6px
  }
  .language-switch a {
    padding-inline:3px
  }
  .brand {
    flex:1
  }
  .brand-name {
    white-space:normal
  }
  .hero {
    grid-template-columns:1fr;
    min-height:auto
  }
  .hero-copy {
    padding:95px var(--space-gutter) 68px
  }
  .hero h1 {
    font-size:clamp(58px,8vw,94px)
  }
  .hero-bottom {
    grid-template-columns:130px minmax(0,1fr);
    margin-top:42px;
    gap:25px;
    padding-top:0
  }
  .hero-visual {
    min-height:480px;
    border-left:0;
    border-top:1px solid var(--color-line)
  }
  .diagram-stage {
    min-height:370px
  }
  .hero-symbol-trigger {
    width:300px
  }
  .section-heading {
    grid-template-columns:150px 1fr
  }
  .principle-flow {
    grid-template-columns:repeat(2,1fr)
  }
  .principle:nth-child(2) {
    border-right:0
  }
  .principle:nth-child(-n+2) {
    border-bottom:1px solid var(--color-line)
  }
  .principle {
    min-height:290px
  }
  .principle h3 {
    margin-top:30px
  }
  .work-row {
    grid-template-columns:1fr;
    gap:25px
  }
  .work-info {
    padding:0
  }
  .work-info h3 {
    margin:20px 0 16px
  }
  .work-kind {
    margin-top:0
  }
  .work-graphic {
    min-height:365px
  }
  .contact-content {
    min-height:520px;
    flex-direction:column;
    gap:32px
  }
  .contact-signature {
    align-self:flex-start;
    flex-direction:row;
    align-items:center;
    gap:12px;
    text-align:left
  }
  .contact-signature img {
    width:56px;
    height:56px
  }
}
@media (max-width:650px) {
  :root {
    --space-gutter:22px;
    --header-offset:113px
  }
  .site-header {
    height:auto;
    min-height:76px;
    flex-wrap:wrap;
    gap:0 12px;
    padding:15px var(--space-gutter) 0
  }
  .brand-mark {
    width:36px;
    height:36px;
    margin-left:-7px
  }
  .site-nav {
    height:44px;
    order:3;
    width:100%;
    margin:10px 0 0;
    justify-content:space-between;
    border-top:1px solid var(--color-line)
  }
  .site-nav a {
    font-size:11px;
    min-height:44px;
    display:flex;
    align-items:center
  }
  .header-end {
    margin-left:auto;
    gap:2px
  }
  .brand {
    font-size:19px
  }
  .language-switch {
    gap:4px
  }
  .header-line {
    display:none
  }
  .hero-copy {
    padding:72px var(--space-gutter) 59px
  }
  .hero-eyebrow {
    font-size:9px
  }
  .hero h1 {
    font-size:clamp(41px,9.2vw,62px);
    margin-top:30px;
    white-space:normal
  }
  .hero h1 br {
    display:none
  }
  .hero h1 .headline-muted {
    display:block;
    margin-top:4px;
    font-size:1em
  }
  .hero-bottom {
    display:block;
    margin-top:48px
  }
  .section-number {
    margin-bottom:24px
  }
  .hero-description p {
    font-size:17px
  }
  .hero-description .muted {
    font-size:14px
  }
  .hero-visual {
    min-height:388px
  }
  .diagram-topline {
    padding:22px 20px 0;
    font-size:8px
  }
  .diagram-stage {
    min-height:310px
  }
  .hero-symbol-trigger {
    width:min(72%,275px)
  }
  .diagram-footer {
    padding:17px 20px;
    gap:12px;
    flex-wrap:wrap;
    font-size:8px
  }
  .request-selector {
    grid-template-columns:1fr;
    gap:10px;
    padding-block:24px 28px
  }
  .request-label {
    padding-top:0
  }
  .request-options {
    gap:16px
  }
  .request-question-link {
    font-size:clamp(18px,5vw,20px)
  }
  .section {
    padding:82px var(--space-gutter) 90px
  }
  .section-heading {
    display:block;
    margin-bottom:40px
  }
  .section-heading-left {
    margin-bottom:30px
  }
  .overline {
    font-size:9px
  }
  .section h2 {
    font-size:clamp(38px,9.4vw,58px);
    line-height:1.13;
    margin-bottom:20px
  }
  .section-intro {
    font-size:16px
  }
  .principle-flow {
    grid-template-columns:1fr
  }
  .principle {
    min-height:235px;
    padding:25px;
    border-right:0!important;
    border-bottom:1px solid var(--color-line)
  }
  .principle:last-child {
    border-bottom:0
  }
  .principle h3 {
    font-size:26px;
    margin:18px 0 8px
  }
  .principle p {
    max-width:460px;
    margin-bottom:22px
  }
  .principle-bottom {
    margin-top:auto
  }
  .below-note {
    font-size:12px;
    line-height:1.55
  }
  .what-section .section-heading {
    margin-bottom:42px
  }
  .work-row {
    padding:37px 0 42px
  }
  .work-info h3 {
    font-size:39px
  }
  .work-info p {
    font-size:14px;
    margin-bottom:22px
  }
  .work-graphic {
    min-height:328px
  }
  .graphic-header {
    font-size:8px;
    left:16px;
    right:16px;
    top:17px
  }
  .cycle-grid {
    left:13px;
    right:13px;
    top:74px;
    bottom:75px;
    gap:3px;
    grid-template-columns:repeat(3,minmax(0,1fr) 10px) minmax(0,1fr)
  }
  .cycle-step {
    height:127px;
    padding:10px 5px;
    border-radius:5px
  }
  .cycle-symbol {
    font-size:25px
  }
  .cycle-num {
    font-size:7px;
    right:5px;
    top:9px
  }
  .cycle-step strong {
    font-size:10px;
    word-break:break-word
  }
  .cycle-junction {
    font-size:14px
  }
  .feedback-line {
    left:19px;
    right:19px;
    bottom:29px;
    font-size:7px
  }
  .layers {
    left:12%;
    right:15%;
    top:72px
  }
  .layer {
    gap:10px;
    height:43px;
    padding:0 10px
  }
  .layer strong {
    font-size:13px
  }
  .layer:nth-child(2) {
    margin-left:12px;
    margin-right:-12px
  }
  .layer:nth-child(3) {
    margin-left:24px;
    margin-right:-24px
  }
  .layer:nth-child(4) {
    margin-left:12px;
    margin-right:-12px
  }
  .graphic-caption {
    font-size:8px;
    left:17px;
    bottom:14px
  }
  .project-preview {
    gap:12px;
    left:14px;
    right:14px;
    top:70px;
    bottom:56px
  }
  .project-icon {
    width:105px;
    height:auto
  }
  .project-info h4 {
    font-size:22px
  }
  .project-kicker {
    font-size:7px
  }
  .project-info p:last-child {
    font-size:12px;
    margin-top:10px
  }
  .project-footer {
    left:17px;
    right:17px;
    font-size:7px;
    gap:10px
  }
  .contact-content {
    padding:75px var(--space-gutter) 82px;
    min-height:450px
  }
  .contact-content h2 {
    font-size:clamp(38px,9.4vw,58px)
  }
  .contact-content p {
    font-size:16px
  }
  .contact-author {
    gap:16px
  }
  .contact-portrait {
    width:80px;
    height:80px
  }
  .site-footer {
    height:104px;
    flex-wrap:wrap;
    gap:8px;
    align-content:center;
    font-size:9px
  }
  .site-footer span:nth-child(2) {
    display:none
  }
}
@media (max-width:380px) {
  .hero h1 {
    font-size:39px
  }
  .cycle-grid {
    grid-template-columns:repeat(3,minmax(0,1fr) 8px) minmax(0,1fr)
  }
  .cycle-step strong {
    font-size:9px
  }
  .diagram-footer span {
    font-size:7px
  }
  .project-icon {
    width:85px;
    height:auto
  }
  .project-info h4 {
    font-size:19px
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}