: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){
    .display-xxl{ letter-spacing:-0.018em; line-height:1.08; }
    .display-xl { letter-spacing:-0.014em; line-height:1.10; }
    .display-l  { letter-spacing:-0.012em; line-height:1.14; }
  }
  .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;
    background:linear-gradient(90deg, var(--blue-deep) 0%, var(--blue-deep) 64px, var(--hairline) 64px, var(--hairline) 100%);
  }

  /* 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;}
    .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;}
  }

  /* Phone — ≤640px. Single-column for grids that orphan, solid header */
  @media (max-width: 640px){
    .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{grid-template-columns:1fr;}
    .stat{padding:24px 22px;}
    section{padding:48px 0;}

    /* 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; }
  }