/* H1 The map: subpage additions on top of the homepage style.css */
/* Brand colours only (rule 5): the homepage style.css tints and navies that reach these pages, redrawn in brand colours. Chrome rules untouched. */
.btn-primary:hover { background-color: color-mix(in srgb, #027aa2 84%, #21242c); border-top-color: color-mix(in srgb, #027aa2 84%, #21242c); border-right-color: color-mix(in srgb, #027aa2 84%, #21242c); border-bottom-color: color-mix(in srgb, #027aa2 84%, #21242c); border-left-color: color-mix(in srgb, #027aa2 84%, #21242c); }
.iso .fl { fill: #eef8fb; }
.iso .fr { fill: #dde3e9; }
.iso .base.ft { fill: color-mix(in srgb, #dde3e9 64%, #fff); }
.iso .base.fl { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .base.fr { fill: color-mix(in srgb, #dde3e9 82%, #21242c); }
.iso .road { fill: #dde3e9; }
.iso .lot.ft { fill: #f2fafc; }
.iso .lot.fl { fill: #dde3e9; }
.iso .lot.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.iso .canopy { fill: color-mix(in srgb, #0391bf 20%, #fff); }
.iso .canopy-hi { fill: #eef8fb; }
.iso .wall.ft { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .wall.fl { fill: #f2fafc; }
.iso .wall.fr { fill: #eef8fb; }
.iso .win { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .beam.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .load.fl { fill: color-mix(in srgb, #4f5f69 10%, #fff); }
.iso .load.fr { fill: color-mix(in srgb, #4f5f69 24%, #fff); }
.iso .pallet.ft, .iso .pallet.fl, .iso .pallet.fr { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .cab.ft { fill: #eef8fb; }
.iso .cab.fl { fill: #dde3e9; }
.iso .cab.fr { fill: color-mix(in srgb, #dde3e9 90%, #21242c); }
.iso .bench.fl { fill: #eef8fb; }
.iso .bench.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.iso .step.fl { fill: #eef8fb; }
.iso .step.fr { fill: #dde3e9; }
.iso .annex.fl { fill: #eef8fb; }
.iso .annex.fr { fill: #dde3e9; }
.iso .park { fill: #dde3e9; }
.iso .car.fl { fill: #eef8fb; }
.iso .car.fr { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .car-b.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .car-c.ft { fill: color-mix(in srgb, #4f5f69 64%, #fff); }
.iso .note { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .desk.fl { fill: #eef8fb; }
.iso .desk.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.iso .pit { fill: color-mix(in srgb, #4f5f69 24%, #fff); stroke: color-mix(in srgb, #4f5f69 50%, #fff); }
.iso .m.fl { fill: #dde3e9; }
.iso .m.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.iso .mz.on .lot.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .p.fr { fill: color-mix(in srgb, #102d7b 78%, #21242c); }
.iso .head { fill: color-mix(in srgb, #4f5f69 10%, #fff); }
.iso .isle.fl { fill: #dde3e9; }
.iso .isle.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.iso .grid-l { stroke: color-mix(in srgb, #4f5f69 50%, #fff); }
.iso .orgbox.fl { fill: #dde3e9; }
.iso .orgbox.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.iso .trailer.fl { fill: #f2fafc; }
.iso .trailer.fr { fill: #dde3e9; }
.iso .civic.fl { fill: #f2fafc; }
.iso .civic.fr { fill: #dde3e9; }
.iso .drum.fl { fill: #eef8fb; }
.iso .drum.ft { fill: #dde3e9; }
.iso .dome { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .col.fl { fill: #fff; }
.iso .col.fr { fill: #dde3e9; }
.iso .ent.ft { fill: #f2fafc; }
.iso .ent.fl { fill: #eef8fb; }
.iso .ent.fr { fill: #dde3e9; }
.iso .tower.ft { fill: #eef8fb; }
.iso .tower.fl { fill: color-mix(in srgb, #0391bf 20%, #fff); }
.iso .tower.fr { fill: color-mix(in srgb, #027aa2 38%, #fff); }
.iso .site.fl { fill: #f2fafc; }
.iso .site.fr { fill: #dde3e9; }
.iso .slab.ft { fill: #fff; }
.iso .stone.ft { fill: #f2fafc; }
.iso .stone.fl { fill: #dde3e9; }
.iso .stone.fr { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .dirt { fill: color-mix(in srgb, #4f5f69 12%, #fff); }
.iso .steel.ft { fill: color-mix(in srgb, #102d7b 70%, #fff); }
.iso .steel.fl { fill: color-mix(in srgb, #102d7b 86%, #fff); }
.iso .beam-s.ft { fill: color-mix(in srgb, #102d7b 58%, #fff); }
.iso .beam-s.fl { fill: color-mix(in srgb, #102d7b 86%, #fff); }
.iso .canopy-b.fr { fill: color-mix(in srgb, #102d7b 78%, #21242c); }
.s-run { color: color-mix(in srgb, #0391bf 34%, #fff); }
.s-idle { background-color: color-mix(in srgb, #4f5f69 22%, #21242c); color: color-mix(in srgb, #4f5f69 56%, #fff); }
.iso .door { fill: #dde3e9; }
.iso .slat { stroke: color-mix(in srgb, #4f5f69 50%, #fff); }
.iso .machine.fl { fill: #eef8fb; }
.iso .machine.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.iso .ram.fl { fill: color-mix(in srgb, #dde3e9 80%, #21242c); }
.iso .ram.fr { fill: color-mix(in srgb, #4f5f69 56%, #fff); }
.iso .ram.ft { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .coil.fl { fill: #dde3e9; }
.iso .coil.ft { fill: #eef8fb; }
.iso .conv.ft { fill: #f2fafc; }
.iso .conv.fl { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .conv.fr { fill: color-mix(in srgb, #dde3e9 82%, #21242c); }
.iso .roller { stroke: color-mix(in srgb, #4f5f69 50%, #fff); }
.iso .lamp-off.fl, .iso .lamp-off.fr { fill: #dde3e9; }
.iso .s-run .lamp.ft { fill: color-mix(in srgb, #00aee6 56%, #fff); }
.iso .s-micro .lamp.fl { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .s-idle .lamp.fl { fill: color-mix(in srgb, #dde3e9 88%, #21242c); }
.iso .s-idle .lamp.fr { fill: color-mix(in srgb, #4f5f69 46%, #fff); }
.iso .granite.ft { fill: color-mix(in srgb, #dde3e9 66%, #fff); }
.iso .granite.fl { fill: color-mix(in srgb, #dde3e9 82%, #21242c); }
.iso .granite.fr { fill: color-mix(in srgb, #4f5f69 54%, #fff); }
.iso .gauge.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .seam { stroke: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .roof { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .roof-b { fill: #dde3e9; }
.iso .ped { fill: #eef8fb; }
.iso .cabin-c.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .plaza { fill: #eef8fb; }
.iso .chair.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .pile { fill: color-mix(in srgb, #4f5f69 24%, #fff); }
.iso .deck.ft { fill: #f2fafc; }
.iso .deck.fl, .iso .deck.fr { fill: color-mix(in srgb, #dde3e9 92%, #21242c); }
.iso .jib.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .weight.ft { fill: color-mix(in srgb, #4f5f69 64%, #fff); }
.iso .beam-load.ft { fill: color-mix(in srgb, #4f5f69 60%, #fff); }
.iso .beam-load.fl { fill: color-mix(in srgb, #102d7b 70%, #fff); }
.iso .beam-load.fr { fill: color-mix(in srgb, #102d7b 86%, #fff); }
.iso .blocks.fl, .iso .blocks.fr { fill: color-mix(in srgb, #4f5f69 60%, #fff); }
.iso .exc.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); }
.iso .fence { stroke: color-mix(in srgb, #4f5f69 60%, #fff); }
.iso .fpost { stroke: color-mix(in srgb, #4f5f69 60%, #fff); }
.iso .carrier.fl { fill: #eef8fb; }
.iso .carrier.fr { fill: color-mix(in srgb, #dde3e9 96%, #21242c); }
.btn-white:hover { background: color-mix(in srgb, #00aee6 30%, #fff); border-color: color-mix(in srgb, #00aee6 30%, #fff); }
/* ---------- added drawing classes for the subpages ---------- */
.iso .cell-b.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); } .iso .cell-b.fl { fill: #00aee6; } .iso .cell-b.fr { fill: #0391bf; }
.iso .cell-b { stroke: #102d7b; stroke-width: .5; }
.iso .dl-boxw { fill: #fff; stroke: color-mix(in srgb, #00aee6 30%, #fff); stroke-width: .6; }
.iso .note-b { fill: #00aee6; }
.iso .pinm .pole { stroke: #102d7b; stroke-width: 1.4; }
.iso .pinm .pinhead { fill: #00aee6; stroke: #102d7b; stroke-width: 1.2; }
.iso .glasswall { fill: rgba(0,174,230,.28); stroke: #0391bf; stroke-width: .7; }
.iso .wallcell.ft { fill: #fff; } .iso .wallcell.fl { fill: #eef8fb; } .iso .wallcell.fr { fill: #dde3e9; }
.iso .wallcell { stroke-width: .45; }
.iso .wallcell-on.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); } .iso .wallcell-on.fl { fill: color-mix(in srgb, #00aee6 55%, #fff); } .iso .wallcell-on.fr { fill: #0391bf; }
.iso .wallcell-on { stroke-width: .45; }
.iso .doc.ft { fill: #fff; } .iso .doc.fl { fill: #eef8fb; } .iso .doc.fr { fill: #dde3e9; }
.iso .doc { stroke-width: .5; }
.iso .docb.ft { fill: #00aee6; } .iso .docb.fl { fill: #027aa2; } .iso .docb.fr { fill: #102d7b; }
.iso .docb { stroke-width: .5; }
.iso .navyb.ft { fill: color-mix(in srgb, #102d7b 85%, #fff); } .iso .navyb.fl { fill: #102d7b; } .iso .navyb.fr { fill: color-mix(in srgb, #102d7b 72%, #21242c); }
.iso .navyb { stroke: color-mix(in srgb, #00aee6 30%, #fff); stroke-width: .5; }
.iso .pipe { fill: none; stroke: #0391bf; stroke-width: 3; }
.iso .pipe-o { fill: none; stroke: #102d7b; stroke-width: 5; }
.iso .flowd { fill: none; stroke: #00aee6; stroke-width: 2; stroke-dasharray: 2 6; }
.iso .dl-n { font: 700 13px/1 Jost, sans-serif; fill: #102d7b; }
.iso .dl-w2 { font: 700 12px/1 Jost, sans-serif; fill: #fff; }
.iso .cloud { fill: #fff; stroke: #102d7b; stroke-width: .8; }
.iso .brick.ft { fill: #f2fafc; } .iso .brick.fl { fill: #dde3e9; } .iso .brick.fr { fill: color-mix(in srgb, #4f5f69 22%, #fff); }
.iso .street { fill: #dde3e9; stroke: none; }
.iso .curb { fill: none; stroke: #fff; stroke-width: 1.4; }
.iso .floor-on.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); } .iso .floor-on.fl { fill: #00aee6; } .iso .floor-on.fr { fill: #0391bf; }
.iso .floor-on { stroke-width: .6; }
.iso .walker { pointer-events: none; }
.iso .ghostbox { fill: none; stroke: #4f5f69; stroke-width: .9; stroke-dasharray: 3 3; }
.iso .hatch { fill: url(#hatch); stroke: none; }
.iso .lock.ft { fill: color-mix(in srgb, #00aee6 30%, #fff); } .iso .lock.fl { fill: #00aee6; } .iso .lock.fr { fill: #0391bf; }
.iso .ring-h { fill: none; stroke: #00aee6; stroke-width: 1.2; }
.iso .street-l { font: 700 16px/1 Montserrat, sans-serif; fill: #fff; stroke: none; letter-spacing: .04em; }
.iso .dl-w { fill: #fff; stroke: none; }
.iso .street-d { font: 700 18px/1 Montserrat, sans-serif; fill: #4f5f69; stroke: none; letter-spacing: .06em; }

/* ================= Subpages (H1 The map family) ================= */
.ph { padding: 56px 0 0; background: radial-gradient(80% 70% at 70% 60%, var(--mist) 0, #fff 72%); }
.ph-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; }
.ph-top h1 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); max-width: 15ch; }
.ph-side .lede { max-width: 50ch; }
.ph-side .btn-row { margin-top: 24px; }
.crumb { font-size: 13px; color: var(--ink-mute); margin-bottom: 18px; }
.crumb a { font-weight: 600; }
.ph-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px 40px; align-items: start; margin-top: 36px; padding-bottom: 72px; }
.ph-stage.wide { grid-template-columns: minmax(0, 1fr); }
.ph-stage .map { margin-left: -16px; }
.side { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 26px 26px 28px; box-shadow: var(--shadow); position: sticky; top: 88px; }
.side h2 { font-size: 1.75rem; }
.side p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.side .go { margin-top: 16px; }
.side .go + .go { margin-top: 10px; }
.side-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.side-links .go { margin-top: 0; }
.pz-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; padding: 4px; background: #eef8fb; border-radius: 14px; }
.pz-tabs button { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; border-radius: 8px; padding: 10px 12px; min-height: 44px; font: 600 14px/1.1 var(--sans); color: var(--ink-soft); cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .16s var(--ease-out); text-align: left; }
.pz-tabs button:active { transform: scale(0.97); }
.pz-tabs button[aria-pressed="true"], .pz-tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(16,45,123,.08), 0 4px 14px -6px rgba(2,122,162,.35); }
.pz-tabs .sw { width: 12px; height: 8px; border: 1.5px solid var(--teal-deep); transform: skewX(-30deg); flex: none; }
.pz-tabs button[aria-pressed="true"] .sw, .pz-tabs button[aria-selected="true"] .sw { background: var(--cyan); border-color: var(--navy); }
.legend { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.legend-sw { flex: none; width: 34px; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,174,230,.35); }
.legend p { margin: 0; }
.mlabel.quiet { background: rgba(255,255,255,.9); color: var(--ink-mute); font-weight: 600; cursor: default; }
button.mlabel { border: 0; font: 600 13px/1 var(--sans); }
.map .walker { transition: none; }
.stamp { position: absolute; transform: translate(-50%, -50%); font: 700 clamp(1.25rem, 2.2vw, 2rem)/1 var(--display); color: var(--navy); background: #fff; padding: 8px 12px; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--navy), 0 8px 20px -10px rgba(16,45,123,.5); white-space: nowrap; pointer-events: none; letter-spacing: -0.02em; }
.stamp small { display: block; font: 600 11.5px/1.2 var(--sans); color: var(--ink-mute); letter-spacing: 0; margin-top: 3px; }
.map-cap.left { text-align: left; }

/* section rhythm */
.sec { padding-block: var(--section); }
.sec-mist { background: var(--mist); }
.sec-slate { background: var(--slate); }
.sec-navy { background: var(--navy); color: rgba(255,255,255,.86); }
.sec-navy h2, .sec-navy h3 { color: #fff; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 44px; }
.sec-head .lede { max-width: 54ch; }
.sec-navy .lede { color: rgba(255,255,255,.86); }
.h-sub { font: 600 1.375rem/1.3 var(--display); color: var(--navy); letter-spacing: -0.01em; }

/* reason / capability grid with a drawing per card */

/* stepped progression (trainings) */
.steps-draw { position: relative; margin: 0 0 8px; }
.steps-draw svg { width: 100%; height: auto; }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); }
.tcard { padding: 22px 26px 0 0; }
.tcard + .tcard { padding-left: 26px; border-left: 1px solid var(--rule); }
.tcard h3 { font-size: 1.4rem; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tcard .tm { font: 700 2.25rem/1 var(--display); color: var(--navy); letter-spacing: -0.03em; display: block; margin-top: 14px; }
.tcard .tm small { font: 600 13px/1 var(--sans); color: var(--ink-mute); letter-spacing: 0; margin-left: 6px; }
.tcard p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); line-height: 1.6; }

/* recognition band */
.recog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 64px; align-items: center; }
.recog svg { width: 100%; height: auto; }
.recog p { margin-top: 16px; font-size: 1.0625rem; line-height: 1.65; color: rgba(255,255,255,.86); max-width: 52ch; }
.recog .btn-row { margin-top: 26px; }
.iso.on-navy .ft, .iso.on-navy .fl, .iso.on-navy .fr { stroke: color-mix(in srgb, #0391bf 55%, #102d7b); }
.iso.on-navy .base.ft { fill: color-mix(in srgb, #102d7b 90%, #fff); } .iso.on-navy .base.fl { fill: color-mix(in srgb, #102d7b 72%, #21242c); } .iso.on-navy .base.fr { fill: color-mix(in srgb, #102d7b 50%, #21242c); }

/* closing band with the locator */
.close { padding-block: var(--section); }
.close-band { background: var(--navy); border-radius: var(--r-lg); padding: 56px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; overflow: hidden; }
.close-band h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.close-band p { margin: 16px 0 26px; color: rgba(255,255,255,.86); font-size: 1.0625rem; max-width: 52ch; }
.close-map svg { width: 100%; height: auto; }
.close .iso .ft, .close .iso .fl, .close .iso .fr { stroke: color-mix(in srgb, #0391bf 55%, #102d7b); stroke-width: .6; }
.close .iso .base.ft { fill: color-mix(in srgb, #102d7b 90%, #fff); } .close .iso .base.fl { fill: color-mix(in srgb, #102d7b 72%, #21242c); } .close .iso .base.fr { fill: color-mix(in srgb, #102d7b 50%, #21242c); }
.close .iso .road { fill: color-mix(in srgb, #102d7b 85%, #fff); }
.close .iso .lot.ft { fill: color-mix(in srgb, #102d7b 82%, #fff); } .close .iso .lot.fl { fill: color-mix(in srgb, #102d7b 90%, #fff); } .close .iso .lot.fr { fill: color-mix(in srgb, #102d7b 72%, #21242c); }
.close .iso .m.ft { fill: color-mix(in srgb, #102d7b 76%, #fff); } .close .iso .m.fl { fill: color-mix(in srgb, #102d7b 85%, #fff); } .close .iso .m.fr { fill: color-mix(in srgb, #102d7b 92%, #21242c); }
.close .iso .mz.on .m.ft { fill: #00aee6; } .close .iso .mz.on .m.fl { fill: #0391bf; } .close .iso .mz.on .m.fr { fill: #027aa2; }
.close .iso .mz.on .lot.ft { fill: color-mix(in srgb, #102d7b 70%, #0391bf); }
.close-map .route { fill: none; stroke: #00aee6; stroke-width: 3; }
.close-map.armed .route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.close-map.play .route { animation: draw 1.2s var(--ease-out) forwards; }

/* big figures */
.figrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--navy); }
.figrow > div { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--rule); }
.figrow > div + div { padding-left: 22px; border-left: 1px solid var(--rule); }
.figrow dt, .figrow .n { font: 700 clamp(2.75rem, 4.6vw, 4rem)/1 var(--display); color: var(--navy); letter-spacing: -0.035em; }
.figrow dd, .figrow .c { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.sec-navy .figrow { border-top-color: var(--cyan); }
.sec-navy .figrow > div { border-color: rgba(0,174,230,.25); }
.sec-navy .figrow dt, .sec-navy .figrow .n { color: #fff; }
.sec-navy .figrow dd, .sec-navy .figrow .c { color: color-mix(in srgb, #00aee6 30%, #fff); }

/* quote */
.quote { margin: 0; padding: 32px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--rule), var(--shadow); position: relative; }
.quote p { font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.4 var(--display); color: var(--navy); letter-spacing: -0.01em; }
.quote footer { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--ink-mute); }
.quote::before { content: ""; position: absolute; left: 40px; top: -10px; width: 26px; height: 18px; background: var(--cyan); transform: skewX(-30deg); }

/* split copy */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.prose p + p { margin-top: 14px; }
.prose p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; }
.sec-navy .prose p { color: rgba(255,255,255,.86); }

/* client row */
.clients { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; }
.clients a { font: 600 1.25rem/1 var(--display); color: var(--navy); letter-spacing: -0.005em; display: inline-flex; align-items: center; }
.clients a:hover { color: var(--teal-deep); text-decoration: none; }
.clients img { height: 30px; width: auto; filter: grayscale(1) brightness(.55); }

@media (max-width: 1080px) {
  .ph-stage { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figrow > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .ph { padding-top: 36px; }
  .ph-top, .sec-head, .recog, .close-band, .split { grid-template-columns: minmax(0, 1fr); }
  .ph-stage { padding-bottom: 56px; }
  .ph-stage .map { margin-inline: calc(-1 * var(--gutter) + 8px); }
  .tgrid { grid-template-columns: 1fr; }
  .tcard + .tcard { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 22px; }
  .close-band { padding: 36px 24px; }
  .quote { padding: 28px 24px; }
}
@media (max-width: 600px) {
  .figrow { grid-template-columns: 1fr 1fr; }
  .figrow > div { padding-right: 12px; }
  .figrow > div + div { padding-left: 12px; }
  .figrow > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stamp { font-size: 1.05rem; padding: 6px 8px; }
  .stamp small { font-size: 10px; }
  button.mlabel, .mlabel { font-size: 10.5px; padding: 4px 6px; }
}

/* Mendix */
.phase-strip { background: var(--navy); color: rgba(255,255,255,.86); padding: 30px 0; }
.phase-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px 48px; align-items: center; }
.phase-strip h3 { color: #fff; font-size: 1.5rem; }
.phase-strip p { font-size: 1.0625rem; color: rgba(255,255,255,.86); max-width: 70ch; }
.loc-row { justify-self: end; }
.loc-mini { width: 120px; height: auto; }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px 56px; align-items: center; margin-bottom: 40px; }
.tr-copy .lede { margin-top: 18px; }
.tr-note { margin: 16px 0 26px; font-weight: 600; color: var(--navy); }
.steps-draw { margin: 0; position: relative; }
.steps-draw .map-over { position: absolute; inset: 0; }
.steps-draw.armed .route, .steps-draw.armed .route-under { stroke-dasharray: 1; stroke-dashoffset: 1; }
.steps-draw.play .route, .steps-draw.play .route-under { animation: draw 1.6s cubic-bezier(.65,0,.35,1) .2s forwards; }
.recog-draw { margin: 0; }
@media (max-width: 860px) { .phase-grid, .tr-grid { grid-template-columns: 1fr; } .loc-row { justify-self: start; } }
.go { white-space: normal; }
.ph-top h1.long { font-size: clamp(2.4rem, 4.2vw, 3.9rem); max-width: 17ch; }
.ph-stage.wide .map { margin-inline: -8px; }
.side-row { position: static; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, .7fr); gap: 20px 36px; align-items: start; margin-top: 8px; }
.side-row .pz-tabs { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.side-row .legend { margin-top: 16px; border-top: 0; padding-top: 0; }
.side-row .side-links { margin-top: 0; border-top: 0; padding-top: 4px; border-left: 1px solid var(--rule); padding-left: 28px; align-self: stretch; justify-content: center; }
@media (max-width: 1080px) { .side-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .side-row .side-links { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 14px; } }
@media (max-width: 860px) { .side-row { grid-template-columns: minmax(0, 1fr); } .side-row .pz-tabs { grid-template-columns: 1fr 1fr; } }
.steps-draw .stamp { font-size: clamp(1rem, 1.5vw, 1.25rem); padding: 6px 10px; }
.tstep { display: block; width: 84px; margin-bottom: 12px; }
.tstep svg { width: 100%; height: auto; }
.iso.on-navy .road { fill: color-mix(in srgb, #102d7b 85%, #fff); }
.iso.on-navy .step.ft { fill: #fff; } .iso.on-navy .step.fl { fill: #eef8fb; } .iso.on-navy .step.fr { fill: #dde3e9; }

/* CSD */
.chip-30 { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: 600 1.125rem/1.2 var(--display); color: var(--navy); }
.chip-30 .sw { width: 14px; height: 9px; background: var(--cyan); border: 1.5px solid var(--navy); transform: skewX(-30deg); }
.pz-tabs-1 { grid-template-columns: 1fr; margin-top: 0; }
.panes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); min-height: 132px; }
.pane h3 { font-size: 1.375rem; }
.pane p { margin-top: 8px; }
.proof-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 32px 64px; align-items: center; }
.proof-h { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 18ch; }
.proof-n { display: block; font: 700 clamp(5rem, 11vw, 9rem)/.9 var(--display); color: var(--navy); letter-spacing: -0.045em; margin-bottom: 10px; }
.proof .lede { margin-top: 18px; max-width: 50ch; }
.proof .btn-row { margin-top: 26px; }
.proof-draw { margin: 0; position: relative; }
.proof-draw > svg { width: 100%; height: auto; }
.proof-loc { left: auto; right: 0; top: 0; }
.proof-loc svg { width: 96px; }
.why-split { align-items: center; }
.why-lines { margin-top: 26px; border-top: 1px solid rgba(0,174,230,.25); }
.why-lines li { padding: 16px 0; border-bottom: 1px solid rgba(0,174,230,.25); font-size: 1.0625rem; line-height: 1.55; color: rgba(255,255,255,.86); }
.why-lines li:first-child { font: 600 1.25rem/1.35 var(--display); color: #fff; }
.why-draw { margin: 0; }
.why-draw svg { width: 100%; height: auto; max-height: 520px; }
.out-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.out-first .lede { margin-top: 16px; }
.out-first .btn-row { margin-top: 26px; }
.book-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 26px; padding: 20px; border-radius: var(--r-md); background: var(--mist); box-shadow: inset 0 0 0 1px var(--rule); }
.book-draw svg { width: 100%; height: auto; }
.book-card h3 { font-size: 1.3rem; }
.cl-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 24px 48px; align-items: center; }
.cl-grid h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
@media (max-width: 860px) { .proof-grid, .out-grid, .cl-grid { grid-template-columns: minmax(0, 1fr); } .book-card { grid-template-columns: 110px minmax(0, 1fr); } }

/* About */
.side-k { font-weight: 600; color: var(--navy) !important; margin-top: 0 !important; }
.lead-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.lead-card { background: #fff; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--rule), var(--shadow); padding: 18px 24px 26px; }
.lead-card .mono { display: block; height: 170px; margin: 0 -10px 12px; background: linear-gradient(180deg, var(--mist), #fff); border-radius: 8px; }
.lead-card .mono svg { width: 100%; height: 100%; }
.lead-card h3 { font-size: 1.4rem; }
.lead-card h3 a { color: var(--navy); }
.lead-card p { margin-top: 6px; font-size: 15px; color: var(--ink-mute); font-weight: 600; }
.out-split { align-items: center; }
.out-split .lede { margin-top: 18px; }
.g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.g-card { background: rgba(255,255,255,.06); border: 1px solid rgba(0,174,230,.22); border-radius: var(--r-md); padding: 18px 22px 24px; }
.g-card .g-draw { display: block; height: 160px; margin-bottom: 14px; }
.g-card .g-draw svg { width: 100%; height: 100%; }
.g-card h3 { font-size: 1.5rem; }
.v-draw { margin: 20px auto 8px; max-width: 760px; }
.v-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); }
.v-list li { display: flex; gap: 16px; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--rule); }
.v-list .v-n { font: 700 2.25rem/1 var(--display); color: var(--teal-mid); min-width: 1.2ch; }
.v-list h3 { font-size: 1.25rem; }
.v-list p { margin-top: 6px; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

/* Contact */
.ct-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 48px; align-items: start; margin-top: 40px; padding-bottom: 80px; }
.ct-form { background: #fff; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--rule), var(--shadow); padding: 32px; display: grid; gap: 16px; }
.ct-form h2 { font-size: 1.75rem; }
.form-note { font-size: 13.5px; font-weight: 600; color: var(--teal-deep); background: var(--slate); border-radius: 8px; padding: 10px 12px; }
.form-note.flash { animation: noteflash .9s var(--ease-out); }
@keyframes noteflash { 0% { background: color-mix(in srgb, #00aee6 30%, #fff); } 100% { background: var(--slate); } }
.fld { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.fld input, .fld select, .fld textarea { font: 500 15px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid color-mix(in srgb, #4f5f69 55%, #fff); border-radius: 8px; padding: 11px 12px; min-height: 44px; width: 100%; }
.fld textarea { resize: vertical; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--navy); }
.ct-form .btn { justify-self: start; }
.ct-map { margin: 0 0 8px; position: relative; }
.ct-map svg { width: 100%; height: auto; }
.stamp.addr { font-size: clamp(1rem, 1.5vw, 1.25rem); white-space: nowrap; transform: translate(-50%, -100%); }
.ct-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 2px solid var(--navy); }
.ct-row { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ct-k { font: 600 13px/1.2 var(--sans); color: var(--ink-mute); letter-spacing: 0; }
.ct-v { margin-top: 6px; font: 600 1.125rem/1.45 var(--display); color: var(--navy); }
.ct-v a { color: var(--navy); }
.ext { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 2px; font-size: 15px; color: var(--ink-soft); }
.pr-split { align-items: center; }
.pr-split .lede { margin-top: 18px; }
.pr-split .btn-row { margin-top: 24px; }
.pr-draw svg { width: 100%; height: auto; }
@media (max-width: 1080px) {
  .lead-grid, .g-grid { grid-template-columns: minmax(0, 1fr); }
  .v-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .v-list { grid-template-columns: minmax(0, 1fr); }
  .ct-rows { grid-template-columns: minmax(0, 1fr); }
  .stamp.addr { white-space: normal; max-width: 70vw; }
}
.close-band h2 + .btn-row { margin-top: 26px; }
@media (max-width: 1080px) { .ct-info { display: contents; } .ct-map { order: -1; } }

/* Case pages */
.case-ph { padding-bottom: 64px; }
.case-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px 56px; align-items: center; }
.case-top h1 { font-size: clamp(2.25rem, 3.8vw, 3.5rem); max-width: 18ch; }
.case-side { margin-top: 24px; display: grid; gap: 10px; max-width: 56ch; }
.case-side p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.case-before, .case-stage .map { position: relative; margin: 0; }
.case-before svg { width: 100%; height: auto; }
.ill { position: absolute; top: 4px; left: 4px; z-index: 2; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); background: #fff; border: 1px solid color-mix(in srgb, #00aee6 30%, #fff); border-radius: 8px; padding: 6px 8px; }
.case-stage { margin-top: 0; padding-bottom: 0; }
.rel-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rel { display: flex; flex-direction: column; gap: 10px; height: 100%; background: #fff; border-radius: var(--r-md); padding: 20px 20px 24px; box-shadow: 0 0 0 1px var(--rule); color: var(--navy); transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.rel:hover { text-decoration: none; box-shadow: 0 0 0 1.5px var(--cyan), var(--shadow); }
.rel:active { transform: scale(0.98); }
.rel-tag { font: 600 12px/1 var(--sans); color: var(--teal-deep); }
.rel-t { font: 600 1.0625rem/1.35 var(--display); }
.figrow dd span { display: inline; }
@media (max-width: 1080px) {
  .case-top { grid-template-columns: minmax(0, 1fr); }
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figrow > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .rel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1081px) { .figrow > div:nth-child(4n+1) { padding-left: 0; border-left: 0; } }

/* Cases landing */
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: #eef8fb; border-radius: 14px; width: fit-content; max-width: 100%; }
.filters button { border: 0; background: transparent; border-radius: 8px; padding: 10px 14px; min-height: 44px; font: 600 14px/1 var(--sans); color: var(--ink-soft); cursor: pointer; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.filters button:active { transform: scale(0.97); }
.filters button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.filters button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .filters button:not([aria-pressed="true"]):hover { background: #fff; color: var(--navy); } }
.cs-count { margin-top: 14px; font-size: 14px; color: var(--ink-mute); }
.cs-count [data-count] { font: 700 1.5rem/1 var(--display); color: var(--navy); margin-right: 4px; }
.cases-map { margin-left: 0 !important; }
.cdot { padding: 0; cursor: pointer; position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cyan); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--navy), 0 4px 10px -4px rgba(16,45,123,.6); pointer-events: auto; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.cdot-f { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--navy); }
.cdot.dim { opacity: .18; transform: scale(.7); }
@media (hover: hover) and (pointer: fine) { .cdot:hover { transform: scale(1.25); } }
.js .map.armed .cdot { opacity: 0; }
.js .map.play .cdot { animation: dotin .45s var(--ease-out) forwards; }
@keyframes dotin { to { opacity: 1; } }
.js .map.play .cdot.dim { animation: none; opacity: .18; }
.cc-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cc[hidden] { display: none; }
.cc a { display: flex; flex-direction: column; gap: 10px; height: 100%; background: #fff; border-radius: var(--r-md); padding: 20px 22px 24px; box-shadow: 0 0 0 1px var(--rule); color: var(--navy); transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.cc a:hover { text-decoration: none; box-shadow: 0 0 0 1.5px var(--cyan), var(--shadow); }
.cc a:active { transform: scale(0.98); }
.cc-tag { font: 600 12px/1 var(--sans); color: var(--teal-deep); }
.cc-t { font: 600 1.125rem/1.35 var(--display); }
.cc.feat a { background: var(--navy); color: #fff; box-shadow: none; }
.cc.feat .cc-tag { color: color-mix(in srgb, #00aee6 30%, #fff); }
.cc.feat .cc-t { font-size: 1.35rem; }
.cc-p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.86); }
.cc.flash a { animation: ccflash 1s var(--ease-out); }
@keyframes ccflash { 0% { box-shadow: 0 0 0 4px var(--cyan); } 100% { box-shadow: 0 0 0 1px var(--rule); } }
@media (max-width: 1080px) { .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cc-grid { grid-template-columns: minmax(0, 1fr); } .cdot { width: 10px; height: 10px; margin: -5px 0 0 -5px; } .cdot-f { width: 14px; height: 14px; margin: -7px 0 0 -7px; } }
.figrow dt { font-size: clamp(2rem, 3.1vw, 3.1rem); overflow-wrap: anywhere; }
.cases-top { grid-template-columns: minmax(0, 1fr) auto; }
.cc-grid { grid-auto-flow: dense; }
.cc.feat { grid-column: span 2; }
.cc.feat a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px 20px; align-items: center; }
.cc.feat .cc-txt { display: flex; flex-direction: column; gap: 10px; }
.cc.feat .cc-draw svg { width: 100%; height: auto; }
.cc.feat .iso .base.ft { fill: color-mix(in srgb, #102d7b 90%, #fff); } .cc.feat .iso .base.fl { fill: color-mix(in srgb, #102d7b 72%, #21242c); } .cc.feat .iso .base.fr { fill: color-mix(in srgb, #102d7b 50%, #21242c); }
@media (max-width: 1080px) { .cases-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .cc.feat { grid-column: auto; } .cc.feat a { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .map .mlabel, .hero-map .mlabel { font-size: 11px; } }
/* legibility floor: 12px everywhere */
.map .mlabel, .hero-map .mlabel, button.mlabel { font-size: max(12px, 13px); }
@media (max-width: 860px) { .map .mlabel, .hero-map .mlabel, button.mlabel { font-size: 12px; padding: 5px 7px; } }
.ill { font-size: 12px; }
.stamp small { font-size: 12px; }
@media (max-width: 639px) { svg.iso text { display: none; } }
/* numbered labels: full names on wide screens, numbers plus a legend below 640px */
.mlabel .ml-n { display: none; }
.m-legend { display: none; }
@media (max-width: 639px) {
  .case-stage .mlabel.numl { padding: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; --tx: -50% !important; }
  .case-stage .mlabel.numl .ml-t { display: none; }
  .case-stage .mlabel.numl .ml-n { display: inline; font: 700 12px/1 var(--sans); }
  .case-stage .m-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; list-style: none; padding: 0; margin: 14px 0 0; font: 600 13px/1.3 var(--sans); color: var(--ink-soft); }
  .m-legend li { display: flex; align-items: center; gap: 8px; }
  .m-legend .ml-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--navy); font: 700 12px/1 var(--sans); color: var(--navy); }
}

/* Mendix "Why partner": six reasons as six stops on one route (road down the middle, lots either side). */
.wr { list-style: none; margin: 30px 0 0; padding: 0; position: relative; --rail: 50%; }
.wr::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rail); width: 22px; margin-left: -11px; background: #dde3e9; border-radius: 11px; }
.wr::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: var(--rail); width: 4px; margin-left: -2px; background: #00aee6; border-radius: 2px; transform-origin: 50% 0; }
.wr.armed::after { transform: scaleY(0); }
.wr.play::after { transform: scaleY(1); transition: transform 2s cubic-bezier(.65,0,.35,1) .15s; }
.wr-stop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; padding: 14px 0; }
.wr-stop::before { content: ""; position: absolute; top: 50%; height: 4px; margin-top: -2px; width: 60px; background: #00aee6; border-radius: 2px; }
.wr-stop:nth-child(odd)::before { left: 50%; }
.wr-stop:nth-child(even)::before { right: 50%; }
.wr-n { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid #00aee6; display: grid; place-items: center; font: 700 15px/1 var(--sans); color: var(--navy); }
.wr-vig { grid-row: 1; height: 196px; display: flex; align-items: center; }
.wr-vig svg { height: 100%; width: auto; max-width: 100%; }
.wr-stop:nth-child(odd) .wr-vig { grid-column: 3; justify-content: flex-start; padding-left: 8px; }
.wr-stop:nth-child(even) .wr-vig { grid-column: 1; justify-content: flex-end; padding-right: 8px; }
.wr-t { grid-row: 1; max-width: 50ch; }
.wr-stop:nth-child(odd) .wr-t { grid-column: 1; justify-self: end; padding-right: 20px; }
.wr-stop:nth-child(even) .wr-t { grid-column: 3; justify-self: start; padding-left: 20px; }
.wr-t h3 { font-size: 1.35rem; }
.wr-t p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.wr.armed .wr-n, .wr.armed .wr-stop::before { opacity: 0; }
.wr.play .wr-n, .wr.play .wr-stop::before { animation: wrpop .4s var(--ease-out) forwards; }
.wr.play .wr-stop:nth-child(1) .wr-n, .wr.play .wr-stop:nth-child(1)::before { animation-delay: .35s; }
.wr.play .wr-stop:nth-child(2) .wr-n, .wr.play .wr-stop:nth-child(2)::before { animation-delay: .65s; }
.wr.play .wr-stop:nth-child(3) .wr-n, .wr.play .wr-stop:nth-child(3)::before { animation-delay: .95s; }
.wr.play .wr-stop:nth-child(4) .wr-n, .wr.play .wr-stop:nth-child(4)::before { animation-delay: 1.25s; }
.wr.play .wr-stop:nth-child(5) .wr-n, .wr.play .wr-stop:nth-child(5)::before { animation-delay: 1.55s; }
.wr.play .wr-stop:nth-child(6) .wr-n, .wr.play .wr-stop:nth-child(6)::before { animation-delay: 1.85s; }
@keyframes wrpop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 860px) {
  .wr { --rail: 19px; }
  .wr-stop { grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; padding: 12px 0 18px; }
  .wr-stop::before { display: none; }
  .wr-n { grid-column: 1; grid-row: 1; }
  .wr-stop:nth-child(n) .wr-vig { grid-column: 2; grid-row: 1; justify-content: flex-start; padding: 0; height: 150px; }
  .wr-stop:nth-child(n) .wr-t { grid-column: 2; grid-row: 2; justify-self: start; padding: 0; }
}
@media (max-width: 600px) { .wr-stop:nth-child(n) .wr-vig { height: 120px; } }

/* Case cards: each carries its industry's place, drawn small at the left edge. */
.cc:not(.feat) a { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 20px 16px 14px; }
.cc-g { display: block; width: 74px; }
.cc-g svg { width: 100%; height: auto; display: block; }
.cc:not(.feat) .cc-txt { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Phase B (approved 30 Oct, Craig 3 Nov): one scale for headings, corners, cards and section rhythm ---------- */
:root { --h1: clamp(2.5rem, 4.6vw, 4.25rem); --h2: clamp(2rem, 3.4vw, 2.75rem); --h3: 1.5rem; }
@media (max-width: 600px) { :root { --h3: 1.375rem; } }
:root:root h1 { font-family: var(--display); font-size: var(--h1); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
:root:root h2 { font-family: var(--display); font-size: var(--h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
:root:root h3 { font-family: var(--display); font-size: var(--h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
/* sections: 96px desktop, 64px phone (--section switches at 860px) */
.hero, .ph, .onto, .places, .phase-strip { padding-top: var(--section); }
.hero, .ph, .onto, .phase-strip { padding-bottom: var(--section); }
.places { padding-bottom: 0; }
.place { padding-block: var(--section); }
.ph-stage, .ct-grid, .case-ph { padding-bottom: 0; }
.ph-stage { margin-top: 40px; }
.ct-grid { margin-top: 48px; }
/* one gutter: 40px desktop, 20px phone, 1180px content */
.who .trust { margin-bottom: 64px; }
/* small cards: 24px padding */
.svc, .rcard > a, .rc-all, .lead-card, .g-card, .rel, .cc a, .cc:not(.feat) a, .side, .book-card { padding: 24px; }
.lead-card .mono { margin: 0 0 16px; }
/* card rows: content starts at the top, bottoms line up */
.cc a, .cc.feat a, .cc:not(.feat) a { align-items: start; }
.cc-g { align-self: start; }
.cc.feat .cc-draw { align-self: center; }
.ph:has(> .phase-strip) { padding-bottom: 0; }
.wrap + .phase-strip { margin-top: var(--section); }
.ph-top h1, .ph-top h1.long, .case-top h1 { max-width: none; }
@media (min-width: 861px) { .ph-top { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 20px 48px; } }
@media (max-width: 600px) { .btn-row { flex-direction: column; align-items: stretch; } .btn-row .btn { justify-content: center; text-align: center; } }
@media (max-width: 600px) { .ct-form { padding: 24px; } }
:root:root .case-top h1 { font-size: var(--h2); font-weight: 700; line-height: 1.1; }