/* UkasonDev
   Layout: big type on calm colour fields, art-directed screens, hairlines instead of boxes.
   Headings in Ukason Sans (our cut of Mona Sans, assets/fonts), the logo in Bricolage Grotesque. Night, warm white, deep teal, mint. */
/* Ukason Sans is set light everywhere: weights up to 549 draw at 340, heavier ones at 480 (assets/fonts/README.md). */
@font-face { font-family: "Ukason Sans"; src: url("assets/fonts/ukason-sans-340.woff2") format("woff2"); font-weight: 1 549; font-style: normal; font-display: swap; }
@font-face { font-family: "Ukason Sans"; src: url("assets/fonts/ukason-sans-480.woff2") format("woff2"); font-weight: 550 1000; font-style: normal; font-display: swap; }

:root {
  --night: #000000;
  --night-2: #172020;
  --paper: #F5F3EE;
  --paper-2: #ECE8E0;
  --sand: #E6E0D3;
  --ink: #141414;
  --ink-2: #3A423F;
  --muted: #5C6461;
  --teal: #075E57;
  --teal-deep: #0B2F2B;
  --mint: #8CCFC6;
  --mint-soft: #D6EBE6;
  --danger: #F2A28F;
  --hair: rgba(20, 25, 23, .13);
  --hair-light: rgba(245, 243, 238, .16);

  --font: "Ukason Sans", "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Bricolage Grotesque", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(54px, 10vw, 168px);
  --fs-h2: clamp(42px, 6.4vw, 108px);
  --fs-h3: clamp(26px, 2.4vw, 38px);
  --fs-lead: clamp(19px, 1.5vw, 23px);

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1440px;
  --section: clamp(96px, 11vw, 184px);
  --panel-gap: clamp(8px, 1vw, 16px);
  --radius: clamp(22px, 2.4vw, 36px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --soft-shadow: 0 30px 80px -40px rgba(10, 10, 10, .45);
  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
/* text selection colours: one rule for the whole page, each area sets its colours below (--sel-bg, --sel-fg).
   A separate '<area> ::selection' rule per area made the browser check every one of them for every element each time
   anything was restyled, which roughly doubled the cost of restyling while scrolling */
::selection { background: var(--sel-bg, var(--mint)); color: var(--sel-fg, var(--ink)); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); position: relative; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 60; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 22px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.small { font-size: 15px; color: var(--muted); }
.arrow { display: inline-block; transition: transform .35s var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 17px 28px; border-radius: 999px; border: 1px solid transparent; background: var(--ink); color: var(--paper);
  font: 600 16px/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn:hover { background: var(--teal); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-small { padding: 11px 20px; font-size: 15px; }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--mint); color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--paper); border-color: var(--hair-light); }
.btn-outline-light:hover { background: var(--paper); color: var(--ink); }
.roll { display: inline-grid; overflow: hidden; height: 1.2em; line-height: 1.2; }
.roll > span { display: block; transition: transform .5s var(--ease); }
a:hover .roll > span, a:focus-visible .roll > span { transform: translateY(-100%); }
.textlink { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat; transition: background-size .4s var(--ease); }
.textlink:hover { background-size: 30% 1.5px; }

/* ---------- navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; color: var(--ink); transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--ease); }
.nav.tucked { transform: translateY(-100%); }
.nav.tucked:focus-within { transform: none; }
.nav .wrap { display: flex; align-items: center; gap: 36px; height: 76px; }
.nav.scrolled { background: rgba(245, 243, 238, .78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--hair); }
.nav.on-dark { color: var(--paper); }
.nav.on-dark.scrolled { background: rgba(10, 10, 10, .62); box-shadow: 0 1px 0 var(--hair-light); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-size: 19px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.brand svg { width: 31px; height: 24px; }
.brand-u { stroke: var(--ink); }
.brand-d { stroke: #164D4D; }
.nav.on-dark .brand-u { stroke: #F3EFE6; }
.nav.on-dark .brand-d { stroke: #8CCFC6; }
.nav.open .brand-u { stroke: var(--ink); }
.nav.open .brand-d { stroke: #164D4D; }
.brand b { font-weight: 600; color: var(--teal); }
.nav.on-dark .brand b { color: var(--mint); }
.nav-links { display: flex; gap: 30px; font-size: 15px; font-weight: 500; }
.nav-links a { text-decoration: none; opacity: .72; transition: opacity .25s, background-size .35s var(--ease); background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; padding-bottom: 3px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; background-size: 100% 1px; }
.nav .btn { background: var(--ink); color: var(--paper); }
.nav.on-dark .btn { background: var(--paper); color: var(--ink); }
.nav .btn:hover { background: var(--teal); color: var(--paper); }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; opacity: .9; }
.menu-toggle span { display: block; width: 16px; height: 1.5px; margin: 4px auto; background: currentColor; transition: transform .3s var(--ease); }
.nav.open .menu-toggle span:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav.open .menu-toggle span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { background: var(--night); color: var(--paper); position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 700px at 80% 85%, rgba(7, 94, 87, .55), transparent 70%), radial-gradient(700px 500px at 0% 0%, rgba(140, 207, 198, .08), transparent 70%); }
.hero-inner { min-height: min(86svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(32px, 4vw, 56px); padding-top: 130px; padding-bottom: clamp(48px, 6vw, 88px); }
.hero-title { font-size: clamp(46px, 7.4vw, 124px); line-height: .92; letter-spacing: -0.035em; font-weight: 500; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title .line > span { display: block; }
.hero-title .accent { color: var(--mint); }
.js .hero-title .line > span { transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
.js .hero-title .line:nth-child(2) > span { animation-delay: .12s; }
@keyframes rise { to { transform: none; } }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.hero .lede { font-size: var(--fs-lead); line-height: 1.45; color: rgba(245, 243, 238, .82); max-width: 40ch; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.film-wrap { padding-bottom: clamp(64px, 8vw, 128px); }
.film-frame { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 60px 140px -50px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--hair-light);
  transform: scale(var(--film-scale, 1)); transform-origin: center top; will-change: transform; }
.film-frame img, .film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* media controls added by script */
.media { position: relative; }
.media-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 10, 10, .7); color: var(--paper); opacity: 0; transition: opacity .25s, background .25s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.media:hover .media-toggle, .media-toggle:focus-visible, .media.paused .media-toggle { opacity: 1; }
.media-toggle svg { width: 12px; height: 12px; }
.media-toggle.labelled { width: auto; height: auto; padding: 10px 16px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px; font: 600 14px/1 var(--font); opacity: 1; right: 20px; bottom: 20px; }
.media-toggle.labelled:hover { background: var(--paper); color: var(--ink); }

/* ---------- statement ---------- */
.statement { padding-block: var(--section) calc(var(--section) * .55); }
.statement-text .w { transition: opacity .35s linear; }
.js .statement-text.words-ready .w { opacity: .16; }
.js .statement-text.words-ready .w.lit { opacity: 1; }

/* ---------- section heads ---------- */
.section-head { margin-bottom: clamp(48px, 6vw, 96px); }
.section-head h2 { font-size: var(--fs-h2); line-height: .94; letter-spacing: -0.04em; max-width: 12em; }
.section-head.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30ch); column-gap: 48px; align-items: end; }
.section-head.split .eyebrow { grid-column: 1 / -1; }
.section-head.split .section-note { margin: 0 0 .5em; }

/* ---------- services ---------- */
.services { padding-block: calc(var(--section) * .55) var(--section); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.service { background: var(--paper-2); border-radius: var(--radius); padding: 12px 12px 28px; display: flex; flex-direction: column; transition: transform .5s var(--ease); }
.service:hover { transform: translateY(-6px); }
.service-text { padding: 26px 16px 0; display: flex; flex-direction: column; flex: 1; }
.service h3 { font-size: var(--fs-h3); letter-spacing: -0.035em; margin-bottom: 10px; }
.service p { color: var(--ink-2); margin-bottom: 22px; }
.ask { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat; transition: background-size .4s var(--ease); }
.ask:hover { background-size: 30% 1.5px; }

/* the three working drawings */
.toy { position: relative; container-type: inline-size; aspect-ratio: 320 / 215; border-radius: calc(var(--radius) - 10px); background: #FBFAF6; overflow: hidden; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.toy button { font: inherit; cursor: pointer; color: var(--ink); }
.toy button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.toy p { color: var(--ink); margin: 0; }
.try { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 12px; font-weight: 600; background: var(--ink); color: var(--paper); padding: 6px 11px; border-radius: 999px; transition: opacity .3s; }
.toy.used .try { opacity: 0; }

.tw-page { position: absolute; left: 7%; top: 11%; width: 62%; height: 78%; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 12% 8% 0; box-shadow: 0 18px 40px -24px rgba(10, 10, 10, .5); }
.tw-bar { position: absolute; left: 0; right: 0; top: 0; height: 18px; border-bottom: 2px solid var(--ink); display: flex; gap: 5px; align-items: center; padding-left: 8px; }
.tw-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.tw-h { height: 11px; width: 80%; background: var(--ink); border-radius: 3px; margin: 8px 0 6px; }
.tw-h2 { height: 11px; width: 56%; background: var(--teal); border-radius: 3px; margin-bottom: 10px; }
.tw-line { height: 5px; width: 90%; background: rgba(20, 25, 23, .18); border-radius: 3px; margin-bottom: 5px; }
.tw-line.short { width: 64%; }
.tw-cta { margin-top: 8px; font-weight: 700; font-size: 3.6cqw !important; white-space: nowrap; background: var(--mint); border: 2px solid var(--ink); border-radius: 999px; padding: 1.6cqw 3.2cqw; transition: transform .15s; }
.tw-cta:hover { transform: translateY(-1px); }
.tw-cta:active { transform: translateY(1px); }
.tw-inbox { position: absolute; right: 6%; bottom: 13%; width: 30%; background: var(--teal); color: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 3cqw 2cqw; text-align: center; line-height: 1.1; box-shadow: 0 18px 40px -24px rgba(10, 10, 10, .6); }
.tw-inbox b { display: block; font-size: 8.5cqw; font-weight: 700; }
.tw-inbox span { font-size: 3.1cqw; font-weight: 600; }
.tw-inbox.bump { animation: bump .4s var(--ease); }
@keyframes bump { 40% { transform: scale(1.1); } }
.tw-env { position: absolute; z-index: 4; width: 28px; height: 20px; background: #fff; border: 2px solid var(--ink); border-radius: 4px; pointer-events: none;
  background-image: linear-gradient(155deg, transparent 48%, var(--ink) 49%, var(--ink) 54%, transparent 55%), linear-gradient(205deg, transparent 48%, var(--ink) 49%, var(--ink) 54%, transparent 55%); background-size: 50% 100%; background-position: left top, right top; background-repeat: no-repeat; }

.ta-phone { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); width: 46cqw; height: 90%; background: #fff; border: 4px solid var(--ink); border-radius: 22px; padding: 18px 9% 0; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 18px 40px -24px rgba(10, 10, 10, .5); }
.ta-notch { position: absolute; top: 5px; left: 50%; width: 30%; height: 5px; border-radius: 3px; background: var(--ink); transform: translateX(-50%); }
.ta-score { position: relative; width: 15cqw; height: 15cqw; margin: 0 auto 4px; }
.ta-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ta-track { fill: none; stroke: var(--mint-soft); stroke-width: 6; }
.ta-ring { fill: none; stroke: #C94136; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 57; transition: stroke-dashoffset .8s var(--ease); }
.toy-app.full .ta-ring { stroke: var(--teal); }
.ta-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5cqw; font-weight: 700; }
.ta-row { display: flex; align-items: center; gap: 6px; text-align: left; font-size: 3.2cqw !important; font-weight: 600; white-space: nowrap; background: #fff; border: 2px solid var(--ink); border-radius: 7px; padding: 4px 6px; transition: background .2s, transform .12s; }
.ta-row i { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 3px; flex: none; background: #fff; }
.ta-row[aria-pressed="true"] { background: var(--mint); }
.ta-row[aria-pressed="true"] i { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23F5F3EE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ta-row:active { transform: scale(.97); }

.tt-board { position: absolute; left: 5%; right: 5%; top: 9%; bottom: 27%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-col { border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 6px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.tt-done { background: #EEF7F5; border-style: dashed; }
.toy .tt-head { margin: 0 0 2px; font-size: 2.9cqw; font-weight: 700; color: var(--ink); }
.tt-job { font-size: 3.1cqw !important; font-weight: 600; text-align: left; background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-done .tt-job { background: var(--mint); }
.tt-job.moved { animation: drop .35s var(--ease); }
@keyframes drop { from { transform: translateY(-8px); opacity: .4; } }
.tt-total { position: absolute; left: 5%; right: 5%; bottom: 8%; display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 6px 10px; font-size: 3.4cqw; font-weight: 600; }
.tt-total b { font-size: 5.4cqw; color: var(--mint); }
.toy-tool.full .tt-total { background: var(--teal); }

/* ---------- work ---------- */
.work { background: var(--night); color: var(--paper); margin-inline: var(--panel-gap); border-radius: var(--radius); padding-block: var(--section); }
.work .eyebrow { color: rgba(245, 243, 238, .6); }
.project-list { display: grid; gap: clamp(72px, 9vw, 150px); }
.project-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; isolation: isolate; text-decoration: none; }
.field-mint { background: linear-gradient(160deg, #DCEFEA, #BFE1DA); }
.field-sand { background: linear-gradient(160deg, #EDE8DD, #DCD3C2); }
.field-deep { background: linear-gradient(160deg, #1D3B37, #0B2421); }
.pm-desk { position: absolute; left: 7%; top: 11%; width: 66%; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(10, 10, 10, .65), 0 0 0 1px rgba(20, 25, 23, .08); transition: transform .9s var(--ease); }
.pm-desk img { width: 100%; height: auto; }
.pm-desk.crop-sb img { width: 101.2%; max-width: none; }
.pm-phone { position: absolute; right: 9%; top: 18%; width: 17%; border-radius: 26px; overflow: hidden; border: 5px solid #0B0B0B; box-shadow: 0 40px 80px -30px rgba(10, 10, 10, .7); transition: transform .9s var(--ease); background: #fff; }
.pm-phone img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.field-deep .pm-desk, .field-deep .pm-phone { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(245, 243, 238, .1); }
.pm-view { position: absolute; left: 24px; bottom: 24px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600;
  opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.project-media:hover .pm-desk { transform: translateY(-10px) scale(1.015); }
.project-media:hover .pm-phone { transform: translateY(-18px); }
.project-media:hover .pm-view, .project-media:focus-visible .pm-view { opacity: 1; transform: none; }
.project-info { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: 32px; align-items: start; padding-top: 28px; }
.project-info h3 { font-size: clamp(32px, 3.6vw, 58px); letter-spacing: -0.045em; }
.project-info h3 a { text-decoration: none; }
.project-info p { margin: 0; color: rgba(245, 243, 238, .72); font-size: 18px; max-width: 42ch; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; justify-content: flex-end; }
.tags li { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-light); color: rgba(245, 243, 238, .82); white-space: nowrap; }

/* ---------- process ---------- */
.process { padding-block: var(--section); }
.step-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair); }
.step-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.1fr) 64px; gap: 24px; align-items: center; padding: clamp(24px, 2.6vw, 40px) 0; border-top: 1px solid var(--hair); }
.step-num { font-size: 15px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- about ---------- */
.about { padding-block: 0 var(--section); }
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.about-id { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
.portrait { width: 100%; max-width: 380px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius) - 6px); display: block; }
.about-id p { margin: 0; font-size: 18px; line-height: 1.35; }
.about-id p b { display: block; font-weight: 600; }
.about-id p span { color: var(--muted); }
.about-copy h2 { font-size: clamp(38px, 4.8vw, 80px); letter-spacing: -0.05em; line-height: .96; margin-bottom: 26px; max-width: 13em; }
.about-copy > p { font-size: var(--fs-lead); color: var(--ink-2); max-width: 40ch; }

.tests { margin-top: 36px; border-radius: calc(var(--radius) - 8px); background: var(--night); color: var(--paper); overflow: hidden; }
.tests-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; box-shadow: 0 1px 0 var(--hair-light); }
.tests-title { display: grid; gap: 4px; }
.tests-title b { font-size: 17px; font-weight: 600; }
.tests-score { margin: 0; display: flex; align-items: baseline; gap: 6px; flex: none; }
.tests-score b { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--paper); font-variant-numeric: tabular-nums; }
.tests-score.all b { color: var(--mint); }
.tests-score span { font-size: 14px; color: rgba(245, 243, 238, .6); }
.tests-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px 16px; box-shadow: 0 -1px 0 var(--hair-light); }
.tests .run-tests { padding: 9px 16px; font-size: 14px; gap: 8px; background: var(--paper); color: var(--ink); }
.tests .run-tests:hover { background: var(--mint); }
.test-list { list-style: none; margin: 0; padding: 6px 22px; }
.test { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 16px; color: rgba(245, 243, 238, .5); box-shadow: 0 1px 0 rgba(245, 243, 238, .08); transition: color .25s; font-variant-numeric: tabular-nums; }
.test:last-child { box-shadow: none; }
.t-mark { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(245, 243, 238, .35); }
.test.is-running { color: var(--paper); }
.test.is-running .t-mark { box-shadow: inset 0 0 0 2px var(--mint); border-top: 2px solid transparent; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.test.is-pass { color: var(--paper); }
.test.is-pass .t-mark { box-shadow: none; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23141917' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.test.is-fail { color: var(--danger); }
.test.is-fail .t-mark { box-shadow: inset 0 0 0 2px var(--danger); }
.tests-summary { margin: 0; font-size: 14px; color: var(--mint); }

/* ---------- questions ---------- */
.faq { padding-block: 0 var(--section); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.faq .section-head { position: sticky; top: 120px; margin: 0; }
.faq .section-head h2 { font-size: clamp(38px, 4.8vw, 80px); }
.faq-list { border-bottom: 1px solid var(--hair); }
.qa { border-top: 1px solid var(--hair); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font-size: clamp(20px, 1.8vw, 27px); font-weight: 500; letter-spacing: -0.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 400; box-shadow: inset 0 0 0 1px var(--hair); transition: transform .35s var(--ease), background .35s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); background: var(--mint); box-shadow: none; }
.qa summary:hover::after { background: var(--paper-2); }
.qa p { margin: 0; padding: 0 60px 26px 0; font-size: 18px; color: var(--ink-2); max-width: 62ch; }

/* ---------- contact + footer ---------- */
.contact { background: var(--night); color: var(--paper); margin-inline: var(--panel-gap); border-radius: var(--radius) var(--radius) 0 0; padding-block: var(--section) clamp(72px, 8vw, 120px); }
.contact .eyebrow { color: rgba(245, 243, 238, .6); }
.contact .section-head h2 { font-size: clamp(48px, 8vw, 136px); max-width: 9em; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.contact-aside { font-size: 18px; color: rgba(245, 243, 238, .78); }
.contact-aside p { max-width: 32ch; }
.availability .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(140, 207, 198, .18); }
.price-line { color: var(--paper); font-weight: 600; }
.direct { margin-top: 26px; padding-top: 20px; box-shadow: 0 -1px 0 var(--hair-light); }
form { display: grid; gap: 30px; position: relative; }
.field label { display: block; font-size: 14px; color: rgba(245, 243, 238, .6); margin-bottom: 6px; }
.field label span { color: rgba(245, 243, 238, .62); }
.field input, .field textarea, .field select { width: 100%; font: 400 21px/1.35 var(--font); color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid rgba(245, 243, 238, .28); border-radius: 0; padding: 8px 0 12px; transition: border-color .25s; }
.field textarea { min-height: 96px; resize: vertical; }
.field textarea::placeholder { color: rgba(245, 243, 238, .5); font-size: 17px; }
.field select { appearance: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A9B0AD' stroke-width='1.6'/%3E%3C/svg%3E") right 2px center / 12px no-repeat; }
.field select option { color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--mint); }
.field .error { display: none; margin: 8px 0 0; font-size: 14px; color: var(--danger); }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.field.invalid .error { display: block; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.contact form .btn { justify-self: start; background: var(--paper); color: var(--ink); }
.contact form .btn:hover { background: var(--mint); }
.form-note { margin: -10px 0 0; font-size: 14px; color: rgba(245, 243, 238, .55); }
.form-note a { color: rgba(245, 243, 238, .85); }
.form-status { display: none; margin: 0; padding: 14px 18px; border-radius: 14px; background: rgba(140, 207, 198, .14); color: var(--paper); font-size: 16px; }
.form-status.show { display: block; }
.form-status[data-kind="error"] { background: rgba(242, 162, 143, .16); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

footer { background: var(--night); color: rgba(245, 243, 238, .6); margin: 0 var(--panel-gap) var(--panel-gap); border-radius: var(--radius); padding-bottom: 32px; font-size: 15px; overflow: hidden; }
.contact + footer, main + .mobile-cta + footer { border-radius: 0 0 var(--radius) var(--radius); }
.footer-cta { display: block; padding-block: clamp(56px, 8vw, 120px); color: var(--paper); text-decoration: none; }
.footer-cta small { display: block; font-size: 15px; color: rgba(245, 243, 238, .6); margin-bottom: 12px; }
.footer-cta strong { display: block; font-size: clamp(44px, 8vw, 132px); font-weight: 500; letter-spacing: -0.055em; line-height: .95; transition: color .3s; }
.footer-cta:hover strong { color: var(--mint); }
.wordmark { display: block; font-size: min(18.2vw, 302px); font-weight: 600; letter-spacing: -0.045em; line-height: .8; color: var(--paper); margin: 0 0 28px -0.04em; padding-top: clamp(32px, 4vw, 64px); white-space: nowrap; user-select: none; }
.wordmark b { font-weight: 600; color: var(--mint); }
.footer-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; box-shadow: 0 -1px 0 var(--hair-light); }
.footer-base nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-base a { text-decoration: none; }
.footer-base a:hover { color: var(--paper); }

.mobile-cta { display: none; }

/* ---------- project pages ---------- */
.back { display: inline-flex; gap: 8px; margin-bottom: 40px; font-size: 15px; font-weight: 500; text-decoration: none; opacity: .7; }
.back:hover { opacity: 1; }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, max-content)); gap: 18px 72px; font-size: 17px; padding-top: 22px; border-top: 1px solid currentColor; }
.meta b { display: block; font-size: 13px; font-weight: 500; opacity: .72; margin-bottom: 4px; }
.meta a { text-underline-offset: 4px; }
.tag { display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; margin-bottom: 24px; opacity: .85; }
.case-block.flush { padding-top: 0; }
.label { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.label::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .6; }
.case-dark .label, .case-ink .label, .story .label { color: inherit; opacity: .65; }
.browser { position: relative; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--soft-shadow), 0 0 0 1px var(--hair); }
.browser img, .browser video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.browser img.no-scrollbar { width: 101.2%; max-width: none; }
.phone { position: relative; border-radius: 34px; overflow: hidden; border: 6px solid #0B0B0B; background: #fff; box-shadow: var(--soft-shadow); }
.phone img, .phone video { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.case-dark .browser, .case-ink .browser { box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--hair-light); }
figure { margin: 0; }
.rail { display: flex; justify-content: space-between; gap: 18px; padding-top: 12px; margin-top: 14px; font-size: 14px; color: var(--muted); box-shadow: 0 -1px 0 var(--hair); }

/* story (rollout page) */
.story { --story-bg: var(--sand); --story-ink: var(--ink); background: var(--story-bg); color: var(--story-ink); margin-inline: var(--panel-gap); border-radius: var(--radius); padding-top: var(--section); transition: background-color .9s var(--ease), color .9s var(--ease); }
.story[data-theme="mint"] { --story-bg: var(--mint-soft); }
.story[data-theme="night"] { --story-bg: var(--night); --story-ink: var(--paper); }
.step-card { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .3; transition: opacity .6s var(--ease); }
.step-card.is-current { opacity: 1; }
.step-card .chapter { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; opacity: .7; margin: 0 0 20px; }
.step-card h3 { font-size: clamp(34px, 3.6vw, 60px); letter-spacing: -0.045em; line-height: 1; margin-bottom: 18px; max-width: 12em; }
.step-card p { font-size: 19px; max-width: 32ch; }
.sm { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.sm.is-active { opacity: 1; transform: none; }
.sm .clip { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--soft-shadow), 0 0 0 1px var(--hair); }
.sm.desk .clip { width: 100%; }
.sm.desk img { width: 100%; height: auto; transition: transform 1.4s var(--ease) .35s; }
.sm.phone { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.sm.phone .clip { height: 100%; aspect-ratio: 390 / 844; border-radius: 36px; border: 6px solid #0B0B0B; }
.sm.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sm.zoom.z-score img { transform-origin: 17% 62%; }
.sm.zoom.z-approve img { transform-origin: 74% 52%; }
.sm.zoom.is-active img { transform: scale(2.3); }
.story[data-theme="night"] .sm .clip { box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--hair-light); }
.story-dots { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.story-dots li { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s; }
.story-dots li.is-active { opacity: 1; }

/* privacy and 404 */
.legal { padding-block: clamp(140px, 14vw, 200px) var(--section); }
.legal .wrap { max-width: calc(780px + 2 * var(--gutter)); }
.legal h1 { font-size: clamp(48px, 8vw, 112px); letter-spacing: -0.06em; margin-bottom: 32px; }
.legal h2 { font-size: 28px; letter-spacing: -0.03em; margin: 48px 0 12px; }
.legal p, .legal li { font-size: 18px; color: var(--ink-2); }
.notfound { min-height: 80vh; display: grid; align-content: center; padding-block: 120px; }
.notfound h1 { font-size: clamp(56px, 10vw, 150px); letter-spacing: -0.06em; margin-bottom: 24px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero-title .line > span { animation: none; transform: none; }
  .js .statement-text.words-ready .w { opacity: 1; }
  .film-frame { transform: none; }
  .test.is-running .t-mark { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(14px, 1.6vw, 24px); align-items: center; padding-bottom: 12px; }
  .service:last-child .service-text { padding: 16px 16px 16px 4px; }
  .project-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .project-info .tags { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .hero-inner { min-height: 0; }
  .about-grid, .faq-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .about-id, .faq .section-head { position: static; }
  .about-id { flex-direction: row; align-items: center; }
  .about-id .portrait { width: 132px; border-radius: 18px; }
  .step-row { grid-template-columns: 52px minmax(0, 1fr) 56px; row-gap: 6px; }
  .step-card { min-height: 0; opacity: 1; padding: 0 0 72px; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .nav .wrap { height: 64px; gap: 12px; }
  .menu-toggle { display: block; }
  .nav .btn-small { padding: 10px 14px; font-size: 14px; }
  .nav-links { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 4px var(--gutter) 20px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--hair); display: none; }
  .nav.open, .nav.open.on-dark.scrolled { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--hair); }
  .nav.open .nav-links { display: flex; }
  .nav.open .btn { background: var(--ink); color: var(--paper); }
  .nav.open .brand b { color: var(--teal); }
  .nav-links a { opacity: 1; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; padding: 14px 0; box-shadow: 0 1px 0 var(--hair); background: none; }
  .hero-inner { min-height: 0; padding-top: 104px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service:last-child { grid-column: auto; display: flex; padding-bottom: 28px; }
  .service:last-child .service-text { padding: 26px 16px 0; }
  .project-media { aspect-ratio: 4 / 3.4; }
  .pm-desk { left: 6%; top: 12%; width: 74%; }
  .pm-phone { right: 6%; top: 30%; width: 28%; border-width: 4px; border-radius: 18px; }
  .pm-view { opacity: 1; transform: none; left: 14px; bottom: 14px; padding: 9px 14px; font-size: 14px; }
  .project-info { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .project-info .tags { justify-content: flex-start; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .section-head.split { display: block; }
  .section-head.split .section-note { margin-top: 18px; }
  .qa p { padding-right: 0; }
  .pair .phone { max-width: 250px; }
  .meta { gap: 14px 32px; }
  .mobile-cta { display: flex; justify-content: center; align-items: center; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    background: var(--teal); color: var(--paper); border-radius: 999px; padding: 15px 18px; font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 20px 40px -16px rgba(10, 10, 10, .6);
    transform: translateY(170%); transition: transform .35s var(--ease); }
  .mobile-cta.show { transform: none; }
  .media-toggle.labelled { right: 12px; bottom: 12px; padding: 8px 12px; font-size: 13px; }
}
.hero-title .line > span { text-wrap: balance; }

/* ---------- project films and page explorer ---------- */
.ex-controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ex-stage { position: relative; display: flex; justify-content: center; border-radius: var(--radius); background: linear-gradient(160deg, #DCEFEA, #BFE1DA); padding: clamp(16px, 3vw, 48px); }
.ex-url { margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: #fff; font-size: 13px; color: var(--muted); min-width: 40%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-scroll { height: min(72vh, 720px); overflow-y: auto; scrollbar-width: thin; outline: none; }
.ex-scroll:focus-visible { box-shadow: inset 0 0 0 3px var(--teal); }
.ex-scroll img { width: 100%; height: auto; display: block; }
.ex-stage[data-device="m"] .ex-window { width: min(100%, 380px); border-radius: 46px; border: 10px solid #0B0B0B; }
.ex-stage[data-device="m"] .ex-bar { display: none; }
.ex-stage[data-device="m"] .ex-scroll { height: min(72vh, 740px); scrollbar-width: none; }
@media (max-width: 760px) {
  .ex-stage { padding: 14px; }
  .ex-stage[data-device="m"] .ex-scroll { height: 64vh; }
}

/* prices and the tools strip */
.service .price { margin: -8px 0 22px; font-weight: 600; color: var(--ink); }
.tools { padding-bottom: clamp(56px, 7vw, 104px); }
.tools-title { text-align: center; font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(245, 243, 238, .5); margin: 0 0 28px; padding-inline: var(--gutter); }
.tools-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.tools-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.tools-viewport:hover .tools-track { animation-play-state: paused; }
.tools ul { display: flex; align-items: center; gap: clamp(48px, 5.5vw, 92px); list-style: none; margin: 0; padding: 0 clamp(24px, 2.75vw, 46px); }
.tools li { display: inline-flex; align-items: center; gap: .5em; font-size: clamp(19px, 1.7vw, 25px); font-weight: 600; letter-spacing: -0.025em; color: rgba(245, 243, 238, .5); white-space: nowrap; }
.tools li svg { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tools-track { animation-duration: 90s; }
}


/* form choices as chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 11px 18px; border-radius: 999px; font-size: 16px; line-height: 1.2; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .28); transition: background .2s, color .2s, box-shadow .2s; }
.chips label:hover span { box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .7); }
.chips input:checked + span { background: var(--mint); color: var(--ink); box-shadow: none; font-weight: 600; }
.chips input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 3px; }

/* ---------- case studies ---------- */
.feature.wide { grid-column: 1 / -1; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.journey li { counter-increment: step; padding-top: 18px; border-top: 2px solid var(--ink); }
.journey li::before { content: counter(step); display: block; font-size: 14px; font-weight: 600; color: var(--teal); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.journey p { margin: 0; font-size: 17px; line-height: 1.45; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.choice { background: var(--paper); border-radius: 20px; padding: 24px; }
.choice h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 8px; }
.choice p { margin: 0; color: var(--ink-2); font-size: 16.5px; }
.case-block.tint .choice { background: var(--paper); }
@media (max-width: 900px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .journey li { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid var(--hair); }
  .journey li::before { margin: 2px 0 0; }
  .choices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .feature-media.with-phone .phone { display: none; }
}

/* smaller services under the three main ones */
.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(14px, 1.6vw, 24px); }
.extra { background: var(--night); color: var(--paper); border-radius: var(--radius); padding: 12px 12px 28px; display: flex; flex-direction: column; }
.extra-text { padding: 22px 16px 0; display: flex; flex-direction: column; flex: 1; }
.extra h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--mint); margin-bottom: 10px; }
.extra .extra-lead { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; color: var(--paper); margin-bottom: 12px; }
.extra p { color: rgba(245, 243, 238, .7); margin-bottom: 18px; }
.extra .price { margin: auto 0 16px; font-weight: 600; color: var(--paper); }
.extra .ask { color: var(--paper); }
.mini { aspect-ratio: 320 / 150; border-radius: calc(var(--radius) - 10px); background: var(--night-2); box-shadow: inset 0 0 0 1px var(--hair-light); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; overflow: hidden; font-size: 13px; }
.mini-auto .app { padding: 10px 12px; border-radius: 10px; background: rgba(245, 243, 238, .08); box-shadow: inset 0 0 0 1px var(--hair-light); font-weight: 600; white-space: nowrap; }
.mini-crm .row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(245, 243, 238, .06); }
.mini-chat { flex-direction: column; align-items: stretch; gap: 8px; }
.mini-chat span { max-width: 80%; padding: 9px 12px; border-radius: 14px; line-height: 1.3; }
.mini-chat .q { align-self: flex-end; background: rgba(245, 243, 238, .1); border-bottom-right-radius: 4px; }
.mini-chat .a { align-self: flex-start; background: var(--mint); color: var(--ink); border-bottom-left-radius: 4px; }
@media (max-width: 900px) { .extras { grid-template-columns: minmax(0, 1fr); } }

/* projects page */
.project-filter { display: inline-flex; }
.all-projects { margin-top: clamp(48px, 6vw, 80px); color: var(--paper); }
.project-filter button { font: 500 15px/1 var(--font); color: var(--ink-2); background: transparent; border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer; transition: background .25s, color .25s; }
.project-filter button:hover { color: var(--ink); background: rgba(20, 25, 23, .06); }
.project-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* new service cards: shorter, livelier */
.extra .extra-lead { font-size: clamp(22px, 1.9vw, 28px); margin-bottom: 22px; }
.extra-foot .ask { margin: 0; }
.mini { aspect-ratio: 320 / 170; }
.mini-auto i + .app + i::before { animation-delay: 1.2s; }
@keyframes flow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 50% { left: calc(100% - 8px); opacity: 1; } 60%, 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes glow { 0%, 70% { box-shadow: 0 0 0 0 rgba(140, 207, 198, 0); } 85% { box-shadow: 0 0 0 6px rgba(140, 207, 198, .25); } 100% { box-shadow: 0 0 0 0 rgba(140, 207, 198, 0); } }
.mini-crm .row:nth-child(2) { animation: rise-row 4s ease-in-out infinite; }
@keyframes rise-row { 0%, 100% { transform: none; } 10%, 40% { transform: translateX(4px); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(140, 207, 198, .5); } 50% { box-shadow: 0 0 0 5px rgba(140, 207, 198, 0); } }
.mini-chat .dots { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(245, 243, 238, .08); animation: dots-show 6s infinite; }
.mini-chat .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(245, 243, 238, .6); animation: blink 1s infinite; }
.mini-chat .dots i:nth-child(2) { animation-delay: .2s; } .mini-chat .dots i:nth-child(3) { animation-delay: .4s; }
.mini-chat .a { animation: reply-show 6s infinite; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes dots-show { 0%, 15% { opacity: 0; } 20%, 40% { opacity: 1; } 45%, 100% { opacity: 0; display: none; } }
@keyframes reply-show { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* automation: the process line plus the work moving through it */
.mini-auto .flow { display: flex; align-items: center; gap: 8px; }
.mini-auto .flow .app { padding: 6px 10px; font-size: 12px; animation: on 6s infinite; }
.mini-auto .flow .a2 { animation-delay: 2s; } .mini-auto .flow .a3 { animation-delay: 4s; }
.mini-auto .flow i::before { animation: flow 2s ease-in-out infinite; }
.mini-auto .flow i + .app + i::before { animation-delay: 1s; }
@keyframes on { 0%, 30% { background: var(--mint); color: var(--ink); box-shadow: none; } 34%, 100% { background: rgba(245, 243, 238, .08); color: var(--paper); box-shadow: inset 0 0 0 1px var(--hair-light); } }
.mini-auto .scene { position: relative; flex: 1; }
.mini-auto .scene > div { position: absolute; inset: 0; border-radius: 10px; background: #fff; color: var(--ink); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; opacity: 0; animation: scene 6s infinite; }
.mini-auto .scene > .s-sheet { animation-delay: 2s; } .mini-auto .scene > .s-inv { animation-delay: 4s; }
@keyframes scene { 0% { opacity: 0; transform: translateY(6px); } 5%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-6px); } }
.mini-auto .scene b { font-size: 12px; }
.mini-auto .f { border: 1px solid #d8d4cb; border-radius: 6px; padding: 3px 7px; }
.mini-auto .r { display: flex; justify-content: space-between; border-bottom: 1px solid #ece8e0; padding: 3px 0; }
.mini-auto .r em { font-style: normal; font-weight: 600; }
.mini-auto .r.new { background: var(--mint-soft); padding: 3px 6px; border-radius: 4px; font-weight: 600; }
/* CRM: a small pipeline where a lead moves from New to Quoted to Won */
.mini-crm .card { background: #fff; color: var(--ink); border-radius: 7px; padding: 6px 7px; font-size: 11px; font-weight: 600; line-height: 1.2; display: flex; flex-direction: column; }
.mini-crm .card small { font-weight: 400; color: var(--muted); font-size: 10px; }
.mini-crm .card.won { background: var(--mint); }
@keyframes deal { 0%, 20% { transform: none; } 35%, 55% { transform: translateX(calc(100% + 24px)); } 70%, 90% { transform: translateX(calc(200% + 48px)); background: var(--mint); } 100% { transform: none; opacity: 0; } }
.extra .price small { display: block; font-weight: 400; font-size: 13px; color: rgba(245, 243, 238, .65); margin-top: 2px; }
@keyframes remind { 0%, 36% { opacity: 0; transform: translate(-50%, 8px); } 42%, 58% { opacity: 1; transform: translate(-50%, 0); } 64%, 100% { opacity: 0; transform: translate(-50%, 8px); } }

/* automation v2: one booking, four jobs done for you */
.mini-auto2 .booking .tag { justify-self: start; font-size: 10px; font-weight: 700; color: var(--teal); background: var(--mint-soft); padding: 2px 7px; border-radius: 999px; }
.mini-auto2 .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini-auto2 .steps li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(245, 243, 238, .35); animation: step 8s infinite; }
.mini-auto2 .steps i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(245, 243, 238, .3); flex: none; animation: tick 8s infinite; }
.mini-auto2 .done { margin: auto 0 0; font-size: 12px; font-weight: 600; color: var(--mint); animation: donefade 8s infinite; }
@keyframes book { 0% { opacity: 0; transform: translateY(-8px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes step { 0%, 14% { color: rgba(245, 243, 238, .35); } 18%, 88% { color: var(--paper); } 96%, 100% { color: rgba(245, 243, 238, .35); } }
@keyframes tick { 0%, 14% { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(245, 243, 238, .3); } 18%, 88% { box-shadow: none; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23141917' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat; } 96%, 100% { background: transparent; } }
@keyframes donefade { 0%, 38% { opacity: 0; } 44%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
/* CRM v2: the numbers that matter, a deal moving, a reminder */
.mini-crm2 .won-total .a { animation: tot-a 8s infinite; }
.mini-crm2 .won-total .b { color: var(--mint); animation: tot-b 8s infinite; }
@keyframes tot-a { 0%, 66% { opacity: 1; transform: none; } 70%, 96% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: none; } }
@keyframes tot-b { 0%, 66% { opacity: 0; transform: translateY(100%); } 70%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mini-crm2 .board { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mini-crm2 .card { background: #fff; color: var(--ink); border-radius: 6px; padding: 5px 6px; font-size: 10.5px; font-weight: 600; line-height: 1.2; display: flex; flex-direction: column; }
.mini-crm2 .card small { font-weight: 400; color: var(--muted); font-size: 9.5px; }
.mini-crm2 .card.won { background: var(--mint); }
@keyframes deal2 { 0%, 18% { transform: none; background: #fff; opacity: 1; } 28%, 52% { transform: translateX(calc(100% + 18px)); background: #fff; opacity: 1; } 62%, 94% { transform: translateX(calc(200% + 36px)); background: var(--mint); opacity: 1; } 100% { transform: translateX(calc(200% + 36px)); background: var(--mint); opacity: 0; } }
@keyframes remind2 { 0%, 28% { opacity: 0; transform: translateY(8px); } 32%, 52% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: translateY(8px); } }

.journey.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.journey h3 { font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -0.025em; margin-bottom: 8px; }
@media (max-width: 900px) { .journey.four { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* automation v3: one trigger fanning out to the apps, each lighting up as the signal arrives */
.mini-auto3 .when { margin: 0; font-size: 11px; color: rgba(245, 243, 238, .6); font-weight: 600; }
.mini-auto3 .trigger .tag { font-size: 9.5px; font-weight: 700; color: var(--teal); background: var(--mint-soft); padding: 2px 7px; border-radius: 999px; margin-bottom: 2px; }
.mini-auto3 .done { margin: 0; font-size: 12px; font-weight: 600; color: var(--mint); animation: donefade3 6s infinite; }
@keyframes trig { 0% { transform: scale(.96); opacity: 0; } 6%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes zap { 0%, 10% { left: 0; opacity: 0; } 12% { opacity: 1; } 22% { left: calc(100% - 4px); opacity: 1; } 25%, 100% { left: calc(100% - 4px); opacity: 0; } }
@keyframes lit { 0%, 22% { background: rgba(245, 243, 238, .06); color: rgba(245, 243, 238, .55); } 26%, 90% { background: rgba(140, 207, 198, .16); color: var(--paper); } 100% { background: rgba(245, 243, 238, .06); color: rgba(245, 243, 238, .55); } }
@keyframes tick3 { 0%, 22% { background: transparent; } 26%, 90% { box-shadow: none; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23141917' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 9px no-repeat; } 100% { background: transparent; } }
@keyframes donefade3 { 0%, 45% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* automation v4: a finished job on site turns into the paperwork */
@keyframes press { 0%, 12% { transform: none; background: var(--teal); } 15% { transform: scale(.94); } 18%, 90% { transform: none; background: #0B0B0B; } 100% { background: var(--teal); } }
@keyframes run4 { 0%, 16% { left: 0; opacity: 0; } 18% { opacity: 1; } 28% { left: calc(100% - 8px); opacity: 1; } 30%, 100% { opacity: 0; left: calc(100% - 8px); } }
@keyframes res { 0%, 28% { opacity: .25; background: rgba(245, 243, 238, .06); } 32%, 90% { opacity: 1; background: rgba(140, 207, 198, .16); } 100% { opacity: .25; } }
/* CRM v3: built around sites, visits and repeat work */
@keyframes due { 0%, 20% { background: transparent; } 26%, 90% { background: var(--mint-soft); } 100% { background: transparent; } }
@keyframes duerow { 0%, 34% { box-shadow: none; } 40%, 90% { box-shadow: inset 3px 0 0 var(--mint); } 100% { box-shadow: none; } }
@keyframes remind4 { 0%, 44% { opacity: 0; transform: translate(-50%, 8px); } 50%, 88% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; } }

/* step-by-step pictures: four scenes in order, with the step written above each */
.mini-story { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; aspect-ratio: 320 / 240; padding: 12px 14px 14px; }
.st-dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.st-dots li { position: relative; height: 3px; border-radius: 3px; background: rgba(245, 243, 238, .15); overflow: hidden; }
.st-dots li::after { content: ""; position: absolute; inset: 0; background: var(--mint); opacity: 0; animation: stdot 8s infinite; }
.st-dots li:nth-child(2)::after { animation-delay: 2s; } .st-dots li:nth-child(3)::after { animation-delay: 4s; } .st-dots li:nth-child(4)::after { animation-delay: 6s; }
@keyframes stdot { 0%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
.st-stage { position: relative; flex: 1; }
.st-scene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; animation: stscene 8s infinite; }
.st-scene:nth-child(2) { animation-delay: 2s; } .st-scene:nth-child(3) { animation-delay: 4s; } .st-scene:nth-child(4) { animation-delay: 6s; }
@keyframes stscene { 0% { opacity: 0; transform: translateY(6px); } 3%, 23% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-4px); } }
.st-cap { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--paper); }
.st-cap b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--ink); font-size: 11px; flex: none; }
.st-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.ui { background: #fff; color: var(--ink); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 11px; width: 78%; max-width: 230px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7); }
.ui .t { font-weight: 700; font-size: 12px; }
.ui .row { padding: 3px 0; border-bottom: 1px solid #ece8e0; }
.ui .row.muted { color: var(--muted); border: 0; }
.ui .row.hot { color: var(--teal); font-weight: 700; background: var(--mint-soft); border-radius: 5px; padding: 3px 6px; border: 0; }
.ui .big { font-size: 20px; font-weight: 700; color: var(--teal); }
.ui .pill { align-self: flex-start; background: var(--mint); color: var(--ink); font-weight: 700; font-size: 10px; padding: 3px 9px; border-radius: 999px; }
.ui .thumbs { display: flex; gap: 4px; } .ui .thumbs i { width: 34px; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #b8c9c2, #6f8a80); }
.phone-ui { width: 40%; max-height: 100%; aspect-ratio: 9 / 11; border: 4px solid #0B0B0B; border-radius: 14px; }
.phone-ui .photo { flex: 1; border-radius: 6px; background: linear-gradient(135deg, #b8c9c2, #6f8a80); }
.phone-ui .go { background: var(--teal); color: #fff; text-align: center; font-weight: 700; border-radius: 999px; padding: 5px; }
.ui.sms { background: transparent; box-shadow: none; padding: 0; gap: 6px; }
.ui.sms .bubble { align-self: flex-start; background: #fff; border-radius: 12px 12px 12px 4px; padding: 8px 10px; line-height: 1.35; max-width: 90%; }
.ui.sms .bubble.me { align-self: flex-end; background: var(--mint); border-radius: 12px 12px 4px 12px; font-weight: 700; }

/* automation: step picture beside a diagram of the whole process */
.st-split { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.st-auto .st-stage { flex: none; height: 100%; }
.st-auto .ui { width: 92%; }
.st-auto .st-cap { font-size: 12px; }
.st-flow { list-style: none; margin: 0; padding: 4px 0 0 14px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.st-flow::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 2px; background: rgba(140, 207, 198, .25); }
.st-flow li { position: relative; display: grid; font-size: 10px; color: rgba(245, 243, 238, .72); padding: 6px 8px; border-radius: 8px; isolation: isolate; }
.st-flow li::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: rgba(140, 207, 198, .16); opacity: 0; animation: flowli 8s infinite; }
.st-flow li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--mint); opacity: .3; animation: flownode 8s infinite; }
.st-flow li b { font-size: 11.5px; color: inherit; }
.st-flow li:nth-child(2)::after, .st-flow li:nth-child(2)::before { animation-delay: 2s; }
.st-flow li:nth-child(3)::after, .st-flow li:nth-child(3)::before { animation-delay: 4s; }
.st-flow li:nth-child(4)::after, .st-flow li:nth-child(4)::before { animation-delay: 6s; }
@keyframes flowli { 0%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes flownode { 0%, 25% { opacity: 1; transform: scale(1.15); } 26%, 100% { opacity: .3; transform: none; } }
/* CRM: a small app window, used by an unseen hand */
.mini-app { position: relative; display: grid; grid-template-columns: 26% minmax(0, 1fr); gap: 0; padding: 0; aspect-ratio: 320 / 240; align-items: stretch; justify-content: stretch; background: #fff; color: var(--ink); overflow: hidden; }
.app-side { background: var(--teal-deep); color: rgba(245, 243, 238, .7); display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; font-size: 10.5px; }
.app-side span { padding: 5px 7px; border-radius: 6px; }
.app-side .on { background: rgba(140, 207, 198, .2); color: var(--paper); font-weight: 600; }
.app-main { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 10px; }
.app-h { margin: 0 0 4px; font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; }
.app-h em { font-style: normal; color: var(--muted); font-weight: 500; }
.app-row { display: grid; grid-template-columns: 1fr auto; padding: 5px 6px; border-radius: 6px; border-bottom: 1px solid #efece5; color: var(--muted); }
.app-row b { color: var(--ink); grid-column: 1; }
.app-row em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 9.5px; }
.app-row em.due { color: #fff; background: #C94136; padding: 2px 7px; border-radius: 999px; font-weight: 700; }
.app-row.r1 { animation: rowpick 8s infinite; }
@keyframes rowpick { 0%, 14% { background: transparent; } 18%, 92% { background: var(--mint-soft); } 100% { background: transparent; } }
.app-detail { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; background: #fff; box-shadow: -10px 0 24px -12px rgba(0, 0, 0, .35); padding: 12px; display: flex; flex-direction: column; gap: 5px; font-size: 10px; transform: translateX(105%); animation: detail 8s infinite; }
.app-detail b { font-size: 12px; } .app-detail small { color: var(--muted); font-size: 9.5px; margin-bottom: 4px; }
.app-detail .vis { padding: 4px 6px; background: #f4f2ec; border-radius: 5px; }
.app-detail .send { margin-top: auto; text-align: center; background: var(--teal); color: #fff; font-weight: 700; border-radius: 999px; padding: 6px; animation: sendpress 8s infinite; }
.app-detail .booked { text-align: center; background: var(--mint); color: var(--ink); font-weight: 700; border-radius: 999px; padding: 6px; opacity: 0; position: absolute; left: 12px; right: 12px; bottom: 12px; animation: booked 8s infinite; }
@keyframes detail { 0%, 20% { transform: translateX(105%); } 26%, 92% { transform: none; } 98%, 100% { transform: translateX(105%); } }
@keyframes sendpress { 0%, 58% { transform: none; } 61% { transform: scale(.94); } 64%, 100% { transform: none; } }
@keyframes booked { 0%, 66% { opacity: 0; } 70%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.mini-app .cursor { position: absolute; z-index: 5; width: 14px; height: 14px; left: 70%; top: 85%; background: none; animation: cur 8s infinite; }
.mini-app .cursor::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 0 100%, 30% 72%, 52% 100%, 66% 92%, 44% 66%, 80% 62%); background: var(--ink); filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
@keyframes cur { 0% { left: 75%; top: 85%; } 12% { left: 40%; top: 30%; } 18% { left: 40%; top: 30%; transform: scale(.85); } 22% { transform: none; } 45% { left: 60%; top: 60%; } 58% { left: 68%; top: 82%; } 61% { left: 68%; top: 82%; transform: scale(.85); } 64%, 100% { left: 68%; top: 82%; transform: none; } }
.mini-app .app-h { color: var(--ink); }
.st-auto .phone-ui { width: 60%; aspect-ratio: 10 / 11; }

/* hero line */
.hero .lede { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.35; max-width: 46ch; color: var(--paper); letter-spacing: -0.015em; }
.hero .lede .then { display: block; color: var(--mint); }
.hero .lede .nw { white-space: nowrap; }
/* CRM: sent, reply, booked */
.app-detail .sent, .app-detail .reply, .app-detail .booked { position: absolute; left: 12px; right: 12px; opacity: 0; border-radius: 999px; padding: 6px; text-align: center; font-weight: 700; }
.app-detail .sent { bottom: 12px; background: #e6e2da; color: var(--ink-2); animation: crm-sent 8s infinite; }
.app-detail .reply { bottom: 44px; border-radius: 10px 10px 10px 3px; background: var(--mint-soft); color: var(--ink); font-weight: 600; text-align: left; padding: 6px 8px; animation: crm-reply 8s infinite; }
.app-detail .booked { bottom: 12px; background: var(--mint); color: var(--ink); animation: crm-booked 8s infinite; }
@keyframes crm-sent { 0%, 62% { opacity: 0; } 64%, 76% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes crm-reply { 0%, 70% { opacity: 0; transform: translateY(6px); } 73%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes crm-booked { 0%, 78% { opacity: 0; } 80%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* MonPro walkthrough player */
.walk { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.walk-steps li.is-on button { background: var(--night); color: var(--paper); }
.walk-steps li.is-on button b { background: var(--mint); color: var(--ink); }
.walk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mint); transform: scaleX(0); transform-origin: left; }
.walk-steps li:not(.is-on) .walk-bar { opacity: 0; }
@media (max-width: 900px) { .walk { grid-template-columns: minmax(0, 1fr); } }

/* care after launch: a light panel, a status card that tells the story, three prices */
.care { margin-top: clamp(14px, 1.6vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(20px, 3vw, 44px); background: var(--paper-2); color: var(--ink); border-radius: var(--radius); padding: 12px; }
.care-visual { background: var(--night); border-radius: calc(var(--radius) - 10px); padding: clamp(18px, 2.6vw, 40px); display: flex; align-items: center; justify-content: center; background-image: radial-gradient(420px 260px at 70% 85%, rgba(7, 94, 87, .55), transparent 70%); }
.status { --t: 10s; width: 100%; max-width: 440px; background: var(--night-2); border-radius: 18px; padding: 16px; box-shadow: inset 0 0 0 1px var(--hair-light), 0 30px 60px -30px rgba(0, 0, 0, .8); color: var(--paper); font-size: 13.5px; }
.st-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.st-site { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; }
.status .live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }
.status .live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); animation: live 2s infinite; }
@keyframes live { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.st-pill { margin-left: auto; display: grid; }
.st-pill b { grid-area: 1 / 1; justify-self: end; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: var(--ink); white-space: nowrap; }
.st-pill .p-ok { background: var(--mint); animation: care-ok var(--t) infinite; }
.st-pill .p-warn { background: #F2B36B; opacity: 0; animation: care-warn var(--t) infinite; }
.st-days { display: grid; gap: 7px; margin-bottom: 14px; }
.st-days > span { font-size: 12px; color: rgba(245, 243, 238, .55); }
.bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 24px; }
.bars i { border-radius: 3px; background: var(--mint); opacity: .8; }
.bars i.today { position: relative; opacity: 1; }
.bars i.today::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: #F2B36B; opacity: 0; animation: care-warn var(--t) infinite; }
.st-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-rows li { display: grid; grid-template-columns: 22px 108px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(245, 243, 238, .05); color: rgba(245, 243, 238, .7); }
.st-rows b { font-weight: 600; color: var(--paper); }
.st-rows em { font-style: normal; display: grid; }
.st-rows em span { grid-area: 1 / 1; }
.st-rows .ic { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23141917' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.st-rows .fix { position: relative; isolation: isolate; }
.st-rows .fix::before, .st-rows .fix::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px; opacity: 0; }
.st-rows .fix::before { background: rgba(242, 179, 107, .16); animation: care-warn var(--t) infinite; }
.st-rows .fix::after { background: rgba(140, 207, 198, .2); animation: care-glow var(--t) infinite; }
@keyframes care-glow { 0%, 58% { opacity: 0; } 62%, 74% { opacity: 1; } 84%, 100% { opacity: 0; } }
.st-rows .fix .ic { animation: care-pop var(--t) infinite; }
.st-rows .fix .ic::before { content: "!"; position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: #F2B36B; color: #141414; font: 700 12px/1 var(--font); opacity: 0; animation: care-warn var(--t) infinite; }
.st-rows .s-ok { animation: care-calm var(--t) infinite; }
.st-rows .s-bad { color: #F2B36B; opacity: 0; animation: care-warn var(--t) infinite; }
.st-rows .s-fixed { color: var(--mint); font-weight: 600; opacity: 0; animation: care-fixed var(--t) infinite; }
.st-msg { display: grid; margin-top: 12px; border-radius: 12px; background: rgba(245, 243, 238, .06); }
.st-msg > * { grid-area: 1 / 1; }
.st-msg .m-calm { align-self: center; padding: 12px; font-size: 13px; color: rgba(245, 243, 238, .6); animation: care-calm-m var(--t) infinite; }
.st-msg .m-alex { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 12px; background: var(--paper); color: var(--ink); opacity: 0; animation: care-msg var(--t) infinite; }
@keyframes care-calm-m { 0%, 58% { opacity: 1; } 61%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
.st-msg img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.st-msg p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.st-msg b { display: block; font-size: 12.5px; }
@keyframes care-ok { 0%, 28% { opacity: 1; } 30%, 58% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes care-warn { 0%, 28% { opacity: 0; } 30%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes care-calm { 0%, 28% { opacity: 1; } 30%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes care-fixed { 0%, 58% { opacity: 0; } 60%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes care-msg { 0%, 60% { opacity: 0; transform: translateY(6px); } 64%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes care-bar { 0%, 28% { background: var(--mint); } 30%, 56% { background: #F2B36B; } 60%, 100% { background: var(--mint); } }
@keyframes care-row { 0%, 28% { background: rgba(245, 243, 238, .05); } 30%, 56% { background: rgba(242, 179, 107, .14); } 60%, 74% { background: rgba(140, 207, 198, .2); } 84%, 100% { background: rgba(245, 243, 238, .05); } }
@keyframes care-pop { 0%, 58% { transform: none; } 61% { transform: scale(1.25); } 65%, 100% { transform: none; } }
.care-body { padding: clamp(12px, 2.2vw, 32px) clamp(12px, 2.2vw, 32px) clamp(12px, 2.2vw, 32px) 0; align-self: center; }
.care-body h3 { font-size: var(--fs-h3); letter-spacing: -0.035em; margin-bottom: 10px; }
.care-what { margin: 0 0 24px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; color: var(--ink-2); max-width: 50ch; }
.care-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tier-price small.from { display: block; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.tier { background: #fff; border-radius: 18px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.tier-price { margin: 0; font-size: clamp(30px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.035em; color: var(--ink); line-height: 1; }
.tier-price small { font-size: 14px; font-weight: 500; color: var(--teal); margin-left: 3px; letter-spacing: 0; }
.tier-name { margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.care-small { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .care { grid-template-columns: minmax(0, 1fr); gap: 8px; } .care-body { padding: 18px 12px 14px; } }
@media (max-width: 560px) { .care-tiers { grid-template-columns: minmax(0, 1fr); } .care-visual { padding: 14px; } .st-rows li { grid-template-columns: 20px 96px minmax(0, 1fr); padding: 10px; font-size: 13px; } }

/* how it works: the steps beside a picture of what you get at each one */
.process-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.process-story .step-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair); }
.process-story .step-row { display: block; padding: 0; position: relative; border-top: 1px solid var(--hair); }
.process-story .step-row button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; width: 100%; padding: clamp(20px, 2.2vw, 30px) 0; }
.process-story .step-row button:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 8px; }
.process-story .step-num { grid-row: 1 / 3; padding-top: .55em; font-size: 14px; font-weight: 600; color: var(--muted); }
.process-story .step-title { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.035em; color: rgba(20, 25, 23, .38); transition: color .35s; }
.process-story .step-line { font-size: 17px; color: var(--muted); transition: color .35s; }
.process-story .step-row:hover .step-title, .process-story .step-row.is-on .step-title { color: var(--ink); }
.process-story .step-row.is-on .step-line { color: var(--ink-2); }
.process-story .step-row.is-on .step-num { color: var(--teal); }
.process-story .step-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.process-story .step-row.is-on .step-bar { animation: stepbar 5s linear forwards; }
@keyframes stepbar { to { transform: none; } }
.ps-stage { position: sticky; top: 104px; aspect-ratio: 5 / 4; border-radius: var(--radius); background: var(--paper-2); overflow: hidden; }
.ps-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.ps-scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.ps-card { width: min(80%, 400px); background: #fff; border-radius: 20px; padding: 22px; color: var(--ink); font-size: 15px; box-shadow: 0 40px 80px -40px rgba(20, 25, 23, .4), 0 0 0 1px var(--hair); }
.ps-card p { margin: 0; }
.ps-card .pk { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.ps-scene.is-on .ps-card { animation: cardin .6s var(--ease) both; }
@keyframes cardin { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes popin { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.ps-call .pt { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 2px; }
.ps-call .pm { color: var(--muted); font-size: 14px; }
.ps-call .slots { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.ps-call .slots span { padding: 9px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13.5px; font-weight: 500; }
.ps-scene.is-on .ps-call .pick { animation: slotpick .4s 1.3s both; }
@keyframes slotpick { to { background: var(--teal); color: #fff; box-shadow: none; } }
.ps-call .who { display: flex; align-items: center; gap: 0; }
.ps-call .who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.ps-call .who .you { width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--teal); font-size: 11px; font-weight: 700; box-shadow: 0 0 0 2px #fff; }
.ps-call .ok { margin-left: auto; padding: 6px 12px 6px 30px; border-radius: 999px; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23141917' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10px 50% / 12px no-repeat; font-size: 13px; opacity: 0; }
.ps-scene.is-on .ps-call .ok { animation: popin .45s 2.1s both; }
.ps-quote .qh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); }
.ps-quote .qh span { font-size: 13px; color: var(--muted); }
.ps-quote .ql { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.ps-quote .ql.tot { border-bottom: 0; font-weight: 600; font-size: 16px; }
.ps-quote .qd { font-size: 14px; color: var(--ink-2); margin: 4px 0 16px; }
.ps-quote .qa { display: grid; }
.ps-quote .qa span { grid-area: 1 / 1; justify-self: start; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.ps-quote .btn { background: var(--ink); color: var(--paper); }
.ps-quote .done { background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23141917' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 12px 50% / 12px no-repeat; padding-left: 34px !important; opacity: 0; }
.ps-scene.is-on .ps-quote .ql, .ps-scene.is-on .ps-quote .qd { animation: fadein .4s var(--ease) both; }
.ps-scene.is-on .ps-quote .ql:nth-of-type(2) { animation-delay: .3s; }
.ps-scene.is-on .ps-quote .ql:nth-of-type(3) { animation-delay: .55s; }
.ps-scene.is-on .ps-quote .ql:nth-of-type(4) { animation-delay: .8s; }
.ps-scene.is-on .ps-quote .qd { animation-delay: 1.05s; }
.ps-scene.is-on .ps-quote .btn { animation: btnout .3s 2.3s both; }
.ps-scene.is-on .ps-quote .done { animation: popin .45s 2.4s both; }
@keyframes btnout { to { opacity: 0; transform: scale(.9); } }
.ps-prev { padding: 0; overflow: hidden; }
.ps-prev .pv-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--paper); border-bottom: 1px solid var(--hair); }
.ps-prev .pv-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20, 25, 23, .15); }
.ps-prev .pv-bar span { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.ps-prev .pv-page { padding: 16px; display: grid; gap: 8px; }
.ps-prev .pv-img { height: 86px; border-radius: 10px; background: linear-gradient(135deg, #E8D9C4, #CDB89A); }
.ps-prev .pv-page i { height: 9px; border-radius: 5px; background: rgba(20, 25, 23, .1); }
.ps-prev .pv-page i.short { width: 60%; }
.ps-prev .pv-btn { justify-self: start; margin-top: 4px; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.ps-scene.is-on .ps-prev .pv-btn { animation: btngreen .4s 2s both; }
@keyframes btngreen { to { background: #2E8B57; } }
.ps-prev .pv-note, .ps-prev .pv-reply { margin: 0 16px 10px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; max-width: 80%; opacity: 0; }
.ps-prev .pv-note b, .ps-prev .pv-reply b { display: block; font-size: 12px; }
.ps-prev .pv-note { background: #FFF4D6; }
.ps-prev .pv-reply { margin-left: auto; margin-bottom: 16px; background: var(--mint-soft); }
.ps-scene.is-on .ps-prev .pv-note { animation: fadein .4s .7s var(--ease) both; }
.ps-scene.is-on .ps-prev .pv-reply { animation: fadein .4s 2.5s var(--ease) both; }
.ps-hand ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ps-hand li { display: grid; grid-template-columns: 90px minmax(0, 1fr) 22px; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14.5px; }
.ps-hand li span { color: var(--ink-2); }
.ps-hand li i { width: 22px; height: 22px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; opacity: 0; }
.ps-scene.is-on .ps-hand li i { animation: popin .4s both; }
.ps-scene.is-on .ps-hand li:nth-child(1) i { animation-delay: .5s; }
.ps-scene.is-on .ps-hand li:nth-child(2) i { animation-delay: 1s; }
.ps-scene.is-on .ps-hand li:nth-child(3) i { animation-delay: 1.5s; }
.ps-scene.is-on .ps-hand li:nth-child(4) i { animation-delay: 2s; }
@media (max-width: 900px) {
  .process-story { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ps-stage { position: relative; top: 0; order: -1; aspect-ratio: 4 / 3.3; }
  .process-story .step-row button { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ukason case study: where it started, beside the home page film */

/* monpro: a school report beside a MonPro report on a phone */
.mp-phone .media-toggle.labelled { right: 12px; bottom: 12px; width: 34px; height: 34px; padding: 0; justify-content: center; }
.mp-phone .media-toggle.labelled span { display: none; }

/* case study cards: a small picture of each choice */
.art-mark li i.x { background: #C8463D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 62% no-repeat; }
@keyframes cha-tick { 0%, 6% { transform: scale(0); } 12%, 90% { transform: none; } 96%, 100% { transform: scale(0); } }
@keyframes cha-stamp { 0%, 30% { opacity: 0; transform: rotate(-10deg) scale(1.6); } 36%, 90% { opacity: 1; transform: rotate(-10deg); } 96%, 100% { opacity: 0; transform: rotate(-10deg); } }
@keyframes cha-type { 0%, 6% { width: 0; } 44%, 92% { width: 64cqw; } 100% { width: 0; } }
@keyframes cha-caret { 50% { opacity: 0; } }
@keyframes cha-btn { 0%, 52% { opacity: 1; } 56%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cha-ok { 0%, 54% { opacity: 0; transform: scale(.85); } 58%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes cha-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 1cqw)); } }
@keyframes cha-pulse { 0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(7, 94, 87, 0); } 12% { box-shadow: 0 0 0 1.6cqw rgba(7, 94, 87, .2); } }
@keyframes cha-load { 0% { transform: scaleX(0); } 28%, 100% { transform: none; } }
@keyframes cha-ok2 { 0%, 30% { transform: scale(0); } 36%, 92% { transform: none; } 100% { transform: scale(0); } }

/* animations only run in the sections on screen: site.js marks the animated elements of a section that is off screen */
.anim-held, .anim-held::before, .anim-held::after { animation-play-state: paused !important; }

/* the three extra services read like the cards above: a title, one plain line, the price, the link */
.extra .extra-text { padding: 26px 16px 0; display: flex; flex-direction: column; flex: 1; }
.extra h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.035em; color: var(--paper); margin-bottom: 10px; }
.extra .extra-lead { font-size: inherit; line-height: inherit; letter-spacing: normal; font-weight: 400; color: rgba(245, 243, 238, .72); margin-bottom: 22px; }
.extra .price { margin: -8px 0 22px; font-weight: 600; color: var(--paper); }
.extra .ask { margin-top: auto; }

/* more room between cards */
.service-grid, .extras { gap: clamp(18px, 2.4vw, 36px); }
.extras { margin-top: clamp(18px, 2.4vw, 36px); }
.care { margin-top: clamp(18px, 2.4vw, 36px); }
.choices { gap: clamp(18px, 2.4vw, 36px); }

/* Two-line subtitle: each half on its own line, never more than two lines, on any screen */
.hero .lede-two .l1, .hero .lede-two .then { display: block; white-space: nowrap; }
@media (max-width: 600px) { .hero .lede-two { font-size: min(20px, 5.4vw); } }

/* What we build: screenshots of working examples, each floating on its own colour field */
.shot { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: calc(var(--radius) - 10px); overflow: hidden; background: #E7E1D6; }
.shot img { position: absolute; left: 9%; top: 11%; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(10, 10, 10, .08), 0 30px 60px -28px rgba(10, 10, 10, .45); transition: transform .8s var(--ease); }
.shot:hover img { transform: translateY(-4px); }
.shot .try { position: absolute; top: auto; right: auto; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; text-decoration: none; }
.shot:hover .try, .shot:focus-visible .try { background: var(--teal); }
.shot:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .shot img { transition: none; } .shot:hover img { transform: none; } }


/* Care after launch: the status card opens the working care dashboard */
.care .care-try { position: relative; text-decoration: none; color: inherit; }
.care-try .try { position: absolute; top: auto; right: auto; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; }
@media (max-width: 560px) { .care .care-try { padding-bottom: 64px; } }


/* v3: What we build as editorial rows, extras in one dark panel, work as one large project then a pair */
.service-grid { display: block; border-top: 1px solid var(--hair); }
.service, .service:last-child { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 88px); align-items: center; background: none; border-radius: 0; padding: clamp(28px, 3.4vw, 56px) 0; border-bottom: 1px solid var(--hair); }
.service:hover { transform: none; }
.service .shot { aspect-ratio: 16 / 9.4; border-radius: calc(var(--radius) - 6px); }
.service .shot img { left: 8%; top: 10%; width: 104%; }
.service .shot:hover img { transform: translateY(-6px); }
.service-text, .service:last-child .service-text { padding: 0; display: block; max-width: 30rem; }
.service h3 { font-size: clamp(34px, 3.7vw, 60px); line-height: .98; letter-spacing: -0.045em; margin-bottom: 18px; }
.service p { font-size: clamp(17px, 1.25vw, 20px); margin-bottom: 26px; max-width: 34ch; }
.service .price { margin: 0 0 30px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 17px; }
.service .shot .try { left: 18px; bottom: 18px; padding: 10px 16px; font-size: 14px; }

.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(40px, 5vw, 80px); background: var(--night); color: var(--paper); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 40px) 0; }
.extra { background: none; border-radius: 0; padding: 0 clamp(22px, 2.6vw, 40px); }
.extra + .extra { border-left: 1px solid var(--hair-light); }
.extra .shot { aspect-ratio: 16 / 10; background: var(--night-2); }
.extra .shot img { left: 8%; top: 10%; width: 110%; box-shadow: 0 0 0 1px rgba(245, 243, 238, .08), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.extra .shot .try { background: var(--paper); color: var(--ink); }
.extra .shot:hover .try, .extra .shot:focus-visible .try { background: var(--mint); color: var(--ink); }
.extra-text { padding: 24px 0 0; }
.project-pair .project:nth-child(2) .pm-phone { left: auto; right: 7%; }
.project-info { border-top: 1px solid var(--hair-light); margin-top: 24px; }
.field-sand { background: linear-gradient(160deg, #E4D9C6, #CDBEA5); }

@media (max-width: 900px) {
  .service, .service:last-child { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .service-text, .service:last-child .service-text { max-width: none; }
  .extras { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .extra + .extra { border-left: 0; border-top: 1px solid var(--hair-light); margin-top: 28px; padding-top: 28px; }
}
@media (max-width: 600px) {
  .service .shot .try { left: 12px; bottom: 12px; padding: 8px 13px; font-size: 13px; }
}

/* Hero reel v2: real screens full-frame, cut on the frame, a quiet caption in the corner */
.film-frame[data-reel] .reel-v { opacity: 0; object-fit: cover; object-position: top center; transform: scale(1.001); }
.film-frame[data-reel] .reel-v.on { opacity: 1; }
.film-frame[data-reel].playing .film-poster { opacity: 0; }
.reel-cap { position: absolute; left: 20px; bottom: 20px; z-index: 3; margin: 0; display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(10, 10, 10, .86); color: var(--paper); font-size: 14px; line-height: 1.2; opacity: 0; transition: opacity .3s; }
.film-frame[data-reel].playing .reel-cap { opacity: 1; }
.reel-cap b { font-weight: 600; color: var(--mint); }
.reel-cap span { color: rgba(245, 243, 238, .86); }
@media (max-width: 760px) { .film-frame[data-reel] { aspect-ratio: 9 / 16; background: #ECE8E0; } .film-frame[data-reel] .reel-v, .film-frame[data-reel] .film-poster { object-fit: contain; object-position: center; } }
@media (max-width: 600px) { .reel-cap { left: 12px; bottom: 12px; padding: 8px 12px; font-size: 12px; gap: 8px; max-width: calc(100% - 140px); } .reel-cap span { display: none; } }




/* v4: review fixes. One row style for every offer, links under the images, Care prices as a plain list, no step numbers */
.card-links .ask { margin: 0; }

/* Extras: the same plain image-and-text layout as above, three across, no outer panel */
.extras { background: none; color: var(--ink); border-radius: 0; padding: 0; border-bottom: 1px solid var(--hair); margin-top: clamp(48px, 6vw, 96px); column-gap: clamp(20px, 2.4vw, 40px); }
.extra, .extra + .extra { padding: 0 0 clamp(32px, 3.4vw, 52px); border-left: 0; background: none; color: var(--ink); }
.extra .shot { background: #E7E1D6; }
.extra .shot img { box-shadow: 0 0 0 1px rgba(10, 10, 10, .08), 0 30px 60px -28px rgba(10, 10, 10, .45); }
.extra .shot-automation { background: #DDE6DA; }
.extra .shot-crm { background: #EAD8C8; }
.extra .shot-chat-assistant { background: #E3DCD2; }
.extra h3 { font-size: clamp(26px, 2.2vw, 36px); font-weight: 500; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 12px; }
.extra .extra-lead { font-size: 17px; line-height: 1.5; letter-spacing: 0; font-weight: 400; color: var(--ink-2); margin-bottom: 18px; }
.extra .price { color: var(--ink); margin: 0 0 22px; padding-top: 16px; border-top: 1px solid var(--hair); }
.extra .price small { color: var(--muted); }
.extra .ask { color: var(--ink); }
.extra-text { padding-top: 26px; }

/* Care: prices as a plain list with thin rules */
.care-tiers { display: block; border-top: 1px solid var(--hair); margin-bottom: 18px; }
.tier { background: none; border-radius: 0; padding: 14px 0; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--hair); }
.tier-name { order: 1; font-size: 16px; }
.tier-price { order: 2; flex: none; font-size: clamp(22px, 1.9vw, 28px); white-space: nowrap; }
.tier-price small.from { display: inline; margin: 0 4px 0 0; }

/* How it works: no numbers, the active step marked by its colour and bar */
.process-story .step-row button, .process-story .step-row button { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1100px) { .extras { grid-template-columns: minmax(0, 1fr); } .extra + .extra { border-top: 1px solid var(--hair); margin-top: 0; padding-top: clamp(32px, 3.4vw, 52px); } }
@media (max-width: 900px) { .process-story .step-row button { grid-template-columns: minmax(0, 1fr); } }

/* Phones: show one large detail of each example instead of the whole screen shrunk down */
@media (max-width: 600px) {
  .service .shot, .extra .shot { aspect-ratio: 4 / 3; }
  .service .shot img, .extra .shot img { width: 250%; max-width: none; border-radius: 14px; }
  .shot.shot-job-sheets img { left: -6%; top: 2%; }
  .shot.shot-website img { left: -24%; top: -8%; width: 210% !important; }
  .shot.shot-web-app img { left: -18%; top: -6%; }
  .shot.shot-automation img { left: -6%; top: -4%; }
  .shot.shot-crm img { left: -40%; top: -6%; }
  .shot.shot-chat-assistant img { left: -158%; top: -60%; }
}


/* v5: colour worlds. Each example sits on its own colour, taken from its design, with its real screen running off the edge */

.service-grid { border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 1.8vw, 28px); }
.service.world, .service.world:last-child { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: stretch; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--w-bg); color: var(--w-ink); min-height: clamp(440px, 40vw, 600px); }
.service.world .service-text, .service.world:last-child .service-text { order: 1; align-self: center; max-width: none; padding: clamp(32px, 4vw, 72px); }
.service.world .shot { order: 2; aspect-ratio: auto; height: 100%; min-height: 100%; border-radius: 0; background: none; overflow: visible; }
.service.world .shot img { left: 4%; top: 15%; width: 150%; border-radius: 12px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.service.world .shot:hover img { transform: translateY(-6px); }
.service.world h3 { color: var(--w-ink); }
.service.world p { color: var(--w-soft); }
.service.world .price { color: var(--w-ink); border-top-color: var(--w-line); }

.extras { border-bottom: 0; gap: clamp(16px, 1.8vw, 28px); }
.extra.world, .extra.world + .extra.world { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--w-bg); color: var(--w-ink); }
.extra.world .extra-text { order: 1; padding: clamp(26px, 2.6vw, 40px) clamp(24px, 2.4vw, 36px) 26px; display: flex; flex-direction: column; flex: 1; }
.extra.world .shot { order: 2; aspect-ratio: 16 / 10; border-radius: 0; background: none; margin-top: auto; }
.extra.world .shot img { left: 9%; top: 6%; width: 140%; border-radius: 10px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.extra.world h3 { color: var(--w-ink); }
.extra.world .extra-lead { color: var(--w-soft); }
.extra.world .price { color: var(--w-ink); border-top-color: var(--w-line); }
.extra.world .price small { color: var(--w-soft); }
.extra.world .card-links { margin-top: auto; }

.firm { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 2vw, 28px) !important; font-size: 14px !important; font-weight: 600; letter-spacing: .01em; color: var(--w-ink) !important; opacity: .9; }
.firm svg { width: 24px; height: 24px; flex: none; color: var(--w-ink); }

/* One button style: a filled pill for the main action, an underlined link for the second */
.world .ask { color: var(--w-ink); }
.care-try .try { padding: 13px 22px; font-size: 16px; }

@media (max-width: 900px) {
  .service.world, .service.world:last-child { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .service.world .service-text, .service.world:last-child .service-text { padding: 32px 26px 8px; }
  .service.world .shot { aspect-ratio: 4 / 3; height: auto; min-height: 0; overflow: hidden; }
  .service.world .shot img { left: 7%; top: 9%; width: 160%; }
}
@media (max-width: 600px) {
  .service.world .shot, .extra.world .shot { aspect-ratio: 4 / 3.2; }
}


/* v6: space. Bigger gaps between sections, one idea per screen, nothing on top of the images */
:root { --section: clamp(120px, 14vw, 240px); }
.section-head { margin-bottom: clamp(64px, 8vw, 128px); }
.service-grid, .extras { gap: clamp(24px, 3vw, 48px); }
.extras { margin-top: clamp(72px, 9vw, 144px); }
.care { margin-top: clamp(72px, 9vw, 144px); }
.project-list { gap: clamp(96px, 12vw, 200px); }
.film-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; margin-top: 18px; }
.film-meta .reel-cap { position: static; padding: 0; background: none; border-radius: 0; opacity: 0; font-size: 15px; }
.film-meta.playing .reel-cap { opacity: 1; }
.film-meta .media-toggle.labelled { position: static; opacity: 1; background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--hair-light); }
.film-meta .media-toggle.labelled:hover { background: var(--paper); color: var(--ink); }
.care .care-visual > div { display: contents; }
@media (max-width: 600px) { .film-meta .reel-cap span { display: inline; } .film-meta .reel-cap { font-size: 13px; max-width: none; } .film-meta { margin-top: 12px; } }

/* One colour grade on the main site too: app screens get the same warm, muted grade as the examples; the film a lighter touch so it stays sharp. Alex's portrait carries its own grade (wall warmed, skin left true), so it takes no filter */
.field-deep .pm-desk img, .field-deep .pm-phone img { filter: saturate(.8) contrast(1.06) brightness(.95) sepia(.12); }
.film-frame[data-reel] .reel-v, .film-frame[data-reel] .film-poster { filter: saturate(.9) contrast(1.03) sepia(.05); }



/* v9: stacked hero. Headline full width on two lines, one row for the lede and button,
   then our real apps full width, with the top of the film showing on the first screen */
.hero-film-bleed .hero-title .line > span { white-space: nowrap; }
.hero-film-bleed .hero-reel .reel-v { object-fit: cover; transition: none; filter: saturate(.92) sepia(.04); }
.hero-film-bleed .film-meta { margin: 16px 0 0; padding: 0; border: 0; }
.hero-film-bleed .reel-cap { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.hero-film-bleed .reel-cap b { font-weight: 600; }
.services { padding-top: clamp(96px, 9vw, 160px); }
@media (max-width: 960px) {
  .hero-film-bleed .hero-title .line > span { white-space: normal; }
  .hero-film-bleed .hero-reel .reel-v { object-position: center top; transform: none; }
}

/* v10: one type scale. Seven sizes for the site itself; the mock app screens keep their own */
:root {
  --t-display: clamp(44px, 6.2vw, 112px);
  --t-h2: clamp(40px, 5.2vw, 84px);
  --t-h3: clamp(26px, 2.5vw, 38px);
  --t-lead: clamp(19px, 1.5vw, 23px);
  --t-body: 17px;
  --t-small: 14px;
  --t-micro: 12px;
}
.section-head h2, .about-copy h2, .contact .section-head h2, .faq .section-head h2 { font-size: var(--t-h2); line-height: .98; letter-spacing: -0.035em; }
.service h3, .service.world h3, .extra h3, .extra.world h3, .project-info h3, .care-body h3, .process-story .step-title, .qa summary { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -0.03em; }
.hero .lede, .about-copy > p, .care-what, .contact .lede { font-size: var(--t-lead); line-height: 1.45; }
.service p, .service.world p, .extra .extra-lead, .extra.world .extra-lead, .project-info p, .qa p, .contact-aside p, .process-story .step-line, .tier-name, .price, .service .price, .extra .price, .btn, .ask, .textlink, .faq p { font-size: var(--t-body); }
.tier-price { font-size: var(--t-lead); }
.nav-links a, .eyebrow, .about-copy .eyebrow, .firm, .tags li, .care-small, .pm-view, .footer-base, .media-toggle.labelled, .tools-title, .price small, .extra .price small { font-size: var(--t-small) !important; }
.reel-cap, .hero-film-bleed .reel-cap { font-size: var(--t-micro); }

/* v10: dark page throughout. Light sections take the night ground; their colour tokens flip inside them */
html, body.dark-site { background: var(--night); }
.dark-site .services, .dark-site .process, .dark-site .about, .dark-site .faq {
  --ink: #F5F3EE; --ink-2: rgba(245, 243, 238, .8); --muted: rgba(245, 243, 238, .58); --hair: rgba(245, 243, 238, .14);
  --paper: #0A0A0A; --paper-2: #172020;
  background: var(--night); color: var(--ink);
}
.dark-site .work, .dark-site .contact { background: #121817; }
.dark-site .care { background: #172020; }
.dark-site .care .care-visual { background: #0A0A0A; }
.dark-site .services .btn-try { background: #F5F3EE; color: #0A0A0A; }
.dark-site .services .btn-try:hover { background: var(--mint); color: #0A0A0A; }

/* v10: centred hero, in the style of the reference */
.hero-film-bleed .hero-title .line > span { text-align: center; }
.hero-film-bleed .film-meta-wrap .film-meta { justify-content: center; gap: 24px; }
/* v10 dark fixes: parts designed as dark panels or light app mock-ups keep their own colours */
.dark-site .tests { --paper: #F5F3EE; --ink: #141414; --ink-2: #3A423F; --muted: #5C6461; --hair: rgba(20, 25, 23, .13); background: #172020; color: #F5F3EE; }
.dark-site .process-story .step-row.is-on .step-title { color: #F5F3EE; }
.services-intro { margin: 22px 0 0; max-width: 46ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); }

/* v11: two extras now that automation leads the services */
.extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .extras { grid-template-columns: minmax(0, 1fr); } }

/* v12: the designed hero film, one file; its own colour fields fill the frame */
.hero-film-bleed .hero-reel .media-toggle.labelled { right: 20px; bottom: 20px; }


/* v14: tools strip, refined. One quiet line framed by hairlines: the label held still on the left,
   the tools gliding past at an even pace, small marks, mid-tone type, soft edges */

/* v14: section heads. Label on a hairline, the title large on the left, the intro set against it on the right */
.services .section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; padding-top: 22px; border-top: 1px solid var(--hair); }
.services .section-head .eyebrow { grid-column: 1 / -1; margin: 0 0 clamp(40px, 5vw, 72px); justify-content: space-between; }
.services .section-head .eyebrow::before { display: none; }
.services .section-head .eyebrow::after { content: 'Six ways we help'; color: var(--muted); font-weight: 400; }
.services .section-head h2 { margin: 0; }
.services .services-intro { margin: 0 0 .55em; max-width: 36ch; font-size: var(--t-lead); color: var(--ink-2); }
@media (max-width: 900px) {
  .services .section-head { grid-template-columns: minmax(0, 1fr); }
  .services .services-intro { margin: 24px 0 0; }
}


/* ==========================================================================
   v15 Night Workshop (homepage only, scoped to .dark-site)
   The colour lives inside the work. Exact surfaces: a hairline, a 1px top highlight,
   one tonal gradient in each card's own colour. Tiny capitals for labels. No dash marks.
   ========================================================================== */
.dark-site {
  --night: #000000; --n2: #121212; --n3: #1A1A1A;
  --line: rgba(236, 240, 234, .08); --line-2: rgba(236, 240, 234, .16);
  --hi: rgba(255, 255, 255, .06);
  --text: #EEF0EA; --soft: #93A09B;
  --r-card: clamp(18px, 1.8vw, 26px);
  --section: clamp(88px, 8.5vw, 140px);
  --grain: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background: var(--night); color: var(--text);
}
/* the dark pages: the check looks only at html's own children (> body), one step instead of a walk through the whole page on every restyle */
html:has(> body.dark-site) { background: #000000; scroll-padding-top: 72px; }
.dark-site .services, .dark-site .process, .dark-site .about, .dark-site .faq { --paper: #000000; --paper-2: #121212; --ink: #EEF0EA; --muted: #93A09B; --hair: rgba(236, 240, 234, .09); background: transparent; }
.dark-site { --sel-bg: var(--mint); --sel-fg: #000000; }
.dark-site :focus-visible { outline-color: var(--mint); }

/* labels: tiny capitals, no leading dot or rule */
.dark-site .eyebrow { font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); gap: 0; }
.dark-site .eyebrow::before { content: none; }
.dark-site .services .section-head .eyebrow::after { font-weight: 600; color: rgba(147, 160, 155, .7); }

/* ---------- header ---------- */
.dark-site .nav { color: var(--text); }
.dark-site .nav .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; height: 64px; }
.dark-site .nav .brand { margin: 0; justify-self: start; font-size: 18px; }
.dark-site .nav .brand svg { width: 28px; height: 22px; }
.dark-site .nav .btn { justify-self: end; }
.dark-site .nav.scrolled, .dark-site .nav.on-dark.scrolled { background: rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); box-shadow: 0 1px 0 var(--line); }
.dark-site .nav-links { gap: 2px; padding: 4px; border-radius: 999px; }
.dark-site .nav-links a { padding: 8px 14px; border-radius: 999px; opacity: .72; background: none; transition: opacity .2s, background-color .2s; }
.dark-site .nav-links a:hover { opacity: 1; background: rgba(236, 240, 234, .06); }
.dark-site .nav .btn, .dark-site .nav.on-dark .btn { padding: 9px 16px; gap: 8px; font-size: 14px; background: var(--mint); color: #000000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(140, 207, 198, .5); }
.dark-site .nav .btn:hover, .dark-site .nav.on-dark .btn:hover { background: #A9DDD5; color: #000000; }

/* ---------- buttons ---------- */
.dark-site .ask { background-size: 100% 1px; }

/* ---------- hero ---------- */
.dark-site .hero { background: var(--night); }
.dark-site .hero::before { background:
  linear-gradient(rgba(236, 240, 234, .045) 1px, transparent 1px) 50% 0 / 72px 72px,
  linear-gradient(90deg, rgba(236, 240, 234, .045) 1px, transparent 1px) 50% 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 22%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 60% 48% at 50% 22%, #000 0%, transparent 78%); }
.dark-site .hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 34%; height: 70%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(7, 94, 87, .42), rgba(7, 94, 87, .12) 55%, transparent 75%); }
.dark-site .hero .lede .l1 { color: var(--text); }
.dark-site .media-toggle.labelled { background: rgba(0, 0, 0, .78); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px !important; }
.dark-site .media-toggle.labelled:hover { background: var(--text); color: #000000; }

/* ---------- tools: a still grid of tiles, each tinted with the tool's own colour ---------- */
.dark-site .hero-film-bleed .tools .tool { --brand: #EEF0EA; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 120px; padding: 16px 16px 15px; border-radius: 16px; isolation: isolate;
  background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 11%, #121212), #111111 70%);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi); transition: box-shadow .25s; }
.dark-site .hero-film-bleed .tools .tool:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent), inset 0 1px 0 var(--hi); }
.dark-site .hero-film-bleed .tools .tool + .tool::before { content: none; }
.dark-site .hero-film-bleed .tools .tool svg { opacity: 1; }

/* ---------- section heads ---------- */
.dark-site .services { padding-top: 0; }
.dark-site .services .section-head { border-top-color: var(--line); }
.dark-site .section-head { margin-bottom: clamp(48px, 5.5vw, 88px); }

/* ---------- What we build: a bento of colour worlds ---------- */
.dark-site .service.world, .dark-site .service.world:last-child, .dark-site .extra.world { border-radius: var(--r-card); }
.dark-site .world .shot img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -36px rgba(0, 0, 0, .85); }

/* wide cards: text and screen side by side, the screen cut by the card edge */
.dark-site .service.world:nth-child(1), .dark-site .service.world:nth-child(4) { grid-column: span 12; min-height: clamp(460px, 40vw, 580px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.dark-site .service.world:nth-child(4) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dark-site .service.world:nth-child(4) .shot { order: 0; }
.dark-site .service.world:nth-child(4) .shot img { left: auto; right: 4%; top: 15%; width: 150%; }
.dark-site .service.world:nth-child(4) .service-text { order: 2; }
/* half cards: words on top, the screen running off the bottom right corner */
.dark-site .service.world:nth-child(2), .dark-site .service.world:nth-child(3) { grid-column: span 6; display: flex; flex-direction: column; min-height: 0; }
.dark-site .service.world:nth-child(2) .service-text, .dark-site .service.world:nth-child(3) .service-text { padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) 28px; align-self: stretch; }
.dark-site .service.world:nth-child(2) .shot, .dark-site .service.world:nth-child(3) .shot,
.dark-site .extra.world .shot { order: 2; margin-top: auto; height: auto; min-height: 0; aspect-ratio: 16 / 9.2; overflow: hidden; }
.dark-site .service.world:nth-child(2) .shot img, .dark-site .service.world:nth-child(3) .shot img,
.dark-site .extra.world .shot img { left: 10%; top: 9%; width: 125%; }
.dark-site .service.world p:not(.firm):not(.price) { max-width: 40ch; }

/* extras: the same card, two across */
.dark-site .extra.world .extra-text { padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) 28px; }

/* care: one quiet surface */
.dark-site .care { margin-top: clamp(12px, 1.2vw, 18px); position: relative; border-radius: var(--r-card); background: linear-gradient(160deg, #162120, #111111 60%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi); padding: 10px; }
.dark-site .care .care-visual { border-radius: calc(var(--r-card) - 8px); background: #0D1312 radial-gradient(420px 260px at 70% 85%, rgba(7, 94, 87, .5), transparent 70%); box-shadow: inset 0 0 0 1px var(--line); }
.dark-site .care .status { background: #141C1B; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--hi), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.dark-site .care .btn-try { background: var(--text); color: #000000; }
.dark-site .care .btn-try:hover { background: var(--mint); }

/* ---------- Things we have made ---------- */
.dark-site .work { background: transparent; margin-inline: 0; border-radius: 0; }
.dark-site .work .eyebrow { color: var(--soft); }

/* ---------- How it works ---------- */

/* ---------- About and the live tests ---------- */
.dark-site .portrait { border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line); }
.dark-site .tests { border-radius: var(--r-card); background: linear-gradient(170deg, #162120, #111111 70%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi); }
.dark-site .tests-head, .dark-site .tests-foot { box-shadow: none; border-bottom: 1px solid var(--line); }
.dark-site .tests-foot { border-bottom: 0; border-top: 1px solid var(--line); }
.dark-site .tests .run-tests { background: var(--text); color: #000000; box-shadow: inset 0 1px 0 #fff; }
.dark-site .tests .run-tests:hover { background: var(--mint); }

/* ---------- Questions ---------- */
.dark-site .faq-list, .dark-site .qa { border-color: var(--line); }
.dark-site .qa summary::after { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--hi); }
.dark-site .qa summary:hover::after { background: rgba(236, 240, 234, .06); }
.dark-site .qa[open] summary::after { background: var(--mint); color: #000000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }

/* ---------- Contact: the form on its own surface ---------- */
.dark-site .contact { background: transparent; margin-inline: 0; border-radius: 0; }
.dark-site .contact .eyebrow { color: var(--soft); }
.dark-site #enquiry { padding: clamp(24px, 3vw, 44px); border-radius: var(--r-card); background: linear-gradient(170deg, #162120, #111111 70%); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi); }
.dark-site .field input, .dark-site .field textarea { border-bottom-color: var(--line-2); }
.dark-site .chips span { box-shadow: inset 0 0 0 1px var(--line-2); }
.dark-site .chips label:hover span { box-shadow: inset 0 0 0 1px rgba(236, 240, 234, .4); }
.dark-site .chips input:checked + span { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.dark-site .contact form .btn { background: var(--mint); color: #000000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.dark-site .contact form .btn:hover { background: #A9DDD5; }

/* ---------- footer ---------- */
.dark-site footer { background: transparent; margin: 0; border-radius: 0; color: var(--soft); }
.dark-site .wordmark { color: var(--text); -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .22) 100%); mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .22) 100%); }
.dark-site .wordmark b { color: var(--mint); }
.dark-site .footer-base { box-shadow: 0 -1px 0 var(--line); }
.dark-site .mobile-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 20px 40px -16px rgba(0, 0, 0, .8); }

/* ---------- motion off: colour and borders still answer, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .dark-site .world .shot:hover img { transform: none; }
  .dark-site a:hover .arrow, .dark-site button:hover .arrow { transform: none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .dark-site .service.world:nth-child(n) { grid-column: span 12; display: flex; flex-direction: column; min-height: 0; }
  .dark-site .service.world:nth-child(n) .service-text { order: 1; padding: 30px 24px 22px; }
  .dark-site .service.world:nth-child(n) .shot { order: 2; margin-top: auto; aspect-ratio: 4 / 3; height: auto; min-height: 0; overflow: hidden; }
  .dark-site .service.world:nth-child(4) .shot img { left: 7%; right: auto; top: 9%; width: 160%; }
  .dark-site .extra.world .extra-text { padding: 30px 24px 22px; }
}
@media (max-width: 760px) {
  .dark-site .nav .wrap { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; height: 56px; }
  .dark-site .nav-links { top: 56px; border-radius: 0; padding: 4px var(--gutter) 20px; background: var(--night); color: var(--text); box-shadow: 0 1px 0 var(--line); }
  .dark-site .nav-links a { padding: 14px 0; border-radius: 0; box-shadow: 0 1px 0 var(--line); opacity: 1; }
  .dark-site .nav.open, .dark-site .nav.open.on-dark.scrolled { background: var(--night); color: var(--text); box-shadow: 0 1px 0 var(--line); }
  .dark-site .nav.open .brand-u { stroke: #F3EFE6; } .dark-site .nav.open .brand-d { stroke: #8CCFC6; }
  .dark-site .nav.open .brand b { color: var(--mint); }
  .dark-site .nav.open .btn { background: var(--mint); color: #000000; }
  .dark-site .menu-toggle { width: 40px; height: 40px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); }
  .dark-site .hero-film-bleed .tools .tool { min-height: 96px; padding: 12px; gap: 14px; border-radius: 14px; }
  .dark-site #enquiry { padding: 22px 18px; }
}

/* v15 round 2: rhythm, light from above, calmer project fields */
.dark-site .services .section-head .eyebrow { margin-bottom: clamp(28px, 3.4vw, 52px); }
.dark-site .work, .dark-site .process { padding-block: var(--section); }
.dark-site .about, .dark-site .faq { padding-bottom: var(--section); }
.dark-site .contact { padding-block: var(--section) clamp(64px, 6vw, 96px); }
.dark-site .care::before, .dark-site .tests::before, .dark-site #enquiry::before {
  background: linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, .26) 32%, rgba(255, 255, 255, .06) 62%, transparent 85%) top / 100% 1px no-repeat; }
.dark-site .care::before, .dark-site .tests::before, .dark-site #enquiry::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; }
.dark-site .tests, .dark-site #enquiry { position: relative; }
@media (max-width: 760px) {
  .dark-site .nav .btn, .dark-site .nav.on-dark .btn { padding: 8px 13px; font-size: 13.5px !important; }
}
.dark-site .qa summary { font-size: clamp(20px, 1.9vw, 28px); }
@media (max-width: 760px) {
  .dark-site .nav-links a { font-size: 22px !important; font-weight: 500; letter-spacing: -0.02em; }
}

/* v16: the tool tiles glide past in one slow row (Alex asked for the scrolling strip, made better) */
.dark-site .hero-film-bleed .tools .tool { width: 184px; flex: none; }
@media (max-width: 760px) { .dark-site .hero-film-bleed .tools .tool { width: 140px; } }

/* ==========================================================================
   v17 What we build and Things we have made
   Art-directed stills (assets/work), one deep teal family, colour only inside the pictures.
   Equal cards, title and one line under each picture, the whole card is the link.
   ========================================================================== */

.dark-site .svc { position: relative; display: flex; flex-direction: column; min-width: 0; }
.dark-site .svc:hover .svc-media img, .dark-site .case:hover .case-media img { transform: scale(1.025); }
.dark-site .svc:hover .svc-media::after, .dark-site .case:hover .case-media::after { box-shadow: inset 0 0 0 1px rgba(7, 94, 87, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
.dark-site .svc .firm { gap: 10px; margin: 0 0 14px !important; font-size: 12px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft) !important; opacity: 1; }
.dark-site .svc .firm svg { width: 18px; height: 18px; color: var(--text); }
.dark-site .svc h3 { margin: 0 0 10px; font-size: clamp(24px, 2.1vw, 32px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: var(--text); max-width: 22ch; }
.dark-site .svc .svc-line { margin: 0 0 22px; max-width: 50ch; font-size: 16px; line-height: 1.5; color: var(--soft); }
.dark-site .svc .price { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px !important; font-weight: 500; line-height: 1.45; color: var(--text-2); max-width: none; }
.dark-site .svc .price small { display: inline; margin-left: 6px; font-size: inherit; font-weight: 400; color: var(--soft); }
.dark-site .svc .card-links { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
/* one action: the whole card opens the demo, Ask stays a quiet text link above it */
.dark-site .svc .btn-try { position: static; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); font-size: 15px; font-weight: 600; gap: 8px; }
.dark-site .svc .btn-try::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.dark-site .svc .btn-try:hover, .dark-site .svc .btn-try:focus-visible { background: none; color: var(--accent); }
.dark-site .svc:hover .btn-try { color: var(--accent); }
.dark-site .svc .btn-try:focus-visible { outline: none; }
.dark-site .svc .btn-try:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.dark-site .svc .ask { position: relative; z-index: 2; margin: 0; padding-bottom: 2px; font-size: 14px; font-weight: 500; color: var(--soft); background-size: 0 1px; transition: color .2s, background-size .3s var(--ease); }
.dark-site .svc .ask:hover, .dark-site .svc .ask:focus-visible { color: var(--text); background-size: 100% 1px; }
.dark-site .svc .ask .arrow { display: none; }

/* care: the same quiet language, its picture on the same teal field */
.dark-site .care { margin-top: clamp(96px, 9vw, 144px); padding: 0; gap: clamp(24px, 3vw, 56px); background: none; box-shadow: none; border-radius: 0; align-items: center; }
.dark-site .care::before { content: none; }
.dark-site .care .care-visual { aspect-ratio: 16 / 11; border-radius: var(--r-card); background: radial-gradient(100% 100% at 28% 20%, #2A5250 0%, #14302E 48%, #081413 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.dark-site .care .care-body { padding: 0; }
.dark-site .care .care-body h3 { font-size: clamp(24px, 2.1vw, 32px); font-weight: 500; letter-spacing: -0.03em; }
.dark-site .care .care-what { font-size: 16px; color: var(--soft); }
.dark-site .care .tier { border-color: var(--line); padding: 12px 0; }
.dark-site .care .care-tiers { border-color: var(--line); }
.dark-site .care .tier-name { font-size: 15px; color: var(--text-2); }
.dark-site .care .tier-price { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.dark-site .care .tier-price small { font-size: 13px; color: var(--soft); }
.dark-site .care .btn-try { padding: 11px 18px; font-size: 15px; }

/* ---------- Things we have made: large equal cases ---------- */
.dark-site .case { position: relative; min-width: 0; }
.dark-site .work .all-projects { margin-top: clamp(56px, 5.6vw, 88px); color: var(--text); }

/* the work sits on a warm paper band between the dark hero and How it works:
   the deep teal pictures read as lit objects, like the studios that show work on a light ground */
.dark-site .services, .dark-site .work {
  --text: #141414; --text-2: rgba(20, 26, 24, .8); --soft: #5A6561; --accent: #075E57;
  --ink: #141414; --ink-2: #3D4844; --muted: #5A6561; --hair: rgba(20, 26, 24, .12); --line: rgba(20, 26, 24, .12); --line-2: rgba(20, 26, 24, .22);
  background: #EFECE5; color: var(--text); margin-inline: clamp(6px, .8vw, 14px); }
.dark-site .services { border-radius: var(--r-card) var(--r-card) 0 0; padding-top: clamp(64px, 6.4vw, 104px); }
.dark-site .work { border-radius: 0 0 var(--r-card) var(--r-card); padding-top: clamp(40px, 4vw, 64px); }
.dark-site .services .section-head .eyebrow::after { color: var(--soft); }
.dark-site .services .section-head { border-top: 0; padding-top: 0; }
.dark-site .work .section-head { border-top: 1px solid var(--line); padding-top: clamp(40px, 4vw, 64px); }
.dark-site .services, .dark-site .work { --sel-bg: #075E57; --sel-fg: #EFECE5; }
.dark-site .care .btn-try { background: #141414; color: #EFECE5; box-shadow: none; }
.dark-site .care .btn-try:hover { background: #075E57; color: #EFECE5; }
@media (prefers-reduced-motion: reduce) {
  .dark-site .svc:hover .svc-media img, .dark-site .case:hover .case-media img { transform: none; }
}
@media (max-width: 760px) {
  .dark-site .care { margin-top: 88px; }
  .dark-site .care .care-visual { aspect-ratio: auto; }
}

/* v18: structure for What we build. A clear hierarchy instead of one long two-column list:
   the lead offer as a wide feature, the three core builds as an even row, the extras as compact
   side-by-side rows, then Care. Card text sits on a shared baseline so prices and links line up. */
.dark-site .svc { display: flex; flex-direction: column; }
.dark-site .svc:not(.svc-lead) h3 { font-size: clamp(22px, 1.9vw, 28px); }
.dark-site .svc:not(.svc-lead) .svc-media { aspect-ratio: 4 / 3; }
.dark-site .svc:not(.svc-lead) .svc-media img { width: 100%; height: 100%; object-fit: cover; }
.dark-site .extras.svc-grid .svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(18px, 2vw, 28px); align-items: stretch; }
.dark-site .extras.svc-grid .svc .svc-media { aspect-ratio: 1 / 1; }
@media (max-width: 1100px) {
  .dark-site .extras.svc-grid .svc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dark-site .svc:not(.svc-lead) .svc-media, .dark-site .extras.svc-grid .svc .svc-media { aspect-ratio: 1 / 1; }
}
.dark-site .svc:not(.svc-lead) .svc-media picture { display: block; width: 100%; height: 100%; }
.dark-site .svc:not(.svc-lead) .svc-media { overflow: hidden; }

/* v19: type pairing. Bricolage keeps its character in headings; Geist, a calm neutral grotesk, carries body copy,
   labels and small text so the long reading text stops looking quirky */
.dark-site { --font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
.dark-site, .dark-site p, .dark-site li, .dark-site a, .dark-site button, .dark-site input, .dark-site textarea, .dark-site label, .dark-site summary, .dark-site small, .dark-site span { font-family: var(--font-text); }
.dark-site h1, .dark-site h2, .dark-site h3, .dark-site .hero-title, .dark-site .hero-title span, .dark-site .wordmark, .dark-site .wordmark *, .dark-site .tests-score, .dark-site .tests-score * { font-family: var(--font); }
.dark-site .qa summary { font-family: var(--font); }
.brand span, .brand b, .wordmark, .wordmark *, .dark-site .brand span, .dark-site .brand b, .dark-site .wordmark, .dark-site .wordmark * { font-family: var(--font-brand); }
/* The word-rise wrappers are spans, which .dark-site span would set in Geist; keep them in the heading face. */
.dark-site :is(h1, h2, h3) :is(.pl-w, .pl-i, .sf-w, .sf-i) { font-family: inherit; }
.dark-site .services-intro { letter-spacing: -0.01em; }

/* v20: What we build as a service index. Each service is a full-weight row (large title, one line, what's included,
   price and links); on wide screens a sticky picture shows the service you're reading. */
.dark-site .svc-index { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.dark-site .svc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: clamp(32px, 3.2vw, 48px) 0; border-top: 1px solid var(--line); }
.dark-site .svc-row .firm { margin: 0 0 14px !important; }
.dark-site .svc-row h3 { margin: 0 0 12px; font-size: clamp(32px, 3.5vw, 54px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; color: rgba(20, 26, 24, .42); transition: color .35s var(--ease); }
.dark-site .svc-row.is-on h3, .dark-site .svc-row:hover h3, .dark-site .svc-row:focus-within h3 { color: #141414; }
.dark-site .svc-row .svc-line { margin: 0; font-size: var(--t-lead); color: var(--ink-2); max-width: 40ch; }
.dark-site .svc-row .price { margin: 0; padding: 0; border: 0; font-size: 15px; color: var(--ink-2); }
.dark-site .svc-row .card-links { display: flex; gap: 22px; align-items: center; margin: 0; }
.dark-site .svc-stage { position: sticky; top: 110px; }
.dark-site .svc-stage-pic { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.dark-site .svc-stage-pic.is-on { opacity: 1; }
.dark-site .svc-stage-pic picture, .dark-site .svc-stage-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .dark-site .svc-stage-pic, .dark-site .svc-row h3 { transition: none; } }
@media (max-width: 1100px) {
  .dark-site .svc-index { grid-template-columns: minmax(0, 1fr); }
  .dark-site .svc-stage { display: none; }
  .dark-site .svc-row h3 { color: #141414; }
}
.dark-site .svc-row h3 { color: #141414; }
.dark-site .svc-row { position: relative; transition: background-color .35s var(--ease); }
.dark-site .svc-row::before { content: ""; position: absolute; left: -18px; top: clamp(32px, 3.2vw, 48px); bottom: clamp(32px, 3.2vw, 48px); width: 2px; border-radius: 2px; background: var(--teal); opacity: 0; transition: opacity .35s var(--ease); }
.dark-site .svc-row.is-on::before { opacity: 1; }
.dark-site .svc-row .btn-try { background: #141414; color: #EEF0EA; padding: 11px 18px; font-size: 15px; }
.dark-site .svc-row .btn-try:hover { background: var(--teal); color: #fff; }
.dark-site .svc-row .price small { margin-left: .35em; }
@media (max-width: 1100px) { .dark-site .svc-row::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .dark-site .svc-row::before { transition: none; } }

/* v21: polish for What we build. Less chrome, more confidence:
   no filler label, a larger quieter head, included items as a fine spec list, the price set like a figure */
.dark-site .services .section-head .eyebrow::after { content: none; }
.dark-site .services .section-head h2 { font-size: clamp(52px, 6.6vw, 112px); letter-spacing: -0.045em; line-height: .92; }
.dark-site .services .services-intro { max-width: 30ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--soft); line-height: 1.5; }
.dark-site .svc-row .firm { font-size: 13px !important; color: var(--soft) !important; opacity: 1; }
.dark-site .svc-row .firm svg { width: 18px; height: 18px; }
.dark-site .svc-row h3 { font-size: clamp(34px, 3.8vw, 58px); letter-spacing: -0.04em; }
.dark-site .svc-row .svc-line { color: var(--soft); }
.dark-site .svc-row .price { display: grid; grid-template-columns: auto; row-gap: 2px; }
.dark-site .svc-row .btn-try { padding: 13px 20px; }
.dark-site .svc-row .ask { font-size: 15px; }
.dark-site .svc-row::before { width: 1px; left: -22px; }

/* v22: losing the template look (research: site-previews/anti-template-research.md).
   A live stage playing each service's moment from the hero film, the measured rule as our signature,
   one oversized title per row against small type, included work as a spec sheet, a square split button. */

/* the measured rule: a hairline with tape-measure ticks, fine every 8px, longer every 80px */
.dark-site .svc-row { border-top: 0; padding: clamp(40px, 4vw, 64px) 0 clamp(44px, 4.4vw, 72px); gap: 0; }
.dark-site .svc-row::after, .dark-site .services .section-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; pointer-events: none;
  background:
    linear-gradient(var(--line-2), var(--line-2)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 80px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat; }
/* the active row's rule fills in teal as its film plays: the rule doubles as the scrubber */
.dark-site .svc-row::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; border-radius: 0; z-index: 1; background: var(--teal); opacity: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: opacity .3s var(--ease); }
.dark-site .svc-row.is-on::before { opacity: 1; }
@media (max-width: 1100px) { .dark-site .svc-row::before { display: block; } }

/* scale: one oversized title, everything around it held small */
.dark-site .svc-row .firm { margin: 0 0 clamp(22px, 2.2vw, 34px) !important; gap: 10px; font-size: 11px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft) !important; transition: color .3s var(--ease); }
.dark-site .svc-row.is-on .firm { color: var(--teal) !important; }
.dark-site .svc-row h3 { position: relative; margin: 0 0 clamp(16px, 1.6vw, 24px); max-width: 12.5ch; font-size: clamp(44px, 5vw, 86px); font-weight: 500; line-height: .93; letter-spacing: -0.052em; color: #141414; transition: transform .55s var(--ease), color .3s var(--ease); }
.dark-site .svc-row .svc-line { max-width: 34ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; color: var(--ink-2); }
/* hover: the title steps right and an arrow draws in ahead of it */
.dark-site .svc-row h3::before { content: ""; position: absolute; left: -.62em; top: .2em; width: .44em; height: .44em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075E57' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M2 12h19M13 4l8 8-8 8'/%3E%3C/svg%3E") center / contain no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease) .05s; }
@media (hover: hover) and (min-width: 1101px) {
  .dark-site .svc-row:hover h3 { transform: translateX(.62em); }
  .dark-site .svc-row:hover h3::before { clip-path: inset(0 0 0 0); }
}

/* what's included, price and the two links: a small spec sheet beside one large figure */
.dark-site .svc-row .price { grid-area: price; display: grid; row-gap: 6px; margin: 0; }
.dark-site .svc-row .price-from { font-size: 11px; }
.dark-site .svc-row .price-amt { font-size: clamp(40px, 3.6vw, 58px); font-weight: 400; letter-spacing: -0.035em; line-height: .95; font-variant-numeric: lining-nums tabular-nums; }
.dark-site .svc-row[data-svc="3"] .price-amt { font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.03em; line-height: 1.05; }
.dark-site .svc-row .price-note { font-size: 13px; line-height: 1.45; max-width: 30ch; }
.dark-site .svc-row .card-links { grid-area: links; align-self: end; flex-wrap: wrap; gap: 14px 24px; }

/* the square split button: label, a hairline, the arrow in its own cell */
.dark-site .svc-row .btn-try, .dark-site .care .btn-try { gap: 0; padding: 0 0 0 18px; border-radius: 3px; background: #141414; color: #EFECE5; box-shadow: none; font-size: 15px; font-weight: 600; line-height: 46px; overflow: hidden; transition: background-color .3s var(--ease); }
.dark-site .svc-row .btn-try .arrow, .dark-site .care .btn-try .arrow { display: grid; place-items: center; width: 46px; height: 46px; margin-left: 18px; border-left: 1px solid rgba(239, 236, 229, .16); transition: background-color .3s var(--ease), transform .35s var(--ease); }
.dark-site .svc-row .btn-try:hover, .dark-site .care .btn-try:hover, .dark-site .svc-row .btn-try:focus-visible, .dark-site .care .btn-try:focus-visible { background: #141414; color: #EFECE5; }
.dark-site .svc-row .btn-try:hover .arrow, .dark-site .care .btn-try:hover .arrow, .dark-site .svc-row .btn-try:focus-visible .arrow, .dark-site .care .btn-try:focus-visible .arrow { background: var(--teal); transform: none; }
/* Ask: underlined, its arrow draws in on hover */
.dark-site .svc-row .ask { font-size: 15px; }
.dark-site .svc-row .ask .arrow { clip-path: inset(0 100% 0 0); transition: clip-path .45s var(--ease); }
.dark-site .svc-row .ask:hover .arrow, .dark-site .svc-row .ask:focus-visible .arrow { clip-path: inset(0 0 0 0); transform: none; }

/* the live stage */
.dark-site .svc-stage { top: 96px; }
/* the panel always fits the screen's height (laptops at 125% scaling are about 730px tall): it keeps its 4:5 shape and
   narrows on shorter screens, staying on the right edge of its column */
.dark-site .svc-stage { width: min(100%, calc((100vh - 128px) * 4 / 5)); justify-self: end; }
.dark-site .svc-live { border-radius: 6px; }
.dark-site .svc-live { position: absolute; inset: -1px; z-index: 2; overflow: hidden; pointer-events: none; }
.dark-site .svc-film { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; opacity: 0; }
.dark-site .svc-live-cap { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.dark-site .svc-live-cap span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 3px; background: rgba(0, 0, 0, .78); color: #EEF0EA; font-size: 12.5px; font-weight: 500; letter-spacing: -.005em; line-height: 1; white-space: nowrap; }
.dark-site .svc-live-firm { color: rgba(238, 240, 234, .72) !important; overflow: hidden; text-overflow: ellipsis; }
.dark-site .svc-live.paused .svc-live-on i::after { animation: none; opacity: 0; }
@keyframes svc-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.dark-site .svc-live-toggle { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .78); color: #EEF0EA; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .3s var(--ease), background-color .3s; }
.dark-site .svc-live.has-film .svc-live-toggle { opacity: 1; }
.dark-site .svc-live-toggle:hover { background: var(--teal); }
.dark-site .svc-live-toggle svg { width: 12px; height: 12px; }

/* the section heads carry the same measured rule */
.dark-site .section-head { padding-top: 26px; border-top: 0 !important; }
.dark-site .services .section-head { position: relative; }
.dark-site .faq .section-head { padding-top: 26px; }
.dark-site .work .section-head { padding-top: 26px; margin-top: clamp(24px, 2.4vw, 40px); }

@media (prefers-reduced-motion: reduce) {
  .dark-site .svc-row h3, .dark-site .svc-row h3::before, .dark-site .svc-row .ask .arrow { transition: none; }
  .dark-site .svc-row:hover h3 { transform: none; color: var(--teal); }
  .dark-site .svc-row:hover h3::before { clip-path: inset(0 100% 0 0); }
}
@media (max-width: 1100px) {
  .dark-site .svc-row-media .svc-live:not(.has-film) { display: none; }
  .dark-site .svc-row { padding-top: 28px; }
  .dark-site .svc-row h3 { max-width: 14ch; }
}
@media (max-width: 760px) {
  .dark-site .svc-row h3 { font-size: clamp(40px, 11.6vw, 48px); }
  .dark-site .svc-row .price-amt { font-size: 44px; }
  .dark-site .svc-row::after, .dark-site .services .section-head::before { background-size: 100% 1px, 100% 7px, 100% 3px; }
}
@media (max-width: 900px) { .dark-site .faq .section-head { position: relative; top: auto; } }

/* carried through the page: the same square split button on the project label and the form */
.dark-site .tests .run-tests { border-radius: 3px; }
.dark-site .contact form .btn { gap: 0; padding: 0 0 0 22px; border-radius: 3px; line-height: 50px; overflow: hidden; }
.dark-site .contact form .btn .arrow { display: grid; place-items: center; width: 50px; height: 50px; margin-left: 22px; border-left: 1px solid rgba(0, 0, 0, .16); transition: background-color .3s var(--ease); }
.dark-site .contact form .btn:hover .arrow { background: #000000; color: var(--mint); transform: none; }

/* one corner for every picture on the paper band: tight, like a print, not an app card */
.dark-site .care .care-visual { border-radius: 6px; }
.dark-site .services .section-head { padding-top: 30px; }
/* the film has a dark hairline on its right edge: crop it off */
.dark-site .svc-film { transform: scale(1.015); }
/* switching films: the next one dissolves in over the old one and settles from a touch larger, on Apple's ease in and out
   (brand/motion.md); the old one leaves the same way it came. The stills underneath take the same curve. */
.dark-site .svc-live .svc-film { transform: scale(1.04); transition: opacity .7s cubic-bezier(.65, 0, .35, 1), transform .9s cubic-bezier(.65, 0, .35, 1) !important; }
.dark-site .svc-live .svc-film.is-shown { opacity: 1; transform: scale(1.015); }
.dark-site .svc-live .svc-film.is-top { z-index: 1; }
.dark-site .svc-live .svc-film.is-reset { transition: none !important; }
.dark-site .svc-live-cap, .dark-site .svc-live-toggle { z-index: 2; }
.dark-site .svc-stage-pic { transition: opacity .7s cubic-bezier(.65, 0, .35, 1) !important; }
/* which service you're on: the others fade back, and the panel's label (named after the service) swaps with the film */
.dark-site .svc-live-firm { color: #EEF0EA !important; transition: opacity .24s cubic-bezier(.65, 0, .35, 1); }
.dark-site .svc-live-firm.is-out { opacity: 0; }
@media (min-width: 1101px) {
  .dark-site .svc-row > * { transition: opacity .7s cubic-bezier(.65, 0, .35, 1); }
  .dark-site .svc-row:not(.is-on) > * { opacity: .28; }
}
/* on phones the firm is named just under the picture, so the stage caption keeps only the status */
.dark-site .svc-row-media .svc-live-firm { display: none; }
@media (hover: none) { .dark-site .svc-row .ask .arrow { clip-path: inset(0 0 0 0); } }
.dark-site .svc-live-firm { margin-left: auto; }

/* ==========================================================================
   v23: the rest of the page in the language of What we build (research: site-previews/flow-research.md).
   The intro, the work, How it works and About take the measured rule, the 7/5 grid, big titles against
   11 to 15px detail, spec rows on fine rules and the square split button. Nothing new to read, only structure.
   ========================================================================== */

/* the intro: the claim, then the detail, on the head's baseline under its own measured rule */
.dark-site .services .section-head { align-items: end; }
.dark-site .services .services-intro { position: relative; display: grid; gap: 12px; align-self: end; max-width: none; margin: 0 0 .35em; padding-top: 24px; }
.dark-site .services .services-intro::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; pointer-events: none;
  background: linear-gradient(var(--line-2), var(--line-2)) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 80px) 0 0 / 100% 9px no-repeat, repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat; }
.dark-site .services .si-lead { font-family: var(--font); font-size: clamp(24px, 2.1vw, 34px); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; color: #141414; max-width: 17ch; }
.dark-site .services .si-note { max-width: 34ch; font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--soft); }

/* the work: the same grid as the services (7/5), one lead and an uneven pair, each project measured */
.dark-site .work .section-head { margin-bottom: clamp(40px, 4.4vw, 72px); }
/* the tags become a spec row: equal cells between fine rules */
/* View project: the square split button, always in view on the picture's corner */
.dark-site .work .all-projects { margin-top: clamp(48px, 4.8vw, 72px); }

/* How it works: four rows anyone can read at rest, each on the measured rule; the active one fills as its scene plays */
.dark-site .process-story .step-row.is-on .step-title { color: #EEF0EA; }
.dark-site .process-story .step-row.is-on .step-line { color: rgba(238, 240, 234, .86); }
/* the stage: the same tight corner and teal field as the pictures above, its step named in the corner */

/* About: the person as the proof. A larger portrait with the name set as a spec caption; the copy column is measured */
.dark-site .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); }
.dark-site .about-id { top: 96px; gap: 0; }
.dark-site .about-id .portrait { max-width: none; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.dark-site .about-id p { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; padding: 12px 0 13px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.dark-site .about-id p b { font-size: 15px; font-weight: 600; color: var(--text); }
.dark-site .about-id p span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.dark-site .about-copy h2 { font-size: clamp(44px, 5.2vw, 88px); line-height: .94; letter-spacing: -0.05em; max-width: 12em; }
.dark-site .about-copy > p { max-width: 38ch; }
/* the test card as a spec sheet: square corners, the score as a figure, the measured rule as the pass meter */
.dark-site .tests { margin-top: clamp(36px, 3.6vw, 56px); border-radius: 6px; background: #111111; box-shadow: inset 0 0 0 1px var(--line); }
.dark-site .tests::before { content: none; }
.dark-site .tests-head { position: relative; align-items: end; padding: 24px 24px 30px; border-bottom: 0; }
.dark-site .tests-title b { font-size: 15px; }
.dark-site .tests-score { gap: 8px; }
.dark-site .tests-score b { font-size: clamp(56px, 4.6vw, 76px); font-weight: 400; line-height: .8; letter-spacing: -0.045em; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.dark-site .tests-score.all b { color: var(--mint); }
.dark-site .tests-score span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.dark-site .test-list { padding: 4px 24px; }
.dark-site .test { gap: 14px; padding: 13px 0; font-size: 15px; box-shadow: 0 1px 0 var(--line); }
.dark-site .t-mark { width: 18px; height: 18px; border-radius: 3px; }
.dark-site .test.is-pass .t-mark { background-size: 12px; }
.dark-site .tests-foot { padding: 16px 24px 18px; }
.dark-site .tests-summary { font-size: 13px; }
.dark-site .tests .run-tests { gap: 0; padding: 0 0 0 16px; border-radius: 3px; font-size: 14px; line-height: 42px; overflow: hidden; }
.dark-site .tests .run-tests .arrow { display: grid; place-items: center; width: 42px; height: 42px; margin-left: 16px; border-left: 1px solid rgba(0, 0, 0, .14); transition: background-color .3s var(--ease); }
.dark-site .tests .run-tests:hover { background: var(--text); }
.dark-site .tests .run-tests:hover .arrow { background: var(--mint); transform: none; }

/* motion off: nothing slides or pops; each scene shows its finished state, the active rule is simply full */
@media (prefers-reduced-motion: reduce) {
  .dark-site .process-story .step-row.is-on .step-bar { animation: none; transform: none; }
  .dark-site .ps-scene, .dark-site .ps-scene.is-on { transition: none; }
}
@media (max-width: 900px) {
  .dark-site .about-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dark-site .services .services-intro { margin-top: 28px; max-width: none; }
  .dark-site .services .si-lead { font-size: 24px; }
  .dark-site .services .services-intro::before { background-size: 100% 1px, 100% 7px, 100% 3px; }
  .dark-site .about-id { flex-direction: column; align-items: stretch; }
  .dark-site .about-id .portrait { width: 100%; aspect-ratio: 4 / 4.2; border-radius: 6px; }
  .dark-site .about-copy h2 { font-size: clamp(38px, 10.6vw, 44px); }
  .dark-site .tests-head { padding: 20px 18px 26px; }
  .dark-site .test-list { padding: 2px 18px; }
  .dark-site .tests-foot { padding: 14px 18px 16px; }
  .dark-site .tests-score b { font-size: 52px; }
}

.dark-site .tests .run-tests { flex: none; }

/* ==========================================================================
   v24: one device per section (research: site-previews/sections-character-research.md).
   The measuring rule now lives only in What we build. Things we've made shows three plates in three worlds,
   How it works is a cross grid with a clock ring, the test card lights five lamps, Questions has a quiet head
   and Contact closes on the largest type on the page.
   ========================================================================== */
@property --t { syntax: '<number>'; inherits: false; initial-value: 0; }

/* section heads without the rule */
.dark-site .work .section-head, .dark-site .faq .section-head, .dark-site .contact .section-head { padding-top: 0; }
.dark-site .about-copy { padding-top: 0; }

/* ---------- Things we've made: three plates, each project in its own world ---------- */
.dark-site .work-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; margin-top: clamp(24px, 2.4vw, 40px); margin-bottom: clamp(40px, 4.4vw, 72px); }
.dark-site .work-head .eyebrow { grid-column: 1 / -1; }
.dark-site .work-head h2 { margin: 0; }
.dark-site .work .work-head .all-projects { margin: 0 0 .9em; font-size: 16px; font-weight: 600; }
.dark-site .plates { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(64px, 6vw, 104px) clamp(20px, 2.2vw, 36px); align-items: start; }
.dark-site .plate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.dark-site .plate > h3, .dark-site .plate-toggle { grid-area: 1 / 1; }
/* the title is set on the plate, on the project's own colour */
.dark-site .plate > h3 { z-index: 2; align-self: end; justify-self: start; margin: 0 0 clamp(18px, 2.2vw, 34px) clamp(20px, 2.4vw, 36px); font-size: clamp(48px, 5.4vw, 92px); font-weight: 500; line-height: .86; letter-spacing: -0.055em; pointer-events: none; }
.dark-site .plate > h3 a { color: #EFECE5; text-decoration: none; pointer-events: auto; }
.dark-site .plate > h3 a:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
/* the tags become the plate's corner caption */
/* one line under each plate, like a label beside a print */
/* View project: the split button, always visible, bottom right */
/* play and pause for the recordings */
.dark-site .plate-toggle { z-index: 3; align-self: start; justify-self: end; display: grid; place-items: center; width: 34px; height: 34px; margin: 14px 14px 0 0; padding: 0; border: 0; border-radius: 3px; background: rgba(0, 0, 0, .72); color: #EEF0EA; cursor: pointer; transition: background-color .3s var(--ease); }
.dark-site .plate-toggle:hover, .dark-site .plate-toggle:focus-visible { background: var(--teal); }
.dark-site .plate-toggle svg { width: 12px; height: 12px; }

/* ---------- How it works: a cross grid of four cells, the active one timed by a clock ring ---------- */
.dark-site .process-story .step-row.is-on { background: rgba(238, 240, 234, .035); }
.dark-site .process-story .step-row.is-on .step-bar { animation: ps-clock 5s linear forwards; transform: none; }
@keyframes ps-clock { from { --t: 0; } to { --t: 1; } }

/* ---------- About: the test card lights one lamp per check ---------- */
.dark-site .tests-head { padding-bottom: 36px; }
.dark-site .tests-meter { position: absolute; left: 24px; right: 24px; bottom: 0; height: 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; pointer-events: none; }
.dark-site .tests-meter b { display: block; border-radius: 1px; background: rgba(238, 240, 234, .12); transition: background-color .3s var(--ease); }
.dark-site .tests:has(.test:nth-child(1).is-running) .tests-meter b:nth-child(1), .dark-site .tests:has(.test:nth-child(2).is-running) .tests-meter b:nth-child(2), .dark-site .tests:has(.test:nth-child(3).is-running) .tests-meter b:nth-child(3), .dark-site .tests:has(.test:nth-child(4).is-running) .tests-meter b:nth-child(4), .dark-site .tests:has(.test:nth-child(5).is-running) .tests-meter b:nth-child(5) { background: rgba(140, 207, 198, .35); }
.dark-site .tests:has(.test:nth-child(1).is-pass) .tests-meter b:nth-child(1), .dark-site .tests:has(.test:nth-child(2).is-pass) .tests-meter b:nth-child(2), .dark-site .tests:has(.test:nth-child(3).is-pass) .tests-meter b:nth-child(3), .dark-site .tests:has(.test:nth-child(4).is-pass) .tests-meter b:nth-child(4), .dark-site .tests:has(.test:nth-child(5).is-pass) .tests-meter b:nth-child(5) { background: var(--mint); }
.dark-site .tests:has(.test:nth-child(1).is-fail) .tests-meter b:nth-child(1), .dark-site .tests:has(.test:nth-child(2).is-fail) .tests-meter b:nth-child(2), .dark-site .tests:has(.test:nth-child(3).is-fail) .tests-meter b:nth-child(3), .dark-site .tests:has(.test:nth-child(4).is-fail) .tests-meter b:nth-child(4), .dark-site .tests:has(.test:nth-child(5).is-fail) .tests-meter b:nth-child(5) { background: var(--danger); }

/* ---------- Questions: a quiet head, so the questions carry the large type ---------- */
@media (min-width: 901px) { .dark-site .faq .section-head { top: 112px; } }
.dark-site .faq .section-head h2 { font-size: clamp(30px, 2.6vw, 42px); line-height: 1.02; letter-spacing: -0.03em; max-width: 7em; }
.dark-site .faq .qa summary { font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.03em; line-height: 1.12; padding-block: clamp(24px, 2.2vw, 32px); }

/* ---------- Contact: the closing line set across the full width ---------- */
.dark-site .contact .section-head h2 { max-width: none; font-size: clamp(44px, 8.4vw, 128px); line-height: .9; letter-spacing: -0.055em; }
@media (min-width: 1101px) { .dark-site .contact .section-head h2 { white-space: nowrap; } }

@media (prefers-reduced-motion: reduce) {
  .dark-site .process-story .step-row.is-on .step-bar { animation: none; --t: 1; }
  .dark-site .tests-meter b { transition: none; }
}
@media (max-width: 760px) {
  .dark-site .work-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .dark-site .work .work-head .all-projects { margin: 0; }
  .dark-site .plates { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .dark-site .plate > h3 { font-size: clamp(44px, 12.4vw, 54px); margin: 0 0 20px 18px; }
  .dark-site .tests-meter { left: 18px; right: 18px; }
  .dark-site .contact .section-head h2 { font-size: clamp(44px, 13vw, 60px); }
}

/* ==========================================================================
   v25: a chapter opener for the work, captions on the plates, and How it works as one journey
   (research: site-previews/process-and-work-research.md).
   ========================================================================== */

/* ---------- the paper band closes after What we build; the work opens on night ---------- */
.dark-site .services { border-radius: var(--r-card); }
.dark-site .work { background: transparent; color: #EEF0EA; margin-inline: 0; border-radius: 0; padding-block: 0; }
.dark-site .work-open { overflow-x: clip; --text: #EEF0EA; --soft: #93A09B; --line: rgba(236, 240, 234, .14); padding-block: clamp(104px, 11vw, 176px) clamp(56px, 5.6vw, 96px); }
.dark-site .work .work-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 0; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.dark-site .work .work-head .eyebrow { grid-column: 1; margin: 0; color: var(--soft); }
.dark-site .work .work-head .all-projects { grid-column: 2; margin: 0; color: #EEF0EA; font-size: 15px; font-weight: 600; }
.dark-site .work .work-head .all-projects:hover { color: var(--mint); }
.dark-site .work .work-head h2 { grid-column: 1 / -1; margin: clamp(36px, 4.4vw, 72px) 0 0; max-width: none; color: #EFECE5; font-size: clamp(54px, min(12.9vw, calc((100vw - 2 * var(--gutter)) / 8.1)), 196px); font-weight: 500; line-height: .86; letter-spacing: -0.06em; white-space: nowrap; }
.dark-site .work-index { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(40px, 4.4vw, 72px) 0 0; padding: 0; list-style: none; }
.dark-site .work-index li { border-top: 1px solid var(--line); }
.dark-site .work-index li + li { border-left: 1px solid var(--line); padding-left: clamp(16px, 1.8vw, 28px); }
.dark-site .work-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px clamp(16px, 1.8vw, 28px) 0 0; color: #EEF0EA; text-decoration: none; }
.dark-site .work-index b { font-family: var(--font); font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; transition: color .3s var(--ease); }
.dark-site .work-index span { font-size: 13px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--soft); }
.dark-site .work-index a:hover b, .dark-site .work-index a:focus-visible b { color: var(--mint); }
.dark-site .work-index a:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
/* the plates sit on their own paper sheet, rising out of the night */
.dark-site .work-sheet { margin-inline: clamp(6px, .8vw, 14px); padding-block: clamp(20px, 2.2vw, 36px) clamp(80px, 8vw, 136px); border-radius: var(--r-card); background: #EFECE5; color: #141414; }
.dark-site .work-sheet .plates { padding-top: clamp(12px, 1.4vw, 20px); }
.dark-site .plate { scroll-margin-top: 96px; }
/* motion on: the title slides into place as the chapter arrives; at rest it is already in place */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dark-site .work .work-head h2 { animation: work-title linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes work-title { from { transform: translateX(14vw); opacity: .2; } to { transform: none; opacity: 1; } }
  }
}

/* ---------- captions: the line sits on the plate, under the title, like a title card ---------- */
/* a soft fall of the plate's own colour behind the caption, so the line never sits on a busy frame */

/* ---------- How it works: one journey, the four things you receive laid out in order ---------- */
/* the field the artefacts are laid on */
/* the rail, one line through every stop */
.dark-site .jr-stop { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; min-width: 0; }
.dark-site .jr-stop:nth-child(2) .jr-art { padding-top: clamp(44px, 4.4vw, 72px); }
.dark-site .jr-stop:nth-child(3) .jr-art { padding-top: clamp(32px, 3vw, 48px); }
.dark-site .jr-stop:nth-child(4) .jr-art { padding-top: clamp(56px, 5.6vw, 92px); }
.dark-site .jr-art .ps-call .slots { gap: 6px; margin: 14px 0; }
.dark-site .jr-art .ps-call .slots { flex-wrap: nowrap; }
.dark-site .jr-art .ps-call .slots span { padding: 7px 8px; font-size: 12px; white-space: nowrap; }
/* at rest every artefact shows its finished state: booked, accepted, the button green, both messages, every tick */
.dark-site .jr-art .ps-call .pick { background: var(--teal); color: #fff; box-shadow: none; }
.dark-site .jr-art .ps-call .ok, .dark-site .jr-art .ps-quote .done { opacity: 1; }
.dark-site .jr-art .ps-quote .btn { opacity: 0; }
/* the stop marker on the rail: a small square, filled once the journey reaches it */

/* motion on: the rail fills left to right and each artefact plays its scene as the rail reaches it */
@media (prefers-reduced-motion: no-preference) {
  .dark-site .jr-path.is-waiting::after { background-size: 0 100%, auto; }
  .dark-site .jr-path.is-run::after { animation: jr-rail 4.9s linear both; }
  @keyframes jr-rail { from { background-size: 0 100%, auto; } to { background-size: 100% 100%, auto; } }
  .dark-site .jr-path.is-waiting .jr-art .ps-card, .dark-site .jr-path.is-run .jr-stop:not(.is-on) .jr-art .ps-card { opacity: 0; transform: translateY(14px); }
  .dark-site .jr-path.is-waiting .jr-node, .dark-site .jr-path.is-run .jr-stop:not(.is-on) .jr-node { background: #000000; box-shadow: 0 0 0 5px #000000, inset 0 0 0 2px var(--rail); }
  .dark-site .jr-path.is-waiting .jr-title, .dark-site .jr-path.is-run .jr-stop:not(.is-on) .jr-title { color: rgba(238, 240, 234, .42); }
  /* while it plays, each scene starts from its first frame */
  .dark-site .jr-path.is-run .jr-art .ps-call .pick { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--hair); }
  .dark-site .jr-path.is-run .jr-art .ps-quote .btn { opacity: 1; }
  .dark-site .jr-path.is-run .jr-art .pv-btn { background: var(--ink); }
  .dark-site .jr-path.is-run .jr-art .pv-note, .dark-site .jr-path.is-run .jr-art .pv-reply { opacity: 0; }
}

/* ---------- tablets and phones: the rail runs down the left edge, each artefact under its words ---------- */
@media (max-width: 1100px) {
  .dark-site .jr-stop { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; position: relative; }
  .dark-site .jr-stop:nth-child(n) .jr-art { order: 3; margin-top: 22px; padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 40px); border-radius: 6px; background: radial-gradient(90% 120% at 20% 0%, #2A5250 0%, #14302E 50%, #0A1817 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .dark-site .jr-path.is-waiting::after { background-size: 100% 0, auto; }
  .dark-site .jr-path.is-run::after { animation-name: jr-rail-down; }
  @keyframes jr-rail-down { from { background-size: 100% 0, auto; } to { background-size: 100% 100%, auto; } }
}
@media (max-width: 760px) {
  .dark-site .work-open { padding-block: 88px 40px; }
  .dark-site .work .work-head h2 { margin-top: 44px; font-size: clamp(44px, 14.4vw, 64px); white-space: normal; line-height: .9; }
  .dark-site .work-index { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .dark-site .work-index li + li { border-left: 0; padding-left: 0; }
  .dark-site .work-index a { padding: 13px 0; }
  .dark-site .work-index li:last-child { border-bottom: 1px solid var(--line); }
  .dark-site .work-sheet { padding-block: 18px 72px; }
  /* the caption moves into a footer of the plate's own colour, so nothing covers the recordings */
  .dark-site .plate .plate-media { border-radius: 6px 6px 0 0; }
}
@media (min-width: 1101px) {
  .dark-site .jr-stop:nth-child(1) { grid-column: 1; } .dark-site .jr-stop:nth-child(2) { grid-column: 2; }
  .dark-site .jr-stop:nth-child(3) { grid-column: 3; } .dark-site .jr-stop:nth-child(4) { grid-column: 4; }
}
/* stacked journey (tablets and phones) with motion on: each stop plays as it scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .dark-site .jr-path.is-stacked .jr-stop:not(.is-on) .jr-art .ps-card { opacity: 0; transform: translateY(14px); }
  .dark-site .jr-path.is-stacked .jr-stop:not(.is-on) .jr-node { background: #000000; box-shadow: 0 0 0 5px #000000, inset 0 0 0 2px var(--rail); }
  .dark-site .jr-path.is-stacked .jr-stop:not(.is-on) .jr-title { color: rgba(238, 240, 234, .42); }
  .dark-site .jr-path.is-stacked .jr-art .ps-call .pick { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--hair); }
  .dark-site .jr-path.is-stacked .jr-art .ps-quote .btn { opacity: 1; }
  .dark-site .jr-path.is-stacked .jr-art .pv-btn { background: var(--ink); }
  .dark-site .jr-path.is-stacked .jr-art .pv-note, .dark-site .jr-path.is-stacked .jr-art .pv-reply { opacity: 0; }
}

/* ==========================================================================
   v26: one spacing scale, title blocks under the work, How it works as an uneven journey, phones made for phones
   (research: site-previews/copy-spacing-mobile-research.md).
   ========================================================================== */
:root {
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: clamp(12px, 11.26px + .19vw, 14px);
  --space-s: clamp(16px, 14.51px + .381vw, 20px);
  --space-m: clamp(24px, 21.03px + .762vw, 32px);
  --space-l: clamp(32px, 26.06px + 1.524vw, 48px);
  --space-xl: clamp(48px, 36.11px + 3.048vw, 80px);
  --space-2xl: clamp(64px, 40.23px + 6.095vw, 128px);
  --space-3xl: clamp(96px, 60.34px + 9.143vw, 192px);
  --space-4xl: clamp(128px, 80.46px + 12.19vw, 256px);
  --gutter: clamp(20px, 3.66px + 4.19vw, 64px);
  --section-open: var(--space-4xl);
  --section: var(--space-3xl);
  --section-tight: var(--space-2xl);
  --measure: 62ch;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- rhythm: openers, ordinary sections and sub-parts each have their own step ---------- */
.dark-site .process { padding-block: var(--section); }
.dark-site .about { padding-block: 0 var(--section); }
.dark-site .faq { padding-block: 0 var(--section); }
.dark-site .contact { padding-block: var(--section-open) var(--space-2xl); }
.dark-site .work-open { padding-block: var(--section-open) var(--space-xl); }
.dark-site .work-sheet { padding-block: var(--space-m) var(--section-tight); }
.dark-site .faq .section-head { margin-bottom: var(--space-xl); }
.dark-site .section-head .eyebrow { margin-bottom: var(--space-s); }
.dark-site .faq .qa p, .dark-site .about-copy p { max-width: var(--measure); }

/* ---------- Things we've made: the plate carries the name; a title block under it carries the rest ---------- */
.dark-site .plates { row-gap: var(--space-2xl); }
/* MonPro spans the sheet: line on the left, facts on the right, like the title block of a drawing */

/* ---------- How it works: one field, uneven stretches, time on the rail ---------- */
/* the rail: one line through every stop, filled in mint */
.dark-site .jx-stop { display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; min-width: 0; position: relative; }
/* each thing hangs at its own depth, so the row reads as a journey, not four tiles */
/* the build: the same page three times, more finished each week, fanned like proofs on a desk */

/* motion on, laptops: the rail fills once and each thing arrives as it is reached; at rest all of it is finished */
@media (prefers-reduced-motion: no-preference) and (min-width: 1101px) {
  .dark-site .jx.is-waiting::before { background-size: 0 100%, auto; }
  .dark-site .jx.is-run::before { animation: jr-rail 4.9s linear both; }
  .dark-site .jx.is-waiting .jr-art .ps-card, .dark-site .jx.is-run .jx-stop:not(.is-on) .jr-art .ps-card { opacity: 0; transform: translateY(14px); }
  .dark-site .jx.is-run .jx-stop:not(.is-on) .jx-f1, .dark-site .jx.is-run .jx-stop:not(.is-on) .jx-f2 { transform: translateY(14px) scale(.92); }
  .dark-site .jx.is-waiting .jr-node, .dark-site .jx.is-run .jx-stop:not(.is-on) .jr-node { background: #14302E; box-shadow: 0 0 0 6px #173533, inset 0 0 0 2px var(--rail); }
  .dark-site .jx.is-waiting .jr-title, .dark-site .jx.is-run .jx-stop:not(.is-on) .jr-title { color: rgba(238, 240, 234, .45); }
}
/* tablets and phones: the rail runs down the left, each stop in turn, still at uneven lengths */
@media (max-width: 1100px) {
  .dark-site .jx-stop { grid-row: auto; grid-template-rows: none; display: block; }
}

/* ---------- phones: fewer, bigger things, media to the edge ---------- */
@media (max-width: 760px) {
  /* the work plates run edge to edge of their sheet; the title block sits under each on the paper */
  .dark-site .work-sheet .wrap { padding-inline: 0; }
  .dark-site .plate .plate-media { border-radius: 0; }
  .dark-site .work-sheet { overflow: hidden; }
  .dark-site .plates { row-gap: var(--space-xl); }
  /* How it works runs to the edges of the screen as one field */
  /* questions: rows big enough for a thumb */
  .dark-site .faq .qa summary { min-height: 56px; }
}
/* the journey's things are always shown finished; motion only brings each one in */
.dark-site .jx .ps-call .ok, .dark-site .jx .ps-quote .done { opacity: 1; transform: none; }
.dark-site .jx .ps-call .pick { background: var(--teal); color: #fff; box-shadow: none; }
@media (min-width: 1101px) {
  .dark-site .jx-stop > * { min-width: 0; }
}
/* the narrower plates set their facts two by two */
@media (max-width: 1100px) {
  .dark-site .jx .jx-stop:nth-child(n) .jr-art { padding: 0; background: none; box-shadow: none; border-radius: 0; }
}
/* phones: the hero film runs to both edges of the screen */
@media (max-width: 600px) {
  .dark-site .hero-film-bleed .hero-reel .media-toggle.labelled { right: var(--gutter); }
}

/* Questions run straight into Contact: one step of space, not two */
.dark-site .faq { padding-bottom: var(--space-xl); }
.dark-site .contact { padding-top: var(--space-2xl); }

/* ---------- phones: the contact button docks like part of the site, not a floating pill ---------- */
@media (max-width: 760px) {
  .mobile-cta, .dark-site .mobile-cta { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); justify-content: flex-start; gap: 12px; height: 60px; padding: 0 0 0 10px; border-radius: 6px; background: rgba(14, 20, 19, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: #EEF0EA; box-shadow: inset 0 0 0 1px rgba(238, 240, 234, .12), 0 24px 48px -20px rgba(0, 0, 0, .85); overflow: hidden; font-weight: 400; }
  .mobile-cta img { flex: none; width: 40px; height: 40px; border-radius: 4px; object-fit: cover; filter: saturate(.85) contrast(1.04); }
  .mobile-cta .mc-text { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
  .mobile-cta .mc-text b { font-family: var(--font); font-size: 17px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
  .mobile-cta .mc-text span { font: 500 10.5px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: rgba(238, 240, 234, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-cta .mc-go { flex: none; display: grid; place-items: center; width: 60px; height: 100%; background: var(--mint); color: #000000; font-size: 20px; transition: background-color .25s var(--ease); }
  .mobile-cta:active .mc-go { background: #EEF0EA; }
  .mobile-cta:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
}
@media (max-width: 760px) { .mobile-cta, .dark-site .mobile-cta { background: rgba(14, 20, 19, .96); } }
@media (max-width: 760px) { .mobile-cta, .dark-site .mobile-cta { background: #0E0E0E; } }

/* ---------- What we build on phones: say everything up front, then lead each service with its name ---------- */
.svc-toc { display: none; }
@media (max-width: 760px) {
  .dark-site .svc-toc { display: block; margin: var(--space-m) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(20, 26, 24, .16); }
  .dark-site .svc-toc li { border-bottom: 1px solid rgba(20, 26, 24, .1); }
  .dark-site .svc-toc a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k p" "t t"; align-items: baseline; row-gap: 4px; padding: 14px 0 15px; color: #141414; text-decoration: none; }
  .dark-site .svc-toc b { grid-area: t; font-family: var(--font); font-size: 21px; font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }
  .dark-site .svc-toc .sx-p { grid-area: p; font: 500 12px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: #5C6461; }
  .dark-site .svc-toc a:active b { color: var(--teal, #075E57); }
  .dark-site .svc-row { display: flex; flex-direction: column; scroll-margin-top: 84px; }
}
@media (max-width: 760px) { .dark-site .svc-index .svc-row[id] { scroll-margin-top: 40px; } }

/* phones: the list of services as a picture index, each tile cut from that service's own still */
@media (max-width: 760px) {
  .dark-site .svc-toc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: var(--space-l) calc(-1 * var(--gutter) + 8px) 0; border-top: 0; }
  .dark-site .svc-toc li { border-bottom: 0; }
  .dark-site .svc-toc li.is-wide { grid-column: 1 / -1; }
  .dark-site .svc-toc a { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; padding: 0; border-radius: 4px; background: #14201F; color: #EFECE5; isolation: isolate; }
  .dark-site .svc-toc li.is-wide a { aspect-ratio: 16 / 10; }
  .dark-site .svc-toc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); filter: saturate(.85) brightness(.9); transition: transform .6s var(--ease); }
  .dark-site .svc-toc a::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 38%, transparent 66%); }
  .dark-site .svc-toc .sx-cap { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2; display: grid; gap: 6px; }
  .dark-site .svc-toc b { font-family: var(--font); font-size: 19px; font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; color: #EFECE5; text-wrap: balance; }
  .dark-site .svc-toc li.is-wide b { font-size: 26px; max-width: 14ch; }
  .dark-site .svc-toc .sx-p { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
  .dark-site .svc-toc a:active img { transform: scale(1.1); }
  .dark-site .svc-toc a:focus-visible { outline: 2px solid var(--teal, #075E57); outline-offset: 3px; }
}
@media (max-width: 760px) {
  .dark-site .svc-toc a .sx-cap { left: 14px; right: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; }
  .dark-site .svc-toc a .sx-cap b, .dark-site .svc-toc a .sx-cap .sx-p { grid-area: auto; margin: 0; }
}
@media (max-width: 760px) { .dark-site .svc-toc a::after { background: linear-gradient(to top, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .1) 78%, transparent 100%); } }

/* the enquiry service: one monthly price, the founding offer set apart, then the next step */
.dark-site .svc-row .price-amt small { font-size: .38em; font-weight: 500; letter-spacing: -0.01em; margin-left: .2em; }
.dark-site .svc-row .svc-offer { margin: 18px 0 0; padding: 14px 16px 15px; max-width: 42ch; border-radius: 4px; background: rgba(7, 94, 87, .09); box-shadow: inset 3px 0 0 #075E57; }
.dark-site .svc-row .svc-offer p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #3A423F; }
.dark-site .svc-row .svc-offer .svc-offer-head { margin-bottom: 6px; font-size: 15px; font-weight: 500; color: #141414; }
.dark-site .svc-row .svc-offer .svc-offer-head b { font-family: var(--font); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: #075E57; margin-right: 4px; }
.dark-site .svc-row .svc-next { margin: 14px 0 0; max-width: 42ch; font-size: 13.5px; line-height: 1.45; color: #5C6461; }
/* the enquiry card: price, then the founding offer, then the buttons, then the next step, all in the right-hand column */

/* Price for the first five firms: a matte night card, like a metal card, with only the facts on it */
.dark-site .svc-row .svc-offer.fcard {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(100% - 14px); max-width: 300px; aspect-ratio: 1.586; margin: 4px 0 0; padding: 20px 22px 20px;
  display: grid; grid-template-rows: auto 1fr auto auto; border-radius: 16px;
  background: linear-gradient(180deg, #1A201F 0%, #121212 46%, #0A0A0A 100%); color: #EEF0EA;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04),
              0 1px 1px rgba(14,18,17,.18), 0 10px 22px -12px rgba(14,18,17,.45), 0 34px 60px -34px rgba(14,18,17,.6);
  transition: transform .6s var(--ease);
}
.dark-site .svc-row .svc-offer.fcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .05; mix-blend-mode: overlay;
}
.dark-site .svc-row .svc-offer.fcard::after {
  content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.06) 50%, transparent 58%);
  transform: translateX(-30%); transition: transform 1.1s var(--ease);
}
.dark-site .svc-row:hover .svc-offer.fcard { transform: translateY(-3px); }
.dark-site .svc-row:hover .svc-offer.fcard::after { transform: translateX(30%); }
.dark-site .svc-row .fcard p { margin: 0; color: inherit; }
.dark-site .svc-row .fcard .fcard-who { align-self: end; margin-bottom: 8px; font-size: 13px; color: rgba(238,240,234,.72); }
.dark-site .svc-row .fcard .fcard-amt { font-family: var(--font); font-size: 44px; font-weight: 400; letter-spacing: -0.04em; line-height: .95; font-variant-numeric: lining-nums tabular-nums; color: #ECEAE4; text-shadow: 0 1px 0 rgba(0,0,0,.55); }
.dark-site .svc-row .fcard .fcard-terms { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: rgba(238,240,234,.55); }
.dark-site .svc-row .svc-next { font-size: 12.5px; line-height: 1.5; color: var(--soft); max-width: 40ch; }
@media (max-width: 760px) {
  .dark-site .svc-row .svc-offer.fcard { max-width: 340px; }
  .dark-site .svc-row:hover .svc-offer.fcard { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dark-site .svc-row .svc-offer.fcard, .dark-site .svc-row .svc-offer.fcard::after { transition: none; }
}

/* Round 4 (21 Oct 17:48): the card sizes to its content, and the places count is a numeral, not dots or a label */
.dark-site .svc-row .svc-offer.fcard { aspect-ratio: auto; min-height: 0; grid-template-rows: auto auto auto auto; row-gap: 0; padding: 18px 22px 22px; }
.dark-site .svc-row .fcard .fcard-top { align-items: flex-start; margin-bottom: 26px; }
.dark-site .svc-row .fcard .fcard-who { align-self: auto; margin-bottom: 6px; }
.dark-site .svc-row .card-links .ask { flex: 0 0 auto; width: auto; max-width: 100%; }

/* Hero reel (21 Oct 2026, after exoape.com): two huge words either side of a framed film.
   Desktop: the band pins while you scroll, the film grows to the full width and the words slide off.
   Phones: no pinning, the words sit above and below a 4:5 film. */
.hero.hero-film-bleed { overflow: visible; overflow: clip; }
.hero-film-bleed .reel { order: 2; position: relative; width: 100%; }
.reel-track { position: relative; height: 112vh; }
.reel-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.reel .film-frame.reel-frame { width: var(--fw, 40vw); max-width: none; aspect-ratio: 16 / 9; max-height: 100vh; border-radius: 0; box-shadow: none; transform: none; background: #0A0A0A; z-index: 1; }
.reel-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-open { position: absolute; left: 20px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(245, 243, 238, .28); border-radius: 999px; background: rgba(10, 10, 10, .55); color: #F5F3EE; font: 600 14px/1 var(--font); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, color .25s; }
.reel-open::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.reel-open:hover, .reel-open:focus-visible { background: #F5F3EE; color: #141414; }
.reel-open:focus-visible, .reel-close:focus-visible { outline: 2px solid #8CCFC6; outline-offset: 3px; }
.reel-dialog { width: min(92vw, 1280px); max-width: none; padding: 0; border: 0; background: #0A0A0A; color: #F5F3EE; overflow: visible; }
.reel-dialog::backdrop { background: rgba(8, 11, 10, .92); }
.reel-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0A0A0A; }
.reel-close { position: absolute; right: 0; bottom: calc(100% + 12px); padding: 8px 0; border: 0; background: none; color: #F5F3EE; font: 600 14px/1 var(--font); cursor: pointer; }
@media (max-width: 760px) {
  .reel-track { height: auto; }
  .reel-stick { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px var(--gutter) 0; }
  .reel .film-frame.reel-frame { width: 100%; max-width: 440px; aspect-ratio: 4 / 5; max-height: none; }
  .reel-open { left: 14px; bottom: 14px; }
}
/* without the script the film stays a still frame; with it, it grows on scroll for everyone, reduced motion included */
@media (prefers-reduced-motion: reduce) {
  .reel:not(.is-live) .reel-track { height: auto; }
  .reel:not(.is-live) .reel-stick { position: relative; height: 80vh; }
}
/* the site's pause control stays, as a small round button, so the frame holds one labelled button */
.reel-frame .media-toggle.labelled { width: 38px; height: 38px; padding: 0; justify-content: center; right: 20px; bottom: 20px; }
.reel-frame .media-toggle.labelled span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .reel-frame .media-toggle.labelled { right: 14px; bottom: 14px; } }


/* 21 Oct 20:40, four fixes Alex asked for. Film: the words and film start as one balanced line from gutter to gutter
   (reel.js sets --fw and --fx), and the two controls sit under the film instead of on it. */
.reel .film-frame.reel-frame { translate: var(--fx, 0px) 0; }
.reel .film-frame.reel-frame, .reel-bar { transition: none !important; }
.reel-bar { position: absolute; left: 50%; top: calc(50% + min(var(--fw, 40vw) * 9 / 16, 100vh) / 2 + 18px); z-index: 2; width: var(--fw, 40vw); translate: calc(-50% + var(--fx, 0px)) 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.reel-bar .reel-open { position: static; gap: 12px; padding: 6px 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 500 15px/1 "Geist", system-ui, sans-serif; }
.reel-bar .reel-open::before { content: none; }
.reel-bar .reel-open:hover, .reel-bar .reel-open:focus-visible { background: none; color: #F5F3EE; }
.reel-open:hover .reel-play { background: #8CCFC6; box-shadow: none; color: #0A0A0A; }
.reel-bar .media-toggle.labelled { position: static; width: auto; height: auto; padding: 6px 0; gap: 10px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: rgba(245, 243, 238, .7); font: 500 15px/1 "Geist", system-ui, sans-serif; }
.reel-bar .media-toggle.labelled:hover { background: none; color: #F5F3EE; }
.reel-bar .media-toggle svg { width: 11px; height: 11px; }
@media (max-width: 760px) {
  .reel-bar { position: static; order: 4; width: 100%; max-width: 440px; translate: none; }
}

/* the first five firms card, with less on it: no logo, no badge, no shine; one quiet line for the places left */
.dark-site .svc-row .svc-offer.fcard { padding: 20px 22px 22px; background: #121212; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: none; }
.dark-site .svc-row .svc-offer.fcard::before, .dark-site .svc-row .svc-offer.fcard::after { content: none; }
.dark-site .svc-row:hover .svc-offer.fcard { transform: none; }
.dark-site .svc-row .fcard .fcard-who { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.dark-site .svc-row .fcard .fcard-left { font-family: "Geist", system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: #8CCFC6; white-space: nowrap; }

/* 22 Oct: the film and the apps strip, refined to match the hero. The film's words take the hero title's size and
   colours (warm white, then mint), sit closer to the film and leave dark space around it; the controls sit centred
   under it. The strip runs wider with quiet, even tiles, and the tools we build on get their own small line. */
.reel-bar { justify-content: center; gap: 40px; }
@media (max-width: 760px) {
  .reel-bar { justify-content: center; }
}
.dark-site .hero-film-bleed .tools .tool { width: 232px; min-height: 112px; gap: 26px; padding: 18px 18px 16px; background: rgba(236, 240, 234, .035); box-shadow: inset 0 0 0 1px rgba(236, 240, 234, .09); transition: background .35s, box-shadow .35s; }
.dark-site .hero-film-bleed .tools .tool:hover { background: color-mix(in oklab, var(--brand) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 32%, transparent); }
@media (max-width: 760px) {
  .dark-site .hero-film-bleed .tools .tool { width: 150px; min-height: 96px; gap: 16px; padding: 14px; }
}

/* 22 Oct, later: the film is its own Play button. A small round Play follows the pointer over it (exoape.com), so
   nothing sits on or beside the apps in the film; on phones a tap opens it. The pause button stays, as a plain
   round icon under the film's right corner (Apple's pattern), because a film that loops needs a way to stop it. */
.reel-frame .reel-open { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #0A0A0A; cursor: pointer; overflow: hidden; }
.reel-frame .reel-open::before { content: none; }
.reel-frame .reel-open:hover, .reel-frame .reel-open:focus-visible { background: none; color: #0A0A0A; }
.reel-frame .reel-open:focus-visible { outline: 2px solid #8CCFC6; outline-offset: -2px; }
.reel-cursor { position: absolute; left: 0; top: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; display: grid; place-items: center; background: #F5F3EE; font: 500 15px/1 "Geist", system-ui, sans-serif; letter-spacing: 0; pointer-events: none; scale: 0; translate: 50% 50%; transition: scale .35s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .reel-frame .reel-open { cursor: none; }
  .reel-frame .reel-open:hover .reel-cursor { scale: 1; }
}
.reel-frame .reel-open:focus-visible .reel-cursor { left: 50%; top: 50%; translate: none !important; scale: 1; }
.reel-bar { justify-content: flex-end; }
.reel-bar .media-toggle.labelled { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .22); color: rgba(245, 243, 238, .72); transition: box-shadow .25s, color .25s; }
.reel-bar .media-toggle.labelled:hover { box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .6); color: #F5F3EE; }
.reel-bar .media-toggle.labelled:focus-visible { outline: 2px solid #8CCFC6; outline-offset: 3px; }
.reel-bar .media-toggle.labelled span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reel-bar .media-toggle svg { width: 10px; height: 10px; }
@media (max-width: 760px) {
  /* on phones the icon sits at the right of the "at work" line, taking no space of its own */
  .reel-bar { --h: calc(var(--t-display) * .98); margin: calc(var(--h) / -2 - 32px) 0 calc(var(--h) / 2 - 18px); }
}

/* 22 Oct, option A: the two big words become one small caption over the film's top left corner, so the top section
   keeps the only headline. The film sits centred and starts closer under the button; the empty part of the reel lets
   clicks through to the button above it. */
/* the film rises to sit a fixed distance under the button on any screen height (it is centred in a 100vh band) */
.hero-film-bleed .reel { margin-top: calc(90px - max(0px, (100vh - 28.125vw) / 2)); }
.hero-film-bleed .reel, .reel-track, .reel-stick { pointer-events: none; }
.reel-stick .reel-frame, .reel-stick .reel-bar, .reel-dialog { pointer-events: auto; }
.reel .film-frame.reel-frame { translate: none; }
.reel-bar { translate: -50% 0; }
.reel-label { position: absolute; left: calc(50% - var(--fw, 50vw) / 2); top: calc(50% - min(var(--fw, 50vw) * 9 / 16, 100vh) / 2 - 34px); z-index: 2; margin: 0; font: 400 17px/1 "Geist", system-ui, sans-serif; letter-spacing: 0; color: #EEF0EA; white-space: nowrap; transition: none !important; }
.reel-label span { color: var(--mint); }
@media (max-width: 760px) {
  .hero-film-bleed .reel { margin-top: 0; }
  .reel-label { position: static; align-self: flex-start; margin-left: max(0px, calc((100% - 440px) / 2)); font-size: 16px; }
  .reel-bar { margin: 12px 0 0; width: 100%; max-width: 440px; translate: none; }
}

/* 22 Oct: the apps strip as one moving row with no boxes, each logo in its own colour (as Stripe shows them), so it
   sits straight on the night like everything above it. The "Built on" line drops back to a footnote. */
.dark-site .hero-film-bleed .tools .tool { width: auto; min-height: 0; padding: 0; gap: 12px; flex-direction: row; align-items: center; justify-content: flex-start; background: none; box-shadow: none; border-radius: 0; }
.dark-site .hero-film-bleed .tools .tool:hover { background: none; box-shadow: none; }
@media (max-width: 760px) {
  .dark-site .hero-film-bleed .tools .tool { width: auto; min-height: 0; padding: 0; }
}

/* 22 Oct: clicking the film opens it out from where it sits to fill the screen (as cuberto.com does), with sound and
   a few quiet round controls in place of the browser's own. reel.js runs the opening and closing. */
.reel-dialog { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.reel-dialog::backdrop { background: rgba(8, 11, 10, .96); }
.reel-dialog video.reel-full { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: #000000; cursor: pointer; }
.reel-ui { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 2; width: min(720px, calc(100% - 32px)); translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 999px; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(245, 243, 238, .1); transition: opacity .4s; }
.reel-dialog.idle .reel-ui { opacity: 0; }
.reel-ui button { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: rgba(245, 243, 238, .82); cursor: pointer; transition: background .25s, color .25s; }
.reel-ui button:hover { background: rgba(245, 243, 238, .12); color: #F5F3EE; }
.reel-ui button:focus-visible, .reel-seek:focus-visible { outline: 2px solid #8CCFC6; outline-offset: 2px; }
.reel-ui svg { width: 13px; height: 13px; }
.reel-ui .reel-mute svg { width: 16px; height: 16px; }
.reel-mute.off .reel-wave { display: none; }
.reel-ui .reel-close { position: static; padding: 0; font: inherit; }
.reel-seek { flex: 1; min-width: 0; height: 20px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.reel-seek::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, #8CCFC6 var(--p), rgba(245, 243, 238, .22) var(--p)); }
.reel-seek::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(245, 243, 238, .22); }
.reel-seek::-moz-range-progress { height: 2px; border-radius: 2px; background: #8CCFC6; }
.reel-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border: 0; border-radius: 50%; background: #F5F3EE; }
.reel-seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #F5F3EE; }
@media (max-width: 760px) { .reel-ui { gap: 8px; padding: 6px 8px; } }

/* 22 Oct: on phones the film grows as the page scrolls, as it does on wide screens. Its band is pinned at the height
   of the small viewport (100svh, which doesn't jump as the browser's toolbar slides away) while the film scales from
   a card to the full width, then the page carries on. Scaling with transform keeps it smooth on phones. reel.js sets
   --s and adds is-live; without the script, or with reduced motion, the film stays a still card as before. */
@media (max-width: 760px) {
  .hero-film-bleed .reel.is-live { margin-top: calc(78px - max(0px, (100svh - 90vw) / 2)); }
  .reel.is-live .reel-track { height: 112svh; }
  /* the strip comes up into the empty space under the full-width film, so there's no long gap before it */
  .hero-film-bleed .reel.is-live { margin-bottom: calc(24px - max(0px, (100svh - 125vw) / 2)); }
  .reel.is-live .reel-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: block; padding: 0; gap: 0; }
  .reel.is-live .film-frame.reel-frame { position: absolute; left: 0; top: 50%; width: 100%; max-width: none; aspect-ratio: 4 / 5; max-height: 100svh; translate: 0 -50%; transform: scale(var(--s, .72)); transform-origin: 50% 50%; transition: none !important; will-change: transform; }
  .reel.is-live .reel-label { position: absolute; left: calc(50% - 50vw * var(--s, .72)); top: calc(50% - min(125vw, 100svh) * var(--s, .72) / 2 - 28px); margin: 0; align-self: auto; }
  .reel.is-live .reel-bar { position: absolute; left: auto; right: calc(50% - 50vw * var(--s, .72)); top: calc(50% + min(125vw, 100svh) * var(--s, .72) / 2 + 12px); width: auto; max-width: none; margin: 0; translate: none; }
}
/* the teal glow behind the film and strip is softer, and on phones wider too, so it doesn't read as a stripe */
.dark-site .hero::after { background: radial-gradient(50% 50% at 50% 50%, rgba(7, 94, 87, .26), rgba(7, 94, 87, .08) 55%, transparent 75%); }
@media (max-width: 760px) { .dark-site .hero::after { background: radial-gradient(120% 34% at 50% 50%, rgba(7, 94, 87, .26), rgba(7, 94, 87, .08) 55%, transparent 75%); } }
/* the page behind the opened film doesn't scroll */
html:has(.reel-dialog[open]) { overflow: hidden; }

/* What we build on shorter screens (laptops are about 730px tall): each service's text tightens with the screen's height,
   so the one you're reading fits on screen beside the panel */
@media (min-width: 1101px) and (max-height: 900px) {
  .dark-site .svc-row { padding-top: 4.5vh; padding-bottom: 5vh; }
  .dark-site .svc-row .firm { margin-bottom: 2vh !important; }
  .dark-site .svc-row h3 { margin-bottom: 1.6vh; font-size: max(40px, min(5vw, 8.4vh)); }
  .dark-site .svc-row .svc-line { max-width: 40ch; font-size: max(16px, min(1.3vw, 2.4vh)); }
  .dark-site .svc-row .price-amt { font-size: max(32px, min(3.6vw, 6.4vh)); }
  .dark-site .svc-row .svc-offer.fcard { padding: 1.8vh 20px 2vh; }
  .dark-site .svc-row .fcard .fcard-top { margin-bottom: 1.6vh; }
  .dark-site .svc-row .fcard .fcard-amt { font-size: max(32px, min(44px, 5.4vh)); }
}

/* What we build heading: one large title and an index of the services, in the language of "Things we've made" */
.dark-site .services .section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 32px; row-gap: 0; padding-top: 20px; }
.dark-site .services .section-head .eyebrow { grid-column: 1; margin: 0; }
.dark-site .services .svc-head-note { display: block; grid-column: 2; margin: 0; max-width: none; white-space: nowrap; font-size: 15px; line-height: 1.5; color: var(--soft); text-align: right; }
.dark-site .services .section-head h2 { grid-column: 1 / -1; margin: clamp(36px, 4.4vw, 72px) 0 0; max-width: none; font-size: clamp(54px, 12.9vw, 196px); line-height: .86; letter-spacing: -0.06em; white-space: nowrap; color: #141414; }
.dark-site .services .services-intro { display: none; }
.dark-site .svc-head-index { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(40px, 4.4vw, 72px) 0 0; padding: 0; list-style: none; }
.dark-site .svc-head-index li { border-top: 1px solid var(--line-2); }
.dark-site .svc-head-index li + li { border-left: 1px solid var(--line); padding-left: clamp(16px, 1.6vw, 24px); }
.dark-site .svc-head-index a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 8px; height: 100%; padding: 16px clamp(16px, 1.6vw, 24px) 4px 0; color: #141414; text-decoration: none; }
.dark-site .svc-head-index b { font-family: var(--font); font-size: clamp(17px, 1.35vw, 22px); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; max-width: 15ch; transition: color .3s cubic-bezier(.65, 0, .35, 1); }
.dark-site .svc-head-index .shi-p { font: 500 12px/1.2 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #5C6461; }
.dark-site .svc-head-index .shi-tag { justify-self: start; margin-top: 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.dark-site .svc-head-index a:hover b, .dark-site .svc-head-index a:focus-visible b { color: var(--teal); }
@media (max-width: 1100px) { .dark-site .svc-head-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dark-site .svc-head-index li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 760px) {
  .dark-site .services .section-head { grid-template-columns: minmax(0, 1fr); }
  .dark-site .services .section-head h2 { margin-top: 36px; font-size: clamp(44px, 14.4vw, 64px); white-space: normal; line-height: .9; }
  .dark-site .services .svc-head-note { grid-column: 1; grid-row: 3; margin-top: 18px; text-align: left; white-space: normal; }
  .dark-site .services .section-head h2 { grid-row: 2; }
  .dark-site .svc-head-index { display: none; }
}
/* first five firms: the offer as a second line of the price list, not a box */
.dark-site .svc-row .svc-offer.fcard { width: 100%; max-width: 34ch; margin: 2px 0 0; padding: 14px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line-2); color: #141414; }
.dark-site .svc-row .fcard .fcard-who { justify-content: flex-start; gap: 14px; margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
.dark-site .svc-row .fcard .fcard-left { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.dark-site .svc-row .fcard .fcard-amt { font-size: clamp(30px, 2.5vw, 42px); color: var(--teal); text-shadow: none; }
.dark-site .svc-row .fcard .fcard-amt small { color: var(--soft); }
.dark-site .svc-row .fcard .fcard-terms { color: var(--soft); }

/* care after launch: the status picture as one night instrument, ruled like a ledger */
/* one story every 12 s: all working, the form stops, it is fixed and you get a note. Eased fades, no pulsing. */
@keyframes ci-ok { 0%, 30% { opacity: 1; } 33%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ci-bad { 0%, 30% { opacity: 0; } 33%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes ci-fix { 0%, 55% { opacity: 0; } 58%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ci-calm { 0%, 58% { opacity: 1; } 61%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ci-note { 0%, 59% { opacity: 0; transform: translateY(12px); } 64%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* phones: the film scales on its own layer, so scrolling never has to repaint it */
@media (max-width: 760px) { .reel.is-live .film-frame.reel-frame { will-change: transform; } }

/* the hero film band is only as tall as the film at its largest plus its caption and controls, and doesn't pin, so
   the page moves the whole time and takes fewer scrolls; at its largest the whole film is on screen */
.reel { --band: calc(min(72vw * 9 / 16, 100vh - 150px) + 130px); }
.reel-track { height: var(--band); }
.reel-stick { position: relative; height: var(--band); }
.hero-film-bleed .reel { margin-top: calc(90px - max(0px, (var(--band) - 28.125vw) / 2)); }
@media (max-width: 760px) {
  .reel { --band-m: calc(min(125vw, 100svh - 120px) + 70px); }
  .reel.is-live .reel-track { height: var(--band-m); }
  .reel.is-live .reel-stick { position: relative; height: var(--band-m); }
  .hero-film-bleed .reel.is-live { margin-top: calc(78px - max(0px, (var(--band-m) - 90vw) / 2)); margin-bottom: calc(24px - max(0px, (var(--band-m) - 125vw) / 2)); }
}

/* the logo strip carries the logos twice in each half of the loop, so a half is always wider than the widest strip
   and no empty stretch ever shows at the right; twice the distance, so twice the time, the same speed as before */