:root{
    /* ---- brand tokens (canon) ---- */
    --mb-blue-50:#EFF8F9;
    --mb-blue-100:#DAE8ED;
    --mb-blue-200:#BBD4D9;
    --mb-blue-400:#81ADB6;
    --mb-blue-700:#507183;
    --mb-slate-800:#51595B;
    --mb-gold-500:#DBAF68;
    /* canon gold is accent-only; small READABLE text uses a darkened slate-gold
       that clears WCAG AA on white (~4.6:1). NOT a second brand gold — a text shade. */
    --mb-gold-text:#8A6A28;
    /* gold lightened for large numerals on the steel surface (large-text AA) */
    --mb-gold-on-steel:#E8C887;
    /* pale cool tint that clears small-text AA on the steel surface (~4.7:1) */
    --mb-on-steel-soft:#EAF1F3;
    /* deepest steel — display headings (hero/page-header h1, .pull-statement), the
       footer surface, and highest-contrast accents on light surfaces (10.3:1 on white).
       Dark enough that the inverted logo's charcoal swoosh recedes as the asset intends. */
    --mb-steel-deep:#2F4350;
    --mb-white:#FFFFFF;
    /* hero-visual-only field: a step darker than --mb-blue-700 so the hero's signature
       graphic reads as a distinct, ownable surface and never matches .section--steel's
       flat fill one-to-one (finding: hero-visual/section--steel color collision) */
    --mb-blue-900:#3C5563;

    /* ---- 8px spacing scale ---- */
    --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:32px;
    --s-6:48px; --s-8:64px; --s-12:96px; --s-16:128px;

    --radius:4px;
    /* 1080 -> 1280: a genuinely wider column for the 1920/2560 displays Steven reads
       this on, while still capping line-length (at 18px body, 1280px ~ high-70s/low-80s
       characters per line in the 62-64ch lead columns — still comfortably within the
       45-90ch readability band) rather than going edge-to-edge */
    --maxw:1280px;
    /* >=1600px: the fixed 1280px island leaves 320px/640px of dead margin per side at
       1920/2560px (33%/50% of the viewport). Scale the shared container proportionally
       instead of leaving it pinned — text columns (ch-based max-width) and the
       platform/team/ledger grids still self-limit line-length and item width, so a
       wider container widens whitespace/rhythm, not reading comfort. min() keeps this
       identical to 1280px below 1600px. */
    --maxw-wide:min(92vw, 1800px);
    --gutter:clamp(24px, 6vw, 96px);
    --sec-pad:clamp(96px, 13vw, 176px);
    /* tighter section step for content that continues a page's argument rather
       than opening a new surface — kills the dead bands on interior pages */
    --sec-pad-tight:clamp(64px, 8vw, 112px);
    --ph-pad-bottom:clamp(48px, 6vh, 80px);
    --hairline:rgba(219,175,104,0.55); /* gold 0.5px rule */
    --hairline-steel:rgba(80,113,131,0.25);

    --ease:cubic-bezier(0.22,0.61,0.36,1);
    /* canonical motion window: 120-180ms ease-out — one token so every reveal obeys it */
    --dur-reveal:180ms;
  }

  *{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--mb-white);
    color:var(--mb-slate-800);
    font-family:"Inter", system-ui, -apple-system, sans-serif;
    font-size:18px;
    line-height:1.65;
    font-weight:400;
    font-feature-settings:"tnum" 1;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  ::selection{ background:rgba(219,175,104,0.28); }

  a{ color:inherit; }

  /* ---- focus-visible: 2px steel ring + 2px offset (light surfaces) ---- */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible{
    outline:2px solid var(--mb-blue-700);
    outline-offset:2px;
    border-radius:2px;
  }
  /* on steel surfaces (steel section, closing band, footer) the steel ring is invisible
     against its own background — switch the ring to the lightened on-steel gold, which
     clears the 3:1 non-text minimum on --mb-blue-700 (3.24:1) and on --mb-steel-deep (5.9:1) */
  .section--steel a:focus-visible,
  .closing-band a:focus-visible,
  .site-footer a:focus-visible{
    outline-color:var(--mb-gold-on-steel);
    outline-offset:3px;
  }

  .container{
    max-width:var(--maxw);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }
  /* >=1600px: widen the shared content column (see --maxw-wide) so every section
     (and the footer, which reuses .container) grows in step with the header/nav
     fix below, instead of one fixed 1280px island floating in a wider viewport */
  @media (min-width:1600px){
    .container{ max-width:var(--maxw-wide); }
  }

  /* ===========================================================
     HEADER / NAV
  =========================================================== */
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    height:100px;
    display:flex;
    align-items:center;
    background:transparent;
    transition:height 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease);
    border-bottom:0.5px solid transparent;
  }
  .site-header.scrolled{
    height:68px;
    background:var(--mb-white);
    border-bottom:0.5px solid var(--hairline);
  }
  .site-header.scrolled .brand img{ height:25px; }
  .nav-inner{
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
  }
  .brand img{
    height:42px;
    width:auto;
    display:block;
    transition:height 160ms var(--ease);
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap:var(--s-4);
  }
  .nav-link{
    font-size:16px;
    font-weight:500;
    letter-spacing:0.01em;
    color:var(--mb-slate-800);
    text-decoration:none;
    position:relative;
    padding:4px 0;
    white-space:nowrap; /* "Why it matters" must never wrap to two lines in the nav */
    transition:color 150ms var(--ease);
  }
  .nav-link::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    height:1.5px;
    width:100%;
    background:var(--mb-gold-500);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 150ms var(--ease);
  }
  .nav-link:hover{ color:var(--mb-blue-700); }
  /* hover draws a quiet 1px steel hairline — the full gold underline is reserved
     for the current page (.is-active), so hover ≠ active */
  .nav-link:hover::after{ transform:scaleX(1); background:var(--hairline-steel); height:1px; }

  /* active nav link (current page): steel text with a persistent gold underline —
     the same gold hairline the hover state draws, held on. Calm, on-brand, subtle. */
  .nav-link.is-active{ color:var(--mb-blue-700); }
  .nav-link.is-active::after{ transform:scaleX(1); background:var(--mb-gold-500); height:1.5px; }

  /* CTA text-link (canonical action) */
  .cta{
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    font-size:16px;
    font-weight:500;
    color:var(--mb-blue-700);
    text-decoration:none;
    position:relative;
    white-space:nowrap;
  }
  .cta .cta-label{
    position:relative;
    padding-bottom:2px;
  }
  .cta .cta-label::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    height:1.5px; width:100%;
    background:var(--mb-gold-500);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 160ms var(--ease);
  }
  .cta:hover .cta-label::after{ transform:scaleX(1); }
  /* on /contact the header CTA is the current-page marker — hold the gold underline
     the same way .nav-link.is-active holds it */
  .cta[aria-current="page"] .cta-label::after{ transform:scaleX(1); }
  .cta .arrow{
    display:inline-block;
    transition:transform 160ms var(--ease);
  }
  .cta:hover .arrow{ transform:translateX(2px); }

  /* ---- primary button (real button tier — CTAs that ask for the click) ---- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font:500 16px/1 "Inter", system-ui, -apple-system, sans-serif;
    color:var(--mb-white);
    background:var(--mb-blue-700); border:0; border-radius:var(--radius);
    padding:15px 28px; text-decoration:none; cursor:pointer;
    transition:background-color 150ms var(--ease), transform 120ms var(--ease);
  }
  .btn:hover{ background:var(--mb-blue-900); }
  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ opacity:0.6; cursor:not-allowed; }
  .btn .arrow{ display:inline-block; transition:transform 160ms var(--ease); }
  .btn:hover .arrow{ transform:translateX(2px); }
  /* on steel surfaces the default fill vanishes — step one shade deeper */
  .section--steel .btn, .closing-band .btn{ background:var(--mb-blue-900); }
  .section--steel .btn:hover, .closing-band .btn:hover{ background:var(--mb-steel-deep); }

  /* ---- shared closing band (home / platform / why-it-matters) ---- */
  .closing-band{
    background:var(--mb-blue-700);
    border-top:0.5px solid var(--hairline);
    padding:clamp(72px, 9vw, 112px) 0;
  }
  .closing-line{
    margin:0 0 var(--s-4) 0;
    font-size:clamp(24px, 2.6vw, 36px);
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.2;
    color:var(--mb-blue-50);
    max-width:32ch;
    text-wrap:balance;
  }
  /* closing moment inside an existing section (About's commitments) */
  .section-close{ margin-top:var(--s-8); }

  /* light closing-band variants — used where the page already carries its steel share
     (home follows the tint teasers; why-it-matters carries the steel ledger). Keeps the
     band a distinct moment instead of merging with the deep-steel footer below it. */
  .closing-band--tint{ background:var(--mb-blue-50); }
  .closing-band--white{ background:var(--mb-white); }
  .closing-band--tint .closing-line,
  .closing-band--white .closing-line,
  .section--tint .closing-line{ color:var(--mb-steel-deep); }
  .closing-band--tint .btn,
  .closing-band--white .btn{ background:var(--mb-blue-700); }
  .closing-band--tint .btn:hover,
  .closing-band--white .btn:hover{ background:var(--mb-blue-900); }
  /* light bands sit on light surfaces — the default steel focus ring reads there */
  .closing-band--tint a:focus-visible,
  .closing-band--white a:focus-visible{ outline-color:var(--mb-blue-700); }

  /* >=1600px: widen the header's content band in step with .container (see
     --maxw-wide) and scale up the logo/link sizing slightly so the header fills
     its bar with intent instead of one small dense cluster adrift in empty space */
  @media (min-width:1600px){
    .nav-inner{ max-width:var(--maxw-wide); }
    .brand img{ height:48px; }
    .site-header.scrolled .brand img{ height:28px; }
    .nav-link{ font-size:17px; }
    .cta{ font-size:17px; }
  }

  /* hamburger */
  .hamburger{
    display:none;
    background:none;
    border:0;
    padding:8px;
    cursor:pointer;
    width:40px; height:40px;
  }
  .hamburger span{
    display:block;
    width:22px; height:1.5px;
    background:var(--mb-blue-700);
    margin:5px auto;
    transition:transform 140ms var(--ease), opacity 140ms var(--ease);
  }
  /* open state: three lines morph into a calm X */
  .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .mobile-panel{
    display:none;
    position:fixed;
    top:0; left:0; right:0;
    z-index:45;
    background:var(--mb-white);
    padding:100px var(--gutter) var(--s-6);
    border-bottom:0.5px solid var(--hairline);
    opacity:0;
    pointer-events:none;
    transition:opacity 140ms var(--ease);
    /* short/landscape phone viewports: the panel is fixed, so page scroll can't reach
       items that overflow the screen — let the panel itself scroll */
    max-height:100vh;
    max-height:100dvh;
    overflow-y:auto;
  }
  .mobile-panel.open{
    display:block;
    opacity:1;
    pointer-events:auto;
  }
  .mobile-panel a{
    display:block;
    text-decoration:none;
    font-size:20px;
    font-weight:500;
    color:var(--mb-blue-700);
    padding:14px 0;
    border-bottom:0.5px solid var(--hairline);
  }
  /* current page marked in the panel too — mirrors the desktop nav's gold underline */
  .mobile-panel a.is-active{
    text-decoration:underline;
    text-decoration-color:var(--mb-gold-500);
    text-decoration-thickness:1.5px;
    text-underline-offset:6px;
  }
  .mobile-panel .cta{ font-size:18px; margin-top:var(--s-3); }

  /* ===========================================================
     SHARED SECTION SCAFFOLD
  =========================================================== */
  section{ scroll-margin-top:116px; }
  .section{
    padding-top:var(--sec-pad);
    padding-bottom:var(--sec-pad);
  }
  .section--tint{ background:var(--mb-blue-50); }
  .section--steel{ background:var(--mb-blue-700); }
  .section--tight{
    padding-top:var(--sec-pad-tight);
    padding-bottom:var(--sec-pad-tight);
  }
  /* the transparent sections (mechanism/outcome/team/contact) have no fill of their
     own, so at >=1600px their widened side-margins (see .container fix above) read
     as an undifferentiated void rather than a bounded design region. Add existing
     brand hairline rules (same token as .rule elsewhere) top+bottom only at the
     widths where this matters — a sizing/structural anchor, not a new color. */
  @media (min-width:1600px){
    .section--bounded{
      border-top:0.5px solid var(--hairline-steel);
      border-bottom:0.5px solid var(--hairline-steel);
    }
  }

  .eyebrow{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:var(--mb-gold-text); /* darkened gold-slate — clears AA on white at 13px */
    margin:0 0 16px 0;
  }
  /* on steel, gold-500 fails small-text AA; use the pale cool tint for the eyebrow */
  .section--steel .eyebrow{ color:var(--mb-on-steel-soft); }

  h1,h2{ margin:0; }
  h2.h2{
    font-size:clamp(30px, 3.6vw, 54px);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--mb-blue-700);
    /* no measure cap: headings run the container and wrap only when they
       actually run out of room — early forced breaks read as mistakes */
  }
  .section--steel h2.h2{ color:var(--mb-blue-50); }
  /* one-line heading variant: no measure cap; if it must break (narrow
     viewports) it breaks between sentences, never mid-phrase */
  h2.h2--oneline{ max-width:none; }
  h2.h2--oneline span{ white-space:nowrap; }

  .lead{
    margin:24px 0 0 0;
    font-size:clamp(19px, 1.4vw, 22px);
    line-height:1.65;
    color:var(--mb-slate-800);
    max-width:92ch;
  }
  .section--steel .lead{ color:var(--mb-blue-50); }

  /* interior masthead deck — the page's one-line promise under the H1 */
  .page-deck{ margin-top:20px; max-width:80ch; }

  /* hairline rule between sections used sparingly */
  .rule{
    border:0;
    border-top:0.5px solid var(--hairline);
    margin:0;
  }

  /* ===========================================================
     HERO
  =========================================================== */
  .hero{
    background:var(--mb-white);
    min-height:min(86svh, 820px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:128px;
    padding-bottom:var(--s-12);
    overflow:hidden; /* allow the visual to bleed to the viewport edge without scrollbars */
  }
  .hero .container{
    /* as a flex item with auto margins the container would shrink-to-fit instead of
       filling to its max-width cap (breaks the visual's exact-bleed math at >=1600px) */
    width:100%;
    display:grid;
    /* narrowed right column (was 5fr/6fr): keeps the visual from owning the full
       steel-fill area at hero height, holding the page-wide steel total under 30%
       across viewport heights, not just at 1440px desktop */
    grid-template-columns:minmax(380px, 11fr) minmax(380px, 9fr);
    align-items:center;
    gap:clamp(40px, 5vw, 72px);
    position:relative;
  }
  .hero .eyebrow{ margin-bottom:20px; }
  .hero h1{
    font-size:clamp(44px, 6.6vw, 92px);
    font-weight:600;
    line-height:1.05;
    letter-spacing:-0.03em;
    color:var(--mb-steel-deep);
    max-width:13ch;
  }
  .hero .subhead{
    margin:24px 0 0 0;
    font-size:clamp(19px, 1.3vw, 21px);
    line-height:1.65;
    color:var(--mb-slate-800);
    max-width:42ch;
  }
  .hero .cta-row{
    margin-top:var(--s-4);
  }
  .hero-visual{
    /* distinct deep-steel field (not section--steel's flat --mb-blue-700) so the
       hero's signature visual never matches later steel chrome one-to-one */
    background:var(--mb-blue-900);
    /* no card chrome: bleed to the viewport's right edge so the graphic reads as an
       environmental field rather than a contained diagram card */
    border-radius:var(--radius) 0 0 var(--radius);
    margin-right:calc(-1 * var(--gutter));
    padding:clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
    padding-right:max(clamp(32px, 5vw, 64px), var(--gutter));
    width:calc(100% + var(--gutter));
    min-height:clamp(380px, 46vw, 540px);
    display:flex;
    align-items:center;
    align-self:stretch;
  }
  .hero-visual svg{
    width:100%;
    height:auto;
    display:block;
  }
  @media (min-width:1320px){
    /* once the viewport exceeds the centered container's max width, bleed exactly to
       the true edge of the screen: side strip = gutter + half the leftover viewport.
       (The old -50vw+50% form overshot the viewport by ~400px, which forced the SVG
       to be capped to the pre-bleed grid column — the graphic covered only ~22% of
       the visible field at 1440px. With an exact bleed the box IS the visible field,
       so the SVG can simply fill it.) The field also stops stretching to the text
       column's height and hugs the graphic instead (align-self:center, min-height:0),
       so the signature trace owns its panel rather than floating in dead steel. */
    .hero-visual{
      align-self:center;
      min-height:0;
      margin-right:calc(-1 * (var(--gutter) + (100vw - var(--maxw)) / 2));
      width:calc(100% + var(--gutter) + (100vw - var(--maxw)) / 2);
      /* the field's right edge is now the viewport edge — this is real breathing
         room for the trace, not an off-screen strip, so it can be tighter */
      padding-right:clamp(32px, 3vw, 56px);
    }
  }
  @media (min-width:1600px){
    /* >=1600px the shared container follows --maxw-wide, so the exact-bleed strip
       is computed against it instead of the fixed 1280px island */
    .hero-visual{
      margin-right:calc(-1 * (var(--gutter) + (100vw - var(--maxw-wide)) / 2));
      width:calc(100% + var(--gutter) + (100vw - var(--maxw-wide)) / 2);
    }
  }

  /* reveal primitive — short travel, quick settle (calm, not theatrical);
     duration held to the 120-180ms canon window via --dur-reveal */
  .reveal{
    opacity:0;
    transform:translateY(8px);
    transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  }
  .reveal.in{ opacity:1; transform:none; }

  /* hero staggered entrance — sequencing comes from app.js's per-item offsets */
  .hero .reveal{ transform:translateY(10px); }

  /* ===========================================================
     PLATFORM 3-COLUMN ROW
  =========================================================== */
  .platform-row{
    margin-top:var(--s-8);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
  }
  .platform-col{
    padding:0 clamp(20px,3vw,40px);
    border-left:0.5px solid var(--hairline);
    transition:background-color 160ms var(--ease);
  }
  /* calm surface response — the columns sit on the tint section, so a white wash
     reads as a quiet lift without shadows or movement */
  .platform-col:hover{ background:var(--mb-white); }
  .platform-col:first-child{
    border-left:0;
    padding-left:0;
  }
  .platform-col:last-child{ padding-right:0; }
  .platform-col .icon{
    color:var(--mb-blue-700);
    margin-bottom:var(--s-3);
    transition:color 160ms var(--ease);
  }
  .platform-col:hover .icon{ color:var(--mb-steel-deep); }
  .platform-col .col-label{
    font-size:18px;
    font-weight:500;
    color:var(--mb-blue-700);
    margin:0 0 10px 0;
    letter-spacing:-0.01em;
  }
  .platform-col .col-body{
    font-size:16px;
    line-height:1.6;
    color:var(--mb-slate-800);
    margin:0;
  }
  /* ===========================================================
     MECHANISM (platform) — copy + deep-steel diagram panel
  =========================================================== */
  .mech-grid{
    display:grid;
    grid-template-columns:minmax(320px, 10fr) minmax(320px, 9fr);
    gap:clamp(40px, 5vw, 72px);
    align-items:center;
  }
  .mech-visual{
    background:var(--mb-blue-900);
    border-radius:var(--radius);
    padding:clamp(32px, 4vw, 56px);
  }
  .mech-visual svg{ width:100%; height:auto; display:block; }
  @media (max-width:960px){
    .mech-grid{ grid-template-columns:1fr; }
  }

  /* ===========================================================
     STAT LEDGER (steel proof block)
  =========================================================== */
  .ledger{
    margin-top:var(--s-8);
  }
  .ledger-line{
    display:grid;
    grid-template-columns:minmax(220px, 340px) 1fr minmax(200px, 280px);
    gap:clamp(20px,4vw,56px);
    align-items:start;
    padding-top:var(--s-3);
    margin-top:var(--s-6);
    border-top:0.5px solid var(--hairline);
  }
  .ledger-line:first-child{ margin-top:0; }
  .ledger-num{
    font-size:clamp(56px, 6vw, 88px);
    font-weight:600;
    line-height:1.0;
    letter-spacing:-0.02em;
    color:var(--mb-gold-on-steel); /* lightened gold clears large-text AA on steel */
    font-feature-settings:"tnum" 1;
  }
  .ledger-cap{
    font-size:18px;
    line-height:1.55;
    color:var(--mb-blue-50);
    margin:0;
    max-width:46ch;
  }
  .ledger-src{
    margin:10px 0 0 0;
    font-size:13px;
    line-height:1.5;
    color:var(--mb-on-steel-soft); /* clears small-text AA on steel */
    font-style:italic;
    text-align:right;
    align-self:end;
  }

  /* ===========================================================
     COMMITMENT (stacked statements)
  =========================================================== */
  .commit-list{
    margin-top:var(--s-6);
    max-width:94ch;
  }
  .commit-item{
    padding:var(--s-3) 0;
    border-top:0.5px solid var(--hairline);
    display:flex;
    gap:var(--s-2);
    align-items:baseline;
  }
  .commit-item:first-child{ border-top:0; }
  .gold-dot{
    flex:0 0 auto;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--mb-gold-500);
    transform:translateY(-3px);
  }
  .commit-item p{
    margin:0;
    font-size:17px;
    line-height:1.6;
  }
  .commit-item .lead-in{
    color:var(--mb-blue-700);
    font-weight:600;
  }
  /* commitments on the steel surface (kept for future steel placements) */
  .section--steel .commit-item p{ color:var(--mb-blue-50); }
  .section--steel .commit-item .lead-in{ color:var(--mb-white); }
  .section--steel .pillar-note{ color:var(--mb-on-steel-soft); }

  /* very faint hexagon motif — About's commitments band, wide viewports only.
     The one sanctioned formal hexagon moment; monoline, steel, near-invisible. */
  .commit-hex{ display:none; }
  @media (min-width:1600px){
    #commitment .container{ position:relative; }
    .commit-hex{
      display:block;
      position:absolute;
      right:var(--s-8);
      top:50%;
      transform:translateY(-50%);
      width:clamp(300px, 20vw, 400px);
      height:auto;
      color:var(--mb-blue-700);
      opacity:0.12;
      pointer-events:none;
    }
  }

  /* ===========================================================
     PULL-STATEMENT (economics) — breaks the eyebrow+h2+lead cadence
  =========================================================== */
  .pull-rule{
    width:64px;
    border:0;
    border-top:1.5px solid var(--mb-gold-500);
    margin:0 0 var(--s-4) 0;
  }
  .pull-statement{
    font-size:clamp(28px, 4.1vw, 52px);
    font-weight:600;
    line-height:1.18;
    letter-spacing:-0.02em;
    color:var(--mb-steel-deep);
    max-width:24ch;
    margin:0;
  }
  .pull-sub{
    margin:var(--s-4) 0 0 0;
    font-size:17px;
    line-height:1.65;
    color:var(--mb-slate-800);
    max-width:90ch;
  }

  /* outcome single bullet — reads as a continuation of .pull-sub, not a list */
  .outcome-bullet{
    display:flex;
    gap:var(--s-2);
    align-items:baseline;
    margin-top:var(--s-3);
    max-width:92ch;
  }
  .outcome-bullet p{ margin:0; font-size:16px; line-height:1.6; color:var(--mb-slate-800); }

  /* ===========================================================
     TEAM
  =========================================================== */
  .team-grid{
    margin-top:var(--s-8);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--s-4);
  }
  .team-photo{
    /* scale with the column on wide displays instead of stranding four small
       circles in ~400px columns */
    width:clamp(176px, 14vw, 224px);
    height:auto;
    aspect-ratio:1 / 1;
    border-radius:50%;
    object-fit:cover;
    background:var(--mb-blue-50);
    border:1.5px solid var(--mb-blue-400);
    display:block;
    margin-bottom:var(--s-3);
  }
  .team-rule{
    display:block;
    width:32px;
    border-top:1.5px solid var(--mb-gold-500);
    margin:var(--s-2) 0;
  }
  .team-name{
    font-size:20px;
    font-weight:600;
    color:var(--mb-blue-700);
    margin:0 0 4px 0;
    letter-spacing:-0.01em;
  }
  .team-title{
    font-size:13px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--mb-gold-text);
    margin:0;
  }

  /* ===========================================================
     CONTACT — form + right rail
  =========================================================== */
  .contact-grid{
    display:grid;
    grid-template-columns:7fr 5fr;
    gap:clamp(48px, 6vw, 96px);
    align-items:start;
    margin-top:var(--s-6);
  }
  .contact-rail{
    display:flex;
    flex-direction:column;
    gap:var(--s-3);
  }
  .contact-rail .rail-list{ margin-top:var(--s-3); max-width:44ch; }
  @media (max-width:960px){
    .contact-grid{ grid-template-columns:1fr; }
  }
  .locator{
    font-size:16px;
    color:var(--mb-slate-800);
  }

  /* contact form */
  .contact-form{
    margin-top:0;
    max-width:600px;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--s-3);
  }
  .form-field{
    margin-top:var(--s-3);
    display:flex;
    flex-direction:column;
  }
  .form-row .form-field{ margin-top:0; }
  .form-field label{
    font-size:14px;
    font-weight:500;
    letter-spacing:0.02em;
    color:var(--mb-blue-700);
    margin-bottom:6px;
  }
  .form-field input,
  .form-field textarea{
    font-family:"Inter", system-ui, -apple-system, sans-serif;
    font-size:16px;
    color:var(--mb-slate-800);
    background:var(--mb-white);
    /* resting boundary must clear WCAG 1.4.11 3:1 on white; blue-700 = 5.21:1
       (blue-200 was 1.55:1). Still 1px so it stays within the hairline language. */
    border:1px solid var(--mb-blue-700);
    border-radius:var(--radius);
    padding:14px 16px;
    line-height:1.5;
    transition:border-color 150ms var(--ease), box-shadow 150ms var(--ease);
  }
  .form-field textarea{
    resize:vertical;
    min-height:120px;
  }
  /* hover darkens (steel-deep 10.3:1) — the old blue-400 hover (2.45:1) would
     now read as a contrast DROP against the blue-700 resting border */
  .form-field input:hover,
  .form-field textarea:hover{ border-color:var(--mb-steel-deep); }
  .form-field input:focus,
  .form-field textarea:focus{
    outline:none;
    border-color:var(--mb-blue-700);
    box-shadow:0 0 0 3px rgba(80,113,131,0.15);
  }
  .form-field input:focus-visible,
  .form-field textarea:focus-visible{
    outline:2px solid var(--mb-blue-700);
    outline-offset:2px;
  }
  .form-submit-row{
    margin-top:var(--s-4);
    display:flex;
    align-items:center;
    gap:var(--s-3);
  }
  .form-status{
    margin:0;
    font-size:14px;
  }
  .form-status[data-state="ok"]{ color:var(--mb-blue-700); }
  .form-status[data-state="error"]{
    color:var(--mb-steel-deep);
    font-weight:600;
  }
  .form-status[data-state="error"]::before{
    content:"";
    display:inline-block;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--mb-gold-500);
    margin-right:8px;
    vertical-align:2px;
  }

  /* ===========================================================
     FOOTER
  =========================================================== */
  .site-footer{
    background:var(--mb-steel-deep);
    border-top:0.5px solid var(--hairline);
    padding-top:var(--s-12);
    padding-bottom:var(--s-8);
  }
  /* closing statement: the mantra, large, with the CTA beside it */
  .footer-statement{
    display:flex;
    align-items:center;
    gap:clamp(32px, 4vw, 72px);
    flex-wrap:wrap;
  }
  /* the brand mark at statement scale — visually equal to the two-line mantra */
  .footer-statement-brand{ display:inline-block; flex-shrink:0; }
  .footer-statement-brand img{
    height:clamp(76px, 8.5vw, 118px);
    width:auto;
    display:block;
    /* optical correction: the mark's visual weight (wordmark + ENERGY line) sits
       low in the image canvas, so true geometric centering reads low beside the
       mantra — lift it slightly past center */
    transform:translateY(-9px);
  }
  .footer-statement .btn{ margin-left:auto; }
  .footer-mantra{
    margin:0;
    font-size:clamp(30px, 3.4vw, 52px);
    line-height:1.15;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--mb-on-steel-soft);
    max-width:18ch;
  }
  .footer-mantra-accent{ color:var(--mb-gold-on-steel); }
  /* the recovery-line motif, echoed quietly — the site closes on the same
     trace it opens with (sawtooth venting -> gold intervention -> recovered flow) */
  .footer-trace{
    display:block;
    width:100%;
    height:64px;
    margin:var(--s-8) 0 var(--s-6) 0;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:var(--s-6);
    align-items:start;
  }
  .footer-thesis{
    margin:0;
    font-size:16px;
    line-height:1.5;
    color:var(--mb-on-steel-soft);
    max-width:28ch;
  }
  .footer-loc{
    display:block;
    margin-top:var(--s-3);
    font-size:14px;
    color:var(--mb-blue-200);
  }
  .footer-col{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .footer-col-label{
    margin:0 0 4px 0;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--mb-gold-on-steel);
  }
  .footer-col a{
    font-size:15px;
    color:var(--mb-blue-100);
    text-decoration:none;
    position:relative;
    padding-bottom:2px;
    align-self:flex-start;
  }
  .footer-col a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    height:1px; width:100%;
    background:var(--mb-gold-500);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 150ms var(--ease);
  }
  .footer-col a:hover{ color:var(--mb-blue-50); }
  .footer-col a:hover::after{ transform:scaleX(1); }
  @media (max-width:760px){
    .footer-statement{ align-items:flex-start; flex-direction:column; gap:var(--s-4); }
    .footer-statement-brand img{ height:64px; transform:none; }
    .footer-statement .btn{ margin-left:0; }
    .footer-grid{ grid-template-columns:1fr; }
  }
  /* footer social icons — under the Calgary line */
  .footer-social{
    display:flex;
    gap:18px;
    margin-top:var(--s-3);
  }
  .footer-social a{
    color:var(--mb-blue-200);
    display:inline-flex;
    transition:color 150ms var(--ease);
  }
  .footer-social a:hover{ color:var(--mb-white); }
  .footer-social svg{ width:20px; height:20px; display:block; }

  /* page header with a media panel beside the title (services drone footage) */
  .page-header--media .container{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:clamp(24px, 4vw, 72px);
    align-items:center;
  }
  .ph-media .pilot-video{ margin-top:0; }
  .ph-media .spec-foot{ margin-top:var(--s-2); }
  @media (max-width:960px){
    .page-header--media .container{ grid-template-columns:1fr; }
    .ph-media{ margin-top:var(--s-4); }
  }

  /* emissions-intelligence header visual: free-flowing satellite scan on the page ground */
  .ph-media > svg{ width:100%; height:auto; display:block; }
  /* map + exposure funnel side by side (emissions-intelligence, what-you-get) */
  .map-funnel{
    display:grid;
    grid-template-columns:minmax(0, 640px) minmax(240px, 1fr);
    gap:clamp(24px, 4vw, 72px);
    align-items:center;
    margin-top:var(--s-6);
  }
  .exposure-funnel .spec-item + .spec-item{ margin-top:var(--s-3); }
  .exposure-funnel .spec-foot{ margin-top:var(--s-3); }
  @media (max-width:900px){
    .map-funnel{ grid-template-columns:1fr; }
    .exposure-funnel{ margin-top:var(--s-4); }
  }

  /* stat strip leading a section: kill the stacked top margins, keep a clean gap below */
  .include-block--lead{ margin-top:var(--s-2); margin-bottom:var(--s-6); }
  .include-block--lead .spec-strip{ margin-top:0; }
  .spec-strip--4{ grid-template-columns:repeat(4, 1fr); }
  @media (max-width:900px){ .spec-strip--4{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .spec-strip--4{ grid-template-columns:1fr; } }
  .ei-map-img{
    width:100%;
    max-width:680px;
    height:auto;
    display:block;
    border-radius:var(--radius);
    border:0.5px solid var(--hairline-steel);
  }
  /* the detection signature: SCADA traces through a gold detected window */
  .signal-art{ width:100%; height:auto; display:block; margin:var(--s-6) 0 var(--s-4); }

  /* pilot drone footage block (services pilot section) */
  .pilot-video{
    display:block;
    width:100%;
    margin-top:var(--s-6);
    border-radius:var(--radius);
  }

  .footer-meta{
    width:100%;
    margin-top:var(--s-8);
    padding-top:var(--s-3);
    border-top:0.5px solid rgba(219,175,104,0.25);
    font-size:13px;
    color:var(--mb-blue-200);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:var(--s-2) var(--s-4);
  }
  .footer-signoff{ color:var(--mb-gold-on-steel); }

  /* ===========================================================
     RESPONSIVE
  =========================================================== */
  @media (max-width:960px){
    .hero .container{
      grid-template-columns:1fr;
    }
    .hero-visual{
      margin-top:clamp(40px, 7vw, 64px);
      margin-right:0;
      width:100%;
      max-width:none;
      min-height:clamp(320px, 64vw, 440px);
      border-radius:var(--radius);
    }
    /* the 3-col ledger starves the middle caption column in the 761-960 band
       (caption drops to ~80px at 768); collapse to single-column across the
       whole tablet band, matching mech-grid/contact-grid which fold at 960 */
    .ledger-line{
      grid-template-columns:1fr;
      gap:var(--s-1);
    }
    .ledger-src{ text-align:left; align-self:start; }
  }
  @media (max-width:1100px){
    .team-grid{
      grid-template-columns:repeat(2, 1fr);
    }
  }
  /* nav collapse: with Emissions detection the row is 8 items (7 links + CTA)
     and needs more room than the 960px site fold gives it, so the hamburger
     takes over through 1300px — nav-only; the mech-grid / ledger / contact-grid
     folds stay at 960px */
  @media (max-width:1300px){
    .nav-links{ display:none; }
    .nav-inner > .cta{ display:none; }
    .hamburger{ display:block; }

    /* touch tap-targets apply across the whole hamburger band (601–1300 included) */
    .mobile-panel a{ min-height:44px; display:flex; align-items:center; }
    .hamburger{ width:44px; height:44px; }
  }
  @media (max-width:760px){
    .hero{
      min-height:auto;
      padding-top:128px;
      padding-bottom:var(--s-8);
    }
    .hero .container{
      gap:var(--s-6);
    }
    .platform-row{
      grid-template-columns:1fr;
    }
    .platform-col{
      border-left:0;
      border-top:0.5px solid var(--hairline);
      padding:var(--s-4) 0 0 0;
      margin-top:var(--s-4);
    }
    .platform-col:first-child{
      border-top:0;
      margin-top:0;
      padding-top:0;
    }
    .form-row{
      grid-template-columns:1fr;
    }
    .form-row .form-field + .form-field{ margin-top:var(--s-3); }
  }
  @media (max-width:600px){
    body{ font-size:16px; }
    .hero .subhead{ font-size:17px; }
    .hero .eyebrow{ font-size:11px; letter-spacing:0.08em; }
    .footer-nav a{ padding:8px 0; }
    .contact-form .btn{ width:100%; justify-content:center; }
    /* the in-SVG labels shrink below ~11px and crowd the trace at this width;
       the recovery trace alone still reads, so drop the labels */
    .hero-visual .vis-label{ display:none; }
    .hero-visual{ padding:24px 20px; min-height:clamp(260px, 70vw, 360px); }
    .team-grid{
      grid-template-columns:1fr;
    }
  }

  /* ===========================================================
     REDUCED MOTION — final states instantly
  =========================================================== */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    .recovery-trace, .pressure-band, .road-not-taken, .gold-dot-vis, .vis-divider, .vis-label{
      transition:none !important;
      animation:none !important;
      stroke-dashoffset:0 !important;
      opacity:var(--final-op, 1) !important;
    }
    *{ transition:none !important; }
  }

  /* ===========================================================
     PAGE HEADER (interior pages) + HOME TEASERS
     Interior-page intro block: eyebrow + one clean H1, styled off the
     existing hero/h2 tokens — no new colors, calm and on-brand.
  =========================================================== */
  .page-header{
    padding-top:clamp(160px, 20vh, 240px);
    padding-bottom:var(--ph-pad-bottom);
  }
  .page-header .eyebrow{ margin-bottom:20px; }
  .page-header h1{
    font-size:clamp(38px, 5vw, 66px);
    font-weight:600;
    line-height:1.06;
    letter-spacing:-0.03em;
    color:var(--mb-steel-deep);
    /* no measure cap (same rationale as h2.h2): run the container, wrap only
       when genuinely out of room. The hero h1 keeps its own column-fitted cap. */
    margin:0;
  }
  .page-header .lead{ max-width:92ch; }
  /* the shared gold hairline that closes every interior masthead */
  .page-header .container{
    border-bottom:0.5px solid var(--hairline);
    padding-bottom:var(--s-6);
  }

  /* home teaser row — four calm cards linking to the interior pages */
  .teaser-row{
    margin-top:var(--s-8);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
  }
  .teaser-col{
    padding:0 clamp(20px,3vw,40px);
    border-left:0.5px solid var(--hairline);
    display:flex;
    flex-direction:column;
    position:relative; /* anchors the stretched-link overlay below */
    transition:background-color 160ms var(--ease);
  }
  .teaser-col:first-child{
    border-left:0;
    padding-left:0;
  }
  .teaser-col:last-child{ padding-right:0; }
  .teaser-col .eyebrow{ margin-bottom:12px; }
  .teaser-num{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.1em;
    color:var(--mb-gold-text);
    margin:0 0 10px 0;
  }
  .teaser-col .teaser-label{
    font-size:24px;
    font-weight:600;
    color:var(--mb-blue-700);
    margin:0 0 12px 0;
    letter-spacing:-0.01em;
    line-height:1.2;
  }
  .teaser-col .teaser-body{
    font-size:16px;
    line-height:1.6;
    color:var(--mb-slate-800);
    margin:0 0 var(--s-3) 0;
  }
  .teaser-col .cta{ margin-top:auto; }
  .platform-col .cta{ margin-top:var(--s-3); }
  /* stretched link: the whole card is genuinely clickable, matching the card-level
     hover language below (the ::before overlay extends the anchor's hit area) */
  .teaser-col .cta::before{
    content:"";
    position:absolute;
    inset:0;
  }
  /* move the focus ring to the full card so it matches the real click target */
  .teaser-col .cta:focus-visible{ outline:none; }
  .teaser-col .cta:focus-visible::before{
    outline:2px solid var(--mb-blue-700);
    outline-offset:2px;
    border-radius:2px;
  }
  /* hovering anywhere on the card previews its link's own hover state, plus a calm
     white wash (the teasers sit on the tint section) — surface response, no shadows */
  .teaser-col:hover{ background:var(--mb-white); }
  .teaser-col:hover .cta .arrow{ transform:translateX(2px); }
  .teaser-col:hover .cta .cta-label::after{ transform:scaleX(1); }

  /* 4-up teasers crowd in the tablet band — fold to a 2x2 with the same hairline
     language (left rule opens each row's second column only) */
  @media (max-width:1100px) and (min-width:761px){
    .teaser-row{
      grid-template-columns:1fr 1fr;
      row-gap:var(--s-6);
    }
    .teaser-col:nth-child(odd){ border-left:0; padding-left:0; }
    .teaser-col:nth-child(even){ padding-right:0; }
  }
  @media (max-width:760px){
    .teaser-row{ grid-template-columns:1fr; }
    .teaser-col{
      border-left:0;
      border-top:0.5px solid var(--hairline);
      padding:var(--s-4) 0 0 0;
      margin-top:var(--s-4);
    }
    .teaser-col:first-child{
      border-top:0;
      margin-top:0;
      padding-top:0;
    }
    .page-header{ padding-top:clamp(128px, 18vh, 180px); }
  }

  /* ===========================================================
     SERVICES + PLATFORM EXPANSION
     Extensions of the existing archetypes — no parallel system.
  =========================================================== */

  /* ---- two-pillar designed moment (services: Restore / Prevent) ---- */
  .pillar-grid{
    margin-top:var(--s-8);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
  }
  .pillar{
    padding:0 clamp(24px, 4vw, 56px);
    border-left:0.5px solid var(--hairline);
  }
  .pillar:first-child{ border-left:0; padding-left:0; }
  .pillar:last-child{ padding-right:0; }
  .pillar-word{
    font-size:clamp(40px, 4.6vw, 64px);
    font-weight:600;
    line-height:1.05;
    letter-spacing:-0.03em;
    color:var(--mb-steel-deep);
    margin:0;
  }
  .pillar-rule{
    display:block;
    width:40px;
    border-top:1.5px solid var(--mb-gold-500);
    margin:var(--s-3) 0;
  }
  .pillar-tag{
    margin:0;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.10em;
    text-transform:uppercase;
    color:var(--mb-gold-text);
  }
  .pillar-body{
    margin:var(--s-2) 0 0 0;
    font-size:17px;
    line-height:1.65;
    color:var(--mb-slate-800);
    max-width:80ch;
  }
  /* the blowdown connection — closes the pillar moment as one shared statement */
  .pillar-note{
    margin:var(--s-8) 0 0 0;
    padding-top:var(--s-3);
    border-top:0.5px solid var(--hairline);
    font-size:17px;
    line-height:1.65;
    color:var(--mb-slate-800);
    max-width:100ch;
  }
  @media (max-width:760px){
    .pillar-grid{ grid-template-columns:1fr; }
    .pillar{ border-left:0; padding:var(--s-6) 0 0 0; }
    .pillar:first-child{ padding-top:0; }
  }

  /* ---- platform-row width variants (2-up equipment/delivery, 3-up qualities) ---- */
  .platform-row--2{ grid-template-columns:repeat(2, 1fr); }
  .platform-row--3{ grid-template-columns:repeat(3, 1fr); row-gap:var(--s-6); }
  /* multi-row 3-up grids: kill the stray left divider on each row's first column */
  .platform-row--3 .platform-col:nth-child(3n+1){ border-left:0; padding-left:0; }
  @media (max-width:760px){
    .platform-row--2, .platform-row--3{ grid-template-columns:1fr; }
  }
  /* small uppercase kicker under a column label (equipment modes, delivery models) */
  .platform-col .col-sub{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mb-gold-text);
    margin:-4px 0 10px 0;
  }

  /* ---- cause / application grids: commit-items laid out in columns ---- */
  .cause-grid{
    margin-top:var(--s-6);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 clamp(32px, 5vw, 72px);
  }
  .app-grid{
    margin-top:var(--s-6);
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0 clamp(24px, 4vw, 56px);
  }
  /* in a grid every item keeps its ledger rule — the first-child exemption is
     for single stacks only */
  .cause-grid .commit-item,
  .app-grid .commit-item{ border-top:0.5px solid var(--hairline); }
  @media (max-width:960px){
    .app-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:600px){
    .cause-grid, .app-grid{ grid-template-columns:1fr; }
  }

  /* ---- operating-envelope spec strip (services) ---- */
  .spec-strip{
    margin-top:var(--s-6);
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:var(--s-3) clamp(20px, 3vw, 40px);
  }
  .spec-item{
    border-top:0.5px solid var(--hairline);
    padding-top:14px;
  }
  .spec-num{
    font-size:clamp(22px, 1.8vw, 28px);
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.2;
    color:var(--mb-steel-deep);
    margin:0;
    font-feature-settings:"tnum" 1;
  }
  .spec-label{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mb-gold-text);
    margin:6px 0 0 0;
  }
  .spec-foot{
    margin:var(--s-3) 0 0 0;
    font-size:14px;
    line-height:1.6;
    font-style:italic;
    color:var(--mb-slate-800);
    max-width:100ch;
  }
  @media (max-width:960px){
    .spec-strip{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:600px){
    .spec-strip{ grid-template-columns:1fr; }
  }

  /* ---- "every package includes" — inline gold-dot list ---- */
  .include-list{
    margin-top:var(--s-3);
    display:flex;
    flex-wrap:wrap;
    gap:12px clamp(24px, 3vw, 40px);
    max-width:960px;
  }
  .include-item{
    display:flex;
    gap:10px;
    align-items:baseline;
    font-size:16px;
    line-height:1.5;
    color:var(--mb-slate-800);
  }
  .include-block{ margin-top:var(--s-8); }

  /* ---- inline text link (body copy) — the mobile-panel active language ---- */
  .text-link{
    color:var(--mb-blue-700);
    font-weight:500;
    text-decoration:underline;
    text-decoration-color:var(--mb-gold-500);
    text-decoration-thickness:1.5px;
    text-underline-offset:4px;
  }
  .text-link:hover{ color:var(--mb-steel-deep); }

  /* ---- text-link on the steel surface ---- */
  .section--steel .text-link{ color:var(--mb-blue-50); }
  .section--steel .text-link:hover{ color:var(--mb-white); }

  /* ---- team card one-line bios (about) ---- */
  .team-bio{
    margin:10px 0 0 0;
    font-size:14px;
    line-height:1.55;
    color:var(--mb-slate-800);
    max-width:26ch;
  }
  .team-linkedin{
    display:inline-block;
    margin-top:8px;
    font-size:13px;
  }
  .team-footnote{
    margin:26px 0 0 0;
    font-size:14px;
    font-style:italic;
    color:var(--mb-slate-800);
  }

  /* ===========================================================
     NEWS RELEASES
     Ledger-derived list on the light surface: date rail + content
     column, hairline-ruled items — existing tokens and type steps
     only, no new colors.
  =========================================================== */
  .news-list{ margin-top:var(--s-6); }
  .news-item{
    display:grid;
    grid-template-columns:minmax(180px, 240px) 1fr;
    gap:var(--s-2) clamp(32px, 5vw, 72px);
    align-items:start;
    padding-top:var(--s-4);
    margin-top:var(--s-6);
    border-top:0.5px solid var(--hairline);
  }
  .news-item:first-child{ margin-top:0; }
  .news-date{
    font-size:clamp(20px, 1.6vw, 24px);
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.3;
    color:var(--mb-steel-deep);
    margin:0;
    font-feature-settings:"tnum" 1;
  }
  .news-kicker{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--mb-gold-text);
    margin:6px 0 0 0;
  }
  .news-title{
    font-size:clamp(24px, 2.2vw, 32px);
    font-weight:600;
    line-height:1.25;
    letter-spacing:-0.02em;
    color:var(--mb-blue-700);
    margin:0;
  }
  /* index titles link to each release's own page; keep the title's own color
     and only reveal the gold text-link underline on hover/focus */
  .news-title a{
    color:inherit;
    text-decoration:none;
  }
  .news-title a:hover,
  .news-title a:focus-visible{
    text-decoration:underline;
    text-decoration-color:var(--mb-gold-500);
    text-decoration-thickness:1.5px;
    text-underline-offset:4px;
  }
  .news-content > p{
    margin:var(--s-2) 0 0 0;
    font-size:17px;
    line-height:1.65;
    color:var(--mb-slate-800);
    max-width:95ch;
  }
  .news-links{
    margin-top:var(--s-3);
    display:flex;
    flex-wrap:wrap;
    gap:10px clamp(24px, 3vw, 40px);
    font-size:15px;
  }
  @media (max-width:960px){
    .news-item{ grid-template-columns:1fr; gap:var(--s-1); }
    .news-content{ margin-top:var(--s-1); }
  }

  /* ===========================================================
     PRIVACY: footer link, form note, choice button, consent banner
     =========================================================== */
  .footer-meta a{
    color:var(--mb-blue-200);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color 150ms var(--ease);
  }
  .footer-meta a:hover{ color:var(--mb-white); }

  .form-privacy{
    margin-top:var(--s-2);
    font-size:13px;
    line-height:1.55;
    color:var(--mb-slate-800);
  }

  /* text-link rendered as a real <button> (privacy page's analytics choice) */
  button.text-link{
    background:none;
    border:0;
    padding:0;
    font:inherit;
    cursor:pointer;
  }

  /* ---- analytics consent banner (injected by app.js until a choice is made) ---- */
  .consent-banner{
    position:fixed;
    z-index:90;
    left:24px;
    right:24px;
    bottom:24px;
    max-width:560px;
    margin-right:auto;
    background:var(--mb-steel-deep);
    color:var(--mb-blue-50);
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:0 12px 32px rgba(47,67,80,0.35);
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .consent-banner .consent-text{
    margin:0;
    font-size:14.5px;
    line-height:1.55;
    color:var(--mb-blue-50);
  }
  .consent-banner .text-link{ color:var(--mb-blue-50); }
  .consent-banner .text-link:hover{ color:var(--mb-white); }
  .consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  /* on the deep-steel banner the standard fill reads one step up, as on steel sections */
  .consent-banner .btn{ padding:11px 20px; font-size:15px; background:var(--mb-blue-700); }
  .consent-banner .btn:hover{ background:var(--mb-blue-900); }
  .consent-decline{
    font:500 15px/1 "Inter", system-ui, -apple-system, sans-serif;
    color:var(--mb-blue-50);
    background:transparent;
    border:1px solid rgba(234,241,243,0.45);
    border-radius:var(--radius);
    padding:10px 20px;
    cursor:pointer;
    transition:border-color 150ms var(--ease), color 150ms var(--ease);
  }
  .consent-decline:hover{ border-color:var(--mb-white); color:var(--mb-white); }
  @media (max-width:600px){
    .consent-banner{ left:12px; right:12px; bottom:12px; padding:16px 18px; }
  }

  /* ===========================================================
     OFFICE: footer street address + contact-page map card
     =========================================================== */
  .footer-addr{
    display:block;
    margin-top:var(--s-1);
    font-size:13px;
    color:var(--mb-blue-200);
  }

  .office-block{ margin-top:var(--s-4); }
  .office-addr{
    font-size:15px;
    line-height:1.6;
    color:var(--mb-slate-800);
    margin-bottom:var(--s-2);
  }
  .office-map{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--hairline-steel);
  }
  .office-map img{ display:block; width:100%; height:auto; }
  .office-pin{
    position:absolute;
    left:50%; top:50%;
    width:14px; height:14px;
    margin:-7px 0 0 -7px;
    border-radius:50%;
    background:var(--mb-gold-500);
    box-shadow:0 0 0 3px rgba(255,255,255,0.92), 0 0 0 4.5px rgba(80,113,131,0.5);
  }
  .office-foot{ margin-top:var(--s-1); }

  /* ===========================================================
     FIELD PHOTOGRAPHY: in-section figures + header photo
     =========================================================== */
  .ph-photo{
    display:block;
    width:100%;
    height:auto;
    border-radius:var(--radius);
    border:1px solid var(--hairline-steel);
  }
  .section-figure{ margin-top:var(--s-6); }
  .section-figure--flush{ margin-top:0; }
  .section-figure .spec-foot{ margin-top:var(--s-2); }
  /* square header photo (about): cap its size so the row stays balanced against a
     short headline, and keep it pinned to the outer edge of its column */
  .ph-media--square{
    justify-self:end;
    width:min(100%, clamp(400px, 30vw, 540px));
  }
  @media (max-width:960px){
    .ph-media--square{ justify-self:start; width:min(100%, 440px); }
  }

  /* leadership cards carry narrative bios: span two tracks of the 4-col team
     grid (full row once the grid folds to 2-col; back to auto at 1-col) */
  .team-card--wide{ grid-column:span 2; }
  .team-card--wide .team-bio{ max-width:52ch; }
  @media (max-width:600px){
    .team-card--wide{ grid-column:auto; }
  }

  /* the emissions-intelligence proof bar: the real training/validation stats,
     promoted to sit directly under the hero claim at a larger numeral scale */
  .include-block--proof{ margin-top:var(--s-8); }
  .include-block--proof .spec-strip{ margin-top:0; }
  .include-block--proof .spec-num{ font-size:clamp(30px, 2.6vw, 44px); }

  /* the proof-bar container must escape the header's two-column media grid
     and span the full section width */
  .page-header--media .container--full{ display:block; }

  /* proof bar, centered: stats centered in their tracks with a short gold tick
     above each numeral, the receipt caption centered beneath */
  .include-block--proof .spec-strip{
    max-width:1240px;
    margin-left:auto;
    margin-right:auto;
  }
  .include-block--proof .spec-item{
    text-align:center;
    border-top:0;
    padding-top:0;
  }
  .include-block--proof .spec-item::before{
    content:"";
    display:block;
    width:44px;
    height:2px;
    background:var(--mb-gold-500);
    margin:0 auto var(--s-2);
  }
  .include-block--proof .spec-label{
    max-width:22ch;
    margin-left:auto;
    margin-right:auto;
  }
  .include-block--proof .spec-foot{
    text-align:center;
    margin-top:var(--s-4);
  }

  /* the base .spec-strip (5 tracks, defined later in the file) was overriding the
     --4 modifier by order: every four-item strip rendered with an empty fifth
     column, bunched left. Double the class so four means four, at every fold. */
  .spec-strip.spec-strip--4{ grid-template-columns:repeat(4, 1fr); }
  @media (max-width:900px){ .spec-strip.spec-strip--4{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .spec-strip.spec-strip--4{ grid-template-columns:1fr; } }
  /* proof-bar caption: centered under the whole strip, no inherited width cap */
  .include-block--proof .spec-foot{ max-width:none; }

  /* home "what we do": the hardware package named up front — pump, power,
     people, process as a compact icon row inside the tint box */
  .fourp-row{
    margin-top:var(--s-4);
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2) var(--s-6);
  }
  .fourp-item{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .fourp-icon svg{ display:block; color:var(--mb-blue-700); }
  .fourp-word{
    font-size:16px;
    font-weight:500;
    color:var(--mb-steel-deep);
  }