:root {
    --ground: #EEEEEC;
    --ink: #111111;
    --bubble: #2F302F;
    --live: #8FD4B0;
    --live-deep: #3F8A6B;
  }
  * { box-sizing: border-box; }
  html, body { overflow-x: hidden; }
  html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; }

  /* one fixed grid behind the whole page; each section is transparent and sets the grid's look with data-bg */
  /* each patterned section holds its own fixed grid canvas, cut to the section's outline, over its own ground colour */
  .field { position: fixed; inset: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; }
  [data-bg="hero"], [data-bg="quiet"], [data-bg="outline"], [data-bg="ledger"] { clip-path: inset(0); }
  [data-bg="hero"], [data-bg="quiet"] { background: #EEEEEC; }
  [data-bg="outline"] { background: #FAFAF8; }
  [data-bg="ledger"] { background: #0D0E11; }
  [data-bg="none"] { background: #EEF1F4; }
  .hero { position: relative; z-index: 1; height: clamp(640px, 100vh, 1000px); overflow: hidden; isolation: isolate; }

  .header {
    position: absolute; inset: 0 0 auto 0; height: 100px; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(16px, 8vw, 130px);
    background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(6px);
  }
  .logo img { display: block; height: 58px; width: auto; filter: brightness(0); }
  .nav { display: flex; gap: clamp(20px, 2.4vw, 38px); }
  .nav a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 12px 0; }
  .nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

  .copy {
    position: absolute; inset: 100px 0 0 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 16px 60px; pointer-events: none;
  }
  .copy > * { pointer-events: auto; }
  /* titles: Funnel Display, as in the design file */
  h1 { margin: 0; font-family: "Funnel Display", "DM Sans", sans-serif; font-weight: 300; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(42px, 6.1vw, 98px); }
  h1 b { font-weight: 600; }
  .lede { margin: 34px 0 0; max-width: 760px; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.42; }
  .ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
  .btn { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; transition: transform .2s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn--dark { background: var(--ink); color: #fff; }
  .btn--light { background: #fff; color: var(--ink); border: 1px solid #E2E2DF; }
  .btn svg { width: 14px; height: 14px; }

  /* labels: flat, on the grid. one at a time is the live one */
  .bubble {
    position: absolute; z-index: 1; left: 0; top: 0; opacity: 0;      /* under the text layer, never over it; shown one at a time */
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; line-height: 1; white-space: nowrap; color: var(--ink);
    transition: background .45s ease, color .45s ease, border-color .45s ease;
    pointer-events: none;
  }
  .bubble b { font-weight: 700; }
  .bubble .dot { width: 8px; height: 8px; border-radius: 2px; background: #A7BBCA; flex: none; transition: background .45s ease; }
  .bubble.is-active .dot { background: var(--live-deep); }

  /* card: white label, thin border; live = ink */
  .hero[data-look="card"] .bubble { padding: 10px 14px; border-radius: 6px; background: #fff; border: 1px solid #D9DAD6; }
  .hero[data-look="card"] .bubble.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
  .hero[data-look="card"] .bubble.is-active .dot { background: var(--live); }

  /* tag: compact ink pill; live = forest green */
  .hero[data-look="tag"] .bubble { padding: 9px 14px; border-radius: 999px; background: #2F302F; color: #fff; border: 1px solid transparent; }
  .hero[data-look="tag"] .bubble .dot { background: rgba(255, 255, 255, .35); }
  .hero[data-look="tag"] .bubble.is-active { background: #1E342D; }
  .hero[data-look="tag"] .bubble.is-active .dot { background: var(--live); }

  /* clear: just text, in a window the squares leave open; the marker square is the bullet */
  .hero[data-look="clear"] .bubble { padding: 0; background: none; border: 0; opacity: .6; transition: opacity .45s ease; }
  .hero[data-look="clear"] .bubble.is-active { opacity: 1; }
  .hero[data-look="clear"] .bubble .dot { display: none; }

  .scan { position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; overflow: visible; }
  .scan line { stroke: rgba(17, 17, 17, .28); stroke-width: 1; transition: stroke .45s ease; }
  .scan line.is-active { stroke: var(--live-deep); }

  .compare {
    position: fixed; z-index: 10; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px; padding: 5px;
    background: #111; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }
  .compare span { color: rgba(255,255,255,.6); font-size: 12px; padding: 0 10px 0 12px; }
  .compare button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: #fff; font: 500 13px "DM Sans", system-ui, sans-serif; }
  .compare button[aria-pressed="true"] { background: #fff; color: #111; }

  /* ---- sections after the header: transparent so the fixed grid shows through; data-bg sets its look ---- */
  .sec { position: relative; z-index: 1; min-height: max(720px, 100vh); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
         padding-block: clamp(56px, 10vh, 130px); padding-left: max(16px, min(9.4vw, 150px)); padding-right: max(16px, min(9.4vw, 150px)); }
  .sec h2 { margin: 0; font-family: "Funnel Display", "DM Sans", sans-serif; font-weight: 400; letter-spacing: -0.045em; line-height: 1.02; font-size: clamp(44px, 6vw, 96px); text-wrap: balance; }
  .arrow { width: 14px; height: 14px; flex: none; }


  /* section 3: services. the grid keeps its colours but only as outlines */
  /* the services section fits one screen: less padding, a title sized to the screen height, tighter gaps */
  .services { padding-block: clamp(28px, 5vh, 64px); }
  .services h2 { font-size: min(clamp(44px, 6vw, 96px), 9.5vh); }
  .svc-eyebrow { margin: 0 0 clamp(8px, 1.6vh, 18px); font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -0.02em; color: #6E8A78; }
  .svc-lede { margin: clamp(14px, 2.4vh, 28px) 0 0; max-width: 710px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: #555B57; }
  /* the carousel: two services in view (one on a phone), sliding along the track */
  .svc-view { --per: 2; --gap: clamp(24px, 3.5vw, 64px); grid-column: span 2; overflow: hidden; touch-action: pan-y; }
  .svc-track { display: flex; gap: var(--gap); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
  .svc-track .svc-col { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); min-width: 0; }
  .svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 461px); gap: clamp(24px, 3.5vw, 64px); margin-top: clamp(20px, 3.5vh, 48px); align-items: start; }
  .svc-col span { font-size: 16px; color: #6E8A78; }
  .svc-col h3 { margin: 14px 0 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; }
  .svc-col p { margin: clamp(12px, 2vh, 22px) 0 0; font-size: 16.5px; line-height: 1.65; color: #555B57; max-width: 44ch; }
  .svc-col a, .safe-col a { display: inline-flex; gap: 8px; align-items: center; margin-top: 28px; color: inherit; text-decoration: none; font-size: 15px; }
  .svc-invest { padding: clamp(22px, 3.4vh, 34px) 30px; background: #EEEEEC; position: relative; overflow: hidden; }
  /* a small corner of the header's squares, tucked into the card's bottom-right, clear of the text and buttons */
  .svc-corner { position: absolute; right: 0; bottom: 0; width: 240px; height: 208px; pointer-events: none; }
  .svc-invest > :not(.svc-corner) { position: relative; }
  .svc-invest h3 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: -0.02em; }
  .svc-invest p { margin: 12px 0 0; max-width: 40ch; font-size: 15.5px; line-height: 1.6; }
  .svc-invest div { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: clamp(14px, 2.4vh, 22px); }
  .svc-invest a { display: inline-flex; gap: 8px; align-items: center; padding: 0 26px; min-height: 50px; border-radius: 999px; font-size: 14px; text-decoration: none; }
  .svc-invest .light { background: #fff; color: #111; }
  .svc-invest .dark { background: #111; color: #fff; }
  .svc-arrows { display: flex; align-items: center; gap: 18px; margin-top: clamp(18px, 3vh, 36px); align-self: flex-start; }
  .svc-arrows > button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #111; color: #fff; font-size: 16px; cursor: pointer; }
  .svc-dots { display: flex; gap: 8px; }
  .svc-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid #8E928F; background: none; cursor: pointer; transition: background .2s, border-color .2s; }
  .svc-dots button:hover { border-color: #0d1512; }
  .svc-dots button.on { background: #8FA898; border-color: #8FA898; }

  /* section 2b: the land carousel. full-bleed photos, each with its own corner of squares, cross-fading */
  .land { color: #fff; overflow: hidden; justify-content: flex-end; min-height: 0; height: clamp(640px, 100vh, 1000px); padding-bottom: clamp(40px, 7vh, 72px); touch-action: pan-y; }
  .land-slide { position: absolute; inset: 0; transition: transform .95s cubic-bezier(.77, 0, .18, 1); will-change: transform; }
  .land { cursor: grab; user-select: none; -webkit-user-select: none; }
  .land:active { cursor: grabbing; }
  .land img { -webkit-user-drag: none; pointer-events: none; }
  .land-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
  /* one layer of squares over every slide, pinned to the bottom-right corner; it morphs from one slide's pattern to the next */
  .land-squares { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .28)); }
  /* the design's veil over each photo: #080C0A from 90% on the left, where the text sits, to 18% on the right;
     the squares and the text sit above it */
  .land-slide::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(8, 12, 10, .9) 0%, rgba(8, 12, 10, .42) 54%, rgba(8, 12, 10, .18) 100%); }
  .land-copy { text-shadow: 0 1px 24px rgba(0, 0, 0, .25); }
  .land-copy { position: absolute; z-index: 2; left: max(16px, min(9.4vw, 150px)); right: max(16px, min(9.4vw, 150px)); top: 50%; transform: translateY(-50%); }
  .land-copy h2 { max-width: 11ch; }
  .land-copy p { margin: 28px 0 0; max-width: 640px; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.45; }
  .land-copy h2, .land-copy p { opacity: 0; transform: translateY(24px); transition: opacity .6s ease .45s, transform .8s cubic-bezier(.2, .8, .2, 1) .45s; }
  .land-copy p { transition-delay: .6s; }
  .is-on .land-copy h2, .is-on .land-copy p { opacity: 1; transform: none; }
  .land.is-waiting .land-copy h2, .land.is-waiting .land-copy p { opacity: 0; transform: translateY(24px); }
  .land-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; }
  .land-nav > button { width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 16px; cursor: pointer; transition: background .2s, color .2s; }
  .land-prev { background: transparent; color: #fff; }
  .land-next { background: #fff; color: #0d1512; }   /* white: the veil is near black on this side */
  .land-prev:hover { background: rgba(255, 255, 255, .14); }
  .land-next:hover { background: #a8f5c6; color: #0d1512; }
  .land-dots { display: flex; gap: 8px; }
  .land-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: none; cursor: pointer; transition: background .2s; }
  .land-dots button.on { background: #fff; border-color: #fff; }
  .land-dots button:hover { border-color: #fff; }
  @media (prefers-reduced-motion: reduce) { .land-slide, .land-copy h2, .land-copy p { transition: none; } }

  /* short screens: the services tighten so the whole section still fits one screen */
  @media (min-width: 901px) and (max-height: 820px) {
    .services h2 { font-size: min(clamp(44px, 6vw, 96px), 8.6vh); }
    .svc-col span { font-size: 14px; }
    .svc-col h3 { margin-top: 8px; font-size: min(clamp(28px, 2.6vw, 40px), 4.3vh); }
    .svc-col p { font-size: 15px; line-height: 1.55; }
    .svc-col a { margin-top: 16px; }
    .svc-invest h3 { font-size: 26px; }
    .svc-invest p { font-size: 14.5px; line-height: 1.55; }
    .svc-lede { font-size: 16px; }
    /* the intro line moves up beside the title instead of under it */
    .svc-head { display: grid; grid-template-columns: auto minmax(0, 440px); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
    .svc-head .svc-eyebrow { grid-column: 1 / -1; }
    .svc-head .svc-lede { margin: 0 0 .4em; }
  }

  /* section 4: SAFE. the grid turns into the ledger: dark slots, the map a shade lighter, a few lit squares */
  .safe { color: #F4F5F7; }
  .safe-lede { margin: 28px 0 0; max-width: 710px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: #B9BEC4; }
  .safe-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 64px); margin-top: clamp(40px, 8vh, 90px); }
  .safe-col span { font-size: 13px; color: #8FA898; }
  .safe-col h3 { margin: 10px 0 0; font-size: clamp(30px, 2.6vw, 40px); font-weight: 400; letter-spacing: -0.035em; }
  .safe-col p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.45; color: #9DA3A9; }

  /* section 5: people. full-bleed video; the grid only shows as one simple corner */
  .people { color: #fff; overflow: hidden; justify-content: space-between; gap: 48px; }
  .people-video { position: absolute; inset: 0; z-index: -1; background: #2C3338; }
  .people-video video { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s ease; }
  /* darken the photo the way the design does, more on the left where the text sits */
  .people-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 24, 28, .38) 0%, rgba(20, 24, 28, .18) 50%, rgba(20, 24, 28, .08) 100%), linear-gradient(0deg, rgba(20, 24, 28, .22), rgba(20, 24, 28, 0) 45%); }
  .people h2, .people-lede { text-shadow: 0 1px 22px rgba(0, 0, 0, .28); }
  .people-corner { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
  .people h2 { max-width: 16ch; }
  .people-foot { display: flex; align-items: flex-end; gap: clamp(32px, 5vw, 170px); }
  .people-foot > div:first-child { flex: 0 1 690px; min-width: 0; }
  .people-lede { margin: 0; max-width: 28em; text-wrap: pretty; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.58; }
  .people-btn { display: inline-flex; gap: 10px; align-items: center; margin-top: 30px; min-height: 50px; padding: 0 26px; border-radius: 999px; background: #fff; color: #111; font-size: 14px; text-decoration: none; }
  /* the next clips: small, lined up at the right edge */
  .people-thumbs { display: flex; gap: 12px; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .people-thumbs > * { flex: none; padding: 0; cursor: pointer; width: clamp(150px, 13vw, 230px); aspect-ratio: 358 / 225; border-radius: 16px; border: 1px solid rgba(255,255,255,.5); overflow: hidden; background: #8E979E; }
  .people-thumbs video { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s ease; }
  .people-clip:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

  /* section 6: the journal. the grid steps back; each article card carries its own small pattern */
  .journal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
  .jr-eyebrow { margin: 0 0 clamp(24px, 5vh, 52px); font-size: clamp(28px, 2.6vw, 42px); letter-spacing: -0.035em; color: #6F7378; }
  .jr-btn { display: inline-flex; gap: 10px; align-items: center; margin-top: clamp(28px, 6vh, 56px); min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid #C9CED4; color: #111; font-size: 14px; text-decoration: none; }
  .jr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .jr-card { color: #111; text-decoration: none; min-width: 0; }
  .jr-card canvas { display: block; width: 100%; aspect-ratio: 335 / 293; border-radius: 14px; }
  .jr-card h3 { margin: 26px 0 0; line-height: 1.3; font-size: clamp(22px, 1.8vw, 28px); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; }
  .jr-card p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: #5D636A; }
  .jr-card:focus-visible { outline: 2px solid #3F8A6B; outline-offset: 6px; border-radius: 16px; }

  /* footer: black, a closing line and one button; the company row underneath */
  .foot { position: relative; z-index: 1; background: #000; color: #fff; padding: clamp(64px, 11vh, 112px) max(16px, min(9.4vw, 150px)) clamp(48px, 8vh, 88px); }
  .foot h2 { margin: 0; font-family: "Funnel Display", "DM Sans", sans-serif; font-weight: 300; font-size: clamp(30px, 2.9vw, 46px); line-height: 1.08; letter-spacing: -0.035em; }
  .foot-cta { display: inline-flex; gap: 10px; align-items: center; margin-top: 28px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: #fff; color: #0d1512; font-size: 15px; text-decoration: none; transition: background .2s, color .2s; }
  .foot-cta:hover { background: #a8f5c6; }
  .foot-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 32px; margin-top: clamp(64px, 12vh, 100px); padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .16); }
  .foot-logo { display: block; height: 54px; width: auto; filter: brightness(0) invert(1); }
  .foot-addr, .foot-copy { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .62); }
  .foot-up { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
  .foot-up:hover { background: #fff; color: #0d1512; border-color: #fff; }
  /* each item keeps its own column, so the row holds even without the logo */
  .foot-addr { grid-column: 2; } .foot-copy { grid-column: 3; } .foot-up { grid-column: 4; justify-self: end; }
  .foot-up:focus-visible, .foot-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  @media (max-width: 640px) {
    .foot h2 br { display: none; }
    .foot-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
    .foot-addr { grid-column: 1; }
    .foot-logo { grid-column: 1 / -1; }
    .foot-copy { grid-column: 1; }
    .foot-up { grid-row: 2 / span 2; grid-column: 2; align-self: start; }
  }

  /* room to breathe: a band between one section and the next */
  :root { --floor-gap: clamp(40px, 9vh, 120px); }
  /* each gap takes the colour of the section below it; above a photo or video section it carries on the section above */
  .floor-gap { position: relative; z-index: 1; height: var(--floor-gap); }
  /* SAFE takes its breathing room inside itself, so its pattern runs right through it */
  .sec.safe { padding-block: calc(clamp(56px, 10vh, 130px) + var(--floor-gap)); min-height: calc(max(720px, 100vh) + 2 * var(--floor-gap)); }

  /* headline lines for the mask reveal; the padding keeps descenders from being clipped */
  .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  .ln-i { display: block; }

  /* ---- hovers ---- */
  /* CTAs follow the reserves map: light buttons go ink, dark ones go mint; the arrow nudges 3px */
  .btn, .people-btn, .jr-btn, .svc-invest a, .svc-arrows > button { transition: background .2s, border-color .2s, color .2s; }
  .btn:hover { transform: none; }
  .btn--light:hover, .jr-btn:hover, .svc-invest .light:hover { background: #0d1512; border-color: #0d1512; color: #fff; }
  .btn--dark:hover, .svc-invest .dark:hover, .svc-arrows > button:hover, .people-btn:hover { background: #a8f5c6; color: #0d1512; }
  .arrow, .btn svg { transition: transform .2s; }
  a:hover .arrow, a:hover > svg, a:focus-visible .arrow { transform: translateX(3px); }
  .svc-col a, .safe-col a { position: relative; padding-bottom: 4px; }
  .svc-col a::after, .safe-col a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
  .svc-col a:hover::after, .safe-col a:hover::after { transform: scaleX(1); }
  .svc-col h3, .safe-col h3 { transition: transform .35s ease, color .35s ease; }
  .svc-col:hover h3, .safe-col:hover h3 { transform: translateX(6px); }
  .svc-col:hover h3 { color: #1E342D; }
  .safe-col:hover h3 { color: #F5B646; }
  .people-thumbs > * { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
  .people-thumbs > *:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
  .jr-card canvas { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
  .jr-card:hover canvas { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(17, 17, 17, .12); }
  .jr-card h3 { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s ease; display: inline; }
  .jr-card:hover h3 { background-size: 100% 1px; }
  .jr-card p { margin-top: 14px; }
  @media (prefers-reduced-motion: reduce) {
    .people-thumbs > *:hover, .jr-card:hover canvas, .svc-col:hover h3, .safe-col:hover h3 { transform: none; }
  }

  @media (max-width: 1100px) {
    .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .svc-invest { grid-column: 1 / -1; }
    .safe-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journal { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 900px) {
    .people-foot { flex-direction: column; align-items: flex-start; }
    .people-thumbs { width: 100%; justify-content: flex-start; }
  }
  @media (max-width: 640px) {
    .svc-row, .safe-cols, .jr-cards { grid-template-columns: minmax(0, 1fr); }
    .svc-view { --per: 1; grid-column: auto; }
    .land { height: max(640px, 100svh); }
    .land-copy { top: clamp(56px, 12vh, 120px); transform: none; }
    .people-corner { opacity: .45; }
    .people-thumbs > * { width: min(42vw, 220px); }
  }
  @media (max-width: 720px) {
    .nav { display: none; }
    .logo img { height: 46px; }
    .header { height: 80px; }
    .copy { inset: 80px 0 0 0; }
    .bubble { font-size: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bubble { transition: none; }
  }

[data-bg="ledger"] > .field { opacity: .25; }

  /* ---------- Intro A ---------- */
  .hero h1 .ln { overflow: visible; }
  /* the slogan comes in word by word */
  .hero h1 .w { display: inline-block; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
  .hero h1 .w-i { display: inline-block; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; transition-delay: calc(var(--i) * 95ms); }
  .hero.intro-run:not(.intro-done) h1 .w { overflow: hidden; }
  .hero.intro-run:not(.intro-text) h1 .w-i { transform: translateY(110%); opacity: 0; }
  .hero .header, .hero .ctas { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
  .hero.intro-run:not(.intro-done) .header { opacity: 0; }
  .hero.intro-run:not(.intro-done) .ctas { opacity: 0; transform: translateY(14px); }
  .hero.intro-reset, .hero.intro-reset * { transition: none !important; }

  /* the two numbers */
  .intro-num { position: absolute; z-index: 2; left: 0; top: 0; display: flex; align-items: center; gap: 14px; padding: 16px 24px 16px 18px; border-radius: 10px;
               background: #fff; border: 1px solid #D9DAD6; box-shadow: 0 14px 40px rgba(13, 21, 18, .1); pointer-events: none;
               opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .35s ease, transform .6s cubic-bezier(.2, 1.5, .4, 1); }
  .intro-num.is-on { opacity: 1; transform: translate(-50%, -50%); }
  .hero.intro-nums-out .intro-num, .hero:not(.intro-run) .intro-num { opacity: 0; transform: translate(-50%, -64%) scale(.96); transition: opacity .4s ease, transform .5s ease; }
  .intro-num i { flex: none; width: 14px; height: 14px; border-radius: 3px; background: #EE8D35; }
  .intro-num b { display: block; font-family: "Funnel Display", "DM Sans", sans-serif; font-weight: 300; font-size: clamp(40px, 4.6vw, 76px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
  .intro-num span { display: block; white-space: nowrap; margin-top: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #555B57; }

  .da { white-space: nowrap; }

/* Reserves as cards: one card for each reserve and its zoning parcel; the picked one sits at the left edge of the content */
.rcs { --rcs-ink: #0d1512; --rcs-ink-2: #555B57; --rcs-ink-3: #7E8E86; --rcs-line: rgba(13, 21, 18, .1); --rcs-orange: #ee8d35; --rcs-pad: max(16px, min(9.4vw, 150px));
       position: relative; z-index: 1; display: flex; flex-direction: column; box-sizing: border-box; height: 100vh; min-height: 640px; max-height: 1100px;
       padding: clamp(56px, 9vh, 110px) var(--rcs-pad) clamp(28px, 5vh, 56px); overflow: hidden; color: var(--rcs-ink); font-family: "DM Sans", system-ui, sans-serif; }
.rcs *, .rcs *::before, .rcs *::after { box-sizing: border-box; }
/* the title and the copy share a top line */
.rcs__head { flex: none; display: grid; grid-template-columns: auto minmax(0, 440px); justify-content: space-between; align-items: start; column-gap: clamp(32px, 5vw, 96px); }
.rcs h2 { margin: 0; font-family: "Funnel Display", "DM Sans", sans-serif; font-weight: 400; letter-spacing: -0.045em; line-height: 1.02; font-size: min(clamp(44px, 6vw, 96px), 9vh); }
.rcs__lede { padding-top: .45em; }
.rcs__lede p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--rcs-ink-2); }
.rcs__total { display: flex; gap: 22px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rcs-line); }
.rcs__total div { display: flex; flex-direction: column-reverse; gap: 2px; }
.rcs__total dt { font-size: 12px; color: var(--rcs-ink-2); }
.rcs__total dd { margin: 0; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.rcs__cards { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: clamp(18px, 3.4vh, 36px); }
.rcs__view { position: relative; flex: 1 1 auto; min-height: 220px; overflow: hidden; margin: 0 calc(-1 * var(--rcs-pad)); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.rcs__view.is-dragging { cursor: grabbing; }
.rcs__view.is-dragging .rcs__track { transition: none; }
.rcs__track { position: absolute; top: 6px; bottom: 6px; left: 0; display: flex; align-items: center; gap: 18px; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.rcs__card { flex: none; width: var(--cw); height: 100%; padding: 22px 22px 20px; border-radius: 14px; background: #F7F7F5; color: var(--rcs-ink); text-align: left; cursor: pointer;
             display: flex; flex-direction: column; opacity: .62; transform: scale(.92); transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1), background .3s, box-shadow .3s; }
.rcs__card:hover { opacity: .85; }
.rcs__card.is-past { opacity: 0; pointer-events: none; }
.rcs__card.is-on { opacity: 1; transform: none; background: #fff; box-shadow: 0 6px 16px rgba(13, 21, 18, .06); cursor: default; }
.rcs__card:focus { outline: none; }
.rcs__card:focus-visible { box-shadow: 0 0 0 2px var(--rcs-ink); }
.rcs__n { font-size: 12px; color: var(--rcs-ink-3); font-variant-numeric: tabular-nums; }
.rcs__card h3 { margin: 6px 0 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.rcs__reg { margin: 4px 0 0; font-size: 12.5px; color: var(--rcs-ink-3); }
.rcs__parcel { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-top: auto; padding-top: 14px; width: min(40%, 12vh, 112px); }
.rcs__parcel i { aspect-ratio: 1; border-radius: 1.5px; }
.rcs__ha { margin-top: 14px; font-family: "Funnel Display", "DM Sans", sans-serif; font-weight: 300; font-size: clamp(28px, 2.4vw, 38px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rcs__ha small { font-family: "DM Sans", sans-serif; font-size: 13px; color: var(--rcs-ink-3); letter-spacing: 0; margin-left: 4px; }
.rcs__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s; }
.rcs__more > div { overflow: hidden; }
.rcs__card.is-on .rcs__more { grid-template-rows: 1fr; }
.rcs__more p { margin: 8px 0 12px; font-size: 13px; color: var(--rcs-ink-2); }
.rcs__full { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--rcs-orange);
             background: var(--rcs-orange); color: var(--rcs-ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.rcs__full svg { width: 14px; height: 14px; transition: transform .2s; }
.rcs__full:hover { background: var(--rcs-ink); border-color: var(--rcs-ink); color: #fff; }
.rcs__full:hover svg { transform: translateX(3px); }

.rcs__bar { flex: none; display: flex; align-items: center; gap: 18px; margin-top: clamp(10px, 2vh, 20px); }
.rcs__step { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 0; background: #111; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.rcs .arw { display: block; font: 400 18px/1 "DM Sans", system-ui, sans-serif; }
.rcs__step:hover { background: #a8f5c6; color: #0d1512; }
.rcs__count { min-width: 70px; text-align: left; font-size: 13px; color: var(--rcs-ink-3); font-variant-numeric: tabular-nums; }
.rcs :focus-visible { outline: 1px solid var(--rcs-ink); outline-offset: 3px; }

@media (max-width: 900px) {
  .rcs { height: auto; max-height: none; min-height: 0; padding: 72px 16px 40px; --rcs-pad: 16px; }
  .rcs__head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .rcs__lede { padding-top: 0; }
  .rcs__view { min-height: 420px; }
}
@media (min-width: 901px) and (max-height: 760px) { .rcs__lede p { font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .rcs__track, .rcs__card, .rcs__more { transition: none; } }

  /* the first land slide: a film instead of a photo, framed like the photos */
  .land-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }

  :root { --floor-gap: clamp(72px, 16vh, 190px); }   /* more room between the sections */
  /* every section below the header is taller than a screen; the extra is room above and below,
     so what is in it (text, cards, carousel) still fits inside one screen, centred */
  @media (min-width: 901px) {
    :root { --extra: 12.5vh; }
    .sec { min-height: calc(max(720px, 100vh) + 2 * var(--extra)); padding-block: calc(clamp(56px, 10vh, 130px) + var(--extra)); }
    .services { padding-block: calc(clamp(28px, 5vh, 64px) + var(--extra)); }
    .land { min-height: 0; height: calc(clamp(640px, 100vh, 1000px) + 2 * var(--extra)); padding-bottom: calc(clamp(40px, 7vh, 72px) + var(--extra)); }
    .sec.safe { padding-block: calc(clamp(56px, 10vh, 130px) + var(--floor-gap) + var(--extra)); min-height: calc(max(720px, 100vh) + 2 * var(--floor-gap) + 2 * var(--extra)); }
    #reserves.rcs { height: calc(100vh + 2 * var(--extra)); min-height: calc(640px + 2 * var(--extra)); max-height: calc(1100px + 2 * var(--extra));
                    padding-top: calc(clamp(56px, 9vh, 110px) + var(--extra)); padding-bottom: calc(clamp(28px, 5vh, 56px) + var(--extra)); }
  }

  .svc-arrows > button, .land-nav > button { width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
  .svc-arrows > button { background: #111; color: #fff; }
  .land-nav > button, .land-prev { background: #fff; color: #0d1512; }
  .svc-arrows > button:hover, .land-nav > button:hover, .land-prev:hover { background: #a8f5c6; color: #0d1512; }
  .svc-arrows .arw, .land-nav .arw { display: block; font: 400 18px/1 "DM Sans", system-ui, sans-serif; }
  /* the services row can be dragged too */
  .svc-view { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  .svc-view.is-dragging { cursor: grabbing; }
  .land { cursor: grab; }
  .land .land-copy, .land .land-nav { cursor: auto; }

/* phones */
@media (max-width: 640px) {
  /* the two video sections: each one screen tall, the same height (taller only if a small phone needs room for the text) */
  .land { height: 100vh; height: max(var(--land-h, 0px), 100svh); }   /* --land-h: set by land-carousel.js from the tallest slide's text */
  .people { min-height: 100vh; min-height: 100svh; justify-content: flex-start; gap: 40px; }
  .people-foot { flex: 1 1 auto; }
  .people-foot > div:first-child { flex: none; }
  .people-thumbs { flex: none; margin-top: auto; }   /* the clips sit at the foot of the screen, like the land arrows */
  /* services: the next service peeks in at the edge, so it reads as a carousel */
  .svc-view { margin-right: calc(-1 * max(16px, min(9.4vw, 150px))); }
  .svc-track .svc-col { flex-basis: 84%; }
  .svc-track .svc-col > * { transition: opacity .45s ease; }
  .svc-track .svc-col[inert] > * { opacity: .35; }   /* the peeking card is dimmed until it slides in (its contents: the scroll fade-in sets the card's own opacity) */
}

/* wherever the invest box drops below the services (tablets and phones), the arrows sit right under the cards, above it */
@media (max-width: 1100px) {
  .svc-row { display: contents; }
  .svc-view { order: 1; margin-top: clamp(20px, 3.5vh, 48px); }
  .svc-arrows { order: 2; }
  .svc-invest { order: 3; margin-top: 40px; }
}