/* Backhaul Consulting Inc. - site styles, direction C2 (Control Room, product screens as media).
   Neutral ground with the brand navy and purple as accents only: no full-width brand-colour bands.
   Interface fragments ([data-ui]) keep their own product conventions (radius, borders, small type). */

@font-face { font-family: "Manrope"; src: url("/assets/manrope-400.849290ef12.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/manrope-600.f7ac6258da.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/manrope-700.d2a12c85a8.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/manrope-800.74c161dbcb.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-400.08949f728d.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-500.01d2854474.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light dark;
  --ground: #f2f3f5; --field: #e8eaee; --paper: #ffffff; --ink: #0f1218; --ink2: #2c323d; --soft: #5b6270;
  --navy: #26305f; --navyInk: #eef1fb; --accent: #5a2d91; --ok: #1c7a4c; --warn: #8f5300;
  --line: rgba(14, 17, 22, .12);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0d0f13; --field: #15181e; --paper: #1b1f27; --ink: #f1f2f5; --ink2: #d3d7df; --soft: #a2a8b5;
    --navy: #eef1fb; --navyInk: #0d0f13; --accent: #c4a8ea; --ok: #5fd39b; --warn: #f0b35a;
    --line: rgba(255, 255, 255, .12);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: Manrope, system-ui, sans-serif; background: var(--ground); color: var(--ink); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
img, video, svg { max-width: 100%; }
main { flex: 1 0 auto; }
.nw { white-space: nowrap; }
.h1, .h2 { text-wrap: balance; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; }
p, ul, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 10; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--paper); white-space: nowrap; }
.skip:focus { top: 12px; }

.wrap { max-width: 1312px; margin: 0 auto; padding: 0 32px; }
.h1 { font-size: clamp(36px, 7.2vw, 104px); line-height: .98; letter-spacing: -.045em; }
.h2 { font-size: clamp(30px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.04em; }
.h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.lead { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.42; max-width: 36ch; color: var(--ink2); }
.small { font-size: 15px; color: var(--soft); }
.body2 { color: var(--ink2); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 24px; background: var(--navy); color: var(--navyInk); font-weight: 700; font-size: 16px; text-decoration: none; transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.btn:hover { background: var(--accent); color: #fff; }
.btn:active { transform: scale(.98); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 32px; }
.text-link { font-weight: 700; text-underline-offset: 4px; }
.text-link:hover { color: var(--accent); }
.text-link.solo { display: inline-flex; align-items: center; min-height: 44px; }

/* Header */
.bar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar .wrap { display: flex; align-items: center; gap: 32px; height: 76px; }
.lockup { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; text-decoration: none; color: var(--ink); }
.lockup svg { width: 32px; height: 32px; flex: none; }
.lockup .mark-branch { stroke: var(--accent); }
.lockup .mark-trunk { stroke: var(--ink); }
.lockup b { font-size: 16px; letter-spacing: .14em; font-weight: 800; }
.nav { display: flex; gap: 30px; margin-left: auto; font-size: 16px; font-weight: 600; }
.nav a { text-decoration: none; color: var(--ink2); transition: color 180ms ease; }
.nav a:hover, .nav a[aria-current] { color: var(--accent); }
.btn-nav { min-height: 44px; padding: 0 18px; font-size: 15px; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--paper); font-weight: 700; font-size: 15px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--navy); color: var(--navyInk); }
.menu:not([open]) nav { display: none; }
.menu nav { position: absolute; right: 0; top: 52px; width: min(280px, calc(100vw - 32px)); background: var(--paper); padding: 8px 0; display: flex; flex-direction: column; }
.menu nav a { padding: 14px 20px; text-decoration: none; font-weight: 700; color: var(--ink); }
.menu nav a[aria-current] { color: var(--accent); }

/* Sections */
.sec { padding: 144px 0; }
.field { background: var(--field); }
.head2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.head2 .lead { max-width: 44ch; }

/* Hero */
.hero { padding: 72px 0 0; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: end; margin-bottom: 48px; }
.hero-top .side { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.hero-page { padding: 88px 0 72px; }
.hero-page .lead { margin-top: 28px; max-width: 46ch; }
.hero-page .lead + .lead { margin-top: 16px; }
.film { position: relative; background: #26305f; overflow: hidden; }
/* The still sits under the video, so a frame shows before the video can draw one (or where it cannot play). */
.film-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film video { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.film-note { font-size: 15px; color: var(--soft); margin-top: 12px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 56px; }
.facts div { padding-right: 24px; }
.facts b { display: block; font-size: 22px; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.facts span { font-size: 15px; color: var(--soft); }

/* Who it is for */
.who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.who > div { background: var(--paper); padding: 40px; display: flex; flex-direction: column; gap: 12px; }
.who p { color: var(--ink2); }

/* Walkthrough (radio tabs, no script) */
.walk input { position: absolute; opacity: 0; pointer-events: none; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tabs label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--paper); font-weight: 700; font-size: 16px; cursor: pointer; color: var(--ink2); transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.tabs label:hover { color: var(--accent); }
.tabs label:active { transform: scale(.98); }
#st1:checked ~ .tabs [for=st1], #st2:checked ~ .tabs [for=st2], #st3:checked ~ .tabs [for=st3], #st4:checked ~ .tabs [for=st4], #st5:checked ~ .tabs [for=st5] { background: var(--navy); color: var(--navyInk); }
#st1:focus-visible ~ .tabs [for=st1], #st2:focus-visible ~ .tabs [for=st2], #st3:focus-visible ~ .tabs [for=st3], #st4:focus-visible ~ .tabs [for=st4], #st5:focus-visible ~ .tabs [for=st5] { outline: 3px solid var(--accent); outline-offset: 2px; }
.stage { display: none; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; }
#st1:checked ~ .stages .s1, #st2:checked ~ .stages .s2, #st3:checked ~ .stages .s3, #st4:checked ~ .stages .s4, #st5:checked ~ .stages .s5 { display: grid; animation: stagein 420ms var(--ease-out) both; }
@keyframes stagein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stage .say { display: flex; flex-direction: column; gap: 14px; }
.stage .say p { color: var(--ink2); }

/* Card rows: a grid on wide screens, a horizontal snap row on phones */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards > div { display: flex; flex-direction: column; gap: 10px; }
.cards p { color: var(--ink2); }
.steps-row { counter-reset: step; }
.steps-row > div { padding-top: 26px; position: relative; }
.steps-row > div::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--accent); }

/* Case study */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.big-num { font-size: clamp(76px, 11vw, 168px); font-weight: 800; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.case .lead { margin-top: 24px; }
.list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.list li { padding-left: 22px; position: relative; color: var(--ink2); }
.list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--accent); }
.prose-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 64px; }
.prose-cols h3 { margin: 32px 0 14px; }
.prose-cols h3:first-child { margin-top: 0; }
.prose-cols p { color: var(--ink2); }

/* Infrastructure */
.infra { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.infra .col { display: flex; flex-direction: column; gap: 24px; }
.diagram { background: var(--paper); padding: 24px; }
.svc { margin-top: 72px; }
.note { font-size: 15px; color: var(--soft); margin-top: 8px; }

/* Close and footer */
.close { padding: 144px 0 104px; }
.close .h1 { max-width: 14ch; }
.close .lead { margin-top: 28px; }
.mail { display: inline-flex; align-items: center; min-height: 44px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.mail:hover { color: var(--accent); }
.booking { margin-top: 32px; }
.foot { padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot .row1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 16px; font-weight: 600; }
.foot .links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--ink2); }
.foot .links a:hover { color: var(--accent); }
.foot .meta { font-size: 15px; color: var(--soft); margin-top: 28px; }

/* Text pages (privacy, 404) */
.prose { padding: 88px 0 112px; }
.prose .wrap > * { max-width: 68ch; }
.prose h2 { font-size: 26px; letter-spacing: -.02em; margin: 44px 0 12px; }
.prose p { color: var(--ink2); margin-top: 14px; }
.prose a { text-underline-offset: 3px; }

/* Interface fragments: the product's own conventions */
[data-ui] { background: #ffffff; color: #14171d; border: 1px solid rgba(14, 17, 22, .14); border-radius: 10px; overflow: hidden; font-size: 14px; line-height: 1.5; text-align: left; }
[data-ui] .top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(14, 17, 22, .08); background: #f7f8fa; font-size: 13px; }
[data-ui] .top b { font-weight: 700; }
[data-ui] .crumb, [data-ui] .tag, [data-ui] .note-ui, [data-ui] .hit span, [data-ui] .sum span, [data-ui] .tbl th, [data-ui] .meta span:nth-child(odd) { color: #5f6675; }
[data-ui] .tag { margin-left: auto; font-size: 12px; }
[data-ui] .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
[data-ui] .tbl th { font-weight: 600; font-size: 12px; text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(14, 17, 22, .08); }
[data-ui] .tbl td { padding: 11px 12px; border-bottom: 1px solid rgba(14, 17, 22, .07); white-space: nowrap; }
[data-ui] .tbl tr:last-child td { border-bottom: 0; }
[data-ui] .num { font-variant-numeric: tabular-nums; }
[data-ui] .sel td { background: rgba(90, 45, 145, .06); }
[data-ui] .pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
[data-ui] .ok { background: rgba(28, 122, 76, .1); color: #1a6f45; }
[data-ui] .wait { background: rgba(90, 45, 145, .09); color: #5a2d91; }
[data-ui] .warn { background: rgba(143, 83, 0, .11); color: #7f4a00; }
[data-ui] .thumb { display: inline-block; width: 18px; height: 23px; border: 1px solid rgba(14, 17, 22, .25); border-radius: 2px; background: #fff; vertical-align: -6px; margin-right: 8px; position: relative; }
[data-ui] .thumb::before, [data-ui] .thumb::after { content: ""; position: absolute; left: 3px; right: 3px; height: 2px; background: #b9bec8; }
[data-ui] .thumb::before { top: 5px; }
[data-ui] .thumb::after { top: 9px; right: 6px; }
[data-ui] .pad { padding: 14px; }
[data-ui] .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(14, 17, 22, .08); }
[data-ui] .note-ui { font-size: 12.5px; }
[data-ui] .b1 { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px; background: #26305f; color: #fff; font-size: 13px; font-weight: 600; }
[data-ui] .b2 { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(14, 17, 22, .18); font-size: 13px; font-weight: 600; }
[data-ui] .pages { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 14px; }
[data-ui] .pages span { aspect-ratio: 3 / 4; border: 1px solid rgba(14, 17, 22, .2); border-radius: 3px; background: #fff; position: relative; }
[data-ui] .pages span::before { content: ""; position: absolute; left: 18%; right: 18%; top: 16%; height: 2px; background: #b9bec8; box-shadow: 0 6px 0 #d3d7de, 0 12px 0 #d3d7de; }
[data-ui] .pages span.cut { border-left: 3px solid #5a2d91; }
[data-ui] .search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(14, 17, 22, .18); border-radius: 7px; font-size: 14px; }
[data-ui] .split { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; margin-top: 12px; }
[data-ui] .hit { padding: 9px 11px; border-radius: 7px; border: 1px solid rgba(14, 17, 22, .1); margin-bottom: 8px; }
[data-ui] .hit.on { border-color: #5a2d91; background: rgba(90, 45, 145, .05); }
[data-ui] .hit b { display: block; font-size: 13.5px; }
[data-ui] .hit span { font-size: 12.5px; }
[data-ui] .doc { background: #fbfbf9; color: #22262e; border: 1px solid rgba(14, 17, 22, .15); border-radius: 4px; padding: 12px; font-size: 10.5px; line-height: 1.5; }
[data-ui] .doc .dh { display: flex; justify-content: space-between; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid #dcdfe4; }
[data-ui] .doc b { font-size: 11.5px; letter-spacing: .08em; }
[data-ui] .doc table { width: 100%; border-collapse: collapse; }
[data-ui] .doc td { padding: 2px 0; }
[data-ui] .doc td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
[data-ui] .doc .tot td { font-weight: 700; padding-top: 6px; border-top: 1px solid #dcdfe4; }
[data-ui] .doc mark { background: rgba(90, 45, 145, .18); color: inherit; padding: 0 2px; }
[data-ui] .meta { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; padding: 14px; border-bottom: 1px solid rgba(14, 17, 22, .08); font-size: 13.5px; }
[data-ui] .banner { padding: 9px 14px; background: rgba(90, 45, 145, .08); color: #5a2d91; font-size: 13px; font-weight: 600; }
[data-ui] .att { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
[data-ui] .att > span { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid rgba(14, 17, 22, .14); border-radius: 6px; font-size: 12.5px; }
[data-ui] .log { list-style: none; margin: 0; padding: 6px 14px 14px; }
[data-ui] .log li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(14, 17, 22, .07); font-size: 13.5px; }
[data-ui] .log li:last-child { border-bottom: 0; }
[data-ui] .sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid rgba(14, 17, 22, .08); }
[data-ui] .sum div { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; }
[data-ui] .sum b { display: block; font-size: 22px; letter-spacing: -.02em; }
[data-ui] .sum span { font-size: 12px; }
[data-ui] .fix { list-style: none; margin: 0; padding: 4px 14px 14px; font-size: 13.5px; }
[data-ui] .fix li { padding: 9px 0; border-bottom: 1px solid rgba(14, 17, 22, .07); }
[data-ui] .fix li:last-child { border-bottom: 0; }
[data-ui] .box { display: inline-block; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid rgba(14, 17, 22, .3); vertical-align: -3px; margin-right: 10px; }
[data-ui] .box.done { background: #1c7a4c; border-color: #1c7a4c; }
[data-ui] .box.now { background: #5a2d91; border-color: #5a2d91; }
[data-ui] .fix li:has(> .box) { display: flex; align-items: flex-start; }
[data-ui] .fix li > .box { flex: none; margin-top: 2px; }
[data-ui] .msg { display: flex; gap: 12px; padding: 14px; }
[data-ui] .msg .av { width: 34px; height: 34px; border-radius: 8px; background: #26305f; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
@media (prefers-color-scheme: dark) {
  [data-ui] { background: #1b1f27; color: #eef0f4; border-color: rgba(255, 255, 255, .14); }
  [data-ui] .top { background: #161920; border-color: rgba(255, 255, 255, .08); }
  [data-ui] .crumb, [data-ui] .tag, [data-ui] .note-ui, [data-ui] .hit span, [data-ui] .sum span, [data-ui] .tbl th, [data-ui] .meta span:nth-child(odd) { color: #a7adba; }
  [data-ui] .tbl th, [data-ui] .tbl td, [data-ui] .row, [data-ui] .meta, [data-ui] .log li, [data-ui] .sum, [data-ui] .fix li { border-color: rgba(255, 255, 255, .08); }
  [data-ui] .sel td { background: rgba(196, 168, 234, .1); }
  [data-ui] .ok { background: rgba(95, 211, 155, .12); color: #5fd39b; }
  [data-ui] .wait { background: rgba(196, 168, 234, .14); color: #c4a8ea; }
  [data-ui] .warn { background: rgba(240, 179, 90, .12); color: #f0b35a; }
  [data-ui] .b1 { background: #eef0f4; color: #14171d; }
  [data-ui] .b2, [data-ui] .search, [data-ui] .att > span, [data-ui] .hit { border-color: rgba(255, 255, 255, .18); }
  [data-ui] .banner { background: rgba(196, 168, 234, .12); color: #c4a8ea; }
  [data-ui] .box { border-color: rgba(255, 255, 255, .35); }
  [data-ui] .msg .av { background: #c4a8ea; color: #14171d; }
}
pre.term { margin: 0; background: #0d0f14; color: #d6dae3; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13.5px; line-height: 1.8; padding: 22px 24px; overflow-x: auto; }
pre.term code { font: inherit; }
pre.term .c { color: #8a92a6; }
pre.term .g { color: #5fd39b; }
pre.term .y { color: #e6c07b; }

/* Diagrams: one line style (1.5 px), drawn in code */
.dg { display: block; width: 100%; height: auto; }
.dg .card { fill: var(--field); }
.dg .s { stroke: var(--ink2); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg .acc { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.dg .okl { stroke: var(--ok); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg .okf { fill: var(--ok); }
.dg-lab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; text-align: center; font-size: 14px; line-height: 1.3; color: var(--soft); }
.dg-res { text-align: center; font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.dg .flow { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-dasharray: 4 6; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }

/* Section text has no scroll entrance: a heading still moving or fading covers the content under it. */
@media (prefers-reduced-motion: reduce) {
  .dg .flow, .stage { animation: none !important; }
}

@media (max-width: 960px) {
  .hero-top, .head2, .case, .infra, .prose-cols { grid-template-columns: minmax(0, 1fr); }
  .head2 { gap: 20px; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .nav, .bar .btn-nav { display: none; }
  .menu { display: block; }
  .bar .wrap { height: 64px; }
  .hero { padding: 28px 0 0; }
  .hero-top { gap: 20px; margin-bottom: 24px; }
  .hero-page { padding: 44px 0 40px; }
  .h1 { font-size: 38px; }
  .h2 { font-size: 30px; }
  .sec { padding: 64px 0; }
  .head2 { margin-bottom: 28px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; margin-top: 28px; }
  .who { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .who > div { padding: 22px; }
  .tabs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 20px; padding: 0 16px; scrollbar-width: none; }
  .tabs label { min-height: 44px; padding: 0 14px; font-size: 15px; flex: none; scroll-snap-align: start; }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .stage .say p { display: none; }
  /* Card rows become one swipeable row: same content, a fraction of the height */
  .cards, .cards.c2 { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; align-items: start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .cards > div { background: var(--paper); padding: 22px; scroll-snap-align: start; }
  .field .cards > div { background: var(--ground); }
  .steps-row > div { padding-top: 22px; }
  .steps-row > div::before { left: 22px; top: 0; }
  .case { gap: 24px; }
  .prose-cols { gap: 32px; margin-top: 40px; }
  .svc { margin-top: 32px; }
  .desk { display: none !important; }
  .close { padding: 64px 0 56px; }
  .close .h1 { font-size: 36px; }
  .mail { font-size: 19px; }
  [data-ui] .split { grid-template-columns: minmax(0, 1fr); }
  [data-ui] .split .doc { display: none; }
  [data-ui] .pages { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 10px; }
  [data-ui] .tbl .hide { display: none; }
  [data-ui] .top .crumb { display: none; }
  [data-ui] .tbl td, [data-ui] .tbl th { padding: 9px 8px; }
  pre.term { font-size: 12px; padding: 16px; }
  .prose { padding: 44px 0 64px; }
}
@media (min-width: 761px) { .phone { display: none !important; } }

/* Single-column card list on wide screens (case study steps) */
.cards.stack { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .sec { padding: 48px 0; }
  .who.cards > div { background: var(--paper); }
  .close { padding: 48px 0 44px; }
  .close .lead { display: none; }
  .foot { padding-top: 36px; }
  .foot .links { gap: 0 20px; font-size: 15px; }
}

/* Hero: the headline takes the full measure (two lines at 1440), the lead and button sit beside each other below it */
.hero-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.hero-top .h1 { max-width: 15ch; }
.hero-top .side { flex-direction: row; align-items: center; gap: 24px 48px; flex-wrap: wrap; }
.hero-top .side .lead { max-width: 52ch; }
@media (min-width: 961px) { .hero-top .h1 { max-width: none; } }
/* Footer separates by tone, not a rule */
.foot { border-top: 0; background: var(--field); }
@media (max-width: 760px) { .hero-top .side { flex-direction: column; align-items: flex-start; } }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Placed after the column templates so that the phone swipe row wins over them. */
@media (max-width: 760px) { .cards.c3, .cards.c4 { grid-template-columns: none; } }

/* Phone fixes: rows and tabs snap to the page gutter, values stay whole, long rows stack */
@media (max-width: 760px) {
  .tabs, .cards, .cards.c2 { scroll-padding-inline: 16px; }
  .diagram { padding: 16px; }
  .dg-lab { font-size: 13px; }
  pre.term { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
  .cards.stack-phone { display: flex; flex-direction: column; align-items: stretch; gap: 12px; overflow: visible; margin: 0; padding: 0; }
  .cards.stack-phone > div { width: auto; }
  .mt-lg { margin-top: 24px !important; }
  .foot .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .foot .links a:first-child, .foot .links a:last-child { grid-column: 1 / -1; }
  .sec:not(.field):has(+ .desk + .close) { padding-bottom: 0; }
}
.mt-lg { margin-top: 72px; }
/* A diagram under two side-by-side panels spans both and keeps a readable width. */
.infra > .diagram.wide { grid-column: 1 / -1; }
.diagram.wide .dgf { max-width: 640px; margin: 0 auto; }

/* Sweep 4: text never cut or stranded */
/* A terminal line must never end at the block edge: wrap at every width, keep paths whole. */
pre.term { white-space: pre-wrap; overflow-wrap: break-word; }
pre.term .y { white-space: nowrap; }
/* Card headings and small text avoid a single word on the last line. */
.h3 { text-wrap: balance; }
.cards p, .facts span, [data-ui] .fix li { text-wrap: pretty; }
/* A value in the facts row stays on one line. */
.facts b { white-space: nowrap; }
@media (max-width: 760px) { .facts div { padding-right: 0; } }
@media (max-width: 380px) { .facts b { font-size: 19px; } }
/* Status rows led by a pill get the same hanging indent as checklist rows. */
[data-ui] .fix li:has(> .pill) { display: flex; align-items: flex-start; gap: 8px; }
[data-ui] .fix li > .pill { flex: none; margin-top: 1px; min-width: 76px; justify-content: center; }
[data-ui] .fix li > .t { min-width: 0; }
/* Three-column card grids step down to two columns on tablets. */
@media (min-width: 761px) and (max-width: 960px) {
  .cards:not(.c2):not(.c4):not(.stack):not(.steps-row):not(:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The diagram panel uses the same card edge as the panels next to it. */
.diagram { border: 1px solid var(--line); border-radius: 10px; }
/* A page that ends on a tinted section keeps a visible edge above the footer. */
body:has(main > .sec.field:last-child) .foot { border-top: 1px solid var(--line); }

/* Sweep 5: one grid, one card edge, nothing stranded */
/* Rows of panels use the same two equal columns as the card rows above them, and panels side by
   side end at the same line. */
@media (min-width: 961px) {
  .infra { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .infra .col > [data-ui]:last-child, .infra .col > .diagram:last-child { flex: 1; }
}
/* Every card, panel and sample block shares one edge. */
.who > div, pre.term { border: 1px solid var(--line); border-radius: 10px; }
pre.term { border-color: rgba(255, 255, 255, .08); }
@media (max-width: 760px) { .cards > div { border: 1px solid var(--line); border-radius: 10px; } }
/* A facts label sits on its own line under its value, with tight spacing, and wraps evenly. */
.facts span { display: block; margin-top: 4px; line-height: 1.35; text-wrap: balance; }
/* Button labels, list items and lead text never leave one word alone on the last line. */
.btn { text-align: center; text-wrap: balance; }
.list li, .lead, .prose p { text-wrap: pretty; }
/* A wrapped terminal line indents under its text, so it does not read as a new log line. */
pre.term .ln { display: block; padding-left: 2ch; text-indent: -2ch; }
/* The 404 page uses the same hero as the other pages. */
.hero-page .after { margin-top: 24px; color: var(--ink2); }
/* A page title keeps clear space above the first paragraph. */
.prose .h1 + p { margin-top: 24px; }
/* On the narrowest phones, a swipe row whose cards differ a lot in height stacks instead. */
@media (max-width: 380px) {
  .cards.stack-narrow { display: flex; flex-direction: column; align-items: stretch; gap: 12px; overflow: visible; margin: 0; padding: 0; }
  .cards.stack-narrow > div { width: auto; }
}
/* Footer links on tablets fill two whole rows of three. */
@media (min-width: 761px) and (max-width: 1023px) {
  .foot .links { display: grid; grid-template-columns: repeat(3, auto); gap: 0 28px; justify-content: start; }
}

/* A section header shares the column split of the row under it, so the intro text starts on the
   same edge as the second card, panel or caption below it. */
@media (min-width: 961px) {
  .head2:has(+ .who) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .head2:has(+ .who.cards) { column-gap: 40px; }
  .head2:has(+ .infra) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .head2:has(+ .cards:not(.c2):not(.c4):not(.stack)) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .head2:has(+ .cards:not(.c2):not(.c4):not(.stack)) > .h2 { grid-column: span 2; }
  .head2:has(+ input[name=stage]) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; }
}
/* Running text never ends on a single word: one rule for every paragraph and list item. Short card
   texts also carry a non-breaking space before their last word, because desktop Chrome does not
   always keep "pretty" in narrow cards. */
main p, main li { text-wrap: pretty; }
/* On the narrowest phones, headings are a little smaller, so a heading's last two words (joined so
   that no word is left alone) still fit on one line. */
@media (max-width: 374px) {
  .h1 { font-size: 32px; }
  .h2 { font-size: 27px; }
  .h3 { font-size: 20px; }
}

/* Who-it-is-for cards turn over on a click or a tap: the situation on the front, how we help on the
   back. Both faces share one grid cell, so the card is as tall as its taller face. Without the
   script (it marks each card .js) the two faces stack in one card and nothing turns. */
.who > .flip, .who.cards > .flip { background: none; padding: 0; border: 0; border-radius: 0; }
.flip-in { display: grid; height: 100%; }
.face { display: flex; flex-direction: column; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 40px; }
.face p { color: var(--ink2); }
.face .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.face .big { font-size: 22px; line-height: 1.35; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.face .text-link { align-self: flex-start; }
.flip-btn { display: none; }
.flip.js { perspective: 1600px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flip.js .flip-in { transform-style: preserve-3d; transition: transform .7s var(--ease-out); }
.flip.js .face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: visibility 0s .35s, border-color 180ms ease; }
.flip.js .back { transform: rotateY(180deg); visibility: hidden; background: var(--navy); border-color: var(--navy); }
.flip.js .back p, .flip.js .back .big, .flip.js .back .text-link { color: var(--navyInk); }
.flip.js .back .eyebrow { color: var(--navyInk); opacity: .75; }
.flip.js .flip-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 700; color: var(--accent); cursor: pointer; }
.flip.js .back .flip-btn { color: var(--navyInk); }
.flip.js .flip-btn svg { transition: transform .5s var(--ease-out); }
.flip.js:hover .front { border-color: var(--accent); }
.flip.js:hover .front .flip-btn svg { transform: rotate(-180deg); }
.flip.on .flip-in { transform: rotateY(180deg); }
.flip.on .front { visibility: hidden; }
.flip.on .back { visibility: visible; }
.flip:not(.js) .flip-in { gap: 20px; }
@media (max-width: 760px) { .face { padding: 22px; } .face .big { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .flip.js .flip-in, .flip.js .face { transition: none; } }

/* Service tiles: one line icon, a title and one short line each, so the row reads as six things
   and not as six paragraphs. */
.tiles { gap: 24px; }
.tiles > div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 32px; gap: 12px; transition: border-color 180ms ease, transform 200ms var(--ease-out); }
.field .tiles > div { background: var(--ground); }
.tiles > div:hover { border-color: var(--accent); transform: translateY(-2px); }
.tiles .ico { width: 40px; height: 40px; color: var(--accent); margin-bottom: 8px; }
@media (max-width: 760px) { .tiles > div { padding: 22px; } .tiles .ico { width: 32px; height: 32px; margin-bottom: 4px; } }
@media (prefers-reduced-motion: reduce) { .tiles > div { transition: none; } .tiles > div:hover { transform: none; } }

/* Numbered steps: three cards of one size. Every title gets room for two lines, so the text under
   each title starts on the same line in all three. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.steps > li { display: flex; flex-direction: column; gap: 12px; background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 36px; }
.steps .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 44px; line-height: 1; color: var(--accent); margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.steps .h3 { min-height: 2.5em; }
.steps p { color: var(--ink2); }

/* Scope sample: the label column is wide enough for "Stays manual". */
[data-ui] .scope { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 14px; border-bottom: 0; }

/* The handover checklist ticks its boxes one after another when it scrolls into view. The script
   adds .anim only when motion is allowed, so every other visitor sees the boxes already ticked. */
[data-ui] .box.done { position: relative; }
[data-ui] .box.done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
[data-tick].anim .box.done { background: transparent; border-color: rgba(127, 127, 127, .45); }
[data-tick].anim .box.done::after { opacity: 0; }
[data-tick].anim.seen .box.done { animation: tickbox 260ms var(--ease-out) forwards; }
[data-tick].anim.seen .box.done::after { animation: tickmark 200ms ease forwards; }
[data-tick].anim.seen li:nth-child(2) .box.done, [data-tick].anim.seen li:nth-child(2) .box.done::after { animation-delay: 350ms; }
[data-tick].anim.seen li:nth-child(3) .box.done, [data-tick].anim.seen li:nth-child(3) .box.done::after { animation-delay: 700ms; }
[data-tick].anim.seen li:nth-child(4) .box.done, [data-tick].anim.seen li:nth-child(4) .box.done::after { animation-delay: 1050ms; }
@keyframes tickbox { to { background: #1c7a4c; border-color: #1c7a4c; } }
@keyframes tickmark { to { opacity: 1; } }

/* Story order (owner, 2026-10-20): what we do for you, then why hire us, then book a call. The
   blocks below serve that order on every page. */

/* The hero offers the call first and the three steps second, so a reader who is not ready to book
   still has a next place to go. */
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* Small mono labels name a step, a case study or a reason before its heading. */
.kicker { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
/* A card back can point to two places; the links sit on one line and wrap when they must. */
.face .links2 { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.flip.js .back .links2 .text-link { color: var(--navyInk); }

/* The three steps are also the three offers, so they show at every width: three columns on wide
   screens, one column on phones. The price line sits at the bottom of each card, on one line
   across all three. */
.steps.offers > li { gap: 10px; }
.steps.offers .num { margin-bottom: 12px; }
.steps.offers .kicker { color: var(--accent); }
.steps.offers .h3 { min-height: 0; }
.steps .price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.steps .gets { margin-top: 4px; }
.field .steps > li { background: var(--paper); }
@media (max-width: 960px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (max-width: 760px) { .steps > li { padding: 22px; } .steps .num { font-size: 32px; } }

/* Case studies: one article each, the same parts in the same order, so the second reads as a match
   for the first. */
.study + .study { margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--line); }
.study-title { margin: 12px 0 40px; max-width: 24ch; }
.ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ba-col { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 28px; }
.ba-col p:not(.kicker) { color: var(--ink2); }
.ba-col .list { margin-top: 6px; }
.col-ui { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) {
  .study + .study { margin-top: 56px; padding-top: 48px; }
  .study-title { margin-bottom: 24px; }
  .ba-col { padding: 22px; }
}

/* Why hire us: five short reasons in one card, side by side on wide screens and stacked on phones,
   so the set reads as one list and not as five more cards. */
.sec-title { margin-bottom: 48px; }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.reasons li { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; }
.reasons li + li { border-left: 1px solid var(--line); }
.reasons .kicker { color: var(--accent); }
.reasons p { color: var(--ink); font-weight: 600; line-height: 1.4; }
@media (max-width: 1100px) {
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .reasons li { flex-direction: row; gap: 20px; padding: 20px 24px; }
  .reasons li + li { border-left: 0; border-top: 1px solid var(--line); }
  .reasons .kicker { flex: none; width: 128px; padding-top: 3px; }
}
@media (max-width: 760px) {
  .sec-title { margin-bottom: 28px; }
  .reasons li { flex-direction: column; gap: 6px; padding: 18px 20px; }
  .reasons .kicker { width: auto; padding-top: 0; }
}

/* A long case study on a service page folds away behind one summary line; without a script the
   details element still opens. */
.more { margin-top: 32px; }
.more summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.more summary:hover { color: var(--accent); }
.more[open] summary { margin-bottom: 8px; }
.more .prose-cols { margin-top: 24px; }

/* Billing story on desktop: the script adds .story when the screen is wide and motion is allowed.
   The five screens share one sticky cell on the left, the captions scroll past on the right, and
   the caption in the middle of the screen picks which screen shows. Phones, reduced motion and
   no script keep the radio tabs above. */
.walk.story .tabs { display: none; }
.walk.story .stages { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 64px; counter-reset: stage; }
.walk.story .stage { display: contents !important; animation: none !important; }
.walk.story .stage [data-ui] { grid-column: 1; grid-row: 1 / span 5; align-self: start; position: sticky; top: max(104px, calc(50vh - 190px)); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s 360ms; }
.walk.story .stage.on [data-ui] { opacity: 1; visibility: visible; transform: none; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s; }
.walk.story .s1 .say { grid-row: 1; } .walk.story .s2 .say { grid-row: 2; } .walk.story .s3 .say { grid-row: 3; } .walk.story .s4 .say { grid-row: 4; } .walk.story .s5 .say { grid-row: 5; }
.walk.story .say { grid-column: 2; min-height: 72vh; justify-content: center; opacity: .35; transition: opacity 300ms ease; counter-increment: stage; }
.walk.story .say::before { content: counter(stage, decimal-leading-zero) " / 05"; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .1em; color: var(--accent); }
.walk.story .stage.on .say { opacity: 1; }
.walk.story .s1 .say { min-height: 56vh; justify-content: flex-start; padding-top: 40px; }