:root {
  --paper: #F7F7F7;
  --ink: #0D0D0D;
  --blue: #4461E4;
  --white: #FFFFFF;
  --page-gutter: clamp(1.5rem, 6vw, 7.5rem);
  --nav-top: max(clamp(1rem, 2vw, 1.5rem), env(safe-area-inset-top));
  --nav-left: max(var(--nav-top), env(safe-area-inset-left));
  --nav-height: clamp(44px, 3.75vw, 48px);
  --nav-clearance: calc(var(--nav-top) + var(--nav-height) + 1.5rem);
  /* Every line on the site: one thin light-grey rule. */
  --rule: 1px solid var(--color-rule-grey, #E2E2E2);
  /* Page ink and surface: black on white all the way down the page (no scroll fade). */
  --page-ink: var(--color-black);
  --page-surface: var(--color-white);
}

* { box-sizing: border-box; font-style: normal; }
html, body { margin: 0; min-height: 100%; background: var(--color-white); }
body { isolation: isolate; }
main { position: relative; z-index: 2; }

/* The navigation (spec docs/specs/2026-10-10-dock-navigation.md): a dock at the bottom of the
   screen in the language of the Services and Blog docks. Six items, each its icon over its name;
   the light purple fill springs to where you are, and the dock folds to its icons while you
   scroll down (assets/nav-dock.js). No glow, shadow or blur. */
:root {
  --nav-dock-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  /* Where the docks above it sit: the script keeps --nav-dock-height to the dock's height. */
  --nav-dock-space: calc(var(--nav-dock-bottom) + var(--nav-dock-height, 4.25rem) + .5rem);
  /* What the page leaves free at its foot: the open dock, whether or not it is folded. */
  --nav-dock-clearance: calc(var(--nav-dock-bottom) + 4.25rem + 1rem);
  --nav-dock-muted: color-mix(in srgb, var(--color-black) 63.92157%, var(--color-white));
  --nav-dock-ease: cubic-bezier(.2, .8, .2, 1);
}
.nav-dock { position: fixed; z-index: 50; left: 50%; bottom: var(--nav-dock-bottom); transform: translateX(-50%); max-width: calc(100vw - 1.5rem); }
.nav-dock-bar { position: relative; display: flex; gap: 2px; padding: 6px; border-radius: 22px; border: var(--rule); background: var(--color-white); }
.nav-dock-fill { position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 16px; background: var(--color-highlight-lilac); pointer-events: none; }
.nav-dock:not([data-ready]) .nav-dock-fill { display: none; }
.nav-dock-item { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 4.5rem; padding: .55rem .7rem .5rem; border-radius: 16px; color: var(--nav-dock-muted); text-decoration: none; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color .2s ease, min-width .35s var(--nav-dock-ease), padding .35s var(--nav-dock-ease), gap .35s var(--nav-dock-ease); }
.nav-dock-item svg { display: block; transition: transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.nav-dock-mark { margin: 1px; fill: currentColor; }
.nav-dock-item:hover, .nav-dock-item[aria-current] { color: var(--color-black); }
.nav-dock-item:hover svg { transform: translateY(-2px); }
.nav-dock-item:focus-visible { outline: 2px solid var(--color-black); outline-offset: -2px; }
.nav-dock-label { display: block; max-height: 1.25em; overflow: hidden; transition: opacity .25s ease, max-height .35s var(--nav-dock-ease); }
.nav-dock.is-folded .nav-dock-label { opacity: 0; max-height: 0; }
.nav-dock.is-folded .nav-dock-item { min-width: 3.25rem; padding: .7rem; gap: 0; }
/* Up to 480px Case studies reads "Cases", so the six names fit side by side. */
.nav-dock .nav-label-narrow { display: none; }
@media (max-width: 480px) {
  .nav-dock .nav-label-wide { display: none; }
  .nav-dock .nav-label-narrow { display: inline; }
}
@media (max-width: 700px) {
  .nav-dock { left: .75rem; right: .75rem; transform: none; max-width: none; }
  .nav-dock-item, .nav-dock.is-folded .nav-dock-item { flex: 1; min-width: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .nav-dock-item, .nav-dock-item svg, .nav-dock-label { transition: none; } }

.byq-gem--topo-contours-01 {
  --byq-bg: var(--color-white);
  --byq-fg: var(--color-charcoal);
  /* Contours fade from rule grey (lowest) to light grey (highest); one line runs
     brand periwinkle to Supernal green. Labels are small text-grey figures. */
  --byq-line-near: var(--color-rule-grey);
  --byq-line-far: var(--color-light-grey);
  --byq-label: var(--color-text-grey);
  --byq-accent-from: var(--color-periwinkle);
  --byq-accent-to: var(--color-supernal-green);
  --byq-font-mono: var(--font-numerals);
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Small viewport, not dynamic: the hero keeps its size while the mobile toolbar hides. */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--byq-bg);
  color: var(--byq-fg);
  cursor: crosshair;
  /* Horizontal touch movement shapes terrain; vertical swipes scroll the page. */
  touch-action: pan-y pinch-zoom;
}

.byq-gem--topo-contours-01__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Studio statement and company name above the interactive canvas. */
.hero-test-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 7vh, 6rem);
  width: 100%;
  container-type: inline-size;
  min-height: 100vh;
  min-height: 100svh;
  /* Its foot clears the navigation dock: the word, and the rover that drives on its baseline,
     sit above the dock (spec docs/specs/2026-10-10-dock-navigation.md). */
  padding: max(clamp(3rem, 8vh, 7rem), var(--nav-clearance)) var(--page-gutter) max(clamp(2rem, 4vh, 4rem), var(--nav-dock-clearance));
}
.hero-statement {
  align-self: flex-end;
  width: 85%;
  max-width: 17ch;
  text-align: right;
}
.hero-brand-row {
  display: flex;
  flex-wrap: wrap;
  container-type: inline-size;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.hero-brand { flex: 0 0 auto; max-width: 100%; white-space: nowrap; }
/* Hero rover (assets/hero-rover.js): the word keeps its layout as transparent text; each letter
   is a measured glyph moved only by transforms. The rover's canvas window follows it, above the
   hero text and below the nav; it never takes pointer events. */
.hero-rover-word { position: relative; display: inline-block; }
.hero-rover-layout { color: transparent; }
.hero-rover-letter { position: absolute; top: 0; left: 0; height: 100%; white-space: pre; will-change: transform; }
.hero-rover-canvas { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-rover-canvas { display: none; }
}
/* Contact drone (assets/contact-drone.js): a layer as tall as the page, above the content and the
   Services and Blog docks, below the navigation dock. It clips the drone's small canvas window
   and never catches the pointer itself; only the screen's link (to Contact) and the drone's tap
   area do, while it flies. Focused, its screen gets a black ring and a light white tint, so the
   focus shows on the white page and on the charcoal footer (no border: every line is the rule). */
.contact-drone-layer { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 40; }
.contact-drone-canvas { position: absolute; left: 0; top: 0; display: block; opacity: 0; transition: opacity .2s linear; }
.contact-drone-layer.is-flying .contact-drone-canvas { opacity: 1; }
.contact-drone-hit, .contact-drone-link { position: absolute; left: 0; top: 0; display: block; pointer-events: none; border-radius: 6px; }
.contact-drone-layer.is-flying .contact-drone-hit, .contact-drone-layer.is-flying .contact-drone-link { pointer-events: auto; }
.contact-drone-hit { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.contact-drone-link { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.contact-drone-link:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; background: color-mix(in srgb, var(--color-white) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .contact-drone-layer { display: none; }
}
@media (max-width: 950px) and (max-height: 550px) and (orientation: landscape) {
  .hero-test-frame { gap: 1.5rem; padding-top: var(--nav-clearance); padding-bottom: var(--nav-dock-clearance); }
  .hero-statement { max-width: 26ch; }
}


@media (prefers-reduced-motion: reduce) {
  .byq-gem--topo-contours-01 { cursor: default; touch-action: auto; }
}

.hero-test-frame { gap: clamp(1.5rem, 3vh, 3rem); }

/* Founding statement: shared H1 with inline founder portraits. */
.about-story {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: 0;
  padding-block: clamp(3rem, 8vw, 8rem);
  background: transparent;
  color: var(--page-ink);
}
.about-story-content { position: relative; z-index: 1; padding-inline: var(--page-gutter); }
@media (min-width: 601px) {
  .about-story-content { padding-inline: 9vw; }
}
.hover-contours-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
.site-contours-layer { position: fixed; z-index: 1; }
.hover-contours-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: min(560px, 100vw);
  height: min(560px, 100vw);
  opacity: 0;
  pointer-events: none;
  mask-image: radial-gradient(circle, var(--color-black) 38%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, var(--color-black) 38%, transparent 72%);
}
/* The H1 stops growing at a 100rem viewport while the column keeps widening, which reflowed
   Fermin onto the robot. Cap both headings at 16.3 founders-title ems (wraps hold 16.0–16.6em),
   keeping "…a CTO and | COO whose last venture took | investment from LVMH, and | Fermin, …". */
.about-heading, .about-summary { max-width: calc(var(--type-founders-title-size) * 16.3); }
.about-heading { position: relative; }
.about-summary { margin-top: var(--space-heading-subtitle); }
.about-word-mask {
  display: inline-block;
  max-width: calc(100% + 0.16em);
  overflow: hidden;
  padding-block: 0.08em;
  margin-block: -0.08em;
  /* Tight tracking lets final glyphs overhang their word box. Give the reveal
     mask room to paint them without changing word spacing or line height. */
  padding-inline: 0.08em;
  margin-inline: -0.08em;
}
.about-word { display: block; }
.about-robot-word { position: relative; display: inline-block; white-space: nowrap; }
.robot-slot { display: inline-block; width: 1.18em; height: 0; }
.about-heading[data-story-arm="hidden"] .robot-slot,
.about-heading[data-story-arm="hidden"] .story-robot,
.about-heading[data-story-drone="hidden"] .story-drone { display: none; }
.robot-word-ink { position: relative; }
.robot-word-layout { color: transparent; }
.robot-letter {
  position: absolute; top: 0; display: block; transform-origin: 50% 85%;
  pointer-events: none; user-select: none;
}
.robot-i-body { display: block; clip-path: inset(var(--dot-cut, .3em) 0 0); }
.robot-i-dot {
  position: absolute; inset: 0;
  clip-path: inset(0 0 calc(100% - var(--dot-cut, .3em)));
  pointer-events: none;
}
.story-robot {
  position: absolute; left: -1em; top: -1.5em; height: 3.5em; width: calc(100% + 3em);
  pointer-events: none; opacity: 0; z-index: 2;
  transform-origin: right bottom;
}
.is-text-ready .story-robot { opacity: 1; }
.story-robot-mount { z-index: 1; }
.story-drone {
  position: absolute; left: 0; top: 0; display: block;
  pointer-events: none; user-select: none; z-index: 3; opacity: 0;
  transform-origin: center; will-change: transform;
}
.story-drone canvas { display: block; width: 100%; height: 100%; }
.story-crawler {
  position: absolute; left: 0; top: 0; display: block; z-index: 4;
  pointer-events: none; user-select: none; will-change: transform;
}
.story-crawler[hidden], .about-heading[data-story-crawler="hidden"] .story-crawler { display: none; }
.story-crawler canvas { display: block; width: 100%; height: 100%; }
.about-heading:not(.is-text-ready) .story-crawler { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .story-crawler { display: none; } }
.story-welder { position: absolute; display: block; z-index: 4; pointer-events: none; }
.story-welder[hidden] { display: none; }
.story-welder canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-welder-sparks { z-index: 1; }
.about-heading:not(.is-text-ready) .story-welder { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .story-welder { display: none; } }
.about-heading:not(.is-text-ready) .story-drone { visibility: hidden; }
.is-text-ready .about-word-mask:has(.robot-word-ink) {
  overflow: visible;
  /* Preserve the original overflow-hidden inline box baseline. */
  vertical-align: var(--robot-baseline-gap, 0em);
}
.is-text-ready .about-robot-word .about-word-mask { overflow: visible; vertical-align: baseline; }
.is-text-ready .about-robot-word {
  /* The whole inline robot group must use the same baseline as ordinary masks. */
  vertical-align: var(--robot-baseline-gap, 0em);
}
@media (prefers-reduced-motion: reduce) {
  .story-robot { transition: none; }
}
/* Keep names and portraits together without making the text line taller. */
.about-founder-inline { display: inline-block; white-space: nowrap; }
.about-inline-image {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  width: 2em;
  height: 0;
  overflow: visible;
}
.about-portrait-fermin { z-index: 3; }
.about-story img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.95;
}
.about-inline-image img {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 2em;
  height: 2em;
  pointer-events: none;
  object-fit: contain;
  object-position: center bottom;
  opacity: 1;
}
/* Brand pill matches the capital-letter height, with no added line-box height. */
.about-inline-brand { width: 1.3em; width: calc(1cap * 1.79); }
.about-inline-brand img {
  width: 100%;
  height: .72em;
  height: 1cap;
  border-radius: .14em;
  object-fit: cover;
  filter: none;
}
/* LVMH inherits the heading's Helvetica Neue; its cutout bag adds no line height. */
.about-inline-bag { width: 1.75em; }
.about-inline-bag img {
  width: 100%; height: auto; bottom: .12em; left: 0;
  object-fit: contain; filter: none; transform-origin: 50% 75%;
}
.bag-surface { position: absolute; display: block; pointer-events: none; z-index: 2; }
.has-bag-surface > img { visibility: hidden; }
.about-heading:not(.is-text-ready) .bag-surface { visibility: hidden; }
.bag-confetti { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 4; }
@media (max-width: 600px) {
  .about-story { padding-top: calc(var(--nav-clearance) + 1rem); }
  /* Portraits rise into the open leading above their line; no line gets extra headroom. */
  .about-inline-bag { margin-inline: .12em; }
  .about-summary { margin-top: 2rem; }
}
/* Wide screens say "whose last venture took investment from LVMH,"; phones say
   "of an LVMH backed venture,". Hidden words have no boxes, so no robot touches them. */
.about-word-mask.about-copy-narrow { display: none; }
@media (max-width: 600px) {
  .about-word-mask.about-copy-wide { display: none; }
  .about-word-mask.about-copy-narrow { display: inline-block; }
}
/* Four background logos above two centered logos at every screen size. */
.capabilities {
  position: relative;
  isolation: isolate;
  color: var(--page-ink);
  padding: clamp(4rem, 8vw, 9rem) var(--page-gutter);
  scroll-margin-top: var(--nav-clearance);
}
.capabilities > h4 {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(2rem, 4vw, 4rem);
  padding-bottom: 1rem;
  border-bottom: var(--rule);
  text-align: center;
}
.background-logos {
  container-type: inline-size;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 4rem);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.background-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  min-width: 0;
}
.background-logos li:nth-child(5) { grid-column: 2; }
.background-logos li:nth-child(6) { grid-column: 3; }
.background-logos img {
  --logo-height: min(2.25rem, 2.45cqw);
  display: block;
  flex: none;
  width: auto;
  max-width: none;
  height: calc(var(--logo-height) * var(--logo-canvas-scale, 1) * var(--logo-visual-scale, 1));
  object-fit: contain;
  transform: translate(var(--logo-offset-x, 0%), var(--logo-offset-y, 0%));
}
/* Compensate for source padding, then balance symbols against dense wordmarks. */
.background-logo-deepmind { --logo-visual-scale: 1.4; }
.background-logo-apple { --logo-visual-scale: 2.25; }
.background-logo-airbus { --logo-canvas-scale: 1.461538; --logo-offset-x: -.101833%; }
.background-logo-db { --logo-canvas-scale: 1.010309; --logo-offset-y: .510204%; }
.background-logo-unilever { --logo-visual-scale: 2.5; --logo-canvas-scale: 1.083521; --logo-offset-x: .114155%; --logo-offset-y: .104167%; }
.background-logo-aecom { --logo-canvas-scale: 2.660377; --logo-offset-x: .4%; }
@media (max-width: 600px) {
  .background-logos { gap: 1.5rem clamp(.5rem, 3vw, .75rem); }
  .background-logos li { min-height: 3.5rem; }
  .background-logos img { --logo-height: min(1.125rem, 3.4cqw); }
}

/* Partner service tables: only the requested table row rules, no section dividers. */
.partner-services {
  color: var(--page-ink);
  padding: clamp(3rem, 7vw, 7rem) var(--page-gutter) clamp(4rem, 8vw, 8rem);
  scroll-margin-top: var(--nav-clearance);
}
.partner-services > h1 { max-width: 19ch; margin-bottom: clamp(3rem, 7vw, 7rem); }
/* Shared top rules span both columns; internal rules stay in the service column. */
.partner-service-groups { display: grid; gap: 0; }
.partner-service-headers { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: .75rem; }
.partner-service-headers p { margin: 0; }
.partner-service-headers p:first-child { grid-column: 1; grid-row: 1; }
.partner-service-headers p:last-child { grid-column: 2; grid-row: 1; }
.partner-service-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: var(--rule);
}
.partner-service-table th, .partner-service-table td {
  vertical-align: top;
  text-align: left;
  padding: .4em 0;
  overflow-wrap: anywhere;
}
.partner-service-table th { width: 50%; padding-right: 1.5rem; }
.partner-service-table tr + tr td { border-top: var(--rule); }
@media (max-width: 600px) {
  .partner-services { padding-top: var(--nav-clearance); }
  .partner-service-headers { grid-template-columns: 35% 65%; }
  .partner-service-table th { width: 35%; padding-right: 1rem; }
}

/* "What we can do for you" (spec docs/specs/2026-10-06-services-section.md, approved
   2026-10-06): the Hastko case study's language for five services. A lead line and an index,
   the five apps fanned out, then each service: number and title, its tagline and paragraph
   below, its reel, two stills and what we do. The data map leads Data Analytics. A floating
   dock, like the apps' own, marks the service in view. Type comes from the shared roles; this
   block only places, sizes and colours. The reels and their app screens are styled in
   assets/services/reels.css. No shadows. */
.partner-services { --svc-muted: color-mix(in srgb, var(--color-black) 63.92157%, var(--color-white)); }
.svc-muted { color: var(--svc-muted); }
#partner-services > h1 { max-width: 13ch; margin-bottom: var(--space-heading-subtitle); text-wrap: balance; }
.svc-lead { max-width: 40ch; text-wrap: pretty; }

/* Index: one row per service; a still of the service follows a mouse pointer over it. */
.svc-index { list-style: none; margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; padding: 0; border-bottom: var(--rule); }
.svc-index a { display: grid; grid-template-columns: 7% minmax(0, 1fr) minmax(0, 1fr) 2rem; gap: .5rem clamp(1rem, 3vw, 3rem); align-items: baseline; padding: clamp(1rem, 2vw, 1.5rem) 0; border-top: var(--rule); color: inherit; text-decoration: none; }
.svc-index-n { color: var(--color-text-grey); }
.svc-index-line { color: var(--svc-muted); }
.svc-index-arrow { justify-self: end; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.svc-index a:hover .svc-index-name, .svc-index a:focus-visible .svc-index-name { background: var(--color-highlight-lilac); }
.svc-index a:hover .svc-index-arrow { transform: translateX(.35rem); }
@media (max-width: 700px) {
  .svc-index a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; }
  .svc-index-line { grid-column: 2; grid-row: 2; }
  .svc-index-arrow { grid-column: 3; grid-row: 1; }
}
.svc-peek { position: fixed; z-index: 15; left: 0; top: 0; width: min(30vw, 26rem); aspect-ratio: 1600 / 852; border-radius: .75rem; border: var(--rule); background: var(--color-white); overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.92); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.svc-peek.is-on { opacity: 1; }
.svc-peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (max-width: 900px) { .svc-peek { display: none; } }

/* The five apps fanned out, as the case study page's three. */
.svc-stack { position: relative; margin-top: clamp(2.5rem, 5vw, 4.5rem); aspect-ratio: 16 / 9; max-width: 100%; border-radius: clamp(.75rem, 1.6vw, 1.5rem); background: var(--color-light-grey); overflow: hidden; }
.svc-stack img { position: absolute; width: 54%; height: auto; left: 23%; top: 24%; border-radius: 1.5% / 2.8%; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.svc-stack img:nth-child(1) { --x: -40%; --y: -36%; }
.svc-stack img:nth-child(2) { --x: -20%; --y: -18%; transition-delay: .05s; }
.svc-stack img:nth-child(3) { --x: 0%; --y: 0%; transition-delay: .1s; }
.svc-stack img:nth-child(4) { --x: 20%; --y: 18%; transition-delay: .15s; }
.svc-stack img:nth-child(5) { --x: 40%; --y: 36%; transition-delay: .2s; }
.svc-stack.is-open img { transform: translate(var(--x), var(--y)); }
.svc-stack-labels { position: absolute; left: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-stack-labels span { padding: .45rem .9rem; border-radius: 999px; background: var(--color-white); }
@media (prefers-reduced-motion: reduce) { .svc-stack img { transition: none; } }
@media (max-width: 600px) {
  .svc-stack { aspect-ratio: 4 / 3; }
  .svc-stack img { width: 70%; left: 15%; top: 26%; }
  .svc-stack img:nth-child(1), .svc-stack img:nth-child(5), .svc-stack-labels { display: none; }
}

/* One service: number and title, then its tagline and paragraph below. */
.svc-item { padding-top: clamp(6rem, 12vw, 12rem); scroll-margin-top: 1rem; }
.svc-item-head { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.svc-item-index { display: block; margin-bottom: 1rem; color: var(--color-text-grey); }
.svc-item-copy { display: grid; gap: 1rem; max-width: 72rem; }
.svc-item-copy .text-lead { text-wrap: balance; }
.svc-item-copy .text-large { max-width: 75ch; text-wrap: pretty; }
/* .partner-services keeps these above the reel frame's own rules (reels.css loads later). */
.partner-services .svc-reel { margin: clamp(2rem, 4vw, 3.5rem) 0 0; min-width: 0; }
/* The first picture under a service's text keeps a generous gap from it. */
.partner-services .svc-item-head + .svc-reel, .svc-item-head + .svc-map-band { margin-top: clamp(3.5rem, 7vw, 7rem); }
.svc-reel:not(.reel) { aspect-ratio: 16 / 9; border-radius: clamp(.5rem, 1.1vw, 1rem); background: var(--color-light-grey); }
.svc-reel .reel-viewport { border: var(--rule); }
.svc-stage { margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: clamp(.6rem, 2.4vw, 2.5rem); border-radius: clamp(.75rem, 1.6vw, 1.5rem); background: var(--color-light-grey); min-width: 0; }
.svc-stage img { display: block; width: 100%; height: auto; border-radius: 1.5% / 2.79%; }
.svc-stage-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 2rem); }
@media (max-width: 800px) { .svc-stage-pair { grid-template-columns: 1fr; } .svc-stage-pair .svc-stage + .svc-stage { margin-top: 0; } }
/* Phones: the fan of apps, the reels and the stills run the full width of the screen, out
   through the page gutter, with thin rules above and below; the reel controls and the captions
   stay aligned with the text (spec docs/specs/2026-10-08-mobile-pass.md). */
@media (max-width: 600px) {
  .svc-stack, .svc-stage, .svc-reel:not(.reel), .svc-reel .reel-viewport { width: auto; max-width: none; margin-inline: calc(var(--page-gutter) * -1); border-radius: 0; }
  .svc-reel .reel-viewport { border-inline: 0; }
  .svc-stage { padding: 0; background: none; }
  .svc-stage img { border-radius: 0; border-block: var(--rule); }
}
/* The line under every screenshot, as on the case study page: the figures on the mockups are invented. */
.svc-caption { margin-top: .9rem; color: var(--color-text-grey); }
.svc-features, .svc-sources { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); }
.svc-features li, .svc-sources li { padding-top: 1rem; border-top: var(--rule); min-width: 0; }
.svc-features p, .svc-sources p { margin-top: .5rem; color: var(--svc-muted); text-wrap: pretty; }
.svc-sources { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2.5vw, 2.5rem); }
.svc-sources span { display: block; margin-top: .75rem; color: var(--color-text-grey); }
.svc-sources li { transition: border-color .3s ease; }
.svc-sources li:hover, .svc-sources li.is-on { border-top-color: var(--page-ink); }
.svc-sources h3 { justify-self: start; }
.svc-sources li.is-on h3 { background: var(--color-highlight-lilac); }
@media (max-width: 900px) { .svc-features, .svc-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-features, .svc-sources { grid-template-columns: 1fr; } }

/* The data map: the centrepiece of Data Analytics, edge to edge on its own light grey band,
   never taller than the screen. Phones get the tall map with type large enough to read. */
.svc-map-band { margin: clamp(2.5rem, 5vw, 4.5rem) calc(var(--page-gutter) * -1) 0; padding: clamp(.5rem, 2vw, 2rem); background: var(--color-light-grey); }
.partner-services .svc-map { width: 100%; max-width: calc(90svh * 16 / 9); margin: 0 auto; }
.svc-map:not(.reel) { aspect-ratio: 16 / 9; }
.partner-services .svc-map-tall { display: none; width: 100%; max-width: 30rem; margin: 0 auto; }
.svc-map-tall:not(.reel) { aspect-ratio: 720 / 900; }
.svc-map .reel-viewport, .svc-map-tall .reel-viewport { border-radius: 0; background: var(--color-light-grey); }
@media (max-width: 700px) { .partner-services .svc-map { display: none; } .partner-services .svc-map-tall { display: grid; } }
.svc-map-hint { margin-top: .9rem; color: var(--color-text-grey); text-align: center; }
/* The hint names the gesture of the device: point with a mouse, tap on a touch screen. */
.svc-hint-touch { display: none; }
@media (hover: none) { .svc-hint-mouse { display: none; } .svc-hint-touch { display: inline; } }
.svc-sub { margin-top: clamp(4rem, 8vw, 7rem); display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.svc-sub h3 { max-width: 16ch; text-wrap: balance; }
.svc-sub p { max-width: 75ch; text-wrap: pretty; }

/* Closing line */
.svc-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-top: clamp(6rem, 12vw, 12rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: var(--rule); }
.svc-close p { max-width: 30ch; text-wrap: balance; }
.svc-pill { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; height: 3.25rem; padding: 0 1.5rem; border-radius: 999px; border: var(--rule); color: inherit; text-decoration: none; }
.svc-pill:hover, .svc-pill:focus-visible { border-color: var(--page-ink); }
@media (max-width: 700px) { .svc-close { grid-template-columns: 1fr; } }

/* The floating dock: the five services, the one in view filled light purple, as in the apps.
   Shown only while a service is on screen, just above the navigation dock, and never on phones,
   where it covered the text; the index and the navigation are a tap away there (specs
   docs/specs/2026-10-08-mobile-pass.md, 2026-10-10-dock-navigation.md). */
.svc-dock { position: fixed; z-index: 18; left: 50%; bottom: var(--nav-dock-space); display: flex; gap: 2px; padding: 6px; border-radius: 22px; border: var(--rule); background: var(--color-white); opacity: 0; transform: translate3d(-50%, 14px, 0) scale(.96); visibility: hidden; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.3, .5, 1), bottom .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .5s; }
.svc-dock.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); visibility: visible; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.3, .5, 1), bottom .35s cubic-bezier(.2, .8, .2, 1); }
.svc-dock-fill { position: absolute; left: 0; top: 6px; bottom: 6px; border-radius: 16px; background: var(--color-highlight-lilac); transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), width .5s cubic-bezier(.3, 1.3, .5, 1); }
.svc-dock a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 4.5rem; padding: .55rem .7rem .5rem; border-radius: 16px; color: var(--svc-muted); text-decoration: none; white-space: nowrap; touch-action: manipulation; }
/* Sized as the navigation dock's items, which it sits on (.nav-dock-item, .nav-dock-label). */
.svc-dock a > .text-xs { display: block; max-height: 1.25em; }
.svc-dock a[aria-current] { color: var(--page-ink); }
.svc-dock svg { display: block; }
@media (max-width: 700px), (max-width: 950px) and (max-height: 550px) and (orientation: landscape) { .svc-dock { display: none; } }
@media (prefers-reduced-motion: reduce) { .svc-dock, .svc-dock.is-on, .svc-dock-fill, .svc-index-arrow, .svc-peek { transition: none; } }

/* The main surface scrolls away to uncover a charcoal footer held still at the bottom of the
   screen. footer.js sizes the wrapper to the footer and marks it data-enhanced; the footer is
   then fixed and the wrapper's clip-path shows only the part the page has uncovered. The
   browser scrolls it, so it never lags. Without the script, or when the footer is taller than
   the screen, it stays in normal flow. Both carry the charcoal, so white text never sits on white. */
.footer-reveal { position: relative; z-index: 2; background: var(--color-charcoal); }
.footer-reveal[data-enhanced] { height: var(--footer-height); clip-path: inset(0); }
.footer-reveal[data-enhanced] > .contact-section { position: fixed; inset: auto 0 0; }
.contact-section {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column;
  gap: clamp(1rem, 3svh, 2rem);
  /* Its foot clears the navigation dock, so the large name is never under it. */
  padding: var(--nav-clearance) var(--page-gutter) max(clamp(1rem, 3svh, 2rem), var(--nav-dock-clearance));
  color: var(--color-white);
  background: var(--color-charcoal);
  scroll-margin-top: 0;
}
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 7rem); }
/* Desktop keeps the half-width column the wordmark shared with the retired paper logo, so its
   28cqw cap gives the same size; at 900px and below it takes the full row. */
.footer-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem); margin-top: auto;
}
.footer-left { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.footer-contact { min-width: 0; }
.footer-brand-row { min-width: 0; container-type: inline-size; }
.footer-brand-row p { color: inherit; }
.contact-intro { margin-bottom: 2.5rem; }
.contact-intro h1 { margin: 0 0 1.5rem; }
.contact-details { display: grid; gap: .75rem; }
.contact-details p { margin: 0; }
.contact-details a { color: inherit; text-underline-offset: .2em; overflow-wrap: anywhere; }
.contact-details a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; }
  .contact-intro { margin-bottom: 1.25rem; }
}
@media (max-height: 700px) {
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; }
}

/* Partnerships: brand photos in a looping row under a liquid-glass edge lens
   (assets/brand-carousel.js). The heading is centred at the top, the centred brand's name and
   location sit above the row, and a counter pill below. The canvas spans the full width. */
.partnerships {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--page-ink);
  scroll-margin-top: 0;
}
.brand-carousel {
  --brand-card-h: clamp(150px, min(34vh, 50vw), 520px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--nav-clearance) 0 clamp(2rem, 6vh, 4rem);
  text-align: center;
}
.brand-carousel-title { max-width: 26ch; margin: 0 var(--page-gutter) clamp(1.5rem, 4.5vh, 3.5rem); text-wrap: balance; }
.brand-carousel-caption {
  display: grid; gap: .1em; margin: 0 var(--page-gutter) clamp(1.25rem, 4vh, 3rem);
  transition: opacity 200ms ease;
}
.brand-carousel-caption.is-changing { opacity: 0; }
.brand-carousel-place { opacity: .55; }
.brand-carousel-stage {
  position: relative; width: 100%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.brand-carousel-stage.is-dragging { cursor: grabbing; }
.brand-carousel-stage:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.brand-carousel-canvas {
  position: absolute; left: 0; top: calc(var(--brand-card-h) * -.55);
  display: none; width: 100%; height: calc(var(--brand-card-h) * 1.73); pointer-events: none;
}
.brand-carousel-count {
  margin: clamp(1.25rem, 4vh, 3rem) 0 0; padding: .6em .95em; border-radius: .35em;
  background: var(--color-light-grey); color: var(--color-black); font-variant-numeric: tabular-nums;
}
/* Enhanced: the canvas draws the row; the list stays for screen readers. */
.brand-carousel.is-enhanced .brand-carousel-stage { height: calc(var(--brand-card-h) * 1.18); }
.brand-carousel.is-enhanced .brand-carousel-canvas { display: block; }
.brand-carousel.is-enhanced .brand-carousel-track {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.brand-carousel:not(.is-enhanced) .brand-carousel-caption,
.brand-carousel:not(.is-enhanced) .brand-carousel-count { display: none; }
/* Without WebGL: a plain scrolling row of photos, each with its name and location. */
.brand-carousel-track {
  display: flex; gap: calc(var(--brand-card-h) * .13); width: 100%; margin: 0;
  padding: 0 var(--page-gutter); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
}
.brand-carousel-card { flex: none; scroll-snap-align: center; text-align: left; }
.brand-carousel-card img { display: block; width: auto; max-width: none; height: var(--brand-card-h); }
.brand-carousel-card p { margin: .5rem 0 0; }
.brand-carousel-card-place { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .brand-carousel-caption { transition: none; }
}

/* A solid lilac marker behind the highlighted line, shown as the page loads. */
.about-highlight {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(var(--color-highlight-lilac), var(--color-highlight-lilac));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.about-highlight .about-word {
  text-decoration-line: underline;
  text-decoration-thickness: .035em;
  text-underline-offset: .065em;
  text-decoration-skip-ink: auto;
}

/* Links keep a visible keyboard target. */
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .75rem 1rem; color: var(--color-black); background: var(--color-white); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

/* Case studies (the user, 2026-10-08: the items were too big): one row per case study, the
   text (client lockup, title, tagline and paragraph, "Read the full story") beside the client's
   LinkedIn reel, square cut. The reel sits on the right for the first case and on the left for the
   next (.is-flip), alternating down the section; below 992px it stacks under the text. The reel is
   code, playing muted in a lazy frame (case-studies/<client>/short-square-embed.html) over its own
   first frame, so the item is never empty while it loads; a link laid over the frame makes it
   clickable. Type comes from the shared roles; no shadows. */
#case-studies > h1 { max-width: 13ch; margin-bottom: var(--space-heading-subtitle); text-wrap: balance; }
.cs-lead { max-width: 40ch; text-wrap: pretty; }
.cs-item { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); margin-top: clamp(3.5rem, 8vw, 8rem); }
.cs-item.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.cs-item.is-flip .cs-media { order: -1; }
.cs-head { display: grid; justify-items: start; align-content: center; gap: clamp(1.25rem, 2.5vw, 2rem); min-width: 0; }
.cs-head > * { margin: 0; }
.cs-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .34em; }
.cs-lockup-client { display: block; height: .68em; width: auto; }
/* A portrait mark (Brain Dead's head) stands taller than a wordmark. */
.cs-lockup-client.is-mark { height: 1.25em; }
.cs-lockup-x { display: block; width: .34em; height: .34em; fill: none; stroke: var(--color-text-grey); stroke-width: 1; stroke-linecap: round; }
.cs-lockup-telemyr { display: inline-flex; align-items: center; gap: .23em; white-space: nowrap; }
.cs-lockup-mark { display: block; width: .66em; height: .66em; fill: currentColor; }
.cs-title { max-width: 16ch; text-wrap: balance; }
.cs-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--color-highlight-lilac), var(--color-highlight-lilac));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 950ms cubic-bezier(.22, 1, .36, 1);
}
.cs-item:hover .cs-title a, .cs-title a:focus-visible { background-size: 100% 100%; }
.cs-copy { display: grid; gap: 1rem; }
.cs-copy > * { margin: 0; }
.cs-copy .text-lead { text-wrap: balance; }
.cs-copy .text-large { max-width: 48ch; text-wrap: pretty; }
.cs-media { position: relative; display: block; aspect-ratio: 1 / 1; width: 100%; max-width: 100%; overflow: hidden; isolation: isolate; border: var(--rule); border-radius: clamp(.5rem, 1.1vw, 1rem); background: var(--color-light-grey); }
.cs-poster, .cs-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.cs-poster { object-fit: cover; }
.cs-frame { pointer-events: none; background: transparent; }
.cs-media-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cs-media-link:focus-visible { outline: 2px solid var(--page-ink); outline-offset: -4px; }
.cs-title a:focus-visible, .cs-link:focus-visible { outline: 2px solid var(--page-ink); outline-offset: .25rem; }
.cs-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: clamp(.5rem, 1.5vw, 1rem);
  padding: .7em 1.3em;
  border: var(--rule);
  border-radius: 999px;
  background: var(--page-surface);
  color: var(--page-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
@media (hover: hover) { .cs-link:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); } }
@media (prefers-reduced-motion: reduce) { .cs-title a, .cs-link { transition: none; } }
@media (max-width: 991px) {
  .cs-item, .cs-item.is-flip { grid-template-columns: minmax(0, 1fr); }
  .cs-item.is-flip .cs-media { order: 0; }
  .cs-media { max-width: 36rem; }
}

/* Blog: the language of the services and case studies (spec
   docs/specs/2026-10-10-blog-redesign.md). The H1 and a lead line; the latest article on a black chapter card with its own terrain
   and sections (assets/blog-terrain.js); the topics as the services dock, its light purple fill
   springing to the chosen one (assets/blog.js); then every article as a card whose cover plays its
   topic's 5-second loop (assets/blog-loops.js), light grey or, two in every ten, wide and black.
   The same cards make the list view, rows of the services index. Article pages reuse the cards for
   Read next. Type comes from the shared roles; this block only places, sizes and colours. */
.blog-section, .article-page {
  --blog-muted: color-mix(in srgb, var(--color-black) 63.92157%, var(--color-white));
  --blog-gap: clamp(1rem, 2.2vw, 2rem);
  --blog-radius: clamp(.75rem, 1.6vw, 1.5rem);
  --blog-ease: cubic-bezier(.2, .8, .2, 1);
}
#blog > h1 { max-width: 19ch; margin-bottom: var(--space-heading-subtitle); text-wrap: balance; }
.blog-intro { max-width: 40ch; text-wrap: pretty; }
.blog-brand { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.blog-brand svg { display: block; width: .95em; height: .95em; fill: currentColor; }

/* The latest article: a black chapter card, like the ones that open every reel. */
.blog-lead { position: relative; margin-top: clamp(3rem, 6vw, 6rem); border-radius: var(--blog-radius); background: var(--color-black); color: var(--color-white); overflow: hidden; isolation: isolate; }
.blog-lead-link { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(1.75rem, 3.5vw, 3.5rem); aspect-ratio: 16 / 9; padding: clamp(1.5rem, 5vw, 5.25rem) clamp(1.5rem, 6.25vw, 6rem) clamp(1.5rem, 4.5vw, 4.5rem); color: inherit; text-decoration: none; }
.blog-lead-link:focus-visible { outline: 2px solid var(--color-white); outline-offset: -8px; }
.blog-lead-terrain { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.blog-lead-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.blog-lead-top .text-small, .blog-lead-n { color: color-mix(in srgb, var(--color-white) 78%, transparent); }
.blog-lead-body { align-self: center; display: grid; justify-items: start; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.blog-lead-title { max-width: 20ch; text-wrap: balance; }
.blog-lead-deck { max-width: 32ch; color: color-mix(in srgb, var(--color-white) 70%, transparent); text-wrap: pretty; }
.blog-lead-cta { margin-top: clamp(.5rem, 1.2vw, 1rem); display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.3em; border-radius: 999px; background: var(--color-white); color: var(--color-black); transition: background-color .25s ease; }
.blog-lead-link:hover .blog-lead-cta, .blog-lead-link:focus-visible .blog-lead-cta { background: var(--color-highlight-lilac); }
/* Its sections as the reels' chapter bars, filling one after another when it is pointed at. */
.blog-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.blog-chapters li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75em; row-gap: .85rem; align-content: start; min-width: 0; color: color-mix(in srgb, var(--color-white) 55%, transparent); transition: color .4s ease calc(var(--k) * 260ms + 120ms); }
.blog-chapters b { grid-column: 1 / -1; position: relative; height: 3px; background: color-mix(in srgb, var(--color-white) 22%, transparent); overflow: hidden; }
.blog-chapters i { position: absolute; inset: 0; background: var(--color-white); transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--blog-ease) calc(var(--k) * 260ms); }
.blog-chapters span + span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-lead-link:hover .blog-chapters i, .blog-lead-link:focus-visible .blog-chapters i { transform: scaleX(1); }
.blog-lead-link:hover .blog-chapters li, .blog-lead-link:focus-visible .blog-chapters li { color: var(--color-white); }
@media (max-width: 700px) {
  .blog-lead-link { aspect-ratio: auto; min-height: 36rem; }
  .blog-chapters { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .blog-chapters li { row-gap: .5rem; }
}

/* The topics and the view: the services dock as a control. Shown once blog.js runs. */
.blog-index { margin-top: clamp(4.5rem, 9vw, 9rem); scroll-margin-top: var(--nav-clearance); }
.blog-index:not([data-enhanced]) .blog-bar, .blog-index:not([data-enhanced]) .blog-dock { display: none; }
.blog-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; scroll-margin-top: var(--nav-clearance); }
.blog-bar-group { display: grid; gap: .75rem; min-width: 0; max-width: 100%; }
.blog-bar-group > p { color: var(--color-text-grey); }
.blog-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.blog-scroll::-webkit-scrollbar { display: none; }
.blog-seg { position: relative; display: inline-flex; gap: 2px; padding: 6px; border-radius: 22px; border: var(--rule); background: var(--color-white); }
.blog-seg-fill { position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 16px; background: var(--color-highlight-lilac); transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), width .5s cubic-bezier(.3, 1.3, .5, 1); }
.blog-seg:not([data-placed]) .blog-seg-fill { transition: none; }
.blog-seg button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 4.5rem; padding: .55rem .7rem .5rem; border: 0; border-radius: 16px; background: none; color: var(--blog-muted); cursor: pointer; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.blog-seg button:hover, .blog-seg button[aria-pressed="true"] { color: var(--page-ink); }
.blog-seg button:focus-visible { outline: 2px solid var(--page-ink); outline-offset: -2px; }
.blog-seg svg { display: block; width: 20px; height: 20px; }
/* Sized as the navigation dock's items (.nav-dock-item, .nav-dock-label), so the two read as one:
   the name's box is as tall as the dock's, and nothing is clipped. */
.blog-seg button > .text-xs { display: block; max-height: 1.25em; }
.blog-count { margin-left: .35em; color: var(--color-text-grey); }
.blog-seg button[aria-pressed="true"] .blog-count { color: var(--blog-muted); }
/* On phones the topics scroll to the screen edge, not the gutter. */
@media (max-width: 700px) { .blog-scroll { max-width: none; margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); } }
.blog-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The cards. */
.blog-cards { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 5vw, 5rem) var(--blog-gap); container-type: inline-size; }
.blog-card { min-width: 0; }
.blog-card.is-wide { grid-column: span 2; }
/* The latest article's own card shows only when a topic is chosen, first. */
.blog-cards:not(.is-filtered) > .blog-card.is-lead { display: none; }
.blog-cards.is-filtered > .blog-card.is-lead { order: -1; }
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-card-link:focus-visible { outline: none; }
.blog-card-link:focus-visible .blog-cover { outline: 2px solid var(--page-ink); outline-offset: 3px; }
.blog-cover { --blog-cover-bg: var(--color-light-grey); position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--blog-radius); background: var(--blog-cover-bg); color: var(--page-ink); overflow: hidden; isolation: isolate; }
/* A wide cover is as tall as its neighbours'. */
.blog-card.is-wide .blog-cover { aspect-ratio: auto; height: calc((100cqw - 2 * var(--blog-gap)) / 3 * .625); }
.blog-card.is-dark .blog-cover { --blog-cover-bg: var(--color-black); color: var(--color-white); }
.blog-cover-brand { position: absolute; left: clamp(1rem, 2vw, 1.75rem); top: clamp(1rem, 2vw, 1.75rem); }
.blog-loop { position: absolute; inset: 0; display: block; }
.blog-loop-svg { display: block; width: 100%; height: 100%; }
.blog-loop .bl-guide { opacity: .24; }
.blog-loop .bl-ink { fill: currentColor; fill-opacity: .7; }
.blog-loop .bl-hole { fill: var(--blog-cover-bg, var(--color-light-grey)); }
.blog-loop .bl-accent { fill: var(--color-highlight-lilac); }
.blog-tag { position: absolute; left: clamp(.75rem, 1.4vw, 1.25rem); bottom: clamp(.75rem, 1.4vw, 1.25rem); display: inline-flex; align-items: center; gap: .45em; padding: .42rem .85rem .42rem .65rem; border-radius: 999px; background: var(--color-white); color: var(--color-black); white-space: nowrap; transition: background-color .3s ease; }
.blog-tag svg { display: block; width: 15px; height: 15px; flex: none; }
.blog-card-link:hover .blog-tag, .blog-card-link:focus-visible .blog-tag { background: var(--color-highlight-lilac); }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1.1rem; color: var(--color-text-grey); }
.blog-card-title { margin-top: .4rem; max-width: 24ch; text-wrap: balance; }
.blog-card.is-wide .blog-card-title { max-width: 32ch; }
.blog-card-deck { margin-top: .6rem; max-width: 44ch; color: var(--blog-muted); text-wrap: pretty; }
.blog-card.is-wide .blog-card-deck { max-width: 56ch; }
.blog-card-arrow { display: none; }
/* The lilac sweep behind a title, as on the case study titles. */
.blog-sweep { background-image: linear-gradient(var(--color-highlight-lilac), var(--color-highlight-lilac)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 950ms cubic-bezier(.22, 1, .36, 1); }
.blog-card-link:hover .blog-sweep, .blog-card-link:focus-visible .blog-sweep { background-size: 100% 100%; }
/* A chosen topic: every card light and one column wide, without the topic pill they all share. */
.blog-cards.is-filtered .blog-card.is-wide { grid-column: auto; }
.blog-cards.is-filtered .blog-card.is-wide .blog-cover { aspect-ratio: 16 / 10; height: auto; }
.blog-cards.is-filtered .blog-card.is-dark .blog-cover { --blog-cover-bg: var(--color-light-grey); color: var(--page-ink); }
.blog-cards.is-filtered .blog-cover-brand, .blog-cards.is-filtered .blog-tag { display: none; }
/* blog.js shows ten cards (fifteen rows) and "Show all"; without it every article shows. */
.blog-cards[data-collapsed]:not(.is-list) > .blog-card:nth-child(n+11), .blog-cards[data-collapsed].is-list > .blog-card:nth-child(n+16) { display: none; }
.blog-card.is-rising { animation: blog-rise .7s var(--blog-ease) both; animation-delay: calc(var(--d, 0) * 45ms); }
@keyframes blog-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@media (max-width: 1100px) {
  .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card.is-wide { grid-column: auto; }
  .blog-card.is-wide .blog-cover { aspect-ratio: 16 / 10; height: auto; }
}
@media (max-width: 640px) { .blog-cards { grid-template-columns: minmax(0, 1fr); } }

/* The list: the same cards as rows of the services index, number, title, deck, time and arrow. */
.blog-cards.is-list { display: block; border-bottom: var(--rule); }
.blog-cards.is-list .blog-card-link { display: grid; grid-template-columns: 7% minmax(0, 1.25fr) minmax(0, 1fr) 6rem 1.5rem; gap: .35rem clamp(1rem, 3vw, 3rem); align-items: baseline; padding: clamp(1rem, 2vw, 1.5rem) 0; border-top: var(--rule); }
.blog-cards.is-list .blog-cover { display: none; }
.blog-cards.is-list .blog-card-meta { display: contents; }
.blog-cards.is-list .blog-card-meta > .type-number { grid-column: 1; grid-row: 1; }
.blog-cards.is-list .blog-card-min { grid-column: 4; grid-row: 1; justify-self: end; white-space: nowrap; }
.blog-cards.is-list .blog-card-title { grid-column: 2; grid-row: 1; margin: 0; max-width: none; }
.blog-cards.is-list .blog-card-deck { grid-column: 3; grid-row: 1; margin: 0; max-width: none; }
.blog-cards.is-list .blog-card-arrow { display: block; grid-column: 5; grid-row: 1; justify-self: end; transition: transform .5s var(--blog-ease); }
.blog-cards.is-list .blog-card-link:hover .blog-card-arrow, .blog-cards.is-list .blog-card-link:focus-visible .blog-card-arrow { transform: translateX(.35rem); }
.blog-cards.is-list .blog-card-link:focus-visible { outline: 2px solid var(--page-ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .blog-cards.is-list .blog-card-link { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; }
  .blog-cards.is-list .blog-card-deck { grid-column: 2; grid-row: 2; }
  .blog-cards.is-list .blog-card-min { display: none; }
  .blog-cards.is-list .blog-card-arrow { grid-column: 3; }
}
/* The loop that follows the pointer over the list. */
.blog-peek { --blog-cover-bg: var(--color-light-grey); position: fixed; z-index: 15; left: 0; top: 0; width: min(26vw, 22rem); aspect-ratio: 16 / 10; border-radius: .75rem; border: var(--rule); background: var(--blog-cover-bg); color: var(--page-ink); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.blog-peek.is-on { opacity: 1; }
@media (hover: none), (max-width: 900px) { .blog-peek { display: none; } }

.blog-more { margin-top: clamp(3rem, 6vw, 5rem); }
.blog-more-button { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.3em; border: var(--rule); border-radius: 999px; background: var(--page-surface); color: var(--page-ink); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
@media (hover: hover) { .blog-more-button:hover { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); } }
.blog-more-button:focus-visible { outline: 2px solid var(--page-ink); outline-offset: .25rem; }

/* The topics follow you down a long list in a floating dock above the navigation, then step aside. */
.blog-dock { position: fixed; z-index: 18; left: 50%; bottom: var(--nav-dock-space); max-width: calc(100vw - 2rem); opacity: 0; transform: translate3d(-50%, 14px, 0) scale(.96); visibility: hidden; transition: opacity .3s ease, transform .45s var(--blog-ease), bottom .35s var(--blog-ease), visibility 0s linear .45s; }
.blog-dock.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); visibility: visible; transition: opacity .3s ease, transform .6s cubic-bezier(.3, 1.3, .5, 1), bottom .35s var(--blog-ease); }
@media (max-width: 700px), (max-width: 950px) and (max-height: 550px) and (orientation: landscape) { .blog-dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .blog-sweep, .blog-seg-fill, .blog-dock, .blog-dock.is-on, .blog-chapters i, .blog-chapters li, .blog-tag, .blog-lead-cta, .blog-more-button, .blog-card-arrow, .blog-peek { transition: none; }
  .blog-card.is-rising { animation: none; }
}

/* Section anchors clear the fixed navigation. */
.about-story { padding-top: max(var(--nav-clearance), clamp(3rem, 8vw, 8rem)); }
.capabilities, .partner-services { scroll-margin-top: 0; padding-top: max(var(--nav-clearance), clamp(3rem, 7vw, 7rem)); }
.why-us { position: relative; isolation: isolate; padding: var(--nav-clearance) var(--page-gutter) clamp(4rem, 8vw, 8rem); scroll-margin-top: 0; color: var(--page-ink); }

/* Why Us: an edge-to-edge row of cards split by thin grey rules (the tiwd.courses lessons
   row). Cards 36% / 50% / 65% / 85% of the content width, 500ms moves, later cards cut off
   at the screen edge. A plain number at the top; the black title and grey description below. */
.why-us { overflow: clip; }
.why-us-slider {
  --why-us-card: 36%;
  /* Every title starts the same distance below its number, whatever the description
     length. The row is as tall as its longest card, with no minimum height, so the text
     sits near the bottom of the boxes; the reel band above it is the offset. */
  --why-us-title-offset: clamp(12rem, 23vw, 21rem);
}
.why-us-slider-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem, 7vw, 7rem);
}
.why-us-slider-header h1 { max-width: 19ch; }
.why-us-slider-controls { display: flex; flex: none; gap: clamp(.5rem, .8vw, .75rem); }
.why-us-slider-button {
  display: grid;
  place-items: center;
  width: clamp(3rem, 4vw, 3.5rem);
  aspect-ratio: 1;
  padding: 0;
  border: var(--rule);
  border-radius: 50%;
  background: var(--page-surface);
  color: var(--page-ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.why-us-slider-button svg { width: 38%; height: auto; }
.why-us-slider-button.is-previous svg { opacity: .16; }
.why-us-slider-button:active { transform: scale(.9); }
.why-us-slider-button:focus-visible { outline: 2px solid var(--page-ink); outline-offset: .25rem; }
.why-us-slider:not([data-enhanced]) .why-us-slider-controls { display: none; }
/* The rules above and below the row run the full screen width; the first card starts at the gutter. */
.why-us-slider-viewport {
  margin-inline: calc(-1 * var(--page-gutter));
  border-block: var(--rule);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-gutter);
}
.why-us-slider[data-enhanced] .why-us-slider-viewport { overflow: hidden; touch-action: pan-y; }
.why-us-slider-track {
  display: flex;
  width: calc(100% - 2 * var(--page-gutter));
  margin: 0 0 0 var(--page-gutter);
  padding: 0;
  list-style: none;
}
.why-us-slider-card {
  display: flex;
  flex: 0 0 var(--why-us-card);
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--why-us-title-offset);
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  border-left: var(--rule);
  color: var(--page-ink);
  scroll-snap-align: start;
}
.why-us-slider-card:last-child { border-right: var(--rule); }
.why-us-slider[data-enhanced] .why-us-slider-card { user-select: none; -webkit-user-select: none; }
.why-us-slider-number { margin: 0; }
.why-us-slider-card-text { display: flex; flex-direction: column; gap: .75em; }
.why-us-slider-title { margin: 0; }
.why-us-slider-description { margin: 0; color: var(--color-text-grey, #999999); }
/* Why Us reels (assets/why-us-reels.js): each fills the space between a card's number and
   its title, inset by --why-reel-pad, and takes no room in the flow, so every title still
   starts the same distance below its number. The drawing is clipped to its box. */
.why-us-slider { --why-reel-pad: clamp(1rem, 2vw, 1.5rem); }
.why-us-reel {
  height: calc(var(--why-us-title-offset) - 2 * var(--why-reel-pad));
  min-width: 0;
  margin: calc(var(--why-reel-pad) - var(--why-us-title-offset)) 0;
  color: var(--page-ink);
}
.why-us-reel:not([data-ready]) { display: none; }
.why-us-reel svg { display: block; width: 100%; height: 100%; overflow: hidden; }
@media (max-width: 991px) { .why-us-slider { --why-us-card: 50%; } }
@media (max-width: 767px) {
  .why-us-slider { --why-us-card: 65%; --why-us-title-offset: 16rem; }
}
@media (max-width: 479px) {
  .why-us-slider { --why-us-card: 85%; }
  .why-us-slider-controls { display: none; }
}