/* ==========================================================================
   ENGAGED — a communications growth platform
   Design system.

   The site reads light: warm paper, black type, enormous headlines and a lot
   of air. One surface is dark — the hero — so arriving feels like opening a
   magazine cover and turning to the page.

   Colour is rationed. Every photograph is graded to a single warm monochrome
   in tools/images.py, which means the only colour anywhere is the on-air
   vermilion, used on two or three elements a screen. Type does the shouting.

   Surfaces carry their own palette. Any block can be put on paper, on tint or
   on ink by swapping one class, because every component reads --fg, --hair and
   --accent rather than hard-coding a colour. Nothing needs a per-surface
   override.

   Self-hosted fonts, no external requests, no frameworks. Everything animated
   sits under .motion, added only when the visitor has not asked for reduced
   motion.
   ========================================================================== */

/* -------------------------------------------------------------- fonts -- */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 900;
  font-stretch: 62% 125%; font-display: swap;
  src: url(../fonts/archivo-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 900;
  font-stretch: 62% 125%; font-display: swap;
  src: url(../fonts/archivo-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/inter-tight-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/inter-tight-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/inter-tight-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/inter-tight-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/inter-tight-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/inter-tight-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------- palette + surfaces -- */
:root {
  --paper:   #F7F4EF;
  --paper-2: #F0EBE3;
  --paper-3: #E5DED3;
  --ink:     #0B0B0D;
  --ink-2:   #15151A;

  /* The accent, and the only colour on the site. White type on it fails
     contrast badly, so anything filled with it carries ink text, not white. */
  --live:     #FF7A3D;   /* the on-air light */
  --live-ink: #B04D15;   /* the same light, dark enough to read as text on paper */
  --live-2:   #FF7A3D;   /* and on ink it needs no adjustment — it already sings */

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(5rem, 10vw, 10rem);

  --e: cubic-bezier(.22,.61,.36,1);
  --e-out: cubic-bezier(.16,1,.3,1);
}

/* every component reads these four; a surface class is all that changes */
:root, .t-light {
  --bg: var(--paper);
  --fg: #121216;
  --fg-mid: rgba(18,18,22,.66);
  --fg-low: rgba(18,18,22,.44);
  --hair: rgba(18,18,22,.12);
  --hair-2: rgba(18,18,22,.2);
  --raise: rgba(18,18,22,.04);
  --hover: #EFEAE2;
  --accent: var(--live-ink);
  --fill: var(--live);
  --on-fill: var(--ink);
}
.t-tint { --bg: var(--paper-2); --hover: #E7E1D6; }
.t-deep { --bg: var(--paper-3); --hover: #D9D1C3; --hair: rgba(18,18,22,.16); }
/* solid accent. Ink on this reads at 7.6:1, white would be 2.6:1 — so the
   whole surface inverts rather than just the background changing. */
.t-orange {
  --bg: var(--live);
  --fg: var(--ink);
  --fg-mid: rgba(11,11,13,.74);
  --fg-low: rgba(11,11,13,.56);
  --hair: rgba(11,11,13,.22);
  --hair-2: rgba(11,11,13,.38);
  --raise: rgba(11,11,13,.05);
  --hover: #FF8F5C;
  --accent: var(--ink);
  --fill: var(--ink);
  --on-fill: var(--live);
}
.t-dark {
  --bg: var(--ink);
  --hover: var(--ink-2);
  --fg: #F7F4EF;
  --fg-mid: rgba(247,244,239,.68);
  --fg-low: rgba(247,244,239,.44);
  --hair: rgba(247,244,239,.15);
  --hair-2: rgba(247,244,239,.26);
  --raise: rgba(247,244,239,.05);
  --hover: var(--ink-2);
  --accent: var(--live);
  --fill: var(--live);
  --on-fill: var(--ink);
}

/* -------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 1rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--paper-3); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--live); color: var(--ink); }

.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 999;
  background: var(--live); color: var(--ink); padding: .7rem 1.1rem;
  font-weight: 600; font-size: .9rem; border-radius: 3px;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* --------------------------------------------------------- typography -- */
.display {
  font-family: var(--f-display);
  font-weight: 800; font-stretch: 110%;
  text-transform: uppercase;
  line-height: .92; letter-spacing: -.021em;
  font-size: clamp(1.85rem, 5vw, 4.35rem);
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.35rem, 6.4vw, 5.4rem); line-height: .9; letter-spacing: -.028em; }
.display--lg { font-size: clamp(2.3rem, 5.6vw, 5.1rem); line-height: .9; letter-spacing: -.025em; }
.display--sm { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: .98; }

.h2 {
  font-family: var(--f-display); font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1.05; letter-spacing: -.024em; text-wrap: balance;
}
.h3 {
  font-family: var(--f-display); font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.15; letter-spacing: -.016em;
}

.eyebrow {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .715rem; letter-spacing: .21em;
  color: var(--fg-low);
  display: flex; align-items: flex-start; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); flex: none; margin-top: .55em;
}

.lede {
  font-size: clamp(1.08rem, 1.3vw, 1.2rem);
  line-height: 1.6; color: var(--fg-mid); max-width: 60ch;
}
.lede--lg { font-size: clamp(1.18rem, 1.65vw, 1.4rem); line-height: 1.48; }

.body { color: var(--fg-mid); max-width: 62ch; }
.body + .body { margin-top: 1rem; }

.pull {
  font-family: var(--f-display); font-weight: 600; font-stretch: 100%;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.22; letter-spacing: -.022em;
  border-left: 2px solid var(--live); padding-left: 1.25rem; max-width: 26ch;
  color: var(--fg);
}

em { font-style: normal; color: var(--accent); }
b, strong { font-weight: 600; color: var(--fg); }

/* ----------------------------------------------------------- utilities -- */
.u-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { max-width: 1560px; }
.wrap--nar { max-width: 860px; }

.section { padding-block: var(--sec); position: relative; background: var(--bg); color: var(--fg); }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }
.section--flush { padding-bottom: 0; }

.stack > * + * { margin-top: 1.1rem; }
.stack--lg > * + * { margin-top: 1.9rem; }
.hair { height: 1px; background: var(--hair); border: 0; }

.mt-s { margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.mt-m { margin-top: clamp(2rem, 4vw, 3.25rem); }
.mt-l { margin-top: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------- tally -- */
.tally {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none;
  box-shadow: 0 0 0 0 rgba(255,122,61,.55);
}
.motion .nav:not(.is-stuck) .tally { animation: tally 2.8s var(--e) infinite; }
@keyframes tally {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(255,122,61,.5); }
  35%           { box-shadow: 0 0 0 7px rgba(255,122,61,0); }
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  --bh: 3.2rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--bh); padding-inline: 1.5rem;
  font-weight: 600; font-size: .94rem; letter-spacing: -.005em;
  border-radius: 999px; border: 1px solid transparent;
  transition: background .35s var(--e), color .35s var(--e),
              border-color .35s var(--e), transform .35s var(--e);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--lg { --bh: 3.7rem; padding-inline: 2rem; font-size: 1rem; }
.btn--sm { --bh: 2.55rem; padding-inline: 1.15rem; font-size: .87rem; }

.btn--pri { background: var(--fill); color: var(--on-fill); font-weight: 600; }
.btn--pri:hover { background: #FF9457; }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: var(--live-ink); color: #fff; }
.btn--ghost { border-color: var(--hair-2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); background: var(--raise); }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; padding-bottom: .3rem;
  background-image: linear-gradient(var(--live), var(--live));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--e-out), color .3s var(--e);
}
.tlink:hover { background-size: 100% 1px; color: var(--accent); }
.tlink i { font-style: normal; transition: transform .4s var(--e-out); }
.tlink:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------- nav -- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--fg); transition: background .45s var(--e); }
.nav__bar {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
  padding: .95rem var(--gut); max-width: 1560px; margin-inline: auto;
}
.nav__rule {
  display: block; height: 1px; background: var(--hair);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--e-out);
}
.nav[data-nav-mode="dark"]:not(.is-stuck) {
  --fg: #F7F4EF; --hair: rgba(247,244,239,.15); --hair-2: rgba(247,244,239,.3);
  --raise: rgba(247,244,239,.06); --bg: transparent;
}
/* The menu panel is paper-coloured and sits UNDER the fixed nav, so on a
   dark-hero page the wordmark and the close button were white-on-white and the
   menu could not be shut. While it is open the bar reverts to ink. */
body.is-locked .nav[data-nav-mode="dark"]:not(.is-stuck) {
  --fg: #121216; --hair: rgba(18,18,22,.12); --hair-2: rgba(18,18,22,.26);
  --raise: rgba(18,18,22,.05); --bg: transparent;
}
.nav.is-stuck { background: rgba(247,244,239,.84); backdrop-filter: saturate(1.3) blur(16px); }
.nav.is-stuck .nav__rule { transform: none; }

.nav__brand { display: flex; align-items: center; gap: .55rem; flex: none; }
.nav__mark {
  font-family: var(--f-display); font-weight: 800; font-stretch: 106%;
  font-size: 1rem; letter-spacing: .045em;
}
.nav__links { display: none; gap: clamp(.85rem, 1.7vw, 1.6rem); margin-inline: auto; }
.nav__link {
  font-size: .87rem; font-weight: 500; opacity: .68;
  position: relative; padding-block: .35rem; transition: opacity .3s var(--e);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--live); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .4s var(--e-out);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after, .nav__link.is-here::after { transform: none; }
.nav__link.is-here { opacity: 1; }

.nav__end { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.nav__cta { display: none; }
.nav__toggle {
  width: 2.55rem; height: 2.55rem; display: grid; place-items: center;
  border: 1px solid var(--hair-2); border-radius: 999px;
}
.nav__burger { display: grid; gap: 4px; width: 15px; }
.nav__burger i { height: 1.5px; background: currentColor; transition: transform .4s var(--e-out), opacity .25s; }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 1100px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__end { margin-left: 0; }
}

/* ------------------------------------------------------------- menu -- */
.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper); color: var(--fg);
  display: grid; align-items: end; padding: 6rem var(--gut) 2.25rem; overflow-y: auto;
}
.menu[hidden] { display: none; }
.motion .menu { animation: menuIn .45s var(--e-out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-1.25rem); } }
.menu__inner { width: 100%; max-width: 1560px; margin-inline: auto; }
.menu__links { display: grid; border-top: 1px solid var(--hair); }
.menu__link {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--hair);
  font-family: var(--f-display); font-weight: 700; font-stretch: 104%;
  text-transform: uppercase; letter-spacing: -.012em;
  font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1;
  transition: color .3s var(--e), padding-left .4s var(--e-out);
}
.menu__link:hover { color: var(--accent); padding-left: .5rem; }
.menu__link.is-here { color: var(--accent); }
.menu__n { font-size: .66rem; font-stretch: 76%; letter-spacing: .16em; color: var(--fg-low); flex: none; width: 1.8rem; }
.menu__foot { margin-top: 2rem; display: grid; gap: 1rem; justify-items: start; }
.menu__cta { width: 100%; max-width: 22rem; }
.menu__alt { font-size: .95rem; color: var(--fg-mid); }
.menu__alt:hover { color: var(--accent); }
.menu__meta { font-size: .85rem; color: var(--fg-low); }
.menu__meta a:hover { color: var(--accent); }

/* ------------------------------------------------------------- footer -- */
.foot { background: var(--paper-2); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.foot__top { display: grid; gap: 1.1rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--hair); }
.foot__mark {
  font-family: var(--f-display); font-weight: 800; font-stretch: 118%;
  text-transform: uppercase; letter-spacing: -.028em; line-height: .85;
  font-size: clamp(2.5rem, 13vw, 10rem); color: var(--fg);
}
.foot__line { color: var(--fg-mid); max-width: 44ch; font-size: 1.02rem; }
.foot__col { display: block; }
.foot__cols { display: grid; gap: 2rem; padding-block: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.foot__label {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .69rem; letter-spacing: .19em;
  color: var(--fg-low); margin-bottom: .85rem;
}
.foot__list { display: grid; gap: .5rem; font-size: .92rem; }
.foot__list a { color: var(--fg-mid); transition: color .3s var(--e); }
.foot__list a:hover { color: var(--accent); }
.foot__fine {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  padding-top: 1.6rem; border-top: 1px solid var(--hair);
  font-size: .8rem; color: var(--fg-low);
}

/* ==========================================================================
   HERO — the only dark surface on the site.

   A real audience behind, and Ellie-Rose and Ed as a photograph beside the
   type. An earlier version dissolved the two of them into the crowd by keying
   their transparency off their own brightness; it produced two lit faces
   hanging in the dark with stage beams behind their heads and was frankly
   horrible. They are a photograph. They keep their shoulders and their edges.
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--fg);
  min-height: 100svh;
  /* the block sits low on purpose — the photograph gets the top half of the
     screen to itself rather than being wallpaper behind a wall of type */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(6rem, 11vh, 8rem);
  isolation: isolate;
  text-align: center;
}
.hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__layer { position: absolute; inset: -8% -5%; will-change: transform; }
.hero__layer img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 50% 45%; }

/* the scrim is what makes white type on a crowd legible */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11,11,13,.8), rgba(11,11,13,0) 16%),
    linear-gradient(to top, var(--ink) 14%, rgba(11,11,13,.86) 44%, rgba(11,11,13,.24) 80%),
    linear-gradient(to right, rgba(11,11,13,.62), rgba(11,11,13,0) 62%);
}
.hero__glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 64vw; height: 64vw; max-width: 800px; max-height: 800px;
  right: -18vw; top: -20vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,61,.15), rgba(255,122,61,0) 68%);
  filter: blur(36px);
}
.motion .hero__glow { animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: scale(1.08); } }

/* fine grain, so the black reads as printed rather than as a screen */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

.hero__in {
  position: relative; z-index: 2;
  display: grid; justify-items: center;
  gap: clamp(.85rem, 1.7vw, 1.25rem);
  max-width: 70rem;
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
}
.hero .eyebrow { justify-content: center; }
.hero__kicker { margin-bottom: clamp(.25rem, 1vw, .6rem); }
/* deliberately smaller than the page's other display type: centred, it has to
   hold two full lines inside a 62rem measure without hyphenating */
.hero__t {
  margin-bottom: clamp(.4rem, 1vw, .8rem);
  font-size: clamp(2.3rem, 4.05vw, 3.65rem);
  line-height: .96;
}
.hero__t .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__t .ln > span { display: block; }

.hero__sub { max-width: 46ch; }

/* the proposition and the argument for it, side by side */
.hero__two { display: grid; gap: clamp(1rem, 2vw, 1.4rem); justify-items: center; width: 100%; }
@media (min-width: 880px) {
  .hero__two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    margin-block: clamp(.4rem, 1vw, .8rem);
  }
  .hero__two .hero__sub { max-width: 34ch; }
}
.hero__because {
  font-family: var(--f-display); font-weight: 600; font-stretch: 92%;
  font-size: clamp(1rem, 1.45vw, 1.12rem); line-height: 1.32; letter-spacing: -.012em;
  max-width: 34ch; margin: 0; padding-top: 1.1rem; position: relative;
}
.hero__because::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 2.5rem; height: 2px; background: var(--live);
}
/* side by side, the rule turns and becomes the divider between the two */
@media (min-width: 880px) {
  .hero__because { padding-top: 0; }
  .hero__because::before {
    top: 50%; left: calc(-1 * clamp(1rem, 2vw, 1.75rem));
    transform: translateY(-50%);
    width: 2px; height: 2.75rem;
  }
}

.hero__cap {
  display: flex; align-items: flex-start; justify-content: center; gap: .5rem;
  margin-top: clamp(.4rem, 1.2vw, 1rem);
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .16em;
  color: var(--fg-mid);
}
.hero__cap .tally { margin-top: .45em; }


@media (min-width: 920px) {
}

/* the opening move. It runs on the <img> inside the layer, because JS owns the
   layer's own transform for the scroll parallax. */
.motion .hero__layer img { transform: scale(1.12); opacity: .25; }
.motion .hero.is-ready .hero__layer img {
  transform: scale(1); opacity: 1;
  transition: transform 2.8s var(--e-out), opacity 1.7s var(--e);
}
.motion .hero__sub, .motion .hero__because,
.motion .hero .actions, .motion .hero__cap {
  opacity: 0; transform: translateY(1.1rem);
}
.motion .hero.is-ready .hero__sub,
.motion .hero.is-ready .hero__because,
.motion .hero.is-ready .actions,
.motion .hero.is-ready .hero__cap {
  opacity: 1; transform: none;
  transition: opacity .9s var(--e-out), transform 1s var(--e-out);
}
.motion .hero.is-ready .hero__sub { transition-delay: .6s; }
.motion .hero.is-ready .hero__because { transition-delay: .72s; }
.motion .hero.is-ready .actions { transition-delay: .84s; }
.motion .hero.is-ready .hero__cap { transition-delay: .96s; }

/* ------------------------------------------------------------- ticker -- */
.ticker {
  position: relative; z-index: 3;
  border-top: 1px solid var(--hair); overflow: hidden; padding-block: .8rem; --dur: 60s;
}
.ticker__track { display: flex; width: max-content; }
.motion .ticker__track { animation: tick var(--dur) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker__set { display: flex; flex: none; }
.ticker__i {
  display: flex; align-items: center; gap: 1.05rem; padding-inline: 1.05rem;
  font-family: var(--f-display); font-weight: 600; font-stretch: 86%;
  text-transform: uppercase; letter-spacing: .055em;
  font-size: clamp(.76rem, 1vw, .88rem);
  color: var(--fg-mid); white-space: nowrap;
}
.ticker__i::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--live); flex: none; }

/* ==========================================================================
   editorial statement layouts
   ========================================================================== */
.state { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 920px) {
  .state--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr); align-items: start; }
  .state--split-r { grid-template-columns: minmax(0, .78fr) minmax(0, 1.25fr); align-items: start; }
  .state--end { align-items: end; }
}
.state__aside { display: grid; gap: 1.2rem; align-content: start; }

.rulehead { display: grid; gap: 1.35rem; }
.rulehead__rule { height: 1px; background: var(--live); transform: scaleX(0); transform-origin: 0 50%; }
.motion [data-r].is-in .rulehead__rule { animation: ruleIn 1.1s var(--e-out) .15s forwards; }
@keyframes ruleIn { to { transform: none; } }
.js:not(.motion) .rulehead__rule { transform: none; }

/* the symptom list — reads like a running order */
.symp { display: grid; border-top: 1px solid var(--hair); }
.symp__i {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .72rem 0; border-bottom: 1px solid var(--hair);
  font-size: clamp(.95rem, 1.35vw, 1.06rem); color: var(--fg-mid);
  transition: color .3s var(--e), padding-left .4s var(--e-out);
}
.symp__i:hover { color: var(--fg); padding-left: .35rem; }
.symp__n {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  font-size: .64rem; letter-spacing: .15em; color: var(--live-ink);
  flex: none; width: 1.9rem;
}

/* a photograph with an editorial caption */
.fig { display: grid; gap: .7rem; }
.fig img { width: 100%; object-fit: cover; border-radius: 3px; }
.fig figcaption {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .17em;
  color: var(--fg-low); display: flex; align-items: center; gap: .5rem;
}
.fig--tall img { aspect-ratio: 4/5; }
.fig--wide img { aspect-ratio: 16/9; }

/* ==========================================================================
   THE FRAMEWORK
   ========================================================================== */
.plate { border: 1px solid var(--hair); border-radius: 4px; padding: clamp(1.15rem, 2.2vw, 1.6rem); display: grid; gap: .95rem; }
.plate__head { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline; justify-content: space-between; }
.plate__name {
  font-family: var(--f-display); font-weight: 800; font-stretch: 102%;
  text-transform: uppercase; letter-spacing: -.012em; font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.plate__meta {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .19em; color: var(--fg-low);
}
.plate__bar { display: flex; gap: 3px; }
.plate__seg { height: 3px; flex: 1; background: var(--hair-2); border-radius: 2px; transition: background .5s var(--e); }
.plate__seg.is-on { background: var(--live); }

.fw { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); border-top: 1px solid var(--fg); }
.pil { border-bottom: 1px solid var(--hair); }
.pil:last-child { border-bottom: 1px solid var(--fg); }
.pil__row {
  width: 100%; display: grid; align-items: baseline; gap: .45rem 1.25rem;
  grid-template-columns: auto 1fr auto;
  padding: clamp(1.05rem, 2.1vw, 1.55rem) 0; text-align: left;
  transition: padding-left .5s var(--e-out);
}
.pil__row:hover { padding-left: .55rem; }
.pil__n {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  font-size: .7rem; letter-spacing: .16em; color: var(--live-ink); width: 2rem; flex: none;
}
.pil__name {
  font-family: var(--f-display); font-weight: 800; font-stretch: 106%;
  text-transform: uppercase; letter-spacing: -.021em;
  font-size: clamp(1.4rem, 3.4vw, 2.5rem); line-height: 1;
  transition: color .3s var(--e);
}
.pil__row:hover .pil__name { color: var(--accent); }
.pil__row[aria-expanded="true"] .pil__name { color: var(--accent); }
.pil__line { grid-column: 2; font-size: .95rem; color: var(--fg-mid); max-width: 48ch; }
.pil__tog {
  grid-row: 1; grid-column: 3; align-self: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--hair-2); position: relative; flex: none;
  transition: background .35s var(--e), border-color .35s var(--e), color .35s var(--e), transform .5s var(--e-out);
}
.pil__tog::before, .pil__tog::after {
  content: ""; position: absolute; inset: 50% 29%; height: 1.4px;
  background: currentColor; transform: translateY(-50%);
  transition: transform .45s var(--e-out), opacity .3s;
}
.pil__tog::after { transform: translateY(-50%) rotate(90deg); }
.pil__row[aria-expanded="true"] .pil__tog { background: var(--live); border-color: var(--live); color: var(--ink); transform: rotate(180deg); }
.pil__row[aria-expanded="true"] .pil__tog::after { opacity: 0; }
.js .pil__panel[hidden] { display: none; }
.motion .pil__panel { animation: panelIn .5s var(--e-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(-.55rem); } }
.pil__in { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); padding-bottom: clamp(1.75rem, 3.2vw, 2.5rem); }
.pil__body { color: var(--fg-mid); max-width: 52ch; font-size: 1.04rem; }
.pil__list { display: grid; gap: .45rem; margin-top: 1.15rem; }
.pil__list li { display: flex; gap: .65rem; font-size: .95rem; color: var(--fg-mid); }
.pil__list li::before { content: "—"; color: var(--live-ink); flex: none; }
.pil__shot { border-radius: 3px; overflow: hidden; align-self: start; }
.pil__shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 880px) {
  .pil__row { grid-template-columns: 3.75rem minmax(0,1fr) auto; }
  /* column one is the number gutter and stays empty, so the panel lines up
     under the pillar name rather than under the 01 */
  .pil__in { grid-template-columns: 3.75rem minmax(0, 1.05fr) minmax(0, .8fr); }
  .pil__in > p { grid-column: 2; }
  .pil__in > div { grid-column: 3; }
}

/* ==========================================================================
   READY TO ROLL
   ========================================================================== */
.conv { display: grid; gap: clamp(1.25rem, 2.6vw, 2rem); align-items: center; }
.conv__from { position: relative; border-radius: 3px; overflow: hidden; }
.conv__from img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.conv__stamp {
  position: absolute; left: .9rem; bottom: .9rem;
  display: flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--paper); padding: .45rem .8rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-stretch: 78%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .16em;
}
.conv__arrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .68rem; letter-spacing: .19em; color: var(--fg-low);
}
.conv__arrow::after { content: ""; height: 1px; flex: 1; background: var(--hair); }

.bank { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.bank__i { position: relative; border-radius: 2px; overflow: hidden; background: var(--paper-3); }
.bank__i img { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.motion .bank__i { opacity: 0; transform: scale(.9) translateY(6px); }
.motion [data-r].is-in .bank__i { animation: bankIn .55s var(--e-out) forwards; animation-delay: calc(var(--i) * 42ms); }
@keyframes bankIn { to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .bank { grid-template-columns: repeat(3, 1fr); } }

.stat3 { display: grid; gap: 2px; background: var(--fg); border: 2px solid var(--fg); }
.stat3__i { background: var(--bg); padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1rem, 2vw, 1.6rem); display: grid; gap: .25rem; }
.stat3__n {
  font-family: var(--f-display); font-weight: 800; font-stretch: 106%;
  font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1; letter-spacing: -.035em;
}
.stat3__l { font-size: .9rem; color: var(--fg-mid); }
@media (min-width: 760px) { .stat3 { grid-template-columns: repeat(3, 1fr); } }

.steps { display: grid; gap: 2px; background: var(--fg); border: 2px solid var(--fg); }
.step { background: var(--bg); padding: clamp(1.3rem, 2.4vw, 1.9rem); display: grid; gap: .55rem; align-content: start; transition: background .4s var(--e); }
.step:hover { background: var(--hover); }
.step__n { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; font-size: .66rem; letter-spacing: .19em; color: var(--live-ink); }
.step__t { font-family: var(--f-display); font-weight: 800; font-stretch: 102%; text-transform: uppercase; letter-spacing: -.014em; font-size: 1.12rem; line-height: 1; }
.step__b { font-size: .93rem; color: var(--fg-mid); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   PROGRAMMES
   Four chapters. Each opens with a full-width header carrying the numeral, the
   purpose and the price on one line — those are the two things anyone is
   comparing — and the detail sits underneath it. The flagship runs on ink.
   ========================================================================== */
.prog {
  background: var(--bg); color: var(--fg);
  border-top: 2px solid var(--fg);
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gut) clamp(3rem, 6vw, 5.5rem);
}
.prog:last-of-type { border-bottom: 2px solid var(--fg); }
.prog--tint { --bg: var(--paper-2); --hover: #E7E1D6; }
.prog--dark {
  --bg: var(--ink); --fg: #FFFCF7;
  --fg-mid: rgba(255,252,247,.86); --fg-low: rgba(255,252,247,.64);
  --hair: rgba(255,252,247,.22); --hair-2: rgba(255,252,247,.4);
  --raise: rgba(255,252,247,.07); --hover: var(--ink-2);
  --accent: var(--live-2);
  border-color: var(--ink);
}
@media (min-width: 1400px) { .prog { padding-inline: calc((100vw - 1400px) / 2 + var(--gut)); } }

/* --- the chapter header --------------------------------------------------- */
.prog__head {
  display: grid; gap: .35rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.prog__n {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  font-size: .72rem; letter-spacing: .2em; color: var(--accent);
}
.prog__verb {
  font-family: var(--f-display); font-weight: 800; font-stretch: 114%;
  text-transform: uppercase; letter-spacing: -.035em; line-height: .86;
  font-size: clamp(2.6rem, 8vw, 6rem); color: var(--accent);
}
.prog__name {
  font-family: var(--f-display); font-weight: 700; font-stretch: 84%;
  text-transform: uppercase; font-size: .84rem; letter-spacing: .17em;
  color: var(--fg-mid);
}
.prog__price { display: flex; align-items: baseline; gap: .6rem; }
.prog__price b {
  font-family: var(--f-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -.04em;
}
.prog__price span {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .68rem; letter-spacing: .18em; color: var(--fg-low);
}
@media (min-width: 900px) {
  .prog__head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end; gap: .4rem clamp(1.5rem, 3vw, 2.5rem);
  }
  .prog__n { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: .5rem; }
  .prog__verb { grid-column: 2; grid-row: 1; }
  .prog__name { grid-column: 2; grid-row: 2; }
  .prog__price { grid-column: 3; grid-row: 1 / span 2; align-self: end; }
}

/* --- the detail ----------------------------------------------------------- */
.prog__main { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
.prog__shot { display: grid; gap: .7rem; }
.prog__shot img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.prog__cap {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .17em; color: var(--fg-low);
}
.prog__body { display: grid; gap: .9rem; align-content: start; max-width: 42rem; }
.prog__promise {
  font-family: var(--f-display); font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.12; letter-spacing: -.024em;
  max-width: 24ch;
}
.prog__lede { color: var(--fg-mid); max-width: 50ch; }
.prog__lab {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .19em;
  color: var(--fg-low); margin-top: .7rem;
  padding-top: .9rem; border-top: 1px solid var(--hair);
}
.prog__list { display: grid; gap: .42rem; }
.prog__list li { display: flex; gap: .65rem; font-size: .97rem; line-height: 1.45; color: var(--fg-mid); }
.prog__list li::before { content: ""; width: 5px; height: 5px; margin-top: .6rem; border-radius: 50%; background: var(--accent); flex: none; }
.prog__parts { display: grid; gap: .9rem; }
.prog__parts li { display: grid; gap: .18rem; padding-left: 1rem; border-left: 2px solid var(--accent); }
.prog__parts b { font-family: var(--f-display); font-weight: 800; font-stretch: 92%; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }
.prog__parts span { font-size: .95rem; line-height: 1.45; color: var(--fg-mid); }
.prog__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.prog__tags li { font-size: .8rem; padding: .26rem .65rem; border-radius: 999px; border: 1px solid var(--hair-2); color: var(--fg-mid); }
.prog__point {
  font-family: var(--f-display); font-weight: 600; font-stretch: 96%;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.26; letter-spacing: -.018em;
  color: var(--fg); max-width: 34ch;
  padding-top: 1rem; border-top: 1px solid var(--hair); margin-top: .4rem;
}
.prog__cta { margin-top: .6rem; }
.prog__cta .btn { border-radius: 0; }
@media (min-width: 960px) {
  .prog__main { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .prog__shot { position: sticky; top: 8rem; }
}

/* --- the sticky index ----------------------------------------------------- */
.pidx { display: none; }
@media (min-width: 1500px) {
  .pidx {
    display: grid; gap: .1rem;
    position: fixed; left: 1.75rem; top: 50%; transform: translateY(-50%); z-index: 40;
  }
  .pidx__i {
    display: grid; gap: .1rem; padding: .5rem .6rem .5rem 0;
    border-left: 2px solid var(--hair-2); padding-left: .8rem;
    transition: border-color .35s var(--e), opacity .35s var(--e);
    opacity: .45;
  }
  .pidx__i:hover { opacity: 1; }
  .pidx__i.is-on { opacity: 1; border-left-color: var(--live); }
  .pidx__n { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; font-size: .6rem; letter-spacing: .2em; color: var(--fg-low); }
  .pidx__v { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; color: var(--fg); }
  .pidx__i.is-on .pidx__v { color: var(--live-ink); }
}

/* ------------------------------------------- the one-line comparison strip -- */
.lv {
  display: grid; gap: 2px; background: var(--fg);
  border: 2px solid var(--fg);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.lv__i {
  background: var(--bg); color: var(--fg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.2rem, 2vw, 1.6rem);
  display: grid; gap: .45rem; align-content: start;
  transition: background .35s var(--e);
}
.lv__i:hover { background: var(--hover); }
.lv__i--flag {
  --bg: var(--ink); --fg: #FFFCF7; --fg-mid: rgba(255,252,247,.86);
  --fg-low: rgba(255,252,247,.64); --raise: rgba(255,252,247,.08);
  --hover: var(--ink-2); --accent: var(--live-2);
  background: var(--ink); color: var(--fg);
}
.lv__i--flag:hover { background: var(--ink-2); }
.lv__n { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; font-size: .64rem; letter-spacing: .19em; color: var(--fg-low); }
.lv__name { font-family: var(--f-display); font-weight: 800; font-stretch: 104%; text-transform: uppercase; letter-spacing: -.026em; line-height: .95; font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.lv__verb { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; text-transform: uppercase; font-size: .78rem; letter-spacing: .14em; color: var(--accent); }
.lv__who { font-size: .92rem; line-height: 1.4; color: var(--fg-mid); margin-top: .3rem; }
.lv__price { display: flex; align-items: baseline; gap: .45rem; margin-top: auto; padding-top: .9rem; font-family: var(--f-display); font-weight: 700; font-stretch: 76%; text-transform: uppercase; font-size: .64rem; letter-spacing: .17em; color: var(--fg-low); }
.lv__price b { font-weight: 800; font-stretch: 106%; text-transform: none; letter-spacing: -.03em; font-size: 1.65rem; line-height: 1; color: var(--fg); }
@media (min-width: 760px) { .lv { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lv { grid-template-columns: repeat(4, 1fr); } .lv__i { grid-template-rows: auto auto auto auto 1fr auto; } }


/* ==========================================================================
   founders
   ========================================================================== */
.who { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.who__one { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
.who__shot { border-radius: 3px; overflow: hidden; position: relative; }
.who__shot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.who__chip {
  position: absolute; left: .8rem; bottom: .8rem;
  display: flex; align-items: center; gap: .45rem;
  background: var(--ink); color: var(--paper); padding: .35rem .7rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .62rem; letter-spacing: .16em;
}
.who__name { font-family: var(--f-display); font-weight: 800; font-stretch: 104%; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; font-size: clamp(1.55rem, 3vw, 2.3rem); }
.who__role { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; text-transform: uppercase; font-size: .67rem; letter-spacing: .17em; color: var(--live-ink); margin-top: .5rem; margin-bottom: 1rem; }
.who__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.25rem; }
.who__tag { font-size: .77rem; padding: .26rem .65rem; border-radius: 999px; border: 1px solid var(--hair); color: var(--fg-mid); }
@media (min-width: 840px) {
  .who__one { grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .who__one--r .who__shot { order: 2; }
}

/* ==========================================================================
   what got cheap / what got valuable
   Same heavy frame as the programmes and the disciplines. Deliberately weighted:
   the left column sits back in the duller paper with its lines struck through,
   the right comes forward in the brightest. The page should not present them as
   equals — that inequality is the entire argument of the section.
   ========================================================================== */
.ba {
  display: grid; gap: 2px;
  background: var(--fg); border: 2px solid var(--fg);
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
.ba__col {
  background: var(--paper-3);
  padding: clamp(1.6rem, 3vw, 2.5rem) clamp(1.35rem, 2.4vw, 2rem);
  display: grid; gap: 1.1rem; align-content: start;
}
.ba__col--after { background: var(--paper); }
.ba__h {
  font-family: var(--f-display); font-weight: 800; font-stretch: 84%;
  text-transform: uppercase; font-size: .84rem; letter-spacing: .13em;
  color: var(--fg-low); display: flex; align-items: center; gap: .5rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--hair); margin-bottom: .3rem;
}
.ba__col--after .ba__h { color: var(--live-ink); }
.ba__q {
  font-family: var(--f-display); font-weight: 600; font-stretch: 98%;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem); line-height: 1.2; letter-spacing: -.022em;
  padding-left: 1.1rem; border-left: 1px solid var(--hair); color: var(--fg-mid);
}
.ba__col--after .ba__q { border-left: 2px solid var(--live); color: var(--fg); }
/* struck through, because that is exactly what happened to it */
.ba__col:not(.ba__col--after) .ba__q {
  opacity: .62;
  text-decoration: line-through;
  text-decoration-color: rgba(176, 77, 21, .7);
  text-decoration-thickness: 2px;
}
.ba__note { font-size: .84rem; color: var(--fg-low); margin-top: 1.1rem; max-width: 72ch; }
@media (min-width: 820px) { .ba { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   cards
   ========================================================================== */
.cards { display: grid; gap: 2px; background: var(--fg); border: 2px solid var(--fg); }
.card {
  background: var(--bg); padding: clamp(1.3rem, 2.3vw, 1.85rem);
  display: grid; gap: .65rem; align-content: start;
  transition: background .4s var(--e);
}
.card:hover { background: var(--hover); }
.card__k { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; text-transform: uppercase; font-size: .65rem; letter-spacing: .19em; color: var(--live-ink); }
.card__t { font-family: var(--f-display); font-weight: 800; font-stretch: 102%; text-transform: uppercase; letter-spacing: -.016em; line-height: 1.02; font-size: clamp(1.08rem, 1.7vw, 1.3rem); }
.card__b { font-size: .93rem; color: var(--fg-mid); }
.card__list { display: grid; gap: .32rem; margin-top: .25rem; }
.card__list li { font-size: .87rem; color: var(--fg-mid); display: flex; gap: .55rem; }
.card__list li::before { content: "—"; color: var(--live-ink); flex: none; }
.card__cta { margin-top: .6rem; }
@media (min-width: 720px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* loose cards — bordered, for linked items with pictures */
.tiles { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 720px) { .tiles--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
.tile { display: grid; gap: .85rem; align-content: start; }
.tile__shot { border-radius: 3px; overflow: hidden; }
.tile__shot img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .9s var(--e-out); }
.tile:hover .tile__shot img { transform: scale(1.035); }
.tile__t { font-family: var(--f-display); font-weight: 800; font-stretch: 102%; text-transform: uppercase; letter-spacing: -.018em; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.03; }
.tile__b { font-size: .93rem; color: var(--fg-mid); }

.soon {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--live); color: var(--live-ink); padding: .24rem .6rem; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .62rem; letter-spacing: .17em;
}

/* ==========================================================================
   split band — a big picture beside a big statement
   ========================================================================== */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.split__shot { border-radius: 3px; overflow: hidden; }
.split__shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split__body { display: grid; gap: 1.25rem; align-content: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--r .split__shot { order: 2; }
  .split__shot img { aspect-ratio: 5/6; }
}

/* ==========================================================================
   page hero (inner pages)
   ========================================================================== */
.phero { padding-top: clamp(8rem, 17vh, 12rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; background: var(--bg); color: var(--fg); }
.phero__in { display: grid; gap: clamp(1.15rem, 2.2vw, 1.75rem); }
.phero__t { max-width: 15ch; }
.phero__sub { max-width: 52ch; }
.phero__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: end; }
.phero__shots { display: none; }
@media (min-width: 1000px) {
  .phero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .72fr); }
  .phero__shots { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .phero__shots figure { border-radius: 3px; overflow: hidden; }
  .phero__shots img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
  .phero__shots figure:nth-child(2) { margin-top: 2.5rem; }
}

/* ==========================================================================
   end CTA
   ========================================================================== */
/* colour as well as background: without it a .end on a dark surface keeps
   the inherited ink and the headline disappears into the page */
.end {
  position: relative; overflow: hidden;
  background: var(--bg); color: var(--fg);
  padding-block: clamp(5rem, 11vw, 9.5rem) clamp(4rem, 9vw, 8rem);
}
.end__ghost {
  position: absolute; left: 50%; bottom: -.16em; transform: translateX(-50%);
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%;
  text-transform: uppercase; font-size: clamp(6rem, 25vw, 25rem); line-height: .8;
  color: var(--fg); opacity: .045; white-space: nowrap; pointer-events: none; user-select: none;
}
.end__in { position: relative; z-index: 1; display: grid; gap: clamp(1.4rem, 2.8vw, 2.1rem); justify-items: start; }
.end__or { font-size: .9rem; color: var(--fg-low); }
.end__or a { color: var(--fg-mid); border-bottom: 1px solid var(--hair-2); }
.end__or a:hover { color: var(--accent); border-color: var(--live); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; border-top: 1px solid var(--fg); }
.faq__i { border-bottom: 1px solid var(--hair); }
.faq__q { list-style: none; cursor: pointer; padding: 1.05rem 2.5rem 1.05rem 0; position: relative; font-weight: 500; font-size: 1.02rem; transition: color .3s var(--e); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent); }
.faq__q::after {
  content: ""; position: absolute; right: .55rem; top: 1.55rem; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg); transition: transform .4s var(--e-out);
}
.faq__i[open] .faq__q::after { transform: translateY(-15%) rotate(-135deg); }
.faq__a { padding-bottom: 1.3rem; color: var(--fg-mid); max-width: 70ch; }

/* ==========================================================================
   forms
   ========================================================================== */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .4rem; }
.field > label { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; text-transform: uppercase; font-size: .67rem; letter-spacing: .16em; color: var(--fg-low); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0;
  padding: .75rem .1rem; font-size: 1.02rem;
  transition: border-color .3s var(--e);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--live); outline: none; }
.field textarea { min-height: 7rem; resize: vertical; }
.field select { appearance: none; cursor: pointer; }
.field--sel { position: relative; }
.field--sel::after {
  content: ""; position: absolute; right: .35rem; bottom: 1.25rem; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); pointer-events: none; opacity: .5;
}
.form__row { display: grid; gap: 1.05rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .82rem; color: var(--fg-low); }
.form__msg { border-left: 2px solid var(--live); padding: .5rem 0 .5rem 1rem; font-size: .95rem; }
.form__msg[hidden] { display: none; }

/* ==========================================================================
   scorecard
   ========================================================================== */
.sc { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.sc__bar { display: grid; gap: .55rem; }
.sc__segs { display: flex; gap: 3px; }
.sc__seg { height: 3px; flex: 1; background: var(--hair-2); border-radius: 2px; transition: background .4s var(--e); }
.sc__seg.is-on { background: var(--live); }
.sc__count { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; text-transform: uppercase; font-size: .67rem; letter-spacing: .17em; color: var(--fg-low); display: flex; justify-content: space-between; gap: 1rem; }
.sc__q { display: grid; gap: 1.4rem; }
.sc__q[hidden] { display: none; }
.sc__pillar { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; text-transform: uppercase; font-size: .67rem; letter-spacing: .19em; color: var(--live-ink); }
.sc__ask { font-family: var(--f-display); font-weight: 700; font-stretch: 100%; font-size: clamp(1.4rem, 3.2vw, 2.15rem); line-height: 1.08; letter-spacing: -.025em; max-width: 22ch; }
.sc__opts { display: grid; gap: .45rem; max-width: 42rem; }
.sc__opt {
  display: flex; align-items: center; gap: .9rem; text-align: left;
  border: 1px solid var(--hair); border-radius: 3px; padding: .9rem 1.05rem;
  font-size: 1rem; width: 100%;
  transition: border-color .3s var(--e), background .3s var(--e);
}
.sc__opt:hover { border-color: var(--live); background: rgba(255,122,61,.04); }
.sc__opt.is-on { border-color: var(--live); background: rgba(255,122,61,.08); }
.sc__dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: none; border: 1px solid var(--hair-2); position: relative; }
.sc__opt.is-on .sc__dot { border-color: var(--live); }
.sc__opt.is-on .sc__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--live); }
.sc__nav { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sc__back { font-size: .9rem; color: var(--fg-low); }
.sc__back:hover { color: var(--fg); }
.sc__back[hidden] { display: none; }

.sc__result { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.sc__result[hidden] { display: none; }
.sc__score { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sc__big { font-family: var(--f-display); font-weight: 800; font-stretch: 115%; font-size: clamp(4rem, 14vw, 8.5rem); line-height: .85; letter-spacing: -.045em; color: var(--live-ink); }
.sc__outof { font-size: 1rem; color: var(--fg-low); }
.sc__bars { display: grid; gap: .6rem; }
.sc__row { display: grid; grid-template-columns: 7rem 1fr 3rem; gap: .9rem; align-items: center; font-size: .85rem; }
.sc__rowl { font-family: var(--f-display); font-weight: 700; font-stretch: 78%; text-transform: uppercase; letter-spacing: .13em; font-size: .65rem; }
.sc__rowt { height: 4px; background: var(--hair-2); border-radius: 3px; overflow: hidden; }
.sc__rowf { height: 100%; background: var(--live); width: 0; transition: width .9s var(--e-out); border-radius: 3px; }
.sc__rown { color: var(--fg-low); font-variant-numeric: tabular-nums; text-align: right; }

/* ==========================================================================
   reveals
   ========================================================================== */
.motion [data-r] { opacity: 0; transform: translateY(1.3rem); }
.motion [data-r].is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--e-out), transform .9s var(--e-out);
  transition-delay: var(--d, 0s);
}
.motion .hero__t .ln > span { transform: translateY(105%); }
.motion .hero.is-ready .hero__t .ln > span { transform: none; transition: transform 1s var(--e-out); transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  .motion [data-r], .motion [data-r].is-in,
  .motion .hero__t .ln > span, .motion .bank__i { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   THE GROWTH JOURNEY
   The only diagram on the site. Everything else here is a list, so this one
   has to read as a path — one continuous rail with eight marks on it, labels
   alternating above and below because that is the only way eight of them fit
   across a screen without shrinking to nothing.
   ========================================================================== */
.jt { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* --- narrow: a vertical run, with one unbroken rail down the left --------- */
.jt__track { position: relative; display: grid; padding-left: 2.75rem; }
.jt__rail {
  position: absolute; left: .55rem; top: .6rem; bottom: .6rem; width: 1px;
  background: var(--hair-2);
}
.jt__rail i {
  position: absolute; inset: 0; background: var(--live);
  transform: scaleY(0); transform-origin: 50% 0;
}
.motion [data-r].is-in .jt__rail i { animation: railY 1.9s var(--e-out) .1s forwards; }
@keyframes railY { to { transform: scaleY(1); } }
.js:not(.motion) .jt__rail i { transform: none; }

.jt__i { position: relative; }
.jt__link {
  display: grid; gap: .3rem; padding: 1rem 0 1.15rem;
  border-bottom: 1px solid var(--hair);
  transition: padding-left .4s var(--e-out);
}
.jt__i:last-child .jt__link { border-bottom: 0; }
.jt__link:hover { padding-left: .45rem; }
.jt__mark {
  /* centred on the rail, not butted against it */
  position: absolute; left: calc(-2.2rem - 5px); top: 1.7rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--hair-2);
  transition: background .35s var(--e), border-color .35s var(--e), transform .35s var(--e);
}
.jt__link:hover .jt__mark { background: var(--live); border-color: var(--live); transform: scale(1.25); }

.jt__lab { display: grid; gap: .28rem; }
.jt__n {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  font-size: .66rem; letter-spacing: .18em; color: var(--live-ink);
}
.jt__stage {
  font-family: var(--f-display); font-weight: 800; font-stretch: 92%;
  text-transform: uppercase; letter-spacing: -.012em; line-height: 1;
  font-size: clamp(1.3rem, 4.6vw, 1.7rem);
  transition: color .3s var(--e);
}
.jt__link:hover .jt__stage { color: var(--accent); }
.jt__why { font-size: .92rem; line-height: 1.4; color: var(--fg-mid); max-width: 42ch; }
.jt__link:hover 
/* --- wide: the horizontal track ------------------------------------------ */
@media (min-width: 1080px) {
  .jt__track {
    grid-template-columns: repeat(8, 1fr);
    padding-left: 0;
    align-items: stretch;
  }
  .jt__rail {
    left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px;
  }
  .jt__rail i { transform: scaleX(0); transform-origin: 0 50%; }
  .motion [data-r].is-in .jt__rail i { animation: railX 2.1s var(--e-out) .1s forwards; }
  @keyframes railX { to { transform: scaleX(1); } }

  .jt__i { display: block; }
  .jt__link {
    position: relative; display: block; height: 23rem;
    padding: 0 .9rem 0 0; border-bottom: 0;
  }
  .jt__link:hover { padding-left: 0; }

  /* the mark sits on the rail at the start of its own column, and the label
     hangs off it left-aligned — so each label belongs to a visible point
     rather than floating between two of them */
  .jt__mark {
    left: 0; top: 50%; transform: translate(-50%, -50%);
    width: 13px; height: 13px;
  }
  .jt__link:hover .jt__mark { transform: translate(-50%, -50%) scale(1.3); }

  .jt__lab { position: absolute; left: 0; right: .9rem; gap: .3rem; }
  /* a hairline tick joining each label to its mark */
  .jt__lab::after {
    content: ""; position: absolute; left: 0; width: 1px;
    background: var(--hair-2); height: 1.4rem;
  }
  /* the rail is the ol's first child, so count list items only — otherwise
     the whole thing alternates the wrong way round and starts underneath */
  .jt__i:nth-of-type(odd) .jt__lab { bottom: calc(50% + 2rem); }
  .jt__i:nth-of-type(odd) .jt__lab::after { bottom: -1.6rem; }
  .jt__i:nth-of-type(even) .jt__lab { top: calc(50% + 2rem); }
  .jt__i:nth-of-type(even) .jt__lab::after { top: -1.6rem; }

  .jt__stage { font-size: 1.05rem; font-stretch: 80%; line-height: 1.04; }
  .jt__why { font-size: .78rem; line-height: 1.38; max-width: none; }
    
  /* the marks land one after another, in step with the rail drawing across */
  .motion [data-r] .jt__mark { opacity: 0; }
  .motion [data-r].is-in .jt__mark {
    animation: markIn .5s var(--e-out) forwards;
    animation-delay: calc(.25s + var(--i) * .17s);
  }
  @keyframes markIn { to { opacity: 1; } }
  .motion [data-r] .jt__lab { opacity: 0; transform: translateY(.5rem); }
  .motion [data-r].is-in .jt__lab {
    animation: labIn .7s var(--e-out) forwards;
    animation-delay: calc(.32s + var(--i) * .17s);
  }
  @keyframes labIn { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .motion .jt__mark, .motion .jt__lab { opacity: 1 !important; transform: none !important; animation: none !important; }
  .motion .jt__rail i { animation: none !important; transform: none !important; }
}

/* ==========================================================================
   a dark band — used once, for the production work
   ========================================================================== */
.dark { background: var(--ink); color: var(--fg); position: relative; overflow: hidden; }
.dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.dark > * { position: relative; z-index: 1; }
.sc__row--gap .sc__rowl { color: var(--live-ink); }
.sc__row--gap .sc__rowf { background: var(--live); }
.sc__row:not(.sc__row--gap) .sc__rowf { background: var(--fg); opacity: .32; }
.sc__gap {
  border-top: 1px solid var(--live); padding-top: 1.1rem; display: grid; gap: .5rem;
}
.sc__gapname {
  font-family: var(--f-display); font-weight: 800; font-stretch: 110%;
  text-transform: uppercase; letter-spacing: -.03em; line-height: .95;
  font-size: clamp(2rem, 5vw, 3.5rem); color: var(--live-ink);
}
.sc__rec { display: grid; gap: .4rem; border-top: 1px solid var(--hair); padding-top: 1.1rem; }
/* send-your-result: the one place the diagnostic asks for anything, so it gets
   a heavier rule than the blocks above it */
.sc__send {
  display: grid; gap: .9rem;
  border-top: 2px solid var(--fg); padding-top: clamp(1.4rem, 2.6vw, 1.9rem);
  scroll-margin-top: 6rem;
}
.sc__send .form { margin-top: .5rem; }
.sc__send .form__note a { color: var(--fg-mid); border-bottom: 1px solid var(--hair-2); }
.sc__recname { font-family: var(--f-display); font-weight: 800; font-stretch: 102%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.2rem, 2.2vw, 1.6rem); }

/* the 'maybe' list */
.maybe { display: grid; gap: .5rem; }
.maybe li {
  display: flex; gap: .7rem; font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.45; color: var(--fg-mid);
}
.maybe li::before { content: ""; flex: none; width: 14px; height: 1px; margin-top: .85em; background: var(--live); }


/* the discipline cover — typographic, because a photograph here would be
   decorating rather than telling the truth about the work */
.dplate {
  position: relative; overflow: hidden; align-self: end;
  border: 1px solid var(--fg); border-radius: 3px;
  min-height: clamp(15rem, 28vw, 22rem);
  display: grid; align-content: end; gap: .5rem;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  background: var(--paper-2);
}
.dplate__ghost {
  position: absolute; right: -.06em; top: -.22em;
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(11rem, 24vw, 19rem); line-height: .8; letter-spacing: -.05em;
  color: var(--fg); opacity: .07; pointer-events: none;
}
.dplate__name {
  position: relative;
  font-family: var(--f-display); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase; letter-spacing: -.03em; line-height: .92;
  font-size: clamp(2rem, 4.4vw, 3rem);
}
.dplate__out {
  position: relative;
  font-family: var(--f-display); font-weight: 700; font-stretch: 84%;
  text-transform: uppercase; font-size: .72rem; letter-spacing: .16em;
  color: var(--live-ink); border-top: 1px solid var(--live); padding-top: .7rem;
  justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .motion .hero__layer img, .motion .hero__sub, .motion .hero__because,
  .motion .hero .actions, .motion .hero__cap {
    opacity: 1 !important; transform: none !important;
  }
  .motion .hero__glow, .motion }


/* ==========================================================================
   THE DIAGNOSIS
   The symptom list is the most persuasive thing on the page, so it is not a
   list — it is an instrument. Ticking your own symptoms is what turns
   "these people describe problems" into "these people are describing me".
   ========================================================================== */
.dxlede { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 900px) {
  .dxlede { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 3.5rem); }
}

/* the one panelled element on the site. It earns it: everything else is
   reading, this is the thing you use. */
.dx {
  display: grid; gap: clamp(2rem, 4vw, 3.25rem);
  margin-top: clamp(2.75rem, 5.5vw, 4.5rem);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: clamp(1.4rem, 3.2vw, 2.75rem);
}
@media (min-width: 960px) {
  .dx { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 4rem); }
  .dx__side { position: sticky; top: 7.5rem; align-self: start; }
}

.dx__side { display: grid; gap: 1.1rem; align-content: start; }
.dx__ask {
  font-family: var(--f-display); font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.1; letter-spacing: -.022em;
  max-width: 18ch;
}

.dx__meter { display: grid; gap: .7rem; }
.dx__count { display: flex; align-items: baseline; gap: .6rem; }
.dx__count b {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: .82; letter-spacing: -.045em;
  color: var(--live-ink); font-variant-numeric: tabular-nums;
  transition: color .4s var(--e);
}
.dx__count span {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .19em; color: var(--fg-low);
}
.dx__bar { display: block; height: 2px; background: var(--hair-2); position: relative; overflow: hidden; }
.dx__bar i {
  position: absolute; inset: 0 auto 0 0; width: 0; background: var(--live);
  transition: width .55s var(--e-out);
}

.dx__verdict {
  font-family: var(--f-display); font-weight: 600; font-stretch: 96%;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.3; letter-spacing: -.014em;
  color: var(--fg); max-width: 30ch; min-height: 3.2em;
}
.dx__note { font-size: .88rem; color: var(--fg-mid); }
.dx__cta { margin-top: .5rem; display: grid; gap: .9rem; justify-items: start; }
.dx__cta .btn { width: 100%; max-width: 20rem; }

.dx__list { display: grid; border-top: 1px solid var(--fg); }
.dx__list li { border-bottom: 1px solid var(--hair); }
.dx__i {
  width: 100%; display: grid; align-items: center; gap: 1rem;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
  padding: clamp(.85rem, 1.6vw, 1.15rem) .35rem;
  text-align: left;
  transition: background .35s var(--e), padding-left .4s var(--e-out);
}
.dx__i:hover { background: rgba(18,18,22,.035); padding-left: .85rem; }
.dx__n {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  font-size: .68rem; letter-spacing: .16em; color: var(--fg-low);
  transition: color .3s var(--e);
}
.dx__t {
  font-size: clamp(1rem, 1.45vw, 1.12rem); line-height: 1.35; color: rgba(18,18,22,.78);
  transition: color .3s var(--e);
}
.dx__box {
  width: 1.4rem; height: 1.4rem; border: 1px solid var(--hair-2); border-radius: 2px;
  position: relative; justify-self: end;
  transition: background .3s var(--e), border-color .3s var(--e);
}
.dx__box::after {
  content: ""; position: absolute; left: 30%; top: 14%;
  width: 28%; height: 52%;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: transform .35s var(--e-out), opacity .25s var(--e);
}
.dx__i:hover .dx__box { border-color: var(--live); }
.dx__i[aria-checked="true"] { background: rgba(255,122,61,.07); }
.dx__i[aria-checked="true"] .dx__t { color: var(--fg); font-weight: 500; }
.dx__i[aria-checked="true"] .dx__n { color: var(--live-ink); }
.dx__i[aria-checked="true"] .dx__box { background: var(--live); border-color: var(--live); }
.dx__i[aria-checked="true"] .dx__box::after { transform: rotate(45deg) scale(1); opacity: 1; }

/* ==========================================================================
   THE SELL
   Every section has to end somewhere, and "end" should mean "here is the move".
   One repeated device: a heavy rule, the on-air dot, a line that reframes the
   section commercially, and an action. It becomes the page's rhythm — read a
   bit, get a nudge, read a bit.
   ========================================================================== */
.sell {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.2rem, 2.2vw, 1.6rem);
  border-top: 1px solid var(--fg);
  display: grid; gap: 1.1rem;
}
.sell__k {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .19em;
  color: var(--fg-low); white-space: nowrap;
}
.sell__t {
  font-family: var(--f-display); font-weight: 600; font-stretch: 96%;
  font-size: clamp(1.19rem, 1.7vw, 1.3rem); line-height: 1.28; letter-spacing: -.016em;
  color: var(--fg); max-width: 54ch;
}
.sell__t b { font-weight: 700; color: var(--accent); }
.sell__a { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
@media (min-width: 940px) {
  .sell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem);
  }
  .sell__a { justify-content: flex-end; }
}

/* ==========================================================================
   THE ROOM
   The belonging moment, and the one place the page stops being a column of
   text on paper. The photograph goes edge to edge and the content breaks into
   it — a different kind of object from every other section, which is the point.
   ========================================================================== */
.room { position: relative; }
.room__band {
  position: relative;
  width: 100vw; margin-inline: calc(50% - 50vw);
}
.room__band img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; }
.room__band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,13,.5), rgba(11,11,13,0) 55%);
}

.room__card {
  position: relative; z-index: 1;
  background: var(--paper);
  border-top: 3px solid var(--live);
  margin-top: -3.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid; gap: 1.1rem;
  box-shadow: 0 -24px 60px -34px rgba(11,11,13,.55);
}
.room__t { max-width: 14ch; }
.room__card .lede { max-width: 48ch; }
.room__ways { margin-top: .2rem; }

@media (min-width: 900px) {
  .room__band img { aspect-ratio: 21 / 8; }
  .room__card {
    margin-top: -9rem;
    margin-left: 0; max-width: 40rem;
    padding: clamp(2rem, 3.4vw, 3rem);
  }
}
@media (min-width: 1200px) {
  .room {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
  /* the band has to be tall enough to hold the card, or the card spills out of
     the top of the picture and reads as a mistake rather than an overlap */
  .room__band img { aspect-ratio: 16 / 9; min-height: 56rem; }
  .room__band { grid-column: 1 / -1; grid-row: 1; }
  .room__card {
    grid-column: 1; grid-row: 1;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) 0;
    max-width: 38rem; justify-self: start;
  }
}

/* the two halves of the argument, set against each other — the first sentence
   is the thing that stopped mattering, so it reads like it */
.vs { display: grid; gap: .22em; max-width: 24ch; }
.vs__a { color: var(--fg-low); }
.vs__b { color: var(--fg); }

/* hands the page down into the photograph */
.bridge {
  /* the photograph below is a big moment and needs air above it, not a line
     of type sitting on its edge */
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  font-family: var(--f-display); font-weight: 600; font-stretch: 96%;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.24; letter-spacing: -.02em;
  color: var(--fg-mid); max-width: 30ch;
}
.bridge b { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   THE FOUNDERS
   Two cells in one heavy frame, same language as the programmes. The credential
   line is pulled out as its own plate because it is the reason to believe any
   of the rest of it.
   ========================================================================== */
.founders {
  display: grid; gap: clamp(1.5rem, 3.2vw, 2.75rem);
}
.founder {
  background: var(--bg); display: grid; align-content: start;
  border: 2px solid var(--fg);
}
.founder__shot { margin: 0; }
.founder__shot img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 32%; display: block; }
.founder__body {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: grid; gap: .8rem; align-content: start;
}
.founder__role {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .67rem; letter-spacing: .19em; color: var(--accent);
}
.founder__name {
  font-family: var(--f-display); font-weight: 800; font-stretch: 104%;
  text-transform: uppercase; letter-spacing: -.03em; line-height: .92;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin-top: -.3rem;
}
.founder__cred {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .75rem 0 .9rem 1rem; border-left: 2px solid var(--live);
  font-size: .95rem; color: var(--fg-mid);
}
.founder__cred b {
  font-family: var(--f-display); font-weight: 800; font-stretch: 104%;
  text-transform: uppercase; letter-spacing: -.02em; font-size: 1.35rem;
  line-height: 1; color: var(--fg);
}
.founder__bio { font-size: .98rem; line-height: 1.55; color: var(--fg-mid); }
.founder__line {
  font-family: var(--f-display); font-weight: 600; font-stretch: 96%;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.3; letter-spacing: -.018em;
  color: var(--fg); padding-top: 1rem; border-top: 1px solid var(--hair);
}
.founder__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.founder__tags li {
  font-size: .78rem; padding: .26rem .65rem; border-radius: 999px;
  border: 1px solid var(--hair-2); color: var(--fg-mid);
}
@media (min-width: 860px) { .founders { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   THE WALL
   The home page's whole answer to "what do you do": eight words, very large.
   Each links to its own page, where the detail lives. Set as inline flow so it
   wraps like a paragraph rather than sitting in a grid — the page already has
   enough grids on it.
   ========================================================================== */
.wall {
  font-family: var(--f-display); font-weight: 800; font-stretch: 114%;
  text-transform: uppercase; letter-spacing: -.034em; line-height: 1.02;
  font-size: clamp(1.85rem, 6.2vw, 5.2rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  word-spacing: .12em;
}
.wall__w { color: var(--fg); transition: color .35s var(--e); }
.wall__w i { font-style: normal; color: var(--live); }
/* the deep vermilion sinks into black — on ink the stops and the accents use
   the lighter tone, as everywhere else on the site that inverts */
.t-dark .wall__w i { color: var(--live-2); }
.t-dark .rulehead__rule { background: var(--live-2); }
.t-dark .wall__w:hover { color: var(--live-2); }
.wall__w:hover { color: var(--accent); }
.wall__w:hover i { color: var(--fg); }

/* ==========================================================================
   FOR BUSINESS
   Picture left, proposition right, both inside the page's own measure. The
   asymmetry comes from the split being uneven, not from the image running off
   the edge of the screen.
   ========================================================================== */
.biz { display: grid; }
.biz__shot { margin: 0; }
.biz__shot img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.biz__body {
  display: grid; align-content: center; gap: .3rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 1000px) {
  .biz {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4.5vw, 4rem);
  }
  .biz__shot img { aspect-ratio: 5 / 4; }
  .biz__body { padding-top: 0; }
}

/* the seven areas — a numbered list, because seven never fit a three-up grid */
.areas { display: grid; border-top: 1px solid var(--fg); }
.areas__i {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .25rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--hair);
}
.areas__n {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  font-size: .66rem; letter-spacing: .19em; color: var(--live-ink); padding-top: .35rem;
}
.areas__b { display: grid; gap: .2rem; }
.areas__t {
  font-family: var(--f-display); font-weight: 800; font-stretch: 96%;
  text-transform: uppercase; letter-spacing: .02em; font-size: 1rem;
}
.areas__d { font-size: .93rem; line-height: 1.45; color: var(--fg-mid); max-width: 52ch; }
@media (min-width: 900px) { .areas { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); } }

/* a quieter wall, for longer runs of short phrases */
.wall--sm {
  font-size: clamp(1.35rem, 3.2vw, 2.65rem);
  font-stretch: 106%; letter-spacing: -.026em; line-height: 1.1;
}



/* ==========================================================================
   photographic page hero
   ========================================================================== */
.phero--shot {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink);
  padding-top: clamp(8rem, 18vh, 13rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.phero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.phero__stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.phero__stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,11,13,.82), rgba(11,11,13,0) 22%),
    linear-gradient(to right, rgba(11,11,13,.94) 30%, rgba(11,11,13,.45) 78%),
    linear-gradient(to top, rgba(11,11,13,.75), rgba(11,11,13,0) 45%);
}
.phero--shot .wrap { position: relative; z-index: 2; }
.phero--shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* grain sits above the picture and below the type — overlay blend on top of
     text turns white headlines grey */
  opacity: .4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ==========================================================================
   OUTCOMES
   The whole of the Why Engaged page. Set in sentence case at a restrained size
   with a numeral in the margin: six slabs of uppercase display type read as
   shouting, and the page has nothing to shout about — it is a list of results.
   ========================================================================== */
.outwrap { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.outwrap__side { display: grid; gap: 1rem; align-content: start; }
.outwrap__lede {
  font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6;
  color: var(--fg-mid); max-width: 34ch;
}

.out { display: grid; }
.out__i {
  display: grid; gap: .55rem;
  padding-block: clamp(1.6rem, 3.2vw, 2.6rem);
  border-top: 1px solid var(--hair);
}
.out__i:first-child { border-top: 1px solid var(--fg); }
.out__i:last-child { border-bottom: 1px solid var(--fg); }
.out__n {
  font-family: var(--f-display); font-weight: 600; font-stretch: 78%;
  font-size: .68rem; letter-spacing: .2em; color: var(--fg-low);
  font-variant-numeric: tabular-nums;
}
.out__t {
  font-family: var(--f-display); font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.08;
  letter-spacing: -.026em; max-width: 20ch;
}
.out__d {
  font-size: clamp(.98rem, 1.25vw, 1.06rem); line-height: 1.62;
  color: var(--fg-mid); max-width: 50ch;
}

@media (min-width: 1000px) {
  .outwrap { grid-template-columns: minmax(0, .7fr) minmax(0, 1.55fr); gap: clamp(3rem, 6vw, 6rem); }
  .outwrap__side { position: sticky; top: 8rem; }
  .out__i {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: baseline;
  }
  .out__n { grid-row: 1 / span 2; padding-top: .45rem; }
  .out__d { padding-top: .2rem; }
}

/* a band that says one thing without raising its voice */
.quiet { display: grid; gap: 1.1rem; max-width: 46rem; }
.quiet__t {
  font-family: var(--f-display); font-weight: 600; font-stretch: 100%;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.22; letter-spacing: -.026em;
}

/* shared list forms, used across several pages */
.cov { display: grid; border-top: 1px solid var(--fg); }
.cov__i {
  padding: .62rem 0; border-bottom: 1px solid var(--hair);
  font-size: 1rem; color: var(--fg-mid);
  transition: color .3s var(--e), padding-left .4s var(--e-out);
}
.cov__i:hover { color: var(--fg); padding-left: .3rem; }
@media (min-width: 620px) { .cov { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

.ways { display: grid; border-top: 1px solid var(--hair); }
.ways__i { display: grid; gap: .2rem; padding: .85rem 0; border-bottom: 1px solid var(--hair); }
.ways__i b { font-family: var(--f-display); font-weight: 800; font-stretch: 96%; text-transform: uppercase; font-size: .82rem; letter-spacing: .07em; }
.ways__i span { font-size: .92rem; color: var(--fg-mid); }

.pil__lab { font-family: var(--f-display); font-weight: 700; font-stretch: 76%; text-transform: uppercase; font-size: .66rem; letter-spacing: .18em; color: var(--fg-low); margin-bottom: .7rem; }

/* --- comparison-strip extras (restored: these were appended after the ladder
   block and went out with it) ---------------------------------------------- */
.lv__gets { display: grid; gap: .38rem; padding-top: .9rem; margin-top: .5rem; border-top: 1px solid var(--hair); }
.lv__gets > span { display: flex; gap: .55rem; font-size: .86rem; line-height: 1.4; color: var(--fg-mid); }
.lv__gets > span::before { content: ""; width: 4px; height: 4px; margin-top: .55rem; border-radius: 50%; background: var(--accent); flex: none; }
.lv__cta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem;
  font-family: var(--f-display); font-weight: 800; font-stretch: 84%;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .14em; color: var(--accent);
}
.lv__cta i { font-style: normal; transition: transform .4s var(--e-out); }
.lv__i:hover .lv__cta i { transform: translateX(4px); }

/* the site is not open yet, and the page should say so rather than imply it */
.wait {
  display: grid; gap: .9rem; justify-items: start;
  border: 2px solid var(--fg); padding: clamp(1.25rem, 2.6vw, 2rem);
}
.wait__k {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .19em; color: var(--fg-low);
}
.wait__t {
  font-family: var(--f-display); font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; letter-spacing: -.022em;
  max-width: 36ch;
}
.wait__b { font-size: .95rem; color: var(--fg-mid); max-width: 52ch; }
@media (min-width: 900px) {
  .wait { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2.5rem; }
  .wait__k, .wait__t, .wait__b { grid-column: 1; }
  .wait .btn { grid-column: 2; grid-row: 1 / -1; }
}

/* single-column variant of the shared list */
@media (min-width: 620px) { .cov--one { grid-template-columns: 1fr; } }
.cov--one .cov__i { font-size: clamp(1.02rem, 1.5vw, 1.18rem); padding: .85rem 0; }

/* ==========================================================================
   THE FILMS
   The client's own work, self-hosted. Nothing loads until you press play —
   fifteen videos on one page is a lot of bytes to spend on someone who might
   only watch one.
   ========================================================================== */
/* portrait and landscape films are kept in separate grids: mixed together the
   rows never line up and the whole thing reads as a mistake */
.film { position: relative; }
.film__go {
  display: block; width: 100%; padding: 0; position: relative;
  background: var(--paper-3); overflow: hidden; cursor: pointer;
}
.film__v { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__ui {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(11,11,13,.55), rgba(11,11,13,.1));
  transition: opacity .35s var(--e);
}
.film__play {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--live); position: relative;
  transition: transform .35s var(--e-out);
}
.film__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-left: .8rem solid var(--ink);
  border-block: .5rem solid transparent;
}
.film__go:hover .film__play { transform: scale(1.1); }
.film__t {
  position: absolute; right: .6rem; bottom: .55rem;
  font-family: var(--f-display); font-weight: 700; font-stretch: 78%;
  font-size: .64rem; letter-spacing: .12em; color: #FFFCF7;
  font-variant-numeric: tabular-nums;
}
.film.is-playing .film__ui { opacity: 0; pointer-events: none; }


/* ==========================================================================
   CLIENT CASE STUDIES
   The client's own work, laid out the way she lays it out: who it was for, what
   we did, and that client's films sitting next to it.
   ========================================================================== */
.cases { display: grid; }
.case {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--hair);
}
.case:first-child { border-top: 1px solid var(--fg); }
.case:last-child { border-bottom: 1px solid var(--fg); }
.case__body { display: grid; gap: .65rem; align-content: start; }
.case__k {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .64rem; letter-spacing: .19em; color: var(--fg-low);
}
.case__name {
  font-family: var(--f-display); font-weight: 800; font-stretch: 104%;
  text-transform: uppercase; letter-spacing: -.03em; line-height: .96;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.case__p { font-size: .97rem; line-height: 1.58; color: var(--fg-mid); max-width: 54ch; }
.case__svc {
  font-family: var(--f-display); font-weight: 700; font-stretch: 78%;
  text-transform: uppercase; font-size: .64rem; letter-spacing: .15em;
  color: var(--fg-low); padding-top: .7rem; border-top: 1px solid var(--hair); margin-top: .3rem;
}
.case__films { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: start; }
.case__films .film--wide { grid-column: 1 / -1; }
.case__films .film--tall .film__go { aspect-ratio: 9 / 16; }
.case__films .film--wide .film__go { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .case { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .case__films { position: sticky; top: 8rem; }
}

/* the factual record, beside each founder */
.recs { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
.rec { display: grid; gap: .9rem; align-content: start; }
.rec__who {
  font-family: var(--f-display); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase; letter-spacing: -.02em; font-size: 1.05rem;
}
@media (min-width: 820px) { .recs { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); } }

/* ==========================================================================
   phones
   Layout and touch corrections only — the type scale is handled by the clamp
   floors above, so sizes stay continuous rather than jumping at a breakpoint.
   ========================================================================== */
@media (max-width: 639px) {
  /* Buttons go full width and stack. Two pills of different widths sitting
     left inside a centred hero read as a mistake, and a 160px-wide target is
     mean on a phone. */
  .actions, .sell__a {
    flex-direction: column; align-items: stretch;
    width: 100%; justify-self: stretch; gap: .6rem;
  }
  /* white-space:nowrap is fine until a label contains something
     unbreakable, like an email address — then it forces the button
     wider than the screen. Full width, and wrap if it must. */
  .actions > .btn, .sell__a > .btn {
    width: 100%; white-space: normal; text-align: center;
  }
  .actions > .tlink, .sell__a > .tlink {
    justify-content: center; min-height: 2.75rem; padding-bottom: 0;
  }

  /* 44px is the smallest target a thumb can hit reliably. These were 41, 29
     and 18. */
  .nav__toggle { width: 3rem; height: 3rem; }
  .nav__brand { padding-block: .6rem; }
  .tlink { min-height: 2.75rem; }
  .foot__list { gap: 0; }
  .foot__list a { display: block; padding-block: .6rem; }

  /* the hero block sits at the bottom of the screen; on a phone it needs a
     little more clearance from the edge than the desktop rhythm gives it */
  .hero { padding-bottom: clamp(2rem, 6vh, 3rem); }

  /* bigger type makes every page taller, so take some of it back out of the
     gaps between sections */
  :root { --sec: clamp(4.25rem, 10vw, 10rem); }
}

/* Narrow phones. A word like COMMUNICATION set at the floor size is wider than
   a 375px screen, and .hero__t .ln has overflow:hidden for the reveal mask, so
   it gets silently clipped rather than wrapping. Below 400px the display sizes
   go back to scaling with the viewport. Each vw value is chosen to equal its
   clamp floor exactly at 400px, so nothing jumps at the breakpoint. */
/* "COMMUNICATION" is the longest word anywhere in display type and it cannot
   break, so it sets a hard ceiling on heading size: measured in the real face
   it occupies 9.82x the font-size, which against a 20px gutter works out at
   8.9vw. Below 420px the clamp floors above would exceed that and the word gets
   silently clipped by the reveal mask, so the headings go back to scaling with
   the viewport. 8.6vw meets the floors at the breakpoint, so nothing jumps. */
@media (max-width: 420px) {
  .hero__t, .display--xl, .display--lg { font-size: 8.6vw; }
  .display--sm { font-size: 7.2vw; }
}

/* ==========================================================================
   legal pages — privacy and cookies
   Long-form prose, so the measure is narrower and the rhythm looser than the
   rest of the site. Everything else is inherited.
   ========================================================================== */
.legal { display: grid; gap: clamp(2.5rem, 5vw, 3.75rem); }
.legal__date {
  font-family: var(--f-display); font-weight: 700; font-stretch: 76%;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .18em;
  color: var(--fg-low);
}
.legal__s { display: grid; gap: 1rem; }
.legal__h {
  font-family: var(--f-display); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  padding-bottom: .85rem; border-bottom: 2px solid var(--fg);
}
.legal__h3 {
  font-family: var(--f-display); font-weight: 700; font-stretch: 96%;
  font-size: 1.02rem; letter-spacing: -.01em; margin-top: .6rem;
}
.legal__p { color: var(--fg-mid); max-width: 66ch; line-height: 1.66; }
.legal__p b { color: var(--fg); font-weight: 600; }
.legal__p a { color: var(--fg); border-bottom: 1px solid var(--hair-2); }
.legal__p a:hover { border-bottom-color: var(--live); color: var(--accent); }
.legal .cov { margin-block: .35rem; }
.legal .cov__i b { color: var(--fg); font-weight: 700; }

/* the two policy links in the footer fine print */
.foot__legal { display: flex; gap: 1.25rem; }
.foot__legal a { color: var(--fg-low); transition: color .3s var(--e); }
.foot__legal a:hover { color: var(--accent); }

/* ==========================================================================
   client band
   Reuses the .ticker__track / .ticker__set machinery so the same script clones
   the set for a seamless loop. Set as wordmarks rather than logos — see the
   note on CLIENTS in src/content.py.
   ========================================================================== */
.logos {
  position: relative; overflow: hidden; --dur: 46s;
  border-block: 1px solid var(--hair);
  padding-block: clamp(1.15rem, 2.2vw, 1.6rem);
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  /* fade the ends so names enter and leave rather than being cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.motion .logos .ticker__track { animation: tick var(--dur) linear infinite; }
.logos:hover .ticker__track { animation-play-state: paused; }
.logos__i {
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-inline: clamp(.75rem, 1.5vw, 1.375rem);
  font-family: var(--f-display); font-weight: 700; font-stretch: 92%;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1;
  color: var(--fg); opacity: .52; white-space: nowrap;
  transition: opacity .4s var(--e);
}
.logos__i::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--live); flex: none; opacity: .9;
}
.logos:hover .logos__i { opacity: .34; }
.logos__i:hover { opacity: 1; }
/* once real logo files exist they drop straight in here */
.logos__img { height: clamp(1.4rem, 2.6vw, 2.1rem); width: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .motion .logos .ticker__track { animation: none; }
  .logos { -webkit-mask-image: none; mask-image: none; }
  .logos .ticker__track { flex-wrap: wrap; width: 100%; justify-content: center; }
}