/* ============================================================================
   BARformula · IntegratedBio-DNA Redesign Overlay
   ----------------------------------------------------------------------------
   Loads AFTER assets/css/site.css and AFTER the inline <style> in index.html.
   Cascades over the existing dark theme with a new deep-oceanic-teal-blue,
   editorial, light-mode atmosphere modeled on integratedbio.com.

   To revert: remove the <link> + <script> for redesign.{css,js} and the new
   markup blocks marked with <!-- REDESIGN: ... --> in index.html.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. DESIGN TOKENS — adopted from a Pentagram-tier discipline framework.
      Every spacing, size, and value below is a multiple of these tokens.
      No arbitrary numbers. If a value isn't in this system, round it.
   --------------------------------------------------------------------------- */
:root {
  /* Base unit. Every spacing decision is N × this. */
  --u: 8px;

  /* Spacing tokens — pair, related, section, chapter */
  --s-tight:    8px;    /* label → value, icon → label */
  --s-pair:    16px;    /* related elements */
  --s-related: 24px;    /* tight grouping */
  --s-block:   32px;    /* internal section */
  --s-section: 48px;    /* section internal */
  --s-major:   64px;    /* between sections */
  --s-chapter: 96px;    /* chapter separation */
  --s-mega:   128px;    /* major page break */

  /* Modular type scale — 12 / 14 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 */
  --fs-12: 12px;        /* uppercase mono labels, chips */
  --fs-14: 14px;        /* small body */
  --fs-16: 16px;        /* body */
  --fs-20: 20px;        /* lead */
  --fs-24: 24px;        /* small subhead */
  --fs-32: 32px;        /* large subhead, chapter text, meta value */
  --fs-40: 40px;        /* H3 */
  --fs-48: 48px;        /* H2 max */
  --fs-64: 64px;        /* large display */
  --fs-80: 80px;        /* H1 max */
  --fs-96: 96px;        /* hero display max */

  /* Line-height per size band — tight at large, relaxed at small */
  --lh-display: 1.0;     /* 80+ */
  --lh-headline: 1.1;    /* 48–80 */
  --lh-subhead: 1.25;    /* 24–48 */
  --lh-body: 1.5;        /* <24 */

  /* Tracking per size band */
  --tr-display: -0.025em;  /* 80+ */
  --tr-headline: -0.015em; /* 32–80 */
  --tr-subhead: -0.005em;  /* 16–32 */
  --tr-body: 0;            /* <16 */
  --tr-caps-sm: 0.18em;    /* uppercase 10–12 */
  --tr-caps-md: 0.14em;    /* uppercase 12–14 */

  /* Hairline + container */
  --hairline-light: 1px solid rgba(14, 26, 32, 0.08);
  --hairline-dark:  1px solid rgba(247, 243, 234, 0.10);
  --container-max:  1280px;
  --container-pad:  80px;
}

/* ---------------------------------------------------------------------------
   1. PALETTE — Deep Oceanic Teal-Blue (the blue twin of IntegratedBio's jade)
   --------------------------------------------------------------------------- */
:root {
  /* Editorial canvas — broken neutrals, never pure white/black */
  --rd-bone:        #EFEAE0;   /* warm celadon-bone background */
  --rd-bone-soft:   #E5DFD2;   /* slightly deeper for surfaces */
  --rd-bone-deep:   #D4CCBA;   /* hover / pressed */
  --rd-paper:       #F7F3EA;   /* lightest, for floating chrome */

  /* Ink — warm forest-charcoal-blue, never pure black */
  --rd-ink:         #0E1A20;   /* primary text */
  --rd-ink-soft:    #2C3E48;   /* secondary text */
  --rd-ink-mute:    #6B7C84;   /* tertiary, captions */
  --rd-ink-faint:   #B5BCC0;   /* hairlines */
  --rd-ink-ghost:   rgba(14, 26, 32, 0.18); /* unrevealed text colour */

  /* Deep oceanic — the dominant brand colour */
  --rd-abyss:       #052029;   /* deepest, hero stage backdrop */
  --rd-ocean-deep:  #093642;   /* deep tile / panels */
  --rd-ocean:       #0F4D5C;   /* main brand teal-blue */
  --rd-ocean-mid:   #2A6A7A;   /* mid-tone teal */
  --rd-ocean-fog:   rgba(15, 77, 92, 0.08);

  /* Warm complement — the amber/copper analog of IntegratedBio's honey */
  --rd-copper:      #C68A52;
  --rd-copper-deep: #A06D3F;
  --rd-copper-glow: rgba(198, 138, 82, 0.35);

  /* Single sharp accent — the radioactive ice-aqua chip
     (analog of IntegratedBio's lime-pistachio square) */
  --rd-ice:         #9FE6DC;
  --rd-ice-bright:  #C5F2EB;
  --rd-ice-shadow:  rgba(159, 230, 220, 0.45);

  /* Existing brand bars (preserved for the logo only) */
  --rd-brand-1:     #028CBC;
  --rd-brand-2:     #48C1EB;
  --rd-brand-3:     #A3DDF2;

  /* Type system */
  --rd-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --rd-serif:   'Instrument Serif', 'Times New Roman', serif;
  --rd-italic:  'Instrument Serif', 'Fraunces', 'Times New Roman', serif;
  --rd-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Layout — single content gutter, every section hangs off this same edge */
  --rd-maxw: 1280px;
  --rd-pad-x: clamp(20px, 5.5vw, 80px);  /* 20 mobile, 80 desktop */
  --rd-radius: 12px;
  --rd-radius-pill: 14px;     /* IoH-grade soft rectangle, not a bouncy pill */
  --rd-radius-chip: 8px;      /* tighter for small chips (chapter tags, eyebrows) */

  /* Motion */
  --rd-ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rd-ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   2. PAGE BASE — flip dominant mode to light editorial canvas
   --------------------------------------------------------------------------- */
body.rd-active {
  background: var(--rd-bone);
  color: var(--rd-ink);
  font-family: var(--rd-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.rd-active::before {
  /* Kill the old radial gradient body shimmer — we want quiet canvas */
  display: none;
}
body.rd-active ::selection {
  background: var(--rd-ocean);
  color: var(--rd-bone);
}
body.rd-active img,
body.rd-active svg {
  display: block;
  max-width: 100%;
}

/* Soft paper-grain on the bone canvas — gives the page material texture
   instead of a flat RGB feel. SVG noise as data URI, very subtle. */
body.rd-active::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------------------
   3. ADAPTIVE NAV — no pill, transparent header that flips ink↔bone based on
      what's behind it. Logo "BAR" letters and links recolour when the nav
      crosses a dark section (.rd-hero, .rd-chapters). Set by JS observer.
   --------------------------------------------------------------------------- */
body.rd-active .site-header {
  position: fixed !important;
  top: 16px !important;                      /* 2 × u — token */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100% - 32px) !important;
  z-index: 200 !important;
  /* Hairline crystal capsule — softer rounded rectangle (16px), not a full
     pill. Reads as engineering-grade rather than bouncy. Backdrop-blur +
     hairline + inset highlight give the material weight. */
  background: transparent !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border-radius: 16px !important;
  padding: 8px 8px 8px 24px !important;      /* 8 / 8 / 8 / 24 — tokens */
  border: 1px solid rgba(14, 26, 32, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 32px rgba(14, 26, 32, 0.06) !important;
  transition:
    backdrop-filter 220ms var(--rd-ease-soft),
    -webkit-backdrop-filter 220ms var(--rd-ease-soft),
    border-color 220ms var(--rd-ease-soft),
    box-shadow 220ms var(--rd-ease-soft) !important;
}
/* Over-dark: thinner hairline and reduced blur. The dark backdrop already
   carries weight; the capsule just needs to be felt, not seen. */
body.rd-active .site-header.over-dark {
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  border-color: rgba(247, 243, 234, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(247, 243, 234, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.18) !important;
}
body.rd-active .site-header .nav {
  display: flex !important;
  align-items: center !important;
  gap: var(--s-block) !important;            /* 32 — between nav clusters */
  padding: 0 !important;
  max-width: none !important;
}
body.rd-active .site-header .brand {
  display: flex !important;
  align-items: center !important;
  /* Prevent the flex parent from collapsing the brand to 0 when the links
     and CTA consume all available space. Brand claims its intrinsic width. */
  flex-shrink: 0 !important;
}
body.rd-active .site-header .brand svg {
  height: 24px;                              /* 3 × u */
  width: 189px;                              /* 24 × (197/25) — explicit so flex doesn't collapse */
  /* Belt-and-suspenders: also lock the aspect ratio so any height override
     downstream computes a correct width. */
  aspect-ratio: 197 / 25;
}
/* DEFAULT (over-light): "BAR" wordmark letters → ink. The 3 bar rects and
   "formula" cyan letters stay as designed. */
body.rd-active .site-header .brand svg path[fill="#F2F2F0"] {
  fill: var(--rd-ink) !important;
  transition: fill 220ms var(--rd-ease-soft);
}
/* OVER-DARK: "BAR" letters return to bone — original design. */
body.rd-active .site-header.over-dark .brand svg path[fill="#F2F2F0"] {
  fill: #F2F2F0 !important;
}
body.rd-active .site-header .nav-links {
  display: flex !important;
  gap: 26px !important;
}
body.rd-active .site-header .nav-links a {
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;          /* 12 — token */
  letter-spacing: var(--tr-caps-sm) !important; /* 0.18em — token */
  text-transform: uppercase !important;
  color: var(--rd-ink-soft) !important;        /* default: over-light */
  font-weight: 500 !important;
  transition: color 220ms var(--rd-ease-soft);
  position: relative;
  white-space: nowrap !important;
}
body.rd-active .site-header .nav-links a:hover {
  color: var(--rd-ink) !important;
}
/* Over-dark: links go bone */
body.rd-active .site-header.over-dark .nav-links a {
  color: rgba(247, 243, 234, 0.78) !important;
}
body.rd-active .site-header.over-dark .nav-links a:hover {
  color: var(--rd-bone) !important;
}

body.rd-active .site-header .nav-cta .btn {
  background: var(--rd-ink) !important;        /* default: over-light → ink filled rect */
  color: var(--rd-bone) !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;        /* 12px vertical (cap-height of 12px text) */
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;   /* 12 — token */
  letter-spacing: var(--tr-caps-sm) !important;  /* 0.18em — token */
  text-transform: uppercase !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  border: none !important;
  transition: background 220ms var(--rd-ease-soft), color 220ms var(--rd-ease-soft) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
body.rd-active .site-header .nav-cta .btn:hover {
  background: var(--rd-ocean) !important;
  transform: none !important;
}
/* Over-dark: CTA inverts → bone filled, ink text */
body.rd-active .site-header.over-dark .nav-cta .btn {
  background: var(--rd-bone) !important;
  color: var(--rd-ink) !important;
}
body.rd-active .site-header.over-dark .nav-cta .btn:hover {
  background: #ffffff !important;
}
body.rd-active .site-header .nav-cta .btn .arrow {
  margin-left: 4px;
}

/* Hide the mobile tab strip when the floating pill is active —
   it's a duplicate of the desktop nav, the pill already has hamburger */
body.rd-active .mobile-tab-strip {
  display: none !important;
}

/* Inner pages had a "← Home" link wedged between the logo and the nav-links;
   on mobile when nav-links collapse to the burger, that back-link squeezes
   the logo into a tiny corner. Drawer already has Home as item 01 — the
   in-capsule back-link is redundant. Kill it. */
body.rd-active .back-home {
  display: none !important;
}

/* Inner pages set the logo SVG inline at height:22px; home is 24px. Force
   parity so the logo reads at the same weight everywhere. Explicit width so
   the flex parent can't collapse the brand to 0 when nav-links + nav-cta
   consume all available space. */
body.rd-active .site-header .brand svg {
  height: 24px !important;
  width: 189px !important;              /* 24 × (197/25) — aspect-locked */
  aspect-ratio: 197 / 25 !important;
}

/* Inner-page eyebrow chrome — drop the hairline pill background to match
   the home eyebrow's editorial register (raw mono caps with mint dot). */
body.rd-active .eyebrow {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--rd-ink-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.rd-active .eyebrow .dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
  background: var(--rd-ice) !important;
  box-shadow: 0 0 8px var(--rd-ice-shadow) !important;
}

/* .accent-burnt was shifting H1 weight to 300 on inner pages — that made
   half the headline read like a different font. Force it back to match
   the surrounding display weight; only the colour changes. */
body.rd-active h1 .accent-burnt,
body.rd-active h2 .accent-burnt,
body.rd-active .display-xxl .accent-burnt,
body.rd-active .display-xl .accent-burnt,
body.rd-active .display-l .accent-burnt {
  font-weight: inherit !important;
  font-family: inherit !important;
  font-style: inherit !important;
  letter-spacing: inherit !important;
  color: var(--rd-ocean) !important;
}

/* FOOTER — placeholder; the canonical footer rules live further down at the
   "Footer" section (line ~1481). Keeping a single source of truth there. */

/* Sites-page row cleanup — `.group` rendered region names like "Sumatera"
   and "East Kalimantan" in IBM Plex Mono with 1.82px tracking but in
   sentence case. Mono fonts kern badly in mixed case, and surrounded by
   the all-caps mono labels (ID, BUILT, SITE · 001) the visual register
   broke. Uppercase to match. */
body.rd-active .site-row .group {
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  color: var(--rd-ink-mute) !important;
}

/* <strong> tags inherited bone color from site.css (designed for dark
   backdrops); on the v4 light canvas they rendered invisible. Force ink. */
body.rd-active main strong,
body.rd-active main b {
  color: var(--rd-ink) !important;
  font-weight: 600 !important;
}

/* OPERATING RECORD — IoH-grade ledger composition.
   Hero stat anchored at the top with serif italic statement. Below, the
   supporting stats lay out as a single-column ledger — each stat is a
   full-width row with mono caps label LEFT and big display number RIGHT,
   hairline above and below. Reads as a financial-report key-metrics page,
   one fact per line. The eye scans top to bottom; each fact gets its own
   editorial moment. */
body.rd-active .rd-meta-band .hero-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: var(--s-major) !important;
  background: transparent !important;       /* kill stale dark-overlay bg from older site.css iteration that was washing the whole block grey */
  border: none !important;                  /* kill stale dark 1px border from older site.css that was drawing a box */
  border-radius: 0 !important;
  padding: 0 !important;
}

/* HERO row — full-width band, massive Manrope numeral, italic-serif
   statement vertically centered to it. Generous top + bottom padding so
   the number breathes off the hairlines. */
body.rd-active .rd-meta-band .hero-meta .row.hero {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
  padding: 56px 0 64px 0 !important;
  margin-bottom: 24px !important;
  background: none !important;
  border: none !important;
}
body.rd-active .rd-meta-band .hero-meta .row.hero .v {
  font-family: var(--rd-display) !important;
  font-size: clamp(72px, 11vw, 168px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.86 !important;
  color: var(--rd-ink) !important;
}
body.rd-active .rd-meta-band .rd-meta-statement {
  font-family: var(--rd-display-italic, "Instrument Serif", "Times New Roman", serif) !important;
  font-style: italic !important;
  font-size: clamp(20px, 2.2vw, 30px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em !important;
  color: var(--rd-ink-soft) !important;
  margin: 0 !important;
  max-width: 38ch !important;
}

/* SUPPORTING ROWS — ledger lines. Label left, number right.
   Hairline above and below each row. Generous vertical breath. */
body.rd-active .rd-meta-band .hero-meta .row:not(.hero) {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: baseline !important;
  gap: 24px !important;
  padding: 32px 0 !important;
  border-top: 1px solid rgba(14, 26, 32, 0.10) !important;
  background: none !important;
  border-right: none !important;
  border-bottom: none !important;
  position: relative;
  transition: padding-left 240ms var(--rd-ease-soft) !important;
}
body.rd-active .rd-meta-band .hero-meta .row:not(.hero):last-child {
  border-bottom: 1px solid rgba(14, 26, 32, 0.10) !important;
}
body.rd-active .rd-meta-band .hero-meta .row:not(.hero):hover {
  padding-left: 12px !important;
}
body.rd-active .rd-meta-band .hero-meta .row:not(.hero) .k {
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--rd-ink-mute) !important;
  line-height: 1.4 !important;
  align-self: center !important;
  order: 1 !important;
  margin: 0 !important;
}
body.rd-active .rd-meta-band .hero-meta .row:not(.hero) .v {
  font-family: var(--rd-display) !important;
  font-size: clamp(40px, 4.6vw, 64px) !important;
  font-weight: 300 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.03em !important;
  color: var(--rd-ink) !important;
  order: 2 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

/* Tablet */
@media (max-width: 1024px) {
  body.rd-active .rd-meta-band .hero-meta .row.hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
    padding-bottom: 48px !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  body.rd-active .rd-meta-band-tag {
    margin-bottom: 16px !important;     /* was --s-major (64) — too much on phones */
  }
  body.rd-active .rd-meta-band .hero-meta {
    margin-top: 8px !important;
  }
  body.rd-active .rd-meta-band .hero-meta .row.hero {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 28px 0 28px 0 !important;  /* breath above + below 9.3M */
    margin-bottom: 0 !important;
  }
  body.rd-active .rd-meta-band .hero-meta .row.hero .v {
    font-size: clamp(64px, 16vw, 92px) !important;
    text-align: left !important;        /* fix right-align leak from supporting-row rule */
    justify-self: start !important;
    width: auto !important;
  }
  body.rd-active .rd-meta-band .rd-meta-statement {
    font-size: 18px !important;
  }
  body.rd-active .rd-meta-band .hero-meta .row:not(.hero) {
    padding: 22px 0 !important;
    grid-template-columns: 1fr auto !important;
    gap: 16px !important;
  }
  body.rd-active .rd-meta-band .hero-meta .row:not(.hero):hover {
    padding-left: 0 !important;
  }
  body.rd-active .rd-meta-band .hero-meta .row:not(.hero) .v {
    font-size: 32px !important;
  }
  body.rd-active .rd-meta-band .hero-meta .row:not(.hero) .k {
    font-size: 10px !important;
    max-width: 60% !important;
  }
}

@media (max-width: 880px) {
  body.rd-active .site-header {
    /* Force the capsule to span the available width on mobile. Auto-sizing
       was producing a sub-189px header in some viewports, which made the
       189px brand SVG stick past the right edge. With width:calc, brand
       sits at the left, burger at the right, the capsule always contains both. */
    width: calc(100% - 32px) !important;
    /* Larger vertical padding so the 24px brand SVG sits comfortably inside
       the rounded capsule with ample breathing room top + bottom. */
    padding: 18px 14px 18px 20px !important;
  }
  body.rd-active .site-header .nav-links {
    display: none !important;
  }
  body.rd-active .site-header .nav-cta .btn {
    padding: 9px 14px !important;
    font-size: 10px !important;
  }
  body.rd-active .site-header .nav-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: transparent;
    border: none;
    margin-left: 4px;
  }
  body.rd-active .site-header .nav-burger span {
    background: var(--rd-ink) !important;
    transition: background 220ms var(--rd-ease-soft);
  }
  body.rd-active .site-header.over-dark .nav-burger span {
    background: var(--rd-bone) !important;
  }
}

/* ---------------------------------------------------------------------------
   4. HERO — full-bleed cinematic loop, big editorial type, asymmetric
   --------------------------------------------------------------------------- */
body.rd-active .rd-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 0 0 0;
  padding: 0;
  overflow: hidden;
  background: var(--rd-abyss);
  isolation: isolate;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
body.rd-active .rd-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
/* Video element retired in favour of the palm-specimen layer.
   Kept defensively so any leftover <video> is safely hidden. */
body.rd-active .rd-hero-video {
  display: none !important;
}

/* Palm-specimen positioning override for the new editorial hero.
   The original CSS positioned this for the split-grid layout — we re-anchor
   it for the full-bleed editorial hero. The wireframe sits offset right,
   roughly half-bleeding off the right edge so it reads as a botanical
   specimen pinned to the page rather than a portrait. The H1 sits to its
   left at the bottom of the hero. */
body.rd-active .rd-hero .hero-specimen {
  position: absolute !important;
  top: 50% !important;
  right: -8% !important;
  left: auto !important;
  transform: translateY(-50%);
  width: clamp(520px, 58vw, 880px) !important;
  height: clamp(660px, 90vh, 1100px) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 1;
  /* Subtle drift to give the specimen a slow breath, like a held frame
     in a documentary. Pairs with the data-layer animations already
     defined in the existing scripts. */
  animation: rdSpecimenDrift 28s ease-in-out infinite;
}
@keyframes rdSpecimenDrift {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1); }
  50%      { transform: translateY(-51%) translateX(-1%) scale(1.02); }
}
body.rd-active .rd-hero .hs-form {
  opacity: 0.78 !important;
  /* Tonal nudge — the palm xray reads slightly more teal-blue against
     the deep oceanic background, with a soft vignette. */
  mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 50%, rgba(0,0,0,0.7) 80%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 50%, rgba(0,0,0,0.7) 80%, transparent 100%) !important;
}
body.rd-active .rd-hero .hs-grid {
  opacity: 0.55 !important;
  background-image:
    linear-gradient(to right, rgba(159, 230, 220, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(159, 230, 220, 0.07) 1px, transparent 1px) !important;
}
/* Mobile: specimen tucks behind, semi-transparent, doesn't compete */
@media (max-width: 880px) {
  body.rd-active .rd-hero .hero-specimen {
    right: -22% !important;
    width: 90vw !important;
    height: 70vh !important;
    opacity: 0.6;
  }
  body.rd-active .rd-hero .hs-form {
    opacity: 0.55 !important;
  }
}
/* CSS-animated cinematic placeholder — visible until the real video loads.
   Three layered animated radial gradients that drift slowly, evoking the
   IntegratedBio molten-ribbon feeling but in deep teal-blue + copper. */
body.rd-active .rd-hero-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, var(--rd-ocean) 0%, var(--rd-ocean-deep) 35%, var(--rd-abyss) 75%);
  overflow: hidden;
}
body.rd-active .rd-hero-fallback::before,
body.rd-active .rd-hero-fallback::after {
  content: '';
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  opacity: 0.7;
}
body.rd-active .rd-hero-fallback::before {
  background: radial-gradient(circle at 30% 40%, var(--rd-ocean-mid) 0%, transparent 50%);
  animation: rdDriftA 24s ease-in-out infinite;
}
body.rd-active .rd-hero-fallback::after {
  background: radial-gradient(circle at 70% 60%, var(--rd-copper) 0%, transparent 45%);
  animation: rdDriftB 32s ease-in-out infinite;
  opacity: 0.45;
}
@keyframes rdDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-8%, 4%) scale(1.1); }
  66% { transform: translate(6%, -3%) scale(0.95); }
}
@keyframes rdDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10%, 8%) scale(1.15); }
}
/* Subtle vignette for cinematic depth */
body.rd-active .rd-hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(5, 32, 41, 0.35) 100%),
    linear-gradient(to bottom, rgba(5, 32, 41, 0.1) 0%, transparent 25%, transparent 75%, rgba(5, 32, 41, 0.55) 100%);
}
/* Film grain over the hero — gives the video layer perceptible texture */
body.rd-active .rd-hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: rdGrainShift 1s steps(2) infinite;
}
@keyframes rdGrainShift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-2%, 1%); }
}

/* Hero content */
body.rd-active .rd-hero-content {
  position: relative;
  z-index: 10;
  max-width: var(--rd-maxw);
  margin: 0 auto;
  padding: 0 var(--rd-pad-x);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Leave room for the absolutely-positioned foot strip */
  padding-bottom: clamp(180px, 22vh, 240px);
  padding-top: 96px;
}
body.rd-active .rd-hero-h1 {
  font-family: var(--rd-display);
  font-weight: 400;
  /* Type-scale-driven sizing using discrete breakpoints (no off-scale interpolation) */
  font-size: var(--fs-48);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--rd-bone);
  margin: 0;
  text-wrap: pretty;
}
@media (min-width: 768px)  { body.rd-active .rd-hero-h1 { font-size: var(--fs-64); } }
@media (min-width: 1024px) { body.rd-active .rd-hero-h1 { font-size: var(--fs-80); } }
@media (min-width: 1440px) { body.rd-active .rd-hero-h1 { font-size: var(--fs-96); } }
/* Foot lives inside .rd-hero-content. Bottom 64 = section-major. */
body.rd-active .rd-hero-foot {
  position: absolute;
  z-index: 11;
  left: var(--rd-pad-x);
  right: var(--rd-pad-x);
  bottom: var(--s-major);             /* 64 — token */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-block);                /* 32 — token */
}
body.rd-active .rd-hero-foot-text {
  font-family: var(--rd-display) !important;
  font-weight: 400 !important;
  font-size: var(--fs-16) !important;            /* 16 — token */
  line-height: var(--lh-body) !important;        /* 1.5 */
  letter-spacing: var(--tr-subhead) !important;  /* -0.005em */
  color: var(--rd-bone) !important;
  max-width: 56ch !important;
  opacity: 1 !important;
}
body.rd-active .rd-hero-foot-text em {
  font-family: var(--rd-display);
  font-style: normal;
  font-weight: 500;
  color: var(--rd-ice-bright);
}

/* "Discover the platform" pill — token-driven.
   Outer pill height = 48 (circle 40 + 4 padding top/bottom).
   Circle diameter (40) matches inner content height for clean two-shape mating. */
body.rd-active .rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 4px 4px 24px;          /* 4 / 24 — token */
  background: rgba(14, 26, 32, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--rd-bone);
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-mono);
  font-size: var(--fs-12);            /* 12 — token */
  letter-spacing: var(--tr-caps-sm);  /* 0.18em — token */
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: all 240ms var(--rd-ease-soft);
  white-space: nowrap;
  border: 1px solid rgba(247, 243, 234, 0.08);
  height: 48px;                        /* 6 × 8 */
}
body.rd-active .rd-pill .rd-pill-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;                         /* 5 × 8 */
  height: 40px;
  background: var(--rd-ice);
  color: var(--rd-ink);
  border-radius: var(--rd-radius-pill);
  margin-left: 16px;                   /* token: pair gap */
  transition: transform 240ms var(--rd-ease-soft);
  font-size: var(--fs-14);             /* 14 — token */
  font-weight: 600;
}
body.rd-active .rd-pill:hover {
  background: var(--rd-ocean-deep);
}
body.rd-active .rd-pill:hover .rd-pill-chip {
  transform: translateX(2px);
}

/* Tag chip — token-driven. Padding multiples of 8. Type at scale 12. */
body.rd-active .rd-hero-tag {
  position: relative;                 /* flow above H1 within bottom-anchored stack */
  z-index: 11;
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  gap: var(--s-tight);                /* 8 — icon → label */
  padding: 8px 16px;                  /* 8 / 16 — token */
  margin-bottom: var(--s-block);      /* 32 — breath above H1 */
  background: rgba(247, 243, 234, 0.06);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-radius: 6px;
  border: 1px solid rgba(247, 243, 234, 0.10);
  font-family: var(--rd-mono);
  font-size: var(--fs-12);            /* 12 — token */
  letter-spacing: var(--tr-caps-sm);  /* 0.18em — token */
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rd-bone);
  margin: 0;
}
body.rd-active .rd-hero-tag::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--rd-ice);
  box-shadow: 0 0 12px var(--rd-ice-shadow);
}

/* Mobile hero tightening — foot flows naturally below H1 instead of
   absolute-anchored to bottom. Stops the H1 from crashing into the foot
   text when the H1 wraps to 4+ lines on narrow viewports. */
@media (max-width: 768px) {
  body.rd-active .rd-hero-content {
    padding-bottom: var(--s-major);                /* 64 — natural bottom gap */
    min-height: auto;                              /* content-driven height */
    justify-content: flex-start;                   /* don't stretch to fill */
    padding-top: 96px;                             /* clears the floating pill nav */
  }
  body.rd-active .rd-hero {
    min-height: auto;                              /* content-driven, no 100vh */
  }
  body.rd-active .rd-hero-h1 {
    font-size: clamp(34px, 9vw, 48px);             /* slightly tighter on mobile */
    line-height: 1.05;
    max-width: 18ch;
    margin-top: var(--s-block);                    /* 32 — gap below tag chip */
    margin-bottom: var(--s-block);                 /* 32 — gap above foot */
  }
  body.rd-active .rd-hero-foot {
    position: static;                              /* flow naturally, no overlap */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-pair);                            /* 16 — between text and button */
    margin-top: 0;
    padding: 0;
    left: auto;
    right: auto;
    bottom: auto;
  }
  body.rd-active .rd-hero-foot-text {
    font-size: 14px;
    line-height: var(--lh-body);
    max-width: 38ch;
  }
  body.rd-active .rd-hero-tag {
    position: static !important;                  /* flow naturally */
    margin-top: 0 !important;
    margin-bottom: var(--s-block) !important;     /* breath before H1 */
    /* DROP THE PILL CHROME — was decorative scaffolding pretending to be a
       label. The mono caps + mint dot is enough editorial signal. */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.18em !important;
    color: rgba(247, 243, 234, 0.78) !important;
    top: auto;
    width: 100% !important;                        /* let the line breathe */
    flex-wrap: wrap !important;
  }
}

/* ---------------------------------------------------------------------------
   5. CHAPTER SCROLLYTELLING — the 01/03 → 02/03 → 03/03 IntegratedBio pattern
   --------------------------------------------------------------------------- */
body.rd-active .rd-chapters {
  position: relative;
  background: var(--rd-abyss);
  color: var(--rd-bone);
  padding: 140px 0 160px;
  margin-top: -28px;
  /* Anchor offset for the "Discover the platform" deep-link so the floating
     nav capsule doesn't crash into the first chapter heading. */
  scroll-margin-top: 24px;
}
body.rd-active .rd-chapters::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, var(--rd-ocean) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 10% 80%, var(--rd-ocean-deep) 0%, transparent 65%);
  opacity: 0.5;
  pointer-events: none;
}
/* Chapter — single column. Headline aligns at the single page gutter (x=160).
   The 01/03 folio is absolutely positioned in the LEFT gutter (outside the
   content column), so it acts as a margin annotation. */
body.rd-active .rd-chapter {
  position: relative;
  max-width: var(--rd-maxw);
  margin: 0 auto 0 auto;
  padding-left: var(--rd-pad-x);
  padding-right: var(--rd-pad-x);
  padding-top: var(--s-block);          /* 32 — internal */
  display: block;
  border-top: 1px solid rgba(247, 243, 234, 0.10);
}
body.rd-active .rd-chapter:first-child {
  border-top: none;
  padding-top: 0;
}
body.rd-active .rd-chapter:last-child {
  margin-bottom: 0;
}
/* Folio — absolutely positioned in the left gutter, above the chapter top */
body.rd-active .rd-chapter-num {
  position: absolute;
  top: 32px;                            /* matches .rd-chapter padding-top */
  left: var(--rd-pad-x);
  font-family: var(--rd-mono);
  font-size: var(--fs-12);              /* 12 — token */
  letter-spacing: var(--tr-caps-sm);    /* 0.18em */
  color: var(--rd-bone);
  white-space: nowrap;
  /* Hide the folio inside the content column edge — the headline takes over */
}
/* On wide enough viewports, lift the folio OUT of the content column into
   the page's left margin so it floats free as a chapter annotation */
@media (min-width: 1280px) {
  body.rd-active .rd-chapter-num {
    left: 32px;                         /* float in the page-left gutter */
  }
}
body.rd-active .rd-chapter-num .total {
  color: var(--rd-ink-mute);
  margin-left: 2px;
}
/* First chapter folio aligns with the chapter top, not 32px down */
body.rd-active .rd-chapter:first-child .rd-chapter-num {
  top: 0;
}
body.rd-active .rd-chapter-text {
  font-family: var(--rd-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.024em;
  max-width: 26ch;
  color: var(--rd-bone);
  text-wrap: balance;
}
body.rd-active .rd-chapter-text em {
  font-family: var(--rd-display);
  font-style: normal;
  font-weight: 500;
  color: var(--rd-ice-bright);
}
/* Chip — token-driven. Sits as its own block above the headline. */
body.rd-active .rd-chapter-tag {
  display: flex !important;
  width: fit-content !important;
  align-items: center;
  gap: var(--s-tight);                /* 8 */
  margin: 0 0 var(--s-block) 0 !important;  /* 32 below — section internal */
  padding: 8px 16px;                  /* 8 / 16 — token */
  background: rgba(247, 243, 234, 0.06);
  border: 1px solid rgba(247, 243, 234, 0.10);
  border-radius: 6px;
  font-family: var(--rd-mono);
  font-size: var(--fs-12);            /* 12 */
  letter-spacing: var(--tr-caps-sm);  /* 0.18em */
  text-transform: uppercase;
  color: var(--rd-bone);
  font-weight: 500;
}
body.rd-active .rd-chapter-tag::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--rd-ice);
}
@media (max-width: 768px) {
  body.rd-active .rd-chapters {
    /* Tightened from 80px so the abyss gap between hero foot and chapter 01
       reads as section rhythm, not dead space. Hero foot already leaves 64px
       below the button — 32px here gives an effective ~96px section break. */
    padding: 32px 0 80px;
  }
  body.rd-active .rd-chapter {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 56px;
    padding-top: 24px;
  }
  body.rd-active .rd-chapter-num {
    padding-top: 0;
  }
  body.rd-active .rd-chapter-text {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.22;
  }
}

/* ---------------------------------------------------------------------------
   6. SCROLL-DRIVEN WORD-BY-WORD LUMINANCE REVEAL
   --------------------------------------------------------------------------- */
body.rd-active .rd-reveal-word {
  display: inline-block;
  color: rgba(247, 243, 234, 0.18);
  transition: color 240ms var(--rd-ease-editorial);
}
body.rd-active .rd-reveal-word.is-lit {
  color: var(--rd-bone);
}
body.rd-active .rd-reveal-word.is-lit em,
body.rd-active .rd-reveal-word em {
  font-style: italic;
}
/* Light-mode variant for editorial sections on bone background */
body.rd-active .rd-reveal-on-light .rd-reveal-word {
  color: var(--rd-ink-ghost);
}
body.rd-active .rd-reveal-on-light .rd-reveal-word.is-lit {
  color: var(--rd-ink);
}
@media (prefers-reduced-motion: reduce) {
  body.rd-active .rd-reveal-word {
    color: var(--rd-bone);
    transition: none;
  }
  body.rd-active .rd-reveal-on-light .rd-reveal-word {
    color: var(--rd-ink);
  }
}

/* ---------------------------------------------------------------------------
   7. EDITORIAL SECTION TREATMENT (the existing tech-stack and below)
       Cascading overrides that make the existing dark sections feel
       editorial without breaking layout.
   --------------------------------------------------------------------------- */
/* Re-theme the existing hero/section/divider chrome below the new hero
   so the page feels coherent. Sections following the redesigned hero
   get the bone canvas treatment. */
body.rd-active main {
  background: var(--rd-bone);
}
body.rd-active section {
  background: transparent;
  position: relative;
}

/* Existing eyebrow chips: re-theme to match the new chapter-tag look */
body.rd-active .eyebrow {
  background: rgba(14, 26, 32, 0.04) !important;
  border: 1px solid rgba(14, 26, 32, 0.08) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
}
body.rd-active .eyebrow .dot {
  background: var(--rd-ice) !important;
  box-shadow: 0 0 12px var(--rd-ice-shadow) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
}

/* Section heads — humanist warmth, larger scale */
body.rd-active .display-xxl,
body.rd-active .display-xl,
body.rd-active .display-l,
body.rd-active .display-m,
body.rd-active h1, body.rd-active h2,
body.rd-active h3, body.rd-active h4 {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 500;
  letter-spacing: -0.028em;
}
/* Section heads — token scale (32 / 48 / 64 / 80), token line-heights, token tracking */
body.rd-active .display-xxl {
  font-size: clamp(48px, 5.5vw, 80px) !important;   /* 48 → 80 — scale */
  line-height: var(--lh-headline) !important;       /* 1.1 */
  letter-spacing: var(--tr-display) !important;     /* -0.025em (largest band) */
  font-weight: 400 !important;
}
body.rd-active .display-xl {
  font-size: clamp(32px, 4vw, 48px) !important;     /* 32 → 48 */
  line-height: var(--lh-headline) !important;       /* 1.1 */
  letter-spacing: var(--tr-headline) !important;    /* -0.015em */
  font-weight: 400 !important;
}
body.rd-active .display-l {
  font-size: var(--fs-32) !important;               /* 32 — flat */
  line-height: var(--lh-subhead) !important;        /* 1.25 */
  letter-spacing: var(--tr-headline) !important;
  font-weight: 500 !important;
}

body.rd-active .accent-burnt {
  color: var(--rd-ocean) !important;
  font-weight: 300 !important;
  font-style: normal !important;
}
/* Subhead lines — were Fraunces italic; replaced with quiet Manrope 300 in
   ocean teal. Keeps the editorial sense of a "voice line" without the curl. */
body.rd-active .subhead-l {
  font-family: var(--rd-display) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  color: var(--rd-ocean) !important;
  opacity: 1 !important;
  letter-spacing: -0.014em !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1.4 !important;
}
body.rd-active .lede {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-display) !important;
  font-weight: 400;
}
body.rd-active .body, body.rd-active .body p {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-display) !important;
}
body.rd-active .label-mono {
  color: var(--rd-ink-mute) !important;
  font-family: var(--rd-mono) !important;
}

/* Hairlines — bracketed at the ends, blueprint feel */
body.rd-active hr.divider,
body.rd-active hr {
  border: 0;
  height: 1px;
  background: var(--rd-ink-faint);
  margin: 84px 0;
  position: relative;
  overflow: visible;
}
body.rd-active hr::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--rd-ink-faint);
}
body.rd-active hr::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--rd-ink-faint);
}
/* Kill the burnt-spark animation from the original */
body.rd-active hr.divider::after {
  animation: none !important;
  background: var(--rd-ink-faint) !important;
}

/* Buttons — re-theme to ocean/ice */
body.rd-active .btn-burnt {
  background: var(--rd-ink) !important;
  color: var(--rd-bone) !important;
  box-shadow: none !important;
  border-radius: var(--rd-radius-pill) !important;
  padding: 12px 22px !important;
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
body.rd-active .btn-burnt:hover {
  background: var(--rd-ocean) !important;
  transform: none !important;
}
body.rd-active .btn-ghost {
  background: transparent !important;
  color: var(--rd-ink) !important;
  border-color: var(--rd-ink-faint) !important;
  border-radius: var(--rd-radius-pill) !important;
  padding: 12px 22px !important;
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
body.rd-active .btn-ghost:hover {
  border-color: var(--rd-ink) !important;
  background: rgba(14, 26, 32, 0.04) !important;
}
body.rd-active .btn-primary {
  background: var(--rd-ocean) !important;
  color: var(--rd-bone) !important;
  border-radius: var(--rd-radius-pill) !important;
  padding: 12px 22px !important;
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Stack grid (the five-pillar tech section) — flatten to bone with quiet borders */
body.rd-active .stack-grid {
  background: transparent !important;
  border: none !important;
  gap: 1px !important;
}
body.rd-active .stack-cell {
  background: var(--rd-paper) !important;
  border: 1px solid rgba(14, 26, 32, 0.08) !important;
  padding: 32px 28px !important;
  border-radius: 12px !important;
  transition: background 200ms var(--rd-ease-soft);
}
body.rd-active .stack-cell:hover {
  background: var(--rd-bone-soft) !important;
}
body.rd-active .stack-num {
  font-family: var(--rd-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  color: var(--rd-ocean) !important;
  font-weight: 500 !important;
}
body.rd-active .stack-name {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 500 !important;
}
body.rd-active .stack-cat {
  font-family: var(--rd-mono) !important;
  color: var(--rd-ink-mute) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.rd-active .stack-desc {
  color: var(--rd-ink-soft) !important;
  font-family: var(--rd-display) !important;
}

/* Drill links */
body.rd-active .drill {
  color: var(--rd-ocean) !important;
  border-color: rgba(14, 26, 32, 0.12) !important;
  font-family: var(--rd-mono) !important;
}
body.rd-active .drill:hover {
  color: var(--rd-ocean-deep) !important;
  border-color: var(--rd-ocean) !important;
  background: rgba(15, 77, 92, 0.04) !important;
}
body.rd-active .drill .drill-label {
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
}
body.rd-active .drill .drill-arrow {
  color: var(--rd-ocean) !important;
}

/* Ticker bar */
body.rd-active .ticker-bar {
  background: var(--rd-ocean-deep) !important;
  color: var(--rd-bone) !important;
  border-top: 1px solid rgba(247, 243, 234, 0.08) !important;
  border-bottom: 1px solid rgba(247, 243, 234, 0.08) !important;
}
body.rd-active .ticker-item {
  color: var(--rd-bone) !important;
  font-family: var(--rd-mono) !important;
}
body.rd-active .ticker-item .num {
  color: rgba(247, 243, 234, 0.55) !important;
}
body.rd-active .ticker-item .dot {
  background: var(--rd-ice) !important;
  box-shadow: 0 0 8px var(--rd-ice-shadow) !important;
}
body.rd-active .ticker-item.new .new-badge {
  background: var(--rd-ice) !important;
  color: var(--rd-ink) !important;
}

/* Stats row — make the big numbers warm + ocean accents.
   Original site.css gives .stats a dark surface card; we flatten it to bone. */
body.rd-active .stats {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(14, 26, 32, 0.08) !important;
  border-radius: 0 !important;
  padding: 36px 0 !important;
  box-shadow: none !important;
}
body.rd-active .stats .stat {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.rd-active .stat .num {
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.028em !important;
  opacity: 1 !important;
}
body.rd-active .stat .num span {
  color: var(--rd-ink) !important;
}
body.rd-active .stat .num .unit {
  color: var(--rd-ocean) !important;
}
body.rd-active .stat .label {
  color: var(--rd-ink-mute) !important;
  font-family: var(--rd-mono) !important;
}
/* The .reveal class with opacity:0 — make sure the redesigned stats are visible */
body.rd-active .stats.reveal,
body.rd-active .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* AMR panel — keep the tech-readout feel but in light mode with ocean accent */
body.rd-active .amr-panel {
  background: var(--rd-paper) !important;
  border: 1px solid rgba(14, 26, 32, 0.08) !important;
  border-radius: 12px !important;
}
body.rd-active .amr-panel-head .id,
body.rd-active .amr-panel-head .meta {
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
}
body.rd-active .amr-panel-head .meta {
  color: var(--rd-ink-mute) !important;
}
body.rd-active .amr-panel-section .section-label {
  color: var(--rd-ocean) !important;
  font-family: var(--rd-mono) !important;
}
body.rd-active .amr-row .row-tag {
  color: var(--rd-ink-mute) !important;
  font-family: var(--rd-mono) !important;
}
body.rd-active .amr-row .row-name,
body.rd-active .amr-row .row-value {
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
}
body.rd-active .amr-bar {
  background: rgba(14, 26, 32, 0.06) !important;
}
body.rd-active .amr-bar .fill {
  background: linear-gradient(90deg, var(--rd-ocean) 0%, var(--rd-ice) 100%) !important;
}

/* Specs */
body.rd-active .spec-row {
  border-bottom: 1px solid rgba(14, 26, 32, 0.1) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  padding: 14px 0 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
}
body.rd-active .spec-row .k {
  color: var(--rd-ink-mute) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
body.rd-active .spec-row .v {
  color: var(--rd-ink) !important;
  font-weight: 500 !important;
}

/* AMR panel — make the dark surface use deep ocean teal instead of black */
body.rd-active .amr-panel {
  background: var(--rd-abyss) !important;
  border: 1px solid var(--rd-ocean-deep) !important;
  border-radius: 12px !important;
  color: var(--rd-bone) !important;
}
body.rd-active .amr-panel .amr-panel-head {
  background: rgba(247, 243, 234, 0.03) !important;
  border-bottom: 1px solid rgba(247, 243, 234, 0.08) !important;
}
body.rd-active .amr-panel-head .id {
  color: var(--rd-bone) !important;
}
body.rd-active .amr-panel-head .meta {
  color: rgba(247, 243, 234, 0.55) !important;
}
body.rd-active .amr-panel-section {
  border-bottom: 1px solid rgba(247, 243, 234, 0.08) !important;
}
body.rd-active .amr-panel-section .section-label {
  color: var(--rd-ice) !important;
}
body.rd-active .amr-row .row-tag {
  color: rgba(247, 243, 234, 0.55) !important;
}
body.rd-active .amr-row .row-name,
body.rd-active .amr-row .row-value {
  color: var(--rd-bone) !important;
}
body.rd-active .amr-bar {
  background: rgba(247, 243, 234, 0.08) !important;
}

/* Photo strip — keep but warm the canvas around it */
body.rd-active .photo-strip {
  background: var(--rd-bone) !important;
}
body.rd-active .photo-tile img {
  border-radius: 8px;
}

/* FOOTER — editorial dark masthead.
   Deep oceanic abyss closes the page like a luxury brand's masthead.
   Five columns: brand + MY + ID + Operating Record + Engage. Italic
   Instrument Serif sign-off below. Mono caps + bone-graded text. */
body.rd-active footer {
  background: var(--rd-abyss) !important;
  color: var(--rd-bone) !important;
  border-top: 1px solid rgba(247, 243, 234, 0.10) !important;
  padding: 96px 0 40px !important;
}
body.rd-active footer .footer-grid {
  gap: 56px 40px !important;
  margin-bottom: 0 !important;
}
body.rd-active footer .footer-brand p {
  font-family: var(--rd-display) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(247, 243, 234, 0.78) !important;
  max-width: 32ch !important;
  margin-top: 18px !important;
}
body.rd-active footer .footer-col h5 {
  font-family: var(--rd-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  font-weight: 500 !important;
  color: var(--rd-ice, #48c1eb) !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}
body.rd-active footer .footer-col p {
  font-family: var(--rd-body) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(247, 243, 234, 0.72) !important;
}
body.rd-active footer .footer-col p strong {
  font-weight: 500 !important;
  color: var(--rd-bone) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
body.rd-active footer .footer-col a {
  font-family: var(--rd-body) !important;
  font-size: 13px !important;
  color: rgba(247, 243, 234, 0.78) !important;
  transition: color 180ms var(--rd-ease-soft, ease) !important;
  text-decoration: none !important;
}
body.rd-active footer .footer-col a:hover {
  color: var(--rd-ice, #48c1eb) !important;
}

/* Sign-off — italic Instrument Serif, the closing line of the page */
body.rd-active footer .footer-signoff {
  font-family: "Instrument Serif", "Times New Roman", serif !important;
  font-style: italic !important;
  font-size: clamp(22px, 2.2vw, 32px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  color: rgba(247, 243, 234, 0.82) !important;
  max-width: 60ch !important;
  margin: 64px 0 56px !important;
  padding: 40px 0 0 !important;
  border-top: 1px solid rgba(247, 243, 234, 0.10) !important;
}

body.rd-active footer .footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(247, 243, 234, 0.08) !important;
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(247, 243, 234, 0.50) !important;
}

/* MASTHEAD WORDMARK — massive type bleeding the footer width.
   Letter edges deliberately clip the viewport for editorial sophistication
   (the IoH "Institute of Health" move). Word: "Decarbonisation" — the
   thesis of the company in a single closing utterance. */
body.rd-active footer .footer-wordmark {
  font-family: var(--rd-display) !important;
  font-weight: 300 !important;
  font-size: clamp(96px, 24vw, 380px) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.06em !important;
  color: rgba(247, 243, 234, 0.07) !important;
  margin: 72px -8vw -56px !important;
  text-align: center !important;
  white-space: nowrap !important;
  user-select: none !important;
  /* No overflow:hidden on the wordmark itself — let the body/footer's own
     overflow handle clipping. Edges feather off the viewport. */
}
body.rd-active footer {
  overflow: hidden !important;
}

/* DRILL LINK — was a hairline-bordered text link, easy to miss as a CTA.
   Now uses the .rd-pill class (same as "Discover the platform"). These
   overrides cancel site.css's inline .drill rules so the rd-pill style
   wins cleanly. */
body.rd-active a.drill {
  color: var(--rd-bone) !important;
  border: 1px solid rgba(247, 243, 234, 0.08) !important;
  margin-top: 0 !important;
  padding: 4px 4px 4px 24px !important;
  font-family: var(--rd-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
body.rd-active a.drill:hover {
  color: var(--rd-bone) !important;
  border-color: var(--rd-ice, #48c1eb) !important;
  padding-left: 24px !important;
}
body.rd-active .drill-wrap {
  margin-top: 48px !important;
  max-width: none !important;
}

/* CARBON OBSERVATORY — vertically center the SVG in its grid cell so the
   void doesn't accumulate below. The right-column stats stretch the cell
   taller than the SVG's intrinsic height; centering distributes any
   leftover space top + bottom equally rather than dumping it all below. */
body.rd-active .dash-map {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;            /* drop the 420px floor — let the cell match the right column's natural height */
}
body.rd-active .dash-map svg {
  height: auto !important;
  width: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 1024px) {
  body.rd-active footer .footer-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  body.rd-active footer .footer-brand {
    grid-column: 1 / -1 !important;
  }
  body.rd-active footer .footer-wordmark {
    margin: 48px -4vw -32px !important;
  }
}

@media (max-width: 640px) {
  body.rd-active footer { padding: 64px 0 32px !important; }
  body.rd-active footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 24px !important;
  }
  body.rd-active footer .footer-brand {
    grid-column: 1 / -1 !important;
  }
  body.rd-active footer .footer-signoff {
    font-size: 19px !important;
    margin: 48px 0 36px !important;
  }
}

/* Scroll progress — re-tint to ice */
body.rd-active .scroll-progress .bar {
  background: linear-gradient(90deg, var(--rd-ocean) 0%, var(--rd-ice) 100%) !important;
  box-shadow: 0 0 12px var(--rd-ice-shadow) !important;
}

/* Mobile drawer */
body.rd-active .mobile-drawer-inner {
  background: var(--rd-paper) !important;
  color: var(--rd-ink) !important;
}
body.rd-active .mobile-drawer nav a {
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
}
body.rd-active .mobile-drawer nav a.active {
  color: var(--rd-ocean) !important;
}

/* Meta band — quiet operating-record strip. Token-driven. */
body.rd-active .rd-meta-band {
  padding: var(--s-mega) 0 var(--s-major);  /* 128 top, 64 bottom */
  background: var(--rd-bone);
}
body.rd-active .rd-meta-band-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-tight);                /* 8 */
  margin-bottom: var(--s-major);      /* 64 — pair-to-content separation */
  padding: 8px 16px;                  /* 8 / 16 */
  background: rgba(14, 26, 32, 0.04);
  border: var(--hairline-light);
  border-radius: 6px;
  font-family: var(--rd-mono);
  font-size: var(--fs-12);            /* 12 */
  letter-spacing: var(--tr-caps-sm);  /* 0.18em */
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rd-ink);
}
body.rd-active .rd-meta-band-tag::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--rd-ice);
}
/* (Deleted: stale .rd-meta-band .hero-meta and .stats rules from an earlier
   iteration. The canonical ledger composition lives at line ~379. The .stats
   class was removed from index.html when the meta-band was redesigned, so
   those rules were also dead code.) */

/* ---------------------------------------------------------------------------
   8. EDITORIAL TYPOGRAPHIC GESTURES — break-the-grid bleed, big folio
       (only when the section is given the `rd-bleed` class)
   --------------------------------------------------------------------------- */
body.rd-active .rd-bleed-headline {
  font-family: var(--rd-display);
  font-weight: 500;
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--rd-ink);
  margin-left: -2vw;
}
body.rd-active .rd-bleed-headline em {
  font-family: var(--rd-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--rd-ocean);
}

/* ---------------------------------------------------------------------------
   9. RESPONSIVE polish
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  body.rd-active .rd-hero { min-height: 88vh; min-height: 88svh; }
}

/* ---------------------------------------------------------------------------
   10. PENTAGRAM-GRADE POLISH PASS
       - Re-tint palm specimen data overlay to ice-aqua / bone / copper.
       - Replace Manrope-300 subheads with Instrument Serif (sober, no curl).
       - Tighten chapter typography + spacing rhythm.
       - scroll-padding-top so anchored sections don't hide under the pill nav.
   --------------------------------------------------------------------------- */

/* Anchored sections need to sit BELOW the floating pill nav on scroll */
html { scroll-padding-top: 96px; }

/* Single content gutter — every .container hangs off the same vertical line
   (x = (vw - 1280) / 2 + 80). Overrides the original max-width:1320 + pad:56. */
body.rd-active .container {
  max-width: var(--rd-maxw) !important;
  padding-left: var(--rd-pad-x) !important;
  padding-right: var(--rd-pad-x) !important;
}
body.rd-active .container-narrow {
  max-width: 920px !important;
  padding-left: var(--rd-pad-x) !important;
  padding-right: var(--rd-pad-x) !important;
}

/* Re-tint the palm-specimen data overlay to fit the new palette.
   Original used cyan/magenta/mint; we shift to ice-aqua + bone + copper. */
body.rd-active .rd-hero .hs-overlay text {
  fill: rgba(247, 243, 234, 0.62) !important;
  font-family: var(--rd-mono) !important;
}
body.rd-active .rd-hero .hs-overlay .hs-tick {
  fill: rgba(247, 243, 234, 0.55) !important;
}
body.rd-active .rd-hero .hs-overlay .hs-eq {
  fill: rgba(159, 230, 220, 0.85) !important;
}
body.rd-active .rd-hero .hs-overlay .hs-wf {
  stroke: rgba(159, 230, 220, 0.5) !important;
}
body.rd-active .rd-hero .hs-overlay .hs-wf-fill {
  fill: rgba(159, 230, 220, 0.05) !important;
  stroke: rgba(159, 230, 220, 0.45) !important;
}
body.rd-active .rd-hero .hs-overlay .hs-dot {
  fill: rgba(247, 243, 234, 0.9) !important;
}
/* Magenta → warm copper accent, sparing */
body.rd-active .rd-hero .hs-overlay .hs-mag {
  fill: var(--rd-copper) !important;
}
/* Mint → ice-aqua */
body.rd-active .rd-hero .hs-overlay .hs-mint {
  fill: rgba(159, 230, 220, 0.55) !important;
}
body.rd-active .rd-hero .hs-overlay .hs-link {
  stroke: rgba(159, 230, 220, 0.28) !important;
}
/* Particle canvas blends with the new palette */
body.rd-active .rd-hero .hs-particles {
  mix-blend-mode: screen !important;
  opacity: 0.7;
}

/* Subhead — Instrument Serif. Token sized + token spaced. */
body.rd-active .subhead-l {
  font-family: var(--rd-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--rd-ink) !important;
  opacity: 1 !important;
  letter-spacing: var(--tr-subhead) !important;  /* -0.005em */
  font-size: var(--fs-24) !important;            /* 24 — scale */
  line-height: var(--lh-subhead) !important;     /* 1.25 */
  margin-top: var(--s-pair) !important;          /* 16 — pair gap from headline */
  display: block;
  max-width: 36ch;
}
body.rd-active .section-head .subhead-l {
  margin-top: var(--s-pair) !important;          /* 16 */
}

/* Chapter typography — token-driven.
   fs-32 (32) at line-height 1.25 (subhead band). Tracking -0.015 (headline). */
body.rd-active .rd-chapter-text {
  font-size: var(--fs-32) !important;        /* 32 — scale */
  line-height: var(--lh-subhead) !important; /* 1.25 */
  letter-spacing: var(--tr-headline) !important; /* -0.015em */
  font-weight: 400 !important;
  max-width: 38ch !important;
  text-wrap: balance;
}
body.rd-active .rd-chapter {
  margin-bottom: var(--s-chapter) !important;  /* 96 — chapter sep */
  padding-top: var(--s-block) !important;      /* 32 */
  gap: var(--s-major) !important;              /* 64 — between folio and content */
}
body.rd-active .rd-chapter:first-child {
  padding-top: 0 !important;
}
body.rd-active .rd-chapters {
  padding: var(--s-mega) 0 !important;         /* 128 — major page break */
}

/* Hero composition — token-driven spacing.
   padding-top 128 (chapter break) keeps clear of pill nav.
   padding-bottom 192 (24 × 8) reserves space for foot + pill. */
body.rd-active .rd-hero-content {
  justify-content: flex-end !important;
  padding-top: var(--s-mega) !important;       /* 128 */
  padding-bottom: 192px !important;            /* 24 × 8 */
}
/* Mobile: the foot is position:static (flows naturally below the H1), so the
   192px padding-bottom that desktop reserves for the absolutely-positioned
   foot is pure dead space here. Collapse it to the section-major token (64)
   so the gap below the Discover button reads as rhythm, not abyss. */
@media (max-width: 768px) {
  body.rd-active .rd-hero-content {
    padding-bottom: var(--s-major) !important;   /* 64 */
    padding-top: 96px !important;                /* clears the floating pill nav */
  }
}
/* .rd-hero-tag absolute-positioning removed — eyebrow now flows above H1 in
   the bottom-anchored hero stack, so eyebrow + H1 + foot read as one block. */

/* Hero foot text — slightly larger, italic Instrument Serif gives a
   spoken-line feel against the editorial display H1 */
body.rd-active .rd-hero-foot-text {
  font-family: var(--rd-display) !important;
  font-size: 15.5px !important;
  letter-spacing: -0.005em !important;
  opacity: 0.82 !important;
}

/* Section heads — token spacing rhythm */
body.rd-active .section-head {
  margin-bottom: var(--s-major);    /* 64 — between section head and grid */
}
body.rd-active .section-head .lede {
  margin-top: var(--s-related) !important;  /* 24 — related */
}

/* Stack grid — token spacing */
body.rd-active .stack-grid {
  gap: var(--s-pair) !important;            /* 16 — pair */
  margin-top: var(--s-major) !important;    /* 64 — major */
}
body.rd-active .stack-cell {
  padding: var(--s-block) !important;       /* 32 all sides */
}

/* Ticker — slightly more vertical padding so it breathes between
   photo strip and tech stack */
body.rd-active .ticker-bar {
  padding: 18px 0 !important;
}

/* Photo strip — quieter framing on bone canvas */
body.rd-active .photo-strip {
  padding: 32px 0 48px !important;
}

/* Section margins — consistent token rhythm: 96 between sections */
body.rd-active section + section {
  margin-top: 0;
}
body.rd-active section {
  padding: var(--s-chapter) 0;            /* 96 — chapter sep */
}
/* Don't double-pad the rd-meta-band, tech-stack or chapters which already
   set their own padding */
body.rd-active .rd-chapters,
body.rd-active .rd-meta-band,
body.rd-active .photo-strip,
body.rd-active .ticker-bar,
body.rd-active .rd-hero {
  padding-top: revert;
  padding-bottom: revert;
}

/* AMR section — token spacing */
body.rd-active .deepdive {
  gap: var(--s-major) !important;          /* 64 */
  align-items: start;
}
body.rd-active .deepdive .specs {
  margin-top: var(--s-block);              /* 32 */
}

/* Hairline divider — clean, full width within container */
body.rd-active hr,
body.rd-active hr.divider {
  margin: var(--s-chapter) auto !important; /* 96 */
  max-width: 100%;
  background: rgba(14, 26, 32, 0.10) !important;
}
body.rd-active hr::before,
body.rd-active hr::after {
  display: none !important;
}

/* ----------------------------------------------------------------------------
   INNER PAGES — overrides for page-specific inline styles
   The inner pages each carry their own <style> block from the dark-theme era.
   These rules re-skin those blocks for the bone editorial canvas, using the
   same token system as the rest of the redesign.
   ---------------------------------------------------------------------------- */

/* sites.html */
body.rd-active .summary-grid {
  background: rgba(14, 26, 32, 0.06) !important;   /* hairline grid lines */
  border: var(--hairline-light) !important;
  border-radius: var(--rd-radius) !important;
}
body.rd-active .summary-cell {
  background: var(--rd-bone) !important;
  padding: var(--s-related) var(--s-related) !important;  /* 24 */
}
body.rd-active .summary-cell .num {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 500 !important;
  font-size: var(--fs-40) !important;
  letter-spacing: var(--tr-headline) !important;
  line-height: var(--lh-headline) !important;
}
body.rd-active .summary-cell .num .unit {
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-14) !important;
  color: var(--rd-ocean) !important;
  margin-left: var(--s-tight) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tr-caps-md) !important;
}
body.rd-active .summary-cell .label {
  margin-top: var(--s-tight) !important;             /* 8 — tight pair */
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--tr-caps-sm) !important;
  text-transform: uppercase !important;
  color: var(--rd-ink-mute) !important;
}

body.rd-active .sites-table {
  border-top: var(--hairline-light) !important;
}
body.rd-active .table-head {
  background: var(--rd-bone) !important;
  border-bottom: var(--hairline-light) !important;
  top: 80px !important;                              /* clears the floating pill nav */
  padding: var(--s-pair) 0 !important;
}
body.rd-active .table-head .h {
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--tr-caps-sm) !important;
  color: var(--rd-ink-mute) !important;
}
body.rd-active .site-row {
  border-bottom: var(--hairline-light) !important;
  padding: var(--s-pair) 0 !important;
}
body.rd-active .site-row:hover {
  background: rgba(14, 26, 32, 0.03) !important;
}
body.rd-active .site-row .id {
  font-family: var(--rd-mono) !important;
  color: var(--rd-ocean) !important;
  letter-spacing: var(--tr-caps-md) !important;
}
body.rd-active .site-row .since {
  font-family: var(--rd-mono) !important;
  color: var(--rd-ink-soft) !important;
}
body.rd-active .site-row .name {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 500 !important;
  font-size: var(--fs-16) !important;
}
body.rd-active .site-row .loc {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink-soft) !important;
}
body.rd-active .site-row .country,
body.rd-active .site-row .group {
  font-family: var(--rd-mono) !important;
  color: var(--rd-ink-mute) !important;
  letter-spacing: var(--tr-caps-md) !important;
}
body.rd-active .site-row .status {
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;
  color: var(--rd-ink-mute) !important;
  border: var(--hairline-light) !important;
  background: transparent !important;
  letter-spacing: var(--tr-caps-sm) !important;
}
body.rd-active .site-row.is-new {
  background: linear-gradient(90deg, rgba(159, 230, 220, 0.12) 0%, transparent 35%) !important;
  border-left: 2px solid var(--rd-ice) !important;
  padding-left: var(--s-pair) !important;
}
body.rd-active .site-row.is-new .name {
  color: var(--rd-ocean) !important;
}
body.rd-active .site-row.is-new .status {
  color: var(--rd-ocean) !important;
  border-color: var(--rd-ice) !important;
  background: rgba(159, 230, 220, 0.10) !important;
}

/* Page hero — full-width section above the fold on inner pages */
body.rd-active .page-hero {
  padding-top: var(--s-mega) !important;             /* 128 — clears the pill nav */
  padding-bottom: var(--s-major) !important;         /* 64 */
}
body.rd-active .page-hero h1 {
  margin-bottom: var(--s-related) !important;        /* 24 */
}
body.rd-active .page-hero .subhead-l {
  margin-bottom: var(--s-block) !important;          /* 32 */
  color: var(--rd-ink-soft) !important;
}

/* contact.html — form fields */
body.rd-active .contact-form input,
body.rd-active .contact-form textarea,
body.rd-active .contact-form select {
  background: var(--rd-paper) !important;
  border: var(--hairline-light) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
  font-size: var(--fs-16) !important;
  padding: var(--s-pair) var(--s-related) !important;
  border-radius: var(--rd-radius) !important;
}
body.rd-active .contact-form input:focus,
body.rd-active .contact-form textarea:focus,
body.rd-active .contact-form select:focus {
  border-color: var(--rd-ocean) !important;
  outline: none !important;
}
body.rd-active .contact-form label {
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
}

/* calculator.html — form panel + result panel */
body.rd-active .calc-panel,
body.rd-active .calc-section,
body.rd-active .result-card {
  background: var(--rd-paper) !important;
  border: var(--hairline-light) !important;
  color: var(--rd-ink) !important;
  border-radius: var(--rd-radius) !important;
}
body.rd-active .calc-input,
body.rd-active .calc-form input,
body.rd-active .calc-form select {
  background: var(--rd-bone) !important;
  border: var(--hairline-light) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
}

/* 404.html — keep nav-friendly, ensure the typography uses tokens */
body.rd-active .nf-page,
body.rd-active .not-found-page {
  padding-top: var(--s-mega) !important;
  padding-bottom: var(--s-mega) !important;
}
body.rd-active .nf-grid {
  align-items: center !important;
}

/* DELIBERATELY no broad section-background override here.
   An earlier "body.rd-active section, body.rd-active main { background:
   transparent !important; }" rule was removed because it killed the
   intentional deep-abyss backdrop on .rd-chapters (homepage). The
   `body.rd-active` rule at the top of this file already replaces the dark
   `<body>` background with --rd-bone, which propagates to sections that
   don't set their own background. Sections that DO need a specific
   background (like .rd-chapters with --rd-abyss) keep theirs. Sections
   on inner pages that were dark via inline rules now get neutralised
   per-component by the rules below, not by a blanket override. */

/* contact.html — engagement cards + direct contact cards */
body.rd-active .opt-card,
body.rd-active .direct-card {
  background: var(--rd-paper) !important;
  border: var(--hairline-light) !important;
  color: var(--rd-ink) !important;
  border-radius: var(--rd-radius) !important;
}
body.rd-active .opt-card {
  padding: var(--s-block) !important;                /* 32 */
}
body.rd-active .opt-card:hover {
  border-color: rgba(15, 77, 92, 0.35) !important;
  background: var(--rd-bone) !important;
}
body.rd-active .opt-card.featured {
  background: linear-gradient(180deg, rgba(15, 77, 92, 0.06) 0%, var(--rd-paper) 65%) !important;
  border-left: 2px solid var(--rd-ocean) !important;
}
body.rd-active .opt-card .opt-num {
  font-family: var(--rd-mono) !important;
  color: var(--rd-ocean) !important;
  letter-spacing: var(--tr-caps-sm) !important;
  font-size: var(--fs-12) !important;
  margin-bottom: var(--s-related) !important;       /* 24 */
}
body.rd-active .opt-card h3 {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 500 !important;
  font-size: var(--fs-24) !important;
  letter-spacing: var(--tr-subhead) !important;
  line-height: var(--lh-subhead) !important;
  margin-bottom: var(--s-tight) !important;          /* 8 — pair with subtitle */
}
body.rd-active .opt-card .opt-sub {
  font-family: var(--rd-serif) !important;
  font-style: normal !important;                     /* no Fraunces italic per Pravin's veto */
  color: var(--rd-ink-soft) !important;
  font-size: var(--fs-16) !important;
  line-height: var(--lh-body) !important;
  margin-bottom: var(--s-pair) !important;           /* 16 */
}
body.rd-active .opt-card .opt-body {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink-soft) !important;
  font-size: var(--fs-14) !important;
  line-height: var(--lh-body) !important;
  margin-bottom: var(--s-related) !important;
}
body.rd-active .direct-card {
  padding: var(--s-related) !important;
}
body.rd-active .direct-card h4 {
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--tr-caps-sm) !important;
  color: var(--rd-ink-mute) !important;
  margin-bottom: var(--s-pair) !important;
}
body.rd-active .direct-card p {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink-soft) !important;
  font-size: var(--fs-14) !important;
  line-height: var(--lh-body) !important;
}
body.rd-active .direct-card p strong {
  color: var(--rd-ink) !important;
  font-weight: 500 !important;
}
body.rd-active .direct-card a {
  color: var(--rd-ocean) !important;
  border-bottom: 1px solid var(--rd-ocean) !important;
}

/* calculator.html — the legacy form/result UI uses .calc-* and various
   bespoke selectors. The form itself works; the visual chrome needs the
   bone canvas treatment so it doesn't read as a separate dark page. */
body.rd-active .calc-section,
body.rd-active .calc-card,
body.rd-active .calc-result {
  background: var(--rd-paper) !important;
  border: var(--hairline-light) !important;
  border-radius: var(--rd-radius) !important;
  color: var(--rd-ink) !important;
}
body.rd-active .calc-input-row label,
body.rd-active .calc-form label {
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
}
body.rd-active .calc-input-row input,
body.rd-active .calc-input-row select,
body.rd-active .calc-form input,
body.rd-active .calc-form select,
body.rd-active .calc-form textarea {
  background: var(--rd-bone) !important;
  border: var(--hairline-light) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
}
body.rd-active .calc-result h2,
body.rd-active .calc-result h3 {
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
}
body.rd-active .calc-eyebrow,
body.rd-active .calc-result .label {
  font-family: var(--rd-mono) !important;
  color: var(--rd-ink-mute) !important;
}
body.rd-active .calc-result .number,
body.rd-active .calc-result .num,
body.rd-active .calc-result .value {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink) !important;
  font-weight: 500 !important;
}

/* calculator.html — ACTUAL form-step selectors (calc-field, calc-step etc.) */
body.rd-active .calc-field,
body.rd-active .calc-step {
  background: transparent !important;
}
body.rd-active .calc-field input,
body.rd-active .calc-field select,
body.rd-active .calc-field textarea {
  background: var(--rd-paper) !important;
  border: var(--hairline-light) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-display) !important;
  font-size: var(--fs-16) !important;
  padding: var(--s-pair) var(--s-related) !important;
  border-radius: var(--rd-radius) !important;
}
body.rd-active .calc-field input::placeholder,
body.rd-active .calc-field textarea::placeholder {
  color: var(--rd-ink-mute) !important;
}
body.rd-active .calc-field input:focus,
body.rd-active .calc-field select:focus,
body.rd-active .calc-field textarea:focus {
  border-color: var(--rd-ocean) !important;
  outline: none !important;
}
body.rd-active .calc-field label,
body.rd-active .calc-field .label,
body.rd-active .calc-step label {
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--tr-caps-sm) !important;
  text-transform: uppercase !important;
  color: var(--rd-ink-mute) !important;
}
body.rd-active .calc-field .help,
body.rd-active .calc-field .helper,
body.rd-active .calc-field .hint {
  font-family: var(--rd-display) !important;
  color: var(--rd-ink-mute) !important;
  font-size: var(--fs-12) !important;
}
/* The "select a country" dropdown chevron and arrow on the buttons */
body.rd-active .calc-field svg,
body.rd-active .calc-step svg {
  color: var(--rd-ocean) !important;
  fill: currentColor !important;
}

/* Calculator step indicator pills */
body.rd-active .calc-progress,
body.rd-active .calc-progress-bar {
  background: transparent !important;
}
body.rd-active .calc-progress .step-bar,
body.rd-active .calc-progress-bar .seg {
  background: rgba(14, 26, 32, 0.10) !important;
}
body.rd-active .calc-progress .step-bar.active,
body.rd-active .calc-progress-bar .seg.active {
  background: var(--rd-ocean) !important;
}

/* CONTINUE button on each step */
body.rd-active .calc-cta,
body.rd-active .calc-step .btn,
body.rd-active .calc-continue {
  background: var(--rd-ink) !important;
  color: var(--rd-bone) !important;
  border: 1px solid var(--rd-ink) !important;
  border-radius: var(--rd-radius-pill) !important;
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;
  letter-spacing: var(--tr-caps-md) !important;
  text-transform: uppercase !important;
  padding: var(--s-pair) var(--s-related) !important;
}
body.rd-active .calc-cta:hover,
body.rd-active .calc-step .btn:hover,
body.rd-active .calc-continue:hover {
  background: var(--rd-ocean-deep) !important;
  border-color: var(--rd-ocean-deep) !important;
}

/* "PRESS ↵ TO CONTINUE" hint at the bottom of each step */
body.rd-active .calc-keyhint,
body.rd-active .calc-step .keyhint {
  color: var(--rd-ink-mute) !important;
  font-family: var(--rd-mono) !important;
  font-size: var(--fs-12) !important;
}
body.rd-active .calc-keyhint kbd,
body.rd-active .calc-step .keyhint kbd {
  background: var(--rd-ink) !important;
  color: var(--rd-bone) !important;
  border: 1px solid var(--rd-ink) !important;
  border-radius: 4px !important;
  font-family: var(--rd-mono) !important;
}

/* ----------------------------------------------------------------------------
   PILL NAV OVERLAP FIX — clear section anchors below the floating nav
   ----------------------------------------------------------------------------
   Previous handoff flagged that section headings pass under the floating
   pill nav on natural scroll. Two-part fix:
   1. scroll-margin-top on section anchors so jump-links stop short of the nav.
   2. The pill nav already has a backdrop blur, but increase its background
      opacity slightly so content scrolling under it reads as covered, not
      half-occluded.
   ---------------------------------------------------------------------------- */
body.rd-active section[id],
body.rd-active main h2,
body.rd-active main h3,
body.rd-active main .section-head,
body.rd-active main .rd-chapter,
body.rd-active main .page-hero,
body.rd-active main [class*="-band"] {
  scroll-margin-top: 96px;                          /* 12 × u — clears pill */
}
/* Pill backdrop intentionally removed — adaptive nav is transparent.
   The over-light vs over-dark colour flip on logo, links and CTA carries
   readability without any chrome. See section 3 for the adaptive rules. */

/* ----------------------------------------------------------------------------
   MOBILE PASS — repair v4 inversions for elements designed against dark
   backdrops, calm whitespace, and tighten italic Fraunces tracking.
   ---------------------------------------------------------------------------- */

/* 1. .process.new-way card was a dark inverted callout in the original site.
      In v4 it lands on the bone canvas; recolour text to ink and lift the
      card off the canvas so it reads as its own object. */
body.rd-active .process.new-way {
  background: var(--rd-paper) !important;
  border: 1px solid rgba(14, 26, 32, 0.08) !important;
}
body.rd-active .process.new-way .way-name {
  color: var(--rd-ink) !important;
}
body.rd-active .process.new-way .step-label,
body.rd-active .process.new-way .step .label {
  color: var(--rd-ink-soft) !important;
}

/* 2. FAQ italic Fraunces headings — were bone-coloured for a dark FAQ panel.
      Flip to ink and tighten tracking; italic Fraunces wants crisper kerning
      at 20px than the default. */
body.rd-active .faq-q > span:first-child {
  color: var(--rd-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.18 !important;
  font-feature-settings: "kern" 1, "calt" 1, "liga" 1 !important;
}
body.rd-active .faq-q .marker {
  color: var(--rd-ocean) !important;     /* was bone — keep oceanic accent */
}
body.rd-active .faq-a {
  color: var(--rd-ink-soft) !important;  /* was bone-mute — read on light */
}
body.rd-active .faq-item {
  border-top-color: rgba(14, 26, 32, 0.10) !important;  /* hairline on light */
}

/* (Stale mobile meta-band rules deleted — they were forcing the older
   2-col grid layout that conflicted with the new ledger composition.
   Mobile rules for the ledger live at line ~470.) */

/* SITEWIDE SECTION RHYTHM — one set of rules, applied at every viewport.
   Three compounding sources of dead space had to be tamed:
   a. Inline-CSS `section { padding: 96px 0 }` in each page's <style> block
   b. `.module-section` setting its own 96/96
   c. `<hr class="divider">` between sections with margin: 96px top AND bottom
   That stack landed as 384px gaps in some cases. We collapse to one rhythm. */
body.rd-active main > section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
body.rd-active main > section.rd-hero {
  padding: 0 !important;
}
body.rd-active main > section.photo-strip,
body.rd-active main > section.photo-strip-upper {
  padding: 0 !important;
}
body.rd-active .module-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
/* The 1px hairline divider sat with 96+96 = 192 of dead margin. Editorial
   tightening: 32 each side gives breath without breaking page rhythm. */
body.rd-active hr.divider {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

/* 4. Mobile whitespace — even tighter on phones. */
@media (max-width: 640px) {
  body.rd-active main > section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  body.rd-active main > section.rd-hero {
    padding: 0 !important;
  }
  body.rd-active main > section.photo-strip,
  body.rd-active main > section.photo-strip-upper {
    padding: 0 !important;
  }
  body.rd-active .module-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body.rd-active hr.divider {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  body.rd-active .rd-meta-band {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  body.rd-active .rd-chapters {
    /* Hero foot already leaves 64px below the Discover button — 32px here
       gives an effective ~96px section break that reads as rhythm rather
       than dead space. (Was 56px → ~120px gap.) */
    padding-top: 32px !important;
    padding-bottom: 56px !important;
  }
  body.rd-active .rd-chapter {
    margin-bottom: 40px !important;
    padding-top: 0 !important;
  }
  body.rd-active .rd-chapter:last-child {
    margin-bottom: 0 !important;
  }
}

/* 5. Chapter num overlap fix — at every size the num was `position: absolute`,
      which made it overlap with the chapter-tag pill on every viewport
      below the >=1280 gutter rule (and even at >=1280 the gutter rule was
      sitting it inside the chapter container, not the page gutter — still
      colliding). Force static positioning at all sizes; num flows naturally
      above the tag. */
body.rd-active .rd-chapter-num {
  position: static !important;
  margin-bottom: 14px !important;
  padding-top: 0 !important;
  left: auto !important;
}
body.rd-active .rd-chapter:first-child .rd-chapter-num {
  margin-top: 0 !important;
}

/* 6. Hero-meta value 9.3M tonnes still butts the column edge. Drop one more
      step and let the unit hug the digits. */
@media (max-width: 640px) {
  body.rd-active .rd-meta-band .hero-meta .v {
    font-size: 20px !important;
    letter-spacing: -0.015em !important;
  }
}

/* 7. Italic Fraunces "On your land. On our balance sheet."-style display
      pull-quotes — Fraunces italic at large size needs tighter tracking and
      better composition. The .subhead-l-italic / "Our system. Your output."
      register specifically. */
body.rd-active .subhead-l,
body.rd-active .subhead-l-italic,
body.rd-active [class*="balance-sheet"],
body.rd-active main p em,
body.rd-active main em {
  letter-spacing: -0.015em !important;
  font-feature-settings: "kern" 1, "calt" 1, "liga" 1, "dlig" 1 !important;
}

/* 8. Stat numbers (~RM1m etc.) — the RM prefix and M unit need to read
      together as one composed value, not three pieces glued. */
body.rd-active .stat .num {
  letter-spacing: -0.02em !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}
body.rd-active .stat .num .unit {
  font-size: 0.55em !important;
  margin-left: 1px !important;
  letter-spacing: 0 !important;
}

/* ============================================================================
   PREMIUM DRAWER — full-screen typographic takeover
   ----------------------------------------------------------------------------
   Replaces the generic right-side slide-in panel with a full-bleed bone canvas
   carrying display-grade nav (numbered editorial typography, hairline rules,
   stagger reveal on open) and a meta column with location, live time, contact.
   The argument: this is an instrument company, not a SaaS dashboard.
   ============================================================================ */
@media (max-width: 980px) {
  body.rd-active .mobile-drawer {
    inset: 0 !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: rgba(247, 243, 234, 0.0) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    transition:
      background 320ms var(--rd-ease-soft),
      backdrop-filter 320ms var(--rd-ease-soft),
      -webkit-backdrop-filter 320ms var(--rd-ease-soft) !important;
  }
  body.rd-active .mobile-drawer[aria-hidden="false"] {
    background: var(--rd-bone) !important;
    backdrop-filter: blur(28px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  }
  body.rd-active .mobile-drawer-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border-left: none !important;
    padding: 96px 28px 32px !important;
    transform: none !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    gap: 32px !important;
    position: relative !important;
  }

  /* Close affordance — mono caps "CLOSE" inside a hairline pill, not a generic × */
  body.rd-active .mobile-drawer-close {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: auto !important;
    height: auto !important;
    padding: 10px 18px !important;
    background: transparent !important;
    border: 1px solid rgba(14, 26, 32, 0.16) !important;
    border-radius: var(--rd-radius-pill) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: border-color 200ms var(--rd-ease-soft), background 200ms var(--rd-ease-soft) !important;
  }
  body.rd-active .mobile-drawer-close::before {
    content: 'CLOSE' !important;
    font-family: var(--rd-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--rd-ink) !important;
  }
  body.rd-active .mobile-drawer-close:hover {
    border-color: rgba(14, 26, 32, 0.32) !important;
    background: rgba(14, 26, 32, 0.04) !important;
  }

  /* Eyebrow above the nav — gives the takeover a register */
  body.rd-active .mobile-drawer-inner::before {
    content: 'Index — 06 entries' !important;
    position: absolute !important;
    top: 30px !important;
    left: 28px !important;
    font-family: var(--rd-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--rd-ink-mute) !important;
  }

  /* NAV — display-grade, numbered, hairline-bordered. Each row is a
     mono number + display label + arrow indicator. */
  body.rd-active .mobile-drawer nav {
    counter-reset: nav-item !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: end !important;
  }
  body.rd-active .mobile-drawer nav a {
    counter-increment: nav-item;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: baseline !important;
    column-gap: 18px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(14, 26, 32, 0.10) !important;
    font-family: var(--rd-display) !important;
    font-size: clamp(28px, 8.6vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: var(--rd-ink) !important;
    text-decoration: none !important;
    opacity: 0;
    transform: translateY(14px);
    transition: padding 200ms var(--rd-ease-soft), color 200ms var(--rd-ease-soft) !important;
  }
  body.rd-active .mobile-drawer nav a:first-child {
    border-top: 1px solid rgba(14, 26, 32, 0.10) !important;
  }
  body.rd-active .mobile-drawer nav a::before {
    content: counter(nav-item, decimal-leading-zero) !important;
    font-family: var(--rd-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--rd-ocean) !important;
    align-self: center !important;
    font-weight: 500 !important;
  }
  body.rd-active .mobile-drawer nav a::after {
    content: '↗' !important;
    font-family: var(--rd-mono) !important;
    font-size: 22px !important;
    color: rgba(14, 26, 32, 0.28) !important;
    transform: translateX(0) translateY(-2px);
    transition: transform 220ms var(--rd-ease-soft), color 220ms var(--rd-ease-soft) !important;
  }
  body.rd-active .mobile-drawer nav a:hover {
    padding-left: 8px !important;
  }
  body.rd-active .mobile-drawer nav a:hover::after,
  body.rd-active .mobile-drawer nav a:active::after {
    transform: translateX(6px) translateY(-2px);
    color: var(--rd-ocean) !important;
  }
  body.rd-active .mobile-drawer nav a.active,
  body.rd-active .mobile-drawer nav a[aria-current="page"] {
    color: var(--rd-ocean) !important;
  }
  body.rd-active .mobile-drawer nav a.active::after,
  body.rd-active .mobile-drawer nav a[aria-current="page"]::after {
    color: var(--rd-ocean) !important;
  }

  /* Stagger reveal on open — words rise into place rather than appearing flat */
  body.rd-active .mobile-drawer[aria-hidden="false"] nav a {
    animation: rd-nav-rise 520ms var(--rd-ease-soft) forwards;
  }
  body.rd-active .mobile-drawer[aria-hidden="false"] nav a:nth-child(1) { animation-delay: 120ms; }
  body.rd-active .mobile-drawer[aria-hidden="false"] nav a:nth-child(2) { animation-delay: 180ms; }
  body.rd-active .mobile-drawer[aria-hidden="false"] nav a:nth-child(3) { animation-delay: 240ms; }
  body.rd-active .mobile-drawer[aria-hidden="false"] nav a:nth-child(4) { animation-delay: 300ms; }
  body.rd-active .mobile-drawer[aria-hidden="false"] nav a:nth-child(5) { animation-delay: 360ms; }
  body.rd-active .mobile-drawer[aria-hidden="false"] nav a:nth-child(6) { animation-delay: 420ms; }

  @keyframes rd-nav-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* META — refined info ledger, two-row mono stack with CTA at bottom */
  body.rd-active .mobile-drawer-meta {
    border-top: 1px solid rgba(14, 26, 32, 0.10) !important;
    padding-top: 28px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 24px !important;
    margin-top: 0 !important;
    opacity: 0;
    animation: rd-meta-fade 600ms var(--rd-ease-soft) 480ms forwards;
  }
  body.rd-active .mobile-drawer[aria-hidden="false"] .mobile-drawer-meta {
    opacity: 0;
  }
  body.rd-active .mobile-drawer[aria-hidden="false"] .mobile-drawer-meta {
    animation: rd-meta-fade 600ms var(--rd-ease-soft) 480ms forwards;
  }
  body.rd-active .mobile-drawer-meta .rd-meta-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  body.rd-active .mobile-drawer-meta .rd-meta-row .k {
    font-family: var(--rd-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--rd-ink-mute) !important;
  }
  body.rd-active .mobile-drawer-meta .rd-meta-row .v {
    font-family: var(--rd-mono) !important;
    font-size: 12px !important;
    color: var(--rd-ink) !important;
    letter-spacing: 0.02em !important;
  }
  body.rd-active .mobile-drawer-tag {
    /* legacy hook — hidden, replaced by .rd-meta-row injected by JS */
    display: none !important;
  }

  body.rd-active .mobile-drawer-cta {
    grid-column: 1 / -1 !important;
    background: var(--rd-ink) !important;
    color: var(--rd-bone) !important;
    border-radius: var(--rd-radius-pill) !important;
    padding: 16px 24px !important;
    font-family: var(--rd-mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 200ms var(--rd-ease-soft) !important;
    align-self: stretch !important;
    margin-top: 8px !important;
  }
  body.rd-active .mobile-drawer-cta:hover {
    background: var(--rd-ocean) !important;
  }

  @keyframes rd-meta-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* When drawer is open, hide the floating capsule so it doesn't
     visually compete with the takeover. Burger flips to fixed close pos. */
  body.menu-open.rd-active .site-header { opacity: 0 !important; pointer-events: none !important; }
}