/* Solved Construction website styles, v0.2
   Tokens follow the brand guide v1.0 (see docs/brand-reference.md).
   Editorial approach notes: docs/design-notes.md */

:root {
  /* Colour */
  --navy: #172B3A;
  --white: #F2F0EA;
  --graphite: #353B3F;
  --concrete: #B9BEC0;
  --stone: #DDD9CF;
  --amber: #D99A43;
  --navy-line: rgba(242, 240, 234, 0.16);
  --ink-line: rgba(23, 43, 58, 0.2);

  /* Type */
  --font-display: "Rufina", Georgia, serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --max-width: 1440px;
  --gutter: 24px;
  --margin: clamp(16px, 5vw, 80px);
  --section-space: clamp(88px, 12vw, 176px);
  --header-h: 76px;

  /* Motion (brand guide 8.4) */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-hover: 220ms;
  --t-ui: 350ms;
  --t-reveal: 650ms;
  --t-image: 950ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  background: var(--white);
  color: var(--graphite);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; color: var(--navy); font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--navy); color: var(--white);
}
.skip-link:focus { top: 16px; }

/* ---------- Grid ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--margin); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Structured dot grid (brand guide 5.1) */
.dot-grid {
  background-color: var(--white);
  background-image:
    radial-gradient(circle, rgba(23, 43, 58, 0.24) 1px, transparent 1.3px),
    linear-gradient(to right, rgba(23, 43, 58, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 43, 58, 0.05) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  background-position: -12px -12px, 0 0, 0 0;
}
.dot-grid-dark {
  background-color: var(--navy);
  background-image:
    radial-gradient(circle, rgba(242, 240, 234, 0.16) 1px, transparent 1.3px),
    linear-gradient(to right, rgba(242, 240, 234, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 240, 234, 0.04) 1px, transparent 1px);
}

/* ---------- Type ---------- */
h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.3;
}
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }

.section-marker {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--graphite); margin: 0 0 28px;
}
.section-marker span { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); }
.section-marker span::after { content: ""; width: 32px; height: 1px; background: var(--amber); }
.section-marker.light, .section-marker.light span,
.section-navy .section-marker, .section-navy .section-marker span { color: var(--white); }

.caption { font-size: 12px; line-height: 1.5; color: var(--graphite); margin: 12px 0 0; }
.fig {
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 11px; color: var(--navy); margin-right: 6px;
}

/* ---------- Buttons and links ---------- */
.button {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 22px; background: var(--navy); color: var(--white);
  font-size: 15px; font-weight: 500; text-decoration: none;
  border: 1px solid var(--navy);
}
.button::after {
  content: ""; width: 18px; height: 1px; background: var(--amber);
  transition: width var(--t-hover) var(--ease);
}
.button:hover::after { width: 30px; }

.text-link {
  font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--concrete); padding-bottom: 2px;
  transition: border-color var(--t-hover) var(--ease);
}
.text-link:hover { border-color: var(--navy); }

/* ---------- Header ----------
   Transparent over the hero; once the page scrolls it becomes a floating bar
   that inverts against whatever it sits over (navy on light sections, warm white on dark ones). */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0; pointer-events: none;
  transition: padding var(--t-ui) var(--ease);
}
.header-bar {
  --fg: var(--navy); --bg: rgba(242, 240, 234, 0); --cta-hover: var(--white);
  pointer-events: auto; position: relative;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-width); margin: 0 auto;
  height: var(--header-h); padding: 0 var(--margin);
  color: var(--fg); background-color: var(--bg);
  border: 1px solid transparent;
  transition: height var(--t-ui) var(--ease), padding var(--t-ui) var(--ease), max-width var(--t-ui) var(--ease),
              background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.site-header.is-floating { padding: 10px max(8px, calc(var(--margin) - 24px)) 0; }
.site-header.is-floating .header-bar {
  --fg: var(--white); --bg: var(--navy); --cta-hover: var(--navy);
  max-width: calc(var(--max-width) - 2 * var(--margin) + 48px);
  height: 60px; padding: 0 24px;
  border-color: rgba(242, 240, 234, 0.12);
  box-shadow: 0 14px 34px -16px rgba(23, 43, 58, 0.6);
}
.site-header.is-floating.on-dark .header-bar {
  --fg: var(--navy); --bg: var(--white); --cta-hover: var(--white);
  border-color: rgba(23, 43, 58, 0.1);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.55);
}

.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; overflow: hidden; }
.scroll-progress span {
  display: block; height: 100%; background: var(--amber);
  transform: scaleX(var(--progress, 0)); transform-origin: left;
}

/* Wordmark: SVG geometry from assets/logo, painted in currentColor */
.logo { display: inline-flex; color: inherit; text-decoration: none; }
.logo-mark {
  display: block; width: 132px; aspect-ratio: 211.5 / 63;
  background-color: currentColor;
  -webkit-mask: url("../assets/logo/SOLVED_Logo_Primary_v01.svg") no-repeat 0 0 / contain;
          mask: url("../assets/logo/SOLVED_Logo_Primary_v01.svg") no-repeat 0 0 / contain;
  transition: width var(--t-ui) var(--ease);
}
.is-floating .logo-mark { width: 116px; }

.site-nav ul { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  font-size: 15px; text-decoration: none; color: inherit; padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--t-hover) var(--ease);
}
.site-nav a:hover, .site-nav a.is-current { background-size: 100% 1px; }
.nav-num { font-size: 10px; vertical-align: 5px; margin-right: 5px; opacity: 0.65; letter-spacing: 0.04em; }
.site-nav .nav-cta {
  padding: 9px 16px; border: 1px solid currentColor; background: none;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.site-nav .nav-cta:hover { background: var(--fg); color: var(--cta-hover); }

/* Language switcher: EN / DA */
.site-nav .lang-switch { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; }
.site-nav .lang-switch a { padding: 6px 3px; background: none; opacity: 0.55; transition: opacity var(--t-hover) var(--ease); }
.site-nav .lang-switch a:hover { opacity: 1; }
.site-nav .lang-switch a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.site-nav .lang-switch span { opacity: 0.4; }

.nav-toggle {
  display: none; background: none; border: 1px solid currentColor; color: inherit;
  font-weight: 500; font-size: 14px; padding: 8px 14px; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--header-h) + clamp(16px, 3vw, 40px)); }
.hero.has-canvas { background-image: none; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero-inner, .plate-hero { position: relative; z-index: 1; }

.meta-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: 14px; border-bottom: 1px solid var(--concrete);
  margin-bottom: clamp(40px, 7vw, 96px);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(50px, 8.6vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .line > span { display: block; }
.hero-title .line:nth-child(2) { padding-left: 8.333%; } /* one column of offset */

.js .hero-title .line > span { transform: translateY(105%); transition: transform 1000ms var(--ease); }
.js .hero-title .line:nth-child(2) > span { transition-delay: 120ms; }
.js.is-loaded .hero-title .line > span { transform: none; }

.hero-sub { margin-top: clamp(32px, 4vw, 56px); }
.hero-lead { grid-column: 7 / span 5; margin: 0; }
.hero-actions { grid-column: 7 / span 5; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin: 32px 0 0; }
.js .hero-sub { opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ease) 450ms, transform 700ms var(--ease) 450ms; }
.js.is-loaded .hero-sub { opacity: 1; transform: none; }

/* ---------- Plates: full-bleed photo and video ---------- */
.plate-hero { margin-top: clamp(56px, 8vw, 112px); }
.plate-media { position: relative; overflow: hidden; background: var(--navy); }
/* Explicit heights (not aspect-ratio + min-height, which can force the plate wider than the viewport) */
.plate-hero .plate-media { height: clamp(560px, 42.86vw, 860px); }
.plate-media { --edge: max(var(--margin), calc((100% - var(--max-width)) / 2 + var(--margin))); }

/* ---------- Value map: a connected tree that overlaps the bottom of the hero video ----------
   Desktop: root node, horizontal bus, four branches dropping into columns.
   Below 900px: a vertical spine on the left with branches ticking off it. */
.value-map-wrap { position: relative; z-index: 2; margin-top: clamp(-150px, -9vw, -64px); }
.value-map {
  --line: var(--navy); --drop: 30px;
  background: var(--white);
  border: 1px solid var(--ink-line);
  box-shadow: 0 40px 70px -40px rgba(23, 43, 58, 0.45);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 44px) clamp(28px, 3.4vw, 48px);
}
.vm-root { position: relative; padding-bottom: var(--drop); margin: 0; }
.vm-root-label {
  display: inline-block; margin: 0;
  font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); background: var(--navy); padding: 9px 14px; line-height: 1.2;
}
/* Line from the root down to the bus */
.vm-root::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: var(--drop); background: var(--line);
  transform-origin: top;
}

.vm-branches {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter);
}
/* The bus: from the first branch to the last */
.vm-branches::before {
  content: ""; position: absolute; top: 0; left: 0; height: 1px; background: var(--line);
  right: calc((100% - 3 * var(--gutter)) / 4);
  transform-origin: left;
}
.vm-branch { position: relative; padding-top: var(--drop); padding-right: 8px; }
/* Each drop from the bus to its node */
.vm-branch::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--drop); background: var(--line);
  transform-origin: top;
}
.vm-index {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px -4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--navy);
}
/* Node at the end of each drop */
.vm-index::before { content: ""; width: 9px; height: 9px; background: var(--amber); flex: none; }
.vm-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.7vw, 42px); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--navy); margin-bottom: 12px;
}
.vm-branch > p { font-size: 15px; line-height: 1.5; margin: 0 0 16px; max-width: 22em; }
.vm-drivers { display: flex; flex-wrap: wrap; gap: 6px; }
.vm-drivers li {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy); background: var(--stone); padding: 5px 9px; line-height: 1.2;
}

/* Lines draw in when the plate is revealed, then the branches settle */
.js .vm-root::after, .js .vm-branch::before { transform: scaleY(0); transition: transform 450ms var(--ease); }
.js .vm-branches::before { transform: scaleX(0); transition: transform 700ms var(--ease) 250ms; }
.js .vm-branch > * { opacity: 0; transform: translateY(10px); transition: opacity 550ms var(--ease), transform 550ms var(--ease); }
.js [data-reveal-plate].is-visible .vm-root::after { transform: none; transition-delay: 100ms; }
.js [data-reveal-plate].is-visible .vm-branches::before { transform: none; }
.js [data-reveal-plate].is-visible .vm-branch::before { transform: none; transition-delay: 800ms; }
.js [data-reveal-plate].is-visible .vm-branch > * { opacity: 1; transform: none; }
.js [data-reveal-plate].is-visible .vm-branch:nth-child(1) > * { transition-delay: 900ms; }
.js [data-reveal-plate].is-visible .vm-branch:nth-child(2) > * { transition-delay: 980ms; }
.js [data-reveal-plate].is-visible .vm-branch:nth-child(3) > * { transition-delay: 1060ms; }
.js [data-reveal-plate].is-visible .vm-branch:nth-child(4) > * { transition-delay: 1140ms; }

@media (max-width: 900px) {
  .value-map { --drop: 22px; }
  .vm-branches { grid-template-columns: 1fr; row-gap: 0; padding-left: 28px; }
  /* Vertical spine replaces the bus */
  .vm-branches::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; transform-origin: top; }
  .js .vm-branches::before { transform: scaleY(0); }
  .vm-branch { padding: 22px 0 24px; border-bottom: 1px solid var(--ink-line); }
  .vm-branch:last-child { border-bottom: 0; padding-bottom: 0; }
  /* Tick from the spine to each node */
  .vm-branch::before { left: -28px; top: 29px; width: 24px; height: 1px; transform-origin: left; }
  .js .vm-branch::before { transform: scaleX(0); }
  .vm-index { margin-left: 0; }
  .vm-branch > p { max-width: 34em; }
  /* Stop the spine at the last tick */
  .vm-branch:last-child::after {
    content: ""; position: absolute; left: -29px; top: 30px; bottom: -1px; width: 3px; background: var(--white);
  }
}
.plate-video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.02); }

/* Plate opens from the content margins to full bleed as it enters the viewport */
.js [data-reveal-plate] .plate-media {
  clip-path: inset(0 var(--margin) 0 var(--margin));
  transition: clip-path var(--t-image) var(--ease);
}
.js [data-reveal-plate].is-visible .plate-media { clip-path: inset(0 0 0 0); }

.plate-overlay { position: absolute; inset: 0; pointer-events: none; }
.plate-columns {
  position: absolute; top: 0; bottom: 0; left: var(--edge); right: var(--edge);
  background: repeating-linear-gradient(to right, rgba(242, 240, 234, 0.14) 0 1px, transparent 1px calc(100% / 12));
  border-right: 1px solid rgba(242, 240, 234, 0.14);
}
.crop { position: absolute; width: 22px; height: 22px; border-color: var(--white); border-style: solid; border-width: 0; }
.crop-tl { top: 20px; left: 20px; border-top-width: 1px; border-left-width: 1px; }
.crop-tr { top: 20px; right: 20px; border-top-width: 1px; border-right-width: 1px; }
.crop-bl { bottom: 20px; left: 20px; border-bottom-width: 1px; border-left-width: 1px; }
.crop-br { bottom: 20px; right: 20px; border-bottom-width: 1px; border-right-width: 1px; }

.crosshair { position: absolute; left: var(--x); top: var(--y); }
.crosshair i { position: absolute; width: 28px; height: 28px; left: -14px; top: -14px; }
.crosshair i::before, .crosshair i::after { content: ""; position: absolute; background: var(--white); }
.crosshair i::before { left: 13.5px; top: 0; width: 1px; height: 28px; }
.crosshair i::after { top: 13.5px; left: 0; height: 1px; width: 28px; }
.crosshair em {
  position: absolute; left: 22px; top: -28px; white-space: nowrap;
  font-style: normal; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: rgba(23, 43, 58, 0.78); padding: 4px 8px;
}
.crosshair::after {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--amber);
}

.caption-bar {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font-size: 12px; color: var(--graphite);
  padding-top: 12px; padding-bottom: 12px;
}
.caption-bar .credit { margin-left: auto; color: var(--graphite); opacity: 0.8; }

.video-toggle {
  position: absolute; right: 20px; bottom: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid rgba(242, 240, 234, 0.4);
  background: rgba(23, 43, 58, 0.72); color: var(--white);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: background-color var(--t-hover) var(--ease);
}
.video-toggle:hover { background: var(--navy); }
.video-toggle-top { top: 20px; bottom: auto; right: 56px; }
.video-toggle-icon { width: 8px; height: 10px; position: relative; }
.video-toggle[data-state="playing"] .video-toggle-icon {
  border-left: 2px solid var(--white); border-right: 2px solid var(--white);
}
.video-toggle[data-state="paused"] .video-toggle-icon {
  width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--white);
}

/* ---------- Generic image frames ---------- */
.img-frame { position: relative; overflow: hidden; background: var(--stone); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88); }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.zoom img { transition: transform var(--t-image) var(--ease); }
.zoom:hover img { transform: scale(1.035); }

/* ---------- Sections ---------- */
.section { padding: var(--section-space) 0; }
.section-head { margin-bottom: clamp(48px, 6vw, 88px); }
.section-head .section-marker { grid-column: 1 / -1; }
.section-head h2 { grid-column: 1 / span 8; max-width: 16em; }

.section-navy { background-color: var(--navy); color: var(--white); }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy .caption { color: rgba(242, 240, 234, 0.7); }
.section-stone { background: var(--stone); }

/* ---------- Statement ---------- */
.statement .grid { align-items: start; }
.statement-text {
  grid-column: 1 / span 10;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.3vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0;
}
.statement-text mark {
  color: inherit; background: linear-gradient(var(--amber), var(--amber)) left 92% / 0 2px no-repeat;
  transition: background-size 1100ms var(--ease) 350ms;
}
.statement-text.is-visible mark { background-size: 100% 2px; }
.statement-cta { grid-column: 1 / span 5; margin-top: clamp(48px, 6vw, 96px); }
.statement-figure { grid-column: 7 / span 6; margin-top: clamp(48px, 6vw, 96px); }
.cta-kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite);
}
.cta-kicker::before { content: ""; width: 24px; height: 1px; background: var(--amber); }
.cta-line {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 54px); line-height: 1.06;
  letter-spacing: -0.01em; color: var(--navy); text-decoration: none;
  padding: 24px 0 28px; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--concrete);
}
.cta-line-text { transition: transform var(--t-ui) var(--ease); }
.cta-line:hover .cta-line-text { transform: translateX(8px); }
.cta-line .cta-arrow { margin-bottom: 0.38em; }
.cta-line:hover .cta-arrow { width: 0.95em; }
.ratio-2x1 { aspect-ratio: 2 / 1; }

/* ---------- 02 Services index ---------- */
.services { padding-top: 0; }
.index { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.index-list { grid-column: 1 / span 9; border-bottom: 1px solid var(--concrete); }
.index-row {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: baseline;
  padding: 30px 0 32px; border-top: 1px solid var(--concrete);
  position: relative; cursor: default;
}
.index-row::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--navy);
  transition: width var(--t-ui) var(--ease);
}
.index-num { grid-column: 1; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--graphite); transition: color var(--t-hover) var(--ease); }
.index-row h3 {
  grid-column: 2 / span 4; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.2vw, 34px); color: var(--navy); line-height: 1.15;
  transition: transform var(--t-ui) var(--ease);
}
.index-row p { grid-column: 6 / span 4; font-size: 15px; margin: 0; }
.index-row.is-active::before { width: 100%; }
.index-row.is-active h3 { transform: translateX(10px); }
.index-row.is-active .index-num { color: var(--amber); }

.index-preview { grid-column: 10 / span 3; position: relative; }
.index-preview > * { will-change: transform; }
.index-preview-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone);
  transform: translateY(var(--py, 0px)); transition: transform 500ms var(--ease);
}
.index-preview-caption { transform: translateY(var(--py, 0px)); transition: transform 500ms var(--ease); }
.index-preview-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88);
  opacity: 0; transform: scale(1.06);
  transition: opacity 450ms var(--ease), transform 900ms var(--ease);
}
.index-preview-frame img.is-active { opacity: 1; transform: scale(1); }

/* ---------- 03 Method: sticky diagram story ---------- */
.method-grid { align-items: start; }
.method-visual { grid-column: 1 / span 7; align-self: stretch; }
.method-sticky { position: sticky; top: calc(var(--header-h) + 32px); }
.diagram-head {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(242, 240, 234, 0.75);
  padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--navy-line);
}
.diagram-head b { color: var(--amber); font-weight: 600; }
.method-diagram { width: 100%; height: auto; display: block; overflow: visible; }

.method-steps { grid-column: 9 / span 4; }
.method-step {
  min-height: 64vh; display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--navy-line); padding: 40px 0;
  opacity: 0.32; transition: opacity var(--t-ui) var(--ease);
}
.method-step:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 24px; }
.method-step:last-child { min-height: 70vh; }
.method-step.is-active { opacity: 1; }
.no-js .method-step, html:not(.js) .method-step { opacity: 1; }
.step-num {
  font-family: var(--font-display); font-size: clamp(44px, 4.2vw, 64px); line-height: 1;
  color: var(--white); margin-bottom: 20px;
}
.method-step h3 { margin-bottom: 10px; }
.method-step p { color: rgba(242, 240, 234, 0.76); font-size: 16px; margin: 0; max-width: 26em; }

/* Diagram styling */
.method-diagram .d-label { font-family: var(--font-text); font-size: 10px; letter-spacing: 0.08em; fill: rgba(242, 240, 234, 0.7); }
.method-diagram .d-label.strong { fill: var(--white); font-weight: 600; }
.method-diagram .d-ctx { stroke: rgba(242, 240, 234, 0.3); stroke-width: 1; fill: none; }
.method-diagram .d-boundary { stroke: rgba(242, 240, 234, 0.8); stroke-width: 1.4; stroke-dasharray: 7 5; fill: none; }
.method-diagram .d-accent { fill: var(--amber); }
.method-diagram .d-setback { stroke: rgba(242, 240, 234, 0.45); stroke-dasharray: 2 4; fill: none; }
.method-diagram .d-zone { stroke: rgba(242, 240, 234, 0.4); }
.method-diagram .d-alt { fill: none; stroke: rgba(242, 240, 234, 0.7); stroke-width: 1.2; }
.method-diagram .alt-a { stroke-dasharray: 8 4; }
.method-diagram .alt-b { stroke-dasharray: 2 3; }
.method-diagram .alt-c { stroke-dasharray: 12 3 2 3; }
.method-diagram .d-selected { fill: rgba(242, 240, 234, 0.06); stroke: var(--white); stroke-width: 2; }
.method-diagram .d-dot { fill: none; stroke: rgba(242, 240, 234, 0.6); }
.method-diagram .d-dot.on { fill: var(--white); stroke: var(--white); }
.method-diagram .d-building { fill: rgba(242, 240, 234, 0.07); stroke: var(--white); stroke-width: 2; }
.method-diagram .d-grid line { stroke: rgba(242, 240, 234, 0.32); stroke-dasharray: 2 3; }
.method-diagram .d-docks rect { fill: var(--white); }
.method-diagram .d-route { fill: none; stroke: var(--white); stroke-width: 1.2; stroke-dasharray: 4 4; }
.method-diagram .d-arrow { fill: none; stroke: var(--white); stroke-width: 1.2; }
.method-diagram .d-dim { stroke: rgba(242, 240, 234, 0.6); }
.method-diagram .d-titleblock { fill: none; stroke: rgba(242, 240, 234, 0.6); }

/* Layers build up with each stage */
.method-diagram .layer { opacity: 0; transition: opacity 450ms var(--ease); }
.method-diagram .l1 { opacity: 1; }
.method-diagram:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .l2,
.method-diagram:is([data-step="3"], [data-step="4"]) .l3,
.method-diagram[data-step="4"] .l4,
.method-diagram:is([data-step="5"], [data-step="6"]) .l5,
.method-diagram[data-step="6"] .l6 { opacity: 1; }
.method-diagram[data-step="4"] .l3 { opacity: 0.35; }

/* ---------- Interlude ---------- */
.plate-full .plate-media { height: min(88vh, 940px); min-height: 520px; }
.interlude-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23, 43, 58, 0.88) 0%, rgba(23, 43, 58, 0.35) 55%, rgba(23, 43, 58, 0.12) 100%);
}
.interlude-copy { position: absolute; left: 0; right: 0; bottom: clamp(48px, 7vw, 104px); }
.interlude-title {
  color: var(--white); font-size: clamp(38px, 5.6vw, 84px); line-height: 1.04; max-width: 11em;
}

/* ---------- 04 Applications: building-type selector ---------- */
.applications-head { align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.applications-intro { grid-column: 1 / span 6; }
.applications-lead { grid-column: 8 / span 5; margin: 0; font-size: 17px; }

.selector {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: start;
}
.selector-nav { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 40px); }
.selector-count {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 20px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--graphite);
}
.selector-count span { font-family: var(--font-display); font-size: 64px; line-height: 0.9; letter-spacing: 0; color: var(--navy); }
.selector-tabs { display: flex; flex-direction: column; border-bottom: 1px solid var(--ink-line); }
.selector-tab {
  display: flex; align-items: baseline; gap: 16px; width: 100%; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--ink-line);
  padding: 18px 16px 18px 0; color: var(--graphite); cursor: pointer;
  transition: background-color var(--t-ui) var(--ease), color var(--t-hover) var(--ease), padding var(--t-ui) var(--ease);
}
.tab-letter { flex: none; width: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.tab-name { font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; }
.selector-tab:hover { color: var(--navy); }
.selector-tab[aria-selected="true"] { background: var(--navy); color: var(--white); padding-left: 18px; }
.selector-tab[aria-selected="true"] .tab-letter { color: var(--amber); }

.selector-panels { grid-column: 6 / span 7; }
.selector-panel[hidden] { display: none; }
.selector-panel:focus-visible { outline-offset: 6px; }
.panel-media { aspect-ratio: 16 / 10; }
.panel-letter {
  position: absolute; right: 0.06em; bottom: -0.2em;
  font-family: var(--font-display); font-size: clamp(140px, 16vw, 260px); line-height: 1;
  color: var(--white); opacity: 0.92; pointer-events: none;
}
.panel-tag {
  position: absolute; top: 16px; left: 16px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: rgba(23, 43, 58, 0.78); padding: 4px 8px;
}
.panel-body {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gutter);
  padding-top: 32px;
}
.panel-copy { grid-column: 1 / span 3; }
.panel-copy h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.1; margin-bottom: 12px; }
.panel-copy p { margin: 0; font-size: 16px; }
.panel-drivers { grid-column: 4 / span 4; }
.drivers-label { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.panel-drivers ol { border-bottom: 1px solid var(--ink-line); }
.panel-drivers li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--ink-line); font-size: 15.5px; color: var(--navy);
}
.panel-drivers li span { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--graphite); }

.selector-panel.is-entering .panel-media img { animation: panel-image 800ms var(--ease) both; }
.selector-panel.is-entering .panel-letter { animation: panel-letter 700ms var(--ease) both 120ms; }
.selector-panel.is-entering .panel-body { animation: panel-body 500ms var(--ease) both 100ms; }
@keyframes panel-image { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes panel-letter { from { opacity: 0; transform: translateY(24%); } to { opacity: 0.92; transform: none; } }
@keyframes panel-body { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 05 About ---------- */
.about-top { align-items: end; }
.about-head { grid-column: 1 / span 6; }
.about-copy { grid-column: 8 / span 5; }
.about-copy p { font-size: 18px; }
.about-copy p:last-child { margin: 0; }

.principles {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(64px, 8vw, 112px); border-top: 1px solid var(--navy);
}
.principles li { padding: 22px 22px 8px 0; }
.principles li + li { padding-left: 22px; border-left: 1px solid var(--ink-line); }
.p-num { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 40px; }
.principles h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; margin-bottom: 12px; }
.principles p { font-size: 14.5px; margin: 0; }

/* ---------- 06 Contact ---------- */
.contact-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--font-display); font-size: clamp(46px, 8.4vw, 132px); line-height: 1;
  letter-spacing: -0.02em; color: var(--white); text-decoration: none;
  padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--navy-line);
}
.contact-cta-text { transition: transform var(--t-ui) var(--ease); }
.contact-cta-arrow, .cta-arrow {
  position: relative; flex: none; width: 0.7em; height: 2px; background: var(--amber);
  transition: width var(--t-ui) var(--ease);
}
.contact-cta-arrow::after, .cta-arrow::after {
  content: ""; position: absolute; right: 0; top: -7px; width: 14px; height: 14px;
  border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); transform: rotate(45deg);
  transform-origin: center; margin-right: 1px;
}
.contact-cta:hover .contact-cta-text { transform: translateX(10px); }
.contact-cta:hover .contact-cta-arrow { width: 0.95em; }

.contact-foot { margin-top: clamp(32px, 4vw, 56px); row-gap: 32px; }
.contact-lead { grid-column: 1 / span 6; color: rgba(242, 240, 234, 0.82); margin: 0; }
.contact-details { grid-column: 8 / span 5; }
.contact-label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 240, 234, 0.7); margin: 0 0 6px; }
.contact-email {
  font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); color: var(--white);
  text-decoration: none; border-bottom: 1px solid var(--amber);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(242, 240, 234, 0.7); border-top: 1px solid var(--navy-line); }
.footer-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
  padding: clamp(48px, 6vw, 80px) 0;
}
.footer-line { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.1; color: var(--white); margin: 0; }
.footer-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 48px; align-content: start; }
.footer-nav a { color: var(--white); text-decoration: none; font-size: 15px; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 24px 0 32px; border-top: 1px solid var(--navy-line);
}
.logo-footer { color: var(--white); }
.logo-footer .logo-mark { width: 120px; }
.footer-meta { font-size: 12px; margin: 0; }
.grid-toggle {
  background: none; border: 0; padding: 0; color: rgba(242, 240, 234, 0.85); cursor: pointer;
  font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
}
.grid-toggle kbd { font-family: var(--font-text); font-size: 10px; border: 1px solid var(--navy-line); padding: 0 4px; margin-left: 4px; }

/* ---------- Grid overlay (press G) ---------- */
.grid-overlay { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none; }
.show-grid .grid-overlay { display: block; }
.grid-overlay .grid { height: 100%; }
.grid-overlay span { background: rgba(217, 154, 67, 0.07); border-left: 1px solid rgba(217, 154, 67, 0.35); border-right: 1px solid rgba(217, 154, 67, 0.35); }

/* ---------- Scroll reveals ---------- */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal .img-frame { clip-path: inset(10% 0 0 0); transition: clip-path var(--t-image) var(--ease); }
.js .reveal.is-visible .img-frame { clip-path: inset(0 0 0 0); }

/* ---------- Tablet: 8 columns ---------- */
@media (max-width: 1024px) {
  .grid, .index, .selector { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid-overlay span:nth-child(n + 9) { display: none; }

  .hero-lead, .hero-actions { grid-column: 3 / -1; }
  .hero-title .line:nth-child(2) { padding-left: 0; }
  .plate-hero .plate-media { height: max(460px, 62vw); }

  .statement-text { grid-column: 1 / -1; }
  .statement-cta { grid-column: 1 / span 5; }
  .statement-figure { grid-column: 1 / -1; margin-top: 56px; }
  .section-head h2 { grid-column: 1 / -1; }

  .index-list { grid-column: 1 / -1; }
  .index-preview { display: none; }
  .index-row h3 { grid-column: 2 / span 4; }
  .index-row p { grid-column: 6 / span 4; }

  .method-visual {
    grid-column: 1 / -1; position: sticky; top: var(--header-h); z-index: 2;
    background: var(--navy); padding: 12px 0 8px; align-self: start;
  }
  .method-sticky { position: static; }
  .method-diagram { max-height: 38vh; }
  .method-visual .caption { display: none; }
  .method-steps { grid-column: 1 / -1; }
  .method-step, .method-step:first-child { min-height: 52vh; justify-content: center; }

  .applications-intro, .applications-lead { grid-column: 1 / -1; }
  .applications-lead { margin-top: 24px; }
  .selector-nav { grid-column: 1 / -1; position: static; margin-bottom: 24px; }
  .selector-count { display: none; }
  .selector-tabs {
    flex-direction: row; gap: 8px; overflow-x: auto; border-bottom: 0;
    scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin;
  }
  .selector-tab {
    flex: none; width: auto; scroll-snap-align: start;
    border: 1px solid var(--ink-line); padding: 10px 16px 10px 12px; gap: 10px;
  }
  .selector-tab[aria-selected="true"] { padding-left: 12px; border-color: var(--navy); }
  .tab-name { font-size: 18px; white-space: nowrap; }
  .selector-panels { grid-column: 1 / -1; }

  .about-head, .about-copy { grid-column: 1 / -1; }
  .about-copy { margin-top: 32px; }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .principles li:nth-child(4) { padding-left: 0; border-left: 0; }

  .contact-lead, .contact-details { grid-column: 1 / -1; }
}

/* ---------- Mobile: 4 columns ---------- */
@media (max-width: 720px) {
  :root { --header-h: 64px; }
  body { font-size: 16px; }
  .grid, .index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-overlay span:nth-child(n + 5) { display: none; }

  .meta-row .meta-coord { display: none; }
  .hero-lead, .hero-actions { grid-column: 1 / -1; }
  .plate-hero .plate-media { height: 118vw; }
  .plate-columns { background-image: repeating-linear-gradient(to right, rgba(242, 240, 234, 0.14) 0 1px, transparent 1px calc(100% / 4)); }
  .crosshair { --x: 50% !important; }
  .caption-bar .credit { margin-left: 0; }

  .statement-cta { grid-column: 1 / -1; }
  .statement-figure { margin-top: 40px; }
  .ratio-2x1 { aspect-ratio: 3 / 2; }

  .value-map-wrap { padding: 0 12px; }
  .video-toggle-top { right: 16px; top: 16px; }
  .crosshair { --y: 26% !important; }
  .crosshair em { display: none; }

  .panel-body { grid-template-columns: 1fr; row-gap: 24px; padding-top: 24px; }
  .panel-copy, .panel-drivers { grid-column: 1 / -1; }
  .panel-letter { font-size: 140px; }

  .index-row { grid-template-columns: 40px 1fr; row-gap: 10px; padding: 24px 0; }
  .index-row h3 { grid-column: 2; }
  .index-row p { grid-column: 2; }

  .method-diagram { max-height: 34vh; }
  .diagram-head { margin-bottom: 8px; padding-bottom: 8px; }
  .method-step, .method-step:first-child, .method-step:last-child { min-height: 48vh; }

  .principles { grid-template-columns: 1fr; }
  .principles li, .principles li + li { padding: 20px 0 4px; border-left: 0; border-bottom: 1px solid var(--ink-line); }
  .p-num { margin-bottom: 14px; }

  .footer-nav { grid-template-columns: 1fr 1fr; }

  .logo-mark { width: 112px; }
  .is-floating .logo-mark { width: 100px; }
  .site-header.is-floating { padding: 8px 8px 0; }
  .site-header.is-floating .header-bar { height: 56px; padding: 0 16px; }
}

/* ---------- Compact navigation (tablet and mobile) ---------- */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--white); color: var(--navy); border: 1px solid var(--concrete);
    box-shadow: 0 18px 40px -20px rgba(23, 43, 58, 0.5);
    padding: 8px 20px 20px; display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--stone); background: none; }
  .site-nav .nav-cta { margin-top: 16px; text-align: center; border: 1px solid var(--navy); }
  .site-nav .nav-cta:hover { background: var(--navy); color: var(--white); }
  .site-nav .lang-switch { padding: 10px 0; border-bottom: 1px solid var(--stone); font-size: 13px; }
  .site-nav .lang-switch a { display: inline-block; padding: 4px 6px; border: 0; }
  .site-nav .lang-switch a:first-child { padding-left: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero-sub, .js .vm-branch > * { opacity: 1; transform: none; }
  .js .vm-root::after, .js .vm-branches::before, .js .vm-branch::before { transform: none; }
  .js .hero-title .line > span { transform: none; }
  .js .reveal .img-frame, .js [data-reveal-plate] .plate-media { clip-path: none; }
  .statement-text mark { background-size: 100% 2px; }
}