/* =============================================================
   ZARAS — Company atmosphere v10

   v10 (2026-05-20): zoom-resilience pass.
   .hero-meta { margin-top: clamp(80px, 14vh, 160px) } →
   clamp(48px, 9svh, 120px). The original 14vh push was tuned to keep
   the hero-meta below the fold on a full desktop window (it's the
   intentional below-fold artifact that rewards scrolling). On
   zoomed-short viewports the 14vh value plus the 88vh hero
   min-height stacked into "meta is two scroll pages below H1"
   which read as a layout bug, not intent. The smaller clamp keeps
   the design intent (meta sits below the fold on a normal desktop)
   while degrading gracefully at zoom.

   v9 history (preserved):
   Intent: exceptionally unique, still simple. The page should read
   as a founder-led set of operating principles, not a generic About page.

   v9 (operating-rail integration — 2026-05-18): Two related
   changes paired with the §03 single-record-spine → operating
   rail (v1) ship.

   (1) §03 markup replaced. The .record-spine/.record-core/
   .record-steps/.record-step cluster is gone — replaced by the
   .op-rail module (css/operating-rail.v1.css + js/operating-rail.v1.js).
   All .record-* selector blocks in this file are now dead and
   removed:
     - .record-spine + .record-spine::before
     - shared .record-core, .record-steps { position; z-index }
     - .record-core + descendants (span / strong)
     - .record-steps
     - .record-step + descendants (span / strong / em)
     - responsive overrides at 980px (.record-steps / .record-step)
     - responsive overrides at 720px (.record-core / .record-core strong)
     - .record-spine removed from the shared .origin-card / .bet-card /
       .record-spine / .doctrine-grid .principle border-radius:22px
       multi-selector at the 720px breakpoint
   The .company-record parent atmospheric block (in the section
   selector list at the top, and its dedicated ::before gradient)
   STAYS — that's the §03 atmospheric envelope, still needed for
   the rail content.

   M7 comment (v4 history) trimmed: both halves of the M7
   ordered-list-semantics note are now obsolete — the .record-steps
   half went with the §03 rail integration, and the .loop-list half
   went with the §05 build-loop section deletion (in-place edit
   after v9 ship, same dead-code precedent as the §06 deletion).

   (2) `.page { overflow: clip }` removed. v8 carried an open
   question on why .page clipped horizontally in addition to body's
   `overflow-x: clip`. The rail's full-bleed wrapper
   (width: 100vw; margin-left: calc(50% - 50vw)) escapes the
   content column — with .page clipping, that bleed was being
   cropped back to ~1180px, breaking the §03 centerpiece visual.
   Removing the .page clip unblocks the rail and simultaneously
   simplifies the §03..CTA section ::before mask-image: the
   horizontal calc(50vw ± 590px) half (added in v8 to hide hard
   edges at the clip boundary) is no longer needed. The mask is
   now vertical-only (10%/90% fade on section height). Body's
   `overflow-x: clip` still prevents horizontal scroll, so this
   change does not reintroduce that risk.

   v8 history (retained — fix (1) text kept for posterity; fix (2)
   open question superseded by the v9 resolution above):

   v8 (edge softening pass — 2026-05-12): Two related fixes that
   resolve hard rectangular edges on the company page surface:

   (1) .block-head hairline: Retired the .block-head
   border-bottom-color override (was bumping site-rule from
   rgba(...,0.08) to rgba(...,0.105)). The hairline itself moved
   out of .block-head's border-bottom into a ::after pseudo in
   company.html inline <style>, rendered as a linear-gradient that
   fades to transparent at the line endpoints (10%/90%) so the rule
   no longer terminates hard against the page-glow gradient backdrop.
   Center weight kept at rgba(...,0.105) to preserve v7 structural
   presence. The block:
     body[data-page="company"] .block-head {
       border-bottom-color: rgba(255,250,240,0.105);
     }
   that lived here in v7 (after the .doctrine-grid rule) is now
   dead and removed.

   (2) Section ::before atmospheric plates: v8 added a two-axis
   mask-image to the shared section ::before chassis. The
   horizontal mask half was tracking the .page { overflow: clip }
   boundary at calc(50vw ± 590px) with an 80px fade ramp. v9
   removes the .page clip, so the horizontal mask half is gone
   and only the vertical 10%/90% fade remains.

   v7 history (retained):

   v7 (reduced-motion gap fix — 2026-05-08): Retired the targeted
   reduced-motion override block that lived at the end of v6. The
   site-wide universal `*` selector in each page's inline
   reduced-motion @media block has been widened to
   `*, *::before, *::after`, so pseudo-element animations are now
   killed by the site-wide convention without needing per-file
   targeted patches. The block:
     @media (prefers-reduced-motion: reduce) {
       body[data-page="company"] .artifact-frame::before,
       body[data-page="company"] .loop-orbit::before {
         animation: none !important;
       }
     }
   that lived at the end of v6 is now dead and removed.

   v6 history (retained):

   v6 (debt sweep — 2026-05-08): Retired the M5 workaround for
   unnumbered .block-head sections. The shell in company.html inline
   <style> now declares explicit grid-column anchors (.num → col 1,
   h2 → col 2) so unnumbered sections work without per-section
   scoped patches. The
     body[data-page="company"] .company-divergence .block-head h2
     { grid-column: 2 }
   rule that lived here in v5 (after the .company-divergence::before
   rule) is now dead and removed.

   v5 history (retained):

   v5 (Phase 3 — L7): Fixed pre-existing selector bug in the
   reduced-motion override block. Was targeting `.loop-orbit` (no
   animation declared on the element); the actual animation is on
   `.loop-orbit::before`. Block now correctly targets both
   pseudo-elements that carry infinite animations on this page —
   `.artifact-frame::before` and `.loop-orbit::before`. The inline
   `* { animation: none }` rule on company.html does NOT cover these
   (universal `*` matches elements only, not pseudo-elements per CSS
   spec); see Comment above the block for the convention.

   v4 history (retained):

   v4 (Phase 2 — M-tier):
     M4: hide .oneofone-artifact below 720px (display:none); .company-hero-layout
         already collapses to 1fr at the 980 breakpoint, no further action.
         (Both the artifact and the .company-hero-layout grid wrapper are gone
         with the Q2 hero rewrite — the hero is now pure typography, single
         column. Mobile hide-below-720 is moot.)
     M5: new unnumbered .company-divergence section between §01 and §02 —
         added to the section selector list + ::before list + own atmosphere
         gradient (quiet teal bridge between origin amber and bet steel).
         (M5 also added a scoped grid-column: 2 workaround for the unnumbered
         .block-head h2 — retired in v6 in favor of explicit shell anchors.)
     M7: ordered-list semantics for .loop-list — list-style:none; padding:0;
         margin:0; to suppress default <ol> markers/indent. .loop-list article
         selector changed to .loop-list li (markup wrapper changed in same
         commit). (M7 also covered .record-steps; the .record-steps half is
         gone in v9 along with the .record-* cluster, and the .loop-list half
         is gone with the §05 build-loop deletion.)

   v3 history (retained):
     Absorbed the inline "Round 3: composed above-the-fold hero" block from
     company.html. Inline padding/min-height values were the deliberate
     refinement (atmosphere v2's values were vestigial — silently shadowed
     at the cascade). Migrated:
       .company-hero  padding/min-height/display flex/column/center
       .hero-sub      max-width 46ch + margin-top 28px (was 48ch)
       .hero-scroll-cue  margin-top clamp(56px, 10vh, 120px)  [new]
       .hero .hero-meta  margin-top clamp(80px, 14vh, 160px)  [new]
   ============================================================= */

body[data-page="company"] {
  --company-teal: 118 199 178;
  --company-amber: 204 154 84;
  --company-steel: 86 120 140;
  --company-ink: 239 236 230;
  overflow-x: clip;
}

body[data-page="company"] .page {
  --content-w: 1180px;
  position: relative;
}

body[data-page="company"] .company-hero,
body[data-page="company"] .company-origin,
body[data-page="company"] .company-divergence,
body[data-page="company"] .company-bet,
body[data-page="company"] .company-record,
body[data-page="company"] .company-doctrine,
body[data-page="company"] .company-cta {
  position: relative;
  isolation: isolate;
}

body[data-page="company"] .company-hero::before,
body[data-page="company"] .company-origin::before,
body[data-page="company"] .company-divergence::before,
body[data-page="company"] .company-bet::before,
body[data-page="company"] .company-record::before,
body[data-page="company"] .company-doctrine::before,
body[data-page="company"] .company-cta::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -2;
  pointer-events: none;
  /* Vertical 10%/90% fade per the hairline-fix language; section-height
     relative; uniform across all 9 sections. The horizontal mask half
     that lived here in v8 (calc(50vw ± 590px) with an 80px fade ramp,
     anchored to .page's content-column clip edge) is gone in v9: .page
     no longer carries `overflow: clip`, so atmospheric plates bleed to
     the full viewport edges naturally. Body's `overflow-x: clip` still
     prevents horizontal scroll. */
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to bottom,
      transparent 0%, #000 10%, #000 90%, transparent 100%);
}

body[data-page="company"] .company-hero::before {
  background:
    radial-gradient(ellipse 50% 42% at 73% 38%, rgb(var(--company-teal) / 0.17), transparent 72%),
    radial-gradient(ellipse 36% 34% at 82% 18%, rgb(var(--company-amber) / 0.08), transparent 74%),
    linear-gradient(180deg, rgba(11,10,9,0) 0%, rgba(8,16,15,0.38) 70%, rgba(11,10,9,0) 100%);
}

body[data-page="company"] .company-origin::before {
  background:
    radial-gradient(ellipse 48% 40% at 24% 32%, rgb(var(--company-amber) / 0.09), transparent 72%),
    linear-gradient(180deg, rgba(16,13,9,0.48), rgba(11,10,9,0.12));
}

body[data-page="company"] .company-divergence::before {
  background:
    radial-gradient(ellipse 50% 38% at 72% 48%, rgb(var(--company-teal) / 0.07), transparent 72%),
    linear-gradient(180deg, rgba(11,10,9,0.16), rgba(11,10,9,0.30));
}

body[data-page="company"] .company-bet::before {
  background:
    radial-gradient(ellipse 58% 45% at 50% 28%, rgb(var(--company-steel) / 0.105), transparent 74%),
    linear-gradient(180deg, rgba(9,13,16,0.42), rgba(11,10,9,0.08));
}

body[data-page="company"] .company-record::before {
  background:
    radial-gradient(ellipse 62% 52% at 50% 44%, rgb(var(--company-teal) / 0.12), transparent 74%),
    radial-gradient(ellipse 30% 40% at 86% 30%, rgb(var(--company-amber) / 0.045), transparent 70%),
    linear-gradient(180deg, rgba(8,15,13,0.46), rgba(11,10,9,0.12));
}

body[data-page="company"] .company-doctrine::before {
  background:
    radial-gradient(ellipse 54% 50% at 20% 20%, rgb(var(--company-teal) / 0.075), transparent 72%),
    radial-gradient(ellipse 48% 36% at 82% 70%, rgb(var(--company-amber) / 0.055), transparent 72%);
}

body[data-page="company"] .company-cta::before {
  background:
    radial-gradient(ellipse 64% 60% at 50% 74%, rgb(var(--company-teal) / 0.16), transparent 74%),
    radial-gradient(ellipse 36% 34% at 70% 34%, rgb(var(--company-amber) / 0.08), transparent 72%);
}

body[data-page="company"] .hero h1 {
  /* Pure-typography hero (Q2). Cap at 24ch + override the inline
     text-wrap: balance to `auto` so the natural greedy wrap lands
     after "record," instead of the algorithm's preferred more-equal
     split after "one". Verified at 1440 and 720 viewports. */
  max-width: 24ch;
  text-wrap: auto;
}

/* Single source of truth for .company-hero geometry — do not duplicate inline. */
body[data-page="company"] .company-hero {
  padding-top: clamp(80px, 14vh, 160px);
  padding-bottom: clamp(80px, 18vh, 200px);
  min-height: clamp(560px, 88vh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body[data-page="company"] .hero-scroll-cue {
  margin-top: clamp(56px, 10vh, 120px);
}

body[data-page="company"] .hero .hero-meta {
  margin-top: clamp(48px, 9svh, 120px);
}

body[data-page="company"] .hero-sub {
  max-width: 46ch;
  margin-top: 28px;
}

body[data-page="company"] .company-hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="company"] .company-hero-meta {
  margin-top: clamp(52px, 9vh, 100px);
}

/* Shared page details */
body[data-page="company"] .eyebrow {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--company-teal));
}

body[data-page="company"] section.block {
  margin-bottom: clamp(86px, 11vw, 132px);
}

body[data-page="company"] .block-head h2 {
  max-width: 760px;
}

/* Origin */
body[data-page="company"] .origin-grid {
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1px;
  background: rgba(255,250,240,0.075);
  border: 1px solid rgba(255,250,240,0.085);
  border-radius: 28px;
  overflow: hidden;
}

body[data-page="company"] .origin-card {
  position: relative;
  min-height: 220px;
  padding: clamp(24px, 3.8vw, 42px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    rgba(12,11,10,0.76);
}

body[data-page="company"] .origin-card-main {
  grid-row: span 2;
  min-height: 441px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body[data-page="company"] .origin-card-main::after {
  content: "";
  position: absolute;
  inset: auto 26px 28px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(118,199,178,0.28);
  background:
    radial-gradient(circle at 50% 50%, rgb(var(--company-teal) / 0.2), transparent 16%),
    repeating-conic-gradient(from 15deg, rgba(118,199,178,0.22) 0 1deg, transparent 1deg 18deg);
  opacity: 0.42;
  mask-image: radial-gradient(circle, #000 0 55%, transparent 76%);
}

body[data-page="company"] .origin-statement {
  margin-top: clamp(46px, 8vw, 96px);
  max-width: 12ch;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--ink);
}

body[data-page="company"] .origin-card:not(.origin-card-main) p {
  margin-top: 22px;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-sub);
}

/* Bet cards */
body[data-page="company"] .bet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

body[data-page="company"] .bet-card {
  position: relative;
  min-height: 300px;
  padding: 28px 26px;
  border: 1px solid rgba(255,250,240,0.085);
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% 18%, rgba(118,199,178,0.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.052), rgba(255,255,255,0.012)),
    rgba(12,11,10,0.74);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

body[data-page="company"] .bet-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -30% 28%;
  height: 52%;
  background: radial-gradient(ellipse, rgb(var(--company-teal) / 0.12), transparent 72%);
  opacity: 0;
  transition: opacity .25s ease;
}

body[data-page="company"] .bet-card:hover {
  transform: translateY(-4px);
  border-color: rgba(118,199,178,0.24);
}

body[data-page="company"] .bet-card:hover::after { opacity: 1; }

body[data-page="company"] .bet-index {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgb(var(--company-teal));
}

body[data-page="company"] .bet-card h3 {
  margin-top: 58px;
  max-width: 12ch;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ink);
}

body[data-page="company"] .bet-card p {
  margin-top: 22px;
  font-size: 0.94rem;
  color: var(--ink-sub);
}

/* Doctrine */
body[data-page="company"] .doctrine-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

body[data-page="company"] .doctrine-grid .principle {
  min-height: 210px;
  border: 1px solid rgba(255,250,240,0.085);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
    rgba(12,11,10,0.72);
  transition: transform .22s ease, border-color .22s ease;
}

body[data-page="company"] .doctrine-grid .principle:hover {
  transform: translateY(-3px);
  border-color: rgba(118,199,178,0.2);
}

/* CTA polish */
body[data-page="company"] .company-cta {
  border-radius: 30px;
  border-color: rgba(118,199,178,0.18);
  background:
    radial-gradient(ellipse at 80% 18%, rgb(var(--company-teal) / 0.14), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012)),
    rgba(12,11,10,0.74);
  overflow: hidden;
}

body[data-page="company"] .company-cta::after {
  content: "";
  position: absolute;
  inset: auto 28px 26px auto;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--company-teal) / 0.8), transparent);
  opacity: 0.6;
}

@media (max-width: 980px) {
  body[data-page="company"] .origin-grid,
  body[data-page="company"] .bet-grid,
  body[data-page="company"] .doctrine-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="company"] .origin-card-main {
    grid-row: auto;
    min-height: 320px;
  }

  body[data-page="company"] .origin-statement {
    max-width: 13ch;
  }
}

@media (max-width: 720px) {
  body[data-page="company"] .company-hero {
    min-height: auto;
    padding-top: 62px;
    padding-bottom: 72px;
  }

  body[data-page="company"] .company-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="company"] .company-hero-actions .btn,
  body[data-page="company"] .company-cta .btn {
    justify-content: center;
  }

  body[data-page="company"] section.block {
    margin-bottom: 76px;
  }

  body[data-page="company"] .origin-card,
  body[data-page="company"] .bet-card,
  body[data-page="company"] .doctrine-grid .principle {
    border-radius: 22px;
  }

  body[data-page="company"] .origin-card-main {
    min-height: 300px;
  }

  body[data-page="company"] .origin-statement {
    font-size: clamp(31px, 10vw, 46px);
  }

  body[data-page="company"] .bet-card {
    min-height: 240px;
  }

  body[data-page="company"] .bet-card h3 {
    margin-top: 42px;
  }

  body[data-page="company"] .company-cta {
    border-radius: 24px;
  }
}