/* Roth River, architectural collection, 2026-10-26.
   Parametric 3D exterior drawings, parchment strokes and muted copper on warm black.
   Colors and faces originate in kit 3.0.0 (../../tokens.css).
   The slow contour field preserves the sensor-label motif. */

@font-face { font-family: "DM Serif Display"; src: url("../../fonts/dm-serif-display/DMSerifDisplay.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../../fonts/dm-sans/DMSans.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../../fonts/dm-sans/DMSans-Italic.ttf") format("truetype"); font-weight: 100 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../../fonts/dm-mono/DMMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --ground: var(--warm);          /* #140f0c, the RR_21 page ground */
  --ground-2: #191411;            /* one step up, for alternating bands */
  --line: rgba(206, 203, 172, .14);
  --head: var(--cream);           /* #cecbac, the RR_21 headline cream */
  --body: #b9b5a5;
  --dim: #928c7e;
  --gutter: max(28px, calc((100vw - 1120px) / 2));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; background: var(--ground); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--ground); color: var(--body);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--primary); color: var(--ink); }

/* Static grain adds texture without another moving layer. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .025;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}
/* Type */
.display { font-family: var(--display); font-weight: 400; color: var(--head); letter-spacing: -.015em; line-height: .98; }
.d-xl { font-size: clamp(38px, 4.2vw, 60px); }
.d-l  { font-size: clamp(30px, 3.2vw, 46px); }
.d-m  { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.04; }
.d-s  { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; transform-origin: left; }
.lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--body); max-width: 44ch; }
.mono { font-family: var(--mono); }
.coral { color: var(--primary); } .sky { color: var(--sky); } .gold { color: var(--gold); } .cream { color: var(--head); }
.src { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--dim); margin-top: 28px; max-width: 70ch; }
.illus { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* Navigation: persists through page transitions, never animates with the page. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; view-transition-name: site-nav;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  transition: background .5s var(--ease-out), padding .5s var(--ease-out), backdrop-filter .5s;
}
.nav.scrolled { background: rgba(20, 15, 12, .72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--head); font-family: var(--display); font-size: 20px; letter-spacing: .01em; }
.brand img { width: 28px; height: 28px; }
.nav ul { display: flex; align-items: center; gap: 6px; list-style: none; }
.nav li a { position: relative; display: block; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--body); transition: color .3s; }
.nav li a:hover, .nav li a[aria-current="page"] { color: var(--head); }
.nav li a i { position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; background: var(--primary); view-transition-name: nav-mark; }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; overflow: hidden; isolation: isolate;
  padding: 8px 13px; min-height: 34px; border-radius: 2px; font-weight: 500; font-size: 12px; line-height: 1.5;
  background: var(--primary); color: var(--ink);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--head); transform: translateY(101%); transition: transform .5s var(--ease-out); border-radius: inherit; }
.btn:hover::before { transform: translateY(0); }
.btn .arr { transition: transform .4s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--head); padding: 6px 0; border-radius: 0; border-bottom: 1px solid rgba(206,203,172,.3); box-shadow: none; }
.btn.ghost::before { display: none; }
.btn.ghost:hover { color: var(--primary); border-color: var(--primary); }
.menu-btn { display: none; }

/* Sections */
section { position: relative; scroll-margin-top: 84px; }
.wrap { padding-inline: var(--gutter); }
.band { padding-block: clamp(48px, 5vw, 72px); }
.rule { height: 1px; background: var(--line); margin-inline: var(--gutter); transform-origin: left; }

/* Hero: the current closed sensor sits beside the copy. Readings remain below it. */
.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 48px; padding-top: 128px; padding-bottom: 64px; overflow: clip; }
.hero canvas.contours { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero .copy, .hero-visual { position: relative; z-index: 2; min-width: 0; }
.hero .copy { max-width: 500px; }
.hero h1.d-xl { font-size: clamp(40px, 4vw, 56px); line-height: 1.06; margin: 20px 0 22px; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .lead { font-size: 16px; line-height: 1.65; max-width: 43ch; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 26px; }
.readouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; padding-top: 16px; border-top: 1px solid var(--line); }
.chip { min-width: 0; padding: 0 14px; border-left: 1px solid var(--line); }
.chip:first-child { border-left: 0; padding-left: 0; }
.chip:nth-child(4) { padding-right: 0; }
.chip .k { font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.chip .k i { display: none; }
.chip .v { font: 15px var(--mono); color: var(--head); margin-top: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readouts .illus { grid-column: 1 / -1; text-align: right; margin-top: 12px; font-size: 9px; letter-spacing: .08em; }

/* Statements use an explicit illustration column. */
.statement { border-top: 1px solid var(--line); }
.statement p { font-family: var(--display); font-size: clamp(26px, 2.5vw, 36px); line-height: 1.22; color: var(--head); max-width: 32ch; letter-spacing: -.01em; margin-top: 22px !important; }

/* A fixed outline and a clipped liquid surface use identical geometry. */
.leak { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; padding-block: 64px; border-top: 1px solid var(--line); }
.leak .art { position: sticky; top: 110px; justify-self: center; width: min(100%, 280px); }
.leak .art svg { width: 100%; height: auto; }
.leak .steps { display: grid; gap: 36px; }
.leak .step { border-bottom: 1px solid var(--line); padding-bottom: 32px; }
.leak .step:last-child { padding-bottom: 0; border-bottom: 0; }
.leak .step h2 { font-size: clamp(27px, 2.4vw, 34px); line-height: 1.15; margin: 14px 0 16px; max-width: 25ch; }
.leak .step .lead { font-size: 15px; line-height: 1.65; }
.leak .stat { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 24px; }
.leak .stat b { display: block; font: 32px/1.2 var(--display); color: var(--gold); }
.leak .stat span { font-size: 12px; color: var(--dim); }
.leak .src { font-size: 10px; margin-top: 20px; }
.barrel-outline { fill: none; stroke: #b8ad92; stroke-width: 1.3; }
.barrel-staves { fill: none; stroke: #91856d; stroke-opacity: .4; stroke-width: .75; }
.barrel-hoops { fill: none; stroke: #b8ad92; stroke-opacity: .72; stroke-width: 1; }
.leak-pointer { fill: none; stroke: var(--primary); stroke-width: .8; }
.diagram-caption { font: 8px var(--mono); letter-spacing: 1.3px; fill: #928c7e; }

/* Four layers share a baseline and a quiet connector, without a pinned carousel. */
.stack .intro { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; padding-top: clamp(64px, 8vw, 112px); }
.stack .intro h2 { max-width: 18ch; margin-top: 20px; }
.stack .intro .lead { max-width: 28ch; }
.stack .pin { padding-block: 48px 24px; }
.stack .track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-inline: var(--gutter); }
.stack .path { display: none; }
.layer { position: relative; min-width: 0; padding: 24px 24px 28px 0; border-top: 1px solid var(--line); }
.layer:not(:first-of-type) { padding-left: 24px; }
.layer .n { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .1em; }
.layer .node { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.layer:not(:first-of-type) .node { left: 24px; }
.layer svg.icon { width: 64px; height: 64px; margin: 24px 0 20px; }
.layer svg.icon * { fill: none; stroke: var(--head); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.layer svg.icon .hot { stroke: var(--primary); }
.layer h3 { font-family: var(--display); font-weight: 400; color: var(--head); font-size: 27px; line-height: 1.1; margin: 0 0 12px; }
.layer p { color: var(--body); font-size: 14px; max-width: 30ch; }
.layer.end { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 32px; padding: 24px 0; border-block: 1px solid var(--line); }
.layer.end .n { color: var(--primary); flex-shrink: 0; }
.layer.end > div { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; }
.layer.end h3 { font-size: 24px; margin: 0; }
.layer.end p { max-width: none; }

/* Measure */
.measure .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.photo { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 5; }
.photo img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
.photo .tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; background: rgba(20,15,12,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--head); }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.lists h3 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; }
.lists ul { list-style: none; }
.lists li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--head); font-size: 15px; display: flex; justify-content: space-between; gap: 12px; }
.lists li small { color: var(--dim); font-size: 12px; }
.heat { margin-top: clamp(48px, 6vw, 80px); }
.heat .bar { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.heat canvas { width: 100%; height: clamp(210px, 21vw, 280px); border-radius: 4px; background: rgba(206,203,172,.018); border: 1px solid var(--line); }
.heat .legend { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.heat .legend i { width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--sky), var(--gold), var(--primary)); }

/* Why now */
.whynow { text-align: center; overflow: clip; }
.whynow canvas.contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .68; }
.whynow blockquote { position: relative; font-family: var(--display); color: var(--head); font-size: clamp(28px, 3.3vw, 48px); line-height: 1.12; max-width: 20ch; margin: 36px auto 0; }
.whynow .who { position: relative; margin-top: 32px; font-size: 13px; color: var(--dim); }
.whynow .punch { position: relative; margin: clamp(64px, 8vw, 110px) auto 0; max-width: 30ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: var(--head); }
.whynow .punch b { font-weight: 500; color: var(--primary); }

/* Proof */
.proof .cells { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.proof .cell { padding: 40px 32px 40px 0; border-right: 1px solid var(--line); }
.proof .cell + .cell { padding-left: 32px; }
.proof .cell:last-child { border-right: 0; }
.proof .cell b { display: block; font-family: var(--display); font-weight: 400; color: var(--head); font-size: clamp(36px, 4vw, 56px); line-height: 1; font-variant-numeric: tabular-nums; }
.proof .cell span { display: block; margin-top: 14px; color: var(--body); font-size: 14px; max-width: 26ch; }

/* Setup (white glove) */
.setup .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.setup ol { list-style: none; counter-reset: s; margin-top: 40px; }
.setup li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); }
.setup li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 13px; color: var(--primary); padding-top: 6px; }
.setup li b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--head); line-height: 1.1; }
.setup li span { color: var(--body); font-size: 16px; }
.setup .shot { position: sticky; top: 100px; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 11; }
.setup .shot img { width: 100%; height: 100%; object-fit: cover; }

/* Call to action */
.cta { padding-block: 64px; overflow: clip; border-top: 1px solid var(--line); }
.cta canvas.contours { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta .inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 48px; }
.cta .eyebrow { grid-column: 1 / -1; }
.cta h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; max-width: 26ch; margin: 0; }
.cta .btn { justify-self: start; }

/* Woodcut line art (the RR_21 engravings), drawn as a mask so they take any color. */
.woodcut { position: absolute; pointer-events: none; background: var(--head); opacity: .12;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.woodcut.barrels { --src: url("../img/woodcut-barrels.svg"); aspect-ratio: 439 / 605; }
.woodcut.glass { --src: url("../img/woodcut-glass.svg"); aspect-ratio: 435 / 564; }

/* Subpage hero */
.page-hero { min-height: 380px; display: grid; align-items: center; padding-top: 128px; padding-bottom: 64px; overflow: clip; }
.page-hero canvas.contours { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero .copy { position: relative; z-index: 1; }
.page-hero h1 { margin: 22px 0 24px; max-width: 15ch; }
.page-hero .woodcut { right: calc(var(--gutter) + 72px); bottom: 40px; height: 210px; opacity: .16; }

/* Spec sheet (sensor page) */
.spec { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.spec dl { margin-top: 36px; }
.spec dl div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.spec dt { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding-top: 4px; }
.spec dd { color: var(--head); }
.spec .photo { aspect-ratio: 1100 / 1857; width: min(100%, 380px); justify-self: center; }
.spec .photo img { inset: 0; height: 100%; }
.ring { position: absolute; left: 50.5%; top: 69%; width: 18px; height: 18px; translate: -50% -50%; z-index: 2; }
.ring i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--primary); animation: ping 5.4s var(--ease-out) infinite; }
.ring i:nth-child(2) { animation-delay: 1.8s; } .ring i:nth-child(3) { animation-delay: 3.6s; }
@keyframes ping { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }

/* Streams (data page) */
.streams svg { width: 100%; height: auto; overflow: visible; }
.streams .flow { fill: none; stroke-width: 2; stroke-linecap: round; }
.streams .flow.dash { stroke-dasharray: 2 14; animation: flow 5s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.streams text { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; fill: var(--body); }
.streams text.big { font-family: var(--display); font-size: 25px; letter-spacing: 0; text-transform: none; fill: var(--head); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.card { padding: 24px 0 0; border-top: 1px solid var(--line); }
.card h3 { font-family: var(--display); font-weight: 400; color: var(--head); font-size: 26px; line-height: 1.15; margin: 16px 0 10px; }
.card h3:first-child { margin-top: 0; }
.card p { font-size: 15px; max-width: 38ch; }
.card .icon { width: 34px; height: 34px; }
.card .eyebrow::before { display: none; }

/* Footer */
.foot { position: relative; overflow: clip; padding: clamp(56px, 7vw, 88px) var(--gutter) 40px; background: #0f0b09; }
.foot .woodcut { left: -40px; top: 40px; height: 90%; opacity: .07; }
.foot .big { position: relative; font-family: var(--display); color: var(--head); font-size: clamp(44px, 6.8vw, 96px); line-height: .9; letter-spacing: -.02em; }
.foot .row { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; }
.foot nav { display: flex; gap: 28px; flex-wrap: wrap; }
.foot nav a:hover { color: var(--head); }
.foot small { color: var(--dim); font-size: 13px; }

/* Heat map flag (illustrative) */
.heat .stage { position: relative; }
.heat .flag { position: absolute; left: 0; top: 0; pointer-events: none; translate: 18px -50%; white-space: nowrap;
  padding: 6px 10px; border-radius: 6px; background: rgba(20,15,12,.85); box-shadow: inset 0 0 0 1px rgba(242,87,65,.6);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--head); }
.heat .flag b { color: var(--primary); font-weight: 400; }
.heat .flag.left { translate: calc(-100% - 18px) -50%; }

/* Proof code (the patent number is long) */
.proof .cell b.code { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.01em; }

/* Timeline (company page) */
.timeline { position: relative; margin-top: 40px; padding-left: 36px; max-width: 880px; }
.timeline::before, .timeline .fill { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.timeline .fill { background: var(--primary); transform-origin: top; }
.timeline li { position: relative; list-style: none; padding: 0 0 36px; }
.timeline li::before { content: ""; position: absolute; left: -34px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 2px var(--primary); }
.timeline .when { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.timeline h3 { font-family: var(--display); font-weight: 400; color: var(--head); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; margin: 8px 0; }

/* Next page: a compact editorial link. */
.next-page { display: block; padding-block: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); }
.next-page .eyebrow { display: flex; margin-bottom: 18px; }
.next-page .t { display: inline-block; font-family: var(--display); color: var(--head); font-size: clamp(32px, 4.4vw, 64px); line-height: 1; letter-spacing: -.015em; transition: color .4s; }
.next-page .arr { display: inline-block; margin-left: .2em; font-family: var(--display); font-size: clamp(32px, 4.4vw, 64px); line-height: 1; color: var(--primary); transition: transform .6s var(--ease-out); }
.next-page:hover .t { color: var(--primary); }
.next-page:hover .arr { transform: translateX(16px); }

.eyebrow { --tick: 1; }
.eyebrow::before { transform: scaleX(var(--tick)); }

/* Streams on phones: the diagram becomes a list. */
.streams .mobile { display: none; }
@media (max-width: 700px) {
  .streams svg { display: none; }
  .streams .mobile { display: grid; gap: 10px; }
  .streams .mobile div { padding: 18px 20px; border-radius: 4px; border: 1px solid var(--line); color: var(--head); }
  .streams .mobile div.j { color: var(--primary); border-color: rgba(242,87,65,.35); }
  .streams .mobile span { display: block; text-align: center; color: var(--primary); }
}

/* Content remains readable if an enhancement fails to load. */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-group(nav-mark) { animation-duration: .35s; }
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .35s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
.vt-fallback body { transition: opacity .18s ease; }
.vt-leaving body { opacity: 0; }

/* The contour field fades into the page ground, with clear space behind the copy. */
.hero, .page-hero, .cta, .whynow { isolation: isolate; }
canvas.contours { pointer-events: none; opacity: .82; mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); }
.hero::before, .page-hero::before, .cta::before, .whynow::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20,15,12,.82), rgba(20,15,12,.28) 55%, rgba(20,15,12,.24)), linear-gradient(0deg, var(--ground), transparent 18%, transparent 88%, var(--ground)); }
.cta::before, .whynow::before { background: radial-gradient(ellipse at center, rgba(20,15,12,.5), rgba(20,15,12,.12) 80%), linear-gradient(0deg, var(--ground), transparent 20%, transparent 80%, var(--ground)); }
.page-hero .copy, .cta .inner, .whynow > :not(canvas) { position: relative; z-index: 2; }
.timeline li:last-child { padding-bottom: 0; }
.timeline::before, .timeline .fill { bottom: 12px; }
.streams svg { overflow: hidden; }

/* Phone and tablet */
@media (max-width: 960px) {
  .nav ul { display: none; }
  .nav.open ul { display: flex; position: fixed; inset: 64px 12px auto 12px; flex-direction: column; align-items: stretch; padding: 12px; border-radius: 16px; background: rgba(20,15,12,.96); box-shadow: inset 0 0 0 1px var(--line); }
  .nav.open ul a { padding: 12px; font-size: 15px; }
  .menu-btn { display: inline-flex; background: none; border: 0; color: var(--head); font: 500 15px var(--sans); padding: 8px 0; cursor: pointer; }
  .nav .btn { display: none; }
  .stack .track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .layer:nth-of-type(odd) { padding-left: 0; }
  .layer:nth-of-type(odd) .node { left: 0; }
  .layer.end { padding: 22px 0; }
  .readouts .illus { text-align: left; }
  .scroll-cue { display: none; }
  .measure .grid2, .setup .grid2, .spec { grid-template-columns: 1fr; }
  .setup .shot { position: relative; top: 0; }
  .proof .cells { grid-template-columns: 1fr; }
  .proof .cell, .proof .cell + .cell { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .cards { grid-template-columns: 1fr; }
  .lists { grid-template-columns: 1fr; }
  .spec dl div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) {
  :root { --gutter: 22px; }
  body { font-size: 15px; }
  .brand { font-size: 18px; }
  .page-hero { min-height: 340px; padding-top: 112px; padding-bottom: 48px; }
  .cta { padding-block: 48px; }
  .layer { padding-right: 18px; }
  .layer:not(:first-of-type) { padding-left: 18px; }
  .layer:nth-of-type(odd) { padding-left: 0; }
  .layer h3 { font-size: 24px; }
  .layer:nth-of-type(even) .node { left: 18px; }
  .layer.end { display: block; padding: 20px 0; }
  .layer.end > div { margin-top: 12px; gap: 8px; }
  .layer.end h3 { font-size: 22px; }
  .heat .flag { font-size: 9px; padding: 5px 7px; }
  .foot nav { gap: 16px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}


/* Consistent editorial spacing across the Company page. */
.company-story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; border-top: 1px solid var(--line); }
.story-intro h2 { font-size: 36px; line-height: 1.12; }
.company-story .timeline { margin-top: 0; }
.timeline h3 { font-size: 24px; line-height: 1.2; }
.timeline p { font-size: 14px; }
.timeline .when { font-size: 10px; }
.company-values { border-top: 1px solid var(--line); }
.company-values .cards { margin-top: 24px; }
.nav .btn { padding: 6px 0; min-height: 30px; color: var(--head); background: none; border-bottom: 1px solid var(--primary); border-radius: 0; }
.nav .btn::before { display: none; }
.foot { padding-top: 48px; padding-bottom: 32px; }
.foot .big { font-size: clamp(40px, 4.5vw, 64px); }
.foot .woodcut { display: none; }
.next-page { padding-block: 44px; }
.next-page .t, .next-page .arr { font-size: clamp(28px, 3vw, 42px); }
@media (max-width: 1100px) and (min-width: 801px) {
 .hero { gap: 24px; }
 .chip { padding-inline: 8px; }
 .chip .v { font-size: 13px; }
 .chip .k { font-size: 8px; letter-spacing: 0; }
}
@media (max-width: 800px) {
 .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 112px; padding-bottom: 48px; }
 .hero .copy { max-width: 560px; }
 .hero h1.d-xl { font-size: clamp(38px, 7vw, 54px); max-width: 17ch; }
 .hero-visual { width: 100%; max-width: 600px; justify-self: center; }
 .readouts { margin-top: 0; }
 .leak { grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr); gap: 36px; padding-block: 48px; }
 .leak .art { width: 200px; top: 96px; }
 .leak .step h2 { font-size: 28px; }
 .company-story { grid-template-columns: 1fr; gap: 40px; }
 .page-hero .woodcut { right: 32px; opacity: .12; }
 .page-hero .copy { max-width: 68%; }
 .cta .inner { grid-template-columns: 1fr; gap: 20px; }
 .cta .eyebrow { grid-column: auto; }
}
@media (max-width: 560px) {
 .hero .actions { gap: 18px; }
 .hero .lead { font-size: 15px; }
 .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
 .chip { padding: 0 18px; }
 .chip:nth-child(3) { padding-left: 0; border-left: 0; }
 .chip .k { font-size: 9px; }
 .chip .v { font-size: 15px; }
 .statement p { font-size: 27px; }
 .leak { grid-template-columns: 1fr; gap: 32px; }
 .leak .art { position: relative; top: auto; width: 200px; }
 .page-hero .copy { max-width: none; }
 .page-hero .woodcut { display: none; }
 .story-intro h2 { font-size: 30px; }
 .timeline { padding-left: 30px; }
 .timeline li::before { left: -28px; }
 .timeline h3 { font-size: 22px; }
 .cards { gap: 28px; }
 .card h3 { font-size: 24px; }
 .btn { min-height: 36px; }
}

/* Product drawings are smooth, closed exterior views. Never expose internal assemblies. */
.technical-art { position: relative; width: 100%; min-width: 0; align-self: center; }
.technical-art img { display: block; width: 100%; height: auto; object-fit: contain; }
.hero-product { margin-bottom: 16px; }
.technical-art figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; color: var(--dim); font: 9px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sensor-study { align-self: start; position: sticky; top: 112px; }
.setup .grid2 > ol { margin-top: 0; }
@media (max-width: 960px) {
 .sensor-study { position: relative; top: auto; max-width: 560px; justify-self: center; }
 .warehouse-study { max-width: 600px; justify-self: center; }
}

/* Architectural collection: real 3D forms, open space, parchment and copper. */
:root { --copper: #bd906b; --draft: #81745e; }
.hero h1 em { color: #cfb58f; }
.hero { padding-top: 122px; padding-bottom: 54px; gap: 56px; }
.hero-visual { min-width: 0; }
.drawing { margin: 0; isolation: isolate; }
.drawing::before { content: ""; position: absolute; inset: 8% -10%; background: radial-gradient(ellipse, rgba(20,15,12,.94) 0%, rgba(20,15,12,.68) 48%, transparent 72%); pointer-events: none; z-index: -1; }
.plate-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 35px; border-top: 1px solid var(--line); color: var(--dim); font: 9px/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.plate-top > span:last-child:not(:first-child) { color: var(--draft); }
.view-switch { display: inline-flex; gap: 12px; flex-shrink: 0; }
.view-switch button { position: relative; padding: 9px 0; border: 0; border-radius: 0; background: none; color: var(--dim); font: inherit; font-size: 9px; letter-spacing: .02em; cursor: pointer; transition: color .25s ease; }
.view-switch button::after { content: ""; position: absolute; height: 1px; inset: auto 0 0; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.view-switch button[aria-pressed="true"] { color: var(--head); }
.view-switch button[aria-pressed="true"]::after { transform: scaleX(1); }
.view-switch button:hover { color: var(--head); }
.view-switch button:focus-visible { outline: 1px solid var(--copper); outline-offset: 4px; }
.drawing-stage { position: relative; min-width: 0; }
.drawing-stage::before, .drawing-stage::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; opacity: .6; transition: opacity .4s ease; }
.drawing-stage::before { top: 18px; left: 0; border-top: 1px solid var(--draft); border-left: 1px solid var(--draft); }
.drawing-stage::after { right: 0; bottom: 18px; border-right: 1px solid var(--draft); border-bottom: 1px solid var(--draft); }
.drawing:hover .drawing-stage::before, .drawing:hover .drawing-stage::after { opacity: 1; }
.drawing-stage img { width: 100%; height: auto; transition: opacity .22s ease; }
.drawing-stage img.is-changing { opacity: .18; }
.drawing figcaption { margin-top: 0; padding-top: 11px; font-size: 8px; letter-spacing: .055em; }
.drawing figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.signal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 10px rgba(189,144,107,.25); }
.hero-product { margin-bottom: 28px; }
.readouts { border-top: 0; padding-top: 0; }
.readouts .illus { font-size: 8px; opacity: .75; }
.chip .v { font-size: 14px; }
.chip .k { color: #a59c8a; }
.illustrated-hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 64px; align-items: center; padding-top: 122px; padding-bottom: 56px; }
.illustrated-hero .copy { max-width: 470px; }
.illustrated-hero > .drawing { position: relative; z-index: 2; min-width: 0; }
.illustrated-hero h1 { font-size: clamp(38px,4.4vw,56px); line-height: 1.08; }
.illustrated-hero .lead { font-size: 16px; line-height: 1.7; }
.leak { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 80px; }
.leak .art { width: 100%; max-width: 440px; }
.signal-study { padding: 0 0 16px; }
.signal-study > div { display: flex; justify-content: space-between; color: var(--dim); font: 9px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.signal-study svg { display: block; width: 100%; height: 70px; overflow: visible; margin-top: 12px; }
.signal-baseline { fill: none; stroke: var(--line); stroke-width: 1; }
.signal-trace { fill: none; stroke: var(--copper); stroke-width: 1.2; }
.signal-study circle { fill: var(--copper); }
.layer-drawing { display: block; width: 104px; height: 78px; object-fit: contain; margin: 18px 0 12px -12px; }
.layer svg.icon { width: 64px; height: 64px; margin: 24px 0 20px; }
.layer svg.icon .hot { stroke: var(--copper); }
.layer .node { width: 5px; height: 5px; top: -3px; background: var(--copper); }
.layer h3 { font-size: 25px; }
.layer.end .n, .lists h3, .timeline .when { color: var(--copper); }
.card svg.icon { stroke: var(--copper) !important; stroke-width: 1.25 !important; }
.heat canvas { border-radius: 0; background: transparent; border-inline: 0; }
.heat .legend i { height: 2px; border-radius: 0; background: linear-gradient(90deg,#827d68,#b8a47e,#bd906b); }
.heat .flag { border-radius: 0; border-left: 1px solid var(--copper); box-shadow: none; padding: 5px 8px; font-size: 9px; }
.heat .flag b { color: var(--copper); }
.streams .flow { stroke-width: 1; }
.streams svg > g { stroke: var(--draft); }
.streams svg > g:nth-of-type(2) { stroke: var(--copper); }
.streams .flow.dash { stroke: var(--copper); stroke-dasharray: 1 22; animation-duration: 12s; }
.streams svg > circle { fill: var(--ground); stroke: var(--copper); stroke-width: 1; }
.streams svg > circle:nth-of-type(4) { fill: var(--copper); stroke: none; r: 3; }
.streams text { font-size: 11px; letter-spacing: .08em; }
.streams text.big { font-size: 23px; }
.streams .mobile div, .streams .mobile div.j { border-radius: 0; border-color: var(--line); padding: 14px 0; border-inline: 0; }
.streams .mobile div.j, .streams .mobile span { color: var(--copper); }
.timeline .fill { background: var(--copper); }
.timeline li::before { width: 7px; height: 7px; top: 8px; left: -32px; box-shadow: inset 0 0 0 1px var(--copper); }
@media (min-width: 1500px) { .hero { padding-top: 142px; padding-bottom: 74px; } }
@media (max-width: 1000px) { .hero, .illustrated-hero { gap: 32px; } .plate-top { font-size: 8px; } .view-switch { gap: 10px; } .view-switch button { font-size: 8px; } .leak { gap: 40px; } }
@media (max-width: 800px) {
 .hero, .illustrated-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 112px; padding-bottom: 48px; }
 .illustrated-hero .copy { max-width: 580px; }
 .illustrated-hero > .drawing { width: 100%; max-width: 580px; justify-self: center; }
 .hero .copy { max-width: 580px; }
 .leak { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
 .leak .art { width: 100%; }
}
@media (max-width: 560px) {
 .plate-top { gap: 8px; font-size: 8px; }
 .plate-top > span { max-width: 55%; }
 .view-switch { gap: 10px; }
 .view-switch button { padding-block: 11px; font-size: 8px; }
 .drawing figcaption { font-size: 7px; gap: 8px 12px; }
 .hero-product { margin-bottom: 26px; }
 .hero h1.d-xl { font-size: 39px; }
 .illustrated-hero h1 { font-size: 40px; }
 .leak { grid-template-columns: 1fr; }
 .leak .art { max-width: 390px; }
 .timeline li::before { left: -26px; }
 .chip .v { font-size: 14px; }
 .signal-study svg { height: 54px; }
}
@media (max-width: 560px) {
 .hero-product { margin-bottom: 26px; }
 .technical-art figcaption { font-size: 8px; }
}

/* Live 3D replaces sampled hidden-line paths. Labels remain readable beside it. */
.hero, .illustrated-hero { align-items: start; padding-top: 130px; gap: 60px; }
.hero .copy, .illustrated-hero .copy { padding-top: 10px; }
.hero h1.d-xl { font-size: clamp(39px,4.1vw,54px); line-height: 1.08; }
.hero .lead, .illustrated-hero .lead { font-size: 17px; line-height: 1.65; color: #c0b9a9; }
.plate-top { min-height: 42px; font: 500 12px/1.5 var(--sans); letter-spacing: .01em; text-transform: none; color: #b8ad97; }
.plate-top > span:last-child:not(:first-child) { color: #a99d87; }
.view-switch { gap: 16px; }
.view-switch button { font: 500 12px/1.5 var(--sans); letter-spacing: 0; padding-block: 10px; }
.drawing figcaption, .technical-art figcaption { font: 400 12px/1.5 var(--sans); text-transform: none; letter-spacing: 0; color: #aa9f8b; padding-top: 12px; }
.drawing-stage[data-model] { aspect-ratio: 4 / 3; width: 100%; background: radial-gradient(ellipse at 50% 68%,rgba(163,88,35,.055),transparent 58%); }
.drawing-stage[data-model="architecture"] { aspect-ratio: 14 / 11; }
.drawing-stage[data-model="rack"] { aspect-ratio: 3 / 2; }
.drawing-stage[data-model="level"] { aspect-ratio: 1.1; }
.drawing-stage[data-model] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* The drawings are studies at their own scale and pose, so crossfading one into the 3D model reads as a jump.
   The canvas fades in alone; a drawing only shows without script or WebGL (.model-fallback, or the noscript rule in each head). */
.drawing-stage[data-model]:not(.model-fallback) > img { visibility: hidden; }
.architecture-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .85s ease; cursor: grab; touch-action: pan-y !important; }
.architecture-canvas:active { cursor: grabbing; }
.architecture-canvas:focus-visible { outline: 1px solid var(--copper); outline-offset: -5px; }
.model-visible .architecture-canvas { opacity: 1; }
.drawing-stage::before, .drawing-stage::after { opacity: .3; }
.chip .k { font: 500 11px/1.4 var(--sans); text-transform: none; letter-spacing: .01em; color: #aaa18f; }
.chip .v { font: 400 16px/1.3 var(--mono); margin-top: 6px; }
.readouts .illus { font: 11px/1.5 var(--sans); text-transform: none; letter-spacing: 0; opacity: 1; }
.hero-product { margin-bottom: 25px; }
.level-key { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 6px 16px; font: 12px/1.5 var(--sans); color: #b4a68e; }
.level-key > span:first-child { display: flex; gap: 9px; align-items: center; }
.level-key i { width: 12px; height: 12px; border: 1px solid #c89560; background: rgba(187,131,71,.3); }
.leak-study { align-self: start; }
.leak .step .lead { font-size: 16px; }
.leak .src { font-size: 11px; line-height: 1.55; }
.hero::before, .page-hero::before { background: linear-gradient(90deg,rgba(20,15,12,.84),rgba(20,15,12,.46) 55%,rgba(20,15,12,.34)),linear-gradient(0deg,var(--ground),transparent 22%,transparent 75%,var(--ground)); }
.drawing::before { background: radial-gradient(ellipse,rgba(20,15,12,.92),rgba(20,15,12,.76) 55%,transparent 75%); }
@media (max-width:1100px) { .hero,.illustrated-hero { gap: 36px; } .chip .v { font-size: 14px; } }
@media (max-width:800px) { .hero,.illustrated-hero { gap: 34px; padding-top: 108px; } .hero .copy,.illustrated-hero .copy { padding-top: 0; } .hero-visual { max-width: 560px; } }
@media (max-width:560px) {
 .hero h1.d-xl { font-size: 38px; }
 .hero .lead,.illustrated-hero .lead { font-size: 16px; }
 .plate-top { font-size: 11px; gap: 12px; }
 .plate-top > span { max-width: none; }
 .view-switch { gap: 14px; }
 .view-switch button { font-size: 11px; }
 .drawing figcaption,.technical-art figcaption { font-size: 11px; }
 .drawing-stage[data-model] { aspect-ratio: 1.2; }
 .drawing-stage[data-model="architecture"] { aspect-ratio: 1.1; }
 .drawing-stage[data-model="rack"] { aspect-ratio: 1.3; }
 .chip .k { font-size: 12px; }
 .chip .v { font-size: 16px; }
 .level-key { font-size: 11px; }
}

/* Final review: clear data, authentic wordmark, and one architectural family. */
.eyebrow::before { display: none; content: none; }
.brand img { width: 140px; height: 40px; object-fit: contain; }
.foot .big img { width: 210px; height: 60px; object-fit: contain; }
.movement-status { display: flex; align-items: center; gap: 8px; }
.movement-status i { width: 5px; height: 5px; border-radius: 50%; background: #a6b98b; }
.level-key b { font-weight: 500; color: #e1ba80; min-width: 3ch; }
.layer .layer-art { width: 160px; height: 116px; object-fit: contain; margin: 9px 0 14px -14px; }
.whynow blockquote { max-width: 880px; font-size: clamp(30px,3.2vw,44px); line-height: 1.22; text-wrap: balance; }
.whynow .punch { max-width: 58ch; margin-top: 44px; font-size: 18px; line-height: 1.6; }
.whynow .punch b { color: #d5b182; }
.cta h2 { max-width: none; font-size: clamp(28px,3vw,40px); line-height: 1.2; }
.cta h2 span { display: block; }
.heat-caption { margin-top: 10px; font-size: 14px; color: #aaa38f; }
.heat .legend { flex-wrap: wrap; gap: 10px; font: 12px/1.5 var(--sans); }
.heat .legend i { height: 5px; width: 150px; background: linear-gradient(90deg,#669791,#d2b369,#d67441); }
.heat .legend-label { color: #beb49f; margin-left: 7px; }
.heat-grid { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 28px; align-items: stretch; }
.heat canvas { height: 300px; border: 1px solid var(--line); background: rgba(20,15,12,.6); }
.heat .flag { color: #f2d09b; background: #21190f; border: 1px solid rgba(225,180,114,.38); font: 11px/1.4 var(--sans); padding: 6px 9px; translate: 22px -50%; }
.heat .flag.left { translate: calc(-100% - 22px) -50%; }
.humidity-event { border-top: 1px solid rgba(225,180,114,.5); padding: 19px 0 0 8px; }
.event-label { display: flex; gap: 9px; align-items: center; color: #e6bf83; font-size: 13px; }
.event-label i { width: 6px; height: 6px; border-radius: 50%; background: #edc17f; box-shadow: 0 0 12px #cb8a45; }
.event-reading { font: 42px/1.2 var(--display); color: #e7c79a; margin: 15px 0 7px; }
.event-reading span { font: 14px/1.4 var(--sans); margin-left: 7px; color: #b5a78e; }
.humidity-event p { font: 12px/1.5 var(--sans); color: #bcb19b; }
.humidity-event svg { width: 100%; height: 72px; margin-block: 18px 12px; overflow: visible; }
.event-baseline { fill: none; stroke: #514433; stroke-width: .7; stroke-dasharray: 3 5; }
.event-trace { fill: none; stroke: #efc287; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 3px #ba7a3b); }
.humidity-event svg circle { fill: #ffe0ab; }
.event-location { font-size: 12px; color: #b5aa94; }
.heat-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 12px; color: #aaa18e; }
.setup-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.setup-intro h2 { margin-top: 20px; }
.setup-intro .lead { max-width: 44ch; }
.setup-flow { display: grid; grid-template-columns: .95fr 1.05fr; position: relative; align-items: center; margin: 40px 0 32px; border-top: 1px solid var(--line); }
.setup-flow::before { display: none; }
.setup-warehouse { position: relative; min-width: 0; }
.setup-flow .drawing-stage { aspect-ratio: 1.35; }
.setup-flow .drawing-stage::before,.setup-flow .drawing-stage::after { display: none; }
.flow-caption { text-align: center; display: grid; gap: 4px; margin-top: -18px; padding-bottom: 25px; }
.flow-caption strong { font: 400 23px/1.3 var(--display); color: #d5bc91; }
.flow-caption span { font-size: 12px; color: #b5a78e; }
.pairing-map { width: 100%; height: auto; overflow: visible; }
.pairing-lines { stroke: #a88b5d; stroke-width: 1; }
/* Hold the drawn lines at one screen pixel so they match the warehouse outlet's 1px border at every width. */
.pairing-lines path { vector-effect: non-scaling-stroke; }
.pairing-pulses { stroke: #f1cd8d; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 280; animation: paired-data 12s linear infinite; filter: url(#pairing-glow); }
.pairing-node { fill: #19120d; stroke: #ddb67c; stroke-width: 1.2; filter: url(#pairing-glow); }
.pairing-node circle:nth-child(2) { fill: #f4d49d; }
.pairing-map text { fill: #d8c3a0; font: 19px var(--sans); }
.pairing-map .small { fill: #a79b86; font: 13px var(--sans); }
.systems-node path { fill: none; stroke: #d4b27a; stroke-width: 1; filter: url(#pairing-glow); }
.systems-node text:not(.small) { font: 27px var(--display); }
.setup-flow figcaption { grid-column: 1/-1; display: flex; justify-content: space-between; padding-bottom: 0; }
.setup .setup-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 25px; margin-top: 30px; }
.setup .setup-steps li { display: block; padding-top: 15px; }
.setup .setup-steps li::before { display: block; padding: 0 0 16px; color: var(--copper); }
.setup .setup-steps li b { font-size: 22px; margin-bottom: 10px; }
.setup .setup-steps li span { font-size: 14px; line-height: 1.55; }
@keyframes paired-data { to { stroke-dashoffset: -283; } }
@media (max-width:900px) {
 .heat-grid { grid-template-columns: minmax(0,1fr) 205px; gap: 20px; }
 .setup .setup-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .setup-intro { gap: 32px; }
 .pairing-map text { font-size: 21px; }
 .pairing-map .small { font-size: 15px; }
}
@media (max-width:650px) {
 .brand img { width: 126px; height: 36px; }
 .heat-grid { grid-template-columns: 1fr; }
 .heat canvas { height: 280px; }
 .humidity-event { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 17px 0; }
 .event-label,.event-reading,.humidity-event p { grid-column: 1; margin: 0; }
 .humidity-event svg { grid-column: 2; grid-row: 1/4; align-self: center; margin: 0; }
 .event-location { grid-column: 1/-1; }
 .heat .legend { width: 100%; }
 .heat .legend i { flex: 1; }
 .setup-intro { grid-template-columns: 1fr; gap: 20px; }
 .setup-flow { grid-template-columns: 1fr; margin-top: 28px; }
 .setup-flow .drawing-stage { max-width: 420px; margin-inline: auto; }
 .flow-caption { margin-top: -30px; padding-bottom: 8px; }
 .pairing-map { margin-block: 0 10px; }
 .setup .setup-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
 .whynow blockquote { font-size: 29px; }
 .whynow .punch { font-size: 16px; }
 .cta h2 span { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .pairing-pulses { animation: none; } }
.keep-together { white-space: nowrap; }
.whynow .punch { text-wrap: balance; }

/* October 26 recorded review: centered studies and a simpler reading sequence. */
.hero,.illustrated-hero { align-items: center; }
.hero .copy,.illustrated-hero .copy { padding-top: 0; }
.statement { position: relative; isolation: isolate; text-align: center; overflow: hidden; }
.statement-copy,.statement > p,.statement > .eyebrow { position: relative; z-index: 2; }
.statement p { max-width: 48ch; margin: 22px auto 0 !important; font-size: clamp(25px,2.35vw,32px); line-height: 1.4; }
.statement canvas.contours { opacity: .55; }
.leak .steps { gap: 48px; }
.leak .step { padding-bottom: 40px; }
.leak .art { top: max(94px,calc(50vh - 230px)); }
.sensor-answer { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-block: 42px 64px; border-bottom: 1px solid var(--line); }
.sensor-answer h2 { margin-top: 16px; }
.sensor-answer p { max-width: 46ch; font-size: 16px; line-height: 1.65; }
.sensor-answer .btn { margin-top: 22px; }
.stack .intro h2 { max-width: 30ch; font-size: clamp(30px,3.5vw,44px); }
.measure .grid2 { align-items: center; }
.measure-summary { margin-top: 22px; max-width: 32ch; font-size: 17px; line-height: 1.65; }
.barrel-signals { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 23px; padding: 16px 0 0; border-top: 1px solid var(--line); font: 13px/1.5 var(--sans); color: #c7b99f; }
.heat .alert-icon { width: 17px; height: 17px; margin: 0; overflow: visible; fill: none; stroke: #e5b774; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.event-label { display: flex; align-items: center; gap: 9px; }
.heat .realtime-label { color: #d9b77f; }
.whynow .punch b,.setup .punch b { display: block; margin-top: 4px; }
.proof .cell b.code { font-size: clamp(26px,2.6vw,36px); }
.setup-warehouse { display: grid; grid-template-rows: auto; }
.setup-flow .flow-caption { position: relative; margin: 0; padding: 14px 0 16px; }
.warehouse-outlet { position: absolute; left: 82%; right: 0; top: 50%; border-top: 1px solid #a88b5d; }
.warehouse-outlet i { position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border: 1px solid #ddb67c; background: #140f0c; border-radius: 50%; }
.spec { align-items: start; }
.spec > .drawing { position: sticky; top: max(92px,calc(50vh - 215px)); margin-top: 80px; }
.profile-dimension { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.is-profile .profile-dimension { opacity: 1; }
.profile-dimension path { fill: none; stroke: #e4c699; stroke-width: 1; }
.profile-dimension text { fill: #e4c699; font: 13px var(--sans); }
.drawing-stage[data-model="brand"] { aspect-ratio: 1.3; }
.flow-heading { text-align: center; margin-bottom: 46px; }
.flow-heading h2 { margin-top: 20px; }
.data-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 42px; padding: 0; list-style: none; }
.data-flow > li { position: relative; min-width: 0; }
.flow-art { height: 172px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.flow-art .drawing-stage[data-model] { height: 172px; aspect-ratio: auto; }
.flow-mark { width: 90px; height: 90px; }
.streams .flow-symbol { display: block; width: 145px; height: 120px; fill: none; stroke: #d3b184; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.flow-number { color: #a7987d; font: 11px var(--mono); }
.data-flow h3 { margin: 12px 0; font: 26px/1.2 var(--display); color: var(--head); }
.data-flow p { font-size: 14px; line-height: 1.65; }
.streams .stage-connector { position: absolute; top: 80px; left: calc(100% - 4px); width: 50px; height: 12px; overflow: visible; display: block; }
.stage-connector path { stroke: #78684d; stroke-width: 1; fill: none; }
.stage-connector .travel { stroke: #e2bf86; stroke-dasharray: 5 95; animation: feed-travel 6s linear infinite; }
.company-story .story-intro { align-self: center; }
@keyframes feed-travel { to { stroke-dashoffset: -100; } }
@media(max-width:800px) {
 .sensor-answer { gap: 32px; }
 .barrel-signals { grid-template-columns: repeat(2,1fr); }
 .spec > .drawing { position: relative; top: auto; margin-top: 0; }
 .data-flow { gap: 26px; }
 .streams .stage-connector { width: 34px; }
 .data-flow h3 { font-size: 22px; }
 .flow-art,.flow-art .drawing-stage[data-model] { height: 140px; }
 .streams .stage-connector { top: 64px; }
}
@media(max-width:650px) {
 .sensor-answer { grid-template-columns: 1fr; gap: 20px; padding-block: 30px 45px; }
 .leak .art { top: auto; }
 .stack .intro h2 { font-size: 30px; }
 .warehouse-outlet { display: none; }
 .setup-flow .drawing-stage[data-model="architecture"] { margin-bottom: 0; }
 .setup-flow .flow-caption { padding-bottom: 15px; }
 .data-flow { grid-template-columns: 1fr; gap: 32px; }
 .data-flow > li { display: grid; grid-template-columns: 95px 1fr; column-gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
 .flow-art { grid-column: 1; grid-row: 1/4; margin: 0; height: 110px; }
 .flow-art .drawing-stage[data-model] { height: 110px; }
 .flow-number,.data-flow h3,.data-flow p { grid-column: 2; }
 .flow-mark { width: 65px; height: 65px; }
 .streams .flow-symbol { width: 95px; height: 95px; }
 .streams .stage-connector { display: none; }
 .flow-heading { margin-bottom: 30px; }
}
@media(prefers-reduced-motion:reduce) { .stage-connector .travel { animation: none; } }
.pairing-mobile { display: none; }
@media (max-width:650px) {
 .pairing-map { display: none; }
 .pairing-mobile { display: grid; text-align: center; margin: 0 0 25px; color: #d7bd95; }
 /* The warehouse feed runs down the gap between the two inputs to the join. */
 .paired-inputs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 15px; padding-top: 26px; }
 .paired-inputs::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #9e8053; }
 .paired-inputs > div { display: flex; flex-direction: column; align-items: center; }
 .paired-inputs small { display: block; font-size: 11px; color: #aea18b; margin-top: 5px; }
 .paired-inputs > div::after { content: ''; flex: 1 0 28px; width: 1px; background: #9e8053; margin-top: 10px; }
 .paired-join { position: relative; border-top: 1px solid #9e8053; margin-inline: calc(25% - 7px); padding-top: 16px; font-size: 12px; }
 .paired-join::before { content: ''; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -4px; border: 1px solid #ddb67c; background: var(--ground); border-radius: 50%; }
 .paired-join::after { content: ''; display: block; height: 30px; width: 1px; background: #d3ab73; margin: 12px auto 0; box-shadow: 0 0 7px #aa713c; }
 .paired-output { display: grid; gap: 6px; padding: 16px; border: 1px solid #886b43; margin: 0 14%; }
 .paired-output strong { font: 24px/1.2 var(--display); }
 .paired-output span { font-size: 12px; color: #aea18b; }
}

/* Screenshot corrections: the decorative field must never occupy document flow. */
.statement canvas.contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.statement { padding-block: clamp(48px,6vw,80px); }
.sensor-answer,.setup-intro { align-items: start; }
.sensor-answer > div:last-child { padding-top: 34px; }
.setup-intro > .lead { padding-top: 38px; }
.setup-flow { margin-top: 44px; }
.setup-flow .flow-caption { padding-top: 28px; padding-bottom: 24px; }
.setup .setup-steps { margin-top: 48px; }
.setup .grid2 { align-items: center; }
.custom-support { margin-top: 22px; }
.custom-support + .btn { margin-top: 24px; }
.measure .grid2 { gap: 56px; align-items: center; }
.measure-summary { max-width: 38ch; }
.event-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #e5b774; box-shadow: 0 0 9px #c8914560; }

/* A shared, accessible metric graph replaces disconnected numeric widgets. */
.signal-chart { margin-top: 28px; min-width: 0; }
.signal-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--line); gap: 12px; }
.signal-tabs button { position: relative; appearance: none; padding: 13px 0; min-height: 44px; border: 0; background: none; color: #9f9683; cursor: pointer; font: 12px/1.3 var(--sans); text-align: left; }
.signal-tabs button::after { content: ''; position: absolute; height: 1px; inset: auto 0 -1px; background: #d8b276; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.signal-tabs button[aria-selected="true"] { color: #e1c99e; }
.signal-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.signal-tabs button:hover { color: #e1c99e; }
.signal-plot { padding-top: 16px; opacity: 1; transform: translateY(0); transition: opacity .18s ease,transform .3s ease; }
.signal-plot.is-changing { opacity: 0; transform: translateY(5px); }
.signal-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font: 12px/1.4 var(--sans); color: #aa9f8b; }
.signal-summary strong { font: 22px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: #dfc293; white-space: nowrap; }
.signal-summary strong span { font-size: 12px; margin-left: 5px; color: #bfb092; }
.signal-plot svg { width: 100%; height: 126px; margin-top: 14px; overflow: visible; }
.chart-grid { fill: none; stroke: #cecbac18; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: #d8b276; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #d2984640); stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; }
.is-changing .chart-line { stroke-dashoffset: 1; }
.chart-area { fill: #c89f5e0b; stroke: none; }
.chart-point { fill: #f2d39c; }
.signal-plot text { fill: #918671; font: 10px var(--sans); }
.signal-foot { display: flex; justify-content: space-between; align-items: center; color: #918671; font: 10px/1.5 var(--sans); }
.signal-play { background: none; border: 0; padding: 8px 0 8px 14px; color: #b8aa90; font: inherit; cursor: pointer; min-height: 32px; }
.signal-chart.compact { margin-top: 20px; }
.compact .signal-plot svg { height: 86px; }
.compact .signal-summary strong { font-size: 19px; }
.hero .copy { align-self: start; padding-top: clamp(64px,8vw,112px); }

/* Comparable loss ranges use one scale and retain the supplied qualifiers. */
.loss-chart { margin-top: 28px; }
.loss-row { display: grid; grid-template-columns: 62px minmax(0,1fr) 78px; gap: 14px; align-items: center; margin-top: 18px; font: 12px/1.4 var(--sans); }
.loss-row > span { color: #c6bba4; }
.loss-row b { font-weight: 500; font-size: 14px; color: #dfbc83; }
.loss-track { position: relative; height: 12px; background: #cecbac09; border-bottom: 1px solid #cecbac25; }
.loss-track i { position: absolute; inset-block: 0; }
.loss-maximum { left: 0; width: 90%; background: linear-gradient(90deg,#d5b17835,#d5b178b0); border-right: 2px solid #e6c58d; }
.loss-range { left: 10%; width: 20%; background: #b9ba8380; border-inline: 2px solid #c6c496; }
.loss-scale { display: flex; justify-content: space-between; margin: 12px 92px 0 76px; color: #8e856f; font: 10px var(--sans); }
.loss-chart figcaption { margin-top: 16px; color: #9e947e; font: 11px/1.5 var(--sans); }

/* All feed symbols share a warm stroke; connectors bridge actual symbol bounds. */
.data-flow { --flow-gap: 42px; gap: var(--flow-gap); }
.flow-art { isolation: isolate; position: relative; }
.flow-art .drawing-stage::before,.flow-art .drawing-stage::after { display: none; }
.flow-mark { width: 110px; height: 110px; filter: drop-shadow(0 0 3px #d5a15075); }
.streams .flow-symbol { stroke: #dfc89d; stroke-width: 1.45; filter: drop-shadow(0 0 3px #d5a15065); }
.streams .flow-symbol circle { fill: var(--ground); stroke: #dfc89d; stroke-width: 1.45; }
.streams .stage-connector { left: calc(50% + 76px); width: calc(100% + var(--flow-gap) - 152px); height: 12px; top: 80px; }
.stage-connector path { stroke: #9e855d; stroke-width: 1; vector-effect: non-scaling-stroke; }
.stage-connector .travel { stroke: #ebca91; stroke-width: 1.6; filter: drop-shadow(0 0 3px #e0af6b); }
.data-flow li:nth-child(2) .travel { animation-delay: -2s; }
.data-flow li:nth-child(3) .travel { animation-delay: -4s; }
@media(max-width:900px) {
 .measure .grid2 { gap: 32px; }
 .signal-tabs { gap: 8px; }
 .signal-tabs button { font-size: 11px; }
}
@media(max-width:800px) {
 .data-flow { --flow-gap: 26px; }
 .streams .stage-connector { top: 64px; left: calc(50% + 60px); width: calc(100% + var(--flow-gap) - 120px); }
 .flow-mark { width: 86px; height: 86px; }
 .streams .flow-symbol { width: 118px; }
 .measure .grid2 { grid-template-columns: 1fr; }
 .measure .warehouse-study { max-width: 500px; }
 .signal-chart:not(.compact) { max-width: 560px; }
}
@media(max-width:650px) {
 .sensor-answer > div:last-child,.setup-intro > .lead { padding-top: 0; }
 .sensor-answer { padding-top: 38px; }
 .setup .setup-steps { margin-top: 32px; }
 .setup-flow .flow-caption { padding-top: 20px; }
 .signal-tabs button { font-size: 11px; text-align: center; }
 .signal-chart.compact { margin-top: 22px; }
 .signal-plot svg { height: 116px; }
 .compact .signal-plot svg { height: 100px; }
 .loss-row { grid-template-columns: 56px minmax(0,1fr) 68px; gap: 10px; }
 .loss-scale { margin-inline: 66px 78px; }
 .loss-row b { font-size: 13px; }
 .flow-mark { width: 78px; height: 78px; }
 .streams .flow-symbol { width: 95px; }
 .streams .stage-connector { display: none; }
 .data-flow > li:not(:last-child)::after { content: ''; position: absolute; left: 47px; top: 110px; bottom: -26px; width: 1px; background: linear-gradient(#b49a6a,#78684d); }
 .data-flow > li { border: 0; padding-bottom: 8px; }
 .data-flow > li:last-child { padding-bottom: 0; }
}
@media(prefers-reduced-motion:reduce) {
 .signal-plot,.chart-line { transition: none; }
}

@media(max-width:800px) { .hero .copy { padding-top: 0; } }

@media(max-width:800px) { .drawing::before { inset: 8% 0; } }

/* Final recorded review: deliberate alignment and quieter supporting marks. */
.hero .copy { padding-top: 0; align-self: center; }
.hero-product { margin-bottom: 0; }
.leak .art { top: 100px; }
.leak .step { border-color: rgba(206,203,172,.07); }
.leak .src { font: 12px/1.6 var(--sans); letter-spacing: 0; color: #9f9785; }
.loss-track { height: 8px; background: #c6a66a0b; border: 0; }
.loss-maximum { background: #c7ab73; border: 0; border-radius: 1px; }
.loss-range { left: 0; width: 30%; border: 0; border-radius: 1px; background: linear-gradient(90deg,#a9ad7d 0%,#a9ad7d 33.33%,#a9ad7d75 33.33%,#a9ad7d75 100%); }
.loss-scale { margin-top: 14px; }
.sensor-answer > div:last-child { padding-top: 43px; }
.setup-intro > .lead { padding-top: 47px; }
.sensor-answer h2 { line-height: 1.15; }
.signal-caption { display: block; color: #a69b85; font: 12px/1.5 var(--sans); margin-bottom: 14px; }
.signal-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.signal-summary > div { min-width: 0; }
.signal-summary strong { display: block; margin-top: 8px; font-size: 23px; }
.signal-summary strong span { font-size: 11px; }
.metric-series { display: inline-flex; align-items: center; gap: 8px; color: #c8b89a; font-size: 12px; }
.metric-series::before { content: ''; width: 18px; border-top: 2px solid #d8b276; }
.warehouse-series { color: #a6b8a9; }
.warehouse-series::before { border-color: #94aa9c; border-top-style: dashed; }
.signal-plot svg { height: 148px; margin-top: 20px; }
.warehouse-line { fill: none; stroke: #94aa9c; stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.warehouse-point { fill: #b6c8bc; }
.chart-grid { stroke: #cecbac0d; }
.chart-area { fill: #c89f5e06; }
/* The alert card gets room of its own: a wider gap from the map, inner padding and a hairline rule. */
.heat-grid { align-items: start; grid-template-columns: minmax(0,1fr) 250px; column-gap: 56px; }
.heat canvas { border-color: #cecbac12; }
.humidity-event { padding: 20px 0 20px 28px; border: 0; border-left: 1px solid var(--line); }
.humidity-event h4 { font: 400 22px/1.25 var(--display); color: var(--head); margin: 16px 0 10px; }
.humidity-event .event-location { margin: 0 0 12px; }
.humidity-event .event-reading { margin-top: 18px; font-size: 34px; }
.humidity-event .event-evidence { font-size: 11px; color: #9f947f; margin-top: 16px; line-height: 1.55; }
.humidity-event svg { width: calc(100% - 6px); height: 60px; margin: 20px 0 12px; }
.event-label i { background: #a74a53; box-shadow: 0 0 9px #a74a5360; }
.heat-foot { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 56px; }
.map-keys { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; }
.heat .legend { font-size: 11px; gap: 8px; }
.heat .legend i { width: 95px; height: 3px; }
.heat .legend-label { margin-left: 2px; }
.humidity-key { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.humidity-key i { width: 11px; height: 11px; background: #a74a53; border: 1px solid #ffe0a5; border-radius: 50%; box-shadow: 0 0 0 2px #e2bd7540; }
.heat .realtime-label { font-size: 11px; padding-left: 29px; color: #a69a82; }
.setup-flow { margin-top: 44px; padding-top: 34px; border-color: #cecbac12; }
.pairing-map .example-streams { font: 16px var(--sans); }
.flow-caption strong { font: 500 18px/1.4 var(--sans); }
.setup-flow .flow-caption { padding-top: 18px; padding-bottom: 10px; }
.setup-flow figcaption { justify-content: flex-end; margin-top: 12px; color: #8f846e; }
.technical-art figcaption > span:only-child { margin-left: auto; }
.workflow-title { margin-top: 32px; color: var(--head); font: 400 26px/1.25 var(--display); }
.setup .setup-steps { margin-top: 24px; }
.spec > .drawing { margin-top: 0; top: 100px; }
.spec .drawing-stage[data-model="level"] { aspect-ratio: 4 / 3; }
.spec h2 { line-height: 1.12; }
.next-page .t { font-size: clamp(23px,2.3vw,30px); line-height: 1.25; }
.next-page .arr { font: 28px/1 var(--sans); position: relative; top: .05em; margin-left: .3em; }
.cta h2 span { display: block; }
.cta .btn { align-self: center; }
@media(max-width:900px) {
 .heat-grid { grid-template-columns: minmax(0,1fr) 220px; column-gap: 32px; }
 .heat-foot { grid-template-columns: minmax(0,1fr) 220px; gap: 32px; }
 .humidity-event { padding-left: 22px; }
 .heat .realtime-label { padding-left: 23px; }
}
@media(max-width:800px) {
 .hero .copy { padding-top: 0; }
 .spec > .drawing { top: auto; }
 .sensor-answer > div:last-child { padding-top: 39px; }
}
@media(max-width:650px) {
 .leak .art { position: relative; top: auto; }
 .sensor-answer > div:last-child,.setup-intro > .lead { padding-top: 0; }
 .signal-summary { gap: 10px; }
 .signal-summary strong { font-size: 21px; }
 .metric-series { font-size: 11px; gap: 6px; }
 .metric-series::before { width: 13px; }
 .signal-play { min-height: 44px; }
 .heat-grid { grid-template-columns: 1fr; }
 .humidity-event { display: block; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
 .heat .realtime-label { padding-left: 0; }
 .humidity-event svg { max-width: 330px; height: 74px; }
 .heat-foot { display: flex; flex-direction: column; gap: 20px; }
 .map-keys { gap: 18px; }
 .heat .legend { width: auto; }
 .heat .legend i { flex: none; width: 66px; }
 .humidity-key { margin-left: auto; }
 .setup-flow { padding-top: 24px; }
 .workflow-title { font-size: 24px; margin-top: 28px; }
 .next-page .t { max-width: 85%; }
 .next-page .arr { font-size: 24px; }
}
.network-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.network-labels span { position: absolute; top: 0; left: 0; padding: 3px 5px; border-radius: 2px; background: #140f0cdd; color: #c5b696; font: 11px/1.3 var(--sans); white-space: nowrap; }
.network-labels span[hidden] { display: none; }
.drawing-stage[data-model="network"] { aspect-ratio: 1.12; }
@media(max-width:650px) { .network-labels span { font-size: 10px; } }

/* The Home sequence uses the same connected strokes as the joined feed. */
/* No max-width here: the track already insets by --gutter, and a cap smaller than two gutters
   (any window wider than about 2,600px) collapsed the columns and pushed them right. */
.stack .track { column-gap: 42px; }
.layer.layer-flow { padding: 0 0 32px; border: 0; }
.layer-visual { height: 154px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.layer .layer-art { width: 190px; height: 138px; margin: 0; }
.layer-flow .n { display: block; margin-bottom: 12px; }
.layer-flow .stage-connector { position: absolute; top: 71px; left: calc(50% + 65px); width: calc(100% + 42px - 130px); height: 12px; overflow: visible; }
.layer-flow:nth-child(2) .travel { animation-delay: -2s; }
.layer-flow:nth-child(3) .travel { animation-delay: -4s; }
.layer.end { margin-top: 8px; }
@media(max-width:960px) {
 .stack .track { grid-template-columns: 1fr; gap: 28px; }
 .layer.layer-flow { display: grid; grid-template-columns: 110px minmax(0,1fr); column-gap: 24px; padding: 0 0 12px; }
 .layer-visual { grid-column: 1; grid-row: 1 / 4; height: 122px; margin: 0; }
 .layer .layer-art { width: 144px; height: 105px; max-width: none; }
 .layer-flow .n,.layer-flow h3,.layer-flow p { grid-column: 2; }
 .layer-flow .n { margin-bottom: 8px; }
 .layer-flow h3 { font-size: 25px; margin-bottom: 10px; }
 .layer-flow p { max-width: 46ch; }
 .layer-flow .stage-connector { display: none; }
 .layer-flow:not(:nth-child(4))::after { content: ''; position: absolute; left: 55px; top: 114px; bottom: -24px; width: 1px; background: linear-gradient(#b49a6a,#78684d); }
 .layer.end { gap: 15px; }
}
@media(max-width:390px) {
 .layer.layer-flow { grid-template-columns: 88px minmax(0,1fr); column-gap: 18px; }
 .layer .layer-art { width: 122px; }
 .layer-flow:not(:nth-child(4))::after { left: 44px; }
 .layer-flow h3 { font-size: 23px; }
}

/* Tiered data context: warm readings, sage records, muted outer context. */
.network-labels { transition: opacity .3s ease; }
.network-labels.is-turning { opacity: 0; }
.network-labels span { opacity: 0; transition: opacity .3s ease; padding: 2px 4px; background: #140f0cb8; font-size: 10px; }
.network-labels span[data-tier="0"] { color: #dfc496; }
.network-labels span[data-tier="1"] { color: #b7c8b3; }
.network-labels span[data-tier="2"] { color: #b5b8c8; }
.network-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 22px; padding: 12px 0 8px; color: #a49b8b; font: 11px/1.4 var(--sans); }
.network-key span { display: inline-flex; gap: 7px; align-items: center; }
.network-key i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #d9b581; box-shadow: 0 0 5px #d9b58140; }
.network-key span:nth-child(2) i { border-radius: 0; background: #a9bdab; }
.network-key span:nth-child(3) i { border-radius: 0; transform: rotate(45deg); background: #aaa6bf; }
.foot nav a { font: 500 13px/1.5 var(--sans); color: var(--body); padding-block: 8px; }
.foot nav { gap: 12px 24px; }
.foot small { font-size: 11px; padding-block: 10px; }
@media(max-width:650px) { .network-key { gap: 10px 15px; font-size: 10px; } .foot nav { gap: 8px 20px; } }
@media(prefers-reduced-motion:reduce) { .network-labels,.network-labels span { transition: none; } }

/* Investor access sits above the site without taking over its navigation. */
.investor-trigger { border: 0; border-radius: 0; background: none; cursor: pointer; color: var(--body); font: 500 13px/1.5 var(--sans); }
.nav li .investor-trigger { padding: 8px 14px; }
.foot nav .investor-trigger { padding: 8px 0; }
.investor-trigger:hover { color: var(--head); }
.investor-open { overflow: hidden; }
.investor-overlay { position: fixed; inset: 0; width: min(510px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; margin: auto; overflow: auto; color: var(--body); background: #19140f; border: 1px solid #ad916b40; box-shadow: 0 30px 100px #0009; }
.investor-overlay[open] { animation: investor-enter .25s ease both; }
.investor-overlay::backdrop { background: #090705b8; backdrop-filter: blur(7px); }
.investor-shell { position: relative; }
.investor-close { position: absolute; z-index: 2; top: 15px; right: 15px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: #b5ab98; border: 0; background: transparent; cursor: pointer; }
.investor-close:hover { color: #e8ddc6; }
.investor-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.investor-login { padding: 42px 46px 38px; }
.investor-wordmark { width: 145px; height: auto; margin-bottom: 38px; }
.investor-login .eyebrow { display: block; color: #b59b72; font-size: 10px; }
.investor-login h2 { color: var(--head); font: 400 38px/1.08 var(--display); margin: 16px 0 18px; }
.investor-intro { font: 14px/1.65 var(--sans); color: #b2a998; max-width: 38ch; }
.investor-form { margin-top: 28px; }
.investor-form label { display: block; margin-bottom: 9px; font: 500 12px/1.5 var(--sans); color: #cbbba1; }
.investor-form input { width: 100%; height: 46px; padding: 10px 13px; color: #ded4c1; background: #100d0a; border: 1px solid #9e87633b; border-radius: 2px; font: 14px var(--sans); }
.investor-form input::placeholder { color: #797160; }
.investor-form input:focus { outline: 1px solid #c4a875; outline-offset: 2px; }
.investor-form input:disabled { opacity: .65; }
.investor-submit { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; margin-top: 16px; padding: 8px 16px; border: 1px solid #c8b18a59; border-radius: 2px; background: transparent; color: #e3d8c3; font: 500 12px/1.5 var(--sans); cursor: pointer; transition: border-color .25s ease, background-color .25s ease, color .25s ease; }
.investor-submit span { transition: transform .3s var(--ease-out); }
.investor-submit:hover:not(:disabled) { border-color: #c8b18a; background: #c8b18a14; color: #f1e7d3; }
.investor-submit:hover:not(:disabled) span { transform: translateX(3px); }
.investor-submit:focus-visible { outline: 1px solid #c4a875; outline-offset: 2px; }
.investor-submit:disabled { cursor: default; opacity: .45; }
.investor-status { margin-top: 12px; font: 12px/1.5 var(--sans); color: #b9a98c; }
.investor-status:empty { display: none; }
.investor-contact { margin-top: 25px; padding-top: 21px; border-top: 1px solid #9e876326; color: #8e8473; font: 12px/1.5 var(--sans); }
.investor-contact a { color: #c6b48f; margin-left: 4px; }
.investor-overlay.is-deck { width: min(1200px,calc(100vw - 32px)); }
.investor-deck-bar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 65px 14px 24px; font: 12px/1.5 var(--sans); }
.investor-signout { background: none; color: #c6b48f; border: 0; font: inherit; cursor: pointer; }
.investor-deck iframe { width: 100%; height: min(720px,calc(100dvh - 124px)); display: block; border: 0; background: #140f0c; }
@keyframes investor-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:960px) { .nav.open li .investor-trigger { font-size: 15px; padding: 12px; text-align: left; width: 100%; } }
@media(max-width:560px) { .investor-login { padding: 34px 27px 28px; } .investor-wordmark { margin-bottom: 30px; } .investor-login h2 { font-size: 34px; } .investor-overlay { max-height: calc(100dvh - 24px); } }
@media(prefers-reduced-motion:reduce) { .investor-overlay[open] { animation: none; } }

.investor-preview-note { display: flex; align-items: center; gap: 9px; font: 12px/1.5 var(--sans); color: #b4a485; margin-bottom: 16px; }
.investor-preview-note > span { width: 5px; height: 5px; border-radius: 50%; background: #bdac7d; box-shadow: 0 0 8px #bdac7d40; }

.network-labels span[data-tier="2"] { color: #b1a68f; }
.network-key span:nth-child(3) i { background: #b1a68f; }

.drawing-stage,.architecture-canvas,.network-labels { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
html.model-rotating,html.model-rotating * { -webkit-user-select: none!important; user-select: none!important; cursor: grabbing; }

.investor-code-field { position: relative; }
.investor-code-field input { padding-right: 70px; letter-spacing: .22em; font-size: 17px; }
.investor-code-field input::placeholder { font-size: 12px; letter-spacing: 0; }
.investor-show { position: absolute; right: 4px; top: 4px; height: 38px; min-width: 56px; padding: 0 10px; border: 0; background: none; color: #beab89; font: 12px var(--sans); cursor: pointer; }
.investor-form input[aria-invalid="true"] { border-color: #aa6b5e; }

/* Company hero: a second lead paragraph sits close under the first. */
.page-hero .lead + .lead { margin-top: 14px; }
/* Warehouse: the keys sit right under the map, temperature and humidity on the left, and the
   simulated-alert label on the right pointing across to the alert panel. */
.heat-map { min-width: 0; }
.heat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 14px; }
.heat .heat-foot .realtime-label { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 0; }
.realtime-arrow { color: #c9a56b; font-size: 13px; line-height: 1; }
.humidity-event h4 { font-size: 20px; white-space: nowrap; }
@media(max-width:900px) { .humidity-event h4 { font-size: 18px; } }
@media(max-width:650px) {
 .heat-foot { flex-direction: row; gap: 10px 20px; }
 .heat .heat-foot .realtime-label { margin-left: 0; }
 .realtime-arrow { rotate: 90deg; }
}
/* The scrollbar gutter is always reserved, so no page or header ever changes width when it appears. */
html { scrollbar-gutter: stable; }
/* The warehouse outlet draws the whole run to the pairing node as one line, so there is no join to step.
   It reaches 235 of the map's 620 units; the map column is 1.05/.95 of the warehouse column: 235/620*1.05/.95 = 41.89%. */
.warehouse-outlet { right: -41.89%; }
.pairing-lines path:first-child { display: none; }
@media(max-width:650px) { .pairing-lines path:first-child { display: inline; } }
/* No loader (Dave, 2026-10-26). The page content fades in on arrival, the nav holds still, and each
   graphic fades in once it has loaded (site.js marks the ones still loading), so nothing pops in half drawn. */
@keyframes page-in { from { opacity: 0; } }
main, .foot { animation: page-in .6s ease both; }
/* Moving between pages, the view transition already crossfades the whole page, so a second fade would dip it toward black. */
.vt-arrival main, .vt-arrival .foot { animation: none; }
:where(main) img { transition: opacity .5s ease; }
img.img-wait { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { main, .foot { animation: none; } img.img-wait { opacity: 1 !important; } }