/* Sync Automation site. Sync brand colours: ink #1c1c1e, paper #f5f5f7, Apple label greys; never pure black or white (colour appears only inside drawings and simulations). Aptos with Segoe UI fallback, no web fonts.
   One theme per page: light mode is light everywhere, dark mode is dark everywhere.
   Sections only step between --bg and --surface for rhythm; nothing is pinned to one theme. */

:root {
  --bg: #f5f5f7;
  --ink: #1c1c1e;
  --ink-2: #3c3c43;
  --ink-3: #6e6e73;
  --line: #d8d8dc;
  --line-2: #c7c7cc;
  --surface: #ececf0;
  --surface-2: #e3e3e8;
  --grid: rgba(0, 0, 0, 0.06);
  --ghost: 0.1;
  --shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.22);
  --art-invert: 1;
  --font: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Aptos Display", Aptos, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--font); /* one typeface: labels use the text font (Sync brand) */
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(80px, 11vw, 168px);
  --head: 72px;
  --radius: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c1e; --ink: #f5f5f7; --ink-2: #d1d1d6; --ink-3: #aeaeb2;
    --line: #2c2c2e; --line-2: #3a3a3c; --surface: #232326; --surface-2: #2c2c2e;
    --grid: rgba(255, 255, 255, 0.05);
    --ghost: 0.14; --shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.9);
    --art-invert: 0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1c1e; --ink: #f5f5f7; --ink-2: #d1d1d6; --ink-3: #aeaeb2;
  --line: #2c2c2e; --line-2: #3a3a3c; --surface: #232326; --surface-2: #2c2c2e;
  --grid: rgba(255, 255, 255, 0.05);
  --ghost: 0.14; --shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.9);
  --art-invert: 0;
  color-scheme: dark;
}
/* .tone-dark used to pin a block to black in both themes. It now only marks a block that
   starts a new band (stage, page heads, footer); colours always follow the page theme. */
.tone-dark, .invert { background: var(--bg); color: var(--ink); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  font-feature-settings: "kern", "liga"; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  accent-color: var(--ink); caret-color: var(--ink); overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--bg); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.08; text-wrap: balance; }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 12px; top: -100px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.section + .section:not(.tone-dark):not(.band-surface) { padding-top: 0; }
.band-surface { background: var(--surface); }
.rule-top { border-top: 1px solid var(--line); }

/* Type */
.display { font-size: clamp(2.75rem, 5.6vw, 6.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; }
.h1 { font-size: clamp(2.5rem, 5.6vw, 5.25rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; }
.h2 { font-size: clamp(2rem, 4.2vw, 3.75rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; }
.h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: -0.015em; line-height: 1.2; }
.h4 { font-size: 1.0625rem; font-family: var(--font); font-weight: 700; line-height: 1.3; }
.lead { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.muted { color: var(--ink-2); }
.measure { max-width: 66ch; }
.small { font-size: 0.9375rem; }
.stack > * + * { margin-top: 1em; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); line-height: 1.4; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + .display { margin-top: 20px; }
.h1 + .lead, .h2 + .lead, .display + .lead, .h2 + p, .h3 + p { margin-top: 20px; }
.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }

/* Buttons: capsules, after the strokes in the mark */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink-3); }
.btn--line:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1.0625rem; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover svg.arr { transform: translateX(3px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.arrowlink { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.arrowlink svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.arrowlink:hover svg { transform: translateX(4px); }

/* Placeholder marks for the owner */
.ph { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; border: 1px dashed var(--ink-3); border-radius: 999px; padding: 2px 9px; color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.tag-ph { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; border: 1px dashed var(--ink-3); border-radius: 999px; padding: 2px 9px; color: var(--ink-2); }
.notice { border: 1px dashed var(--ink-3); border-radius: var(--radius); padding: 16px 20px; max-width: 72ch; font-size: 0.9375rem; }

/* ===== Header and mega menu ===== */
.header {
  position: sticky; top: 0; z-index: 60; height: var(--head);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .header { background: var(--bg); } }
.header.is-menu { background: var(--bg); }
.header__in { display: flex; align-items: center; gap: 28px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand svg { width: 28px; height: 28px; }
.wordmark { font-family: var(--font-display); font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.nav { margin-left: 8px; }
.nav__list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 2px; }
.nav__link, .nav__trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; background: none; border-radius: 999px;
  text-decoration: none; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; cursor: pointer; color: var(--ink);
}
.nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: var(--surface-2); }
.nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.5em; }
.nav__trigger svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.header__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.iconbtn:hover { border-color: var(--line-2); }
.iconbtn svg { width: 20px; height: 20px; }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun { display: block; }
  :root:not([data-theme="light"]) .theme-moon { display: none; }
}
.menu-btn { display: none; }
.nav-extra { display: none; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
.mega__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3.2fr); gap: clamp(24px, 3vw, 56px); padding-block: 40px 48px; }
.mega__intro .h3 { font-family: var(--font-display); line-height: 1.08; font-size: 1.75rem; font-weight: 500; letter-spacing: -0.025em; }
.mega__intro p { margin-top: 12px; color: var(--ink-2); font-size: 0.9688rem; }
.mega__intro .arrowlink { margin-top: 24px; font-size: 0.9375rem; }
.mega__links { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-content: start; }
.mega__links a { display: grid; grid-template-columns: 28px 1fr; gap: 2px 14px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
.mega__links svg { width: 24px; height: 24px; grid-row: span 2; margin-top: 1px; }
.mega__links b { font-weight: 600; font-size: 0.9688rem; }
.mega__links span { color: var(--ink-3); font-size: 0.875rem; line-height: 1.45; grid-column: 2; }
.mega__links a:hover b { text-decoration: underline; text-underline-offset: 0.25em; }
.mega__feat { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--radius); text-decoration: none; min-height: 100%; position: relative; overflow: hidden; }
.mega__feat .eyebrow { color: var(--ink-3); }
.mega__feat b { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.mega__feat p { color: var(--ink-2); font-size: 0.9063rem; }
.mega__feat .arrowlink { margin-top: auto; align-self: flex-start; font-size: 0.9375rem; }
.mega__feat svg.feat-art { width: 100%; height: auto; margin-block: 4px 8px; }
@media (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]) { animation: megaIn 0.28s var(--ease); }
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 1279px) { .header__quote { display: none; } .header__in { gap: 18px; } }
@media (max-width: 1099px) {
  .menu-btn { display: inline-grid; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--head); bottom: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); padding: 8px var(--gutter) 40px; display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link, .nav__trigger { width: 100%; justify-content: space-between; height: auto; padding: 18px 2px; border-radius: 0; font-size: 1.25rem; font-family: var(--font-display); letter-spacing: -0.01em; }
  .nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: transparent; }
  .nav__trigger svg { width: 18px; height: 18px; }
  .mega { position: static; box-shadow: none; border: 0; background: transparent; }
  .mega__in { grid-template-columns: 1fr; padding: 0 0 20px; gap: 16px; }
  .mega__intro { display: none; }
  .mega__links { grid-template-columns: 1fr; }
  .mega__links a { padding: 12px 0; }
  .mega__feat { display: none; }
  .nav-extra { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .header__login { display: none; }
}
@media (max-width: 480px) {
  .wordmark { font-size: 1rem; }
  .header__in { gap: 10px; }
}
body.menu-open { overflow: hidden; }

/* ===== Home stage: cinematic hero and the building story ===== */
.stage { position: relative; border-bottom: 1px solid var(--line); }
.stage__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(24px, 3vw, 48px); }
.stage__panels { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.stage__visual {
  grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: var(--head);
  height: calc(100vh - var(--head)); height: calc(100svh - var(--head)); min-height: 520px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-block: 24px;
}
.stage__visual::before { /* drawing grid */
  content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)) 0 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 55% 50%, #1c1c1e 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 55% 50%, #1c1c1e 30%, transparent 80%);
}
.hud { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.hud b { color: var(--ink); font-weight: 500; }
.stage__art { min-height: 0; display: grid; place-items: center; }
.stage__art .bld { width: 100%; height: 100%; max-height: 100%; }
.layers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.layers a { display: block; padding: 12px 10px 0 0; text-decoration: none; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); position: relative; transition: color 0.3s var(--ease); }
.layers a::before { content: ""; position: absolute; left: 0; right: 10px; top: -1px; height: 2px; background: var(--c, var(--ink)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.layers a span { display: block; color: var(--ink-3); margin-bottom: 2px; }
.layers a span::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c, var(--ink)); margin-right: 7px; vertical-align: 0.22em; }
.layers a.is-past, .layers a.is-current, .stage:not(.is-staged) .layers a { color: var(--ink); }
.layers a.is-past::before { transform: scaleX(1); opacity: 0.45; }
.layers a.is-current::before, .stage:not(.is-staged) .layers a::before { transform: scaleX(1); opacity: 1; }

.chap { min-height: 82vh; min-height: 82svh; display: flex; flex-direction: column; justify-content: center; padding-block: 12vh; max-width: 34rem; }
.chap--hero { min-height: calc(100svh - var(--head)); justify-content: flex-end; padding-block: 48px 64px; max-width: none; }
.chap--hero .display { max-width: 11ch; }
.chap--hero .lead { margin-top: 28px; max-width: 34em; }
.chap--hero .actions { margin-top: 36px; }
.hero-facts { list-style: none; padding: 0; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.hero-facts li { padding: 16px 16px 0 0; font-size: 0.875rem; color: var(--ink-2); line-height: 1.45; }
.hero-facts li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.hero-facts b { display: block; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.chap__n { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.chap .h2 { margin-top: 18px; }
.chap p.lead { margin-top: 20px; }
.specs { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.specs li { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px; color: var(--ink-2); }
.chap .arrowlink { margin-top: 32px; align-self: flex-start; }
.chap--end { max-width: 40rem; }

/* building drawing */
/* Light: black linework on white. The structure is pale grey so the systems (solid ink) read first. */
.bld {
  --b-ink: #1c1c1e; --b-paper: #f5f5f7;
  --b-site: #c4c4c4; --b-grid: #ececec; --b-col: #c9c9c9; --b-core: #bdbdbd;
  --b-slab: #8a8a8a; --b-edge: #f0f0f0; --b-fx: #fafafa;
  --b-glass: #9a9a9a; --b-glass-fill: #f2f2f2; --b-tint: rgba(0, 0, 0, 0.03);
  --b-text: #262626; --b-halo: 0.05; --b-halo-on: 0.12; --b-halo-line: 0.5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bld {
    --b-ink: #f5f5f7; --b-paper: #1c1c1e;
    --b-site: #343434; --b-grid: #161616; --b-col: #474747; --b-core: #3f3f3f;
    --b-slab: #858585; --b-edge: #151515; --b-fx: #0b0b0b;
    --b-glass: #6e6e6e; --b-glass-fill: #111111; --b-tint: rgba(255, 255, 255, 0.03);
    --b-text: #d4d4d4; --b-halo: 0.1; --b-halo-on: 0.16; --b-halo-line: 0;
  }
}
:root[data-theme="dark"] .bld {
  --b-ink: #f5f5f7; --b-paper: #1c1c1e;
  --b-site: #343434; --b-grid: #161616; --b-col: #474747; --b-core: #3f3f3f;
  --b-slab: #858585; --b-edge: #151515; --b-fx: #0b0b0b;
  --b-glass: #6e6e6e; --b-glass-fill: #111111; --b-tint: rgba(255, 255, 255, 0.03);
  --b-text: #d4d4d4; --b-halo: 0.1; --b-halo-on: 0.16; --b-halo-line: 0;
}
/* System colours: soft, muted and distinct. Defined once on the root so every drawing on the site
   (home building, Design Desk drawings, live demo) shares one palette. Used only inside drawings,
   simulations and their legends, never for page chrome. Strokes stay at 3:1 or more against the page;
   label text keeps the ink colour. */
:root {
  --c-power: #b5654b; --c-network: #5f7ba3; --c-climate: #4a8780;
  --c-lighting: #9a7d24; --c-security: #93678e; --c-bms: #6b7886;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-power: #c4886f; --c-network: #8299bd; --c-climate: #76aaa1;
    --c-lighting: #c9a95a; --c-security: #ad88aa; --c-bms: #8e9aa7;
  }
}
:root[data-theme="dark"] {
  --c-power: #c4886f; --c-network: #8299bd; --c-climate: #76aaa1;
  --c-lighting: #c9a95a; --c-security: #ad88aa; --c-bms: #8e9aa7;
}
.bld .sys[data-sys="power"], .layers [data-layer-link="power"] { --b-ink: var(--c-power); --c: var(--c-power); }
.bld .sys[data-sys="network"], .layers [data-layer-link="network"] { --b-ink: var(--c-network); --c: var(--c-network); }
.bld .sys[data-sys="climate"], .layers [data-layer-link="climate"] { --b-ink: var(--c-climate); --c: var(--c-climate); }
.bld .sys[data-sys="lighting"], .layers [data-layer-link="lighting"] { --b-ink: var(--c-lighting); --c: var(--c-lighting); }
.bld .sys[data-sys="security"], .layers [data-layer-link="security"] { --b-ink: var(--c-security); --c: var(--c-security); }
.bld .sys[data-sys="bms"], .layers [data-layer-link="bms"] { --b-ink: var(--c-bms); --c: var(--c-bms); }
.bld .site { fill: none; stroke: var(--b-site); stroke-width: 1; stroke-dasharray: 3 6; }
.bld .grid { fill: none; stroke: var(--b-grid); stroke-width: 1; }
.bld .col { fill: none; stroke: var(--b-col); stroke-width: 0.8; }
.bld .core { fill: var(--b-tint); stroke: var(--b-core); stroke-width: 0.8; }
.bld .slab { fill: var(--b-tint); stroke: var(--b-slab); stroke-width: 0.9; }
.bld .edge { fill: var(--b-edge); stroke: var(--b-slab); stroke-width: 0.6; }
.bld .mul { fill: none; stroke: var(--b-ink); stroke-opacity: 0.1; stroke-width: 0.6; }
.bld .fx { fill: var(--b-fx); stroke: var(--b-ink); stroke-width: 0.9; stroke-linejoin: round; }
.bld .fx--s { stroke-width: 0.7; }
.bld .glass .fx { stroke: var(--b-glass); fill: var(--b-glass-fill); }
.bld .ln { fill: none; stroke: var(--b-ink); stroke-width: 0.9; stroke-linejoin: round; }
.bld .ln--b { stroke-width: 1.6; }
.bld .ln--t { stroke-width: 0.6; stroke-opacity: 0.75; }
.bld .ln--d { stroke-dasharray: 5 4; stroke-width: 0.8; }
.bld .ring { fill: none; stroke: var(--b-ink); stroke-width: 0.6; stroke-dasharray: 2 4; stroke-opacity: 0.7; }
.bld .pt { fill: var(--b-ink); }
.bld .lamp { fill: var(--b-ink); }
.bld .halo { fill: var(--b-ink); fill-opacity: var(--b-halo); stroke: var(--b-ink); stroke-opacity: var(--b-halo-line); stroke-width: 0.6; stroke-dasharray: 2 2.5; }
.bld .cone { fill: var(--b-ink); fill-opacity: 0.06; stroke: var(--b-ink); stroke-opacity: 0.5; stroke-width: 0.7; stroke-dasharray: 4 4; }
.bld .link { fill: none; stroke: var(--b-ink); stroke-width: 0.7; stroke-dasharray: 1 3; }
.bld .node { fill: var(--b-paper); stroke: var(--b-ink); stroke-width: 1.2; }
.bld .pulse { fill: none; stroke: var(--b-ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 400; }
.bld .lbl { opacity: 0; transition: opacity 0.5s var(--ease); }
.bld .lbl path { fill: none; stroke: var(--b-ink); stroke-opacity: 0.55; stroke-width: 0.7; }
.bld .lbl circle { fill: var(--b-ink); }
.bld .lbl text { font-family: var(--mono); font-size: 11px; letter-spacing: 0; fill: var(--b-text); paint-order: stroke; stroke: var(--b-paper); stroke-width: 3px; stroke-linejoin: round; }
.bld .sys { transition: opacity 0.7s var(--ease); }
.stage.is-staged .sys { opacity: 0.07; }
.stage.is-staged .sys.is-past { opacity: 0.28; }
.stage.is-staged .sys.is-current { opacity: 1; }
.stage.is-staged .sys.is-current .lbl { opacity: 1; }
.stage.is-staged .sys.is-current .halo { fill-opacity: var(--b-halo-on); }
@media (prefers-reduced-motion: no-preference) {
  .bld .pulse { stroke-dasharray: 8 120; animation: flow 3.2s linear infinite; }
  .bld .pulse--slow { animation-duration: 4.6s; }
  .bld .pulse--fast { animation-duration: 2s; }
  .stage.is-idle .bld .pulse { animation-play-state: paused; }
  .js .bld .slab { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) 0.15s forwards; }
  .js .bld .sys { animation: rise 0.9s var(--ease) backwards; }
  .js .bld .sys[data-sys="power"] { animation-delay: 0.9s; }
  .js .bld .sys[data-sys="climate"] { animation-delay: 1.05s; }
  .js .bld .sys[data-sys="network"] { animation-delay: 1.2s; }
  .js .bld .sys[data-sys="lighting"] { animation-delay: 1.35s; }
  .js .bld .sys[data-sys="security"] { animation-delay: 1.5s; }
  .js .bld .sys[data-sys="bms"] { animation-delay: 1.65s; }
  .js .chap--hero > * { animation: up 0.9s var(--ease) backwards; }
  .js .chap--hero > :nth-child(2) { animation-delay: 0.08s; }
  .js .chap--hero > :nth-child(3) { animation-delay: 0.16s; }
  .js .chap--hero > :nth-child(4) { animation-delay: 0.24s; }
  .js .chap--hero > :nth-child(5) { animation-delay: 0.32s; }
}
@keyframes flow { from { stroke-dashoffset: 128; } to { stroke-dashoffset: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; } }
@keyframes up { from { opacity: 0; transform: translateY(16px); } }

@media (max-width: 899px) {
  .stage__grid { grid-template-columns: 1fr; }
  .stage__visual { grid-column: 1; grid-row: 1; z-index: 2; height: 46vh; height: 46svh; min-height: 300px; padding-block: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .stage__visual::before { inset: 0; }
  .stage__panels { grid-row: 2; }
  .chap { min-height: 62svh; padding-block: 56px; }
  .chap--hero { min-height: 0; padding-block: 36px 56px; }
  .layers a { font-size: 0; padding-top: 10px; }
  .layers a span { font-size: 0.625rem; margin: 0; }
  .bld .lbl text { font-size: 14px; }
}
@media (max-width: 560px) {
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts li, .hero-facts li + li { padding: 14px 0; border-left: 0; }
  .hero-facts li + li { border-top: 1px solid var(--line); }
  .hud span:last-child { display: none; }
}

/* ===== Proof ===== */
.proof__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.stat { padding: 28px 24px 8px 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat__v { font-family: var(--font-display); font-size: clamp(2.5rem, 4.6vw, 4.25rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__v.is-ph { color: var(--ink-3); }
.stat__l { margin-top: 14px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; max-width: 22ch; }
.stat .ph { margin-top: 12px; }
@media (max-width: 860px) {
  .proof__grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 20px; }
}
.proof__row { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: start; }
.proof__row + .proof__row { margin-top: 40px; }
.proof__row h3 { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; font-weight: 500; color: var(--ink-3); padding-top: 6px; }
.proof__row h3 + p { margin-top: 10px; font-size: 0.875rem; color: var(--ink-3); max-width: 28ch; }
.marks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.marks li { display: grid; place-items: center; min-height: 76px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 0.875rem; letter-spacing: 0; color: var(--ink-2); text-align: center; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.marks li:hover { color: var(--ink); background: var(--surface); }
.certs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cert { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: start; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 16px; }
.cert svg { width: 36px; height: 36px; grid-row: span 3; }
.cert b { font-weight: 600; font-size: 0.9688rem; }
.cert span { font-size: 0.8438rem; color: var(--ink-3); }
.cert .ph { justify-self: start; margin-top: 4px; }
@media (max-width: 760px) { .proof__row { grid-template-columns: 1fr; gap: 16px; } }

/* ===== Section heads ===== */
.shead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.shead .lead { margin: 0; }
.shead--stack { grid-template-columns: 1fr; }
@media (max-width: 860px) { .shead { grid-template-columns: 1fr; } }

/* ===== Process: from survey to handover ===== */
.process { position: relative; }
.process__track { position: relative; height: 2px; background: var(--line); margin-bottom: 0; }
.process__track span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 1)); }
.process__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process__steps li { padding: 32px 24px 0 0; position: relative; transition: opacity 0.5s var(--ease); }
.process__steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.process__steps li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.process__steps li + li::before { left: -6px; }
.process__steps .n { display: block; font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 28px; }
.process__steps h3 { margin-bottom: 10px; }
.process__steps p { color: var(--ink-2); font-size: 0.9688rem; }
.process__steps .deliv { margin-top: 16px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.js .process.is-scrubbing .process__steps li { opacity: 0.35; }
.js .process.is-scrubbing .process__steps li.is-reached { opacity: 1; }
.js .process.is-scrubbing .process__steps li.is-reached::before { background: var(--ink); }
@media (max-width: 1000px) {
  .process__track { display: none; }
  .process__steps { grid-template-columns: 1fr; border-left: 2px solid var(--line); margin-left: 5px; }
  .process__steps li, .process__steps li + li { padding: 0 0 40px 32px; border-left: 0; }
  .process__steps li::before, .process__steps li + li::before { left: -8px; top: 6px; }
  .process__steps .n { font-size: 2.75rem; margin-bottom: 12px; }
}

/* ===== Solutions index ===== */
.sol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.sol li { border-bottom: 1px solid var(--line); }
.sol li:nth-child(odd) { border-right: 1px solid var(--line); }
.sol a { display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; gap: 6px 24px; align-items: start; padding: 32px 28px 32px 0; text-decoration: none; height: 100%; position: relative; transition: background-color 0.3s var(--ease); }
.sol li:nth-child(even) a { padding-left: 28px; }
.sol a:hover { background: var(--surface); }
.sol .sym { width: 48px; height: 48px; grid-row: span 2; }
.sol .k { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); grid-column: 2; }
.sol h3 { grid-column: 2; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.025em; }
.sol p { grid-column: 2; color: var(--ink-2); font-size: 0.9688rem; max-width: 46ch; }
.sol .go { grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; align-self: center; transition: transform 0.3s var(--ease); }
.sol a:hover .go { transform: translateX(5px); }
@media (max-width: 860px) {
  .sol { grid-template-columns: 1fr; }
  .sol li:nth-child(odd) { border-right: 0; }
  .sol a, .sol li:nth-child(even) a { padding: 24px 0; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 4px 16px; }
  .sol .sym { width: 36px; height: 36px; }
}

/* ===== Case studies ===== */
.cases { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.case-card a { display: block; text-decoration: none; }
.frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border-radius: var(--radius); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.case-card a:hover .frame img { transform: scale(1.035); }
.frame .ph { position: absolute; left: 14px; top: 14px; background: rgba(0, 0, 0, 0.6); color: #d4d4d4; border-color: #8f8f8f; }
.case-card .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.case-card h3 { margin-top: 10px; font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 500; letter-spacing: -0.02em; }
.case-card p { margin-top: 8px; color: var(--ink-2); font-size: 0.9688rem; }
.case-card a:hover h3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
@media (max-width: 960px) { .cases { grid-template-columns: 1fr 1fr; } .cases li:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cases { grid-template-columns: 1fr; } }

/* Full case studies (projects page) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 32px 16px; }
.case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); align-items: start; }
.case:first-of-type { border-top: 1px solid var(--ink); }
.case .frame { position: sticky; top: calc(var(--head) + 24px); }
.case__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.case h2 { margin-top: 14px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; }
.case dl { margin-top: 28px; border-top: 1px solid var(--line); }
.case dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.case dt { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); padding-top: 4px; }
.case dd { margin: 0; color: var(--ink-2); font-size: 0.9688rem; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 0.8125rem; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; color: var(--ink); }
.figs { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.figs > div { padding: 16px 12px 0 0; }
.figs > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.figs b { display: block; font-family: var(--font-display); font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.figs span { display: block; margin-top: 8px; font-size: 0.8438rem; color: var(--ink-3); line-height: 1.4; }
.figs-note { margin-top: 12px; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } .case .frame { position: relative; top: 0; } }
@media (max-width: 420px) { .case dl > div { grid-template-columns: 1fr; gap: 4px; } }
.empty { padding: 40px 0; color: var(--ink-2); }

/* ===== Platform: Design Desk product UI ===== */
.platform { overflow: hidden; }
.platform__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.platform__text .lead { margin-top: 20px; }
.platform__text .actions { margin-top: 32px; }
.modlist { list-style: none; padding: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.modlist li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.status { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.status--live { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.status--soon { color: var(--ink-3); }
@media (max-width: 1000px) { .platform__grid { grid-template-columns: 1fr; } }

/* Product UI mockup: follows the page theme, framed as an app window */
.app {
  --a-bg: #f5f5f7; --a-panel: #f6f6f6; --a-hover: #e9e9e9; --a-canvas: #fcfcfc;
  --a-ink: #1c1c1e; --a-ink-2: #3d3d3d; --a-muted: #5c5c5c; --a-line: #e2e2e2; --a-line-2: #cccccc;
  --a-strong: #1c1c1e; --a-wall: #1a1a1a; --a-door: #8a8a8a; --a-frame: #cfcfcf;
  --a-shadow: 0 40px 120px -48px rgba(0, 0, 0, 0.28);
  background: var(--a-bg); color: var(--a-ink); border: 1px solid var(--a-frame); border-radius: 10px; overflow: hidden;
  box-shadow: var(--a-shadow);
  font-family: var(--font); font-size: 12px; line-height: 1.3; user-select: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app {
    --a-bg: #1c1c1e; --a-panel: #111111; --a-hover: #262626; --a-canvas: #0a0a0a;
    --a-ink: #f5f5f7; --a-ink-2: #c7c7c7; --a-muted: #a3a3a3; --a-line: #232323; --a-line-2: #333333;
    --a-strong: #f5f5f7; --a-wall: #e6e6e6; --a-door: #7a7a7a; --a-frame: #2a2a2a;
    --a-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  }
}
:root[data-theme="dark"] .app {
  --a-bg: #1c1c1e; --a-panel: #111111; --a-hover: #262626; --a-canvas: #0a0a0a;
  --a-ink: #f5f5f7; --a-ink-2: #c7c7c7; --a-muted: #a3a3a3; --a-line: #232323; --a-line-2: #333333;
  --a-strong: #f5f5f7; --a-wall: #e6e6e6; --a-door: #7a7a7a; --a-frame: #2a2a2a;
  --a-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.app__top { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; background: var(--a-panel); border-bottom: 1px solid var(--a-line); white-space: nowrap; overflow: hidden; }
.app__top svg { width: 16px; height: 16px; flex: none; }
.app__menu { display: flex; gap: 2px; color: var(--a-ink-2); }
.app__menu span { padding: 4px 7px; border-radius: 4px; }
.app__sep { width: 1px; height: 18px; background: var(--a-line-2); flex: none; }
.app__proj { font-weight: 650; }
.app__saved { font-size: 11px; color: var(--a-muted); border: 1px solid var(--a-line-2); border-radius: 999px; padding: 2px 8px; }
.app__sp { flex: 1; }
.app__search { display: inline-flex; align-items: center; gap: 8px; color: var(--a-muted); border: 1px solid var(--a-line-2); border-radius: 6px; padding: 4px 8px; }
.app__search kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--a-line-2); border-radius: 3px; padding: 0 4px; }
.app__boq { background: var(--a-ink); color: var(--a-bg); font-weight: 650; border-radius: 6px; padding: 5px 10px; }
.app__body { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px; height: clamp(320px, 36vw, 470px); }
.app__lib, .app__insp { background: var(--a-panel); border-right: 1px solid var(--a-line); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; }
.app__insp { border-right: 0; border-left: 1px solid var(--a-line); }
.app__tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--a-line); padding-bottom: 6px; color: var(--a-muted); }
.app__tabs b { color: var(--a-ink); font-weight: 650; box-shadow: 0 7px 0 -5px var(--a-ink); }
.app__field { border: 1px solid var(--a-line-2); border-radius: 6px; padding: 5px 8px; color: var(--a-muted); }
.app__grp { font-size: 10px; letter-spacing: 0; color: var(--a-muted); margin-top: 4px; }
.app__item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px; color: var(--a-ink-2); }
.app__item svg { width: 15px; height: 15px; flex: none; }
.app__item.is-on { background: var(--a-hover); color: var(--a-ink); box-shadow: inset 0 0 0 1px var(--a-ink); }
.app__canvas { position: relative; background: var(--a-canvas); min-width: 0; overflow: hidden; }
.app__canvas > svg { position: absolute; inset: 14px 14px 30px 52px; width: calc(100% - 66px); height: calc(100% - 44px); }
.app__tools { position: absolute; left: 10px; top: 46px; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; }
.app__tools i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; color: var(--a-ink-2); }
.app__tools i.is-on { background: var(--a-ink); color: var(--a-bg); }
.app__tools svg { width: 15px; height: 15px; }
.app__floor { position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; align-items: center; padding: 4px 8px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-ink-2); }
.app__zoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; padding: 4px 8px; background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-ink-2); font-family: var(--mono); font-size: 11px; }
.app__insp h4, .app__insp .app__h4 { font-size: 12px; font-weight: 650; display: flex; justify-content: space-between; }
.app__kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; color: var(--a-muted); }
.app__kv b { color: var(--a-ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.app__check { margin-top: auto; border-top: 1px solid var(--a-line); padding-top: 8px; color: var(--a-ink-2); display: grid; gap: 5px; }
.app__check span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--a-ink); margin-right: 8px; vertical-align: 1px; }
.app__status { display: flex; gap: 18px; height: 26px; align-items: center; padding: 0 10px; border-top: 1px solid var(--a-line); background: var(--a-panel); color: var(--a-muted); font-size: 11px; white-space: nowrap; overflow: hidden; }
.app .plan text { fill: var(--a-muted); font-size: 13px; font-family: var(--font); }
.app .plan .walls { fill: none; stroke: var(--a-wall); stroke-width: 7; stroke-linecap: square; }
.app .plan .walls-in { fill: none; stroke: var(--a-wall); stroke-width: 3.5; stroke-linecap: square; }
.app .plan .window { fill: var(--a-canvas); stroke: var(--a-wall); stroke-width: 1.25; }
.app .plan .door { fill: none; stroke: var(--a-door); stroke-width: 1; }
.app .plan .dev { fill: none; stroke: var(--a-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app .plan .dev .bgfill { fill: var(--a-canvas); }
.app .plan .dev .fill { fill: var(--a-strong); stroke: none; }
.app .plan .zone { fill: var(--a-strong); fill-opacity: 0.07; stroke-dasharray: 4 4; stroke-width: 1; }
.app .plan .ring { stroke-dasharray: 3 5; stroke-width: 1; stroke-opacity: 0.7; }
.app .plan .run { stroke-dasharray: 1 5; stroke-width: 1.4; }
.app .plan .sel { fill: none; stroke: var(--a-strong); stroke-width: 1; stroke-dasharray: 3 3; }
@media (max-width: 1180px) { .app__body { grid-template-columns: 150px minmax(0, 1fr); } .app__insp { display: none; } .app__menu { display: none; } }
@media (max-width: 640px) { .app__body { grid-template-columns: minmax(0, 1fr); height: 300px; } .app__lib, .app__search, .app__saved, .app__sep { display: none; } .app__canvas > svg { inset: 44px 10px 30px 46px; width: calc(100% - 56px); height: calc(100% - 74px); } }

/* ===== Experience it live ===== */
.live__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.live__text .actions { margin-top: 32px; }
.live__links { list-style: none; padding: 0; margin-top: 32px; border-top: 1px solid var(--line); }
.live__links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; }
.live__links a span { display: block; font-weight: 400; font-size: 0.875rem; color: var(--ink-3); }
.live__links svg { width: 20px; height: 20px; flex: none; transition: transform 0.3s var(--ease); }
.live__links a:hover svg { transform: translateX(4px); }
.dash { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: clamp(14px, 2vw, 22px); display: grid; gap: 12px; }
.dash__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.dash__top .sim { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.dash__top .sim::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .dash__top .sim::before { animation: blink 2s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0.25; } }
.dash__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 14px; min-width: 0; }
.tile__k { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; }
.tile__v { margin-top: 10px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tile__v small { font-size: 0.5em; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.tile__s { margin-top: 8px; font-size: 0.8125rem; color: var(--ink-2); }
.tile--wide { grid-column: 1 / -1; }
.trend { width: 100%; height: 90px; margin-top: 8px; }
.trend path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trend .sp { stroke: var(--ink-3); stroke-dasharray: 3 4; stroke-width: 1; }
.trend .ar { fill: var(--ink); fill-opacity: 0.06; stroke: none; }
.zones { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.zones i { height: 18px; border-radius: 2px; background: var(--ink); opacity: 0.85; transition: opacity 0.6s var(--ease); }
.zones i.off { opacity: 0.15; }
.zones i.mid { opacity: 0.45; }
@media (max-width: 1000px) { .live__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dash__tiles { grid-template-columns: 1fr 1fr; } .dash__tiles .tile:nth-child(3) { grid-column: 1 / -1; } }

/* ===== Industries ===== */
.ind { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ind a { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 28px; background: var(--bg); text-decoration: none; transition: background-color 0.3s var(--ease); }
.ind a:hover { background: var(--surface); }
.ind .k { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.ind h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.025em; margin-top: auto; }
.ind p { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 900px) { .ind { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ind { grid-template-columns: 1fr; } .ind a { min-height: 0; } }

/* ===== Final call to action ===== */
.cta-final { position: relative; overflow: hidden; }
.cta-final__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: end; }
.cta-final .display { font-size: clamp(2.75rem, 6.6vw, 6.25rem); max-width: 12ch; }
.cta-final .lead { margin-top: 28px; }
.cta-final .actions { justify-content: flex-end; }
.cta-final__mark { position: absolute; right: -4%; bottom: -18%; width: min(560px, 60vw); opacity: 0.08; pointer-events: none; }
@media (max-width: 900px) { .cta-final__in { grid-template-columns: 1fr; } .cta-final .actions { justify-content: flex-start; } }

/* Older CTA block, kept for inner pages */
.cta { border-top: 1px solid var(--ink); padding-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.cta .lead { margin-top: 20px; }
.cta .actions { justify-content: flex-end; }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; } .cta .actions { justify-content: flex-start; } }

/* ===== Page heads ===== */
.pagehead { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.pagehead .lead { margin-top: 24px; }
.pagehead .actions { margin-top: 32px; }
.pagehead .h1 { max-width: 16ch; }
.pagehead--dark { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 144px) clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.pagehead--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #1c1c1e 85%); mask-image: linear-gradient(100deg, transparent 30%, #1c1c1e 85%);
}
.pagehead--dark .wrap { position: relative; }
.pagehead--dark .h1 { max-width: 14ch; }
.pagehead__aside { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(500px, 34vw); height: auto; pointer-events: none; }
.pagehead--dark .lead { max-width: 36em; }
.pagehead--dark .jump { max-width: 64%; }
@media (max-width: 1099px) { .pagehead__aside { display: none; } .pagehead--dark .jump { max-width: none; } }
.jump { list-style: none; padding: 0; margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-block; text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; font-size: 0.875rem; }
.jump a:hover { border-color: var(--ink); }

/* ===== Solutions detail page ===== */
.svc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); }
.toc { position: sticky; top: calc(var(--head) + 32px); align-self: start; padding-top: var(--section); }
.toc p { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); margin-bottom: 14px; }
.toc ol { list-style: none; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-3); font-size: 0.9375rem; }
.toc a:hover, .toc a.is-active { color: var(--ink); border-left-color: var(--ink); }
.svc { padding-block: var(--section) 0; }
.svc:last-child { padding-bottom: var(--section); }
.svc__k { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); display: flex; align-items: center; gap: 14px; }
.svc__k svg { width: 32px; height: 32px; color: var(--ink); }
.svc .h2 { margin-top: 18px; }
.svc__intro { margin-top: 24px; font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 60ch; color: var(--ink-2); }
.svc__cols { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; border-top: 1px solid var(--ink); }
.svc__cols > div { padding: 22px 28px 0 0; }
.svc__cols > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.svc__cols h3 { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; font-weight: 500; color: var(--ink-3); margin-bottom: 12px; }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding: 8px 0 8px 22px; border-bottom: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 1.5px; background: var(--ink); }
.svc__more { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
@media (max-width: 1000px) { .svc-layout { grid-template-columns: 1fr; } .toc { display: none; } }
@media (max-width: 640px) {
  .svc__cols { grid-template-columns: 1fr; }
  .svc__cols > div, .svc__cols > div + div { padding: 20px 0 0; border-left: 0; }
  .svc__cols > div + div { margin-top: 12px; border-top: 1px solid var(--line); }
}

/* ===== Generic grids used by inner pages ===== */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split > :first-child { position: sticky; top: calc(var(--head) + 40px); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split > :first-child { position: static; } }
.outputs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.outputs li { padding: 24px 28px 0 0; }
.outputs li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.outputs .n { display: block; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); margin-bottom: 20px; }
.outputs h3 { margin-bottom: 10px; }
.outputs p { color: var(--ink-2); }
@media (max-width: 800px) {
  .outputs { grid-template-columns: 1fr; }
  .outputs li, .outputs li + li { padding: 22px 0; border-left: 0; }
  .outputs li + li { border-top: 1px solid var(--line); }
}
.modules { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.module { background: var(--bg); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.module__top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.module svg.sym { width: 40px; height: 40px; }
.module p { color: var(--ink-2); }
.module .actions { margin-top: auto; padding-top: 8px; }
@media (max-width: 700px) { .modules { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.facts > div { padding: 22px 0; border-top: 1px solid var(--line); }
.facts h3 { font-size: 1.0625rem; font-family: var(--font); font-weight: 700; margin-bottom: 6px; }
.facts p { color: var(--ink-2); }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); counter-reset: step; }
.steps li { padding: 28px 28px 8px 0; counter-increment: step; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps li::before { content: "0" counter(step); display: block; font-family: var(--font-display); font-size: 3.25rem; font-weight: 300; line-height: 1; letter-spacing: -0.05em; margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--ink-2); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(3) { padding-left: 0; border-left: 0; } .steps li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .steps li, .steps li + li { padding: 24px 0; border-left: 0; } .steps li + li { border-top: 1px solid var(--line); } .steps li::before { margin-bottom: 14px; font-size: 2.5rem; } }
.team { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); max-width: 1040px; }
.person__img { aspect-ratio: 4 / 5; border: 1px dashed var(--line-2); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink-3); background: var(--surface); }
.person__img svg { width: 36%; }
.person h3 { margin-top: 14px; font-size: 1.125rem; font-family: var(--font); }
.person p { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 700px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .team { grid-template-columns: 1fr; } }
.ind-detail { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.ind-detail:first-child { border-top: 1px solid var(--ink); }
.ind-detail .k { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); }
.ind-detail h2 { margin-top: 14px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; }
.ind-detail .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 28px; }
.ind-detail .cols h3 { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; font-weight: 500; color: var(--ink-3); margin-bottom: 8px; }
.ind-detail .svc__more { margin-top: 28px; }
@media (max-width: 860px) { .ind-detail { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ind-detail .cols { grid-template-columns: 1fr; gap: 20px; } }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 48px; }
.prose p, .prose ul { margin-top: 14px; color: var(--ink-2); }
.prose ul { padding-left: 1.2em; }

/* Drawing sheet with the interactive plan (used by the live demo) */
.sheet { margin: 0; border: 1.5px solid var(--ink); background: var(--bg); min-width: 0; }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sheet__title { font-size: 1rem; font-weight: 600; font-family: var(--font); letter-spacing: 0; }
.sheet__hint { font-size: 0.875rem; color: var(--ink-2); }
.sheet__plan { padding: clamp(8px, 2vw, 20px); }
.plan { width: 100%; height: auto; color: var(--ink); }
.plan text { font-family: var(--font); fill: var(--ink-2); font-size: 13px; }
.plan .walls { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: square; }
.plan .walls-in { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: square; }
.plan .window { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25; }
.plan .door { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.plan .site { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.plan .layer { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.35s var(--ease); }
.plan .layer .fill { fill: var(--ink); stroke: none; }
.plan .layer .bgfill { fill: var(--bg); }
.plan .layer .zone { fill: var(--ink); fill-opacity: 0.05; stroke-dasharray: 4 4; stroke-width: 1; }
.plan .layer .run { stroke-dasharray: 1 5; stroke-width: 1.4; }
.plan .layer .ring { stroke-dasharray: 3 5; stroke-width: 1; }
.plan .layer.is-off { opacity: var(--ghost); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }
.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg);
  font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip svg { width: 20px; height: 20px; flex: none; }
.chip[aria-pressed="false"] { background: transparent; color: var(--ink-2); border-color: var(--ink-3); }
.chip[aria-pressed="false"]:hover { color: var(--ink); border-color: var(--ink); }
.titleblock { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; border-top: 1.5px solid var(--ink); font-size: 0.8125rem; }
.titleblock > div { padding: 10px 14px; border-left: 1px solid var(--line); min-width: 0; }
.titleblock > div:first-child { border-left: 0; }
.titleblock dt { color: var(--ink-2); }
.titleblock dd { margin: 2px 0 0; font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > div:nth-child(3) { border-left: 0; }
  .titleblock > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sheet__hint { display: none; }
  .legend { padding: 12px; gap: 6px; }
  .chip { padding: 0 12px; font-size: 0.875rem; }
}

/* ===== Contact form ===== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 22px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field > label, .field legend { font-weight: 600; font-size: 0.9688rem; }
.field .opt { font-weight: 400; color: var(--ink-2); }
.field .help { font-size: 0.875rem; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--ink-3); border-radius: var(--radius); transition: border-color 0.15s var(--ease);
}
select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
::placeholder { color: var(--ink-3); opacity: 1; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 10px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (max-width: 480px) { .checks { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; }
.radios { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--ink); border-width: 2.5px; }
.error { display: none; font-size: 0.9063rem; font-weight: 600; gap: 8px; align-items: center; }
.error svg { width: 16px; height: 16px; flex: none; }
.field.has-error .error { display: flex; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 20px; }
.form-status h2 { font-size: 1.25rem; font-family: var(--font); margin-bottom: 8px; }
.form-status .actions { margin-top: 16px; }
.form-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form-foot p { font-size: 0.875rem; color: var(--ink-2); max-width: 44ch; }
.contacts { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.contacts li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 24px 1fr; gap: 14px; }
.contacts svg { width: 22px; height: 22px; margin-top: 2px; }
.contacts .k { display: block; font-size: 0.875rem; color: var(--ink-2); }
.contacts a { font-weight: 600; }
.h3 + .contacts { margin-top: 20px; }

/* ===== Footer ===== */
.footer { padding-top: clamp(64px, 8vw, 120px); }
.footer__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.footer__top .h2 { max-width: 14ch; }
.footer__top .actions { justify-content: flex-end; }
.footer__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 32px; padding-block: 48px; }
.footer__cols h2 { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; font-weight: 500; color: var(--ink-3); margin-bottom: 16px; }
.footer__cols ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer__cols a { text-decoration: none; color: var(--ink-2); font-size: 0.9375rem; }
.footer__cols a:hover { color: var(--ink); text-decoration: underline; }
.footer__cols address { font-style: normal; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.65; }
.footer__brand .brand svg { width: 36px; height: 36px; }
.footer__brand p { margin-top: 18px; color: var(--ink-2); font-size: 0.9375rem; max-width: 30ch; }
.footer__social { display: flex; gap: 8px; margin-top: 20px; }
.footer__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); }
.footer__social a:hover { border-color: var(--ink); }
.footer__social svg { width: 18px; height: 18px; }
.footer__base { border-top: 1px solid var(--line); padding-block: 20px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.8125rem; color: var(--ink-3); }
.footer__base ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__base a { text-decoration: none; }
.footer__base a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 1100px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; } .footer__top .actions { justify-content: flex-start; } }
@media (max-width: 600px) { .footer__cols { grid-template-columns: 1fr 1fr; } .footer__office { grid-column: 1 / -1; } }

/* 404 */
.nf { min-height: 56vh; display: grid; align-content: center; gap: 24px; }

/* Scroll reveal (below the fold only) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media print {
  .header, .footer, .legend, .skip, .stage__visual { display: none; }
  body { background: none; color: #1c1c1e; }
  .tone-dark { background: none; color: #1c1c1e; }
}
.steps, .outputs, .modules, .team { margin-top: clamp(32px, 4vw, 56px); }

/* Additions */
.nav__item--m { display: none; }
@media (max-width: 1099px) { .nav__item--m { display: block; } }
.nav__trigger.is-current { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.5em; }
.mega__feat img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.footer__contact { margin-top: 14px; }
.footer__contact .muted { font-size: 0.8125rem; color: var(--ink-3); margin-left: 4px; }
.next-h { margin-top: 48px; }
.steps--mini { grid-template-columns: 1fr; margin-top: 16px; border-top: 1px solid var(--ink); }
.steps--mini li, .steps--mini li + li { padding: 18px 0 18px 56px; border-left: 0; position: relative; }
.steps--mini li + li { border-top: 1px solid var(--line); }
.steps--mini li::before { position: absolute; left: 0; top: 18px; font-size: 1.75rem; margin: 0; }
.steps--mini h3 { margin-bottom: 4px; }
.steps--mini p { font-size: 0.9375rem; }

/* ===== v4: one coherent theme ===== */
/* Subtle tonal steps only: footer and menu feature cards sit on --surface, never on an inverted colour */
.footer { background: var(--surface); border-top: 1px solid var(--line); }
.mega__feat { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.mega__feat:hover { border-color: var(--line-2); }
/* Page head building drawing is a light-on-dark line file; invert it on light pages */
.pagehead__aside { filter: invert(var(--art-invert)); }
/* Project renders stand in for photos and keep their own colours */

/* Theme switch inside the phone menu: labelled, full width, large target */
.theme-row { display: none; }
@media (max-width: 1099px) {
  .theme-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    margin-top: 24px; min-height: 52px; padding: 0 16px 0 18px; border: 1px solid var(--line-2); border-radius: 999px;
    background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem; font-weight: 600; text-align: left;
  }
  .theme-row:hover { border-color: var(--ink); }
  .theme-row__state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-2); }
  .theme-row svg { width: 20px; height: 20px; }
}

/* Phone menu: backdrop-filter on the header makes it the containing block for the fixed menu panel,
   which squashed the panel to a sliver under the page. Drop the blur while the menu is open. */
body.menu-open .header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
@media (max-width: 1099px) {
  .nav { height: calc(100vh - var(--head)); height: calc(100dvh - var(--head)); }
}
/* Touch screens keep :hover after a tap; only show hover rings where a real pointer hovers */
@media (hover: none) {
  .iconbtn:hover { border-color: transparent; }
  .theme-row:hover { border-color: var(--line-2); }
}

/* ===== v6: one drawing language across the site =====
   Any element with data-sys carries its system colour in --c. Drawings use it for strokes; chrome never does. */
[data-sys="power"] { --c: var(--c-power); }
[data-sys="network"] { --c: var(--c-network); }
[data-sys="climate"] { --c: var(--c-climate); }
[data-sys="lighting"] { --c: var(--c-lighting); }
[data-sys="security"] { --c: var(--c-security); }
[data-sys="bms"] { --c: var(--c-bms); }

/* System key under a drawing: the same swatches as the home page layer legend */
.syskey { list-style: none; padding: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.syskey li { position: relative; padding: 10px 8px 0 0; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.syskey li::before { content: ""; position: absolute; left: 0; right: 8px; top: -1px; height: 2px; background: var(--c); }
.syskey li::after { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c); margin-left: 7px; vertical-align: 0.22em; }
@media (max-width: 640px) { .syskey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } }

/* Page head with a drawing beside the text (Design Desk) */
.pagehead--art .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 4vw, 64px); align-items: center; }
.pagehead--art .wrap > * { grid-column: 1; }
.pagehead--art .pagehead__art { grid-column: 2; grid-row: 1 / span 6; align-self: center; min-width: 0; }
.pagehead__art .bld { display: block; width: 100%; height: auto; }
.bld--desk .lbl { opacity: 1; }
.bld--desk .lbl text { font-size: 15px; }
.bld--desk .halo { fill-opacity: var(--b-halo-on); }
.bld--desk .pt, .bld--desk .lamp { fill: var(--b-ink); }
@media (max-width: 1099px) {
  .pagehead--art .wrap { grid-template-columns: minmax(0, 1fr); }
  .pagehead--art .pagehead__art { grid-column: 1; grid-row: auto; margin-top: clamp(32px, 6vw, 56px); max-width: 720px; }
}
@media (max-width: 640px) { .bld--desk .lbl { display: none; } .pagehead__art .bld { width: 128%; margin-left: -14%; } }

/* Product view: devices drawn in their system colour, group headings carry the swatch */
.app .plan .dev[data-sys] { stroke: var(--c); }
.app .plan .dev[data-sys] .fill { fill: var(--c); }
.app .plan .dev[data-sys] .zone { fill: var(--c); fill-opacity: 0.1; }
.app .plan .dev[data-sys] .ring { stroke-opacity: 0.85; }
.app__grp[data-sys]::before, .app__insp h4 span[data-sys]::before, .app__insp .app__h4 span[data-sys]::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c); margin-right: 7px; vertical-align: 0.22em; }
.app__item.is-on svg { color: var(--c-security); }

/* ===== v7: legal pages, company details, consent ===== */
/* Legal pages: plain reading layout */
.legal { padding-block: clamp(40px, 6vw, 80px) var(--section); }
.legal__body { max-width: 72ch; }
.legal__body > * + * { margin-top: 1em; }
.legal__body h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin-top: 2.2em; }
.legal__body h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.6em; }
.legal__body ul, .legal__body ol { padding-left: 1.4em; }
.legal__body li + li { margin-top: 0.4em; }
.legal__body a { text-decoration: underline; text-underline-offset: 2px; }
.legal__body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.legal__body th, .legal__body td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.legal__body thead th { font-size: 0.8125rem; color: var(--ink-2); }
.legal__toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.legal__toc ol { columns: 2; column-gap: 32px; }
@media (max-width: 640px) { .legal__toc ol { columns: 1; } }
.legal__note { border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; color: var(--ink-2); }
.legal__foot { margin-top: 3em; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-2); }
.legal__tablewrap { overflow-x: auto; }

/* Company details: footer and contact page */
.footer__legal { border-top: 1px solid var(--line); padding-block: 20px 4px; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2); max-width: 110ch; }
.footer__legal strong { color: var(--ink); font-weight: 600; }
.footer__base ul { row-gap: 10px; }
.footer__base a { display: inline-block; padding-block: 4px; }
.company { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.company dl { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); gap: 8px 16px; font-size: 0.9375rem; margin-top: 12px; }
.company dt { color: var(--ink-2); }
.company dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .company dl { grid-template-columns: 1fr; gap: 2px; } .company dd { margin-bottom: 10px; } }

/* Quote form: consent and error summary */
.consent { display: grid; gap: 8px; }
.consent .check { align-items: flex-start; }
.consent .check input { margin-top: 3px; }
.consent .check span { font-weight: 500; }
.consent .check a { text-decoration: underline; text-underline-offset: 2px; }
.form-errors { border: 2px solid var(--ink); border-radius: var(--radius); padding: 14px 18px; }
.form-errors[hidden] { display: none; }
.form-errors h2 { font-size: 1rem; font-weight: 700; }
.form-errors ul { margin-top: 8px; padding-left: 1.2em; }
.form-errors a { text-decoration: underline; }
.form-foot .purpose { font-size: 0.875rem; color: var(--ink-2); max-width: 46ch; }
.form-foot .purpose a { text-decoration: underline; }
.form > .help { font-size: 0.875rem; color: var(--ink-2); margin-bottom: -8px; }
.legal__body mark.tbc { background: transparent; color: var(--ink); font-weight: 700; border-bottom: 2px dashed var(--ink-3); }
.legal__body code { font-family: var(--mono); font-size: 0.875em; }
.cases--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .cases--4 li:first-child { grid-column: auto; } }
@media (max-width: 600px) { .cases--4 { grid-template-columns: 1fr; } }
/* Projects page: photo cards, text rows (projects without a photo, and our software), system tags */
.pcards { margin-top: clamp(20px, 2.5vw, 32px); }
.pchips { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pchips li { font-size: 0.8125rem; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 10px; }
.plist { list-style: none; padding: 0; margin: clamp(20px, 2.5vw, 32px) 0 0; border-top: 1px solid var(--ink); }
.plist > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px clamp(20px, 4vw, 64px); padding: 22px 0; border-bottom: 1px solid var(--line); }
.plist h3 { margin-top: 6px; font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 500; letter-spacing: -0.015em; }
.plist h3 a { color: inherit; }
.plist p { margin: 0; color: var(--ink-2); }
.plist .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; color: var(--ink-3); margin: 0; }
@media (max-width: 760px) { .plist > li { grid-template-columns: 1fr; } }
/* Home: numbers over the Dar es Salaam aerial photograph */
.numbers { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 140px) 0; background: #1c1c1e; color: #f5f5f7; }
.numbers__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; filter: blur(5px) grayscale(1); transform: scale(1.04); }
.numbers .wrap { position: relative; }
.numbers .h2 { margin-top: 16px; max-width: 18ch; }
.bignums { list-style: none; padding: 0; margin: clamp(32px, 4vw, 56px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.35); }
.bignums li { padding: 28px 24px 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.bignums b { display: block; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.bignums span { display: block; margin-top: 12px; max-width: 28ch; color: #d4d4d4; font-size: 0.9688rem; }
@media (max-width: 760px) { .bignums { grid-template-columns: 1fr 1fr; } }
/* About: director portrait */
.director { margin: 28px 0 0; max-width: 320px; }
.director img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.director figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--ink-2); }
.director figcaption b { display: block; color: var(--ink); }
.numbers .eyebrow { color: #c7c7c7; } .numbers .eyebrow::before { background: #c7c7c7; }

/* About: policies */
ol.pol { margin: 16px 0 0; padding-left: 20px; } ol.pol li { margin-bottom: 8px; color: var(--ink-2); }
/* Inspection 29 Oct: nothing wider than a small phone; every link at least 44 px to tap */
.module { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .module { padding: 20px; } }
.footer__social a { width: 44px; height: 44px; }
.footer__cols li a, .footer__base a { display: inline-flex; align-items: center; min-height: 44px; }