:root{
    --bg:        #0A0A0B;
    --surface-1: #14141A;
    --surface-2: #1A1A22;
    --surface-3: #22222C;
    --hairline:  #2A2A33;
    --hairline-strong: #3A3A48;
    --ink:       #F2F2F0;
    --ink-soft:  #C8C7C2;
    --ink-body:  #A8A7A2;
    --ink-muted: #6B6B68;
    --ink-faint: #4A4A48;
    --slate:     #9AAEB5;
    --slate-deep:#5C6E76;
    /* COLOR FLIP EXPERIMENT — burnt ↔ blue-deep swapped */
    --burnt:     #028CBC;
    --burnt-deep:#016A8E;
    --mint:      #5FE0B3;
    --signal:    #E8B83A;
    --violet:    #B388FF;
    --cyan:      #7BB6E0;
    /* Brand blues — --blue-deep now carries orange (data/structure role) */
    --blue-deep: #E26A2C;
    --blue:      #48C1EB;
    --blue-pale: #A3DDF2;

    --maxw: 1320px;
    --pad-x: 56px;
    --radius: 10px;
    --radius-lg: 16px;

    --sans: 'Geist', system-ui, -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
  }

  *,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg); color:var(--ink-body);
    font-family:var(--sans); font-weight:400; line-height:1.55;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  body::before{
    content:'';
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(60vw 50vh at 80% 0%, rgba(2, 140, 188,0.06), transparent 60%),
      radial-gradient(50vw 60vh at 0% 30%, rgba(154,174,181,0.05), transparent 70%);
  }
  ::selection{background:var(--burnt); color:var(--bg);}
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  main{position:relative; z-index:1;}

  .container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);}
  .container-narrow{max-width:920px; margin:0 auto; padding:0 var(--pad-x);}

  /* Type */
  /* Display headings.
     - line-height bumped from 1.02/1.04 to 1.06/1.08 so descenders + ascenders
       on adjacent lines breathe instead of touching (especially at the mobile
       clamp floor where 1.02 produced ~0.9px gap).
     - letter-spacing eased on smaller sizes via media query below — at 44px
       the original -0.034em felt oppressive; perception of tightness scales
       differently from font size.
     - text-wrap: balance lets the browser even out short wrapped headings
       so we don't get a "Biological" widow alone on line 1. */
  .display-xxl{font-family:var(--sans); font-weight:600; font-size:clamp(44px, 5.8vw, 84px); line-height:1.06; letter-spacing:-0.034em; color:var(--ink); text-wrap:balance;}
  .display-xl {font-family:var(--sans); font-weight:600; font-size:clamp(32px, 4vw, 56px); line-height:1.08; letter-spacing:-0.028em; color:var(--ink); text-wrap:balance;}
  .display-l  {font-family:var(--sans); font-weight:600; font-size:clamp(26px, 2.8vw, 38px); line-height:1.12; letter-spacing:-0.022em; color:var(--ink); text-wrap:balance;}
  @media (max-width: 640px){
    /* Mobile polish pass 2026-05-09: reduce display sizes from the clamp floor
       (44/32/26) to a tighter set (34/24/20) so headlines feel composed rather
       than chunky on a 358-wide column. Verified visually with Playwright at
       360/390/414. Letter-spacing and line-height tuned alongside. */
    .display-xxl{ font-size:34px;  letter-spacing:-0.018em; line-height:1.10; }
    .display-xl { font-size:24px;  letter-spacing:-0.014em; line-height:1.18; }
    .display-l  { font-size:20px;  letter-spacing:-0.012em; line-height:1.22; }
    .display-m  { font-size:18px;  line-height:1.30; }
    .subhead-l  { font-size:16.5px; line-height:1.45; }
    .lede       { font-size:16px;  line-height:1.55; }
    .body       { font-size:14.5px; }
  }
  .display-m{font-family:var(--sans); font-weight:600; font-size:22px; line-height:1.25; letter-spacing:-0.014em; color:var(--ink);}
  .subhead-l{font-family:'Fraunces','Times New Roman',serif; font-weight:300; font-style:italic; font-size:clamp(21px, 2vw, 28px); line-height:1.4; letter-spacing:-0.005em; color:var(--ink-soft); opacity:0.92;}
  .accent-slate{color:var(--slate);}
  .accent-burnt{color:var(--burnt);}
  .accent-mint{color:var(--mint);}

  .lede{font-size:18px; line-height:1.55; color:var(--ink-soft); max-width:64ch;}
  .body{font-size:15px; line-height:1.7; color:var(--ink-body); max-width:64ch;}
  .body p + p{margin-top:14px;}

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    padding:5px 12px;
    border:1px solid var(--hairline);
    border-radius:999px; background:var(--surface-1);
    font-family:var(--mono); font-weight:500; font-size:10.5px;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--burnt); box-shadow:0 0 8px rgba(2, 140, 188,0.6);}
  .label-mono{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted);}

  /* Buttons */
  .btn{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; font-family:var(--sans); font-weight:500; font-size:14px; border-radius:8px; transition:all .18s ease; border:1px solid transparent;}
  .btn .arrow{transition:transform .2s ease;}
  .btn:hover .arrow{transform:translateX(3px);}
  .btn-primary{background:var(--ink); color:var(--bg);}
  .btn-primary:hover{background:#fff;}
  .btn-burnt{background:var(--burnt); color:var(--bg); box-shadow:0 0 0 1px rgba(2, 140, 188,0.3), 0 6px 24px rgba(2, 140, 188,0.18);}
  .btn-burnt:hover{background:#F08249; box-shadow:0 0 0 1px rgba(2, 140, 188,0.5), 0 8px 28px rgba(2, 140, 188,0.28);}
  .btn-ghost{background:var(--surface-1); color:var(--ink-soft); border-color:var(--hairline);}
  .btn-ghost:hover{border-color:var(--hairline-strong); color:var(--ink);}

  /* Scroll progress bar */
  .scroll-progress{
    position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
    background:transparent; pointer-events:none;
  }
  .scroll-progress .bar{
    height:100%; width:0;
    background:linear-gradient(90deg, var(--blue-pale) 0%, var(--blue) 50%, var(--blue-deep) 100%);
    box-shadow:0 0 12px rgba(72,193,235,0.45);
    transition:width 0.08s linear;
  }

  /* Reveal on scroll */
  .reveal{opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(0.22,0.61,0.36,1), transform .8s cubic-bezier(0.22,0.61,0.36,1);}
  .reveal.revealed{opacity:1; transform:translateY(0);}
  .reveal.delay-1{transition-delay:0.08s;}
  .reveal.delay-2{transition-delay:0.16s;}
  .reveal.delay-3{transition-delay:0.24s;}
  .reveal.delay-4{transition-delay:0.32s;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }

  /* Ambient hero gradient drift */
  @keyframes ambientDrift{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(2%, -1%) scale(1.05);}
    66%{transform:translate(-1%, 2%) scale(0.97);}
  }
  body::before{animation:ambientDrift 28s ease-in-out infinite;}

  /* Animated chart bars (height/width grows on reveal) */
  .chart-card.reveal .anim-bar{transform:scaleX(0); transform-origin:left center; transition:transform 1.2s cubic-bezier(0.22,0.61,0.36,1);}
  .chart-card.revealed .anim-bar{transform:scaleX(1);}
  .chart-card.reveal .anim-line{stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.6s cubic-bezier(0.22,0.61,0.36,1) 0.2s;}
  .chart-card.revealed .anim-line{stroke-dashoffset:0;}
  .chart-card.reveal .anim-fill{opacity:0; transition:opacity 0.8s ease 0.8s;}
  .chart-card.revealed .anim-fill{opacity:1;}
  .chart-card.reveal .anim-pt{opacity:0; transform:scale(0); transform-origin:center; transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);}
  .chart-card.revealed .anim-pt{opacity:1; transform:scale(1);}
  .chart-card.reveal .anim-pt.d1{transition-delay:0.6s;}
  .chart-card.reveal .anim-pt.d2{transition-delay:0.9s;}
  .chart-card.reveal .anim-pt.d3{transition-delay:1.2s;}

  /* AMR panel bar fills (animate on reveal) */
  .amr-panel.reveal .amr-bar .fill{transform:scaleX(0); transform-origin:left; transition:transform 1.0s cubic-bezier(0.22,0.61,0.36,1) 0.2s;}
  .amr-panel.revealed .amr-bar .fill{transform:scaleX(1);}

  /* Magnetic-feel CTA */
  .btn-burnt{transition:all .25s cubic-bezier(0.34,1.56,0.64,1);}
  .btn-burnt:hover{transform:translateY(-1px);}

  /* Drill-down link — quiet section-tail CTA into inner pages */
  .drill{
    display:inline-flex; align-items:center; gap:14px;
    margin-top:48px; padding:14px 0;
    font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--blue); text-decoration:none;
    border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
    transition:color .2s ease, padding .2s ease, border-color .2s ease;
  }
  .drill .drill-label{color:var(--ink); letter-spacing:0; font-family:var(--sans); font-size:14px; text-transform:none;}
  .drill .drill-arrow{display:inline-block; transition:transform .2s ease; color:var(--blue);}
  .drill:hover{color:var(--blue-pale); border-color:var(--blue-deep); padding-left:6px;}
  .drill:hover .drill-arrow{transform:translateX(4px);}
  .drill-wrap{display:block; max-width:560px; margin-top:32px;}

  /* Status pulse */
  @keyframes statusPulse{
    0%,100%{opacity:1; box-shadow:0 0 6px rgba(95,224,179,0.55);}
    50%{opacity:0.7; box-shadow:0 0 14px rgba(95,224,179,0.95);}
  }
  .pulse-mint{animation:statusPulse 2.4s ease-in-out infinite;}

  /* Bloomberg-style client ticker */
  .ticker-bar{
    background:var(--surface-1);
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    overflow:hidden;
    padding:16px 0;
    position:relative;
  }
  .ticker-bar::before,
  .ticker-bar::after{
    content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
  }
  .ticker-bar::before{left:0; background:linear-gradient(to right, var(--surface-1), transparent);}
  .ticker-bar::after{right:0; background:linear-gradient(to left, var(--surface-1), transparent);}
  .ticker-track{
    display:inline-flex; white-space:nowrap;
    animation:tickerScroll 60s linear infinite;
    gap:36px;
  }
  .ticker-item{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:11px;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .ticker-item .dot{width:5px; height:5px; border-radius:50%; background:var(--burnt); flex-shrink:0;}
  .ticker-item .sep{color:var(--ink-faint); margin:0 4px;}
  .ticker-item .num{color:var(--ink-muted); margin-left:6px;}
  .ticker-item.new{color:var(--mint);}
  .ticker-item.new .dot{background:var(--mint); box-shadow:0 0 6px rgba(95,224,179,0.55); animation:statusPulse 1.6s ease-in-out infinite;}
  .ticker-item.new .num{color:rgba(95,224,179,0.7);}
  .ticker-item.new .new-badge{display:inline-block; padding:2px 6px; background:rgba(95,224,179,0.18); color:var(--mint); border-radius:3px; font-size:9px; letter-spacing:0.16em; margin-left:6px;}
  @keyframes tickerScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* Passage grid (planter section prose) */
  .passage-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:48px 56px;
    max-width:1100px; margin:48px auto 0;
  }
  .passage{}
  .passage-label{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--burnt);
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px; padding-bottom:14px;
    border-bottom:1px solid var(--hairline);
  }
  .passage-label .num{color:var(--ink-muted); font-weight:500;}
  .passage p{font-size:14.5px; line-height:1.7; color:var(--ink-body); max-width:48ch;}
  .passage p strong{color:var(--ink); font-weight:600;}

  /* Hover glow on stack cells, tiers, knowledge cards, clients */
  .stack-cell, .tier, .know-card, .client, .rung{transition:background .2s ease, border-color .2s ease, box-shadow .25s ease;}
  .stack-cell:hover, .know-card:hover, .rung:hover{box-shadow:inset 0 0 0 1px var(--hairline-strong), 0 0 24px rgba(2, 140, 188,0.04);}
  .tier:hover, .client:hover{box-shadow:inset 0 0 0 1px var(--hairline-strong);}

  /* Header */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(10,10,11,0.78); backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid var(--hairline);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px var(--pad-x); max-width:var(--maxw); margin:0 auto; gap:12px;}
  .brand svg{height:22px; width:auto;}
  .nav-links{display:flex; gap:32px; align-items:center;}
  .nav-links a{font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:color .15s;}
  .nav-links a:hover{color:var(--ink);}
  .nav-cta .btn{padding:9px 16px; font-size:13px;}
  /* Back-to-home link — sits between brand and nav-links on inner pages.
     Provides explicit "go back" affordance especially on mobile where
     .nav-links is hidden and the brand logo is the only implicit home link. */
  .back-home{
    display:inline-flex; align-items:center; gap:6px;
    margin-left:14px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--ink-muted);
    padding:5px 10px; border-radius:999px;
    border:1px solid var(--hairline);
    transition:color .15s, border-color .15s, background .15s;
    white-space:nowrap;
  }
  .back-home:hover{ color:var(--ink); border-color:var(--hairline-strong); background:var(--surface-1); }
  .back-home .arrow{ font-size:13px; line-height:1; }

  /* HERO */
  .hero{padding:96px 0 60px; position:relative;}
  .hero .grid{display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:end;}
  .hero h1{margin-bottom:24px;}
  .hero .lede{margin-bottom:32px; font-size:18.5px;}
  .hero-meta{
    display:flex; flex-direction:column; gap:0;
    background:rgba(20,20,26,0.62);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid var(--hairline);
    border-radius:var(--radius);
    padding:18px 22px;
  }
  .hero-meta .row{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:11px 0; border-bottom:1px solid var(--hairline);}
  .hero-meta .row:last-child{border-bottom:none;}
  .hero-meta .row .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-muted); align-self:center;}
  .hero-meta .row .v{font-family:var(--sans); font-weight:500; font-size:14px; color:var(--ink); text-align:right;}
  .hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

  /* Stats band */
  .stats{
    margin-top:72px;
    display:grid; grid-template-columns:repeat(4, 1fr);
    background:var(--surface-1); border:1px solid var(--hairline);
    border-radius:var(--radius-lg); overflow:hidden; position:relative;
  }
  .stats::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(80% 100% at 80% 0%, rgba(2, 140, 188,0.10), transparent 60%);
    pointer-events:none;
  }
  .stat{padding:32px 28px; border-right:1px solid var(--hairline); position:relative;}
  .stat:last-child{border-right:none;}
  .stat .num{font-family:var(--sans); font-weight:600; font-size:48px; line-height:1; letter-spacing:-0.03em; color:var(--ink);}
  .stat .num .unit{font-size:22px; color:var(--burnt); margin-left:4px;}
  .stat .label{margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted);}

  /* Section */
  section{padding:96px 0; position:relative;}
  .section-head{margin-bottom:56px; max-width:64ch;}
  .section-head .eyebrow{margin-bottom:24px;}
  .section-head h2{margin-bottom:18px;}
  hr.divider{
    border:0; height:1px; margin:0; position:relative;
    background:var(--hairline);
    overflow:hidden;
  }
  /* The burnt-orange tick is the resting pose of an animated bar (::after).
     Edges are soft — gradient fades transparent → burnt → transparent so
     there are no hard borders. Mac-sleep-light-style breathing at home:
     opacity sweeps deeply between 0.16 and 1.0 with sinusoidal easing, so
     it reads as a slow living rhythm. The journey across the divider is
     fired ONCE per divider, the moment that divider scrolls into view —
     triggered by the .greeted class added by an IntersectionObserver in
     site.js. After the journey lands, breath resumes alone. */
  hr.divider::after{
    content:''; position:absolute; top:0; left:0;
    width:96px; height:100%;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--blue-deep) 28%,
      var(--blue-deep) 72%,
      transparent 100%);
    animation:dividerBreath 4.3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    pointer-events:none;
  }
  @keyframes dividerBreath{
    0%, 100% { opacity:0.16; }
    50%      { opacity:1; }
  }
  /* When the divider arrives in view, the journey runs once over breath.
     Breath is listed first so dividerJourney (last in the list) wins for
     properties both touch — left and opacity — for the duration of the
     journey only. After the one iteration, journey stops affecting
     properties and breath alone drives opacity. */
  hr.divider.greeted::after{
    animation:
      dividerBreath 4.3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
      dividerJourney 5s cubic-bezier(0.5, 0, 0.2, 1) 1;
  }
  /* Round trip: bar travels to far end, holds briefly, returns home, then
     fades into the breath bottom so the handoff to breath alone is smooth. */
  @keyframes dividerJourney{
    0%   { left:0; opacity:1; }
    40%  { left:calc(100% - 96px); opacity:1; }
    50%  { left:calc(100% - 96px); opacity:1; }
    90%  { left:0; opacity:1; }
    100% { left:0; opacity:0.16; }
  }
  @media (prefers-reduced-motion: reduce){
    hr.divider{
      background:linear-gradient(90deg,
        transparent 0%,
        var(--blue-deep) 18px,
        var(--blue-deep) 60px,
        transparent 96px,
        var(--hairline) 96px,
        var(--hairline) 100%);
    }
    hr.divider::after{ animation:none; display:none; }
  }

  /* PLANTER section — dotted scan portrait */
  .planter-block{display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:center;}
  .planter-frame{
    position:relative; aspect-ratio:2/3; border-radius:var(--radius);
    overflow:hidden; background:var(--surface-2); border:1px solid var(--hairline);
  }
  .planter-frame img{width:100%; height:100%; object-fit:cover; filter:contrast(1.06) brightness(0.95);}
  .planter-frame::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 1px 1px, rgba(154,174,181,0.32) 1px, transparent 1.4px);
    background-size:6px 6px;
    mix-blend-mode:screen;
    mask-image:linear-gradient(120deg, transparent 0%, black 35%, black 65%, transparent 100%);
    -webkit-mask-image:linear-gradient(120deg, transparent 0%, black 35%, black 65%, transparent 100%);
    pointer-events:none;
  }
  .planter-frame .scan-label{
    position:absolute; top:14px; left:14px; z-index:2;
    font-family:var(--mono); font-size:10px; color:var(--mint); letter-spacing:0.18em;
  }
  .planter-frame .scan-id{
    position:absolute; bottom:14px; right:14px; z-index:2;
    font-family:var(--mono); font-size:10px; color:var(--ink-muted); letter-spacing:0.04em;
  }
  /* Floating data labels around the portrait */
  .planter-data{position:absolute; pointer-events:none; z-index:3; font-family:var(--mono); font-size:10px; color:var(--ink); letter-spacing:0.04em; display:flex; align-items:center; gap:6px;}
  .planter-data::before{content:''; width:4px; height:4px; background:var(--burnt); display:inline-block;}
  .planter-data.tl{top:18%; left:-8%;}
  .planter-data.tr{top:8%;  right:-12%;}
  .planter-data.mr{top:48%; right:-15%;}
  .planter-data.bl{bottom:14%; left:-12%;}
  .planter-data.br{bottom:30%; right:-10%;}

  /* Tech stack overview */
  .stack-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden;}
  .stack-cell{background:var(--surface-1); padding:28px 22px; transition:background .2s;}
  .stack-cell:hover{background:var(--surface-2);}
  .stack-cell .stack-num{font-family:var(--mono); font-size:10.5px; color:var(--blue); letter-spacing:0.14em; margin-bottom:18px;}
  .stack-cell .stack-name{font-family:var(--sans); font-weight:600; font-size:18px; color:var(--ink); margin-bottom:6px; letter-spacing:-0.012em;}
  .stack-cell .stack-cat{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:14px;}
  .stack-cell .stack-desc{font-size:13px; color:var(--ink-body); line-height:1.55;}

  /* Deep dive (AMR + Matrix layout pattern) */
  .deepdive{display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start;}
  .deepdive .left h3{margin-bottom:18px;}
  .deepdive .left .body{margin-bottom:28px;}
  .specs{border-top:1px solid var(--hairline); padding-top:8px;}
  .spec-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--hairline);}
  .spec-row:last-child{border-bottom:none;}
  .spec-row .k{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--ink-muted); text-transform:uppercase;}
  .spec-row .v{font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:500;}
  .deepdive .right{background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:0; min-height:380px; position:relative; overflow:hidden;}

  /* AMR spec readout panel */
  .amr-panel{font-family:var(--mono); padding:0;}
  .amr-panel-head{display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--hairline); background:var(--bg);}
  .amr-panel-head .dot{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px rgba(95,224,179,0.55);}
  .amr-panel-head .id{font-size:11px; color:var(--ink); letter-spacing:0.14em;}
  .amr-panel-head .meta{margin-left:auto; font-size:10px; color:var(--ink-muted); letter-spacing:0.14em;}
  .amr-panel-section{padding:18px 22px; border-bottom:1px solid var(--hairline);}
  .amr-panel-section:last-child{border-bottom:none;}
  .amr-panel-section .section-label{font-size:10px; color:var(--blue); letter-spacing:0.18em; margin-bottom:14px;}
  .amr-row{display:grid; grid-template-columns:84px 1fr 90px; gap:14px; align-items:center; padding:8px 0;}
  .amr-row + .amr-row{border-top:1px solid var(--hairline);}
  .amr-row .row-tag{font-size:10px; color:var(--ink-muted); letter-spacing:0.14em;}
  .amr-row .row-name{font-size:12px; color:var(--ink); letter-spacing:0.04em;}
  .amr-row .row-value{font-size:11px; color:var(--ink); text-align:right; letter-spacing:0.04em;}
  .amr-row.accent .row-value{color:var(--burnt);}
  .amr-bar{position:relative; height:5px; background:var(--surface-3); border-radius:2px; margin-top:6px; overflow:hidden;}
  .amr-bar .fill{position:absolute; left:0; top:0; bottom:0; background:var(--ink);}
  .amr-bar .fill.burnt{background:var(--burnt);}
  .amr-bar .fill.mint{background:var(--mint);}
  .amr-row .row-bar{grid-column:2 / span 2;}

  /* CARBON OBSERVATORY DASHBOARD */
  .carbon-dash{
    background:var(--surface-1);
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:48px;
    position:relative;
  }
  .carbon-dash::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(60% 80% at 70% 0%, rgba(2, 140, 188,0.06), transparent 70%);
    pointer-events:none;
  }
  .dash-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px;
    border-bottom:1px solid var(--hairline);
    background:var(--bg);
    font-family:var(--mono); font-size:11px;
    letter-spacing:0.14em; color:var(--ink);
    position:relative; z-index:2;
  }
  .dash-head .left{display:flex; align-items:center; gap:10px;}
  .dash-head .right{color:var(--ink-muted); font-size:10px;}
  .dash-body{display:grid; grid-template-columns:1.5fr 1fr; gap:0; position:relative; z-index:1;}
  .dash-map{position:relative; border-right:1px solid var(--hairline); padding:24px 28px; min-height:420px;}
  .dash-map svg{width:100%; height:auto; display:block;}
  .dash-side{padding:24px 28px; display:flex; flex-direction:column; gap:22px;}
  .dash-side-stat{padding-bottom:18px; border-bottom:1px solid var(--hairline);}
  .dash-side-stat:last-child{border-bottom:none; padding-bottom:0;}
  .dash-side-stat .num{font-family:var(--sans); font-weight:600; font-size:38px; line-height:1; letter-spacing:-0.022em; color:var(--ink);}
  .dash-side-stat .num .unit{font-size:14px; color:var(--burnt); margin-left:4px; font-weight:500;}
  .dash-side-stat .label{margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); line-height:1.4;}
  .dash-side-stat .equiv{margin-top:6px; font-family:var(--mono); font-size:10.5px; color:var(--mint); letter-spacing:0.04em;}
  .dash-foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 22px; border-top:1px solid var(--hairline); background:var(--bg); font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--ink-muted);}
  .dash-foot .key{display:inline-flex; align-items:center; gap:6px;}
  .dash-foot .key::before{content:''; width:4px; height:4px; background:var(--burnt); display:inline-block;}

  /* Site markers — pulsing dots */
  @keyframes sitePulseGlow{
    0%,100%{r:3.2; opacity:0.95;}
    50%{r:4.4; opacity:0.55;}
  }
  .site-marker{fill:#E26A2C; animation:sitePulseGlow 2.4s ease-in-out infinite;}
  .site-marker-halo{fill:rgba(2, 140, 188,0.18); animation:siteHaloPulse 2.4s ease-in-out infinite;}
  @keyframes siteHaloPulse{
    0%,100%{r:6; opacity:0.4;}
    50%{r:11; opacity:0;}
  }
  /* New build marker — mint with stronger pulse */
  .site-marker-new{fill:#5FE0B3; animation:newPulse 1.8s ease-in-out infinite;}
  .site-marker-halo-new{fill:rgba(95,224,179,0.22); animation:newHaloPulse 1.8s ease-in-out infinite;}
  @keyframes newPulse{
    0%,100%{r:4; opacity:1;}
    50%{r:5.5; opacity:0.7;}
  }
  @keyframes newHaloPulse{
    0%,100%{r:8; opacity:0.55;}
    50%{r:16; opacity:0;}
  }
  .site-marker.d2{animation-delay:.3s;} .site-marker-halo.d2{animation-delay:.3s;}
  .site-marker.d3{animation-delay:.6s;} .site-marker-halo.d3{animation-delay:.6s;}
  .site-marker.d4{animation-delay:.9s;} .site-marker-halo.d4{animation-delay:.9s;}
  .site-marker.d5{animation-delay:1.2s;} .site-marker-halo.d5{animation-delay:1.2s;}
  .site-marker.d6{animation-delay:1.5s;} .site-marker-halo.d6{animation-delay:1.5s;}
  .site-marker.d7{animation-delay:1.8s;} .site-marker-halo.d7{animation-delay:1.8s;}

  /* Recently built changelog strip */
  .recent-built{
    border-top:1px solid var(--hairline);
    background:linear-gradient(180deg, rgba(95,224,179,0.04), transparent);
    padding:18px 24px;
    display:grid; grid-template-columns:auto 1fr; gap:24px;
    align-items:center;
  }
  .recent-built .left{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--mint);
    display:inline-flex; align-items:center; gap:8px;
  }
  .recent-built .left .pulse-dot{
    width:6px; height:6px; border-radius:50%; background:var(--mint);
    box-shadow:0 0 8px rgba(95,224,179,0.6);
    animation:statusPulse 2s ease-in-out infinite;
  }
  .recent-built .builds{display:flex; flex-wrap:wrap; gap:24px;}
  .recent-built .build-item{
    display:flex; align-items:baseline; gap:10px;
    font-family:var(--mono); font-size:11px;
    letter-spacing:0.06em; color:var(--ink-soft);
  }
  .recent-built .build-item .id{color:var(--ink-muted);}
  .recent-built .build-item .name{color:var(--ink); font-weight:500; letter-spacing:0;}
  .recent-built .build-item .when{color:var(--mint);}

  /* Three.js hero canvas — particle microbiome, integrated into composition */
  .hero{position:relative; overflow:hidden;}
  .hero-3d-canvas{
    position:absolute;
    top:-150px; right:-220px;
    width:900px; height:900px;
    z-index:0; opacity:0.85; pointer-events:none;
    /* Symmetric radial fade — no bounding box visible */
    mask-image:radial-gradient(ellipse 45% 45% at 55% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 35%, rgba(0,0,0,0.4) 65%, transparent 95%);
    -webkit-mask-image:radial-gradient(ellipse 45% 45% at 55% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 35%, rgba(0,0,0,0.4) 65%, transparent 95%);
    mix-blend-mode:screen;
  }
  .hero .container{position:relative; z-index:1;}
  .hero .grid{grid-template-columns:1.1fr 0.7fr;}
  @media (max-width:980px){
    .hero-3d-canvas{position:relative; top:auto; right:auto; width:100%; height:280px; opacity:0.6; mask-image:none; -webkit-mask-image:none; margin-bottom:24px;}
    .hero .grid{grid-template-columns:1fr;}
  }
  .planter-stat-strip{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--hairline); border:1px solid var(--hairline);
    border-radius:var(--radius-lg); overflow:hidden;
    margin-top:48px;
  }
  .planter-stat{background:var(--surface-1); padding:24px 22px;}
  .planter-stat .ps-num{font-family:var(--sans); font-weight:600; font-size:32px; line-height:1; letter-spacing:-0.025em; color:var(--ink);}
  .planter-stat .ps-num .unit{color:var(--burnt); font-size:14px; margin-left:3px;}
  .planter-stat .ps-label{margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted);}
  .planter-stat .ps-source{margin-top:6px; font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:0.04em;}

  /* Matrix tiers */
  .tiers{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden;}
  .tier{background:var(--surface-1); padding:28px 22px; transition:background .2s; border-left:2px solid transparent;}
  .tier:hover{background:var(--surface-2);}
  .tier.featured{background:linear-gradient(180deg, rgba(2, 140, 188,0.10) 0%, var(--surface-1) 70%); border-left-color:var(--burnt);}
  .tier .tier-name{margin-bottom:18px;}
  .tier .tier-name .label{font-family:var(--mono); font-size:10.5px; color:var(--burnt); letter-spacing:0.14em;}
  .tier .tier-name .name{display:block; margin-top:8px; font-family:var(--sans); font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-0.022em;}
  .tier .tier-desc{font-size:13px; color:var(--ink-body); line-height:1.55; min-height:74px; margin-bottom:18px;}
  .tier .feature-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;}
  .tier .feature-list li{display:flex; gap:8px; font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:0.02em; line-height:1.4;}
  .tier .feature-list li::before{content:""; width:6px; height:6px; background:var(--slate); border-radius:1px; margin-top:5px; flex:none;}
  .tier.featured .feature-list li::before{background:var(--burnt);}

  /* Charts */
  .charts{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .chart-card{background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:26px; position:relative; overflow:hidden;}
  .chart-card::before{content:''; position:absolute; inset:0; background:radial-gradient(60% 80% at 100% 0%, rgba(154,174,181,0.05), transparent 60%); pointer-events:none;}
  .chart-card .chart-eyebrow{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
  .chart-card .chart-title{font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-0.012em;}
  .chart-card .chart-source{font-family:var(--mono); font-size:9.5px; color:var(--ink-muted); letter-spacing:0.06em;}
  .chart-card .chart-desc{font-size:13px; color:var(--ink-body); line-height:1.55; margin-top:14px;}

  /* Knowledge cards */
  .knowledge{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
  .know-card{background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:28px; transition:border-color .2s;}
  .know-card:hover{border-color:var(--hairline-strong);}
  .know-card .know-eyebrow{font-family:var(--mono); font-size:10.5px; color:var(--burnt); letter-spacing:0.14em; margin-bottom:20px;}
  .know-card .know-stat{font-family:'Fraunces','Times New Roman',serif; font-weight:400; font-style:italic; font-size:54px; line-height:1; letter-spacing:-0.018em; color:var(--ink); margin-bottom:8px;}
  .know-card .know-stat .unit{font-family:var(--sans); font-style:normal; font-weight:500; font-size:18px; color:var(--mint); margin-left:4px;}
  .know-card .know-headline{font-size:16px; font-weight:500; color:var(--ink); margin-bottom:14px;}
  .know-card .know-body{font-size:13.5px; color:var(--ink-body); line-height:1.6;}
  .know-card .know-source{margin-top:18px; padding-top:14px; border-top:1px solid var(--hairline); font-family:var(--mono); font-size:10px; color:var(--ink-muted); letter-spacing:0.06em;}

  /* Process diagrams */
  .process{background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:32px 28px; display:grid; grid-template-columns:160px 1fr; gap:32px; align-items:center;}
  .process + .process{margin-top:14px;}
  .process.new-way{background:linear-gradient(135deg, rgba(95,224,179,0.06), rgba(2, 140, 188,0.05)); border-color:var(--hairline-strong);}
  .process .label-block{display:flex; align-items:center; gap:12px;}
  .process .marker{width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-3); color:var(--ink-muted); font-family:var(--sans); font-weight:600; font-size:13px;}
  .process.new-way .marker{background:var(--ink); color:var(--bg);}
  .process .way-name{font-family:var(--sans); font-weight:500; font-size:14px; color:var(--ink);}
  .process .steps-row{display:flex; align-items:flex-start; justify-content:space-between; gap:6px;}
  .process .step{flex:1; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; position:relative; padding:0 6px;}
  .process .step-num{width:26px; height:26px; border-radius:50%; background:var(--surface-2); border:1px solid var(--hairline); display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--ink-muted); font-weight:600;}
  .process.new-way .step-num{border-color:var(--burnt); color:var(--burnt);}
  .process .step-arrow{position:absolute; top:13px; left:calc(50% + 22px); right:calc(-50% + 22px); height:1px; background:var(--hairline);}
  .process .step:last-child .step-arrow{display:none;}
  .process .step-label{font-size:11.5px; font-weight:500; color:var(--ink-soft); line-height:1.35; max-width:14ch;}

  /* Track record cards */
  .clients{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden;}
  .client{background:var(--surface-1); padding:24px 20px; transition:background .2s; position:relative; border-left:2px solid transparent;}
  .client:hover{background:var(--surface-2);}
  .client.is-new{border-left-color:var(--mint);}
  .client .client-meta{font-family:var(--mono); font-size:10px; color:var(--ink-muted); letter-spacing:0.14em; margin-bottom:14px;}
  .client .name{font-family:var(--sans); font-weight:600; font-size:16px; color:var(--ink); line-height:1.25; letter-spacing:-0.012em;}
  .client .meta{margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:6px;}
  .client .meta .row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px;}
  .client .meta .row .k{color:var(--ink-muted); letter-spacing:0.06em; text-transform:uppercase;}
  .client .meta .row .v{color:var(--ink-soft);}

  /* Engagement ladder */
  .ladder{display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden;}
  .ladder.ladder-3{grid-template-columns:repeat(3, 1fr);}
  .rung{background:var(--surface-1); padding:30px 28px; display:flex; gap:18px; transition:background .2s;}
  .rung:hover{background:var(--surface-2);}
  .rung-num{font-family:var(--mono); font-weight:600; font-size:13px; color:var(--blue); letter-spacing:0.06em; padding-top:4px; min-width:36px;}
  .rung-body{flex:1;}
  .rung h4{font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); margin-bottom:8px; letter-spacing:-0.01em;}
  .rung p{font-size:13px; color:var(--ink-body); line-height:1.6;}

  /* FAQ accordion (open by default for now) */
  .faq-list{max-width:880px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--hairline); padding:24px 0;}
  .faq-q{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; font-family:'Fraunces','Times New Roman',serif; font-weight:400; font-style:italic; font-size:20px; color:var(--ink); margin-bottom:14px; letter-spacing:-0.005em; line-height:1.35;}
  .faq-q .marker{font-family:var(--mono); font-size:13px; color:var(--burnt); flex-shrink:0;}
  .faq-a{font-size:14px; line-height:1.7; color:var(--ink-body); max-width:64ch;}

  /* Footer */
  footer{padding:80px 0 56px; border-top:1px solid var(--hairline); margin-top:60px; background:var(--surface-1);}
  .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px;}
  .footer-brand svg{height:24px; width:auto; margin-bottom:24px;}
  .footer-brand p{font-size:13px; color:var(--ink-muted); line-height:1.55; max-width:32ch;}
  .footer-col h5{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px;}
  .footer-col p{font-size:13px; color:var(--ink-muted); line-height:1.6;}
  .footer-col p strong{color:var(--ink); font-weight:600; display:block; margin-bottom:6px;}
  .footer-col a{color:var(--ink-muted); transition:color .15s;}
  .footer-col a:hover{color:var(--ink);}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--hairline); font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; color:var(--ink-muted);}

  /* Responsive */
  @media (max-width: 980px){
    :root{--pad-x:24px;}
    .nav-links{display:none;}
    /* Tablet hero: pull padding back from 96/60 (desktop) to 72/40 so the
       hero reads as part of the page rather than a bleed of empty canvas. */
    .hero{padding:72px 0 40px;}
    .hero h1{margin-bottom:18px;}
    .hero .grid{grid-template-columns:1fr; gap:40px;}
    .stats{grid-template-columns:1fr 1fr;}
    .stat{border-right:none; border-bottom:1px solid var(--hairline);}
    .planter-block, .deepdive{grid-template-columns:1fr; gap:36px;}
    .planter-data{display:none;}
    .stack-grid{grid-template-columns:1fr 1fr;}
    .tiers{grid-template-columns:1fr 1fr;}
    .charts{grid-template-columns:1fr;}
    .knowledge{grid-template-columns:1fr;}
    .clients{grid-template-columns:1fr 1fr;}
    .ladder, .ladder.ladder-3{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    section{padding:64px 0;}
    .process{grid-template-columns:1fr; padding:28px 22px;}
    .process .steps-row{flex-direction:column; align-items:stretch; gap:16px;}
    .process .step-arrow{display:none;}
  }

  /* ========================================================================
     Mobile navigation — hamburger drawer + scroll-tab strip.
     Both surfaces only show on ≤980px. The strip is the fast tap (always
     visible, horizontally scrollable). The drawer is the conventional
     overlay that mill operators expect. They share the same destination
     set so users can hit either.
     ======================================================================== */
  .nav-burger{display:none;}
  .mobile-tab-strip{display:none;}
  .mobile-drawer{display:none;}

  @media (max-width: 980px){
    /* On mobile the desktop .nav-links and the inline .nav-cta both hide.
       The burger replaces them in the header bar. The drawer carries the
       full nav + the burnt CTA. */
    .nav-cta{display:none;}

    .nav-burger{
      display:inline-flex; flex-direction:column; justify-content:center;
      width:38px; height:38px; padding:0; gap:5px;
      background:transparent; border:1px solid var(--hairline); border-radius:6px;
      cursor:pointer; margin-left:auto;
      transition:border-color .15s ease, background .15s ease;
    }
    .nav-burger span{
      display:block; width:16px; height:1.5px; background:var(--ink-soft);
      margin:0 auto; transition:transform .25s ease, opacity .15s ease, background .15s ease;
    }
    .nav-burger:hover{border-color:var(--hairline-strong);}
    .nav-burger:hover span{background:var(--ink);}
    .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
    .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    /* Mobile tab strip — sits sticky right below the header. The ::after
       pseudo-element runs a single load-time shimmer (one pass, ~1.8s,
       starting 0.9s after page load) to signal the strip is interactive
       without becoming a noisy loop. Disabled by prefers-reduced-motion. */
    .mobile-tab-strip{
      display:flex; gap:8px;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      padding:10px var(--pad-x);
      border-bottom:1px solid var(--hairline);
      background:rgba(8,8,10,0.97);
      position:sticky; top:60px; z-index:9;
      scrollbar-width:none;
    }
    .mobile-tab-strip::-webkit-scrollbar{display:none;}
    .mobile-tab-strip::after{
      content:''; position:absolute; top:0; bottom:0;
      left:0; width:35%; pointer-events:none;
      background:linear-gradient(90deg,
        transparent 0%,
        rgba(2, 140, 188, 0.10) 35%,
        rgba(72, 193, 235, 0.22) 50%,
        rgba(2, 140, 188, 0.10) 65%,
        transparent 100%);
      transform:translateX(-100%); opacity:0;
      animation:tabStripShimmer 1.8s cubic-bezier(0.32, 0.72, 0, 1) 0.9s 1 forwards;
    }
    @keyframes tabStripShimmer{
      0%   { transform:translateX(-100%); opacity:0; }
      15%  { opacity:1; }
      85%  { opacity:1; }
      100% { transform:translateX(330%); opacity:0; }
    }
    @media (prefers-reduced-motion: reduce){
      .mobile-tab-strip::after{ animation:none; display:none; }
    }
    .mobile-tab{
      display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
      padding:7px 12px;
      font-family:var(--mono); font-size:10.5px; font-weight:500;
      letter-spacing:0.16em; text-transform:uppercase;
      color:var(--ink-body); background:transparent;
      border:1px solid var(--hairline); border-radius:6px;
      white-space:nowrap; text-decoration:none;
      -webkit-tap-highlight-color:transparent;
      transition:color .12s ease, background .12s ease, border-color .12s ease, transform .12s ease;
    }
    .mobile-tab:hover, .mobile-tab.active{
      color:var(--ink); background:var(--surface-1); border-color:var(--hairline-strong);
    }
    .mobile-tab.active{ color:var(--burnt); border-color:var(--burnt); }
    .mobile-tab:active{
      color:var(--burnt); border-color:var(--burnt); background:var(--surface-2);
      transform:scale(0.97);
    }

    /* Drawer overlay */
    .mobile-drawer{
      display:flex;
      position:fixed; inset:0; z-index:200;
      background:rgba(8,8,10,0.86);
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      align-items:stretch; justify-content:flex-end;
      opacity:0; pointer-events:none;
      transition:opacity .22s ease;
    }
    .mobile-drawer[aria-hidden="false"]{opacity:1; pointer-events:auto;}
    .mobile-drawer-inner{
      width:min(360px, 100%); height:100%;
      background:var(--bg);
      border-left:1px solid var(--hairline);
      padding:74px 28px 36px;
      display:flex; flex-direction:column;
      transform:translateX(40px);
      transition:transform .22s ease;
      position:relative;
    }
    .mobile-drawer[aria-hidden="false"] .mobile-drawer-inner{transform:translateX(0);}
    .mobile-drawer-close{
      position:absolute; top:18px; right:22px;
      width:38px; height:38px;
      display:inline-flex; align-items:center; justify-content:center;
      background:transparent; border:1px solid var(--hairline); border-radius:6px;
      font-family:var(--sans); font-size:22px; line-height:1;
      color:var(--ink-soft); cursor:pointer;
      transition:border-color .15s, color .15s;
    }
    .mobile-drawer-close:hover{border-color:var(--hairline-strong); color:var(--ink);}
    .mobile-drawer nav{display:flex; flex-direction:column; margin-bottom:24px;}
    .mobile-drawer nav a{
      display:block; padding:16px 0;
      font-family:var(--sans); font-size:18px; font-weight:500;
      color:var(--ink); border-bottom:1px solid var(--hairline);
      transition:color .15s ease, padding-left .15s ease;
    }
    .mobile-drawer nav a:hover{color:var(--burnt); padding-left:4px;}
    .mobile-drawer nav a.active{color:var(--burnt);}
    .mobile-drawer-meta{
      margin-top:auto; padding-top:24px;
      border-top:1px solid var(--hairline);
      display:flex; flex-direction:column; gap:18px;
    }
    .mobile-drawer-cta{align-self:flex-start;}
    .mobile-drawer-tag{
      font-family:var(--mono); font-size:10.5px;
      letter-spacing:0.16em; text-transform:uppercase;
      color:var(--ink-muted);
    }
    body.menu-open{overflow:hidden;}
  }

  /* Phone — ≤640px. Single-column for grids that orphan, solid header */
  @media (max-width: 640px){
    :root{--pad-x:20px;}
    .site-header{
      background:rgba(8,8,10,0.97);
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .nav{padding:12px var(--pad-x); gap:8px;}
    .brand svg{height:18px;}
    .nav-cta .btn{padding:7px 11px; font-size:11.5px; white-space:nowrap;}
    /* Mobile back-home: drop the pill chrome, keep it as a tight text link
       so brand + back + CTA all fit on one line at 393px */
    .back-home{
      margin-left:6px;
      padding:4px 6px;
      border:none;
      font-size:10px;
      letter-spacing:0.08em;
      background:transparent;
    }
    .back-home:hover{ background:transparent; border:none; }
    .back-home .arrow{ font-size:11px; }
    .stack-grid{grid-template-columns:1fr;}
    .tiers{grid-template-columns:1fr;}
    .clients{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr; gap:36px;}
    /* Stats panel — 2x2 grid on phone with tighter type and hairline rules.
       Was single column with 48px numbers stacked, which read as four giant
       cards instead of one composed ledger. */
    .stats{grid-template-columns:1fr 1fr; margin-top:32px;}
    .stat{padding:18px 16px; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
    .stat:nth-child(2n){border-right:none;}
    .stat:nth-last-child(-n+2){border-bottom:none;}
    .stat .num{font-size:30px; letter-spacing:-0.022em;}
    .stat .num .unit{font-size:13px; margin-left:3px;}
    .stat .label{margin-top:8px; font-size:9.5px; letter-spacing:0.12em; line-height:1.4;}
    /* Mobile section rhythm: tighten from 48px to 36px so the page reads
       in fewer scrolls. Hero gets its own tighter rule below since 96/60
       was a desktop value never overridden. */
    section{padding:36px 0;}
    .hero{padding:48px 0 28px !important;}
    .hero h1{margin-bottom:16px !important;}
    .hero .lede{margin-bottom:24px !important; font-size:15px !important;}
    .hero .grid{gap:32px !important;}
    .hero-meta{padding:16px 18px !important;}
    .hero-ctas .btn{padding:11px 16px; font-size:13px;}

    /* Mobile typography rhythm — relax line-heights on small tracked text
       so the descender of one line doesn't kiss the ascender of the next.
       Pattern: anything that's 14px or under on phone gets a generous
       line-height (~1.5–1.6) instead of the compact 1.25–1.4 used at desktop. */
    .body, .lede{line-height:1.65;}
    .stat .label{line-height:1.55;}
    .stack-cell .stack-desc, .tier .tier-desc, .chart-card .chart-desc{line-height:1.65;}
    .tier .feature-list li{line-height:1.55;}
    .know-card .know-source, .know-card .know-body{line-height:1.65;}
    .process .step-label{line-height:1.5;}
    .client .name{line-height:1.3;}
    .client .meta .row{line-height:1.5;}
    .rung p{line-height:1.65;}
    .faq-q{line-height:1.45;}
    .faq-a{line-height:1.7;}
    .footer-brand p, .footer-col p{line-height:1.65;}
    .label-mono, .eyebrow{line-height:1.5;}
    .planter-stat .ps-label, .planter-stat .ps-source{line-height:1.55;}
    .dash-side-stat .label, .dash-side-stat .equiv{line-height:1.55;}
    .dash-foot{line-height:1.5;}
    .recent-built .build-item{line-height:1.5;}
    .amr-row .row-name, .amr-row .row-tag, .amr-row .row-value{line-height:1.4;}
    .amr-panel-section .section-label, .amr-panel-head .id, .amr-panel-head .meta{line-height:1.5;}

    /* AMR spec readout panel — at desktop the row is 84px+1fr+90px, which
       on phone leaves the middle column too narrow ("BARcode · Tier 03" /
       "Mill-side build" wrap awkwardly). Restack to a 2-row layout per
       row: tag on top, name + value on the bottom. */
    .amr-panel{font-size:13px;}
    .amr-panel-head{flex-wrap:wrap; gap:8px 12px; padding:14px 16px;}
    .amr-panel-head .meta{margin-left:0; flex-basis:100%;}
    .amr-panel-section{padding:16px 16px;}
    .amr-row{
      display:grid;
      grid-template-columns:1fr auto;
      grid-template-areas: "tag tag" "name value";
      row-gap:4px; column-gap:10px;
    }
    .amr-row .row-tag  { grid-area:tag;   font-size:9.5px; }
    .amr-row .row-name { grid-area:name;  font-size:12px; }
    .amr-row .row-value{ grid-area:value; font-size:11px; white-space:nowrap; }
    /* For input-style rows that have a progress bar in the middle column,
       collapse cleanly: the bar takes its own row */
    .amr-row .row-bar{ grid-column:1 / -1; grid-row:2; min-width:0; margin-top:2px; }
    .amr-row:has(.row-bar){
      grid-template-columns:1fr auto;
      grid-template-areas: "tag value" "bar bar";
    }
    .amr-row:has(.row-bar) .row-tag  { grid-area:tag; }
    .amr-row:has(.row-bar) .row-value{ grid-area:value; }
  }