@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-normal-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
  @font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
  @font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
  @font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-italic-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

  :root {
    --ink: #faf9f6;
    --ink-raised: #f1efea;
    --rule: #dedbd3;
    --rule-strong: #c9c5bb;
    --text: #16171a;
    --text-2: #4f4c46;
    --text-3: #6e6b64;
    --cream: #f4f1ea;
    --cream-2: rgba(244, 241, 234, .74);
    --cream-3: rgba(244, 241, 234, .5);
    --night: #0f1113;
    --night-2: #15171a;
    --night-3: #1c1e22;
    --night-rule: rgba(244, 241, 234, .12);
    --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --frame: clamp(.5rem, 1.2vw, 1rem);
    --radius: clamp(.9rem, 1.6vw, 1.5rem);
    --pad: clamp(1.5rem, 4vw, 4rem);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    color-scheme: light;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: var(--ink); scrollbar-color: var(--rule-strong) var(--ink); scrollbar-width: thin; scroll-behavior: smooth; }
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--ink); }
  ::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 5px; border: 2px solid var(--ink); }
  ::selection { background: var(--text); color: var(--ink); }
  .dark ::selection { background: var(--cream); color: var(--night); }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

  body {
    background: var(--ink); color: var(--text);
    font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    padding: var(--frame); display: grid; gap: var(--frame);
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* Every section is a card in the same frame as the hero. */
  .card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-raised); isolation: isolate; }
  .card.dark { background: var(--night); color: var(--cream); }
  .card.plain { background: var(--ink); border: 1px solid var(--rule); }
  .grain::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  }
  .pad { padding: var(--pad); }

  /* Type */
  .display { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; letter-spacing: -.022em; line-height: 1; text-wrap: balance; }
  .display em { font-style: italic; font-weight: 300; }
  .display .soft { color: var(--text-3); }
  .dark .display .soft { color: var(--cream-3); }

  /* Word pull-up: headings get .words; JS wraps each word */
  .words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .08em .1em 0; margin-right: -.06em; margin-bottom: -.1em; }
  .words .w > span { display: inline-block; transform: translateY(112%); }
  .words.in .w > span { animation: rise 1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 60ms); }
  @keyframes rise { to { transform: translateY(0); } }

  /* Scroll-linked character reveal */
  .chars span { opacity: var(--o, .18); transition: opacity .25s linear; }

  /* Card entrance */
  .enter { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
  .enter.in { opacity: 1; transform: none; }

  /* ---------- Hero ---------- */
  .hero { min-height: calc(100svh - 2 * var(--frame)); min-height: calc(100dvh - 2 * var(--frame)); display: flex; flex-direction: column; color: var(--cream); background: var(--night); }
  .hero picture, .hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero img.bg { object-fit: cover; object-position: 50% 42%; filter: saturate(.86) contrast(1.02); transform-origin: 50% 40%; will-change: transform, opacity; }
  /* The original: the photo settles in once, 1.09 to 1, 16s, exponential ease-out. */
  .hero img.bg { animation: drift 16s var(--ease-out) both; }
  @keyframes drift { from { transform: scale(1.09); } to { transform: scale(1); } }
  /* Mist: two soft light masses drift across the valley floor on a closed path, so the frame never sits still. */
  .hero .mist { position: absolute; inset: -20%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .55;
    background:
      radial-gradient(42% 30% at 30% 62%, rgba(236,228,210,.55) 0%, rgba(236,228,210,0) 70%),
      radial-gradient(36% 26% at 72% 58%, rgba(236,228,210,.42) 0%, rgba(236,228,210,0) 70%);
    filter: blur(28px); animation: mist 40s linear infinite; }
  @keyframes mist { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(2.5%, -.8%, 0); } 50% { transform: translate3d(4%, .6%, 0); } 75% { transform: translate3d(1.5%, 1.4%, 0); } 100% { transform: translate3d(0, 0, 0); } }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(10,12,14,.52) 0%, rgba(10,12,14,0) 30%), linear-gradient(to top, rgba(10,12,14,.72) 0%, rgba(10,12,14,.36) 34%, rgba(10,12,14,0) 62%); }
  .nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem); }
  .brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 500; font-size: 1.1875rem; letter-spacing: -.012em; }
  .brand svg { width: 1.55rem; height: 1.55rem; flex: none; }
  .nav ul { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); list-style: none; font-size: .9375rem; }
  .nav ul a { color: var(--cream-2); transition: color .25s; padding-block: .25rem; }
  .nav ul a:hover { color: var(--cream); }
  .hero-body { position: relative; z-index: 2; margin-top: auto; display: grid; gap: 1.75rem 3rem; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3.4vw, 2.75rem); }
  .hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.75rem); line-height: .98; max-width: 11ch; }
  .hero-aside { color: var(--cream-2); font-size: 1.0625rem; line-height: 1.5; max-width: 34ch; opacity: 0; animation: fade 1.2s var(--ease-out) .85s forwards; justify-self: end; }
  .hero-aside p + p { margin-top: .9rem; }
  .hero-aside .place { font-family: var(--serif); font-style: italic; color: var(--cream-2); font-size: 1rem; }
  @keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* ---------- The name (dark statement card) ---------- */
  .name { min-height: calc(100svh - 2 * var(--frame)); min-height: calc(100dvh - 2 * var(--frame)); display: grid; }
  .name .pad { display: grid; place-items: center; padding-block: clamp(4rem, 9vw, 8rem); }
  .name .inner { width: min(100%, 68rem); margin-inline: auto; text-align: center; }
  .name h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); line-height: 1.06; text-wrap: balance; }
  .name h2 .line { display: block; }
  .name h2 .line + .line { margin-top: .5em; font-size: .62em; line-height: 1.2; }
  .name h2 em { color: var(--cream-2); }
  .name .mark { width: 2.75rem; height: 2.75rem; margin: 0 auto clamp(2rem, 4vw, 3rem); color: var(--cream-2); }

  /* ---------- Supporters marquee ---------- */
  .supporters .pad { padding-block: clamp(1.75rem, 3vw, 2.5rem); display: grid; grid-template-columns: auto 1fr; gap: 1rem 3rem; align-items: center; }
  .supporters p { font-size: .9375rem; color: var(--text-3); max-width: 16ch; line-height: 1.35; }
  .marquee { overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
  .track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); width: max-content; animation: roll 48s linear infinite; padding-right: clamp(2.5rem, 5vw, 4.5rem); }
  .marquee:hover .track { animation-play-state: paused; }
  .track img { height: 1.9rem; width: auto; max-width: 11rem; object-fit: contain; filter: grayscale(1); opacity: .62; transition: opacity .3s; }
  .track img.tall { height: 2.9rem; }
  .track img:hover { opacity: 1; }
  @keyframes roll { to { transform: translateX(-50%); } }

  /* ---------- Tiles (services row) ---------- */
  .tile { position: relative; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--ink); padding: 1.75rem; display: flex; flex-direction: column; min-height: 26rem; }
  .tile.photo { background: var(--night); color: var(--cream); justify-content: flex-end; }
  .tile.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
  .tile.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,14,.7), rgba(10,12,14,0) 55%); }
  .tile.photo p { position: relative; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
  .tile .top { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-3); font-size: .9375rem; font-variant-numeric: tabular-nums; }
  .tile h3 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; letter-spacing: -.015em; font-size: 1.6rem; line-height: 1.15; margin-top: 2.25rem; text-wrap: balance; }
  .tile ul { list-style: none; margin-top: 1.5rem; display: grid; gap: .75rem; color: var(--text-2); font-size: .9875rem; }
  .tile li { display: grid; grid-template-columns: 1rem 1fr; gap: .65rem; align-items: start; }
  .tile li svg { width: 1rem; height: 1rem; margin-top: .25rem; color: var(--text); }
  /* ---------- Products row (dark card, three service tiles side by side) ---------- */
  .products .pad { padding-block: clamp(4rem, 8vw, 7rem); }
  .products .intro { max-width: none; }
  .products .intro h2 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); line-height: 1.04; text-wrap: pretty; }
  .products .lede { margin-top: 1.5rem; font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.45; letter-spacing: -.008em; color: var(--cream-2); max-width: none; text-wrap: pretty; }
  .products .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
  .products .tile { background: var(--night-3); color: var(--cream); border-radius: var(--radius); min-height: 30rem; padding: 2rem; }
  .products .tile .top { color: var(--cream-3); }
  .products .tile h3 { color: var(--cream); font-size: 1.75rem; }
  .products .tile ul { color: var(--cream-2); }
  .products .tile li svg { color: var(--cream); }
  .tile.service .top { align-items: center; }
  .tile.service .top img { width: 3rem; height: 3rem; border-radius: .6rem; object-fit: cover; filter: saturate(.85); }
  .tile.service h3 { margin-top: 1.5rem; }
  .tile.service .field { margin-top: .5rem; color: var(--text-3); font-size: .9375rem; line-height: 1.4; }
  .products .tile.service .field { color: var(--cream-3); }
  .tile.service ul { font-size: .9375rem; }
  .tile.service .status { margin-top: auto; padding-top: 1.75rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--text-2); }
  .tile.service .status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--text); }
  .tile.service .status.concept::before { background: transparent; border: 1px solid var(--text-2); }
  .products .tile.service .status { color: var(--cream-2); }
  .products .tile.service .status::before { background: var(--cream); }
  .products .tile.service .status.concept::before { background: transparent; border-color: var(--cream-2); }
  .tile.service .more { margin-top: 1.25rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .6rem; font-weight: 500; font-size: .9375rem; padding: .7rem .7rem .7rem 1.1rem; border-radius: 999px; background: var(--cream); color: var(--night); width: 100%; transition: background .25s; }
  .tile.service .more:hover { background: #fff; }
  .tile.service .more svg { width: 1.6rem; height: 1.6rem; padding: .35rem; border-radius: 50%; background: var(--night); color: var(--cream); flex: none; transition: transform .3s var(--ease-out); }
  .tile.service .more:hover svg { transform: translateX(3px); }

  /* ---------- Product pages ---------- */
  .page-hero { min-height: min(34rem, 70svh); display: flex; flex-direction: column; color: var(--cream); background: var(--night); }
  .page-hero picture, .page-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .page-hero img.bg { object-fit: cover; filter: saturate(.8); }
  .page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10,12,14,.55) 0%, rgba(10,12,14,.1) 35%), linear-gradient(to top, rgba(10,12,14,.78) 0%, rgba(10,12,14,.3) 45%, rgba(10,12,14,0) 70%); }
  .page-hero .hero-body { grid-template-columns: minmax(0, 1fr); }
  .page-hero .num { color: var(--cream-3); font-size: .9375rem; font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
  .page-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; }
  .page-hero .field { margin-top: 1rem; color: var(--cream-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); max-width: 40ch; }
  .page-hero .status { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem; font-size: .9375rem; color: var(--cream-2); }
  .page-hero .status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cream); }
  .page-hero .status.concept::before { background: transparent; border: 1px solid var(--cream-2); }
  .back { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; color: var(--cream-2); }
  .back svg { width: 1rem; height: 1rem; }
  .back:hover { color: var(--cream); }

  /* ---------- Product pages: setup, problem, today, solution, result ---------- */
  .sec .pad { padding-block: clamp(3.5rem, 7vw, 6rem); }
  .sec .head, .how .head { display: grid; justify-items: center; text-align: center; gap: 1rem; }
  .sec h2, .how h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; text-wrap: balance; }
  .sec .head p { color: var(--text-2); font-size: 1.125rem; max-width: 60ch; text-wrap: pretty; }

  .stats { list-style: none; margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--frame); }
  .stat { background: var(--ink); border: 1px solid var(--rule); border-radius: calc(var(--radius) * .7); padding: 1.5rem 1.5rem 1.35rem; display: flex; flex-direction: column; }
  .stat .num { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .stat .lbl { margin-top: .7rem; color: var(--text-2); font-size: 1rem; line-height: 1.4; max-width: 26ch; }
  .stat .src { margin-top: auto; padding-top: 1rem; font-size: .8125rem; color: var(--text-3); line-height: 1.4; }
  .stat .src a, .chart .src a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: var(--rule-strong); }
  .stat .src a:hover, .chart .src a:hover { text-decoration-color: currentColor; }

  .charts { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--frame); }
  .chart { margin: 0; background: var(--ink-raised); border-radius: calc(var(--radius) * .7); padding: 1.5rem; display: flex; flex-direction: column; }
  .chart h3 { font-family: var(--sans); font-weight: 500; font-size: 1rem; line-height: 1.35; color: var(--text); }
  .chart .src { margin-top: auto; padding-top: 1.25rem; font-size: .8125rem; color: var(--text-3); line-height: 1.45; }
  .stack { margin-top: 1.5rem; display: flex; gap: 2px; height: 22px; border-radius: 4px; overflow: hidden; }
  .stack span { flex: var(--v) 0 0; }
  .stack span:nth-child(1) { background: var(--rule-strong); }
  .stack span:nth-child(2) { background: var(--text-3); }
  .stack span:nth-child(3) { background: var(--text); }
  .legend { list-style: none; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9375rem; color: var(--text-2); }
  .legend li { display: inline-flex; align-items: center; gap: .5rem; }
  .legend i { width: .7rem; height: .7rem; border-radius: 2px; }
  .legend li:nth-child(1) i { background: var(--rule-strong); }
  .legend li:nth-child(2) i { background: var(--text-3); }
  .legend li:nth-child(3) i { background: var(--text); }
  .legend b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
  .hbars { list-style: none; margin-top: 1.5rem; display: grid; gap: .9rem; }
  .hbars li { display: grid; grid-template-columns: minmax(7rem, 13rem) minmax(0, 1fr) auto; gap: 1rem; align-items: center; font-size: .9375rem; }
  .hbars .lbl { color: var(--text-2); line-height: 1.3; }
  .hbars .trk { display: block; height: 16px; border-radius: 0 4px 4px 0; }
  .hbars .bar { display: block; height: 100%; width: calc(var(--v) * 1%); min-width: 3px; background: var(--text); border-radius: 0 4px 4px 0; }
  .hbars .val { font-variant-numeric: tabular-nums; color: var(--text); min-width: 3.5ch; text-align: right; }
  .cols { list-style: none; margin-top: 1.5rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 15rem; }
  .cols li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding-inline: .5rem; }
  .cols .val { font-size: .9375rem; color: var(--text); font-variant-numeric: tabular-nums; display: grid; justify-items: center; line-height: 1.2; margin-bottom: .4rem; }
  .cols .val small { font-size: .75rem; color: var(--text-3); }
  .cols .bar { width: 100%; max-width: 24px; height: calc(var(--v) * 1%); background: var(--text); border-radius: 4px 4px 0 0; }
  .cols .lbl { width: 100%; text-align: center; border-top: 1px solid var(--rule-strong); padding-top: .5rem; font-size: .875rem; color: var(--text-3); }

  .diagram { list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.25rem; }
  .stage { position: relative; background: var(--night-3); border: 1px solid var(--night-rule); border-radius: calc(var(--radius) * .7); padding: 1.35rem 1.25rem 1.5rem; display: flex; flex-direction: column; }
  .stage .arrow { position: absolute; left: -2.25rem; top: 50%; width: 2.25rem; height: 1rem; transform: translateY(-50%); color: var(--cream-3); }
  .stage .n { font-family: var(--serif); color: var(--cream-3); font-size: .9375rem; font-variant-numeric: tabular-nums; }
  .stage h3 { margin-top: .9rem; font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.012em; text-wrap: balance; }
  .stage ul { list-style: none; margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
  .stage li { font-size: .8125rem; line-height: 1.3; padding: .3rem .6rem; border: 1px solid var(--night-rule); border-radius: 999px; color: var(--cream-2); }
  .stage.gate { background: var(--cream); color: var(--night); border-color: var(--cream); }
  .stage.gate .n { color: var(--text-3); }
  .stage.gate li { border-color: var(--rule-strong); color: var(--text-2); }
  .diagram.light { margin-top: clamp(2rem, 4vw, 3rem); }
  .diagram.light .stage { background: var(--ink); border-color: var(--rule); }
  .diagram.light .stage .arrow { color: var(--text-3); }
  .diagram.light .stage .n { color: var(--text-3); }
  .diagram.light .stage p { margin-top: .75rem; font-family: var(--serif); font-style: italic; color: var(--text-3); font-size: 1rem; line-height: 1.35; }

  .how .pad { padding-block: clamp(4rem, 8vw, 7rem); }
  .how .head p { margin-top: 1.25rem; color: var(--cream-2); font-size: 1.125rem; max-width: 60ch; text-wrap: pretty; }
  .how .head.with-vis { gap: clamp(2rem, 4vw, 3rem); }
  .how .vis { width: min(100%, 44rem); }
  .how .vis { margin: 0; }
  .how .vis img { width: 100%; height: auto; border-radius: calc(var(--radius) * .7); aspect-ratio: 3 / 2; object-fit: cover; }

  .compare { margin-top: clamp(2rem, 4vw, 3rem); width: 100%; border-collapse: collapse; font-size: 1rem; }
  .compare th, .compare td { text-align: left; vertical-align: top; padding: 1rem 1.5rem 1rem 0; border-top: 1px solid var(--rule); line-height: 1.45; }
  .compare thead th { font-family: var(--sans); font-weight: 500; font-size: .9375rem; color: var(--text-3); border-top: 0; padding-top: 0; }
  .compare tbody th { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: 1.15rem; letter-spacing: -.01em; width: 22%; }
  .compare td:nth-child(2) { color: var(--text-3); width: 30%; }
  .compare td:nth-child(3) { color: var(--text); display: grid; grid-template-columns: 1.05rem 1fr; gap: .65rem; align-items: start; }
  .compare td svg { width: 1.05rem; height: 1.05rem; margin-top: .3rem; }
  .status-line { margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: .55rem; color: var(--text-2); font-size: .9375rem; }
  .status-line::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--text); flex: none; }

  /* ---------- Notes (answer pages) ---------- */
  .note-hero { min-height: min(30rem, 60svh); display: flex; flex-direction: column; }
  .note-hero .hero-body { grid-template-columns: minmax(0, 1fr); }
  .note-hero .num { color: var(--cream-3); font-size: .9375rem; margin-bottom: 1rem; }
  .note-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.04; max-width: 22ch; }
  .note-hero .field { margin-top: 1.25rem; color: var(--cream-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); max-width: 52ch; text-wrap: pretty; }
  .article .pad { padding-block: clamp(3rem, 6vw, 5rem); max-width: 50rem; margin-inline: auto; }
  .article h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; letter-spacing: -.018em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; margin-top: clamp(2.25rem, 4vw, 3rem); text-wrap: balance; }
  .article h2:first-child { margin-top: 0; }
  .article p { margin-top: 1rem; color: var(--text-2); font-size: 1.125rem; line-height: 1.6; max-width: 66ch; text-wrap: pretty; }
  .article p a { color: var(--text); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--rule-strong); }
  .article p a:hover { text-decoration-color: currentColor; }
  .article em { font-style: italic; }
  .article .charts { margin-top: 1.5rem; }
  .article .charts + p, .article .chart + p { margin-top: 1.5rem; }
  .article .chart { margin-top: 1.5rem; }
  .article .charts .chart { margin-top: 0; }
  .article .hbars li { grid-template-columns: minmax(7rem, 16rem) minmax(0, 1fr) auto; }
  .checks { list-style: none; margin-top: 1.25rem; display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .checks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .8rem; align-items: start; padding: .9rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.5; color: var(--text); }
  .checks li svg { width: 1.1rem; height: 1.1rem; margin-top: .3rem; color: var(--text-3); }
  .related { margin-top: clamp(2.25rem, 4vw, 3rem); }
  .tile-link { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; background: var(--ink); border: 1px solid var(--rule); border-radius: calc(var(--radius) * .7); padding: 1rem 1.25rem; transition: border-color .25s; }
  .tile-link:hover { border-color: var(--text-3); }
  .tile-link img { width: 3.5rem; height: 3.5rem; border-radius: .6rem; object-fit: cover; filter: saturate(.85); }
  .tile-link b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; letter-spacing: -.012em; line-height: 1.1; }
  .tile-link span { color: var(--text-2); font-size: .9375rem; }
  .tile-link > span:last-child { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--text); color: var(--ink); transition: transform .3s var(--ease-out); }
  .tile-link > span:last-child svg { width: 1.05rem; height: 1.05rem; }
  .tile-link:hover > span:last-child { transform: translateX(3px); }
  .notes .pad { padding-block: clamp(2rem, 4vw, 3rem); }
  .notes-list { list-style: none; display: grid; }
  .notes-list li + li { border-top: 1px solid var(--rule); }
  .notes-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 2rem; align-items: center; padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
  .notes-list .when { grid-column: 1; font-size: .9375rem; color: var(--text-3); }
  .notes-list h2, .notes-list h3 { grid-column: 1; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -.018em; max-width: 28ch; text-wrap: balance; transition: color .25s; }
  .notes-list p { grid-column: 1; margin-top: .25rem; color: var(--text-2); font-size: 1.0625rem; max-width: 62ch; text-wrap: pretty; }
  .notes-list .more { grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .9375rem; }
  .notes-list .more span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--text); color: var(--ink); transition: transform .3s var(--ease-out); }
  .notes-list .more span svg { width: 1rem; height: 1rem; }
  .notes-list a:hover .more span { transform: translateX(3px); }
  .notes-list.compact .more { grid-row: 1 / span 2; }
  .notes-list.compact h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
  .notes-home .pad { padding-block: clamp(3rem, 6vw, 5rem); }
  .notes-home .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem 4rem; align-items: baseline; }
  .notes-home .head h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.06; }
  .notes-home .head p { color: var(--text-2); font-size: 1.125rem; max-width: 48ch; }
  .notes-home .notes-list { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); }

  /* ---------- Company ---------- */
  .company .pad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
  .company h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.06; }
  .company .text p { margin-top: 1.25rem; color: var(--text-2); font-size: 1.125rem; max-width: 46ch; }
  .company .text p:first-of-type { margin-top: 2rem; }
  .company figure { margin: 0; }
  .company figure img { width: 100%; height: auto; border-radius: calc(var(--radius) * .6); filter: saturate(.9); aspect-ratio: 3 / 2; object-fit: cover; }
  .company figcaption { margin-top: .75rem; font-family: var(--serif); font-style: italic; color: var(--text-3); font-size: 1rem; }

  /* ---------- Team ---------- */
  .team .pad { padding-block: clamp(3.5rem, 7vw, 6rem); }
  .team h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.06; }
  .people { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
  .person { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1rem 2.25rem; align-items: start; }
  .person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius) * .5); filter: saturate(.88); }
  .person h3 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: 1.75rem; letter-spacing: -.015em; line-height: 1.1; }
  .person h3 { grid-column: 2; display: flex; align-items: center; gap: .6rem; }
  .person .li { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--text-3); transition: color .25s, border-color .25s; }
  .person .li svg { width: .8rem; height: .8rem; }
  .person .li:hover { color: var(--text); border-color: var(--text); }
  .person ul { grid-column: 2; list-style: none; margin-top: -.5rem; display: grid; gap: .6rem; color: var(--text-2); font-size: 1rem; line-height: 1.45; }
  .person picture { grid-row: 1 / span 2; }
  .person li { padding-left: 1rem; position: relative; }
  .person li::before { content: ""; position: absolute; left: 0; top: .62em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--text-3); }

  /* ---------- Invitation (centred stack, pill CTA) ---------- */
  .invite .pad { padding-block: clamp(5rem, 11vw, 10rem); display: grid; justify-items: center; text-align: center; }
  .invite h2 { font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
  .invite p { margin-top: 1.5rem; color: var(--cream-2); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
  .cta { margin-top: 2.5rem; display: inline-flex; align-items: center; gap: .9rem; padding: .45rem .45rem .45rem 1.5rem; border-radius: 999px; background: var(--cream); color: var(--night); font-weight: 500; font-size: 1.0625rem; transition: gap .3s var(--ease-out); }
  .cta span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--night); color: var(--cream); transition: transform .3s var(--ease-out); }
  .cta span svg { width: 1.1rem; height: 1.1rem; }
  .cta:hover { gap: 1.2rem; }
  .cta:hover span { transform: scale(1.08); }

  /* ---------- Footer ---------- */
  footer { color: var(--text-3); font-size: .9375rem; }
  footer .pad { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
  footer .cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; }
  footer .brand { color: var(--text); }
  footer .about p { margin-top: 1.25rem; max-width: 30ch; line-height: 1.5; color: var(--text-2); }
  footer .about .places { margin-top: .75rem; color: var(--text-3); }
  footer h3 { font-family: var(--sans); font-weight: 500; font-size: .9375rem; color: var(--text); }
  footer ul { list-style: none; margin-top: 1rem; display: grid; gap: .6rem; }
  footer ul a { color: var(--text-2); transition: color .25s; }
  footer ul a:hover { color: var(--text); }
  footer .about .copy { margin-top: 1.5rem; color: var(--text-3); font-size: .875rem; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero img.bg, .track, .hero .mist { animation: none; }
    .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
    .words .w > span, .words.in .w > span { transform: none; animation: none; }
    .hero-aside { opacity: 1; animation: none; }
    .enter { opacity: 1; transform: none; transition: none; }
    .chars span { opacity: 1; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 70em) {
    .diagram { grid-template-columns: 1fr; gap: 2.25rem; max-width: 34rem; }
    .stage .arrow { left: 50%; top: -1.625rem; transform: translateX(-50%) rotate(90deg); transform-origin: center; }
    .people { grid-template-columns: 1fr; }
    .tile { min-height: 22rem; }
    .products .tile { min-height: 26rem; padding: 1.75rem; }
  }
  @media (max-width: 56em) {
    .company .pad { grid-template-columns: 1fr; }
    .notes-home .head { grid-template-columns: 1fr; }
    .notes-list a { grid-template-columns: 1fr; }
    .notes-list .more { grid-column: 1; grid-row: auto; margin-top: .75rem; }
    .article .hbars li { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto; }
    .tile-link { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; }
    .company figure { order: -1; }
    .products .grid { grid-template-columns: 1fr; gap: .375rem; }
    .products .tile { min-height: 0; }
    .stats, .charts { grid-template-columns: 1fr; }
    .compare td:nth-child(3) { display: block; }
    .compare td svg { display: none; }
    .compare th, .compare td { padding-right: 1rem; }
    .source .pad { grid-template-columns: 1fr; }
    footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    footer .about { grid-column: 1 / -1; }
  }
  @media (max-width: 46em) {
    body { font-size: 1rem; }
    .hero img.bg { object-position: 50% 50%; }
    .nav { flex-wrap: wrap; }
    .nav ul { width: 100%; gap: 1rem; font-size: .875rem; }
    .hero-body { grid-template-columns: 1fr; gap: 1.25rem; }
    .hero h1 { max-width: none; font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
    .hero-aside { justify-self: start; }
    .supporters .pad { grid-template-columns: 1fr; gap: 1.25rem; }
    .supporters p { max-width: none; }
    .tile { min-height: 0; }
    .tile.photo { min-height: 16rem; }
    .person { grid-template-columns: 1fr; grid-template-rows: auto; gap: 1rem; }
    .person picture { grid-row: auto; }
    .person h3, .person ul { grid-column: 1; }
    .person ul { margin-top: 0; }
  }