/* ==========================================================================
   FORA.SO HIGH-FIDELITY CLONE - CORE STYLESHEET
   Dark theme, glassmorphism, responsive grid, sticky stacking, GSAP triggers
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Inter (self-hosted)
   The Inter v20 variable WOFF2 files and @font-face rules Google Fonts served
   for `Inter:wght@300;400;500;600;700&display=swap`, copied byte-identical
   (only the URLs differ) so weight matching, subsets and swap behave exactly
   as before. Licence: fonts/inter/OFL.txt. File names carry the first eight
   hex digits of the file's SHA-256, so they can be cached as immutable.
   -------------------------------------------------------------------------- */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-ext-ca157063.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-71d5ee93.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-ext-6e9e020a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-1be3448e.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter/inter-v20-vietnamese-5c66f9e0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-ext-34b9c504.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-3100e775.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-ext-ca157063.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-71d5ee93.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-ext-6e9e020a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-1be3448e.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter/inter-v20-vietnamese-5c66f9e0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-ext-34b9c504.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-3100e775.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-ext-ca157063.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-71d5ee93.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-ext-6e9e020a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-1be3448e.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter/inter-v20-vietnamese-5c66f9e0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-ext-34b9c504.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-3100e775.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-ext-ca157063.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-71d5ee93.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-ext-6e9e020a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-1be3448e.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter/inter-v20-vietnamese-5c66f9e0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-ext-34b9c504.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-3100e775.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-ext-ca157063.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter/inter-v20-cyrillic-71d5ee93.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-ext-6e9e020a.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter/inter-v20-greek-1be3448e.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter/inter-v20-vietnamese-5c66f9e0.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-ext-34b9c504.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter/inter-v20-latin-3100e775.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. CSS Custom Properties / Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #0f0f0f;
  --bg-surface: #141414;
  --bg-surface-elevated: #1a1a1a;
  --bg-surface-hover: #222222;
  --bg-glass: rgba(18, 18, 18, 0.75);
  --bg-glass-card: rgba(24, 24, 24, 0.65);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-focus: rgba(255, 255, 255, 0.28);
  --border-pill: rgba(255, 255, 255, 0.12);

  --text-primary: #ededed;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --text-dim: #3a3a3a;

  --accent-teal: #177275;
  --accent-cyan: #5eead4;
  --accent-coral: #d39794;
  --accent-gold: #f59e0b;
  --accent-blue: #3b82f6;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --------------------------------------------------------------------
     The page frames. Every dense section is built on a 12-column grid
     inside one of these, with the annotation margin in columns 1-3 and the
     copy in 4-12; the frames set how wide that whole composition may run,
     never how it is arranged inside itself.

     On a wide monitor each frame holds the width the page was composed at.
     Through the laptop band the frame comes in from both edges instead, so
     a dense section keeps its measure and stays centred rather than
     reaching for the viewport. The clamp does this continuously - there is
     no step to cross while resizing - and the section gutters are
     unchanged, so nothing inside the frame moves relative to anything else.

       text      1180px at 1440w, opening to 1280px by 1540w
       artifact  1264px at 1440w, opening to 1280px by 1456w
       record    1264px at 1440w, opening to 1376px by 1552w

     Artifacts sit about 7% wider than text: a record or a plate is read by
     inspection and needs the room. That difference is the homepage decision
     record's own 1376/1280 relationship, carried across the site. The
     shared chrome - header, site close and footer - keeps its own width and
     is deliberately not framed by these. */
  --frame-text: clamp(1180px, 100vw - 260px, 1280px);
  --frame-artifact: clamp(1264px, 100vw - 176px, 1280px);
  --frame-record: clamp(1264px, 100vw - 176px, 1376px);

  --shadow-card: 0 20px 50px -10px rgba(0, 0, 0, 0.7);
  --shadow-floating: 0 30px 90px -20px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 255, 255, 0.02);
  --shadow-glow: 0 0 40px rgba(94, 234, 212, 0.15);

  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & Global Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.55;
  font-size: 15px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* <picture> only chooses the file (format, width); the <img> inside keeps
   laying out exactly as if it were the direct child. */
picture {
  display: contents;
}

.desktop-only {
  display: inline;
}

/* Exposed to assistive technology, removed from the visible composition. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. Common Components: Buttons & Badges
   -------------------------------------------------------------------------- */
.section-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-pill);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 20px;
  width: fit-content;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #888888;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--radius-pill);
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-pill-white {
  background-color: #ededed;
  color: #0a0a0a;
  padding: 10px 22px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.btn-pill-white:hover {
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

.btn-pill-blue {
  background-color: #2563eb;
  color: #ffffff;
  padding: 7px 16px;
  font-size: 13px;
  border-radius: var(--radius-pill);
}

.btn-pill-blue:hover {
  background-color: #1d4ed8;
}

.btn-lg {
  padding: 15px 38px;
  font-size: 16px;
}

.btn-sm {
  padding: 7px 16px;
  font-size: 13px;
}

.btn-xs {
  padding: 5px 12px;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   4. Global Header
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: 14px;
  left: -9999px;
  z-index: 1100;
  padding: 12px 20px;
  font-size: 14px;
  color: #ffffff;
  background: #0a0a0a;
  border: 1px solid var(--border-medium);
  border-radius: 2px;
}

.skip-link:focus-visible {
  left: 16px;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Transparent over the hero sky; the graphite ground only arrives once the
   reader has left the first viewport. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal);
}

.site-header.is-scrolled {
  background-color: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-subtle);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 32px;
}

/* Identity: the DataEnergy mark beside the wordmark. The mark keeps its own
   aspect ratio (height set, width auto); its height matches the wordmark's
   line box so the header row does not grow. */
.site-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.site-mark {
  display: block;
  height: 24px;
  width: auto;
  flex: 0 0 auto;
}

.wordmark {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav-link {
  font-size: 13.5px;
  font-weight: 450;
  letter-spacing: 0.005em;
  white-space: nowrap;
  color: rgba(237, 237, 237, 0.62);
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: #ffffff;
}

/* Compact (phone) disclosure. Text trigger, not an icon. */
.nav-disclosure {
  display: none;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  border: 1px solid var(--border-pill);
  border-radius: 2px;
}

.nav-disclosure:hover {
  border-color: var(--border-focus);
  color: #ffffff;
}

.compact-nav-panel {
  display: none;
  border-top: 1px solid var(--border-subtle);
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.compact-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 20px;
}

.compact-nav-link {
  padding: 14px 0;
  font-size: 15px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.compact-nav-link:last-child {
  border-bottom: none;
}

/* Compact navigation without scripting (release item R1). The Menu button
   needs script, so each page's <noscript> puts two plain links in its place:
   `Menu` opens the panel by address (#compact-nav, :target) and `Close`
   (#site-header) closes it. Scripted pages never render those links and
   never match these rules, so the scripted header is unchanged. */
@media (scripting: none) {
  .site-header-inner > noscript {
    display: contents;
  }

  button.nav-disclosure,
  .site-header:has(.compact-nav-panel:target) .nav-disclosure--open,
  .site-header:not(:has(.compact-nav-panel:target)) .nav-disclosure--close {
    display: none;
  }

  /* The button's own line box, so the link draws the same control. */
  a.nav-disclosure {
    line-height: normal;
  }
}

@media (scripting: none) and (max-width: 768px) {
  .compact-nav-panel:target {
    display: block;
  }

  /* No script sets .is-scrolled, so the open panel's header row takes that
     ground itself; page text never shows behind the wordmark. */
  .site-header:has(.compact-nav-panel:target) {
    background-color: rgba(10, 10, 10, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--border-subtle);
  }
}

/* The primary navigation carries six items. Measured against the header's
   identity, gap and gutters, the six no longer fit on one line below about
   850px, so the compact navigation — already the site's behaviour on phones —
   takes over from 879px down instead of 768px down. Only the navigation swaps
   here: every other rule in the 768px block (hero padding, gutters, the phone
   running heads) keeps its own breakpoint, so no page layout changes. */
@media (min-width: 769px) and (max-width: 879px) {
  .site-nav {
    display: none;
  }

  .nav-disclosure {
    display: block;
  }

  /* :not([hidden]) so the class rule never outranks the hidden attribute. */
  .compact-nav-panel:not([hidden]) {
    display: block;
  }
}

@media (scripting: none) and (min-width: 769px) and (max-width: 879px) {
  .compact-nav-panel:target {
    display: block;
  }

  /* No script sets .is-scrolled, so the open panel's header row takes that
     ground itself; page text never shows behind the wordmark. */
  .site-header:has(.compact-nav-panel:target) {
    background-color: rgba(10, 10, 10, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--border-subtle);
  }
}

/* The page whose hero is driven by the scroll position (ScrollTrigger, the
   homepage) cannot also be a smooth-scrolling scroller. While it refreshes —
   on resize, and when the tab is shown again after the viewport changed —
   ScrollTrigger scrolls the page to the top and back to take its
   measurements. With scroll-behavior: smooth those scrolls are animated, so
   they have not happened yet when it measures, and a refresh taken while the
   visitor is below the hero can record the hero's start and end shifted by
   the scroll position. The hero then sits past its own end and stays at its
   final transforms until the page is reloaded. Every other page keeps
   smooth scrolling. */
html.scroll-driven {
  scroll-behavior: auto;
}

/* --------------------------------------------------------------------------
   5. Hero Section & Multi-Layer Parallax Sandwich
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  padding-top: 258px;
  overflow: hidden;
  background-color: var(--bg-primary);
  /* Height of the parallax stage. Scales with width up to 1180px so the
     width-driven rock cutouts (42.4vw tall) never outgrow it on wide monitors. */
  --hero-stage-h: clamp(700px, 46vw, 1180px);
  /* All three hero plates are 3168x1344 (2.357:1) -> 42.43vw tall at 100% width. */
  --hero-plate-h: 42.43vw;
}

/* Far plane (H1). Width-driven like H2/H3 so it is NEVER cropped sideways:
   the plate is always shown edge to edge at every viewport width / browser
   zoom. The box coincides with the parallax stage; the image is shifted up so
   its horizon band (52% down the plate) lands ~90px below the stage top, i.e.
   just above the tablet (130px). The sky above spills up behind the headline.
   Top/bottom of the plate melt into the page via a mask. */
.hero-far-plane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hero-stage-h);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.hero-far-plane img {
  position: absolute;
  left: 0;
  top: calc(90px - 0.52 * var(--hero-plate-h));
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 62%, transparent 100%);
}
/* Pumpjack overlay: shares the H1 plate's box (same top offset, width and
   mask) so its viewBox maps 1:1 onto plate pixels. */
.hero-pumpjack {
  position: absolute;
  left: 0;
  top: calc(90px - 0.52 * var(--hero-plate-h));
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 62%, transparent 100%);
}

.hero-pumpjack .pj-steel  { fill: #0f0f12; }
.hero-pumpjack .pj-rod    { stroke: #0f0f12; stroke-width: 3.5; stroke-linecap: round; }
.hero-pumpjack .pj-bridle { stroke: #0f0f12; stroke-width: 2; stroke-linecap: round; }
.hero-pumpjack .pj-belt   { stroke: #0f0f12; stroke-width: 2; }
.hero-pumpjack .pj-lamp   { fill: #ffd28a; }
.hero-pumpjack .pj-halo   { fill: url(#pj-halo); }
.hero-pumpjack .pj-spill  { fill: url(#pj-halo); opacity: 0.6; }

/* Walking beam rocks about the Samson-post bearing; the crank spins once
   per stroke; the pitman counter-rotates so it stays on the crank pin.
   Pivots are in each group's local user units (the parent <g> translate),
   and the animated groups carry no SVG transform attribute of their own
   because the CSS transform would replace it. */
.hero-pumpjack .pj-beam,
.hero-pumpjack .pj-crank,
.hero-pumpjack .pj-pitman {
  transform-box: view-box;
  /* One shared duration = one full out-and-back rock (two strokes), so the
     crank's 360 deg turn stays locked to the beam by construction. */
  animation-duration: 5.6s;
  animation-iteration-count: infinite;
}

.hero-pumpjack .pj-beam {
  transform-origin: 0px -70px;
  animation-name: pj-rock;
  animation-timing-function: ease-in-out;
}

.hero-pumpjack .pj-crank {
  transform-origin: 0px 0px;
  animation-name: pj-spin;
  animation-timing-function: linear;
}

.hero-pumpjack .pj-pitman {
  transform-origin: 0px 0px;
  animation-name: pj-pitman;
  animation-timing-function: ease-in-out;
}

@keyframes pj-rock {
  0%   { transform: rotate(9deg); }
  50%  { transform: rotate(-9deg); }
  100% { transform: rotate(9deg); }
}

@keyframes pj-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pj-pitman {
  0%   { transform: rotate(-9deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(9deg); }
  75%  { transform: rotate(-10deg); }
  100% { transform: rotate(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pumpjack .pj-beam,
  .hero-pumpjack .pj-crank,
  .hero-pumpjack .pj-pitman {
    animation-play-state: paused;
  }
}

/* The covering statement sits on a left axis in the document column, so the
   four clauses can step and the right of the frame stays clear for the rig. */
.hero-content {
  position: relative;
  /* Lifts only the statement + CTA group. A relative offset leaves the flow
     alone, so the stage, tablet and plates below keep their positions. */
  top: -48px;
  z-index: 30;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}

/* Exact-language lock L2, currently set as four centred lines with no rules
   (trial). The stepped-and-ruled setting it replaces is noted in the report. */
.hero-spine {
  max-width: min(1000px, 100%);
  margin: 0 auto;
}

.spine-line {
  display: block;
  font-size: clamp(26px, 3.3vw, 48px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #f6f5f2;
  margin-bottom: 14px;
}

.spine-line:last-child {
  margin-bottom: 0;
}

.hero-actions {
  margin-top: 38px;
}

/* Primary signing field. A ruled field, not a pill: it should read as a place
   on a document, not as a sign-up button. */
.signing-field {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 24px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.006em;
  color: var(--text-primary);
  background: rgba(10, 12, 14, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.signing-field:hover,
.signing-field:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.055);
}

.signing-field-mark {
  opacity: 0.55;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.signing-field:hover .signing-field-mark,
.signing-field:focus-visible .signing-field-mark {
  opacity: 1;
  transform: translateX(3px);
}

/* 4-Layer Parallax Viewport */
.hero-parallax-container {
  position: relative;
  width: 100%;
  height: var(--hero-stage-h);
  overflow: hidden;
  margin-top: -50px;
}

/* Rock layers melt into the page at the bottom; the tablet stays crisp and is
   simply cut by the container edge, like the reference.
   H2's lower ~20% is masked away: H3 (rising faster than H2 on scroll) always
   covers that band, so it never peeks through H3's fade near the section
   boundary. */
.layer-2-midground {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 80%);
}

.hero-img-3 {
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}

/* Solid page-black base under H3. When H3 rides up on scroll, its faded bottom
   edge blends into this block instead of exposing H2/H1 beneath it. */
.layer-4-foreground::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  height: 90%;
  background: var(--bg-primary);
  z-index: 0;
}

.parallax-layer {
  position: absolute;
  left: 0;
  width: 100%;
  will-change: transform;
}

/* Common Parallax Image Base */
.parallax-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Layer 1 now lives on .hero-far-plane (see .hero-section). */
.layer-1-background {
  display: none;
}

/* Layer 2: Midground ridge cutout (H2, transparent PNG).
   Width-driven, natural aspect ratio -> never cropped or zoomed. */
.layer-2-midground {
  top: auto;
  bottom: 9%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.hero-img-2 {
  width: 100%;
  height: auto;
  object-fit: unset;
}

/* Layer 3: the device in the dip of the ridge.
   A physical object: graphite chassis, top rail, a stage rail on the left and
   the engineering visual inset as the main display. max-width is 1100px rather
   than 1060px so the rail can be added without shrinking the visual; the frame
   still lands within 5px of the approved height and keeps its approved top. */
.layer-3-product {
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 1100px;
  z-index: 10;
}

.device-frame {
  padding: 14px;
  background: linear-gradient(180deg, #161a1f 0%, #0c0f12 58%, #090b0d 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-shadow: 0 35px 110px -20px rgba(0, 0, 0, 0.95),
              0 0 40px rgba(255, 255, 255, 0.03),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.device-inner {
  overflow: hidden;
  background: #0d1013;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
}

.device-rail {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background: #151a1f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.device-rail-title {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 237, 237, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --stage-w is the rail's reference width; the rail is drawn 1.5x that. The
   screen keeps the height it had beside a reference-width rail, so widening
   the rail never changes the tablet's outer size (see .engineering-motion-screen). */
.device-body {
  --stage-w: 124px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: calc(var(--stage-w) * 1.5) 1fr;
}

/* The stages of the governed-decision record, as a framing rail. Typography
   and rules only: no values, counters, states, identities or controls. */
.device-stages {
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  background: #111519;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.device-stage {
  position: relative;
  padding: 9px 12px 9px 16px;
  font-size: 11.5px;
  letter-spacing: 0.012em;
  color: rgba(237, 237, 237, 0.4);
  white-space: nowrap;
}

/* Recommendation is the view this visualization shows: a proposal. */
.device-stage.is-current {
  color: rgba(237, 237, 237, 0.92);
  background: rgba(255, 255, 255, 0.04);
}

.device-stage.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: #5fbfc4;
}

/* Everything past the recommendation is still ahead of it. The rule keeps
   Governance and Authorization visibly separate stages. */
.device-stage--pending {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* The display area. Its height is what the image's aspect ratio gave it
   beside a reference-width rail, so the tablet keeps its outer size. The
   image covers the slightly narrower box (a thin strip trimmed from each
   side) and the SVG overlay uses the matching fit (xMidYMid slice), so the
   two share one mapping and can never drift apart at any width.
   aspect-ratio is the fallback where container units are unsupported. */
.engineering-motion-screen {
  position: relative;
  aspect-ratio: 1672 / 941;
  height: calc((100cqw - var(--stage-w)) * 941 / 1672);
  overflow: hidden;
  background: #0b0d0f;
}

.engineering-motion-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.engineering-motion-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Guides carry the geometry and are never painted. */
.em-path {
  fill: none;
  stroke: none;
}

/* Short warm tails, cloned from the guides so they are path-aligned by
   construction. script.js drives the dash offset; opacity is its own tween. */
.em-tail {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
}

.em-tail-soft {
  stroke: #E5AD49;
  stroke-width: 7;
}

.em-tail-core {
  stroke: #F3C468;
  stroke-width: 2.4;
}

/* Development aid only: script.js adds .em-debug when DEBUG_ENGINEERING_PATHS
   is true. It is false in the shipped file, so nothing here ever renders. */
.em-debug .em-path {
  stroke: #ff2d9b;
  stroke-width: 2;
  stroke-dasharray: 8 6;
}

/* Layer 4: Foreground strata shelf cutout (H3, transparent PNG).
   Width-driven; starts lower so only the shoulders wrap the tablet's
   lower third, then rides up over it on scroll. */
.layer-4-foreground {
  top: auto;
  bottom: -25%;
  height: auto;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
  transition: opacity 0.4s ease;
}

.hero-img-3 {
  width: 100%;
  height: auto;
  object-fit: unset;
  /* The approved plate is 3172x1345. Pinned so the responsive files, whose
     heights must round to whole pixels, can never move the plate. */
  aspect-ratio: 3172 / 1345;
}

/* --------------------------------------------------------------------------
   6. Homepage Clause 1 — The operational problem (Phase 1C, proposed)
   Editorial mode. Page ground, not a panel: no border, no radius, no rule.
   The hero already melts its strata into #0a0a0a over its own last ~160px,
   so the ground starts on exactly that value, lifts only slightly toward
   graphite, and the top padding stays short: the hero's fade is the pause.
   It settles back to #0a0a0a at the bottom so no edge reads as a box.
   Static on purpose: the hero carries the motion, this carries the argument.
   -------------------------------------------------------------------------- */
.op-clause {
  --op-ink: #f6f5f2;
  --op-ink-lede: rgba(246, 245, 242, 0.74);
  --op-ink-body: rgba(246, 245, 242, 0.62);
  --op-ink-label: #9c968b;
  position: relative;
  padding: clamp(24px, 2.8vw, 40px) 0 clamp(120px, 11vw, 176px);
  background: linear-gradient(180deg, #0a0a0a 0%, #0d0e10 32%, #0d0e10 72%, #0a0a0a 100%);
}

/* Same column as the header and the hero, so the margin label sits on the
   wordmark's left edge. */
.op-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 32px;
}

/* Annotation margin. Sentence case, quiet, top-aligned to the H2's first
   line rather than floating above it. */
.op-label {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-top: 0.95em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--op-ink-label);
}

/* The one display object. Larger than the hero spine but a weight lighter,
   so it holds the section without restating the hero's voice. */
.op-heading {
  grid-column: 4 / -1;
  grid-row: 1;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--op-ink);
  text-wrap: balance;
}

.op-heading-line {
  display: block;
}

.op-lede {
  grid-column: 4 / span 6;
  margin-top: clamp(28px, 2.8vw, 40px);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--op-ink-lede);
  text-wrap: balance;
}

/* The body steps in one column from the lede: the argument moves inward
   before the conclusion steps back out to the heading's edge. */
.op-body {
  grid-column: 5 / span 6;
  max-width: 54ch;
  margin-top: clamp(40px, 4vw, 56px);
  font-size: 17px;
  line-height: 1.68;
  color: var(--op-ink-body);
  text-wrap: pretty;
}

/* The conclusion: emphasis by position, scale and contrast only. */
.op-conclusion {
  grid-column: 4 / span 7;
  margin-top: clamp(56px, 5.6vw, 84px);
  font-size: clamp(22px, 2.05vw, 30px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--op-ink);
  text-wrap: balance;
}

@media (max-width: 1100px) {
  .op-label   { grid-column: 1 / span 2; }
  .op-heading { grid-column: 3 / -1; }
  .op-lede    { grid-column: 3 / span 8; }
  .op-body    { grid-column: 4 / span 8; }
  .op-conclusion { grid-column: 3 / span 9; }
}

/* Below tablet the margin can no longer hold the label beside the heading,
   so it moves into the flow above it and the steps flatten to one edge. */
@media (max-width: 899px) {
  .op-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 32px;
  }

  .op-label,
  .op-heading,
  .op-lede,
  .op-body,
  .op-conclusion {
    grid-column: 1;
    grid-row: auto;
  }

  .op-label {
    padding-top: 0;
    margin-bottom: 20px;
  }

  .op-heading {
    max-width: 17em;
    font-size: clamp(34px, 5.2vw, 48px);
  }

  .op-lede    { max-width: 34em; }
  .op-conclusion { max-width: 26em; }
}

@media (max-width: 640px) {
  .op-clause {
    padding: 28px 0 96px;
  }

  .op-grid {
    padding: 0 24px;
  }

  .op-label {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .op-heading {
    font-size: clamp(30px, 8.6vw, 36px);
    line-height: 1.1;
  }

  .op-lede {
    margin-top: 22px;
    font-size: 18px;
  }

  .op-body {
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.65;
  }

  .op-conclusion {
    margin-top: 40px;
    font-size: 21px;
    line-height: 1.38;
  }
}

/* --------------------------------------------------------------------------
   6B. Homepage Shelf 03 — Artifact: what a governed decision is (Phase 1D)
   The record as two peer issue cards in the site's own dark card language:
   lifted graphite surfaces, subtle borders, the site's radii and shadows.
   Disclosure is native <details>, so every word is reachable without
   scripting, in print and by keyboard. Fields 3, 4 and 6 — the ones that
   carry the comparison — are open at first paint, and Authorization is not
   collapsible at all: its blank and the line saying why it is blank are
   always on the surface. Nothing here implies a live system.
   Every selector is scoped to .gd-* / .rc-*.
   -------------------------------------------------------------------------- */
.gd-clause {
  --gd-ink: #f6f5f2;
  --gd-ink-lede: rgba(246, 245, 242, 0.74);
  --gd-ink-label: #9c968b;
  /* Card material */
  --rc-surface-top: #171a1e;
  --rc-surface-bottom: #101316;
  --rc-border: rgba(255, 255, 255, 0.11);
  --rc-hairline: rgba(255, 255, 255, 0.07);
  --rc-ink: #f2f1ee;
  --rc-ink-2: rgba(242, 241, 238, 0.62);
  --rc-ink-3: rgba(242, 241, 238, 0.42);
  --rc-withheld: #e5ad49;
  --rc-withheld-soft: rgba(229, 173, 73, 0.72);
  --rc-pad: 30px;
  position: relative;
  padding: 8px 0 clamp(120px, 11vw, 168px);
  background: linear-gradient(180deg, #0a0a0a 0%, #0d0f11 26%, #0e1013 62%, #0a0a0a 100%);
}

.gd-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 32px;
}

.gd-label {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-top: 0.7em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--gd-ink-label);
}

/* Text is the quieter quarter of this shelf; the artifact is the event. */
.gd-heading {
  grid-column: 4 / -1;
  grid-row: 1;
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--gd-ink);
}

.gd-lede {
  grid-column: 4 / span 7;
  margin-top: 18px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.006em;
  color: var(--gd-ink-lede);
}

/* ---- The artifact ------------------------------------------------------- */
.rc-figure {
  max-width: var(--frame-record);
  margin: clamp(36px, 3.6vw, 56px) auto 0;
  padding: 0 32px;
}

.rc-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.rc-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--rc-surface-top) 0%, var(--rc-surface-bottom) 100%);
  border: 1px solid var(--rc-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  scroll-margin-top: 96px;
  transition: transform var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              background-color var(--transition-normal);
}

.rc-card:hover,
.rc-card:focus-within {
  transform: translateY(-3px) scale(1.003);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 40px 110px -28px rgba(0, 0, 0, 0.92),
              0 0 0 1px rgba(255, 255, 255, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 255, 255, 0.012);
}

/* The amber issue firms up in its own family. */
.rc-card--withheld:hover,
.rc-card--withheld:focus-within {
  border-color: rgba(229, 173, 73, 0.34);
  box-shadow: 0 40px 110px -28px rgba(0, 0, 0, 0.92),
              0 0 0 1px rgba(229, 173, 73, 0.07),
              inset 0 1px 0 rgba(229, 173, 73, 0.1);
  background-color: rgba(229, 173, 73, 0.014);
}

/* Reduced motion keeps the emphasis, drops the movement. */
@media (prefers-reduced-motion: reduce) {
  .rc-card {
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  }

  .rc-card:hover,
  .rc-card:focus-within,
  .rc-card--withheld:hover,
  .rc-card--withheld:focus-within {
    transform: none;
  }
}

/* Issue A is the neutral, resolved issue of the record and keeps the card's
   own ink. Issue B is the amber issue: every line of type on that card sits
   in one warm family, graded by role rather than by hue, so the card still
   reads as a dark premium artifact and not as a warning panel. */
.rc-card--made {
  --rc-title: var(--rc-ink);
  --rc-field-name: var(--rc-ink);
  --rc-spine: var(--rc-ink-2);
  --rc-caret: var(--rc-ink-3);
  --rc-value: var(--rc-ink);
}

.rc-card--withheld {
  --rc-title: #f0bd63;
  --rc-field-name: #e5ad49;
  --rc-spine: rgba(229, 173, 73, 0.82);
  --rc-caret: rgba(229, 173, 73, 0.72);
  --rc-value: #e5ad49;
  /* The card's own ink scale, in amber */
  --rc-ink: #e5ad49;
  --rc-ink-2: rgba(217, 161, 60, 0.9);
  --rc-ink-3: rgba(217, 161, 60, 0.72);
  color: var(--rc-ink);
}

/* Structure on issue B follows the same warm family, kept low in contrast. */
.rc-card--withheld .rc-field,
.rc-card--withheld .rc-plate {
  border-top-color: rgba(229, 173, 73, 0.16);
}

.rc-card--withheld .rc-cut {
  border-top-color: rgba(229, 173, 73, 0.34);
  background: linear-gradient(180deg, rgba(229, 173, 73, 0.07) 0%, rgba(229, 173, 73, 0) 100%);
}

.rc-card--withheld .rc-cut-label::after {
  background: linear-gradient(90deg, rgba(229, 173, 73, 0.38), rgba(229, 173, 73, 0));
}

.rc-card--withheld .rc-fields {
  background: rgba(0, 0, 0, 0.2);
}

.rc-card--withheld .rc-field--after {
  background: rgba(229, 173, 73, 0.035);
}

.rc-card--withheld .rc-plate {
  background: rgba(229, 173, 73, 0.05);
}

.rc-card--withheld .rc-disc > .rc-row:hover {
  background-color: rgba(229, 173, 73, 0.06);
}

.rc-card--withheld .rc-surface--blank,
.rc-card--withheld .rc-blank {
  border-bottom-color: rgba(229, 173, 73, 0.62);
}

.rc-card--withheld .rc-plate-name {
  color: #f0bd63;
}

/* ---- Card head ---------------------------------------------------------- */
.rc-head {
  padding: 26px var(--rc-pad) 22px;
}

.rc-card p {
  margin: 0;
}

.rc-issue {
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--rc-title);
}

.rc-issue-key {
  font-weight: 700;
}

.rc-peer {
  margin-top: 12px !important;
  max-width: 48ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

.rc-card--withheld .rc-peer,
.rc-card--withheld .rc-entry,
.rc-card--withheld .rc-caption,
.rc-card--withheld .rc-cut-note,
.rc-card--withheld .rc-plate-line,
.rc-card--withheld .rc-plate-party {
  color: var(--rc-ink-2);
}

.rc-card--withheld .rc-cut-label {
  color: #f0bd63;
}

.rc-card--withheld .rc-num,
.rc-card--withheld .rc-party {
  color: var(--rc-ink-3);
}

.rc-card--withheld .rc-struck s {
  color: rgba(217, 161, 60, 0.66);
}

.rc-peer-nav {
  margin-top: 10px !important;
  font-size: 13px;
  line-height: 1.4;
}

.rc-peer-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
}

.rc-peer-link:hover {
  text-decoration-color: currentColor;
}

/* Issue A points at the amber issue, so its cross-reference is amber. */
.rc-card--made .rc-peer-link {
  color: rgba(229, 173, 73, 0.92);
}

.rc-card--made .rc-peer-link:hover {
  color: #f0bd63;
}

/* Issue B points at the neutral issue, so its cross-reference is light. */
.rc-card--withheld .rc-peer-link {
  color: rgba(242, 241, 238, 0.86);
}

.rc-card--withheld .rc-peer-link:hover {
  color: #f6f5f2;
}

.rc-peer-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Fields ------------------------------------------------------------- */
/* An inset panel inside the card, so head, fields and plate read as three
   parts of one object rather than one flat surface. */
.rc-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.16);
}

.rc-field {
  border-top: 1px solid var(--rc-hairline);
}

.rc-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 14px;
  grid-template-areas:
    "num name    party toggle"
    "num surface party toggle";
  align-items: baseline;
  column-gap: 14px;
  row-gap: 7px;
  padding: 16px var(--rc-pad) 17px;
  list-style: none;
}

.rc-num     { grid-area: num; }
.rc-name    { grid-area: name; }
.rc-party   { grid-area: party; }
.rc-surface { grid-area: surface; }
.rc-toggle  { grid-area: toggle; }

.rc-disc > .rc-row {
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.rc-disc > .rc-row::-webkit-details-marker {
  display: none;
}

.rc-disc > .rc-row:hover {
  background-color: rgba(255, 255, 255, 0.035);
}

.rc-disc > .rc-row:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: -2px;
}

.rc-num {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rc-ink-3);
}

.rc-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--rc-field-name);
}

/* The party column names who acts. Where it reproduces a clause of the
   spine it is set heavier than Evidence / Outcome. */
.rc-party {
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
  color: var(--rc-ink-3);
}

.rc-party--spine {
  font-weight: 600;
  color: var(--rc-spine);
}

/* The state a closed row still has to carry, so the two issues are never
   indistinguishable before a click. */
.rc-surface {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  align-self: center;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--rc-value);
}

.rc-surface--made {
  font-weight: 500;
}

/* Withheld: the word itself, plus italics and a broken rule under it. The
   warm ink only supports those cues; it never carries the state alone. */
.rc-surface--withheld {
  padding-left: 12px;
  padding-bottom: 6px;
  border-left: 2px dashed var(--rc-withheld);
  border-bottom: 1px dashed rgba(229, 173, 73, 0.55);
  font-style: italic;
  font-weight: 600;
}

/* Authorization, closed: a short unsigned rule. Nothing is printed on it. */
.rc-surface--blank {
  width: min(210px, 70%);
  height: 20px;
  border-bottom: 1.5px solid rgba(242, 241, 238, 0.42);
}

/* A drawn caret, rotating on open. */
.rc-toggle {
  position: relative;
  align-self: center;
  width: 14px;
  height: 14px;
}

.rc-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--rc-caret);
  border-bottom: 1.5px solid var(--rc-caret);
  transform: rotate(45deg);
  transition: transform var(--transition-normal), border-color var(--transition-fast);
}

.rc-disc[open] > .rc-row .rc-toggle::before {
  transform: rotate(-135deg);
}

.rc-disc > .rc-row:hover .rc-toggle::before {
  border-color: var(--rc-ink);
}

.rc-detail {
  padding: 0 var(--rc-pad) 20px calc(var(--rc-pad) + 24px + 14px);
}

.rc-entry {
  /* The card runs full width below the side-by-side breakpoint, so the
     measure is capped rather than left to the card. */
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--rc-ink);
  text-wrap: pretty;
}

.rc-caption {
  margin-top: 10px !important;
  max-width: 68ch;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--rc-ink-3);
  text-wrap: pretty;
}

/* Governance, issue A: the printed pair with one member struck, kept on the
   closed surface so the determination needs no click. */
.rc-taken {
  font-weight: 600;
}

.rc-struck s {
  text-decoration-thickness: 1.5px;
  color: var(--rc-ink-3);
}

/* Authorization, open: the drawn countersignature field at full height.
   Blank on purpose, at every width. Nothing on the site can fill it. */
.rc-blank {
  height: 62px;
  border-bottom: 1.5px solid rgba(242, 241, 238, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.025) 100%);
}

/* ---- The moment-of-decision cut ---------------------------------------- */
.rc-cut {
  padding: 20px var(--rc-pad) 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
}

.rc-cut-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rc-ink);
}

.rc-cut-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}

.rc-cut-note {
  margin-top: 8px !important;
  max-width: 72ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

/* Everything after the cut sits on a slightly different tone. */
.rc-field--after {
  border-top: 0;
  background: rgba(255, 255, 255, 0.022);
}

/* ---- Identity plate ----------------------------------------------------- */
.rc-plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name  party"
    "line  party";
  align-items: center;
  column-gap: 20px;
  padding: 20px var(--rc-pad) 22px;
  border-top: 1px solid var(--rc-border);
  background: rgba(255, 255, 255, 0.04);
}

.rc-plate p {
  margin: 0;
}

.rc-plate-name {
  grid-area: name;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--rc-ink);
}

.rc-plate-line {
  grid-area: line;
  margin-top: 5px !important;
  max-width: 44ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rc-ink-2);
}

.rc-plate-party {
  grid-area: party;
  max-width: 11em;
  padding-left: 20px;
  border-left: 1px solid var(--rc-border);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  color: var(--rc-ink-2);
}

/* ---- Disclosure motion: height only, brief, and off under reduced motion */
@supports (interpolate-size: allow-keywords) {
  .gd-clause {
    interpolate-size: allow-keywords;
  }

  .rc-disc::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease,
                content-visibility 0.26s allow-discrete;
  }

  .rc-disc[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-disc::details-content,
  .rc-disc[open]::details-content {
    transition: none;
  }

  .rc-toggle::before {
    transition: none;
  }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .gd-label   { grid-column: 1 / span 2; }
  .gd-heading { grid-column: 3 / -1; }
  .gd-lede    { grid-column: 3 / span 9; }
}

/* Below this the two cards cannot both hold a comfortable measure, so they
   stack: issue A, then issue B, each at full width. */
@media (max-width: 979px) {
  .rc-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .rc-figure {
    max-width: 1280px;
  }
}

@media (max-width: 899px) {
  .gd-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gd-label,
  .gd-heading,
  .gd-lede {
    grid-column: 1;
    grid-row: auto;
  }

  .gd-label {
    padding-top: 0;
    margin-bottom: 18px;
  }

  .gd-lede {
    max-width: 34em;
  }
}

/* Phone: the party takes its own line under the field name, so neither
   crushes the other and the entry keeps the card's full width. */
@media (max-width: 640px) {
  .gd-clause {
    --rc-pad: 20px;
    padding-bottom: 96px;
  }

  .gd-grid {
    padding: 0 24px;
  }

  .rc-figure {
    padding: 0 16px;
  }

  .gd-heading {
    font-size: clamp(27px, 7.6vw, 32px);
  }

  .gd-lede {
    font-size: 17px;
  }

  .rc-card {
    border-radius: var(--radius-lg);
  }

  .rc-row {
    grid-template-columns: 20px minmax(0, 1fr) 14px;
    grid-template-areas:
      "num name    toggle"
      "num party   toggle"
      "num surface toggle";
    align-items: start;
    column-gap: 12px;
    row-gap: 4px;
  }

  .rc-num { padding-top: 3px; }
  .rc-party { text-align: left; }
  .rc-surface { align-self: start; margin-top: 3px; font-size: 16px; }
  .rc-toggle { align-self: start; margin-top: 2px; }

  .rc-detail {
    padding-left: calc(var(--rc-pad) + 20px + 12px);
    padding-right: var(--rc-pad);
  }

  .rc-entry {
    font-size: 16px;
  }

  .rc-blank {
    height: 52px;
  }

  .rc-plate {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "line" "party";
  }

  .rc-plate-party {
    max-width: none;
    margin-top: 12px !important;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rc-border);
    text-align: left;
  }
}

/* Print: every field open, no card lift, each card kept whole. */
@media print {
  .gd-clause {
    background: none;
  }

  .rc-card {
    box-shadow: none;
    break-inside: avoid;
  }

  .rc-disc::details-content {
    height: auto;
    opacity: 1;
    content-visibility: visible;
  }

  .rc-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6C. Homepage Shelf 03 tail — Governed Bit Intervention hand-off (Phase 1E)
   The compact close of the artifact shelf: it names the first application,
   carries the surface's only maturity stamp, hands off to the depth page and
   lifts the ground toward Shelf 04. No card, no figure, no imagery, no
   motion — the artifact above stays the shelf's one visual event.
   Its own section, so the locked artifact shelf's height, ground and padding
   are untouched. Every selector is scoped to .gbi-*.
   -------------------------------------------------------------------------- */
.gbi-handoff {
  --gbi-ink: #f6f5f2;
  --gbi-ink-2: rgba(246, 245, 242, 0.72);
  --gbi-ink-3: rgba(246, 245, 242, 0.58);
  --gbi-label: #9c968b;
  position: relative;
  /* No top padding of its own: the locked artifact shelf already closes on
     ~158px of ground, and that separation is the drop in intensity. */
  padding: 0 0 clamp(104px, 9vw, 150px);
  /* Continuous with the artifact shelf's closing #0a0a0a, then lifted at the
     foot so Shelf 04's charcoal ground arrives as an intended step, not a
     seam. */
  background: linear-gradient(180deg, #0a0a0a 0%, #0b0c0d 46%, #101113 100%);
}

.gbi-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Row 1 hugs the margin block, so the cross-reference sits directly under
     the stamp instead of floating down the column. */
  grid-template-rows: min-content 1fr;
  column-gap: 32px;
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Annotation margin: label, stamp, cross-reference ------------------- */
.gbi-margin {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-top: 0.5em;
}

.gbi-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--gbi-label);
}

/* The site's only badge treatment: maturity, not marketing. Outlined, no
   fill, no colour coding, nothing that could read as a live state. */
.gbi-stamp {
  margin: 14px 0 0;
}

.gbi-stamp span {
  display: inline-block;
  padding: 4px 9px 4px 10px;
  border: 1px solid rgba(246, 245, 242, 0.26);
  border-radius: 2px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--gbi-ink-2);
}

/* Margin cross-reference: a block link into the depth page, never a second
   signing field. It sits in the margin beneath the stamp on desktop and, in
   the DOM, after the clause — so when the margin folds into the flow the
   hand-off arrives where a reader expects it, at the end. */
.gbi-xref {
  grid-column: 1 / span 3;
  grid-row: 2;
  align-self: start;
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gbi-xref a {
  display: block;
  max-width: 20em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.004em;
  color: var(--gbi-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  transition: text-decoration-color var(--transition-fast);
}

.gbi-xref a:hover {
  text-decoration-color: currentColor;
}

.gbi-xref a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- The clause ---------------------------------------------------------- */
.gbi-main {
  grid-column: 4 / span 8;
  grid-row: 1 / span 2;
}

/* Smaller than the artifact's heading: this shelf has already had its event. */
.gbi-heading {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(25px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--gbi-ink);
}

.gbi-lede {
  margin: 20px 0 0;
  max-width: 52ch;
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--gbi-ink-2);
  text-wrap: pretty;
}

.gbi-body {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--gbi-ink-3);
  text-wrap: pretty;
}

/* A calm operational boundary, set as a sentence: no frame, no rule, no
   badge, no alert colour. Given space and a little more ink than the body so
   it is read, not skipped. */
.gbi-boundary {
  margin: 26px 0 0;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--gbi-ink);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .gbi-margin { grid-column: 1 / span 2; }
  .gbi-main   { grid-column: 3 / span 10; }
  .gbi-xref   { grid-column: 1 / span 2; }
}

/* The margin can no longer sit beside the clause: label and stamp move into
   the flow above it, and the cross-reference follows the boundary line. */
@media (max-width: 899px) {
  .gbi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gbi-margin,
  .gbi-main,
  .gbi-xref {
    grid-column: 1;
    grid-row: auto;
  }

  /* Label and stamp share one line above the clause. */
  .gbi-margin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 0;
    margin-bottom: 20px;
  }

  .gbi-stamp {
    margin: 0;
  }

  .gbi-xref {
    margin-top: 28px;
    padding-top: 0;
    border-top: 0;
  }

  .gbi-xref a {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .gbi-handoff {
    padding-bottom: 88px;
  }

  .gbi-grid {
    padding: 0 24px;
  }

  .gbi-heading {
    font-size: clamp(23px, 6.6vw, 28px);
    max-width: none;
  }

  .gbi-lede {
    margin-top: 16px;
    font-size: 17px;
  }

  .gbi-body {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.62;
  }

  .gbi-boundary {
    margin-top: 22px;
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   6D. Homepage Shelf 04 — Portfolio: existing products (Phase 1F)
   A new register after the deep artifact shelf: the ground lifts to charcoal
   and three independent product objects sit on it. They share one outer
   grammar — surface, radius, line weight, type scale, one restrained accent —
   and each carries a different artifact geometry: horizontal transformation,
   relational grounding, time-directional forecast. Nothing is drawn between
   them. Links only; no motion beyond the hover/focus response.
   Every selector is scoped to .pf-*.
   -------------------------------------------------------------------------- */
.pf-shelf {
  --pf-ink: #f4f3f0;
  --pf-ink-2: rgba(244, 243, 240, 0.7);
  --pf-ink-3: rgba(244, 243, 240, 0.54);
  --pf-label: #9c968b;
  /* Object material: a step above the ground, never the artifact cards'
     deep graphite. */
  --pf-surface-top: #1e2125;
  --pf-surface-bottom: #1a1c20;
  --pf-border: rgba(255, 255, 255, 0.085);
  --pf-hairline: rgba(255, 255, 255, 0.075);
  /* Schematic line language, shared by all three artifacts. */
  --pf-line: rgba(244, 243, 240, 0.22);
  --pf-line-strong: rgba(244, 243, 240, 0.5);
  --pf-bar: rgba(244, 243, 240, 0.13);
  --pf-bar-strong: rgba(244, 243, 240, 0.4);
  --pf-trace: #8cc7bc;
  position: relative;
  padding: clamp(56px, 5vw, 76px) 0 clamp(96px, 8.5vw, 132px);
  /* Continues from the hand-off's lifted #101113 foot, settles on lifted
     charcoal, and eases back slightly at the foot so the text-led shelf that
     follows inherits less weight. */
  background: linear-gradient(180deg, #101113 0%, #15171a 16%, #181a1d 52%, #16181b 100%);
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: var(--frame-artifact);
  margin: 0 auto;
  padding: 0 32px;
}

.pf-label {
  grid-column: 1 / span 3;
  grid-row: 1;
  margin: 0;
  padding-top: 0.6em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--pf-label);
}

.pf-heading {
  grid-column: 4 / -1;
  grid-row: 1;
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--pf-ink);
}

.pf-lede {
  grid-column: 4 / span 7;
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--pf-ink-2);
  text-wrap: pretty;
}

/* ---- The strip ----------------------------------------------------------- */
/* Rows are shared through subgrid, so names, lines, contributions and
   actions align across the three objects at wide desktop. */
.pf-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0 24px;
  max-width: var(--frame-artifact);
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
}

.pf-item {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 0 28px 26px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pf-surface-top) 0%, var(--pf-surface-bottom) 100%);
  border: 1px solid var(--pf-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* Restrained response on the object as a whole: edge, shadow, 2px. The
   artifact does not move or change. Keyboard focus inside gets the same. */
.pf-item:hover,
.pf-item:focus-within {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow: 0 32px 76px -34px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .pf-item {
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  }

  .pf-item:hover,
  .pf-item:focus-within {
    transform: none;
  }
}

/* ---- Product focus selector ------------------------------------------- */
/* Toggle buttons, one over each object's column: a focus control, not tabs.
   Nothing is hidden or replaced when one is pressed. */
.pf-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--frame-artifact);
  margin: clamp(40px, 4vw, 60px) auto 0;
  padding: 0 32px;
}

.pf-selector[hidden] {
  display: none;
}

.pf-select {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 20px;
  text-align: left;
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--pf-ink-3);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
}

/* Pressed state is carried by the mark's shape (open ring / filled dot) and
   by weight of edge and ink, not by colour alone. */
.pf-select-mark {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.8;
}

.pf-select:hover {
  color: var(--pf-ink-2);
  border-color: rgba(255, 255, 255, 0.15);
}

.pf-select[aria-pressed="true"] {
  color: var(--pf-ink);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}

.pf-select[aria-pressed="true"] .pf-select-mark {
  background: currentColor;
  opacity: 1;
}

.pf-select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

/* ---- Portfolio stage ----------------------------------------------------- */
/* One large atmospheric frame the three independent objects sit inside —
   a showcase, not an application window: no chrome, no title, nothing
   drawn between the objects. The strip keeps its own width and position;
   the stage reveals backdrop on every side of it. */
.pf-stage {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 40px), 1400px);
  margin: 20px auto 0;
  padding: clamp(64px, 6.6vw, 96px) 0 clamp(72px, 7.2vw, 104px);
  overflow: hidden;
  background: #121417;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 36px;
  box-shadow: 0 40px 110px -56px rgba(0, 0, 0, 0.85);
}

.pf-selector[hidden] + .pf-stage {
  margin-top: clamp(40px, 4vw, 60px);
}

.pf-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Layers only fetch their image once marked loaded.

   Tone is corrected per asset rather than in the files: the four backdrops
   were photographed at very different exposures (the extraction plate is a
   dark cold interior, the bit-life plate a bright warm one), and a single
   flat scrim used to pull all four toward the same darkness, which is what
   made the states hard to tell apart. Contrast is applied before brightness
   so the lift happens after the midtones are opened, and saturation only
   nudges each plate toward its own material. The filter also acts on the
   scrim below, which is why the scrim alphas are set against it. */
.pf-bg {
  position: absolute;
  inset: 0;
  background-color: #121417;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  filter: contrast(var(--pf-contrast, 1)) brightness(var(--pf-bright, 1)) saturate(var(--pf-sat, 1));
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-bg.is-active {
  z-index: 2;
  opacity: 1;
}

/* The outgoing layer holds beneath the incoming one, so the crossfade never
   dips through to the ground. */
.pf-bg.is-leaving {
  z-index: 1;
  opacity: 1;
  transition: none;
}

/* Per-asset scrim: a tint rather than flat black, so it settles the plate
   and carries the product's material at the same time. Kept light — the
   cards are opaque, so nothing readable sits on the backdrop and the scrim
   is holding back the image, not protecting text. */
.pf-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pf-scrim, rgba(12, 13, 15, 0.4));
}

/* Warm ground, the stage at rest. */
.pf-bg--neutral { --pf-scrim: rgba(16, 15, 13, 0.22); --pf-contrast: 1.06; --pf-bright: 1.2; --pf-sat: 1.05; background-position: 50% 42%; }
/* Extraction: the darkest and coldest plate, opened up and turned back
   toward warm mineral through the shadows, where most of it sits. */
.pf-bg--aide    { --pf-scrim: rgba(36, 30, 22, 0.18); --pf-contrast: 1.05; --pf-bright: 1.5; --pf-sat: 1.14; background-position: 50% 62%; }
/* Knowledge engine: cool slate, a touch more separation. */
.pf-bg--cke     { --pf-scrim: rgba(10, 16, 22, 0.3); --pf-contrast: 1.08; --pf-bright: 1.14; --pf-sat: 1.06; background-position: 50% 48%; }
/* Bit life: already the brightest and warmest plate. It needed the scrim
   taken off rather than light added, and the amber pulled back toward steel. */
.pf-bg--rul     { --pf-scrim: rgba(15, 18, 24, 0.38); --pf-contrast: 1.06; --pf-bright: 0.98; --pf-sat: 0.94; background-position: 66% 56%; }

/* Backdrop images are applied by portfolio.js once decoded (the file is
   chosen for the layer's size and the browser's format support); without
   scripting, the <noscript> style in the head shows the neutral backdrop. */

/* Shared vignette: settles the top and foot so the cards own the middle. */
.pf-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(12, 13, 15, 0.34) 0%, rgba(12, 13, 15, 0.05) 30%, rgba(12, 13, 15, 0.08) 70%, rgba(12, 13, 15, 0.44) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(12, 13, 15, 0.32) 100%);
}

.pf-stage .pf-strip {
  --pf-tray-bleed: 20px;
  position: relative;
  z-index: 1;
}

/* Inner tray: a mounting surface behind the three objects, so the gaps
   between them read as one surface instead of landscape. Part transparent
   (trial, 70%), so the stage's backdrop still reads through it while the
   tray holds the objects on a surface of their own. Decorative only (a pseudo-element: not
   focusable, not announced), static across selections, and inset well inside
   the stage so the backdrop still shows all round. Sits `--pf-tray-bleed`
   beyond the objects on every side. */
.pf-stage .pf-strip::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--pf-tray-bleed) * -1);
  bottom: calc(var(--pf-tray-bleed) * -1);
  left: calc(32px - var(--pf-tray-bleed));
  right: calc(32px - var(--pf-tray-bleed));
  background: rgba(19, 21, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: calc(var(--radius-lg) + var(--pf-tray-bleed) - 8px);
  pointer-events: none;
}

/* ---- Focus emphasis ----------------------------------------------------- */
/* The object surface stays opaque, so the backdrop never shows through a
   dimmed card; only its contents and edge recede. Links stay live. */
.pf-item > * {
  transition: opacity var(--transition-normal);
}

.pf-stage:not([data-focus="none"]) .pf-item {
  border-color: rgba(255, 255, 255, 0.06);
}

.pf-stage:not([data-focus="none"]) .pf-item > * {
  opacity: 0.64;
}

/* Hovering or focusing an unselected object recovers most of its strength;
   it does not change the selection or the backdrop. */
.pf-stage:not([data-focus="none"]) .pf-item:hover > *,
.pf-stage:not([data-focus="none"]) .pf-item:focus-within > * {
  opacity: 0.9;
}

.pf-stage[data-focus="aide"] .pf-item.pf-item--aide > *,
.pf-stage[data-focus="cke"] .pf-item.pf-item--cke > *,
.pf-stage[data-focus="rul"] .pf-item.pf-item--rul > * {
  opacity: 1;
}

.pf-stage[data-focus="aide"] .pf-item.pf-item--aide,
.pf-stage[data-focus="cke"] .pf-item.pf-item--cke,
.pf-stage[data-focus="rul"] .pf-item.pf-item--rul {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 36px 84px -34px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .pf-bg,
  .pf-item > * {
    transition: none;
  }

  .pf-stage[data-focus="aide"] .pf-item.pf-item--aide,
  .pf-stage[data-focus="cke"] .pf-item.pf-item--cke,
  .pf-stage[data-focus="rul"] .pf-item.pf-item--rul {
    transform: none;
  }
}

/* The artifact runs to the object's edges: no inner chart frame. Each
   geometry meets those edges differently. */
/* The visual is mounted, not bled: a ribbon of the object's own surface runs
   all round it, so the card's edge stays legible now that the artifact is a
   light image. The ribbon is the card's own ground showing through (the
   figure carries no colour of its own), so it is exactly the surface the
   lower half of the card is drawn on, at that height of the gradient. */
.pf-figure {
  margin: 0 -28px 22px;
  padding: 10px;
  border-bottom: 1px solid var(--pf-hairline);
}

.pf-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-family: var(--font-family);
  /* Each artifact rasterizes in its own layer. Without this, the vector
     paths join the page's root layer and shift how Chrome antialiases that
     whole layer — including the locked Shelf 03 cards far above. */
  will-change: transform;
}

/* The card visual as one raster: a card-sized crop of that product's own
   page plate, so the homepage and the product page show the same drawing.
   The card's own 360:220 box is kept, so no card changes height; the crops
   are cut to that ratio, and object-fit only guards against rounding. The
   ground matches the plates' bone, so a slow image never flashes dark. */
.pf-shot {
  aspect-ratio: 360 / 220;
  object-fit: cover;
  background: #e9e5dc;
}

/* ---- Shared artifact grammar -------------------------------------------- */
.pf-art-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: rgba(244, 243, 240, 0.46);
}

.pf-art-label--now {
  fill: var(--pf-ink);
}

.pf-art-note {
  font-size: 11px;
  font-weight: 500;
  fill: var(--pf-trace);
}

.pf-art-note--ink {
  fill: rgba(244, 243, 240, 0.5);
}

.pf-art-q {
  font-size: 13px;
  font-weight: 600;
  fill: var(--pf-ink);
}

.pf-doc {
  fill: rgba(244, 243, 240, 0.035);
  stroke: var(--pf-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.pf-doc-fold {
  fill: none;
  stroke: var(--pf-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.pf-fact {
  fill: rgba(244, 243, 240, 0.05);
  stroke: var(--pf-line-strong);
  stroke-width: 1.2;
}

.pf-bars rect {
  fill: var(--pf-bar);
}

.pf-bars--value rect,
.pf-bar-strong {
  fill: var(--pf-bar-strong);
}

.pf-rule {
  stroke: var(--pf-line);
  stroke-width: 1;
}

.pf-tether,
.pf-tether path {
  fill: none;
  stroke: var(--pf-trace);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.pf-node {
  fill: var(--pf-trace);
}

.pf-mark {
  fill: var(--pf-surface-top);
  stroke: var(--pf-trace);
  stroke-width: 1.4;
}

/* AIDE: the marked span. */
.pf-span-fill {
  fill: rgba(140, 199, 188, 0.62);
}

.pf-span-mark {
  fill: rgba(140, 199, 188, 0.07);
  stroke: var(--pf-trace);
  stroke-width: 1.2;
}

/* CKE: retrieval reaches out, lighter and dashed; grounding is solid. */
.pf-reach path {
  fill: none;
  stroke: var(--pf-line);
  stroke-width: 1.1;
  stroke-dasharray: 3 3;
}

/* RUL */
.pf-axis {
  stroke: var(--pf-line);
  stroke-width: 1;
}

.pf-trace {
  fill: none;
  stroke: rgba(244, 243, 240, 0.66);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.pf-projection {
  fill: none;
  stroke: var(--pf-trace);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.pf-cone-edge {
  fill: none;
  stroke: rgba(140, 199, 188, 0.5);
  stroke-width: 1;
}

.pf-limit {
  stroke: rgba(244, 243, 240, 0.42);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.pf-drop {
  stroke: rgba(140, 199, 188, 0.75);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.pf-now {
  stroke: rgba(244, 243, 240, 0.7);
  stroke-width: 1.2;
}

.pf-node--now {
  fill: var(--pf-surface-top);
  stroke: var(--pf-ink);
  stroke-width: 1.4;
}

/* ---- Object text --------------------------------------------------------- */
/* Card link (homepage objects). Absolutely positioned, so it is never placed
   in the object's grid and no row moves; it covers the card, and the rows
   that must stay independent are lifted back above it below. */
.pf-open {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Above the card link. The name keeps its own hover and focus treatment (and
   is the real, focusable link); the contribution statement and the Ask action
   keep their own text, selection and destination. */
.pf-name a,
.pf-contribution,
.pf-action {
  position: relative;
  z-index: 2;
}

.pf-name {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.016em;
}

.pf-name a {
  color: var(--pf-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  transition: text-decoration-color var(--transition-fast);
}

.pf-does {
  margin: 12px 0 0;
  max-width: 40ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--pf-ink-2);
  text-wrap: pretty;
}

/* Substantive, not fine print: full ink, the contribution word heavier. */
.pf-contribution {
  align-self: start;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--pf-hairline);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.004em;
  color: var(--pf-ink);
}

.pf-contribution strong {
  font-weight: 700;
}

/* The authority clause never breaks across lines. */
.pf-never {
  white-space: nowrap;
}

/* The established plain action: underlined text, never a signing field. */
.pf-action {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.pf-action a {
  color: var(--pf-ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.24);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.pf-name a:hover,
.pf-action a:hover {
  color: var(--pf-ink);
  text-decoration-color: currentColor;
}

.pf-name a:focus-visible,
.pf-action a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- Standing note -------------------------------------------------------- */
/* A calm structural boundary on its own rule: same size as the page's other
   fine print, full reading ink, no frame, no icon, no alert colour. */
.pf-note {
  grid-column: 4 / -1;
  margin: clamp(36px, 3.4vw, 48px) 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--pf-ink-2);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .pf-label { grid-column: 1 / span 2; }
  .pf-heading { grid-column: 3 / -1; }
  .pf-lede { grid-column: 3 / span 9; }
  .pf-note { grid-column: 3 / -1; }
}

/* Three columns would shrink the artifacts below legibility: the objects
   become a vertical filing strip, artifact and text side by side. */
@media (max-width: 1199px) {
  .pf-strip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 20px;
  }

  .pf-item {
    grid-row: auto;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    /* Text block centred against the artifact. */
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 36px;
    padding: 30px 32px 30px 0;
  }

  .pf-figure {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    margin: 0;
    border-bottom: 0;
  }

  .pf-name,
  .pf-does,
  .pf-contribution,
  .pf-action {
    grid-column: 2;
  }

  .pf-name { grid-row: 2; }
  .pf-does { grid-row: 3; }
  .pf-contribution { grid-row: 4; }
  .pf-action { grid-row: 5; }

  .pf-contribution {
    margin-top: 16px;
  }
}

@media (max-width: 899px) {
  .pf-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-label,
  .pf-heading,
  .pf-lede,
  .pf-note {
    grid-column: 1;
    grid-row: auto;
  }

  .pf-label {
    padding-top: 0;
    margin-bottom: 16px;
  }

  .pf-item {
    column-gap: 28px;
    padding-right: 26px;
  }
}

/* Stacked: artifact over text, one object after another. No carousel. */
@media (max-width: 699px) {
  .pf-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: 0 22px 24px;
  }

  .pf-figure {
    grid-row: auto;
    margin: 0 -22px 20px;
    border-bottom: 1px solid var(--pf-hairline);
  }

  .pf-name,
  .pf-does,
  .pf-contribution,
  .pf-action {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .pf-shelf {
    padding: 56px 0 88px;
  }

  .pf-grid,
  .pf-strip {
    padding: 0 24px;
  }

  .pf-strip {
    gap: 16px;
  }

  .pf-heading {
    font-size: clamp(24px, 6.8vw, 30px);
  }

  .pf-lede {
    margin-top: 14px;
    font-size: 17px;
  }

  .pf-name {
    font-size: 19px;
  }

  .pf-does,
  .pf-contribution {
    font-size: 15px;
  }
}

/* Selector and stage across the narrower layouts. */
@media (max-width: 1199px) {
  .pf-selector {
    gap: 14px;
  }

  /* More backdrop at the sides of the filing strip. */
  .pf-stage .pf-strip {
    --pf-tray-bleed: 16px;
    padding: 0 44px;
  }

  .pf-stage .pf-strip::before {
    left: calc(44px - var(--pf-tray-bleed));
    right: calc(44px - var(--pf-tray-bleed));
  }

  .pf-select {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* Stacked phones: the choices stack into a clean vertical group. */
@media (max-width: 699px) {
  .pf-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .pf-select {
    min-height: 52px;
  }
}

@media (max-width: 640px) {
  .pf-selector {
    padding: 0 24px;
  }

  .pf-stage {
    width: calc(100% - 16px);
    margin-top: 16px;
    padding: 40px 0 44px;
    border-radius: 26px;
  }

  /* Keeps the objects at their previous phone width (stage border included). */
  .pf-stage .pf-strip {
    --pf-tray-bleed: 8px;
    padding: 0 15px;
  }

  .pf-stage .pf-strip::before {
    left: calc(15px - var(--pf-tray-bleed));
    right: calc(15px - var(--pf-tray-bleed));
  }
}

/* Narrowest phones: give the artifacts the width, not the gutters. */
@media (max-width: 359px) {
  .pf-strip {
    padding: 0 14px;
  }

  .pf-selector {
    padding: 0 14px;
  }

  .pf-stage {
    width: calc(100% - 12px);
  }

  .pf-stage .pf-strip {
    --pf-tray-bleed: 5px;
    padding: 0 7px;
  }

  .pf-stage .pf-strip::before {
    left: calc(7px - var(--pf-tray-bleed));
    right: calc(7px - var(--pf-tray-bleed));
  }

  .pf-item {
    padding: 0 18px 22px;
  }

  .pf-figure {
    margin: 0 -18px 18px;
  }
}

/* --------------------------------------------------------------------------
   6D2. Homepage Shelf 04 tail — Services hand-off
   A compact cross-reference, not a shelf: it names the services surface once
   and hands the reader to /services. Deliberately the quietest block on the
   page — no artifact, imagery, stamp, card, figure, interaction or motion,
   and no primary action (the site keeps five settled action labels, so
   `Explore Services` is an editorial cross-reference in the established
   plain-link treatment, never a sixth label).

   Its ground is the warm mineral / bone the Services page is set on, the
   same pale material as the source sheet on the Agentic Intelligent Document
   Extraction surface. Cut hard against the dark shelves above and below, it
   is the one light band between the portfolio and Shelf 05, so the hand-off
   reads as its own surface rather than a footnote to the products.
   Every selector is scoped to .sh-*.
   -------------------------------------------------------------------------- */
.sh-handoff {
  --sh-ink: #15171a;
  --sh-ink-2: rgba(21, 23, 26, 0.74);
  --sh-label: #625e56;
  --sh-rule: rgba(21, 23, 26, 0.18);
  position: relative;
  /* Its own band now, so it carries its own vertical measure. */
  padding: clamp(68px, 6.2vw, 92px) 0 clamp(68px, 6.2vw, 92px);
  background: #e2dfd8;
}

.sh-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 32px;
}

.sh-label {
  grid-column: 1 / span 3;
  margin: 0;
  padding-top: calc(0.45em + 17px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--sh-label);
}

.sh-main {
  grid-column: 4 / -1;
  padding-top: 17px;
  border-top: 1px solid var(--sh-rule);
}

/* The Accountable AI heading's measure: this is a surface of its own, not a
   caption under the filing strip. */
.sh-heading {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--sh-ink);
  text-wrap: balance;
}

.sh-body {
  margin: 20px 0 0;
  max-width: 64ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--sh-ink-2);
  text-wrap: pretty;
}

/* The established plain cross-reference treatment (the filing strip's). */
.sh-xref {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.sh-xref a {
  color: var(--sh-ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(21, 23, 26, 0.3);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.sh-xref a:hover {
  color: var(--sh-ink);
  text-decoration-color: currentColor;
}

/* The page's white focus ring would disappear on this light band. */
.sh-xref a:focus-visible {
  outline: 2px solid rgba(21, 23, 26, 0.7);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 1100px) {
  .sh-label { grid-column: 1 / span 2; }
  .sh-main  { grid-column: 3 / -1; }
}

@media (max-width: 768px) {
  .sh-grid {
    padding: 0 24px;
  }

  .sh-label {
    grid-column: 1 / -1;
    padding-top: 17px;
    border-top: 1px solid var(--sh-rule);
  }

  .sh-main {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 0;
  }

  .sh-heading {
    max-width: none;
    font-size: clamp(25px, 6.6vw, 30px);
  }

  .sh-body {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   6E. Homepage Shelf 05 — Editorial: Accountable AI + Capabilities (Phase 1G)
   Typographic relief after the portfolio stage: page ground, type, numerals
   and space. No cards, frames, rules around entries, icons, links,
   interaction or motion. The six principles are the one full-width object;
   the capabilities stay inside the margin system beneath them, smaller and
   quieter. Every selector is scoped to .ai-* / .cap-*.
   -------------------------------------------------------------------------- */
.ai-shelf {
  --ai-ink: #f4f3f0;
  --ai-ink-2: rgba(244, 243, 240, 0.72);
  --ai-ink-3: rgba(244, 243, 240, 0.6);
  --ai-label: #9c968b;
  --ai-numeral: rgba(244, 243, 240, 0.24);
  position: relative;
  padding: clamp(40px, 4vw, 56px) 0 clamp(112px, 10vw, 152px);
  /* Continues the portfolio's #16181b foot, settles on a quiet slate a
     touch cooler and lighter, so the light control surface of Shelf 06 can
     arrive as a step rather than a jump. */
  background: linear-gradient(180deg, #16181b 0%, #181a1e 30%, #1a1d21 100%);
}

.ai-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 32px;
}

.ai-label {
  grid-column: 1 / span 3;
  grid-row: 1;
  margin: 0;
  padding-top: 0.6em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--ai-label);
}

.ai-heading {
  grid-column: 4 / -1;
  grid-row: 1;
  max-width: 30ch;
  margin: 0;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--ai-ink);
  text-wrap: balance;
}

.ai-lede {
  grid-column: 4 / span 7;
  max-width: 60ch;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--ai-ink-2);
  text-wrap: pretty;
}

/* ---- The six principles -------------------------------------------------- */
/* Open columns on the page ground. Separation is whitespace and the numeral
   alone: no box, no rule, no tint. */
.ai-principles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 4.6vw, 68px) 32px;
  margin: clamp(56px, 5.4vw, 80px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ai-principle;
}

.ai-principles li {
  counter-increment: ai-principle;
  max-width: 34ch;
}

/* The number is apparatus: large, light, low ink, set above the entry. */
.ai-principles li::before {
  content: counter(ai-principle);
  display: block;
  margin-bottom: 14px;
  font-size: clamp(46px, 4.2vw, 62px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ai-numeral);
}

.ai-principles p {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ai-ink-3);
  text-wrap: pretty;
}

/* The run-in name carries the scan: full ink, heavier, same size. */
.ai-principles strong {
  font-weight: 600;
  color: var(--ai-ink);
}

/* ---- Capabilities: subordinate, inside the margin system ------------------ */
.cap-clause {
  margin-top: clamp(80px, 7.6vw, 112px);
}

.cap-margin {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
}

.cap-margin .ai-label {
  padding-top: 0;
}

/* The clause's H2, set at margin scale so it never competes with the
   principles above. */
.cap-heading {
  max-width: 16em;
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--ai-ink-2);
}

.cap-field {
  grid-column: 4 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-field li {
  position: relative;
  max-width: 44ch;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ai-ink-3);
  text-wrap: pretty;
}

/* The ticked field's tick: apparatus, not an icon. A thin drawn check in
   the restrained teal, set against the first line; decorative, so it is not
   announced. */
.cap-field li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 4.5px;
  height: 9px;
  border-right: 1.5px solid rgba(140, 199, 188, 0.78);
  border-bottom: 1.5px solid rgba(140, 199, 188, 0.78);
  transform: rotate(40deg);
}

.cap-field strong {
  font-weight: 600;
  color: var(--ai-ink-2);
}

/* Standing note: beneath the field, on its own rule, at the page's fine-print
   size and reading ink — a calm boundary, not a warning. */
.cap-note {
  grid-column: 4 / -1;
  grid-row: 2;
  max-width: 76ch;
  margin: 32px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--ai-ink-2);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .ai-label { grid-column: 1 / span 2; }
  .ai-heading { grid-column: 3 / -1; }
  .ai-lede { grid-column: 3 / span 9; }
  /* The margin is too narrow for the capabilities heading: the label keeps
     the margin, the heading moves above the field. */
  .cap-margin { display: contents; }
  .cap-margin .ai-label { grid-column: 1 / span 2; grid-row: 1; }
  .cap-heading { grid-column: 3 / -1; grid-row: 1; margin: 0 0 20px; max-width: none; }
  .cap-field { grid-column: 3 / -1; grid-row: 2; }
  .cap-note { grid-column: 3 / -1; grid-row: 3; }
}

/* Three columns would squeeze the measure: two columns, three rows. */
@media (max-width: 1199px) {
  .ai-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }

  .ai-principles li {
    max-width: 40ch;
  }
}

/* The margin folds into the flow. */
@media (max-width: 899px) {
  .ai-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-label,
  .ai-heading,
  .ai-lede,
  .ai-principles,
  .cap-margin,
  .cap-field,
  .cap-note {
    grid-column: 1;
    grid-row: auto;
  }

  .ai-label {
    padding-top: 0;
    margin-bottom: 16px;
  }

  .ai-heading {
    max-width: 28ch;
  }

  .cap-margin {
    display: block;
    margin-bottom: 22px;
  }

  .cap-heading {
    margin: 10px 0 0;
  }

  .cap-margin .ai-label {
    margin-bottom: 0;
  }
}

/* Phone: one column; the numeral hangs beside its entry instead of above. */
@media (max-width: 699px) {
  .ai-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .ai-principles li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    max-width: none;
  }

  .ai-principles li::before {
    margin: 0;
    padding-top: 1px;
    font-size: 30px;
  }

  .cap-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .ai-shelf {
    padding: 36px 0 96px;
  }

  .ai-grid {
    padding: 0 24px;
  }

  .ai-heading {
    font-size: clamp(24px, 6.8vw, 30px);
  }

  .ai-lede {
    margin-top: 14px;
    font-size: 17px;
  }

  .ai-principles {
    margin-top: 44px;
  }

  .ai-principles p {
    font-size: 16.5px;
  }

  .cap-clause {
    margin-top: 64px;
  }

  .cap-field li,
  .cap-note {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   6F. Homepage Shelf 06 — Ledger: Where this stands + Energy first (Phase 1H)
   The page's light control surface: a mineral-grey ground after five dark
   shelves. The revision block sits on the page's own 12 columns — rung in
   the annotation margin, the entry and its status across the text columns —
   on one plate held by precise rules. Three peer rungs: no arrow, connector,
   numbering or ordering glyph; state carried by word and mark shape, never
   colour. The reserved italic quotation sits beneath it; Energy first is a
   ruled prose band below. Static. Every selector is scoped to .ml-* / .ef-*.
   -------------------------------------------------------------------------- */
.ml-shelf {
  --ml-ground: #d9dcd8;
  --ml-plate: #e4e6e2;
  --ml-ink: #15171a;
  --ml-ink-2: rgba(21, 23, 26, 0.76);
  --ml-ink-3: rgba(21, 23, 26, 0.62);
  --ml-label: #625e56;
  --ml-rule: rgba(21, 23, 26, 0.14);
  --ml-rule-strong: rgba(21, 23, 26, 0.82);
  position: relative;
  padding: clamp(96px, 9vw, 136px) 0 clamp(104px, 9.5vw, 144px);
  background: var(--ml-ground);
  color: var(--ml-ink);
}

.ml-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 32px;
}

.ml-label {
  grid-column: 1 / span 3;
  grid-row: 1;
  margin: 0;
  padding-top: 0.45em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--ml-label);
}

/* Clause 7 has no heading: the caption leads the block. */
.ml-caption {
  grid-column: 4 / -1;
  grid-row: 1;
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ml-ink);
}

/* ---- The revision block --------------------------------------------------- */
/* One plate on the page grid. The plate extends past the columns with a
   spread shadow, so the cells still align to the grid outside it. */
.ml-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: clamp(40px, 3.8vw, 56px);
  background: var(--ml-plate);
  box-shadow: 0 0 0 24px var(--ml-plate);
  border-top: 2px solid var(--ml-rule-strong);
  border-bottom: 1px solid var(--ml-rule-strong);
}

.ml-rowgroup,
.ml-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.ml-row {
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--ml-rule);
}

.ml-row--head {
  padding: 13px 0 12px;
  border-top: 0;
}

.ml-rowgroup + .ml-rowgroup .ml-row:first-child {
  border-top-color: rgba(21, 23, 26, 0.3);
}

.ml-cell--rung { grid-column: 1 / span 3; }
.ml-cell--what { grid-column: 4 / span 4; }
.ml-cell--status { grid-column: 8 / -1; }

.ml-row--head .ml-cell {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ml-ink-3);
}

/* The rung word is the strongest type in the block. */
.ml-row:not(.ml-row--head) .ml-cell--rung {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.014em;
}

/* State marks, peers not steps: filled (exists now), open (candidates),
   dashed (long-term direction). Shape carries the difference. */
.ml-mark {
  flex: none;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--ml-ink);
  transform: translateY(1px);
}

.ml-row--today .ml-mark { background: var(--ml-ink); }
.ml-row--direction .ml-mark { border-style: dashed; }

.ml-cell--what {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ml-ink);
  text-wrap: pretty;
}

.ml-cell--status {
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ml-ink-2);
  text-wrap: pretty;
}

/* Per-cell keys exist only for the stacked phone layout. */
.ml-cell-key {
  display: none;
}

/* ---- The reserved italic quotation --------------------------------------- */
.ml-quote {
  grid-column: 4 / -1;
  max-width: 44em;
  margin: clamp(52px, 4.8vw, 68px) 0 0;
  font-size: clamp(18px, 1.45vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.004em;
  color: var(--ml-ink-2);
}

.ml-quote em {
  font-style: italic;
}

/* ---- Energy first: a ruled prose band ------------------------------------- */
.ef-clause {
  margin-top: clamp(84px, 7.6vw, 112px);
}

.ef-clause .ml-grid::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  height: 1px;
  margin-bottom: 30px;
  background: rgba(21, 23, 26, 0.22);
}

.ef-clause .ml-label {
  grid-row: 2;
  padding-top: 0.5em;
}

.ef-heading {
  grid-column: 4 / -1;
  grid-row: 2;
  margin: 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--ml-ink);
}

.ef-body {
  grid-row: 3;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ml-ink-2);
  text-wrap: pretty;
}

.ef-body:nth-of-type(2) { grid-column: 4 / span 4; }
.ef-body:nth-of-type(3) { grid-column: 8 / -1; }

/* The domain boundary lands at full ink and weight: a limit, not fine print. */
.ef-boundary {
  font-weight: 600;
  color: var(--ml-ink);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .ml-label { grid-column: 1 / span 2; }
  .ml-caption,
  .ml-quote,
  .ef-heading { grid-column: 3 / -1; }
  .ml-cell--rung { grid-column: 1 / span 2; }
  .ml-cell--what { grid-column: 3 / span 4; }
  .ml-cell--status { grid-column: 7 / -1; }

  /* The two paragraphs stack in the text column. */
  .ef-body:nth-of-type(2) { grid-column: 3 / span 9; grid-row: 3; }
  .ef-body:nth-of-type(3) { grid-column: 3 / span 9; grid-row: 4; margin-top: 16px; }
}

@media (max-width: 899px) {
  .ml-label {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-top: 0;
    margin-bottom: 16px;
  }

  .ml-caption { grid-column: 1 / -1; grid-row: 2; }
  .ml-block { grid-row: 3; }
  .ml-quote { grid-column: 1 / -1; }
  .ml-cell--rung { grid-column: 1 / span 3; }
  .ml-cell--what { grid-column: 4 / span 4; }
  .ml-cell--status { grid-column: 8 / -1; }

  .ef-clause .ml-label { grid-row: 2; margin-bottom: 14px; }
  .ef-heading { grid-column: 1 / -1; grid-row: 3; }
  .ef-body:nth-of-type(2) { grid-column: 1 / -1; grid-row: 4; max-width: 64ch; }
  .ef-body:nth-of-type(3) { grid-column: 1 / -1; grid-row: 5; max-width: 64ch; }
}

/* Phone: each rung restacks inside its row, with its column keys printed,
   so Rung / What it is / Status stay explicit. No scroll, nothing hidden. */
@media (max-width: 699px) {
  .ml-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ml-block {
    box-shadow: 0 0 0 16px var(--ml-plate);
  }

  .ml-row--head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ml-row {
    display: block;
    padding: 22px 0 24px;
  }

  .ml-rowgroup + .ml-rowgroup .ml-row:first-child {
    border-top: 0;
  }

  .ml-cell {
    display: block;
  }

  .ml-cell--what,
  .ml-cell--status {
    margin-top: 14px;
  }

  .ml-cell-key {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ml-ink-3);
  }

  .ml-row:not(.ml-row--head) .ml-cell--rung {
    display: flex;
  }

  .ml-cell--what {
    font-size: 17px;
  }

  .ml-cell--status {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .ml-shelf {
    padding: 72px 0 88px;
  }

  .ml-grid {
    padding: 0 24px;
  }

  .ml-caption {
    font-size: 21px;
  }

  .ml-quote {
    margin-top: 44px;
    font-size: 17.5px;
  }

  .ef-clause {
    margin-top: 64px;
  }

  .ef-heading {
    font-size: clamp(24px, 6.6vw, 28px);
  }

  .ef-body {
    font-size: 16.5px;
  }
}

/* --------------------------------------------------------------------------
   6G. Homepage Shelf 07 — Editorial: Research + The company (Phase 1I)
   The quietest shelf: the page returns to dark after the mineral control
   surface and hands off to two depth pages. Two equal open columns on page
   ground — no dominant object, no cards, panels or imagery. Headings sit
   below every other shelf heading; the only interaction is the two
   cross-references, in the site's plain underlined treatment. Density falls
   away toward the foot for the close that follows. Static.
   Every selector is scoped to .rc7-*.
   -------------------------------------------------------------------------- */
.rc7-shelf {
  --rc7-ink: #f4f3f0;
  --rc7-ink-2: rgba(244, 243, 240, 0.7);
  --rc7-ink-3: rgba(244, 243, 240, 0.58);
  --rc7-label: #9c968b;
  --rc7-rule: rgba(255, 255, 255, 0.08);
  position: relative;
  padding: clamp(104px, 9.4vw, 144px) 0 clamp(128px, 12vw, 184px);
  /* A calm near-black, easing a touch darker toward the foot. */
  background: linear-gradient(180deg, #0f1012 0%, #0e0f11 60%, #0b0b0c 100%);
}

.rc7-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(56px, 7vw, 112px);
  max-width: var(--frame-text);
  margin: 0 auto;
  padding: 0 32px;
}

.rc7-col {
  min-width: 0;
  max-width: 34rem;
}

.rc7-label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--rc7-label);
}

/* Anchors each column; quieter than every shelf heading above it. */
.rc7-heading {
  max-width: 22ch;
  margin: 14px 0 0;
  font-size: clamp(24px, 2vw, 29px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--rc7-ink);
  text-wrap: balance;
}

.rc7-lede,
.rc7-body {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--rc7-ink-2);
  text-wrap: pretty;
}

.rc7-body + .rc7-body {
  margin-top: 14px;
}

/* ---- Research register: titles only ------------------------------------- */
.rc7-register {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rc7-topic;
}

.rc7-register li {
  counter-increment: rc7-topic;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  padding: 11px 0 12px;
  border-top: 1px solid var(--rc7-rule);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.004em;
  color: rgba(244, 243, 240, 0.86);
}

/* The identifier is apparatus: small, quiet, fixed width. */
.rc7-register li::before {
  content: counter(rc7-topic, upper-alpha);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(244, 243, 240, 0.38);
}

/* Standing note on its own rule: a plain statement at reading ink. */
.rc7-note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--rc7-ink-2);
  text-wrap: pretty;
}

/* ---- Cross-references: route-outs, never buttons ------------------------ */
.rc7-xref {
  margin: 28px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.rc7-xref a {
  color: var(--rc7-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  transition: text-decoration-color var(--transition-fast);
}

.rc7-xref a:hover {
  text-decoration-color: currentColor;
}

.rc7-xref a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- Responsive --------------------------------------------------------- */
/* Two columns stop being comfortable before the headings do: stack. */
@media (max-width: 899px) {
  .rc7-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 80px;
  }

  .rc7-col {
    max-width: 38rem;
  }
}

@media (max-width: 640px) {
  .rc7-shelf {
    padding: 80px 0 104px;
  }

  .rc7-grid {
    padding: 0 24px;
    row-gap: 64px;
  }

  .rc7-heading {
    font-size: clamp(23px, 6.4vw, 26px);
  }

  .rc7-lede,
  .rc7-body {
    font-size: 16px;
  }

  .rc7-register li {
    font-size: 15.5px;
  }
}

/* --------------------------------------------------------------------------
   6H. Homepage Shelf 08 — Quiet horizon: the site close (Phase 1J)
   The page resolves where it began, quieter: a low static band of the
   hero's far basin (H1.png, cropped in CSS only) emerging out of Shelf 07's
   near-black, the rig light on the right, then the spine as one plain line
   and the single closing action on the dark foreground. No device, no
   subsurface layers, no pumpjack, no parallax, no motion. Not the footer.
   Every selector is scoped to .site-close / .close-*.
   -------------------------------------------------------------------------- */
.site-close {
  position: relative;
  padding-bottom: clamp(96px, 8.4vw, 128px);
  background: #0b0b0c;
}

/* The band. Its crop keeps the horizon glow and the rig; both edges
   dissolve into the page ground, so there is no box edge. */
.close-horizon {
  position: relative;
  height: clamp(300px, 31vw, 460px);
  overflow: hidden;
}

.close-horizon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Quieter than the hero: the same plate, a little lower in light. */
  filter: brightness(0.86);
}

.close-horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #0b0b0c 0%, rgba(11, 11, 12, 0.5) 14%, rgba(11, 11, 12, 0) 32%,
                            rgba(11, 11, 12, 0) 62%, rgba(11, 11, 12, 0.72) 86%, #0b0b0c 100%);
}

/* Spine and action sit on the dark foreground, overlapping the band's foot. */
/* The close is the page's last text block, not chrome: it takes the text
   frame so its spine stays on the same left edge as the sections above it. */
.close-inner {
  position: relative;
  z-index: 1;
  max-width: var(--frame-text);
  margin: calc(clamp(56px, 5vw, 80px) * -1) auto 0;
  padding: 0 32px;
}

/* One plain line of closing language: reading size, never display. */
.close-spine {
  max-width: 64em;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: rgba(244, 243, 240, 0.86);
  text-wrap: pretty;
}

.close-action {
  margin: 26px 0 0;
}

.close-action .signing-field:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

/* ---- Responsive --------------------------------------------------------- */
/* Narrower bands keep the rig: the crop leans right as the width drops. */
@media (max-width: 899px) {
  .close-horizon img {
    object-position: 78% 42%;
  }
}

@media (max-width: 640px) {
  .site-close {
    padding-bottom: 88px;
  }

  .close-horizon {
    height: clamp(240px, 68vw, 300px);
  }

  .close-horizon img {
    object-position: 88% 45%;
  }

  .close-inner {
    margin-top: -40px;
    padding: 0 24px;
  }

  .close-spine {
    font-size: 17px;
  }

  .close-action {
    margin-top: 22px;
  }
}

/* --------------------------------------------------------------------------
   7. Global footer (Phase 1K)
   Persistent site chrome beneath the site close: company identity and the
   published details, in authority order, and nothing else. Quieter than the
   close — a hairline, a half-step of ground and small type; no image, card,
   gradient or motion. The wordmark reuses the header's `.wordmark` style.
   Every selector is scoped to .site-footer*.
   -------------------------------------------------------------------------- */
.site-footer {
  --sf-ink: #f4f3f0;
  --sf-ink-2: rgba(244, 243, 240, 0.66);
  --sf-ink-3: rgba(244, 243, 240, 0.48);
  padding: clamp(48px, 4.4vw, 64px) 0 clamp(56px, 5vw, 72px);
  background: #0d0e0f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.site-footer-identity {
  grid-column: 1 / span 4;
}

.site-footer-wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  line-height: 1.2;
}

.site-mark--footer {
  height: 22px;
}

/* Persistent identity: the header's own wordmark, a step quieter. */
.site-footer-wordmark .wordmark {
  font-size: 17px;
  color: var(--sf-ink);
}

.site-footer-domain {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sf-ink-2);
}

/* Three columns on one rhythm, each four columns apart: identity, the
   company's details, then where else to find it and the fine print. They
   share a top edge, and their first lines share a baseline. */
.site-footer-details {
  grid-column: 6 / span 3;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sf-ink-2);
}

.site-footer-elsewhere {
  grid-column: 10 / -1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sf-ink-2);
}

/* Named in words, on the detail column's own rhythm. Not badges: no icons,
   no counts, no colour, nothing that reads as a social bar. */
.site-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-links li + li {
  margin-top: 4px;
}

.site-footer-address {
  font-style: normal;
}

.site-footer-line {
  display: block;
}

.site-footer-line + .site-footer-line {
  margin-top: 4px;
}

.site-footer-copyright {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--sf-ink-3);
}

.site-footer a {
  color: var(--sf-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  transition: text-decoration-color var(--transition-fast);
}

.site-footer a:hover {
  text-decoration-color: currentColor;
}

.site-footer a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 899px) {
  .site-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .site-footer-identity,
  .site-footer-details,
  .site-footer-elsewhere {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 44px 0 56px;
  }

  .site-footer-grid {
    padding: 0 24px;
  }

  /* Phone: the same order, at a comfortable size and tap height. */
  .site-footer-details,
  .site-footer-elsewhere,
  .site-footer-domain {
    font-size: 15px;
  }

  .site-footer-line + .site-footer-line {
    margin-top: 6px;
  }

  .site-footer-line a,
  .site-footer-links a {
    display: inline-block;
    padding: 4px 0;
  }
}

/* --------------------------------------------------------------------------
   14. Responsive Media Queries
   -------------------------------------------------------------------------- */
/* The stage rail narrows with the device, then stands down on phones rather
   than eating into the engineering visual. The visual is never cropped. */
@media (max-width: 1024px) {
  .device-body { --stage-w: 112px; }
  .device-stage { font-size: 11px; padding: 8px 10px 8px 14px; }
}

@media (max-width: 899px) {
  .device-body { --stage-w: 104px; }
  .device-stages { padding: 11px 0; }
}

@media (max-width: 768px) {
  .device-body { --stage-w: 94px; }
  .device-stage { font-size: 10px; padding: 7px 8px 7px 12px; }
  .device-rail { height: 32px; padding: 0 13px; }
  .device-rail-title { font-size: 9.5px; letter-spacing: 0.12em; }
}

@media (max-width: 640px) {
  .device-stages { display: none; }
  .device-body { --stage-w: 0px; grid-template-columns: 1fr; }
  .device-inner { border-radius: 8px; }
  .device-rail { height: 28px; padding: 0 11px; }
  .device-rail-title { font-size: 8.5px; letter-spacing: 0.1em; }
}

@media (max-width: 768px) {
  .site-header-inner {
    padding: 16px 24px;
    gap: 20px;
  }

  .site-nav {
    display: none;
  }

  .nav-disclosure {
    display: block;
  }

  /* :not([hidden]) so the class rule never outranks the hidden attribute. */
  .compact-nav-panel:not([hidden]) {
    display: block;
  }

  .hero-section {
    padding-top: 166px;
    /* Stage grows with width so the 152%-wide plates (64.49vw tall) keep the
       same proportion to the device on every phone/tablet width. */
    --hero-stage-h: max(560px, 100vw);
    --hero-plate-h: 64.49vw;
  }

  /* Phone industrial crop. The plate carries the pumpjack at 13% and the rig
     at 84-94% of its width, so no crop shows both without shrinking the whole
     basin to a thin band. The rig wins: 152% / -51% keeps it recognizable and
     clear of the right edge, and the plate's own right edge still covers the
     frame. The pumpjack falls outside the crop on purpose.
     max-width: none overrides the global img { max-width: 100% } reset,
     which otherwise silently caps these at 100%. */
  .hero-img-2,
  .hero-img-3 {
    width: 152%;
    max-width: none;
    margin-left: -51%;
  }

  .hero-far-plane img,
  .hero-pumpjack {
    width: 152%;
    max-width: none;
    left: -51%;
  }

  /* Re-anchored for the 152% plates: the smaller cutouts would otherwise sit
     ~63px lower in the stage and leave a gap under the device. These put the
     ridge crest and the strata shoulders back where the 190% crop had them. */
  .layer-2-midground { bottom: 1%; }
  .layer-4-foreground { bottom: 19%; }

  .hero-content {
    top: -24px;
    padding: 0 24px;
  }

  .spine-line {
    margin-bottom: 9px;
  }

  .hero-actions {
    margin-top: 32px;
  }

  .signing-field {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }

  .device-frame {
    padding: 9px;
    border-radius: 14px;
  }

  .layer-3-product {
    width: 95%;
    bottom: 40px;
  }
}