/* theofficelab.eu, shared stylesheet. Tokens first, light on bare :root, dark twice (OS + toggle). */
/* ---------- tokens: light palette on bare :root ---------- */
:root {
  --paper: #F7F7F5;
  --paper-2: #EFEDE8;
  --surface: #FFFFFF;
  --ink: #141412;
  --muted: #5E5651;
  --grey: #8A7F76;
  --line: #D9D4CC;
  --copper: #DD5314;
  --copper-deep: #A83A0C;
  --copper-hi: #E87848;
  --btn-bg: var(--copper-deep);
  --btn-fg: var(--paper);
  --logo-light: block;
  --logo-dark: none;
  --halo-vis: hidden;
  --shadow: 0 10px 30px rgba(20, 20, 18, 0.08);
  --backdrop: rgba(20, 20, 18, 0.55);
  --photo-bg: #000000;
  --cable-x: calc(min(100vw - var(--sbw, 0px), 1264px) / 1264 * 28);
  --display-stroke: 0.035em;
  --stub: calc(var(--gutter) - 8px);
  --gutter: clamp(16px, 2.5vw, 32px);
  --col: 1264px;
  --header-h: 64px;
  --brand-w: clamp(110px, 29vw, 200px);
  --font-body: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  --font-display: "OfficeLabDisplay", "OfficeLabDisplay Fallback", "Arial Narrow", Arial, sans-serif;
  color-scheme: light;
}
/* OS dark preference, honoured from tablet width up. Phones stay light unless the visitor taps the toggle. */
@media (prefers-color-scheme: dark) and (min-width: 48em) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --paper-2: #1A1917;
    --surface: #201E1B;
    --ink: #F1EEE9;
    --muted: #B3A99E;
    --grey: #8A7F76;
    --line: #34312D;
    --copper: #E4622A;
    --copper-deep: #F08A5C;
    --copper-hi: #F6A98A;
    --btn-bg: var(--copper);
    --btn-fg: #141412;
    --logo-light: none;
    --logo-dark: block;
    --halo-vis: visible;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --display-stroke: 0.02em;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121211;
  --paper-2: #1A1917;
  --surface: #201E1B;
  --ink: #F1EEE9;
  --muted: #B3A99E;
  --grey: #8A7F76;
  --line: #34312D;
  --copper: #E4622A;
  --copper-deep: #F08A5C;
  --copper-hi: #F6A98A;
  --btn-bg: var(--copper);
  --btn-fg: #141412;
  --logo-light: none;
  --logo-dark: block;
  --halo-vis: visible;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --display-stroke: 0.02em;
  color-scheme: dark;
}
@media (min-width: 56em) { :root { --brand-w: clamp(150px, 15.8vw, 200px); } }

/* ---------- fonts ---------- */
@font-face {
  font-family: "OfficeLabDisplay";
  src: url("/assets/fonts/OfficeLabDisplay.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OfficeLabDisplay Fallback";
  src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Helvetica Neue"), local("Arial");
  size-adjust: 112%;
  ascent-override: 88%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */
.svg-defs { position: absolute; width: 0; height: 0; }
main { padding-top: var(--header-h); }
.device--1 { --i: 1; }
.device--2 { --i: 2; }
figure { margin: 0; }
.problem__fail { display: none; color: var(--copper-deep); margin: 12px 0 0; }
.problem.is-failed .problem__fail { display: block; }
/* inner pages: one plain column, the cable as a straight rail */
.page .col { padding-block: 72px; min-height: 60svh; }
.page__title { font-size: clamp(1.7rem, 1rem + 2.6vw, 3.4rem); max-width: 24ch; margin-bottom: 0.6em; }
.page__lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); max-width: 60ch; }
.page__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
/* legal pages: long-form, one measure, headings in the body face so a clause title is read, not admired */
.legal .content { max-width: 68ch; }
.legal .page__title { max-width: none; }
.legal__meta { color: var(--muted); font-size: 0.95rem; margin: 0 0 2em; padding-bottom: 1.2em; border-bottom: 1px solid var(--line); }
.legal h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; -webkit-text-stroke: 0; margin: 2em 0 0.5em; }
.legal p { line-height: 1.65; }
.legal code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; background: var(--surface); padding: 0.1em 0.4em; border-radius: 4px; }
.legal-mail { white-space: nowrap; }
@media (min-width: 64em) { .page .col { padding-block: 112px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--copper-deep); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1, h2, h3, .display, .btn, .menu, .theme, .lang a, .device__num, .device__plate, .step__num, .scn__num {
  -webkit-text-stroke: var(--display-stroke) currentColor;
  paint-order: stroke fill;
}
:focus-visible { outline: 3px solid var(--copper-deep); outline-offset: 3px; }
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 6px;
}
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.col {
  position: relative;
  width: min(100%, var(--col));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 64em) { .col:not(.col--flat) { padding-left: calc(var(--gutter) + 56px); } }
section, footer { position: relative; overflow: clip; }
.content { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--copper-deep);
  -webkit-text-stroke: 0;
  margin: 0 0 1.25rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.55em 1.35em;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.86rem;
  border-radius: 6px; border: 2px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg);
  text-decoration: none; cursor: pointer; line-height: 1.15;
}
.btn:hover { filter: brightness(1.08); color: var(--btn-fg); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); filter: none; }
.btn--sm { min-height: 44px; font-size: 0.8rem; }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-head__row { display: flex; align-items: center; height: 100%; gap: 6px; }
.brand { display: flex; align-items: center; min-height: 44px; width: var(--brand-w); flex: 0 0 auto; margin-right: auto; text-decoration: none; }
/* Both wordmarks are transparent 1400 x 470 files with the identical crop: the mark sits in rows 93 to 335,
   a little above the file's centre. The box clips the transparent padding, the 4.5% nudge centres the mark,
   87% width keeps the visual size of the earlier crop. No blend modes. */
.brand__crop { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1400 / 280; overflow: clip; }
.brand__crop img { width: 87%; height: auto; margin: 0; flex: 0 0 auto; transform: translateY(4.5%); }
.brand__light { display: var(--logo-light); }
.brand__dark { display: var(--logo-dark); }
.menu {
  order: 1; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.menu:hover, .menu[aria-expanded="true"] { border-color: var(--copper); }
.site-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
.site-nav[hidden] { display: none; }
.site-nav ul { list-style: none; margin: 0 auto; padding: 8px var(--gutter) 12px; width: min(100%, var(--col)); display: grid; }
.site-nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 10px;
  color: var(--ink); text-decoration: none; font-size: 1.05rem; border-radius: 6px;
}
.site-nav a:hover { color: var(--copper-deep); text-decoration: underline; }
.site-nav a:focus-visible { outline-offset: -3px; }
.site-head__tools { order: 2; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lang { display: flex; align-items: center; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px;
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; color: var(--muted); border-radius: 6px;
}
.lang a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: var(--copper); text-decoration-thickness: 2px; }
.lang__sep { color: var(--line); }
.theme {
  min-height: 44px; min-width: 44px; padding: 0 6px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.theme:hover { border-color: var(--copper); }
.theme__text { display: none; }
.theme__icon { font-size: 1.15rem; line-height: 1; }
@media (min-width: 56em) {
  .site-head__row { gap: 20px; }
  .brand { margin-right: 0; }
  .menu { display: none; }
  .site-nav, .site-nav[hidden] { display: block; position: static; background: none; border: 0; box-shadow: none; flex: 1 1 auto; }
  .site-nav ul { display: flex; justify-content: center; gap: 8px; padding: 0; width: auto; }
  .site-nav a { min-height: 44px; font-size: 0.95rem; }
  .site-head__tools { gap: 6px; }
  .lang a { min-width: 36px; letter-spacing: 0.08em; }
  .lang__sep { margin: 0 2px; }
  .theme { padding: 0 12px; }
  .theme__text { display: inline; }
  .theme__icon { display: none; }
}

/* ---------- cable layers ---------- */
.cable, .halo { position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0; }
.cable--desk, .halo--desk { width: 100%; height: 100%; display: none; }
.cable--rail, .halo--rail, .cable--rail_m, .halo--rail_m { width: 64px; height: 100%; display: block; }
.cable--rail_t, .halo--rail_t { width: 64px; height: 100%; display: none; }
.halo { visibility: var(--halo-vis); }
.halosvg { width: 100%; height: 100%; display: block; filter: blur(6px); opacity: 0.55; }
.cable path, .halosvg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cable path { stroke: url(#brushed); stroke-width: 3; }
.stop-deep { stop-color: var(--copper-deep); }
.stop-mid { stop-color: var(--copper); }
.stop-hi { stop-color: var(--copper-hi); }
.halosvg path { stroke: var(--copper); stroke-width: 12; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .cable--rail_m, .halo--rail_m { display: none; }
  .cable--rail_t, .halo--rail_t { display: block; }
}
@media (min-width: 64em) {
  .cable--rail, .halo--rail, .cable--rail_m, .halo--rail_m, .cable--rail_t, .halo--rail_t { display: none; }
  .cable--desk, .halo--desk { display: block; }
}
:root[data-theme="dark"] .cable path { stroke: var(--copper); }
@media (prefers-color-scheme: dark) and (min-width: 48em) { :root:not([data-theme="light"]) .cable path { stroke: var(--copper); } }
:root[data-theme="dark"] .foot-cable { filter: drop-shadow(0 0 5px var(--copper)); }
@media (prefers-color-scheme: dark) and (min-width: 48em) { :root:not([data-theme="light"]) .foot-cable { filter: drop-shadow(0 0 5px var(--copper)); } }

/* sockets: the short stub from the cable into a device, drawn on the device so it follows it when it sticks */
.socket { position: relative; }
.socket::before, .socket::after { content: ""; position: absolute; pointer-events: none; }
.socket::before {
  left: calc(-1 * var(--stub)); top: 26px; width: var(--stub); height: 3px;
  background: var(--copper); transform-origin: left center;
}
.socket::after {
  left: -8px; top: 20px; width: 15px; height: 15px; border-radius: 50%;
  border: 3px solid var(--copper); background: var(--surface);
}
@media (min-width: 64em) { :root { --stub: calc(var(--gutter) + 56px - var(--cable-x)); } }

/* ---------- hero ---------- */
.hero { overflow: hidden; }
.hero .col { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: 28px 40px; }
.hero__title { font-size: clamp(1.9rem, 1rem + 3.4vw, 4.25rem); line-height: 1.08; max-width: 26ch; }
.hero__lead { font-size: clamp(1rem, 0.96rem + 0.5vw, 1.3rem); max-width: 56ch; margin: 1.1em 0 1.4em; color: var(--ink); }
.hero__cta { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.hero__where { color: var(--muted); font-size: 0.95rem; margin: 1.4em 0 0; }
@media (min-width: 30em) { .hero__cta { flex-direction: row; flex-wrap: wrap; max-width: none; } }
@media (min-width: 64em) { .hero .col { padding-block: 48px 64px; } }

/* the scene: the hero's one bold element. A rendered switch on the wall, full bleed, dead at first paint,
   lit when the power comes on. Two frames from the same camera, cross-faded, so the change reads as light. */
.hero { position: relative; overflow: clip; } /* clip, not hidden: hidden makes a scroll container and freezes the cable's view() timeline */
.hero__bg { position: absolute; inset: 0; z-index: 0; cursor: pointer; background: #0B0B0A; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
.hero__img--on { opacity: 0; transition: opacity 1100ms ease; }
.hero .col { position: relative; z-index: 1; pointer-events: none; } /* the column spans the hero; let clicks fall through to the wall */
.hero .content, .hero .content * { pointer-events: auto; }
.hero__bg:hover .hero__img--off { filter: brightness(1.12); }
.hero__img--off { transition: filter 300ms ease; }
.hero__text { max-width: 58ch; }
.hero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.hero__lead { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.switchline { appearance: none; background: none; border: 0; padding: 6px 0; margin: 1.2em 0 0; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font: inherit; font-size: 0.95rem; border-radius: 6px; }
.switchline:focus-visible { outline: 3px solid var(--copper); outline-offset: 6px; }
.switchline__lever { width: 14px; height: 26px; border-radius: 7px; border: 2px solid var(--grey); position: relative; flex: 0 0 auto; }
.switchline__lever::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 9px; border-radius: 4px; background: var(--grey); transition: transform 380ms cubic-bezier(0.3, 0.9, 0.25, 1.15), background 380ms ease; }
.switch__word { color: var(--ink); font-weight: 700; transition: color 420ms ease; }
.hero__state { display: inline-block; transition: color 420ms ease; }
section.hero[data-power="on"] .hero__img--on { opacity: 1; }
section.hero[data-power="on"] .switchline__lever { border-color: var(--copper); }
section.hero[data-power="on"] .switchline__lever::after { transform: translateY(-11px); background: var(--copper); }
section.hero[data-power="on"] .switch__word, section.hero[data-power="on"] .hero__state { color: var(--copper); }
/* the page cable is dead until the power is on: overrides the light brushed stroke and the dark copper stroke alike */
section.hero[data-power="off"] .cable path { stroke: #5E5651; }
section.hero[data-power="off"] .halo { visibility: hidden; }
/* light theme: the render is a dark scene, so the hero stays dark in both themes and the text goes light */
.hero { --ink: #F1EEE9; --muted: #B3A99E; --grey: #8A7F76; --line: #34312D; --btn-bg: var(--copper); --btn-fg: #141412; color: var(--ink); }
.hero .btn--ghost { color: var(--ink); border-color: var(--ink); }
.hero .btn--ghost:hover { background: var(--ink); color: #141412; }
@media (max-width: 47.99em) {
  .hero__bg { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .hero__img { object-position: 74% 50%; }
  .hero .col { min-height: 0; padding-block: 24px 40px; }
}
@media (min-width: 48em) {
  .hero__text { padding-block: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__img--on, .switchline__lever::after, .switch__word, .hero__state { transition: none; }
}

/* ---------- belief ---------- */
.belief { background: var(--paper-2); }
.belief .col { padding-block: 72px; }
.belief__text { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); line-height: 1.45; max-width: 60ch; margin: 0; }
.belief__box { padding-left: clamp(16px, 2vw, 28px); border-left: 3px solid var(--copper); }
@media (min-width: 64em) { .belief .col { padding-block: 112px; } }

/* ---------- doors ---------- */
.doors .col { padding-block: 72px; }
.doors__stack { display: grid; gap: 20px; }
.device {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; grid-template-rows: 60px auto;
}
.device__plate {
  display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 60px;
  border-bottom: 1px solid var(--line); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem;
}
.device__num { color: var(--copper-deep); font-size: 1.1rem; letter-spacing: 0.06em; }
.device__body { padding: 22px 20px 24px; }
.device__body p { font-size: 1.05rem; max-width: 46ch; margin-bottom: 1.2em; }
.device--1 { border-top: 4px solid var(--copper); border-radius: 4px; }
.device--2 { border-radius: 18px; border-style: dashed; }
.device--2 .device__plate { border-bottom-style: dashed; }
@media (min-width: 48em) {
  .device__body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 28px 28px 30px; }
  .device__body p { margin-bottom: 0; }
  .device--2 { width: 86%; }
}
@media (min-width: 64em) { .doors .col { padding-block: 112px; } .doors__stack { gap: 28px; } .device__plate { padding: 0 28px; } }

/* ---------- how ---------- */
.how { background: var(--paper-2); }
.how .col { padding-block: 72px; }
.how__grid { display: grid; gap: 20px; }
.step { background: var(--surface); border: 1px solid var(--line); padding: 24px 22px 26px; }
.step__num { font-family: var(--font-display); font-size: 2.1rem; color: var(--copper-deep); line-height: 1; letter-spacing: 0.02em; }
.step h3 { font-size: 1.15rem; margin: 10px 0 12px; }
.step p { margin: 0; color: var(--ink); }
@media (min-width: 48em) { .how__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 64em) { .how .col { padding-block: 112px; } .step { padding: 32px 30px 34px; } }

/* ---------- scenarios teaser ---------- */
.scn .col { padding-block: 72px; }
.scn__list { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--line); }
.scn__item { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.scn__num { font-family: var(--font-display); color: var(--copper-deep); font-size: 0.95rem; letter-spacing: 0.06em; }
.scn__item h3 { font-size: 1.05rem; margin-bottom: 4px; }
.scn__item p { margin: 0; color: var(--muted); }
@media (min-width: 48em) { .scn__item { grid-template-columns: 60px 1fr 1.2fr; } .scn__item p { grid-column: 3; align-self: baseline; } }
@media (min-width: 64em) { .scn .col { padding-block: 112px; } }

/* ---------- desk photo ---------- */
.desk { background: var(--paper-2); }
.desk .col { padding-block: 64px; }
.desk__line { font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); max-width: 22ch; margin-bottom: 24px; }
.desk__img { border-radius: 6px; box-shadow: var(--shadow); background: var(--photo-bg); }
.desk__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
@media (min-width: 64em) {
  .desk .col { padding-block: 96px; }
  .desk__line { margin-bottom: 32px; }
  .desk__img { margin-left: -40px; }
}

/* ---------- contact ---------- */
.contact .col { padding-block: 72px; }
.contact__grid { display: grid; gap: 20px; }
.way { background: var(--surface); border: 1px solid var(--line); padding: 26px 22px 28px; display: flex; flex-direction: column; }
.way h3 { font-size: 1.2rem; margin-bottom: 12px; }
.way p { flex: 1; }
@media (min-width: 48em) { .contact__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 64em) { .contact .col { padding-block: 112px; } .way { padding: 32px 30px 34px; } }

/* ---------- footer ---------- */
.site-foot { background: var(--paper-2); border-top: 1px solid var(--line); }
.site-foot .col { padding-block: 80px 56px; }
.foot__brand { width: min(260px, 100%); display: flex; align-items: center; justify-content: center; aspect-ratio: 1400 / 300; overflow: clip; }
.foot__brand img { width: 100%; transform: translateY(4.5%); }
/* The cable ends in the logo: down the channel, round the corner, into the outer ring of the O (Dave 2026-09-25).
   One bordered box instead of a stretched SVG, so the corner lands on the ring at every footer height:
   height = footer padding + logo nudge (4.5%) + ring centre (0.43 of the logo height, 1400x470 art),
   width = channel to logo edge + 4px onto the ring. */
.site-foot { min-height: 50vh; }   /* lets the last section's line finish with its tip at mid-screen */
.foot-cable {
  --foot-pt: 80px; --logo-w: 260px;   /* phones: .foot__brand is min(260px, 100%), 260px on any screen of 292px and up */
  position: absolute; top: 0; z-index: 0; pointer-events: none;
  left: calc(8px - 1.5px);
  width: calc(var(--gutter) - 8px + 1.5px + 4px);
  height: calc(var(--foot-pt) + var(--logo-w) * 470 / 1400 * (0.045 + 0.43));
  border: 0 solid var(--copper); border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 8px;
}
@media (min-width: 64em) {
  .foot-cable {
    --foot-pt: 120px; --logo-w: 300px;
    left: calc(var(--cable-x) - 1.5px);
    width: calc(var(--gutter) + 56px - var(--cable-x) + 1.5px + 4px);
    border-bottom-left-radius: 28px;
  }
}
.foot__lines { margin: 24px 0 0; padding: 0; list-style: none; line-height: 1.75; }
.foot__legal h2 { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; color: var(--copper-deep); -webkit-text-stroke: 0; margin: 28px 0 8px; }
.foot__legal p { color: var(--muted); font-size: 0.95rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; list-style: none; margin: 22px 0 8px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.foot__copy { color: var(--muted); font-size: 0.9rem; }
.foot__el { border: 1px dashed var(--line); padding: 14px 16px; margin-top: 8px; }
.foot__el p:last-child { margin: 0; }
@media (min-width: 64em) {
  .site-foot .col { padding-block: 120px 64px; }
  .foot__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
  .foot__brand { width: 300px; }
  .foot__legal h2:first-child { margin-top: 0; }
}

/* ---------- dialog ---------- */
dialog.problem {
  width: min(92vw, 600px); max-height: 92svh; overflow: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  padding: 0; margin: auto; box-shadow: var(--shadow);
}
dialog.problem::backdrop { background: var(--backdrop); }
.problem__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.problem__head h2 { font-size: 1.05rem; }
.problem__close { min-width: 44px; min-height: 44px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1rem; }
.problem__close:hover { border-color: var(--copper); }
.problem form, .problem__done { padding: 18px 20px 24px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; }
.field small { color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--copper-deep); outline-offset: 1px; border-color: var(--copper); }
.field .err { display: none; color: var(--copper-deep); font-size: 0.92rem; margin: 0; }
.field .err::before { content: "\26A0  "; }
.field.is-bad .err { display: block; }
.field.is-bad input, .field.is-bad textarea { border-color: var(--copper-deep); border-width: 2px; }
/* privacy acknowledgement: checkbox left, sentence right, error under both */
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; row-gap: 6px; }
.field--check input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0;
  accent-color: var(--copper-deep); cursor: pointer;
}
.field--check label { font-weight: 400; cursor: pointer; }
.field--check label a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.field--check .err { grid-column: 1 / -1; }
.field--check.is-bad input[type="checkbox"] { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.problem__done { display: none; }
.problem__done p { font-size: 1.05rem; margin: 0 0 1em; }
.problem.is-done form { display: none; }
.problem.is-done .problem__done { display: block; }

/* ---------- motion, all of it, only where supported and wanted ---------- */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes plug { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes foot-draw { 0% { clip-path: inset(0 calc(100% - 4px) 100% 0); } 75% { clip-path: inset(0 calc(100% - 4px) 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulse { from { opacity: 0.45; } to { opacity: 0.9; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: scroll()) {
    /* The cable draws at scroll speed. Each section owns one segment; its view timeline is
       pinched to the viewport centre line (inset 50% 50%), so the tip of the line is always
       at mid-screen and the next segment starts exactly when the previous one ends. */
    .cable, .halosvg {
      stroke-dasharray: 1 2; stroke-dashoffset: 1;
      animation: draw linear both;
      animation-timeline: view(50% 50%);
      animation-range: cover 0% cover 100%;
    }
    .socket { view-timeline: --dev block; view-timeline-inset: 50% 50%; }
    /* the footer's line draws while the footer scrolls in and is complete exactly at the bottom of the page */
    .site-foot { view-timeline: --foot block; }
    .foot-cable { animation: foot-draw linear both; animation-timeline: --foot; animation-range: entry 0% entry 100%; }
    .socket::before { animation: plug linear both; animation-timeline: --dev; animation-range: cover 0% cover 18%; }
  }
  /* time-based glow pulse: dark theme only (halo is hidden in light), pointer devices only */
  @media (hover: hover) { .halo { animation: pulse 3.6s ease-in-out infinite alternate; } }
}

/* desktop only: the two doors stack under each other as you scroll; each covered card keeps its
   label plate (60px) visible, and a card with keyboard focus rises to the top of the stack */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  /* the last card can only stick while its container's CONTENT box still extends below it; padding does not
     count, so the room is a real grid item: an empty ::after spacer of 55svh */
  .doors__stack::after { content: ""; display: block; height: 55svh; }
  .device { position: sticky; top: calc(var(--header-h) + 24px + (var(--i) - 1) * 60px); }
  .device:has(:focus-visible), .device:target { z-index: 5; }
  @supports (animation-timeline: scroll()) {
    .step, .scn__item, .way { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}

/* ---------- /process-optimisation/ page rules (prefix .po-) ---------- */
/* hero: eyebrow, display heading, intent, both buttons on the first screen of a 390 px phone */
.po-hero .col { padding-block: 24px 44px; }
.po-hero__topic { max-width: 64ch; letter-spacing: 0.1em; margin-bottom: 1rem; }
.po-hero__title { font-size: clamp(1.45rem, 0.95rem + 2.4vw, 3.4rem); line-height: 1.1; max-width: 30ch; }
.po-hero__intent { font-size: clamp(1rem, 0.96rem + 0.4vw, 1.25rem); max-width: 58ch; margin: 0.9em 0 1.2em; }
.po-hero__cta { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
@media (min-width: 30em) { .po-hero__cta { flex-direction: row; flex-wrap: wrap; max-width: none; } }
@media (min-width: 64em) { .po-hero .col { padding-block: 56px 80px; } .po-hero__topic { margin-bottom: 1.5rem; letter-spacing: 0.14em; } }

/* the offer: one lead sentence, three paragraphs, on the belief box grammar */
.po-offer { background: var(--paper-2); }
.po-offer .col { padding-block: 72px; }
.po-offer__box { padding-left: clamp(16px, 2vw, 28px); border-left: 3px solid var(--copper); }
.po-offer__lead { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); line-height: 1.4; max-width: 34ch; margin: 0 0 1em; }
.po-offer__body p { max-width: 60ch; }
.po-offer__body p:last-child { margin: 0; }
@media (min-width: 64em) {
  .po-offer .col { padding-block: 112px; }
  .po-offer__box { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
  .po-offer__lead { margin: 0; }
}

/* four scenarios: bands on a ruled sheet, label and story swap sides in turn, the island one is boxed */
.po-scn .col { padding-block: 72px; }
.po-scn__lead { font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem); max-width: 58ch; margin: 0 0 1.6em; color: var(--muted, var(--ink)); }
.po-cases { display: grid; border-top: 1px solid var(--line); }
.po-case { display: grid; gap: 12px; padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
.po-case__num { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--font-display); color: var(--copper-deep); font-size: 0.95rem; letter-spacing: 0.06em; }
.po-case h3 { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); max-width: 14ch; }
.po-case__story { margin: 0; max-width: 62ch; }
.po-case__saved { margin: 6px 0 0; padding-left: 16px; border-left: 3px solid var(--copper); color: var(--copper-deep); font-size: 1.05rem; line-height: 1.45; max-width: 54ch; }
.po-case__saved strong { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; }
.po-case__island { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-deep); -webkit-text-stroke: 0; }
.po-case__isle { flex: 0 0 auto; fill: var(--copper); }
.po-case--here { margin-top: 24px; padding: 26px 22px 30px; background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; }
@media (min-width: 48em) {
  .po-case {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    grid-template-areas: "num num" "label story" "label saved";
    column-gap: 32px; row-gap: 14px; padding: 30px 0 36px;
  }
  .po-case__num { grid-area: num; }
  .po-case h3 { grid-area: label; }
  .po-case__story { grid-area: story; }
  .po-case__saved { grid-area: saved; }
  .po-case--flip { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); grid-template-areas: "num num" "story label" "saved label"; }
  .po-case--flip h3 { justify-self: end; text-align: right; }
  .po-case--here { padding: 30px 28px 36px; }
}
@media (min-width: 64em) { .po-scn .col { padding-block: 112px; } .po-case { column-gap: 48px; } }

/* objections: one details per question, the first open, a copper plus that turns into a cross */
.po-ask { background: var(--paper-2); }
.po-ask .col { padding-block: 72px; }
.po-qs { border-top: 1px solid var(--line); max-width: 76ch; }
.po-q { border-bottom: 1px solid var(--line); }
.po-q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px; padding: 18px 0; min-height: 48px; }
.po-q summary::-webkit-details-marker { display: none; }
.po-q summary h3 { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.4rem); }
.po-q summary::after { content: "+"; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--copper-deep); -webkit-text-stroke: var(--display-stroke) currentColor; paint-order: stroke fill; margin-top: 1px; }
.po-q[open] summary::after { transform: rotate(45deg); }
.po-q summary:hover h3 { color: var(--copper-deep); }
.po-q summary:focus-visible { outline-offset: -3px; }
.po-q__a { padding: 0 0 22px; max-width: 64ch; }
.po-q__a p { margin: 0; }
@media (min-width: 64em) { .po-ask .col { padding-block: 112px; } .po-q summary { padding: 22px 0; } }

/* the close: one box on the door-01 grammar, both buttons */
.po-close .col { padding-block: 72px; }
.po-close__box { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--copper); border-radius: 4px; box-shadow: var(--shadow); padding: 26px 22px 28px; max-width: 760px; }
.po-close__text { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); max-width: 52ch; margin-bottom: 1.4em; }
.po-close__cta { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
@media (min-width: 30em) { .po-close__cta { flex-direction: row; flex-wrap: wrap; max-width: none; } }
@media (min-width: 64em) { .po-close .col { padding-block: 112px; } .po-close__box { padding: 34px 32px 36px; } }

/* motion on this page: the plus turns, the bands rise on desktop, only where wanted */
@media (prefers-reduced-motion: no-preference) {
  .po-q summary::after { transition: transform 0.2s ease; }
  @media (min-width: 64em) {
    @supports (animation-timeline: scroll()) {
      .po-case, .po-q { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    }
  }
}

/* ======================================================================
   /freelance/ (fl-): the profile sheet, the bench, the IT-firms block.
   Base layout is one plain scroll everywhere. The pinned horizontal bench
   exists only at desktop width with a fine pointer, motion allowed, JS on,
   and not switched off with "Stack the bench" (html[data-motion="off"]).
   ====================================================================== */

/* ---------- first screen: plain, no motion, everything above the fold at 390px ---------- */
.fl-top .col { padding-block: 16px 56px; }
.fl-top .eyebrow { margin-bottom: 0.5rem; }
.fl-h1 { font-size: clamp(1.3rem, 0.6rem + 3vw, 2.6rem); max-width: 22ch; margin: 0 0 0.35em; }
.fl-lead { font-size: clamp(0.92rem, 0.85rem + 0.35vw, 1.2rem); max-width: 52ch; margin: 0 0 12px; }
.fl-grid { display: grid; gap: 12px; }
.fl-sheet { margin: 0; background: var(--surface); border: 1px solid var(--line); padding: 2px 14px; font-size: 0.85rem; line-height: 1.35; }
.fl-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2px 10px; padding: 5px 0; border-top: 1px solid var(--line); }
.fl-row:first-child { border-top: 0; }
.fl-row--wide { grid-template-columns: minmax(0, 1fr); }
.fl-row dt { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; padding-top: 0.2em; }
.fl-row dd { margin: 0; }
.fl-row--cv { align-items: center; }
.fl-row--cv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.fl-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-cta .btn { flex: 1 1 auto; }
.fl-answer { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }
.fl-fine { color: var(--muted); font-size: 0.85rem; }
.fl-fine p { margin: 0 0 0.5em; }
.fl-fine p:last-child { margin: 0; }
@media (min-width: 30em) { .fl-cta .btn { flex: 0 0 auto; } }
@media (min-width: 48em) {
  .fl-top .col { padding-block: 48px 72px; }
  .fl-grid { gap: 20px; }
  .fl-sheet { font-size: 0.95rem; padding: 6px 20px; }
  .fl-row { padding: 9px 0; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 16px; }
  .fl-row dt { font-size: 0.76rem; }
  .fl-cta { gap: 12px; }
  .fl-answer, .fl-fine { font-size: 0.9rem; }
}
@media (min-width: 64em) {
  .fl-top .col { padding-block: 64px 96px; }
  .fl-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "head sheet" "act sheet" "fine sheet"; gap: 20px 56px; align-items: start; }
  .fl-head { grid-area: head; }
  .fl-sheet { grid-area: sheet; }
  .fl-act { grid-area: act; }
  .fl-fine { grid-area: fine; max-width: 52ch; }
}

/* ---------- bench intro and the toggle ---------- */
.fl-walk .col { padding-block: 40px 20px; }
.fl-walk__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.fl-walk__intro { color: var(--muted); max-width: 52ch; margin: 0; }
.fl-toggle { display: none; }
@media (min-width: 64em) { .fl-walk .col { padding-block: 64px 24px; } }

/* ---------- bench, base layout: eight stations stacked on the site's rail ---------- */
.fl-bench .col { padding-block: 24px 72px; }
.fl-skip:focus { top: calc(var(--header-h) + 12px); }
.fl-rail { display: grid; gap: 40px; }
.fl-station { padding-left: clamp(16px, 2vw, 28px); border-left: 3px solid var(--line); }
.fl-num, .fl-years, .fl-cue { -webkit-text-stroke: var(--display-stroke) currentColor; paint-order: stroke fill; }
.fl-num { font-family: var(--font-display); color: var(--copper-deep); letter-spacing: 0.06em; font-size: 0.95rem; margin: 0 0 4px; }
.fl-title { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
.fl-years { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; color: var(--muted); margin: 6px 0 14px; }
.fl-card { background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; max-width: 46rem; }
.fl-where { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.9em; }
.fl-story { margin-bottom: 0.9em; }
.fl-took { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.fl-took strong { display: block; color: var(--copper-deep); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; margin-bottom: 4px; }
.fl-card .fl-cta { margin-top: 18px; }
.fl-cable, .fl-corner, .fl-drop, .fl-cue { display: none; }
@media (min-width: 48em) { .fl-rail { gap: 48px; } .fl-card { padding: 24px 26px; } }
@media (min-width: 64em) { .fl-bench .col { padding-block: 32px 112px; } .fl-rail { gap: 56px; } }

/* ---------- bench, pinned horizontal layout (desktop, fine pointer, motion allowed, JS on) ---------- */
@media (min-width: 64em) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root {
    --fl-sw: min(72vw, 56rem);                 /* stations 1 to 7; station 8 is one viewport wide */
    --fl-travel: calc(7 * var(--fl-sw));       /* the rail moves by seven stations */
    --fl-rail-w: calc(var(--fl-travel) + 100vw);
    --fl-walk: 0.8;                            /* vertical scroll px per horizontal rail px */
    --fl-cy: 0.36;                             /* the cable's height as a fraction of the stage */
    --fl-lead: 28px;                           /* from the cable down to a station card */
    --fl-pad: clamp(2rem, 5vw, 5rem);
    --fl-chan: calc((100vw - var(--sbw, 0px) - min(100vw - var(--sbw, 0px), var(--col))) / 2 + var(--cable-x));  /* the site's cable channel, in viewport x, scrollbar excluded */
  }
  .fl-toggle { display: inline-flex; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-bench { height: calc(100svh + var(--fl-travel) * var(--fl-walk)); view-timeline: --fl-bench block; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-stage { position: sticky; top: 0; width: 100%; height: 100svh; margin: 0; padding: var(--header-h) 0 0; overflow: clip; background: var(--paper); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-stage > .cable, :root:not([data-motion="off"]):not(.fl-nojs) .fl-stage > .halo { display: none; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-stage::before { content: ""; position: absolute; left: calc(var(--fl-chan) - 1.5px); top: 0; width: 3px; height: var(--header-h); background: var(--copper); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-rail { display: flex; gap: 0; width: var(--fl-rail-w); height: 100%; will-change: transform; background: linear-gradient(to bottom, var(--paper) 0 calc(var(--fl-cy) * 100%), var(--paper-2) calc(var(--fl-cy) * 100%) 100%); }
  /* the cable: in at the channel, across the rail, out at the channel again */
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-cable { display: block; position: absolute; top: calc(var(--fl-cy) * 100% - 7px); height: 14px; overflow: visible; pointer-events: none; }
  /* 14px tall with the line on y=7, not 0px tall: an outer <svg> of zero height is not rendered at all in Chrome and Edge,
     so the walk's horizontal cable never showed there (found 2026-09-25). The centre stays exactly on --fl-cy. */
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-cable--static { left: calc(var(--fl-chan) + 38.5px); width: calc(100vw - var(--fl-chan) - 38.5px); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-cable--draw { left: 100vw; width: calc(var(--fl-travel) + var(--fl-chan) - 38.5px - 100vw); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-cable__halo { stroke: var(--copper); stroke-width: 12; filter: blur(6px); opacity: 0.55; visibility: var(--halo-vis); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-cable__base { stroke: var(--copper); stroke-width: 3; stroke-linecap: round; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-cable__hi { stroke: var(--copper-hi); stroke-width: 1.2; opacity: 0.9; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-corner, :root:not([data-motion="off"]):not(.fl-nojs) .fl-drop { display: block; position: absolute; border: 0 solid var(--copper); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-corner--in { left: calc(var(--fl-chan) - 1.5px); top: 0; width: 40px; height: calc(var(--fl-cy) * 100% + 1.5px); border-left-width: 3px; border-bottom-width: 3px; border-bottom-left-radius: 40px; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-corner--out { left: calc(var(--fl-travel) + var(--fl-chan) - 38.5px); top: calc(var(--fl-cy) * 100% - 1.5px); width: 40px; height: 40px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 40px; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-drop { left: calc(var(--fl-travel) + var(--fl-chan) - 1.5px); top: calc(var(--fl-cy) * 100% + 38.5px); bottom: 0; width: 3px; background: var(--copper); }
  /* stations: the sign above the cable, the card plugged in below it */
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-station { position: relative; flex: 0 0 var(--fl-sw); height: 100%; padding: 0; border: 0; --fl-left: var(--fl-pad); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-station--1, :root:not([data-motion="off"]):not(.fl-nojs) .fl-station--8 { --fl-left: max(var(--fl-pad), calc(var(--fl-chan) + 3.5rem)); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-station--8 { flex-basis: 100vw; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-station.socket::before, :root:not([data-motion="off"]):not(.fl-nojs) .fl-station.socket::after { display: none; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-sign { position: absolute; left: var(--fl-left); bottom: calc((1 - var(--fl-cy)) * 100% + 1.25rem); width: calc(100% - var(--fl-left) - var(--fl-pad)); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-title { font-size: clamp(1.8rem, 1rem + 2vw, 3rem); max-width: 18ch; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-years { margin: 8px 0 0; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-card { position: absolute; left: var(--fl-left); top: calc(var(--fl-cy) * 100% + var(--fl-lead)); width: min(40rem, calc(100% - var(--fl-left) - var(--fl-pad))); max-width: none; padding: 22px 26px; box-shadow: var(--shadow); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-card::before { content: ""; position: absolute; left: 2rem; top: calc(-1 * var(--fl-lead)); width: 3px; height: var(--fl-lead); background: var(--copper); }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-card::after { content: ""; position: absolute; left: calc(2rem - 6px); top: calc(-1 * var(--fl-lead) - 7.5px); width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--copper); background: var(--surface); }
  /* station 8 has no pin: the cable turns down at the channel just before it and runs past the card into the next
     section, so a pin there hung from nothing once the cable became visible (2026-09-25) */
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-station--8 .fl-card::before, :root:not([data-motion="off"]):not(.fl-nojs) .fl-station--8 .fl-card::after { display: none; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-cue { display: block; position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; color: var(--copper-deep); pointer-events: none; }
  /* the walk itself: the rail and the drawing cable follow the bench's view timeline (contain = the pinned stretch) */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="off"]):not(.fl-nojs) .fl-rail { animation: fl-walk linear both; animation-timeline: --fl-bench; animation-range: contain 0% contain 100%; }
    :root:not([data-motion="off"]):not(.fl-nojs) .fl-draw { animation: fl-cable-draw linear both; animation-timeline: --fl-bench; animation-range: contain 0% contain 100%; }
  }
}
/* short desktop viewports: tighter type on the stage */
@media (min-width: 64em) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (max-height: 720px) {
  :root { --fl-cy: 0.34; --fl-lead: 22px; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-title { font-size: 1.6rem; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-card { padding: 14px 20px; font-size: 0.95rem; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-where { margin-bottom: 0.6em; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-story { margin-bottom: 0.6em; }
  :root:not([data-motion="off"]):not(.fl-nojs) .fl-card .fl-cta { margin-top: 12px; }
}
@keyframes fl-walk { to { transform: translateX(calc(-1 * var(--fl-travel))); } }
@keyframes fl-cable-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- for IT firms ---------- */
.fl-firms { background: var(--paper-2); }
.fl-firms .col { padding-block: 72px; }
.fl-h2 { font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); max-width: 24ch; margin-bottom: 0.6em; }
/* the connector plugs into the small label above the title, not into the first letter of it */
.fl-firms .eyebrow:first-child { margin: 0 0 0.6rem; padding-left: 22px; }
.fl-firms .socket::before { top: 8px; }
.fl-firms .socket::after { top: 2px; }
.fl-firms .fl-lead { margin-bottom: 0.8em; max-width: 60ch; }
.fl-firms__text { max-width: 60ch; }
.fl-firms__eyebrow { margin-top: 28px; }
.fl-ways { display: grid; gap: 20px; margin-bottom: 28px; }
.fl-way { background: var(--surface); border: 1px solid var(--line); padding: 24px 22px 26px; }
.fl-way h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.12; font-size: 1.15rem; margin: 0 0 12px; -webkit-text-stroke: var(--display-stroke) currentColor; paint-order: stroke fill; }
.fl-way p { margin: 0; }
.fl-firms__more { max-width: 60ch; }
.fl-firms__more h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.fl-firms__more p:last-child { margin-bottom: 0; }
.fl-firms .fl-cta { margin-top: 28px; }
@media (min-width: 48em) { .fl-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 64em) { .fl-firms .col { padding-block: 112px; } .fl-way { padding: 30px 28px 32px; } }