@charset "UTF-8";
/* ============================================================================
   BOLLAM RISHITHEJ — MONOGRAPH DESIGN SYSTEM
   Light-first editorial monograph. Warm paper, didone display, hairline rules,
   protected photography, restrained motion.

   ARCHITECTURE
   Colour is expressed as semantic tokens (--paper / --ink / --rule), never as
   literal hex inside components. A single `.tone-dark` scope re-declares those
   same token names inverted, so every component renders correctly on paper and
   on ink from one rule set.

   CONTENTS
     01  Tokens & scales
     02  Reset & base
     03  Layout primitives
     04  Typography
     05  Atmosphere (grain, rules, progress)
     06  Navigation
     07  Hero
     08  Statement
     09  Principles
     10  Metrics
     11  Ventures
     12  Venture cards
     13  Journey
     14  Spotlight
     15  Closing
     16  Contact
     17  Footer
     18  Command palette / toast / cursor
     19  Motion
     20  Print
   ========================================================================= */

/* ---------------------------------------------------------------------------
   01  TOKENS & SCALES
   ------------------------------------------------------------------------ */

:root {
  /* --- Surfaces & ink (light context, the default) --- */
  --paper: #f4f2ec;        /* warm monograph paper */
  --paper-sunk: #e9e6dd;   /* recessed panel */
  --paper-raised: #fbfaf7; /* raised card */
  --ink: #0b0d11;          /* primary text */
  --ink-2: #3f4550;        /* secondary text */
  --ink-3: #5a616d;        /* metadata, captions — 5.57:1 on paper, 5.00:1 on the sunk panel */
  --rule: rgba(11, 13, 17, 0.16);
  --rule-soft: rgba(11, 13, 17, 0.08);
  --shadow: rgba(11, 13, 17, 0.1);

  /* --- Fixed brand constants (never inverted) --- */
  --acid: #c6ff35;         /* accent — DARK CONTEXT ONLY, see .tone-dark */
  --acid-ink: #46610d;     /* the accent, darkened for use on paper */
  --ink-deep: #05070a;     /* the canonical dark block background */

  /* --- Type families --- */
  /* Apple type throughout. SF Pro Display on Apple, Segoe UI Variable
     Display on Windows, Roboto on Android. No webfont is loaded at all
     now, so first paint carries the final type. */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  /* Native system stack: SF Pro on Apple, Segoe UI on Windows, Roboto on
     Android. Apple's licence does not permit shipping SF as a webfont, and
     referencing the installed face is both legal and faster — it paints on
     the first frame with no download and no layout shift. */
  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
    'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', 'Liberation Sans', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono',
    'Segoe UI Mono', 'Roboto Mono', 'Liberation Mono', 'Courier New', monospace;

  /* --- Fluid type scale ---
     Every step is clamped so nothing drops below a readable floor on a 320px
     phone and nothing runs away on a 1920px display. */
  --t-display: clamp(3rem, 12.5vw, 9.5rem);
  --t-h2: clamp(2.15rem, 6.6vw, 5.5rem);
  --t-h3: clamp(1.3rem, 2.5vw, 2rem);
  --t-h4: clamp(1.05rem, 1.5vw, 1.25rem);
  --t-lead: clamp(1.1rem, 1.9vw, 1.6rem);
  --t-body: clamp(1rem, 1.05vw, 1.125rem);
  --t-small: 0.9375rem;    /* 15px  — smallest prose */
  --t-meta: 0.875rem;      /* 14px  — metadata floor; 13px mono uppercase read poorly */

  /* --- Spacing --- */
  --gutter: clamp(22px, 5.2vw, 88px);
  --shell: 1680px;
  --section-y: clamp(72px, 11vw, 190px);
  --stack-1: clamp(8px, 1vw, 12px);
  --stack-2: clamp(14px, 1.8vw, 22px);
  --stack-3: clamp(24px, 3.2vw, 44px);
  --stack-4: clamp(40px, 5.5vw, 84px);

  /* --- Form --- */
  --radius: 2px;           /* print-like: almost square */
  --radius-pill: 999px;
  --tap: 44px;             /* minimum touch target */

  /* --- Motion --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.7s;

  --nav-h: 76px;
}

@media (min-width: 768px) {
  :root { --nav-h: 88px; }
}

/* Dark scope. Re-declares the SAME token names, inverted, so components need
   no dark-specific rules of their own. Applied to full-bleed photo blocks. */
.tone-dark {
  --paper: #05070a;
  --paper-sunk: #0a0d13;
  --paper-raised: #11151d;
  --ink: #f4f2ec;
  --ink-2: #c2c8d2;
  --ink-3: #8d949f;
  --rule: rgba(244, 242, 236, 0.2);
  --rule-soft: rgba(244, 242, 236, 0.1);
  --shadow: rgba(0, 0, 0, 0.5);
  --acid-ink: var(--acid); /* on ink, the accent returns to full acid */

  background: var(--paper);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   02  RESET & BASE
   ------------------------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

picture { display: contents; }

img,
svg,
video {
  display: block;
  max-width: 100%;
  /* Required. Every <img> here carries width/height attributes, which map to
     presentational `height` declarations — and `aspect-ratio` is ignored unless
     one axis is `auto`. Without this, every art-directed crop below silently
     falls back to the image's intrinsic pixel height. */
  height: auto;
}

/* GLOBAL ANCHOR RESET.
   The previous stylesheet had none, so any link whose component rule forgot to
   set `color` fell through to the user-agent blue with an underline. */
a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3, h4, p, figure, blockquote {
  margin: 0;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.tone-dark ::selection {
  background: var(--acid);
  color: var(--ink-deep);
}

/* --- Focus --- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: fixed;
  top: 0;
  left: -9999px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 12px 22px;
  background: var(--ink-deep);
  color: var(--acid);
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------------------
   03  LAYOUT PRIMITIVES
   ------------------------------------------------------------------------ */

.shell,
.hero,
.statement,
.principles,
.metrics,
.ventures,
.venture-list,
.journey,
.executive-spotlight,
.closing,
.contact,
footer {
  padding-inline: var(--gutter);
}

/* Inner measure for every section, centred inside the gutters. */
main > section > *,
footer > * { max-width: var(--shell); }

main > section,
footer {
  position: relative;
}

/* A hairline rule that spans the full bleed, not just the measure. */
.rule-top { border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------------------
   04  TYPOGRAPHY
   ------------------------------------------------------------------------ */

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  /* Grotesques tighten as they grow; the didone's -0.02em is far too loose at
     display size for SF. */
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h3, h4 {
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

/* Display italic — the didone's real voice. Used for the emphasised clause in
   each headline instead of the previous hollow outline treatment. */
h1 em,
h2 em,
h2 span {
  font-style: normal;
  font-weight: 300;
  color: var(--ink-3);
}

p { text-wrap: pretty; }

/* Section slug: [ 01 — THE MINDSET ] */
.section-no {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--stack-3);
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-no::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

.eyebrow {
  font: 500 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Long unbreakable strings (URLs, handles) must never spill the measure. */
.contact-email-text,
.timeline-body h3,
.venture-row h3,
.row-detail p {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   05  ATMOSPHERE
   ------------------------------------------------------------------------ */

/* Paper grain. Retuned for a light canvas — multiply, not overlay, so it reads
   as fibre in the stock rather than as video noise. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  max-width: 100%;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--ink) 0%, var(--acid-ink) 100%);
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ---------------------------------------------------------------------------
   06  NAVIGATION
   ------------------------------------------------------------------------ */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--gutter);
  border-bottom: 1px solid transparent;
  transition: height 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
}

/* The blur lives on a pseudo-element, NOT on .nav itself.
   `backdrop-filter` makes an element a containing block for its
   position:fixed descendants — putting it on .nav traps the drawer inside the
   76px bar and clips it to the padding box. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.35s var(--ease-soft);
}

.nav.scrolled { height: calc(var(--nav-h) - 12px); }

.nav.scrolled::before {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

.nav.scrolled { border-bottom-color: var(--rule); }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap);
  padding-right: 4px;
  font: 700 clamp(1.15rem, 2vw, 1.45rem) / 1 var(--font-display);
  letter-spacing: 0.01em;
}

.mark i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}

.mark:hover i { transform: scale(1.7); }

/* Retired: the header HUD duplicated the drawer's location readout. */
.nav-hud { display: none !important; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sound-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.3s, background 0.3s;
}

@media (min-width: 900px) {
  .sound-toggle { display: inline-flex; }
}

.sound-toggle:hover { border-color: var(--ink); }

.sound-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}

.sound-bars span {
  width: 2px;
  height: 4px;
  background: var(--ink-3);
  transition: height 0.3s var(--ease), background 0.3s;
}

.sound-toggle.active .sound-bars span { background: var(--ink); }
.sound-toggle.active .sound-bars span:nth-child(1) { height: 6px; }
.sound-toggle.active .sound-bars span:nth-child(2) { height: 13px; }
.sound-toggle.active .sound-bars span:nth-child(3) { height: 9px; }
.sound-toggle.active .sound-bars span:nth-child(4) { height: 12px; }

/* --- Hamburger --- */
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.3s, background 0.3s;
}

.menu:hover { border-color: var(--ink); }

.menu span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.25s;
}

.menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.menu[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* --- Drawer --- */
.nav nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  width: min(430px, 100vw);
  /* dvh tracks the collapsing browser chrome on mobile; vh is the fallback. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 4vw, 34px);
  padding-bottom: max(clamp(20px, 4vw, 34px), env(safe-area-inset-bottom));
  background: var(--ink-deep);
  color: #f4f2ec;
  transform: translateX(101%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.6s var(--ease), visibility 0.6s;
}

/* script.js toggles `.open` on the HEADER (`.nav`), not on the inner <nav>.
   Selecting `.nav nav.open` silently leaves the drawer parked off-screen. */
.nav.open nav {
  transform: none;
  visibility: visible;
}

.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(244, 242, 236, 0.14);
}

.mobile-nav-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.62);
}

.mobile-hud-time { font-size: var(--t-meta); }

.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--acid);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.mobile-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid rgba(244, 242, 236, 0.2);
  border-radius: var(--radius);
  color: #f4f2ec;
  transition: border-color 0.3s, color 0.3s;
}

.mobile-close-btn:hover {
  border-color: var(--acid);
  color: var(--acid);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding-block: clamp(16px, 3vw, 28px);
}

.nav-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: var(--tap);
  padding-block: clamp(11px, 1.8vw, 16px);
  border-bottom: 1px solid rgba(244, 242, 236, 0.09);
  font: 500 clamp(1.15rem, 4.6vw, 1.5rem) / 1.2 var(--font-display);
  color: #f4f2ec;
  transition: color 0.3s, padding-left 0.4s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--acid);
  padding-left: 8px;
}

.nav-idx {
  flex: 0 0 auto;
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  color: rgba(244, 242, 236, 0.4);
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
}

.mobile-copy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 13px 16px;
  border: 1px solid rgba(244, 242, 236, 0.18);
  border-radius: var(--radius);
  font: 400 var(--t-small) / 1.3 var(--font-mono);
  color: #f4f2ec;
  text-align: left;
  overflow-wrap: break-word;
  transition: border-color 0.3s;
}

.mobile-copy-btn:hover { border-color: var(--acid); }

.mobile-copy-badge {
  flex: 0 0 auto;
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  color: var(--acid);
}

.mobile-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mobile-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid rgba(244, 242, 236, 0.18);
  border-radius: var(--radius-pill);
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  color: rgba(244, 242, 236, 0.86);
  text-align: center;
  transition: border-color 0.3s, color 0.3s;
}

.mobile-pill-btn:hover {
  border-color: var(--acid);
  color: var(--acid);
}

.mobile-nav-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  padding-top: 20px;
  margin-top: 18px;
  border-top: 1px solid rgba(244, 242, 236, 0.12);
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  color: rgba(244, 242, 236, 0.45);
}

/* ---------------------------------------------------------------------------
   07  HERO
   A full-bleed cinematic plate. The photograph is a 16:9 night-office frame
   with the subject in the right third and deliberate negative space on the
   left; the type occupies that space and never crosses him. Because the
   photograph is dark, the section is a `.tone-dark` scope, so the same token
   names resolve to paper-on-ink here and the accent returns to full acid.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(28px, 6vw, 64px));
  padding-bottom: clamp(36px, 6vw, 88px);
  overflow: hidden;
}

/* --- The plate itself --- */
.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Phones: hold the subject's head in the upper right of the frame so the
     copy, which sits at the bottom, never reaches him. */
  object-position: 76% 22%;
}

/* The caption belongs to the composition, not to a corner of the photo. */
.hero-image figcaption {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--nav-h) + clamp(16px, 2.5vw, 30px));
  display: none;
  gap: 14px;
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.5);
}

/* --- Legibility scrim ---
   Vertical on phones (type at the bottom), horizontal on wide screens (type
   on the left). Tuned to lift contrast without flattening the photograph. */
.hero-light-rig {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 7, 10, 0.94) 0%, rgba(5, 7, 10, 0.72) 32%,
                    rgba(5, 7, 10, 0.28) 62%, rgba(5, 7, 10, 0.35) 100%);
}

.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--stack-3);
  min-width: 0;
}

.hero h1 {
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.hero h1 em {
  display: inline-block;
  color: rgba(244, 242, 236, 0.62);
}

.hero .eyebrow { color: var(--acid); }

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--stack-3);
  padding-top: var(--stack-2);
  border-top: 1px solid var(--rule);
}

.hero-foot p {
  max-width: 46ch;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-2);
}

.round-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--ink);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.round-link:hover {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink-deep);
}

/* Vertical marginalia — only once there is margin to put it in. */
.side-type {
  display: none;
  position: absolute;
  left: calc(var(--gutter) * 0.3);
  top: 50%;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.42);
}

/* --- Wide screens: type moves into the photograph's negative space --- */
@media (min-width: 900px) {
  .hero { min-height: min(94svh, 940px); }

  .hero-image img { object-position: 82% center; }

  .hero-light-rig {
    background:
      linear-gradient(to right, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0.78) 38%,
                      rgba(5, 7, 10, 0.3) 62%, rgba(5, 7, 10, 0.12) 100%),
      linear-gradient(to top, rgba(5, 7, 10, 0.5), transparent 42%);
  }

  /* Capped so the headline can never run under the subject. */
  .hero-copy { max-width: min(56%, 46rem); }

  .hero-image figcaption { display: flex; }
}

@media (min-width: 1280px) {
  .hero-copy { max-width: min(52%, 50rem); }
  .side-type { display: block; }
}

/* Very wide screens crop a 16:9 frame hard; ease the subject back inward. */
@media (min-width: 1600px) {
  .hero-image img { object-position: 78% center; }
}

/* ---------------------------------------------------------------------------
   08  STATEMENT
   ------------------------------------------------------------------------ */

.statement {
  padding-block: var(--section-y);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

.statement-grid {
  display: grid;
  gap: var(--stack-4);
  align-items: start;
}

.statement h2 span { display: inline-block; }

.statement-copy {
  display: flex;
  flex-direction: column;
  gap: var(--stack-2);
  min-width: 0;
  max-width: 62ch;
}

.statement-copy p {
  font-size: var(--t-body);
  line-height: 1.72;
  color: var(--ink-2);
}

/* Pull-quote. Hairline on the left, display italic — an editorial device, not
   a coloured callout box. */
.vision-highlight {
  padding-left: clamp(16px, 2.2vw, 28px);
  border-left: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-lead) !important;
  font-style: italic;
  font-weight: 500;
  line-height: 1.32 !important;
  color: var(--ink) !important;
}

.signature {
  margin-top: var(--stack-2);
  font: 600 clamp(1.6rem, 3.2vw, 2.4rem) / 1 var(--font-display);
  font-style: italic;
  color: var(--ink);
}

.bw-frame {
  margin-top: var(--stack-4);
}

.bw-frame img {
  width: 100%;
  /* Native 4:5 — the frame is used as shot, so nothing is cropped away. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--paper-sunk);
  /* NOT multiply. This frame carries a real dark-grey ground rather than the
     pure-white border the previous asset had; multiplying it against paper
     leaves a visible rectangle rather than dissolving one. */
}

@media (min-width: 900px) {
  .statement-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 96px);
  }
  /* A 4:5 plate run to the full measure is over 1600px tall on a desktop and
     swamps the spread. Cap it and sit it under the headline column, which is
     the short one, so the section balances. */
  .bw-frame {
    max-width: min(44%, 560px);
    margin-right: auto;
  }
  .bw-frame img { aspect-ratio: 4 / 5; object-position: 50% 28%; }
}

@media (min-width: 1280px) {
  .statement-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}

/* ---------------------------------------------------------------------------
   09  PRINCIPLES
   ------------------------------------------------------------------------ */

.principles {
  padding-block: var(--section-y);
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
}

.principle-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--stack-1) clamp(16px, 2.6vw, 34px);
  align-items: baseline;
  padding-block: clamp(22px, 3.4vw, 42px);
  border-top: 1px solid var(--rule);
}

.principle-row:last-child { border-bottom: 1px solid var(--rule); }

.principle-row span {
  grid-row: 1;
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.principle-row h3 { grid-row: 1; }

.principle-row p {
  grid-column: 2;
  max-width: 56ch;
  font-size: var(--t-body);
  color: var(--ink-2);
}

@media (min-width: 1024px) {
  .principle-row {
    grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: baseline;
  }
  .principle-row p { grid-column: 3; grid-row: 1; }
}

/* ---------------------------------------------------------------------------
   10  METRICS
   ------------------------------------------------------------------------ */

.metrics {
  padding-block: var(--section-y);
  background: var(--paper-sunk);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* Cards share hairlines rather than each drawing a box — a ledger, not a set
   of tiles. */
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--stack-1);
  padding: clamp(22px, 3vw, 40px);
  background: var(--paper);
  transition: background 0.4s var(--ease-soft);
}

.metric-card:hover { background: var(--paper-raised); }

.metric-val {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.metric-num,
.metric-text { font-size: clamp(2.6rem, 5.5vw, 4.25rem); }

.metric-plus {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.metric-label {
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
}

.metric-sub {
  /* Prose, not a serial — set in the reading face. Tracked uppercase mono was
     costing legibility here for no editorial gain. */
  font: 400 var(--t-small) / 1.45 var(--font-text);
  letter-spacing: 0;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   11  VENTURES (image + copy)
   ------------------------------------------------------------------------ */

.ventures {
  display: grid;
  gap: var(--stack-4);
  align-items: center;
  padding-block: var(--section-y);
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

.venture-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--paper-sunk);
}

.venture-copy {
  display: flex;
  flex-direction: column;
  gap: var(--stack-2);
  min-width: 0;
}

.venture-copy p {
  max-width: 52ch;
  font-size: var(--t-body);
  color: var(--ink-2);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--stack-1);
}

.tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .ventures {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 5vw, 88px);
  }
  .venture-image img { aspect-ratio: 4 / 5; }
}

/* Visually hidden, still announced. Gives each repeated "Read dossier" link a
   unique accessible name instead of eight identical ones. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   12  VENTURE REGISTER
   A register of holdings, not a grid of cards. A 3-column grid of bordered
   boxes is the most templated pattern on the web, and it also abandoned the
   monograph: company names fell back to the UI sans, the accent was spent on
   every small label, and ragged card heights left dead voids. Here each
   holding is a ruled row — display numeral, identity, then the account — which
   is how an annual report sets the same information.
   ------------------------------------------------------------------------ */

.venture-list {
  padding-block: var(--section-y);
  background: var(--ink-deep);
}

.venture-intro { margin-bottom: var(--stack-4); }

.venture-register {
  border-top: 1px solid var(--rule);
}

.venture-row {
  display: grid;
  gap: var(--stack-2);
  padding-block: clamp(26px, 3.6vw, 52px);
  border-bottom: 1px solid var(--rule);
  transition: background 0.5s var(--ease-soft);
}

/* --- Ledger numeral --- */
.row-index {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  transition: color 0.4s var(--ease-soft);
}

/* --- Identity --- */
.row-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* Unboxed. The emblem-in-a-rounded-square was part of the templated look. */
.row-logo {
  width: auto;
  height: 30px;
  max-width: 132px;
  margin-bottom: 4px;
  object-fit: contain;
  object-position: left center;
}

/* The company name carries the monograph's display face, at size. This is the
   single biggest reason the section now reads as designed rather than built. */
.venture-row h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  transition: color 0.4s var(--ease-soft);
}

.row-role {
  font: 600 var(--t-small) / 1.4 var(--font-text);
  letter-spacing: 0;
  color: var(--ink-2);
}

.row-sector {
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The accent is spent once per row, and only where it means something: a
   government recognition. */
.row-gov {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acid);
}

.row-gov::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
}

/* --- Account --- */
.row-detail {
  display: flex;
  flex-direction: column;
  gap: var(--stack-2);
  min-width: 0;
}

.row-detail p {
  max-width: 54ch;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

/* Rule draws in from the left on intent, rather than a colour swap. */
.row-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 12px);
  background-size: 0% 1px;
  transition: background-size 0.45s var(--ease), color 0.35s var(--ease-soft);
}

.row-link.is-primary { color: var(--ink); }

.row-link::after {
  content: '→';
  transition: transform 0.4s var(--ease);
}

.row-link[target='_blank']::after { content: '↗'; }

.row-link:hover,
.row-link:focus-visible {
  color: var(--acid);
  background-size: 100% 1px;
}

.row-link:hover::after { transform: translateX(4px); }

/* --- Row state --- */
@media (hover: hover) and (pointer: fine) {
  .venture-row:hover { background: rgba(244, 242, 236, 0.03); }
  .venture-row:hover .row-index { color: var(--acid); }
}

/* The sole s.203 KMP office is the one holding with statutory weight. A green
   bar down the side read as a highlighter mark rather than as hierarchy, so
   the promotion is typographic instead: the row sits on a faintly lifted
   ground and its numeral goes solid. Nothing is coloured. */
.venture-row.is-principal {
  background: rgba(244, 242, 236, 0.045);
}

.venture-row.is-principal .row-index { color: var(--ink); }

.venture-row.is-principal .row-role {
  color: var(--ink);
  font-weight: 700;
}

/* --- Register grid --- */
@media (min-width: 720px) {
  .venture-row {
    grid-template-columns: clamp(46px, 5vw, 78px) minmax(0, 1fr);
    column-gap: clamp(16px, 2.4vw, 32px);
    padding-left: clamp(14px, 1.6vw, 24px);
  }

}

/* Three children, two columns. Without this the account auto-places into row 2
   COLUMN 1 — the 46px numeral gutter — and renders as a 46px-wide ribbon of
   text roughly 600px tall. Scoped to the two-column band only: at 1024 there
   is a real third column and this rule would drag the account back out of it. */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .row-detail { grid-column: 2; }
}

@media (min-width: 1024px) {
  .venture-row {
    grid-template-columns:
      clamp(46px, 5vw, 78px)
      minmax(0, 0.92fr)
      minmax(0, 1.08fr);
    column-gap: clamp(24px, 3.4vw, 64px);
    align-items: start;
  }
}

/* ---------------------------------------------------------------------------
   13  JOURNEY
   ------------------------------------------------------------------------ */

.journey {
  padding-block: var(--section-y);
  background: var(--paper);
}

.journey-heading { margin-bottom: var(--stack-4); }

.timeline { display: flex; flex-direction: column; }

.timeline article {
  display: grid;
  gap: var(--stack-2);
  padding-block: clamp(22px, 3.2vw, 40px);
  border-top: 1px solid var(--rule);
}

.timeline article:last-child { border-bottom: 1px solid var(--rule); }

.timeline time {
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.timeline-body {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.timeline-brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
}

.timeline-body h3 {
  margin-bottom: 7px;
  font-size: var(--t-h4);
}

.timeline-body p {
  max-width: 58ch;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.timeline article.education { border-top-width: 2px; border-top-color: var(--ink); }

@media (min-width: 900px) {
  .timeline article {
    grid-template-columns: clamp(140px, 16vw, 210px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 3vw, 48px);
  }
  .timeline time { padding-top: 5px; }
}

/* ---------------------------------------------------------------------------
   14  SPOTLIGHT
   ------------------------------------------------------------------------ */

.executive-spotlight {
  display: grid;
  gap: var(--stack-4);
  align-items: start;
  padding-block: var(--section-y);
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
}

.spotlight-frame { position: relative; }

.spotlight-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 32%;
  background: var(--paper);
}

/* The badge sits on the image's bottom-left corner, clear of the subject. */
.spotlight-badge {
  position: absolute;
  left: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(5, 7, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 400 var(--t-meta) / 1.2 var(--font-mono);
  letter-spacing: 0.06em;
  color: #f4f2ec;
}

.spotlight-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
}

.spotlight-content {
  display: flex;
  flex-direction: column;
  gap: var(--stack-2);
  min-width: 0;
}

.spotlight-lead {
  max-width: 52ch;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
}

.spotlight-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: var(--stack-2);
}

.spotlight-pillar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding-top: var(--stack-2);
  border-top: 1px solid var(--rule);
}

.pillar-num {
  font: 500 var(--t-meta) / 1.5 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.spotlight-pillar h4 { margin-bottom: 5px; }

.spotlight-pillar p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.spotlight-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: var(--stack-3);
  padding-top: var(--stack-2);
  border-top: 1px solid var(--rule);
  font: 600 var(--t-small) / 1.4 var(--font-text);
  letter-spacing: 0;
  color: var(--ink);
}

.sign-tag {
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0;
  color: var(--ink-3);
}

@media (min-width: 1024px) {
  .executive-spotlight {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 88px);
  }
  .spotlight-frame { position: sticky; top: calc(var(--nav-h) + 32px); }
}

/* ---------------------------------------------------------------------------
   15  CLOSING
   The headline sits BESIDE the portrait, never across the face. On one column
   the copy stacks below the image.
   ------------------------------------------------------------------------ */

.closing {
  position: relative;
  display: grid;
  gap: var(--stack-4);
  align-items: center;
  padding-block: var(--section-y);
  /* Pure black, NOT --ink-deep. portrait-navy's borders are calibrated to
     absolute zero rgb(0,0,0); against #05070a that is a measurable delta of
     22 and the plate reads as a faint rectangle. Matching the image's own
     ground is what makes the edge disappear. */
  background: #000;
  overflow: hidden;
}

.closing-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Anchored on the face. The source has pure-black borders, so against the
     ink block the rectangle edge disappears. */
  object-position: 50% 16%;
}

@media (min-width: 620px) and (max-width: 899px) {
  .closing picture { max-width: 470px; margin-inline: auto; }
}

.closing-copy {
  display: flex;
  flex-direction: column;
  gap: var(--stack-2);
  min-width: 0;
}

.closing-copy p {
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acid);
}

.closing-copy h2 { color: var(--ink); }

/* Rotating seal. On one column the copy sits under the portrait and owns the
   bottom of the block, so the seal lives in the empty band at the top instead
   of colliding with the headline. */
.orbit {
  position: absolute;
  right: var(--gutter);
  top: clamp(16px, 4vw, 40px);
  bottom: auto;
  width: clamp(96px, 26vw, 132px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  pointer-events: none;
  animation: orbit 26s linear infinite;
}

.orbit span {
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@keyframes orbit {
  to { transform: rotate(360deg); }
}

@media (min-width: 900px) {
  .closing {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(40px, 5.5vw, 96px);
  }
  .closing-image { aspect-ratio: 3 / 4; }
  .orbit {
    top: auto;
    bottom: clamp(24px, 4vw, 64px);
    right: clamp(24px, 4vw, 64px);
    width: clamp(120px, 14vw, 168px);
  }
}

/* ---------------------------------------------------------------------------
   16  CONTACT
   ------------------------------------------------------------------------ */

.contact {
  padding-block: var(--section-y);
  background: var(--paper);
}

.contact h2 { margin-block: var(--stack-2) var(--stack-3); }

.contact-note {
  max-width: 46ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
}

.contact-actions { margin-top: var(--stack-4); }

/* Each row is a full-width rule with a generous tap area. On one column the
   badge drops beneath the label rather than squeezing it. */
.contact-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px clamp(16px, 3vw, 40px);
  min-height: 72px;
  padding-block: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--rule);
  color: var(--ink);
  transition: padding-left 0.45s var(--ease), color 0.35s var(--ease-soft);
}

.contact-actions .contact-link:last-of-type { border-bottom: 1px solid var(--rule); }

.contact-link:hover,
.contact-link:focus-visible {
  padding-left: clamp(8px, 1.2vw, 18px);
  color: var(--acid-ink);
}

/* Below the breakpoint the badge always drops to its own line, so the label
   gets the full measure and long URLs break at a slash instead of mid-token.
   It also makes all three rows read identically. */
.contact-email-text {
  flex: 1 1 100%;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.contact-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  transition: border-color 0.35s, color 0.35s;
}

.contact-link:hover .contact-badge {
  border-color: currentColor;
  color: inherit;
}

@media (min-width: 720px) {
  .contact-email-text { flex: 1 1 auto; }
}

.secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: var(--stack-3);
}

.copy-email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}

.copy-email-btn:hover {
  background: transparent;
  color: var(--ink);
}

.secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  transition: color 0.3s, border-color 0.3s;
}

.secondary-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   17  FOOTER
   ------------------------------------------------------------------------ */

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font: 400 var(--t-meta) / 1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  /* A short label like "Home" is only 37px wide without this. */
  padding-inline: 5px;
  margin-inline: -5px;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

footer a:hover { border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------------------
   18  COMMAND PALETTE / TOAST / CURSOR
   ------------------------------------------------------------------------ */

.cmd-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: start center;
  padding: clamp(16px, 6vh, 90px) var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-soft), visibility 0.3s;
}

.cmd-modal.open {
  opacity: 1;
  visibility: visible;
}

.cmd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cmd-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(660px, 100%);
  max-height: min(78vh, 720px);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px var(--shadow);
  overflow: hidden;
  transform: translateY(-14px);
  transition: transform 0.4s var(--ease);
}

.cmd-modal.open .cmd-panel { transform: none; }

.cmd-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule);
}

.cmd-search-icon {
  font: 500 1rem / 1 var(--font-mono);
  color: var(--ink-3);
}

.cmd-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  border: none;
  background: none;
  color: var(--ink);
  /* 16px minimum prevents iOS Safari from zooming the viewport on focus. */
  font: 400 16px / 1.4 var(--font-text);
}

.cmd-search-input:focus { outline: none; }
.cmd-search-input::placeholder { color: var(--ink-3); }

.cmd-kbd,
.cmd-footer kbd {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: 400 var(--t-meta) / 1 var(--font-mono);
  color: var(--ink-3);
}

.cmd-list {
  flex: 1 1 auto;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cmd-group-title {
  padding: 14px 12px 8px;
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: var(--tap);
  padding: 11px 12px;
  border-radius: var(--radius);
  text-align: left;
  transition: background 0.2s;
}

.cmd-item.active,
.cmd-item:hover { background: var(--paper-sunk); }

.cmd-item-icon {
  flex: 0 0 auto;
  width: 30px;
  font: 400 var(--t-meta) / 1 var(--font-mono);
  color: var(--ink-3);
}

.cmd-item-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-small);
  color: var(--ink);
}

.cmd-item-tag {
  flex: 0 0 auto;
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.cmd-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  font: 400 var(--t-meta) / 1.6 var(--font-mono);
  color: var(--ink-3);
}

.cmd-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 4vw, 38px);
  z-index: 160;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  background: var(--ink-deep);
  color: #f4f2ec;
  font: 400 var(--t-meta) / 1.3 var(--font-mono);
  letter-spacing: 0.06em;
  box-shadow: 0 18px 44px rgba(5, 7, 10, 0.32);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft), transform 0.45s var(--ease);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast-icon { color: var(--acid); }

/* --- Custom cursor (fine pointers only) --- */
.custom-cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    display: block;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: width 0.3s var(--ease), height 0.3s var(--ease),
      margin 0.3s var(--ease), opacity 0.3s;
  }

  .custom-cursor.hovering {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    background: rgba(244, 242, 236, 0.1);
  }
}

/* ---------------------------------------------------------------------------
   19  MOTION
   A single restrained gesture: content rises and fades once, on entry.
   ------------------------------------------------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-soft), transform 1s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Images wipe open rather than fading — a print-plate gesture. */
.js .bw-frame,
.js .venture-image,
.js .spotlight-frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease), opacity 0.8s var(--ease-soft),
    transform 1s var(--ease);
}

.js .bw-frame.in,
.js .venture-image.in,
.js .spotlight-frame.in {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal,
  .js .bw-frame,
  .js .venture-image,
  .js .spotlight-frame {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .orbit { animation: none; }
}

/* Coarse pointers get no hover translation — it only ever fires as a sticky
   stuck state after a tap. */
@media (hover: none), (pointer: coarse) {
  .venture-row:hover { background: transparent; }
  .contact-link:hover,
  .contact-link:focus-visible { padding-left: 0; }
  .nav-link:hover { padding-left: 0; }
  .round-link:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   20  PRINT
   ------------------------------------------------------------------------ */

@media print {
  .nav,
  .grain,
  .scroll-progress,
  .cmd-modal,
  .toast,
  .custom-cursor,
  .skip-link,
  .orbit,
  .round-link { display: none !important; }

  body { background: #fff; color: #000; }

  main > section { break-inside: avoid; padding-block: 24pt; }

  .js .reveal,
  .js .bw-frame,
  .js .venture-image,
  .js .spotlight-frame {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------------------------------------------------------------------------
   21  MOTION LAYER
   Contemporary interaction on editorial bones. Every effect here is additive
   and progressively enhanced: if the feature is unsupported, or the visitor
   prefers reduced motion, the page degrades to the static monograph with no
   content left in a hidden state.
   ------------------------------------------------------------------------ */

/* --- Cross-document view transitions -------------------------------------
   Portfolio <-> dossier navigations cross-fade instead of hard-cutting.
   Chrome/Edge honour this; everywhere else it is simply ignored. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.28s var(--ease-soft) both; }
  ::view-transition-new(root) { animation: vt-in 0.38s var(--ease) both; }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* The wordmark is the one element common to both documents, so it is the
   natural anchor to morph between them. */
.mark { view-transition-name: brand-mark; }

/* --- Scroll-linked photography -------------------------------------------
   A slow drift as each plate travels the viewport. Deliberately NOT tied to
   opacity: a failed or unsupported timeline can never hide an image. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-image img,
    .bw-frame img,
    .venture-image img,
    .spotlight-frame img,
    .closing-image {
      animation: plate-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: scale;
    }

    /* The reading rule under the nav tracks scroll natively, no JS tick. */
    .scroll-progress {
      animation: rule-advance linear both;
      animation-timeline: scroll(root block);
      width: 100%;
      transform-origin: 0 50%;
      transition: none;
    }
  }
}

@keyframes plate-drift {
  from { scale: 1.16; translate: 0 -3.2%; }
  to   { scale: 1.16; translate: 0 3.2%; }
}

@keyframes rule-advance {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --- Running section label ------------------------------------------------
   Deliberately NOT sticky. Pinning the slug inside the content column makes
   the display headline scroll straight through it — a running head has to
   live in the margin, and there is no margin to spare at these measures. */

/* --- Magnetic targets -----------------------------------------------------
   script.js writes --mag-x / --mag-y from the pointer offset. The element
   leans toward the cursor and settles back on exit. */
.round-link,
.copy-email-btn,
.menu {
  --mag-x: 0px;
  --mag-y: 0px;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .round-link,
  .copy-email-btn,
  .menu {
    translate: var(--mag-x) var(--mag-y);
    transition: translate 0.45s var(--ease), background 0.35s var(--ease-soft),
      color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
  }

  .round-link.magnetic-active,
  .copy-email-btn.magnetic-active,
  .menu.magnetic-active {
    /* While tracking, follow the pointer almost immediately. */
    transition: translate 0.12s linear, background 0.35s var(--ease-soft),
      color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
  }

  /* The round link already translates on hover; magnetism replaces that so the
     two transforms cannot fight. */
  .round-link:hover { transform: none; }
}

/* --- Nav retreat ----------------------------------------------------------
   The bar withdraws while reading downward and returns on any upward
   intention, giving the page its full height back. */
.nav {
  transition: height 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft),
    translate 0.45s var(--ease);
}

.nav.nav-retreat { translate: 0 calc(-1 * var(--nav-h) - 2px); }

/* Never retreat while the drawer is open — the close button lives in there. */
.nav.open.nav-retreat { translate: 0; }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-image img,
  .bw-frame img,
  .venture-image img,
  .spotlight-frame img,
  .closing-image { animation: none !important; scale: 1 !important; }

  .nav.nav-retreat { translate: 0; }

  .round-link,
  .copy-email-btn,
  .menu { translate: 0 !important; }

  .scroll-progress { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   22  HERO ENTRANCE
   The plate is the LCP element, so it is never hidden behind a JS class. It
   is painted immediately and settles from a slight over-scale — the motion
   reads as a camera coming to rest rather than as content loading in.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .js .hero-image img {
    animation: hero-settle 1.8s var(--ease) both;
  }

  .js .hero-light-rig {
    animation: scrim-in 1.4s var(--ease-soft) both;
  }
}

@keyframes hero-settle {
  from { scale: 1.06; }
  to { scale: 1; }
}

@keyframes scrim-in {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* The scroll-driven plate drift would otherwise fight the entrance, and a
   full-bleed backdrop has no "travel through the viewport" to track anyway. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-image img { animation-timeline: auto; }
  }
}

/* ---------------------------------------------------------------------------
   23  NAVIGATION OVER THE DARK HERO
   The bar sits on a near-black photograph until the page scrolls past the
   hero. A paper-tinted blur there reads as a grey band across the image, so
   while it overlaps the hero the bar goes fully transparent and inverts its
   own foreground. script.js owns the toggle because the switch depends on the
   hero's measured height, not on a fixed scroll offset.
   ------------------------------------------------------------------------ */

.nav.nav-on-dark::before {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav.nav-on-dark {
  border-bottom-color: transparent;
  color: #f4f2ec;
}

.nav.nav-on-dark .mark i { background: var(--acid); }

.nav.nav-on-dark .menu,
.nav.nav-on-dark .sound-toggle {
  border-color: rgba(244, 242, 236, 0.32);
}

.nav.nav-on-dark .menu span { background: #f4f2ec; }

.nav.nav-on-dark .menu:hover,
.nav.nav-on-dark .sound-toggle:hover { border-color: var(--acid); }

.nav.nav-on-dark .sound-bars span { background: rgba(244, 242, 236, 0.7); }

/* Once the drawer is open the bar is over the drawer, not the photograph. */
.nav.open.nav-on-dark { color: inherit; }

/* ---------------------------------------------------------------------------
   24  DISPLAY HEADLINE REVEAL
   Headlines wipe upward from their own baseline rather than fading, which is
   how type behaves on a press sheet. The overshoot on the bottom inset keeps
   descenders (g, y, j) from being shaved during the wipe.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .js h1.reveal,
  .js h2.reveal {
    clip-path: inset(-0.12em 0 100% 0);
    transition: clip-path 1.05s var(--ease), opacity 0.9s var(--ease-soft),
      transform 1s var(--ease);
  }

  .js h1.reveal.in,
  .js h2.reveal.in {
    clip-path: inset(-0.12em 0 -0.28em 0);
  }
}

/* ---------------------------------------------------------------------------
   25  SCREEN EDGE CASES
   ------------------------------------------------------------------------ */

/* Landscape phones: 100svh leaves no room for a display headline beside a
   portrait, so the hero stops trying to fill the viewport. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 32px;
  }

  .hero h1 { font-size: clamp(2rem, 7vh, 3.4rem); }
  .hero-image img { object-position: 84% 26%; }
  .side-type { display: none; }
}

/* Ultra-wide: hold the measure and let the margins grow, rather than letting
   lines run to an unreadable length. */
@media (min-width: 1800px) {
  :root { --gutter: clamp(88px, 7vw, 180px); }
  .statement-copy,
  .spotlight-lead,
  .contact-note { max-width: 58ch; }
}

/* Very short viewports of any width (split-screen, small laptops). */
@media (max-height: 700px) and (min-width: 900px) {
  .hero { min-height: min(96svh, 760px); }
}

/* ---------------------------------------------------------------------------
   26  SECTION INDEX
   A fixed marginal readout of where you are in the document. Desktop only —
   it lives in the gutter, and on a phone there is no gutter to live in.
   ------------------------------------------------------------------------ */

.section-index {
  display: none;
  position: fixed;
  right: calc(var(--gutter) * 0.34);
  top: 50%;
  translate: 0 -50%;
  z-index: 40;
  flex-direction: column;
  /* No gap: each mark carries its own padding instead, so the hit area is a
     full 44px while the marks still read as 14px apart. A 1280px viewport can
     still be a touch device (Surface, iPad Pro in landscape). */
  gap: 0;
  pointer-events: auto;
}

@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
  .section-index { display: flex; }
}

.section-index a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: var(--tap);
  padding-block: 7px;
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  opacity: 0.55;
  transition: opacity 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}

.section-index a::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}

.section-index a span {
  opacity: 0;
  translate: 6px 0;
  transition: opacity 0.35s var(--ease-soft), translate 0.4s var(--ease);
}

.section-index a:hover,
.section-index a:focus-visible,
.section-index a.active {
  opacity: 1;
  color: var(--ink);
}

.section-index a.active::after { width: 30px; }

/* The label appears on intent only. Showing it for `.active` too meant a word
   sat over the content column during ordinary scrolling; the active mark is
   already distinguished by its longer rule and full opacity. */
.section-index a:hover span,
.section-index a:focus-visible span {
  opacity: 1;
  translate: 0 0;
}

/* Over the dark hero and the dark venture block the index inverts with it. */
.section-index.on-dark a { color: rgba(244, 242, 236, 0.75); }
.section-index.on-dark a:hover,
.section-index.on-dark a.active { color: var(--acid); }

/* ---------------------------------------------------------------------------
   27  DISPLAY TYPE
   The optical-size pins that lived here existed solely for Bodoni's hairlines,
   which broke up below ~45px. SF has no such fragility, so they are gone.
   What a grotesque needs instead is tighter tracking as it grows.
   ------------------------------------------------------------------------ */

.metric-val,
.metric-num,
.metric-text,
.venture-row h3,
.row-index,
.signature,
.contact-email-text,
.mark,
.nav-link {
  font-variation-settings: normal;
  font-optical-sizing: auto;
}

.hero h1 { letter-spacing: -0.045em; }
.metric-num,
.metric-text { letter-spacing: -0.04em; }
.venture-row h3 { letter-spacing: -0.03em; }

/* ---------------------------------------------------------------------------
   28  PLATE BLENDING
   Three plates sat as hard rectangles on the paper. Measured, their edges are
   busy photographic content (colour spread 38-141) rather than flat studio
   grounds, so neither `mix-blend-mode: multiply` nor matching a single flat
   colour can dissolve them — there is no one colour to match.

   What does work regardless of what the edge contains is feathering the plate
   into the page: the mask fades to transparent, so whatever surface is behind
   shows through and the join is seamless by construction, on paper or on ink.

   `portrait-navy` in the closing block is deliberately excluded — its edges
   are already pure black (spread 0, delta 6 from --ink-deep) and calibrated to
   dissolve into the ink on their own.
   ------------------------------------------------------------------------ */

.bw-frame,
.venture-image,
.spotlight-frame,
.closing picture {
  /* Clip is mandatory, not cosmetic: the parallax scales the image past its
     frame, and without this it spills into the page and creates real
     horizontal overflow at narrow widths. */
  display: block;
  overflow: hidden;
}

.bw-frame,
.venture-image,
.spotlight-frame {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}

.bw-frame img,
.venture-image img,
.spotlight-frame img {
  /* The frame owns the edge now, so the image must not paint a fill of its
     own or it reappears as a rectangle beneath the feather. */
  background: transparent;
}

/* The spotlight badge sits on the image; keep it clear of the feathered edge. */
.spotlight-badge {
  left: clamp(20px, 4vw, 40px);
  bottom: clamp(20px, 4vw, 40px);
}

/* ---------------------------------------------------------------------------
   29  MOTION, TURNED UP
   The first pass was tuned so low it read as no motion at all. These are the
   same techniques at amplitudes that actually register, still entirely behind
   `prefers-reduced-motion` and still costing nothing on the main thread —
   every one runs on the compositor or on a native scroll timeline.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

  /* --- Register rows deal in, one after another ------------------------- */
  @supports (animation-timeline: view()) {
    .venture-row {
      animation: row-deal linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 46%;
    }

    /* --- Hero copy rises out as the plate holds, so the two layers separate */
    .hero-copy {
      animation: hero-lift linear both;
      animation-timeline: view(block);
      animation-range: exit 0% exit 100%;
    }

    /* --- Section headlines track in from their own margin ----------------- */
    .statement h2,
    .venture-intro h2,
    .journey-heading h2,
    .contact h2 {
      animation: headline-track linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 52%;
    }

    /* --- Metric tiles stagger by column ----------------------------------- */
    .metric-card {
      animation: tile-rise linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 50%;
    }
  }

  /* --- Timeline entries sweep their rule ---------------------------------- */
  .timeline article { position: relative; }

  .timeline article::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.9s var(--ease);
  }

  .timeline article.in::after { transform: scaleX(1); }
}

@keyframes row-deal {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-lift {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-64px); opacity: 0.25; }
}

@keyframes headline-track {
  from { opacity: 0; transform: translateY(40px); letter-spacing: 0.04em; }
  to   { opacity: 1; transform: none; letter-spacing: -0.025em; }
}

@keyframes tile-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .venture-row,
  .hero-copy,
  .metric-card,
  .statement h2,
  .venture-intro h2,
  .journey-heading h2,
  .contact h2 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .timeline article::after { transform: scaleX(1) !important; }
}

/* ---------------------------------------------------------------------------
   30  NOT FOUND
   Cloudflare Pages answers unmatched paths with index.html at HTTP 200 unless
   a 404.html exists — a soft 404, which search engines read as a thin
   duplicate of the homepage and which hides genuinely broken links.
   ------------------------------------------------------------------------ */

.notfound-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.notfound {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--stack-3);
  padding: calc(var(--nav-h) + var(--section-y)) var(--gutter) var(--section-y);
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
}

.notfound h1 {
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.92;
}

.notfound-note {
  max-width: 46ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
}

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: var(--stack-2);
}

.notfound-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.35s var(--ease-soft), color 0.35s var(--ease-soft),
    border-color 0.35s var(--ease-soft);
}

.notfound-link.is-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.notfound-link.is-primary:hover {
  background: transparent;
  color: var(--ink);
}

.notfound-link:not(.is-primary):hover { border-color: var(--ink); }

/* ---------------------------------------------------------------------------
   31  PHOTOGRAPHIC WORDMARK
   The mark is his face rather than initials. It also spells the name out in
   full: "BR" is unsearchable, and the wordmark is the most repeated piece of
   text on the site.
   ------------------------------------------------------------------------ */

.mark {
  gap: 11px;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mark-avatar {
  width: clamp(30px, 3.4vw, 36px);
  height: clamp(30px, 3.4vw, 36px);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  transition: transform 0.45s var(--ease);
}

.mark:hover .mark-avatar { transform: scale(1.08); }

/* Below the smallest phones the name would crowd the menu button. */
@media (max-width: 400px) {
  .mark span { display: none; }
}

/* ---------------------------------------------------------------------------
   32  HOME PAGE EFFECTS
   Everything here is compositor-only or driven by a native scroll timeline,
   and every one is inside prefers-reduced-motion: no-preference.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

  /* --- Hero headline deals in line by line --------------------------------
     Each line rides its own clip, so the words are wiped upward rather than
     faded — the type arrives as if struck. */
  .js .hero h1 {
    animation: line-strike 1.15s var(--ease) 0.15s both;
  }

  .js .hero .eyebrow { animation: fade-rise 0.9s var(--ease) 0.05s both; }
  .js .hero-foot     { animation: fade-rise 1s var(--ease) 0.55s both; }

  /* --- Aperture: the plate opens from the centre on load ------------------ */
  .js .hero-image img {
    animation: hero-settle 1.9s var(--ease) both,
               aperture 1.5s var(--ease) both;
  }

  /* --- A slow light sweep across the hero, once ------------------------- */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%,
                rgba(244, 242, 236, 0.09) 48%, transparent 58%);
    background-size: 240% 100%;
    animation: sweep 2.6s var(--ease-soft) 0.6s both;
  }

  /* --- Metric numerals count up on their own timeline --------------------- */
  @supports (animation-timeline: view()) {
    .metric-val {
      animation: numeral-set linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }

    /* --- Section rules draw themselves in --------------------------------- */
    .section-no::after {
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
      transform-origin: 0 50%;
    }

    /* --- The closing seal spins up as it arrives -------------------------- */
    .orbit {
      animation: orbit 26s linear infinite, seal-arrive linear both;
      animation-timeline: auto, view();
      animation-range: normal, entry 0% entry 70%;
    }
  }
}

@keyframes line-strike {
  from { clip-path: inset(0 0 105% 0); transform: translateY(0.18em); }
  to   { clip-path: inset(-0.14em 0 -0.3em 0); transform: none; }
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes aperture {
  from { clip-path: inset(14% 8% 14% 8%); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes sweep {
  from { background-position: 180% 0; opacity: 1; }
  to   { background-position: -80% 0; opacity: 0; }
}

@keyframes numeral-set {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes seal-arrive {
  from { opacity: 0; scale: 0.8; }
  to   { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero h1,
  .js .hero .eyebrow,
  .js .hero-foot,
  .js .hero-image img,
  .metric-val,
  .orbit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    scale: 1 !important;
  }
  .hero::after { display: none; }
  .section-no::after { transform: scaleX(1) !important; }
}

/* ---------------------------------------------------------------------------
   33  INTERIOR PAGES
   The generated pages (about, ventures, journey, media, contact) share one
   shell, so they share one set of rules. Everything below reuses the existing
   tokens — no new colour, no new type scale.
   ------------------------------------------------------------------------ */

.subpage { padding-top: var(--nav-h); }

.subpage main > section { padding-block: clamp(40px, 6vw, 88px); }

.subpage main > section:first-of-type { padding-top: clamp(32px, 5vw, 64px); }

/* --- Breadcrumbs --- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 34px) var(--gutter) 0;
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Padding gives the 44px hit area; the negative margin cancels it visually, so
   the crumb row stays tight while the target is full size. */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  /* Horizontal padding too: a short crumb like "Home" is only 36px wide. */
  padding: 11px 7px;
  margin: -11px -7px;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.crumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.crumb-sep { opacity: 0.5; }

/* --- Page head --- */
.page-head { padding-inline: var(--gutter); }

.page-head h1 {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.page-lead {
  max-width: 62ch;
  margin-top: var(--stack-3);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Interior section gutters --- */
.venture-head,
.venture-prose,
.venture-capability,
.venture-specs,
.venture-foot,
.about-body,
.about-specs,
.about-doctrine,
.media-bio,
.media-images,
.industrial,
.subpage .journey,
.subpage .contact { padding-inline: var(--gutter); }

/* --- Venture detail --- */
.venture-head-logo {
  height: clamp(34px, 5vw, 46px);
  width: auto;
  max-width: 180px;
  margin-bottom: var(--stack-3);
  object-fit: contain;
  object-position: left center;
}

.venture-head h1 {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.venture-head-role {
  margin-top: var(--stack-2);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
}

.venture-head-role a {
  color: var(--acid-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--acid-ink) 40%, transparent);
}

.venture-head .row-gov { margin-top: 10px; color: var(--acid-ink); }
.venture-head .row-gov::before { background: var(--acid-ink); }

.venture-prose {
  display: flex;
  flex-direction: column;
  gap: var(--stack-2);
}

.venture-prose p {
  max-width: 68ch;
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink-2);
}

/* --- Capability cards --- */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  margin-top: var(--stack-3);
  background: var(--rule);
  border: 1px solid var(--rule);
}

.capability-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--paper);
  transition: background 0.4s var(--ease-soft);
}

.capability-card:hover { background: var(--paper-raised); }

.capability-num {
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.capability-card h2 {
  font-family: var(--font-text);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.capability-card p {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ink-2);
}

/* --- Spec list --- */
.spec-list { margin-top: var(--stack-3); }

.spec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: clamp(13px, 1.6vw, 18px);
  border-bottom: 1px solid var(--rule);
}

.spec-row dt {
  flex: 0 0 auto;
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.spec-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--t-small);
  font-weight: 600;
  text-align: right;
  overflow-wrap: break-word;
}

/* --- Related --- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: var(--stack-3);
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: var(--tap);
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.35s, background 0.35s, transform 0.4s var(--ease);
}

.related-card span {
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.related-card strong {
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.related-card:hover {
  border-color: var(--ink);
  background: var(--paper-raised);
  transform: translateY(-2px);
}

.venture-foot-note {
  margin-top: var(--stack-3);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.venture-foot-note a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s;
}

.venture-foot-note a:hover { border-bottom-color: var(--ink); }

/* --- The ventures index register links its headings --- */
.venture-register h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.venture-register h2 a {
  /* Same trick: the company name is the row's primary control and was 34px
     tall, under the 44px minimum. */
  display: inline-block;
  padding-block: 9px;
  margin-block: -9px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 9px);
  background-size: 0% 1px;
  transition: background-size 0.45s var(--ease);
}

.venture-register h2 a:hover { background-size: 100% 1px; }

/* --- Industrial --- */
.industrial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1px;
  margin-top: var(--stack-3);
  background: var(--rule);
  border: 1px solid var(--rule);
}

.industrial-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--paper);
}

.industrial-logo {
  width: auto;
  height: 30px;
  max-width: 120px;
  margin-bottom: 4px;
  object-fit: contain;
  object-position: left center;
}

.industrial-card h3 {
  font-size: var(--t-h4);
  letter-spacing: -0.02em;
}

.industrial-card p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

/* --- About --- */
.about-body {
  display: grid;
  gap: var(--stack-4);
  align-items: start;
}

.about-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
}

.about-prose {
  display: flex;
  flex-direction: column;
  gap: var(--stack-2);
}

.about-prose p {
  max-width: 64ch;
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .about-body {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 5vw, 80px);
  }
  .about-portrait { max-width: 460px; }
}

/* --- Media kit --- */
.media-copy {
  max-width: 68ch;
  margin-bottom: var(--stack-3);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-2);
}

.media-bio h2 {
  margin-top: var(--stack-3);
  margin-bottom: 8px;
  font-family: var(--font-text);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  margin-top: var(--stack-3);
}

.media-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 24%;
  background: var(--paper-sunk);
}

.media-item figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding-top: 12px;
  font: 400 var(--t-meta) / 1.5 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.media-item figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s;
}

.media-item figcaption a:hover { border-bottom-color: var(--ink); }

/* --- Current page in the drawer --- */
.nav-link.active { color: var(--acid); }

/* ---------------------------------------------------------------------------
   34  CINEMATIC DEPTH
   The page was elegant but flat: paper, hairlines, black text, no dimension.
   This section adds light and depth without touching the palette — every
   shadow is the ink token at low alpha, every wash is a gradient of surfaces
   already in the system. No new colour is introduced.
   ------------------------------------------------------------------------ */

:root {
  /* Layered rather than single shadows. One large blur reads as a smudge; a
     tight contact shadow plus a wide ambient one reads as an object sitting
     on a surface. */
  --lift-1:
    0 1px 2px rgba(11, 13, 17, 0.04),
    0 2px 8px rgba(11, 13, 17, 0.04);
  --lift-2:
    0 1px 2px rgba(11, 13, 17, 0.05),
    0 6px 16px rgba(11, 13, 17, 0.06),
    0 14px 40px rgba(11, 13, 17, 0.05);
  --lift-3:
    0 2px 4px rgba(11, 13, 17, 0.06),
    0 12px 32px rgba(11, 13, 17, 0.09),
    0 32px 72px rgba(11, 13, 17, 0.07);
  --glass: color-mix(in srgb, var(--paper-raised) 74%, transparent);
  --sheet-radius: clamp(20px, 3vw, 40px);
}

.tone-dark {
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lift-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  --lift-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.5);
  --glass: rgba(17, 21, 29, 0.66);
}

/* --- Atmosphere -----------------------------------------------------------
   A slow light wash behind the paper sections. Barely perceptible alone; what
   it removes is the sense of printing on flat card stock. */
.statement,
.principles,
.metrics,
.ventures,
.journey,
.executive-spotlight,
.contact,
.subpage main > section {
  position: relative;
  isolation: isolate;
}

.statement::before,
.principles::before,
.metrics::before,
.journey::before,
.executive-spotlight::before,
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(90% 60% at 92% 100%, rgba(11, 13, 17, 0.045), transparent 66%);
}

/* --- The sheet transition -------------------------------------------------
   Paper slides up over the dark hero on a rounded edge with a cast shadow.
   This single move does more for perceived depth than anything else here:
   two planes at different heights, rather than two colours meeting on a line. */
.statement {
  margin-top: calc(var(--sheet-radius) * -1.15);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  border-top: none;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.38);
  z-index: 2;
}

/* Same move where the dark venture block ends and paper resumes. */
.journey {
  margin-top: calc(var(--sheet-radius) * -1.15);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.34);
  z-index: 2;
}

/* And where paper gives way to the closing plate. */
.closing {
  margin-top: calc(var(--sheet-radius) * -1.15);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: 0 -18px 50px rgba(11, 13, 17, 0.14);
  z-index: 2;
}

.venture-list {
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  margin-top: calc(var(--sheet-radius) * -1.15);
  box-shadow: 0 -18px 50px rgba(11, 13, 17, 0.16);
  position: relative;
  z-index: 2;
}

/* --- Plates gain weight --------------------------------------------------- */
.bw-frame,
.venture-image,
.spotlight-frame,
.about-portrait img,
.media-item img {
  box-shadow: var(--lift-3);
}

/* The feathered plates mask their own edges, so a box-shadow would trace a
   hard rectangle outside the soft edge. They get a drop-shadow filter, which
   follows the alpha channel instead. */
.bw-frame,
.venture-image,
.spotlight-frame {
  box-shadow: none;
  filter: drop-shadow(0 18px 44px rgba(11, 13, 17, 0.16));
}

/* --- Surfaces ------------------------------------------------------------- */
.metrics-grid,
.capability-grid,
.industrial-grid {
  box-shadow: var(--lift-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.venture-row,
.related-card,
.spec-card,
.institutional-panel {
  transition: background 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft),
    transform 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .related-card:hover,
  .metric-card:hover {
    box-shadow: var(--lift-2);
    transform: translateY(-3px);
  }
}

/* --- Glass ---------------------------------------------------------------- */
.contact-badge,
.tags span,
.dossier-pill,
.row-gov {
  background: var(--glass);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: var(--lift-1);
}

.copy-email-btn,
.notfound-link.is-primary,
.btn-dossier {
  box-shadow: var(--lift-2);
}

/* --- The principles row, which was the flattest thing on the page ---------- */
.principle-row {
  padding-inline: clamp(14px, 2vw, 28px);
  border-radius: var(--radius);
  transition: background 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft);
}

.principle-row span {
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  transition: color 0.4s var(--ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .principle-row:hover {
    background: var(--paper-raised);
    box-shadow: var(--lift-2);
  }
  .principle-row:hover span { color: var(--ink); }
}

/* --- Type gets more scale contrast ----------------------------------------
   The hero headline is NOT enlarged here. Its column is capped at 56% so the
   type never crosses the subject, and the hero clips overflow — push the size
   past that measure and "industries." loses its last glyphs. The drama in the
   hero comes from the plate and the sheet transition instead. */
.metric-num,
.metric-text { font-size: clamp(3rem, 6.5vw, 5.5rem); }

/* ---------------------------------------------------------------------------
   35  SCROLL CHOREOGRAPHY
   All of it runs on native scroll timelines or the compositor, so nothing here
   costs main-thread work, and all of it is inside prefers-reduced-motion.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* The hero recedes as the sheet rises over it — the two planes separate
       instead of one simply scrolling away.
       Selector must match `.js .hero-image img` from the entrance section:
       that rule is more specific, so a bare `.hero-image img` here loses
       regardless of order and the recede silently never runs. Both the
       entrance and the scroll-linked recede are declared together. */
    .js .hero-image img {
      animation: hero-settle 1.9s var(--ease) both,
                 aperture 1.5s var(--ease) both,
                 hero-recede linear both;
      animation-timeline: auto, auto, view(block);
      animation-range: normal, normal, exit 0% exit 100%;
    }

    /* Sections arrive slightly lifted and settle. */
    .metrics-grid,
    .capability-grid,
    .industrial-grid,
    .bw-frame,
    .venture-image,
    .spotlight-frame {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 44%;
    }

    /* Principle rows deal in one after another. */
    .principle-row {
      animation: row-arrive linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 48%;
    }
  }
}

@keyframes hero-recede {
  from { transform: scale(1); filter: brightness(1); }
  to   { transform: scale(1.12); filter: brightness(0.55); }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(30px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes row-arrive {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image img,
  .metrics-grid,
  .capability-grid,
  .industrial-grid,
  .bw-frame,
  .venture-image,
  .spotlight-frame,
  .principle-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}