/* Site components and page templates. Tokens in tokens.css, primitives in base.css. */

/* ================================================================ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  transition: box-shadow var(--t-ui) var(--ease-stone);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--rule); }
.site-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  height: var(--header-h);
}
.site-header__logo { flex: none; display: block; padding-block: 8px; }
.site-header__logo img { height: 28px; width: auto; }
.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 30px); }
.site-nav__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.site-nav__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-state) var(--ease-stone);
}
.site-nav__item:hover::after,
.site-nav__item[aria-expanded="true"]::after,
.site-nav__item[aria-current="page"]::after,
.site-nav__item.is-current::after { transform: scaleX(1); }
.site-nav__item:hover { color: var(--ink); }
html:not(.js) .site-nav__js { display: none; }
html.js .site-nav__nojs { display: none; }

.site-header__end { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.lang { display: flex; align-items: center; gap: 6px; font-size: var(--fs-ui); font-weight: 500; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 44px;
  color: var(--muted); text-decoration: none;
}
.lang a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; }
.lang a:hover { color: var(--ink); }
.lang__sep { color: var(--rule-strong); }
.action--header { font-size: 1.125rem; white-space: nowrap; }
.menu-button {
  display: none;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}
@media (max-width: 1279px) {
  .site-nav, .action--header { display: none; }
  .menu-button { display: inline-flex; }
  .site-header__end { margin-left: auto; }
}
@media (max-width: 420px) {
  .site-header__logo img { height: 22px; }
  .site-header__end > .lang { display: none; }
}

/* disclosure panels */
.nav-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  z-index: var(--z-panel);
}
.nav-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  padding-block: 40px 48px;
}
.nav-panel__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-left: 0; }
.nav-panel__pillar {
  font-family: var(--serif);
  font-size: var(--fs-m);
  color: var(--ink);
  text-decoration: none;
}
.nav-panel__pillar:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.nav-panel__line { font-family: var(--serif); font-style: italic; color: var(--body); margin: 6px 0 18px; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.nav-panel li a {
  display: block;
  padding: 10px 0;
  min-height: 44px;
  font-size: var(--fs-body-s);
  color: var(--body);
  text-decoration: none;
}
.nav-panel li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.nav-panel__col--aside { border-left: 1px solid var(--rule); padding-left: var(--gutter); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .nav-panel:not([hidden]) .nav-panel__col { animation: panel-in 500ms var(--ease-stone) both; }
  html.motion .nav-panel:not([hidden]) .nav-panel__col:nth-child(2) { animation-delay: 50ms; }
  html.motion .nav-panel:not([hidden]) .nav-panel__col:nth-child(3) { animation-delay: 100ms; }
  html.motion .nav-panel:not([hidden]) .nav-panel__col:nth-child(4) { animation-delay: 150ms; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* small-screen menu */
.site-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  overflow-y: auto;
  z-index: var(--z-panel);
  overscroll-behavior: contain;
}
.site-menu__inner { padding-block: 24px 48px; }
.site-menu__list li a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--ink);
  text-decoration: none;
}
.site-menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; }
html.menu-open { overflow: hidden; }
@media (min-width: 1280px) { .site-menu { display: none; } }

/* breadcrumbs */
.crumbs { max-width: var(--max); margin-inline: auto; padding: 18px var(--margin) 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-caption); color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); margin-right: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: 1rem; color: var(--ink); }

/* ================================================================ footer */
.site-footer { padding-block: clamp(72px, 8vw, 120px) 40px; }
.site-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: end; }
.site-footer__logo { grid-column: 1 / span 4; }
.site-footer__logo img { height: 28px; width: auto; }
.site-footer__note { grid-column: 6 / span 6; font-family: var(--serif); font-size: var(--fs-lead); color: var(--on-night); line-height: 1.4; max-width: 40ch; }
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 48px;
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: 40px;
  border-top: 1px solid var(--rule-night);
}
.site-footer__col { grid-column: span 3; }
.site-footer__col--wide { grid-column: span 6; }
.site-footer__pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.site-footer .side-head { margin-bottom: 16px; }
.site-footer__gap { margin-top: 36px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding-block: 5px; font-size: var(--fs-body-s); line-height: 1.4; }
.site-footer li a { color: var(--on-night-muted); text-decoration: none; }
.site-footer li a:hover { color: var(--on-night); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__pillar a { color: var(--on-night) !important; font-family: var(--serif); font-size: 1.125rem; }
.site-footer__offices li { color: var(--on-night); }
.site-footer__email { font-family: var(--serif); font-size: 1.125rem; color: var(--on-night) !important; }
.site-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: 24px;
  border-top: 1px solid var(--rule-night);
  font-size: var(--fs-caption);
}
.site-footer__base p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer__legal li { padding: 0; font-size: var(--fs-caption); }
.lang--footer a { color: var(--on-night-muted); min-height: 32px; }
.lang--footer a[aria-current] { color: var(--on-night); }
.lang--footer { gap: 18px; font-size: var(--fs-caption); font-weight: 400; }
@media (max-width: 1023px) {
  .site-footer__col--wide { grid-column: 1 / -1; }
  .site-footer__col { grid-column: span 6; }
  .site-footer__note { grid-column: 1 / -1; }
  .site-footer__logo { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .site-footer__pillars { grid-template-columns: 1fr; row-gap: 24px; }
  .site-footer__col { grid-column: 1 / -1; }
}

/* ================================================================ shared page parts */
.page-head { padding-top: clamp(40px, 6vw, 88px); }
.page-head .lead { margin-top: clamp(20px, 2.4vw, 32px); }
.full-bleed { width: 100%; }
.bleed-credit { max-width: var(--max); margin: 10px auto 0; padding-inline: var(--margin); }

/* chapter: side head + text in the report grid */
.chapter { padding-block: var(--section-tight); }
.chapter + .chapter { padding-top: 0; }
.chapter .grid { row-gap: 20px; }
.chapter__side { grid-column: 1 / span 3; border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.chapter__body { grid-column: 4 / span 7; border-top: 1px solid var(--rule); padding-top: 14px; }
.chapter__body h2 { font-size: clamp(1.625rem, 2.5vw, 2.375rem); line-height: 1.12; margin-bottom: 20px; max-width: 32ch; }
.chapter__body h2 + p, .chapter__body h2 + ul { margin-top: 0; }
.on-night .chapter__side { border-top-color: var(--on-night-muted); }
.on-night .chapter__body { border-top-color: var(--rule-night); }
@media (max-width: 899px) {
  .chapter__side, .chapter__body { grid-column: 1 / -1; }
  .chapter__body { border-top: 0; padding-top: 0; }
}

/* scope list: one rule above each row, never above and below */
.scope { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: scope; max-width: 62ch; }
.scope li {
  position: relative;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  counter-increment: scope;
}
.scope li::before {
  content: none;
  position: absolute; left: 0; top: 14px;
  font-family: var(--serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* related links and the contact close */
.related { padding-block: var(--section-tight); }
.related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 28px;
}
.related__list a {
  display: block;
  padding: 18px 0 22px;
  border-top: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
}
.related__list a span { display: block; }
.related__name { font-family: var(--serif); font-size: var(--fs-m); line-height: 1.15; transition: transform var(--t-state) var(--ease-stone); }
.related__line { margin-top: 8px; font-size: var(--fs-body-s); color: var(--body); }
.related__list a:hover .related__name, .related__list a:focus-visible .related__name { transform: translateX(8px); }
@media (max-width: 899px) { .related__list { grid-template-columns: 1fr; } }

.close { padding-block: var(--section); }
.close .grid { row-gap: 28px; align-items: end; }
.close h2 { grid-column: 1 / span 8; font-size: clamp(2.125rem, 4.2vw, 4rem); line-height: 1.05; max-width: 22ch; }
.close__end { grid-column: 9 / -1; }
.close__end p { color: var(--on-night); margin-bottom: 18px; }
.close__email { display: inline-block; margin-top: 18px; font-family: var(--sans); font-size: var(--fs-body); color: var(--on-night) !important; text-decoration: none; border-bottom: 1px solid var(--on-night-muted); }
.close__email:hover { border-bottom-color: var(--on-night); }
@media (max-width: 899px) { .close h2, .close__end { grid-column: 1 / -1; } }

/* quote / firm statement */
.statement { margin: 0; }
.statement blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  line-height: 1.25;
  color: var(--ink);
  hanging-punctuation: first;
  max-width: 32ch;
  text-wrap: pretty;
}
.statement figcaption { margin-top: 20px; }
.on-night .statement blockquote { color: var(--on-night); }

/* ================================================================ transaction switch */
.switch__tabs { position: relative; display: flex; gap: clamp(24px, 4vw, 56px); border-bottom: 1px solid var(--rule-night); }
.switch__tabs [role="tab"] {
  background: none; border: 0; padding: 12px 0 16px;
  min-height: 48px;
  font-family: var(--serif);
  font-size: var(--fs-m);
  color: var(--on-night-muted);
  transition: color var(--t-ui) var(--ease-stone);
}
.switch__tabs [role="tab"][aria-selected="true"] { color: var(--on-night); }
.switch__tabs [role="tab"]:hover { color: var(--on-night); }
.switch__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--on-night); transition: transform var(--t-state) var(--ease-weight), width var(--t-state) var(--ease-weight); }
html:not(.js) .switch__tabs { display: none; }
.switch__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(40px, 4vw, 64px); padding-top: clamp(40px, 4vw, 64px); }
.switch__panel-title { grid-column: 1 / -1; font-size: var(--fs-l); }
html.js .switch.is-enhanced .switch__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.switch__item { display: block; border-top: 1px solid var(--rule-night); padding-top: 18px; }
.switch__num { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.06em; color: var(--on-night-muted); padding-top: 7px; }
.switch__item h3 { font-size: var(--fs-m); }
.switch__item h3 a { color: var(--on-night); text-decoration: none; }
.switch__item h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.switch__tagline { font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.35; color: var(--on-night); margin: 10px 0 12px; max-width: 34ch; }
.switch__item p:not(.switch__tagline) { font-size: var(--fs-body-s); max-width: 46ch; }
@media (max-width: 899px) { .switch__panel { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .switch__panel.is-entering .switch__item {
    animation: switch-in var(--t-reveal) var(--ease-weight) both;
    animation-delay: calc(var(--i, 0) * var(--stagger));
  }
  @keyframes switch-in {
    from { clip-path: inset(0 100% 0 0); transform: translateX(var(--dx, 2%)); }
    to { clip-path: inset(0 0 0 0); transform: none; }
  }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 500ms; animation-timing-function: var(--ease-stone); }

/* ================================================================ page transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(carried) { animation-duration: 700ms; animation-timing-function: var(--ease-stone); }
  ::view-transition-old(carried), ::view-transition-new(carried) { height: 100%; object-fit: cover; overflow: hidden; }
}

/* ================================================================ HOME */
.home-hero { padding-top: clamp(32px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 112px); }
.home-hero .grid { align-items: end; row-gap: 32px; }
.home-hero__text { grid-column: 1 / span 8; padding-bottom: clamp(8px, 2vw, 32px); }
.home-hero h1 { font-size: clamp(2.125rem, 4.15vw, 4rem); max-width: 22ch; letter-spacing: -0.02em; }
.home-hero__sub { margin-top: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); }
.home-hero__sub p { grid-column: 3 / span 6; font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45; color: var(--body); max-width: 40ch; }
.home-hero__sub .action { grid-column: 3 / span 5; justify-self: start; margin-top: 16px; }
.home-hero__photo { grid-column: 9 / -1; margin-right: calc(-1 * var(--margin)); aspect-ratio: 4 / 5; max-height: calc(100dvh - var(--header-h) - 64px); min-height: 420px; }
@media (min-width: 1441px) { .home-hero__photo { margin-right: calc(-1 * (var(--margin) + (100vw - var(--max)) / 2)); } }
@media (max-width: 899px) {
  .home-hero__text, .home-hero__photo { grid-column: 1 / -1; }
  .home-hero__photo { order: -1; margin-inline: calc(-1 * var(--margin)); min-height: 0; aspect-ratio: 16 / 9; max-height: 30vh; }
  .home-hero { padding-top: 0; }
  .home-hero .grid { row-gap: 24px; }
  .home-hero__sub { display: block; }
  .home-hero__sub p { max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .home-hero__photo { clip-path: inset(0 100% 0 0); animation: sweep var(--t-opening) var(--ease-weight) 150ms forwards; }
  html.motion .home-hero__photo img { filter: brightness(0.8); animation: light var(--t-opening) var(--ease-stone) 150ms forwards; }
  html.motion .home-hero h1 .word-mask > span { transform: translateY(110%); animation: rise var(--t-reveal) var(--ease-settle) forwards; animation-delay: calc(300ms + var(--i, 0) * 55ms); }
  html.motion .home-hero__sub > * { opacity: 0; animation: fade-in 900ms var(--ease-stone) 1000ms forwards; }
  @keyframes sweep { to { clip-path: inset(0 0 0 0); } }
  @keyframes light { to { filter: brightness(1); } }
  @keyframes rise { to { transform: none; } }
  @keyframes fade-in { to { opacity: 1; } }
}

/* ledger of facts */
.ledger { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ledger .grid { align-items: end; padding-block: clamp(40px, 5vw, 72px); row-gap: 32px; }
.ledger__fig { grid-column: span 3; white-space: nowrap; margin: 0; font-family: var(--serif); font-feature-settings: "lnum", "tnum"; color: var(--ink); font-size: clamp(3.5rem, 8.2vw, 8.5rem); line-height: 0.9; letter-spacing: -0.03em; }
.ledger__fig span { display: block; white-space: normal; margin-top: 14px; font-size: var(--fs-lead); font-style: italic; letter-spacing: 0; color: var(--body); line-height: 1.3; }
.ledger__fig + .ledger__fig { grid-column: span 4; }
.ledger__facts { grid-column: span 5; font-family: var(--serif); font-size: var(--fs-lead); color: var(--ink); line-height: 1.45; }
.ledger__facts p { max-width: 32ch; margin: 0; }
.ledger__facts p + p { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
@media (max-width: 899px) { .ledger__fig, .ledger__fig + .ledger__fig { grid-column: span 6; } .ledger__facts { grid-column: 1 / -1; } }

.home-position .lead { max-width: 30ch; font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.25; }
.home-position .col-main p:not(.lead) { margin-top: 24px; }

/* pillar sequence */
.seq__intro h2 { max-width: 30ch; margin-bottom: clamp(48px, 6vw, 96px); }
.seq__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.seq__steps { grid-column: 1 / span 6; }
.seq__step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding-block: 48px; border-top: 1px solid var(--rule); }
.seq__step h3 { font-size: clamp(2.25rem, 4vw, 3.75rem); transition: color var(--t-state) var(--ease-stone); }
.seq__step h3 a { color: inherit; text-decoration: none; }
.seq__step h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.seq__when { font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: var(--body); margin: 10px 0 22px; }
.seq__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 24px; font-size: var(--fs-body-s); }
.seq__links a { display: inline-flex; min-height: 32px; align-items: center; }
.seq__inline { display: none; margin-top: 28px; aspect-ratio: 3 / 2; }
.seq__frame { grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + 5vh); height: calc(90vh - var(--header-h)); align-self: start; }
.seq__frame .photo { position: absolute; inset: 0; }
.seq__progress { position: absolute; left: -20px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.seq__progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(var(--p, 0.3333)); transition: transform var(--t-reveal) var(--ease-weight); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .seq__frame .photo { clip-path: inset(100% 0 0 0); transition: clip-path var(--t-reveal) var(--ease-weight); }
  html.motion .seq__frame .photo img { transform: scale(1.06); transition: transform calc(var(--t-reveal) + 500ms) var(--ease-stone); }
  html.motion .seq__frame .photo.is-active, html.motion .seq__frame .photo.was-active { clip-path: inset(0 0 0 0); }
  html.motion .seq__frame .photo.is-active img { transform: none; }
  html.motion .seq__frame .photo.was-active { transition: none; }
  @media (min-width: 900px) { html.motion .seq__step:not(.is-active) h3 { color: var(--muted); } }
}
html:not(.motion) .seq__frame { display: none; }
html:not(.motion) .seq__steps { grid-column: 1 / -1; }
html:not(.motion) .seq__step { min-height: 0; }
html:not(.motion) .seq__inline { display: block; }
@media (max-width: 899px) {
  .seq__frame { display: none; }
  .seq__steps { grid-column: 1 / -1; }
  .seq__step { min-height: 0; }
  .seq__inline { display: block; }
}

/* interrupting photograph */
.interrupt .photo { aspect-ratio: 21 / 9; max-height: 88vh; width: 100%; }

.home-tx h2 { max-width: 20ch; margin-bottom: clamp(32px, 4vw, 56px); }
.home-tx .statement { margin-top: clamp(72px, 8vw, 128px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.home-tx .statement blockquote, .home-tx .statement figcaption { grid-column: 3 / span 8; }
.home-tx__more { margin-top: 40px; }
@media (max-width: 899px) { .home-tx .statement blockquote, .home-tx .statement figcaption { grid-column: 1 / -1; } }

/* approach on a drawn rule */
.rule-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(48px, 5vw, 72px); padding-top: 44px; }
.rule-steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: left; }
.rule-steps li { position: relative; }
.rule-steps li::before { content: ""; position: absolute; top: -48px; left: 0; width: 9px; height: 9px; background: var(--ink); transition: transform var(--t-state) var(--ease-settle), opacity var(--t-state); }
.rule-steps h3 { font-size: var(--fs-m); margin-bottom: 12px; }
.rule-steps p { font-size: var(--fs-body-s); max-width: 30ch; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.motion .rule-steps::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    html.motion .rule-steps li::before { animation: mark linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
    html.motion .rule-steps li:nth-child(2)::before { animation-range: entry 55% cover 50%; }
    html.motion .rule-steps li:nth-child(3)::before { animation-range: entry 70% cover 55%; }
    html.motion .rule-steps li:nth-child(4)::before { animation-range: entry 85% cover 55%; }
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes mark { from { transform: scale(0); } 60% { transform: scale(0); } to { transform: scale(1); } }
  }
  @supports not (animation-timeline: view()) {
    html.motion .rule-steps::before { transform: scaleX(0); transition: transform 1600ms var(--ease-weight); }
    html.motion .rule-steps li::before { transform: scale(0); }
    html.motion .rule-steps.is-drawn::before { transform: scaleX(1); }
    html.motion .rule-steps.is-drawn li::before { transform: scale(1); }
  }
}
@media (max-width: 899px) { .rule-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 539px) {
  .rule-steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 28px; }
  .rule-steps::before { top: 0; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; transform-origin: top; }
  .rule-steps li::before { top: 8px; left: -28px; }
  @media (prefers-reduced-motion: no-preference) { @keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } } }
}

/* audiences */
.audiences h2 { max-width: 30ch; margin-bottom: clamp(40px, 4vw, 64px); }
.audiences__col { grid-column: span 6; border-top: 1px solid var(--rule); padding-top: 28px; }
.audiences__col h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); max-width: 18ch; margin-bottom: 16px; }
@media (max-width: 899px) { .audiences__col { grid-column: 1 / -1; } .audiences .grid { row-gap: 48px; } }

/* case index */
.case-index { list-style: none; margin: clamp(40px, 4vw, 64px) 0 0; padding: 0; }
.case-index a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 28px 0; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; align-items: baseline; }
.case-index li:last-child a { border-bottom: 1px solid var(--rule); }
.case-index__n { grid-column: span 2; font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.06em; color: var(--muted); }
.case-index__t { grid-column: 3 / span 5; font-family: var(--serif); font-size: var(--fs-l); color: var(--ink); line-height: 1.1; transition: transform var(--t-state) var(--ease-stone); }
.case-index__s { grid-column: 8 / -1; color: var(--body); }
.case-index a:hover .case-index__t, .case-index a:focus-visible .case-index__t { transform: translateX(12px); }
@media (max-width: 899px) { .case-index__n, .case-index__t, .case-index__s { grid-column: 1 / -1; } .case-index__t, .case-index__s { margin-top: 6px; } }

/* ================================================================ PILLAR pages (three first viewports) */
.pillar-head { padding-top: clamp(32px, 5vw, 72px); }
.pillar-head h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); letter-spacing: -0.02em; }
.pillar-head .lead { max-width: 40ch; }
.pillar-head .action { margin-top: 20px; }

/* Strategy: headline across the full width, photograph below at 21:9 */
.pillar-head--strategy { padding-bottom: clamp(40px, 5vw, 72px); }
.pillar-head--strategy h1 { max-width: 26ch; }
.pillar-head__sub { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(24px, 3vw, 40px); }
.pillar-head__sub .lead { grid-column: 6 / span 6; }
.pillar-head__sub .action { grid-column: 6 / span 6; justify-self: start; }
.pillar-photo { width: 100%; max-height: 78vh; }
@media (max-width: 899px) { .pillar-head__sub .lead, .pillar-head__sub .action { grid-column: 1 / -1; } }

/* Funding: tall photograph left, text right */
.pillar-head--funding { padding-bottom: var(--section-tight); }
.pillar-head--funding .grid { align-items: end; row-gap: 32px; }
.pillar-head--funding .pillar-head__photo { grid-column: 1 / span 5; aspect-ratio: 2 / 3; margin-left: calc(-1 * var(--margin)); max-height: calc(100dvh - var(--header-h) - 48px); }
.pillar-head--funding .pillar-head__text { grid-column: 7 / -1; padding-bottom: 8px; }
.pillar-head--funding h1 { font-size: clamp(2.25rem, 4vw, 3.75rem); max-width: 22ch; }
.pillar-head--funding .lead { margin-top: 28px; }
.pillar-head--funding .credit { margin-top: 40px; }
@media (max-width: 899px) {
  .pillar-head--funding .pillar-head__photo { grid-column: 1 / -1; margin-inline: calc(-1 * var(--margin)); aspect-ratio: 4 / 3; max-height: 50vh; }
  .pillar-head--funding .pillar-head__text { grid-column: 1 / -1; }
}

/* Transition: opens on night, framed 3:2 photograph */
.pillar-head--transition { padding-block: clamp(48px, 6vw, 104px) var(--section-tight); }
.pillar-head--transition .grid { align-items: center; row-gap: 40px; }
.pillar-head--transition .pillar-head__text { grid-column: 1 / span 6; }
.pillar-head--transition .lead { margin-top: 28px; }
.pillar-head--transition .pillar-head__photo { grid-column: 7 / -1; }
.pillar-head__credit { grid-column: 7 / -1; margin-top: -24px; }
@media (max-width: 899px) { .pillar-head--transition .pillar-head__text, .pillar-head--transition .pillar-head__photo, .pillar-head__credit { grid-column: 1 / -1; } .pillar-head__credit { margin-top: -28px; } }

/* service index with hover and focus previews */
.svc-index__title { font-size: clamp(1.75rem, 2.8vw, 2.75rem); max-width: 30ch; margin-bottom: clamp(32px, 4vw, 56px); }
.svc-index__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.svc-index__list { grid-column: 1 / span 7; }
.svc-index__list li a {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding: 26px 0 28px;
  border-top: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.svc-index__name { font-family: var(--serif); font-size: var(--fs-m); line-height: 1.15; color: var(--ink); transition: transform var(--t-state) var(--ease-stone); }
.svc-index__line { font-size: var(--fs-body-s); color: var(--body); }
.svc-index__list li a { transition: border-color var(--t-state) var(--ease-stone); }
.svc-index__list li a:hover, .svc-index__list li a:focus-visible { border-top-color: var(--green); }
.svc-index__list li a:hover .svc-index__name, .svc-index__list li a:focus-visible .svc-index__name { transform: translateX(10px); color: var(--green-text); }
.on-night .svc-index__list li a:hover, .on-night .svc-index__list li a:focus-visible { border-top-color: var(--green-light); }
.on-night .svc-index__list li a:hover .svc-index__name { color: var(--green-light); }
.svc-index__frame { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h) - 64px); }
.svc-index__frame .photo { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--ease-stone); }
.svc-index__frame .photo.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .svc-index__frame .photo img { transform: scale(1.03); transition: transform 900ms var(--ease-stone); }
  html.motion .svc-index__frame .photo.is-on img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .svc-index__frame .photo { transition: none; } }
.on-night .svc-index__list li a { border-top-color: var(--rule-night); }
.on-night .svc-index__name { color: var(--on-night); }
.on-night .svc-index__line { color: var(--on-night-muted); }
@media (max-width: 1023px), (hover: none) {
  .svc-index__frame { display: none; }
  .svc-index__list { grid-column: 1 / -1; }
}
@media (max-width: 639px) { .svc-index__list li a { grid-template-columns: 1fr; row-gap: 8px; } }

/* ================================================================ SERVICE pages */
.svc-head { padding-top: clamp(32px, 4.5vw, 64px); padding-bottom: var(--section-tight); }
.svc-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; }
.svc-head__meta { grid-column: 1 / span 3; border-top: 1px solid var(--ink); padding-top: 14px; }
.svc-head__name { font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.005em; }
.svc-head__where { margin-top: 10px; font-size: var(--fs-body-s); color: var(--muted); }
.svc-head__where a { color: var(--muted); }
.svc-head__tagline { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(2.375rem, 4.6vw, 4.5rem); line-height: 1.06; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; max-width: none; }
.svc-head__lead .lead { max-width: 40ch; }
.svc-head__lead .action { margin-top: 16px; }
.svc-head__credit { margin-top: 10px; }

/* strategy services: photograph right of the tagline */
.svc-head--strategy .svc-head__tagline { grid-column: 4 / span 6; grid-row: 1; }
.svc-head--strategy .svc-head__lead { grid-column: 4 / span 5; }
.svc-head--strategy .svc-head__photo { grid-column: 10 / -1; grid-row: 1 / span 2; aspect-ratio: 4 / 5; margin-right: calc(-1 * var(--margin)); align-self: start; }
.svc-head--strategy .svc-head__credit { text-align: right; }
/* funding services: photograph left, tagline right */
.svc-head--funding .svc-head__meta { grid-column: 7 / -1; grid-row: 1; }
.svc-head--funding .svc-head__photo { grid-column: 1 / span 5; grid-row: 1 / span 3; aspect-ratio: 2 / 3; margin-left: calc(-1 * var(--margin)); }
.svc-head--funding .svc-head__tagline { grid-column: 7 / -1; grid-row: 2; }
.svc-head--funding .svc-head__lead { grid-column: 7 / -1; grid-row: 3; align-self: end; }
/* transition services: tagline across, photograph full width below */
.svc-head--transition .svc-head__tagline { grid-column: 4 / -1; grid-row: 1; max-width: 22ch; }
.svc-head--transition .svc-head__lead { grid-column: 4 / span 6; }
.svc-head--transition .svc-head__photo { grid-column: 1 / -1; aspect-ratio: 21 / 9; margin-inline: calc(-1 * var(--margin)); margin-top: 24px; }
@media (min-width: 1441px) {
  .svc-head--strategy .svc-head__photo { margin-right: calc(-1 * (var(--margin) + (100vw - var(--max)) / 2)); }
  .svc-head--funding .svc-head__photo { margin-left: calc(-1 * (var(--margin) + (100vw - var(--max)) / 2)); }
}
@media (max-width: 899px) {
  .svc-head__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .svc-head__photo { margin-inline: calc(-1 * var(--margin)) !important; aspect-ratio: 4 / 3 !important; order: -1; }
  .svc-head--transition .svc-head__photo { order: 0; }
}
.word-mask { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; padding-right: 0.06em; margin-right: -0.06em; }
.word-mask > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  html.motion [data-reveal="words"] .word-mask > span { transform: translateY(110%); transition: transform var(--t-reveal) var(--ease-settle); transition-delay: calc(200ms + var(--i, 0) * 55ms); }
  html.motion [data-reveal="words"].is-in .word-mask > span { transform: none; }
}
.svc-result .chapter__body h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }

/* ================================================================ ABOUT */
/* About cover: the photograph is pinned full width and the text panel slides up over it on a solid paper ground.
   The frame follows the photograph's own proportion (about 1.86:1), capped so a strip of the panel shows in the
   first screen: at any window width the whole Peace Palace is in view before the panel covers it. */
.about-cover { position: relative; }
.about-facade {
  position: sticky; top: var(--header-h); z-index: 0; width: 100%;
  height: min(calc(100svh - var(--header-h) - 140px), calc(100vw / 1.86));
  min-height: min(360px, calc(100svh - var(--header-h) - 140px));
}
.about-facade img { object-position: 50% 62%; }
.about-head { position: relative; z-index: 1; background: var(--paper); padding-block: clamp(40px, 4.5vw, 64px) var(--section-tight); }
.about-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* while the panel rises, the photograph lifts slowly, keeping the building in the narrowing window */
    html.motion .about-facade img { height: 118%; object-position: 50% 50%; animation: cover-drift linear both; animation-timeline: scroll(root); animation-range: 0px 70svh; }
    @keyframes cover-drift { from { transform: translateY(-15.3%); } to { transform: translateY(-30%); } }
  }
}
@media (max-width: 899px) {
  .about-facade { height: min(56svh, 520px); min-height: 0; }
  .about-facade img { object-position: 38% 62%; }
  html.motion .about-facade img { object-position: 38% 50%; }
}
.about-head .grid { row-gap: 20px; }
.about-head__credit { grid-column: 1 / span 3; margin: 0; }
.about-head__text { grid-column: 5 / -1; }
.about-head__text h1 { font-size: clamp(2.375rem, 4.4vw, 4.25rem); max-width: 26ch; }
.about-head__text .lead { margin-top: 28px; max-width: 44ch; }
@media (max-width: 899px) { .about-head__credit, .about-head__text { grid-column: 1 / -1; } }
.about-facts .side-head { margin-bottom: 32px; }
.about-facts__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; margin: 0; }
.about-facts__list > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.about-facts__list dt { font-family: var(--serif); font-size: var(--fs-m); color: var(--ink); line-height: 1.15; }
.about-facts__list dt.figure { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.025em; }
.about-facts__list dd { margin: 10px 0 0; font-family: var(--serif); font-style: italic; color: var(--body); font-size: var(--fs-lead); }
@media (max-width: 899px) { .about-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .about-facts__list { grid-template-columns: 1fr; } }
.credits { margin-top: 28px; font-size: var(--fs-body-s); max-width: none; }
.credits li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--gutter); padding: 10px 0; border-top: 1px solid var(--rule); }
.credits__subject { color: var(--ink); }
.credits__by { color: var(--body); }
@media (max-width: 639px) { .credits li { grid-template-columns: 1fr; } }

/* ================================================================ TRANSACTIONS */
.tx-head { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.tx-head h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); max-width: 24ch; letter-spacing: -0.02em; }
.tx-head__ledger { display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--ink); padding-top: 20px; }
.tx-head__side { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: var(--ink); }
.tx-head__side .side-head { display: block; font-style: normal; margin-bottom: 6px; }
.tx-head__side--post { text-align: right; }
.tx-head__rule { background: var(--ink); }
.tx-head__lead { margin-top: clamp(32px, 4vw, 48px); }
.tx-photo { width: 100%; max-height: 72vh; }
.tx-statements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; margin-top: clamp(80px, 9vw, 144px); padding-top: 40px; border-top: 1px solid var(--rule-night); }
.tx-statements .statement blockquote { font-size: clamp(1.375rem, 2.2vw, 2rem); }
.tx-statements .statement:nth-child(2) { margin-top: clamp(40px, 6vw, 112px); }
@media (max-width: 899px) { .tx-statements { grid-template-columns: 1fr; } .tx-statements .statement:nth-child(2) { margin-top: 0; } .tx-head__ledger { grid-template-columns: 1fr; row-gap: 16px; } .tx-head__rule { display: none; } .tx-head__side--post { text-align: left; } }

/* ================================================================ APPROACH */
.approach-head { padding-top: clamp(32px, 5vw, 72px); padding-bottom: var(--section-tight); }
.approach-head .grid { align-items: end; row-gap: 32px; }
.approach-head__text { grid-column: 1 / span 8; }
.approach-head__text h1 { font-size: clamp(2.5rem, 4.8vw, 4.5rem); max-width: 24ch; letter-spacing: -0.02em; }
.approach-head__text .lead { margin-top: 28px; }
.approach-head__photo { grid-column: 10 / -1; aspect-ratio: 1 / 1; }
.approach-head > .credit { text-align: right; }
@media (max-width: 899px) { .approach-head__text, .approach-head__photo { grid-column: 1 / -1; } .approach-head__photo { aspect-ratio: 3 / 2; } .approach-head > .credit { text-align: left; } }
.rule-steps--plan { margin-top: clamp(72px, 8vw, 128px); }
.rule-steps__h { display: inline-block; font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1.1; color: var(--ink); text-decoration: none; margin-bottom: 14px; }
.rule-steps__h:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.approach-chapters .chapter { padding-block: clamp(40px, 5vw, 72px); }
.approach-steward__title { font-size: clamp(2.25rem, 4.4vw, 4.25rem) !important; max-width: 20ch !important; }

/* ================================================================ AUDIENCE pages */
.aud-head { padding-top: clamp(32px, 4vw, 56px); padding-bottom: var(--section-tight); }
.aud-head .grid { align-items: end; row-gap: 32px; }
.aud-head h1 { font-size: clamp(2.375rem, 4vw, 3.875rem); letter-spacing: -0.02em; max-width: 22ch; }
.aud-head .lead { margin-top: 28px; }
.aud-head .action { margin-top: 18px; }
.aud-head .credit { margin-top: 40px; }
.aud-head--investors .aud-head__photo { grid-column: 1 / span 5; margin-left: calc(-1 * var(--margin)); max-height: calc(100dvh - var(--header-h) - 40px); }
.aud-head--investors .aud-head__text { grid-column: 7 / -1; }
.aud-head--founders .aud-head__text { grid-column: 1 / span 6; }
.aud-head--founders .aud-head__photo { grid-column: 8 / -1; margin-right: calc(-1 * var(--margin)); max-height: calc(100dvh - var(--header-h) - 40px); }
@media (max-width: 899px) {
  .aud-head__photo, .aud-head__text { grid-column: 1 / -1 !important; }
  .aud-head__photo { margin-inline: calc(-1 * var(--margin)) !important; aspect-ratio: 4 / 3 !important; order: -1; }
}
.situations__title { max-width: 30ch; margin-bottom: clamp(40px, 5vw, 80px); }
.situations__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.situations__steps { grid-column: 1 / span 6; }
.situations__frame { grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + 6vh); height: calc(84vh - var(--header-h)); align-self: start; }
.situations--mirror .situations__steps { grid-column: 7 / -1; grid-row: 1; }
.situations--mirror .situations__frame { grid-column: 1 / span 5; grid-row: 1; }
.situation { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding-block: 40px; border-top: 1px solid var(--rule); }
.situation h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); margin: 10px 0 16px; max-width: 20ch; transition: color var(--t-state) var(--ease-stone); }
.situation__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: var(--fs-body-s); }
.situation__inline { display: none; aspect-ratio: 3 / 2; margin-top: 24px; }
.situations__frame .photo { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-stone); }
.situations__frame .photo.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .situations__frame .photo img { transform: scale(1.04); transition: transform 1400ms var(--ease-stone); }
  html.motion .situations__frame .photo.is-active img { transform: none; }
  @media (min-width: 900px) { html.motion .situation:not(.is-active) h3 { color: var(--muted); } }
}
html:not(.motion) .situations__frame { display: none; }
html:not(.motion) .situations__steps { grid-column: 1 / -1 !important; }
html:not(.motion) .situation { min-height: 0; }
html:not(.motion) .situation__inline { display: block; }
@media (max-width: 899px) {
  .situations__frame { display: none; }
  .situations__steps { grid-column: 1 / -1 !important; }
  .situation { min-height: 0; }
  .situation__inline { display: block; }
}

/* ================================================================ CASE STUDIES */
.cases-head { padding-block: clamp(32px, 5vw, 72px) var(--section-tight); }
.cases-head h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); max-width: 24ch; letter-spacing: -0.02em; }
.cases-head .lead { margin-top: 28px; }
.case__photo { width: 100%; margin-bottom: clamp(48px, 5vw, 80px); overflow: visible; background: none; }
.case__photo picture { display: block; aspect-ratio: 21 / 9; overflow: hidden; background: var(--stone-deep); }
@media (max-width: 639px) { .case__photo picture { aspect-ratio: 4 / 3; } }
.case__head { align-items: baseline; row-gap: 12px; }
.case__n { grid-column: 1 / span 3; margin: 0; padding-top: 14px; border-top: 1px solid var(--rule-strong); font-family: var(--serif); font-variant-caps: all-small-caps; font-size: var(--fs-side); font-weight: 500; line-height: 1.3; color: var(--ink); letter-spacing: 0.055em; }
.on-night .case__n { border-top-color: var(--on-night-muted); }
.case__title { grid-column: 4 / -1; }
.case__title h2 { font-size: clamp(2.125rem, 3.8vw, 3.5rem); max-width: 24ch; }
.case__scope { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: var(--ink); }
.case__tags { margin-top: 10px; font-size: var(--fs-body-s); }
.case__doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(24px, 2.2vw, 32px); }
.case__row { grid-column: 4 / span 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--gutter); padding: 18px 0 22px; border-top: 1px solid var(--rule); }
.case__row .side-head { padding-top: 3px; }
.case__request { grid-column: 4 / span 7; margin-top: 24px; }
.on-night .case__row { border-top-color: var(--rule-night); }
.on-night .case__scope { color: var(--on-night); }
.on-night .case__n { color: var(--on-night-muted); }
@media (max-width: 899px) {
  .case__n, .case__title, .case__row, .case__request { grid-column: 1 / -1; }
  .case__row { grid-template-columns: 1fr; row-gap: 6px; }
}

/* ================================================================ CONTACT */
.contact { padding-block: clamp(32px, 4vw, 64px) var(--section); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; }
.contact__side { grid-column: 1 / span 5; }
.contact__side h1 { font-size: clamp(2.375rem, 4.2vw, 4rem); max-width: 18ch; letter-spacing: -0.02em; }
.contact__side .lead { margin-top: 24px; max-width: 34ch; }
.contact__email { margin-top: 36px; font-family: var(--serif); font-size: clamp(1.375rem, 2vw, 1.875rem); }
.contact__email a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; word-break: break-word; }
.contact__offices-head { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--rule-strong); }
.contact__offices { margin-top: 10px; font-family: var(--serif); font-size: var(--fs-lead); color: var(--ink); }
.contact__form-wrap { grid-column: 7 / -1; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; align-self: start; }
.contact__side { align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.contact__side .letter { margin-top: 40px; }
.contact__offices-block .contact__offices-head { margin-top: 0; }
@media (max-width: 899px) { .contact__side, .contact__form-wrap { grid-column: 1 / -1; position: static; } .contact__side .letter { display: none; } }
.enquiry { display: grid; row-gap: 26px; background: var(--stone); padding: clamp(24px, 3vw, 40px); }
.field { display: grid; row-gap: 8px; }
.field label { font-size: var(--fs-ui); font-weight: 500; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--paper);
  font-size: 17px;
  color: var(--ink);
  transition: border-color var(--t-ui) var(--ease-stone), box-shadow var(--t-ui) var(--ease-stone);
}
.field textarea { resize: vertical; min-height: 160px; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-bottom-color: var(--green); box-shadow: inset 0 -1px 0 var(--green); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: var(--error); box-shadow: inset 0 -1px 0 var(--error); }
.field__hint { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.field__error { margin: 0; font-size: var(--fs-body-s); color: var(--error); font-weight: 500; }
.enquiry__summary { border-top: 2px solid var(--error); padding: 14px 18px 16px; background: var(--paper); }
.enquiry__summary-title { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.enquiry__summary a { color: var(--error); }
.enquiry__note { margin: 0; font-size: var(--fs-caption); color: var(--muted); }
.enquiry .button { justify-self: start; }
.enquiry__done { background: var(--stone); padding: clamp(24px, 3vw, 40px); }
.enquiry__done h2 { font-size: var(--fs-l); margin-bottom: 16px; }
.letter { border-top: 1px solid var(--ink); padding-top: 16px; font-size: var(--fs-body-s); color: var(--body); }
.letter__label { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: var(--fs-side); color: var(--ink); margin-bottom: 12px; }
.letter__line { display: grid; grid-template-columns: 6em minmax(0, 1fr); align-items: start; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.letter__line span { color: var(--muted); }
.letter__line b { font-weight: 500; color: var(--ink); }
.letter__body { margin-top: 14px; font-family: var(--serif); font-size: 1.125rem; color: var(--ink); white-space: pre-wrap; min-height: 4.5em; max-width: none; }
html:not(.js) .letter { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .letter b, html.motion .letter__body { transition: opacity var(--t-ui) var(--ease-stone); }
}
.contact__photo { width: 100%; max-height: 60vh; }

/* ================================================================ LEGAL and 404 */
.legal { padding-block: clamp(32px, 5vw, 72px) var(--section); }
.legal h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: clamp(40px, 5vw, 72px); }
.legal__body { max-width: 980px; }
.legal__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--gutter); padding: 20px 0 24px; border-top: 1px solid var(--rule); }
.legal__row h2.side-head { font-size: var(--fs-side); }
.legal__more { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media (max-width: 639px) { .legal__row { grid-template-columns: 1fr; row-gap: 8px; } }
.notfound__photo { width: 100%; aspect-ratio: 21 / 9; max-height: 56vh; }
.notfound { padding-block: clamp(40px, 5vw, 72px) var(--section); }
.notfound .grid { row-gap: 32px; align-items: end; }
.notfound__text { grid-column: 1 / span 7; }
.notfound__text h1 { font-size: clamp(2.375rem, 4.4vw, 4rem); max-width: 22ch; }
.notfound__text .lead { margin-top: 20px; }
.notfound__links { grid-column: 9 / -1; }
.notfound__links li a { display: block; padding: 12px 0; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: var(--fs-m); color: var(--ink); text-decoration: none; }
.notfound__links li a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (max-width: 899px) { .notfound__text, .notfound__links { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .notfound__photo { clip-path: inset(0 100% 0 0); animation: sweep var(--t-opening) var(--ease-weight) 100ms forwards; }
  html.motion .notfound__photo img { filter: brightness(0.75); animation: light var(--t-opening) var(--ease-stone) 100ms forwards; }
}

/* transactions: the enfilade beside the "one team" text */
.tx-team .grid { align-items: center; row-gap: 32px; }
.tx-team__photo { grid-column: 1 / span 5; aspect-ratio: 2 / 3; max-height: 88vh; }
.tx-team__text { grid-column: 7 / span 5; }
.tx-team__text h2 { font-size: clamp(1.875rem, 3vw, 2.75rem); margin: 14px 0 20px; max-width: 22ch; }
.tx-team__text .credit { margin-top: 32px; }
@media (max-width: 899px) { .tx-team__photo, .tx-team__text { grid-column: 1 / -1; } .tx-team__photo { aspect-ratio: 4 / 5; } }

/* phones: margin side heads would stack above their heading as eyebrows, so they give way to the heading */
@media (max-width: 899px) {
  .chapter__side, .case__n, .approach-head ~ * .chapter__side, #approach .col-side, .svc-index .col-side, .tx-team__text > .side-head, .situation > .side-head { display: none; }
  .chapter__body { border-top: 1px solid var(--rule); padding-top: 18px; }
}

/* very small phones: long Dutch compounds and the address must not push the page sideways */
a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 359px) {
  h1, .home-hero h1, .aud-head h1, .pillar-head h1, .tx-head h1, .cases-head h1, .approach-head__text h1, .about-head__text h1, .contact__side h1, .notfound__text h1, .legal h1 { font-size: 1.875rem; }
  .svc-head__tagline { font-size: 1.875rem; }
  .ledger__fig { font-size: 2.875rem; }
  p:not(.lead):not(.switch__tagline), li, dd { overflow-wrap: break-word; hyphens: auto; }
  .lead, .switch__tagline { overflow-wrap: break-word; }
}

/* the result band follows a chapter: keep its own top inset */
.chapter + .chapter.ground-stone { padding-top: var(--section-tight); }
.skip-link:hover { color: var(--paper); }
.nav-panel__line { min-height: 2.9em; }

/* language switch inside the phone menu */
.lang--menu { margin-top: 8px; gap: 20px; }
.lang--menu a { min-height: 44px; }

/* service pages: the result section follows the hero closely; on phones the tagline leads, the name follows */
.svc-head { padding-bottom: var(--s8); }
.svc-head + .chapter { padding-top: var(--s7); }
@media (max-width: 899px) {
  .svc-head__photo { order: -2 !important; }
  .svc-head__tagline { order: -1; }
  .svc-head__meta { order: 0; }
  .svc-head__lead { order: 1; }
  .svc-head__meta { border-top: 0; padding-top: 0; }
  .svc-head--transition .svc-head__photo { order: 2 !important; }
}

/* contact confirmation with the composed message */
.text-button { background: none; border: 0; padding: 12px 4px; min-height: 44px; font-family: var(--sans); font-size: var(--fs-ui); font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.text-button:hover { color: var(--green-text); }
.enquiry__copy { display: grid; row-gap: 10px; margin-top: 24px; }
.enquiry__copy label { font-size: var(--fs-ui); font-weight: 500; color: var(--ink); }
.enquiry__copy textarea { width: 100%; min-height: 200px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; background: var(--paper); font-size: 15px; line-height: 1.55; color: var(--ink); resize: vertical; }
.enquiry__copy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 0; }
.enquiry__note { margin-bottom: -6px; }

/* photography credits page */
.credits-page__lead { margin: -24px 0 clamp(32px, 4vw, 56px); }
.credits-page .credits { max-width: 1100px; margin-top: 0; }
@media (max-width: 479px) { .legal h1 { font-size: 2rem; } }

/* ABOUT: offices as a full-width night band, cities in a horizontal row, photographs as a diptych */
.offices { padding-top: clamp(36px, 3.5vw, 52px); padding-bottom: 0; }
.offices__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 14px; }
.offices__head .side-head { grid-column: 1 / span 3; padding-top: 14px; border-top: 1px solid var(--on-night-muted); align-self: start; }
.offices__head h2 { grid-column: 4 / span 8; font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.08; max-width: 32ch; }
.offices__head .lead { grid-column: 4 / span 6; margin-top: 4px; color: var(--on-night-muted); }
.offices__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(24px, 2.2vw, 32px); }
.offices__city { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--on-night-muted); }
.offices__name { font-family: var(--serif); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -0.015em; color: var(--on-night); }
.offices__where { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: var(--fs-side); color: var(--on-night-muted); max-width: 22ch; line-height: 1.35; }
.offices__photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(36px, 3.5vw, 52px); } /* equal to the band's top padding: the text sits centred between top edge and photographs */
.offices__photo { overflow: visible; background: none; }
.offices__photo > picture { display: block; height: auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night-raised); }
.offices__photo figcaption { margin: 0; padding: 8px var(--margin) 14px; color: var(--on-night-muted); }
.offices__photo + .offices__photo figcaption { padding-left: 14px; padding-right: 14px; }
.offices__photo figcaption a { color: var(--on-night-muted); }
@media (max-width: 899px) {
  .offices__head .side-head { display: none; }
  .offices__head h2, .offices__head .lead { grid-column: 1 / -1; }
  .offices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .offices__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offices__photo figcaption, .offices__photo + .offices__photo figcaption { padding: 8px 12px 14px; }
}
@media (max-width: 420px) { .offices__list { grid-template-columns: 1fr; } }
.offices + .related { padding-top: var(--s8); }
@media (max-width: 899px) { .offices__photo > picture { aspect-ratio: 4 / 3; } .offices__list { row-gap: 24px; } }

/* pillar service index on phones and touch: each row carries its service's photograph as a thumbnail */
.svc-index__thumb { display: none; }
@media (max-width: 1023px), (hover: none) {
  .svc-index__list li a { grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: start; }
  .svc-index__thumb { display: block; grid-column: 1; grid-row: 1 / span 2; width: 88px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-deep); }
  .svc-index__thumb picture { display: block; width: 100%; height: 100%; }
  .svc-index__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .svc-index__name, .svc-index__line { grid-column: 2; }
}

/* full-width photograph strips that break up long pages (services, approach, transactions) */
.svc-strip, .approach-strip, .tx-strip { width: 100%; max-height: 72vh; }
.approach-strip { margin-top: clamp(24px, 3vw, 48px); }
.approach-strip + .bleed-credit { margin-bottom: clamp(24px, 3vw, 48px); }
.offices__photo figcaption { font-size: 12px; line-height: 1.4; }