/* ByteNest site, 2026-11-09. Light home, dark case pages.
   Part 1 is the approved mockup CSS (mockup/mockup.css), copied unchanged except for its
   mockup-only stage-1 rules. Part 2 adds the rest of the site: base and a11y, header menu,
   home sections, case sections, the scroll engine states (scrub, io, static), the form,
   the footer, the Comet loader and the Weekly Story board ported from pulsebodyshop.com. */

/* Fonts, served from this site (no third-party requests). Archivo and Martian Mono, variable,
   latin and latin-ext subsets. SIL Open Font License 1.1, see assets/fonts/README.txt. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(../assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(../assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap;
  src: url(../assets/fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap;
  src: url(../assets/fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================ PART 1: mockup */

:root {
  --f-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr: 72px;
  --gut: clamp(16px, 4vw, 56px);
  --maxw: 1360px;
  --r: 16px;

  /* light, the home */
  --paper: #F4EFE6;
  --paper-2: #EAE3D6;
  --ink: #15171B;
  --ink-2: #363A42;
  --muted: #6B6F78;
  --rule: #D9D2C3;
  --copper: #D8702E;
  --copper-hi: #E8834A;
  --copper-text: #B2571B;

  /* every project carries its own colour */
  --c-pulse: #11233D;
  --c-barber: #1B57C8;
  --c-kroz: #5C6B3D;
  --c-haircode: #E9B9B3;
  --c-popravimo: #2A7FC1;
  --c-pip: #0C6B52;
  --c-aac: #F0C25A;

  --bg: var(--paper);
  --text: var(--ink);
}

/* dark, the case pages (tokens carried over from direction 2) */
.dark {
  --bg: #0B0D10;
  --bg-2: #101318;
  --panel: #141820;
  --node: #151A22;
  --line: #262C36;
  --line-2: #343C48;
  --wire: #4A5260;
  --text: #ECE6DA;
  --muted: #A3A8AF;
  --dim: #8A9099;
  --copper: #E8834A;
  --copper-hi: #F4A06C;
  --lime: #C9F27A;
  --sky: #8DB8DA;
  --plat: #8F98A5;
  --ink: #0B0D10;
  --rule: var(--line);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--f-display); font-size: 17px; line-height: 1.5;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 50px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-display); font-weight: 700; font-size: 16px; font-stretch: 108%;
  text-decoration: none; line-height: 1.1; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--copper { background: var(--copper); color: #15171B; }
.btn--copper:hover { background: var(--copper-hi); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #2A2E36; }
.btn--ghost { border-color: var(--rule); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--copper); }
.dark .btn--ghost { border-color: var(--line-2); }
.btn--sm { min-height: 42px; padding: 9px 18px; font-size: 15px; }

/* ------------------------------------------------------------ header */
.hdr {
  position: sticky; top: 0; z-index: 50;
  height: var(--hdr);
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--gut);
  background: rgba(244, 239, 230, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.dark .hdr { background: rgba(11, 13, 16, .84); }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; flex: none; color: var(--text);
}
.mark { width: 30px; height: 30px; display: block; }
.mark .mark-acc { fill: var(--copper); }
.wm { font-weight: 700; font-size: 19px; letter-spacing: -.02em; font-stretch: 105%; }
.nav { display: flex; gap: 28px; margin-left: auto; font-weight: 600; font-size: 15.5px; }
.nav a { text-decoration: none; color: var(--text); opacity: .8; }
.nav a:hover { opacity: 1; }
.hdr .btn { flex: none; }
@media (max-width: 899.98px) { .nav { display: none; } }

/* ------------------------------------------------------------ home hero */
.hero { position: relative; isolation: isolate; padding: clamp(40px, 6vw, 84px) 0 0; overflow: hidden; }
/* the same dot grid as the case pages' system maps, faded, so both halves of the site share a texture */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 70%; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(21, 23, 27, .16) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 90% at 80% 10%, #000 10%, transparent 70%);
  mask-image: radial-gradient(70% 90% at 80% 10%, #000 10%, transparent 70%);
}
.hero-grid { display: grid; gap: 26px 56px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.62fr) minmax(0, .7fr); } }
.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-family: var(--f-mono); font-stretch: 80%; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--copper); }
.eyebrow i { font-style: normal; color: var(--copper-text); }
.hero h1 {
  margin-top: 22px;
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(27px, 8.9vw, 62px); /* each half of the sentence keeps to one line */
  line-height: .98; letter-spacing: -.038em;
}
.hero h1 .hl { display: block; color: var(--copper-text); }
@media (min-width: 900px) { .hero h1 { font-size: clamp(40px, 5.15vw, 76px); line-height: .96; } }
@media (max-width: 599.98px) { .eyebrow { font-size: 11px; gap: 6px 8px; } .eyebrow .wide { display: none; } }
.hero .lede { margin-top: clamp(20px, 2.4vw, 30px); max-width: 37em; }
.hero .cta-row { margin-top: clamp(24px, 2.8vw, 36px); }
/* the mark, large and alive: tools/hero-ring.mjs writes its keyframes further down */
.hero-ring { order: -1; display: flex; align-items: center; gap: 18px; }
.hero-ring .bn-ring { flex: none; width: 116px; height: auto; color: var(--ink); }
.ring-cap { display: grid; gap: 4px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ring-cap b { font-weight: 600; font-size: 13px; letter-spacing: .14em; color: var(--ink); }
@media (min-width: 900px) {
  .hero-ring { order: 0; flex-direction: column; gap: 16px; justify-self: end; width: min(100%, 368px); }
  .hero-ring .bn-ring { width: 100%; }
  .ring-cap { text-align: center; }
}
.lede {
  max-width: 40em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-2);
}
.lede b { color: var(--ink); font-weight: 650; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* the framed screens on the work cards: every screen is shown whole, never cropped */
.frame {
  position: relative; flex: none;
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, .55);
}
.frame--desktop {
  border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid rgba(255, 255, 255, .22);
}
.frame--desktop img { width: 100%; height: auto; }
.frame--phone {
  width: min(100%, 178px); margin-inline: auto;
  border-radius: 30px; border: 6px solid #111; background: #111;
  overflow: hidden;
}
.frame--phone img { width: 100%; height: auto; border-radius: 24px; }

/* proof strip */
.proof { margin-top: clamp(34px, 4.6vw, 60px); border-top: 1px solid var(--rule); padding: 0 0 clamp(28px, 4vw, 48px); }
.proof ul { display: grid; grid-template-columns: minmax(0, 1fr); }
.proof li { padding: 20px 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 30em; }
.proof li + li { border-top: 1px solid var(--rule); }
.proof b { display: block; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.03em; color: var(--ink); line-height: 1.05; margin-bottom: 6px; }
.proof a { display: block; color: inherit; text-decoration: none; }
.proof a span { color: var(--copper-text); font-weight: 700; }
.proof a:hover b { color: var(--copper-text); }
@media (min-width: 800px) {
  .proof ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof li { padding: 24px 28px 0 0; }
  .proof li + li { border-top: 0; border-left: 1px solid var(--rule); padding-left: 28px; }
}

/* ------------------------------------------------------------ case page opening (dark) */
.case-open { padding: clamp(32px, 5vw, 64px) 0 56px; }
.case-grid {
  display: grid; gap: 28px 56px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'head' 'film' 'copy';
}
/* desktop: the title across the top, the showcase as wide as the screen height allows, the copy under it */
@media (min-width: 1000px) {
  .case-grid {
    gap: 44px 56px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'head' 'film' 'copy';
  }
  .case-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px 56px; align-items: end; }
  .case-head .kicker { grid-column: 1 / -1; }
  .case-head h1 { grid-column: 1; margin-top: 0; }
  .case-head .sub { grid-column: 2; margin-top: 0; padding-bottom: .3em; max-width: 46ch; }
  /* a landscape showcase (film, browser, browser plus phone): sized to the viewport height, centred */
  .film { width: min(100%, calc((100vh - 230px) * 1.6)); min-width: min(100%, 760px); justify-self: center; align-self: start; }
  .combo .frame-p { max-width: 240px; }
  /* the copy: the lede on the left, the facts on the right */
  .case-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px 56px; align-items: start; }
  .case-copy .lede { grid-column: 1; }
  .case-copy .meta, .case-copy .figs, .case-copy .cta-row--case { grid-column: 2; }
  .case-copy .meta { margin-top: 0; padding-top: 0; border-top: 0; }
  .case-copy .figs { margin-top: 0; }
  .case-copy .cta-row--case { margin-top: 8px; }
  /* two phones (portrait): the copy on the left, the phones large on the right */
  .case-grid--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'head head' 'copy film'; align-items: start; }
  .case-grid--duo .film, .case-grid--solo .film { width: 100%; min-width: 0; }
  .case-grid--duo .case-copy, .case-grid--solo .case-copy { display: block; }
  .case-grid--duo .case-copy .meta, .case-grid--solo .case-copy .meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
  .case-grid--duo .case-copy .figs, .case-grid--solo .case-copy .figs { margin-top: 24px; }
  .case-grid--duo .case-copy .cta-row--case, .case-grid--solo .case-copy .cta-row--case { margin-top: 26px; }
  .case-grid--duo .duo .frame-p { max-width: 290px; }
}
.case-head { grid-area: head; }
.case-copy { grid-area: copy; }
.film { grid-area: film; align-self: center; }
.kicker {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-family: var(--f-mono); font-stretch: 80%; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
}
.kicker .num { color: var(--lime); }
.case-head h1 {
  margin-top: 18px;
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: .93; letter-spacing: -.038em;
}
.case-head .sub { margin-top: 14px; font-size: clamp(18px, 1.5vw, 22px); color: var(--muted); font-weight: 500; font-stretch: 105%; }
.dark .lede { color: var(--text); opacity: .92; }
.meta {
  margin-top: 26px; display: grid; gap: 14px 28px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding-top: 20px; border-top: 1px solid var(--line);
}
.meta dt { font-family: var(--f-mono); font-stretch: 80%; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.meta dd { margin-top: 4px; font-weight: 600; font-size: 15.5px; }
.meta a { color: var(--copper-hi); text-decoration: none; border-bottom: 1px solid rgba(232, 131, 74, .45); white-space: nowrap; }
.meta a span { font-size: .8em; }
.figs { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.figs li {
  display: grid; gap: 4px; padding: 14px 18px 12px; min-width: 150px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
@media (max-width: 899.98px) { .figs li { flex: 1 1 auto; } }
.figs b { font-stretch: 112%; font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.02em; line-height: 1; }
.figs span { font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; color: var(--muted); }
.cta-row--case { margin-top: 28px; }
/* long project names ("communication") must fit a 360 px phone */
@media (max-width: 519.98px) { .case-head h1 { font-size: clamp(34px, 10.5vw, 44px); overflow-wrap: break-word; } }
/* an opening without a hero visual (while a project's captures are still pending) */
@media (min-width: 1000px) {
  .case-grid--solo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'head copy'; }
  /* a title word of 12 or more letters (set by the build): a smaller h1 so the word fits its column unbroken */
  .case-head--long h1 { font-size: calc(.84 * clamp(44px, 6.4vw, 92px)); }
}

/* the launch film: poster first, plays on tap */
.film-box {
  position: relative; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line-2); background: #0A1424;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02);
}
.film-box img { width: 100%; }
.play {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(11, 13, 16, .72); color: var(--text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 14.5px var(--f-display); white-space: nowrap; cursor: pointer;
}
.play i {
  width: 30px; height: 30px; border-radius: 50%; background: var(--copper); display: grid; place-items: center;
}
.play i::after { content: ''; margin-left: 2px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #15171B; }
.film figcaption { margin-top: 10px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; color: var(--dim); }

/* ------------------------------------------------------------ system map (styles from direction 2, lit stage 1) */
.map-wrap { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 18px; }
@media (min-width: 1000px) { .map-wrap { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } }
.dgm {
  position: relative;
  background-color: var(--bg-2);
  background-image: radial-gradient(circle at 1px 1px, rgba(236, 230, 218, .07) 1px, transparent 0);
  background-size: 20px 20px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px clamp(8px, 1.6vw, 22px) 18px;
}
.dgm-top {
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px;
  font-family: var(--f-mono); font-stretch: 78%; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.dgm-top b { font-weight: 500; color: var(--muted); }
.dgm-ro { color: var(--lime); }
.dgm-box { display: grid; justify-items: center; }
.dgm-svg { display: block; height: auto; overflow: visible; }
.dgm-wide { display: none; width: min(100%, calc(var(--vw) * 1px)); }
.dgm-tall { width: min(100%, 460px); }
@media (min-width: 900px) { .dgm-wide { display: block; } .dgm-tall { display: none; } }
.dgm-svg .band { fill: rgba(236, 230, 218, .015); stroke: var(--line); stroke-dasharray: 2 4; }
.dgm-svg .tl { font: 500 10px var(--f-mono); font-stretch: 80%; fill: var(--dim); letter-spacing: .08em; }
.dgm-svg .n rect { fill: var(--node); stroke: var(--line-2); stroke-width: 1.3; }
.dgm-svg .n .t { font-family: var(--f-display); font-size: 15px; font-weight: 650; fill: var(--text); }
.dgm-svg .n .d { font-family: var(--f-mono); font-size: 10.5px; font-stretch: 75%; fill: var(--muted); }
.dgm-svg .k-work rect { stroke: var(--copper); stroke-width: 1.6; }
.dgm-svg .k-plat rect { stroke: var(--plat); }
.dgm-svg .k-other rect { stroke: var(--sky); stroke-dasharray: 5 4; fill: #121820; }
.dgm-svg .k-other .t { fill: #D5E4EF; }
.dgm-svg .k-people rect { stroke: var(--muted); fill: var(--bg); }
.dgm-svg .wire .w { fill: none; stroke: var(--wire); stroke-width: 1.6; }
.dgm-svg .wire .wh { fill: var(--wire); }
.dgm-svg .wire .wf { fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-dasharray: 3 14; opacity: 0; }
.dgm-svg .mk circle { fill: var(--lime); stroke: var(--bg-2); stroke-width: 3; }
.dgm-svg .mk text { font: 700 11.5px var(--f-mono); fill: var(--ink); text-anchor: middle; }
@keyframes flow { to { stroke-dashoffset: -34; } }

.stages { display: grid; gap: 8px; }
.stages li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  color: var(--muted); font-size: 14.5px; line-height: 1.35;
}
.stages li span {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11.5px var(--f-mono); background: var(--panel); border: 1px solid var(--line-2);
}
.stages li b { display: block; color: var(--text); font-weight: 650; }
.stages li small { display: block; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.stages li.is-cur { border-color: var(--lime); color: var(--text); }
.stages li.is-cur span { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.stages-note { margin-top: 12px; padding: 0 2px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; line-height: 1.5; color: var(--dim); }

/* phone: fixed book bar on case pages */
.book-bar { display: none; }
@media (max-width: 899.98px) {
  .book-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: rgba(11, 13, 16, .9); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-family: var(--f-mono); font-stretch: 80%; font-size: 12px; color: var(--muted);
  }
  .case-open { padding-bottom: 110px; }
}

/* ============================================================ PART 2: the site */

/* ------------------------------------------------------------ tokens the mockup left to the dark theme */
:root {
  --panel: #FBF8F2;
  --line: var(--rule);
  --line-2: #CBC2B0;
  --bg-2: var(--paper-2);
  --dim: #555A63;
  --err: #A8321F;
  --focus: var(--copper-text);
}
.dark { --err: #FF9A85; --focus: var(--lime); }

/* ------------------------------------------------------------ base and accessibility */
html { scroll-padding-top: calc(var(--hdr) + 16px); }
body { overflow-x: clip; }
button, input, textarea, select { font: inherit; color: inherit; }
h4 { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--copper); color: #15171B;
  padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.dark .skip { background: var(--lime); }
.skip:focus { top: 12px; }
a { text-underline-offset: .18em; }
.tlink { color: var(--copper-text); font-weight: 650; }
.dark .tlink { color: var(--copper-hi); }

/* ------------------------------------------------------------ header: phone menu */
.menu-btn {
  display: none; align-items: center; gap: 9px;
  min-height: 42px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; cursor: pointer;
  font-weight: 650; font-size: 15px; font-stretch: 105%;
}
.dark .menu-btn { border-color: var(--line-2); }
.menu-btn i { display: grid; gap: 4px; width: 16px; }
.menu-btn i::before, .menu-btn i::after { content: ''; height: 2px; border-radius: 2px; background: currentColor; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: translateY(-3px) rotate(-45deg); }
.menu {
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 6px var(--gut) 22px; background: var(--bg);
  border-bottom: 1px solid var(--rule); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, .35);
}
.menu[hidden] { display: none; }
.menu a:not(.btn) {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-weight: 650; font-size: 19px; text-decoration: none;
}
.menu .btn { margin-top: 18px; }
@media (max-width: 899.98px) {
  .js .menu-btn { display: inline-flex; margin-left: auto; }
  .no-js .hdr-book { margin-left: auto; }
  .hdr { gap: 12px; }
}
@media (min-width: 900px) { .menu { display: none !important; } }
@media (max-width: 519.98px) { .js .hdr-book { display: none; } }
@media (max-width: 380px) { .wm { font-size: 17px; } .brand { gap: 8px; } }

/* ------------------------------------------------------------ sections */
.sec { padding: clamp(64px, 9vw, 124px) 0; border-top: 1px solid var(--rule); }
.sec-k {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-stretch: 80%; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
}
.sec-k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); }
.dark .sec-k::before { background: var(--lime); }
.sec-h {
  margin-top: 16px; max-width: 20ch;
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(34px, 4.6vw, 64px); line-height: .96; letter-spacing: -.038em;
  text-wrap: balance;
}
.sec-intro { margin-top: 18px; max-width: 40em; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); }
.dark .sec-intro { color: var(--muted); }
.sub-h { font-weight: 800; font-stretch: 110%; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.025em; line-height: 1.1; }

/* chips: neutral on the light home, lit on the dark case pages */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 9px; border-radius: 999px;
  font-family: var(--f-mono); font-stretch: 80%; font-size: 12px; line-height: 1.2;
  border: 1px solid var(--line-2); color: var(--ink-2);
}
.chips li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--copper); }
.dark .chips li { border-color: rgba(201, 242, 122, .35); color: var(--text); background: rgba(201, 242, 122, .05); }
.dark .chips li::before { background: var(--lime); box-shadow: 0 0 8px rgba(201, 242, 122, .7); }

/* frames for real screens on the dark pages (from direction 2) */
.frame-b {
  background: #1A1F28; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.fb-bar { display: flex; gap: 6px; padding: 8px 10px; background: #1A1F28; border-bottom: 1px solid var(--line); }
.fb-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.frame-b img, .frame-b video { display: block; width: 100%; height: auto; }
.frame-p {
  justify-self: center; width: 100%; max-width: 240px; margin-inline: auto;
  padding: 7px; background: #05070A; border: 1px solid var(--line-2); border-radius: 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.frame-p img { width: 100%; height: auto; border-radius: 23px; }
/* a render or a photo: no device, just the picture */
.frame-r { border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); background: #1A1F28; }
.frame-r img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------ home: selected work */
.work-grid {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr);
}
.wcard {
  position: relative; display: flex; flex-direction: column;
  border-radius: 22px; background: var(--c); color: #fff;
  padding: 24px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .3s var(--ease);
}
/* seven cards. Wide screens: the three desktop products in one row, the four phone apps in the next.
   In between: two to a row, with the lead card laid on its side across the full width. */
@media (min-width: 720px) {
  .work-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wcard { grid-column: span 3; }
  .wcard--lead { grid-column: 1 / -1; }
}
@media (min-width: 720px) and (max-width: 1159.98px) {
  .wcard--lead { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: 28px; }
  .wcard--lead > * { grid-column: 1; }
  .wcard--lead > .frame { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
}
@media (min-width: 1160px) {
  .work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .wcard, .wcard--lead { grid-column: span 4; }
  .wcard--phone { grid-column: span 3; }
}
@media (min-width: 1160px) and (max-width: 1339.98px) { .wcard--phone { padding-inline: 20px; } }
.wcard--light { color: var(--ink); }
.wcard:hover { transform: translateY(-3px); }
.wcard:has(h3 a:focus-visible) { outline: 3px solid var(--copper-text); outline-offset: 3px; }
.wcard h3 a:focus-visible { outline: none; }
.wcard-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
  font-family: var(--f-mono); font-stretch: 80%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .82;
}
.wcard h3 { margin-top: 14px; font-weight: 800; font-stretch: 112%; font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.03em; line-height: 1; }
.wcard h3 a { text-decoration: none; }
.wcard h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.wcard p { margin-top: 10px; font-size: 15.5px; line-height: 1.5; max-width: 34em; }
.wcard-go { margin-top: 14px; font-weight: 700; font-size: 15px; }
.wcard-go span { display: inline-block; transition: transform .25s var(--ease); }
.wcard:hover .wcard-go span { transform: translateX(4px); }
.wcard--phone h3 { font-size: clamp(23px, 1.9vw, 27px); line-height: 1.05; }
/* the screen sits on the card's floor, so a row of cards with different amounts of text still lines up */
.wcard .frame { margin-top: auto; }
.wcard > :nth-last-child(2) { margin-bottom: 24px; }
/* store links: above the card-wide link, so they are clickable on their own */
.wcard .wcard-stores { position: relative; z-index: 3; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.wcard-stores a {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 12px; border-radius: 99px;
  background: #fff; color: #15171B; font-size: 13.5px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease);
}
.wcard-stores a:hover { background: var(--paper); }
.wcard-stores a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wcard-stores a span[aria-hidden] { font-size: .9em; }

/* the quieter row: the SDKs and the unreleased work */
.more { margin-top: clamp(40px, 5vw, 64px); }
.mcard { border-radius: 22px; padding: 24px; background: var(--panel); border: 1px solid var(--rule); min-width: 0; }
.mcard h3 { margin-top: 12px; }
.mcard > p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.mcard-k { font-family: var(--f-mono); font-stretch: 80%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pip-shots { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pip-shots .frame-p { padding: 4px; border-radius: 18px; border-color: #2A2E36; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55); }
.pip-shots .frame-p img { border-radius: 14px; }
.store-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.store-links a { color: var(--copper-text); font-weight: 650; }

/* SDK card: a dark package manifest on the light page */
.sdk-card {
  --bg-2: #101318; --line: #262C36; --line-2: #343C48; --dim: #8A9099; --muted: #A3A8AF; --text: #ECE6DA;
  --lime: #C9F27A; --copper: #E8834A; --copper-hi: #F4A06C; --ink: #0B0D10; --sky: #8DB8DA; --focus: var(--lime);
  background: #15171B; color: var(--text); border-color: #15171B;
}
.sdk-head > p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.sdk-head > p.mcard-k { margin-top: 0; font-size: 11px; }
.sdk-card .mcard-k { color: var(--dim); }
.sdk-card .tlink { color: var(--copper-hi); }
/* two short lines, one per SDK: name, status pill, one sentence */
.sdk-lines { margin-top: 14px; }
/* a small section: the heading on the left, the two SDKs side by side next to it */
@media (min-width: 900px) {
  .sdk-card { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: 0 clamp(28px, 4vw, 56px); align-items: start; }
  .sdk-lines { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 40px); }
  .sdk-lines li { align-content: start; }
}
.sdk-lines li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 14px 0; border-top: 1px dashed var(--line-2); font-size: 14.5px;
}
.sdk-lines b { font-weight: 750; font-size: 16.5px; letter-spacing: -.01em; }
.mf-tag {
  font: 600 10.5px/1 var(--f-mono); font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--copper); padding: 6px 9px; border-radius: 99px; white-space: nowrap; justify-self: end;
}
.sdk-what { grid-column: 1 / -1; color: var(--muted); line-height: 1.5; }
.sdk-what a { color: var(--copper-hi); white-space: nowrap; }

/* built for third parties */
.tp { margin-top: clamp(40px, 5vw, 64px); }
.tp-grid { margin-top: 18px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; border: 1px dashed var(--line-2); }
.tp-card h4 { font-size: 19px; font-weight: 750; font-stretch: 108%; letter-spacing: -.01em; line-height: 1.2; }
.tp-card p { font-size: 15.5px; color: var(--ink-2); }
.tp-card .chips { margin-top: auto; padding-top: 4px; }
.tp-foot { font-size: 14px; font-style: italic; color: var(--dim) !important; }

/* ------------------------------------------------------------ home: how we work */
.how-grid { display: grid; gap: 32px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .how-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; } }
.pipe { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); counter-reset: pipe; }
@media (min-width: 640px) { .pipe { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pipe li {
  position: relative; padding: 16px 14px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--rule);
  font-weight: 650; font-size: 15.5px; line-height: 1.25;
}
.pipe li::before {
  counter-increment: pipe; content: '0' counter(pipe);
  display: block; margin-bottom: 18px;
  font-family: var(--f-mono); font-stretch: 80%; font-size: 11px; color: var(--dim);
}
.pipe li.ai { background: transparent; border: 1px dashed var(--copper); color: var(--copper-text); }
.pipe li.ship { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pipe li.ship::before { color: #A3A8AF; }
.ai-note { margin-top: 18px; padding: 18px 20px; border-left: 3px solid var(--copper); background: var(--panel); border-radius: 0 14px 14px 0; color: var(--ink-2); }
.ai-note b { color: var(--ink); }
/* the three things a senior-plus-AI team changes for the client */
.edge { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .edge { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.edge li {
  padding: 20px 22px 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule);
  font-size: 15.5px; line-height: 1.5; color: var(--ink-2);
}
.edge b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 750; font-stretch: 108%; letter-spacing: -.012em; color: var(--ink); }

/* ------------------------------------------------------------ home: models */
.model-grid { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.model { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: var(--panel); border: 1px solid var(--rule); }
.model-n {
  font-weight: 800; font-stretch: 112%; font-size: 64px; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--copper);
}
.model p { color: var(--ink-2); }
.model .tlink { margin-top: auto; padding-top: 6px; font-size: 15px; }

/* ------------------------------------------------------------ home: who you work with */
.who-grid { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .who-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.who-card { padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--panel); border: 1px solid var(--rule); }
.who-card--bench { background: var(--ink); color: var(--paper); border-color: var(--ink); --focus: var(--copper-hi); }
.who-role { margin-top: 6px; font-family: var(--f-mono); font-stretch: 80%; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.who-card--bench .who-role { color: #A3A8AF; }
.who-card > p { margin-top: 16px; color: var(--ink-2); }
.who-card--bench > p { color: #D9D4CA; }
.record { margin-top: 12px; display: grid; gap: 0; }
.record li { display: grid; gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-2); }
@media (min-width: 640px) { .record li { grid-template-columns: 7.5em minmax(0, 1fr); } }
.record li b { color: var(--ink); font-weight: 650; }
.rec-when { font-family: var(--f-mono); font-stretch: 80%; font-size: 12px; color: var(--dim); padding-top: 3px; }
.rec-h { margin-top: 24px; font-family: var(--f-mono); font-stretch: 80%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.who-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.checks { margin-top: 20px; display: grid; gap: 10px; }
.checks li {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; border: 1px solid #343C48; font-weight: 650;
}
.checks li::before {
  content: ''; width: 28px; height: 28px; border-radius: 50%;
  background: var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ------------------------------------------------------------ home: the founder's track record */
.tr-reach {
  margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.tr-reach li { padding: 18px 14px 18px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.tr-reach li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
.tr-reach li:nth-child(n+3) { border-top: 1px solid var(--rule); }
.tr-reach b {
  display: block; margin-bottom: 6px;
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: clamp(28px, 3vw, 42px); letter-spacing: -.03em; line-height: 1.05; color: var(--ink);
}
@media (min-width: 900px) {
  .tr-reach { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-reach li { padding: 24px 24px 24px 0; }
  .tr-reach li:nth-child(n+3) { border-top: 0; }
  .tr-reach li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
}
.tr-grid, .tr-mini { margin-top: 18px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tr-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(20px, 2.4vw, 28px); border-radius: 22px; background: var(--panel); border: 1px solid var(--rule);
}
.tr-k { font-family: var(--f-mono); font-stretch: 80%; font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.tr-card h3 { margin-top: 12px; }
.tr-mini .sub-h { font-size: clamp(20px, 1.6vw, 23px); }
.tr-card > p:not([class]) { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.tr-fact { margin-top: 16px; padding: 11px 14px; border-left: 3px solid var(--copper); background: var(--paper); border-radius: 0 10px 10px 0; font-size: 15px; color: var(--ink-2); }
.tr-fact b { color: var(--ink); font-weight: 750; }
/* chips sit on the card's floor, so the rows of two cards of different length still line up */
.tr-card .chips { margin-top: auto; padding-top: 18px; }
.tr-note { font-size: 13.5px; color: var(--dim); }
.tr-card > .tr-note { margin-top: 16px; }
.tr-credit { margin-top: 22px; max-width: 62em; font-size: 14px; color: var(--dim); }
/* the three panels of a store listing, joined edge to edge the way the store shows them;
   all three stay whole at every width, phones included, so no screen is ever cut off */
.tr-pano { margin-top: 20px; display: flex; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); }
.tr-pano img { flex: 1 1 0; min-width: 0; width: 33.3333%; height: auto; }
.tr-card--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); --focus: var(--copper-hi); }
.tr-card--dark .tr-k { color: #A3A8AF; }
.tr-card--dark > p:not([class]) { color: #D9D4CA; }
.tr-card--dark .chips li { border-color: #343C48; color: #D9D4CA; }
.tr-card--dark .tr-note { color: #A3A8AF; }
.tr-big {
  margin-top: 18px;
  font-family: var(--f-display); font-stretch: 112%; font-weight: 800;
  font-size: clamp(104px, 13vw, 196px); line-height: .8; letter-spacing: -.05em; color: var(--copper-hi);
}
.tr-card--dark h3 { margin-top: 20px; }
/* 112 has no screens to show, so it runs the full width above the app cards instead of sitting beside one */
.tr-card--wide { margin-top: 18px; }
.tr-wide-b > p:not([class]) { margin-top: 10px; color: #D9D4CA; font-size: 15.5px; }
.tr-wide-b > .tr-note { margin-top: 16px; }
.tr-wide-b { margin-top: 18px; }
@media (min-width: 900px) {
  .tr-card--wide { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 0 clamp(32px, 4.5vw, 72px); align-items: start; }
  .tr-wide-b { margin-top: 0; }
  .tr-wide-b > p:first-child { margin-top: 0; }
  .tr-wide-b .chips { margin-top: 0; }
}
.tr-stats { margin-top: 20px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.tr-stats li { padding: 12px 14px; border-radius: 12px; border: 1px solid #343C48; font-size: 13.5px; line-height: 1.35; color: #D9D4CA; }
.tr-stats b { display: block; margin-bottom: 4px; font-family: var(--f-display); font-stretch: 112%; font-weight: 800; font-size: clamp(24px, 2vw, 28px); letter-spacing: -.02em; color: var(--paper); }
@media (max-width: 519.98px) {
  .tr-stats { grid-template-columns: minmax(0, 1fr); }
  .tr-stats li { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; }
  .tr-stats b { margin-bottom: 0; }
}

/* ------------------------------------------------------------ home: booking form */
.book-grid { display: grid; gap: 32px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .book-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.book-alt { margin-top: 18px; color: var(--ink-2); }
.form {
  display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 22px;
  background: var(--panel); border: 1px solid var(--rule);
}
.field { display: grid; gap: 7px; }
.field label { font-weight: 650; font-size: 15.5px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 11px 13px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink);
  font-size: 16px; line-height: 1.4;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: #A79E8C; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-offset: 1px; border-color: var(--copper-text); }
.field [aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
.hint { font-size: 14px; color: var(--dim); }
.err { font-size: 14.5px; color: var(--err); font-weight: 650; }
.err[hidden] { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-wait { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.form-wait[hidden] { display: none; }
.form-wait .bn-cm { width: 34px; height: 34px; color: var(--ink); }
.form-status { color: var(--ink); font-size: 15px; }
.form-status:empty { display: none; }
.form-status a { color: var(--copper-text); font-weight: 650; }

/* ------------------------------------------------------------ footer */
.ftr { border-top: 1px solid var(--rule); padding: 48px 0 32px; background: var(--paper-2); color: var(--ink-2); }
.dark .ftr { background: var(--bg-2); color: var(--muted); }
.ftr-grid { display: grid; gap: 32px 48px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ftr-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); } }
.ftr-lockup { display: inline-block; }
.ftr-lockup img { width: 160px; height: auto; }
.ftr-contact { margin-top: 16px; display: grid; gap: 6px; font-size: 15.5px; }
.ftr-contact a { color: var(--text); }
.ftr-nav { display: grid; gap: 8px; align-content: start; font-size: 15.5px; }
.ftr-nav a { color: var(--text); text-decoration: none; }
.ftr-nav a:hover { text-decoration: underline; }
.legal { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-content: start; }
.legal dt { font-family: var(--f-mono); font-stretch: 80%; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.legal dd { font-size: 15px; }
/* a two-line value (bank and IBAN) gets a row of its own, after the short ones, so the number never breaks */
.legal .legal-wide { grid-column: 1 / -1; order: 1; }
.ftr-base { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--dim); }
@media (max-width: 899.98px) { .dark .ftr { padding-bottom: 104px; } }
.ftr-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.ftr-links a { color: inherit; }
.ftr-links a:hover { color: var(--text); }

/* ------------------------------------------------------------ language switch */
.lang { display: inline-flex; align-items: center; gap: 2px; flex: none; font-family: var(--f-mono); font-stretch: 80%; font-size: 12.5px; letter-spacing: .06em; }
.lang a, .lang b { display: inline-grid; place-items: center; min-width: 36px; min-height: 30px; padding: 0 8px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.lang b { background: var(--ink); color: var(--paper); }
.dark .lang b { background: var(--text); color: var(--bg); }
.lang a { color: var(--dim); }
.lang a:hover { color: var(--text); }
.menu .lang { margin-top: 20px; }
.menu .lang a:not(.btn) { display: inline-grid; padding: 0 8px; border: 0; font-size: inherit; font-weight: 500; }
@media (max-width: 899.98px) {
  .hdr > .lang { margin-left: auto; }
  .js .hdr > .lang ~ .menu-btn { margin-left: 0; }
  .no-js .hdr > .lang ~ .hdr-book { margin-left: 0; }
}
@media (max-width: 419.98px) { .js .hdr > .lang { display: none; } }

/* ------------------------------------------------------------ text pages: privacy, legal notice, not found */
.doc { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 124px); }
.doc-h {
  margin-top: 16px; max-width: 18ch;
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(34px, 4.6vw, 60px); line-height: .98; letter-spacing: -.038em;
  text-wrap: balance;
}
.doc-lede { margin-top: 20px; max-width: 36em; font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); }
.doc-body { margin-top: clamp(32px, 4vw, 52px); max-width: 44em; line-height: 1.6; color: var(--ink-2); }
.doc-body h2 {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-weight: 800; font-stretch: 110%; font-size: clamp(21px, 1.8vw, 25px); letter-spacing: -.02em; line-height: 1.15;
  color: var(--ink);
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body p, .doc-body ul { margin-top: 14px; }
.doc-body ul { display: grid; gap: 8px; }
.doc-body li { position: relative; padding-left: 22px; }
.doc-body li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); }
.doc-body a { color: var(--copper-text); font-weight: 650; }
.doc-body a[target="_blank"] { white-space: nowrap; }
.doc-facts { margin-top: 18px; border-top: 1px solid var(--rule); }
.doc-facts > div { display: grid; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 600px) { .doc-facts > div { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; } }
.doc-facts dt { font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.doc-facts dd { color: var(--ink); }
.doc-body .doc-date { margin-top: 44px; font-family: var(--f-mono); font-stretch: 80%; font-size: 12.5px; letter-spacing: .04em; color: var(--dim); }
.doc--404 { min-height: 58vh; display: grid; align-items: center; }
.doc--404 .cta-row { margin-top: 30px; }

/* ------------------------------------------------------------ case pages */
.case-open .cta-row--case .btn { min-height: 46px; }
.hero-shot { position: relative; }
.stagebox {
  position: relative; border-radius: var(--r); padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 70% 0%, color-mix(in srgb, var(--c) 42%, transparent), transparent 70%), var(--bg-2);
}
.duo { display: flex; justify-content: center; align-items: flex-start; padding-bottom: 6%; }
.duo .frame-p { flex: none; width: 46%; max-width: 250px; margin: 0; }
/* the two phones stand side by side, stepped but never overlapping, so both screens show whole */
.duo .frame-p + .frame-p { margin-left: 4%; transform: translateY(9%); }
.combo { position: relative; padding: 0 16% 10% 0; }
.combo .frame-p { position: absolute; right: 0; bottom: 0; width: 30%; max-width: 190px; padding: 5px; border-radius: 22px; }
.combo .frame-p img { border-radius: 17px; }
.hero-shot figcaption, .shot figcaption {
  margin-top: 10px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; line-height: 1.45; color: var(--dim);
}
.hero-shot figcaption { margin-top: 12px; }

.brief-grid { display: grid; gap: 18px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .brief-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.brief { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--text); max-width: 36em; }
.case-sec { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.case-sec--tight { padding-top: clamp(40px, 5vw, 64px); }

/* system map section */
.map-sec { position: relative; margin-top: clamp(28px, 4vw, 48px); }
.map-sec .map-wrap { margin-top: 0; }
.legend { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 2px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; color: var(--dim); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 10px; border-radius: 3px; border: 1.5px solid var(--line-2); }
.legend .lg-work { border-color: var(--copper); }
.legend .lg-plat { border-color: var(--plat); }
.legend .lg-other { border-color: var(--sky); border-style: dashed; }
.legend .lg-people { border-color: var(--muted); border-radius: 6px; }
.stages li span { flex: none; }
.dgm-svg .mk.hot circle { fill: #fff; }

/* hard parts */
.hard { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .hard { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hard li {
  position: relative; padding: 22px 22px 24px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line); transition: border-color .25s;
}
.hard li.hot { border-color: var(--lime); }
.hard .hn {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--lime); color: var(--ink); font: 700 13px var(--f-mono);
}
.hard h3 { margin-top: 16px; font-weight: 750; font-stretch: 108%; font-size: 21px; letter-spacing: -.015em; line-height: 1.2; }
.hard p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.hard p b { color: var(--text); font-weight: 600; }

/* real screens: a swipe row on phones, a grid on desktop */
.shots { margin-top: clamp(24px, 3vw, 36px); display: grid; gap: 28px 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.shot { grid-column: span 3; min-width: 0; }
.shot--wide { grid-column: span 6; }
.shot--full { grid-column: 1 / -1; }
.shot--8 { grid-column: span 8; }
.shot--4 { grid-column: span 4; }
/* exactly two phone screens: the usual phone size, centred on the row */
.shots--pair .shot:first-child { grid-column: 4 / span 3; }
@media (max-width: 899.98px) {
  .shots {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 12px;
    scrollbar-width: thin;
  }
  .shot { flex: none; width: min(64vw, 250px); scroll-snap-align: start; }
  .shot--wide, .shot--full, .shot--8, .shot--4.shot--d { width: min(86vw, 600px); }
  .shot--r { width: min(86vw, 600px); }
  .shot .frame-p { max-width: none; }
}
.swipe-hint { display: none; margin-top: 8px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; color: var(--dim); }
@media (max-width: 899.98px) { .swipe-hint { display: block; } }
/* the link under a gallery stands clear of the last caption */
.shots-note { margin-top: clamp(20px, 2.4vw, 30px); font-size: 16px; }

/* a looping film: muted, plays in view when motion is allowed, with a play/pause button */
.loop-box { position: relative; }
.hero-loop video { display: block; width: 100%; height: auto; background: #000; }
.film--loop .loop-btn { left: 16px; bottom: 16px; min-height: 40px; padding: 8px 16px 8px 12px; font-size: 14.5px; }
.film--loop .fb-bar { background: #1A1F28; }
.loop-btn {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 6px 14px 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(11, 13, 16, .75); color: var(--text);
  font: 600 13.5px var(--f-display);
}
.loop-btn i { width: 12px; height: 12px; display: inline-block; }
.loop-btn[data-state="playing"] i { border-left: 4px solid currentColor; border-right: 4px solid currentColor; width: 12px; }
.loop-btn[data-state="paused"] i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.no-js .loop-btn { display: none; }

/* close: chips, role, CTA, previous and next */
.close-grid { display: grid; gap: 24px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .close-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.role-line { margin-top: 16px; color: var(--muted); }
.role-line b { color: var(--text); font-weight: 650; }
.pn { margin-top: 28px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pn a {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line);
  text-decoration: none; background: var(--panel); transition: border-color .2s;
}
.pn a:hover { border-color: var(--copper); }
.pn span { font-family: var(--f-mono); font-stretch: 80%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pn b { font-weight: 700; font-size: 18px; }
.pn a[rel="next"] { text-align: right; }
.back-link { margin-top: 18px; display: inline-block; }

/* the film: poster first, video only after a tap */
.film-box video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film-wait {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px;
  background: rgba(11, 13, 16, .45); color: var(--text); font-family: var(--f-mono); font-stretch: 80%; font-size: 12px;
  pointer-events: none;
}
.film-wait[hidden] { display: none; }
.film-wait .bn-cm { width: 48px; height: 48px; }
.film-err { padding: 18px 20px; font-size: 15px; color: var(--text); }
.film-err a { color: var(--copper-hi); }
.no-js .play { display: none; }
.film-nojs { margin-top: 8px; font-size: 14px; }
.film-nojs a { color: var(--copper-hi); }

/* ------------------------------------------------------------ Comet loader (06c digits, CSS only) */
.bn-cm { display: block; overflow: visible; --c: var(--copper); }
.bn-cm path { fill: currentColor; opacity: 0; }
.bn-cm path.c { fill: var(--c); }
.bn-cm path.on { opacity: 1; }
/* the copper 1 circles the ring; each bit it passes stays a 1 for two steps, then falls back.
   Reduced motion keeps the still mark (the .on paths). */
@media (prefers-reduced-motion: no-preference) {
  .bn-cm .s0 .z { animation: bn-cm-0z 960ms step-end infinite; }
  .bn-cm .s0 .o { animation: bn-cm-0o 960ms step-end infinite; }
  .bn-cm .s0 .c { animation: bn-cm-0c 960ms step-end infinite; }
  .bn-cm .s1 .z { animation: bn-cm-1z 960ms step-end infinite; }
  .bn-cm .s1 .o { animation: bn-cm-1o 960ms step-end infinite; }
  .bn-cm .s1 .c { animation: bn-cm-1c 960ms step-end infinite; }
  .bn-cm .s2 .z { opacity: 0; }
  .bn-cm .s2 .o { animation: bn-cm-2o 960ms step-end infinite; }
  .bn-cm .s2 .c { animation: bn-cm-2c 960ms step-end infinite; }
  .bn-cm .s3 .z { animation: bn-cm-3z 960ms step-end infinite; }
  .bn-cm .s3 .o { animation: bn-cm-3o 960ms step-end infinite; }
  .bn-cm .s3 .c { animation: bn-cm-3c 960ms step-end infinite; }
  .bn-cm .s4 .z { animation: bn-cm-4z 960ms step-end infinite; }
  .bn-cm .s4 .o { animation: bn-cm-4o 960ms step-end infinite; }
  .bn-cm .s4 .c { animation: bn-cm-4c 960ms step-end infinite; }
  .bn-cm .s5 .z { animation: bn-cm-5z 960ms step-end infinite; }
  .bn-cm .s5 .o { animation: bn-cm-5o 960ms step-end infinite; }
  .bn-cm .s5 .c { animation: bn-cm-5c 960ms step-end infinite; }
  .bn-cm .s6 .z { opacity: 0; }
  .bn-cm .s6 .o { animation: bn-cm-6o 960ms step-end infinite; }
  .bn-cm .s6 .c { animation: bn-cm-6c 960ms step-end infinite; }
  .bn-cm .s7 .z { animation: bn-cm-7z 960ms step-end infinite; }
  .bn-cm .s7 .o { animation: bn-cm-7o 960ms step-end infinite; }
  .bn-cm .s7 .c { animation: bn-cm-7c 960ms step-end infinite; }
}
@keyframes bn-cm-0z { 0%{opacity:0}25%{opacity:1}87.5%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-0o { 0%{opacity:1}25%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-0c { 0%{opacity:0}87.5%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-1z { 0%{opacity:0}37.5%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-1o { 0%{opacity:0}12.5%{opacity:1}37.5%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-1c { 0%{opacity:1}12.5%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-2o { 0%{opacity:1}12.5%{opacity:0}25%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-2c { 0%{opacity:0}12.5%{opacity:1}25%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-3z { 0%{opacity:1}25%{opacity:0}62.5%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-3o { 0%{opacity:0}37.5%{opacity:1}62.5%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-3c { 0%{opacity:0}25%{opacity:1}37.5%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-4z { 0%{opacity:1}37.5%{opacity:0}75%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-4o { 0%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-4c { 0%{opacity:0}37.5%{opacity:1}50%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-5z { 0%{opacity:1}50%{opacity:0}87.5%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-5o { 0%{opacity:0}62.5%{opacity:1}87.5%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-5c { 0%{opacity:0}50%{opacity:1}62.5%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-6o { 0%{opacity:1}62.5%{opacity:0}75%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-6c { 0%{opacity:0}62.5%{opacity:1}75%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-7z { 0%{opacity:0}12.5%{opacity:1}75%{opacity:0}100%{opacity:0} }
@keyframes bn-cm-7o { 0%{opacity:1}12.5%{opacity:0}87.5%{opacity:1}100%{opacity:1} }
@keyframes bn-cm-7c { 0%{opacity:0}75%{opacity:1}87.5%{opacity:0}100%{opacity:0} }

/* ------------------------------------------------------------ hero ring (the same mark, home hero)
   Boot once: the copper 1 lays the byte down. Then the mark rests as the logo and the copper 1
   takes a lap every few seconds, flipping each bit it passes. Reduced motion keeps the still mark. */
.bn-ring { display: block; overflow: visible; --c: var(--copper); }
.bn-ring path { fill: currentColor; opacity: 0; }
.bn-ring path.c { fill: var(--c); }
.bn-ring path.on { opacity: 1; }
/* hero-ring:start (generated by tools/hero-ring.mjs, do not edit by hand) */
@media (prefers-reduced-motion: no-preference) {
  .bn-ring .s0 .z { animation: bn-rb-0z 1610ms step-end 1 both, bn-rl-0z 3520ms step-end 1610ms infinite; }
  .bn-ring .s0 .o { animation: bn-rb-0o 1610ms step-end 1 both, bn-rl-0o 3520ms step-end 1610ms infinite; }
  .bn-ring .s0 .c { animation: bn-rb-0c 1610ms step-end 1 both, bn-rl-0c 3520ms step-end 1610ms infinite; }
  .bn-ring .s1 .z { animation: bn-rb-1z 1610ms step-end 1 both, bn-rl-1z 3520ms step-end 1610ms infinite; }
  .bn-ring .s1 .o { animation: bn-rb-1o 1610ms step-end 1 both, bn-rl-1o 3520ms step-end 1610ms infinite; }
  .bn-ring .s1 .c { animation: bn-rb-1c 1610ms step-end 1 both, bn-rl-1c 3520ms step-end 1610ms infinite; }
  .bn-ring .s2 .z { opacity: 0; }
  .bn-ring .s2 .o { animation: bn-rb-2o 1610ms step-end 1 both, bn-rl-2o 3520ms step-end 1610ms infinite; }
  .bn-ring .s2 .c { animation: bn-rb-2c 1610ms step-end 1 both, bn-rl-2c 3520ms step-end 1610ms infinite; }
  .bn-ring .s3 .z { animation: bn-rb-3z 1610ms step-end 1 both, bn-rl-3z 3520ms step-end 1610ms infinite; }
  .bn-ring .s3 .o { animation: bn-rb-3o 1610ms step-end 1 both, bn-rl-3o 3520ms step-end 1610ms infinite; }
  .bn-ring .s3 .c { animation: bn-rb-3c 1610ms step-end 1 both, bn-rl-3c 3520ms step-end 1610ms infinite; }
  .bn-ring .s4 .z { animation: bn-rb-4z 1610ms step-end 1 both, bn-rl-4z 3520ms step-end 1610ms infinite; }
  .bn-ring .s4 .o { animation: bn-rb-4o 1610ms step-end 1 both, bn-rl-4o 3520ms step-end 1610ms infinite; }
  .bn-ring .s4 .c { animation: bn-rb-4c 1610ms step-end 1 both, bn-rl-4c 3520ms step-end 1610ms infinite; }
  .bn-ring .s5 .z { animation: bn-rb-5z 1610ms step-end 1 both, bn-rl-5z 3520ms step-end 1610ms infinite; }
  .bn-ring .s5 .o { animation: bn-rb-5o 1610ms step-end 1 both, bn-rl-5o 3520ms step-end 1610ms infinite; }
  .bn-ring .s5 .c { animation: bn-rb-5c 1610ms step-end 1 both, bn-rl-5c 3520ms step-end 1610ms infinite; }
  .bn-ring .s6 .z { opacity: 0; }
  .bn-ring .s6 .o { animation: bn-rb-6o 1610ms step-end 1 both, bn-rl-6o 3520ms step-end 1610ms infinite; }
  .bn-ring .s6 .c { animation: bn-rb-6c 1610ms step-end 1 both, bn-rl-6c 3520ms step-end 1610ms infinite; }
  .bn-ring .s7 .z { animation: bn-rb-7z 1610ms step-end 1 both, bn-rl-7z 3520ms step-end 1610ms infinite; }
  .bn-ring .s7 .o { animation: bn-rb-7o 1610ms step-end 1 both, bn-rl-7o 3520ms step-end 1610ms infinite; }
  .bn-ring .s7 .c { animation: bn-rb-7c 1610ms step-end 1 both, bn-rl-7c 3520ms step-end 1610ms infinite; }
}
@keyframes bn-rb-0z { 0%{opacity:0}100%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-0z { 0%{opacity:1}84.659%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-0o { 0%{opacity:0}88.199%{opacity:1}100%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-0o { 0%{opacity:0}89.773%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-0c { 0%{opacity:0}77.019%{opacity:1}88.199%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-0c { 0%{opacity:0}84.659%{opacity:1}89.773%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-1z { 0%{opacity:0}30.435%{opacity:1}88.199%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-1z { 0%{opacity:0}64.205%{opacity:1}89.773%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-1o { 0%{opacity:0}22.981%{opacity:1}30.435%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-1o { 0%{opacity:0}53.977%{opacity:1}64.205%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-1c { 0%{opacity:0}16.149%{opacity:1}22.981%{opacity:0}88.199%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-1c { 0%{opacity:1}53.977%{opacity:0}89.773%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-2o { 0%{opacity:0}30.435%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-2o { 0%{opacity:1}53.977%{opacity:0}59.091%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-2c { 0%{opacity:0}22.981%{opacity:1}30.435%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-2c { 0%{opacity:0}53.977%{opacity:1}59.091%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-3z { 0%{opacity:0}47.205%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-3z { 0%{opacity:1}59.091%{opacity:0}74.432%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-3o { 0%{opacity:0}38.509%{opacity:1}47.205%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-3o { 0%{opacity:0}64.205%{opacity:1}74.432%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-3c { 0%{opacity:0}30.435%{opacity:1}38.509%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-3c { 0%{opacity:0}59.091%{opacity:1}64.205%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-4z { 0%{opacity:0}56.522%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-4z { 0%{opacity:1}64.205%{opacity:0}79.545%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-4o { 0%{opacity:0}47.205%{opacity:1}56.522%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-4o { 0%{opacity:0}69.318%{opacity:1}79.545%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-4c { 0%{opacity:0}38.509%{opacity:1}47.205%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-4c { 0%{opacity:0}64.205%{opacity:1}69.318%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-5z { 0%{opacity:0}66.46%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-5z { 0%{opacity:1}69.318%{opacity:0}84.659%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-5o { 0%{opacity:0}56.522%{opacity:1}66.46%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-5o { 0%{opacity:0}74.432%{opacity:1}84.659%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-5c { 0%{opacity:0}47.205%{opacity:1}56.522%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-5c { 0%{opacity:0}69.318%{opacity:1}74.432%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-6o { 0%{opacity:0}66.46%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-6o { 0%{opacity:1}74.432%{opacity:0}79.545%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-6c { 0%{opacity:0}56.522%{opacity:1}66.46%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-6c { 0%{opacity:0}74.432%{opacity:1}79.545%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-7z { 0%{opacity:0}88.199%{opacity:1}100%{opacity:1} }
@keyframes bn-rl-7z { 0%{opacity:1}79.545%{opacity:0}94.886%{opacity:1}100%{opacity:1} }
@keyframes bn-rb-7o { 0%{opacity:0}77.019%{opacity:1}88.199%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-7o { 0%{opacity:0}84.659%{opacity:1}94.886%{opacity:0}100%{opacity:0} }
@keyframes bn-rb-7c { 0%{opacity:0}66.46%{opacity:1}77.019%{opacity:0}100%{opacity:0} }
@keyframes bn-rl-7c { 0%{opacity:0}79.545%{opacity:1}84.659%{opacity:0}100%{opacity:0} }
/* hero-ring:end */

/* ------------------------------------------------------------ motion: the engine's three modes
   html[data-mode] is set by js/site.js: scrub (motion, wide and tall enough), io (motion,
   narrower screens) or static (reduced motion or no JS). The pre-states below only apply
   under .mo, which the head script adds when motion is allowed and js/site.js confirms,
   so a page without JS always shows everything fully assembled. */
.mo .dgm-svg .n {
  opacity: 0; transform: translateY(6px) scale(.96);
  transform-box: fill-box; transform-origin: center;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.mo .dgm-svg .n.on { opacity: 1; transform: none; }
.mo .dgm-svg .wire .w { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease); }
.mo .dgm-svg .wire.on .w { stroke-dashoffset: 0; }
.mo .dgm-svg .wire .wh { opacity: 0; transition: opacity .25s; }
.mo .dgm-svg .wire.on .wh { opacity: 1; transition-delay: .45s; }
.mo .dgm-svg .mk {
  opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center;
  transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.mo .dgm-svg .mk.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .live .dgm-svg .wire.on .wf { opacity: .85; animation: flow 1.3s linear infinite; }
}

/* stage 4 is the hard parts: everything else steps back, the marked nodes light up */
.dgm-svg .n rect, .dgm-svg .n text { transition: fill .4s, stroke .4s; }
[data-stage="4"] .dgm-svg .n:not(.has-mk) rect { stroke: var(--line-2); stroke-dasharray: none; fill: var(--bg-2); }
[data-stage="4"] .dgm-svg .n:not(.has-mk) .t { fill: var(--muted); }
[data-stage="4"] .dgm-svg .n:not(.has-mk) .d { fill: var(--dim); }
[data-stage="4"] .dgm-svg .has-mk rect { stroke: var(--lime); }

.stages li { transition: border-color .3s, color .3s; }
.stages li span { transition: background-color .3s, color .3s, border-color .3s; }
.stages li.is-on span { border-color: var(--lime); color: var(--lime); }
.stages li.is-cur span { color: var(--ink); }

/* scrub: the map section gets four 60vh steps of scroll while its pin holds the map in view */
@media (min-width: 1000px) and (min-height: 560px) {
  [data-mode="scrub"] .map-sec { height: calc(100vh - var(--hdr) + 4 * 60vh); }
  [data-mode="scrub"] .map-pin {
    position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr));
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* blocks that rise in once (io and scrub) */
.mo .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.mo .rv.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ the Weekly Story board, ported from pulsebodyshop.com
   Markup and CSS are Pulse's own (demo shop, "Example report" footer). It is product UI, so it
   keeps Pulse's light palette and system font inside the dark page. Only the reveal is ours. */
.pb-story { margin-top: clamp(24px, 3vw, 36px); --blue: #2a62b6; }
.pb-story .h9-dashboard {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #1e354c; line-height: 1.5; font-stretch: 100%;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.pb-story h3, .pb-story h4, .pb-story p { margin: 0; }
.pb-story figcaption { margin-top: 12px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; color: var(--dim); }

/* the ported Ask Pulse card and chart gallery: Pulse's own rules live in css/pulse-live.css, scoped under .pb-live.
   Both are product UI, so they keep Pulse's light palette and fonts inside the dark page. */
.live-p { margin-top: 14px; max-width: 60ch; color: var(--muted); font-size: 17px; line-height: 1.5; }
.pb-live { margin-top: clamp(24px, 3vw, 36px); min-width: 0; }
.pb-live figcaption, .pb-nojs {
  margin-top: 12px; font-family: var(--f-mono); font-stretch: 80%; font-size: 11.5px; line-height: 1.5; color: var(--dim);
}
.pb-ask .h7-answer-demo { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.pb-wall .pb-charts {
  padding: clamp(14px, 2.4vw, 28px); border-radius: 20px; background: var(--app-bg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.no-js .pb-wall .pb-charts { display: none; }
.ask-grid { display: grid; gap: clamp(8px, 2vw, 20px); }
.ask-qs { margin-top: 20px; display: grid; gap: 8px; justify-items: start; }
.ask-qs li {
  padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 14px 14px 14px 4px;
  font-size: 15px; line-height: 1.35; color: var(--text); background: rgba(255, 255, 255, .03);
}
.ask-qs li:last-child { border-style: dashed; color: var(--muted); }
@media (min-width: 960px) {
  .ask-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .ask-grid .pb-live { margin-top: 0; }
}
/* the film's tall cut on phones: 4:5 poster and video */
@media (max-width: 700px) {
  .film--cuts .film-box video.is-tall { aspect-ratio: 4 / 5; }
}
.h9-dashboard{max-width:1380px;margin:auto;border:1px solid #d8e2ea;border-radius:24px;background:#edf2f6;box-shadow:0 22px 65px -45px #24445e60;overflow:hidden}
.h9-dashboard-bar{height:60px;background:#fcfdfd;border-bottom:1px solid #dce5ed;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;color:#718295;gap:10px}
.h9-dashboard-bar>span:first-child{display:flex;gap:12px;align-items:center}
.h9-dashboard-bar b{color:#214468;font-weight:650}
.h9-dashboard-bar svg{width:19px;height:19px;color:#2a62b6}
.h9-dashboard-bar i{font-style:normal;color:#c1ccd6}
.h9-dashboard-ready{display:flex;align-items:center;gap:6px;font-size:10px}
.h9-dashboard-ready svg{width:15px;height:15px;color:#178458}
.h9-dashboard-body{padding:29px 25px 16px}
.h9-report-heading{display:flex;justify-content:space-between;gap:16px;align-items:end;margin:0 1px 23px}
.h9-report-heading>div>p{font-size:10px;color:#728497;margin-bottom:9px}
.h9-report-heading h3{font-size:24px;letter-spacing:-.03em;color:#1e354c;font-weight:600;line-height:1.2}
.h9-report-heading>p{font-size:11px;color:#75869a;padding-bottom:3px;white-space:nowrap}
.h9-ai-summary{display:flex;align-items:flex-start;gap:20px;background:#fff;border:1px solid #dce5ed;border-radius:16px;padding:25px 27px;box-shadow:0 4px 8px -7px #2a527c20;margin-bottom:23px;position:relative}
.h9-summary-icon{background:#eaf1fb;color:#2a62b6;padding:10px;display:grid;place-items:center;border-radius:12px;flex:none}
.h9-summary-icon svg{width:22px;height:22px}
.h9-ai-summary h4{font-size:10px;color:#567695;letter-spacing:.07em;font-weight:650;margin:3px 0 11px}
.h9-ai-summary p{font-size:16px;line-height:1.75;color:#3c5167;max-width:1130px}
.h9-report-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}
.h9-report-card{min-width:0;padding:20px 17px 16px;background:white;border:1px solid #dce4eb;border-top:3px solid var(--signal-colour);border-radius:15px;box-shadow:0 8px 16px -14px #26435e30;display:flex;flex-direction:column;scroll-margin-top:30px}
.h9-report-card.green{--signal-colour:#178458;--signal-bg:#eaf4ef}
.h9-report-card.amber{--signal-colour:#e3a008;--signal-bg:#fbf2e5}
.h9-report-card.red{--signal-colour:#c34035;--signal-bg:#f9eeec}
.h9-report-card>header{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:16px}
.h9-report-card h4{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:#536277;line-height:1.3}
.h9-info{display:inline-flex;color:#8b95a3;cursor:help}
.h9-info svg{width:14px;height:14px}
.h9-report-status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:550;white-space:nowrap;color:#536277}
.h9-report-card.red .h9-report-status{background:var(--signal-colour);color:#fff}
.h9-report-card.amber .h9-report-status{background:var(--signal-colour);color:#1c1200}
.h9-report-card.green .h9-report-status{padding-inline:0}
.h9-report-status i{width:8px;height:8px;border-radius:50%;background:var(--signal-colour)}
.h9-report-card.red .h9-report-status i,.h9-report-card.amber .h9-report-status i{background:currentColor}
.h9-card-value{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.h9-card-value strong{font-size:31px;line-height:1;letter-spacing:-.03em;font-weight:600;color:#1d3044}
.h9-delta{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;white-space:nowrap;color:#536277;font-variant-numeric:tabular-nums}
.h9-delta>span{font-size:10px;line-height:1}
.h9-card-secondary{font-size:9px;line-height:1.6;color:#6c7e90;min-height:29px;margin-bottom:4px}
.h9-card-secondary b{color:#1d3044;font-weight:500}
@keyframes h9-uncover{from{clip-path:inset(-5% 100% -5% -2%)}to{clip-path:inset(-5% -2% -5% -2%)}}
.h9-group{font-size:9px;line-height:1.5;color:#8293a3;margin-bottom:12px}
.h9-card-narrative{font-size:13px;line-height:1.7;color:#506478;flex:1;margin-bottom:18px}
.h9-report-note{font-size:9px;line-height:1.5;color:#8192a2;text-align:center;margin:16px 0 0}
@media(min-width:1500px){.h9-report-card{padding:23px 20px 18px}.h9-report-card>header{flex-direction:row;justify-content:space-between;align-items:center}.h9-card-value strong{font-size:32px}}
@media(max-width:1150px){.h9-report-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.h9-report-card:last-child{grid-column:1/-1}.h9-report-card:last-child .h9-trend{max-width:380px}.h9-report-card>header{flex-direction:row;justify-content:space-between}.h9-card-narrative{font-size:14px}.h9-secondary-spacer{display:none}.h9-report-card{padding:23px}.h9-card-value strong{font-size:34px}}
@media(max-width:700px){.h9-dashboard{border-radius:19px}.h9-dashboard-bar{padding:0 16px;height:53px;font-size:10px}.h9-dashboard-bar>span:first-child{gap:7px}.h9-dashboard-ready{font-size:8px}.h9-dashboard-ready svg{width:12px;height:12px}.h9-dashboard-body{padding:21px 12px 14px}.h9-report-heading{align-items:start;flex-direction:column;gap:9px;margin:0 4px 20px}.h9-report-heading h3{font-size:23px}.h9-report-heading>p{font-size:10px}.h9-ai-summary{display:block;padding:22px 20px;margin-bottom:17px;border-radius:14px}.h9-summary-icon{display:inline-flex;padding:8px;margin-bottom:12px}.h9-summary-icon svg{width:18px;height:18px}.h9-ai-summary h4{margin:0 0 12px}.h9-ai-summary p{font-size:14px;line-height:1.8}.h9-report-cards{grid-template-columns:1fr;gap:16px}.h9-report-card{padding:22px 20px 18px;border-radius:14px}.h9-report-card:last-child{grid-column:auto}.h9-report-card>header{margin-bottom:20px;align-items:center;gap:9px}.h9-card-value strong{font-size:35px}.h9-delta{font-size:10px;padding:5px 7px}.h9-card-secondary{font-size:10px;min-height:0;margin-bottom:2px}.h9-trend-plot{height:108px}.h9-group{font-size:10px}.h9-card-narrative{font-size:14px;line-height:1.75;margin-bottom:21px}.h9-btn{font-size:13px}.h9-report-note{font-size:8px}}
@media(max-width:360px){.h9-dashboard-bar{padding-inline:12px}.h9-dashboard-ready{font-size:7px}.h9-report-card{padding-inline:17px}.h9-card-value strong{font-size:32px}.h9-card-value{gap:6px}.h9-delta{font-size:9px;padding:4px 5px}.h9-ai-summary{padding:20px 17px}.h9-report-heading h3{font-size:21px}}
.h9-group,.h9-card-secondary{font-size:11px;color:#64768a}
.h9-card-secondary{min-height:35px}
.h9-group{line-height:1.55}
.h9-delta{font-size:11px}
.h9-card-narrative{font-size:14px}
.h9-report-heading>p{color:#61758a}
.h9-report-note{font-size:10px;color:#6c7f92}
.h9-dashboard-ready{font-size:11px;color:#5d7387}
@media(max-width:700px){.h9-dashboard-ready{font-size:9px}.h9-card-secondary{min-height:0}.h9-secondary-spacer{display:none}.h9-report-note{font-size:9px}}
@media(max-width:360px){.h9-dashboard-ready{font-size:8px}.h9-delta{font-size:11px}}
.h9-trend{margin:12px 0 14px;flex:none}
.h9-trend[data-status="green"]{--signal-colour:#178458}
.h9-trend[data-status="amber"]{--signal-colour:#e3a008}
.h9-trend[data-status="red"]{--signal-colour:#c34035}
.h9-trend-caption{font-size:11px;line-height:1.4;color:#64768a;margin:0 0 8px}
.h9-trend-frame{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;container-type:inline-size}
.h9-trend-axis{position:relative;width:3.3em;font-size:10px;line-height:1;color:#64768a;font-variant-numeric:tabular-nums}
.h9-trend-axis i{position:absolute;right:0;transform:translateY(-50%);font-style:normal;white-space:nowrap}
.h9-trend-plot{position:relative;display:block;height:96px;border-left:1px solid #d5dce6;border-bottom:1px solid #d5dce6;outline:0;cursor:crosshair;-webkit-tap-highlight-color:transparent}
.h9-trend-plot:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}
.h9-trend-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.h9-trend-plot .grid{stroke:#e6ebf0;stroke-width:1;vector-effect:non-scaling-stroke}
.h9-trend-plot .line{fill:none;stroke:#17558f;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.h9-trend-tick{position:absolute;top:100%;width:1px;height:4px;background:#7a889b;transform:translateX(-50%)}
.h9-trend-dot{position:absolute;box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #17558f;transform:translate(-50%,-50%);transition:transform .1s}
.h9-trend-dot.end{width:10px;height:10px;border:0;background:var(--signal-colour);box-shadow:0 0 0 2px #fff}
.h9-trend-dates{grid-column:2;position:relative;height:12px;margin-top:8px;font-size:10px;line-height:1;color:#64768a;font-variant-numeric:tabular-nums}
.h9-trend-dates i{position:absolute;top:0;font-style:normal;white-space:nowrap}
.h9-trend-dates .start{left:0}
.h9-trend-dates .end{right:0}
.h9-trend-dates .mid{transform:translateX(-50%)}
.h9-trend-compact{margin:0}
.h9-trend-compact .h9-trend-plot{height:54px}
.h9-trend-compact .h9-trend-axis{width:2.8em;font-size:9px}
.h9-trend-compact .h9-trend-dates{font-size:9px;margin-top:6px}
.h9-trend-compact .h9-trend-dates .mid{display:none}
.h9-trend-compact .h9-trend-dot{width:6px;height:6px;border-width:1.5px}
.h9-trend-compact .h9-trend-dot.end{width:8px;height:8px}
.h9-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.h9-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border:1px solid #d5dce6;border-radius:7px;background:#fff;color:#0b1220;font-size:13px;font-weight:550;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.h9-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.h9-btn-ask{color:#0b6fa3;height:30px;padding:0 11px;font-size:12px}
/* (end of the Pulse CSS) the reveal: cards rise in with Pulse's own --delay, then each trend line draws */
.mo .pb-story .h9-ai-summary, .mo .pb-story .h9-report-card {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--delay, 0ms) + 120ms);
}
.mo .pb-story.in .h9-ai-summary, .mo .pb-story.in .h9-report-card { opacity: 1; transform: none; }
.mo .pb-story .h9-trend-plot svg { clip-path: inset(-5% 100% -5% -2%); }
.mo .pb-story.in .h9-trend-plot svg { animation: h9-uncover 1.1s var(--ease) both; animation-delay: calc(var(--delay, 0ms) + 500ms); }
.mo .pb-story .h9-trend-dot { opacity: 0; transition: opacity .3s; transition-delay: calc(var(--delay, 0ms) + 1.2s); }
.mo .pb-story.in .h9-trend-dot { opacity: 1; }

/* ------------------------------------------------------------ reduced motion: nothing moves, everything is shown */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}