/* ============================================================
   wait, what. — site.css
   Layout + page-level rules over the canonical design tokens.
   Light by default. Dark via :root[data-ww-mode="dark"].
   ============================================================ */

@import url('fonts/sohne.css');
@import url('tokens/tokens.css');

/* ---------- Tweakable design vars ---------- */
:root {
  --site-accent: var(--ww-signal);          /* red by default */
  --site-display-stack: var(--ww-font-primary);
  --site-body-stack: var(--ww-font-primary);
  --site-mono-stack: var(--ww-font-mono);

  --site-margin-x: clamp(24px, 4vw, 64px);
  --site-grid-gap: 24px;

  --hairline: 1px solid var(--ww-rule);
  --hairline-strong: 1px solid var(--ww-rule-strong);
}

/* When user picks a different accent via tweaks, route signal vars too */
:root[data-site-accent="ink"] { --site-accent: var(--ww-ink); }
:root[data-site-accent="positive"] { --site-accent: var(--ww-positive); }
:root[data-site-accent="oxblood"] { --site-accent: #6B0F0F; }

/* Dark mode signal stays bright */
:root[data-ww-mode="dark"][data-site-accent="ink"] { --site-accent: var(--ww-ink); }
:root[data-ww-mode="dark"][data-site-accent="positive"] { --site-accent: var(--ww-positive); }
:root[data-ww-mode="dark"][data-site-accent="oxblood"] { --site-accent: #FF6B6B; }

/* ---------- Base ---------- */
html, body {
  background: var(--ww-paper);
  color: var(--ww-ink-secondary);
  font-family: var(--site-body-stack);
  transition: background-color 240ms var(--ww-easing),
              color 240ms var(--ww-easing);
}

a { color: inherit; }

::selection {
  background: var(--site-accent);
  color: var(--ww-paper);
}

/* ---------- Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--site-margin-x);
  padding-right: var(--site-margin-x);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--site-grid-gap);
}

@media (max-width: 760px) {
  .grid-12 { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Top frame: nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ww-paper);
  border-bottom: var(--hairline);
  transition: background-color 240ms var(--ww-easing),
              border-color 240ms var(--ww-easing);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav__brand {
  font-family: var(--site-body-stack);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ww-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.nav__brand .mark-period { color: var(--site-accent); }
.nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 150ms var(--ww-easing),
              border-color 150ms var(--ww-easing);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--site-accent);
  border-bottom-color: var(--site-accent);
}
.nav__mode {
  background: none;
  border: 1px solid var(--ww-rule);
  color: var(--ww-ink);
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 150ms var(--ww-easing),
              color 150ms var(--ww-easing);
}
.nav__mode:hover {
  border-color: var(--ww-ink);
}
.nav__mode__dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--ww-ink);
  margin-right: 8px;
  vertical-align: 1px;
}

@media (max-width: 760px) {
  .nav__links { gap: 16px; }
  .nav__link.nav__link--lg { display: none; }
}

/* ---------- Footer ---------- */
.foot {
  margin-top: 96px;
  border-top: var(--hairline-strong);
  padding-top: 48px;
  padding-bottom: 64px;
  font-size: 13px;
  color: var(--ww-ink-muted);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--site-grid-gap);
}
.foot__col h5 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ww-ink);
  margin-bottom: 16px;
}
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { margin-bottom: 8px; }
.foot__col a {
  color: var(--ww-ink-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 150ms var(--ww-easing), border-color 150ms var(--ww-easing);
}
.foot__col a:hover {
  color: var(--site-accent);
  border-bottom-color: var(--site-accent);
}
.foot__bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 64px;
  padding-top: 24px;
  border-top: var(--hairline);
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}
.foot__bottom .accent { color: var(--site-accent); }
@media (max-width: 760px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__bottom { flex-direction: column; gap: 8px; }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: 96px;
  padding-bottom: 96px;
  border-bottom: var(--hairline);
  position: relative;
}

/* Brand mark (logo image) — used prominently in hero / about, inline-small in nav */
.brand-mark {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.hero__mark {
  position: absolute;
  top: 96px;
  right: var(--site-margin-x);
  width: clamp(120px, 14vw, 200px);
  height: auto;
  opacity: 0.95;
  mix-blend-mode: multiply;
}
:root[data-ww-mode="dark"] .hero__mark {
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.1);
  opacity: 0.85;
}
@media (max-width: 800px) {
  .hero__mark { position: static; margin: 0 0 32px; width: 140px; }
}

/* Reusable hub strip (Capital Architecture pointer) */
.hub-strip {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 24px;
  align-items: baseline;
  padding: 28px 32px;
  background: var(--ww-paper-subtle);
  border-top: 2px solid var(--site-accent);
  border-bottom: var(--hairline);
  margin: 32px 0 0;
}
.hub-strip__label {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  font-weight: 500;
}
.hub-strip__title {
  font-family: var(--site-display-stack);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  color: var(--ww-ink);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.hub-strip__cta {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ww-ink);
  padding-bottom: 1px;
  white-space: nowrap;
  text-align: right;
  justify-self: end;
}
.hub-strip__cta:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }
@media (max-width: 800px) {
  .hub-strip { grid-template-columns: 1fr; gap: 12px; }
  .hub-strip__cta { justify-self: start; text-align: left; }
}
.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 64px;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}
.hero__meta .accent { color: var(--site-accent); }

.hero__display {
  font-family: var(--site-display-stack);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ww-ink);
  text-wrap: balance;
  max-width: 14ch;
  margin: 0;
}
.hero__display .accent { color: var(--site-accent); }
.hero__display .quiet { color: var(--ww-ink-muted); }

.hero__sub {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1080px;
}
.hero__lede {
  font-size: 20px;
  line-height: 1.4;
  color: var(--ww-ink);
  font-weight: 400;
  text-wrap: pretty;
}
.hero__caption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ww-ink-muted);
  font-family: var(--site-mono-stack);
  letter-spacing: 0.01em;
}
.hero__caption strong { color: var(--ww-ink); font-weight: 500; }

@media (max-width: 760px) {
  .hero { padding-top: 56px; padding-bottom: 56px; }
  .hero__sub { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Section ---------- */
.section {
  padding-top: 96px;
  padding-bottom: 96px;
  border-bottom: var(--hairline);
}
.section--no-border { border-bottom: 0; }
.section__head {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--site-grid-gap);
  margin-bottom: 64px;
  align-items: baseline;
}
.section__num {
  font-family: var(--site-mono-stack);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  font-weight: 500;
}
.section__num .label {
  display: block;
  color: var(--ww-ink-muted);
  margin-top: 6px;
  letter-spacing: 0.12em;
}
.section__title {
  font-family: var(--site-display-stack);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ww-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .section { padding-top: 56px; padding-bottom: 56px; }
  .section__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
}

/* ---------- Body copy ---------- */
.prose {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  max-width: 64ch;
}
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ww-ink); font-weight: 500; }
.prose .accent { color: var(--site-accent); }

/* ---------- What we do — four-column index ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.pillar {
  padding: 32px 24px 32px 0;
  border-right: var(--hairline);
}
.pillar:last-child { border-right: 0; }
.pillar__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--site-accent);
  margin-bottom: 24px;
  font-weight: 500;
}
.pillar__title {
  font-family: var(--site-display-stack);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ww-ink);
  margin: 0 0 16px;
}
.pillar__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0;
}
@media (max-width: 1000px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar:nth-child(1), .pillar:nth-child(2) { border-bottom: var(--hairline); }
}
@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: var(--hairline); padding: 24px 0; }
  .pillar:last-child { border-bottom: 0; }
}

/* ---------- Platforms — large editorial table ---------- */
.platforms {
  border-top: var(--hairline-strong);
}
.platform {
  display: grid;
  grid-template-columns: 88px 1fr 1.4fr 160px;
  gap: 24px;
  padding: 32px 0;
  border-bottom: var(--hairline);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms var(--ww-easing);
}
.platform:hover { background: var(--ww-paper-subtle); }
.platform__code {
  font-family: var(--site-mono-stack);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--site-accent);
}
.platform__name {
  font-family: var(--site-display-stack);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ww-ink);
  line-height: 1.1;
}
.platform__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ww-ink-secondary);
  max-width: 52ch;
}
.platform__status {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  text-align: right;
}
.platform__status .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--site-accent);
  margin-right: 6px;
  vertical-align: 1px;
}
.platform__status--inactive .dot { background: var(--ww-rule); }
.platform__status--inactive { color: var(--ww-ink-subtle); }
@media (max-width: 900px) {
  .platform {
    grid-template-columns: 88px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 16px;
  }
  .platform__desc { grid-column: 1 / -1; }
  .platform__status { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Track record stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--hairline-strong);
}
.stat {
  padding: 32px 24px 32px 0;
  border-right: var(--hairline);
}
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--site-display-stack);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ww-ink);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 400;
  margin-bottom: 16px;
}
.stat__value .unit {
  font-size: 0.5em;
  color: var(--ww-ink-muted);
  margin-left: 4px;
}
.stat__label {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  margin: 0;
}
@media (max-width: 800px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: var(--hairline); }
}

/* ---------- Manifesto block (signal callout) ---------- */
.manifesto {
  padding: 64px 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
  background: var(--ww-paper-subtle);
  margin: 0 calc(var(--site-margin-x) * -1);
  padding-left: var(--site-margin-x);
  padding-right: var(--site-margin-x);
}
.manifesto__quote {
  font-family: var(--site-display-stack);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ww-ink);
  font-weight: 400;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.manifesto__quote .accent { color: var(--site-accent); }
.manifesto__attr {
  margin-top: 32px;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}

/* ---------- CTA row ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 32px;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ww-ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--ww-ink);
  transition: color 150ms var(--ww-easing), border-color 150ms var(--ww-easing);
}
.cta__arrow { color: var(--site-accent); transition: transform 200ms var(--ww-easing); }
.cta:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }
.cta:hover .cta__arrow { transform: translateX(4px); }

.cta--quiet {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  border-bottom-color: var(--ww-rule);
}
.cta--quiet:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }

/* ---------- About / Contact specific ---------- */
.about-hero {
  padding-top: 96px;
  padding-bottom: 0;
}
.about-hero__lede {
  font-family: var(--site-display-stack);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ww-ink);
  font-weight: 400;
  text-wrap: balance;
  max-width: 28ch;
  margin: 0;
}
.about-hero__lede .accent { color: var(--site-accent); }

.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--hairline-strong);
}
.principle {
  padding: 40px 32px 40px 0;
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
.principle:nth-child(2n) { border-right: 0; }
.principle:nth-last-child(-n+2) { border-bottom: 0; }
.principle__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--site-accent);
  margin-bottom: 16px;
  font-weight: 500;
}
.principle__title {
  font-family: var(--site-display-stack);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ww-ink);
  margin: 0 0 12px;
  line-height: 1.15;
}
.principle__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0;
}
@media (max-width: 700px) {
  .principles { grid-template-columns: 1fr; }
  .principle { border-right: 0; padding: 32px 0; }
  .principle:nth-last-child(-n+2) { border-bottom: var(--hairline); }
  .principle:last-child { border-bottom: 0; }
}

/* ---------- Contact form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
.field {
  display: block;
  margin-bottom: 32px;
}
.field__label {
  display: block;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.field__input,
.field__textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ww-rule-strong);
  padding: 8px 0;
  font-family: var(--site-body-stack);
  font-size: 17px;
  color: var(--ww-ink);
  outline: none;
  transition: border-color 150ms var(--ww-easing);
}
.field__input:focus,
.field__textarea:focus {
  border-bottom-color: var(--site-accent);
}
.field__textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: var(--site-body-stack);
}
.field__hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ww-ink-muted);
  font-family: var(--site-mono-stack);
  letter-spacing: 0.02em;
}

button.submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ww-ink);
  color: var(--ww-paper);
  border: 0;
  padding: 16px 24px;
  font-family: var(--site-body-stack);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 150ms var(--ww-easing);
}
button.submit:hover { background: var(--site-accent); }
button.submit .arrow { color: var(--ww-paper); }

/* Contact details column */
.contact-detail {
  margin-bottom: 32px;
}
.contact-detail h4 {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  font-weight: 500;
  margin: 0 0 8px;
}
.contact-detail p,
.contact-detail a {
  font-family: var(--site-body-stack);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ww-ink);
  margin: 0;
  text-decoration: none;
}
.contact-detail a:hover { color: var(--site-accent); }

/* ---------- Type pairings (tweak) ---------- */
:root[data-site-type="serif-display"] {
  --site-display-stack: 'Playfair Display', Georgia, serif;
}
:root[data-site-type="grotesk-display"] {
  --site-display-stack: 'Söhne', 'Inter Tight', 'Helvetica Neue', sans-serif;
  --site-body-stack: 'Söhne', 'Inter Tight', 'Helvetica Neue', sans-serif;
}
:root[data-site-type="mono-display"] {
  --site-display-stack: 'JetBrains Mono', 'Söhne Mono', monospace;
}

/* ---------- Tweaks panel (custom built — Söhne aesthetic) ---------- */
#tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  background: var(--ww-paper);
  border: 1px solid var(--ww-rule-strong);
  z-index: 100;
  font-family: var(--site-body-stack);
  display: none;
}
#tweaks-panel.open { display: block; }
.tweaks__head {
  padding: 16px;
  border-bottom: 1px solid var(--ww-rule-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tweaks__title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink);
  font-weight: 500;
}
.tweaks__close {
  background: none;
  border: 0;
  font-family: var(--site-mono-stack);
  font-size: 14px;
  color: var(--ww-ink);
  cursor: pointer;
  padding: 0 4px;
}
.tweaks__body { padding: 16px; }
.tweaks__group { margin-bottom: 24px; }
.tweaks__group:last-child { margin-bottom: 0; }
.tweaks__label {
  display: block;
  font-family: var(--site-mono-stack);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  margin-bottom: 8px;
}
.tweaks__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tweaks__opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-family: var(--site-body-stack);
  font-size: 13px;
  color: var(--ww-ink-secondary);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 150ms var(--ww-easing);
}
.tweaks__opt:hover {
  color: var(--ww-ink);
  background: var(--ww-paper-subtle);
}
.tweaks__opt[aria-pressed="true"] {
  color: var(--ww-ink);
  border-left-color: var(--site-accent);
  background: var(--ww-paper-subtle);
  font-weight: 500;
}

.tweaks__swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tweaks__swatch {
  aspect-ratio: 1;
  border: 1px solid var(--ww-rule);
  cursor: pointer;
  background: var(--swatch-color);
  outline-offset: 2px;
  outline: 1px solid transparent;
  transition: outline-color 150ms var(--ww-easing);
}
.tweaks__swatch[aria-pressed="true"] {
  outline-color: var(--ww-ink);
}

/* ============================================================
   v2 — REBUILD ADDITIONS
   New components required by the v2 site brief:
   bilingual (DE/EN), language toggle, advisory pages,
   /capital-architecture authority hub, /work, /writing,
   Toby block, asset-class vignettes, methodology grid.
   ============================================================ */

/* ---------- i18n: lang-aware visibility ---------- */
html[lang="en"] [data-lang="de"],
html[lang="de"] [data-lang="en"] { display: none !important; }

/* ---------- Nav: language toggle + slim secondary ---------- */
.nav__lang {
  background: none;
  border: 0;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  cursor: pointer;
  padding: 0;
}
.nav__lang span { color: var(--ww-ink-muted); transition: color 150ms var(--ww-easing); }
.nav__lang span.is-on { color: var(--ww-ink); }
.nav__lang span.sep { margin: 0 6px; color: var(--ww-rule); }
.nav__lang:hover span { color: var(--ww-ink); }

.nav__links--wide { gap: 24px; }
.nav__link--small { font-size: 11px; letter-spacing: 0.14em; }

/* nav drop-down for service pages */
.nav__group { position: relative; }
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu { display: block; }
.nav__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 16px;
  padding: 8px 0;
  background: var(--ww-paper);
  border: 1px solid var(--ww-rule-strong);
  min-width: 220px;
  z-index: 60;
}
.nav__menu a {
  display: block;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 120ms var(--ww-easing);
}
.nav__menu a:hover {
  background: var(--ww-paper-subtle);
  border-left-color: var(--site-accent);
  color: var(--site-accent);
}

/* ---------- Sub-page hero (simpler than home hero) ---------- */
.subhero {
  padding-top: 96px;
  padding-bottom: 64px;
  border-bottom: var(--hairline);
}
.subhero__crumb {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 48px;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}
.subhero__crumb .accent { color: var(--site-accent); }
.subhero__crumb a {
  color: var(--ww-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.subhero__crumb a:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }

.subhero__display {
  font-family: var(--site-display-stack);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ww-ink);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0;
}
.subhero__display .accent { color: var(--site-accent); }
.subhero__display .quiet { color: var(--ww-ink-muted); }

.subhero__lede {
  margin-top: 40px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ww-ink);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---------- Service-page H2 lead ---------- */
.section__lede {
  font-family: var(--site-display-stack);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ww-ink);
  font-weight: 400;
  max-width: 28ch;
  text-wrap: balance;
  margin: 0;
}

/* ---------- Service grid (capital-side / ventures-side) ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.svc-grid--five { grid-template-columns: repeat(5, 1fr); }
.svc {
  padding: 28px 24px 28px 0;
  border-right: var(--hairline);
}
.svc:last-child { border-right: 0; }
.svc__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--site-accent);
  margin-bottom: 16px;
  font-weight: 500;
}
.svc__title {
  font-family: var(--site-display-stack);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ww-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.svc__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ww-ink-secondary);
  margin: 0;
}
.svc__body em {
  font-style: normal;
  font-family: var(--site-mono-stack);
  font-size: 12px;
  color: var(--ww-ink-muted);
  display: block;
  margin-top: 6px;
}
@media (max-width: 1100px) {
  .svc-grid, .svc-grid--five { grid-template-columns: repeat(2, 1fr); }
  .svc { border-bottom: var(--hairline); border-right: var(--hairline); }
  .svc:nth-child(2n) { border-right: 0; }
  .svc:nth-last-child(-n+1) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .svc-grid, .svc-grid--five { grid-template-columns: 1fr; }
  .svc { border-right: 0; padding: 24px 0; }
  .svc:nth-child(2n) { border-right: 0; }
}

/* ---------- "Who we work with" / "What we don't do" — list-table ---------- */
.list-table {
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.list-table__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: var(--hairline);
  align-items: baseline;
}
.list-table__row:last-child { border-bottom: 0; }
.list-table__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--site-accent);
  font-weight: 500;
}
.list-table__text {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ww-ink);
  margin: 0;
}
.list-table__text strong { font-weight: 500; }
.list-table__text em {
  font-style: normal;
  color: var(--ww-ink-muted);
  font-family: var(--site-mono-stack);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-left: 8px;
}
.list-table--exclusion .list-table__num { color: var(--ww-ink-muted); }
.list-table--exclusion .list-table__num::before { content: "—\00a0"; }
.list-table--exclusion .list-table__text { color: var(--ww-ink-secondary); }

/* ---------- Phase strip (Diagnose → Design → Operate) ---------- */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: var(--hairline-strong);
  padding-top: 32px;
}
.phase__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--site-accent);
  margin-bottom: 12px;
  font-weight: 500;
}
.phase__name {
  font-family: var(--site-display-stack);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ww-ink);
  margin: 0 0 12px;
  line-height: 1.1;
}
.phase__name .arrow { color: var(--ww-ink-muted); margin-left: 8px; }
.phase__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ww-ink-secondary);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 800px) {
  .phases { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Engagement vignette — anonymized mandates ---------- */
.vignettes {
  border-top: var(--hairline-strong);
}
.vignette {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: var(--hairline);
  align-items: baseline;
}
.vignette__meta {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  line-height: 1.6;
}
.vignette__meta .accent { color: var(--site-accent); }
.vignette__meta .label {
  display: block;
  color: var(--ww-ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}
.vignette__title {
  font-family: var(--site-display-stack);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ww-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.vignette__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0;
  max-width: 56ch;
}
@media (max-width: 800px) {
  .vignette { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Toby block on home — "Led by Tobias Temmen" ---------- */
.toby {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  align-items: center;
}
.toby__photo {
  width: 200px;
  height: 240px;
  background:
    repeating-linear-gradient(135deg,
      var(--ww-rule) 0,
      var(--ww-rule) 1px,
      transparent 1px,
      transparent 8px),
    var(--ww-paper-subtle);
  border: 1px solid var(--ww-rule);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.toby__photo span {
  font-family: var(--site-mono-stack);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  background: var(--ww-paper);
  padding: 4px 6px;
  border: 1px solid var(--ww-rule);
}
.toby__label {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 12px;
  font-weight: 500;
}
.toby__name {
  font-family: var(--site-display-stack);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ww-ink);
  margin: 0 0 12px;
  line-height: 1.1;
}
.toby__bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0 0 16px;
  max-width: 60ch;
}
@media (max-width: 700px) {
  .toby { grid-template-columns: 1fr; }
  .toby__photo { width: 160px; height: 200px; }
}

/* /about Toby block — larger */
.toby--lg { grid-template-columns: 280px 1fr; gap: 48px; padding: 48px 0; }
.toby--lg .toby__photo { width: 280px; height: 360px; }
.toby--lg .toby__name { font-size: 44px; }
.toby--lg .toby__bio { font-size: 17px; }

/* ---------- Asset-class vignettes (work) ---------- */
.assetclass-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.assetclass {
  padding: 40px 32px 40px 0;
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  position: relative;
}
.assetclass:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: 32px; }
.assetclass:nth-last-child(-n+2) { border-bottom: 0; }
.assetclass__code {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  font-weight: 500;
  margin-bottom: 20px;
}
.assetclass__pattern {
  width: 100%;
  height: 60px;
  margin-bottom: 24px;
  background-color: var(--ww-paper-subtle);
  position: relative;
  overflow: hidden;
}
.assetclass__title {
  font-family: var(--site-display-stack);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ww-ink);
  margin: 0 0 16px;
  line-height: 1.15;
  text-wrap: balance;
  max-width: 22ch;
}
.assetclass__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0 0 16px;
  max-width: 48ch;
}
.assetclass__meta {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}
.assetclass__meta .sep { margin: 0 8px; color: var(--ww-rule); }
@media (max-width: 800px) {
  .assetclass-grid { grid-template-columns: 1fr; }
  .assetclass { border-right: 0; padding: 32px 0; }
  .assetclass:nth-child(2n) { padding-left: 0; }
  .assetclass:nth-last-child(-n+2) { border-bottom: var(--hairline); }
  .assetclass:last-child { border-bottom: 0; }
}

/* Pattern variants */
.pat-stripes-d {
  background-image:
    repeating-linear-gradient(135deg,
      var(--ww-ink) 0, var(--ww-ink) 1px,
      transparent 1px, transparent 6px);
}
.pat-stripes-h {
  background-image:
    repeating-linear-gradient(0deg,
      var(--ww-ink) 0, var(--ww-ink) 1px,
      transparent 1px, transparent 4px);
}
.pat-grid-fine {
  background-image:
    linear-gradient(0deg, var(--ww-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--ww-ink) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.4;
}
.pat-dots {
  background-image: radial-gradient(circle, var(--ww-ink) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.4;
}

/* ---------- Capital-architecture page: TOC + body ---------- */
.ca-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}
.ca-toc {
  position: sticky;
  top: 96px;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ca-toc__label {
  color: var(--ww-ink);
  margin-bottom: 16px;
  font-weight: 500;
}
.ca-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.ca-toc li {
  counter-increment: toc;
  padding: 8px 0;
  border-top: var(--hairline);
}
.ca-toc li:last-child { border-bottom: var(--hairline); }
.ca-toc a {
  color: var(--ww-ink-muted);
  text-decoration: none;
  display: block;
  padding-left: 32px;
  position: relative;
  line-height: 1.4;
  transition: color 150ms var(--ww-easing);
}
.ca-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--site-accent);
  font-weight: 500;
}
.ca-toc a:hover, .ca-toc a.is-active { color: var(--ww-ink); }

.ca-body { max-width: 720px; }
.ca-body section { margin-bottom: 64px; scroll-margin-top: 80px; }
.ca-body h2 {
  font-family: var(--site-display-stack);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ww-ink);
  margin: 0 0 24px;
  text-wrap: balance;
  max-width: 22ch;
}
.ca-body h2 .accent { color: var(--site-accent); }
.ca-body h2 .num {
  display: block;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 16px;
  font-weight: 500;
}
.ca-body p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ww-ink-secondary);
  margin: 0 0 18px;
  max-width: 64ch;
  text-wrap: pretty;
}
.ca-body p strong { color: var(--ww-ink); font-weight: 500; }
.ca-body p .accent { color: var(--site-accent); }

.ca-body .principles-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}
.ca-body .principles-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: var(--hairline);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ww-ink);
  align-items: baseline;
}
.ca-body .principles-list li::before {
  content: counter(prin, decimal-leading-zero);
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--site-accent);
  font-weight: 500;
}
.ca-body .principles-list { counter-reset: prin; }
.ca-body .principles-list li { counter-increment: prin; }
.ca-body .principles-list em {
  font-style: normal;
  display: block;
  font-size: 14px;
  color: var(--ww-ink-secondary);
  margin-top: 4px;
}

.ca-body dl.method {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 16px 0 0;
  border-top: var(--hairline);
}
.ca-body dl.method > div {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: var(--hairline);
  align-items: baseline;
}
.ca-body dl.method dt {
  font-family: var(--site-display-stack);
  font-size: 18px;
  font-weight: 500;
  color: var(--ww-ink);
  letter-spacing: -0.005em;
  margin: 0;
}
.ca-body dl.method dd {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0;
}
@media (max-width: 700px) {
  .ca-body dl.method > div { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 1000px) {
  .ca-layout { grid-template-columns: 1fr; gap: 48px; }
  .ca-toc { position: static; }
}

/* ---------- /writing — essay list ---------- */
.essay-list { border-top: var(--hairline-strong); }
.essay {
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  gap: 24px;
  padding: 36px 0;
  border-bottom: var(--hairline);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: background-color 200ms var(--ww-easing);
}
.essay:hover { background: var(--ww-paper-subtle); }
.essay__date {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}
.essay__title {
  font-family: var(--site-display-stack);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ww-ink);
  margin: 0 0 8px;
  text-wrap: balance;
  max-width: 24ch;
}
.essay__excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ww-ink-secondary);
  margin: 0;
  max-width: 56ch;
}
.essay__src {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  text-align: right;
}
.essay__src .accent { color: var(--site-accent); }
@media (max-width: 800px) {
  .essay { grid-template-columns: 1fr; gap: 8px; }
  .essay__src { text-align: left; }
}

/* ---------- Track-record sentence (homepage) ---------- */
.track-sentence {
  font-family: var(--site-display-stack);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ww-ink);
  font-weight: 400;
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}
.track-sentence .num {
  color: var(--site-accent);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.track-sentence .quiet { color: var(--ww-ink-muted); }
.track-sentence + .track-where {
  margin-top: 32px;
  font-family: var(--site-mono-stack);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}

/* ---------- Number grid (about) ---------- */
.numgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.numgrid__cell {
  padding: 32px 24px 32px 0;
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
.numgrid__cell:nth-child(3n) { border-right: 0; }
.numgrid__cell:nth-last-child(-n+3) { border-bottom: 0; }
.numgrid__value {
  font-family: var(--site-display-stack);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ww-ink);
  margin-bottom: 12px;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.numgrid__value .unit { font-size: 0.5em; color: var(--ww-ink-muted); margin-left: 4px; }
.numgrid__label {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  margin: 0;
  max-width: 22ch;
}
@media (max-width: 800px) {
  .numgrid { grid-template-columns: 1fr 1fr; }
  .numgrid__cell:nth-child(2n) { border-right: 0; }
  .numgrid__cell:nth-child(odd) { border-right: var(--hairline); }
}

/* ---------- Collaborator list (about) ---------- */
.collab-list { border-top: var(--hairline-strong); }
.collab {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: var(--hairline);
  align-items: baseline;
}
.collab__name {
  font-family: var(--site-display-stack);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ww-ink);
  margin: 0;
  line-height: 1.15;
}
.collab__bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0;
  max-width: 56ch;
}
@media (max-width: 700px) {
  .collab { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Contact details list ---------- */
.contact-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.contact-cell {
  padding: 28px 24px 28px 0;
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
.contact-cell:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: 32px; }
.contact-cell:nth-last-child(-n+2) { border-bottom: 0; }
.contact-cell h4 {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin: 0 0 12px;
  font-weight: 500;
}
.contact-cell p,
.contact-cell a {
  font-family: var(--site-body-stack);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ww-ink);
  text-decoration: none;
  margin: 0;
  display: block;
}
.contact-cell a { border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color 150ms var(--ww-easing), color 150ms var(--ww-easing); }
.contact-cell a:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }
.contact-cell .quiet { font-size: 13px; color: var(--ww-ink-muted); margin-top: 8px; line-height: 1.5; }
@media (max-width: 700px) {
  .contact-list { grid-template-columns: 1fr; }
  .contact-cell { border-right: 0; padding: 24px 0; }
  .contact-cell:nth-child(2n) { padding-left: 0; }
}

/* ---------- DACH micro-hook footer block ---------- */
.dach {
  margin-top: 32px;
  padding: 16px 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
}
.dach .accent { color: var(--site-accent); }

/* ---------- Section-head variants ---------- */
.section__head--narrow { margin-bottom: 48px; }
.section__head--center { grid-template-columns: 1fr; max-width: 80ch; margin-left: auto; margin-right: auto; text-align: left; }

/* ---------- Hub-link (CAI) callout ---------- */
.hub-link {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 24px;
  background: var(--ww-paper-subtle);
  border-left: 2px solid var(--site-accent);
  margin: 24px 0;
}
.hub-link__label {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-accent);
  font-weight: 500;
}
.hub-link__text {
  font-family: var(--site-display-stack);
  font-size: 18px;
  line-height: 1.35;
  color: var(--ww-ink);
  font-weight: 400;
  margin: 0;
}
.hub-link__cta {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ww-ink);
  padding-bottom: 1px;
  white-space: nowrap;
}
.hub-link__cta:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }
@media (max-width: 700px) {
  .hub-link { grid-template-columns: 1fr; }
}

/* ---------- Portfolio gate ---------- */
.gate {
  max-width: 480px;
  margin: 96px auto;
  padding: 48px;
  border: 1px solid var(--ww-rule-strong);
  text-align: left;
}
.gate h1 {
  font-family: var(--site-display-stack);
  font-size: 32px;
  letter-spacing: -0.018em;
  font-weight: 400;
  margin: 0 0 16px;
}
.gate p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0 0 24px;
}
.gate__field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ww-rule-strong);
  padding: 8px 0;
  font-family: var(--site-body-stack);
  font-size: 17px;
  color: var(--ww-ink);
  outline: none;
  margin-bottom: 24px;
}
.gate__field:focus { border-bottom-color: var(--site-accent); }
.gate__err {
  display: none;
  color: var(--site-accent);
  font-family: var(--site-mono-stack);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.gate__err.show { display: block; }
.gate__btn {
  background: var(--ww-ink);
  color: var(--ww-paper);
  border: 0;
  padding: 14px 24px;
  font-family: var(--site-body-stack);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.gate__btn:hover { background: var(--site-accent); }

/* ---------- Slogan strip (homepage replacement) ---------- */
.slogan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
  margin: 48px 0;
}
.slogan__col {
  padding: 32px 24px 32px 0;
  border-right: var(--hairline);
}
.slogan__col:last-child { border-right: 0; }
.slogan__word {
  font-family: var(--site-display-stack);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.018em;
  color: var(--ww-ink);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 12px;
}
.slogan__word .accent { color: var(--site-accent); }
.slogan__gloss {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ww-ink-secondary);
  margin: 0;
  max-width: 28ch;
}
@media (max-width: 800px) {
  .slogan { grid-template-columns: 1fr; }
  .slogan__col { border-right: 0; border-bottom: var(--hairline); padding: 24px 0; }
  .slogan__col:last-child { border-bottom: 0; }
}

/* Two-block layout (advisory split on home) */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.duo__block {
  padding: 40px 32px 40px 0;
  border-right: var(--hairline);
}
.duo__block:last-child { border-right: 0; padding-left: 32px; padding-right: 0; }
.duo__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--site-accent);
  margin-bottom: 16px;
  font-weight: 500;
}
.duo__title {
  font-family: var(--site-display-stack);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ww-ink);
  margin: 0 0 16px;
  line-height: 1.1;
}
.duo__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0 0 20px;
  max-width: 48ch;
}
.duo__cta {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ww-ink);
  padding-bottom: 1px;
}
.duo__cta:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }
@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr; }
  .duo__block { border-right: 0; border-bottom: var(--hairline); padding: 32px 0; }
  .duo__block:last-child { padding-left: 0; }
}


/* ---------- Why-now (about) ---------- */
.why-now {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.why {
  padding: 32px 28px 32px 0;
  border-right: var(--hairline);
}
.why:last-child { border-right: 0; }
.why__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 18px;
  font-weight: 500;
}
.why__title {
  font-family: var(--site-display-stack);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.why__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0;
  max-width: 36ch;
}
@media (max-width: 900px) {
  .why-now { grid-template-columns: 1fr; }
  .why { border-right: 0; border-bottom: var(--hairline); padding: 24px 0; }
  .why:last-child { border-bottom: 0; }
}

/* ---------- Founder block ---------- */
.founder {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  padding: 24px 0;
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
  align-items: start;
}
.founder__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ww-paper-subtle);
  border: 1px solid var(--ww-rule);
  overflow: hidden;
}
.founder__photo svg { display: block; width: 100%; height: 100%; }
.founder__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  font-weight: 500;
  line-height: 1.4;
}
.founder__copy { padding-top: 28px; }
.founder__label {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 12px;
  font-weight: 500;
}
.founder__name {
  font-family: var(--site-display-stack);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
}
.founder__copy p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0 0 16px;
  max-width: 60ch;
}
.founder__copy p strong { color: var(--ww-ink); font-weight: 500; }
@media (max-width: 800px) {
  .founder { grid-template-columns: 1fr; gap: 24px; }
  .founder__photo { max-width: 240px; }
}

/* ---------- Subhero polish ---------- */
.subhero { padding-top: 96px; padding-bottom: 64px; }


/* ---------- Essays grid (writing hub) ---------- */
.essays {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.essay {
  display: block;
  padding: 32px 28px 32px 0;
  border-right: var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}
.essay:last-child { border-right: 0; }
.essay:hover { background: var(--ww-paper-subtle); }
.essay__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-muted);
  margin-bottom: 18px;
  font-weight: 500;
}
.essay__num { color: var(--site-accent); }
.essay__title {
  font-family: var(--site-display-stack);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.essay__excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0 0 24px;
}
.essay__cta {
  display: inline-block;
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--ww-rule);
  padding-bottom: 2px;
}
.essay:hover .essay__cta { color: var(--site-accent); border-bottom-color: var(--site-accent); }
@media (max-width: 1000px) {
  .essays { grid-template-columns: 1fr; }
  .essay { border-right: 0; border-bottom: var(--hairline); padding: 24px 0; }
  .essay:last-child { border-bottom: 0; }
}

/* ---------- Contact slabs ---------- */
.contact-slabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--hairline-strong);
  border-bottom: var(--hairline-strong);
}
.slab {
  padding: 36px 32px 36px 0;
  border-right: var(--hairline);
}
.slab:nth-child(2n) { border-right: 0; padding-left: 32px; }
.slab__num {
  font-family: var(--site-mono-stack);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: 18px;
  font-weight: 500;
}
.slab__title {
  font-family: var(--site-display-stack);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.slab__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ww-ink-secondary);
  margin: 0 0 16px;
  max-width: 44ch;
}
.slab__link {
  font-family: var(--site-mono-stack);
  font-size: 13px;
  color: var(--ww-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ww-rule);
  padding-bottom: 2px;
}
.slab__link:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }
@media (max-width: 800px) {
  .contact-slabs { grid-template-columns: 1fr; }
  .slab { border-right: 0; border-bottom: var(--hairline); padding: 24px 0 !important; }
  .slab:last-child { border-bottom: 0; }
}