/* ============================================================
   Style study 01 — Blueprint
   Paper + graphite + one signal orange. Hairline grid, rulers,
   mono labels, tight uppercase grotesk headlines.
   ============================================================ */

:root {
  --bg: #f2f1ec;
  --paper-2: #e9e8e2;
  --ink: #282828;
  --ink-72: rgba(40, 40, 40, .72);
  --ink-48: rgba(40, 40, 40, .48);
  --ghost: #b9b8b3;
  --line: #c6c5c0;
  --line-soft: #dcdbd5;
  --accent: #fa3600;
  --accent-soft: #f7a48c;

  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  /* fluid scale — tracks viewport width like the reference */
  --fs-xs: clamp(10px, .68vw, 12px);
  --fs-s: clamp(12px, .95vw, 15px);
  --fs-b: clamp(14px, 1.1vw, 17px);
  --fs-sm: clamp(20px, 1.75vw, 28px);
  --fs-md: clamp(24px, 2.1vw, 34px);
  --fs-lg: clamp(28px, 2.6vw, 42px);
  --fs-xl: clamp(34px, 3.9vw, 64px);

  --gut: 8px;
  --hdr: 56px;
  --ease: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-b);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
  padding: var(--gut);
}
body { overflow-x: clip; }
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
svg { display: block; }
svg .ln { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }

.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: uppercase; font-size: var(--fs-xs); }
.muted { color: var(--ink-48); }
.accent { color: var(--accent) !important; }
.label { display: block; color: var(--ink-72); margin-bottom: 1.2em; }

.h-xl, .h-lg, .h-md, .h-sm {
  font-weight: 700; text-transform: uppercase; line-height: .96; letter-spacing: -.035em; color: var(--ink);
}
.h-xl { font-size: var(--fs-xl); }
.h-lg { font-size: var(--fs-lg); font-weight: 600; }
.h-md { font-size: var(--fs-md); font-weight: 600; }
.h-sm { font-size: var(--fs-sm); font-weight: 600; }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .48  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- frame + hairlines ---------- */
.frame { border: 1px solid var(--line); position: relative; }
section, footer { position: relative; border-top: 1px solid var(--line); }

.plus { position: absolute; width: 11px; height: 11px; z-index: 2; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--ink-72); }
.plus::before { left: 5px; top: 0; width: 1px; height: 11px; }
.plus::after { top: 5px; left: 0; height: 1px; width: 11px; }
.plus.tl { left: 8px; top: 8px; } .plus.tr { right: 8px; top: 8px; }
.plus.bl { left: 8px; bottom: 8px; } .plus.br { right: 8px; bottom: 8px; }

/* ruler tick strips on all four edges */
.ruled { position: relative; }
.ruled::before, .ruled::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
.ruled::before {
  left: 28px; right: 28px; top: 10px; bottom: 10px;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px) bottom / 100% 7px no-repeat;
}
.ruled::after {
  top: 28px; bottom: 28px; left: 10px; right: 10px;
  background:
    repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 8px) left / 7px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 8px) right / 7px 100% no-repeat;
}

/* ---------- buttons ---------- */
.arrow { font-style: normal; display: inline-block; transition: transform .45s var(--ease); }
.btn-line, .btn-fill {
  display: inline-flex; align-items: center; gap: 14px; height: 44px; padding: 0 14px; border: 1px solid var(--line);
  overflow: hidden; position: relative;
}
.btn-fill { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-label { display: grid; height: 1.3em; overflow: hidden; }
.btn-label > span { grid-area: 1/1; line-height: 1.3em; transition: transform .5s var(--ease); }
.btn-label > span + span { transform: translateY(110%); }
.btn-div { width: 1px; align-self: stretch; margin: 10px 0; background: repeating-linear-gradient(180deg, currentColor 0 3px, transparent 3px 6px); opacity: .5; }
.btn-line:hover .btn-label > span:first-child, .btn-fill:hover .btn-label > span:first-child { transform: translateY(-110%); }
.btn-line:hover .btn-label > span + span, .btn-fill:hover .btn-label > span + span { transform: translateY(0); }
.btn-line:hover .arrow, .btn-fill:hover .arrow, .row-link:hover .arrow, .hdr-cta:hover .arrow, .hero-discover:hover .arrow { transform: translateX(5px); }
.btn-line::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); z-index: -1; }
.btn-line { isolation: isolate; transition: color .5s var(--ease); }
.btn-line:hover { color: var(--bg); }
.btn-line:hover::after { transform: scaleY(1); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50; height: var(--hdr); display: flex; justify-content: space-between;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
/* a native fragment jump (arrival, no-JS, WebKit's anchor upkeep) lands under the header, where scrollToHash lands */
[id] { scroll-margin-top: var(--hdr); }
/* a section given focus after a same-page link only carries the Tab position, it shows no ring */
[data-hash-target]:focus { outline: none; }
.hdr-logo { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
/* monogram: an H whose crossbar is the car's roofline, the orange mark at its peak */
.logo-mark { width: 32px; height: 32px; flex: none; }
.logo-mark .lm-cell { fill: var(--ink); }
.logo-mark .lm-h { fill: none; stroke: var(--bg); stroke-width: 2.6; }
.logo-mark .lm-roof { fill: none; stroke: var(--bg); stroke-width: 2.2; stroke-linecap: round; }
.logo-mark .lm-pip { fill: var(--accent); transition: transform .5s var(--ease); transform-origin: 20.4px 16px; }
.hdr-logo:hover .lm-pip { transform: translateY(-2px); }
.logo-word { font-weight: 600; font-size: 17px; letter-spacing: .2em; margin-right: -.2em; }
.logo-sub { font-size: 8.5px; letter-spacing: .12em; line-height: 1.25; color: var(--ink-48); border-left: 1px solid var(--line); padding-left: 10px; }
@media (max-width: 520px) { .logo-sub { display: none; } }
.hdr-nav { display: flex; width: 50%; }
.hdr-item { flex: 1; position: relative; }
.hdr-cell {
  display: block; height: 100%; position: relative; padding: 12px 10px; border-left: 1px solid var(--line); color: var(--ink-72);
  overflow: hidden; isolation: isolate; transition: color .2s;
}
.hdr-cell > span, .hdr-cell > .arrow { position: relative; z-index: 2; }
/* checker layer: squares filled in by JS, revealed diagonally */
.checker { position: absolute; inset: 0; display: grid; z-index: 1; pointer-events: none; }
.checker i { background: var(--ink); opacity: 0; margin: -.5px; transform-origin: 50% 100%; }
/* tied to .open, not :hover: Escape takes the bricks down while the pointer is still on the cell */
.hdr-item.open .hdr-cell { color: var(--bg); transition: color .35s .55s; }
.hdr-cell.has-sub::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; z-index: 2; transition: transform .3s var(--ease); }
.hdr-item.open .hdr-cell.has-sub::after { transform: rotate(45deg) translate(-1px, -1px); }

.hdr-drop {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); color: var(--bg);
  clip-path: inset(0 0 100% 0); pointer-events: none; z-index: 5;
}
.hdr-item.open .hdr-drop { pointer-events: auto; }
.hdr-drop ul { padding: 6px 0; border-left: 1px solid #3a3a38; }
.hdr-drop li { opacity: 0; }
.hdr-drop a {
  display: flex; gap: 10px; padding: 9px 10px; font-size: var(--fs-xs); position: relative; transition: color .25s, padding .35s var(--ease);
}
.hdr-drop a span { color: #6f6e6a; }
.hdr-drop a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; background: var(--accent); transform: scale(0); transition: transform .3s var(--ease); }
.hdr-drop a:hover { color: var(--accent); padding-left: 16px; }
.hdr-drop a:hover::before { transform: scale(2); }
.hdr-cta { color: var(--accent); }
.hdr-item:hover .hdr-cta { color: var(--accent); }
.hdr-cta .arrow { position: absolute; right: 10px; bottom: 6px; font-size: 14px; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: var(--gut); z-index: 60; pointer-events: none; }
.loader-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform-origin: left; opacity: 0; }
.loader-pct { position: absolute; left: 26px; bottom: 6px; color: var(--accent); font-size: 11px; }
.loader-title {
  position: absolute; left: 26px; bottom: 22px; font-weight: 700; font-size: var(--fs-lg); line-height: .95; letter-spacing: -.035em;
}
.loader-title > div { overflow: hidden; }
.loader-info { position: absolute; right: 24%; bottom: 22px; font-size: 10px; color: var(--ink-72); width: 290px; line-height: 1.5; }
.loader-rule { border-top: 1px dashed var(--ink-48); margin: 6px 0 10px; }
.loader-info dl { display: grid; grid-template-columns: 70px 1fr; row-gap: 4px; }
.loader-log { position: absolute; right: 26px; bottom: 22px; font-size: 10px; color: var(--ink-72); line-height: 1.5; min-width: 200px; }

/* ---------- hero ---------- */
.hero { border-top: 0; }
.hero-stage { height: calc(100vh - var(--hdr) - 2 * var(--gut) - 170px); min-height: 420px; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.house-wrap { width: min(62vw, 980px); position: relative; }
.house { width: 100%; height: auto; overflow: visible; }
.house .ln { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.house .ln-thin { stroke-width: .7; }
.house .cons { fill: none; stroke: var(--ink-72); }
.house .dim-t { font-family: var(--mono); font-size: 10px; fill: var(--ink-72); }
.pip { fill: var(--accent); }
.pip-pulse { animation: pip 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-bottom { display: grid; grid-template-columns: 58fr 31fr 11fr; min-height: 170px; }
.hero-title { padding: 24px 26px; font-size: var(--fs-xl); font-weight: 700; line-height: .95; letter-spacing: -.04em; align-self: center; }
.hero-sub { border-left: 1px solid var(--line); display: grid; grid-template-rows: 1fr auto; }
.hero-sub-text { padding: 16px; font-size: var(--fs-s); color: var(--ink-72); line-height: 1.35; }
.hero-discover { border-left: 1px solid var(--line); padding: 16px 12px; color: var(--accent); position: relative; }
.hero-discover .arrow { position: absolute; right: 12px; bottom: 12px; font-size: 16px; }

.marquee { border-top: 1px solid var(--line); overflow: hidden; padding: 10px 0; color: var(--ink-72); }
.marquee-track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 8px; padding-right: 22px; white-space: nowrap; }
.hex { width: 10px; height: 11px; display: inline-block; border: 1px solid var(--ink-48); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: transparent; position: relative; }
.hex { background: var(--ink-48); }
.hex::after { content: ""; position: absolute; inset: 1px; background: var(--bg); clip-path: inherit; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- intro ---------- */
.intro { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.intro-art { border-right: 1px solid var(--line); display: flex; align-items: flex-end; overflow: hidden; }
.tower { width: 100%; height: auto; max-height: calc(100vh - var(--hdr)); }
.tower .ln { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.intro-copy { display: flex; flex-direction: column; }
.intro-statement {
  padding: 8vh 12% 0; margin-top: auto; font-size: var(--fs-lg); font-weight: 700; text-transform: uppercase; line-height: .98; letter-spacing: -.035em;
}
.intro-copy .btn-line { margin: 32px 12% 0; align-self: flex-start; }
.clients { margin-top: auto; border-top: 1px solid var(--line); }
.clients-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-left: 20px; color: var(--ink-72); }
.clients-nav { display: flex; }
.clients-btn { width: 40px; height: 38px; border-left: 1px solid var(--line); font-size: 15px; transition: background .3s; }
.clients-btn:hover { background: var(--paper-2); }
.clients-viewport { overflow: hidden; border-bottom: 1px solid var(--line); }
.clients-track { display: flex; transition: transform .8s var(--ease); }
.client { flex: 0 0 20%; height: 96px; display: grid; place-items: center; border-right: 1px dashed var(--line); }
.client svg { width: 78%; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.client text { fill: var(--ink); stroke: none; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .08em; }
.ftr-logo .iso-logo path { vector-effect: non-scaling-stroke; }
.clients-foot { padding: 12px 20px; color: var(--ink-72); }

/* ---------- problems ---------- */
.problems-head { display: grid; grid-template-columns: 1fr 1fr; padding: 28px 26px 40px; column-gap: 26px; }
.problems-head .label { grid-column: 1 / -1; }
.problems-desc { justify-self: end; max-width: 30em; color: var(--ink-72); font-size: var(--fs-s); }
.problems-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.prob { border-right: 1px solid var(--line); padding: 0 26px 30px; display: flex; flex-direction: column; position: relative; }
.prob:last-child { border-right: 0; }
.prob-top { display: flex; justify-content: space-between; padding: 14px 0; margin: 0 -26px; padding-inline: 26px; border-bottom: 1px dashed var(--line); color: var(--ink-72); }
.prob-top span:last-child { color: var(--ghost); }
.iso { width: 70%; margin: 6vh auto; overflow: visible; }
.iso path, .iso ellipse, .iso circle { fill: none; stroke: var(--ink-72); stroke-width: 1; vector-effect: non-scaling-stroke; }
.iso .hid { stroke-dasharray: 4 4; stroke: var(--ink-48); }
.prob .h-sm { margin-bottom: 26px; border-top: 1px dashed var(--line); margin-inline: -26px; padding: 26px 26px 0; }
.prob p { color: var(--ink-72); font-size: var(--fs-s); }

/* ---------- pinned map ---------- */
.map { height: calc(100vh - var(--hdr) - 2 * var(--gut)); }
.map-stage { height: 100%; display: grid; place-items: center; overflow: hidden; }
.map-title { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; color: var(--ghost); }
.map-title-2 { opacity: 0; }
.plan-wrap { height: 92%; aspect-ratio: 1; position: relative; }
.plan { width: 100%; height: 100%; overflow: visible; }
.plan .wall { fill: none; stroke: #3a3a38; stroke-width: 16; }
.plan .thin { fill: none; stroke: var(--ink-72); stroke-width: .8; vector-effect: non-scaling-stroke; }
.plan .dim line, .plan .dim path { stroke: var(--ink-48); stroke-width: .7; vector-effect: non-scaling-stroke; fill: none; }
.plan .dim text { font-family: var(--mono); font-size: 11px; fill: var(--ink-48); }
.plan .mark { cursor: pointer; }
.plan .mark rect { fill: var(--accent); }
.plan .mark text { font-family: var(--mono); font-size: 10px; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.plan .mark:hover rect { fill: #d42e00; }
.plan .mark rect.mark-hit { fill: transparent; stroke: none; }
.plan-tip {
  position: absolute; z-index: 3; background: var(--ink); color: var(--bg); padding: 10px 12px; font-size: 10px; max-width: 220px;
  line-height: 1.5; opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .25s;
}
.plan-tip.on { opacity: 1; }
.plan-tip b { display: block; color: var(--accent); font-weight: 400; margin-bottom: 4px; }

.card { background: var(--bg); border: 1px solid var(--line); box-shadow: 0 6px 0 var(--ink); }
.card-head { background: var(--ink); color: var(--bg); padding: 8px 10px; }
.map-card { position: absolute; left: 26px; bottom: 26px; width: 240px; z-index: 3; }
.map-card .card-body { display: grid; padding: 12px 10px 4px; }
.map-step { grid-area: 1/1; font-size: var(--fs-s); color: var(--ink-72); opacity: 0; line-height: 1.3; }
.map-step.is-on { opacity: 1; }
.card-foot { color: var(--ghost); padding: 10px; }

/* ---------- platform ---------- */
.platform-head { display: grid; grid-template-columns: 1fr 1fr; padding: 28px 26px 44px; gap: 26px; }
.platform-head .label { grid-column: 1 / -1; margin-bottom: 0; }
.platform-intro p { color: var(--ink-72); font-size: var(--fs-s); max-width: 34em; }
.feat { margin-top: 20px; border-top: 1px solid var(--line); }
.feat li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.feat-ic { font-style: normal; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; color: var(--ink-72); }

.product { display: grid; grid-template-columns: 25fr 42fr 33fr; border-top: 1px solid var(--line); min-height: 64vh; }
.product-name { padding: 26px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.product-visual { display: grid; place-items: center; border-right: 1px solid var(--line); padding: 40px 20px; overflow: hidden; position: relative; }
.gridbg {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
}
.product-copy { display: flex; flex-direction: column; justify-content: flex-end; }
.product-copy p { padding: 26px; color: var(--ink-72); font-size: var(--fs-s); }
.row-link { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 14px 26px; transition: background .3s; }
.row-link:hover { background: var(--paper-2); }

.ui { background: var(--bg); border: 1px solid var(--ink-48); box-shadow: 0 6px 0 var(--ink); font-size: 12px; }
.ui-bar { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--bg); padding: 8px 10px; font-size: 10px; }
.ui-bar .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: pip 1.6s infinite; }
.ui-chat { width: min(380px, 92%); }
.ui-msgs { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.msg { padding: 9px 10px; max-width: 85%; line-height: 1.35; }
.msg b { display: block; font-size: 9px; color: var(--accent); margin-bottom: 3px; font-weight: 400; }
.msg-me { align-self: flex-end; background: var(--ink); color: var(--bg); }
.msg-ai { background: var(--paper-2); border: 1px solid var(--line); }
.msg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); padding: 4px 7px; font-size: 9px; }
.chip-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.typing::after { content: "▍"; animation: pip 1s steps(1) infinite; color: var(--accent); }
.ui-input { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 10px; color: var(--ghost); font-size: 10px; }

.ui-dash { width: min(470px, 96%); position: relative; background: transparent; border: 0; box-shadow: none; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 4px; }
.stat { background: var(--bg); border: 1px solid var(--ink-48); box-shadow: 0 4px 0 var(--ink); padding: 7px 8px; position: relative; }
.stat span { font-size: 8px; color: var(--ink-72); }
.stat b { display: block; font-size: 18px; font-weight: 600; margin-top: 6px; }
.sq { display: inline-block; width: 6px; height: 6px; background: var(--c); }
.stat .sq { position: absolute; right: 8px; top: 8px; }
.dash-main { background: var(--paper-2); border: 1px solid var(--ink-48); }
.dash-hello { padding: 10px; display: flex; flex-direction: column; font-size: 10px; }
.dash-hello span { color: var(--ink-48); font-size: 9px; }
.dash-sec { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.act li { display: flex; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); align-items: center; }
.act-ic { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--bg); position: relative; flex: none; }
.act-ic::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--accent); transform: rotate(45deg) scale(.8); }
.act b { display: block; font-size: 9.5px; font-weight: 600; }
.act span { font-size: 8.5px; color: var(--ink-48); display: block; }
.act em { font-style: normal; font-size: 7.5px; display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.dash-float { position: absolute; right: -14px; bottom: -18px; width: 54%; background: var(--bg); border: 1px solid var(--ink-48); box-shadow: 0 5px 0 var(--ink); }
.pend { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pend b { display: block; font-size: 9.5px; font-weight: 600; }
.pend > span { font-size: 8.5px; color: var(--ink-48); }
.pend-row { display: flex; align-items: center; gap: 6px; font-size: 7.5px; margin-top: 6px; }
.bar { flex: 1; height: 5px; background: var(--line-soft); position: relative; }
.bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--w)); }
.pend-row em { font-style: normal; background: var(--accent); color: #fff; padding: 3px 5px; }

/* ---------- why ---------- */
.why-head { display: grid; grid-template-columns: 1fr 1fr; padding: 28px 26px 40px; gap: 26px; }
.why-desc { align-self: end; justify-self: end; max-width: 30em; color: var(--ink-72); font-size: var(--fs-s); display: grid; gap: 14px; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.why-cell { border-bottom: 1px solid var(--line); }
.why-cell:nth-child(odd) { border-right: 1px solid var(--line); }
.sheet { position: relative; margin: 30px; aspect-ratio: 400 / 260; border: 1px dashed var(--line); }
.sheet::before {
  content: ""; position: absolute; inset: 0; opacity: .7;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 12.5% 16.66%;
}
.sheet .plus { width: 9px; height: 9px; }
.sheet .plus.tl { left: -5px; top: -5px; } .sheet .plus.tr { right: -5px; top: -5px; }
.sheet .plus.bl { left: -5px; bottom: -5px; } .sheet .plus.br { right: -5px; bottom: -5px; }
.sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.elev .ln, .pattern .ln { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pattern .wl { fill: none; stroke: #b7b6b0; stroke-width: 6; }
.pattern .link { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; fill: none; vector-effect: non-scaling-stroke; }
.pattern .node { fill: var(--accent); }
.pattern .node-in { fill: var(--bg); }

.callout { position: absolute; background: var(--accent); color: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.callout span { font-size: 9px; opacity: .8; }
.callout b { font-size: 13px; font-weight: 600; text-transform: uppercase; }
.callout::after { content: "×"; position: absolute; right: 4px; top: 2px; font-size: 11px; }
.c1 { left: 18%; top: 10%; } .c2 { right: 6%; top: 42%; }
.mini-card { position: absolute; left: 6%; bottom: 8%; width: 36%; }
.mini-card ul { padding: 8px 10px; font-size: 9px; color: var(--ink-72); line-height: 1.7; }
.mini-card li::before { content: "• "; }

.sheets { position: absolute; inset: 6% 16%; display: flex; flex-direction: column; gap: 8px; }
.tb { flex: 1; border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; transition: border-color .4s, box-shadow .4s; }
.tb.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tb-draw { flex: 1; background:
  linear-gradient(#5a5a57, #5a5a57) 20% 30% / 30% 2px no-repeat,
  linear-gradient(#5a5a57, #5a5a57) 20% 30% / 2px 50% no-repeat,
  linear-gradient(#5a5a57, #5a5a57) 70% 40% / 2px 40% no-repeat,
  linear-gradient(#5a5a57, #5a5a57) 45% 75% / 50% 2px no-repeat; }
.tb-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; border-top: 1px solid var(--line); padding: 4px 8px; align-items: center; }
.tb-row b { font-size: 11px; font-weight: 700; }
.tb-row span { font-size: 8px; color: var(--ink-48); }
.check-card { position: absolute; left: 6%; bottom: 6%; width: 36%; }
.dots { display: inline-block; animation: pip 1s infinite; }
.skel { padding: 10px; display: grid; gap: 7px; }
.skel i { height: 6px; background: linear-gradient(90deg, var(--line-soft) 0 30%, #f7f6f2 50%, var(--line-soft) 70%) 0 0 / 250% 100%; animation: shimmer 1.4s linear infinite; }
.skel i:nth-child(2) { width: 80%; } .skel i:nth-child(3) { width: 60%; }
@keyframes shimmer { to { background-position: -250% 0; } }
.why-cap { padding: 0 30px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.why-cap p { color: var(--ink-72); font-size: var(--fs-s); }
.why-list { display: flex; align-items: center; padding: 30px; }
.why-list ol { width: 100%; }
.why-list li { display: flex; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px dashed var(--line); }
.why-list li b { font-size: var(--fs-lg); font-weight: 700; line-height: .95; letter-spacing: -.035em; }

/* ---------- uses ---------- */
.uses { display: grid; grid-template-columns: 1fr 1fr; }
.uses-art { border-right: 1px solid var(--line); overflow: hidden; min-height: 80vh; }
.colonnade { width: 100%; height: 100%; }
.uses-copy { display: flex; flex-direction: column; padding-top: 30px; }
.uses-copy .label, .uses-copy .h-xl { padding-inline: 12%; }
.uses-copy .h-xl { margin-bottom: 40px; }
.acc { margin-top: auto; overflow: clip; }
.acc-item { border-top: 1px dashed var(--line); }
.acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 26px 16px 12%; font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.03em; text-align: left; }
.acc-plus { width: 11px; height: 11px; position: relative; transition: transform .5s var(--ease); flex: none; }
.acc-plus::before, .acc-plus::after { content: ""; position: absolute; background: var(--ink-48); }
.acc-plus::before { left: 5px; width: 1px; height: 11px; } .acc-plus::after { top: 5px; height: 1px; width: 11px; }
.acc-item.open .acc-plus { transform: rotate(45deg); }
.acc-body { height: 0; overflow: hidden; }
.acc-body p { padding: 0 26px 18px 12%; color: var(--ink-72); font-size: var(--fs-s); max-width: 40em; }

/* ---------- cta ---------- */
.cta { min-height: 64vh; display: grid; place-items: center; overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(25% - .5px), var(--line) calc(25% - .5px) calc(25% + .5px), transparent 0, transparent calc(75% - .5px), var(--line) calc(75% - .5px) calc(75% + .5px), transparent 0),
    linear-gradient(180deg, transparent calc(22% - .5px), var(--line-soft) calc(22% - .5px) calc(22% + .5px), transparent 0, transparent calc(78% - .5px), var(--line-soft) calc(78% - .5px) calc(78% + .5px), transparent 0);
}
.coord { position: absolute; color: var(--ink-48); padding: 6px 8px; }
.cta-inner { text-align: center; display: grid; justify-items: center; gap: 18px; }
.cta-inner p { color: var(--ink-72); font-size: var(--fs-s); }

/* ---------- footer ---------- */
.ftr-art { display: grid; grid-template-columns: 25% 50% 25%; }
.ftr-art .monument { grid-column: 2; width: 100%; border-inline: 1px dashed var(--line); }
.ftr-grid { display: grid; grid-template-columns: 25% 16.66% 16.66% 16.66% 25%; border-top: 1px solid var(--line); }
.ftr-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 140px; }
.ftr-cell a { transition: color .3s; width: fit-content; }
.ftr-cell a:hover { color: var(--accent); }
.ftr-cell p { color: var(--ink-72); }
.ftr-title .h-md { line-height: .98; }
.ftr-logo { grid-row: span 2; border-right: 0; display: grid; place-items: center; }
.iso-logo { width: 62%; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.ftr-sub { padding-bottom: 0; }
.ftr-form { margin: auto -18px 0; display: flex; border-top: 1px solid var(--line); }
.ftr-form input { flex: 1; min-width: 0; background: none; border: 0; padding: 12px 18px; font: inherit; font-size: max(16px, 1em); color: var(--ink); outline: none; }   /* 16px: no iOS focus zoom; min-width 0: a 16px size=20 box never pushes the → out of the form */
.ftr-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ftr-form button { width: 44px; flex: none; border-left: 1px solid var(--line); }   /* never squeezed under 44px by the input */
.ftr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftr-word { padding: 40px 6%; }
.wordmark { width: 100%; height: auto; overflow: visible; }
.wordmark text { font-family: var(--sans); font-weight: 600; font-size: 300px; letter-spacing: -6px; fill: none; stroke: var(--ink); stroke-width: 1.1; }
.wordmark .guide { stroke: var(--ink-48); stroke-width: .7; }
.ftr-bar { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 12px 18px; color: var(--ink-72); }
.ftr-credit { white-space: nowrap; margin-left: 1.2em; }
.ftr-credit a { color: var(--ink); transition: color .3s; }
.ftr-credit a:hover { color: var(--accent); }

/* initial states (JS reveals) */
.js [data-page="home"] .hdr { transform: translateY(-100%); }
.js .hero-bottom > * { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --hdr: 52px; }
  .hdr-nav .hdr-item:has(.has-sub) { display: none; }
  .hdr-nav { width: auto; }
  .hdr-nav .hdr-item { min-width: 150px; }
  .house-wrap { width: 92%; }
  .hero-stage { height: 52vh; }
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-sub, .hero-discover { border-left: 0; border-top: 1px solid var(--line); }
  .hero-discover { min-height: 50px; }
  .intro, .uses, .problems-head, .platform-head, .why-head, .why-grid, .why-cap { grid-template-columns: 1fr; }
  .intro-art, .uses-art { border-right: 0; border-bottom: 1px solid var(--line); }
  .problems-desc, .why-desc { justify-self: start; }
  .problems-grid { grid-template-columns: 1fr 1fr; }
  .prob:nth-child(2) { border-right: 0; }
  .product { grid-template-columns: 1fr; }
  .product-name, .product-visual { border-right: 0; border-bottom: 1px solid var(--line); }
  .why-cell:nth-child(odd) { border-right: 0; }
  .uses-art { min-height: 50vh; }
  .ftr-art { grid-template-columns: 1fr; } .ftr-art .monument { grid-column: 1; border: 0; }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-cell { min-width: 0; overflow-wrap: anywhere; }
  .ftr-form input { min-width: 0; }
  .ftr-logo { grid-row: auto; }
  .loader-info, .loader-log { display: none; }
  .map-card { width: auto; right: 16px; left: 16px; bottom: 16px; }
  .plan-wrap { height: auto; width: 88%; }
}
@media (max-width: 520px) {
  .problems-grid { grid-template-columns: 1fr; }
  .prob { border-right: 0; border-bottom: 1px solid var(--line); }
  .dash-float { position: relative; right: 0; bottom: 0; width: 100%; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .pip-pulse, .skel i { animation: none; }
}

/* ---------- drag select + spec callouts ---------- */
.pip, .plan .mark { cursor: crosshair; }
.is-selecting, .is-selecting * { user-select: none !important; cursor: crosshair !important; }
.sel-box {
  position: fixed; z-index: 90; pointer-events: none; display: none;
  border: 1px dashed var(--ink); background: rgba(250, 54, 0, .06);
}
.sel-box.on { display: block; }
.sel-dim { position: absolute; right: -1px; top: 100%; margin-top: 4px; font-size: 10px; color: var(--ink-72); white-space: nowrap; background: var(--bg); padding: 1px 4px; }
.sel-hint {
  position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 80; background: var(--ink); color: var(--bg);
  padding: 8px 12px; font-size: 10px; opacity: 0; pointer-events: none;
}

.spec-pop {
  position: absolute; z-index: 70; background: var(--accent); color: #fff; width: 360px; max-width: calc(100vw - 32px);
  padding: 62px 24px 22px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0;
}
.spec-code { font-size: 15px; margin-bottom: 10px; opacity: .95; }
.spec-desc { font-size: 17px; line-height: 1.3; }
.spec-x {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; background: #fff; color: var(--accent);
  display: grid; place-items: center; font-size: 15px; line-height: 1;
}
.spec-x span { display: block; transition: transform .3s var(--ease); }
@media (hover: hover) { .spec-x:hover span { transform: rotate(90deg); } }
@media (pointer: coarse) { .spec-x { width: 44px; height: 44px; top: 6px; right: 6px; } }
.spec-cross { position: absolute; z-index: 71; pointer-events: none; }
.spec-cross i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; }
.spec-cross i::before, .spec-cross i::after { content: ""; position: absolute; background: var(--accent); }
.spec-cross i::before { left: 8px; top: 0; width: 2.5px; height: 18px; }
.spec-cross i::after { top: 8px; left: 0; height: 2.5px; width: 18px; }
.spec-cross span { position: absolute; right: 6px; top: 12px; font-family: var(--mono); font-size: 15px; color: var(--ink-72); white-space: nowrap; line-height: 1.25; text-transform: uppercase; }
@media (max-width: 639px) { .spec-pop { width: calc(100vw - 32px); padding: 48px 18px 18px; } .spec-desc { font-size: 15px; } .spec-cross span { font-size: 12px; } }

/* ================================================================
   MULTI-PAGE: shared components
   ================================================================ */

/* ---------- page transition bricks ---------- */
html.wipe-in::after { content: ""; position: fixed; inset: 0; background: var(--ink); z-index: 200; }
.wipe { position: fixed; inset: 0; z-index: 200; display: grid; pointer-events: none; }
.wipe i { background: var(--ink); opacity: 0; margin: -.5px; transform-origin: 50% 100%; }
.wipe-label { position: absolute; left: 26px; bottom: 22px; color: var(--bg); font-size: 11px; opacity: 0; }

/* ---------- header: current page + mobile menu ---------- */
.hdr-cell.is-current { color: var(--ink); }
.hdr-cell.is-current::before { content: ""; position: absolute; left: 10px; bottom: 9px; width: 6px; height: 6px; background: var(--accent); z-index: 2; }
.hdr-cta.is-current { color: var(--accent); }
.hdr-menu { display: none; align-items: center; gap: 10px; padding: 0 16px; border-left: 1px solid var(--line); color: var(--ink-72); }
.hdr-menu i { width: 14px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; transition: transform .4s var(--ease); }
.menu-open .hdr-menu i { transform: rotate(90deg); }
.mnav {
  position: fixed; left: var(--gut); right: var(--gut); top: calc(var(--gut) + var(--hdr)); bottom: var(--gut); z-index: 49;
  background: var(--ink); color: var(--bg); clip-path: inset(0 0 100% 0); overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 30px;
  display: flex; flex-direction: column;
}
.menu-open .mnav { pointer-events: auto; }
.mnav-group { border-bottom: 1px dashed #4a4a47; padding: 16px 0; }
.mnav-top { display: flex; gap: 12px; align-items: baseline; font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
.mnav-top .mono { color: var(--accent); }
.mnav-sub { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: #a9a8a3; }
.mnav-cta { margin-top: auto; padding-top: 24px; color: var(--accent); font-size: 14px; }

/* ---------- inner page hero ---------- */
.phero { border-top: 0; padding: 18px 0 20px; min-height: calc(100vh - var(--hdr) - 2 * var(--gut)); display: grid; grid-template-rows: auto 1fr auto; }
.phero-top { display: flex; justify-content: space-between; padding: 16px 26px; border-bottom: 1px solid var(--line); color: var(--ink-72); position: relative; z-index: 2; }
.phero-top b { font-weight: 400; color: var(--accent); }
.phero-main { display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; }
.phero-title { padding: 40px 26px; font-size: clamp(44px, 6.4vw, 108px); font-weight: 700; line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.phero-art { width: 100%; height: 100%; max-height: 62vh; overflow: visible; align-self: stretch; border-left: 1px dashed var(--line); }
.phero-bottom { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.phero-lede { padding: 22px 26px; color: var(--ink-72); font-size: var(--fs-b); max-width: 36em; }
.phero-index { border-left: 1px solid var(--line); }
.phero-index a { display: grid; grid-template-columns: 40px 1fr auto; padding: 12px 20px; border-bottom: 1px dashed var(--line); transition: background .3s, padding .4s var(--ease); }
.phero-index li:last-child a { border-bottom: 0; }
.phero-index a span { color: var(--ink-48); }
.phero-index a:hover { background: var(--paper-2); padding-left: 28px; }
.phero-index a:hover span, .phero-index a:hover i { color: var(--accent); }
.phero-index i { font-style: normal; }

/* ---------- generic section head ---------- */
.shead { display: grid; grid-template-columns: 1fr 1fr; padding: 28px 26px 40px; column-gap: 26px; }
.shead > .label { grid-column: 1 / -1; }
.shead-side { align-self: end; justify-self: end; max-width: 30em; display: grid; gap: 18px; justify-items: start; }
.shead-side p, .shead p { color: var(--ink-72); font-size: var(--fs-s); }
.sec-code { position: absolute; right: 26px; top: 28px; color: var(--ghost); }

/* ---------- product cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.pcard { display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; background: var(--bg); }
.cards > .pcard:nth-child(3n) { border-right: 0; }
.cards-4 > .pcard:nth-child(3n) { border-right: 1px solid var(--line); }
.cards-4 > .pcard:nth-child(4n) { border-right: 0; }
.pcard-top { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px dashed var(--line); color: var(--ink-72); }
.pcard-top span:last-child { color: var(--ink-48); }
.pcard-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.pcard-art svg { width: 82%; height: 82%; overflow: visible; transition: transform .8s var(--ease); }
.pcard.hot .pcard-art svg { transform: scale(1.05) rotate(-1.5deg); }
.pcard-art .plus.tl { left: 10px; top: 10px; } .pcard-art .plus.br { right: 10px; bottom: 10px; }
.pcard-info { padding: 16px; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.pcard-meta { color: var(--ink-48); font-size: var(--fs-s); }
.pcard-go { position: relative; display: flex; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: color .3s; }
.pcard-go > span { position: relative; z-index: 2; }
.pcard-cta { color: var(--accent); }
.pcard.hot .pcard-go { color: var(--bg); transition: color .3s .35s; }
.pcard-go .checker i { background: var(--ink); }

/* drawing layers */
.pc .ln { stroke-width: 1; }
.pc .ln-thin { stroke-width: .7; stroke: var(--ink-72); }
.pc-dim { fill: none; stroke: var(--ink-48); stroke-width: .7; vector-effect: non-scaling-stroke; }
.pc-t { font-family: var(--mono); font-size: 10px; fill: var(--ink-72); text-transform: uppercase; }
.pc.lines-only .pc-fills { opacity: 0 !important; }

/* traced artwork (trace.js): outlines draw on, then the solid ink fades in */
svg .ln.tr-s { stroke-width: .5; stroke: var(--ink); }
.tr-f { fill: var(--ink); stroke: none; transition: opacity .45s ease-out; }
.tr-k.is-wait .tr-f { opacity: 0; transition: none; }

/* ---------- brick-hover surface ---------- */
.bricky { position: relative; overflow: hidden; isolation: isolate; transition: color .3s; }
.bricky > :not(.checker) { position: relative; z-index: 2; }
.bricky.brick-on { color: var(--bg); transition: color .3s .3s; }

/* ---------- misc ---------- */
.rail { }
.acc-link { display: inline-block; margin: -6px 0 18px 12%; color: var(--accent); }
.acc-link:hover { text-decoration: underline; }
.ftr-done { margin-top: auto; color: var(--accent); padding: 12px 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 5px 8px; }
.tag::before { content: ""; width: 5px; height: 5px; background: var(--accent); }

/* input fields (visit form) */
.field { display: grid; gap: 8px; }
.field label { color: var(--ink-72); }
/* width: a control's own size (size=20) never pushes the form past a narrow (zoomed) screen. font-size: iOS Safari
   zooms the page on focus for any text control under 16px, and the phone body size is 15.5px */
.field input, .field textarea, .field select {
  font: inherit; font-size: max(16px, 1em); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; outline: none; border-radius: 0;
  width: 100%; min-width: 0; transition: border-color .3s;
}
.field input, .field select { min-height: 44px; }   /* a full touch target; border-box, so the underline just sits 3px lower */
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }
.field.bad input, .field.bad textarea { border-color: var(--accent); }

@media (max-width: 900px) {
  .hdr-menu { display: flex; }
  .hdr-nav .hdr-item { min-width: 0; }
  .hdr-cta { padding-right: 34px; white-space: nowrap; }
  .phero-main, .phero-bottom, .shead { grid-template-columns: 1fr; }
  .phero-art { border-left: 0; border-top: 1px dashed var(--line); max-height: 48vh; }
  .phero-index { border-left: 0; border-top: 1px solid var(--line); }
  .shead-side { justify-self: start; margin-top: 18px; }
  .cards, .cards-4 { grid-template-columns: 1fr 1fr; }
  .cards > .pcard:nth-child(n) { border-right: 1px solid var(--line); }
  .cards > .pcard:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
  .hdr-cta { display: none; }
  .hdr-nav .hdr-item:has(.hdr-cta) { display: none; }
  .cards, .cards-4 { grid-template-columns: 1fr; }
  .cards > .pcard:nth-child(n) { border-right: 0; }
  .phero-title { font-size: 44px; }
}
@media (min-width: 901px) { .mnav { display: none; } }

/* ================================================================
   MOBILE PASS — readable type, 44px targets, swipe rails, lighter effects
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --fs-xs: 11.5px; --fs-s: 14px; --fs-b: 15.5px;
  }
  /* svh: heights don't jump as the browser toolbar shows and hides */
  .phero { min-height: calc(100svh - var(--hdr) - 2 * var(--gut)); }
  .hero-stage { height: 52svh; }
  .map { height: calc(100svh - var(--hdr) - 2 * var(--gut)); }
}
/* tap targets: phones, and any touch screen however wide (a tablet in landscape is 1024px but still a finger) */
@media (max-width: 900px), (pointer: coarse) {
  .phero-index a { padding-block: 15px; min-height: 44px; }
  .ftr-cell { gap: 2px; }
  .ftr-cell a { padding: 9px 0; }
  .ftr-cell .label { margin-bottom: .6em; }
  .ftr-two { gap: 0 10px; }
  .ftr-form input, .ftr-form button { min-height: 48px; }
  .acc-link { padding: 12px 0; margin-top: -14px; margin-bottom: 6px; }
  .row-link, .clients-btn { min-height: 48px; align-items: center; }
  .clients-btn { width: 48px; }
  .mnav-sub a { padding: 8px 0; }
  .mnav-sub { gap: 0 18px; }
  .hdr-menu { min-width: 96px; justify-content: center; }
  .btn-line, .btn-fill { height: 48px; }
}
@media (max-width: 900px) {
  /* the UI mocks: lift their smallest text to something readable */
  .stat span, .act span, .pend > span, .dash-hello span { font-size: 10px; }
  .act b, .pend b { font-size: 11px; }
  .act em, .pend-row { font-size: 9px; }
  .msg { font-size: 13px; }
  .msg b, .chip { font-size: 10px; }

  /* product cards become a swipe rail */
  .cards, .cards-4 {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cards::-webkit-scrollbar { display: none; }
  .cards > .pcard, .cards-4 > .pcard { flex: 0 0 min(82%, 360px); scroll-snap-align: start; border-right: 1px solid var(--line) !important; border-bottom: 0; }
  .pcard-art { aspect-ratio: 1 / .92; }
  .pcard-go { min-height: 48px; align-items: center; }
}

/* touch screens: bigger invisible hit area round the orange marks, cheaper grain */
@media (pointer: coarse) {
  .pip { stroke: transparent; stroke-width: 26px; paint-order: stroke; pointer-events: all; }
  .grain { mix-blend-mode: normal; opacity: .28; }
  .sel-hint { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .menu-open .sel-hint { display: none; }
}

@media (max-width: 900px), (pointer: coarse) {
  .ftr-cell a { padding: 11px 0; }
  .acc-link { padding: 15px 0; min-height: 44px; }
}

/* ---------- car drawings ---------- */
svg .ln.ln-accent { stroke: var(--accent); stroke-width: 2; }
svg .ln.ln-dash { stroke-dasharray: 4 4; stroke: var(--ink-48); }
.pc .ln-dash { stroke-width: .8; }
.car-word { letter-spacing: .3em; font-size: 9px; }
.pc.lines-only .ln-accent { stroke-width: 1.4; }

/* phones and touch screens: menu and footer links get full 44px tap rows */
@media (max-width: 900px), (pointer: coarse) {
  .mnav-top { min-height: 48px; display: flex; align-items: center; }
  .mnav-sub a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .ftr a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
  .ftr-two { grid-template-columns: max-content max-content; column-gap: 20px; }
  .ftr-two a { white-space: nowrap; }
  .ftr-bar { flex-wrap: wrap; align-items: center; column-gap: 16px; padding-bottom: 4px; }
  .ftr-bar > span:first-child { flex: 1 1 100%; }
  .ftr-credit { display: block; margin: 0; }
}
@media (max-width: 900px) { .mnav-cta { min-height: 48px; display: flex; align-items: center; } }
/* page zoom on a phone (iOS 150-200% leaves 260-195 CSS px; the folded Galaxy Fold is 280). Last in the file so the
   phone rules above don't win. The header drops its padding and the logo word gets smaller, so the logo and MENU
   still sit side by side, both whole */
@media (max-width: 300px) {
  .hdr-logo { padding: 0 12px; gap: 8px; min-width: 0; }
  .hdr-menu { min-width: 0; padding: 0 12px; }
  .logo-word { font-size: 15px; letter-spacing: .12em; margin-right: -.12em; }
  /* display type: a word wider than the screen (MILLIMETRE, MECHANICAL at 34px) breaks with a hyphen instead of
     widening its grid track past the edge */
  h1, h2, h3, .scrub-words > div, .why-list b { overflow-wrap: anywhere; hyphens: auto; }
  .why-list { padding: 20px 16px; }
  .why-list li { gap: 12px; }
  .map-title { white-space: normal; width: calc(100% - 32px); text-align: center; }
  .mini-card, .check-card { width: auto; min-width: 36%; }
  /* the footer's two columns would leave each cell ~50px: one column, the ELSEWHERE links stacked */
  .ftr-grid { grid-template-columns: minmax(0, 1fr); }
  .ftr-two { grid-template-columns: max-content; }
}
/* 175% and up: no room for the monogram as well, and the name is what identifies the site */
@media (max-width: 230px) { .logo-mark { display: none; } }
/* the open menu's 30px section names (01 DRAWINGS) are wider than its panel at 175-200% zoom */
@media (max-width: 230px) { .mnav-top { font-size: 24px; } }
/* two-column footer at 301-340: 18px side padding leaves the 16px "Your email" placeholder too little room; the button
   keeps its 44px. The left side keeps its 18px so the text lines up with NEWSLETTER above it, and the right side gives
   up the room instead (2px: the button's border sits right after it) */
@media (max-width: 340px) { .ftr-form input { padding-left: 18px; padding-right: 2px; } }
/* with 2px right padding the inset (-2px) ring sits on the typed text and caret; at 0 it runs along the input's own edge,
   over the form's top rule and the button's divider. The padding stays as it is: the placeholder needs that room */
@media (max-width: 340px) { .ftr-form input:focus-visible { outline-offset: 0; position: relative; z-index: 1; } }   /* the ring sits outside the box here: lift the focused input so the → button's left border can't paint over its right side */