/* 7th Standard — the site layer (revision 9, 19 Oct 2026).
   Loads after design-system/tokens.css and design-system/components/bundle.css and uses their tokens and type classes.
   The whole page is rounded cards on one 12-column grid with the kit gap: every idea sits in a box.
   Revision 9: the hero loops are three cards of their own; the 01 panel answers with what we make (brand mosaics, stepping along)
   and one process picture; the story's cards are lists whose open row is the one on show; the 7 fills its column before Start.
   The 5 × 5 glyph icons are gone (the brand has no icon set): a tile swatch marks each item instead.
   Web extensions to the design system are marked EXT and listed in 03-Website/WEBSITE-README.md. */

/* ---------------------------------------------------------------- site variables */
:root {
  --maxw: 1344px;                       /* content width: 1440 less two 48px margins */
  --pad: var(--space-48);
  --gap: 16px;                          /* the gap between every card on the page */
  --cp: clamp(20px, 2.1vw, 32px);       /* card padding */
  --header-h: 88px;
  --hdr: 72px;                          /* what the floating header takes at the top: 12px + the 60px bar */
  --ease: cubic-bezier(.2, 0, 0, 1);    /* the one easing (brand motion, provisional) */
  --t-state: 300ms;
  --t-arrive: 600ms;
  --line-strong: color-mix(in srgb, var(--text) 24%, transparent);
  --tile-off: color-mix(in srgb, var(--text) 9%, transparent);
  --tile-mid: color-mix(in srgb, var(--text) 30%, transparent);
}
@media (max-width: 1099px) { :root { --pad: var(--space-32); } }
@media (max-width: 859px)  { :root { --hdr: 66px; } }
@media (max-width: 759px)  { :root { --pad: 16px; --gap: 12px; --header-h: 72px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
  overflow-x: clip;
  margin: 0; color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--ground) url("brand/paper-grain-tile-512.webp") 0 0 / 256px 256px;   /* the board-matched grain */
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--cobalt-light); color: var(--ink); }
[hidden] { display: none !important; }
.st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--pad)); margin: 0 auto; padding-inline: var(--pad); }
.st-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--card); padding: 10px 14px;
  border-radius: var(--radius-chip); font: 500 14px/1 var(--font-sans); text-decoration: none; transition: top var(--t-state) var(--ease); }
.st-skip:focus { top: 12px; }
.st-line { display: block; }

/* ---------------------------------------------------------------- the page grid and the card (EXT: everything in a box) */
.st-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.st-grid > * { min-width: 0; grid-column: span 12; }
@media (min-width: 760px) {
  .g-3, .g-4, .g-5, .g-6 { grid-column: span 6; }
  .g-7, .g-8, .g-12 { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .g-3 { grid-column: span 3; } .g-4 { grid-column: span 4; } .g-5 { grid-column: span 5; } .g-6 { grid-column: span 6; }
  .g-7 { grid-column: span 7; } .g-8 { grid-column: span 8; } .g-12 { grid-column: span 12; }
}
.st-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--cp); }
.st-plate { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--cobalt-deep); }

/* ---------------------------------------------------------------- type for the web (EXT: responsive display sizes) */
.st-hero__title { font-size: clamp(40px, 3.9vw + 8px, 78px); line-height: .98; letter-spacing: -.036em; font-weight: 600; }
.st-h2 { font-size: clamp(30px, 2.1vw + 15px, 50px); line-height: 1.04; letter-spacing: -.028em; font-weight: 600; text-wrap: balance; }
.st-h2--xl { font-size: clamp(34px, 2.8vw + 14px, 60px); line-height: 1.0; letter-spacing: -.032em; }
.st-lead { font-size: clamp(18px, .45vw + 14px, 21px); line-height: 1.42; letter-spacing: -.01em; font-weight: 400; text-wrap: pretty; }
.body, .card-body { text-wrap: pretty; }
.card-title { text-wrap: balance; }
.st-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(18px, 2vw, 28px); }
.st-kicker .label { color: var(--text); }
.st-no { width: 28px; height: 28px; border-radius: var(--radius-tile); background: var(--cobalt-deep); color: var(--on-cobalt-deep);
  display: inline-grid; place-items: center; font: 500 10px/1 var(--font-mono); letter-spacing: .04em; flex: none; }

/* ---------------------------------------------------------------- the tile glyph (EXT: small marks drawn on a 5 × 5 tile grid; a web extension, the brand book has no icon set) */
.st-glyph { display: inline-block; width: 18px; height: 18px; flex: none; line-height: 0; }
.st-glyph--lg { width: 30px; height: 30px; }
.st-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; }
.st-glyph .on { fill: var(--accent); }
.st-glyph .off { fill: var(--tile-off); }
.st-sw { width: 12px; height: 12px; border-radius: var(--radius-tile); flex: none; background: var(--accent); }
[data-theme="dark"] .st-no { background: var(--cobalt-light); color: var(--ink); }   /* the light tile on ink, as the logo does */

/* ---------------------------------------------------------------- buttons and small controls (EXT) */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 48px; padding: 0 20px; border-radius: 10.5px;
  font: 500 15px/1 var(--font-sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease), border-color var(--t-state) var(--ease); }
.st-btn--ink { background: var(--text); color: var(--card); }
.st-btn--ink:has(.s7-arrow) { padding-right: 11px; }
.st-btn--ink:hover { background: var(--accent); color: var(--on-cobalt-deep); }
.st-btn--ink .s7-arrow { border-color: transparent; transition: transform var(--t-state) var(--ease); }
.st-btn--ink:hover .s7-arrow { transform: translateX(2px); }
.st-btn--line { border-color: var(--line-strong); color: var(--text); background: transparent; }
.st-btn--line:hover, .st-btn--line[aria-expanded="true"] { border-color: var(--text); }
.st-btn--sm { height: 38px; padding: 0 15px; font-size: 14px; border-radius: 8.4px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.st-ctl { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; font: 500 13px/16px var(--font-sans); color: var(--text); border-radius: 6px; white-space: nowrap; }
.st-ctl:not(.st-ctl--toggle):hover, .st-ctl--toggle:hover .st-ctl__text { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.st-ptile { width: 26px; height: 26px; border-radius: var(--radius-tile); background: var(--text); display: inline-grid; place-items: center; flex: none; transition: background-color var(--t-state) var(--ease); }
.st-ptile::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--card); }
.is-playing .st-ptile::before { width: 9px; height: 10px; margin: 0; border: 0; background: linear-gradient(90deg, var(--card) 0 3px, transparent 3px 6px, var(--card) 6px 9px); }
.st-ctl--toggle:hover .st-ptile { background: var(--accent); }
.st-replay { color: var(--text-muted); display: none; }          /* the chart repeats by itself (revision 22) */
.st-replay:hover { color: var(--text); }

/* ---------------------------------------------------------------- header: one floating box (EXT) */
.st-header { position: sticky; top: 0; z-index: 50; padding-top: 12px; }
.st-bar { display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 10px 0 22px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; transition: border-color var(--t-state) var(--ease); }
.st-header.is-scrolled .st-bar { border-color: var(--line-strong); }
.st-brand { display: block; padding: 6px 0; margin-right: auto; }
.st-brand img { height: 15px; width: auto; }
.st-nav ul { display: flex; gap: 28px; }
.st-nav a { display: inline-block; padding: 6px 0 4px; text-decoration: none; color: var(--text); transition: box-shadow var(--t-state) var(--ease); }
.st-nav a:hover { box-shadow: inset 0 -2px 0 var(--line-strong); }
.st-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }
.st-season { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px 0 9px; border-radius: 8px; background: color-mix(in srgb, var(--cobalt-light) 26%, transparent);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.st-season__tile { width: 9px; height: 9px; border-radius: var(--radius-tile); background: var(--cobalt-deep); flex: none; animation: st-breathe 2.8s var(--ease) infinite; }
@keyframes st-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.st-menu-btn { display: none; height: 38px; padding: 0 10px; color: var(--text); }
.st-menu { margin-top: 8px; padding: 6px 20px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.st-menu ul li + li { border-top: 1px solid var(--line); }
.st-menu a { display: block; padding: 14px 0; font: 600 20px/24px var(--font-sans); letter-spacing: -.01em; text-decoration: none; }
@media (max-width: 1099px) { .st-season__long { display: none; } .st-nav ul { gap: 22px; } .st-bar { gap: 18px; } }
@media (max-width: 859px) { .st-nav, .st-bar__cta { display: none; } .st-menu-btn { display: inline-flex; align-items: center; } .st-bar { gap: 10px; padding-left: 16px; height: 54px; } }
@media (min-width: 860px) { .st-menu { display: none !important; } }
@media (max-width: 380px) { .st-season { padding: 0 8px; letter-spacing: .08em; } }

/* ---------------------------------------------------------------- reveal and entrance (rise, settle, fade) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-arrive) var(--ease), transform var(--t-arrive) var(--ease); transition-delay: var(--rd, 0ms); }
.js .st-hero [data-reveal] { transform: translateY(24px); transition-duration: 800ms; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- hero (EXT: fits one screen from 1100px wide) */
.st-hero { padding-top: 16px; }
.st-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.st-hero__grid > * { grid-column: 1 / -1; min-width: 0; }
.st-hero__head { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(18px, 2vw, 26px); padding: clamp(24px, 3vw, 44px); }
.st-hero__main { flex: 1 1 auto; display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: start; gap: clamp(14px, 1.6vw, 20px); }
.st-hero__main .st-actions { align-self: end; }
.st-hero__lead { max-width: 600px; }
.st-hero__main .st-actions { margin-top: clamp(4px, .8vw, 10px); }
.st-hero__plate { min-height: 220px; }
.st-hero__low, .st-hero__pillars { display: grid; gap: var(--gap); }
.st-pillar { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 1.6vw, 22px); }
.st-pillar__head { display: flex; align-items: center; gap: 12px; }
.st-pillar .card-body { font-size: 14px; line-height: 20px; }
.st-pillar--mint { --deep: var(--mint-deep); }
.st-pillar--peach { --deep: var(--peach-deep); }
.st-pillar__tile { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.st-pillar .st-glyph .on { fill: var(--deep, var(--accent)); }
.st-pillar .st-glyph .off { fill: color-mix(in srgb, var(--text) 12%, transparent); }
/* each example is its own small box, marked with its tile glyph in the pillar's colour */
.st-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.st-ex li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px 6px 9px; border-radius: 9px; background: color-mix(in srgb, var(--text) 5%, transparent);
  font: 500 14px/18px var(--font-sans); letter-spacing: -.003em; }
.st-ex .st-glyph { width: 16px; height: 16px; }
/* three loops, each its own card, shown whole (the loops are 4:5, so nothing is cropped) */
.st-hero__reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.st-hero__reels .st-vcard { border-radius: var(--radius-card); }

@media (min-width: 1100px) {
  .st-hero__grid {
    --n: 2; --rc: 7;                                                       /* loops on show; columns they may take */
    --W: min(calc(100vw - 2 * var(--pad)), var(--maxw));
    --avail: calc(100vh - var(--hdr) - 32px);
    --cardH: min(calc(((var(--W) + var(--gap)) * var(--rc) / 12 - var(--gap) * var(--n)) / var(--n) * 1.25), calc(var(--avail) * .5));   /* site.js refines this */
    min-height: clamp(560px, var(--avail), calc(var(--cardH) + var(--gap) + 420px));
    grid-template-rows: 1fr auto;
  }
  @supports (height: 100svh) { .st-hero__grid { --avail: calc(100svh - var(--hdr) - 32px); } }
  .st-hero__head { grid-column: span 8; padding: clamp(22px, 3.4vh, 40px) clamp(24px, 2.6vw, 40px); }
  .st-hero__head { gap: clamp(16px, 2.6vh, 28px); }
  .st-hero__main { gap: clamp(12px, 1.9vh, 20px); }
  .st-hero__head .st-hero__title { font-size: clamp(40px, min(3.9vw + 8px, 7.4vh), 78px); }
  .st-hero__head .st-lead { font-size: clamp(17px, .3vw + 13px, 20px); }
  .st-hero__plate { grid-column: span 4; min-height: 0; }
  .st-hero__low { display: flex; align-items: flex-start; min-height: var(--cardH); }
  /* the two pillar cards share exactly the height of the loop cards beside them, top and bottom */
  .st-hero__pillars { flex: 1 1 0; min-width: 0; height: var(--cardH); display: flex; flex-direction: column; }
  .st-pillar { flex: 1 1 0; min-height: 0; gap: 6px; padding: 16px 18px; justify-content: flex-start; }
  .st-pillar__head { gap: 10px; }
  .st-pillar__tile { width: 34px; height: 34px; border-radius: 9px; }
  .st-pillar .card-title { font-size: 20px; line-height: 24px; }
  .st-pillar .card-body { font-size: 13.5px; line-height: 19px; }
  .st-ex { padding-top: 2px; }
  .st-ex li { min-height: 30px; padding: 5px 11px 5px 8px; font-size: 13.5px; }
  .st-hero__reels { display: flex; flex: none; }
  .st-hero__reels .st-vcard { width: calc(var(--cardH) * .8); height: var(--cardH); aspect-ratio: auto; }
  .st-hero__reels .st-vcard--third { display: none; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .st-hero__head .st-btn { height: 42px; padding: 0 16px; font-size: 14.5px; gap: 12px; }
  .st-hero__head .st-btn--ink:has(.s7-arrow) { padding-right: 9px; }
}
@media (min-width: 1100px) and (max-height: 720px) {      /* short laptop screens: everything a notch tighter so the hero still fits */
  .st-hero__head { padding-top: 18px; padding-bottom: 18px; }
  .st-hero__head .st-hero__title { font-size: clamp(36px, min(3.9vw + 8px, 6.8vh), 78px); }
  .st-pillar { padding: 12px 16px; gap: 4px; }
  .st-pillar__tile { width: 30px; height: 30px; border-radius: 8px; }
  .st-pillar .card-title { font-size: 18px; line-height: 22px; }
  .st-pillar .card-body { font-size: 13px; line-height: 18px; }
  .st-ex li { min-height: 26px; padding: 4px 10px 4px 7px; font-size: 13px; line-height: 17px; }
  .st-ex .st-glyph { width: 14px; height: 14px; }
}
@media (min-width: 1360px) { .st-hero__grid { --n: 3; --rc: 8; } .st-hero__reels .st-vcard--third { display: block; } }
/* site.js picks three or two cards for the screen */
.st-hero__grid[data-n="2"] .st-hero__reels .st-vcard--third { display: none; }
.st-hero__grid[data-n="3"] .st-hero__reels .st-vcard--third { display: block; }
@media (min-width: 760px) and (max-width: 1099px) {
  .st-hero__low { display: contents; }
  .st-hero__plate { grid-column: span 5; min-height: 0; }
  .st-hero__pillars { grid-column: span 7; }
  .st-hero__reels { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .st-hero__plate { min-height: 0; aspect-ratio: 16 / 7; order: -1; }
  .st-hero__head .st-actions .st-btn { flex: 1 1 auto; padding: 0 12px; font-size: 14px; gap: 10px; height: 46px; }
  .st-hero__head .st-actions .st-btn--ink:has(.s7-arrow) { padding-right: 8px; }
  .st-hero__reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .st-hero__reels::-webkit-scrollbar { display: none; }
  .st-hero__reels .st-vcard { flex: 0 0 76%; scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- the pavilion plate (EXT: builds itself, tilts and lifts, peach tile reveal, colourway turn) */
.st-hero__plate { background: var(--pav-bg, var(--cobalt-deep)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.st-pav { position: absolute; inset: 0; transform: perspective(900px) translateY(var(--ly, 0%)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(var(--ts, 1)); transform-origin: 50% 64%; }
.st-pav__img, .st-pav__svg { position: absolute; left: -2%; width: 104%; max-width: none; bottom: -1px; height: auto; }
.st-pav__svg { overflow: visible; opacity: 0; }
.st-pav__svg.is-on { opacity: 1; }
.st-pav.has-svg .st-pav__img { display: none; }
.st-pav__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 759px) { .st-pav__img, .st-pav__svg { left: 8%; width: 84%; } }
/* piece by piece: the steps rise, the columns grow from them, the entablature and cornice settle, the dome comes up last */
.st-pav__svg g { transform-box: fill-box; transition: transform 1000ms var(--ease), opacity 700ms var(--ease); }
.st-pav__svg .pv-col { transform-origin: 50% 100%; transition-delay: calc(380ms + var(--i, 0) * 110ms); }
.st-pav__svg .pv-step { transition-delay: calc(var(--i, 0) * 120ms); }
.st-pav__svg .pv-cella, .st-pav__svg .pv-under { transition-delay: 520ms; }
.st-pav__svg .pv-ent { transition-delay: 820ms; }
.st-pav__svg .pv-cor { transition-delay: 920ms; }
.st-pav__svg .pv-dome { transition-delay: 1080ms; transition-duration: 1300ms; }
.st-pav:not(.is-built) .pv-step { transform: translateY(70px); opacity: 0; }
.st-pav:not(.is-built) .pv-col { transform: scaleY(0); }
.st-pav:not(.is-built) .pv-cella, .st-pav:not(.is-built) .pv-under { opacity: 0; }
.st-pav:not(.is-built) .pv-ent, .st-pav:not(.is-built) .pv-cor { transform: translateY(-90px); opacity: 0; }
.st-pav:not(.is-built) .pv-dome { transform: translateY(150px); opacity: 0; }
.st-pav.is-settled .st-pav__svg g { transition-delay: 0ms; }

/* ---------------------------------------------------------------- video cards (EXT: each loop is its own card; no controls on show) */
.st-vcard { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--window); isolation: isolate; cursor: pointer; }
.st-vcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--window); }
.st-vcard:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.st-vcard__state { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: 30px; height: 30px; border-radius: var(--radius-tile); background: var(--white); display: grid; place-items: center;
  opacity: 0; transform: scale(.85); transition: opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.st-vcard__state::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--ink); }
.st-vcard.is-playing .st-vcard__state::before { width: 9px; height: 10px; margin: 0; border: 0; background: linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px, var(--ink) 6px 9px); }
.st-vcard.is-held .st-vcard__state, .st-vcard:focus-visible .st-vcard__state { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- sections and their header card */
.st-section { padding-top: clamp(64px, 6.5vw, 104px); }
.st-sechead { display: grid; padding: clamp(24px, 3vw, 44px); }
.st-sechead .st-h2 { max-width: 900px; }
.st-sechead__sub { margin-top: 16px; max-width: 640px; }
@media (min-width: 1100px) {
  .st-sechead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
  .st-sechead .st-kicker { grid-column: 1 / -1; }
  .st-sechead__sub { margin-top: 0; justify-self: end; }
}
.st-mini { display: flex; flex-direction: column; gap: 6px; }
.st-mini .st-glyph { margin-bottom: 8px; }

/* ---------------------------------------------------------------- the tile field (EXT) */
.st-field { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.st-field__top { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-field__read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.st-field__share { font-size: clamp(28px, 1.6vw + 14px, 44px); line-height: 1; font-weight: 600; letter-spacing: -.028em; transition: opacity 300ms var(--ease); }
.st-field__year { padding: 6px 8px 5px; border-radius: 7px; background: color-mix(in srgb, var(--text) 7%, transparent);
  font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--text); font-variant-numeric: tabular-nums; align-self: center; }
.st-field__what { font-size: 15px; line-height: 20px; color: var(--text-muted); margin-top: -4px; }
.st-field__grid { --cols: 32; --g: 4px; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--g); container-type: inline-size; }
.st-field__grid > i { aspect-ratio: 1; border-radius: var(--radius-tile); background: var(--tile-off); transition: background-color 420ms var(--ease), transform 600ms var(--ease); }
.st-field__grid > i.is-slop { background: var(--tile-mid); }
.st-field__grid > i.is-cream { background: var(--cobalt-deep); transform: translateY(-14%) scale(1.18); position: relative; z-index: 2; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--cobalt-deep) 70%, transparent); }
/* the attention window, muted: the cream is the point */
.st-field__win { --c0: 13; --r0: 2; --cw: 6; --rh: 5; position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--c0) * (100cqw + var(--g)) / var(--cols) - 5px); top: calc(var(--oy, 0px) + var(--r0) * (100cqw + var(--g)) / var(--cols) - 5px);
  width: calc(var(--cw) * (100cqw + var(--g)) / var(--cols) - var(--g) + 10px); height: calc(var(--rh) * (100cqw + var(--g)) / var(--cols) - var(--g) + 10px);
  border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent); border-radius: 12px; }
.st-field__win span { position: absolute; left: -1px; bottom: calc(100% + 6px); white-space: nowrap; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--card); color: var(--text-muted); padding: 4px 6px; border-radius: 5px; }
.st-field__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: auto; }
.st-key { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px var(--font-sans); }
.st-sw { width: 12px; height: 12px; border-radius: var(--radius-tile); flex: none; }
.st-sw--slop { background: var(--tile-mid); } .st-sw--cream { background: var(--cobalt-deep); }
.st-field__src { margin-left: auto; }
@media (max-width: 759px) { .st-field__grid { --cols: 16; --g: 3px; } .st-field__win { --cw: 5; --rh: 4; } .st-field__src { margin-left: 0; width: 100%; } }
@media (min-width: 760px) and (max-width: 1099px) { .st-field__grid { --cols: 28; } }

/* ---------------------------------------------------------------- 01 why now (EXT: one box; on desktop it holds still while you scroll, then turns cobalt) */
.st-why__box { container-type: inline-size; display: grid; gap: clamp(20px, 2.4vw, 32px); padding: clamp(24px, 3vw, 44px); --bpx: clamp(24px, 3vw, 44px);
  transition: background-color 600ms var(--ease), border-color 600ms var(--ease), color 600ms var(--ease); }
.st-why__intro { display: grid; align-content: start; }
.st-why__h { max-width: 760px; }
.st-why__cobalt { display: none; }
/* the answer: in the column, one cobalt card holding the line, the cards and the picture */
.st-why__after { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: 20px; background: var(--cobalt-deep); color: var(--white); }
.st-why__rise { max-width: 760px; color: var(--white); }
.st-why__make { display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; }
/* what we make: full-bleed ink cards; the picture fills each card and the words sit on a shade at its foot (EXT: the media card, on ink) */
.st-make__rail { position: relative; min-width: 0; }
.st-make__strip { display: flex; gap: var(--gap); }
.st-mcard { position: relative; flex: none; width: var(--mw, 100%); aspect-ratio: var(--mr, 4 / 3); border-radius: 16px; background: var(--window); color: var(--white); overflow: hidden; container-type: inline-size; isolation: isolate;
  transition: box-shadow 420ms var(--ease); }
.st-mcard__win { position: absolute; inset: 0; background: var(--window); }
.st-mcard__win canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform 700ms var(--ease); }
.st-mcard__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 2px; padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(18, 18, 18, .94), rgba(18, 18, 18, .66) 52%, rgba(18, 18, 18, 0)); transition: padding 420ms var(--ease); }
.st-mcard__title { display: flex; align-items: center; gap: 9px; font-size: clamp(15px, 5.2cqw, 19px); line-height: 1.2; letter-spacing: -.012em; font-weight: 600; }
.st-mcard__title .st-glyph { width: 16px; height: 16px; }
.st-mcard__title .st-glyph .on { fill: var(--white); }
.st-mcard__title .st-glyph .off { fill: color-mix(in srgb, var(--white) 22%, transparent); }
.st-mcard__desc { font-size: clamp(12.5px, 4cqw, 14px); line-height: 1.4; text-wrap: pretty; color: color-mix(in srgb, var(--white) 72%, transparent); }
.st-mcard:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, .28); }
.st-mcard:hover canvas { transform: scale(1.045); }
.st-mcard:hover .st-mcard__text { padding-bottom: 18px; }
.st-nb { white-space: nowrap; }
@media (max-width: 1099px) {
  .st-make__rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--apx)); padding-inline: var(--apx); scroll-padding-inline: var(--apx); scrollbar-width: none; }
  .st-make__rail::-webkit-scrollbar { display: none; }
  .st-make__rail:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 8px; }
  .st-mcard { --mw: 46%; --mr: 4 / 5; scroll-snap-align: start; }
  .st-why__after { --apx: clamp(20px, 2.4vw, 32px); }
}
@media (max-width: 759px) { .st-mcard { --mw: 68%; } }
/* the column on a wide screen (reduced motion, or a short window): the cards two by two beside the picture */
@media (min-width: 1100px) {
  .st-why:not(.is-scene) .st-why__after { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: start; }
  .st-why:not(.is-scene) .st-why__rise { grid-column: 1 / -1; }
  .st-why:not(.is-scene) .st-make__strip { display: grid; grid-template-columns: 1fr 1fr; }
  .st-why:not(.is-scene) .st-mcard { --mw: auto; --mr: 4 / 3; }
}
/* what makes it stand out: a card on the cobalt; one picture, four parts in turn, the words beside it */
.st-why__how { min-width: 0; }
.st-ing { display: flex; flex-direction: column; gap: 12px; padding: 10px; border-radius: 16px; background: var(--card); color: var(--text); }
.st-ing__vis { container-type: inline-size; padding: 10px; border-radius: 10px; background: var(--ground); overflow: hidden; }
.st-how__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 14px; padding: 2px 8px 8px; }
.st-how__acts { display: grid; }
.st-how__act { grid-area: 1 / 1; display: grid; row-gap: 3px; opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.st-how__act.is-on { opacity: 1; transform: none; }
.st-how__t { font-size: clamp(18px, .5vw + 13px, 22px); line-height: 1.2; letter-spacing: -.015em; font-weight: 600; }
.st-how__p { font-size: clamp(14px, .3vw + 11px, 16px); line-height: 1.4; }
.st-how__dots { display: flex; gap: 5px; padding-top: 8px; }
.st-how__dots li { width: 9px; height: 9px; border-radius: var(--radius-tile); background: var(--tile-off); transition: background-color 320ms var(--ease); }
.st-how__dots li.is-on { background: var(--cobalt-deep); }
.st-why.is-list .st-how__act { grid-area: auto; opacity: 1; transform: none; }
.st-why.is-list .st-how__acts { gap: 10px; }
.st-why.is-list .st-how__dots { display: none; }
.st-why:not(.is-scene) .st-ing__grid { max-width: 560px; margin-inline: auto; }
/* the process picture: one cobalt tile, found, given an angle, rendered, and sent out */
.st-ing__grid { --cols: 10; --rows: 5; --u: calc(100cqw / (var(--cols) + (var(--cols) - 1) * .16)); --g: calc(var(--u) * .16); position: relative;
  height: calc(var(--rows) * var(--u) + (var(--rows) - 1) * var(--g)); }
.st-v { position: absolute; left: calc(var(--x) * (var(--u) + var(--g))); top: calc(var(--y) * (var(--u) + var(--g)));
  width: calc(var(--w, 1) * var(--u) + (var(--w, 1) - 1) * var(--g)); height: calc(var(--h, 1) * var(--u) + (var(--h, 1) - 1) * var(--g));
  border-radius: calc(var(--u) * .22 * var(--r, 1)); background: var(--c, var(--tile-off)); opacity: var(--o, 1); transform: rotate(var(--rot, 0deg)) scale(var(--s, 1));
  transition: left 760ms var(--ease), top 760ms var(--ease), width 760ms var(--ease), height 760ms var(--ease), border-radius 760ms var(--ease),
    background-color 360ms var(--ease), opacity 420ms var(--ease), transform 620ms var(--ease); transition-delay: var(--d, 0ms); }
/* flow mode: the cobalt card rises as it arrives */
.js .st-why:not(.is-scene) .st-why__after { opacity: 0; transform: translateY(22px); transition: opacity var(--t-arrive) var(--ease), transform var(--t-arrive) var(--ease); transition-delay: var(--rd, 0ms); }
.js .st-why:not(.is-scene) .is-in { opacity: 1; transform: none; }

/* scene mode (set by site.js from 1100 × 640 up, without reduced motion) */
.st-why.is-scene { padding-top: clamp(40px, 4vw, 64px); }
.st-why.is-scene .st-why__track { height: var(--trackH, 340vh); }
.st-why.is-scene .st-why__stage { position: sticky; top: calc(var(--hdr) + 12px); height: calc(100vh - var(--hdr) - 28px); }
@supports (height: 100svh) { .st-why.is-scene .st-why__stage { height: calc(100svh - var(--hdr) - 28px); } }
.st-why.is-scene .st-why__box { --bpy: clamp(22px, 3.2vh, 40px); --bpx: clamp(24px, 2.6vw, 40px); height: 100%; overflow: hidden; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--gap); row-gap: clamp(16px, 2.4vh, 28px); padding: var(--bpy) var(--bpx); }
.st-why.is-scene .st-why__intro { grid-column: 1 / 8; grid-row: 1; }
.st-why.is-scene .st-why__intro .st-kicker { position: relative; z-index: 3; }
.st-why.is-scene .st-why__h { max-width: none; position: relative; z-index: 1; }
.st-why.is-scene .st-why__field { grid-column: 1 / -1; grid-row: 1 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: inherit; position: relative; z-index: 1; }   /* under the cobalt layer, outline and all */
.st-why.is-scene .st-field__top { grid-column: 8 / -1; grid-row: 1; align-self: end; align-items: flex-end; text-align: right; padding-left: 24px; }
.st-why.is-scene .st-field__foot { grid-column: 1 / -1; grid-row: 3; margin: 0; }
.st-why.is-scene .st-field__grid { grid-column: 1 / -1; grid-row: 2; height: 100%; align-content: center; --cols: 40; }
.st-why.is-scene .st-replay { display: none; }
/* the cobalt layer: opens from the cream tile, then grows to the whole box */
.st-why.is-scene .st-why__cobalt { display: block; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--cobalt-deep); visibility: hidden; will-change: clip-path; }
/* the answer's parts sit above the layer, placed by site.js: the line where the headline is; the fan and the picture in the band the chart had */
.st-why.is-scene .st-why__after { display: contents; }
.st-why.is-scene .st-why__rise { position: absolute; left: var(--bpx); right: var(--bpx); top: var(--h1Top, 0px); z-index: 3; margin: 0; max-width: none; white-space: nowrap; color: var(--white);
  font-size: min(clamp(30px, 2.1vw + 15px, 50px), 4.4cqw); line-height: 1.04; letter-spacing: -.028em; font-weight: 600; visibility: hidden; pointer-events: none; }
.st-why.is-scene .st-why__make { position: absolute; left: var(--bpx); top: var(--bandTop, 50%); bottom: var(--bpy); width: var(--ansW, 56%); z-index: 3; min-height: 0; visibility: hidden; pointer-events: none; grid-template-rows: minmax(0, 1fr); }
.st-why.is-scene .st-why__how { position: absolute; top: var(--bandTop, 50%); bottom: var(--bpy); right: var(--bpx); left: var(--howLeft, 60%); z-index: 3; visibility: hidden; opacity: 0; }
.st-why.is-scene .is-live { visibility: visible; pointer-events: auto; }
.st-why.is-scene .st-how { height: 100%; min-height: 0; }
.st-why.is-scene .st-ing__vis { flex: 1 1 auto; min-height: 0; display: grid; align-content: center; }
/* the four cards together: two by two, filling the slot */
.st-why.is-scene .st-make__rail.is-grid { height: 100%; }
.st-why.is-scene .st-make__rail.is-grid .st-make__strip { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); height: 100%; }
.st-why.is-scene .st-make__rail.is-grid .st-mcard { width: auto; min-height: 0; aspect-ratio: auto; }
@media (max-height: 760px) { .st-why.is-scene .st-make__rail.is-grid .st-mcard__text { padding: 26px 12px 10px; } .st-why.is-scene .st-make__rail.is-grid .st-mcard:hover .st-mcard__text { padding-bottom: 13px; } }
/* the process card: translucent on the cobalt, its words and tiles white */
.st-why__how .st-ing, .st-why__after .st-ing { background: color-mix(in srgb, var(--white) 10%, transparent); border: 1px solid color-mix(in srgb, var(--white) 26%, transparent); color: var(--white);
  --text: var(--white); --text-muted: color-mix(in srgb, var(--white) 86%, transparent); --cobalt-deep: var(--white); --cobalt-light: color-mix(in srgb, var(--white) 70%, transparent);
  --tile-off: color-mix(in srgb, var(--white) 12%, transparent); --tile-mid: color-mix(in srgb, var(--white) 34%, transparent); }
.st-why__how .st-ing__vis, .st-why__after .st-ing__vis { background: color-mix(in srgb, var(--white) 7%, transparent); }
/* the turn: the whole box cobalt, the words white */
.st-why__box.is-cobalt { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--white); }
.st-why__box.is-cobalt .st-kicker .label { color: var(--white); }
.st-why__box.is-cobalt .st-no { background: var(--white); color: var(--cobalt-deep); }
.st-why__box .st-kicker .label, .st-why__box .st-no { transition: background-color 400ms var(--ease), color 400ms var(--ease); }
@media (max-width: 1279px) { .st-why.is-scene .st-field__grid { --cols: 34; } }

/* ---------------------------------------------------------------- 02 selected work (EXT: the page goes dark; the box breaks out to the full width) */
.st-work { --W: min(calc(100vw - 2 * var(--pad)), var(--maxw)); position: relative; margin-top: clamp(64px, 6.5vw, 104px); color: var(--text);
  /* these mix with --text, so they are worked out again for the dark theme */
  --line-strong: color-mix(in srgb, var(--text) 24%, transparent); --tile-off: color-mix(in srgb, var(--text) 9%, transparent); --tile-mid: color-mix(in srgb, var(--text) 30%, transparent); }
.st-work__bleed { position: absolute; inset: 0; background: var(--window); clip-path: inset(0 var(--bx, var(--pad)) 0 var(--bx, var(--pad)) round var(--br, 28px)); }
.st-work__track, .st-work__after { position: relative; }
.st-work__stage { padding: clamp(48px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); }
.st-work__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gap); }
.st-work__inner > * { grid-column: 1 / -1; min-width: 0; }
.st-work__intro .st-kicker { margin-bottom: 18px; }
.st-work__sub { margin-top: 16px; max-width: 560px; font-size: clamp(16px, .3vw + 13px, 18px); line-height: 1.45; color: var(--text-muted); text-wrap: pretty; }
.st-work__lede { display: grid; align-content: end; }
.st-work__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-work__notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; padding: 14px 16px 14px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.st-work__notes .st-glyph { grid-row: span 2; margin-top: 1px; width: 24px; height: 24px; }
.st-work__notes .card-body { font-size: 13.5px; line-height: 19px; }
@media (max-width: 559px) { .st-work__notes { grid-template-columns: 1fr; } }
.st-work__row { --cardh: min(460px, 64vh); display: grid; gap: var(--gap); }
.st-work__side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; }
.st-work__series { color: var(--text-muted); }

/* the report: pages that turn (EXT) */
.st-report { position: relative; margin: 0; justify-self: start; width: min(100%, 340px); }
.st-report__book { position: relative; aspect-ratio: 845 / 1076; perspective: 1800px; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.st-report__book:focus-visible { outline-offset: 4px; }
.st-report__book img { position: absolute; left: 0; top: 0; width: 90%; height: 100%; object-fit: cover; border-radius: 8px; transform-origin: 0% 50%; backface-visibility: hidden;
  transition: transform 820ms var(--ease), opacity 620ms var(--ease), filter 620ms var(--ease); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); }
.st-report__bar { position: absolute; left: 10px; bottom: 10px; z-index: 300; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--white); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.st-report__btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; transition: background-color var(--t-state) var(--ease); }
.st-report__btn:hover { background: color-mix(in srgb, var(--white) 14%, transparent); }
.st-report__btn:disabled { opacity: .35; cursor: default; background: none; }
.st-report__btn span { width: 8px; height: 8px; border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateX(1.5px) rotate(45deg); }
.st-report__btn--next span { transform: translateX(-1.5px) rotate(-135deg); }
.st-report__count { min-width: 46px; text-align: center; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* the loops and slides: a row of cards (swiped on phones and tablets) */
.st-work__rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 10px;
  scroll-padding-inline: var(--pad); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--white) 25%, transparent) transparent; }
.st-work__strip { display: flex; gap: var(--gap); width: max-content; }
.st-work__strip > li { flex: none; height: var(--cardh); scroll-snap-align: start; }
.st-work__strip .st-vcard { height: 100%; width: auto; }
.st-work__slide { aspect-ratio: 1; }
.st-work__slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
@media (max-width: 759px) { .st-work__row { --cardh: calc((100vw - 2 * var(--pad)) * .78 * 1.25); } .st-report { width: min(78%, 320px); } }
@media (min-width: 760px) and (max-width: 1099px) {
  .st-work__row { --cardh: min(420px, 56vh); grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .st-work__rail { margin-left: 0; padding-left: 0; }
  .st-report { width: calc(var(--cardh) * .785); }
}
@media (min-width: 1100px) {
  .st-work__intro { grid-column: 1 / 7; align-self: end; }
  .st-work__lede { grid-column: 7 / -1; }
  .st-work__row { grid-template-columns: auto minmax(0, 1fr); }
  .st-report { width: calc(var(--cardh) * .785); }
  .st-work__rail { margin-left: 0; padding-left: 0; margin-right: calc(-1 * (100vw - var(--W)) / 2); padding-right: calc((100vw - var(--W)) / 2); scroll-padding-inline: 0; }
}
.st-work__after { padding-bottom: clamp(48px, 5vw, 80px); }
.st-work .st-details__panel { background: var(--card); }

/* scene mode (set by site.js from 1100 × 640 up, without reduced motion): it holds still while the row travels */
.st-work.is-scene .st-work__track { height: var(--trackH, 300vh); }
.st-work.is-scene .st-work__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: calc(var(--hdr) + 28px) 0 28px; }
@supports (height: 100svh) { .st-work.is-scene .st-work__stage { height: 100svh; } }
.st-work.is-scene .st-work__inner { height: 100%; grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(20px, 3vh, 32px); }
.st-work.is-scene .st-work__row { grid-row: 2; display: flex; height: 100%; max-height: 680px; align-self: center; }
.st-work.is-scene .st-report { flex: none; width: auto; height: 100%; }
.st-work.is-scene .st-report__book { height: 100%; width: auto; }
.st-work.is-scene .st-work__side { flex: 1 1 0; min-width: 0; height: 100%; }
.st-work.is-scene .st-work__rail { min-height: 0; height: auto; overflow: hidden; scroll-snap-type: none; padding-bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px); mask-image: linear-gradient(90deg, transparent 0, #000 32px); }
.st-work.is-scene .st-work__strip { height: 100%; padding-left: 16px; will-change: transform; }
.st-work.is-scene .st-work__strip > li { height: 100%; }

/* ---------------------------------------------------------------- project details */
.st-details { display: grid; gap: 12px; justify-items: start; }
.st-details__panel { width: 100%; max-width: 860px; }
.st-ticks { display: grid; gap: 8px; }
.st-ticks li { position: relative; padding-left: 18px; font-size: 14px; line-height: 21px; color: var(--text-muted); }
.st-ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: var(--radius-tile); background: var(--text); }
.st-ticks strong { color: var(--text); }


/* ---------------------------------------------------------------- 03–04 the story, then the campaign (EXT: one box; on desktop it holds still while you scroll) */
.st-story__box { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); padding: clamp(24px, 3vw, 44px);
  transition: background-color 700ms var(--ease), border-color 700ms var(--ease), color 700ms var(--ease); }
.st-story__head .st-kicker { margin-bottom: clamp(14px, 1.6vw, 22px); }
.st-story__kick [data-kick="2"] { display: none; }
.st-story__line { font-size: clamp(24px, calc(100cqw / 27), 54px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; }
.st-story__say[data-tone="cobalt"] { --tone: var(--cobalt-deep); } .st-story__say[data-tone="peach"] { --tone: var(--peach-deep); } .st-story__say[data-tone="mint"] { --tone: var(--mint-deep); }
.st-roll--tone > span { color: var(--tone, var(--cobalt-deep)); }
.st-story__part { display: grid; gap: var(--gap); }
.st-story__part[data-part="2"] { margin-top: clamp(16px, 3vw, 40px); }
/* the rolling words */
.is-cobalt { color: var(--cobalt-deep); } .is-peach { color: var(--peach-deep); } .is-mint { color: var(--mint-deep); }
.st-roll { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; transition: width 560ms var(--ease); }
.st-roll > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; transition: transform 620ms var(--ease), opacity 420ms var(--ease), color 600ms var(--ease); }
.js .st-roll > span:not(.is-on) { opacity: 0; transform: translateY(95%); transition-duration: 620ms, 300ms, 600ms; }
.js .st-roll > span.is-past { transform: translateY(-95%); }
/* phones: the words swap in place and may wrap, instead of rolling in a clipped slot that cannot hold the longest of them */
@media (max-width: 759px) {
  .js .st-roll { display: inline; overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .js .st-roll > span { transition: opacity 320ms var(--ease), color 600ms var(--ease); white-space: normal; }
  .js .st-roll > span:not(.is-on) { display: none; opacity: 0; transform: none; }
  .js .st-roll > span.is-on { display: inline; opacity: 1; transform: none; }
}
.st-story.is-list .st-roll { display: inline; overflow: visible; }
.st-story.is-list .st-roll > span { opacity: 1; transform: none; white-space: normal; }
.st-story.is-list .st-roll > span:not(:last-child)::after { content: " / "; color: var(--text-muted); }

/* the cards: an audience, or what we run for an outcome */
.st-story__cards { display: grid; gap: var(--gap); }
@media (min-width: 1100px) { .st-story__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-aud { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: clamp(20px, 2vw, 28px); border-radius: 20px; overflow: hidden;
  --muted: color-mix(in srgb, currentColor 68%, transparent); --tagline: color-mix(in srgb, currentColor 22%, transparent); --tagbg: color-mix(in srgb, var(--white) 40%, transparent); }
.st-aud--cobalt { background: var(--cobalt-deep); color: var(--white); --tagbg: color-mix(in srgb, var(--white) 12%, transparent); }
.st-aud--peach { background: var(--peach-light); color: var(--ink); }
.st-aud--mint { background: var(--mint-light); color: var(--ink); }
.st-aud .label { color: var(--muted); }
.st-aud .st-aud__who { color: inherit; }
.st-aud__mark { position: absolute; right: clamp(18px, 2vw, 28px); top: clamp(16px, 1.8vw, 24px); height: clamp(84px, 8.4vw, 136px); max-height: 32%; width: auto; pointer-events: none; }
.st-make { position: relative; z-index: 1; }
.st-aud__need { max-width: calc(100% - clamp(84px, 9vw, 136px)); font-size: clamp(22px, 1.1vw + 13px, 32px); line-height: 1.14; letter-spacing: -.02em; font-weight: 500; text-wrap: pretty; }
.st-aud--run .st-aud__need { max-width: none; }
.st-aud__need strong { display: block; font-weight: 650; }
.st-make { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.st-make li { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 14px 7px 11px; border-radius: 10px; background: var(--boxbg);
  font: 500 15px/1.2 var(--font-sans); letter-spacing: -.005em; transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.st-make .st-glyph { width: 18px; height: 18px; }
.st-aud--cobalt { --boxbg: color-mix(in srgb, var(--white) 14%, transparent); }
.st-aud--peach, .st-aud--mint { --boxbg: color-mix(in srgb, var(--white) 45%, transparent); }
.st-aud--cobalt .st-glyph .on { fill: var(--white); } .st-aud--cobalt .st-glyph .off { fill: color-mix(in srgb, var(--white) 20%, transparent); }
.st-aud--peach .st-glyph .on { fill: var(--peach-deep); } .st-aud--mint .st-glyph .on { fill: var(--mint-deep); }
.st-aud--peach .st-glyph .off, .st-aud--mint .st-glyph .off { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.st-make li.is-lit { background: var(--white); color: var(--ink); }
.st-aud--cobalt .st-make li.is-lit .st-glyph .on { fill: var(--cobalt-deep); } .st-aud--cobalt .st-make li.is-lit .st-glyph .off { fill: color-mix(in srgb, var(--ink) 10%, transparent); }

/* the pictures */
.st-story__fig { position: relative; margin: 0; container-type: inline-size; }
.st-proc { display: grid; align-content: center; gap: 10px; }
.st-proc__ill { justify-self: end; }
.st-proc__grid { --cols: 20; --rows: 8; --u: calc(100cqw / (var(--cols) + (var(--cols) - 1) * .16)); --g: calc(var(--u) * .16); position: relative;
  height: calc(var(--rows) * var(--u) + (var(--rows) - 1) * var(--g)); }
.st-proc__zones { position: absolute; inset: 0; pointer-events: none; }
.st-proc__zones span:nth-child(1) { --zx: 0; --zw: 6.4; } .st-proc__zones span:nth-child(2) { --zx: 6.8; --zw: 6.4; } .st-proc__zones span:nth-child(3) { --zx: 13.6; --zw: 6.4; }
.st-proc__zones span { position: absolute; top: 0; bottom: 0; --zb: 3.5%; left: calc(var(--zx) * (var(--u) + var(--g))); width: calc(var(--zw) * var(--u) + (var(--zw) - 1) * var(--g)); padding: calc(var(--u) * .34) calc(var(--u) * .4); border-radius: calc(var(--u) * .45); background: color-mix(in srgb, var(--text) var(--zb), transparent);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.st-proc__zones span.on { --zb: 7%; color: var(--text); }
.st-proc__ghost { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease) 300ms; pointer-events: none; }
.st-proc__ghost.on { opacity: 1; }
.st-proc__ghost .st-t { transition: none; }
.st-t { position: absolute; left: calc(var(--x) * (var(--u) + var(--g))); top: calc(var(--y) * (var(--u) + var(--g)));
  width: calc(var(--w) * var(--u) + (var(--w) - 1) * var(--g)); height: calc(var(--h) * var(--u) + (var(--h) - 1) * var(--g));
  border-radius: calc(var(--u) * var(--tile-corner) * var(--r, 1)); background: var(--c); opacity: var(--o, 1);
  transition-property: left, top, width, height, border-radius, background-color, opacity; transition-duration: 1150ms; transition-timing-function: var(--ease); transition-delay: var(--d, 0ms); }
/* the pieces carry their names in the middle, in a colour that reads on them */
.st-t::after { content: attr(data-l); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2px 4px; text-align: center;
  color: var(--lc, var(--ink)); font: 500 clamp(9px, calc(var(--u) * .42), 13.5px)/1.1 var(--font-sans); letter-spacing: -.005em; opacity: var(--lo, 0);
  transition: opacity 500ms var(--ease) calc(var(--d, 0ms) + 650ms); }
/* the formats cut from the piece carry their names beside them, in the text colour, so no name has to fit inside a small tile */
.st-t[data-side="1"]::after { left: calc(100% + var(--g) * 1.6); right: auto; width: max-content; justify-content: flex-start; padding: 0; color: var(--text); font-size: clamp(9px, calc(var(--u) * .46), 13px); }
@container (max-width: 380px) { .st-t::after { display: none; } }
.st-proc__grid.is-instant .st-t, .st-proc__grid.is-instant .st-t::after { transition: none !important; }

.st-reach, .st-demand { display: grid; align-content: end; gap: 14px; }
.st-vis__axis { display: flex; justify-content: space-between; gap: 12px; }
/* compounding: one piece a month, recognition builds faster */
.st-compound { --H: clamp(140px, 36cqw, 260px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; align-items: end; height: var(--H); }
.st-compound__col { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; height: 100%; }
.st-compound__col i { display: block; width: min(100%, calc((var(--H) - 32px) / 9)); aspect-ratio: 1; flex: none; border-radius: var(--radius-tile); background: var(--cobalt-light);
  transform-origin: 50% 100%; transition: transform 420ms var(--ease), opacity 420ms var(--ease); transition-delay: var(--d, 0ms); }
.st-compound__col i.is-piece { background: var(--cobalt-deep); }
.js .st-compound__col:not(.on) i { opacity: 0; transform: translateY(30%) scale(.6); }
/* test and scale: four angles go out, one wins, it is scaled */
.st-test { --H: min(clamp(140px, 36cqw, 260px), calc((100cqw - 80px) / 2.15)); display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: center; gap: 14px; height: var(--H); }
.st-test__angles { display: grid; grid-template-columns: repeat(2, calc((var(--H) - 12px) / 2.25)); gap: 10px; }
.st-test__angles span { position: relative; aspect-ratio: 1; border-radius: var(--radius-tile); background: color-mix(in srgb, var(--text) 7%, transparent);
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease), opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .st-test:not(.is-out) .st-test__angles span { opacity: 0; transform: scale(.7); }
.st-test__angles span::after { content: attr(data-l); position: absolute; left: 10px; top: 9px; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--text-muted); }
.st-test.is-pick .st-test__angles span:not(.is-win) { opacity: .4; }
.st-test.is-pick .is-win { background: var(--peach-deep); }
.st-test.is-pick .is-win::after { color: var(--ink); }
.st-test__flow { display: flex; justify-content: center; gap: 7px; }
.st-test__flow i { width: 9px; height: 9px; border-radius: var(--radius-tile); background: var(--line-strong); }
.st-test.is-pick .st-test__flow i { background: var(--peach-deep); }
.st-test__out { display: grid; grid-template-columns: repeat(4, calc((var(--H) - 24px) / 3.4)); gap: 7px; }
.st-test__out i { aspect-ratio: 1; border-radius: var(--radius-tile); background: var(--peach-light); transition: transform 380ms var(--ease), opacity 380ms var(--ease); }
.st-test__out i:not(.on) { opacity: 0; transform: scale(.4); }
@container (max-width: 360px) { .st-test { --H: 150px; grid-template-columns: auto auto; justify-content: space-between; } .st-test__flow { display: none; }
  .st-test__angles { grid-template-columns: repeat(2, 54px); } .st-test__out { grid-template-columns: repeat(3, 26px); } }
/* the rising 7: ambition, looking up */
.st-rise { width: 100%; aspect-ratio: 16 / 11; border-radius: 20px; overflow: hidden; }
@media (max-width: 759px) { .st-rise { aspect-ratio: 4 / 5; } }
.st-rise__beams { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2.2%; padding: 0 5%; align-items: end;
  -webkit-mask-image: linear-gradient(0deg, #000 40%, rgba(0, 0, 0, .25) 100%); mask-image: linear-gradient(0deg, #000 40%, rgba(0, 0, 0, .25) 100%); }
.st-rise__beam { position: relative; height: var(--bh, 70%); overflow: hidden; }
.st-rise__beam > span { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: clamp(18px, 2vw, 32px); animation: st-up var(--sp, 9s) linear infinite; animation-delay: var(--dl, 0s); }   /* twice the beam's height, so the loop is seamless */
.st-rise__beam i { display: block; aspect-ratio: 1; border-radius: var(--radius-tile); background: var(--c, var(--cobalt-light)); opacity: var(--o, .55); }
.st-story__fig:not(.is-on) .st-rise__beam > span { animation-play-state: paused; }
@keyframes st-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.st-rise__seven { position: absolute; left: 50%; bottom: 0; height: var(--sz, 90%); width: auto; transform: translate(-50%, var(--up, 0%)); transform-origin: 50% 100%; transition: opacity 600ms var(--ease); }
.st-rise__seven--ink { opacity: 0; }

/* scene mode (set by site.js from 1100 × 640 up, without reduced motion) */
.st-story.is-scene .st-story__track { height: var(--trackH, 600vh); }
.st-story.is-scene .st-story__stage { position: sticky; top: calc(var(--hdr) + 12px); height: calc(100vh - var(--hdr) - 28px); }
@supports (height: 100svh) { .st-story.is-scene .st-story__stage { height: calc(100svh - var(--hdr) - 28px); } }
.st-story.is-scene .st-story__box { height: 100%; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(18px, 3vh, 34px) clamp(24px, 2.6vw, 40px); padding: clamp(22px, 3.2vh, 40px) clamp(24px, 2.6vw, 40px); }
.st-story.is-scene .st-story__part { display: contents; }
.st-story.is-scene .st-story__head { grid-row: 1; grid-column: 1 / -1; }
.st-story.is-scene [data-say="2"] { grid-row: 1; grid-column: 1 / -1; align-self: end; }
.st-story.is-scene .st-story__line { white-space: nowrap; }
.st-story.is-scene .st-story__say { transition: clip-path 760ms var(--ease), opacity 500ms var(--ease); }
.st-story.is-scene .st-story__say:not(.is-on) { clip-path: inset(-10% 100% -10% 0); opacity: 0; }
.st-story.is-scene .st-story__say.is-on { clip-path: inset(-10% -2% -10% 0); }
.st-story.is-scene .st-story__cards { grid-row: 2; grid-column: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; height: var(--rowH, 100%); align-self: center; }
.st-story.is-scene .st-aud__need { font-size: clamp(24px, min(1.5vw + 12px, 4.6vh), 40px); }
.st-story.is-scene .st-aud { grid-area: 1 / 1; min-height: 0; transform: translateY(110%); opacity: 0; transition: transform 760ms var(--ease), opacity 520ms var(--ease), filter 520ms var(--ease); }
.st-story.is-scene .st-aud.is-on { transform: none; opacity: 1; }
.st-story.is-scene .st-aud.is-past { transform: translateY(-4%) scale(.96); opacity: 0; z-index: -1; }
.st-story.is-scene .st-aud.is-gone { transform: translateY(-3%) scale(.92); opacity: 0; }
/* the end of the story: the words and cards step back before the box opens out */
.st-story.is-scene .st-story__kick, .st-story.is-scene .st-story__cards { opacity: calc(1 - var(--away, 0)); }
.st-story.is-scene .st-story__say.is-on { opacity: calc(1 - var(--away, 0)); }
.st-story.is-scene .st-story__box.is-in { transition: background-color 700ms var(--ease), border-color 700ms var(--ease), color 700ms var(--ease); }
.st-story.is-scene .st-story__fig { grid-row: 2; grid-column: 2; min-height: 0; height: var(--rowH, 100%); align-self: center; container-type: size; opacity: 0; visibility: hidden; transition: opacity 520ms var(--ease), visibility 0s linear 520ms; }
.st-story.is-scene { --rowH: min(100%, max(76%, 400px)); }
@media (max-height: 720px) { .st-story.is-scene { --rowH: 100%; } }
.st-story.is-scene .st-story__fig.is-on { opacity: 1; visibility: visible; transition: opacity 520ms var(--ease); }
.st-story.is-scene .st-reach, .st-story.is-scene .st-demand { align-content: center; }
/* each picture is a panel as tall as the card beside it */
.st-story.is-scene :is(.st-reach, .st-demand, .st-rise) { border-radius: 20px; background: color-mix(in srgb, var(--text) 3.5%, transparent); padding: clamp(18px, 2.6vh, 30px) clamp(18px, 2vw, 30px); }
.st-story.is-scene .st-compound { --H: clamp(120px, calc(100cqh - 34px), 460px); }
.st-story.is-scene .st-test { --H: min(clamp(120px, calc(100cqh - 34px), 400px), calc((100cqw - 80px) / 2.15)); }
.st-story:not(.is-scene) .st-rise { width: min(100%, 720px); justify-self: center; }
.st-story.is-scene :is(.st-rise) { background: transparent; }
.st-story.is-scene .st-rise { aspect-ratio: auto; min-height: 0; height: 100%; padding: 0; }   /* the 7's panel keeps the full row; the columns fill it bottom to top */
.st-story.is-scene .st-proc { display: block; }
.st-story.is-scene .st-proc__grid { --u: min(calc(100cqw / 23.04), calc(100cqh / 9.12)); width: calc(var(--cols) * var(--u) + (var(--cols) - 1) * var(--g)); height: 100%; margin-inline: auto; }
.st-story.is-scene .st-proc__ill { position: absolute; right: 14px; bottom: 12px; }
/* the turn: the box goes cobalt as the 7 rises */
.st-story__box.is-cobalt { background: var(--cobalt-deep); border-color: var(--cobalt-deep); color: var(--white); }
.st-story__box.is-cobalt .st-roll > span, .st-story__box.is-cobalt .st-story__line { color: var(--white); }
.st-story__box.is-cobalt .st-kicker .label { color: var(--white); }
.st-story__box[data-tone="peach"] .st-story__kick .st-no { background: var(--peach-deep); color: var(--on-peach-deep); }   /* ink on peach and mint, as the tokens say */
.st-story__box[data-tone="mint"] .st-story__kick .st-no { background: var(--mint-deep); color: var(--on-mint-deep); }
.st-story__kick .st-no { transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.st-story__box.is-cobalt .st-no { background: var(--white); color: var(--cobalt-deep); }
.st-story__box.is-cobalt .st-rise { background: transparent; overflow: visible; }
.st-story.is-scene .st-story__box.is-cobalt .st-story__fig { overflow: visible; }
.st-story.is-scene .st-rise__beams { transition: top 800ms var(--ease), bottom 800ms var(--ease); }
.st-story.is-scene .st-story__box.is-cobalt .st-rise__beams { top: calc(-1 * var(--headH, 120px)); bottom: calc(-1 * var(--padB, 40px)); -webkit-mask-image: none; mask-image: none; }
.st-story.is-scene .st-rise__seven { transition: opacity 600ms var(--ease), transform 800ms var(--ease), bottom 800ms var(--ease); }
.st-story.is-scene .st-story__box.is-cobalt .st-rise__seven { bottom: calc(-1 * var(--padB, 40px)); transform: translate(-50%, var(--up, 0%)) scale(var(--big, 1.2)); }
.st-story__box.is-cobalt .st-rise__seven { opacity: 0; }
.st-story__box.is-cobalt .st-rise__seven--ink { opacity: 1; }
.st-story__box[data-part-on="2"] [data-kick="1"] { display: none; }
.st-story__box[data-part-on="2"] [data-kick="2"] { display: inline-grid; }
.st-story__box[data-part-on="2"] .label[data-kick="2"] { display: inline; }
@media (min-width: 760px) and (max-width: 1099px) { .st-story__part[data-part="2"] .st-reach, .st-story__part[data-part="2"] .st-demand { grid-column: auto; } }
@media (min-width: 760px) { .st-story:not(.is-scene) .st-story__part[data-part="2"] { grid-template-columns: 1fr 1fr; } .st-story:not(.is-scene) .st-story__part[data-part="2"] > :is(.st-story__say, .st-story__cards, .st-rise) { grid-column: 1 / -1; } }
.st-story:not(.is-scene) .st-story__say[data-say="2"] { margin-bottom: 8px; }

/* ---------------------------------------------------------------- 05 start: inside the story box (EXT) */
.st-story__cta { position: relative; color: var(--white);
  --text: var(--white); --text-muted: color-mix(in srgb, var(--white) 74%, transparent); --line: color-mix(in srgb, var(--white) 22%, transparent);
  --line-strong: color-mix(in srgb, var(--white) 40%, transparent); --focus: var(--white); --accent: var(--white); }
.st-story:not(.is-scene) .st-story__cta { border-radius: 20px; background: var(--cobalt-deep); }
.st-cta { position: relative; display: grid; gap: clamp(18px, 2.6vh, 30px); padding: clamp(24px, 3vw, 44px); }
.st-cta:focus { outline: none; }
.st-cta__title { font-size: clamp(34px, 3vw + 12px, 76px); line-height: .98; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; }
.st-cta__say { margin-top: clamp(8px, 1.2vw, 14px); font-size: clamp(34px, 3vw + 12px, 76px); line-height: .98; letter-spacing: -.04em; font-weight: 400; color: color-mix(in srgb, var(--white) 62%, var(--cobalt-light)); text-wrap: balance; }
.st-cta__kick { margin-bottom: 0; }
.st-story__cta .st-no { background: var(--white); color: var(--cobalt-deep); }
.st-cta__offers { display: grid; gap: 12px; }
.st-story__cta .st-offer { display: flex; align-items: center; gap: 18px; padding: clamp(18px, 1.8vw, 24px); border-radius: 18px; background: var(--white); color: var(--ink); text-decoration: none;
  transition: transform var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
.st-story__cta .st-offer:hover { transform: translateY(-2px); }
.st-story__cta .st-offer:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.st-offer__text { display: grid; gap: 4px; flex: 1; }
.st-story__cta .st-offer .card-body { color: color-mix(in srgb, var(--ink) 66%, transparent); }
.st-story__cta .st-offer .s7-arrow { background: var(--ink); color: var(--white); border-color: var(--ink); transition: transform var(--t-state) var(--ease); }
.st-story__cta .st-offer:hover .s7-arrow { transform: translateX(2px); }
/* the second call: the same box, a quieter weight */
.st-story__cta .st-offer--line { background: color-mix(in srgb, var(--white) 13%, transparent); color: var(--white); }
.st-story__cta .st-offer--line .card-body { color: color-mix(in srgb, var(--white) 88%, transparent); }
.st-story__cta .st-offer--line .s7-arrow { background: var(--white); color: var(--cobalt-deep); border-color: var(--white); }
.st-story__cta .st-offer--line:hover { background: color-mix(in srgb, var(--white) 20%, transparent); }
.st-cta__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--text-muted); }
.st-cta__copy { font: 500 14px/1 var(--font-sans); color: var(--white); padding: 8px 12px; border-radius: 9px; background: color-mix(in srgb, var(--white) 14%, transparent); }
.st-cta__copy:hover { background: color-mix(in srgb, var(--white) 22%, transparent); }
.st-cta__seven { display: none; height: clamp(220px, 26vw, 420px); width: auto; }
.st-cta__vis { display: none; }
.st-cta__vis .st-rise__beams { display: none; }          /* the climbing tiles behind the 7: phones only (below) */
@media (min-width: 760px) { .st-cta__offers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .st-story:not(.is-scene) .st-cta { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-content: center; column-gap: 32px; }
  .st-story:not(.is-scene) .st-cta > :not(.st-cta__vis) { grid-column: 1; }
  .st-story:not(.is-scene) .st-cta__vis { display: block; grid-column: 2; grid-row: 1 / span 4; justify-self: end; align-self: center; }
  .st-story:not(.is-scene) .st-cta__seven { display: block; }
}
/* in the scene: the box has turned cobalt and the 7 stays on the right; Start takes the left */
.st-story.is-scene .st-story__cta { grid-column: 1; grid-row: 1 / 3; z-index: 3; align-self: center; pointer-events: none; }
.st-story.is-scene .st-story__cta.is-live { pointer-events: auto; }
.st-story.is-scene .st-story__cta { align-self: stretch; display: grid; }
.st-story.is-scene .st-cta { height: 100%; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0; }
.st-story.is-scene .st-cta__kick { margin: 0; }
.st-story.is-scene .st-cta__offers { width: 100%; }
.st-story.is-scene .st-cta__title { font-size: clamp(34px, min(3vw + 12px, 7.6vh), 76px); }
.st-story.is-scene .st-cta__say { font-size: clamp(34px, min(3vw + 12px, 7.6vh), 76px); margin-top: clamp(4px, 1vh, 10px); }
.st-story.is-scene .st-cta__offers { grid-template-columns: 1fr; gap: 8px; max-width: 480px; }
.st-story.is-scene .st-story__cta .st-offer { padding: clamp(10px, 1.6vh, 14px) clamp(14px, 1.4vw, 18px); gap: 14px; border-radius: 14px; }
.st-story.is-scene .st-story__cta .st-offer .card-title { font-size: 17px; line-height: 22px; }
.st-story.is-scene .st-story__cta .st-offer .card-body { font-size: 13px; line-height: 18px; }

.st-story.is-scene .st-cta > * { opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 24px)); }
.st-story { padding-bottom: 0; }

/* ---------------------------------------------------------------- footer: a black card on the page (EXT) */
.st-footer { padding: var(--gap) 0; }
.st-footer__box { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 28px 48px; padding: clamp(28px, 3vw, 48px); border-radius: var(--radius-card);
  background: var(--window); color: var(--white); }
.st-footer__logo { display: block; height: clamp(80px, 10vw, 168px); width: auto; max-width: 100%; }
.st-footer__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 18px; text-align: right; }
.st-footer__box { align-items: stretch; }
.st-footer__logo { align-self: flex-end; }
.st-footer__side { align-self: stretch; }
.st-footer__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 26px; }
.st-footer__nav a { display: inline-block; padding: 8px 0; text-decoration: none; color: var(--white); }   /* a finger-sized target */
.st-footer__nav a:hover { box-shadow: inset 0 -2px 0 var(--cobalt-light); }
.st-footer__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--text-muted); }
.st-footer__legal a { display: inline-block; padding: 6px 0; color: var(--white); text-decoration: none; }
.st-footer__legal a:hover { box-shadow: inset 0 -1px 0 var(--cobalt-light); }
/* the motion control: the same stillness as the system's reduced-motion setting, for people who have not set it */
.st-footer__still { appearance: none; border: 1px solid color-mix(in srgb, var(--white) 30%, transparent); background: transparent; color: var(--text-muted); padding: 8px 12px; border-radius: 8px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color 200ms var(--ease), color 200ms var(--ease); }
.st-footer__still:hover { border-color: var(--white); color: var(--white); }
.st-footer__still[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); }
.st-footer__legal a { color: var(--text-muted); text-decoration: none; }
.st-footer__legal a:hover { color: var(--white); }
@media (max-width: 759px) { .st-footer__side { align-items: flex-start; text-align: left; } .st-footer__nav, .st-footer__legal { justify-content: flex-start; } }

/* ---------------------------------------------------------------- placeholders (EXT, draft only: remove before launch) */
.st-ph { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px dashed color-mix(in srgb, var(--text) 45%, transparent); border-radius: var(--radius-chip);
  font: 500 10px/14px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* ---------------------------------------------------------------- the second way in: a cobalt button (all sizes) */
.st-btn--cobalt { background: var(--cobalt-deep); color: var(--white); }
.st-btn--cobalt:has(.s7-arrow) { padding-right: 11px; }
.st-btn--cobalt .s7-arrow { border-color: transparent; background: var(--white); color: var(--cobalt-deep); transition: transform var(--t-state) var(--ease); }
.st-btn--cobalt:hover { background: color-mix(in srgb, var(--cobalt-deep) 80%, var(--ink)); }
.st-btn--cobalt:hover .s7-arrow { transform: translateX(2px); }
@media (min-width: 1100px) and (max-height: 820px) { .st-hero__head .st-btn--cobalt:has(.s7-arrow) { padding-right: 9px; } }

/* ---------------------------------------------------------------- phones (revision 20): one screen per idea */
.st-work__more, .st-dots, .st-tick, .st-make__bar, .st-report__cap, .st-story__kick2 { display: none; }
@media (max-width: 759px) {
  /* the opening: one card. The label with the pavilion beside it, the title across the card, the lead, then Campaign Creative and
     Campaign Growth in turn (site.js runs their kinds of work along a line), then the two buttons. It fills the first screen;
     the three loops come in on the first scroll. On a tall phone the pavilion spans the top of the card instead (site.js). */
  .st-hero { padding-top: 10px; }
  .st-hero__grid { --pv: clamp(84px, min(26vw, 13.5svh), 128px); --hp: 18px; position: relative; display: flex; flex-direction: column; gap: 10px;
    min-height: calc(100vh - var(--hdr) - 22px + 10px + .95 * (100vw - 2 * var(--pad))); }
  @supports (height: 100svh) { .st-hero__grid { min-height: calc(100svh - var(--hdr) - 22px + 10px + .95 * (100vw - 2 * var(--pad))); } }
  .st-hero__low { display: contents; }
  .st-hero__pillars { display: none; }
  .st-hero__head { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; padding: var(--hp); }
  .st-hero__main { display: contents; }
  .st-hero__head .label { min-height: calc(var(--pv) - 7px); padding: 2px 0 0 calc(var(--pv) + 14px); text-align: right; }
  .st-hero__label span { display: block; }                                              /* Creative / Communication / Studio, one per line, top left */
  .st-hero__head .st-hero__title { margin-top: 16px; font-size: clamp(32px, 5.4svh, 46px); line-height: 1; letter-spacing: -.034em; text-wrap: balance; }   /* site.js caps it so the longest word fits */
  .st-hero__head .st-lead { margin: 14px 0 20px; font-size: 15px; line-height: 1.42; }
  .st-hero__head .st-actions { align-self: stretch; margin-top: 0; flex-wrap: nowrap; gap: 8px; }
  .st-hero__head .st-actions .st-btn { flex: 1 1 0; min-width: 0; height: 46px; padding: 0 10px; font-size: 14px; gap: 8px; }
  .st-hero__head .st-actions .st-btn:has(.s7-arrow) { padding-right: 8px; }
  .st-hero__head .st-actions .st-btn--cobalt .s7-arrow { display: none; }                 /* no room for two arrows side by side; the colour carries it */
  .st-hero__head .st-actions .st-btn--cobalt:has(.s7-arrow) { padding-right: 10px; }
  .st-hero__head .st-actions .s7-arrow { width: 24px; height: 24px; }
  .st-hero__plate { position: absolute; top: 12px; left: 12px; right: auto; z-index: 2; width: var(--pv); height: var(--pv); min-height: 0; aspect-ratio: auto; order: 0; border-radius: 14px; }
  .st-hero__plate .st-pav__img, .st-hero__plate .st-pav__svg { left: 6%; width: 88%; }
  .st-hero__grid[data-pav="banner"] .st-hero__plate { left: 12px; right: 12px; width: auto; height: var(--bh); }
  .st-hero__grid[data-pav="banner"] .st-hero__head { padding-top: calc(12px + var(--bh) + 18px); }
  .st-hero__grid[data-pav="banner"] .st-hero__head .label { min-height: 0; padding-left: 0; text-align: left; }
  .st-hero__grid[data-pav="banner"] .st-hero__label span { display: inline; }
  .st-hero__grid[data-pav="banner"] .st-hero__plate :is(.st-pav__img, .st-pav__svg) { left: 4%; width: 92%; height: 94%; object-fit: contain; object-position: 50% 100%; }
  /* Campaign Creative, then Campaign Growth: the tile pops in, the line under it, the kinds of work run along beneath */
  .st-tick { display: grid; margin: auto 0 12px; padding: 14px 14px 12px; border-radius: 16px; background: color-mix(in srgb, var(--text) 4.5%, transparent); }   /* a box just above the buttons; spare height sits above it */
  .st-tick__set { grid-area: 1 / 1; display: grid; align-content: start; gap: 6px; --deep: var(--mint-deep); }
  .st-tick__set--peach { --deep: var(--peach-deep); }
  .js .st-tick__set { opacity: 0; transition: opacity 360ms var(--ease); pointer-events: none; }
  .js .st-tick__set.is-on { opacity: 1; pointer-events: auto; transition-duration: 520ms; }
  .st-tick__head { display: flex; align-items: center; gap: 10px; }
  .st-tick__tile { width: 30px; height: 30px; border-radius: 8px; flex: none; }
  .js .st-tick__tile { transform: scale(.3) rotate(-8deg); opacity: 0; transition: transform 600ms cubic-bezier(.34, 1.56, .64, 1), opacity 260ms var(--ease); }
  .js .st-tick__set.is-on .st-tick__tile { transform: none; opacity: 1; transition-delay: 140ms; }
  .st-tick__t { font: 600 18px/22px var(--font-sans); letter-spacing: -.012em; }
  .st-tick__p { font-size: 14px; line-height: 19px; color: var(--text-muted); text-wrap: pretty; }
  .st-tick__lane { margin: 8px -14px 0; padding: 0 14px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
  .st-tick .st-tick__tags { flex-wrap: nowrap; width: max-content; margin: 0; padding: 0; gap: 6px; }
  .st-tick .st-tick__tags li { white-space: nowrap; min-height: 30px; padding: 5px 11px 5px 8px; gap: 7px; font-size: 13px; line-height: 17px; background: var(--card); }
  .st-tick .st-glyph { width: 14px; height: 14px; }
  .st-tick .st-glyph .on { fill: var(--deep); } .st-tick .st-glyph .off { fill: color-mix(in srgb, var(--text) 12%, transparent); }
  /* still (reduced motion, or Pause motion): both shown, nothing moving */
  .st-tick.is-static { gap: 16px; }
  .st-tick.is-static .st-tick__set { grid-area: auto; opacity: 1; }
  .st-tick.is-static .st-tick__tile { transform: none; opacity: 1; }
  .st-tick.is-static .st-tick__lane { margin: 4px 0 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .st-tick.is-static .st-tick__tags { flex-wrap: wrap; width: auto; }
  .st-hero__reels { flex: none; }
  .js .st-hero__reels [data-reveal] { transform: translateY(36px) scale(.96); transition-duration: 700ms; }
  .js .st-hero__reels [data-reveal].is-in { transform: none; }

  /* 01 why now: the white part, then the cobalt part running to the box's edges and its foot, its words in line with the heading;
     the four cards move on by themselves (a swipe or Pause stops them) */
  .st-why:not(.is-scene) .st-why__box { --bpx: 22px; padding: 0; gap: 12px; background: none; border: 0; border-radius: 0; }
  .st-why:not(.is-scene) .st-why__intro { padding: 24px var(--bpx) 0; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .st-why:not(.is-scene) .st-why__field { margin-top: -12px; padding: 20px var(--bpx) 22px; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
  .st-why:not(.is-scene) .st-why__after { border-radius: var(--radius-card); padding: 26px var(--bpx) 18px; gap: 16px; --apx: var(--bpx); }
  .st-why:not(.is-scene) .st-why__rise { margin-bottom: 12px; }
  .st-why:not(.is-scene) .st-field__share { font-size: 24px; }
  .st-why:not(.is-scene) .st-field__src { white-space: nowrap; font-size: min(10px, calc((100vw - 76px) / 32.5)); letter-spacing: .02em; }
  .st-why:not(.is-scene) .st-why__after .st-ing { flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
  .st-why:not(.is-scene) .st-why__after .st-ing__vis { flex: 0 0 40%; padding: 7px; }
  .st-why:not(.is-scene) .st-why__after .st-how__text { flex: 1 1 auto; min-width: 0; grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 0 4px 0 0; }
  .st-why:not(.is-scene) .st-why__after .st-how__t { font-size: 16px; line-height: 1.2; }
  .st-why:not(.is-scene) .st-why__after .st-how__p { font-size: 13px; line-height: 1.35; }
  .st-why:not(.is-scene) .st-why__after .st-how__dots { padding-top: 2px; }
  .st-mcard { --mw: 76%; }
  .st-make__bar { display: flex; justify-content: center; margin-top: 12px; }
  .st-make__dots { display: flex; gap: 5px; }
  .st-make__dots li { width: 7px; height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--white) 30%, transparent); transition: width 300ms var(--ease), background-color 300ms var(--ease); }
  .st-make__dots li.is-on { width: 18px; background: var(--white); }

  /* 02 the work: the loops first, a row you swipe that slides in; See more opens the report, across the full width, with its name and page count */
  .st-work__lede, .st-work__after .st-details { display: none; }
  .st-work__after { padding-bottom: 48px; }
  .st-work__side { order: -1; gap: 14px; }
  .st-work:not(.is-more) .st-report { display: none; }
  .st-work__more { display: inline-flex; justify-self: start; margin-top: 4px; }
  .st-work.is-more .st-work__row { row-gap: 28px; }
  .st-work .st-report { width: 100%; display: grid; gap: 12px; justify-self: stretch; }
  .st-report__cap { display: block; order: -1; }
  .st-report__cap .label { color: var(--text-muted); }
  .js .st-work__rail:not(.is-in) .st-work__strip > li { opacity: 0; transform: translateX(56px); }
  .st-work__strip > li { transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
  .st-work__strip > li:nth-child(2) { transition-delay: 90ms; } .st-work__strip > li:nth-child(3) { transition-delay: 180ms; }

  /* 03 what we do, 04 what it builds, 05 start: three boxes, each one screen. The cards are a row you swipe; the line names the card on show */
  .st-story:not(.is-scene) .st-story__box { padding: 0; gap: 12px; background: none; border: 0; border-radius: 0; }
  .st-story:not(.is-scene) .st-story__part { --bp: 20px; display: flex; flex-direction: column; gap: 16px; padding: 24px var(--bp) 18px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--line);
    min-height: calc(100vh - var(--hdr) - 24px); }
  @supports (height: 100svh) { .st-story:not(.is-scene) .st-story__part { min-height: calc(100svh - var(--hdr) - 24px); } }
  .st-story:not(.is-scene) .st-story__part[data-part="2"] { margin-top: 0; }
  .st-story:not(.is-scene) .st-story__head .st-kicker, .st-story__kick2 { margin-bottom: 14px; }
  .st-story__kick2 { display: flex; margin-bottom: -2px; }
  .st-story:not(.is-scene) .st-story__say[data-say="2"] { margin-bottom: 0; }
  .js .st-story .st-roll[data-roll="into"] { display: block; }                        /* wider reach / stronger demand / higher-value opportunities on the second line */
  .js .st-story .st-roll[data-roll="into"] > span { white-space: nowrap; }             /* ...each on one line (site.js sizes the line so the longest fits) */
  .st-story:not(.is-scene) .st-proc, .st-story:not(.is-scene) .st-story__part[data-part="2"] .st-story__fig { display: none; }
  .st-story:not(.is-scene) .st-story__cards { flex: 1 1 auto; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 4px calc(-1 * var(--bp)) 0; padding-inline: var(--bp); scroll-padding-inline: var(--bp); scrollbar-width: none; }
  .st-story:not(.is-scene) .st-story__cards::-webkit-scrollbar { display: none; }
  .st-story:not(.is-scene) .st-aud { flex: 0 0 88%; scroll-snap-align: start; gap: 10px; padding: 22px 20px 20px; }
  .st-story:not(.is-scene) .st-aud__need { font-size: 17px; line-height: 1.38; font-weight: 450; letter-spacing: -.01em; }
  .st-story:not(.is-scene) .st-aud__need strong { margin: 6px 0 10px; font-size: clamp(30px, 8.6vw, 38px); line-height: 1.02; letter-spacing: -.032em; font-weight: 650; }
  .st-story:not(.is-scene) .st-aud--run .st-aud__need strong { font-size: clamp(28px, 7.8vw, 34px); }
  .st-story:not(.is-scene) .st-aud__mark { height: 76px; }
  .st-story:not(.is-scene) .st-make { gap: 6px; padding-top: 14px; }
  .st-story:not(.is-scene) .st-make li { min-height: 32px; padding: 5px 11px 5px 9px; gap: 7px; font-size: 13.5px; }
  .st-story:not(.is-scene) .st-make .st-glyph { width: 15px; height: 15px; }
  .st-dots { display: flex; justify-content: center; gap: 6px; padding-top: 2px; }
  .st-dots i { width: 7px; height: 7px; border-radius: 2px; background: var(--tile-mid); transition: background-color 300ms var(--ease), width 300ms var(--ease); }
  .st-dots i.is-on { width: 18px; background: var(--text); }
  /* Start: its own cobalt box. The 7 stands whole in the middle of its climbing tiles, which fade out at the top and the foot; then the words, then the two ways in */
  .st-story:not(.is-scene) .st-story__cta { min-height: calc(100vh - var(--hdr) - 24px); display: flex; border-radius: var(--radius-card); }
  @supports (height: 100svh) { .st-story:not(.is-scene) .st-story__cta { min-height: calc(100svh - var(--hdr) - 24px); } }
  .st-story:not(.is-scene) .st-cta { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 24px 20px 20px; }
  .st-cta__kick { order: 0; }
  .st-story:not(.is-scene) .st-cta__vis { order: 1; display: block; position: relative; flex: 1 1 100px; min-height: 100px; margin: 10px -20px 0; overflow: hidden; }
  .st-cta__vis .st-rise__beams { display: grid; padding: 0 3%; align-items: center;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 24%, #000 62%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0, #000 24%, #000 62%, transparent 100%); }
  .st-cta__vis .st-rise__beam { height: 100%; }
  .st-cta__vis .st-cta__seven { display: block; position: absolute; left: 50%; top: 50%; height: 82%; max-height: 270px; width: auto; transform: translate(-50%, -50%); }
  .st-cta__text { order: 2; margin-top: 30px; }
  .st-cta__title, .st-cta__say { font-size: clamp(29px, min(8.4vw, 4.8svh), 38px); }
  .st-cta__say { margin-top: 10px; }
  .st-cta__offers { order: 3; margin-top: 32px; gap: 10px; }
  .st-story__cta .st-offer { padding: 15px 14px 15px 16px; gap: 12px; border-radius: 14px; }
  .st-story__cta .st-offer .card-title { font-size: 17px; line-height: 22px; }
  .st-story__cta .st-offer .card-body { font-size: 13px; line-height: 18px; }
}
@media (max-width: 380px) { .st-hero__head .st-actions .st-btn--ink .s7-arrow { display: none; } .st-hero__head .st-actions .st-btn--ink:has(.s7-arrow) { padding-right: 10px; } }
.st-cta__vis:not(.is-on) .st-rise__beam > span { animation-play-state: paused; }

/* ---------------------------------------------------------------- Commission a Study: the form (EXT)
   Two ways of showing the same form (site.js sets the class): .is-panel takes the 7's place on the right of Start in the desktop scene;
   .is-page is its own cobalt page over the site (phones, tablets, reduced motion). */
.st-ask[hidden] { display: none !important; }
.st-ask { color: var(--ink); }
.st-ask__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-ask__title { font-size: clamp(26px, 2vw + 12px, 34px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; }
.st-ask__title:focus { outline: none; }
.st-ask__sub { margin-top: 8px; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 66%, transparent); text-wrap: pretty; }
.st-ask__form { display: grid; gap: 14px; }
.st-ask__row { display: grid; gap: 14px; }
.st-in { display: grid; gap: 6px; }
.st-in__label { font: 500 13px/16px var(--font-sans); color: color-mix(in srgb, var(--ink) 74%, transparent); }
.st-in input, .st-in textarea { width: 100%; box-sizing: border-box; margin: 0; padding: 11px 13px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: var(--ground); color: var(--ink); font: 400 16px/22px var(--font-sans); transition: border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
.st-in textarea { min-height: 128px; resize: vertical; }
.st-in input:focus, .st-in textarea:focus { outline: none; border-color: var(--cobalt-deep); background: var(--white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt-deep) 18%, transparent); }
.st-in textarea::placeholder { color: color-mix(in srgb, var(--ink) 42%, transparent); transition: opacity 300ms var(--ease); }
.st-ask__ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.st-ask__try { margin-right: 4px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 56%, transparent); }
.st-idea { min-height: 32px; padding: 6px 11px; border-radius: 9px; background: color-mix(in srgb, var(--cobalt-deep) 9%, transparent); color: var(--ink); font: 500 13px/18px var(--font-sans);
  transition: background-color var(--t-state) var(--ease); }
.st-idea:hover { background: color-mix(in srgb, var(--cobalt-deep) 16%, transparent); }
.st-ask__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.st-ask__send[disabled] { opacity: .6; cursor: progress; }
.st-ask__note { font-size: 13px; line-height: 18px; color: color-mix(in srgb, var(--ink) 66%, transparent); }
.st-ask__note a { color: inherit; }
.st-ask__done { display: grid; gap: 4px; }
.st-ask__done-t { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.st-ask__done-t:focus { outline: none; }
.st-ask__close { position: relative; width: 40px; height: 40px; border-radius: 10px; flex: none; transition: background-color var(--t-state) var(--ease); }
.st-ask__close::before, .st-ask__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.75px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.st-ask__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@keyframes st-ask-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* its own page: cobalt, the logo and a close at the top, the words in white, the form on a white card */
html.is-asking, html.is-asking body { overflow: hidden; }
.st-ask.is-page { position: fixed; inset: 0; z-index: 90; display: block; overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--pad) 28px; background: var(--cobalt-deep); color: var(--white);
  animation: st-ask-in 420ms var(--ease) both; }
.st-ask.is-page .st-ask__top { display: flex; align-items: center; justify-content: space-between; height: 54px; max-width: 560px; margin: 0 auto; padding-left: 4px; }
.st-ask.is-page .st-ask__logo { height: 15px; width: auto; }
.st-ask.is-page .st-ask__close { color: var(--white); background: color-mix(in srgb, var(--white) 14%, transparent); }
.st-ask.is-page .st-ask__close:hover { background: color-mix(in srgb, var(--white) 22%, transparent); }
.st-ask.is-page .st-ask__close:focus-visible { outline-color: var(--white); }
.st-ask.is-page .st-ask__card { display: grid; gap: 22px; max-width: 560px; margin: 22px auto 0; }
.st-ask.is-page .st-ask__head { padding: 0 2px; }
.st-ask.is-page .st-ask__title { font-size: clamp(34px, 9vw, 46px); color: var(--white); }
.st-ask.is-page .st-ask__sub { color: color-mix(in srgb, var(--white) 82%, transparent); font-size: 16px; }
.st-ask.is-page .st-ask__form, .st-ask.is-page .st-ask__done { padding: 20px; border-radius: var(--radius-card); background: var(--card); color: var(--ink); }
.st-ask.is-page .st-ask__send { width: 100%; justify-content: space-between; padding-left: 18px; }
@media (min-width: 560px) { .st-ask.is-page .st-ask__row { grid-template-columns: 1fr 1fr; } .st-ask.is-page .st-ask__send { width: auto; } }

/* in the desktop scene: a white card where the 7 was, on the right of Start */
.st-ask.is-panel { position: relative; grid-column: 2; grid-row: 1 / 3; z-index: 4; align-self: stretch; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow-y: auto;
  padding: clamp(22px, 3vh, 34px) clamp(22px, 2.4vw, 36px); border-radius: 20px; background: var(--card); color: var(--ink); animation: st-ask-in 520ms var(--ease) both; }
.st-ask.is-panel .st-ask__top { position: absolute; top: 14px; right: 14px; }
.st-ask.is-panel .st-ask__logo { display: none; }
.st-ask.is-panel .st-ask__close { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.st-ask.is-panel .st-ask__close:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.st-ask.is-panel .st-ask__card { display: grid; gap: clamp(16px, 2.4vh, 24px); width: 100%; max-width: 620px; margin: 0 auto; }
.st-ask.is-panel .st-ask__head { padding-right: 48px; }
.st-ask.is-panel .st-ask__row { grid-template-columns: 1fr 1fr; }
.st-ask.is-panel .st-in textarea { min-height: clamp(110px, 24vh, 260px); }
@media (max-height: 760px) { .st-ask.is-panel .st-in textarea { min-height: 92px; } .st-ask.is-panel .st-ask__form { gap: 11px; } }
.st-story.is-scene .st-story__box.is-ask .st-story__fig { opacity: 0; visibility: hidden; transition: opacity 360ms var(--ease), visibility 0s linear 360ms; }

/* the motion control in the footer stills what CSS moves, too */
html.is-still .st-rise__beam > span, html.is-still .st-season__tile { animation: none; }

/* ---------------------------------------------------------------- reduced motion: the final state, no autoplay */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .st-hero [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .st-why:not(.is-scene) .st-why__creamhead, .js .st-why:not(.is-scene) .st-why__make, .js .st-why:not(.is-scene) .st-why__how { opacity: 1; transform: none; transition: none; }
  .st-rise__beam > span { animation: none; }
  .st-t, .st-t::after, .st-field__grid > i, .st-compound__col i, .st-test *, .st-v, .st-report__book img, .st-pav__svg g, .st-roll, .st-roll > span, .st-aud, .st-aud__body, .st-story__fig, .st-make__strip, .st-how__act { transition: none !important; }
  .st-replay { display: none; }
  .st-pav { transform: none; }
  .st-btn--ink:hover .s7-arrow, .st-btn--cobalt:hover .s7-arrow, .st-story__cta .st-offer:hover .s7-arrow { transform: none; }
  .st-story__cta .st-offer:hover { transform: none; }
}
.st-ing__grid.is-instant .st-v { transition: none !important; }
@media (min-width: 760px) { .st-story:not(.is-scene) .st-story__part[data-part="1"] > .st-story__head { margin-bottom: 14px; } }