/* ==========================================================================
   EDIO — Sustainability. Shared tokens, header, footer live in base.css.
   Same room as the homepage: white, the hero's quiet cyan light, fine dark lines, thin cyan signals.
   Content: the client's document. Hero (a living circuit, a lifeline and an exploded device), Right to Repair
   (four pillars with photos), the UN SDGs (a pinned wheel that stops at 8, 9 and 12) and the repair journey
   (a pinned loop whose centre photo changes stage by stage). Every "off" state is scoped to .js, so with JS off
   or reduced motion each figure shows complete.
   ========================================================================== */

:root {
  --void: #FFFFFF; --ink-hi: #0E1A20;
  --panel: #F6F9FA; --rule: rgba(14, 26, 32, .09);
  --dim: #5F7078;
}
html { background: var(--void); }
body { background: transparent; }

/* ---------- the homepage's room: drifting cyan light, grain, vignette (fixed, no seams) ---------- */
.atmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--void); }
.atmos i { position: absolute; display: block; }
.atmos-a, .atmos-b { border-radius: 50%; will-change: transform; }
.atmos-a { width: 70vw; height: 70vw; left: -24vw; top: -30vw; background: radial-gradient(closest-side, rgba(11, 127, 145, .035), rgba(11, 127, 145, 0)); animation: atmos-a 28s ease-in-out infinite alternate; }
.atmos-b { width: 64vw; height: 64vw; right: -22vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(11, 127, 145, .03), rgba(11, 127, 145, 0)); animation: atmos-b 34s ease-in-out infinite alternate; }
@keyframes atmos-a { to { transform: translate(10vw, 14vw); } }
@keyframes atmos-b { to { transform: translate(-8vw, -12vw); } }
.atmos-halo { inset: 0; background: radial-gradient(55% 55% at 50% 48%, rgba(242, 244, 245, .42), rgba(255, 255, 255, 0) 75%); }
.atmos-vignette { inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, 0) 55%, rgba(14, 26, 32, .06) 100%); }
.atmos-grain {
  inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- section shell ---------- */
.sx-sec { position: relative; padding-block: clamp(56px, 6vw, 104px); }
.sx-journey { background: #fff; }
.sx-journey::before { background: none; }
.sx-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 45% at 80% 30%, rgba(11, 127, 145, .036), rgba(11, 127, 145, 0) 70%),
              radial-gradient(45% 40% at 10% 90%, rgba(11, 127, 145, .03), rgba(11, 127, 145, 0) 70%);
}
.sx-sec::after { /* the hero's faint horizon line marks each hand-over between sections */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 127, 145, 0), rgba(11, 127, 145, .18) 30%, rgba(11, 127, 145, .18) 70%, rgba(11, 127, 145, 0));
}
.sx-sec > * { position: relative; }
.sx-head { max-width: none; }
.sx-head--split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.sx-head--split > :first-child { grid-column: 1 / -1; }
.sx-head--split > :last-child { grid-column: 1 / -1; margin-top: 18px; }
.sx-head--split .sx-lede { max-width: none; }
/* the small label over a title: the body face, sentence case, a step quieter than the text (as on the homepage) */
.sx-k { margin-bottom: 14px; font: 500 clamp(14px, 1.05vw, 16px)/1.35 var(--font-display); letter-spacing: 0; color: var(--text-mute); }
.sx-h2 { font: 500 clamp(36px, 4.4vw, 70px)/.98 var(--font-display); letter-spacing: -.045em; color: var(--ink-hi); text-wrap: balance; }
.sx-lede { font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.6; color: #4A5C64; max-width: 58ch; }
.sx-lede p + p { margin-top: 14px; }

/* ---------- typewriter (JS wraps letters in .ch inside nowrap words) ---------- */
.tw-w { display: inline-block; white-space: nowrap; }
.js [data-type] .ch { opacity: 0; }
.js [data-type] .ch.on { opacity: 1; }
[data-type] .ch { position: relative; }
[data-type] .ch.is-caret::after {
  content: ""; position: absolute; left: 100%; top: .12em; bottom: .02em; width: .06em; margin-left: .04em;
  background: var(--cyan); box-shadow: 0 0 12px rgba(11, 127, 145, .336);
}
[data-type].is-typed .ch.is-caret::after { animation: tw-caret 1s steps(1) infinite; }
@keyframes tw-caret { 50% { opacity: 0; } }
.js [data-type-after] { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js [data-type-after].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   01 HERO — headline left; right, devices going round the repair loop
   ========================================================================== */
.sx-hero {
  position: relative; overflow: hidden; display: grid; align-items: center;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 24px) 0 clamp(90px, 12vh, 140px);
  background: radial-gradient(42% 55% at 74% 46%, rgba(11, 127, 145, .07), rgba(11, 127, 145, 0) 70%);
}
.sx-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sx-hero-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; width: 100%; }
.sx-hero-copy { grid-column: 1 / span 6; }
.sx-title { margin-top: 20px; font: 500 clamp(54px, 6.6vw, 118px)/.93 var(--font-display); letter-spacing: -.05em; color: var(--ink-hi); text-wrap: balance; }
.sx-hero-lede { margin-top: 26px; max-width: 50ch; }
.sx-hero-dev { grid-column: 7 / span 6; position: relative; min-width: 0; }
.sx-hero-dev::before {
  content: ""; position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 127, 145, .07), rgba(11, 127, 145, 0) 70%);
}
/* the loop: a square canvas, sized by its column; sustainability.js draws it at the right pixel density */
.sx-loop { position: relative; display: block; width: 100%; max-width: 580px; aspect-ratio: 1; margin-inline: auto; }
.sx-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(11, 127, 145, 0), rgba(11, 127, 145, .3) 30%, rgba(11, 127, 145, .3) 70%, rgba(11, 127, 145, 0)); }

/* ==========================================================================
   02 RIGHT TO REPAIR — a sum: the right to repair + what EDIO adds = the ability to repair.
   The pieces arrive in order when it comes into view (.is-in, set by sustainability.js).
   ========================================================================== */
.eq { margin-top: clamp(32px, 3.4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1.25fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr); column-gap: clamp(10px, 1.2vw, 20px); align-items: stretch; }
.eq-i { display: flex; flex-direction: column; gap: 10px; }
.eq-i figure { margin: 0 0 6px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.eq-i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eq-n { font: 500 13px/1.2 var(--font-display); color: var(--cyan); }
.eq-i h3 { font: 500 clamp(22px, 1.9vw, 30px)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--ink-hi); }
.eq-t { font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.eq-k { font: 500 clamp(22px, 1.9vw, 30px)/1.1 var(--font-display); letter-spacing: -.025em; }
.eq-i--given, .eq-i--result { justify-content: center; padding: clamp(18px, 1.8vw, 28px); }
.eq-i--given { border: 1px dashed rgba(14, 26, 32, .3); }
.eq-i--given .eq-k { color: var(--ink-hi); }
.eq-tag { margin-top: 6px; align-self: flex-start; padding: 6px 10px; border: 1px solid rgba(14, 26, 32, .2); font: 500 12px/1 var(--font-display); color: var(--text-mute); }
.eq-i--result { background: var(--cyan); }
.eq-i--result .eq-k, .eq-i--result .eq-t { color: #fff; }
.eq-i--result .eq-t { font: 500 16px/1.4 var(--font-display); }
.eq-op { align-self: center; font: 300 clamp(34px, 3vw, 52px)/1 var(--font-display); color: var(--cyan); }
/* arriving, one piece after another */
.js .eq:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
.js .eq > * { transition: opacity .6s ease, transform .7s var(--ease); transition-delay: calc(var(--i) * .16s); }

/* ==========================================================================
   03 SDG WHEEL — pinned; the wheel turns with the reader's scroll and stops at 8, 9 and 12
   ========================================================================== */
.sw { position: relative; margin-top: clamp(16px, 2vw, 28px); }
.sw.is-scrub { height: 360vh; height: 360svh; }
.sw.is-scrub .sw-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.sw-stage { width: 100%; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 80px); align-items: center; }
.sw-wheel { position: relative; width: min(100%, 76vh, 640px); width: min(100%, 76svh, 640px); aspect-ratio: 1; justify-self: center; }
.sw-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sw-seg[data-seg="1"] { --c: #E5243B; }
.sw-seg[data-seg="2"] { --c: #DDA63A; }
.sw-seg[data-seg="3"] { --c: #4C9F38; }
.sw-seg[data-seg="4"] { --c: #C5192D; }
.sw-seg[data-seg="5"] { --c: #FF3A21; }
.sw-seg[data-seg="6"] { --c: #26BDE2; }
.sw-seg[data-seg="7"] { --c: #FCC30B; }
.sw-seg[data-seg="8"] { --c: #A21942; }
.sw-seg[data-seg="9"] { --c: #FD6925; }
.sw-seg[data-seg="10"] { --c: #DD1367; }
.sw-seg[data-seg="11"] { --c: #FD9D24; }
.sw-seg[data-seg="12"] { --c: #BF8B2E; }
.sw-seg[data-seg="13"] { --c: #3F7E44; }
.sw-seg[data-seg="14"] { --c: #0A97D9; }
.sw-seg[data-seg="15"] { --c: #56C02B; }
.sw-seg[data-seg="16"] { --c: #00689D; }
.sw-seg[data-seg="17"] { --c: #19486A; }
.sw-p { fill: var(--c); stroke: #fff; stroke-width: 2; }
/* only EDIO's three goals keep their colour; the rest of the wheel is black and white */
.sw-seg:not(.sw-seg--ours) .sw-p { filter: grayscale(1); opacity: .62; }
.sw-g { display: none; }
.sw-seg { transition: transform .5s var(--ease); }
.sw-seg.is-now { transform: translate(var(--dx, 0), var(--dy, 0)); }
.sw-seg.is-now .sw-p { filter: drop-shadow(0 6px 10px rgba(14, 26, 32, .28)); }
.sw-ptr { fill: var(--cyan); }
.sw-core { position: absolute; inset: 27%; display: grid; place-items: center; }
.sw-c { grid-area: 1 / 1; width: 100%; display: grid; place-items: center; transition: opacity .45s ease, transform .55s var(--ease); }
.sw-c img { display: block; width: min(100%, 196px); height: auto; box-shadow: 0 22px 40px -28px rgba(14, 26, 32, .4); }
.sw-c--intro { text-align: center; }
.sw-c--intro b { font: 700 clamp(15px, 1.45vw, 22px)/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: #1C2430; }
.sw-c:not(.is-on) { opacity: 0; transform: scale(.9); pointer-events: none; }
.sw-list { display: grid; row-gap: 22px; }
.sw-i { display: grid; grid-template-columns: 104px 1fr; column-gap: 20px; align-items: center; padding: 0; border: 0; background: none; transition: opacity .45s ease; }
.sw-i img { display: block; width: 104px; height: 104px; }
.sw-i p { display: grid; row-gap: 7px; }
.sw-i span { font: 500 14px/1 var(--font-display); letter-spacing: 0; color: var(--cyan); }
.sw-i b { font: 500 clamp(18px, 1.5vw, 24px)/1.12 var(--font-display); letter-spacing: -.02em; color: var(--ink-hi); }
.sw-i em { font: 400 15px/1.5 var(--font-display); font-style: normal; color: var(--text-dim); max-width: 46ch; }
.sw-i.is-now { opacity: 1; }
.js .sw.is-scrub .sw-list { grid-template-areas: "one"; row-gap: 0; }
.js .sw.is-scrub .sw-i { grid-area: one; grid-template-columns: 1fr; row-gap: 22px; align-items: start; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .6s var(--ease); pointer-events: none; }
.js .sw.is-scrub .sw-i.is-cur { opacity: 1; transform: none; pointer-events: auto; }
.js .sw.is-scrub .sw-i img { width: clamp(120px, 11vw, 168px); height: auto; aspect-ratio: 1; }
.js .sw.is-scrub .sw-i em { font: 500 clamp(22px, 2.1vw, 32px)/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink-hi); max-width: 24ch; }
.sw-count { display: none; margin-bottom: 18px; font: 500 14px/1 var(--font-display); color: var(--text-mute); }
.js .sw.is-scrub .sw-count { display: block; }
.sw-count b { color: var(--cyan); font-weight: 600; }
.sdg-note { margin-top: clamp(20px, 2vw, 32px); max-width: 100ch; font-size: 11.5px; line-height: 1.6; color: var(--text-mute); }
.sdg-note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.sdg-note a:hover { color: var(--cyan-2); }

/* ==========================================================================
   04 SUSTAINABLE REPAIR JOURNEY — pinned; the loop goes round with the scroll, the centre photo changes per stage
   ========================================================================== */
.jw { position: relative; margin-top: clamp(16px, 2vw, 28px); }
.jw.is-scrub { height: 380vh; height: 380svh; }
.jw.is-scrub .jw-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.jr { width: 100%; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(28px, 5vw, 80px); align-items: center; }
/* the order of preference: three quiet rows; a bar under each shows how strongly it is preferred */
.rr { display: grid; row-gap: 26px; }
.rr-i { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: baseline; row-gap: 12px; transition: opacity .5s ease, transform .6s var(--ease); }
.rr-n { font: 500 13px/1 var(--font-display); letter-spacing: 0; color: var(--text-mute); }
.rr-i b { font: 500 clamp(26px, 2.4vw, 38px)/1 var(--font-display); letter-spacing: -.035em; color: var(--ink-hi); transition: color .4s ease; }
.rr-i em { font-style: normal; font-weight: 600; color: var(--cyan); letter-spacing: -.01em; }
.rr-bar { grid-column: 2; position: relative; display: block; height: 6px; background: rgba(11, 127, 145, .08); }
.rr-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--cyan); }
.rr-i--1 { --w: 100%; }
.rr-i--1 b { color: var(--cyan-2); }
.rr-i--2 { --w: 58%; }
.rr-i--2 .rr-bar::after { background: rgba(11, 127, 145, .6); }
.rr-i--3 { --w: 28%; }
.rr-i--3 b { color: #4A5C64; }
.rr-i--3 .rr-bar::after { background: rgba(14, 26, 32, .3); }
.rr-i.is-now { transform: translateX(10px); }
.rr-i.is-now::before { content: ""; position: absolute; left: -18px; top: 6px; width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 0 4px rgba(11, 127, 145, .14); }
.js .jw.is-scrub .rr-i:not(.is-now) { opacity: .6; }

.ring-wrap { padding: 22px 64px 26px; display: grid; justify-items: center; }
.ring { position: relative; aspect-ratio: 1; width: min(100%, 74vh, 720px); width: min(100%, 74svh, 720px); margin-inline: auto; }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r-base { fill: none; stroke: rgba(11, 127, 145, .16); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.r-live { fill: none; stroke: var(--cyan); stroke-width: .45; stroke-dasharray: 100; stroke-dashoffset: var(--off, 0); filter: drop-shadow(0 0 3px rgba(11, 127, 145, .35)); }
.r-dot { fill: var(--cyan-2); filter: drop-shadow(0 0 3px rgba(11, 127, 145, .6)); opacity: var(--dot, 0); }
.rn {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; white-space: nowrap;
  background: #fff; border: 1px solid rgba(11, 127, 145, .2);
  font: 500 13px/1 var(--font-display); letter-spacing: 0; color: var(--ink-hi);
  transition: opacity .4s ease, border-color .4s ease, box-shadow .4s ease, background .4s ease, color .4s ease;
}
.rn.is-on { border-color: rgba(11, 127, 145, .4); }
.rn.is-hot { border-color: var(--cyan-2); background: var(--cyan-2); color: #FFFFFF; }
.rn--again.is-on:not(.is-hot) { border-color: var(--cyan-2); color: var(--cyan-2); }
.js .rn:not(.is-on) { opacity: .35; }
.ring-core { position: absolute; inset: 6%; }
.ring-note { display: grid; justify-items: center; text-align: center; row-gap: 4px; margin-top: 18px; }
/* the centre photo fills the ring and fades into the page, so it is not a tile sitting on a coloured disc */
.lp { position: absolute; inset: 0; background: transparent; -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); mask-image: radial-gradient(closest-side, #000 84%, transparent 100%); }
.lp-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.lp-ph.is-on { opacity: 1; }
.ring-note > span:not(.lp-tag) { font: 500 13px/1 var(--font-display); color: var(--cyan); }
.ring-note b { font: 500 clamp(22px, 2vw, 32px)/1 var(--font-display); letter-spacing: -.035em; color: var(--ink-hi); }
.ring-note em { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--dim); max-width: 28ch; }
.lp-tag { font: 500 13px/1 var(--font-display); color: var(--cyan-2); }

/* ==========================================================================
   "Your repair matters" — pinned. One field of dots re-forms into each fact as the reader scrolls; the figure beside
   it changes with it (sustainability.js sets .is-scrub and .is-cur). With JS off the three figures are listed.
   ========================================================================== */
.rm { margin-top: 0; }
.rm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 32px; row-gap: 10px; padding-bottom: clamp(18px, 2.6vh, 32px); }
.rm-h2 { font-size: clamp(44px, 5.6vw, 92px); }
.rm-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 64px); align-items: center; width: 100%; }
.rm-list { display: grid; }
.rm-row { padding: 22px 0; border-top: 1px solid var(--line-strong); }
.rm-k { display: flex; gap: 14px; align-items: baseline; font: 500 clamp(17px, 1.35vw, 20px)/1.3 var(--font-display); color: var(--text-dim); }
.rm-k span { font-size: clamp(14px, 1.05vw, 16px); color: var(--cyan); font-variant-numeric: tabular-nums; }
.rm-n { margin-top: 20px; font: 500 clamp(56px, 6.6vw, 112px)/.95 var(--font-display); letter-spacing: -.05em; color: var(--ink-hi); }
.rm-n b { font-weight: inherit; font-variant-numeric: tabular-nums; color: var(--cyan); }
.rm-d { margin-top: 20px; max-width: 32ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--text-dim); }
.rm-row--intro { display: none; }
.rm.is-scrub .rm-row--intro { display: block; }
.rm-row--intro .rm-n { margin-top: 0; font-size: clamp(40px, 4.4vw, 72px); line-height: 1; }
.rm-cv { display: none; width: 100%; aspect-ratio: 1000 / 600; }
.rm.is-scrub::after { content: ""; display: block; height: 230vh; height: 230svh; }   /* the scroll distance the pictures play over */
/* the pinned frame fills the screen below the header, so nothing empty trails it into the footer */
.rm.is-scrub .rm-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
.rm.is-scrub .rm-cv { width: min(100%, calc((100svh - var(--header-h) - 240px) * 5 / 3)); justify-self: center; }
.rm.is-scrub .rm-cv { display: block; }
.rm.is-scrub .rm-list { grid-template-areas: "one"; }
.rm.is-scrub .rm-row { grid-area: one; opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .7s var(--ease); pointer-events: none; }
.rm.is-scrub .rm-row.is-cur { opacity: 1; transform: none; pointer-events: auto; }
.mt-src { margin-top: 24px; font-size: 13px; color: var(--text-mute); }
.sx-matters { padding-block: 0 clamp(40px, 4vw, 64px); }
/* the closing line, right above the footer */
.sx-close { padding-block: clamp(48px, 7vw, 120px) clamp(56px, 8vw, 140px); border-top: 1px solid var(--line-strong); }
.sx-close-t { font: 500 min(11vw, 170px)/.92 var(--font-display); letter-spacing: -.055em; color: var(--ink-hi); white-space: nowrap; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .eq-op { font-size: 28px; }
  .eq-t { font-size: 14px; }
  .sx-head--split > :last-child { grid-column: 1 / -1; }
  .sx-hero-copy { grid-column: 1 / span 6; }
  .sx-hero-dev { grid-column: 7 / span 6; }
  .ring { width: min(100%, 62svh, 640px); }
  .sw-stage { grid-template-columns: 1fr; row-gap: 18px; }
  .sw-wheel { width: min(100%, 50svh, 540px); }
  .jr { grid-template-columns: 1fr; row-gap: 18px; }
  .rr { grid-template-columns: repeat(3, 1fr); column-gap: 18px; }
  .rr-i.is-now { transform: none; }
  .rr-i.is-now::before { left: 0; top: -14px; }
}

@media (max-width: 767px) {
  .sx-sec { padding-block: 44px 48px; }
  .sx-h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .sx-k { font-size: 14px; margin-bottom: 10px; }

  .sx-hero { align-items: start; padding: calc(var(--header-h) + 28px) 0 96px; }
  .sx-hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .sx-hero-copy, .sx-hero-dev { grid-column: 1 / -1; min-width: 0; }
  .sx-title { font-size: clamp(34px, 9.4vw, 46px); }
  .sx-hero-lede { margin-top: 16px; font-size: 15.5px; }
  .sx-hero-dev { margin-top: 20px; }
  .sx-loop { max-width: 440px; }

          
  .sw-wheel { width: min(100%, 44svh); }
  .sw-list { row-gap: 8px; }
  .sw-i { grid-template-columns: 72px 1fr; column-gap: 14px; }
  .sw-i img { width: 72px; height: 72px; }
  .sw-i b { font-size: 15px; }
  .sw-i span { font-size: 9.5px; }
  .sw-i em { font-size: 13.5px; }
  .rm-stage { grid-template-columns: 1fr; row-gap: 8px; }
  .rm-n { font-size: 48px; margin-top: 12px; }
  .rm-h2 { font-size: 40px; }
  .rm-head { padding-bottom: 8px; }
  .rm-d { margin-top: 12px; font-size: 16.5px; }
  .rm.is-scrub .rm-row { border-top: 0; padding: 0; }
  /* the sum reads down the page */
  .eq { grid-template-columns: 1fr; row-gap: 14px; }
  .eq-op { justify-self: center; font-size: 34px; }
  .eq-i figure { aspect-ratio: 16 / 10; }
  .sw-i.is-now { transform: none; }
  .sdg-note { font-size: 10.5px; }

  .rr { column-gap: 10px; row-gap: 0; }
  .rr-i { grid-template-columns: 1fr; row-gap: 8px; }
  .rr-n { display: none; }
  .rr-i b { font-size: 17px; letter-spacing: -.02em; }
  .rr-bar { grid-column: 1; height: 4px; }
  .ring-wrap { padding: 16px 8px 20px; }
  .ring { width: min(100%, 78vw, 420px); }
  .rn { padding: 5px 6px; gap: 6px; font-size: 11px; }
  .ring-core { inset: 4%; }
  .ring-note > span:not(.lp-tag) { display: none; }
  .ring-note b { font-size: 16px; }
  .ring-note em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rm.is-scrub .rm-row { transition: none; }
  .js .eq > * { transition: none; }
  .atmos-a, .atmos-b { animation: none; }
    .rr-i, .rn, .sw-c, .sw-i, .sw-seg, .lp-ph { transition: none; }
}