@font-face {
  font-family: "Inter Local";
  src: url("/fonts/inter-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond Local";
  src: url("/fonts/eb-garamond-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

/* ElevenLabs DESIGN.md foundation tokens */
:root {
  --palette-primary: #292524;
  --palette-primary-active: #0c0a09;
  --palette-body: #4e4e4e;
  --palette-muted: #777169;
  --palette-muted-soft: #a8a29e;
  --palette-hairline: #e7e5e4;
  --palette-hairline-soft: #f0efed;
  --palette-hairline-strong: #d6d3d1;
  --palette-canvas: #f5f5f5;
  --palette-canvas-soft: #fafafa;
  --palette-surface: #ffffff;
  --palette-surface-strong: #f0efed;
  --palette-dark: #0c0a09;
  --palette-dark-elevated: #1c1917;
  --palette-on-dark: #ffffff;
  --palette-gradient-mint: #a7e5d3;
  --palette-gradient-peach: #f4c5a8;
  --palette-gradient-lavender: #c8b8e0;
  --palette-gradient-sky: #a8c8e8;
  --palette-gradient-rose: #e8b8c4;
  --palette-error: #dc2626;
  --palette-success: #16a34a;

  --font-display: "EB Garamond Local", "Songti SC", "STSong", "Times New Roman", serif;
  --font-body: "Inter Local", "PingFang SC", "Microsoft YaHei", sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --type-caption: 0.75rem;
  --type-body-sm: 0.9375rem;
  --type-body: 1rem;
  --type-lead: 1.125rem;
  --type-title: 1.25rem;
  --type-display-sm: 1.5rem;
  --type-display-md: clamp(2rem, 3.4vw, 2.75rem);
  --type-display-lg: clamp(2.35rem, 3.9vw, 3.25rem);
  --type-display-mega: clamp(3.1rem, 6.2vw, 5rem);
  --line-compact: 1;
  --line-display: 1.05;
  --line-heading: 1.13;
  --line-body: 1.6;
  --tracking-display: -0.03em;
  --tracking-body: 0.01em;
  --tracking-label: 0.08em;

  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-base: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  --space-3xl: 4rem;
  --space-section: 6rem;
  --space-hero: 8rem;
  --space-page: clamp(var(--space-base), 4vw, var(--space-xxl));

  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-xxl: 1.5rem;
  --radius-pill: 9999px;
  --border-thin: 1px;
  --shadow-card: 0 0.25rem 1rem color-mix(in srgb, var(--palette-dark) 4%, transparent);
  --shadow-dialog: 0 1.5rem 5rem color-mix(in srgb, var(--palette-dark) 24%, transparent);
  --blur-orb: 3.5rem;
  --duration-fast: 140ms;
  --duration-medium: 280ms;
  --duration-slow: 680ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --z-nav: 20;
  --z-dialog: 100;
  --content-max: 75rem;
  --header-height: 4rem;

  /* Semantic tokens consumed by components */
  --color-background: var(--palette-canvas);
  --color-layer-soft: var(--palette-canvas-soft);
  --color-layer-card: var(--palette-surface);
  --color-layer-strong: var(--palette-surface-strong);
  --color-text-primary: var(--palette-primary-active);
  --color-text-body: var(--palette-body);
  --color-text-muted: var(--palette-muted);
  --color-text-disabled: var(--palette-muted-soft);
  --color-border-subtle: var(--palette-hairline);
  --color-border-soft: var(--palette-hairline-soft);
  --color-border-strong: var(--palette-hairline-strong);
  --color-primary: var(--palette-primary);
  --color-primary-active: var(--palette-primary-active);
  --color-on-primary: var(--palette-on-dark);
  --color-dark: var(--palette-dark);
  --color-dark-elevated: var(--palette-dark-elevated);
  --color-on-dark: var(--palette-on-dark);
  --color-on-dark-soft: var(--palette-muted-soft);
  --color-focus: var(--palette-primary-active);
  --color-error: var(--palette-error);
  --color-success: var(--palette-success);
  --color-gradient-mint: var(--palette-gradient-mint);
  --color-gradient-peach: var(--palette-gradient-peach);
  --color-gradient-lavender: var(--palette-gradient-lavender);
  --color-gradient-sky: var(--palette-gradient-sky);
  --color-gradient-rose: var(--palette-gradient-rose);

  /* Component aliases */
  --card-background: var(--color-layer-card);
  --card-border: var(--color-border-subtle);
  --badge-background: var(--color-layer-strong);
  --button-primary-background: var(--color-primary);
  --button-primary-text: var(--color-on-primary);
  --button-outline-border: var(--color-border-strong);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-body);
  letter-spacing: var(--tracking-body);
  font-kerning: normal;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-block: 0; }

.skip-link {
  position: fixed;
  top: var(--space-base);
  left: var(--space-base);
  padding: var(--space-sm) var(--space-base);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: translateY(-200%);
  z-index: var(--z-dialog);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: calc(var(--border-thin) * 2) solid var(--color-focus); outline-offset: var(--space-xxs); }

.scroll-progress { position: fixed; inset: 0 0 auto; height: var(--space-xxs); z-index: calc(var(--z-nav) + 1); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--color-primary); transform: scaleX(0); transform-origin: left; }

.site-header {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-height);
  padding-inline: var(--space-page);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  background: var(--color-background);
  z-index: var(--z-nav);
}
.wordmark, .header-contact, .primary-nav a {
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-decoration: none;
}
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); justify-self: start; }
.wordmark-mark {
  display: grid;
  width: var(--space-xl);
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--badge-background);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}
.primary-nav { display: flex; gap: clamp(var(--space-lg), 3vw, var(--space-xxl)); }
.primary-nav a { transition: opacity var(--duration-fast) var(--ease-standard); }
.primary-nav a:hover { opacity: 0.55; }
.header-contact {
  justify-self: end;
  min-height: 2.5rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--button-primary-background);
  color: var(--button-primary-text);
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-out);
}
.header-contact:hover { background: var(--color-primary-active); transform: translateY(calc(var(--space-xxs) * -0.5)); }

.hero, .story, .work-section, .life-section, .contact-section {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--space-page);
}
.hero { overflow: clip; padding-top: var(--space-section); padding-bottom: 0; }
.hero-copy {
  position: relative;
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  isolation: isolate;
}
.hero-copy::before, .hero-copy::after {
  position: absolute;
  border-radius: var(--radius-pill);
  filter: blur(var(--blur-orb));
  content: "";
  opacity: 0.72;
  pointer-events: none;
  z-index: -1;
}
.hero-copy::before {
  width: 22rem;
  height: 16rem;
  top: -2rem;
  left: 8%;
  background: radial-gradient(circle, var(--color-gradient-mint), transparent 70%);
}
.hero-copy::after {
  width: 24rem;
  height: 18rem;
  right: 3%;
  bottom: -1rem;
  background: radial-gradient(circle, var(--color-gradient-lavender), transparent 72%);
}
.eyebrow, .section-index, .case-meta, .product > p:first-of-type, .map-label, .product-story-label {
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.eyebrow {
  display: inline-flex;
  margin-bottom: var(--space-xl);
  padding: var(--space-xxs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--badge-background);
  color: var(--color-text-body);
}
.hero h1, .section-heading h2, .method-intro h2, .life-copy h2, .contact-section h2, .statement-grid h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--line-display);
  letter-spacing: var(--tracking-display);
}
.hero h1 { font-size: var(--type-display-mega); }
.hero h1 span { display: block; }
.hero-lead { max-width: 43rem; margin: var(--space-xl) auto 0; color: var(--color-text-body); font-size: var(--type-lead); }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.button, .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  line-height: var(--line-compact);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-standard);
}
.button-primary { border: var(--border-thin) solid var(--button-primary-background); background: var(--button-primary-background); color: var(--button-primary-text); }
.button-primary:hover { background: var(--color-primary-active); transform: translateY(calc(var(--space-xxs) * -0.5)); }
.text-link { border: var(--border-thin) solid var(--button-outline-border); background: transparent; }
.text-link:hover { background: var(--color-layer-card); transform: translateY(calc(var(--space-xxs) * -0.5)); }

.system-map {
  position: relative;
  min-height: 31rem;
  margin-top: var(--space-section);
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-xxl);
  background: var(--color-layer-soft);
  isolation: isolate;
}
.system-map::before, .system-map::after {
  position: absolute;
  width: 24rem;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  filter: blur(var(--blur-orb));
  content: "";
  opacity: 0.78;
  pointer-events: none;
  z-index: -1;
}
.system-map::before { left: 10%; bottom: -12rem; background: radial-gradient(circle, var(--color-gradient-peach), transparent 70%); }
.system-map::after { right: 6%; top: -12rem; background: radial-gradient(circle, var(--color-gradient-sky), transparent 70%); }
.map-grid { display: none; }
.map-label { position: absolute; top: var(--space-lg); left: var(--space-lg); color: var(--color-text-muted); }
.map-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--card-background) 91%, transparent);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--space-xs));
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  z-index: 2;
}
.map-node::before { width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-primary); content: ""; }
.map-node br { display: none; }
.map-node small { font-size: var(--type-caption); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.map-node small::before { content: "/ "; }
.map-node-1 { top: 36%; left: 16%; }
.map-node-2 { top: 20%; left: 44%; }
.map-node-3 { top: 72%; left: 29%; }
.map-node-4 { top: 34%; left: 76%; }
.map-node-5 { top: 76%; left: 82%; }
.map-viz { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; z-index: 0; }
.map-viz:active { cursor: grabbing; }
.system-map.viz-fallback .map-viz { background: repeating-radial-gradient(ellipse at center, transparent 0 0.9rem, color-mix(in srgb, var(--color-primary) 18%, transparent) 0.95rem 1rem); }
.map-core {
  position: absolute;
  left: 50%;
  top: 56%;
  display: grid;
  min-width: 8.5rem;
  place-items: center;
  gap: var(--space-xxs);
  padding: var(--space-sm) var(--space-base) var(--space-base);
  border-radius: var(--radius-lg);
  background: var(--color-dark);
  color: var(--color-on-dark);
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.35;
  z-index: 3;
}
.map-core span { font-family: var(--font-display); font-size: var(--type-title); font-weight: var(--weight-light); }
.map-core small { display: block; max-width: 7rem; color: var(--color-on-dark-soft); font-size: var(--type-caption); line-height: 1.5; }
.map-legend { position: absolute; right: var(--space-lg); bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-xs); color: var(--color-text-muted); font-size: var(--type-caption); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); }
.map-legend span { width: var(--space-xl); border-top: var(--border-thin) solid var(--color-text-muted); }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: var(--space-lg) 0 0;
  overflow: hidden;
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-xl);
  background: var(--card-background);
}
.metrics div { padding: var(--space-lg); border-right: var(--border-thin) solid var(--color-border-subtle); }
.metrics div:last-child { border-right: 0; }
.metrics dt { font-family: var(--font-display); font-size: var(--type-display-md); font-weight: var(--weight-light); line-height: 1; }
.metrics dt small { font-family: var(--font-body); font-size: var(--type-body); }
.metrics dd { margin: var(--space-xs) 0 0; color: var(--color-text-muted); font-size: var(--type-body-sm); }

.statement-section { padding-top: var(--space-3xl); padding-bottom: var(--space-section); }
.section-index { color: var(--color-text-muted); }
.statement-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-xxl); margin-top: var(--space-xxl); align-items: end; }
.statement-grid h2 { font-size: var(--type-display-lg); }
.statement-copy { color: var(--color-text-body); font-size: var(--type-lead); }
.statement-route { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--border-thin) solid var(--color-border-strong); color: var(--color-text-primary); font-size: var(--type-body-sm); font-weight: var(--weight-medium); }
.statement-route span { padding-inline: var(--space-xxs); color: var(--color-text-muted); }

.work-section { padding-block: var(--space-section); }
.section-heading { display: grid; grid-template-columns: 0.7fr 1.6fr 0.7fr; gap: var(--space-lg); align-items: end; margin-bottom: var(--space-xxl); }
.section-heading h2, .method-intro h2, .life-copy h2, .contact-section h2 { font-size: var(--type-display-lg); }
.section-heading > p:last-child { max-width: 24rem; color: var(--color-text-muted); }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-base); }
.case {
  display: flex;
  min-height: 31rem;
  flex-direction: column;
  padding: var(--space-xl);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-xl);
  background: var(--card-background);
  transition: transform var(--duration-medium) var(--ease-out), box-shadow var(--duration-medium) var(--ease-standard);
}
.case:hover { box-shadow: var(--shadow-card); transform: translateY(calc(var(--space-xxs) * -1)); }
.case-number { align-self: flex-start; padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill); background: var(--badge-background); font-size: var(--type-caption); font-weight: var(--weight-semibold); }
.case-main { margin-top: var(--space-xxl); }
.case-meta { margin-bottom: var(--space-sm); color: var(--color-text-muted); }
.case-main h3 { max-width: 24ch; font-family: var(--font-display); font-size: clamp(1.75rem, 2.1vw, 2rem); font-weight: var(--weight-light); line-height: 1.12; letter-spacing: var(--tracking-display); }
.case-main > p:not(.case-meta) { max-width: 48rem; margin-top: var(--space-lg); color: var(--color-text-body); }
.case-proof { display: grid; gap: 0; margin: auto 0 0; padding: var(--space-xl) 0 0; list-style: none; }
.case-proof li { display: flex; justify-content: space-between; gap: var(--space-base); padding-block: var(--space-sm); border-top: var(--border-thin) solid var(--color-border-subtle); }
.case-proof strong { font-size: var(--type-title); font-weight: var(--weight-medium); }
.case-proof span { text-align: right; color: var(--color-text-muted); font-size: var(--type-body-sm); }
.case-figures { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.case-figures span { padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill); background: var(--badge-background); color: var(--color-text-body); font-size: var(--type-caption); }
.case-image {
  position: relative;
  min-height: 13rem;
  margin-top: auto;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--color-layer-strong);
  cursor: zoom-in;
}
.case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.case-image:hover img { transform: scale(1.035); }
.case-image span { position: absolute; right: var(--space-sm); bottom: var(--space-sm); padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-layer-card); font-size: var(--type-caption); }

.method-section {
  position: relative;
  display: grid;
  width: min(calc(100% - (var(--space-base) * 2)), var(--content-max));
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xxl);
  margin: var(--space-section) auto;
  overflow: hidden;
  padding: var(--space-xxl);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-xxl);
  background: var(--color-layer-soft);
  isolation: isolate;
}
.method-section::before {
  position: absolute;
  width: 28rem;
  aspect-ratio: 1;
  left: -12rem;
  bottom: -16rem;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--color-gradient-rose), transparent 70%);
  filter: blur(var(--blur-orb));
  content: "";
  opacity: 0.64;
  z-index: -1;
}
.method-intro { position: sticky; top: calc(var(--header-height) + var(--space-xl)); align-self: start; }
.method-intro h2 { margin-top: var(--space-xl); font-size: clamp(2.25rem, 3.1vw, 2.75rem); }
.method-intro > p:last-child { max-width: 30rem; margin-top: var(--space-lg); color: var(--color-text-body); font-size: var(--type-lead); }
.method-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.method-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-base); padding: var(--space-lg); border: var(--border-thin) solid var(--card-border); border-radius: var(--radius-xl); background: var(--card-background); }
.method-list > li > span { display: grid; width: var(--space-xl); height: var(--space-xl); place-items: center; border-radius: var(--radius-pill); background: var(--badge-background); font-size: var(--type-caption); font-weight: var(--weight-semibold); }
.method-list h3 { font-size: var(--type-title); font-weight: var(--weight-medium); line-height: 1.35; }
.method-list p { margin-top: var(--space-xs); color: var(--color-text-muted); }

.section-heading-light { color: var(--color-on-dark); }
.section-heading-light .section-index, .section-heading-light > p:last-child { color: var(--color-on-dark-soft); }
.products-section {
  --product-section-border: color-mix(in srgb, var(--color-on-dark) 17%, transparent);
  --product-section-muted: color-mix(in srgb, var(--color-on-dark) 69%, transparent);
  padding: var(--space-section) var(--space-page);
  background: var(--color-dark);
  color: var(--color-on-dark);
}
.products-section > * { width: min(100%, var(--content-max)); margin-inline: auto; }
.products-section .section-heading { display: block; }
.products-section .section-heading h2 { max-width: 16ch; margin-top: var(--space-lg); }
.product-story { display: block; max-width: none; margin-inline: auto; padding-bottom: var(--space-xxl); }
.product-story-label { margin-bottom: var(--space-base); color: var(--color-on-dark-soft); }
.product-story-copy { max-width: 56rem; color: var(--product-section-muted); font-size: var(--type-lead); line-height: 1.72; }
.product-story-copy p + p { margin-top: var(--space-lg); }
.product-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-base); }
.product { min-height: 23rem; padding: var(--space-xl); border: var(--border-thin) solid var(--product-section-border); border-radius: var(--radius-xl); background: var(--color-dark-elevated); }
.product-mark { display: grid; width: var(--space-xxl); aspect-ratio: 1; place-items: center; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-on-dark) 10%, transparent); font-size: var(--type-title); }
.product > p:first-of-type { margin-top: var(--space-section); color: var(--color-on-dark-soft); }
.product h3 { margin-top: var(--space-xs); font-family: var(--font-display); font-size: var(--type-display-md); font-weight: var(--weight-light); }
.product > p:last-child { max-width: 32rem; margin-top: var(--space-lg); color: var(--product-section-muted); }

.life-section { padding-block: var(--space-section); }
.life-copy { display: grid; grid-template-columns: 0.65fr 1.45fr 0.9fr; gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xxl); }
.life-copy h2 { grid-column: 2; }
.life-copy > p:last-child { grid-column: 3; color: var(--color-text-muted); }
.photo-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 4.4rem); gap: var(--space-base); }
.photo { position: relative; overflow: hidden; border: 0; border-radius: var(--radius-xl); padding: 0; background: var(--color-layer-strong); cursor: zoom-in; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-medium) var(--ease-standard); }
.photo span { position: absolute; left: var(--space-sm); bottom: var(--space-sm); padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-layer-card); font-size: var(--type-caption); }
.photo:hover img { transform: scale(1.025); filter: saturate(1.04); }
.photo-portrait { grid-column: 1 / 5; grid-row: 1 / 8; }
.photo-event { grid-column: 1 / 5; grid-row: 8 / 13; }
.photo-wide { grid-column: 5 / 10; grid-row: 1 / 5; }
.photo-square { grid-column: 10 / 13; grid-row: 1 / 5; }
.photo-tall { grid-column: 5 / 8; grid-row: 5 / 13; }
.photo-art { grid-column: 8 / 13; grid-row: 5 / 9; }
.photo-trip { grid-column: 8 / 13; grid-row: 9 / 13; }
.community-strip { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.community-strip span { padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-pill); background: var(--badge-background); color: var(--color-text-body); font-size: var(--type-caption); }

.contact-section {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-xxl);
  margin-bottom: var(--space-section);
  padding: var(--space-xxl);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-xxl);
  background: var(--card-background);
}
.contact-section h2 { margin-top: var(--space-xl); }
.contact-links { align-self: end; }
.contact-links a { display: grid; grid-template-columns: 7rem 1fr auto; gap: var(--space-base); padding-block: var(--space-base); border-top: var(--border-thin) solid var(--color-border-subtle); text-decoration: none; font-size: var(--type-lead); }
.contact-links a:hover { opacity: 0.58; }
.contact-links a span { color: var(--color-text-muted); font-size: var(--type-body-sm); }
.contact-links a b { font-weight: var(--weight-regular); }
.contact-links p { margin-top: var(--space-lg); color: var(--color-text-muted); font-size: var(--type-body-sm); }

.site-footer { display: flex; justify-content: space-between; gap: var(--space-base); padding: var(--space-3xl) var(--space-page); border-top: var(--border-thin) solid var(--color-border-subtle); color: var(--color-text-body); font-size: var(--type-body-sm); }
.site-footer a { text-underline-offset: var(--space-xxs); }

.lightbox { width: min(92vw, var(--content-max)); max-height: 92vh; border: var(--border-thin) solid var(--color-border-subtle); border-radius: var(--radius-xxl); padding: var(--space-lg); background: var(--color-layer-card); color: var(--color-text-primary); box-shadow: var(--shadow-dialog); z-index: var(--z-dialog); }
.lightbox::backdrop { background: color-mix(in srgb, var(--color-dark) 82%, transparent); }
.lightbox img { width: 100%; max-height: 76vh; border-radius: var(--radius-xl); object-fit: contain; }
.lightbox p { margin-top: var(--space-sm); text-align: center; color: var(--color-text-body); font-size: var(--type-body-sm); }
.lightbox-close { display: block; min-height: 2.5rem; margin: 0 0 var(--space-sm) auto; border: var(--border-thin) solid var(--button-outline-border); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-base); background: transparent; cursor: pointer; }

.reveal { opacity: 0; transform: translateY(var(--space-lg)); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 64rem) {
  :root { --type-display-mega: clamp(3rem, 7vw, 4rem); }
  .statement-grid, .method-section, .contact-section { grid-template-columns: 1fr; }
  .statement-copy { max-width: 42rem; margin-left: auto; }
  .section-heading { grid-template-columns: 0.5fr 1.5fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .method-intro { position: static; }
  .life-copy { grid-template-columns: 0.45fr 1.55fr; }
  .life-copy > p:last-child { grid-column: 2; }
  .contact-links { width: min(100%, 44rem); margin-left: auto; }
}

@media (max-width: 48rem) {
  :root { --space-section: 4rem; --type-display-mega: clamp(2.75rem, 11vw, 3.5rem); }
  .site-header { grid-template-columns: 1fr auto; }
  .primary-nav { display: none; }
  .hero { padding-block: var(--space-3xl); }
  .hero-actions { flex-wrap: wrap; }
  .system-map { min-height: 28rem; margin-top: var(--space-3xl); }
  .map-node { padding: var(--space-xs); font-size: var(--type-body-sm); }
  .map-core { width: 8rem; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics div:nth-child(2) { border-right: 0; }
  .metrics div:nth-child(n + 3) { border-top: var(--border-thin) solid var(--color-border-subtle); }
  .section-heading, .statement-grid, .life-copy { display: block; }
  .section-heading h2, .statement-grid h2, .life-copy h2 { margin-top: var(--space-lg); }
  .section-heading > p:last-child, .life-copy > p:last-child { margin-top: var(--space-base); }
  .case-grid { grid-template-columns: 1fr; }
  .case { min-height: auto; }
  .case-proof { margin-top: var(--space-xl); }
  .product-pair, .product-story { grid-template-columns: 1fr; }
  .product-story { gap: var(--space-base); }
  .product { min-height: 20rem; }
  .photo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 16rem); }
  .photo-portrait { grid-column: 1; grid-row: 1 / 3; }
  .photo-wide { grid-column: 2; grid-row: 1; }
  .photo-square { grid-column: 2; grid-row: 2; }
  .photo-event { grid-column: 1; grid-row: 3; }
  .photo-art { grid-column: 2; grid-row: 3; }
  .photo-tall { grid-column: 1; grid-row: 4 / 6; }
  .photo-trip { grid-column: 2; grid-row: 4 / 6; }
  .contact-links a { grid-template-columns: 1fr auto; }
  .contact-links a span { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  :root { --space-page: var(--space-md); --type-display-mega: clamp(2.25rem, 11vw, 3rem); }
  .wordmark-mark { display: none; }
  .header-contact { min-height: 2.25rem; padding: var(--space-xs) var(--space-base); }
  .hero h1 span { white-space: normal; }
  .hero-lead { font-size: var(--type-body); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button, .text-link { width: 100%; min-height: 2.75rem; }
  .system-map { min-height: 25rem; }
  .metrics div { padding: var(--space-base); }
  .method-section { width: calc(100% - (var(--space-base) * 2)); padding: var(--space-lg); }
  .product-story-copy { font-size: var(--type-body); }
  .photo-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .photo { min-width: 82vw; height: 28rem; scroll-snap-align: center; }
  .contact-section { width: calc(100% - (var(--space-base) * 2)); padding: var(--space-lg); }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (hover: none) { .photo:hover img, .case-image:hover img, .case:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}