/* ==========================================================================
   ASYA — site styles
   Palette from the owner presentation (ASYA_75m_Owner_Presentation_FINAL).
   Values are provisional until /ASYA_BRAND_MASTER_FINAL/ is supplied (to be confirmed).
   ========================================================================== */

:root {
  --paper: #F1F0EE;          /* presentation background */
  --paper-hero: #F4F3EF;     /* ground of the master image */
  --paper-2: #E7ECE8;        /* tinted light scene */
  --ink: #172A27;            /* presentation text */
  --ink-2: #52615D;          /* presentation secondary text — 5.9:1 on paper */
  --deep: #003E31;           /* presentation deep green */
  --night: #0B1A17;          /* darkest scene, derived from ink */
  --night-2: #10231F;
  --green: #147458;          /* presentation mid green — 5.1:1 on paper */
  --accent: #24A783;         /* presentation accent — graphics, or text on dark only */
  --bronze: #B09C66;         /* presentation QA line / review status */
  --mist: #C5D0CA;
  --tint: #DFEAE4;
  --tint-2: #D5DCD8;
  --on-dark: #F1F0EE;
  --on-dark-2: rgba(241, 240, 238, .76);
  --on-dark-3: rgba(241, 240, 238, .6);
  --rule: rgba(23, 42, 39, .14);
  --rule-strong: rgba(23, 42, 39, .3);
  --rule-dark: rgba(241, 240, 238, .14);
  --rule-dark-strong: rgba(241, 240, 238, .32);

  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 88px);
  --maxw: 1840px;
  --header-h: clamp(68px, 5.4vw, 100px);
  --space: clamp(104px, 11vw, 240px);
  --space-s: clamp(56px, 6vw, 120px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --fs-display: clamp(48px, 6.8vw, 156px);
  --fs-h2: clamp(38px, 4.3vw, 96px);
  --fs-h3: clamp(21px, 1.5vw, 32px);
  --fs-lead: clamp(19px, 1.32vw, 28px);
  --fs-body: clamp(16px, .22vw + 15.2px, 19px);
  --fs-small: clamp(14px, .12vw + 13.4px, 16px);
  --fs-label: clamp(11.5px, .12vw + 11px, 13.5px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--night); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.skip-link {
  position: fixed; left: var(--gutter); top: -120px; z-index: 100;
  padding: 14px 18px; background: var(--ink); color: var(--paper); font-size: var(--fs-small);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nowrap { white-space: nowrap; }

/* ---------- Tones ---------- */
.tone-light { background: var(--paper); color: var(--ink); }
.tone-tint { background: var(--paper-2); color: var(--ink); }
.tone-night { background: url("../img/grain.png") repeat, var(--night); color: var(--on-dark); }
.tone-deep {
  background: url("../img/grain.png") repeat,
    radial-gradient(120% 80% at 85% 0%, #0a5040 0%, transparent 55%),
    linear-gradient(180deg, var(--deep) 0%, #002a21 100%);
  color: var(--on-dark);
}
.tone-night ::selection, .tone-deep ::selection { background: var(--accent); color: var(--night); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.scene { position: relative; padding-block: var(--space); }
.scene--tight { padding-block: var(--space-s); }

.section-head {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 24px clamp(24px, 3vw, 64px); margin-bottom: clamp(48px, 6vw, 120px);
}
.section-head > :not(.label) { grid-column: 2; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head > :not(.label) { grid-column: 1; }
}

/* ---------- Type ---------- */
.label {
  display: flex; align-items: center; gap: 14px; align-self: start;
  font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
}
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.tone-night .label, .tone-deep .label, .tone-night .chapter, .tone-deep .chapter { color: var(--on-dark-3); }

.display { font: 400 var(--fs-display)/.98 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.h2 { font: 400 var(--fs-h2)/1.02 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.h3 { font: 500 var(--fs-h3)/1.25 var(--sans); letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
.tone-night .lead, .tone-deep .lead { color: var(--on-dark-2); }
.body { max-width: 62ch; color: var(--ink-2); text-wrap: pretty; }
.tone-night .body, .tone-deep .body { color: var(--on-dark-2); }
.note { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); max-width: 78ch; }
.tone-night .note, .tone-deep .note { color: var(--on-dark-3); }
.serif-i { font-family: var(--serif); font-style: italic; }

/* ---------- Links & buttons ---------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 10px) / 100% 1px no-repeat;
  transition: background-size .7s var(--ease-out);
}
.link-arrow::after {
  content: ""; width: 22px; height: 9px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .7s var(--ease-out);
}
.link-arrow:hover { background-size: 35% 1px; }
.link-arrow:hover::after { transform: translateX(6px); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 56px; padding: 0 30px; border-radius: 999px; border: 1px solid currentColor;
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; background: transparent;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.button__arrow { width: 22px; height: 9px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}
.button:hover .button__arrow { transform: translateX(5px); }
.button--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.button--solid:hover { background: var(--deep); border-color: var(--deep); }
.button--ghost { color: var(--ink); border-color: var(--rule-strong); }
.button--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.button--light { background: var(--on-dark); border-color: var(--on-dark); color: var(--night); }
.button--light:hover { background: transparent; color: var(--on-dark); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 40;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left));
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 48px);
  color: var(--ink);
  transition: transform .7s var(--ease-out), color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease);
  view-transition-name: site-header;
}
.site-header[data-tone="dark"] { color: var(--on-dark); }
.site-header.is-scrolled {
  background: rgba(241, 240, 238, .84); box-shadow: 0 1px 0 var(--rule);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.site-header.is-scrolled[data-tone="dark"] { background: rgba(11, 26, 23, .74); box-shadow: 0 1px 0 var(--rule-dark); }
.site-header.is-hidden { transform: translateY(-100%); }
.menu-open .site-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.brand { display: block; width: clamp(104px, 7.6vw, 168px); flex: none; transition: opacity .7s var(--ease), visibility .7s; }
.brand img { width: 100%; height: auto; }
.brand__light { display: none; }
.site-header[data-tone="dark"] .brand__dark { display: none; }
.site-header[data-tone="dark"] .brand__light { display: block; }
/* Home: the hero carries the master lockup, so the header wordmark waits until it has left view. */
.page-home .site-header:not(.show-brand) .brand { opacity: 0; visibility: hidden; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(22px, 2.3vw, 46px); }
.nav a, .header-cta, .menu-toggle {
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .15em; text-transform: uppercase;
}
.nav a { position: relative; display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; align-items: center; }
.nav__n { font-size: .82em; opacity: .55; letter-spacing: .08em; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  border: 1px solid currentColor; border-radius: 999px;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.header-cta:hover, .header-cta[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.site-header[data-tone="dark"] .header-cta:hover,
.site-header[data-tone="dark"] .header-cta[aria-current="page"] { background: var(--on-dark); color: var(--night); border-color: var(--on-dark); }

.menu-toggle {
  display: none; align-items: center; gap: 14px; min-height: 44px; min-width: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.menu-toggle__icon { width: 26px; height: 10px; position: relative; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 4.25px; transform: rotate(30deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 4.25px; transform: rotate(-30deg); }

@media (max-width: 1180px) {
  .nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 560px) { .header-cta { display: none; } .menu-toggle { margin-left: auto; } }

/* ---------- Menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 35;
  display: grid; grid-template-rows: 1fr auto; gap: 40px;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 5vh) calc(var(--gutter) + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
  background: url("../img/grain.png") repeat, var(--night); color: var(--on-dark);
  overflow-y: auto; opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease);
}
.menu.is-open { opacity: 1; pointer-events: auto; }
.menu__nav li { border-bottom: 1px solid var(--rule-dark); overflow: hidden; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 22px; padding: .32em 0;
  font: 400 clamp(38px, 7vw, 76px)/1.05 var(--serif);
  transform: translateY(40%); opacity: 0;
  transition: transform .9s var(--ease-out), opacity .9s var(--ease-out), color .4s var(--ease);
}
.menu.is-open .menu__nav a { transform: none; opacity: 1; }
.menu.is-open .menu__nav li:nth-child(2) a { transition-delay: .04s; }
.menu.is-open .menu__nav li:nth-child(3) a { transition-delay: .08s; }
.menu.is-open .menu__nav li:nth-child(4) a { transition-delay: .12s; }
.menu.is-open .menu__nav li:nth-child(5) a { transition-delay: .16s; }
.menu.is-open .menu__nav li:nth-child(6) a { transition-delay: .2s; }
.menu.is-open .menu__nav li:nth-child(7) a { transition-delay: .24s; }
.menu__nav a span { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .14em; color: var(--on-dark-3); min-width: 2.4em; }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { color: var(--accent); }
.menu__foot { font: 500 var(--fs-label)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.menu-open { overflow: hidden; }

/* ==========================================================================
   Home — hero (asya_see: ASYA and the Gömböc on a terrace by the sea)
   ========================================================================== */
.hero { position: relative; background: var(--paper-hero); }
.hero__media { position: relative; overflow: hidden; }
.hero__settle, .hero__settle picture { width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__sentinel { position: absolute; left: 0; top: 30%; width: 1px; height: 1px; }
.hero__title { font: 400 clamp(38px, 9vw, 60px)/1 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.hero__sub { margin-top: 18px; max-width: 38ch; color: var(--ink); font-size: var(--fs-body); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 28px; }
.hero__scrim, .scroll-cue { display: none; }
/* Wordmark over the photo. The ASYA painted on the wall is removed from the web copy of
   the picture (tools/build_assets.py), so the brand is set here at menu scale: centred,
   clear of the header above it and of the Gömböc below. */
.hero__wordmark {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(16px, 4.5vw, 24px));
  width: clamp(104px, 30vw, 132px); height: auto;
}
@media (min-width: 700px) {
  .hero__wordmark { top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(16px, 2.2vw, 30px));
    width: clamp(132px, 15vw, 200px); }
}

/* Stacked (phones, tablets, small screens): photo block, text below on ivory. */
.hero__media { height: min(66.667vw, 72svh); }
.hero__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 12%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper-hero));
}
.hero__content { padding: 12px calc(var(--gutter) + env(safe-area-inset-right)) clamp(56px, 10vw, 96px) calc(var(--gutter) + env(safe-area-inset-left)); }
@media (max-width: 699px) {
  /* Phones: centre crop (hero-see-portrait) that keeps the wordmark and the Gömböc whole. */
  .hero__media { height: 60svh; min-height: 380px; }
  .hero__actions .button { width: 100%; }
}

/* Desktop: full-bleed photo, text bottom-left on the terrace, never over the Gömböc.
   The photo is 3:2 and covers the hero, so its rendered width is max(100cqw, 150cqh);
   the Gömböc's left edge sits at 485/1536 of that width, i.e. 18.42% left of centre. */
@media (min-width: 1181px) and (orientation: landscape) {
  .hero { height: 100svh; min-height: 620px; overflow: hidden; container-type: size; }
  .hero__media { position: absolute; inset: 0; height: auto; }
  .hero__media::after { display: none; }
  .hero__content {
    position: absolute; z-index: 2; padding: 0;
    --obj-left: calc(50cqw - .1842 * max(100cqw, 150cqh));
    --col: calc(var(--obj-left) - var(--gutter) - env(safe-area-inset-left) - 32px);
    left: calc(var(--gutter) + env(safe-area-inset-left)); bottom: clamp(28px, 5cqh, 72px);
    width: var(--col);
    opacity: calc(1 - var(--hp, 0) * 1.6);
  }
  .hero__wordmark { width: clamp(168px, 13.5vw, 240px); }   /* ~1/3 of the painted one */
  .hero__title { font-size: clamp(32px, calc(var(--col) / 8.2), 66px); }
  .hero__sub { margin-top: clamp(12px, 1.6cqh, 20px); font-size: clamp(15px, calc(var(--col) / 23), 18px); }
  .hero__actions { display: grid; justify-items: start; gap: 10px; margin-top: clamp(16px, 2.6cqh, 28px); }
  .hero__actions .button { min-height: 50px; padding: 0 22px; gap: 12px; letter-spacing: .1em; font-size: clamp(11.5px, calc(var(--col) / 28), 13.5px); }
  /* A light ivory veil under the text only: it fades out before the Gömböc. */
  .hero__scrim {
    display: block; position: absolute; left: 0; bottom: 0; z-index: 1; pointer-events: none;
    width: calc(50cqw - .1842 * max(100cqw, 150cqh)); height: 78%;
    background: radial-gradient(120% 100% at 0% 100%, rgba(244, 242, 238, .86) 0%, rgba(244, 242, 238, .6) 45%, rgba(244, 242, 238, 0) 82%);
  }
  .scroll-cue {
    display: flex; position: absolute; right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: clamp(28px, 5vh, 64px); z-index: 2;
    align-items: center; gap: 14px;
    font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
    opacity: calc(1 - var(--hp, 0) * 3);
  }
}
.scroll-cue__line { width: 1px; height: 56px; background: var(--rule-strong); position: relative; overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateY(-100%); animation: cue 2.6s var(--ease) 1.4s 1;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* Opening: the cinematic intro of sources/reference/asya-intro-v2.html, first visit of the browsing
   session only. assets/js/intro-gate.js sets html.has-intro before the first paint; main.js plays the
   timeline with the Web Animations API (same keyframes, delays and curves as the prototype), then
   cancels it and removes the class and the overlay. The last frame of every animation is the
   hero's own resting style, so the end of the intro is the hero exactly as it is without it. */
.intro { display: none; }
html.has-intro .intro { display: block; position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.intro__macro {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 40% 45%; opacity: 0;
  /* closest-side: the fade reaches zero on every edge of the frame, so its rectangle can never show
     while it shrinks. (The prototype's 70% ellipse leaves the middle of each side 63% opaque, and on
     a phone its corners do show at 3.1 s.) The solid core runs to 68% so the frame stays as full as
     the prototype's while the macro is large; 75% started to outline the shape on a phone. */
  -webkit-mask: radial-gradient(closest-side, #000 68%, transparent 100%);
          mask: radial-gradient(closest-side, #000 68%, transparent 100%);
}
.intro__dark { position: absolute; inset: 0; background: #070b09; }
.intro__line {
  position: absolute; left: 50%; top: 50%; width: 64vw; height: 1px; margin-left: -32vw;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 225, .95) 50%, transparent);
  box-shadow: 0 0 18px rgba(255, 240, 210, .6);
  transform: scaleX(0); opacity: 0;
}
.intro__bar { position: absolute; left: 0; right: 0; height: 13vh; background: #050807; }
.intro__bar--top { top: 0; }
.intro__bar--bottom { bottom: 0; }
@media (max-aspect-ratio: 1/1) {          /* the prototype's portrait adaptation */
  .intro__bar { height: 9vh; }
  .intro__macro { object-position: 28% 50%; }
}
/* While it plays the hero stands on night, as in the prototype (on a phone that is the text area
   under the photo block too, turning ivory at the end), and its own reveals hand over to the
   timeline instead of running their CSS transitions. */
html.has-intro .hero { background: var(--night); }
html.has-intro .hero__wordmark:not([data-letter]) { opacity: 0; }
html.has-intro .hero [data-reveal],
html.has-intro .hero [data-words] .w > span { transition: none !important; }
html.has-intro .scroll-cue__line::after { animation: none; }   /* the hint plays once the intro is over */
.hero__wordmark[data-letter] { pointer-events: none; }

/* ==========================================================================
   Home — principle (scroll-lit statement)
   ========================================================================== */
.manifesto { height: 240vh; }
.manifesto__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; align-content: center; justify-items: center; gap: clamp(28px, 3vw, 56px);
  padding: 0 var(--gutter); text-align: center;
}
.manifesto__text { font: 400 clamp(42px, 6.4vw, 150px)/1 var(--serif); letter-spacing: -.015em; max-width: 13.5em; text-wrap: balance; }
.manifesto__text .w { opacity: var(--o, .14); transition: opacity .25s linear; }
.manifesto__body { max-width: 54ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--on-dark-2); text-wrap: pretty; opacity: calc((var(--p, 1) - .55) * 3); }
.manifesto__bg { position: absolute; inset: 0; z-index: -1; }
.manifesto__bg picture, .manifesto__bg img { width: 100%; height: 100%; }
.manifesto__bg img { object-fit: cover; object-position: 50% 58%; }
.manifesto__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 50%, rgba(11, 26, 23, .8), rgba(11, 26, 23, .9)); }
@media (max-width: 700px) { .manifesto { height: 200vh; } }

/* ---------- Credentials (Home, under the hero) ---------- */
.creds { padding-block: clamp(40px, 5vw, 88px); }
.creds__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px clamp(24px, 3vw, 64px); }
.creds__grid { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.cred { padding: 24px 24px 0 0; }
.cred + .cred { padding-left: 24px; border-left: 1px solid var(--rule); }
.cred__num { font: 400 clamp(44px, 4.4vw, 96px)/.95 var(--serif); color: var(--deep); letter-spacing: -.02em; }
.cred__num small { font-size: .45em; margin-left: .04em; color: var(--green); letter-spacing: 0; }
.cred__text { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); max-width: 26ch; }
.creds__lead {
  grid-column: 2; padding-top: 24px; border-top: 1px solid var(--rule-strong);
  font: 400 clamp(24px, 2.2vw, 42px)/1.22 var(--serif); letter-spacing: -.01em; color: var(--ink); max-width: 32ch;
}
.creds__yards { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.creds__list { font: 400 clamp(21px, 1.6vw, 32px)/1.3 var(--serif); color: var(--ink); }
.creds__list-label { margin-right: 16px; font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); vertical-align: .2em; }
.creds__note { font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) {
  .creds__inner { grid-template-columns: 1fr; }
  .creds__grid, .creds__lead, .creds__yards { grid-column: 1; }
}
@media (max-width: 640px) {
  .creds__grid { grid-template-columns: 1fr; }
  .cred + .cred { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 20px; }
}

/* ==========================================================================
   Organisation chart (presentation slide 4)
   ========================================================================== */
.org { --org-head: 64px; --org-row: 60px; --gap: 28px; }
.org__top { display: grid; justify-items: center; gap: var(--gap); }
.org__node { position: relative; text-align: center; padding: 18px 32px; }
.org__node--owner { background: var(--tint); color: var(--deep); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.01em; }
.org__node--rep { background: var(--deep); color: var(--on-dark); min-width: min(100%, 460px); }
.org__node--rep strong { display: block; font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.01em; }
.org__node--rep span { font-size: var(--fs-small); color: var(--on-dark-2); }
.org__node--rep::before, .org__node--rep::after {
  content: ""; position: absolute; left: 50%; height: var(--gap); border-left: 1px solid var(--rule-strong);
}
.org__node--rep::before { bottom: 100%; }
.org__node--rep::after { top: 100%; }

.org__branches {
  position: relative; margin-top: calc(var(--gap) * 2);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 6vw, 120px) minmax(0, 1fr);
  grid-template-rows: var(--org-head) repeat(5, minmax(var(--org-row), auto));
}
.org__branches::before {
  content: ""; position: absolute; top: calc(var(--gap) * -1); left: 22%; right: 22%; height: var(--gap);
  border: 1px solid var(--rule-strong); border-bottom: 0;
}
.org__branch { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.org__branch--human { grid-column: 1; }
.org__branch--ai { grid-column: 3; }
.org__head {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px;
  font-weight: 600; font-size: clamp(15px, 1.05vw, 19px);
}
.org__branch--human .org__head { background: var(--tint); color: var(--deep); }
.org__branch--ai .org__head { background: var(--deep); color: var(--on-dark); }
.org__rows { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }
.org__row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--rule);
}
.org__branch--ai .org__row { grid-template-columns: 1fr; }
.org__row dt { font-weight: 600; }
.org__row dd { color: var(--ink-2); font-size: var(--fs-small); }
.org__row--qa dd { color: var(--ink); }
/* Dashed bronze line: human quality review and corrective feedback, project team -> agents. */
.org__qa { grid-column: 2; grid-row: 1 / 5; position: relative; }
.org__qa::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--org-head) / 2); bottom: calc(var(--org-row) / 2);
  border-left: 1.5px dashed var(--bronze);
}
.org__qa::after {
  content: ""; position: absolute; left: 0; width: 50%; bottom: calc(var(--org-row) / 2);
  border-top: 1.5px dashed var(--bronze);
}
.org__qa span {
  position: absolute; left: 50%; right: 0; top: calc(var(--org-head) / 2); border-top: 1.5px dashed var(--bronze);
}
.org__qa span::after {
  content: ""; position: absolute; right: -1px; top: -5px;
  border: 4.5px solid transparent; border-left: 7px solid var(--bronze); border-right: 0;
}
.org__legend { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; font-size: var(--fs-small); color: var(--ink-2); }
.org__legend span { display: inline-flex; align-items: center; gap: 10px; }
.org__legend span::before { content: ""; width: 28px; border-top: 1.5px dashed var(--bronze); }
.org figcaption { margin-top: 20px; }
.more { margin-top: clamp(40px, 4vw, 64px); }
.more--center { text-align: center; }

@media (max-width: 900px) {
  .org__branches { display: block; margin-top: calc(var(--gap) * 2); }
  .org__branches::before { left: 50%; right: auto; width: 0; }
  .org__branch { display: block; }
  .org__branch + .org__qa + .org__branch { margin-top: 40px; }
  .org__head { min-height: var(--org-head); }
  .org__rows { display: block; }
  .org__qa { display: none; }
  .org__row--qa::after {
    content: "Human QA → agents"; grid-column: 1 / -1; justify-self: start; padding: 2px 8px;
    border: 1px dashed var(--bronze); color: #6E5B27; font-size: 12px; font-weight: 500; white-space: nowrap;
  }
}

/* ==========================================================================
   Service areas (presentation slide 11)
   ========================================================================== */
.svc { border-top: 1px solid var(--rule-strong); counter-reset: svc; }
.svc__item { border-bottom: 1px solid var(--rule-strong); }
.svc__summary {
  display: grid; grid-template-columns: clamp(48px, 6vw, 120px) minmax(0, 1fr) auto 44px;
  align-items: center; gap: 16px; padding: clamp(22px, 2.2vw, 40px) 0;
  cursor: pointer; list-style: none;
}
.svc__summary::-webkit-details-marker { display: none; }
.svc__n { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .14em; color: var(--green); }
.svc__name { font: 400 clamp(30px, 3.1vw, 68px)/1.04 var(--serif); letter-spacing: -.01em; transition: transform .7s var(--ease-out), color .4s var(--ease); }
.svc__cov { font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.svc__toggle { width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: 50%; position: relative; transition: background-color .4s var(--ease), border-color .4s; }
.svc__toggle::before, .svc__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: rotate .5s var(--ease-out); }
.svc__toggle::after { rotate: 90deg; }
.svc__details[open] .svc__toggle::after { rotate: 0deg; }
.svc__summary:hover .svc__name { transform: translateX(12px); color: var(--green); }
.svc__summary:hover .svc__toggle { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.svc__body {
  display: grid; grid-template-columns: clamp(48px, 6vw, 120px) minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
  padding: 0 0 clamp(28px, 3vw, 48px);
}
.svc__acts { grid-column: 2; display: grid; gap: 12px; }
.svc__acts li { display: flex; gap: 18px; font-size: var(--fs-lead); line-height: 1.35; }
.svc__acts li span { font: 500 var(--fs-label)/2.2 var(--sans); letter-spacing: .08em; color: var(--ink-2); min-width: 2.6em; }
.svc__meta { grid-column: 3; display: grid; gap: 14px; align-content: start; font-size: var(--fs-small); color: var(--ink-2); }
.svc__meta dt { font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.svc__details::details-content { block-size: 0; overflow: hidden; transition: block-size .7s var(--ease-out), content-visibility .7s allow-discrete; }
.svc__details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
@media (max-width: 800px) {
  .svc__summary { grid-template-columns: 40px minmax(0, 1fr) 44px; }
  .svc__cov { display: none; }
  .svc__body { grid-template-columns: 1fr; padding-left: 56px; }
  .svc__acts, .svc__meta { grid-column: 1; }
}

/* ==========================================================================
   Programme: phases + indicative programme chart (slide 7)
   ========================================================================== */
.phases { display: grid; grid-template-columns: 8fr 31fr 12fr; border-top: 1px solid var(--rule-dark-strong); }
.phase { padding: 28px clamp(12px, 1.6vw, 32px) 0 0; position: relative; }
.phase + .phase { padding-left: clamp(12px, 1.6vw, 32px); border-left: 1px solid var(--rule-dark); }
.phase__m { font: 400 clamp(40px, 4vw, 92px)/1 var(--serif); color: var(--accent); letter-spacing: -.01em; }
.phase__t { margin-top: 14px; font-size: var(--fs-body); font-weight: 500; max-width: 22ch; }
.phase__d { margin-top: 10px; font-size: var(--fs-small); color: var(--on-dark-3); max-width: 32ch; }
.tone-light .phases, .tone-tint .phases { border-top-color: var(--rule-strong); }
.phases__example { margin-bottom: 16px; color: var(--on-dark-2); }
.tone-light .phase + .phase, .tone-tint .phase + .phase { border-left-color: var(--rule); }
.tone-light .phase__m, .tone-tint .phase__m { color: var(--green); }
.tone-light .phase__d, .tone-tint .phase__d { color: var(--ink-2); }
@media (max-width: 800px) {
  .phases { grid-template-columns: 1fr; }
  .phase + .phase { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-dark); margin-top: 28px; }
  .tone-light .phase + .phase, .tone-tint .phase + .phase { border-top-color: var(--rule); }
}

.included { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 12px; margin-top: clamp(40px, 4vw, 72px); }
.included__label { font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-right: 12px; }
.included li { padding: 10px 18px; border-radius: 999px; background: var(--tint); color: var(--deep); font-size: var(--fs-small); font-weight: 500; }
.tone-night .included li, .tone-deep .included li { background: rgba(36, 167, 131, .16); color: var(--on-dark); }

.gantt { --months: 51; --label-w: clamp(180px, 17vw, 300px); container-type: inline-size; }
.gantt__scale, .gantt__row { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); gap: 24px; }
.gantt__phases { position: relative; height: 34px; }
.gantt__phases span {
  position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--months) * 100%); width: calc((var(--e) - var(--s)) / var(--months) * 100%);
  display: flex; align-items: center; padding-left: 10px; border-left: 1.5px solid var(--accent);
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .12em; color: var(--green);
}
.gantt__axis { position: relative; height: 34px; border-bottom: 4px solid var(--ink-2); }
.gantt__axis span {
  position: absolute; bottom: 10px; left: calc(var(--m) / var(--months) * 100%); translate: -2px 0;
  font: 500 12px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2);
}
.gantt__axis span.is-key { color: var(--ink); font-weight: 600; }
.gantt__body { position: relative; }
.gantt__lines { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--label-w) + 24px); pointer-events: none; }
.gantt__lines span { position: absolute; top: 0; bottom: 0; left: calc(var(--m) / var(--months) * 100%); border-left: 1px solid var(--rule); }
.gantt__lines span.is-key { border-left: 1.5px solid var(--accent); }
.gantt__row { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.gantt__label p { font-weight: 600; line-height: 1.3; }
.gantt__label span { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--ink-2); }
.gantt__track { position: relative; display: grid; gap: 8px; align-content: center; }
.gantt__lane { position: relative; height: 30px; }
.bar {
  position: absolute; top: 0; bottom: 0; left: calc(var(--s) / var(--months) * 100%); width: calc((var(--e) - var(--s)) / var(--months) * 100%);
  display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap;
  font-size: 13px; font-weight: 500; background: var(--tint-2); color: var(--ink);
  transform-origin: left; transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms);
}
.bar--light { background: var(--tint); color: var(--deep); }
.bar--accent { background: var(--accent); color: var(--night); }
.bar--dark { background: #747F7B; color: var(--paper); }
/* Chief Engineer lane: a line rather than a filled bar (separately funded), without the gold accent. */
.bar--line { background: none; border-top: 2px solid var(--deep); color: var(--deep); align-items: flex-start; padding-top: 6px; }
.js .gantt:not(.is-in) .bar { transform: scaleX(0); }
.gantt__foot { margin-top: 24px; }
@container (max-width: 760px) {
  .gantt__scale { display: none; }
  .gantt__lines { display: none; }
  .gantt__row { grid-template-columns: 1fr; gap: 14px; }
  .gantt__lane { height: auto; display: grid; gap: 12px; }
  .bar {
    position: relative; left: auto; width: auto; display: block; padding: 0; background: none; color: var(--ink);
    white-space: normal; font-size: 14px; border: 0;
  }
  .bar::before { content: attr(data-range); display: block; font-size: 12px; color: var(--ink-2); letter-spacing: .04em; }
  .bar::after {
    content: ""; display: block; height: 8px; margin-top: 6px;
    margin-left: calc(var(--s) / var(--months) * 100%); width: calc((var(--e) - var(--s)) / var(--months) * 100%);
    background: var(--tint-2); box-shadow: 0 0 0 100vmax transparent;
  }
  .bar--light::after { background: var(--mist); }
  .bar--accent::after { background: var(--accent); }
  .bar--dark::after { background: #747F7B; }
  .bar--line::after { background: var(--deep); height: 2px; }
}

/* Home: compressed programme bar */
.programme-bar { display: grid; grid-template-columns: 8fr 31fr 12fr; gap: 4px; margin-top: clamp(40px, 4vw, 72px); }
.programme-bar span { height: 6px; background: var(--rule-dark-strong); transform-origin: left; transition: transform 1.4s var(--ease-out); }
.programme-bar span:nth-child(2) { background: var(--accent); transition-delay: .15s; }
.programme-bar span:nth-child(3) { background: var(--on-dark); transition-delay: .3s; }
.js .programme-bar:not(.is-in) span { transform: scaleX(0); }
.programme-scale { display: flex; justify-content: space-between; margin-top: 14px; font: 500 12px/1 var(--sans); letter-spacing: .1em; color: var(--on-dark-3); }

/* ==========================================================================
   Cinema — full-bleed image that opens as it enters
   ========================================================================== */
.cinema { position: relative; min-height: 118svh; display: grid; align-items: end; overflow: hidden; background: var(--night); color: var(--on-dark); }
.cinema__frame {
  position: absolute; inset: 0;
  clip-path: inset(calc((1 - var(--p, 1)) * 10%) calc((1 - var(--p, 1)) * 14%) round calc((1 - var(--p, 1)) * 28px));
}
.cinema__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.04 - var(--p, 1) * .04)); }
.cinema__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 26, 23, .5) 0%, rgba(11, 26, 23, .55) 40%, rgba(11, 26, 23, .92) 100%); }
.cinema__content { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(64px, 10vh, 160px); max-width: 1500px; }
.cinema__quote { font: 400 clamp(40px, 5.2vw, 124px)/1.02 var(--serif); letter-spacing: -.015em; max-width: 15em; text-wrap: balance; }
.cinema__note { margin-top: clamp(20px, 2vw, 36px); color: var(--on-dark-2); max-width: 48ch; }
.cinema .link-arrow { margin-top: 28px; }

/* ==========================================================================
   Owner dashboard — illustrative interface (slide 3)
   ========================================================================== */
.device { max-width: 1240px; margin-inline: auto; }
.device__bezel {
  padding: clamp(8px, 1vw, 16px); border-radius: clamp(20px, 2.6vw, 44px);
  background: linear-gradient(145deg, #2a2d2c, #0d0f0e 40%, #1c1f1e);
  box-shadow: 0 80px 140px -60px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.dash {
  border-radius: clamp(12px, 1.8vw, 30px); overflow: hidden; color: #ECEAE2;
  background: radial-gradient(90% 70% at 80% 0%, #0f4a3c 0%, transparent 60%), linear-gradient(170deg, #083b30, #04251d 70%);
  display: grid; grid-template-rows: auto 1fr auto; aspect-ratio: 16 / 10;
  font-size: clamp(12px, 1.05vw, 17px);
}
.dash__top { display: flex; align-items: center; justify-content: space-between; padding: 3.2% 4.2% 0; }
.dash__top img { width: clamp(64px, 7vw, 110px); height: auto; }
.dash__reports { display: flex; gap: 1.6em; font-size: .9em; color: rgba(236, 234, 226, .8); }
.dash__reports span + span { padding-left: 1.6em; border-left: 1px solid rgba(236, 234, 226, .25); }
.dash__body { display: grid; grid-template-columns: 23% 1fr; gap: 4%; padding: 5% 4.2% 0 0; min-height: 0; }
.dash__nav { display: grid; align-content: start; gap: .4em; }
.dash__tab {
  text-align: left; background: none; border: 0; cursor: pointer; color: rgba(236, 234, 226, .78);
  padding: .9em 1.2em .9em 2.1em; border-left: 2px solid transparent; font: inherit; min-height: 44px;
}
.dash__tab[aria-selected="true"] { background: rgba(255, 255, 255, .07); border-left-color: #C9C3AE; color: #F4F1E8; }
.dash__tab:hover { color: #F4F1E8; }
.dash__tab:focus-visible { outline-offset: -2px; }
.dash__panel { min-width: 0; }
.dash__title { font: 400 clamp(22px, 3.3vw, 54px)/1.08 var(--sans); letter-spacing: -.02em; margin-bottom: 4.5%; }
.dash-card {
  position: relative; border: 1px solid rgba(236, 234, 226, .16); border-radius: clamp(10px, 1.2vw, 18px);
  padding: 4.5% 4.8%; overflow: hidden; background: rgba(4, 30, 24, .5);
}
.dash-card::before {
  content: ""; position: absolute; inset: 0 0 0 45%;
  background: radial-gradient(90% 120% at 100% 0%, rgba(36, 167, 131, .22), transparent 65%),
              radial-gradient(60% 80% at 100% 100%, rgba(201, 195, 174, .12), transparent 70%);
  pointer-events: none;
}
.dash-card > * { position: relative; }
.dash-card__t { font-size: clamp(18px, 2.3vw, 36px); letter-spacing: -.015em; }
.chip { display: inline-flex; align-items: center; gap: .6em; margin-top: .9em; padding: .45em 1em; border-radius: 999px; font-size: .9em; }
.chip::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: currentColor; }
.chip--review { border: 1px solid rgba(201, 176, 112, .7); background: rgba(176, 156, 102, .2); color: #E6CF95; }
.chip--open { border: 1px solid rgba(36, 167, 131, .6); background: rgba(36, 167, 131, .15); color: #8FE0C3; }
.chip--wait { border: 1px solid rgba(236, 234, 226, .35); color: rgba(236, 234, 226, .85); }
.dash-card__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 5%; padding-top: 4%; border-top: 1px solid rgba(236, 234, 226, .14); }
.dash-card__grid div + div { padding-left: 6%; border-left: 1px solid rgba(236, 234, 226, .14); }
.dash-card__grid dt { font-size: .78em; letter-spacing: .06em; color: rgba(236, 234, 226, .7); }
.dash-card__grid dt.upper { text-transform: uppercase; letter-spacing: .12em; }
.dash-card__grid dd { margin-top: .6em; font-size: 1.05em; }
.dash-list { display: grid; gap: .6em; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 1.1em; border: 1px solid rgba(236, 234, 226, .14); border-radius: .8em; }
.dash-list .chip { margin-top: 0; white-space: nowrap; }
.dash-phases { display: grid; gap: .8em; }
.dash-phases li { display: grid; grid-template-columns: 6em 1fr; gap: 1em; align-items: center; }
.dash-phases b { font-weight: 500; color: #8FE0C3; }
.dash-phases i { display: block; height: .4em; border-radius: 1em; background: rgba(236, 234, 226, .14); position: relative; overflow: hidden; font-style: normal; }
.dash-phases i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #24A783; }
.dash-fin { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.dash-fin li { padding: .9em 1.1em; border: 1px solid rgba(236, 234, 226, .14); border-radius: .8em; }
.dash-fin span { display: block; font-size: .8em; color: rgba(236, 234, 226, .7); }
.dash-fin strong { display: block; margin-top: .4em; font-weight: 500; letter-spacing: .04em; color: rgba(236, 234, 226, .55); }
.device--compact .dash { aspect-ratio: auto; }
.device--compact .dash__body { padding: 4% 4.2% 4.2% 0; }
.device--compact .dash__title { margin-bottom: 3%; }
.device--compact .dash__panel { min-height: 15em; }
.device--wide { max-width: 1100px; }
.dash-fin__note { margin-top: .9em; font-size: .85em; color: rgba(236, 234, 226, .72); }
.device figcaption { margin: 20px auto 0; max-width: 60ch; text-align: center; }
@media (max-width: 760px) {
  .dash { aspect-ratio: auto; font-size: 14px; }
  .dash__top { padding: 18px 18px 0; }
  .dash__reports { display: none; }
  .dash__body { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .dash__nav { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dash__tab { padding: .7em .9em; border-left: 0; border-bottom: 2px solid transparent; }
  .dash__tab[aria-selected="true"] { border-bottom-color: #C9C3AE; }
  .dash-card { padding: 20px; }
  .dash-card__grid { grid-template-columns: 1fr; gap: 16px; }
  .dash-card__grid div + div { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Leadership (Home)
   ========================================================================== */
.leader { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 64px); align-items: start; padding: clamp(32px, 3vw, 56px) 0; border-block: 1px solid var(--rule-strong); }
.leader__years { font: 400 clamp(72px, 8vw, 180px)/.85 var(--serif); color: var(--green); letter-spacing: -.03em; }
.leader__years small { display: block; margin-top: 12px; font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.leader__name { font: 400 clamp(40px, 3.8vw, 84px)/1 var(--serif); letter-spacing: -.01em; }
.leader__role { margin-top: 14px; font-weight: 500; }
.leader__facts li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.leader__facts li:first-child { padding-top: 0; }
.leader__facts strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--deep); }
.specialists { margin-top: clamp(32px, 3.4vw, 56px); }
.specialists .team-compact { margin-top: 16px; }
.specialists__lead { max-width: 34ch; margin-bottom: clamp(24px, 2.6vw, 44px); }
.team-compact.specialists__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 40px); margin-top: clamp(28px, 3vw, 48px); }
.team-compact li { display: grid; gap: 4px; align-content: start; padding-top: 16px; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--ink-2); }
.team-compact strong { font: 500 var(--fs-h3)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.team-compact__years { font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
@media (max-width: 1000px) {
  .leader { grid-template-columns: 1fr 1fr; }
  .team-compact.specialists__list { grid-template-columns: 1fr 1fr; }
  .leader__facts { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .leader, .team-compact, .team-compact.specialists__list { grid-template-columns: 1fr; }
}

/* Team page: editorial rows */
.bio { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 64px); padding: clamp(48px, 5vw, 96px) 0; border-top: 1px solid var(--rule-strong); }
.bio:last-child { border-bottom: 1px solid var(--rule-strong); }
.bio__years { font: 400 clamp(80px, 9vw, 210px)/.85 var(--serif); letter-spacing: -.03em; color: var(--green); }
.bio__years small { display: block; margin-top: 14px; font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.bio__name { font: 400 clamp(38px, 3.6vw, 80px)/1 var(--serif); letter-spacing: -.01em; }
.bio__role { margin-top: 14px; font-weight: 500; }
.bio__focus { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-small); }
.bio__exp { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.bio__exp div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bio__exp dt { font-weight: 600; color: var(--deep); }
.bio__exp dd { color: var(--ink-2); }
.bio--lead { border-top: 0; }
.bio__story { display: grid; gap: 28px; }
.bio__text { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.bio__years--tbc { font-size: clamp(48px, 4.6vw, 104px); }
.team-rest .label { margin-bottom: 8px; }
@media (max-width: 1000px) {
  .bio { grid-template-columns: 1fr 1fr; }
  .bio__exp, .bio__story { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bio { grid-template-columns: 1fr; }
  .bio__exp div { grid-template-columns: 1fr; gap: 4px; }
}

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
.role { padding-top: 24px; border-top: 1px solid var(--rule-dark-strong); }
.role__t { font: 400 clamp(28px, 2.4vw, 50px)/1.05 var(--serif); }
.role p { margin-top: 12px; color: var(--on-dark-2); font-size: var(--fs-small); max-width: 36ch; }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } }

/* ==========================================================================
   Closing scene — Gömböc under window light
   ========================================================================== */
.cta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 4vw, 96px); padding-block: var(--space-s) 0; }
.cta__content { padding-bottom: var(--space-s); }
.cta__content .display { margin-top: 28px; }
.cta__content .lead { margin-top: clamp(20px, 2vw, 36px); }
.cta__content .button { margin-top: clamp(32px, 3vw, 56px); }
.cta__media { align-self: end; }
.cta__media img {
  width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 66%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 66%, transparent 100%);
}
@media (max-width: 900px) {
  .cta { grid-template-columns: 1fr; }
  .cta__media { order: -1; max-width: 520px; justify-self: center; }
}

/* ==========================================================================
   Inner page hero
   ========================================================================== */
.page-hero {
  position: relative; min-height: min(100svh, 1180px); overflow: hidden;
  display: grid; align-content: end;
  padding: calc(var(--header-h) + 14vh) 0 clamp(56px, 9vh, 140px);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero--short { min-height: 0; padding-bottom: 0; }
.chapter {
  display: flex; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 56px);
  font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.chapter b { font-weight: 500; color: var(--green); }
.tone-night .chapter b, .tone-deep .chapter b { color: var(--accent); }
.page-hero__title { max-width: 11.5em; }
.page-hero__lead { margin-top: clamp(28px, 3vw, 56px); }
.page-hero--split .page-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 96px); align-items: end; }
.page-hero__figure--photo img { aspect-ratio: 11 / 8; object-fit: cover; -webkit-mask-image: none !important; mask-image: none !important; }
.ground-photo { background: #F5F4EF; } /* matches the ground of asya_main_logo */
.ground-photo .cta { padding-bottom: clamp(24px, 3vw, 56px); }
.photo-soft img, .page-hero__figure.photo-soft img {
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 80%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 80%, transparent 100%);
}
.page-hero__figure img {
  width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 66%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 66%, transparent 100%);
}
.page-hero--art .page-hero__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 96px); align-items: center; }
.page-hero--art .page-hero__title { font-size: clamp(44px, 5vw, 112px); }
.page-hero__drawing { pointer-events: none; }
.page-hero__drawing img { width: 100%; height: auto; opacity: .5; }
.page-hero--image { min-height: 100svh; color: var(--on-dark); background: var(--night); }
.page-hero--image .page-hero__bg { position: absolute; inset: -8% 0; }
.page-hero--image .page-hero__bg picture { height: 100%; }
.page-hero--image .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--image .page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 26, 23, .55), rgba(11, 26, 23, .45) 35%, rgba(11, 26, 23, .9)); }
.page-hero--image .chapter { color: var(--on-dark-2); }
.page-hero--image .chapter b { color: var(--accent); }
.page-hero--image .lead { color: var(--on-dark-2); }
@media (max-width: 900px) {
  .page-hero { min-height: 88svh; }
  .page-hero--split .page-hero__inner, .page-hero--art .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__drawing { order: -1; max-width: 460px; }
  .page-hero__figure { order: -1; max-width: 460px; }
}

/* Contact: a shorter introduction (review ASYA-C07), so that the form and a direct contact are
   on the first screen at 1440x900 and the form begins on the first screen of a phone. */
.page-hero.page-hero--compact { min-height: 0; padding: calc(var(--header-h) + clamp(24px, 5vh, 64px)) 0 clamp(20px, 3vh, 40px); }
.page-hero--compact .chapter { margin-bottom: clamp(16px, 1.6vw, 28px); }
.page-hero--compact .page-hero__title { font-size: clamp(40px, 4.4vw, 96px); max-width: 13em; }
.page-hero--compact .page-hero__lead { margin-top: clamp(14px, 1.4vw, 24px); max-width: 46ch; }
.page-hero--compact .page-hero__figure { justify-self: end; width: min(100%, 360px); }
.contact-scene { padding-top: clamp(24px, 3vw, 48px); }
@media (max-width: 900px) {
  .page-hero.page-hero--compact { min-height: 0; }
  .page-hero--compact .page-hero__figure { justify-self: start; width: min(56%, 220px); }
}

/* ==========================================================================
   Principles, scope, stages, flow, agents, security
   ========================================================================== */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.principle { padding: clamp(28px, 3vw, 56px) clamp(16px, 2.4vw, 48px) 0 0; }
.principle + .principle { padding-left: clamp(16px, 2.4vw, 48px); border-left: 1px solid var(--rule); }
.principle__t { font: 400 clamp(40px, 4vw, 92px)/1 var(--serif); letter-spacing: -.015em; }
.principle p { margin-top: 20px; color: var(--ink-2); max-width: 36ch; }
.principle cite { display: block; margin-top: 16px; font: 500 var(--fs-label)/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--green); }
@media (max-width: 900px) {
  .principles { grid-template-columns: 1fr; }
  .principle + .principle { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 32px; }
}

.scope { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 120px); }
.scope__t { font: 500 var(--fs-h3)/1.2 var(--sans); padding-bottom: 18px; border-bottom: 1px solid var(--rule-strong); }
.scope__t--in { color: var(--deep); }
.scope li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.scope li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--accent); }
.scope__col--out li::before { background: none; border: 1px solid var(--ink-2); }
.scope__foot { margin-top: clamp(32px, 4vw, 64px); font: 400 clamp(26px, 2.4vw, 48px)/1.15 var(--serif); }
@media (max-width: 800px) { .scope { grid-template-columns: 1fr; } }

.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); position: relative; }
.stage { position: relative; padding-top: 44px; }
.stage::before { content: ""; position: absolute; top: 7px; left: 0; right: calc(-1 * clamp(20px, 3vw, 56px)); border-top: 1px solid var(--rule-dark-strong); }
.stage:last-child::before { right: 0; }
.stage::after { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--night); border: 1.5px solid var(--accent); }
.stage:first-child::after { background: var(--accent); }
.stage__t { font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.stage p { margin-top: 14px; font: 400 clamp(24px, 2vw, 40px)/1.15 var(--serif); }
@media (max-width: 800px) {
  .stages { grid-template-columns: 1fr; }
  .stage::before { right: auto; bottom: -1px; top: 15px; left: 7px; border-top: 0; border-left: 1px solid var(--rule-dark-strong); height: calc(100% + clamp(20px, 3vw, 56px)); }
  .stage { padding: 0 0 0 44px; }
  .stage:last-child::before { display: none; }
}

.flow { position: relative; --fp: 0; display: grid; gap: clamp(40px, 5vw, 88px); padding-left: clamp(64px, 8vw, 150px); }
.flow::before, .flow::after { content: ""; position: absolute; left: clamp(18px, 2.4vw, 44px); top: 12px; bottom: 12px; width: 1px; }
.flow::before { background: var(--rule-dark-strong); }
.flow::after { background: var(--accent); transform: scaleY(var(--fp)); transform-origin: top; }
.flow__step { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 64px); }
.flow__step::before {
  content: ""; position: absolute; top: 8px; left: calc(-1 * clamp(64px, 8vw, 150px) + clamp(18px, 2.4vw, 44px) - 7px);
  width: 15px; height: 15px; border-radius: 50%; background: var(--night); border: 1.5px solid var(--rule-dark-strong);
  transition: background-color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.flow__step.is-active::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 8px rgba(36, 167, 131, .14); }
.flow__n { display: block; margin-bottom: 12px; font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; color: var(--accent); }
.flow__t { font: 400 clamp(34px, 3.4vw, 76px)/1.02 var(--serif); letter-spacing: -.01em; }
.flow__d p { color: var(--on-dark-2); }
.flow__d p + p { margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chips li { padding: 8px 16px; border: 1px solid var(--rule-dark-strong); border-radius: 999px; font-size: var(--fs-small); }
.flow__step--gate .flow__t { color: var(--accent); }
@media (max-width: 800px) {
  .flow { padding-left: 48px; }
  .flow::before, .flow::after { left: 14px; }
  .flow__step { grid-template-columns: 1fr; }
  .flow__step::before { left: -41px; }
}

.agents { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule-dark-strong); }
.agents--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agent { padding: 28px 20px 0 0; }
.agent + .agent { padding-left: 20px; border-left: 1px solid var(--rule-dark); }
.agent span { display: block; font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .14em; color: var(--accent); }
.agent p { margin-top: 18px; font: 400 clamp(24px, 1.9vw, 38px)/1.1 var(--serif); }
@media (max-width: 1000px) {
  .agents { grid-template-columns: 1fr 1fr; }
  .agent:nth-child(odd) { padding-left: 0; border-left: 0; }
  .agent:nth-child(n + 3) { border-top: 1px solid var(--rule-dark); margin-top: 20px; }
}

.security { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 120px); align-items: start; }
.security__name { font: 400 clamp(40px, 4vw, 88px)/1 var(--serif); }
.security__role { margin-top: 12px; color: var(--accent); font-weight: 500; }
.security__desc { margin-top: 20px; color: var(--on-dark-2); max-width: 40ch; }
.perimeter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.perimeter__node { display: grid; place-items: center; min-height: 110px; padding: 16px; text-align: center; background: var(--deep); font-weight: 600; }
.perimeter__base { grid-column: 1 / -1; margin-top: 30px; padding: 22px; text-align: center; background: rgba(223, 234, 228, .1); border: 1px solid var(--rule-dark-strong); position: relative; }
.perimeter__base::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: -31px; height: 30px; border: 1px solid var(--rule-dark-strong); border-bottom: 0; }
.perimeter__base strong { display: block; font-weight: 600; }
.perimeter__base span { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--on-dark-3); }
@media (max-width: 900px) { .security { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .perimeter { grid-template-columns: 1fr; } .perimeter__base::before { display: none; } }

.contexts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 56px); }
.context { padding: clamp(28px, 3vw, 56px); border: 1px solid var(--rule-strong); display: grid; gap: 18px; align-content: start; }
.context__t { font: 400 clamp(40px, 3.6vw, 84px)/1 var(--serif); }
.context p { color: var(--ink-2); max-width: 44ch; }
@media (max-width: 800px) { .contexts { grid-template-columns: 1fr; } }

/* ---------- Service pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); }
.pillar { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.4vw, 40px); background: #F7F6F3; border: 1px solid var(--rule); transition: border-color .4s var(--ease), transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.tone-tint .pillar { background: var(--paper); }
.pillar__n { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .14em; color: var(--green); }
.pillar__t { font: 400 clamp(26px, 2vw, 40px)/1.08 var(--serif); letter-spacing: -.01em; }
.pillar p { font-size: var(--fs-small); color: var(--ink-2); }
.pillar__t a::after { content: ""; position: absolute; inset: 0; }
.pillar__t a:focus-visible { outline: none; }
.pillar:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.pillars:not(.pillars--detail) .pillar::after {
  content: ""; width: 22px; height: 9px; margin-top: auto; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .6s var(--ease-out);
}
.pillars:not(.pillars--detail) .pillar:hover { border-color: var(--deep); transform: translateY(-4px); box-shadow: 0 24px 48px -32px rgba(23, 42, 39, .35); }
.pillars:not(.pillars--detail) .pillar:hover::after { transform: translateX(6px); }
.pillar__areas { margin-top: auto; font-size: 13px; color: var(--ink-2); }
.pillar__areas a { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Chief Engineer, one line (Home) ---------- */
.phases--compact .phase__m { font-size: clamp(34px, 3vw, 64px); }
.ce-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; margin-top: clamp(32px, 3vw, 56px); padding: 20px 0; border-block: 1px solid var(--rule-dark); font: 400 clamp(22px, 1.8vw, 34px)/1.25 var(--serif); }
.ce-line__tag { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }

/* ---------- Owner reporting (Home): Second Brain + dashboard ---------- */
.report { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 88px); align-items: start; }
.report .device { max-width: none; margin: 0; }
.report__kicker { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #52CDA5; }
.brain { margin-top: 20px; border-top: 1px solid var(--rule-dark-strong); }
.brain li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule-dark); }
.brain__n { font: 500 var(--fs-label)/1.7 var(--sans); letter-spacing: .12em; color: #52CDA5; }
.brain p { font-size: var(--fs-small); color: var(--on-dark-2); }
.brain strong { display: block; margin-bottom: 4px; font-size: var(--fs-body); font-weight: 600; color: var(--on-dark); }
@media (max-width: 1100px) { .report { grid-template-columns: 1fr; } }

/* ---------- Who we work for (About) ---------- */
.audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.audience__item { padding: clamp(24px, 2.4vw, 40px) clamp(16px, 2vw, 40px) 0 0; }
.audience__item + .audience__item { padding-left: clamp(16px, 2vw, 40px); border-left: 1px solid var(--rule); }
.audience__t { font: 400 clamp(30px, 2.6vw, 56px)/1.05 var(--serif); }
.audience p { margin-top: 14px; max-width: 34ch; color: var(--ink-2); }
@media (max-width: 900px) {
  .audience { grid-template-columns: 1fr; }
  .audience__item + .audience__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 24px; }
}

/* ---------- Selected experience (Team) ---------- */
.refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); }
.ref { display: grid; align-content: start; gap: 18px; min-height: 200px; padding: clamp(24px, 2.4vw, 40px); border: 1px dashed var(--rule-strong); }
.ref__n { font: 400 clamp(40px, 3.4vw, 72px)/1 var(--serif); color: var(--green); }
.ref p { font-size: var(--fs-small); color: var(--ink-2); }
@media (max-width: 900px) { .refs { grid-template-columns: 1fr; } }

/* ---------- The one call to action at the end of each inner page ---------- */
.cta-band { padding-block: clamp(56px, 6vw, 112px); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-band__t { font: 400 clamp(32px, 3.2vw, 68px)/1.05 var(--serif); letter-spacing: -.01em; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 140px); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 48px); }
.field { display: grid; gap: 10px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.field input, .field textarea {
  width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 var(--fs-lead)/1.4 var(--sans);
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 180px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--deep); box-shadow: 0 1px 0 var(--deep); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.field [aria-invalid="true"] { border-bottom-color: #A33A2B; }
.field__error { min-height: 1.2em; font-size: var(--fs-small); color: #A33A2B; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.form__note { font-size: var(--fs-small); color: var(--ink-2); max-width: 46ch; }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.form__status { grid-column: 1 / -1; font-size: var(--fs-small); }
.form__status:not(:empty) { padding: 16px 20px; border-left: 2px solid var(--bronze); background: rgba(176, 156, 102, .12); }
.direct { display: grid; gap: 28px; align-content: start; }
.direct__item { padding-top: 20px; border-top: 1px solid var(--rule-strong); }
.direct__item dt { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.direct__item dd { margin-top: 10px; font: 400 clamp(22px, 1.8vw, 34px)/1.2 var(--serif); }
.direct__item dd a:not(.link-arrow), .prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.direct__alt { display: block; margin-top: 12px; font-size: var(--fs-small); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font: 400 clamp(30px, 2.6vw, 52px)/1.1 var(--serif); margin: 2.2em 0 .6em; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 1em; }
.prose ul { list-style: disc; padding-left: 1.2em; margin-top: 1em; }
.prose li + li { margin-top: .4em; }
.draft { display: inline-block; margin-bottom: 32px; padding: 8px 14px; border: 1px dashed var(--bronze); color: #6E5B27; font: 500 var(--fs-label)/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* ==========================================================================
   Next chapter + footer
   ========================================================================== */
.next { display: block; }
.next__link { display: grid; gap: 18px; padding: clamp(72px, 10vw, 200px) var(--gutter); border-top: 1px solid var(--rule-dark); position: relative; overflow: hidden; }
.next__label { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.next__title { display: flex; align-items: center; gap: .3em; font: 400 clamp(64px, 11vw, 260px)/.9 var(--serif); letter-spacing: -.02em; }
.next__title::after {
  content: ""; width: .6em; height: .26em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M0 4.5h20M16.5 1 20 4.5 16.5 8' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .9s var(--ease-out);
}
.next__link:hover .next__title { color: var(--accent); }
.next__link:hover .next__title::after { transform: translateX(.2em); }
.next__title { transition: color .5s var(--ease); }

.site-footer { padding-top: clamp(72px, 8vw, 160px); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.footer__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: clamp(56px, 6vw, 120px); border-bottom: 1px solid var(--rule-dark); }
.footer__promise { font: 400 clamp(44px, 5.4vw, 128px)/1 var(--serif); letter-spacing: -.015em; max-width: 12em; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; padding: clamp(48px, 5vw, 96px) 0; }
.footer__brand img { width: clamp(120px, 10vw, 200px); height: auto; }
.footer__brand p { margin-top: 20px; color: var(--on-dark-3); font-size: var(--fs-small); max-width: 30ch; }
.footer__h { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 18px; }
.footer__col li + li { margin-top: 10px; }
.footer__col a, .footer__col span { font-size: var(--fs-small); color: var(--on-dark-2); transition: color .3s var(--ease); }
.footer__col a:hover { color: var(--on-dark); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; border-top: 1px solid var(--rule-dark); font-size: 13px; color: var(--on-dark-3); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ==========================================================================
   Reveals
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Phones: shorter travel, quicker settle and less stagger, so the page reads as calm on a small
   screen. The motion itself is the same. */
@media (max-width: 699px) {
  .js [data-reveal] { transform: translate3d(0, 16px, 0); transition-duration: .85s; transition-delay: calc(var(--d, 0) * 70ms); }
  .js [data-words] .w > span { transition-duration: 1s; transition-delay: calc(var(--i) * 40ms + var(--wd, 0ms)); }
}
.js [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-words] .w > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1.3s var(--ease-out); transition-delay: calc(var(--i) * 55ms + var(--wd, 0ms)); }
.js [data-words].is-in .w > span { transform: none; }

/* ---------- Review mode (?review=1): copy proposals, review wording, items to be confirmed ---------- */
.review [data-copy="proposal"] { outline: 1.5px dashed #B0782F; outline-offset: 6px; }
/* Wording supplied verbatim by review ASYA-C07 (review mode only, not part of the palette). */
.review [data-copy="c07"] { outline: 1.5px solid #3B6FB6; outline-offset: 6px; }
.review [data-status="tbc"] { background: rgba(176, 120, 47, .22); outline: 1.5px dashed #B0782F; }
.review-banner { display: none; }
.review .review-banner {
  display: block; position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 95;
  padding: 10px 16px; background: #2B2216; color: #F5E7C8; font: 500 12px/1.4 var(--sans); letter-spacing: .04em;
  border: 1px dashed #B0782F; max-width: calc(100% - 32px); text-align: center;
}

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .42s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .8s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- Motion policy ---------- */
/* Decision of 22 Sep 2026: the cinematography runs for every visitor, on every device, whatever
   the operating system's "reduce motion" setting says. There is therefore no reduced-motion
   media query left in this stylesheet, and no switch. Everything here is driven by
   the visitor's own scrolling — nothing moves on its own — and the phone tuning below keeps the
   travel short. If the decision is ever revisited, the fallback belongs back in this place.
   Note for accessibility: honouring that setting is WCAG 2.2 success criterion 2.3.3, level AAA. */

/* The presentation accent is 4.0:1 on deep green; small accent text there uses a lighter step (6.1:1). */
.tone-deep :is(.chapter b, .agent span, .security__role, .flow__n, .phase__m) { color: #52CDA5; }

@media print {
  .site-header, .menu, .intro, .scroll-cue, .next, .review-banner { display: none !important; }
  .tone-night, .tone-deep { background: none !important; color: #000 !important; }
}