:root {
    /* ---- Reference = antler.co. Exact Antler swatches, Do's greens as the accent. ---- */
    --canvas:      #F9F7F5;  /* Antler light-200 — warm-white page background */
    --cream:       #F0EBE6;  /* Antler light-400 — alt sections */
    --sand:        #E1D7CE;  /* Antler light-600 — hairlines / deep surface */
    --white:       #FFFFFF;
    --ink:         #1E1E1E;  /* Antler soft near-black — primary text */
    --ink-muted:   #55605A;  /* secondary text (warm-grey, faint green) */
    --ink-dim:     #6C766C;  /* tertiary / captions / mono labels (AA on white & canvas) */

    --green:       #7ABA50;  /* Do's REAL bright green — THE accent */
    --green-deep:  #4B7A4B;  /* Do's deep green — headings-on-tint, growth stem */
    --green-tint:  #EAF4E1;  /* soft green wash */
    --forest:      #14301C;  /* dark forest field */
    --forest-2:    #0F2116;  /* deepest forest */
    --forest-line: #23492E;  /* hairline on forest */
    --leaf-on-dark:#9AD46E;  /* bright green on forest */

    /* hero valley — muted green surfaces (terraces), NOT accent usage */
    --terrace-1:   #EEF2E3;
    --terrace-2:   #DFEACC;
    --terrace-3:   #CCDFB3;
    --terrace-4:   #B8D29A;

    --focus:       #4B7A4B;

    /* Antler runs Nib Pro (serif display) + Satoshi (sans). We echo that split with
       Vietnamese-complete system stacks so the storyboard stays self-contained;
       BUILD self-hosts "Nib Pro"/editorial-serif + "Be Vietnam Pro"/Satoshi. */
    --display: "Nib Pro", ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans:    "Satoshi", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
    --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* ---- LOCKED TYPE SCALE — every font size on the page pulls from these ---- */
    --h1: clamp(3.3rem, 9.6vw, 7.6rem);      /* hero display */
    --h2: clamp(1.95rem, 4.2vw, 3.4rem);     /* section heads */
    --h3: clamp(1.3rem, 2.1vw, 1.6rem);      /* card titles */
    --h4: 1.2rem;
    --h5: 1.05rem;
    --h6: 0.95rem;
    --p: 1.02rem;                             /* body */
    --lede: clamp(1.05rem, 1.5vw, 1.26rem);   /* section ledes */
    --small: 0.85rem;
    --eyebrow: 0.72rem;                       /* mono labels / eyebrows */
    --lh-tight: 1.05;
    --lh-body: 1.6;

    --radius: 8px;
    --radius-sm: 3px;
    --maxw: 1200px;
    --nav-h: 66px;
    --gutter: clamp(20px, 5vw, 56px);   /* one gutter; centered --maxw yields ~15% margins */
    --sec-pad: clamp(84px, 11vw, 148px);
    --sec-pad-sm: clamp(56px, 7vw, 92px);
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: var(--lh-body);
    letter-spacing: -0.003em;
    padding-top: var(--nav-h);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--green-tint); color: var(--green-deep); }

  a { color: var(--green-deep); text-decoration: none; }
  a:hover { color: var(--ink); }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
  .mono { font-family: var(--mono); }
  .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
  .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* ---------- Storyboard ribbon — bottom-LEFT (standard) ---------- */
  .ribbon {
    position: fixed; bottom: 12px; left: 12px; z-index: 400;
    font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink); background: var(--green); padding: 5px 10px; border-radius: 5px;
    font-weight: 700; box-shadow: 0 4px 18px rgba(122,186,80,0.34); pointer-events: none; white-space: nowrap;
  }
  .ribbon .short { display: none; }

  /* ---------- Fixed nav ---------- */
  .header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(249,247,245,0.86);
    backdrop-filter: saturate(130%) blur(11px);
    -webkit-backdrop-filter: saturate(130%) blur(11px);
    border-bottom: 1px solid var(--sand);
  }
  nav {
    height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
    max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  }
  .brand { display: flex; align-items: center; gap: 13px; color: var(--ink); }
  .brand img { height: 30px; width: auto; display: block; }
  .brand .tag {
    font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.16em; color: var(--ink-dim);
    text-transform: uppercase; font-weight: 500; padding-left: 13px; border-left: 1px solid var(--sand);
  }
  .nav-links { display: flex; align-items: center; gap: 26px; }
  .nav-links a {
    font-size: var(--small); letter-spacing: 0.005em; color: var(--ink-muted); font-weight: 500; transition: color .15s ease;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    font-size: var(--small); letter-spacing: 0.01em; font-weight: 600;
    color: var(--white) !important; background: var(--ink); border: 1px solid var(--ink);
    padding: 10px 18px; border-radius: 100vw;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  }
  .nav-cta:hover { background: var(--green); border-color: var(--green); color: var(--ink) !important; transform: translateY(-1px); }

  /* ---------- Section scaffold ---------- */
  section { position: relative; }
  .sec-pad { padding-block: var(--sec-pad); }
  .sec-pad-sm { padding-block: var(--sec-pad-sm); }
  .rule { border-top: 1px solid var(--sand); }
  .eyebrow {
    font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-muted); display: flex; align-items: center; gap: 13px; margin: 0 0 28px;
  }
  .eyebrow .num { color: var(--green-deep); font-weight: 700; }
  .eyebrow .line { flex: 1; height: 1px; background: var(--sand); }

  h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: var(--lh-tight); }
  .sec-head {
    font-family: var(--display); font-weight: 500; font-size: var(--h2);
    max-width: 18ch; letter-spacing: -0.02em; line-height: 1.02; color: var(--ink);
  }
  .sec-head em { font-style: italic; color: var(--green-deep); }
  .lede { color: var(--ink-muted); font-size: var(--lede); max-width: 60ch; font-weight: 400; margin: 18px 0 0; }

  .btn {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    font-family: var(--sans); font-size: var(--small); letter-spacing: 0.005em; font-weight: 600;
    padding: 14px 24px; border-radius: 100vw; border: 1px solid transparent;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
  }
  .btn .arrow { transition: transform .18s ease; }
  .btn:hover .arrow { transform: translateX(3px); }
  .btn-primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .btn-primary:hover { background: var(--green); border-color: var(--green); color: var(--ink); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(122,186,80,0.28); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); }
  .btn-on-dark { background: var(--green); color: var(--forest-2); border-color: var(--green); }
  .btn-on-dark:hover { background: var(--leaf-on-dark); border-color: var(--leaf-on-dark); color: var(--forest-2); transform: translateY(-1px); }

  /* =====================================================================
     HERO — "the valley at dawn". A full-bleed SVG landscape of terraced
     fields (Vietnam's rice terraces) under a warm morning sun. Seedlings
     pop up along the terrace ridges on load and sway in the breeze; the
     headline's full stop is a seed that sprouts. Cursor drifts the layers
     (gentle parallax). Grow by doing — said visually, not stated.
     ===================================================================== */
  .hero { position: relative; overflow: hidden; min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; }
  .hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(90rem 40rem at 82% -6%, rgba(244,231,190,0.55), transparent 58%),
      linear-gradient(180deg, var(--canvas) 0%, #F7F6EF 46%, #F2F3E6 100%);
  }
  .hero-scene { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
    width: 100%; height: clamp(280px, 52vh, 560px); display: block; }
  .hero-copy { position: relative; z-index: 2; width: 100%; padding-top: clamp(34px, 7vh, 88px); }
  .hero-kicker {
    font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-muted); margin: 0 0 24px; display: inline-flex; align-items: center; gap: 11px;
  }
  .hero-kicker::before { content: ""; width: 26px; height: 1px; background: var(--green-deep); display: inline-block; }
  .hero-h1 {
    font-family: var(--display); font-weight: 500; letter-spacing: -0.035em; line-height: 0.92;
    font-size: var(--h1); color: var(--ink); margin: 0 0 6px;
  }
  .hero-h1 em { font-style: italic; color: var(--green-deep); }
  /* the full stop of "doing." is a seed that sprouts */
  .dotseed { display: inline-block; width: 0.34em; height: 0.62em; position: relative; vertical-align: baseline; }
  .dotseed svg { position: absolute; left: 0; bottom: 0.02em; width: 100%; height: 100%; overflow: visible; display: block; }
  .dotseed .ds-stem { stroke-dasharray: 60 60; stroke-dashoffset: 0; }
  .dotseed .ds-leaf { transform-box: fill-box; transform-origin: bottom center; }
  html.anim .dotseed .ds-stem { stroke-dashoffset: 60; animation: dsDraw 0.9s cubic-bezier(.4,0,.2,1) 1.05s forwards; }
  html.anim .dotseed .ds-leaf { transform: scale(0); animation: dsPop 0.55s cubic-bezier(.34,1.56,.64,1) forwards; }
  html.anim .dotseed .ds-leaf.l1 { animation-delay: 1.7s; }
  html.anim .dotseed .ds-leaf.l2 { animation-delay: 1.85s; }
  @keyframes dsDraw { to { stroke-dashoffset: 0; } }
  @keyframes dsPop { to { transform: scale(1); } }

  .hero-sub { color: var(--ink-muted); font-size: var(--lede); line-height: 1.5; max-width: 46ch; margin: 18px 0 18px; }
  .hero-viet { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.06em; color: var(--ink-dim); margin: 0 0 28px; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .hero-cue {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 2;
    font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(20,48,28,0.72); pointer-events: none; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  }
  .hero-cue .a { display: inline-block; }
  html.anim .hero-cue .a { animation: cueDown 2.2s ease-in-out infinite; }
  @keyframes cueDown { 0%,100% { transform: translateY(0); opacity:.7; } 50% { transform: translateY(4px); opacity:1; } }

  /* scene load-in + life */
  .sprig .sgrow { transform-box: fill-box; transform-origin: bottom center; }
  html.anim .sprig .sgrow { transform: scale(0); animation: sprigPop .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: var(--d, 0.3s); }
  @keyframes sprigPop { to { transform: scale(1); } }
  .sprig .sway { transform-box: fill-box; transform-origin: bottom center; }
  html.anim .sprig .sway { animation: sway 4.6s ease-in-out infinite alternate; animation-delay: var(--sd, 0s); }
  @keyframes sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.6deg); } }
  html.anim .seedf { animation: seedFloat 9s ease-in-out infinite; animation-delay: var(--fd, 0s); }
  @keyframes seedFloat { 0% { transform: translate(0,0); opacity: 0; } 12% { opacity: .5; } 60% { opacity: .35; } 100% { transform: translate(-34px,-72px); opacity: 0; } }
  html.anim .hlayer { transition: transform .25s ease-out; }

  @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  html.anim .hero-in { animation: heroIn .7s cubic-bezier(.16,1,.3,1) both; }
  html.anim .hero-in:nth-child(2){ animation-delay: .08s; }
  html.anim .hero-in:nth-child(3){ animation-delay: .16s; }
  html.anim .hero-in:nth-child(4){ animation-delay: .24s; }
  html.anim .hero-in:nth-child(5){ animation-delay: .32s; }

  /* ---------- GEO extractable facts ---------- */
  .facts-strip { background: var(--cream); }
  .facts-strip .wrap { display: flex; align-items: flex-start; gap: clamp(18px, 3vw, 40px); padding-block: 30px; flex-wrap: wrap; }
  .facts-strip .k { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); flex: none; padding-top: 4px; }
  .facts-strip p { margin: 0; color: var(--ink); font-size: var(--p); line-height: 1.55; max-width: 78ch; }
  .facts-strip p b { font-weight: 600; }

  /* ---------- 01 PORTFOLIO LOGO WALL ----------
     Real logos, obviously clickable. Grayscale at rest → full colour on
     hover, under a brand-green gradient wash + a soft glow that follows the
     cursor (--mx/--my set by JS; a static wash still shows without JS). The
     wash is masked off the bottom meta row so the sector / Visit labels
     always sit on pure white — AA never degrades. The green top edge
     feathers transparent → green → transparent, echoing the vine. Each tile
     carries a data-page hook for the per-company landing pages (built later). */
  .wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
  .wtile {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
    background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius);
    padding: 22px 22px 16px; min-height: 150px; color: var(--ink);
    transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .22s ease, box-shadow .22s ease;
  }
  .wtile::before {  /* green gradient wash + cursor glow, faded out above the meta row */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .3s ease;
    background:
      radial-gradient(190px 190px at var(--mx, 62%) var(--my, 18%), rgba(122,186,80,0.20), rgba(122,186,80,0) 72%),
      linear-gradient(152deg, rgba(122,186,80,0.13) 0%, rgba(234,244,225,0.55) 36%, rgba(234,244,225,0) 74%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent calc(100% - 38px));
            mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent calc(100% - 38px));
  }
  .wtile::after {  /* feathered green top edge — the vine's language, horizontal */
    content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--green) 30%, var(--green) 70%, transparent);
    opacity: 0; transform: scaleX(.35); transition: opacity .3s ease, transform .34s cubic-bezier(.16,1,.3,1);
  }
  .wtile:hover, .wtile:focus-visible {
    transform: translateY(-4px); border-color: var(--green);
    box-shadow: 0 16px 36px rgba(20,48,28,0.10), 0 5px 16px rgba(122,186,80,0.18);
  }
  /* the stagger-reveal rule (html.anim .stagger.in > *) outguns .wtile:hover on
     specificity and was silently killing the lift — re-assert it post-reveal */
  html.anim .stagger.in > .wtile:hover, html.anim .stagger.in > .wtile:focus-visible { transform: translateY(-4px); }
  .wtile:hover::before, .wtile:focus-visible::before { opacity: 1; }
  .wtile:hover::after,  .wtile:focus-visible::after  { opacity: 1; transform: scaleX(1); }
  .wlogo, .wmeta { position: relative; z-index: 1; }  /* content above the wash */
  .wlogo { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 62px; }
  .wlogo img { max-height: 44px; max-width: 72%; width: auto; height: auto; display: block;
    filter: grayscale(1) opacity(.72); transition: filter .25s ease, transform .25s ease; }
  .wtile:hover .wlogo img, .wtile:focus-visible .wlogo img { filter: none; transform: scale(1.05); }
  .wtile.tall .wlogo img { max-height: 58px; }
  @media (hover: hover) and (pointer: fine) {  /* the wall focuses — siblings recede while one tile is alive */
    .wall:hover .wtile:not(:hover) .wlogo img { filter: grayscale(1) opacity(.42); }
  }
  .wmeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--cream); padding-top: 12px; }
  .wmeta .ws { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); transition: color .18s ease; }
  .wtile:hover .wmeta .ws, .wtile:focus-visible .wmeta .ws { color: var(--ink); }
  .wmeta .wv { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
    display: inline-flex; align-items: center; gap: 6px; transition: color .18s ease; }
  .wmeta .wv span { transition: transform .22s cubic-bezier(.16,1,.3,1); }
  .wtile:hover .wmeta .wv, .wtile:focus-visible .wmeta .wv { color: var(--green-deep); }
  .wtile:hover .wmeta .wv span, .wtile:focus-visible .wmeta .wv span { transform: translate(2px, -2px); }  /* ↗ goes ↗ */
  .wall-note { margin-top: 18px; font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.08em; color: var(--ink-dim); }
  .wall-note::before { content: ""; display: inline-block; width: 26px; height: 2px; border-radius: 2px; vertical-align: 3px; margin-right: 12px;
    background: linear-gradient(90deg, var(--green), transparent); }
  .wall-note b { color: var(--green-deep); font-weight: 700; }

  /* ---------- 02 FUND — stats + BACKED BY (highlighted) + Fund II impact ---------- */
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sand); border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden; margin-top: 44px; }
  .stat { background: var(--canvas); padding: 32px 26px 34px; transition: background .18s ease; }
  .stat:hover { background: var(--white); }
  .stat .n { font-family: var(--display); font-weight: 500; font-size: var(--h2); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
  .stat .n .u { color: var(--green-deep); }
  .stat .l { margin-top: 12px; color: var(--ink-muted); font-size: var(--h6); line-height: 1.4; max-width: 22ch; }

  .backers { margin-top: 40px; border-radius: var(--radius); background: var(--green-tint); border: 1px solid #D6E7C4; padding: clamp(26px, 3.4vw, 40px); }
  .backers-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
  .backers-head .bt { font-family: var(--display); font-size: var(--h3); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
  .backers-head .bt em { font-style: italic; color: var(--green-deep); }
  .backers-head .bk { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; }
  .backer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .backer {
    display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid #D6E7C4; border-radius: var(--radius);
    padding: 20px 20px 14px; color: var(--ink); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .backer:hover { transform: translateY(-3px); border-color: var(--green-deep); box-shadow: 0 14px 30px rgba(20,48,28,0.12); color: var(--ink); }
  /* .backer is a direct child of .backer-grid.stagger — the reveal rule
     (html.anim .stagger.in > *) outguns .backer:hover and kills the lift; re-assert it post-reveal */
  html.anim .stagger.in > .backer:hover, html.anim .stagger.in > .backer:focus-visible { transform: translateY(-3px); }
  .backer .blogo { height: 58px; display: flex; align-items: center; justify-content: flex-start; }
  .backer .blogo img { max-height: 30px; max-width: 82%; width: auto; height: auto; display: block; }
  .backer .blogo img.stacked { max-height: 54px; }
  .backer .bfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--cream); padding-top: 11px; }
  .backer .bn { font-size: var(--small); font-weight: 600; color: var(--ink); }
  .backer .ba { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
    display: inline-flex; align-items: center; gap: 6px; transition: color .18s ease, transform .18s ease; }
  .backer:hover .ba { color: var(--green-deep); transform: translateX(2px); }

  .f2-note { margin-top: 22px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--sand); border-left: 3px solid var(--green); border-radius: var(--radius); background: var(--white); padding: 20px 24px; color: var(--ink); font-size: var(--p); line-height: 1.55; }
  .f2-note .mono { font-family: var(--mono); color: var(--green-deep); font-size: var(--eyebrow); letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; flex: none; font-weight: 700; }
  .f2-note b { font-weight: 600; }

  /* ---------- 03 FOUNDERS ---------- */
  .founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 40px); margin-top: 44px; }
  .founder { border: 1px solid var(--sand); border-radius: var(--radius); background: var(--white); overflow: hidden; display: flex; flex-direction: column; }
  .fphoto { position: relative; aspect-ratio: 5/4; background: var(--green-deep); overflow: hidden; border-bottom: 1px solid var(--sand); }
  .fphoto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.03) brightness(1.02); }
  .fphoto.vy img { object-position: 50% 14%; }
  .fphoto.dz img { object-position: 50% 26%; }
  .fphoto::before { content: ""; position: absolute; inset: 0; background: var(--green-deep); mix-blend-mode: color; opacity: 0.62; }
  .fphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,48,28,0) 42%, rgba(15,33,22,0.78) 100%); }
  .fphoto .cap { position: absolute; left: 18px; bottom: 15px; z-index: 2; }
  .fphoto .cap .nm { font-family: var(--display); font-size: var(--h3); color: var(--white); letter-spacing: -0.01em; line-height: 1.05; }
  .fphoto .cap .rl { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf-on-dark); margin-top: 5px; }
  .fbody { padding: 26px 26px 8px; }
  .fbody p { margin: 0 0 15px; color: var(--ink-muted); font-size: var(--p); line-height: var(--lh-body); }
  .fbody p b { color: var(--ink); font-weight: 600; }
  .fbody a { border-bottom: 1px solid rgba(75,122,75,0.35); }
  .fcred { border-top: 1px solid var(--sand); margin-top: 6px; }
  .crow { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 13px 26px; border-top: 1px solid var(--sand); }
  .crow:first-child { border-top: none; }
  .crow .k { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); padding-top: 2px; }
  .crow .v { font-size: var(--h6); color: var(--ink); }

  .culture-band { margin-top: clamp(36px, 5vw, 56px); border-radius: var(--radius); border: 1px solid var(--sand); background: var(--white);
    padding: clamp(28px, 4vw, 46px); display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 40px); align-items: start; }
  .culture-band .ck { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; padding-top: 6px; }
  .culture-band blockquote { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--h3); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
  .culture-band blockquote em { font-style: italic; color: var(--green-deep); }
  .culture-band .cb { margin: 12px 0 0; color: var(--ink-muted); font-size: var(--p); max-width: 62ch; }

  /* ---------- 04 GROWTH STORIES (impact cards — logos, per the logo rule) ---------- */
  .stories { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 28px); margin-top: 44px; }
  .story { display: flex; flex-direction: column; gap: 16px; background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius);
    padding: clamp(24px, 3vw, 34px); color: var(--ink); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .story:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 14px 34px rgba(20,48,28,0.10); }
  /* .story carries .reveal on itself — html.anim .reveal.in { transform: none }
     outguns .story:hover and kills the lift; re-assert it post-reveal */
  html.anim .reveal.in.story:hover, html.anim .reveal.in.story:focus-visible { transform: translateY(-3px); }
  .story-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .story-top img { max-height: 34px; max-width: 150px; width: auto; height: auto; display: block; }
  .story .stag { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); background: var(--green-tint); border-radius: 100vw; padding: 5px 11px; white-space: nowrap; }
  .story p { margin: 0; color: var(--ink-muted); font-size: var(--p); line-height: var(--lh-body); }
  .story p b { color: var(--ink); font-weight: 600; }
  .story .sgo { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); display: inline-flex; gap: 6px; align-items: center; border-top: 1px solid var(--cream); padding-top: 13px; margin-top: auto; transition: color .18s ease; }
  .story:hover .sgo { color: var(--green-deep); }

  /* ---------- 05 THE REPORT — compact card (Moksh: smaller) ---------- */
  .report-card { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 0; max-width: 980px;
    border-radius: var(--radius); overflow: hidden; border: 1px solid var(--forest-line); margin-top: 40px;
    background: radial-gradient(circle farthest-corner at 0% 0%, #1d3f27 3%, #163a20 24%, var(--forest) 62%, var(--forest-2) 100%);
    color: var(--white); box-shadow: 0 22px 48px rgba(15,33,22,0.22); }
  .report-card .rcov { position: relative; min-height: 200px; }
  .report-card .rcov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
  .report-card .rbody { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
  .report-card .rk { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--leaf-on-dark); }
  .report-card h3 { font-family: var(--display); font-weight: 500; font-size: var(--h3); letter-spacing: -0.015em; line-height: 1.1; color: var(--white); max-width: 24ch; }
  .report-card .rs { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.06em; color: rgba(255,255,255,0.62); }
  .report-card .rstat-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
  .report-card .rstat-row .rst { font-size: var(--small); color: rgba(255,255,255,0.82); }
  .report-card .rstat-row .rst b { font-family: var(--display); font-weight: 500; font-size: var(--h4); color: var(--white); letter-spacing: -0.02em; }
  .report-card .rstat-row .rst .u { color: var(--leaf-on-dark); }
  .report-card .rgo { margin-top: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .report-card .rnote { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.04em; color: rgba(255,255,255,0.64); }

  /* ---------- 06 NEWS & EVENTS — thumbnail card grid (match/exceed Do's) ---------- */
  .news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .news-all { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(75,122,75,0.35); padding-bottom: 3px; }
  .news-all:hover { color: var(--ink); border-color: var(--ink); }
  .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: 40px; }
  .ncard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden; color: var(--ink);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .ncard:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: 0 18px 40px rgba(20,48,28,0.12); }
  /* .ncard is a direct child of .news-grid.stagger — the reveal rule
     (html.anim .stagger.in > *) outguns .ncard:hover and kills the lift; re-assert it post-reveal */
  html.anim .stagger.in > .ncard:hover, html.anim .stagger.in > .ncard:focus-visible { transform: translateY(-4px); }
  .nthumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--cream); }
  .nthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
  .ncard:hover .nthumb img { transform: scale(1.045); }
  .nbody { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .nmeta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
  .nmeta .ntag { color: var(--green-deep); background: var(--green-tint); border-radius: 100vw; padding: 4px 10px; font-weight: 700; }
  .ncard h3 { font-size: var(--h5); font-weight: 600; letter-spacing: -0.012em; line-height: 1.32; color: var(--ink); transition: color .18s ease; }
  .ncard:hover h3 { color: var(--green-deep); }
  .ncard .ngo { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
    display: inline-flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 10px; transition: color .18s ease, transform .18s ease; }
  .ncard:hover .ngo { color: var(--green-deep); transform: translateX(2px); }
  .news-archive { border-top: 1px solid var(--sand); margin-top: clamp(28px, 4vw, 44px); }
  .arow { display: grid; grid-template-columns: 128px 1fr auto; gap: 18px; align-items: baseline; padding: 18px 12px; border-bottom: 1px solid var(--sand); color: var(--ink); transition: background .16s ease, padding-left .16s ease; }
  .arow:hover { background: var(--white); padding-left: 20px; }
  .arow .ad { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
  .arow .at { font-size: var(--h6); font-weight: 500; letter-spacing: -0.005em; transition: color .16s ease; }
  .arow:hover .at { color: var(--green-deep); }
  .arow .aa { font-family: var(--mono); color: var(--ink-dim); font-size: var(--small); transition: color .16s ease, transform .16s ease; }
  .arow:hover .aa { color: var(--green-deep); transform: translate(3px,-2px); }

  /* =====================================================================
     07 HOW WE WORK — THE CENTERPIECE.
     Split section: LEFT = six step-cards that travel HORIZONTALLY as you
     scroll, with the vine ("the rod") filling bottom→top beside them;
     RIGHT = the potted plant, growing from seed to bloom with the same
     progress. The section pins while the journey plays.
     ===================================================================== */
  .steps-stage { position: relative; }
  html.anim .steps-stage { height: 420vh; }        /* scrub runway (desktop) */
  .steps-pin { display: flex; flex-direction: column; }
  html.anim .steps-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; }
  .steps-head { padding-top: clamp(36px, 5vh, 64px); padding-bottom: clamp(16px, 2.5vh, 28px); width: 100%; }
  .steps-head .sec-head { font-size: var(--h2); }
  .steps-head .lede { margin-top: 12px; font-size: var(--h5); max-width: 68ch; }
  .steps-body { flex: 1; min-height: 0; width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; padding-bottom: clamp(20px, 3.5vh, 40px); }

  .steps-left { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-left: 30px; }
  /* the vine — v0's brand-green rod that grows to the top as you scroll.
     Rail lives on ::before so the feather mask fades ONLY the line (not the
     node dots / tip). Both ends fade transparent → green → transparent: no hard cut. */
  .vine { position: absolute; left: 6px; top: 4%; bottom: 4%; width: 3px; background: transparent; }
  .vine::before {
    content: ""; position: absolute; inset: 0; border-radius: 3px;
    background: rgba(75,122,75,0.30);   /* soft green-deep rail — v0's green line, not a flat sand track */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .vine-fill {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; border-radius: 3px;
    background: linear-gradient(0deg, var(--green-deep), var(--green));
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16px, #000 calc(100% - 10px), transparent 100%);
            mask-image: linear-gradient(to top, transparent 0, #000 16px, #000 calc(100% - 10px), transparent 100%);
  }
  .vnode { position: absolute; left: 50%; transform: translate(-50%, 50%); width: 11px; height: 11px; border-radius: 50%;
    background: var(--canvas); border: 2px solid rgba(75,122,75,0.45); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
  .vnode.on { background: var(--green); border-color: var(--green-deep); box-shadow: 0 0 0 4px rgba(122,186,80,0.22); }
  .vtip { position: absolute; top: -7px; left: 50%; transform: translate(-50%, -100%) scale(0); transform-origin: bottom center; transition: transform .4s cubic-bezier(.34,1.56,.64,1); width: 16px; height: 18px; }
  .vtip.on { transform: translate(-50%, -100%) scale(1); }

  .steps-viewport { overflow: hidden; min-width: 0; }
  .steps-track { display: flex; gap: clamp(14px, 1.6vw, 22px); will-change: transform; padding: 6px 2px 10px; }
  .scard { flex: 0 0 auto; width: clamp(280px, 30vw, 396px); background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius);
    padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px;
    transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease, transform .3s ease; }
  html.anim .scard { opacity: 0.48; }
  html.anim .scard.on { opacity: 1; border-color: var(--green); box-shadow: 0 16px 38px rgba(20,48,28,0.12); transform: translateY(-4px); }
  .scard .snum { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; color: var(--ink-dim); display: flex; justify-content: space-between; align-items: center; }
  .scard .snum .sn { font-size: var(--h4); font-weight: 700; color: var(--green-deep); letter-spacing: 0.02em; }
  .scard .swho { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); }
  .scard h3 { font-family: var(--display); font-weight: 500; font-size: var(--h3); letter-spacing: -0.01em; }
  .scard p { margin: 0; color: var(--ink-muted); font-size: var(--h6); line-height: 1.55; }
  .steps-meter { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
  .steps-meter .mline { flex: 1; height: 2px; background: var(--sand); border-radius: 2px; position: relative; overflow: hidden; }
  .steps-meter .mfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--green); border-radius: 2px; }
  .steps-meter b { color: var(--green-deep); font-weight: 700; }

  .steps-right { min-width: 0; display: flex; }
  .pot-panel { flex: 1; border-radius: var(--radius); border: 1px solid #D6E7C4;
    background: radial-gradient(120% 90% at 50% 100%, var(--green-tint) 0%, #F3F7EA 58%, var(--canvas) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: clamp(18px, 2.4vh, 30px); position: relative; overflow: hidden; }
  .pot-panel .pp-k { position: absolute; top: 16px; left: 18px; font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
  .pot-panel svg { width: auto; height: min(52vh, 460px); max-width: 100%; display: block; overflow: visible; }
  .stage-label { margin-top: 10px; font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-deep); font-weight: 700; min-height: 1.4em; }

  /* ---------- 08 Submit / contact ---------- */
  .contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
  .contact-h { font-family: var(--display); font-weight: 500; font-size: var(--h2); letter-spacing: -0.02em; margin-bottom: 18px; line-height: 1.02; }
  .contact-p { color: var(--ink-muted); font-size: var(--h5); max-width: 42ch; margin: 0 0 22px; }
  .contact-meta { display: flex; flex-direction: column; gap: 10px; }
  .contact-meta a, .contact-meta span { font-family: var(--mono); font-size: var(--small); color: var(--ink); letter-spacing: 0.02em; }
  .contact-meta a { color: var(--green-deep); border-bottom: 1px solid rgba(75,122,75,0.3); width: fit-content; }
  .cform { border: 1px solid var(--sand); border-radius: var(--radius); background: var(--white); padding: clamp(24px, 3vw, 34px); }
  .cform .flabel { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 12px; }
  .cinput-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .cinput { flex: 1 1 220px; background: var(--canvas); border: 1px solid var(--sand); border-radius: var(--radius); color: var(--ink); font-family: var(--sans); font-size: var(--h6); padding: 14px 15px; transition: border-color .15s ease; }
  .cinput::placeholder { color: var(--ink-dim); }
  .cinput:focus { outline: none; border-color: var(--green-deep); }
  .csubmit { background: var(--ink); color: var(--white); border: none; font-family: var(--sans); font-size: var(--small); font-weight: 600; padding: 14px 24px; border-radius: 100vw; cursor: pointer; transition: background .15s ease, transform .15s ease, color .15s ease; }
  .csubmit:hover { background: var(--green); color: var(--ink); transform: translateY(-1px); }
  .cnote { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.03em; color: var(--ink-dim); margin-top: 14px; }
  .cthanks { color: var(--green-deep); font-family: var(--mono); font-size: var(--small); letter-spacing: 0.02em; }

  /* ---------- Footer (forest) ---------- */
  footer { background: var(--forest-2); color: rgba(255,255,255,0.72); }
  .foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-block: clamp(48px, 7vw, 76px); }
  .foot-logo img { height: 34px; width: auto; display: block; margin-bottom: 20px; }
  .foot-brand p { color: rgba(255,255,255,0.66); font-size: var(--h6); max-width: 42ch; margin: 0 0 16px; }
  .foot-brand .bl { font-family: var(--display); font-size: var(--h5); color: var(--leaf-on-dark); }
  .foot-col h4 { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 16px; font-weight: 500; }
  .foot-col a { display: block; color: rgba(255,255,255,0.72); font-size: var(--h6); padding: 5px 0; }
  .foot-col a:hover { color: var(--leaf-on-dark); }
  .foot-bottom { border-top: 1px solid var(--forest-line); padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
  .foot-bottom .fb { font-family: var(--mono); font-size: var(--eyebrow); letter-spacing: 0.05em; color: rgba(255,255,255,0.5); }
  .foot-bottom .fb .g { color: var(--leaf-on-dark); }

  /* ---------- Scroll reveal ---------- */
  html.anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  html.anim .reveal.in { opacity: 1; transform: none; }
  html.anim .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
  html.anim .stagger.in > * { opacity: 1; transform: none; }
  html.anim .stagger.in > *:nth-child(2) { transition-delay: .05s; }
  html.anim .stagger.in > *:nth-child(3) { transition-delay: .10s; }
  html.anim .stagger.in > *:nth-child(4) { transition-delay: .15s; }
  html.anim .stagger.in > *:nth-child(5) { transition-delay: .20s; }
  html.anim .stagger.in > *:nth-child(6) { transition-delay: .25s; }
  html.anim .stagger.in > *:nth-child(7) { transition-delay: .30s; }
  html.anim .stagger.in > *:nth-child(8) { transition-delay: .35s; }
  html.anim .stagger.in > *:nth-child(9) { transition-delay: .40s; }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    :root { --nav-h: 58px; }
    .nav-links a:not(.nav-cta) { display: none; }
    .wall { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .backer-grid { grid-template-columns: repeat(2, 1fr); }
    .founders, .contact-wrap, .stories { grid-template-columns: 1fr; }
    .culture-band { grid-template-columns: 1fr; }
    .report-card { grid-template-columns: 1fr; max-width: 640px; }
    .report-card .rcov { min-height: 0; aspect-ratio: 16/9; }
    .report-card .rcov img { position: static; }
    .news-grid { grid-template-columns: 1fr; max-width: 560px; }
    .foot-top { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1 / -1; }

    /* steps split → stacked; cards scroll natively, plant still grows with them */
    html.anim .steps-stage { height: auto; }
    html.anim .steps-pin { position: static; height: auto; overflow: visible; }
    .steps-body { grid-template-columns: 1fr; }
    .steps-right { order: -1; }
    .pot-panel { min-height: 300px; }
    .pot-panel svg { height: min(36vh, 300px); }
    .steps-left { padding-left: 0; }
    .vine { display: none; }
    .steps-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .steps-viewport::-webkit-scrollbar { display: none; }
    .steps-track { transform: none !important; width: max-content; }
    .scard { width: min(78vw, 360px); scroll-snap-align: start; }
    html.anim .scard { opacity: 1; }
  }
  @media (max-width: 640px) {
    body { font-size: 16px; }
    .ribbon .full { display: none; } .ribbon .short { display: inline; }
    .brand .tag { display: none; }
    .wall { grid-template-columns: 1fr 1fr; gap: 10px; }
    .wtile { min-height: 128px; padding: 16px 16px 12px; }
    .wmeta .wv { display: none; }
    .stats-grid { grid-template-columns: 1fr; }
    .backer-grid { grid-template-columns: 1fr; }
    .arow { grid-template-columns: 1fr auto; }
    .arow .ad { grid-column: 1 / -1; }
    .foot-top { grid-template-columns: 1fr; }
    .hero-cue { display: none; }
  }

  /* keep the top-right badge clear of the nav CTA on narrower viewports */
  @media (max-width: 1360px) {
    .sb-badge { top: calc(var(--nav-h) + 12px) !important; background: var(--canvas); }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn .arrow, .wtile, .backer, .story, .ncard, .arow, .stat, .scard,
    .wtile::before, .wtile::after, .wlogo img, .wmeta .ws, .wmeta .wv, .wmeta .wv span { transition: none; }
    .wtile:hover, .wtile:focus-visible { transform: none; }
    .wtile:hover::after, .wtile:focus-visible::after { transform: scaleX(1); }
    .wtile:hover .wmeta .wv span, .wtile:focus-visible .wmeta .wv span { transform: none; }
    .steps-viewport { overflow-x: auto; }
    .steps-track { transform: none !important; width: max-content; }
    .vine-fill { height: 100% !important; }
  }

/* PROD: hide storyboard chrome */
.ribbon,.sb-badge{display:none!important}