/* ==========================================================================
   about-grid — About page styles
   --------------------------------------------------------------------------
   Editorial Swiss About page with a "scattered" image grid as the centre-
   piece. Each tile is placed on an explicit CSS grid with deliberate empty
   cells around it — the asymmetry creates the floating-in-white feel of
   the reference (icomat.co), not a uniform mosaic.

   Layout sections (top → bottom):
     1. Top nav (shared)
     2. Hero       — eyebrow + big Geologica headline + lede + meta strip
     3. Story      — two-column editorial body
     4. Scattered image grid — 12 col × 10 row positioned tiles
     5. Backers    — investors / strategic partners row
     6. Closing CTA — quiet contact prompt

   PLAYGROUND MODE: raw values throughout (no token snap).
   ========================================================================== */

.ab {
  --ab-paper:    #F4F5F7;
  --ab-surface:  #FFFFFF;
  --ab-ink:      #141A26;
  --ab-dim:      rgba(20, 26, 38, 0.62);
  --ab-faint:    rgba(20, 26, 38, 0.42);
  --ab-rule:     rgba(20, 26, 38, 0.10);
  --ab-rule-soft:rgba(20, 26, 38, 0.05);
  --ab-accent:   #C42800;
  --ab-dark:     #0b1018;

  background: var(--ab-paper);
  color: var(--ab-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ab__container {
  /* Site-wide page grid — css/layout.css. (border-box is global, base.css;
     the local declaration A-ABOUT added for the 1552px overflow is no longer
     needed.) */
  width: 100%;
  max-width: var(--teako-page-max);
  margin: 0 auto;
  padding: 0 var(--teako-page-gutter);
}

/* ---------- Masthead ----------
   Full-viewport splash: huge TEAKO / MINERALS wordmark in Milano Red
   on a black field with a 3D Norwegian flag floating in front of the
   type. The flag renders into a canvas at z-index above the wordmark
   so the geometry overlaps the letterforms — same trick as the
   reference (icomat.co MICRONATION). */
.ab__masthead {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Dark masthead — a short statement heading with the muted 3D flag floating
     in FRONT, overlapping the centre of the bottom line; a hairline drops from
     the flag toward the scroll-reveal paragraph below. */
  background: #0E0F12;
  color: #ECEAE3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 156px 32px 132px;
}
.ab__masthead-inner {
  position: relative;
  width: 100%;
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Heading — short statement, two lines, fully legible (flag no longer
   overlaps it; it sits below, between heading and paragraph). */
.ab__masthead-head {
  margin: 0;
  text-align: center;
  /* D1 (2026-08-20): was Plex 800 — the last heavy display heading on the
     site. Geologica 300 at this size reads as the hero's voice, and the
     uppercase lockup keeps the masthead's weight through scale, not ink. */
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(44px, 7vw, 116px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #ECEAE3;
  white-space: nowrap;
}
.ab__masthead-line { display: block; }
/* Flag — in normal flow, centred BETWEEN the heading and the paragraph; 25%
   larger than before. Negative margins tuck the connectors into the canvas's
   transparent padding so the lines meet the visible flag. */
.ab__masthead-canvas {
  position: relative;
  width: clamp(375px, 50vw, 725px);
  height: clamp(250px, 34vw, 500px);
  margin: 0 auto;
  pointer-events: none;
}
/* Connector hairlines — a SHORT one above the flag (heading → flag) and a
   LONGER one below (flag → paragraph), each tipped with the Milano-red accent
   diamond. */
.ab__masthead-drop {
  position: relative;
  z-index: 1;
  width: 1px;
  background: rgba(236, 234, 227, 0.34);
}
.ab__masthead-drop::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--ab-accent);
}
/* Short line above the flag — diamond at its top (just under the heading). */
.ab__masthead-drop--short {
  height: clamp(44px, 6vh, 76px);
  margin: 34px auto -36px;
}
.ab__masthead-drop--short::after { top: 0; }
/* Long line below the flag — diamond at its top (where it leaves the flag),
   fading down toward the paragraph. */
.ab__masthead-drop--long {
  height: clamp(120px, 17vh, 210px);
  margin: -36px auto 0;
  background: linear-gradient(180deg, rgba(236, 234, 227, 0.34), rgba(236, 234, 227, 0.05));
}
.ab__masthead-drop--long::after { top: 0; }

/* ---------- Scroll-highlight paragraph ----------
   Now part of the masthead (one section): the paragraph sits directly under
   the long connector, and the JS lights it word-by-word from its own position
   as it travels up through the viewport — no pinned track, so there is no gap
   between the flag passage and the copy.

   Words start heavily muted and animate to full ink as their individual
   threshold is crossed. */
.ab__scroll-reveal-text {
  margin: clamp(20px, 4vh, 52px) auto 0;
  max-width: 46ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 40px);
  line-height: 1.24;
  letter-spacing: -0.008em;
  text-align: center;
  color: #ECEAE3;
}
/* Each word is wrapped by the JS in a span. Default state is heavily
   muted ink; --w (0 → 1) is written per-word by the scroll handler
   and interpolates the colour back up to full ink. */
.ab__scroll-reveal-word {
  display: inline;
  /* Mix between dim (0) and ink (1) via the JS-controlled --w var. */
  color: rgb(
    calc(96 + var(--w, 0) * 140),
    calc(94 + var(--w, 0) * 140),
    calc(88 + var(--w, 0) * 139)
  );
  transition: color 220ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* Word spacing comes from the space text nodes about-page.js inserts between the spans — the former ::before space doubled every gap (rivers at tablet/phone). */

/* ==========================================================================
   THE GROUND — .abg
   --------------------------------------------------------------------------
   Client 2026-08-20: the interactive 3D Norway relief is retired and the two
   Swiss split sections are dissolved into this one block. The composition is
   an editorial sibling of the About hero (.abh) — the same spine, inverted to
   paper:  topbar → media panel + copy → hairline rule → data strip → detail
   row.  The four clips that used to sit in the splits are the material: one
   lead plate and three tiles at deliberately unequal widths (equal heights,
   so each carries a different ratio).  The vertical country label and the
   latitude ticks carry over from the retired map plate so the section keeps
   its geographic register.
   ========================================================================== */

.abg {
  --abg-ink:   #141A26;
  --abg-dim:   rgba(20, 26, 38, 0.62);
  --abg-faint: rgba(20, 26, 38, 0.42);
  --abg-rule:  rgba(20, 26, 38, 0.12);

  position: relative;
  background: var(--ab-paper);
  padding: clamp(88px, 11vw, 148px) 0 clamp(96px, 12vw, 160px);
}
.abg__container {
  width: 100%; max-width: var(--teako-page-max); margin: 0 auto; padding: 0 var(--teako-page-gutter);
}

/* Topbar — mirrors .abh__topbar. */
.abg__topbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--abg-dim);
  padding-bottom: 44px; border-bottom: 1px solid var(--abg-rule); margin-bottom: 52px;
}
.abg__topbar span:last-child { color: var(--abg-faint); }

/* Media panel + copy on one two-column spine, both columns stretched to the
   same height (the hero's rule: no ragged top/bottom edges). */
.abg__main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: stretch;
}

.abg__lead {
  position: relative; margin: 0; min-height: 480px; overflow: hidden; background: #E4E7EC;
  opacity: 0; transform: translateY(18px);
  transition: opacity 800ms ease, transform 900ms cubic-bezier(0.33, 1, 0.68, 1);
}
.abg.is-in .abg__lead { opacity: 1; transform: none; }
.abg__lead video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Corner vignette — the hero's grade, so the white edge labels stay legible
   over whatever the clip is doing. */
.abg__lead::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 35%, transparent 42%, rgba(8, 11, 16, 0.55) 100%);
}
.abg__bracket {
  position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.abg__bracket--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.abg__bracket--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

/* Vertical country label down the left edge of the plate. */
.abg__lead-name {
  position: absolute; left: 20px; top: 50%; z-index: 3; pointer-events: none;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
}
/* Latitude ticks down the right edge. */
.abg__lead-axis {
  position: absolute; right: 22px; z-index: 3; pointer-events: none;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.70);
  font-variant-numeric: tabular-nums;
}
.abg__lead-axis::before {
  content: ''; position: absolute; right: 100%; top: 50%; width: 16px; height: 1px;
  margin-right: 8px; background: rgba(255, 255, 255, 0.45);
}
.abg__lead-axis--top { top: 14%; }
.abg__lead-axis--bot { bottom: 14%; }

.abg__lead-cap {
  position: absolute; left: 20px; bottom: 16px; z-index: 3; max-width: 60%;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Copy column. */
.abg__copy { display: flex; flex-direction: column; justify-content: center; }
.abg__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--abg-dim);
}
.abg__eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--ab-accent); }
/* No font-family here on purpose: h2 already lands on the display face via
   css/base.css, and the site-wide Geologica pass owns the weight. */
.abg__headline {
  margin: 0;
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--abg-ink);
}
.abg__lede {
  margin: 28px 0 0; max-width: 44ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: var(--abg-dim);
}

/* Hairline rule + data strip — the hero's lower bands, on the same spine. */
.abg__rule { height: 1px; background: var(--abg-rule); margin-top: 56px; }
.abg__strip {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: 64px; align-items: start; padding-top: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--abg-dim);
}
.abg__strip-left { display: flex; flex-direction: column; gap: 16px; }
.abg__strip-idx { color: var(--abg-faint); }
.abg__strip-k { color: var(--abg-faint); }
.abg__strip-v {
  display: block; margin-top: 8px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.015em;
  color: var(--abg-ink); text-transform: none; font-variant-numeric: tabular-nums;
}
.abg__strip-right { display: flex; flex-direction: column; gap: 20px; }
.abg__strip-caption { margin: 0; line-height: 1.55; max-width: 52ch; }
.abg__strip-figs {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none;
}
.abg__strip-figs li { color: var(--abg-dim); }
.abg__strip-figs b { color: var(--abg-ink); font-weight: 500; }

/* Detail row — three clips, equal height, unequal widths. */
.abg__tiles { margin-top: 56px; }
.abg__tiles-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--abg-dim);
  padding-top: 22px; border-top: 1px solid var(--abg-rule); margin-bottom: 24px;
}
.abg__tiles-head span:last-child { color: var(--abg-faint); }
.abg__tiles-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.85fr; gap: 24px; }
.abg__tile {
  margin: 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity 800ms ease, transform 900ms cubic-bezier(0.33, 1, 0.68, 1);
}
.abg.is-in .abg__tile { opacity: 1; transform: none; }
.abg.is-in .abg__tile:nth-child(2) { transition-delay: 100ms; }
.abg.is-in .abg__tile:nth-child(3) { transition-delay: 200ms; }
.abg__tile-media {
  position: relative; height: clamp(220px, 22vw, 320px); overflow: hidden; background: #E4E7EC;
}
.abg__tile-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.abg__tile-cap {
  display: block; margin-top: 12px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--abg-dim);
}

@media (prefers-reduced-motion: reduce) {
  .abg__lead, .abg__tile { opacity: 1; transform: none; transition: none; }
}

/* ---------- Corporate film — inside the masthead ----------
   Client 2026-08-20: the film belongs to "One country, one integrated
   model.", not to a block of its own. It sits under the scroll-lit
   paragraph on the same dark ground, opened by a hairline and a mono label
   row. Controls, no autoplay: the film carries sound. */
.ab__film {
  width: 100%;
  max-width: 1040px;
  margin: clamp(64px, 9vh, 132px) auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(236, 234, 227, 0.16);
}
.ab__film-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(236, 234, 227, 0.62); margin-bottom: 20px;
}
.ab__film-bar span:last-child { color: rgba(236, 234, 227, 0.40); }
.ab__film-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.ab__film-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab__film-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.ab__film-empty span:first-child { font-size: 15px; letter-spacing: 0.02em; color: rgba(236, 234, 227, 0.5); }
.ab__film-empty span:last-child {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236, 234, 227, 0.32);
}

/* Responsive — masthead and The Ground.
   (The Projects & Portfolio lead plate `.ab__ppv` was removed 2026-08-20,
   client polish 2: its clip moved into the register's closing plate — see
   .pp__final-image in blocks/projects-portfolio.css.) */
@media (max-width: 1080px) {
  .ab__masthead        { padding: 128px 28px 64px; }
  .ab__masthead-canvas { width: clamp(280px, 58vw, 480px); height: clamp(190px, 40vw, 330px); }
  .ab__film            { margin-top: clamp(48px, 7vh, 88px); }
  .abg                 { padding: 80px 0 88px; }
  .abg__container      { padding: 0 28px; }
  .abg__topbar         { padding-bottom: 28px; margin-bottom: 36px; }
  .abg__main           { grid-template-columns: 1fr; gap: 32px; }
  .abg__lead           { min-height: 0; aspect-ratio: 16 / 10; }
  .abg__strip          { grid-template-columns: 1fr; row-gap: 22px; }
  .abg__tiles-grid     { grid-template-columns: 1fr 1fr; }
  .abg__tile-media     { height: clamp(180px, 30vw, 240px); }
}
@media (max-width: 640px) {
  .ab__masthead        { padding: 104px 24px 48px; }
  .ab__masthead-canvas { width: 86vw; height: 58vw; }
  .abg__container      { padding: 0 20px; }
  .abg__tiles-grid     { grid-template-columns: 1fr; }
  .abg__tile-media     { height: auto; aspect-ratio: 16 / 10; }
}

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

.ab__hero {
  position: relative;
  padding: 180px 0 80px;
  background: var(--ab-dark);
  color: #F4F5F7;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.ab__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.9) 0,
    rgba(255, 255, 255, 0.9) 1px,
    transparent 1px,
    transparent 16px
  );
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 65%);
          mask-image: linear-gradient(225deg, #000 0%, transparent 65%);
}
.ab__hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: end;
}
.ab__eyebrow {
  display: inline-block;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 245, 247, 0.62);
  margin-bottom: 24px;
}
.ab__h1 {
  margin: 0 0 32px;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 6.2vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.028em;
  max-width: 16ch;
  color: #F4F5F7;
}
.ab__h1 em {
  font-style: italic;
  font-weight: 300;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ab-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}
.ab__lede {
  margin: 0;
  max-width: 52ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.65;
  color: rgba(244, 245, 247, 0.72);
}

/* Hero meta strip — three thin facts under the lede column. */
.ab__hero-meta {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}
.ab__meta-k {
  display: block;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 245, 247, 0.42);
  margin-bottom: 8px;
}
.ab__meta-v {
  display: block;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #F4F5F7;
}

/* ---------- Story (two-column editorial body) ---------- */

.ab__story {
  padding: 110px 0 80px;
}
.ab__story-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.ab__story-kicker {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ab-dim);
}
.ab__story-body p {
  margin: 0 0 22px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.72;
  color: var(--ab-ink);
  max-width: 64ch;
}
.ab__story-body p:last-child { margin-bottom: 0; }
.ab__story-body p:first-child::first-letter {
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: 78px;
  line-height: 0.86;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--ab-ink);
}

/* ---------- Backers / investors ---------- */

.ab__backers {
  background: var(--ab-surface);
  border-top: 1px solid var(--ab-rule);
  border-bottom: 1px solid var(--ab-rule);
  padding: 80px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.ab__backers-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.ab__backers-head h2 {
  margin: 0 0 16px;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300; /* D1 */
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ab-ink);
}
.ab__backers-head p {
  margin: 0;
  max-width: 36ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ab-dim);
}
.ab__backers-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ab-rule);
  border-left: 1px solid var(--ab-rule);
}
.ab__backer {
  padding: 28px 24px;
  border-right: 1px solid var(--ab-rule);
  border-bottom: 1px solid var(--ab-rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ab__backer-k {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-faint);
}
.ab__backer-name {
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--ab-ink);
}
.ab__backer-desc {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ab-dim);
}

/* ---------- Closing contact block ----------
   Client 2026-08-20: "way too basic". Rebuilt as a full editorial closing —
   a hairline topbar echoing the hero's Vancouver · Trondheim strip, an
   oversized headline left, rectangular actions (radius 0, the site-wide
   button rule) and a quiet register of contact facts right. The house
   diagonal hairline texture sits behind at 6%, dense in the bottom-right
   corner so it never runs under the headline. */

/* Rebalanced 2026-08-20 (client, polish 2: "nearly there… a bit off
   balance"). Three measured faults, three small moves — the design itself
   is approved and unchanged:
     1. The block sat low in its own section (156px of air above the topbar,
        176px below the buttons, so ~248px of measured space above the
        composition against 176 below). Padding is now symmetric.
     2. The two columns started on the same BOX edge, which put the register's
        first rule ~10px above the headline's cap line and its first label's
        baseline ~19px above the headline's first baseline — close enough to
        read as a miss rather than a decision. The register now drops by the
        headline's own half-leading so the two first lines sit on one optical
        line.
     3. The columns ended 57px apart — the register floated clear of the
        button row and left the bottom-right corner empty, which is what tips
        the whole composition onto a diagonal. The register now stretches to
        the lead column's full height, the surplus spread evenly across its
        four rows, so both columns close on the same line. */
.ab__cta {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 156px) 0;
  background: var(--ab-paper);
  text-align: left;
}
.ab__cta-topo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(20, 26, 38, 0.9) 0,
    rgba(20, 26, 38, 0.9) 1px,
    transparent 1px,
    transparent 16px
  );
  -webkit-mask-image: linear-gradient(315deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(315deg, #000 0%, transparent 62%);
}
.ab__cta-inner { position: relative; }

.ab__cta-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ab-dim);
  padding-bottom: 22px; border-bottom: 1px solid var(--ab-rule);
  margin-bottom: clamp(48px, 6vw, 76px);
}
.ab__cta-top span:last-child { color: var(--ab-faint); }

.ab__cta-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  /* Both columns run the full height of the taller one, so the composition
     closes as a single rectangle (fault 3 above). */
  align-items: stretch;
}
/* Display face + weight come from css/base.css and the site-wide Geologica
   pass; only the scale is set here. */
.ab__cta-h {
  margin: 0;
  font-weight: 300;
  font-size: clamp(38px, 4.8vw, 78px);
  line-height: 1.01;
  letter-spacing: -0.028em;
  max-width: 15ch;
  color: var(--ab-ink);
}
.ab__cta-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(36px, 4vw, 56px);
}
.ab__cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px;
  border-radius: 0;
  background: var(--ab-ink);
  color: #F4F5F7;
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.ab__cta-btn svg { width: 14px; height: 14px; }
.ab__cta-btn:hover { background: var(--ab-accent); color: #fff; }
.ab__cta-btn--ghost {
  background: transparent;
  color: var(--ab-ink);
  box-shadow: inset 0 0 0 1px rgba(20, 26, 38, 0.28);
}
.ab__cta-btn--ghost:hover {
  background: var(--ab-ink); color: #F4F5F7;
  box-shadow: inset 0 0 0 1px var(--ab-ink);
}

/* Contact register — hairline rows, no invented form.
   A flex column so the rows can absorb the height difference against the
   headline + buttons opposite (fault 3): every row grows by the same amount,
   the rules stay contiguous and the last one lands level with the bottom of
   the button row. `margin-top` is the headline's half-leading, which puts the
   first rule on the headline's cap line and the first label's baseline on the
   headline's first baseline (fault 2) — it tracks the headline's own clamp so
   it holds at every width. */
.ab__cta-facts {
  margin: clamp(4px, 0.95vw, 14px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ab__cta-fact {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  /* Centre the row's single track in whatever height it is given, so the
     stretch reads as even breathing space rather than top-set rows. */
  align-content: center;
  flex: 1 1 auto;
  padding: 18px 0;
  border-top: 1px solid var(--ab-rule);
}
.ab__cta-fact:last-child { border-bottom: 1px solid var(--ab-rule); }
.ab__cta-fact dt {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ab-faint);
}
.ab__cta-fact dd {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px; line-height: 1.55; color: var(--ab-ink);
}
.ab__cta-fact dd a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(20, 26, 38, 0.22);
  transition: color 180ms ease, border-color 180ms ease;
}
.ab__cta-fact dd a:hover { color: var(--ab-accent); border-bottom-color: var(--ab-accent); }
.ab__cta-sep { color: var(--ab-faint); padding: 0 4px; }

/* ---------- The People (leadership + board register) ----------
   Rebuilt 2026-08-20 in the same language as .abg: topbar → oversized
   heading + intro on the hero's two-column spine → hairline rule → head bar
   → the register as a strict two-column hairline grid with a centre rule.
   No photos by design; it is a register of people. */

.ab__people {
  padding: clamp(88px, 11vw, 140px) 0 clamp(88px, 11vw, 132px);
  background: var(--ab-paper);
}
.ab__people-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ab-dim);
  padding-bottom: 44px; margin-bottom: 52px; border-bottom: 1px solid var(--ab-rule);
}
.ab__people-top span:last-child { color: var(--ab-faint); }

.ab__people-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: end;
}
/* Display face + weight from base.css / the site-wide Geologica pass. */
.ab__people-h {
  margin: 0;
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ab-ink);
}
.ab__people-intro {
  margin: 0; max-width: 42ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: var(--ab-dim);
}

.ab__people-rule { height: 1px; background: var(--ab-rule); margin-top: clamp(44px, 5vw, 64px); }
.ab__people-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ab-dim);
  padding-top: 22px;
}
.ab__people-bar span:last-child { color: var(--ab-faint); }

.ab__people-list {
  position: relative;
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px;
}
/* Centre rule — the seam that makes two columns read as one register. */
.ab__people-list::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--ab-rule);
}
.ab__person {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 20px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--ab-rule);
}
.ab__person:nth-last-child(-n+2) { border-bottom: 1px solid var(--ab-rule); }
.ab__person-idx {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.16em;
  color: var(--ab-faint); font-variant-numeric: tabular-nums;
}
.ab__person-body { display: block; }
.ab__person-name {
  display: block;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 1.5vw, 23px);
  letter-spacing: -0.014em;
  line-height: 1.15;
  color: var(--ab-ink);
}
.ab__person-role {
  display: block; margin-top: 8px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px; line-height: 1.5; color: var(--ab-dim);
}
.ab__people-qp {
  margin: clamp(44px, 5vw, 64px) 0 0;
  max-width: 78ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px; line-height: 1.6; color: var(--ab-faint);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .ab__container { padding: 0 24px; }
  .ab__hero { padding: 140px 0 56px; }
  .ab__hero-inner { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .ab__story-inner { grid-template-columns: 1fr; gap: 24px; }
  .abm__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 16px; padding: 0 24px; }
  .abm__ring { display: none; }
  .abm__tile { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
  .abm__tile--b, .abm__tile--f, .abm__tile--h, .abm__tile--j { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .ab__backers-inner { grid-template-columns: 1fr; gap: 32px; }
  .ab__backers-list { grid-template-columns: repeat(2, 1fr); }
  .ab__people          { padding: 80px 0 84px; }
  .ab__people-top      { padding-bottom: 28px; margin-bottom: 36px; }
  .ab__people-lead     { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .ab__people-list     { grid-template-columns: 1fr; column-gap: 0; }
  .ab__people-list::before { display: none; }
  .ab__person:nth-last-child(-n+2) { border-bottom: 0; }
  .ab__person:last-child { border-bottom: 1px solid var(--ab-rule); }
  .ab__cta             { padding: 88px 0; }
  .ab__cta-main        { grid-template-columns: 1fr; gap: 44px; }
  .ab__cta-h           { max-width: 20ch; }
  /* Stacked: nothing to align to sideways, and nothing to stretch against —
     the register goes back to its natural rhythm. */
  .ab__cta-facts       { margin-top: 0; }
  .ab__cta-fact        { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .ab__person { grid-template-columns: 34px minmax(0, 1fr); gap: 0 16px; }
  .ab__cta-fact { grid-template-columns: 1fr; gap: 6px; }
  .ab__hero-meta { grid-template-columns: 1fr; gap: 16px; }
  .abm__grid { grid-template-columns: 1fr; }
  .abm__tile, .abm__tile--b, .abm__tile--f, .abm__tile--h, .abm__tile--j { aspect-ratio: 4 / 3; }
  .ab__backers-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABOUT HERO — dark editorial banner
   --------------------------------------------------------------------------
   Full-bleed dark hero (consistent with the investor / portfolio heroes): a
   tall autoplay media panel + oversized Inter headline + lede, a hairline
   data strip and a thumbnail detail row. Placeholder autoplay video for now.
   ========================================================================== */

.abh {
  --abh-ink:   #F4F5F7;
  --abh-dim:   rgba(244, 245, 247, 0.62);
  --abh-faint: rgba(244, 245, 247, 0.40);
  --abh-rule:  rgba(244, 245, 247, 0.16);

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #0B0F16;
  color: var(--abh-ink);
  padding: 168px 0 72px;
}
.abh__container { width: 100%; max-width: var(--teako-page-max); margin: 0 auto; padding: 0 var(--teako-page-gutter); }

/* .abh__topbar removed (client, 2026-08-28) — the hero opens straight on the
   media + headline; section padding-top (168px) still clears the fixed nav. */

.abh__main {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  /* Stretch both columns to the same height so the media panel and the text
     block form one clean, aligned rectangle (no ragged top/bottom edges). */
  align-items: stretch;
}
.abh__media {
  position: relative; min-height: 500px; overflow: hidden; background: #11161F;
}
.abh__media video, .abh__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Cinematic grade — corner vignette for depth + a slow accent scan-line, so
   the media reads as live footage rather than a flat fill. */
.abh__media::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 30%, transparent 40%, rgba(8, 11, 16, 0.55) 100%);
}
.abh__media::before {
  content: '';
  position: absolute; left: 0; right: 0; height: 160px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(196, 40, 0, 0.10) 50%, transparent);
  animation: abh-scan 9s linear infinite;
}
@keyframes abh-scan { 0% { top: -160px; } 100% { top: 100%; } }

/* Corner brackets — a quiet editorial frame on the media. */
.abh__media > .abh__bracket {
  position: absolute; width: 26px; height: 26px; z-index: 3;
  border: 1px solid rgba(244, 245, 247, 0.4); pointer-events: none;
}
.abh__bracket--tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.abh__bracket--br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

/* Text block vertically centred against the full-height media panel; a quiet
   staggered rise-in on load gives the hero life. */
.abh__content { display: flex; flex-direction: column; justify-content: center; }
.abh__content > * { animation: abh-rise 760ms cubic-bezier(0.33, 1, 0.68, 1) both; }
.abh__content > .abh__eyebrow  { animation-delay: 80ms; }
.abh__content > .abh__headline { animation-delay: 160ms; }
.abh__content > .abh__lede     { animation-delay: 260ms; }
@keyframes abh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .abh__media::before { animation: none; display: none; }
  .abh__content > * { animation: none; }
}
.abh__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--abh-dim);
}
.abh__eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--ab-accent); }
/* Display face — Geologica 300, the site heading voice (2026-08-20, client
   polish 2). The site-wide pass in css/base.css only reached H2/H3, so this
   H1 was still landing on IBM Plex Sans 700 while the home hero headline it
   is supposed to rhyme with (.hero-scrolly__headline) was already Geologica
   300. Face comes from the base h1–h6 rule; only the weight, scale, tracking
   and colour are set here. Metrics match the home hero headline it rhymes
   with (line-height 1, tracking -0.02em): Geologica is narrower than Plex,
   and at 300 the old -0.035em / 0.95 pair collapsed the counters and let the
   descenders touch the line below. */
.abh__headline {
  margin: 0; font-weight: 300;
  font-size: clamp(40px, 5.6vw, 92px); line-height: 1; letter-spacing: -0.02em; color: #fff;
}
/* The <em> is a tonal shift, not a weight shift — same 300, dimmed ink. */
.abh__headline em { font-style: normal; font-weight: 300; color: var(--abh-dim); }
.abh__lede {
  margin: 28px 0 0; max-width: 46ch; font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--abh-dim);
}

.abh__rule { height: 1px; background: var(--abh-rule); margin-top: 56px; }

/* The two lower bands ride the SAME two-column grid (and 64px gutter) as the
   hero body, so the index/listing sit under the media and the caption/figures
   under the headline — every element lines up on the same two vertical edges
   the whole way down. Everything is left-aligned; no ragged middle. */
.abh__strip,
.abh__thumbs {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: 64px;
  align-items: start;
}
.abh__strip {
  padding-top: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--abh-dim);
}
.abh__strip-left { display: flex; flex-direction: column; gap: 16px; }
.abh__strip-idx { color: var(--abh-faint); }
.abh__strip-listing-k { color: var(--abh-faint); margin-right: 10px; }
.abh__strip-listing-v {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600; letter-spacing: -0.015em; color: #fff; text-transform: none;
  display: block; margin-top: 8px; font-variant-numeric: tabular-nums;
}
.abh__strip-right { display: flex; flex-direction: column; gap: 20px; }
.abh__strip-caption { margin: 0; line-height: 1.55; max-width: 52ch; }
.abh__strip-figs {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none;
}
.abh__strip-figs li { color: var(--abh-dim); }
.abh__strip-figs b { color: var(--abh-ink); font-weight: 500; }

.abh__thumbs { margin-top: 44px; }
.abh__thumbs-label {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--abh-dim); padding-top: 4px;
}
.abh__thumbs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; grid-column: 2; /* the label that held column 1 was removed 29 Aug — keep the clips in their column */ }
.abh__thumb { margin: 0; }
.abh__thumb-media {
  position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #11161F;
}
.abh__thumb-media video, .abh__thumb-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.abh__thumb-cap {
  display: flex; align-items: baseline; gap: 10px; margin-top: 12px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--abh-dim);
}
.abh__thumb-cap b { color: #fff; font-weight: 500; }

@media (max-width: 1080px) {
  .abh { padding: 130px 0 56px; }
  .abh__container { padding: 0 28px; }
  .abh__main { grid-template-columns: 1fr; gap: 28px; }
  .abh__media { aspect-ratio: 16 / 10; min-height: 0; }
  .abh__strip,
  .abh__thumbs { grid-template-columns: 1fr; row-gap: 22px; }
  .abh__thumbs-grid { grid-column: auto; }
  .abh__thumbs-label { padding-top: 0; }
}

/* Fixed top nav floating over the dark hero (ported from the design page's
   inline style). The About page template renders .page-nav > hero-scrolly__nav. */
.page-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
html.nav-hidden .page-nav { transform: translateY(-110%); }
.page-nav > * { pointer-events: auto; }
.page-nav .hero-scrolly__nav { position: relative; top: 0; }

/* Phone pass (2026-07-14): the hero grid, thumbs and masthead overshot 390px. */
@media (max-width: 560px) {
  .abh__container { padding: 0 20px; }
  .abh__strip { flex-direction: column; gap: 18px; }
  .abh__strip-caption { max-width: 100%; }
  .abh__thumbs-grid { grid-template-columns: 1fr; }
  /* The lockup is white-space: nowrap, so the longest line ("ONE INTEGRATED
     MODEL.") must fit the 390px viewport minus the 2×32px stage padding.
     10.5vw measured 492px against 326px available — the headline was
     cropped on every phone. 6.6vw lands it at ~309px. */
  .ab__masthead-head { font-size: clamp(24px, 6.6vw, 44px); }
  .ab__scroll-reveal-text { font-size: clamp(17px, 4.9vw, 22px); }
}

/* Two named partners (2026-08-03): the list is a clean 2-up — the old
   3-column grid left dangling hairlines from the empty third cell. */
.ab__backers-list { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .ab__backers-list { grid-template-columns: 1fr; }
}

/* Overflow fix (2026-08-03): the inner ran 100vw + 2×56px padding in
   content-box, clipping the right card off-screen. */
.ab__backers-inner { box-sizing: border-box; width: 100%; }

/* ==========================================================================
   About page on phones (client, 29 Aug 2026)
   ========================================================================== */
@media (max-width: 760px) {
  /* Hero: the "Who we are · Teako Minerals Corp · CSE: TMIN" line goes. */
  .abh__eyebrow { display: none; }
  /* Strip indices ("T.01" under the hero, "T.03" on the historic-district
     strip) go; the labels beside them stay. */
  .abh__strip-idx, .abg__strip-idx { display: none; }
  /* "Fig. 03.1 – 03.3" header row goes — each tile carries its own caption. */
  .abg__tiles-head { display: none; }
  /* "One country, one integrated model": the 3D flag 25% bigger. The scale
     enlarges the drawing without changing its layout box, so give it real
     room: the enlarged canvas overlapped the drop lines above and below
     (client, 29 Aug: "it's touching"). */
  .ab__masthead-canvas { transform: none; width: 125% !important; height: 283px !important; max-width: none; margin: 32px -12.5% 16px; }
  /* The two decorative drop lines are absolutely positioned and ran into the
     enlarged flag; on phones they go, leaving clear air above and below. */
  .ab__masthead-drop { display: none; }
}