/* SigBridge staging, sample home page v11 (2026-09-28): v10 with Two ways to pay replaced by Before you book, the
   questions people ask before the visit in Astra's words (draft-faq.json), how paying works now one short answer
   among five. Everything else is v10's, unchanged. v10's notes follow.
   v10 (2026-09-28): v9 with What goes in your plan rebuilt around the equipment
   itself, the makers' own photos from the SigBridge product library (img/equipment-hd/SOURCES.txt), and Put in properly
   merged into it (its closet words, its licensed electricians and labeled ports line). The coverage plan picture, the
   drawn rack and the "Your part" box are gone. Everything else is v9's, unchanged. v9's notes follow.
   v9 (2026-09-28): v8 with How it works as a scrolling scene.
   Order: the first screen (the headline beside the photo of our technician walking an office manager through her
   plan on a tablet; the tablet's screen draws the plan and three cards light in step), What's going on? (five
   situations that jump to their sections), How it works (one office plan through five stages, held while the reader
   scrolls; its words are Astra's process draft, draft-process.json), What goes in your plan, Put in properly, After
   go-live, Your front desk, Two ways to pay (the last page of the plan), the close and the footer. Everything apart
   from How it works is v8's, unchanged. The opening's headline and line are option 1 of Astra's opening draft
   (draft-hero.json); every other word comes from Astra's page draft (astra-home-words-draft-1.json), the cards' words
   as slots or phrases taken from inside slots.
   This file holds the static page. Every animation, transition and scroll effect lives in motion.css and motion.js,
   scoped to html.motion, which is only set when the reader has no reduced-motion preference.
   Colour: only the brand book. Web Blue #000547 (the base), SigBridge Blue #2B60FF (actions, the travelling line,
   the rings), Electric Blue #30C5FF (sparingly: cable runs and glows on navy), Gigabyte #F4F4F4 and its tint #E5E5E5
   (light surfaces, rules), Pure White #FFFFFF, plus the book's two overlay tints (SigBridge Blue with 5% white =
   #3568FF for hover, Web Blue with 10% white = #1A1E59). Translucent values are white, navy or blue overlays at low
   alpha, the book's own tint method.
   Type: PP Mori Medium (licensed for the web, Medium only) for headings, labels and the situations; Manrope Medium
   for paragraphs, Manrope SemiBold for buttons and strong text. PP Mori draws its hyphen almost as wide as its en
   dash, so a hyphen inside PP Mori text is drawn from Manrope (.hy) and phone numbers are set in Manrope.
   12 columns, 1296 px measure, 24 px gutters, 8 px grid. */

@font-face { font-family: "PP Mori"; src: url("/assets/fonts/ppmori-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --navy: #000547;
  --navy-tint: #1A1E59;
  --blue: #2B60FF;
  --blue-tint: #3568FF;
  --electric: #30C5FF;
  --light: #F4F4F4;
  --light-tint: #E5E5E5;
  --white: #FFFFFF;
  --rule-dark: rgba(255, 255, 255, 0.16);

  --display: "PP Mori", "Manrope", system-ui, sans-serif;
  --text: "Manrope", system-ui, sans-serif;
  --measure: 1296px;
  --gutter: 24px;
  --section: 112px;
  --ease: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
/* With scripting off, Chromium draws its own player controls over an empty clip; the poster picture underneath shows instead */
html:not(.js) video { visibility: hidden; }
h1, h2, h3, p, ol, ul, figure, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
p, li, figcaption, td, th { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--blue); }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .band :focus-visible, .close :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
.nowrap { white-space: nowrap; }
.hy { font-family: var(--text); }
.hyw, .dashw { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use { fill: none; }
/* Line icons from the sprite: one stroke weight everywhere */
.gi, .hero-note svg, .closet-note svg, .care-note svg,
.hc-icon svg, .hc-keyicon svg, .care-icon svg, .care-phone-icon svg, .job-icon svg,
.close-keep-icon svg {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

h1, h2, h3 { font-family: var(--display); color: var(--navy); font-weight: 500; }
h1 { font-size: 56px; line-height: 64px; letter-spacing: -0.02em; }
h2 { font-size: 40px; line-height: 48px; letter-spacing: -0.015em; }
h3 { font-size: 24px; line-height: 32px; letter-spacing: -0.005em; }
.n { font-family: var(--display); font-weight: 500; }

.wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; padding: 8px 16px; background: var(--white); color: var(--navy); font-weight: 600; }
.skip:focus { left: 8px; }

/* Anchored sections and items land with a little air above them */
[id] { scroll-margin-top: 16px; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 8px;
  background: var(--blue); color: var(--white);
  font-family: var(--text); font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--blue-tint); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 14px; line-height: 20px; }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--light); }
.text-link { font-weight: 600; text-underline-offset: 4px; }
.text-link.on-dark { color: var(--white); }
.label-short, .label-tiny { display: none; }

/* The rings motif from the brand book (SigBridge Circles): five even rings fading from full to 20% outward, drawn once
   as a symbol in currentColor, so each placement picks its colour. */
.rings { position: absolute; pointer-events: none; overflow: visible; color: var(--blue); stroke-width: 1.5px; }
.rings .ripple { transform-box: view-box; transform-origin: 50% 50%; opacity: 0; }
.rings .ripple circle { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 7; background: var(--white); border-bottom: 1px solid var(--light-tint); }
.header-row { display: flex; align-items: center; height: 80px; }
/* The lockup file with its padding trimmed (viewBox only): the artwork is about 212 x 64 px, scaled evenly. The nav
   keeps at least one mark width (64 px) of clear space after it, as the brand book asks. */
.lockup { display: block; flex: none; }
.lockup img { width: 200px; height: 52px; }
.header-nav { margin-left: 64px; }
.header-nav ul { display: flex; gap: 28px; }
.header-nav a { color: var(--navy); font-family: var(--display); font-size: 15px; line-height: 24px; text-decoration: none; white-space: nowrap; }
.header-nav a:hover { color: var(--blue); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 24px; padding-left: 24px; }
.header-phone { color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---------- 1. First screen ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); }
.hero-grid {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: center; padding-top: 64px; padding-bottom: 104px;
}
.hero-copy { grid-column: 1 / span 5; }
/* The headline: 64 px, eased down on small laptops so it always sets on two lines in its five columns */
.hero h1 { max-width: 12em; color: var(--white); font-size: clamp(50px, calc(5.6vw - 5px), 64px); line-height: 1.07; letter-spacing: -0.025em; }
.hero .lead { margin-top: 24px; max-width: 34em; font-size: 20px; line-height: 32px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 15px; line-height: 20px; }
.hero-note svg { flex: none; width: 20px; height: 20px; color: var(--electric); }

/* The signal rings of the opening are centred on the S of the header lockup (34 px in and 34 px down on the 216 x 68
   lockup; the S itself stays in the header, untouched) and spread across the Web Blue band, cropped by its edges as on
   the brand book's cover. A clear circle is masked around the logo, so nothing crosses its clear space. */
.hero { isolation: isolate; --s-x: 34px; --s-y: -41px; --rs: 1; }
.hero-rings {
  position: absolute; z-index: -1; pointer-events: none; overflow: visible;
  left: calc(max(0px, (100% - var(--measure) - 2 * var(--gutter)) / 2) + var(--gutter) + var(--s-x) - 1300px * var(--rs));
  top: calc(var(--s-y) - 1300px * var(--rs));
  width: calc(2600px * var(--rs)); height: calc(2600px * var(--rs));
  color: var(--blue); opacity: 0.88;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, rgba(0, 5, 71, 0) 20.6%, rgba(0, 5, 71, 1) 22.5%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, rgba(0, 5, 71, 0) 20.6%, rgba(0, 5, 71, 1) 22.5%);
}
.hero-rings circle { fill: none; stroke: currentColor; stroke-width: 1.75px; vector-effect: non-scaling-stroke; }
.hr-ripple { display: none; }
.hero-grid, .hero-copy { position: relative; }

/* ---------- The rack: a drawn cabinet holding the makers' front photos (img/equipment/SOURCES.txt) ----------
   19 inch geometry: a unit row is 482.6 x 44.45 mm, so each photo fitted with object-fit: contain lands at its true
   width. Columns: label, cabinet side, mount, cabinet side, label. Rows: cap, one per unit, cap. */
.rack {
  --frame: 10px; --cap: 12px; --lab: 0px;
  position: relative; display: grid;
  grid-template-columns: [lab-l] var(--lab) [cab-l] var(--frame) [mount-l] minmax(0, 1fr) [mount-r] var(--frame) [cab-r] var(--lab) [end];
  grid-template-rows: var(--cap) repeat(var(--units, 7), auto) var(--cap);
}
.rack-cab {
  grid-column: cab-l / cab-r; grid-row: 1 / -1; border-radius: 8px; background: var(--navy);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 10px 18px -12px rgba(255, 255, 255, 0.18), 0 22px 44px -22px rgba(0, 5, 71, 0.95);
}
.rack-rails { position: relative; grid-column: mount-l / mount-r; grid-row: 2 / -2; }
.rack-rails i {
  position: absolute; top: 0; bottom: 0; width: 4.17%;
  background-color: rgba(255, 255, 255, 0.22);
  background-image: linear-gradient(180deg, transparent 0 9%, var(--navy) 9% 19%, transparent 19% 45%, var(--navy) 45% 55%, transparent 55% 81%, var(--navy) 81% 91%, transparent 91%);
  background-size: 34% calc(100% / var(--units, 7)); background-position: 50% 0; background-repeat: repeat-y;
}
.rack-rails i:first-child { left: 0; }
.rack-rails i + i { right: 0; }
.ru { position: relative; z-index: 1; grid-column: mount-l / mount-r; aspect-ratio: 482.6 / 44.45; }
.rack .ru img { display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; filter: none; }
.rack-mini { --frame: 8px; --cap: 10px; }
.rack-mini .rack-cab { box-shadow: inset 0 0 0 1.5px rgba(48, 197, 255, 0.5), 0 0 26px -4px rgba(48, 197, 255, 0.45); }

/* ---------- The first screen's photo: the plan on the tablet, and three cards ----------
   Columns 6 to 12, the photo's own 3:2 (4:3 on phones, cropped from the middle). The picture and the SVG over it
   share one box: the SVG is in the photo's 1920 x 1280 pixels with preserveAspectRatio "xMidYMid slice", the same
   geometry as object-fit: cover at 50% 50%, so the plan stays on the tablet's screen at every width. The frame is
   drawn with a shadow ring, never a border, so both layers keep the same box. */
.hero-photo { position: relative; z-index: 1; grid-column: 6 / -1; margin: 0; }
.hp-frame {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; background: var(--navy-tint);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 44px 90px -44px rgba(43, 96, 255, 0.6);
}
.hp-frame picture { display: block; width: 100%; height: 100%; }
.hero .hp-img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 50%; }
.tp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
/* With scripting on, the plan waits for the photo (has-photo, set by the head script); a failed photo shows no plan */
.js .hero-photo:not(.has-photo) .tp, .hero-photo.is-broken .tp { visibility: hidden; }
/* A failed photo (is-broken) paints nothing over the empty frame: neither the browser's broken-image icon nor the alt
   text printed across it. Opacity, not colour, because the icon ignores colour; opacity keeps the image and its alt
   text in the accessibility tree, so screen readers still read it. A photo that arrives after all (has-photo) shows. */
.hero-photo.is-broken:not(.has-photo) .hp-img { opacity: 0; }

/* The tablet's screen, lit: Gigabyte with a light Web Blue shade and a SigBridge Blue cast (the book's tint method),
   the app's top bar, then the plan in the key's colours. Strokes are in the photo's pixels (walls, the door's swing,
   the closet, the desk) or in the plan's units inside each device's own local map (discs and devices). */
.tp-base { fill: var(--light); }
.tp-cast { fill: var(--blue); fill-opacity: 0.05; }
.tp-bar { fill: var(--white); fill-opacity: 0.62; }
.tp-barline { fill: none; stroke: var(--navy); stroke-opacity: 0.14; stroke-width: 1.2; }
.tp-walls path { fill: none; stroke: var(--navy); stroke-opacity: 0.86; stroke-width: 3.1; stroke-linecap: square; stroke-linejoin: miter; }
.tp-walls .tp-wall-in { stroke-width: 2.4; }
.tp-swing { fill: none; stroke: var(--navy); stroke-opacity: 0.5; stroke-width: 1.8; }
.tp-closet, .tp-desk { fill: var(--navy); fill-opacity: 0.12; stroke: var(--navy); stroke-opacity: 0.55; stroke-width: 1.6; }
.tp-reach { fill: var(--blue); fill-opacity: 0.22; stroke: var(--blue); stroke-opacity: 0.75; stroke-width: 3.2; }
.tp-ripple { fill: none; stroke: var(--blue); stroke-width: 3.2; opacity: 0; }
.tp-dot { fill: var(--blue); stroke: var(--white); stroke-width: 4.5; }
.tp-reader rect { fill: var(--navy); stroke: var(--white); stroke-width: 3.2; }
.tp-reader circle { fill: var(--electric); }
.tp-phone circle { fill: var(--blue); stroke: var(--white); stroke-width: 3.6; }
.tp-phone use { stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tp-wave { fill: none; stroke: var(--blue); stroke-width: 3.4; stroke-linecap: round; opacity: 0; }
.tp-dot, .tp-reach, .tp-ripple, .tp-dev { transform-box: fill-box; transform-origin: center; }

/* The cards: white, over the photo's edges, clear of both faces, the tablet and the hands (checked in source
   pixels at every width), and of the S on the polo. WiFi reach sits at the top edge beside the access point on the
   ceiling; the door readers and the plan's cards sit along the bottom edge, below the tablet and the hands. */
.hero-cards { position: absolute; inset: 0; pointer-events: none; }
.hc { position: absolute; z-index: 2; width: max-content; max-width: 264px; pointer-events: auto; }
.hc-card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 14px;
  background: var(--white); color: var(--navy);
  box-shadow: 0 22px 40px -20px rgba(0, 5, 71, 0.9), 0 2px 8px rgba(0, 5, 71, 0.22);
}
.hc-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--white); }
.hc-icon svg { width: 22px; height: 22px; }
.hc-h { font-family: var(--display); font-size: 16px; line-height: 20px; }
.hc-d { margin-top: 2px; color: var(--navy-tint); font-size: 14px; line-height: 20px; text-wrap: balance; }
.hc-plan { width: 344px; max-width: none; }
.hc-plan .hc-card { display: block; padding: 14px 20px 14px 14px; }
.hc-top { display: flex; align-items: center; gap: 12px; }
.hc-plan .hc-h { font-size: 19px; line-height: 24px; }
.hc-plan .hc-d { margin-top: 2px; font-size: 14px; line-height: 20px; }
.hc-k { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--light-tint); color: var(--navy); font-size: 14px; line-height: 20px; font-weight: 600; }
.hc-keyicon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 8px; border-radius: 50%; background: var(--blue); color: var(--white); }
.hc-keyicon svg { width: 14px; height: 14px; stroke-width: 2.3; }
/* The ring the loop ends on, around the plan's card (shown in the still frame) */
.hc-plan .hc-card::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid var(--blue); pointer-events: none; }
.hc-wifi { right: 60%; top: -26px; }
.hc-door { right: calc(-1 * clamp(12px, (100vw - var(--measure)) / 2 - 24px, 36px)); top: calc(100% - 30px); }
.hc-plan { left: 3%; top: calc(100% - 50px); }

/* ---------- Drawings: a base image or clip, with the overlay on top ---------- */
.drawing { margin: 0; }
.stack { position: relative; }
.stack .callouts { z-index: 3; }
.sheet { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--navy); }
.sheet .base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet .lines, .sheet .dot, .sheet .callouts { z-index: 2; }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leader { fill: none; stroke: var(--white); stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0, 5, 71, 0.75)); }
.dot {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 2.5px var(--white), 0 0 0 7px rgba(43, 96, 255, 0.35);
}
.callouts { position: absolute; inset: 0; pointer-events: none; }
.co {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--white);
  color: var(--navy); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0, 5, 71, 0.6), 0 0 0 1px rgba(0, 5, 71, 0.08);
}
.co-plain { padding: 4px 12px; }
.co-wrap { white-space: normal; max-width: 128px; line-height: 16px; padding-top: 6px; padding-bottom: 6px; }
.co-up { transform: translate(-50%, -100%); }
.co-down { transform: translate(-50%, 0); }

/* ---------- 2. What's going on? A slim strip of five situations ---------- */
.going { position: relative; background: var(--white); border-bottom: 1px solid var(--light-tint); }
.going-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-block: 40px 36px; }
.going h2 { grid-column: 1 / span 3; padding-top: 12px; font-size: 32px; line-height: 40px; }
.going-list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.going-list li { border-top: 1px solid var(--light-tint); }
.going-list li:nth-child(-n+2) { border-top-color: transparent; }
.going-list a {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0;
  color: var(--navy); font-family: var(--display); font-size: 20px; line-height: 26px; text-decoration: none;
}
.going-list a span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.going-list a:hover span { color: var(--blue); text-decoration-color: currentColor; }
.gi { flex: none; width: 26px; height: 26px; color: var(--blue); }
/* The chevron at the end of each line: the situations read as choices before any hover */
.going-list .go { flex: none; width: 20px; height: 20px; margin-left: auto; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.going-unsure a { color: var(--blue); }

/* ---------- 3. How it works: one office plan through five stages ----------
   Without motion (reduced motion, no script, or motion.js blocked) the five stages are listed in order, each its
   words beside a still of its finished picture. Under motion (motion.css) the frame holds and one scene changes as
   the reader scrolls. The scene and every still are the same box: the plan (two SVGs: the still part and the moving
   part, the stills show its parts through <use>) and HTML layers over it. Everything that changes is a function of
   custom properties: --s0 (the plan draws in as the section arrives), --s1 to --s5 (each stage, 0 to 1) and --walk
   (how far the visit has walked), and the beats worked out from them below. A still carries the stage values inline,
   its own stage at 0.9 (finished, its labels still up); in the moving scene motion.js gives each part's host the
   values it reads, while it changes. */
/* Every custom property the scene reads, registered as a number (--pl a length, --fa an angle), so each is worked out once
   where it is set and inherited as a plain value: the scroll then restyles the scene cheaply. */
@property --s0 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --s1 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --s2 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --s3 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --s4 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --s5 { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --walk { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --draw { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --in1 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --out1 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --trailout { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --place { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --rev { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --dil { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --docin { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --dol { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --docout { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --doc { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --sign { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --crew { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pdim { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --wire { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --in3a { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --in3 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --out3 { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --old { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --live { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --cabdim { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tour { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tourout { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --phone { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --demo { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pll { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pull { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --node { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --link { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --in5b { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --nin { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --nout { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --night { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ntint { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ndark { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --alert { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --fix { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ok { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --van { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --walkin { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --in5a { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --dz { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --dty { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --kp { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ki { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --kl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pc { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --km { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --f { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --e { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --w { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --at { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --lt { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --c { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --st { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pt { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hy { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --fx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --fy { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pl { syntax: '<length>'; inherits: true; initial-value: 40px; }
@property --fa { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
/* overflow: clip, never hidden, on the section: hidden would make it a scroll container and the frame could not hold
   (browsers without clip simply don't clip here); the frame itself clips its rings */
.hw { position: relative; overflow: clip; background: var(--navy); color: var(--white); }
.hw-pin { position: relative; overflow: hidden; padding-block: var(--section); }
.hw-rings { width: 1200px; height: 1200px; left: -700px; top: -560px; color: var(--blue); opacity: 0.34; }
.hw-grid { position: relative; }
.hw-head h2 { max-width: 15em; color: var(--white); }
.hw-rail { display: none; }
.hw-stages { counter-reset: hw; display: grid; gap: 64px; margin-top: 56px; }
.hw-stage { counter-increment: hw; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: center; }
.hw-words { grid-column: 1 / span 4; }
.hw-words::before {
  content: counter(hw); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%;
  background: var(--blue); color: var(--white); font-family: var(--text); font-size: 15px; line-height: 1; font-weight: 600;
}
.hw-words h3 { color: var(--white); font-size: 28px; line-height: 36px; }
.hw-words p { margin-top: 12px; max-width: 30em; color: var(--light-tint); font-size: 18px; line-height: 28px; }
.hw-still { grid-column: 6 / -1; }
.hw-scene { display: none; margin: 0; }
@media (max-width: 900px) {
  .hw-stages { gap: 48px; margin-top: 40px; }
  .hw-stage { grid-template-columns: minmax(0, 1fr); }
  .hw-words, .hw-still { grid-column: 1 / -1; }
  .hw-words p { max-width: 36em; }
  /* a still fits the window's height (landscape phones) */
  .hw-still { width: 100%; max-width: 118vh; max-width: 118svh; }
}
@media (max-width: 600px) {
  .hw-words::before { width: 32px; height: 32px; margin-bottom: 12px; font-size: 14px; }
  .hw-words h3 { font-size: 22px; line-height: 28px; }
  .hw-words p { margin-top: 8px; font-size: 16px; line-height: 24px; }
  .hw-box { border-radius: 14px; }
}

/* The box: the scene's frame, 4:3, the plan filling it (the world's 1200 x 900 units). */
.hw-box {
  --s0: 1; --s1: 1; --s2: 1; --s3: 1; --s4: 1; --s5: 1; --walk: 1;
  /* The document page's framing of the plan (stage 2): scale and the lift (percent of the box's height) */
  --dz: 0.473; --dty: -11.8;
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; isolation: isolate;
  border-radius: 20px; background-color: var(--navy-tint);
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 4.1667% 5.5556%; background-position: -1px -1px;
  box-shadow: 0 0 0 1px var(--rule-dark), 0 40px 80px -40px rgba(0, 5, 71, 0.9);
}
/* The beats, worked out from the stage values. This block is the one source of the timings: a still's box works them
   out here (inherited by everything in it); the page's build reads the block, works out when each part changes, and
   writes the same formulas into motion.js, which gives each host in the moving scene the beats as plain numbers (only
   those its stages move), so no host works them out itself. The zooms (the page in stage 2, the pull-back in stage 5)
   ease in and out (smoothstep, t * t * (3 - 2t)). Stage 5 takes one and a half stages of scroll (motion.css,
   motion.js), so its beats each hold long enough to read. */
/* hw-derived */
.hw-box {
  /* Stage 1: the plan draws in as the section arrives; the visit's label comes with it and leaves at the stage's end */
  --draw: clamp(0, (var(--s0) - 0.08) / 0.62, 1);
  --in1: clamp(0, (var(--s0) - 0.72) / 0.22, 1);
  --out1: clamp(0, (var(--s1) - 0.92) / 0.07, 1);
  /* Stage 2: the trail leaves, markers settle, one access point moves at review, the page rises, it is approved */
  --trailout: clamp(0, var(--s2) / 0.14, 1);
  --place: clamp(0, (var(--s2) - 0.04) / 0.3, 1);
  --rev: clamp(0, (var(--s2) - 0.36) / 0.1, 1);
  --dil: clamp(0, (var(--s2) - 0.5) / 0.2, 1);
  --docin: calc(var(--dil) * var(--dil) * (3 - 2 * var(--dil)));
  --dol: clamp(0, var(--s3) / 0.2, 1);
  --docout: calc(var(--dol) * var(--dol) * (3 - 2 * var(--dol)));
  --doc: calc(var(--docin) - var(--docout));
  --sign: clamp(0, (var(--s2) - 0.74) / 0.12, 1);
  /* Stage 3: the crew arrives, the planned reach steps back, the cables run, each device's photo arrives with its
     cable; the two labels */
  --crew: min(clamp(0, (var(--s3) - 0.12) / 0.08, 1), 1 - clamp(0, var(--s4) / 0.1, 1));
  --pdim: clamp(0, (var(--s3) - 0.1) / 0.2, 1);
  --wire: clamp(0, (var(--s3) - 0.18) / 0.55, 1);
  --in3a: clamp(0, (var(--s3) - 0.2) / 0.08, 1);
  --in3: clamp(0, (var(--s3) - 0.7) / 0.06, 1);
  --out3: clamp(0, (var(--s3) - 0.92) / 0.07, 1);
  /* Stage 4: the old network goes, the new one lights, the cables settle into the walls, the walk-through */
  --old: clamp(0, var(--s4) / 0.18, 1);
  --live: clamp(0, (var(--s4) - 0.14) / 0.34, 1);
  --cabdim: clamp(0, (var(--s4) - 0.1) / 0.3, 1);
  --tour: clamp(0, (var(--s4) - 0.5) / 0.38, 1);
  --tourout: clamp(0, var(--s5) / 0.08, 1);
  --phone: min(clamp(0, (var(--tour) - 0.04) / 0.22, 1), 1 - var(--tourout));
  --demo: min(clamp(0, (var(--tour) - 0.4) / 0.14, 1), clamp(0, (0.92 - var(--tour)) / 0.18, 1));
  /* Stage 5: the view pulls back to SigBridge's node and its link; a blue dusk, then night; an access point loses its
     reach and is fixed remotely (the alert holds, then the check); dawn; the van arrives and the technician walks in */
  --pll: clamp(0, var(--s5) / 0.16, 1);
  --pull: calc(var(--pll) * var(--pll) * (3 - 2 * var(--pll)));
  --node: clamp(0, (var(--s5) - 0.08) / 0.1, 1);
  --link: clamp(0, (var(--s5) - 0.12) / 0.12, 1);
  --in5b: clamp(0, (var(--s5) - 0.16) / 0.06, 1);
  --nin: clamp(0, (var(--s5) - 0.24) / 0.12, 1);
  --nout: clamp(0, (var(--s5) - 0.64) / 0.12, 1);
  --night: min(var(--nin), 1 - var(--nout));
  --ntint: min(clamp(0, var(--nin) * 2, 1), clamp(0, (1 - var(--nout)) * 2, 1));
  --ndark: calc(var(--night) * var(--night));
  --alert: min(clamp(0, (var(--s5) - 0.36) / 0.04, 1), 1 - clamp(0, (var(--s5) - 0.555) / 0.035, 1));
  --fix: clamp(0, (var(--s5) - 0.43) / 0.13, 1);
  --ok: clamp(0, (var(--s5) - 0.56) / 0.04, 1);
  --van: clamp(0, (var(--s5) - 0.7) / 0.16, 1);
  --walkin: clamp(0, (var(--s5) - 0.84) / 0.1, 1);
  --in5a: clamp(0, (var(--s5) - 0.86) / 0.05, 1);
}
@container (max-width: 520px) {
  .hw-world { --dz: 0.5; --dty: -15; }
}

/* The world: the plan and everything placed on it. The document page frames it (stage 2), the pull-back (stage 5)
   shows the road and SigBridge's node outside; it never grows past its own size, so it stays crisp. */
.hw-world {
  position: absolute; inset: 0; z-index: 1; container-type: size; transform-origin: 50% 50%;
  transform: translateY(calc((var(--doc) * var(--dty) - var(--pull) * 5) * 1%)) scale(calc(1 - var(--doc) * (1 - var(--dz)) - var(--pull) * 0.2));
}
.hw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw-pulse {
  position: absolute; left: 54%; top: 55.56%; width: 106.67%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(43, 96, 255, 0.55), inset 0 0 60px rgba(43, 96, 255, 0.12);
  opacity: calc(var(--node) * 0.5); transform: translate(-50%, -50%) scale(0.52);
}
.hw-shade { position: absolute; left: 7%; top: 4%; width: 86%; height: 83%; border-radius: 6px; box-shadow: 0 36px 70px -24px rgba(0, 5, 71, 0.95); opacity: clamp(0, var(--draw) * 2, 1); }

/* The still part: outside, floor, rooms, furniture, the walkway to the front doors, walls. It fades in as one layer
   while its outer wall draws round (the section arriving; motion.js sets the fade directly in the moving scene) */
.hw-svg-base { opacity: clamp(0, var(--draw) * 2.5, 1); }
.hw-out { opacity: var(--pull); }
.hw-road { fill: var(--navy); fill-opacity: 0.6; }
.hw-lane { fill: none; stroke: var(--white); stroke-opacity: 0.22; stroke-width: 3; stroke-dasharray: 26 22; }
.hw-walkway { fill: var(--white); fill-opacity: 0.07; }
.hw-slab { fill: var(--light); }
.hw-room { fill: var(--white); }
.hw-furn rect, .hw-furn circle { fill: var(--navy); fill-opacity: 0.05; stroke: var(--navy); stroke-opacity: 0.2; stroke-width: 2; }
.hw-walls path { fill: none; stroke: var(--navy); }
.hw-wall-out { stroke-width: 12; stroke-linecap: square; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--draw)); }
.hw-wall-in { stroke-width: 7; stroke-linecap: square; }
.hw-leaf { stroke-width: 3.5; stroke-opacity: 0.5; }
.hw-swing { stroke-width: 2; stroke-opacity: 0.35; }

/* The moving part */
.hw-lit path { fill: var(--blue); fill-opacity: 0.1; opacity: calc(clamp(0, (var(--walk) - var(--at)) * 30, 1) * (1 - var(--place))); }
.hw-old { opacity: calc(clamp(0, (var(--s0) - 0.6) / 0.3, 1) * (1 - var(--old)) * (1 - var(--doc))); }
.hw-old-blob { fill: var(--navy); fill-opacity: 0.04; stroke: var(--navy); stroke-opacity: 0.32; stroke-width: 2.5; stroke-dasharray: 7 7; }
.hw-old-wire { fill: none; stroke: var(--navy); stroke-opacity: 0.4; stroke-width: 2.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.hw-old-box rect { fill: var(--white); stroke: var(--navy); stroke-opacity: 0.5; stroke-width: 2.5; }
.hw-old-box path { fill: none; stroke: var(--navy); stroke-opacity: 0.5; stroke-width: 2.5; stroke-linecap: round; }

/* Coverage: each access point's reach and each camera's view, planned (dashed) at stage 2, stepping back while the
   cables run (the whole planned set, one change), live at stage 4 */
.hw-pdisc, .hw-pview { --kp: clamp(0, (var(--place) - var(--at)) / 0.25, 1); --kl: clamp(0, (var(--live) - var(--lt)) / 0.3, 1); }
.hw-ldisc, .hw-lview { --kl: clamp(0, (var(--live) - var(--lt)) / 0.3, 1); }
.hw-pdisc circle, .hw-ldisc circle { transform-box: fill-box; transform-origin: 50% 50%; }
.hw-planset { opacity: calc(1 - 0.6 * var(--pdim)); }
.hw-reach-plan { fill: var(--blue); fill-opacity: 0.05; stroke: var(--blue); stroke-opacity: 0.45; stroke-width: 3; stroke-dasharray: 9 10;
  opacity: calc(var(--kp) * (1 - var(--kl))); transform: scale(calc(0.7 + 0.3 * var(--kp))); }
.hw-reach-live { fill: var(--blue); fill-opacity: 0.09; stroke: var(--blue); stroke-opacity: 0.5; stroke-width: 3;
  opacity: var(--kl); transform: scale(calc(0.3 + 0.7 * var(--kl))); }
.hw-reach-ripple { fill: none; stroke: var(--blue); stroke-width: 4;
  opacity: min(var(--kl) * 4, (1 - var(--kl)) * 2); transform: scale(calc(0.55 + 0.75 * var(--kl))); }
.hw-pdisc.hw-rev { transform: translateX(calc((1 - var(--rev)) * -112px)); }
.hw-ghost { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 6 6; opacity: min(var(--rev) * 5, (1 - var(--rev)) * 3); }
.hw-view-plan { fill: var(--blue); fill-opacity: 0.05; stroke: var(--blue); stroke-opacity: 0.45; stroke-width: 3; stroke-dasharray: 9 10;
  opacity: calc(var(--kp) * (1 - var(--kl))); }
.hw-view-live { fill: var(--blue); fill-opacity: 0.13; stroke: var(--blue); stroke-opacity: 0.4; stroke-width: 2.5;
  opacity: var(--kl); transform: scale(calc(0.4 + 0.6 * var(--kl))); transform-origin: 0 0; transform-box: view-box; }

/* Cables: each draws from the rack over half of stage 3's run, its bright head leading; the set settles once live */
.hw-cb { --pc: clamp(0, (var(--wire) - var(--st)) / 0.46, 1); }
.hw-cb path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hw-cabset { opacity: calc(1 - 0.66 * var(--cabdim)); }
.hw-cable { stroke: var(--blue); stroke-width: 3.2; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--pc)); }
.hw-lead { stroke: var(--blue); stroke-width: 12; stroke-dasharray: 0.001 2; stroke-dashoffset: calc(0 - var(--pc));
  opacity: min(var(--pc) * 40, (1 - var(--pc)) * 40, 1); }

/* The visit: its trail and the marks where devices will go */
.hw-trail { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--walk)); opacity: calc(0.62 * (1 - var(--trailout))); }
.hw-mark { --km: clamp(0, (var(--walk) - var(--at)) * 40, 1); transform-box: fill-box; transform-origin: 50% 50%;
  opacity: calc(var(--km) * (1 - clamp(0, (var(--place) - var(--pt)) / 0.2, 1))); transform: scale(calc(0.5 + 0.5 * var(--km))); }
.hw-mark circle { fill: var(--white); stroke: var(--blue); stroke-width: 3; stroke-dasharray: 5 5; }
.hw-mark path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }

/* Night: a blue dusk (SigBridge Blue over the plan), then Web Blue deepens over it, so the change never passes through
   grey; the walls, reach and views glow Electric Blue (the book's highlight on Web Blue) and each device glows round
   its plate. While the alert is up, the access point with the problem loses most of its reach. */
.hw-tint { fill: var(--blue); fill-opacity: 0.38; opacity: var(--ntint); }
.hw-dark { fill: var(--navy); fill-opacity: 0.9; opacity: var(--ndark); }
.hw-nwall { fill: none; stroke: var(--white); stroke-opacity: 0.28; stroke-width: 3.5; opacity: var(--night); }
.hw-nreach { fill: var(--blue); fill-opacity: 0.2; stroke: var(--electric); stroke-opacity: 0.55; stroke-width: 3; opacity: var(--night); }
.hw-nreach-fix { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(calc(1 - 0.62 * var(--alert)));
  stroke-dasharray: calc(var(--alert) * 10) calc(var(--alert) * 12); opacity: calc(var(--night) * (1 - 0.35 * var(--alert))); }
.hw-nview { fill: var(--electric); fill-opacity: 0.1; stroke: var(--electric); stroke-opacity: 0.4; stroke-width: 2.5; opacity: var(--night); }
.hw-nglow { fill: url(#hw-glow); opacity: var(--night); }

/* Looked after: the pulse over the building, SigBridge's link, the fix travelling to the access point */
.hw-care { opacity: var(--node); }
.hw-link { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--link)); }
.hw-fixdot { fill: none; stroke: var(--electric); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 0.001 2; }
.hw-fix-a { --f: clamp(0, var(--fix) * 2, 1); stroke-dashoffset: calc(0 - var(--f)); opacity: min(var(--f) * 30, (1 - var(--f)) * 30, 1); }
.hw-fix-b { --f: clamp(0, var(--fix) * 2 - 1, 1); stroke-dashoffset: calc(0 - var(--f)); opacity: min(var(--f) * 30, (1 - var(--f)) * 30, 1); }

/* HTML on the plan: devices and people keep a readable size at every width (sized in the world's cqw) */
.hw-devs, .hw-figs { position: absolute; inset: 0; pointer-events: none; }
.hw-dev { --pl: clamp(26px, 5.2cqw, 48px); position: absolute; left: calc(var(--hx) / 12 * 1%); top: calc(var(--hy) / 9 * 1%); width: 0; height: 0; }
/* Each part of a device works out its own settle (--kp), arrival (--ki) and going live (--kl), so in the moving scene
   each part is its own host and restyles only while it changes */
.hw-dev > * {
  --kp: clamp(0, (var(--place) - var(--at)) / 0.25, 1);
  --ki: clamp(0, (var(--wire) - var(--c)) * 14, 1);
  --kl: clamp(0, (var(--live) - var(--lt)) / 0.3, 1);
}
.hw-mk, .hw-plate, .hw-tag, .hw-alert, .hw-ok, .hw-alarm { position: absolute; left: 0; top: 0; }
/* The plan symbols, v8's key: access point (a blue dot), camera, door reader, desk phone, the rack */
.hw-mk {
  display: grid; place-items: center; width: clamp(13px, 2.1cqw, 20px); height: clamp(13px, 2.1cqw, 20px); border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px var(--white), 0 4px 10px rgba(0, 5, 71, 0.35);
  opacity: calc(var(--kp) * (1 - var(--ki)));
  transform: translate(-50%, -50%) translateY(calc((1 - var(--kp)) * -16px)) scale(calc(1.5 - 0.5 * var(--kp)));
}
.hw-k-cam .hw-mk { background: var(--navy); }
.hw-k-cam .hw-mk i { width: 36%; height: 36%; border-radius: 50%; background: var(--electric); }
.hw-k-reader .hw-mk { width: clamp(10px, 1.5cqw, 14px); height: clamp(18px, 2.8cqw, 26px); border-radius: 4px; background: var(--navy); }
.hw-k-reader .hw-mk i { width: 40%; height: 22%; margin-top: -30%; border-radius: 50%; background: var(--electric); }
.hw-k-phone .hw-mk { width: clamp(17px, 2.8cqw, 26px); height: clamp(17px, 2.8cqw, 26px); }
.hw-k-phone .hw-mk svg { width: 60%; height: 60%; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hw-k-rack .hw-mk { width: clamp(24px, 3.9cqw, 38px); height: clamp(16px, 2.6cqw, 26px); border-radius: 4px; background: var(--navy);
  display: flex; flex-direction: column; justify-content: center; gap: 12%; padding: 0 16%; }
.hw-k-rack .hw-mk i { display: block; height: 2px; border-radius: 1px; background: var(--white); opacity: 0.8; }
/* The installed device: the maker's photo on a plate; its ring turns blue once live (its night glow is drawn in the
   plan's night layer, so night stays one change) */
.hw-plate {
  display: grid; place-items: center; width: var(--pl); height: var(--pl); border-radius: 50%; overflow: hidden;
  background: var(--light-tint);
  box-shadow: 0 0 0 calc(1.5px + 2px * var(--kl)) var(--blue), 0 6px 14px -4px rgba(0, 5, 71, 0.5);
  opacity: var(--ki); transform: translate(-50%, -50%) scale(calc(0.55 + 0.45 * var(--ki)));
}
.hw-plate img { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; object-fit: contain; }
.hw-k-reader .hw-plate img { left: 18%; top: 11%; width: 64%; height: 78%; }
.hw-k-phone .hw-plate img { left: 14%; top: 14%; width: 72%; height: 72%; }
.hw-rackplate { width: calc(var(--pl) * 1.25); height: calc(var(--pl) * 0.9); border-radius: 6px; background: var(--navy); padding: 12% 10%; }
.hw-rk { display: grid; gap: 8%; width: 100%; height: 100%; align-content: center; }
.hw-rk img { position: static; width: 100%; height: auto; }
/* Each cable's label at its device: a small white tag with a printed line (no characters), gone once the network is live */
.hw-tag {
  display: block; width: clamp(12px, 1.8cqw, 17px); height: clamp(8px, 1.15cqw, 11px); border-radius: 3px;
  background: var(--white); box-shadow: 0 0 0 1.5px var(--navy);
  opacity: calc(var(--ki) * (1 - var(--kl)));
}
.hw-tag::before { content: ""; position: absolute; left: 24%; right: 24%; top: 50%; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: var(--navy); opacity: 0.7; }
.hw-tag-b { transform: translate(-50%, calc(var(--pl) * 0.5 + 5px)); }
.hw-tag-t { transform: translate(-50%, calc(-100% - var(--pl) * 0.5 - 5px)); }
.hw-tag-r { transform: translate(calc(var(--pl) * 0.5 + 5px), -50%); }
/* The conference room's access point moves at review (stage 2) */
.hw-dev.hw-rev .hw-mk { translate: calc((1 - var(--rev)) * -112 / 12 * 1cqw) 0; }
/* The remote fix: the access point's alert, with a ring pulsing round it (motion.css runs the pulse while the alert
   is up), then a check */
.hw-alert, .hw-ok { display: grid; place-items: center; width: clamp(16px, 2.4cqw, 22px); height: clamp(16px, 2.4cqw, 22px); border-radius: 50%; }
.hw-alert { background: var(--blue); box-shadow: 0 0 0 2px var(--white); opacity: var(--alert);
  transform: translate(calc(var(--pl) * 0.28), calc(-100% - var(--pl) * 0.18)) scale(calc(0.5 + 0.5 * var(--alert))); }
.hw-alert svg { width: 72%; height: 72%; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; }
.hw-ok { background: var(--white); color: var(--blue); box-shadow: 0 0 0 2px var(--blue); opacity: var(--ok);
  transform: translate(calc(var(--pl) * 0.28), calc(-100% - var(--pl) * 0.18)) scale(calc(0.5 + 0.5 * var(--ok))); }
.hw-ok svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hw-alarm { width: var(--pl); height: var(--pl); opacity: var(--alert); transform: translate(-50%, -50%); }
.hw-alarm::before, .hw-alarm::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--electric); transform: scale(1.18); opacity: 0.9;
}
.hw-alarm::after { opacity: 0; }

/* People: SigBridge in SigBridge Blue, the client in Web Blue, both ringed in white */
.hw-p {
  position: absolute; left: 0; top: 0; width: clamp(11px, 1.7cqw, 15px); height: clamp(11px, 1.7cqw, 15px); border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 2.5px var(--white), 0 3px 8px rgba(0, 5, 71, 0.45); transform: translate(-50%, -50%);
}
.hw-p-you { background: var(--navy); }
.hw-pair, .hw-crew, .hw-tech, .hw-van { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hw-pair .hw-p { margin-top: calc(-0.6 * clamp(11px, 1.7cqw, 15px)); }
.hw-pair .hw-p + .hw-p { margin-top: calc(0.6 * clamp(11px, 1.7cqw, 15px)); }
.hw-walkers::before {
  content: ""; position: absolute; left: 0; top: 0; width: clamp(34px, 5cqw, 48px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(43, 96, 255, 0.16); box-shadow: 0 0 0 1.5px rgba(43, 96, 255, 0.35); transform: translate(-50%, -50%);
}
.hw-walkers {
  transform: translate(calc(var(--fx) / 12 * 1cqw), calc(var(--fy) / 9 * 1cqh)) rotate(var(--fa));
  opacity: calc(clamp(0, (var(--s0) - 0.75) / 0.2, 1) * (1 - var(--trailout)));
}
.hw-crew { transform: translate(calc((724 - 300 * var(--wire)) / 12 * 1cqw), calc(404 / 9 * 1cqh)); opacity: var(--crew); }
.hw-crew .hw-p + .hw-p { margin-left: clamp(15px, 2.4cqw, 22px); }
.hw-tour { transform: translate(calc(842 / 12 * 1cqw), calc(612 / 9 * 1cqh)) rotate(90deg);
  opacity: min(clamp(0, var(--tour) / 0.14, 1), 1 - var(--tourout)); }
.hw-van {
  --e: calc(var(--van) * (2 - var(--van)));
  transform: translate(calc((-380 + 1136 * var(--e)) / 12 * 1cqw), calc(979 / 9 * 1cqh)); opacity: clamp(0, var(--van) * 40, 1);
}
.hw-van svg { position: absolute; left: 0; top: 0; width: clamp(46px, 8.6cqw, 84px); height: auto; transform: translate(-50%, -64%); overflow: visible; }
.hw-van-body { fill: var(--white); }
.hw-van-glass { fill: var(--navy-tint); }
.hw-van-stripe { fill: none; stroke: var(--blue); stroke-width: 6; }
.hw-van-wheel { fill: var(--navy); stroke: var(--light-tint); stroke-width: 4; }
.hw-tech { --w: var(--walkin); transform: translate(calc((740 + 95 * var(--w)) / 12 * 1cqw), calc((950 - 142 * var(--w)) / 9 * 1cqh));
  opacity: clamp(0, (var(--van) - 0.94) * 16, 1); }

/* SigBridge's node outside the building: the brand's rings round the watch */
.hw-node {
  position: absolute; left: calc(var(--hx) / 12 * 1%); top: calc(var(--hy) / 9 * 1%); width: clamp(70px, 13cqw, 124px); aspect-ratio: 1;
  opacity: var(--node); transform: translate(-50%, -50%) scale(calc(0.6 + 0.4 * var(--node)));
}
.hw-node-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--blue); stroke-width: 1.6px; }
.hw-node-rings circle { vector-effect: non-scaling-stroke; }
.hw-node-ripple { position: absolute; inset: 3.7%; border-radius: 50%; box-shadow: 0 0 0 2px var(--electric); opacity: 0; }
.hw-node-core {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 30%; height: 30%; border-radius: 50%;
  background: var(--blue); color: var(--white); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(48, 197, 255, 0.35);
}
.hw-node-core svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* The labels: the only words inside the picture (Astra's picture_labels), in Manrope, each placed where no device,
   person or mark is at any width (the box's units) */
.hw-chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hw-chip {
  position: absolute; left: calc(var(--hx) / 12 * 1%); top: calc(var(--hy) / 9 * 1%);
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--white); color: var(--navy); font-family: var(--text); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 5, 71, 0.7), 0 0 0 1px rgba(0, 5, 71, 0.08);
}
.hw-chip-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: var(--white); }
.hw-chip-i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hw-al-r { transform: translate(-100%, -50%); }
.hw-al-l { transform: translate(0, -50%); }
.hw-al-c { transform: translate(-50%, -50%); }
.hw-chip-1 { opacity: calc(var(--in1) * (1 - var(--out1))); translate: 0 calc((1 - var(--in1)) * 8px); }
.hw-chip-3a { opacity: calc(var(--in3a) * (1 - var(--out3))); translate: 0 calc((1 - var(--in3a)) * 8px); }
.hw-chip-3b { opacity: calc(var(--in3) * (1 - var(--out3))); translate: 0 calc((1 - var(--in3)) * 8px); }
.hw-chip-5b { opacity: var(--in5b); translate: 0 calc((1 - var(--in5b)) * 8px); }
.hw-chip-5a { opacity: var(--in5a); translate: 0 calc((1 - var(--in5a)) * 8px); }
@container (max-width: 520px) {
  .hw-chip { gap: 6px; padding: 3px 9px 3px 3px; font-size: 11px; line-height: 16px; }
  .hw-chip-i { width: 18px; height: 18px; }
  .hw-chip-i svg { width: 12px; height: 12px; }
}

/* The written plan (stage 2): a white page rises under the plan; two columns, the two ways to pay, then approval */
.hw-doc { position: absolute; inset: 0; z-index: 0; perspective: 1400px; pointer-events: none; }
.hw-page {
  position: absolute; left: 24.17%; top: 5.56%; width: 51.67%; height: 91.8%; border-radius: 12px; background: var(--white);
  box-shadow: 0 34px 60px -30px rgba(0, 5, 71, 0.95), 0 0 0 1px rgba(0, 5, 71, 0.06);
  transform-origin: 50% 100%; opacity: clamp(0, var(--doc) * 2.5, 1);
  transform: translateY(calc((1 - var(--doc)) * 34%)) rotateX(calc((1 - var(--doc)) * 30deg));
}
.hw-doc-title, .hw-doc-sub, .hw-doc-rule { position: absolute; left: 6.5%; border-radius: 3px; }
.hw-doc-title { top: 4.2%; width: 38%; height: 2.2%; background: var(--navy); }
.hw-doc-sub { top: 7.9%; width: 24%; height: 1.3%; background: var(--navy); opacity: 0.22; }
.hw-doc-rule { top: 11.4%; right: 6.5%; height: 2px; border-radius: 1px; background: var(--navy); }
.hw-cols { position: absolute; left: 6.5%; right: 6.5%; top: 60.5%; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2%; }
.hw-col-h {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: 10px; background: var(--navy);
  color: var(--white); font-family: var(--text); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
.hw-col-mo .hw-col-h { background: var(--blue); }
.hw-col-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
.hw-col-i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hw-bar { display: block; width: calc(var(--w) * 100%); height: 6px; margin-top: 11px; border-radius: 3px; background: var(--navy); opacity: 0.12;
  transform-origin: 0 50%; transform: scaleX(clamp(0, (var(--docin) - 0.55) / 0.45, 1)); }
.hw-col-mo .hw-bar { background: var(--blue); opacity: 0.2; }
.hw-approve { position: absolute; left: 6.5%; right: 6.5%; bottom: 6.5%; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.hw-tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: var(--white);
  transform: scale(calc(0.4 + 0.6 * clamp(0, var(--sign) * 3, 1))); opacity: clamp(0, var(--sign) * 3, 1); }
.hw-tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.hw-sign { width: 96px; height: auto; overflow: visible; }
.hw-sign-mark { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sign)); }
.hw-sign-line { fill: none; stroke: var(--navy); stroke-width: 1.5; }
@container (max-width: 520px) {
  .hw-page { left: 7.5%; width: 85%; top: 3.33%; height: 94.4%; }
  .hw-cols { top: 57.5%; }
  .hw-col-h { gap: 5px; padding: 3px 8px 3px 3px; border-radius: 8px; font-size: 11px; line-height: 16px; }
  .hw-col-i { width: 18px; height: 18px; }
  .hw-col-i svg { width: 11px; height: 11px; }
  .hw-bar { height: 4px; margin-top: 7px; }
  .hw-tick { width: 20px; height: 20px; }
  .hw-tick svg { width: 12px; height: 12px; }
  .hw-sign { width: 66px; }
}

/* The walk-through (stage 4): the system on a phone, the building in miniature, the front door's reader highlighted
   while the real one answers on the plan */
.hw-mobile {
  position: absolute; left: 3.5%; bottom: 5%; z-index: 2; width: 19%; aspect-ratio: 9 / 17; padding: 1.1%; border-radius: 14px;
  background: var(--navy); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.34), 0 30px 50px -20px rgba(0, 5, 71, 0.95);
  opacity: var(--phone); transform: translateY(calc((1 - var(--phone)) * 36%)) rotate(calc((1 - var(--phone)) * -5deg));
}
.hw-ph-screen { position: relative; height: 100%; border-radius: 9px; background: var(--light); overflow: hidden; }
.hw-ph-bar { position: absolute; left: 36%; right: 36%; top: 3%; height: 2.2%; border-radius: 3px; background: var(--navy); opacity: 0.18; }
.hw-ph-plan { position: absolute; left: 6%; right: 6%; top: 11%; width: 88%; height: auto; border-radius: 4px; background: var(--white); overflow: visible; }
.hw-ph-walls { fill: none; stroke: var(--navy); stroke-opacity: 0.8; stroke-width: 14; }
.hw-ph-ap { fill: var(--blue); fill-opacity: 0.85; }
.hw-ph-cam { fill: var(--navy); fill-opacity: 0.55; }
.hw-ph-door { fill: var(--blue); }
.hw-ph-ring { fill: none; stroke: var(--blue); stroke-width: 12; transform-box: fill-box; transform-origin: 50% 50%;
  opacity: calc(var(--demo) * 0.9); transform: scale(calc(0.5 + var(--demo) * 1.1)); }
.hw-ph-btn {
  position: absolute; left: 50%; top: 58%; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: var(--blue); color: var(--white); transform: translateX(-50%) scale(calc(1 - var(--demo) * 0.1));
  box-shadow: 0 0 0 calc(var(--demo) * 7px) rgba(43, 96, 255, 0.25), 0 6px 14px -6px rgba(0, 5, 71, 0.6);
}
.hw-ph-btn svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-ph-row { position: absolute; left: 14%; right: 30%; top: 84%; height: 2.6%; border-radius: 3px; background: var(--navy); opacity: 0.14; }
.hw-ph-row2 { top: 89.5%; right: 44%; }
/* The front door's reader answers the phone */
.hw-k-reader .hw-plate::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 calc(var(--demo) * 12px) rgba(43, 96, 255, 0.28); }
.hw-k-reader .hw-plate { overflow: visible; }
@container (max-width: 520px) {
  .hw-mobile { border-radius: 10px; }
  .hw-ph-screen { border-radius: 7px; }
}

/* ---------- 4. What goes in your plan: the equipment itself, in the makers' own photos ----------
   The section sits on Gigabyte, the ground the makers' photos are shot to sit on (they are cut out, with their own
   soft reflection kept, img/equipment-hd/SOURCES.txt). Four parts in a row, each a square of photo over its heading
   and line; then the network closet, the words beside the four units shown together at the maker's own scale (--w is
   each unit's width against the widest); then the certifications. Only the front photo shows here; the second view
   (.gp-b) exists only under motion (motion.css), so without motion it is never fetched. */
.plan { padding-block: var(--section); background: var(--light); }
.plan-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.plan-head h2 { grid-column: 1 / span 7; }
.plan-intro { grid-column: 1 / span 6; margin-top: 12px; font-size: 20px; line-height: 32px; }

.gp { position: relative; display: block; margin: 0; }
.gp img { display: block; max-width: none; }
.gp .gp-b { display: none; }
.gear { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; margin-top: 40px; }
.gear-item { min-width: 0; }
.gear .gp { width: 100%; max-width: 340px; }
.gp-stage { position: relative; display: block; aspect-ratio: 1; }
.gear .gp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gear h3 { margin-top: 12px; font-size: 22px; line-height: 28px; }
.gear p { margin-top: 8px; max-width: 30em; }

.closet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: center; margin-top: 96px; }
.closet-copy { grid-column: 1 / span 4; }
.closet-title { font-size: 28px; line-height: 36px; }
.closet-lead { margin-top: 12px; font-size: 18px; line-height: 28px; }
.closet-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--light-tint); font-weight: 600; }
.closet-note svg { flex: none; width: 24px; height: 24px; color: var(--blue); }
.closet-stack { grid-column: 6 / -1; display: grid; row-gap: 32px; }
.unit { display: grid; grid-template-columns: minmax(0, 1fr) 184px; column-gap: 32px; align-items: center; }
.unit-name { color: var(--navy); font-size: 15px; line-height: 22px; font-weight: 600; }
.gp-rack { justify-self: center; width: calc(var(--w, 1) * 100%); aspect-ratio: var(--ar); }
.gp-rack .gp-a { width: 100%; height: 100%; object-fit: contain; }
/* The raised view keeps its own height, so it rises above the front view's box into the space between units */
.gp-rack .gp-b { position: absolute; left: 50%; bottom: 0; width: calc(var(--bw, 1) * 100%); height: auto; translate: -50% 0; }

.certs {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px;
  margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--light-tint);
}
.certs-title { grid-column: 1 / span 3; font-size: 20px; line-height: 28px; }
.cert-list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.cert-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.cert-list img { grid-row: span 2; width: 64px; height: 64px; border-radius: 12px; object-fit: contain; }
.cert-list strong { align-self: end; color: var(--navy); font-family: var(--display); font-size: 16px; line-height: 22px; font-weight: 500; }
.cert-list span { margin-top: 4px; font-size: 14px; line-height: 20px; }
.fineprint { grid-column: 4 / -1; font-size: 14px; line-height: 20px; }

/* ---------- 6. After go-live: the night band ---------- */
.band { background: var(--navy); color: var(--white); }
.band h2, .band h3 { color: var(--white); }
.care { position: relative; overflow: hidden; padding-block: var(--section); }
/* Beside the care list the diagram is the shorter column: less air under it at laptop widths and up */
@media (min-width: 901px) { .care { padding-bottom: 72px; } }
.rings-care { width: 1200px; height: 1200px; right: -560px; top: -640px; color: var(--blue); opacity: 0.4; }
.care-head { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: end; }
.care-head-copy { grid-column: 1 / span 7; }
.care-intro { margin-top: 16px; max-width: 640px; font-size: 20px; line-height: 32px; }
.care-phone {
  grid-column: 9 / span 4; justify-self: end; display: inline-flex; align-items: center; gap: 16px;
  color: var(--white); font-family: var(--text); font-size: 36px; line-height: 44px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.care-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.care-phone-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 8px rgba(43, 96, 255, 0.22); }
.care-phone-icon svg { width: 28px; height: 28px; }
.care-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: center; margin-top: 64px; }
.monitor-figure { grid-column: 1 / span 7; margin: 0; }
.care-side { grid-column: 9 / span 4; }
.care-list { display: grid; gap: 26px; }
.care-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.care-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); color: var(--electric); }
.care-icon svg { width: 22px; height: 22px; }
.care-list h3 { font-size: 20px; line-height: 28px; }
.care-list p { margin-top: 4px; color: var(--light-tint); }
.care-note {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 16px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 15px; line-height: 22px;
}
.care-note svg { flex: none; width: 22px; height: 22px; color: var(--electric); }

/* How monitoring works: white pieces on a navy panel, one glowing status line from the building to the watch, a
   problem spotted, then two outcomes. No numbers or readings. */
.monitor {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.2fr) 104px 44px minmax(0, 0.95fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 432px; padding: 32px 24px 64px; border-radius: 16px; overflow: hidden;
  background: var(--navy-tint); box-shadow: 0 0 0 1px var(--rule-dark), 0 24px 48px -16px rgba(0, 5, 71, 0.6);
}
.m-node { position: relative; z-index: 0; display: grid; justify-items: center; }
.m-node img { width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(48, 197, 255, 0.3)); }
.m-closet { grid-column: 1; grid-row: 1 / -1; }
.m-closet .rack { width: 88%; }
.m-hub { grid-column: 3; grid-row: 1 / -1; }
.m-remote { grid-column: 6; grid-row: 1; }
.m-onsite { grid-column: 6; grid-row: 2; }
.m-remote img, .m-onsite img { width: 100%; max-width: 124px; }
.m-label {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); width: max-content; max-width: 168px; text-align: center;
  padding: 4px 12px; border-radius: 12px; background: var(--white); color: var(--navy);
  font-size: 13px; line-height: 18px; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(0, 5, 71, 0.8);
}
.rings-monitor { left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); z-index: -1; opacity: 0.9; }
.m-wire, .m-problem::before, .m-fork::before, .m-fork::after { filter: drop-shadow(0 0 4px rgba(48, 197, 255, 0.9)); }
.m-status { position: relative; grid-column: 2; grid-row: 1 / -1; align-self: center; height: 3px; background: var(--electric); overflow: hidden; }
.m-status::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--white), rgba(255, 255, 255, 0)); opacity: 0; transform: translateX(-100%); }
.m-problem { position: relative; grid-column: 4; grid-row: 1 / -1; align-self: stretch; display: grid; place-items: center; }
.m-problem::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--electric); }
.m-alert { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--white); }
.m-alert svg { width: 20px; height: 20px; stroke: var(--white); stroke-width: 3; stroke-linecap: round; fill: none; }
.m-alert::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--electric); opacity: 0; }
.m-fork { position: relative; grid-column: 5; grid-row: 1 / -1; align-self: stretch; }
.m-fork::before { content: ""; position: absolute; left: 0; width: 40%; top: 50%; height: 3px; margin-top: -1.5px; background: var(--electric); }
.m-fork::after { content: ""; position: absolute; left: 40%; right: 0; top: 25%; bottom: 25%; margin: -1.5px 0; border: 3px solid var(--electric); border-right: 0; border-radius: 14px 0 0 14px; }

/* ---------- 7. Your front desk, too ---------- */
.desk { padding-block: var(--section); }
.desk-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: center; }
.desk-copy { grid-column: 1 / span 5; }
.desk-intro { margin-top: 16px; font-size: 20px; line-height: 32px; }
.desk-lead { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--light-tint); }
.desk-lead h3 { font-size: 24px; line-height: 32px; }
.desk-lead p { margin-top: 10px; font-size: 17px; line-height: 27px; }
.drawing-flow { grid-column: 7 / span 6; }
.desk-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--gutter);
  margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--light-tint);
}
.desk-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start; }
.job-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--white); }
.job-icon svg { width: 22px; height: 22px; }
.desk-list h3 { align-self: center; font-size: 19px; line-height: 26px; }
.desk-list p { font-size: 15px; line-height: 23px; }

/* ---------- 8. Before you book ----------
   The headline on the left, five questions on the right as Pure White cards on Gigabyte (the desk section above is
   white and the close below is SigBridge Blue, so the band reads as its own step). Each question is a button in an
   h3: PP Mori for the question, Manrope for the answer. The answers fold only once the section's script has run
   (.is-ready); the transition (motion.css) runs only after the first state is set (.is-live). */
.faq { padding-block: var(--section); background: var(--light); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: start; }
.faq-head { grid-column: 1 / span 4; position: sticky; top: 32px; }
.faq-list { grid-column: 5 / -1; display: grid; gap: 12px; }
.faq-item { border-radius: 12px; background: var(--white); }
.faq-q { font-size: 20px; line-height: 28px; letter-spacing: -0.005em; }
.faq-q button {
  display: flex; align-items: center; gap: 24px; width: 100%; margin: 0; padding: 22px 24px 22px 28px;
  border: 0; border-radius: 12px; background: none; color: var(--navy);
  font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.faq-q button:focus-visible { outline-offset: 2px; border-radius: 12px; }
/* Where :has() works, the focus ring goes round the whole card, answer included */
@supports selector(:has(*)) {
  .faq-q button:focus-visible { outline: 0; }
  .faq-item:has(.faq-q button:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
}
.faq-q-text { flex: 1 1 auto; min-width: 0; }
/* The mark: a plus in a Gigabyte circle; open, a minus in a SigBridge Blue circle */
.faq-icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--light); }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 1px; background: var(--blue);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q button:hover .faq-icon { background: var(--light-tint); }
.faq-item.is-open .faq-icon { background: var(--blue); }
.faq-item.is-open .faq-q button:hover .faq-icon { background: var(--blue-tint); }
.faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: var(--white); }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }
.faq-a p { max-width: 64ch; padding: 0 28px 26px; color: var(--navy-tint); font-size: 17px; line-height: 27px; }
/* Without the section's script: every answer shows, and the questions read as plain headings */
.faq:not(.is-ready) .faq-q button { cursor: default; }
.faq:not(.is-ready) .faq-icon { display: none; }
/* With it: a closed answer folds to nothing and leaves the reading order */
.faq.is-ready .faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.faq.is-ready .faq-item.is-open .faq-a { grid-template-rows: 1fr; visibility: visible; }
.faq-a-inner { min-height: 0; overflow: hidden; }
.faq.is-ready .faq-a-inner { opacity: 0; }
.faq.is-ready .faq-item.is-open .faq-a-inner { opacity: 1; }
/* The gentle open and close is in motion.css (html.motion only, so never under reduced motion) */

/* ---------- 9. Close ---------- */
.close { position: relative; overflow: hidden; background: var(--blue); color: var(--white); padding-block: 88px; }
.rings-close { width: 900px; height: 900px; right: -300px; top: -420px; color: var(--white); opacity: 0.3; }
.close-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; align-items: end; }
.close-copy { grid-column: 1 / span 7; }
.close h2 { color: var(--white); }
.close-copy > p { margin-top: 16px; max-width: 600px; font-size: 18px; line-height: 28px; }
.close-keep { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.close-keep-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--blue); }
.close-keep-icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
.close-actions { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 32px; }
.close-phone { color: var(--white); font-family: var(--text); font-weight: 600; font-size: 20px; line-height: 28px; text-decoration: none; }
.close-phone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Footer: Web Blue; white 18.9:1, Gigabyte Tint 15:1; 44 px link rows ---------- */
.site-footer { background: var(--navy); color: var(--white); padding-top: 72px; padding-bottom: 32px; }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; align-items: start; }
.footer-brand { grid-column: 1 / span 4; }
/* The line starts one S width below the logo, the logo's clear space (BRAND.md): the S is 64 px wide in the 216 px
   lockup (51 px in the 174 px phone lockup, below). */
.footer-line { margin-top: 64px; color: var(--white); font-family: var(--display); font-size: 20px; line-height: 28px; }
.footer-about { margin-top: 12px; max-width: 340px; color: var(--light-tint); font-size: 15px; line-height: 22px; }
.footer-line + .footer-about { margin-top: 20px; }
.footer-contact { margin-top: 28px; padding-top: 24px; max-width: 340px; border-top: 1px solid var(--rule-dark); }
.footer-name { color: var(--white); font-weight: 600; }
.footer-contact address { margin-top: 4px; color: var(--light-tint); }
.footer-phone { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-size: 18px; line-height: 28px; font-weight: 600; text-decoration: none; }
.footer-phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-area { color: var(--light-tint); }
.footer-col { grid-column: span 2; }
.footer-col h2 { color: var(--white); font-family: var(--display); font-size: 16px; line-height: 24px; letter-spacing: 0; }
.footer-col ul { margin-top: 8px; }
.footer-col li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--light-tint); font-weight: 500; text-decoration: none; }
.footer-col li a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { position: relative; display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; color: var(--light-tint); font-size: 14px; line-height: 20px; }
.footer-legal::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule-dark); }

/* ---------- Responsive ---------- */

@media (max-width: 1360px) {
  .header-phone { display: none; }
}

@media (max-width: 1240px) {
  /* The long label stays in the accessibility tree (clipped, never display: none), so the button keeps its one name,
     "Book a free on-site assessment", while the shorter label shows (aria-hidden) */
  .label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .label-short { display: inline; }
}

@media (max-width: 1180px) {
  h1 { font-size: 48px; line-height: 56px; }
  .hero h1 { font-size: 50px; line-height: 56px; }
  .header-nav ul { gap: 18px; }
  .header-nav a { font-size: 14px; }
  .co { font-size: 12px; line-height: 18px; padding: 3px 10px 3px 3px; }
  .co-plain { padding: 3px 10px; }
  .care-side { grid-column: 8 / span 5; }
}

/* Small laptops and tablets: the strip's heading sits above the situations */
@media (max-width: 1180px) {
  .going h2 { grid-column: 1 / -1; padding-top: 0; margin-bottom: 8px; }
  .going-list { grid-column: 1 / -1; }
}
/* What goes in your plan: where the row is too narrow for the closet's words beside its units, the words sit above
   them; below 900 px the four parts go two by two */
@media (max-width: 1180px) {
  .closet-copy { grid-column: 1 / span 5; }
}
@media (max-width: 999px) {
  .closet-copy { grid-column: 1 / -1; max-width: 640px; }
  .closet-stack { grid-column: 1 / -1; width: 100%; max-width: 760px; }
}
@media (max-width: 899px) {
  .gear { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 1099px) {
  .header-nav { display: none; }
}

/* Where the photo is 550 to 720 px wide (small laptops, and small tablets stacked below the words): the two cards
   along the bottom edge get narrower so they keep a clear gap between them, and the plan's card reaches 12 px past
   the photo's left edge (half the gutter) and sits a little lower, below the fingers under the tablet */
@media (min-width: 601px) and (max-width: 767px), (min-width: 1025px) and (max-width: 1260px) {
  .hc { max-width: 236px; }
  .hc .hc-d { font-size: 13px; line-height: 19px; }
  .hc-plan { width: 318px; max-width: none; left: -12px; top: calc(100% - 26px); }
  .hc-plan .hc-card { padding: 12px 16px 12px 12px; }
  .hc-plan .hc-icon { width: 34px; height: 34px; }
  .hc-plan .hc-icon svg { width: 19px; height: 19px; }
  .hc-plan .hc-h { font-size: 17px; line-height: 22px; }
  .hc-plan .hc-d, .hc-plan .hc-k { font-size: 13px; line-height: 19px; }
  .hc-plan .hc-keyicon { margin-left: 5px; }
}

/* Stacked (tablets): the words, then the photo at up to 760 px; the WiFi card rises only 14 px past the photo's top
   edge, well clear of the line above it */
@media (max-width: 1024px) {
  .hero-grid { row-gap: 56px; padding-bottom: 104px; }
  /* Stacked under the words, the photo is cropped to 2:1 from its middle (the two faces and the tablet), so the first
     screen shows faces, not two foreheads; the plan overlay keeps the same centred geometry */
  .hp-frame { aspect-ratio: 2 / 1; }
  .hero-copy, .hero-photo { grid-column: 1 / -1; }
  .hero-copy { max-width: 640px; }
  .hero h1 { font-size: 56px; line-height: 60px; }
  .hero-photo { max-width: 760px; }
  .hc-wifi { top: -14px; }
}

@media (max-width: 900px) {
  :root { --section: 80px; }
  h2 { font-size: 36px; line-height: 44px; }
  .going h2 { grid-column: 1 / -1; padding-top: 0; margin-bottom: 8px; }
  .going-list { grid-column: 1 / -1; }
  .plan-head h2, .plan-intro,
  .certs-title, .cert-list, .fineprint,
  .care-head-copy, .care-phone, .monitor-figure, .care-side,
  .desk-copy, .drawing-flow,
  .faq-head, .faq-list,
  .close-copy, .close-actions { grid-column: 1 / -1; }
  .faq-head { position: static; }
  .care-phone { justify-self: start; }
  .desk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-list { row-gap: 20px; }
  .close-actions { justify-content: flex-start; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { grid-column: span 6; }
}

@media (max-width: 700px) {
  .going-list { grid-template-columns: 1fr; }
  .going-list li:nth-child(2) { border-top-color: var(--light-tint); }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; --section: 64px; }
  h1 { font-size: 40px; line-height: 48px; }
  h2 { font-size: 30px; line-height: 38px; }
  h3 { font-size: 20px; line-height: 28px; }

  .header-row { height: 64px; }
  .lockup img { width: 161px; height: 42px; }
  .header-actions { padding-left: 12px; }
  .label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .label-short { display: inline; }

  .hero { --s-x: 27.5px; --s-y: -33px; --rs: 0.8; }
  .hero-grid { padding-top: 32px; padding-bottom: 40px; row-gap: 32px; }
  .hero h1 { font-size: clamp(34px, 11vw, 40px); line-height: 1.1; }
  .hero .lead { font-size: 18px; line-height: 28px; }
  .actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* The photo on a phone: 4:3 from the middle (both faces and the tablet stay in), the plan's lines heavier for
     the smaller screen, and the three cards stacked under the photo, never over it or the words */
  .hp-frame { aspect-ratio: 4 / 3; border-radius: 16px; }
  .tp-walls path { stroke-width: 5.4; }
  .tp-walls .tp-wall-in { stroke-width: 4.2; }
  .tp-swing { stroke-width: 2.8; }
  .tp-closet, .tp-desk { stroke-width: 2.6; }
  .tp-reach, .tp-ripple { stroke-width: 5; }
  .tp-dot { stroke-width: 6; }
  .hero-cards { position: static; display: grid; gap: 16px; margin-top: 16px; }
  /* On a phone only the plan's card follows the photo (three cards pushed "What's going on?" two screens down) */
  .hc-wifi, .hc-door { display: none; }
  .hc, .hc-plan { position: static; width: auto; max-width: none; }
  .hc-card, .hc-plan .hc-card { padding-left: 12px; }
  .hc-plan .hc-card::after { inset: -5px; border-radius: 19px; }

  .going-grid { padding-block: 32px 24px; }
  .going h2 { font-size: 28px; line-height: 36px; }
  .going-list a { min-height: 56px; gap: 14px; padding: 12px 0; font-size: 18px; line-height: 24px; }
  .gi { width: 24px; height: 24px; }

  .plan-intro, .care-intro, .desk-intro { font-size: 18px; line-height: 28px; }

  .sheet { border-radius: 12px; }
  .lines .leader, .sheet .dot { display: none; }
  .stack .callouts { display: none; }
  .drawing-flow .stack .callouts { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .drawing-flow .co { position: static; transform: none; box-shadow: none; background: var(--light); border: 1px solid var(--light-tint); font-size: 12px; line-height: 18px; white-space: normal; max-width: none; }

  /* The four parts two by two, and the closet's units one under another, each with its name under it */
  .gear { column-gap: 16px; row-gap: 32px; margin-top: 32px; }
  .gear h3 { margin-top: 8px; font-size: 18px; line-height: 24px; }
  .gear p { margin-top: 6px; font-size: 15px; line-height: 22px; }
  .closet { margin-top: 64px; row-gap: 32px; }
  .closet-title { font-size: 24px; line-height: 32px; }
  .closet-lead { font-size: 16px; line-height: 26px; }
  .closet-stack { row-gap: 24px; }
  .unit { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .unit-name { font-size: 14px; line-height: 20px; }
  .certs { margin-top: 56px; padding-top: 32px; row-gap: 16px; }
  .cert-list { grid-template-columns: 1fr; row-gap: 16px; }

  .care-phone { gap: 12px; font-size: 28px; line-height: 36px; }
  .care-phone-icon { width: 44px; height: 44px; box-shadow: 0 0 0 6px rgba(43, 96, 255, 0.22); }
  .care-phone-icon svg { width: 22px; height: 22px; }
  .care-grid { margin-top: 40px; }
  .rings-care { width: 800px; height: 800px; right: -420px; top: -420px; }
  /* The monitoring drawing on a phone: top to bottom, then the two outcomes side by side */
  .monitor { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 40px auto 72px 56px auto; min-height: 0; padding: 24px 16px 28px; border-radius: 12px; }
  .m-node { display: flex; flex-direction: column; align-items: center; }
  .m-label { position: static; transform: none; margin-top: 8px; font-size: 12px; line-height: 16px; padding: 3px 10px; }
  .m-closet { grid-column: 1 / -1; grid-row: 1; }
  .m-closet .rack { width: 150px; }
  .m-status { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: stretch; width: 3px; height: auto; }
  .m-status::after { left: 0; width: auto; right: 0; top: 0; height: 40%; bottom: auto; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white), rgba(255, 255, 255, 0)); transform: translateY(-100%); }
  .m-hub { grid-column: 1 / -1; grid-row: 3; }
  .m-hub img { width: 164px; }
  .rings-monitor { top: calc(50% - 14px); width: 240px; height: 240px; }
  .m-problem { grid-column: 1 / -1; grid-row: 4; }
  .m-problem::before { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
  .m-fork { grid-column: 1 / -1; grid-row: 5; }
  .m-fork::before { left: 50%; width: 3px; margin: 0 0 0 -1.5px; top: 0; height: 40%; }
  .m-fork::after { left: 25%; right: 25%; top: 40%; bottom: 0; margin: 0 -1.5px; border: 3px solid var(--electric); border-bottom: 0; border-radius: 14px 14px 0 0; }
  .m-remote { grid-column: 1; grid-row: 6; }
  .m-onsite { grid-column: 2; grid-row: 6; }
  .m-remote img, .m-onsite img { max-width: 112px; }

  .desk-lead { margin-top: 28px; padding-top: 24px; }
  .desk-lead h3 { font-size: 21px; line-height: 28px; }
  .desk-lead p { font-size: 16px; line-height: 26px; }
  .desk-list { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; padding-top: 40px; }

  /* Before you book on a phone: the headline above the questions, the cards a little tighter */
  .faq-grid { row-gap: 24px; }
  .faq-list { gap: 10px; }
  .faq-q { font-size: 18px; line-height: 26px; }
  .faq-q button { gap: 16px; padding: 18px 16px 18px 20px; }
  .faq-icon { width: 30px; height: 30px; }
  .faq-a p { padding: 0 20px 22px; font-size: 16px; line-height: 26px; }

  .close { padding-block: 56px; }
  .rings-close { width: 600px; height: 600px; right: -260px; top: -300px; }
  .close-phone { font-size: 18px; line-height: 28px; }
  .site-footer { padding-top: 52px; }
  .footer-line { margin-top: 52px; }
  .footer-top { row-gap: 32px; }
  .footer-legal { flex-direction: column; gap: 4px; margin-top: 40px; }
}

/* The narrowest phones (under 360 px): one part per row */
@media (max-width: 359px) {
  .gear { grid-template-columns: minmax(0, 1fr); }
  .gear .gp { max-width: 200px; }
}

/* Small phones (up to 430 px): the lockup keeps its full size (the brand minimum is about 170 px), so the header
   button shows its shortest label, "Book a free visit", on one line; here that label is the button's one name. */
@media (max-width: 430px) {
  .header-actions .btn-small { max-width: 170px; min-height: 40px; padding: 0 12px; font-size: 13px; line-height: 20px; }
  .header-actions .label-long, .header-actions .label-short { display: none; }
  .header-actions .label-tiny { display: inline; }
}