/* ============================================================
   Pages — homepage sections + internal page layouts.
   ============================================================ */

/* ----------------------------------------------------------------
   Background layer for content sections.
   Sections sit above the fixed video; give them an opaque bg
   so they cover the video as the user scrolls past the hero.
   ---------------------------------------------------------------- */

main {
  position: relative;
  z-index: var(--z-content);
}

/* Non-hero sections sit on the solid abyssal canvas. The hero is
   the ocean moment; everything below is editorial composure, with
   Card-Glass tiles for specific content blocks. Brief §5: each
   section breathes; restraint over flourish. */
main > section:not(.hero),
main > .section:not(.hero) {
  background: var(--abyssal);
  position: relative;
  z-index: var(--z-content);
}

main > .divider {
  position: relative;
  z-index: var(--z-content);
  background: var(--color-divider);
  margin: 0;
}

/* ============================================================
   GLASS SYSTEM — three variants (brief §3.5)

   Whisper — header, nav. Almost invisible.
   Card    — content cards, metric tiles, contact cards. Workhorse.
   Modal   — overlays, expanded states.

   Every glass surface gets a 1px top-edge highlight via ::before
   (the magic detail — suggests light catching glass). Surfaces use
   `position: relative` and `isolation: isolate` so the pseudo-
   element stays bound and the stacking context is owned.
   ============================================================ */

.glass,
.glass--card {
  position: relative;
  background: var(--glass-card-bg);
  backdrop-filter: var(--glass-card-filter);
  -webkit-backdrop-filter: var(--glass-card-filter);
  border: var(--glass-card-border);
  border-radius: 2px;
  isolation: isolate;
  box-shadow: var(--glass-card-shadow);
}

.glass--whisper {
  position: relative;
  background: var(--glass-whisper-bg);
  backdrop-filter: var(--glass-whisper-filter);
  -webkit-backdrop-filter: var(--glass-whisper-filter);
  border: var(--glass-whisper-border);
  isolation: isolate;
}

.glass--modal {
  position: relative;
  background: var(--glass-modal-bg);
  backdrop-filter: var(--glass-modal-filter);
  -webkit-backdrop-filter: var(--glass-modal-filter);
  border: var(--glass-modal-border);
  isolation: isolate;
}

/* Top-edge specular highlight — 1px line gradient pearl→transparent.
   Brief §3.5: "All glass surfaces have a 1px inner highlight at
   their top edge — this suggests light catching glass. This is the
   magic detail." */
.glass::before,
.glass--card::before,
.glass--whisper::before,
.glass--modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--glass-highlight);
  pointer-events: none;
  z-index: 1;
}

/* Legacy modifier aliases — existing markup uses .glass--matte etc.
   Map onto the new variants so nothing breaks during refactor. */
.glass--matte { background: var(--glass-card-bg);    backdrop-filter: var(--glass-card-filter);    -webkit-backdrop-filter: var(--glass-card-filter); }
.glass--thin  { background: var(--glass-whisper-bg); backdrop-filter: var(--glass-whisper-filter); -webkit-backdrop-filter: var(--glass-whisper-filter); }
.glass--mid   { background: var(--glass-card-bg);    backdrop-filter: var(--glass-card-filter);    -webkit-backdrop-filter: var(--glass-card-filter); }
.glass--thick { background: var(--glass-modal-bg);   backdrop-filter: var(--glass-modal-filter);   -webkit-backdrop-filter: var(--glass-modal-filter); }

/* Fallback for browsers without backdrop-filter. Solid surface,
   never see-through (would render unreadable). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass--card    { background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .glass--whisper { background: color-mix(in srgb, var(--abyssal) 88%, transparent); }
  .glass--modal   { background: color-mix(in srgb, var(--deep) 94%, transparent); }
}

/* Low-perf tier — drop blur, keep tint. */
html[data-perf="low"] .glass,
html[data-perf="low"] .glass--card,
html[data-perf="low"] .glass--whisper,
html[data-perf="low"] .glass--modal {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-perf="low"] .glass,
html[data-perf="low"] .glass--card    { background: color-mix(in srgb, var(--surface) 86%, transparent); }
html[data-perf="low"] .glass--whisper { background: color-mix(in srgb, var(--abyssal) 78%, transparent); }
html[data-perf="low"] .glass--modal   { background: color-mix(in srgb, var(--deep) 90%, transparent); }

/* ----------------------------------------------------------------
   Ambient film grain — 3% SVG noise overlay (brief §3.1).
   Fixed-position, full-page, non-interactive. Auto-disabled on
   the low-perf tier (saves a repaint layer on weak GPUs).
   ---------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

html[data-perf="low"] body::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}

/* ----------------------------------------------------------------
   Editorial typographic refinements — drop cap, pull quote,
   small caps, italic display accents.
   ---------------------------------------------------------------- */

.dropcap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  float: left;
  font-size: 4.4em;
  line-height: 0.9;
  margin: 0.05em 0.18em -0.05em 0;
  color: var(--color-text);
}

.italic { font-style: italic; }

.smallcaps {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.eyebrow--mono {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 400;
}

.hairline {
  display: block;
  height: 1px;
  background: var(--color-divider);
  border: none;
  width: 100%;
}
.hairline--short { width: 48px; }

.editorial-num {
  font-family: var(--font-numeric);
  font-style: italic;
  font-weight: 400;
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ----------------------------------------------------------------
   Hero section
   ---------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: var(--header-h) var(--gutter-x) var(--space-8);
  /* Transparent — let the fixed video show through */
  background: transparent !important;
  z-index: var(--z-content);
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-bottom: clamp(3rem, 10vh, 7rem);
}

h1.hero__tagline,
.hero__tagline {
  /* Original display serif — Cormorant Garamond — UPRIGHT (no
     italic) and rendered bold for impact. Listed twice to outweigh
     h1.display in base.css. */
  font-family: "Cormorant Garamond", "GT Sectra", Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-text);
  /* Wide enough to keep "Delivering Certainty." on a single line at
     desktop sizes — overridden on mobile by the rule below. */
  max-width: none;
  opacity: 0;
  transform: translateY(40px);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 14px rgba(0, 0, 0, 0.75),
    0 8px 48px rgba(0, 0, 0, 0.65);
}

/* Each sentence is its own line on every viewport. */
.hero__tagline-line {
  display: block;
}

body.lang-cn .hero__tagline {
  font-family: var(--font-cn);
  letter-spacing: 0.02em;
  font-weight: 600;
}

.hero__cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
}

.hero__cue-line {
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent 0%, var(--color-text) 100%);
  animation: heroCue 1.8s var(--ease-out) infinite;
}

.hero__cue-text {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@keyframes heroCue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.4; }
}

@media (max-width: 768px) {
  .hero { padding: var(--header-h-mobile) var(--gutter-x) var(--space-6); }
  .hero__inner { padding-bottom: var(--space-8); }
}

/* Mobile tagline — each word on its own line, gentle gap between
   sentences. word-spacing: 100vw is the canonical CSS-only trick to
   force every space to break the line; combined with display:block
   on each sentence wrapper it gives a clean stair-step layout. */
@media (max-width: 640px) {
  h1.hero__tagline,
  .hero__tagline {
    font-size: clamp(2.625rem, 13vw, 3.75rem);
    line-height: 1.1;
    max-width: none;
  }
  .hero__tagline-line {
    word-spacing: 100vw;
  }
  .hero__tagline-line + .hero__tagline-line {
    margin-top: 0.5em;
  }
  /* CN doesn't have spaces between words, so the trick above is
     a no-op there — fall back to a clean two-line layout. */
  body.lang-cn .hero__tagline-line {
    word-spacing: normal;
  }
}

/* ----------------------------------------------------------------
   Stats section
   ---------------------------------------------------------------- */

.stats {
  padding-block: clamp(5rem, 12vw, 9rem);
}

.stats__eyebrow {
  margin-bottom: var(--space-8);
}

.stats__grid {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: var(--space-8);
  align-items: end;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Asymmetric vertical stagger — editorial */
.stat--volume   { padding-top: var(--space-6); }
.stat--countries { padding-top: var(--space-12); }

.stat__value {
  /* Sans-serif numerics that match the label below (--font-sans).
     Modern numerals, tabular figures so digit widths line up. */
  font-family: var(--font-sans);
  font-size: var(--fs-stat);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--color-text);
  display: inline-block;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

.stat__suffix {
  font-family: var(--font-sans);
  font-size: 0.42em;
  font-weight: 500;
  font-style: normal;
  color: var(--color-text-muted);
  margin-left: 0.22em;
  letter-spacing: 0;
  font-variant-numeric: normal;
  vertical-align: 0.32em;
}

body.lang-cn .stat__suffix {
  font-family: var(--font-cn);
  font-size: 0.36em;
}

.stat .rule-red--thin {
  margin-block: var(--space-3) 0;
}

.stat__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  color: var(--color-text);
  text-transform: uppercase;
  margin-top: var(--space-2);
}

@media (max-width: 900px) {
  .stats__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .stat--volume,
  .stat--countries { padding-top: 0; }
}

/* ----------------------------------------------------------------
   Three Principles
   ---------------------------------------------------------------- */

.principles__header {
  margin-bottom: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 56ch;
}

.principles__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.principle {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-divider);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    border-color var(--dur-short) var(--ease-out),
    transform    var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out);
}

/* Hover lift only on devices with a real cursor — touch devices
   stay completely static, no tap-feedback visuals. */
@media (hover: hover) and (pointer: fine) {
  .principle:hover {
    border-color: var(--color-brand);
    transform: translateY(-4px);
    background: #131313;
  }
}

.principle__num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-brand);
  letter-spacing: 0.04em;
  display: inline-block;
  margin-bottom: var(--space-3);
}

.principle__title {
  font-size: var(--fs-xl);
  line-height: 1.15;
}

.principle__body {
  font-size: var(--fs-base);
  line-height: 1.6;
  max-width: 36ch;
  color: var(--color-text);
  opacity: 0.78;
}

@media (max-width: 900px) {
  .principles__grid { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ----------------------------------------------------------------
   Who We Are
   ---------------------------------------------------------------- */

.who__grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: var(--space-8);
  align-items: start;
}

.who__col-label .eyebrow {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}

.who__col-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 60ch;
}

.who__col-body p {
  font-size: var(--fs-md);
  line-height: 1.5;
  max-width: none;
}

.who__col-body .link-arrow {
  margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .who__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .who__col-label .eyebrow { position: static; }
}

/* ----------------------------------------------------------------
   Contact strip
   ---------------------------------------------------------------- */

.contact-strip__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  column-gap: var(--space-8);
  row-gap: var(--space-6);
  align-items: center;
}

.contact-strip__heading {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  font-style: italic;
  max-width: 14ch;
  margin: 0;
  align-self: center;
}

body.lang-cn .contact-strip__heading {
  font-style: normal;
}

.contact-strip__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.contact-strip__more {
  align-self: flex-start;
  margin-top: var(--space-1);
}

@media (max-width: 768px) {
  .contact-strip__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .contact-strip__heading { max-width: none; }
}

.contact-strip__email {
  font-size: var(--fs-md);
  font-family: var(--font-sans);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text-subtle);
  padding-bottom: 2px;
  transition:
    color var(--dur-micro) var(--ease-micro),
    border-color var(--dur-micro) var(--ease-micro);
}

.contact-strip__email:hover {
  color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

@media (max-width: 768px) {
  .contact-strip__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }
}

/* ============================================================
   INTERNAL PAGES — shared
   ============================================================ */

.page-hero {
  padding-top: calc(var(--header-h) + var(--space-12));
  padding-bottom: var(--space-8);
  position: relative;
  overflow: hidden;       /* clips the video to the hero rect */
  isolation: isolate;     /* establishes a stacking context for layered children */
}

/* Video layer — present on About/Approach/Activities page-heros only
   (Contact + Home opt out via not having the markup). Two stacked
   <video>s cycle intro→loop, lazy-loaded by js/pageHero.js. */
.page-hero__bg-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.page-hero__video.is-active {
  opacity: 1;
  z-index: 2;
}

/* Suppress browser play overlays on these too. */
.page-hero__video::-webkit-media-controls,
.page-hero__video::-webkit-media-controls-panel,
.page-hero__video::-webkit-media-controls-overlay-play-button,
.page-hero__video::-webkit-media-controls-start-playback-button,
.page-hero__video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Card glass on page-hero — the section title sits over busy
   ocean, so this softens to a readable surface. Vertical gradient
   tail blends the bottom edge into the page below. */
.page-hero__glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 36%, transparent) 0%,
      color-mix(in srgb, var(--surface) 56%, transparent) 60%,
      color-mix(in srgb, var(--surface) 30%, transparent) 100%);
  backdrop-filter: var(--glass-card-filter);
  -webkit-backdrop-filter: var(--glass-card-filter);
  pointer-events: none;
}
.page-hero__glass::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--glass-highlight);
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-hero__glass { background: color-mix(in srgb, var(--surface) 92%, transparent); }
}

html[data-perf="low"] .page-hero__glass {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  z-index: 3;             /* sits above the video + glass */
}

.page-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-text);
  display: inline-block;
  line-height: 1;
}

.page-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1.5px;
  background: var(--color-brand);
  vertical-align: 0.32em;
  margin-right: 14px;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-weight: 500;
}

.page-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--color-brand);
  border: none;
  margin-top: var(--space-3);
}

@media (max-width: 768px) {
  .page-hero { padding-top: calc(var(--header-h-mobile) + var(--space-8)); }
}

/* ----------------------------------------------------------------
   Editorial section — shared layout for internal page bodies
   ---------------------------------------------------------------- */

.editorial-section {
  padding-block: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--color-divider);
}

.editorial-section:first-of-type { border-top: none; }

.editorial-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-8);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
  align-items: start;
}

.editorial-grid__label {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.editorial-grid__label .eyebrow {
  display: block;
}

.editorial-grid__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 14ch;
}

.editorial-grid__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 62ch;
}

.editorial-grid__body p {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
  max-width: none;
}

.editorial-grid__body p + p { margin-top: 0; }

@media (max-width: 900px) {
  .editorial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .editorial-grid__label { position: static; }
}

/* ----------------------------------------------------------------
   About page body font experiment — Avenir on Mac/iOS, Manrope
   everywhere else. Both are humanist geometric sans-serifs with
   open apertures and friendly proportions; together they give a
   classy, easy-to-read feel that's distinct from Inter.
   Scoped to .page-about only.
   ---------------------------------------------------------------- */

.page-about .editorial-grid__body p,
.page-about .founder-grid__body p {
  font-family: "Avenir Next", "Avenir", "Manrope", var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

/* ----------------------------------------------------------------
   Founder section — photo + bio
   ---------------------------------------------------------------- */

.founder-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-8);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
  align-items: start;
}

.founder-grid__media {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}

.founder-photo {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05) brightness(0.95);
  border: 1px solid var(--color-divider);
}

/* Subtle red corner mark — editorial accent */
.founder-photo::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  border-top: 1px solid var(--color-brand);
  border-right: 1px solid var(--color-brand);
  pointer-events: none;
}
.founder-photo::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: -8px;
  width: 32px;
  height: 32px;
  border-bottom: 1px solid var(--color-brand);
  border-left: 1px solid var(--color-brand);
  pointer-events: none;
}

.founder-photo__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-2);
}

.founder-photo__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.founder-photo__role {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--color-text-muted);
}

.founder-grid__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.founder-grid__copy .eyebrow { margin-bottom: var(--space-1); }

.founder-grid__copy .editorial-grid__heading {
  margin-bottom: var(--space-3);
}

.founder-grid__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.founder-grid__body p {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .founder-grid__media {
    position: static;
    max-width: 420px;
  }
}

/* ----------------------------------------------------------------
   Pull-quote treatment (Founder, Risk)
   ---------------------------------------------------------------- */

.pull-quote {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  padding-inline: var(--gutter-x);
  text-align: center;
  background: var(--color-bg);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.pull-quote__inner {
  max-width: 720px;
  margin-inline: auto;
  position: relative;
}

.pull-quote__text {
  max-width: 22ch;
  margin-inline: auto;
}

.pull-quote__rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-brand);
  margin: 0 auto var(--space-4);
  border: none;
}

.pull-quote__rule--bottom {
  margin: var(--space-4) auto 0;
}

.pull-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-weight: 500;
  text-wrap: balance;
}

.pull-quote__text::before {
  content: open-quote;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 1.4em;
  line-height: 0;
  position: relative;
  top: 0.25em;
  margin-right: 0.05em;
}

.pull-quote__text::after {
  content: close-quote;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: 1.4em;
  line-height: 0;
  position: relative;
  top: 0.25em;
  margin-left: 0.05em;
}

body.lang-cn .pull-quote__text { font-style: normal; }
body.lang-cn .pull-quote__text::before,
body.lang-cn .pull-quote__text::after { content: none; }

.pull-quote__attribution {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  display: block;
}

/* Hero variant — full-width oversize for the Risk pull-quote on /approach */
.pull-quote--hero {
  padding-block: clamp(6rem, 14vw, 11rem);
}
.pull-quote--hero .pull-quote__text {
  font-size: clamp(2rem, 5vw, 4rem);
  max-width: 22ch;
  margin-inline: auto;
}

/* ----------------------------------------------------------------
   Activities — Products list (horizontal strip)
   ---------------------------------------------------------------- */

.products-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin-block: var(--space-6);
}

.products-strip__item {
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: background-color var(--dur-micro) var(--ease-micro);
}

.products-strip__item:last-child { border-right: none; }
.products-strip__item:hover { background: var(--color-bg-elevated); }

.products-strip__num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-brand);
  letter-spacing: 0;
}

.products-strip__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-text);
  font-weight: 500;
}

@media (max-width: 768px) {
  .products-strip { grid-template-columns: repeat(2, 1fr); }
  .products-strip__item:nth-child(2) { border-right: none; }
  .products-strip__item:nth-child(1),
  .products-strip__item:nth-child(2) { border-bottom: 1px solid var(--color-divider); }
}

/* World map block removed — see git history for the SVG version */

/* ----------------------------------------------------------------
   Activities — Strategic position regions
   ---------------------------------------------------------------- */

.regions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  margin-block: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.regions__item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  display: inline-flex;
  align-items: baseline;
}

.regions__item::after {
  content: "·";
  color: var(--color-brand);
  font-size: 1em;
  margin-inline: 0.5em;
  display: inline-block;
}

.regions__item:last-child::after { content: none; }

/* ----------------------------------------------------------------
   How We Trade — three numbered items
   ---------------------------------------------------------------- */

.how-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 62ch;
}

.how-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-divider);
}

.how-item:last-child { border-bottom: 1px solid var(--color-divider); }

.how-item__num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-brand);
  letter-spacing: 0;
  align-self: start;
  padding-top: 0.2em;
}

.how-item__heading {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.how-item__body {
  grid-column: 2;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: none;
}

.how-closing {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 50ch;
}

body.lang-cn .how-closing { font-style: normal; }

@media (max-width: 600px) {
  .how-item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .how-item__body { grid-column: 1; }
  .how-item__num { padding-top: 0; }
}

/* ----------------------------------------------------------------
   Contact page
   ---------------------------------------------------------------- */

.contact-page__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-8);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
  padding-block: clamp(2rem, 6vw, 5rem) clamp(6rem, 12vw, 10rem);
}

.contact-page__col-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-page__col-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-block__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-block__company {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.contact-block__address {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--color-text);
}

.contact-block__address span { display: block; }

.contact-block__email {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text-subtle);
  padding-bottom: 2px;
  display: inline-block;
  width: fit-content;
  transition:
    color var(--dur-micro) var(--ease-micro),
    border-color var(--dur-micro) var(--ease-micro);
}

.contact-block__email:hover {
  color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

@media (max-width: 768px) {
  .contact-page__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ============================================================
   Activities — Global Flow editorial world map.

   Visual language: satellite-at-night. Continents are near-invisible
   warm-white outlines on a near-black radial background. Markers are
   red dots; trade routes are dashed brand-red curves. HQ Hong Kong
   gets a special pulsing ring + mono label. Everything else uses
   italic serif labels with thin connector lines drawn out over water.

   The map is a 2000x857 viewBox SVG injected at runtime by map.js.
   ============================================================ */

.world-flow {
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--color-bg);
  position: relative;
}

.world-flow__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.world-flow__eyebrow {
  letter-spacing: 0.2em;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.world-flow__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0;
}

.world-flow__rule {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Legend — primary (red dashed) vs secondary (gold dashed) flows.
   Sits between the heading and the map. Mono labels, small swatches
   echoing the actual line styling. */
.world-flow__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.world-flow__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.world-flow__legend-swatch {
  display: inline-block;
  width: 32px;
  height: 0;
  border-bottom: 1.5px dashed var(--color-brand);
  vertical-align: middle;
  transform: translateY(-1px);
}

.world-flow__legend-item--secondary .world-flow__legend-swatch {
  border-bottom-color: #D4A85A;
}

/* Map container — transparent. Sits on the page background so only
   the continents, routes and markers carry visual weight; no panel,
   no frame, no vignette competing for attention.
   Locked to 2000:857 aspect ratio. The container is `visibility: hidden`
   until JS finishes wiring up the SVG hidden state and adds .is-ready
   — final-defense layer that prevents any boot-window flash. */
.world-flow__map {
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 2000 / 857;
  position: relative;
  overflow: hidden;
  visibility: hidden;
  background: transparent;
}

.world-flow__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3; /* sits above the ::before atmospheric tint */
}

/* Container becomes visible only after JS has wired up hidden state. */
.world-flow__map.is-ready {
  visibility: visible;
}

/* Pre-reveal: hide every dynamic layer until the timeline drives
   them in. Targeting all top-level <g> children is simpler than
   listing each one and guarantees nothing leaks through (e.g. the
   routes used to show on page load before the map even scrolled
   into view). */
.world-flow__svg.is-pre-reveal > g {
  opacity: 0;
}

/* ----- Layer 1: graticule (latitude reference lines) ----- */
.world-flow__graticule-line {
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 0.5;
  stroke-dasharray: 2 6;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* ----- Layer 2: country paths (continents) ----- */
/* CSS overrides the source SVG's fill="#ececec" stroke="black"
   defaults — presentation attributes have lower specificity than
   any CSS rule so this is reliable. */
.world-flow__land path {
  /* Reads as warm-paper outlines at a glance — present enough to
     ground the routes, soft enough to never compete with them. */
  fill: rgba(255, 255, 255, 0.11);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.75;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ----- Layer 3: trade routes ----- */
.world-flow__route {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* will-change is intentionally omitted — these tween once via
     opacity then run a low-cost dash-shift animation. */
}

/* Primary flows (red, brighter than spec, with double drop-shadow
   for a richer glow). The flowing-dash animation cycles dashoffset
   by exactly one dash period (10 = 6+4) so the loop is mathematically
   seamless — no visual jump on cycle restart. */
.world-flow__route--primary {
  stroke: rgba(255, 60, 80, 0.95);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 90, 110, 0.85))
    drop-shadow(0 0 5px rgba(220, 30, 50, 0.45));
}

.world-flow__svg.is-revealed .world-flow__route--primary {
  animation: world-flow-route-flow 1.6s linear infinite;
}

/* Secondary flows (gold). Different dash pattern (3 5 = period 8) and
   reverse direction so primary + secondary read as two crossing
   currents at a glance, even where colors overlap. */
.world-flow__route--secondary {
  stroke: rgba(232, 188, 110, 0.92);
  stroke-width: 1.1;
  stroke-dasharray: 3 5;
  filter:
    drop-shadow(0 0 1px rgba(245, 210, 140, 0.75))
    drop-shadow(0 0 3.5px rgba(200, 160, 80, 0.4));
}

.world-flow__svg.is-revealed .world-flow__route--secondary {
  animation: world-flow-route-flow-secondary 2.2s linear infinite;
}

/* Loops over exactly one dash period so the cycle is seamless. */
@keyframes world-flow-route-flow {
  to { stroke-dashoffset: -10; }
}

@keyframes world-flow-route-flow-secondary {
  to { stroke-dashoffset: 8; }   /* reverse direction; period = 8 */
}

@media (prefers-reduced-motion: reduce) {
  .world-flow__svg.is-revealed .world-flow__route--primary,
  .world-flow__svg.is-revealed .world-flow__route--secondary {
    animation: none;
  }
}

/* ----- Layer 3.5: signal "ships" — small bright dots traveling
   along each route via SVG <animateMotion>. Native compositor
   animation; doesn't rely on the JS rAF loop. ----- */
.world-flow__signal-core {
  fill: #FFFFFF;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

.world-flow__signal-halo {
  fill: rgba(255, 255, 255, 0.18);
}

.world-flow__signal--primary .world-flow__signal-core {
  fill: #FFE5C2;
  filter: drop-shadow(0 0 5px rgba(255, 130, 130, 0.95));
}
.world-flow__signal--primary .world-flow__signal-halo {
  fill: rgba(255, 90, 110, 0.22);
}

.world-flow__signal--secondary .world-flow__signal-core {
  fill: #FFEFC8;
  filter: drop-shadow(0 0 4px rgba(245, 210, 140, 0.85));
}
.world-flow__signal--secondary .world-flow__signal-halo {
  fill: rgba(232, 188, 110, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .world-flow__signals {
    display: none;
  }
}

/* ----- Layer 4: hub markers ----- */
/* The outer .world-flow__hub <g> carries the translate that pins the
   marker to its map coordinate. The inner .world-flow__hub-inner <g>
   is the animation target — scaled by the reveal timeline (and never
   touches the outer translate). */
.world-flow__hub-inner {
  transform-box: fill-box;
  transform-origin: center;
}

.world-flow__hub-dot {
  fill: var(--color-brand);
  filter: drop-shadow(0 0 4px rgba(58, 77, 110, 0.6));
}

/* Secondary destination dots — smaller, gold, softer glow. */
.world-flow__hub-dot--secondary {
  fill: #E8BC6E;
  filter: drop-shadow(0 0 4px rgba(232, 188, 110, 0.7));
}

.world-flow__hub-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
}

.world-flow__hub-pulse {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

/* Pulsing — only engaged once .is-pulsing is applied to the SVG
   (set after the reveal timeline completes). HQ pulse expands a
   ring outward; other hubs scale subtly. */
.world-flow__svg.is-pulsing .world-flow__hub-pulse {
  animation: world-flow-hq-pulse 2.4s ease-out infinite;
}

.world-flow__svg.is-pulsing .world-flow__hub:not(.world-flow__hub--hq) .world-flow__hub-inner {
  animation: world-flow-hub-pulse 2.8s ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

@keyframes world-flow-hq-pulse {
  0%   { r: 10; opacity: 0.9; }
  100% { r: 28; opacity: 0;   }
}

@keyframes world-flow-hub-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.45); opacity: 0.55; }
}

/* ----- Layer 5: labels + connector lines ----- */
.world-flow__label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;          /* rendered against viewBox space */
  fill: rgba(245, 240, 230, 1);
  paint-order: stroke fill;
  stroke: rgba(5, 5, 7, 0.85);
  stroke-width: 3;          /* heavier halo for legibility against any background */
  letter-spacing: 0.01em;
}

.world-flow__label--hq {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  fill: rgba(255, 255, 255, 1);
  stroke: rgba(5, 5, 7, 0.9);
  stroke-width: 3.5;
  text-transform: none;     /* text is already uppercase in source */
}

.world-flow__label-connector {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* ----- Reduced motion: kill the keyframe pulses ----- */
@media (prefers-reduced-motion: reduce) {
  .world-flow__svg.is-pulsing .world-flow__hub-pulse,
  .world-flow__svg.is-pulsing .world-flow__hub:not(.world-flow__hub--hq) .world-flow__hub-inner {
    animation: none;
  }
}

/* ============================================================
   Region cards (below the map).
   Editorial row of minimal cards with hairline dividers. Mobile:
   horizontal scroll-snap, otherwise even row.
   ============================================================ */
.world-flow__cards {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 1280px;
}

.world-flow__card {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  border-left: 1px solid var(--color-divider);
  transition: background-color var(--dur-micro) var(--ease-micro);
}

.world-flow__card:first-child {
  border-left: none;
}

.world-flow__card-name {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  /* Bumped from --fs-xs to --fs-sm and weight 700 so region names
     read as the dominant element of each card — products read as
     supporting metadata. */
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  line-height: 1.15;
}

.world-flow__card-products {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.02em;
  transition: color var(--dur-micro) var(--ease-micro);
}

.world-flow__card-rule {
  width: 24px;
  height: 1px;
  background: var(--color-brand);
  border: none;
  margin: 0;
}

@media (hover: hover) {
  .world-flow__card:hover .world-flow__card-products {
    color: var(--color-text);
  }
}

/* Mobile: hide the cards row entirely. The map markers themselves
   carry the geography; on a phone, an 8-card horizontal scroll feels
   gimmicky. The (reduced) map alone is the right call here. */
@media (max-width: 768px) {
  .world-flow__cards {
    display: none;
  }
}

/* On small viewports, hide the on-map labels entirely — the markers
   carry the network at a glance and labels collide at narrow widths. */
@media (max-width: 640px) {
  .world-flow__labels {
    display: none;
  }
}

/* ============================================================
   About — The Desk (stacked editorial spread).

   Major section beat after the Founder. Header (mono label +
   display heading + red rule + italic intro) sits above two
   stacked profile rows. Each row is a 2-column internal grid:
   monogrammed serif initials on the left, name/title/rule/bio
   on the right. A single hairline <hr> separates the two
   profiles. No boxes, no cards, no numbering — typography and
   whitespace carry the entire structure.

   Defense-in-depth animation: the section ships with the
   .is-pre-reveal class, every animated child is opacity:0 (and
   transformed where applicable) from first paint. js/desk.js
   drops the class and runs the choreographed timeline; an 8s
   safety timer paints the final state if anything stalls.
   ============================================================ */
.the-desk {
  padding-block: var(--space-16);
}

.the-desk__inner {
  display: flex;
  flex-direction: column;
}

/* ----- Section header ----- */
.desk-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--space-16);
}

.desk-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: var(--tr-display);
  color: var(--color-text);
  margin: 0;
}

.desk-rule {
  width: 64px;
  height: 1px;
  background: var(--color-brand);
  margin-top: var(--space-4);
  transform-origin: left center;
}

/* CN typography swap on the section heading. */
body.lang-cn .desk-heading {
  font-family: var(--font-cn);
  font-weight: 500;
  letter-spacing: 0;
}

/* ----- Per-profile row: initials | content ----- */
.desk-profile {
  display: grid;
  grid-template-columns: minmax(180px, 25%) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ----- Initials (left column) ----- */
.profile-initials {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(7rem, 12vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-text);
  text-align: left;
  margin: 0;
  /* GSAP scales this slightly during reveal — set a transform-origin
     so the scale happens around the visual center of the letters. */
  transform-origin: left top;
  /* Hover transition (desktop only): tonal warmth shift. */
  transition: color 400ms var(--ease-micro), opacity 400ms var(--ease-micro);
}

/* ----- Content (right column) ----- */
.profile-content {
  display: flex;
  flex-direction: column;
}

.profile-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

body.lang-cn .profile-name {
  font-family: var(--font-cn);
  font-weight: 500;
  letter-spacing: 0;
}

.profile-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

.profile-rule {
  width: 32px;
  height: 1px;
  background: var(--color-brand);
  margin-bottom: var(--space-4);
  transition: width 400ms var(--ease-micro);
}

.profile-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 56ch;
}

.profile-bio p {
  font-family: var(--font-sans);
  /* Bumped from --fs-base (16px) to 18px so the bios read with more
     editorial weight — a step up toward the founder's body size
     (20px) without claiming parity with it. Line-height tightens
     slightly to keep the proportions balanced at the larger size. */
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
  max-width: 56ch;
}

/* ----- Divider between profiles ----- */
.desk-divider {
  border: 0;
  width: 100%;
  height: 1px;
  background: var(--color-divider);
  opacity: 0.6;
  margin: var(--space-12) 0;
}

/* ----- Hover (desktop pointer only) ----- */
@media (hover: hover) {
  .desk-profile:hover .profile-rule { width: 56px; }
  .desk-profile:hover .profile-initials {
    /* Subtle tonal warmth — a hint of red, not a full color change.
       0.85 opacity on the brand color keeps it editorial. */
    color: var(--color-brand);
    opacity: 0.85;
  }
}

/* ----- Mobile stacking ----- */
@media (max-width: 768px) {
  .desk-profile {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .profile-initials {
    font-size: clamp(4rem, 14vw, 6rem);
    margin-bottom: var(--space-3);
  }
  .profile-name {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }
  .profile-bio,
  .profile-bio p {
    max-width: none;
  }
  .desk-heading {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }
}

/* ----- Pre-reveal hide (defense-in-depth) ----- */
/* Section ships with .is-pre-reveal. Every animated element starts
   hidden so NOTHING paints before js/desk.js drops the class and the
   timeline drives them in. */
.the-desk.is-pre-reveal .profile-initials,
.the-desk.is-pre-reveal .profile-content,
.the-desk.is-pre-reveal .desk-divider {
  opacity: 0;
}
.the-desk.is-pre-reveal .desk-heading {
  opacity: 0;
  transform: translateY(24px);
}
.the-desk.is-pre-reveal .profile-initials {
  transform: translateY(20px) scale(0.96);
}
.the-desk.is-pre-reveal .desk-rule {
  transform: scaleX(0);
}

/* Reduced motion: bypass the pre-reveal hide entirely. */
@media (prefers-reduced-motion: reduce) {
  .the-desk.is-pre-reveal .desk-heading,
  .the-desk.is-pre-reveal .desk-rule,
  .the-desk.is-pre-reveal .profile-initials,
  .the-desk.is-pre-reveal .profile-content,
  .the-desk.is-pre-reveal .desk-divider {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   FREESIA EDITORIAL — Met Gala-grade content components.
   Refined hero, italic display moments, glass cards, an
   ultra-restrained enquiry form. Couture restraint over flash.
   ============================================================ */

/* ----------------------------------------------------------------
   Hero overlay — refined to a soft vignette so the tagline lifts
   off the busiest part of the ocean.
   ---------------------------------------------------------------- */
.hero-overlay {
  background:
    radial-gradient(ellipse at 50% 75%, rgba(0,0,0,0.42) 0%, transparent 60%),
    linear-gradient(180deg, rgba(14,22,32,0.05) 0%, transparent 30%, transparent 60%, rgba(14,22,32,0.55) 100%);
}

/* ----------------------------------------------------------------
   Hero tagline — italic Cormorant. The dateline sits in the
   top-left like a magazine masthead; the tagline drops in at the
   bottom-left of the viewport.
   ---------------------------------------------------------------- */
h1.hero__tagline,
.hero__tagline {
  font-family: "Cormorant Garamond", "GT Sectra", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 7.6vw, 6.8rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 8px 40px rgba(0, 0, 0, 0.45);
}

.hero__dateline {
  position: absolute;
  top: calc(var(--header-h) + var(--space-3));
  left: var(--gutter-x);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  z-index: 3;
  opacity: 0;
  animation: heroFadeIn 1.2s var(--ease-out) 600ms forwards;
}
.hero__dateline-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .hero__dateline { font-size: 10px; letter-spacing: 0.28em; gap: var(--space-1); }
  .hero__dateline-rule { width: 18px; }
}

/* ----------------------------------------------------------------
   Editorial metrics — four figures in display-serif italic,
   labels in mono small caps. A hairline separates each row.
   ---------------------------------------------------------------- */
.metrics {
  padding-block: clamp(5rem, 12vw, 9rem);
}

.metrics__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.metrics__eyebrow {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.metrics__rule {
  width: 100%;
  max-width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04));
  border: none;
  margin: 0;
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.metric {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.metric + .metric {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.metric__num {
  font-family: var(--font-numeric);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--color-text);
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
}
.metric__suffix {
  display: inline-block;
  font-size: 0.42em;
  vertical-align: 0.55em;
  margin-left: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  letter-spacing: 0;
}

.metric__rule {
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-2);
}

.metric__label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 900px) {
  .metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2n+1) { border-left: none; }
  .metric:nth-child(n+3)  { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}
@media (max-width: 520px) {
  .metrics__grid { grid-template-columns: 1fr; }
  .metric { border-left: none !important; }
  .metric + .metric { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ----------------------------------------------------------------
   "The House" — short editorial about-us. Italic eyebrow on the
   left column, lead paragraph with drop cap on the right.
   ---------------------------------------------------------------- */
.house {
  padding-block: clamp(5rem, 12vw, 9rem);
}
.house__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.house__label .eyebrow--mono { display: inline-block; }
.house__label-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  margin-top: var(--space-3);
}
.house__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: var(--space-3);
  color: var(--color-text);
  max-width: 18ch;
}
.house__body {
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.96);
  max-width: 60ch;
  /* Matte glass surface so reading copy lifts off the moving ocean. */
  position: relative;
  background: var(--glass-matte-bg);
  backdrop-filter: var(--glass-matte-blur);
  -webkit-backdrop-filter: var(--glass-matte-blur);
  border: var(--glass-border);
  border-radius: 2px;
  isolation: isolate;
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.25rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.house__body p + p { margin-top: var(--space-3); }
@media (max-width: 768px) {
  .house__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ----------------------------------------------------------------
   Contact cards — three glass panels. Each is a hand-set card
   with eyebrow / italic heading / micro-paragraph / mailto link.
   ---------------------------------------------------------------- */
.contacts {
  padding-block: clamp(5rem, 12vw, 9rem);
}
.contacts__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.contacts__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 18ch;
}

.contacts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.contact-card {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 240px;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 32px 80px -32px rgba(0, 0, 0, 0.65);
}
.contact-card__eyebrow {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.contact-card__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.contact-card__rule {
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  margin-top: var(--space-1);
}
.contact-card__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin-top: auto;
}
.contact-card__link {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: border-color var(--dur-micro) var(--ease-micro), gap var(--dur-short) var(--ease-out);
}
.contact-card__link:hover {
  border-bottom-color: var(--color-text);
  gap: 0.9em;
}
.contact-card__arrow { font-style: normal; }

@media (max-width: 900px) {
  .contacts__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   Products grid — editorial product tiles. Each tile is a glass
   card with a fish silhouette accent, italic name, small-cap kind.
   ---------------------------------------------------------------- */
.products {
  padding-block: clamp(4rem, 9vw, 7rem);
}
.products__intro {
  max-width: 64ch;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.96);
  /* Matte panel — the intro paragraph reads off frosted glass. */
  position: relative;
  background: var(--glass-matte-bg);
  backdrop-filter: var(--glass-matte-blur);
  -webkit-backdrop-filter: var(--glass-matte-blur);
  border: var(--glass-border);
  border-radius: 2px;
  isolation: isolate;
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.25rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.product-tile {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.product-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 32px 80px -32px rgba(0, 0, 0, 0.65);
}
.product-tile__kind {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.product-tile__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.product-tile__rule {
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  margin-top: var(--space-1);
}
.product-tile__meta {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}
.product-tile__meta-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.product-tile__meta-row + .product-tile__meta-row { margin-top: 4px; }
.product-tile__meta-key {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 900px) { .products__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .products__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   About page editorial — long-form. Lead paragraph with drop cap,
   pull quote, supporting paragraphs.
   ---------------------------------------------------------------- */
.editorial {
  padding-block: clamp(4rem, 9vw, 7rem);
}
.editorial__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.editorial__label {
  position: sticky;
  top: calc(var(--header-h) + var(--space-3));
}
.editorial__eyebrow { display: inline-block; }
.editorial__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: var(--space-3);
  color: var(--color-text);
  max-width: 16ch;
}
.editorial__body {
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.96);
  max-width: 64ch;
  /* Matte panel for long-form editorial copy. */
  position: relative;
  background: var(--glass-matte-bg);
  backdrop-filter: var(--glass-matte-blur);
  -webkit-backdrop-filter: var(--glass-matte-blur);
  border: var(--glass-border);
  border-radius: 2px;
  isolation: isolate;
  padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.25rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.editorial__body p + p { margin-top: var(--space-4); }

.pull-quote {
  margin: clamp(3rem, 6vw, 5rem) 0;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-align: center;
  position: relative;
  /* Matte panel — the quote is the editorial's quiet centrepiece. */
  background: var(--glass-matte-bg);
  backdrop-filter: var(--glass-matte-blur);
  -webkit-backdrop-filter: var(--glass-matte-blur);
  border: var(--glass-border);
  border-radius: 2px;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.pull-quote::before,
.pull-quote::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}
.pull-quote::before { top: 28px; }
.pull-quote::after  { bottom: 28px; }

@media (max-width: 768px) {
  .editorial__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .editorial__label { position: static; }
}

/* ----------------------------------------------------------------
   Contact page — address block + Write an Enquiry glass form.
   ---------------------------------------------------------------- */
.contact-page {
  padding-block: clamp(4rem, 9vw, 7rem);
}
.contact-page__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.contact-page__address {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.96);
  /* Matte panel — address + contact rows on frosted glass. */
  position: relative;
  background: var(--glass-matte-bg);
  backdrop-filter: var(--glass-matte-blur);
  -webkit-backdrop-filter: var(--glass-matte-blur);
  border: var(--glass-border);
  border-radius: 2px;
  isolation: isolate;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(2rem, 4vw, 3rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.20),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.contact-page__address-lines {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  margin-top: var(--space-2);
}
.contact-page__contacts {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-page__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.contact-page__row-key {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.contact-page__row a {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  letter-spacing: 0;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur-micro) var(--ease-micro);
  align-self: flex-start;
}
.contact-page__row a:hover { border-bottom-color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   PHASE 3D — CONTACT PAGE (brief §5.4)
   Office address block + Card-Glass enquiry form. Form fields are
   line-only inputs (no boxes), labels in eyebrow caps above each.
   ============================================================ */

.office {
  padding-block: var(--section-pad-y);
  position: relative;
  z-index: var(--z-content);
}
.office__grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.office__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.office__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-l);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  color: var(--pearl);
}
.office__heading em { font-style: italic; font-weight: 400; }
.office__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.office__address {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-display-m);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--pearl);
  margin: 0;
  max-width: none;
}
.office__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.office__meta-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid color-mix(in srgb, var(--pearl) 10%, transparent);
  align-items: baseline;
}
.office__meta-row dt { color: var(--pearl-muted); }
.office__meta-row dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  color: var(--pearl);
}
.office__meta-row dd a {
  border-bottom: 1px solid color-mix(in srgb, var(--pearl) 30%, transparent);
  padding-bottom: 1px;
}
.office__meta-row dd a:hover {
  border-bottom-color: var(--pearl);
}

@media (max-width: 900px) {
  .office__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .office__meta-row { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-2) 0; }
}

.enquiry-section {
  padding-block: var(--section-pad-y);
  position: relative;
  z-index: var(--z-content);
}

/* Enquiry form — line-only inputs (no boxes), labels in eyebrow
   caps above each field. Submit is the .btn--ghost component
   (fills from left on hover). Brief §5.4 spec. */
.enquiry {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.25rem);
  border-radius: 16px;
  max-width: 880px;
  margin-inline: auto;
}
.enquiry__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.enquiry__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-m);
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  margin: 0;
  color: var(--pearl);
}
.enquiry__heading em { font-style: italic; font-weight: 400; }
.enquiry__intro {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--pearl-muted);
  max-width: 50ch;
  margin-top: 0;
}
.enquiry__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  margin: var(--space-4) 0;
}
.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-4);
}
.enquiry__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.enquiry__field--full { grid-column: 1 / -1; }
.enquiry__label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.enquiry__input,
.enquiry__select,
.enquiry__textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
  padding: 8px 0;
  outline: none;
  width: 100%;
  transition: border-color var(--dur-micro) var(--ease-micro);
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.enquiry__textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}
.enquiry__input:focus,
.enquiry__select:focus,
.enquiry__textarea:focus {
  border-bottom-color: var(--color-text);
}
.enquiry__select {
  /* Custom caret since native select arrows look bad on glass. */
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.enquiry__select option {
  background: #0e1620;
  color: var(--color-text);
}
.enquiry__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.enquiry__submit {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 16px 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), gap var(--dur-short) var(--ease-out);
  border-radius: 999px;
}
.enquiry__submit:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-text);
  gap: 1em;
}
.enquiry__submit-arrow { font-size: 14px; }
.enquiry__hint {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

@media (max-width: 900px) {
  .contact-page__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .enquiry__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   Page-hero refinement — page-level title in italic display,
   centered eyebrow above, hairline rule below.
   ---------------------------------------------------------------- */
.page-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 7.6vw, 6.4rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.page-hero__eyebrow {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  display: block;
  margin-bottom: var(--space-3);
}

/* ----------------------------------------------------------------
   Footer refinement — italic tagline, hairline ornaments,
   typographic balance with the hero. The site signs off with
   couture restraint.
   ---------------------------------------------------------------- */
.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  max-width: 22ch;
}

/* ============================================================
   BUTTONS — three styles (brief §6.1)
   ============================================================ */

/* Shared base — flatten anchor and button into one ergonomics. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  line-height: 1;
  padding: 16px 32px;
  border-radius: 2px;     /* sharp — brief §6.1 says no border-radius (or 2px max) */
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-short) var(--ease-out-expo),
              color var(--dur-short) var(--ease-in-out-cubic),
              border-color var(--dur-short) var(--ease-in-out-cubic),
              background-color var(--dur-short) var(--ease-in-out-cubic),
              box-shadow var(--dur-short) var(--ease-out-expo);
}

/* ============================================================
   PHASE 3 — HOME PAGE (brief §5.1)
   Header: logo left, nav centre, clock right (mobile collapses
   centre + right into a hamburger). Hero: bottom-left content
   stack over cross-fading ocean videos. Metrics: 4-column
   asymmetric. About excerpt: editorial split. Contacts: three
   Card-Glass tiles. Footer: 4-column slim Whisper glass.
   ============================================================ */

/* ----------------------------------------------------------------
   HEADER LAYOUT — overrides existing site-header styles
   ---------------------------------------------------------------- */
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
}

.site-header__logo {
  display: block;
  line-height: 0;
  justify-self: start;
}
.site-header__logo img {
  height: 30px;
  width: auto;
  display: block;
}

/* Centre nav — inline links, brief §6.4. Active-page indicator
   is a tiny pearl dot below the current item. */
.site-header__nav {
  justify-self: center;
}
.site-header__nav ul {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--pearl-muted);
  text-transform: none;
  padding: 8px 4px;
  transition: color var(--dur-micro) var(--ease-out-expo);
}
.nav-link:hover { color: var(--pearl); }
.nav-link[aria-current="page"] { color: var(--pearl); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pearl);
  transform: translateX(-50%);
}

/* Right-side meta block: Cochin · 09:47 IST */
.site-header__meta {
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pearl-muted);
  white-space: nowrap;
}
.site-header__meta-place { letter-spacing: 0.22em; }
.site-header__meta-sep   { opacity: 0.6; }
.site-header__meta-time  { color: var(--pearl); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.site-header__meta-colon { color: var(--pearl); }
.site-header__meta-zone  { color: var(--pearl-quiet); letter-spacing: 0.22em; }

/* Mobile: hide centre nav + right meta, show hamburger only. */
.menu-toggle { justify-self: end; }
@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__nav,
  .site-header__meta { display: none; }
}
@media (min-width: 901px) {
  .menu-toggle { display: none; }
}

/* On homepage, header items start invisible (revealed by hero.js). */
.page-home .site-header .site-header__logo,
.page-home .site-header .site-header__nav,
.page-home .site-header .site-header__meta,
.page-home .site-header .menu-toggle {
  opacity: 0;
}

/* ----------------------------------------------------------------
   HERO (brief §5.1) — full viewport, bottom-left content stack
   ---------------------------------------------------------------- */

/* Replace the prior hero layout with bottom-left content. */
.page-home .hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  padding: var(--header-h) var(--container-pad) clamp(4rem, 9vh, 7rem);
  display: flex;
  align-items: flex-end;
  background: transparent !important;
  z-index: var(--z-content);
  overflow: hidden;
}

.page-home .hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero__eyebrow {
  color: var(--pearl-muted);
  font-weight: 500;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-xl);
  line-height: 0.98;
  letter-spacing: var(--tr-tight);
  color: var(--pearl);
  max-width: 18ch;
  text-wrap: balance;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 8px 32px rgba(0, 0, 0, 0.35);
}
.hero__headline em {
  font-style: italic;
  font-weight: 400;
}
.hero__headline-line {
  display: block;
  /* Lines themselves no longer reveal — words inside do (brief §7.1). */
}
/* Per-word wrappers (created by hero.js). The outer .word clips
   overflow so the inner translate looks like it's emerging from
   under the previous line. The inner .word__inner carries the
   animatable transform. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word__inner {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__sub {
  font-family: var(--font-sans);
  font-size: var(--type-body-l);
  line-height: 1.6;
  color: var(--pearl-muted);
  max-width: 36ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Bottom-centre minimalist scroll indicator. */
.hero__cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
}
.hero__cue-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent 0%, var(--pearl) 100%);
  animation: heroCue 1.8s var(--ease-in-out-cubic) infinite;
}
.hero__cue-text {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pearl-muted);
}
@keyframes heroCue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(6px); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue-line { animation: none; }
}

/* Hero video crossfade (brief §5.1): hero-1 and hero-2 both loop;
   .is-active fades the active one in, the other out, 1500ms. */
.hero-video--a,
.hero-video--b {
  transition: opacity var(--dur-fade) var(--ease-in-out-cubic);
}

/* Stronger gradient + radial vignette overlay on the hero. */
.page-home .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,0.45) 0%, transparent 65%),
    linear-gradient(180deg, rgba(10,15,26,0.10) 0%, transparent 35%, transparent 55%, rgba(10,15,26,0.70) 100%);
}

@media (max-width: 768px) {
  .page-home .hero { padding: var(--header-h-mobile) var(--container-pad) var(--space-12); }
  .hero__headline { font-size: clamp(2.75rem, 14vw, 4.5rem); }
  .hero__sub { font-size: var(--type-body); }
}

/* ----------------------------------------------------------------
   METRICS (brief §5.1 — Section 2)
   Four metrics in a horizontal row. 64px gap. Asymmetric — first
   slightly left of grid, last slightly right. Count-up triggered
   by stats.js on intersection.
   ---------------------------------------------------------------- */
.metrics {
  padding-block: var(--section-pad-y);
  position: relative;
  z-index: var(--z-content);
}
.metrics .container { max-width: var(--container-max); }

.metrics__header {
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  align-items: end;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  border: none;
}
.metric + .metric { border: none; }
/* Asymmetric vertical break — first lifts a bit, last drops a bit. */
.metric--01 { transform: translate(-12px, -16px); }
.metric--02 { transform: translateY(8px); }
.metric--03 { transform: translateY(-4px); }
.metric--04 { transform: translate(12px, 20px); }

.metric__num {
  font-family: var(--font-numeric);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-display-l);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--pearl);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  display: inline-block;
}
.metric__suffix {
  display: inline-block;
  font-size: 0.5em;
  vertical-align: 0.45em;
  margin-left: 0.06em;
  color: var(--pearl-muted);
  font-style: normal;
}
.metric__rule {
  display: block;
  width: 32px;
  height: 1px;
  background: color-mix(in srgb, var(--pearl) 35%, transparent);
  margin-top: var(--space-1);
}
.metric__label {
  font-size: var(--type-eyebrow);
  letter-spacing: 0.18em;
  color: var(--pearl-muted);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .metrics__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .metric--01, .metric--02, .metric--03, .metric--04 { transform: none; }
}
@media (max-width: 520px) {
  .metrics__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ----------------------------------------------------------------
   ABOUT EXCERPT (brief §5.1 — Section 3)
   ---------------------------------------------------------------- */
.about-excerpt {
  padding-block: var(--section-pad-y);
  position: relative;
  z-index: var(--z-content);
}
.about-excerpt__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.about-excerpt__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-l);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  color: var(--pearl);
  text-wrap: balance;
}
.about-excerpt__heading em {
  font-style: italic;
  font-weight: 400;
}
.about-excerpt__body {
  font-size: var(--type-body-l);
  line-height: 1.7;
  color: var(--pearl-muted);
  max-width: 50ch;
}
.about-excerpt__cta {
  margin-top: var(--space-3);
  display: inline-flex;
}
@media (max-width: 900px) {
  .about-excerpt__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ----------------------------------------------------------------
   CONTACTS (brief §5.1 — Section 4)
   Three Card-Glass tiles. translateY(-4px) lift on hover.
   16px border-radius per brief §6.2.
   ---------------------------------------------------------------- */
.contacts {
  padding-block: var(--section-pad-y);
  position: relative;
  z-index: var(--z-content);
}
.contacts__header {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contacts__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-m);
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--pearl);
}
.contacts__heading em { font-style: italic; font-weight: 400; }
.contacts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 280px;
  border-radius: 16px;  /* brief §6.2 — subtle, not chunky */
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--dur-short) var(--ease-out-expo),
    box-shadow var(--dur-short) var(--ease-out-expo);
  isolation: isolate;
}
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 32px 80px -24px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--pearl) 14%, transparent);
}
.contact-card:hover::before {
  /* Top specular line brightens on hover (brief §5.1). */
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--pearl) 50%, transparent) 50%,
    transparent 100%);
}
.contact-card__eyebrow { color: var(--pearl-muted); }
.contact-card__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-m);
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--pearl);
  font-style: italic;
}
.contact-card__body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--pearl-muted);
  margin: 0;
  max-width: 100%;
}
.contact-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  letter-spacing: 0.04em;
  color: var(--pearl);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--pearl) 12%, transparent);
}
.contact-card__arrow {
  transition: transform var(--dur-short) var(--ease-out-expo);
}
.contact-card:hover .contact-card__arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .contacts__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .contact-card { min-height: 220px; }
}

/* ----------------------------------------------------------------
   FOOTER REDESIGN — slim Whisper glass, 4 columns (mark + Navigate
   + Connect + Compliance), brief §5.1 footer spec.
   ---------------------------------------------------------------- */
.site-footer--slim {
  padding-block: var(--space-8) var(--space-4);
}
.site-footer--slim .site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding: 0 0 var(--space-6) 0;
}
.site-footer__mark { height: 22px; width: auto; }
.site-footer__mark-link { display: inline-block; line-height: 0; }

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.site-footer__col-head {
  color: var(--pearl-muted);
  margin-bottom: var(--space-1);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-footer__col li,
.site-footer__col a {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--pearl-muted);
  line-height: 1.55;
}
.site-footer__col a {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-out-expo), border-color var(--dur-micro) var(--ease-out-expo);
}
.site-footer__col a:hover {
  color: var(--pearl);
  border-bottom-color: color-mix(in srgb, var(--pearl) 30%, transparent);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
}
.site-footer__legal,
.site-footer__signoff {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  color: var(--pearl-quiet);
}
.site-footer__signoff { font-style: italic; }

@media (max-width: 900px) {
  .site-footer--slim .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-5);
  }
  .site-footer__mark-link { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer--slim .site-footer__grid { grid-template-columns: 1fr; row-gap: var(--space-4); }
}

/* ============================================================
   PHASE 3B — ABOUT PAGE (brief §5.2)
   Half-viewport hero (no video), four long-form story sections
   with sticky eyebrow + heading column and reading body column,
   centred closing with portfolio link.
   ============================================================ */

/* Page-hero half-viewport variant (About / Contact / Products). */
.page-hero.page-hero--half {
  height: 60vh;
  min-height: 480px;
}

.page-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  padding: var(--header-h) var(--container-pad) clamp(3rem, 8vh, 6rem);
  background: var(--abyssal);
  z-index: var(--z-content);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-xl);
  line-height: 0.98;
  letter-spacing: var(--tr-tight);
  color: var(--pearl);
  max-width: 16ch;
  text-wrap: balance;
}
.page-hero__title em { font-style: italic; font-weight: 400; }
.page-hero__sub {
  font-family: var(--font-sans);
  font-size: var(--type-body-l);
  color: var(--pearl-muted);
  max-width: 40ch;
  line-height: 1.55;
}

/* Story section — editorial split. Left column: sticky eyebrow +
   heading. Right column: body paragraphs. */
.story {
  padding-block: var(--section-pad-y);
  position: relative;
  z-index: var(--z-content);
}
.story__grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.story__head {
  position: sticky;
  top: calc(var(--header-h) + var(--space-3));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.story__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-l);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  color: var(--pearl);
  text-wrap: balance;
  max-width: 14ch;
}
.story__heading em { font-style: italic; font-weight: 400; }
.story__body {
  font-family: var(--font-sans);
  font-size: var(--type-body-l);
  line-height: 1.75;
  color: var(--pearl-muted);
  max-width: 64ch;
}
.story__body p { color: var(--pearl-muted); max-width: 64ch; }
.story__body p + p { margin-top: var(--space-3); }
.story__body p:first-child { color: var(--pearl); }

/* Story divider — hairline pearl between consecutive .story sections. */
.story + .story {
  border-top: 1px solid color-mix(in srgb, var(--pearl) 8%, transparent);
}

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .story__head { position: static; }
}

/* ============================================================
   PHASE 3C — PRODUCTS PAGE (brief §5.3)
   Four chapters, each its own quiet section. A massive Display
   numeral sits behind the content as a watermark — pearl-quiet at
   ~20% opacity, top-left of the section.
   ============================================================ */

.chapter {
  position: relative;
  padding-block: var(--section-pad-y);
  overflow: hidden;
  isolation: isolate;
  z-index: var(--z-content);
}

/* The 01/02/03/04 watermark numeral — large display serif behind
   content, opacity 0.18. Brief §5.3 spec. */
.chapter__numeral {
  position: absolute;
  top: clamp(2rem, 6vw, 5rem);
  left: clamp(-1rem, -2vw, -0.5rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--pearl-quiet) 28%, transparent);
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

.chapter__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.chapter__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chapter__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-l);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  color: var(--pearl);
  max-width: 14ch;
  text-wrap: balance;
}
.chapter__heading em { font-style: italic; font-weight: 400; }

.chapter__lead {
  grid-column: 2;
  font-family: var(--font-sans);
  font-size: var(--type-body-l);
  line-height: 1.7;
  color: var(--pearl-muted);
  max-width: 60ch;
}

.chapter__detail {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--pearl) 10%, transparent);
}
.chapter__detail-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chapter__detail-key {
  color: var(--pearl-muted);
}
.chapter__detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chapter__detail-list li {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--pearl);
}

.chapter-divider {
  position: relative;
  z-index: var(--z-content);
  height: 1px;
  background: color-mix(in srgb, var(--pearl-quiet) 30%, transparent);
  border: none;
  margin: 0 auto;
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  width: calc(100% - 2 * var(--container-pad));
}

@media (max-width: 900px) {
  .chapter__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .chapter__lead,
  .chapter__detail { grid-column: 1; }
  .chapter__detail { grid-template-columns: 1fr; gap: var(--space-3); }
  .chapter__numeral {
    font-size: clamp(7rem, 26vw, 11rem);
    top: 1rem;
    left: -0.5rem;
  }
}

/* Closing block — centred, generous space. */
.story-closing {
  padding-block: clamp(8rem, 16vw, 14rem);
  text-align: center;
  position: relative;
  z-index: var(--z-content);
}
.story-closing__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display-m);
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--pearl);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.story-closing__heading em { font-style: italic; font-weight: 400; }
.story-closing__cta {
  margin-inline: auto;
}

/* ============================================================
   PHASE 4 — VIEW TRANSITIONS (brief §7.4)
   Chrome 111+ / Edge 111+: navigating between same-origin pages
   cross-fades current page out (600ms ease-out-expo) and the new
   page in (800ms ease-out-expo + 12px translate-up). Safari/FF
   degrade to instant navigation — no flicker, no jank.
   ============================================================ */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: ftOutDown 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-new(root) {
  animation: ftInUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ftOutDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}
@keyframes ftInUp {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 1ms; }
}

/* The header logo is persistent across pages — give it a stable
   view-transition-name so it doesn't fade out and back in. */
.site-header__logo img {
  view-transition-name: site-logo;
}

/* ----------------------------------------------------------------
   PRIMARY button refined fill — keep existing rule and append:
   ---------------------------------------------------------------- */
/* PRIMARY — pearl fill, abyssal text, subtle scale on hover. */
.btn--primary {
  background: var(--pearl);
  color: var(--abyssal);
  border-color: var(--pearl);
}
.btn--primary:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 28px -6px color-mix(in srgb, var(--pearl) 22%, transparent);
}

/* GHOST — transparent, 1px border, fill-from-left on hover. */
.btn--ghost {
  border-color: var(--pearl);
  color: var(--pearl);
  background: transparent;
}
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pearl);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-short) var(--ease-in-out-cubic);
  z-index: -1;
}
.btn--ghost:hover {
  color: var(--abyssal);
}
.btn--ghost:hover::before {
  transform: scaleX(1);
}

/* LINK-WITH-ARROW — handled by .link-arrow in base.css. Provide
   a button-styled alias for consistency in component documentation. */
.btn--link {
  padding: 0;
  background: transparent;
  border: none;
  color: var(--pearl);
}
.btn--link .arrow { transition: transform var(--dur-short) var(--ease-out-expo); }
.btn--link:hover .arrow { transform: translateX(4px); }