/* ============================================================
   OZY — EDITORIAL REDESIGN LAYER  (additive; load AFTER styles.css)
   Goal: kill the "section-upon-section grid" monotony by giving
   each home section its OWN skeleton, in the visual language of
   the pitch deck — mono section indices, giant serif with coral
   italics, connecting lines, constellation nodes, technical
   mono readouts. Copy, palette and fonts unchanged.
   Scope: body.oz-bold.  Home page only (classes added in markup).
   ============================================================ */

/* ---------------- BOLDER DISPLAY TYPE ---------------- */
.oz-bold .hero-title{font-size:clamp(3.4rem,6vw,6rem);font-weight:800;line-height:0.94;letter-spacing:-0.04em}
.oz-bold .hero-title em{font-weight:700}
.oz-bold h2.display{font-weight:800;letter-spacing:-0.03em;line-height:1.04}
.oz-bold h2.display em{font-weight:700}
.oz-bold .stat-number{font-weight:800}

/* ============================================================
   SHARED — deck-style section index header
   "01 · THE PROBLEM"  with a short coral rule.
   ============================================================ */
.oz-secnum{display:flex;align-items:center;gap:0.85rem;font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:2.25rem}
.oz-secnum .n{color:rgba(200,197,190,0.42)}
.oz-secnum.on-sand .n{color:rgba(90,80,64,0.5)}
.oz-secnum .dot{width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none}
.oz-secnum.on-sand .dot{background:var(--terracotta)}
.oz-secnum .lbl{color:var(--coral)}
.oz-secnum.on-sand .lbl{color:var(--terracotta)}
.oz-secnum .rule{flex:1;height:1px;background:linear-gradient(to right,var(--ink-line),transparent);max-width:240px}
.oz-secnum.on-sand .rule{background:linear-gradient(to right,var(--sand-line),transparent)}

/* tiny constellation accent (SVG inherits currentColor via stroke) */
.oz-constellation{opacity:0.9}
.oz-constellation line{stroke:var(--ink-line);stroke-width:1}
.oz-constellation circle{fill:var(--ink-soft)}
.oz-constellation .hot{fill:var(--coral)}
.oz-constellation.on-sand line{stroke:var(--sand-line)}
.oz-constellation.on-sand circle{fill:#5a5040}
.oz-constellation.on-sand .hot{fill:var(--terracotta)}

/* ============================================================
   SECTION · PROBLEM TEASER  →  asymmetric editorial
   Left: pinned headline column.  Right: numbered rows w/ rules.
   ============================================================ */
.oz-problem{background:var(--ink-deep);padding:9rem var(--section-pad);border-bottom:1px solid var(--ink-line)}
.oz-problem-inner{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:0.92fr 1.08fr;gap:5rem;align-items:start}
.oz-problem-lead{position:sticky;top:7rem}
.oz-problem-lead h2{font-family:'Newsreader',serif;font-weight:800;color:var(--ink-paper);font-size:clamp(2rem,3.4vw,3rem);line-height:1.06;letter-spacing:-0.03em;margin-bottom:1.5rem}
.oz-problem-lead h2 em{font-style:italic;font-weight:700;color:var(--coral)}
.oz-problem-lead p{color:var(--ink-soft);font-weight:300;max-width:380px;line-height:1.7}
.oz-problem-list{display:flex;flex-direction:column}
.oz-problem-row{display:grid;grid-template-columns:auto 1fr;gap:1.75rem;padding:2rem 0;border-top:1px solid var(--ink-line);cursor:default}
.oz-problem-row:last-child{border-bottom:1px solid var(--ink-line)}
.oz-problem-row .rn{font-family:'Newsreader',serif;font-size:2.4rem;font-weight:700;color:rgba(232,154,130,0.5);line-height:0.9;font-style:italic}
.oz-problem-row .rt{font-family:'Newsreader',serif;font-size:1.45rem;font-weight:700;color:var(--ink-paper);line-height:1.2;margin-bottom:0.6rem;transition:color 0.25s}
.oz-problem-row:hover .rt{color:var(--coral)}
.oz-problem-row .rd{font-size:1rem;color:var(--ink-soft);font-weight:300;line-height:1.7;max-width:560px}

/* ============================================================
   SECTION · HOW IT WORKS  →  horizontal connected timeline
   Big serif number-nodes strung along a single line.
   ============================================================ */
.oz-flow{background:var(--sand-200);padding:9rem var(--section-pad);border-bottom:1px solid var(--sand-line)}
.oz-flow-inner{max-width:var(--content-max);margin:0 auto}
.oz-flow-head{max-width:720px;margin-bottom:4.5rem}
.oz-flow-head h2{font-family:'Newsreader',serif;font-weight:800;color:var(--sand-ink);font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;letter-spacing:-0.03em;margin-bottom:1.25rem}
.oz-flow-head h2 em{font-style:italic;font-weight:700;color:var(--terracotta)}
.oz-flow-head p{font-size:1.05rem;color:#5a5040;line-height:1.75;font-weight:300}
.oz-flow-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.oz-flow-track::before{content:"";position:absolute;top:34px;left:0;right:0;height:1px;background:var(--sand-line)}
.oz-flow-step{position:relative;padding-top:0}
.oz-flow-node{width:68px;height:68px;border-radius:50%;background:var(--sand-100);border:1px solid var(--sand-line);display:flex;align-items:center;justify-content:center;font-family:'Newsreader',serif;font-size:1.7rem;font-weight:700;color:var(--terracotta);position:relative;z-index:1;margin-bottom:1.75rem}
.oz-flow-step h3{font-family:'Newsreader',serif;font-size:1.3rem;font-weight:700;color:var(--sand-ink);margin-bottom:0.85rem;line-height:1.25}
.oz-flow-step p{font-size:0.98rem;color:#5a5040;line-height:1.75;font-weight:300}

/* ============================================================
   SECTION · WHAT OZY DELIVERS  →  stacked ledger rows
   Oversized serif index numeral + title + payoff, hairline ruled.
   ============================================================ */
.oz-ledger{background:var(--sand-100);padding:9rem var(--section-pad);border-bottom:1px solid var(--sand-line)}
.oz-ledger-inner{max-width:var(--content-max);margin:0 auto}
.oz-ledger h2.display{margin-bottom:3.5rem}
.oz-ledger-row{display:grid;grid-template-columns:minmax(120px,0.5fr) 1.1fr 1.4fr;gap:2.5rem;align-items:baseline;padding:2.75rem 0;border-top:1px solid var(--sand-line)}
.oz-ledger-row:last-child{border-bottom:1px solid var(--sand-line)}
.oz-ledger-row .ln{font-family:'Newsreader',serif;font-size:clamp(3rem,5vw,4.75rem);font-weight:700;color:var(--terracotta);line-height:0.82;font-style:italic}
.oz-ledger-row .lt{font-family:'Newsreader',serif;font-size:clamp(1.4rem,2vw,1.85rem);font-weight:700;color:var(--sand-ink);line-height:1.15}
.oz-ledger-row .lp{font-size:1rem;color:#5a5040;line-height:1.7;font-weight:300}

/* ============================================================
   SECTION · CAPABILITIES (6)  →  contents-index, two columns
   Numbered 01–06 rows with rules + a constellation aside header.
   ============================================================ */
.oz-capindex{background:var(--ink-deep);padding:9rem var(--section-pad);border-bottom:1px solid var(--ink-line)}
.oz-capindex-inner{max-width:var(--content-max);margin:0 auto}
.oz-capindex-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.5rem;flex-wrap:wrap}
.oz-capindex-top h2{font-family:'Newsreader',serif;font-weight:800;color:var(--ink-paper);font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;letter-spacing:-0.03em;max-width:680px}
.oz-capindex-top h2 em{font-style:italic;font-weight:700;color:var(--coral)}
.oz-capindex-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:5rem}
.oz-cap-row{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.85rem 0;border-top:1px solid var(--ink-line);cursor:default}
.oz-cap-row .cn{font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:700;color:var(--coral);letter-spacing:0.1em;padding-top:0.45rem;font-variant-numeric:tabular-nums}
.oz-cap-row .ct{font-family:'Newsreader',serif;font-size:1.25rem;font-weight:700;color:var(--ink-paper);line-height:1.2;margin-bottom:0.5rem;transition:color 0.25s}
.oz-cap-row:hover .ct{color:var(--coral)}
.oz-cap-row .cd{font-size:0.96rem;color:var(--ink-soft);font-weight:300;line-height:1.7}

/* ============================================================
   SECTION · TWO USE CASES  →  diptych split (center rule)
   ============================================================ */
.oz-diptych{background:var(--sand-200);padding:9rem var(--section-pad);border-bottom:1px solid var(--sand-line)}
.oz-diptych-inner{max-width:var(--content-max);margin:0 auto}
.oz-diptych-head{text-align:center;max-width:720px;margin:0 auto 4rem}
.oz-diptych-head .oz-secnum{justify-content:center}
.oz-diptych-head h2{font-family:'Newsreader',serif;font-weight:800;color:var(--sand-ink);font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;letter-spacing:-0.03em;margin-bottom:1.25rem}
.oz-diptych-head h2 em{font-style:italic;font-weight:700;color:var(--terracotta)}
.oz-diptych-head p{font-size:1.05rem;color:#5a5040;line-height:1.75;font-weight:300}
.oz-diptych-panels{display:grid;grid-template-columns:1fr 1px 1fr;gap:0;align-items:stretch}
.oz-diptych-rule{background:var(--sand-line)}
.oz-diptych-panel{padding:1rem 3rem}
.oz-diptych-panel:first-child{padding-left:0}
.oz-diptych-panel:last-child{padding-right:0}
.oz-diptych-kicker{font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--terracotta);margin-bottom:1.5rem;display:flex;align-items:center;gap:0.6rem}
.oz-diptych-kicker::before{content:"";width:24px;height:1px;background:var(--terracotta)}
.oz-diptych-panel h3{font-family:'Newsreader',serif;font-size:clamp(1.5rem,2.1vw,1.95rem);font-weight:700;color:var(--sand-ink);margin-bottom:1.1rem;line-height:1.18}
.oz-diptych-panel .body{font-size:1rem;color:#5a5040;line-height:1.75;font-weight:300;margin-bottom:1.5rem}
.oz-diptych-panel .pay{font-size:0.98rem;color:var(--terracotta);line-height:1.55;font-weight:500;font-family:'Newsreader',serif;font-style:italic}

/* ============================================================
   SECTION · WHY NOW  →  editorial + technical mono readout
   ============================================================ */
.oz-whynow{background:var(--sand-200);padding:9rem var(--section-pad);border-bottom:1px solid var(--sand-line)}
.oz-whynow-inner{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1.1fr 0.9fr;gap:5rem;align-items:center}
.oz-whynow-text h2{font-family:'Newsreader',serif;font-weight:800;color:var(--sand-ink);font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;letter-spacing:-0.03em;margin-bottom:1.75rem}
.oz-whynow-text h2 em{font-style:italic;font-weight:700;color:var(--terracotta)}
.oz-whynow-text p{font-size:1.05rem;color:#5a5040;line-height:1.8;font-weight:300;max-width:520px}
.oz-readout{border:1px solid var(--sand-line);background:var(--sand-100);position:relative}
.oz-readout::before,.oz-readout::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--terracotta);opacity:0.6}
.oz-readout::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.oz-readout::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.oz-readout-head{font-family:'JetBrains Mono',monospace;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--terracotta);padding:1.4rem 1.75rem;border-bottom:1px solid var(--sand-line)}
.oz-readout-rows{padding:0.6rem 1.75rem 1.4rem}
.oz-readout-row{display:grid;grid-template-columns:auto 1fr auto;gap:0.6rem;align-items:baseline;padding:0.85rem 0;font-family:'JetBrains Mono',monospace;font-size:0.74rem}
.oz-readout-row .k{color:rgba(90,80,64,0.7);letter-spacing:0.06em;text-transform:uppercase;font-size:0.6rem}
.oz-readout-row .leader{border-bottom:1px dotted var(--sand-line);transform:translateY(-3px)}
.oz-readout-row .v{color:var(--sand-ink);text-align:right;font-weight:500;max-width:230px;white-space:normal;line-height:1.4}
.oz-whynow-links{display:flex;gap:1.5rem;padding:1.25rem 1.75rem 0}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:860px){
  /* more comfortable side margins on mobile (site clamped these too tight) */
  :root{--section-pad:1.9rem}
  .hero-left{padding-left:1.9rem;padding-right:1.9rem}
  /* hero trust-strip: 4 labels are one row on desktop; on mobile lay
     them out as a tidy 2×2 grid with marker dots instead of a ragged wrap */
  .page-container[data-page="home"] [style*="gap:2.5rem"]{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:0.85rem 1.1rem!important;
    align-items:start!important;
  }
  .page-container[data-page="home"] [style*="gap:2.5rem"] > span{
    display:flex;
    align-items:flex-start;
    gap:0.5rem;
    line-height:1.35;
  }
  .page-container[data-page="home"] [style*="gap:2.5rem"] > span::before{
    content:"";
    width:5px;height:5px;border-radius:50%;
    background:var(--terracotta);
    flex:none;
    margin-top:0.42em;
  }
  /* nav hamburger had a negative right margin pulling it tight to the
     screen edge — cancel it so it respects the nav's padding */
  .nav-toggle{margin-right:0}
  /* when the menu is fanned open it must FULLY occlude the hero behind it.
     The base panel bg is only 98% opaque, so the giant hero headline bled
     through and collided with the link text. Make it solid + lift above hero. */
  nav{z-index:200}
  nav .nav-links{
    background:var(--ink-deep)!important;
    z-index:200!important;
    box-shadow:0 28px 60px -16px rgba(0,0,0,0.75);
  }
  /* failure-mode rows: the reveal clamps the description to 120px, which is
     fine on desktop's wide column but clips badly on a narrow phone column
     (text wraps to 7–8 lines), so it gets cut off mid-word by the next row.
     Give the revealed copy ample room on mobile. */
  .problem-failure-item:hover .problem-failure-desc{max-height:480px}
  /* tame desktop vertical padding to match the site's mobile rhythm */
  .oz-problem,.oz-flow,.oz-ledger,.oz-capindex,.oz-diptych,.oz-whynow{padding-top:4.5rem;padding-bottom:4.5rem}
  .oz-secnum{margin-bottom:1.75rem}
  .oz-problem-inner{grid-template-columns:1fr;gap:2.5rem}
  .oz-problem-lead{position:static}
  .oz-flow-track{grid-template-columns:1fr;gap:0}
  .oz-flow-track::before{display:none}
  .oz-flow-step{padding-left:0;padding-bottom:2.5rem;border-left:1px solid var(--sand-line);padding-left:2rem;margin-left:33px}
  .oz-flow-node{margin-left:-2rem}
  .oz-ledger-row{grid-template-columns:auto 1fr;gap:1.25rem 1.5rem}
  .oz-ledger-row .lp{grid-column:2}
  .oz-capindex-grid{grid-template-columns:1fr;column-gap:0}
  .oz-whynow-inner{grid-template-columns:1fr;gap:2.5rem}
  .oz-diptych-panels{grid-template-columns:1fr;gap:0}
  .oz-diptych-rule{height:1px;width:auto;margin:2.5rem 0}
  .oz-diptych-panel{padding:0!important}

  /* ── CLARITY scroll-reveal: re-pin on mobile ───────────────────────────
     The base mobile CSS unpins this section (height:auto, static stack), so
     the disorganized→organized scrub completes before the canvas ever
     scrolls into view — you only ever see the finished "organized" state,
     and the canvas backing store mis-sizes (cut off). Restore a compact,
     single-column PINNED scrub so the animation plays as you scroll. */
  .trust-pin-outer{height:240vh}
  .trust-pin-inner{
    position:sticky;top:0;height:100vh;min-height:520px;
    display:flex;flex-direction:column;
    grid-template-columns:none;overflow:hidden;
  }
  .trust-text-col{
    border-right:none;border-bottom:1px solid var(--ink-line);
    justify-content:flex-start;flex:0 0 auto;
    padding:max(3.5vh,1.4rem) 1.4rem 1.3rem;
  }
  .trust-text-col .display{font-size:clamp(1.5rem,5.5vw,2rem);margin-bottom:0.9rem}
  .trust-sub{max-width:none;margin-bottom:1.3rem}
  /* restore the absolute swap so only the active stage label shows */
  .trust-stage-labels{position:relative;min-height:58px;display:block;margin-bottom:1rem}
  .trust-stage-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(8px);pointer-events:none}
  .trust-stage-label.active{opacity:1;transform:none}
  .trust-canvas-col{flex:1 1 auto;min-height:150px;height:auto;border-top:none}

  /* science page "deliverables" step flow: a 4-card horizontal row
     (justify-content:center) overflows a phone and clips Step 1 / Step 4.
     Stack it vertically with the → connectors pointing down. */
  [style*="align-items:stretch;gap:0;justify-content:center"]{
    flex-direction:column;align-items:stretch!important;max-width:360px;margin:0 auto;
  }
  [style*="align-items:stretch;gap:0;justify-content:center"] > div[style*="max-width:200px"]{
    max-width:none!important;
  }
  [style*="align-items:stretch;gap:0;justify-content:center"] > div[style*="font-size:1.2rem"]{
    display:none!important;
  }
  [style*="align-items:stretch;gap:0;justify-content:center"] > div[style*="max-width:200px"]:not(:last-child){
    border-bottom:none!important;
  }
  [style*="align-items:stretch;gap:0;justify-content:center"] > div[style*="border-radius:8px 0 0 8px"]{
    border-radius:8px 8px 0 0!important;
  }
  [style*="align-items:stretch;gap:0;justify-content:center"] > div[style*="border-radius:0 8px 8px 0"]{
    border-radius:0 0 8px 8px!important;
  }
}