/* Faheem Niyas — Engineered Expression
   A drawing set for real software. Graphite blueprint sheets and bone paper sheets, one ember drafting line.
   Bricolage Grotesque (condensed for display), Instrument Sans for reading, IBM Plex Mono only inside drawings. */

:root {
  --graphite: #1a1b1d;
  --coal: #232527;
  --seam: #383b3f;
  --bone: #efeae0;
  --paper-line: #cfc8ba;
  --ash: #aaa49b;
  --ink-soft: #4a463f;
  --ember: #f2811d;
  --ember-deep: #a94d08;
  --ink: #1a1b1d;
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--graphite); color: var(--bone); font: 400 1.0625rem/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

h1, h2 { font-family: var(--display); font-weight: 650; font-variation-settings: "wdth" 85; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
h3 { font: 600 1.125rem/1.3 var(--text); }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.lede { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--ash); max-width: 56ch; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ember); color: var(--ink); padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- actions: labels roll up to a second copy of themselves ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1px solid var(--ember); border-radius: 6px; background: var(--ember); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.btn:hover { background: #ff9a3d; border-color: #ff9a3d; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: var(--ember); border-color: var(--ember); color: var(--ink); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.roll > span { display: block; transition: transform .45s var(--ease); }
.roll::after { content: attr(data-label); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .45s var(--ease); }
.btn:hover .roll > span, .btn:focus-visible .roll > span, .btn:hover .roll::after, .btn:focus-visible .roll::after { transform: translateY(-100%); }
.ico { flex: none; }
.tag { display: inline-block; vertical-align: .1em; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; font: 500 .8125rem/1.5 var(--text); white-space: nowrap; opacity: .85; }
.tag-concept { color: var(--ember); border-color: var(--ember); opacity: 1; }
.paper .tag-concept, .sheet-marine .tag-concept { color: var(--ember-deep); border-color: var(--ember-deep); }

/* ---------- header and navigation ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--graphite); border-bottom: 1px solid transparent; transition: border-color .3s, transform .45s var(--ease); }
.site-head.is-scrolled { border-bottom-color: var(--seam); }
.site-head.is-hidden { transform: translateY(-100%); }
.head-row { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; font: 700 1.1875rem/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.mark-sq { width: 13px; height: 13px; border-radius: 3px; background: var(--ember); transition: transform .6s var(--ease); }
.mark:hover .mark-sq { transform: rotate(90deg); }
.nav { position: relative; display: flex; gap: 6px; }
.nav a { padding: 10px 12px; color: var(--ash); text-decoration: none; font-weight: 500; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav-line { position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: var(--ember); transition: transform .45s var(--ease), width .45s var(--ease), opacity .2s; pointer-events: none; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-weight: 600; }
.menu-lines { position: relative; width: 22px; height: 12px; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-lines::before { top: 0; }
.menu-lines::after { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-lines::before { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines::after { top: 5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 72px 0 0; z-index: 39; display: flex; flex-direction: column; justify-content: space-between; padding: 24px var(--gutter) 32px; background: var(--graphite); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--seam); font: 750 clamp(3rem, 15vw, 5rem)/1 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -0.02em; text-decoration: none; overflow: hidden; }
.menu nav a span { display: block; }
.menu nav a[aria-current="page"] { color: var(--ember); }
.menu-foot { display: grid; gap: 10px; padding-top: 28px; color: var(--ash); }
.menu-foot a { display: inline-block; padding-block: 6px; }

/* ---------- hero: a headline annotated like a drawing ---------- */
.hero { padding-block: clamp(36px, 6vw, 88px) clamp(48px, 7vw, 96px); }
.hero-sheet { position: relative; display: grid; grid-template-columns: minmax(0, 8.7fr) minmax(0, 3.3fr); grid-template-areas: "title proofs" "foot proofs"; grid-template-rows: auto 1fr; gap: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 96px); align-items: start; }
.hero-title { grid-area: title; position: relative; z-index: 2; font-size: clamp(3rem, 8.2vw, 8.4rem); font-weight: 720; font-variation-settings: "wdth" 75; line-height: .9; letter-spacing: -0.022em; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title .ln > span { display: block; }
.claim { color: inherit; text-decoration: none; background: linear-gradient(rgba(242,129,29,.45), rgba(242,129,29,.45)) left 94% / 100% .025em no-repeat; transition: color .25s; }
.claim:hover, .claim.is-hot { color: var(--ember); }
.bal { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: 1.5px solid var(--ember); border-radius: 50%; color: var(--ember); font: 500 .8125rem/1 var(--mono); }
.hero-title .bal { vertical-align: super; margin-left: .25em; font-size: clamp(.75rem, 1vw, .9375rem); width: 1.9em; height: 1.9em; transform: translateY(-.2em); }
.proofs { grid-area: proofs; position: relative; z-index: 2; display: grid; gap: clamp(18px, 2.4vw, 32px); padding-top: 4px; }
.proof a { display: block; overflow: hidden; border: 1px solid var(--seam); border-radius: 6px; background: var(--coal); }
.proof img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease); }
.proof a:hover img, .proof.is-hot img { transform: scale(1.06); }
.proof figcaption { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font: 400 .8125rem/1.45 var(--text); color: var(--ash); }
.proof figcaption b { display: block; color: var(--bone); font-weight: 500; }
.proof .bal { flex: none; width: 24px; height: 24px; font-size: .75rem; }
.leaders { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leaders path { fill: none; stroke: var(--ember); stroke-width: 1; opacity: .22; transition: opacity .3s, stroke-width .3s; }
.leaders path.is-hot { opacity: 1; stroke-width: 1.75; }
.leaders circle { fill: var(--ember); opacity: .45; }
.hero-foot { grid-area: foot; align-self: start; display: grid; gap: 28px; max-width: 760px; }

/* ---------- the band of services, tilted ---------- */
.band { position: relative; z-index: 3; margin-block: 0 clamp(24px, 4vw, 48px); padding-block: 16px; overflow: hidden; background: var(--ember); color: var(--ink); transform: rotate(-2deg) scale(1.04); }
.band-track { display: flex; width: max-content; animation: band 38s linear infinite; }
.band-run { display: flex; align-items: center; gap: 30px; padding-right: 30px; font: 750 clamp(1.5rem, 3vw, 2.6rem)/1.1 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -0.01em; white-space: nowrap; }
.band-run i { width: 12px; height: 12px; border-radius: 3px; background: var(--ink); transform: rotate(45deg); }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- signature: the Design / Build seam ---------- */
.seam-sec { padding-block: clamp(56px, 8vw, 112px); }
.seam-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.seam-head p { color: var(--ash); max-width: 46ch; }
.seam-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 14px; border-bottom: 1px solid var(--seam); }
.seam-tabs button { position: relative; min-height: 48px; padding: 0; border: 0; background: none; color: var(--ash); font-weight: 600; cursor: pointer; transition: color .2s; }
.seam-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.seam-tabs button:hover { color: var(--bone); }
.seam-tabs button[aria-selected="true"] { color: var(--bone); }
.seam-tabs button[aria-selected="true"]::after { transform: none; }
.seam-stage { --pos: 56%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--seam); border-radius: 10px; background: #141517; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.seam-panel { position: absolute; inset: 0; }
.seam-panel[hidden] { display: none; }
.seam-layer { position: absolute; inset: 0; }
.seam-layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.seam-build { clip-path: inset(0 0 0 var(--pos)); background: #141517; }
.seam-build .bp-img { z-index: 0; filter: grayscale(1) invert(1) contrast(1.4) brightness(1.75); }
/* a dark screen is already light-on-dark: keep it, so its linework becomes ember on black */
.seam-build[data-tone="dark"] .bp-img { filter: grayscale(1) contrast(1.35) brightness(1.15); }
.seam-build::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ember); mix-blend-mode: multiply; }
.seam-build::before { content: ""; position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(to right, rgba(242,129,29,.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(242,129,29,.16) 1px, transparent 1px); background-size: calc(100% / 36) calc(100% / 22.5); }
.bp-r { position: absolute; z-index: 3; border: 1px dashed rgba(255, 196, 140, .9); }
.bp-l { position: absolute; left: 6px; top: 6px; max-width: min(30ch, 92%); padding: 5px 8px; background: rgba(18,19,21,.88); border-left: 2px solid var(--ember); color: var(--bone); font: 400 clamp(.625rem, .9vw, .8125rem)/1.35 var(--mono); }
.bp-l b { display: block; color: var(--ember); font-weight: 500; }
.bp-dim { position: absolute; z-index: 3; color: var(--ember); font: 500 .75rem/1 var(--mono); }
.bp-dim-x { left: 0; right: 0; bottom: 10px; height: 1px; background: var(--ember); }
.bp-dim-x::before, .bp-dim-x::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--ember); }
.bp-dim-x::before { left: 0; }
.bp-dim-x::after { right: 0; }
.bp-dim-x span { position: absolute; left: 75%; top: -9px; padding: 2px 6px; background: #141517; }
.bp-dim-y { right: 10px; top: 0; bottom: 0; width: 1px; background: var(--ember); }
.bp-dim-y span { position: absolute; top: 50%; right: -7px; padding: 4px 2px; background: #141517; writing-mode: vertical-rl; }
.seam-handle { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--pos); width: 0; cursor: ew-resize; }
.seam-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ember); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.seam-grip { position: absolute; left: -24px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: var(--ember); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); transition: transform .3s var(--ease); }
.seam-grip::before, .seam-grip::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: solid var(--ink); border-width: 2px 2px 0 0; }
.seam-grip::before { left: 12px; transform: rotate(-135deg); }
.seam-grip::after { right: 12px; transform: rotate(45deg); }
.seam-handle:hover .seam-grip, .seam-stage.is-dragging .seam-grip { transform: scale(1.12); }
.seam-handle:focus-visible { outline: none; }
.seam-handle:focus-visible .seam-grip { outline: 3px solid var(--bone); outline-offset: 3px; }
.seam-word { position: absolute; top: 14px; padding: 4px 9px; border-radius: 4px; font: 500 .75rem/1.2 var(--mono); white-space: nowrap; }
.seam-word-a { right: 12px; background: var(--bone); color: var(--ink); }
.seam-word-b { left: 12px; background: var(--ember); color: var(--ink); }
.seam-cap { position: absolute; z-index: 6; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: calc(100% - 28px); padding: 9px 14px; border-radius: 6px; background: rgba(18,19,21,.9); }
.seam-cap a { font-weight: 600; text-decoration: none; background: linear-gradient(var(--ember), var(--ember)) left bottom / 100% 1.5px no-repeat; padding-bottom: 2px; }
.seam-cap a:hover { color: var(--ember); }

/* ---------- project sheets: each with its own composition ---------- */
.sheet { position: relative; padding-block: clamp(72px, 9vw, 136px); }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 80px); align-items: start; }
.sheet .kind { font: 400 .8125rem/1.4 var(--text); color: var(--ash); margin-bottom: 14px; }
.sheet h3 { font: 720 clamp(2rem, 4vw, 3.5rem)/.98 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -0.02em; margin-bottom: 20px; text-wrap: balance; }
.sheet h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left 100% / 0% .06em no-repeat; transition: background-size .6s var(--ease); }
.sheet h3 a:hover { background-size: 100% .06em; }
.sheet-text > p { max-width: 46ch; }
.sheet-text .actions { margin-top: 26px; }
.status { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--ember); color: var(--ash); font-size: .9375rem; max-width: 52ch; }
.status .tag { margin-right: 6px; }

.sheet-marine { background: var(--bone); color: var(--ink); color-scheme: light; }
.sheet-marine .kind, .sheet-marine .status { color: var(--ink-soft); }
.sheet-marine .status { border-left-color: var(--ember-deep); }
.sheet-marine .sheet-grid { grid-template-areas: "text drawing" "tb screen"; }
.sheet-marine .sheet-text { grid-area: text; }
.sheet-marine .sheet-drawing { grid-area: drawing; }
.sheet-marine .sheet-screen { grid-area: screen; margin-top: clamp(20px, 2.4vw, 36px); }
.sheet-marine .tblock { grid-area: tb; align-self: end; }
.sheet-marine :focus-visible { outline-color: var(--ember-deep); }

.sheet-portal { background: var(--graphite); border-top: 1px solid var(--seam); }
.sheet-portal .sheet-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "devices text" "devices tb"; }
.sheet-portal .devices { grid-area: devices; }
.sheet-portal .sheet-text { grid-area: text; }
.sheet-portal .tblock { grid-area: tb; }
.sheet-portal .status { border-left-color: var(--accent); }

.sheet-catalogue { background: var(--coal); }
.sheet-catalogue .sheet-grid { grid-template-areas: "tally tally" "text screen" "tb screen"; }
.sheet-catalogue .tally { grid-area: tally; }
.sheet-catalogue .sheet-text { grid-area: text; }
.sheet-catalogue .sheet-screen { grid-area: screen; }
.sheet-catalogue .tblock { grid-area: tb; align-self: end; }
.sheet-catalogue .status { border-left-color: var(--accent); }

/* tally: the catalogue's own before and after, set as type */
.tally { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(16px, 3vw, 40px); font: 800 clamp(5rem, 16vw, 15rem)/.8 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -0.03em; }
.tally-from { position: relative; color: var(--seam); }
.tally-from::after { content: ""; position: absolute; left: -2%; right: -2%; top: 46%; height: .07em; background: var(--accent, var(--ember)); transform-origin: left; }
.tally-to { color: var(--accent, var(--ember)); }
.tally-note { flex-basis: 100%; margin-top: 18px; font: 400 .875rem/1.4 var(--text); letter-spacing: 0; color: var(--ash); }

/* devices: browser and phone overlapping */
.devices { position: relative; padding-bottom: 7%; }
.devices .browser { width: 88%; }
.devices .phone { position: absolute; right: 0; bottom: 0; width: 24%; padding: 6px; border: 1px solid #2c2e31; border-radius: 26px; background: #0d0e0f; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }
.devices .phone img { border-radius: 20px; width: 100%; }

/* browser frame, with the screen that scrolls through the real page */
.browser { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #0f1011; box-shadow: 0 40px 80px -36px rgba(0,0,0,.75); }
.sheet-marine .browser { box-shadow: 0 40px 80px -36px rgba(40,30,10,.55); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: #1c1d20; border-bottom: 1px solid rgba(255,255,255,.06); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3c40; }
.browser-bar span { flex: 0 1 240px; min-width: 0; margin-left: 10px; height: 19px; padding-inline: 9px; border-radius: 5px; background: rgba(255,255,255,.06); color: var(--ash); font: 400 .6875rem/19px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pan { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--graphite); }
.pan-img { position: absolute; inset: 0 0 auto; width: 100%; height: auto; will-change: transform; transform: translate3d(0, 0, 0); transition: transform .9s var(--ease-io); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pan.is-panning .pan-img { transform: translate3d(0, var(--pan, 0px), 0); transition-duration: var(--pan-dur, 6s); transition-timing-function: cubic-bezier(.45, .05, .35, 1); }
}

/* title block: the corner table of a drawing */
.tblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--tb-line, var(--seam)); border-left: 1px solid var(--tb-line, var(--seam)); font-family: var(--mono); }
.tblock > div { padding: 10px 12px; border-right: 1px solid var(--tb-line, var(--seam)); border-bottom: 1px solid var(--tb-line, var(--seam)); }
.tblock dt { font-size: .6875rem; color: var(--ash); }
.tblock dd { font-size: .8125rem; line-height: 1.4; font-weight: 500; }
.sheet-marine .tblock, .paper .tblock { --tb-line: var(--paper-line); }
.sheet-marine .tblock dt { color: var(--ink-soft); }

/* ---------- the stern-gear drawing from the marine build ---------- */
.drawing { --dl: var(--ink); --dt: var(--ink); --da: var(--ember-deep); --dbg: var(--bone); position: relative; }
.drawing svg { display: block; width: 100%; height: auto; overflow: visible; }
.drawing .ln { fill: none; stroke: var(--dl); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.drawing .thin { stroke-width: .75; opacity: .7; }
.drawing .thick { stroke-width: 2.2; }
.drawing .hid { stroke-dasharray: 5 4; }
.drawing .ctr { fill: none; stroke: var(--dl); stroke-width: .6; opacity: .5; stroke-dasharray: 18 4 2 4; vector-effect: non-scaling-stroke; }
.drawing .fill { fill: color-mix(in srgb, var(--da) 7%, transparent); }
.drawing .hatch, .drawing .xh, .drawing .hatch2 { fill: color-mix(in srgb, var(--dl) 14%, transparent); }
.drawing .lead { stroke: var(--da); stroke-width: .75; opacity: .7; vector-effect: non-scaling-stroke; }
.drawing .dot, .drawing .arw { fill: var(--da); }
.drawing path.arw { stroke: var(--da); stroke-width: .75; vector-effect: non-scaling-stroke; }
.drawing text { font-family: var(--mono); font-size: 13px; fill: var(--dt); }
.drawing text.note, .drawing .zone text { font-size: 9px; fill: var(--dt); opacity: .65; }
.drawing text.vtitle { font-size: 10.5px; fill: var(--dt); text-decoration: underline; }
.drawing text.dimt, .drawing text.cut { font-size: 12px; fill: var(--da); }
.drawing .bal { fill: var(--dbg); stroke: var(--da); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .2s; }
.drawing text.bn { font-size: 12px; font-weight: 500; text-anchor: middle; fill: var(--da); }
/* the whole box around a part responds, not only its thin strokes and letters */
.drawing .part { cursor: pointer; outline: none; pointer-events: bounding-box; }
.drawing .part text, .drawing .part .lead { transition: opacity .2s, fill .2s, stroke-width .2s; }
.drawing svg:has(.part:hover, .part:focus-visible, .part.is-on) .part:not(:hover, :focus-visible, .is-on) { opacity: .4; }
.drawing .part:hover .bal, .drawing .part:focus-visible .bal, .drawing .part.is-on .bal { fill: var(--da); }
.drawing .part:hover text.bn, .drawing .part:focus-visible text.bn, .drawing .part.is-on text.bn { fill: var(--dbg); }
.drawing .part:hover .lead, .drawing .part:focus-visible .lead, .drawing .part.is-on .lead { opacity: 1; stroke-width: 1.6; }
.drawing .part:focus-visible text:not(.bn) { text-decoration: underline; }
.readout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid currentColor; font: 400 .8125rem/1.4 var(--mono); opacity: .9; }
.readout span { opacity: .7; }
.readout b { font-weight: 500; color: var(--da); }
.on-dark .drawing, .drawing.on-dark, .cs-marine .drawing { --dl: #e7dfcf; --dt: #e7dfcf; --da: var(--ember); --dbg: var(--graphite); }

/* ---------- gallery with filters and a viewer ---------- */
.gallery-sec { padding-block: clamp(72px, 9vw, 128px); }
.gal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; margin-bottom: clamp(28px, 4vw, 44px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font-size: .9375rem; border: 1px solid var(--seam); border-radius: 999px; background: none; color: var(--ash); font-weight: 500; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.chips button span { font: 400 .75rem/1 var(--text); opacity: .8; }
.chips button:hover { color: var(--bone); border-color: var(--ash); }
.chips button[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); align-items: start; }
.g-lead { grid-column: span 4; }
.g-side { grid-column: span 2; }
.g-half { grid-column: span 3; }
.g-side button { margin-inline: auto; }
.g-item[hidden] { display: none; }
.g-item button { display: block; width: 100%; padding: 0; border: 1px solid var(--seam); border-radius: 8px; overflow: hidden; background: var(--coal); cursor: zoom-in; }
.g-item img { width: 100%; transition: transform .7s var(--ease); }
.g-item button:hover img { transform: scale(1.04); }
.g-phone button { width: min(100%, 230px); border-radius: 22px; border: 5px solid #0d0e0f; }
.g-side p { text-align: center; }
.g-item p { margin-top: 10px; color: var(--ash); font-size: .9375rem; }
.gal-note { margin-top: 12px; color: var(--ash); font-size: .9375rem; max-width: 72ch; }
.lightbox { width: min(1200px, 94vw); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--seam); border-radius: 12px; background: var(--graphite); color: var(--bone); }
.lightbox::backdrop { background: rgba(10,10,11,.86); }
.lightbox[open] { animation: lb-in .35s var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.lightbox figure { padding: 14px 14px 0; }
.lightbox img { width: 100%; max-height: 74vh; object-fit: contain; border-radius: 6px; }
.lightbox figcaption { margin-top: 10px; color: var(--ash); }
.lb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; }
.lb-controls button { min-height: 44px; padding: 0 16px; border: 1px solid var(--seam); border-radius: 6px; background: none; cursor: pointer; }
.lb-controls button:hover { border-color: var(--ember); color: var(--ember); }
.lb-controls span { font: 400 .8125rem/1 var(--text); color: var(--ash); }
.lb-close { margin-left: auto; }

/* ---------- services as an index you open ---------- */
.index-sec { padding-block: clamp(72px, 9vw, 128px); background: var(--bone); color: var(--ink); color-scheme: light; }
.index-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.index-head p { color: var(--ink-soft); max-width: 44ch; }
.svc-index { border-top: 1.5px solid var(--ink); }
.svc-row { border-bottom: 1px solid var(--paper-line); }
.svc-row h3 { font: inherit; }
.svc-row h3 button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: clamp(16px, 2vw, 24px) 0; border: 0; background: none; text-align: left; cursor: pointer; }
.svc-name { font: 660 clamp(2.1rem, 5.6vw, 4.8rem)/.95 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -0.02em; transition: color .25s, transform .5s var(--ease); }
.svc-row h3 button:hover .svc-name { color: var(--ember-deep); transform: translateX(10px); }
.svc-sign { position: relative; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; }
.svc-sign::before, .svc-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: var(--ink); transition: transform .45s var(--ease); }
.svc-sign::after { transform: rotate(90deg); }
.svc-row.is-open .svc-sign::after { transform: rotate(0deg); }
.svc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.svc-row.is-open .svc-body { grid-template-rows: 1fr; }
.svc-inner { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: "value proof" "cols proof"; gap: 20px clamp(28px, 4vw, 64px); }
.svc-row.is-open .svc-inner { padding-bottom: clamp(24px, 3vw, 40px); }
.svc-value { grid-area: value; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; max-width: 52ch; }
.svc-cols { grid-area: cols; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }
.svc-cols h4, .svc-fit h3, .svc-get h3 { font: 400 .8125rem/1.4 var(--text); color: var(--ink-soft); margin-bottom: 8px; }
.svc-proof { grid-area: proof; display: block; align-self: start; text-decoration: none; }
.svc-proof img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--paper-line); border-radius: 6px; transition: transform .6s var(--ease); }
.svc-proof span { display: block; margin-top: 10px; font: 400 .8125rem/1.45 var(--text); }
.svc-proof:hover img { transform: translateY(-4px); }
.index-more { margin-top: clamp(28px, 4vw, 44px); }
.ticks li, .dashes li, .checklist li { position: relative; padding: 9px 0 9px 30px; border-top: 1px solid var(--line, var(--seam)); }
.ticks li:first-child, .dashes li:first-child { border-top: 0; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 12px; height: 6px; border-left: 2px solid var(--ember); border-bottom: 2px solid var(--ember); transform: rotate(-45deg); }
.dashes li { color: var(--ash); }
.dashes li::before { content: ""; position: absolute; left: 3px; top: 1.35em; width: 12px; height: 2px; background: var(--ash); }
.index-sec .ticks, .paper .ticks, .lens .ticks { --line: var(--paper-line); }
.index-sec .ticks li::before, .paper .ticks li::before, .lens .ticks li::before { border-color: var(--ember-deep); }

/* ---------- one engineer: a sentence that strikes out the alternatives ---------- */
.solo { padding-block: clamp(80px, 11vw, 160px); }
.solo-line { max-width: 18ch; font-size: clamp(2.4rem, 6.4vw, 6rem); font-weight: 720; font-variation-settings: "wdth" 78; line-height: .98; }
.solo-line s { position: relative; text-decoration: none; color: var(--ash); }
.solo-line s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .07em; background: var(--ember); transform-origin: left; }
.solo-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 80px); max-width: 1000px; margin: clamp(36px, 5vw, 64px) 0 0 auto; color: var(--ash); }

/* ---------- closing shout ---------- */
.shout { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 140px) clamp(56px, 8vw, 104px); background: var(--coal); border-top: 1px solid var(--seam); }
.shout-big { display: flex; flex-wrap: wrap; gap: 0 .2em; font: 800 clamp(4.4rem, 17vw, 17rem)/.82 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -0.012em; transform-origin: 0 100%; }
.shout-word { display: inline-flex; }
.ch { display: inline-block; transform: translateY(var(--lift, 0px)) rotate(var(--tw, 0deg)); transition: transform .55s var(--ease), color .35s; }
.ch.hot { color: var(--ember); }
.shout-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(28px, 4vw, 48px); }
.shout-row p { color: var(--ash); max-width: 44ch; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--seam); padding-block: 48px 56px; color: var(--ash); font-size: .9375rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); gap: 28px 40px; }
.foot-name { font: 700 1.25rem/1.3 var(--display); font-variation-settings: "wdth" 80; color: var(--bone); }
.foot-links a { display: inline-block; padding-block: 10px; text-decoration: none; }
.foot-links a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }
.foot-note { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--seam); max-width: 78ch; }

/* ---------- inner page heads ---------- */
.page-head { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.page-title { font-size: clamp(2.8rem, 6.4vw, 6.2rem); font-weight: 640; font-variation-settings: "wdth" 85; line-height: .95; letter-spacing: -0.02em; max-width: 18ch; }
.page-head .lede { margin-top: 28px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.jump a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--seam); border-radius: 999px; text-decoration: none; font-size: .9375rem; transition: border-color .2s, color .2s; }
.jump a:hover { border-color: var(--ember); color: var(--ember); }

/* ---------- services page ---------- */
.svc-sheet { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--seam); }
.svc-sheet:nth-child(even) { background: var(--coal); }
.svc-sheet-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "name value" "fit get" "proof get"; gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.svc-sheet h2 { grid-area: name; font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 660; font-variation-settings: "wdth" 82; line-height: .95; }
.svc-sheet .svc-value { grid-area: value; color: var(--bone); align-self: end; }
.svc-fit { grid-area: fit; }
.svc-get { grid-area: get; }
.svc-sheet .svc-proof { grid-area: proof; max-width: 420px; }
.svc-sheet .svc-proof img { border-color: var(--seam); }
.svc-fit h3, .svc-get h3 { color: var(--ash); }
.paper { background: var(--bone); color: var(--ink); color-scheme: light; }
.included { padding-block: clamp(72px, 9vw, 128px); }
.included-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px); }
.checklist { --line: var(--paper-line); border-top: 1.5px solid var(--ink); }
.checklist li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 6px 24px; padding: 18px 0 18px 34px; }
.checklist li:first-child { border-top: 0; }
.checklist li::before { content: ""; position: absolute; left: 3px; top: 1.6em; width: 13px; height: 7px; border-left: 2px solid var(--ember-deep); border-bottom: 2px solid var(--ember-deep); transform: rotate(-45deg); }
.checklist b { font: 650 1.25rem/1.25 var(--display); font-variation-settings: "wdth" 85; }
.checklist span { color: var(--ink-soft); }
.process { padding-block: clamp(72px, 9vw, 128px); }
.process h2, .cs-steps h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 24px; counter-reset: st; }
.cs-steps .timeline { --n: 4; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--ember); transform-origin: left; }
.timeline li { position: relative; counter-increment: st; padding-top: 44px; }
.node { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--graphite); border: 2px solid var(--ember); }
.timeline h3::before { content: counter(st, decimal-leading-zero); display: block; margin-bottom: 8px; font: 500 .8125rem/1 var(--text); color: var(--ember); }
.timeline h3 { font: 680 clamp(1.4rem, 2.2vw, 2rem)/1.05 var(--display); font-variation-settings: "wdth" 82; }
.timeline p { margin-top: 10px; color: var(--ash); font-size: .9688rem; max-width: 30ch; }

/* ---------- contact ---------- */
.contact { padding-bottom: clamp(72px, 9vw, 128px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px clamp(32px, 7vw, 112px); align-items: start; }
.form { display: grid; gap: 28px; }
.field label, .field legend { display: block; margin-bottom: 8px; font-weight: 600; }
.req { margin-left: 6px; color: var(--ash); font: 400 .75rem/1 var(--text); }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 12px 2px; border: 0; border-bottom: 1.5px solid var(--seam); border-radius: 0; background: transparent; font-size: 1.125rem; transition: border-color .25s, box-shadow .35s var(--ease); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; padding-top: 14px; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--ash); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ember); box-shadow: 0 2px 0 0 var(--ember); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.hint { margin-top: 8px; color: var(--ash); font-size: .9375rem; }
.err { display: none; margin-top: 8px; color: #ffb4a1; font-size: .9375rem; }
.err::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #ffb4a1; color: var(--ink); font-weight: 700; font-size: .75rem; }
.field :is(input, textarea):user-invalid, .form.tried .field :is(input, textarea):invalid { border-bottom-color: #ffb4a1; }
.field :is(input, textarea):user-invalid ~ .err, .form.tried .field :is(input, textarea):invalid ~ .err { display: block; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { position: relative; margin: 0; font-weight: 500; cursor: pointer; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--seam); border-radius: 999px; color: var(--ash); transition: background-color .2s, color .2s, border-color .2s; }
.choices label:hover span { border-color: var(--ash); color: var(--bone); }
.choices input:checked + span { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.choices input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 3px; }
.form-actions { margin-top: 4px; }
.form-status { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--ember); border-radius: 8px; }
.form-status[hidden] { display: none; }
.form-status svg { flex: none; fill: none; stroke: var(--ember); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-status circle, .form-status path { stroke-dasharray: 120; stroke-dashoffset: 0; }
.contact-side h2 { font-size: 1.75rem; }
.contact-side h2:not(:first-child) { margin-top: 44px; }
.direct { margin-top: 18px; display: grid; gap: 10px; }
.direct-link { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--seam); border-radius: 8px; text-decoration: none; transition: border-color .2s; }
.direct-link:hover { border-color: var(--ember); }
.direct-link span { display: inline-flex; align-items: center; gap: 8px; color: var(--ash); font-size: .9375rem; }
.direct-link strong { font-weight: 600; overflow-wrap: anywhere; }
.next { counter-reset: n; margin-top: 18px; }
.next li { counter-increment: n; position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--seam); color: var(--ash); }
.next li::before { content: counter(n); position: absolute; left: 0; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--ember); border-radius: 50%; color: var(--ember); font: 500 .75rem/1 var(--text); }

/* ---------- case studies ---------- */
.cs-head { padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.cs-head-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "intro side" "intro tb"; gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.cs-intro { grid-area: intro; }
.cs-head-grid > :nth-child(2) { grid-area: side; }
.cs-head-grid > .tblock { grid-area: tb; }
.crumb { margin-bottom: 24px; font: 400 .8125rem/1.4 var(--text); color: var(--ash); }
.crumb a { text-underline-offset: 4px; }
.crumb a:hover { color: var(--bone); }
.cs-title { font-size: clamp(2.5rem, 5.2vw, 5.2rem); font-weight: 660; font-variation-settings: "wdth" 82; line-height: .95; letter-spacing: -0.02em; }
.cs-head .lede { margin-top: 24px; }
.cs-marine .cs-drawing { align-self: center; }
.cs-catalogue { background: var(--coal); --accent: #c6a46c; }
.cs-catalogue .tally { align-self: center; justify-content: flex-end; }
.cs-catalogue .tally-note { text-align: right; }
.cs-portal .cs-devices { align-self: center; }
.cs-cover-sec { padding-block: clamp(16px, 3vw, 40px) clamp(56px, 7vw, 96px); }
.cover-cap { margin-top: 12px; font: 400 .8125rem/1.4 var(--text); color: var(--ash); }
.cs-compare, .cs-approach, .cs-built, .cs-screens, .cs-verify, .cs-close, .cs-pull, .cs-rules, .cs-roles, .cs-flow, .cs-try, .cs-steps { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--seam); }
.cs-compare h2, .cs-built h2, .cs-rules h2, .cs-flow h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.compare th, .compare td { padding: 18px 20px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--seam); }
.compare thead th { font: 400 .8125rem/1.4 var(--text); color: var(--ash); border-bottom: 1.5px solid var(--bone); }
.compare thead th:last-child { color: var(--ember); }
.compare tbody th { width: 18%; font: 680 1.5rem/1.1 var(--display); font-variation-settings: "wdth" 80; }
.compare tbody td:nth-child(2) { color: var(--ash); width: 38%; }
.approach-grid, .why-grid, .demo-grid, .verify-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(32px, 6vw, 96px); }
.approach-body p:first-child { font: 500 clamp(1.4rem, 2.4vw, 2.1rem)/1.25 var(--display); font-variation-settings: "wdth" 90; margin-bottom: 20px; max-width: 34ch; }
.approach-body p + p { margin-top: 14px; max-width: 64ch; color: var(--ash); }
.why-body p { max-width: 64ch; }
.why-body p + p { margin-top: 14px; color: var(--ash); }
.demo-grid .btn { margin-top: 20px; }
.bom th, .bom td { padding: 16px 20px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--seam); }
.bom thead th { font: 400 .8125rem/1.4 var(--text); color: var(--ash); border-bottom: 1.5px solid currentColor; }
.bom tbody td:first-child { width: 72px; font: 500 .875rem/1.6 var(--text); color: var(--ember); }
.bom tbody th { width: 30%; font-weight: 600; }
.bom tbody td:last-child { color: var(--ash); }
.built-dark { background: var(--coal); }
.shots-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); }
.shots-hint { font: 400 .8125rem/1.4 var(--text); color: var(--ash); }
.shots { display: flex; gap: clamp(16px, 2.4vw, 32px); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scrollbar-width: thin; scrollbar-color: var(--seam) transparent; cursor: grab; }
.shots.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.shots .shot { flex: none; width: min(78vw, 780px); scroll-snap-align: start; }
.shots .shot-phone { width: min(46vw, 250px); }
.shots img { pointer-events: none; -webkit-user-drag: none; border: 1px solid var(--seam); border-radius: 8px; }
.shots .shot-phone img { border: 5px solid #0d0e0f; border-radius: 24px; }
.shots figcaption { margin-top: 10px; color: var(--ash); font-size: .9375rem; }
.shot-note { margin-top: 20px; color: var(--ash); font-size: .9375rem; max-width: 78ch; }
/* verification: a paper inspection sheet */
.cs-verify.paper { border-top: 0; --line: var(--paper-line); }
.verify-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; padding-bottom: clamp(24px, 3vw, 36px); margin-bottom: clamp(24px, 3vw, 36px); border-bottom: 1.5px solid var(--ink); }
.verify-head .tblock { --tb-line: var(--paper-line); }
.verify-head .tblock dt { color: var(--ink-soft); }
.cs-verify.paper .verify-lists h3 { color: var(--ink-soft); }
.cs-verify.paper .ticks li::before { border-color: var(--ember-deep); }
.cs-verify.paper .dashes li { color: var(--ink-soft); }
.cs-verify.paper .dashes li::before { background: var(--ink-soft); }
/* the close: one statement, then the demo beside the detail */
.cs-close h2 { font: 500 1rem/1.4 var(--text); color: var(--ash); letter-spacing: 0; }
.close-statement { max-width: 26ch; margin-top: clamp(20px, 3vw, 32px); font: 600 clamp(1.8rem, 3.8vw, 3.4rem)/1.08 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -0.02em; }
.close-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 6vw, 96px); margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.close-cols .why-body p { color: var(--ash); max-width: 60ch; }
.demo-box { padding: 4px 0 4px 20px; border-left: 2px solid var(--ember); }
.demo-box h3 { margin-bottom: 8px; }
.demo-box p { color: var(--ash); }
.demo-box .btn { margin-top: 18px; }
/* catalogue opening: its own range index */
.range-index { align-self: center; display: grid; gap: 22px; }
.ri-zone h3 { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1.5px solid #c6a46c; font: 400 .8125rem/1.4 var(--text); color: #c6a46c; }
.ri-zone ul { columns: 2; column-gap: 28px; }
.ri-zone li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--seam); break-inside: avoid; font-size: .9375rem; }
.ri-zone b { font: 500 .8125rem/1.6 var(--text); color: var(--ash); }
.ri-total { font: 800 clamp(2.2rem, 4vw, 3.4rem)/1 var(--display); font-variation-settings: "wdth" 75; color: #c6a46c; }
.verify-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.verify-lists h3 { margin-bottom: 10px; font: 400 .8125rem/1.4 var(--text); color: var(--ash); }
.cs-next { border-top: 1px solid var(--seam); }
.cs-next a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "label img" "title img"; gap: 6px 40px; align-items: center; padding-block: clamp(48px, 7vw, 96px); text-decoration: none; }
.cs-next span { grid-area: label; font: 400 .8125rem/1.4 var(--text); color: var(--ash); }
.cs-next strong { grid-area: title; font: 760 clamp(2rem, 5vw, 4.4rem)/.95 var(--display); font-variation-settings: "wdth" 76; letter-spacing: -0.02em; transition: color .3s; }
.cs-next img { grid-area: img; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--seam); border-radius: 8px; transition: transform .7s var(--ease); }
.cs-next a:hover strong { color: var(--ember); }
.cs-next a:hover img { transform: translateX(-12px) rotate(-1.5deg); }

/* portal: typography-led challenge, rules, and the role lens */
.pull { max-width: 22ch; font: 650 clamp(2rem, 4.6vw, 4rem)/1.04 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -0.02em; }
.pull-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 80px); max-width: 1000px; margin: clamp(28px, 4vw, 48px) 0 0 auto; color: var(--ash); }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 80px); }
.rules li { padding-top: 18px; border-top: 2px solid var(--accent, #e35a24); }
.cs-portal ~ .cs-rules { --accent: #e35a24; }
.rule-a { font: 650 clamp(1.3rem, 2vw, 1.75rem)/1.2 var(--display); font-variation-settings: "wdth" 85; }
.rule-b { margin-top: 10px; color: var(--ash); }
.roles-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.roles-grid > div:first-child p { margin-top: 16px; color: var(--ash); max-width: 44ch; }
.role-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.role-picks label { position: relative; cursor: pointer; }
.role-picks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.role-picks span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--seam); border-radius: 999px; color: var(--ash); font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.role-picks label:hover span { color: var(--bone); border-color: var(--ash); }
.role-picks input:checked + span { background: #e35a24; border-color: #e35a24; color: var(--ink); }
.role-picks input:focus-visible + span { outline: 2px solid var(--bone); outline-offset: 3px; }
.lens { padding: clamp(20px, 3vw, 36px); border-radius: 10px; background: var(--bone); color: var(--ink); color-scheme: light; }
.lens-title { font: 760 clamp(2rem, 4vw, 3.2rem)/1 var(--display); font-variation-settings: "wdth" 76; margin-bottom: 18px; }
.lens h3 { margin: 18px 0 6px; font: 400 .8125rem/1.4 var(--text); color: var(--ink-soft); }
.lens-booking { display: inline-block; padding: 8px 12px; border: 1px dashed var(--ink-soft); border-radius: 6px; font: 500 .9375rem/1.4 var(--text); }
.lens-note { margin-top: 14px; color: var(--ink-soft); font-size: .9375rem; }
.lens.is-swapping > * { animation: lens .45s var(--ease) both; }
@keyframes lens { from { opacity: 0; transform: translateY(8px); } }

/* catalogue: the clean-up as a flow, and a search you can try */
.flow { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr 1fr; gap: 0; align-items: stretch; }
.flow > li { position: relative; padding: 20px 28px 20px 0; border-top: 2px solid var(--accent, #c6a46c); }
.cs-flow { --accent: #c6a46c; }
.flow > li > b { display: block; font: 800 clamp(3rem, 6vw, 5.4rem)/.9 var(--display); font-variation-settings: "wdth" 75; color: var(--accent); }
.flow > li:first-child > b { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: .06em; }
.flow > li > span { display: block; margin-top: 10px; color: var(--ash); font-size: .9375rem; max-width: 22ch; }
.flow-fix ul li { position: relative; padding: 6px 0 6px 18px; font: 400 .8125rem/1.45 var(--text); color: var(--bone); }
.flow-fix ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1.5px; background: var(--accent); }
.try-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.try-grid > div:first-child p { margin-top: 16px; color: var(--ash); max-width: 44ch; }
.try-list { font: 500 .9375rem/1.4 var(--text); color: var(--bone) !important; }
.try-list span { color: #c6a46c; }
.try-box label { display: block; margin-bottom: 8px; font: 400 .8125rem/1.4 var(--text); color: var(--ash); }
.try-box input { width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--seam); border-radius: 8px; background: var(--coal); font-size: 1.125rem; }
.try-box input:focus { outline: none; border-color: #c6a46c; box-shadow: 0 0 0 3px rgba(198,164,108,.25); }
.try-meta { margin-top: 10px; min-height: 1.4em; font: 400 .8125rem/1.4 var(--text); color: var(--ash); }
.try-results { margin-top: 6px; border-top: 1px solid var(--seam); }
.try-results li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--seam); }
.try-results li span { display: block; }
.try-results li small { display: block; color: var(--ash); font: 400 .75rem/1.4 var(--text); }
.try-results mark { background: none; color: #c6a46c; }
.try-results button { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--seam); border-radius: 6px; background: none; font-size: .875rem; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.try-results button:hover { border-color: #c6a46c; }
.try-results button[aria-pressed="true"] { background: #c6a46c; border-color: #c6a46c; color: var(--ink); }

/* ---------- motion: art-directed, only with JavaScript and when the visitor allows it ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-head { view-transition-name: site-head; }
  ::view-transition-old(root) { animation: .3s var(--ease-io) both vt-out; }
  ::view-transition-new(root) { animation: .5s var(--ease) both vt-in; }
  ::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease); }

  /* home: the one load sequence */
  .motion [data-page="home"] .hero-title .ln > span { animation: rise 1s var(--ease) both; }
  .motion [data-page="home"] .hero-title .ln:nth-child(2) > span { animation-delay: .08s; }
  .motion [data-page="home"] .hero-title .ln:nth-child(3) > span { animation-delay: .16s; }
  .motion [data-page="home"] .hero-title .ln:nth-child(4) > span { animation-delay: .24s; }
  .motion [data-page="home"] .proof a { animation: wipe-up 1s var(--ease-io) both; }
  .motion [data-page="home"] .proof:nth-child(1) a { animation-delay: .75s; }
  .motion [data-page="home"] .proof:nth-child(2) a { animation-delay: .9s; }
  .motion [data-page="home"] .proof:nth-child(3) a { animation-delay: 1.05s; }
  .motion [data-page="home"] .proof figcaption, .motion [data-page="home"] .hero-foot { animation: settle .8s 1.1s var(--ease) both; }
  .motion .leaders path { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1s var(--ease-io), opacity .25s, stroke-width .25s; }
  .motion .leaders.is-drawn path { stroke-dashoffset: 0; }
  .motion .leaders circle { opacity: 0; transition: opacity .3s .9s; }
  .motion .leaders.is-drawn circle { opacity: .45; }

  /* page titles and section headings rise out of a mask, word by word */
  .motion .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
  .motion .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
  .motion .in .w > span { transform: none; }
  .motion :is(.page-title, .cs-title, main h2:not(.shout-big):not(.solo-line)):not(.split) { visibility: hidden; }

  /* screens open from their bottom edge */
  .motion [data-wipe] { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-io); }
  .motion [data-wipe].in { clip-path: inset(0 0 0 0); }

  /* lines draw from their origin */
  .motion .tally-from::after, .motion .solo-line s::after, .motion .timeline::before { transform: scaleX(0); transition: transform 1.1s var(--ease-io) .2s; }
  .motion .in .tally-from::after, .motion .tally.in .tally-from::after, .motion .solo-line.in s::after, .motion .timeline.in::before { transform: none; }
  .motion .solo-line.in s:nth-of-type(2)::after { transition-delay: .55s; }
  .motion .timeline li { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + .3s); }
  .motion .timeline.in li { opacity: 1; }
  .motion .drawing[data-drawing] .ln, .motion .drawing[data-drawing] .ctr { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion .drawing[data-drawing].in .ln, .motion .drawing[data-drawing].in .ctr { animation: draw 1.8s var(--ease-io) forwards; animation-delay: var(--d, 0s); }
  .motion .drawing[data-drawing] .part, .motion .drawing[data-drawing] text { opacity: 0; transition: opacity .6s 1.2s; }
  .motion .drawing[data-drawing].in .part, .motion .drawing[data-drawing].in text { opacity: 1; }
  .motion .drawing[data-drawing].in svg:has(.part:hover, .part:focus-visible, .part.is-on) .part:not(:hover, :focus-visible, .is-on) { opacity: .4; transition-delay: 0s; }
  .motion .flow > li { opacity: 0; transform: translateX(-16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 150ms); }
  .motion .flow.in > li { opacity: 1; transform: none; }
  .form-status:not([hidden]) circle, .form-status:not([hidden]) path { animation: check .9s var(--ease-io) both; }
  .form-status:not([hidden]) path { animation-delay: .35s; }
  .band { animation: settle 1s .9s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-20px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(32px); } }
@keyframes rise { from { transform: translateY(108%); } }
@keyframes settle { from { opacity: 0; transform: translateY(18px); } }
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes check { from { stroke-dashoffset: 120; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band-track { animation: none; }
  .btn, .roll > span, .roll::after, .svc-body, .ch, .pan-img { transition: none; }
}

/* ---------- smaller screens: recomposed, not shrunk ---------- */
@media (max-width: 1024px) {
  .hero-sheet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "proofs" "foot"; }
  .proofs { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  .proof { scroll-snap-align: start; }
  .leaders { display: none; }
  .seam-head, .index-head, .included-grid, .approach-grid, .why-grid, .demo-grid, .verify-grid, .roles-grid, .try-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet-grid, .sheet-portal .sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet-marine .sheet-grid { grid-template-areas: "text" "drawing" "screen" "tb"; }
  .sheet-marine .sheet-screen { margin-top: 0; }
  .sheet-portal .sheet-grid { grid-template-areas: "text" "devices" "tb"; }
  .sheet-catalogue .sheet-grid { grid-template-areas: "tally" "text" "screen" "tb"; }
  .cs-head-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "side" "tb"; }
  .cs-catalogue .tally { justify-content: flex-start; }
  .cs-catalogue .tally-note { text-align: left; }
  .svc-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "value" "cols" "proof"; }
  .svc-proof { max-width: 420px; }
  .svc-sheet-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "value" "fit" "get" "proof"; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-fix { grid-column: 1 / -1; }
  .shout-row { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .nav, .head-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .head-row { min-height: 64px; }
  .menu { inset: 64px 0 0; }
  .hero-title { font-size: clamp(3rem, 15.5vw, 5.4rem); line-height: .92; }
  .hero-title .bal { font-size: .6875rem; }
  .proofs { grid-template-columns: repeat(3, 72vw); }
  .bp-l { left: 3px; top: 3px; padding: 2px 5px; font-size: .5625rem; border-left-width: 1.5px; }
  .bp-l > span, .bp-dim { display: none; }
  .seam-word { top: 8px; font-size: .625rem; }
  .seam-grip { width: 40px; height: 40px; left: -20px; margin-top: -20px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .g-lead, .g-side, .g-half { grid-column: auto; }
  .verify-head, .close-cols { grid-template-columns: minmax(0, 1fr); }
  .ri-zone ul { columns: 1; }
  .seam-cap { position: static; margin-top: 12px; padding: 0; background: none; }
  .devices .browser { width: 92%; }
  .devices .phone { width: 30%; }
  .tblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tally { font-size: clamp(4.6rem, 28vw, 9rem); }
  .solo-cols, .pull-rest, .rules, .verify-lists, .svc-cols { grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 40px; }
  .timeline::before { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .motion .timeline::before { transform: scaleY(0); }
  .motion .timeline.in::before { transform: none; }
  .timeline li { padding-top: 0; }
  .node { left: -40px; }
  .checklist li { grid-template-columns: minmax(0, 1fr); }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; }
  .compare tr { padding: 18px 0; border-bottom: 1px solid var(--seam); }
  .compare th, .compare td { padding: 4px 0; border: 0; }
  .compare td:nth-child(2)::before { content: "Before: "; color: var(--ash); font-family: var(--text); font-size: .75rem; }
  .compare td:nth-child(3)::before { content: "Concept: "; color: var(--ember); font-family: var(--text); font-size: .75rem; }
  .bom thead { display: none; }
  .bom tbody tr { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 8px; padding: 14px 0; border-bottom: 1px solid var(--seam); }
  .bom th, .bom td { padding: 0; border: 0; width: auto !important; }
  .bom tbody td:first-child { grid-row: span 2; }
  .bom tbody td:last-child { grid-column: 2; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .cs-next a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "title" "img"; }
  .cs-next img { max-width: 360px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .actions .btn { flex: 1 1 auto; }
  .lb-controls { justify-content: space-between; }
  .lb-close { margin-left: 0; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .mark { font-size: 1.0625rem; }
}

/* ---------- the home hero fits one screen ---------- */
@media (min-width: 1025px) {
  /* the hero is exactly the screen below the header; the three screens shrink to share that height */
  /* bottom padding leaves room for the tilted band, whose raised edge would otherwise cut into the hero */
  .hero { height: calc(100svh - 72px); min-height: 560px; max-height: 1000px; padding-block: clamp(16px, 3vh, 40px) clamp(44px, 7vh, 72px); }
  /* headline and introduction stay together as one block, centred against the column of screens */
  .hero > .hero-sheet { height: 100%; row-gap: 0; grid-template-areas: ". proofs" "title proofs" "foot proofs" ". proofs"; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); }
  .hero-title { align-self: end; font-size: clamp(3rem, min(7.6vw, 12vh), 8rem); }
  .hero-foot { gap: 20px; margin-top: clamp(24px, 4vh, 44px); }
  .proofs { height: 100%; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vh, 18px); padding-top: 0; }
  .proof { display: flex; flex-direction: column; min-height: 0; }
  .proof a { flex: 1 1 auto; min-height: 0; }
  .proof img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .proof figcaption { flex: none; margin-top: 6px; font-size: .75rem; line-height: 1.35; }
}
@media (max-width: 1024px) {
  /* smaller screens: headline, introduction and actions first, so they share the first screen; the work follows */
  .hero-sheet { grid-template-areas: "title" "foot" "proofs"; }
  .hero { padding-top: clamp(20px, 4vh, 40px); }
}