/* ============================================================
   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);
}

/* All non-hero sections need solid bg to cover fixed video */
main > section:not(.hero),
main > .section:not(.hero) {
  background: var(--color-bg);
  position: relative;
  z-index: var(--z-content);
}

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

/* ============================================================
   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 {
  /* Reverted to the original Cormorant Garamond — bold display
     serif, upright. 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);
  /* No text-shadow — tagline sits FLAT on the hero video, no 3D
     drop-shadow lift (maintained per user preference). */
  text-shadow: none;
}

/* Second line — same upright treatment as the first; inherits
   weight 600 from the parent .hero__tagline so both sentences
   read with equal Cormorant weight. */
.hero__tagline-line:nth-child(2) {
  font-style: normal;
  letter-spacing: -0.015em;
}

/* 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;
}

/* (Browser play-overlay suppression handled by the universal
   video::-webkit-media-controls rule in components.css.) */

/* Matte-glass tint layer — identical formula to .menu-glass and
   .site-footer__glass so all three surfaces feel like one family. */
.page-hero__glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(10, 10, 10, 0.50);
  backdrop-filter: blur(24px) saturate(0.95) brightness(0.85);
  -webkit-backdrop-filter: blur(24px) saturate(0.95) brightness(0.85);
  pointer-events: none;
}

/* No-backdrop-filter fallback: light radial tint instead of solid
   black so the video behind the page-hero stays visible on old
   browsers (Firefox < 103, Chromium-WebView quirks, etc). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-hero__glass {
    background:
      radial-gradient(ellipse at center, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.30) 70%),
      rgba(10, 10, 10, 0.30);
  }
}

html[data-perf="low"] .page-hero__glass {
  background:
    radial-gradient(ellipse at center, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.35) 70%),
    rgba(10, 10, 10, 0.35);
  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);
  /* No max-width here — paragraphs get their own reading-width
     constraint below. This lets full-width elements like the
     products-strip span the entire body column. */
}

.editorial-grid__body p {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-text);
  /* Reading width applied at the paragraph level so prose stays
     legible while siblings like the products-strip can go wider. */
  max-width: 62ch;
}


.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 .profile-bio 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);
}

/* ----------------------------------------------------------------
   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)
   ---------------------------------------------------------------- */

/* 7-product strip — Crude / EN590 / Gasoil / Jet A1 / Naphtha / LPG /
   Aromatics. Three responsive layouts, each chosen so the strip never
   overflows the viewport and each row reads as a clean group:
     Desktop ≥1024: 7 columns × 1 row     (PDF page-8 layout)
     Tablet  640–1023: 4 columns × 2 rows  (4 + 3, col-4 row-2 empty)
     Mobile  <640: 2 columns × 4 rows      (2 + 2 + 2 + 1; item 7 spans both)
   `minmax(0, 1fr)` lets the cell shrink with long product names
   without forcing horizontal overflow on small viewports. */
.products-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-block: var(--space-6);
}

.products-strip__item {
  padding-block: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.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;
}

/* Tablet — 4 columns. 7 items wrap as 4 + 3. */
@media (max-width: 1023px) {
  .products-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile — 2 columns. 7 items wrap as 2 + 2 + 2 + 1; the last item
   spans both columns so it reads as a full-width row rather than
   sitting off-balance in the left column alone. */
@media (max-width: 640px) {
  .products-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products-strip__item:last-child { grid-column: 1 / -1; }
}

/* 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) {
  /* Mobile: collapse the 2-col grid into a vertical flex stack and
     use `display: contents` to flatten the col-label / col-body
     wrappers so each child becomes a direct flex item. The `order`
     property then puts the clock LAST, after the CTA buttons —
     while keeping the clock structurally inside col-label on the
     DOM (so on desktop it nests under the heading naturally with
     no extra grid row). */
  .contact-page__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .contact-page__col-label,
  .contact-page__col-body {
    display: contents;
  }
  .contact-page__col-label > .eyebrow                  { order: 1; }
  .contact-page__col-label > .editorial-grid__heading  { order: 2; }
  .contact-page__col-body  > .contact-block            { order: 3; }
  .contact-page__col-body  > .cta-row                  { order: 4; }
  .contact-page__col-label > .contact-page__clock      { order: 5; }
}

/* ============================================================
   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(240, 237, 230, 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(240, 237, 230, 0.11);
  stroke: rgba(240, 237, 230, 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(194, 0, 14, 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(240, 237, 230, 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(240, 237, 230, 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(240, 237, 230, 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-founder,
.the-desk {
  padding-block: var(--space-16);
}

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

/* ----- Section header (shared across The Founder + The Desk) ----- */
.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;
}

/* ----------------------------------------------------------------
   .profile-spread — shared horizontal layout for all three
   profiles (Lee, Baiju, Farhan). Visual on the left (photo or
   wordmark), name/title/rule/bio on the right. The profile-visual
   slot can host either a <img.profile-photo> or a
   <div.profile-wordmark>; both are sized to occupy the same
   vertical real estate so the three profiles read as a coherent
   series and Baiju's card never looks "missing a photo".
   ---------------------------------------------------------------- */
.profile-spread,
.desk-profile {
  display: grid;
  /* Visual column gets ~36% so the portraits read at their full
     360–460px ceiling on desktop. The 1fr text column still
     receives the lion's share for legible bio prose. */
  grid-template-columns: minmax(220px, 36%) 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* ----- Visual column ----- */
.profile-visual {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* ----------------------------------------------------------------
   .profile-portrait — editorial photo frame with corner marks.
   Wraps the <img.profile-photo> so we can lay corner marks and a
   reveal mask over the photo without pulling them out of flow.

   Square aspect (1:1) honours the natural framing of the source
   files — both Lee's and Farhan's portraits are essentially square,
   and forcing them into portrait crops their heads. Square is also
   the editorial format of choice for institutional profile shots
   (Vogue, FT Weekend, NYT Magazine). The portrait reads as a
   considered crop, not a casual headshot.
   ---------------------------------------------------------------- */
.profile-portrait {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0;
}
.profile-portrait--founder {
  /* Lee sits a notch larger to preserve seniority over Farhan's
     420px treatment. Both portraits are sized to read as the
     anchoring visual of their spread — present and editorial,
     never thumbnail-scale. */
  max-width: 460px;
}

/* Subtle red corner marks — editorial accent in the same vocabulary
   the rest of the site uses (red rules, red dots, red tracker). */
.profile-portrait::before,
.profile-portrait::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 600ms var(--ease-micro);
}
.profile-portrait::before {
  top: -6px;
  left: -6px;
  border-top: 1px solid var(--color-brand);
  border-left: 1px solid var(--color-brand);
}
.profile-portrait::after {
  bottom: -6px;
  right: -6px;
  border-bottom: 1px solid var(--color-brand);
  border-right: 1px solid var(--color-brand);
}

.profile-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Layered editorial treatment: subtle desaturation + a touch of
     contrast lift + 1% brightness pull so the portraits sit in the
     same tonal register as the matte-glass video surfaces and the
     red typographic accents. Nothing aggressive — restraint reads
     as institutional. */
  filter: grayscale(0.08) contrast(1.04) brightness(0.97);
  background: var(--color-bg-elevated);
  /* Hair-thin border — same treatment as our matte-glass surfaces
     and the world-map card outlines. */
  border: 1px solid var(--color-divider);
  border-radius: 2px;
  /* Sit forward of the page bg with a soft shadow so the corner
     marks don't read as floating geometry. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.02),
    0 24px 48px -28px rgba(0, 0, 0, 0.55),
    0 8px 18px -12px rgba(0, 0, 0, 0.35);
  transition:
    filter 800ms var(--ease-micro),
    transform 800ms var(--ease-out);
}

/* Hover: tonal warm-up (desktop pointer only). */
@media (hover: hover) {
  .profile-portrait:hover .profile-photo {
    filter: grayscale(0) contrast(1.02) brightness(1);
  }
  .profile-portrait:hover::before,
  .profile-portrait:hover::after {
    opacity: 1;
  }
}

/* ----------------------------------------------------------------
   .profile-wordmark — typographic monogram for Baiju (his industry
   nickname "Devan", the same name his counterparty firm carries).
   Every detail here is choreographed to feel like type being set
   onto the page by a hand compositor — never like a CSS animation.

   Composition:
     ┌─ .wordmark-frame
     │  ├─ .wordmark-rule--top    (red baseline guide, animates first)
     │  ├─ .wordmark              (the 5 letters, mask-reveal stagger)
     │  │   └─ .wordmark-letter ×5
     │  │      └─ <span> (the actual glyph that translates)
     │  └─ .wordmark-rule--bottom (red closing rule, animates last)

   Letter-level animation grammar (driven by js/desk.js):
     - Letter starts at translateY(110%), rotate(-6deg), blur(8px)
     - Slides up + un-rotates + un-blurs over 1.1s, expo.out
     - 120ms stagger between letters
     - Total reveal arc ≈ 1.7s
   ---------------------------------------------------------------- */
.wordmark-frame {
  display: inline-block;
  position: relative;
  padding-block: 0.18em;
}

/* The two horizontal rules that bracket the wordmark — both red,
   different lengths + weights to signal "opening" vs "closing".
   Pre-animation: scaleX(0) so they're invisible until JS scales them.
   Transform-origin biases reveal direction (top draws L→R, bottom
   draws R→L for editorial counterpoint). */
.wordmark-rule {
  position: absolute;
  left: 0;
  height: 1px;
  background: var(--color-brand);
  transform: scaleX(0);
  pointer-events: none;
}
.wordmark-rule--top {
  top: 0;
  width: 38%;
  transform-origin: left center;
  opacity: 0.9;
}
.wordmark-rule--bottom {
  bottom: 0;
  width: 62%;
  transform-origin: right center;
  height: 2px;  /* slightly heavier — closes the composition */
}

.profile-wordmark {
  font-family: var(--font-display);
  /* Sized so the 5-letter "DEVAN" reads as a confident mark
     without dominating the spread. Slightly tighter than the
     section heading above it so hierarchy stays clear. */
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
  /* Letter-spacing animates from +0.06em (loose, type-being-set)
     down to its final tight register (-0.02em) at the end of the
     reveal. JS overrides the inline style; CSS here sets the
     initial value so first paint is consistent. */
  letter-spacing: 0.06em;
  display: inline-block;
  user-select: none;
  white-space: nowrap;
  /* Subtle micro-scale during the reveal (0.96 → 1.0). Same trick
     Linear and Vercel hero text uses for "settling in" feel. */
  transform-origin: left center;
}
.wordmark-letter {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
  /* A tiny horizontal padding ensures italic ascenders / descenders
     don't get clipped by the overflow:hidden during the reveal. */
  padding: 0 0.01em;
}
.wordmark-letter > span {
  display: inline-block;
  /* Pre-animation hidden state — must match the gsap.set() in
     desk.js so first paint shows nothing (no flash of unstyled type
     before JS executes). The composite encodes:
       - translateY(112%):     fully below the clipping mask
       - rotate(-4deg):        angled slightly off-axis
       - filter: blur(6px)     soft ink halo
       - color: rgba(.., 0.45) muted (ink not yet saturated)
     Each is tween-targeted separately by GSAP for clean blend. */
  transform: translateY(112%) rotate(-4deg);
  filter: blur(6px);
  color: rgba(240, 237, 230, 0.45);
  will-change: transform, filter, color;
}

/* CN typography swap on the wordmark — keep it Latin display serif
   (DEVAN is a proper-noun nickname, not a translatable word). */
body.lang-cn .profile-wordmark {
  font-family: var(--font-display);
}

/* ----- Content column (right) ----- */
.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;
}
/* Founder's name sits a notch larger than the desk profiles. */
.profile-name--founder {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}

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. The .page-about override above further swaps
     to Avenir Next for the body face. */
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
  max-width: 56ch;
}

/* ----- Divider between Baiju and Farhan ----- */
.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,
  .founder-profile:hover .profile-rule { width: 56px; }
  .desk-profile:hover .profile-wordmark {
    /* Subtle tonal warmth on the wordmark — same red-tint convention
       used on the old initials. 0.85 opacity keeps it editorial. */
    color: var(--color-brand);
    opacity: 0.85;
    transition: color 400ms var(--ease-micro), opacity 400ms var(--ease-micro);
  }
}

/* ----------------------------------------------------------------
   Mobile rhythm — comprehensive overrides for the About page.

   On phones the desktop's --space-16 (128px) section gutters and
   the --space-12 (96px) divider rhythm read as cavernous. This block
   resets every vertical rhythm rule on the about page to a tighter,
   more proportional scale so each section reads as one unit rather
   than a disconnected island.

   Spacing scale on mobile:
     Section padding-block         → --space-8  (64px)
     Section header → first content → --space-4  (32px)
     Divider between profiles      → --space-6  (48px)
     Profile bio internal gap      → --space-2  (16px)
     Visual → content gap          → --space-3  (24px)

   Layout:
     - .profile-spread collapses to single column
     - Portrait photos centered (Lee + Farhan)
     - DEVAN wordmark LEFT-ALIGNED to the gutter (the typographic
       mark belongs hugging the edge, not floating mid-column)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Section verticals — was 128/128 (way too much for mobile). */
  .the-founder,
  .the-desk {
    padding-block: var(--space-8);
  }
  /* Section header → first profile gap — was 128px. */
  .desk-header {
    margin-bottom: var(--space-4);
  }
  /* Divider between Baiju and Farhan — was 96px each side. */
  .desk-divider {
    margin: var(--space-6) 0;
  }
  /* Pull-quote sits between the founder and the desk; its padding
     was already --section-y (≈64px mobile), keep that — but ensure
     the rule margin stays balanced. */

  /* ----- Profile spread → single column ----- */
  .profile-spread,
  .desk-profile {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Visual column — photos centered, wordmark left-aligned. */
  .profile-visual {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-2);
  }
  /* Wordmark-only visual column: left-align to the gutter so the
     DEVAN mark reads as an editorial typographic accent (the way
     a magazine signature or chop drops at the start of an article),
     not as a centered logo. Photos still centre normally. */
  .desk-profile .profile-visual:has(.wordmark-frame) {
    justify-content: flex-start;
  }

  /* Portrait sizing — viewport-relative so photos hit ~76/84vw
     genuinely. (Earlier % units were limited by parent gutter padding.) */
  .profile-portrait {
    width: clamp(260px, 76vw, 460px);
    max-width: 460px;
    margin: 0 auto;
  }
  .profile-portrait--founder {
    width: clamp(280px, 84vw, 500px);
    max-width: 500px;
  }
  /* Corner marks scale down so they don't read as oversized geometry. */
  .profile-portrait::before,
  .profile-portrait::after {
    width: 20px;
    height: 20px;
  }

  /* Wordmark — slightly smaller, no bottom margin (parent gap handles it). */
  .wordmark-frame {
    margin-left: 0;  /* defensive — anchor to the visual column's start edge */
  }
  .profile-wordmark {
    font-size: clamp(2.75rem, 13vw, 4.5rem);
  }

  /* ----- Type sizes within profile content ----- */
  .profile-name {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
  }
  .profile-name--founder {
    font-size: clamp(2rem, 7vw, 2.5rem);
  }

  /* Bio paragraphs — tighter internal gap + remove max-width so
     they breathe to the full content column. */
  .profile-bio,
  .profile-bio p {
    max-width: none;
  }
  .profile-bio {
    gap: var(--space-2);
  }
  /* Last paragraph in any profile bio sits flush with the section
     bottom — no trailing margin, the section padding handles spacing. */
  .profile-bio > p:last-child {
    margin-bottom: 0;
  }

  /* Section heading — shrink so it doesn't dominate the phone view. */
  .desk-heading {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  /* Profile title (eyebrow) → name gap tightens. */
  .profile-title {
    margin-bottom: var(--space-2);
  }
  /* Rule sits a touch closer to the bio. */
  .profile-rule {
    margin-bottom: var(--space-3);
  }
}

/* ----- Pre-reveal hide (defense-in-depth) ----- */
/* Sections ship 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. NOTE: portrait photos (.profile-photo)
   are intentionally NOT in this hide list — they render immediately
   from first paint with no reveal animation. Only the typographic
   surfaces (heading, rule, content text, wordmark) animate in. */
/* Gated on html.js — without JavaScript nothing removes
   .is-pre-reveal, so the hides must not apply at all. */
.js .the-desk.is-pre-reveal .profile-content,
.js .the-desk.is-pre-reveal .desk-divider,
.js .the-founder.is-pre-reveal .profile-content {
  opacity: 0;
}
/* Visual columns that host the WORDMARK get the fade-in; visual
   columns that host the PHOTO do NOT — photos are static. We use
   :not() so the rule lifts when there's a portrait inside. */
.js .the-desk.is-pre-reveal .profile-visual:not(:has(.profile-portrait)),
.js .the-founder.is-pre-reveal .profile-visual:not(:has(.profile-portrait)) {
  opacity: 0;
  transform: translateY(28px);
  transform-origin: left top;
}
.js .the-desk.is-pre-reveal .desk-heading,
.js .the-founder.is-pre-reveal .desk-heading {
  opacity: 0;
  transform: translateY(24px);
}
.js .the-desk.is-pre-reveal .desk-rule,
.js .the-founder.is-pre-reveal .desk-rule {
  transform: scaleX(0);
}
/* Wordmark rules pre-state (scaled to 0; matches inline tween). */
.js .the-desk.is-pre-reveal .wordmark-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-visual,
  .the-desk.is-pre-reveal .profile-content,
  .the-desk.is-pre-reveal .desk-divider,
  .the-desk.is-pre-reveal .wordmark-rule,
  .the-founder.is-pre-reveal .desk-heading,
  .the-founder.is-pre-reveal .desk-rule,
  .the-founder.is-pre-reveal .profile-visual,
  .the-founder.is-pre-reveal .profile-content {
    opacity: 1 !important;
    transform: none !important;
  }
  .wordmark-letter > span {
    /* Letters land in their final state immediately for users who
       prefer no motion — no slide-in animation. */
    transform: translateY(0) rotate(0deg) !important;
    filter: none !important;
    color: var(--color-text) !important;
  }
  .profile-wordmark {
    letter-spacing: -0.02em !important;
  }
}