/* fonts: Geist and Geist Mono (SIL Open Font License), served from this site so no visitor data goes to Google */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Layout: Apple-style bento, shared by every page. Every section is a grid of rounded tiles of varied sizes on a calm
   off-white ground; each tile carries its own small live drawing. */
:root {
  --ground: #F2F4F8;
  --tile: #FFFFFF;
  --tile-2: #F7F9FC;
  --ink: #0C1729;
  --ink-2: #44526A;
  --ink-3: #647086;
  --line: #E2E7EF;
  --line-2: #D3DAE5;
  --blue: #0B5CAD;
  --blue-2: #2F80E2;
  --blue-soft: #E6EFFB;
  --navy: #0A1B33;
  --grad-end: #0A7FA0;
  --navy-2: #13294A;
  --green: #3AA50E;
  --on-dark: #EEF3FA;
  --mix-ink: #000;
  --on-dark-2: #A8B6CA;

  --solar: #DB8F0B;  --solar-t: #FFF3DC;
  --roads: #54647C;  --roads-t: #ECF0F5;
  --survey: #E06A28; --survey-2: #2B9A57; --survey-t: #FFF0E4;
  --arch: #7255D4;   --arch-t: #F1EDFF;
  --bess: #0C9898;   --bess-t: #E0F5F4;
  --mfg: #D4463A;    --mfg-t: #FDEBE9;
  --fire: #C62A47;   --fire-t: #FCEAEE;

  /* CAD drawings sit on a light model space: AutoCAD's index colours darkened to read on white,
     and colour 7 ("white") drawn near-black, as AutoCAD does on a light background */
  --cad-bg: #FBFCFE;
  --cad-chrome: #F1F4F9;
  --cad-chrome-2: #E4EAF2;
  --cad-line: #D5DDE8;
  --cad-text: #2A3445;
  --cad-dim: #6B778A;
  --aci-red: #D93A3A;
  --aci-orange: #DD7414;
  --aci-yellow: #B98900;
  --aci-green: #2E9B3E;
  --aci-cyan: #0A8FB2;
  --aci-blue: #2D6BDB;
  --aci-magenta: #A647D1;
  --aci-white: #182233;
  --aci-grey: #8A96A8;

  --shadow-1: 0 1px 1px rgba(12, 23, 41, .03), 0 2px 6px rgba(12, 23, 41, .04), 0 14px 34px -14px rgba(12, 23, 41, .13);
  --shadow-2: 0 1px 1px rgba(12, 23, 41, .04), 0 8px 18px rgba(12, 23, 41, .06), 0 28px 56px -18px rgba(12, 23, 41, .24);
  --r: 24px;
  --r-sm: 14px;
  --f: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1rem/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ground); }
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100%, 1296px); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.label { font: 500 .79rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px;
  background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font: 500 .8rem/1 var(--f); color: var(--ink-2);
}
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 600 .98rem/1 var(--f); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s, background-color .2s, box-shadow .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; }
/* primary buttons: the blue gradient of the R in the logo, with the green of its bulb on the arrow,
   or as a small dot on buttons without an arrow */
.btn-dark { background: linear-gradient(180deg, #0B66C2 0%, #0E4A9E 55%, #1A2F86 100%); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(26, 47, 134, .7), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-dark:hover { background: linear-gradient(180deg, #1272D4 0%, #1053AE 55%, #1E3596 100%); color: #fff; transform: translateY(-1px); }
.btn-dark svg { width: 24px; height: 24px; padding: 4px; margin-right: -10px; border-radius: 50%; background: #5FD823; color: #0A1B33; box-sizing: border-box; }
.btn-dark:not(:has(svg))::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5FD823; box-shadow: 0 0 0 3px rgba(95, 216, 35, .28); }
/* second buttons: white with a logo-blue outline, filling with a light blue on hover */
.btn-light { background: #fff; color: #0B5CAD; border: 1.5px solid #0B66C2; }
.btn-light:hover { background: #EEF4FC; color: #0A4F96; border-color: #0B5CAD; transform: translateY(-1px); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { color: var(--navy); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.btn-ghost-w { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-ghost-w:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---------- header: floating pill ---------- */
.head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 50; padding-top: 12px; }
.head-pill {
  display: flex; align-items: center; gap: 12px;
  max-width: 1120px; margin-inline: auto; padding: 8px 8px 8px 14px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid rgba(12, 23, 41, .07); border-radius: 999px; box-shadow: var(--shadow-1);
  position: relative;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 40px; height: auto; }
.brand span { font: 500 1rem/1 var(--f); letter-spacing: -.01em; white-space: nowrap; }
.brand b { font-weight: 750; }
/* the header's logo and name are 25% larger than the base brand block (the footer keeps its own sizes) */
.head .brand img { width: 50px; }
.head .brand span { font-size: 1.25rem; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 10px 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.nav a:hover { background: var(--tile-2); color: var(--ink); }
.head .btn { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.menu-btn { display: none; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--tile); cursor: pointer; place-items: center; color: var(--ink); }
.menu-btn svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .nav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--tile); border: 1px solid var(--line); border-radius: 20px; padding: 8px; box-shadow: var(--shadow-2);
    display: none;
  }
  .head.open .nav { display: flex; }
  .nav a { padding: 14px 16px; border-radius: 12px; font-size: 1.02rem; }
  .menu-btn { display: inline-grid; margin-left: auto; }
  .head .btn { display: none; }
  .head.open .nav .nav-cta { display: block; background: linear-gradient(180deg, #0B66C2 0%, #0E4A9E 55%, #1A2F86 100%); color: #fff; text-align: center; margin-top: 6px; font-weight: 600; }
}
.nav .nav-cta { display: none; }
@media (max-width: 380px) { .brand span { font-size: .92rem; } .brand img { width: 34px; } .head .brand span { font-size: 1.15rem; } .head .brand img { width: 42px; } }

/* ---------- section heads ---------- */
.section { padding-block: clamp(56px, 7vw, 104px) 0; }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 36px); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; } }
.sec-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); font-weight: 640; letter-spacing: -.04em; line-height: 1.02; }
.sec-head p { color: var(--ink-2); font-size: 1.08rem; max-width: 52ch; }
.sec-head .label { grid-column: 1 / -1; }
/* section labels follow the SectionHeader control of the WarmEarth theme (PVAstra colouring): a small accent tick shading
   from light to dark, the title in bold capitals, and a rule that fades out across the section */
:root { --sec-bar: #2563EB; }
:root[data-theme="dark"] { --sec-bar: #3B82F6; }
.sec-head .label { display: flex; align-items: center; font: 700 .8rem/1 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sec-head .label > i { display: none; }
.sec-head .label::before { content: ""; flex: none; width: 3px; height: 14px; border-radius: 2px; margin-right: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--sec-bar)) 82%, #fff), color-mix(in srgb, var(--c, var(--sec-bar)) 90%, #000)); }
.sec-head .label::after { content: ""; flex: 1; height: 1px; margin-left: 10px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* ---------- bento grid ---------- */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; }
.tile {
  grid-column: span var(--s, 12); grid-row: span var(--rs, 1);
  position: relative; overflow: hidden; min-width: 0;
  background: var(--tile); border-radius: var(--r); border: 1px solid rgba(12, 23, 41, .06);
  box-shadow: var(--shadow-1); padding: clamp(20px, 2.2vw, 28px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tile h3 { font-size: 1.28rem; font-weight: 620; letter-spacing: -.025em; line-height: 1.2; }
.tile p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.tile .label { display: inline-flex; align-items: center; gap: 8px; }
.tile .label i { width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--blue)); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; list-style: none; padding-left: 0; margin-bottom: 0; }
.tags li { font: 500 .78rem/1 var(--f-mono); color: var(--ink-2); background: var(--tile-2); border: 1px solid var(--line); padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.art { margin-top: auto; border-radius: var(--r-sm); position: relative; }
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile { grid-column: span var(--m, 6); grid-row: span var(--rm, 1); }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tile { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(36px, 5vw, 72px) 0; }
.hero-top { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: clamp(28px, 3.4vw, 44px); }
@media (min-width: 980px) { .hero-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; } }
.hero h1 { font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem); font-weight: 660; letter-spacing: -.05em; line-height: .96; margin-top: 18px; }
.hero h1 em, .sec-head h2 em { font-style: normal; background: linear-gradient(100deg, var(--blue) 10%, var(--blue-2) 55%, var(--grad-end) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-side { display: grid; gap: 22px; }
.hero-side p { font-size: 1.1rem; color: var(--ink-2); line-height: 1.6; }
/* homepage: the words on the left and the live CAD window on the right, both in the first screen */
.hero-split h1 { font-size: clamp(2.4rem, 1.2rem + 3.3vw, 4.3rem); }
.hero-split .cad { grid-column: auto; grid-row: auto; }
@media (min-width: 681px) { .hero-split .cad { min-height: 520px; } }
@media (min-width: 980px) {
  .hero-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 40px; }
  .hero-split .cad { grid-column: 2; grid-row: 1 / span 2; min-height: 580px; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* CAD tile */
/* the home CAD window (cad-hero.js reads its palette from the --cad and --aci tokens) */
.cad { padding: 0; gap: 0; background: var(--cad-bg); border-color: var(--line); color: var(--cad-text); font-family: var(--f-mono); }
.cad:hover { transform: none; }
.cad-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 16px; background: var(--cad-chrome); border-bottom: 1px solid var(--cad-line); flex: none; }
.cad-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(140deg, #2F80E2, #0B5CAD); color: #fff; font: 700 .62rem/1 var(--f-mono); flex: none; }
.cad-file { font-size: .74rem; color: var(--cad-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cad-tabs { margin-left: auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: none; max-width: 100%; }
.cad-tabs::-webkit-scrollbar { display: none; }
.cad-tab { appearance: none; border: 0; background: transparent; color: var(--cad-dim); font: 500 .72rem/1 var(--f-mono); padding: 9px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.cad-tab:hover { color: var(--cad-text); }
.cad-tab[aria-selected="true"] { background: var(--cad-chrome-2); color: var(--aci-white); }
.cad-tab:focus-visible { outline: 2px solid var(--aci-cyan); outline-offset: -2px; }
.cad-stage { position: relative; flex: 1 1 auto; min-height: 360px; }
.cad-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (hover: hover) { .cad-stage { cursor: none; } }
.cad-cmd { flex: none; border-top: 1px solid var(--cad-line); background: var(--cad-chrome); padding: 8px 16px 9px; font-size: .7rem; line-height: 1.6; }
.cad-hist { color: var(--cad-dim); min-height: calc(1.6em * 3); }
.cad-hist div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad-hist .ok { color: var(--aci-green); }
.cad-in { display: flex; gap: .6em; white-space: nowrap; overflow: hidden; color: var(--aci-white); }
.cad-in .p { color: var(--cad-dim); flex: none; }
.cad-in .t { overflow: hidden; text-overflow: ellipsis; }
.caret { display: inline-block; width: .55em; height: 1.1em; background: var(--aci-white); vertical-align: -2px; animation: blink 1s steps(1) infinite; flex: none; }
@keyframes blink { 50% { opacity: 0; } }
.cad-status { flex: none; display: flex; gap: 14px; padding: 7px 16px; background: var(--cad-chrome-2); font-size: .64rem; color: var(--cad-dim); white-space: nowrap; overflow: hidden; }
.cad-status .coords { color: var(--cad-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cad-status .on { color: var(--aci-cyan); }
.cad-status .layer { margin-left: auto; }
.cad-status .layer i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--layer-c, var(--aci-cyan)); }
@media (max-width: 680px) {
  .cad-file { display: none; }
  .cad-tabs { margin-left: 0; }
  .cad-bar { padding: 0 6px; }
  .cad-badge { display: none; }
  .cad-tab { font-size: .66rem; padding: 9px 7px; }
  .cad-stage { flex: none; min-height: 0; aspect-ratio: 4 / 3.3; }
  .cad-status .opt { display: none; }
}

/* stats tile */
/* a comet with a fading tail circles each card's orbit at a calm pace (14 to 22 s a turn);
   the orbit redraws when the tile comes into view and on hover (bento.js adds .pre and .go) */
@keyframes dr-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* quote tile */
.q-tile { background: linear-gradient(160deg, #F2F7FF, #fff 60%); }
.stars { color: #F2A516; letter-spacing: 2px; font-size: .95rem; }
.q-tile blockquote { margin: 0; font: 560 1.45rem/1.25 var(--f); letter-spacing: -.025em; color: var(--ink); }
.q-tile blockquote::before { content: "\201C"; color: var(--blue-2); }
.q-tile blockquote::after { content: "\201D"; color: var(--blue-2); }
.who { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: .9rem; }
.who b { display: block; font-weight: 600; color: var(--ink); }
.who span { color: var(--ink-3); font-size: .84rem; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font: 650 .78rem/1 var(--f); flex: none; }
/* testimonials show the client's country as a round flag */
.av.flag { overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(12, 23, 41, .12); }
.av.flag img { width: 100%; height: 100%; display: block; }

/* platforms tile */

/* map tile */
.map { width: 100%; aspect-ratio: 2.65; margin-top: auto; }

/* PVAstra mini tile */
.pva-mini {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(47, 128, 226, .55), transparent 60%),
    linear-gradient(160deg, #0D2547, #081426);
  color: var(--on-dark); text-decoration: none;
}
.pva-mini::after {
  content: ""; position: absolute; left: -40%; right: -40%; bottom: -12%; height: 72%; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='13'%3E%3Crect x='1' y='2' width='27' height='8' rx='1' fill='%234FD3EE' fill-opacity='.14' stroke='%234FD3EE' stroke-opacity='.7'/%3E%3C/svg%3E");
  transform: perspective(260px) rotateX(52deg); transform-origin: 50% 100%; opacity: .8;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}
.pva-mini h3, .pva-mini p { color: var(--on-dark); position: relative; z-index: 1; }
.pva-mini p { color: var(--on-dark-2); }
.pva-mini .pva-row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.pva-mini img { width: 34px; height: 34px; }
.soon { display: inline-flex; align-items: center; gap: 6px; font: 600 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #FFD84D; border: 1px solid rgba(255, 216, 77, .45); padding: 5px 8px; border-radius: 999px; }
.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.arrow-go { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: #fff; }

/* ---------- tinted industry tiles ---------- */
.tint { background: linear-gradient(165deg, var(--t) 0%, var(--tile) 72%); }
.tint .label { color: color-mix(in srgb, var(--c) 80%, var(--ink)); }

/* illustrations */
.ill { width: 100%; height: auto; margin-top: auto; overflow: visible; }
.ill text { font: 500 9px var(--f-mono); fill: var(--ink-3); }
.dark-art { background: var(--cad-bg); border-radius: 16px; padding: 10px; }

/* animation primitives: each loop starts mid-cycle (negative delay) so the first frame is complete */
.pop { transform-box: fill-box; transform-origin: center; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* tiles replay their build-up (JS adds .go) each time they come into view and every few seconds after */
.go .pop { animation: pop-in .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * var(--step, 40ms)); }
.go .draw { animation: draw-in 1.1s ease-in-out both; animation-delay: var(--d, 0s); }
.go .fade { animation: fade-in .6s ease both; animation-delay: var(--d, 0s); }
.go .type { animation: type-in .8s steps(var(--n)) both; animation-delay: calc(var(--i) * .45s); }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes draw-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes type-in { from { width: 0; } to { width: calc(var(--n) * 1ch); } }
.flow { stroke-dasharray: 5 7; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -12; } }
.paused .mail, .paused .pop, .paused .draw, .paused .fade, .paused .flow, .paused .spin, .paused .type, .paused .slide, .paused .scan, .paused .bob { animation-play-state: paused; }

/* service tiles */
.ui-mock { width: 100%; height: auto; }
/* AutoLISP cards: a dark card around a light code editor */
.lisp { background: linear-gradient(160deg, #0F1F38, #0A1526); color: var(--on-dark); border-color: #0A1526; }
.lisp h3 { color: var(--on-dark); }
.lisp p { color: var(--on-dark-2); }
.lisp .label { color: var(--on-dark-2); }
.lisp .tags li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--on-dark-2); }
.lisp :is(.code, .code-pre) { border-color: transparent; }
.code { font: 400 .74rem/1.75 var(--f-mono); color: var(--cad-text); background: #F6F8FB; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; overflow-x: auto; display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.code-lines { min-width: 0; overflow: hidden; }
.code .ln { display: block; white-space: pre; overflow: hidden; width: calc(var(--n) * 1ch); }
.code .c { color: #5F6B7E; } .code .k { color: #2D6BDB; } .code .s { color: #8F5D00; } .code .f { color: #0B7896; } .code .n { color: #9535C0; }
.slide { animation: slide 4.8s cubic-bezier(.5, 0, .3, 1) infinite; animation-delay: calc(var(--i, 0) * -1.6s); }
@keyframes slide { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(var(--dx, 84px)); opacity: 1; } 52%, 100% { transform: translateX(var(--dx, 84px)); opacity: 0; } }
.boq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: center; margin-top: auto; }
.boq table { width: 100%; border-collapse: collapse; font: 500 .74rem/1.2 var(--f-mono); }
.boq th { text-align: left; color: var(--ink-3); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--line-2); }
.boq td { padding: 7px 4px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.boq td:last-child, .boq th:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.boq tbody tr { animation: scan 6s steps(1) infinite; animation-delay: calc(var(--i) * 1.5s - 3s); }
@keyframes scan { 0% { background: var(--blue-soft); } 25%, 100% { background: transparent; } }

/* product band */
.pva-big { background: radial-gradient(90% 120% at 0% 0%, #17396A 0%, transparent 60%), linear-gradient(160deg, #0B1E3A, #071222); color: var(--on-dark); border-color: #071222; gap: 18px; }
.pva-big h3 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 640; letter-spacing: -.04em; line-height: 1.06; }
.pva-big p { color: var(--on-dark-2); font-size: 1.04rem; }
.pva-big .label { color: var(--on-dark-2); }
.pva-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pva-brand img { width: 46px; height: 46px; }
.pva-brand strong { font: 700 1.5rem/1 var(--f); letter-spacing: -.03em; color: #fff; }
.pva-brand small { display: block; font: 500 .78rem/1.2 var(--f); color: var(--on-dark-2); margin-top: 3px; }
.shot { padding: 10px; background: #fff; }
.shot img { width: 100%; height: auto; border-radius: 16px; }
/* WebP pictures with a JPG fallback: the <picture> wrapper adds no box of its own */
:is(.hl-pic, .shot) picture { display: contents; }
.shot figcaption { font: 500 .78rem/1.4 var(--f-mono); color: var(--ink-3); padding: 4px 6px 2px; }
.shot figure { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; }
.fig-num b { font: 680 clamp(2.4rem, 1.8rem + 1.6vw, 3.2rem)/1 var(--f); letter-spacing: -.05em; color: var(--ink); }
.fig-num b small { font-size: .38em; font-weight: 600; letter-spacing: 0; color: var(--ink-3); margin-right: 4px; vertical-align: .9em; }
.fig-num .bar { height: 6px; border-radius: 6px; background: var(--tile-2); border: 1px solid var(--line); overflow: hidden; margin-top: auto; }
.fig-num .bar span { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--blue), var(--blue-2)); border-radius: 6px; }

/* work tiles */
.work .screen { background: var(--cad-bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: relative; }
.work .screen svg { width: 100%; height: auto; }
.work-split { display: grid; gap: 22px 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .work-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.work-split > div { display: grid; gap: 12px; min-width: 0; }
.pva-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pva-list li { position: relative; padding-left: 26px; color: var(--on-dark); font-size: .95rem; }
.pva-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%; background: rgba(79, 211, 238, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%234FD3EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.cta-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; position: relative; }
@media (min-width: 980px) { .cta-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cta-grid > div:first-child { display: grid; gap: 22px; }
.mail {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); border-radius: 22px; padding: 20px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  display: grid; gap: 10px; font-size: .9rem; color: #fff; animation: float 6s ease-in-out infinite; max-width: 440px; justify-self: center; width: 100%;
}
@keyframes float { 50% { transform: translateY(-8px); } }
.mail-row { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .16); min-width: 0; }
.mail-row span { color: rgba(255, 255, 255, .62); width: 58px; flex: none; }
.mail-row b { font-weight: 550; white-space: normal; text-wrap: balance; }
.mail-body { color: rgba(255, 255, 255, .86); line-height: 1.55; }
.mail-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.mail-att { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(255, 255, 255, .12); font: 500 .8rem/1 var(--f-mono); }
.mail-att i { font-style: normal; display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; background: #fff; color: var(--blue); font: 700 .62rem/1 var(--f-mono); }
.mail-send { padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 600; font-size: .86rem; }
.fig-svg { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.fig-svg .r { stroke: var(--aci-red); } .fig-svg .o { stroke: var(--aci-orange); } .fig-svg .y { stroke: var(--aci-yellow); }
.fig-svg .g { stroke: var(--aci-green); } .fig-svg .c { stroke: var(--aci-cyan); } .fig-svg .m { stroke: var(--aci-magenta); }
.fig-svg .w { stroke: var(--aci-white); } .fig-svg .k { stroke: var(--aci-grey); }
.fig-svg .dash { stroke-dasharray: 4 3; } .fig-svg .cl { stroke-dasharray: 10 3 2 3; }
.fig-svg .fc { fill: var(--aci-cyan); fill-opacity: .22; } .fig-svg .fm { fill: var(--aci-magenta); fill-opacity: .55; } .fig-svg .fw { fill: var(--aci-white); fill-opacity: .07; }
.fig-svg text { fill: var(--cad-dim); stroke: none; font: 500 8px var(--f-mono); }
.fig-svg text.tw { fill: var(--aci-white); } .fig-svg text.tc { fill: var(--aci-cyan); } .fig-svg text.tr { fill: var(--aci-red); }

/* process */
.step-n { font: 650 3.4rem/1 var(--f); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.2px var(--line-2); position: absolute; right: 20px; top: 16px; }
.step-art { height: 92px; display: flex; align-items: center; }
.step-art svg { height: 92px; width: auto; }
.bob { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(14px, -6px); } }

/* about + quotes */
.founder { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: start; }
.mono { width: 88px; height: 88px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(140deg, #2F80E2, #0B5CAD 55%, #1C2A7A); color: #fff; font: 700 1.8rem/1 var(--f); letter-spacing: -.03em; box-shadow: 0 12px 24px -12px rgba(11, 92, 173, .6); }
.quote blockquote { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.6; }
.quote-lead blockquote { font: 600 clamp(1.4rem, 1rem + 1.4vw, 2rem)/1.22 var(--f); letter-spacing: -.03em; }
.quote-lead { background: linear-gradient(160deg, #EEF5FF, #fff 70%); }
.quote-lead blockquote::before { content: "\201C"; color: var(--blue-2); }
.quote-lead blockquote::after { content: "\201D"; color: var(--blue-2); }

/* CTA */
.cta { padding-block: clamp(56px, 7vw, 104px); }
.cta-tile {
  color: #fff; border: 0; padding: clamp(28px, 5vw, 64px); gap: 24px;
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(24, 164, 201, .75), transparent 60%),
    radial-gradient(70% 90% at 10% 100%, rgba(58, 165, 14, .35), transparent 60%),
    radial-gradient(80% 100% at 50% 50%, #1C5FC0, transparent 80%),
    linear-gradient(140deg, #0B3F86, #0A1B33);
  box-shadow: 0 40px 80px -40px rgba(11, 63, 134, .7);
}
.cta-tile:hover { transform: none; }
.cta-tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 80% 20%, #000, transparent 70%);
}
.cta-tile h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.02; max-width: 18ch; position: relative; }
.cta-tile p { color: rgba(255, 255, 255, .82); font-size: 1.1rem; max-width: 52ch; position: relative; }
.cta-tile .btn-row { position: relative; }
.btn-row { align-items: center; }
.btn-row .more { align-self: center; }
/* the card opens with a CAD command line that types itself when the card comes into view (bento.js adds .pre and .go) */
.cta-cmd { display: flex; align-items: center; gap: .6em; justify-self: start; position: relative; padding: 10px 14px; border-radius: 10px;
  font: 500 .9rem/1 var(--f-mono); color: rgba(255, 255, 255, .7); background: rgba(4, 12, 28, .35); border: 1px solid rgba(255, 255, 255, .14); }
.cta-cmd .t { color: #fff; overflow: hidden; white-space: nowrap; width: 16ch; }
.cta-cmd .caret { display: inline-block; width: .55em; height: 1.05em; background: #5FD823; animation: blink 1s steps(1) infinite; }
.cta-cmd.pre:not(.go) .t { width: 0; }
.cta-cmd.go .t { animation: cta-type 1.8s steps(16) .2s both; }
@keyframes cta-type { from { width: 0; } }
/* the details under the buttons read like a CAD status bar */
.cta-meta { display: flex; flex-wrap: wrap; gap: 8px; font: 500 .76rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .78); position: relative; }
.cta-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; background: rgba(4, 12, 28, .35); border: 1px solid rgba(255, 255, 255, .12); }
.cta-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5FD823; box-shadow: 0 0 0 3px rgba(95, 216, 35, .25); }

/* footer (replaced below) */

/* scroll reveal, progressive enhancement only (never hides content) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal .tile { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes rise { from { translate: 0 34px; scale: .975; } to { translate: 0 0; scale: 1; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ================= site additions: shared by the inner pages ================= */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); color: #fff; }
.nav a[aria-current="page"] { background: var(--tile-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.label i { background: var(--c, var(--blue)); }

.sec-side { display: grid; gap: 16px; justify-items: start; }
/* section links ("All services →"): a white pill with the arrow in a small logo-gradient circle,
   a quieter partner to the green arrow circle on the main buttons */
.more {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; border-radius: 999px; align-self: flex-start; justify-self: start;
  background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s;
}
.more:hover { border-color: var(--blue-2); color: var(--ink); transform: translateY(-1px); }
.more span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: .85rem;
  background: linear-gradient(180deg, #0B66C2 0%, #0E4A9E 55%, #1A2F86 100%); transition: translate .2s; }
.more:hover span { translate: 2px 0; }

/* inner-page hero */
.hero.page h1 { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.3rem); }
.crumbs { display: flex; gap: 8px; font: 500 .8rem/1 var(--f-mono); color: var(--ink-2); margin-top: 18px; }
.crumbs a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); padding: 6px 0; margin: -6px 0; }
.crumbs a:hover { color: var(--blue); }

/* icon badge used in small tiles */
.ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--c, var(--blue)) 12%, var(--tile)); color: var(--c, var(--blue));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--blue)) 22%, transparent); }
.ico svg { width: 24px; height: 24px; }
.ico.txt { font: 700 .82rem/1 var(--f-mono); background: var(--c); background: color-mix(in srgb, var(--c) 84%, #000); color: #fff; box-shadow: 0 8px 18px -10px var(--c); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* check list */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 27px; color: var(--ink-2); font-size: .97rem; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--blue)) 13%, var(--tile)); }
.ticks li::after { content: ""; position: absolute; left: 5.5px; top: calc(.18em + 5px); width: 7px; height: 4px; border-left: 1.8px solid var(--c, var(--blue)); border-bottom: 1.8px solid var(--c, var(--blue)); transform: rotate(-45deg); }
.sub { font: 500 .79rem/1.45 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }

/* industries page */
.ind-split { display: grid; gap: 22px 40px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .ind-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.ind-split > div { display: grid; gap: 14px; min-width: 0; }
.ind-split h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 640; letter-spacing: -.035em; line-height: 1.08; }
.ind-split .art, .ind-split .ill { margin-top: 0; }
.ind-cols { display: grid; gap: 18px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .ind-cols { grid-template-columns: minmax(0, 1fr); } }
.ind-cols .tags { margin-top: 8px; }

/* code sample */
.code-pre { margin: 0; font: 400 .78rem/1.75 var(--f-mono); color: var(--cad-text); background: #F6F8FB; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; overflow-x: auto; tab-size: 2; }
.code-pre .c { color: #5F6B7E; } .code-pre .k { color: #2D6BDB; } .code-pre .s { color: #8F5D00; } .code-pre .f { color: #0B7896; } .code-pre .n { color: #9535C0; }
.code-file { display: flex; justify-content: space-between; gap: 10px; font: 500 .74rem/1 var(--f-mono); color: var(--on-dark-2); }
ol.howto { list-style: none; counter-reset: h; margin: 0; padding: 0; display: grid; gap: 12px; }
ol.howto li { counter-increment: h; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; color: var(--ink-2); align-items: start; }
ol.howto li::before { content: counter(h); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 600 .76rem/1 var(--f-mono); }
kbd { white-space: nowrap; font: 600 .82em/1 var(--f-mono); padding: 3px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--tile-2); color: var(--ink); }
code.inl { font: 500 .88em var(--f-mono); color: var(--ink); }

/* work page */
.fig-svg .b { stroke: var(--aci-blue); }
.fig-svg .fy { fill: var(--aci-yellow); fill-opacity: .25; }
.fig-svg .fr { fill: var(--aci-red); fill-opacity: .18; }
.fig-svg text.ty { fill: var(--aci-yellow); }

/* about page */
.timeline { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.timeline li { position: relative; padding: 0 0 22px 30px; display: grid; gap: 3px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c, var(--blue)); }
.timeline b { font-weight: 620; letter-spacing: -.015em; color: var(--ink); }
.timeline span { color: var(--ink-2); font-size: .95rem; }
.countries { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.countries li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--tile-2); border: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.countries li b { display: grid; place-items: center; width: 28px; height: 22px; border-radius: 7px; background: var(--navy); color: #fff; font: 600 .62rem/1 var(--f-mono); }

/* contact page */
.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field label small { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--f); color: var(--ink);
  background: var(--tile-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; min-height: 48px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--blue-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-2) 18%, transparent); }
.field [aria-invalid="true"] { border-color: var(--mfg); }
.field-err { color: #B8332A; font-size: .86rem; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-foot p { color: var(--ink-3); font-size: .88rem; flex: 1 1 220px; }
.btn[disabled] { opacity: .6; cursor: wait; }
.form-status { padding: 14px 16px; border-radius: 14px; background: #E7F5DF; color: var(--ink); font-size: .95rem; }
.form-status[data-kind="error"] { background: var(--mfg-t); }
.form-status code { font-family: var(--f-mono); font-size: .9em; }
.direct-v { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 620; font-size: 1.15rem; letter-spacing: -.02em; }
.direct-v a { color: var(--ink); text-decoration: none; }
.direct-v a:hover { color: var(--blue); text-decoration: underline; }
.copy-btn { font: 500 .78rem/1 var(--f-mono); color: var(--ink-2); background: var(--tile-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; cursor: pointer; }
.copy-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 48px 18px 0; position: relative; font: 600 1.06rem/1.35 var(--f); letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; background: var(--tile-2); border: 1px solid var(--line); color: var(--blue); font: 500 1.1rem/1 var(--f-mono); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; }

/* footer: a line drawing of all six industries. It follows the site theme: the light theme shows it at golden hour
   (labelled, toned 30% softer), the dark theme at night (stars, lit windows, car lights). */

.ft-top { display: grid; gap: 36px 56px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding-block: clamp(36px, 4vw, 56px) 0; }
@media (max-width: 900px) { .ft-top { grid-template-columns: minmax(0, 1fr); } }
.ft-lead { display: grid; gap: 18px; align-content: start; justify-items: start; }
.ft-lead p { max-width: 40ch; font-size: 1.02rem; }
.ft-lead .brand img { width: 50px; }
.ft-contact { display: grid; gap: 6px; }
.ft-contact a { text-decoration: none; font: 600 1.1rem/1.35 var(--f); letter-spacing: -.02em; }
.ft-contact small { font: 500 .8rem/1.4 var(--f-mono); }
.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ft-col h2 { font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ft-col a { text-decoration: none; font-size: .97rem; }
.ft-col a:hover { text-decoration: underline; }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-block: 12px 18px; font-size: .82rem; }

.scene { position: relative; width: 100%; aspect-ratio: 1440 / 300; max-width: 100%; }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.scene-svg * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scene-svg .hill { fill: var(--s-hill); stroke: none; }
.scene-svg .ct { stroke: var(--s-contour); stroke-width: 1.2; opacity: .85; }
.scene-svg .ct0 { stroke: var(--s-ground); stroke-width: 1.6; opacity: 1; }
.scene-svg .pv { stroke: var(--s-pv); fill: var(--s-pv-fill); stroke-width: 1.1; }
.scene-svg .st path, .scene-svg .st rect { stroke: var(--s-struct); stroke-width: 1.4; }
.scene-svg .st rect { fill: var(--s-struct-fill); }
.scene-svg .beam { stroke: var(--s-point); stroke-width: 1.1; stroke-dasharray: 3 4; animation: beam 2.4s ease-in-out infinite; }
.scene-svg .sp { stroke: var(--s-point); stroke-width: 1.5; }
.scene-svg .bess rect { stroke: var(--s-bess); fill: var(--s-bess-fill); stroke-width: 1.1; }
.scene-svg .bess path { stroke: var(--s-bess); stroke-width: .8; }
.scene-svg .tw path { stroke: var(--s-struct); stroke-width: 1.4; }
.scene-svg .tw .wire { stroke-width: .9; opacity: .6; }
.scene-svg .rd { stroke: var(--s-road); stroke-width: 1.9; }
.scene-svg .rd-c { stroke: var(--s-road); stroke-width: 1.2; stroke-dasharray: 14 9; }
.scene-svg .car rect { fill: var(--s-car); stroke: none; }
.scene-svg .bd path { stroke: var(--s-struct); stroke-width: 1.4; fill: var(--s-struct-fill); }
.scene-svg .bd .win { stroke: var(--s-struct); stroke-width: 1.1; fill: var(--s-win); }
.scene-svg .smoke circle { stroke: var(--s-contour); stroke-width: 1.1; animation: smoke 3.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.scene-svg .smoke circle:nth-child(2) { animation-delay: 1.2s; } .scene-svg .smoke circle:nth-child(3) { animation-delay: 2.4s; }
.scene-svg .dim path { stroke: var(--s-dim); stroke-width: 1.2; }
.scene-svg text { fill: var(--s-dim); stroke: none; font: 500 11px var(--f-mono); }
.scene-svg .lbl { fill: var(--s-label); font-size: 10px; }
.scene-svg .sun circle, .scene-svg .sun path { stroke: var(--s-sun); stroke-width: 1.5; }
.scene-svg .sun circle { fill: var(--s-sun-fill); }
.scene-svg .rays { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.scene-svg .moon circle { fill: #F6E7B0; stroke: none; } .scene-svg .moon .moon-cut { fill: var(--s-sky-top); }
.scene-svg .star { fill: #DCE8FF; stroke: none; animation: twinkle 3s ease-in-out infinite; animation-delay: var(--d); }
.scene-svg .lead { stroke: var(--s-lead); stroke-width: 1; stroke-dasharray: 2 3; }
.scene-svg .lead-dot { fill: var(--s-lead); stroke: none; }
.pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px 5px 7px; border-radius: 999px; background: var(--s-pin-bg); border: 1px solid var(--s-pin-line); box-shadow: 0 6px 16px -10px rgba(10, 27, 51, .5);
  font: 500 .74rem/1 var(--f); color: var(--s-pin-ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ft-band { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 1; background: linear-gradient(180deg, transparent, var(--band-c) 62%); pointer-events: none; }
.pin i { width: 7px; height: 7px; border-radius: 50%; background: var(--s-lead); }
.pin:hover { transform: translate(-50%, -50%) translateY(-2px); box-shadow: 0 10px 22px -10px rgba(10, 27, 51, .6); }
@media (max-width: 960px) { .pin { display: none; } .scene-svg .lead, .scene-svg .lead-dot { display: none; } }
@keyframes beam { 50% { opacity: .25; } }
@keyframes smoke { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px) scale(1.3); } }
@keyframes twinkle { 50% { opacity: .25; } }
/* line drawing replays when the footer scrolls into view; drawn at rest without JS */
.is-drawing .ct, .is-drawing .rd, .is-drawing .tw path, .is-drawing .bd path, .is-drawing .st path { stroke-dasharray: 1700; animation: sdraw 3s ease-out both; animation-delay: var(--d, 0s); }
.is-drawing .pv, .is-drawing .bess { animation: spop .5s ease-out both; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes sdraw { from { stroke-dashoffset: 1700; } to { stroke-dashoffset: 0; } }
@keyframes spop { from { opacity: 0; transform: scale(.4); } }
@media (prefers-reduced-motion: reduce) { .scene-svg *, .is-drawing * { animation: none !important; } }

.foot-scene { position: relative; overflow: hidden; color: var(--ink); border-top: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--ground) 0%, #F8EEE5 52%, #F4D9CB 100%);
  --s-hill: rgba(219, 120, 60, .056); --s-contour: #D0A47D; --s-ground: #B67C5D; --s-pv: #2F5FA8; --s-pv-fill: rgba(47, 95, 168, .18);
  --s-struct: #0A1B33; --s-struct-fill: rgba(255, 255, 255, .7); --s-win: rgba(11, 92, 173, .12); --s-point: #D4463A; --s-bess: #0C9898; --s-bess-fill: rgba(12, 152, 152, .16);
  --s-road: #3E4D63; --s-car: #D4463A; --s-dim: #2C860B; --s-label: #B67C5D; --s-sun: #C3793B; --s-sun-fill: rgba(224, 118, 30, .126);
  --s-lead: #B67C5D; --s-pin-bg: #fff; --s-pin-line: rgba(12, 23, 41, .1); --s-pin-ink: #0C1729; --s-sky-top: #F2F4F8; --band-c: #F4D9CB; }
.foot-scene[data-mode="night"] { color: var(--on-dark); border-top-color: transparent;
  background: linear-gradient(180deg, #0A1830 0%, #0C2142 55%, #10305C 100%);
  --s-hill: rgba(79, 211, 238, .06); --s-contour: rgba(120, 170, 235, .55); --s-ground: #6FB4F5; --s-pv: #4FD3EE; --s-pv-fill: rgba(79, 211, 238, .18);
  --s-struct: #BFD3EE; --s-struct-fill: rgba(12, 30, 56, .9); --s-win: #FFD84D; --s-point: #FF7A7A; --s-bess: #5EDBC8; --s-bess-fill: rgba(94, 219, 200, .14);
  --s-road: #8FA5C4; --s-car: #FFD84D; --s-dim: #5EDB6E; --s-label: #6FB4F5; --s-sun: #FFD84D; --s-sun-fill: transparent;
  --s-lead: #4FD3EE; --s-pin-bg: rgba(12, 30, 56, .9); --s-pin-line: rgba(255, 255, 255, .16); --s-pin-ink: #EEF3FA; --s-sky-top: #0A1830; --band-c: #10305C; }
.foot-scene[data-mode="night"]::before { content: ""; position: absolute; left: 50%; top: -30%; width: 70%; height: 80%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(47, 128, 226, .28), transparent); pointer-events: none; }
.foot-scene .ft-top { position: relative; }
/* the footer's lead block (logo, words, contact, buttons) sits on one frosted glass panel tinted with the logo blue;
   the logo sits on the glass (chosen 3 Nov 2026). By day the glass is light blue, at night a blue sheen with a soft glow */
.foot-scene .ft-lead {
  padding: clamp(20px, 2.4vw, 28px); border-radius: 24px; gap: 16px; border: 1px solid rgba(255, 255, 255, .85);
  background: linear-gradient(135deg, rgba(226, 238, 252, .82), rgba(196, 220, 248, .42));
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 22px 44px -26px rgba(12, 23, 41, .4);
}
.foot-scene .brand { color: #0C1729; }
.foot-scene .brand img { width: 50px; }
.foot-scene .brand span { font-size: 1.25rem; }  /* 25% larger, level with the mark */
.foot-scene .ft-lead p { color: var(--ink-2); }
.foot-scene .ft-contact a { color: var(--ink); }
.foot-scene .ft-contact a:hover { color: var(--blue); }
.foot-scene .ft-contact small { color: var(--ink-3); }
.foot-scene .ft-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.foot-scene .ft-actions .ft-cta { margin-top: 0; }
.ft-social { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #0A66C2; background: #fff; border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.ft-social svg { width: 20px; height: 20px; }
.ft-social:hover { transform: translateY(-1px); border-color: #0A66C2; color: #0A66C2; }
.foot-scene[data-mode="night"] .ft-social { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
.foot-scene[data-mode="night"] .ft-social:hover { border-color: #fff; color: #fff; }
.foot-scene .ft-cta { margin-top: 4px; }
.foot-scene .ft-col h2 { color: var(--ink-3); }
.foot-scene .ft-col a { color: var(--ink-2); }
.foot-scene .ft-col a:hover { color: var(--ink); }
.foot-scene .scene { margin-top: 10px; }
.foot-scene .ft-bottom { position: relative; z-index: 2; margin-top: -44px; align-items: center; color: #1E3556; }
.foot-scene .ft-bottom a { color: #0A1B33; }
.ft-band { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 1; background: linear-gradient(180deg, transparent, var(--band-c) 60%); pointer-events: none; }

/* night colours */
.foot-scene[data-mode="night"] .ft-lead p, .foot-scene[data-mode="night"] .ft-contact small, .foot-scene[data-mode="night"] .ft-col h2 { color: var(--on-dark-2); }
.foot-scene[data-mode="night"] .ft-contact a { color: #fff; }
.foot-scene[data-mode="night"] .ft-contact a:hover { color: #94C2F7; }
.foot-scene[data-mode="night"] .ft-cta { box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.foot-scene[data-mode="night"] .ft-col a { color: rgba(238, 243, 250, .86); }
.foot-scene[data-mode="night"] .ft-col a:hover { color: #fff; }
.foot-scene[data-mode="night"] .ft-lead {
  border-color: rgba(125, 185, 255, .3); background: linear-gradient(135deg, rgba(91, 164, 247, .24), rgba(47, 128, 226, .07));
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(160, 205, 255, .22), 0 0 50px -20px rgba(47, 128, 226, .55), 0 26px 50px -28px rgba(0, 0, 0, .85);
}
.foot-scene[data-mode="night"] .brand { color: #fff; }
.foot-scene[data-mode="night"] .brand img { filter: brightness(1.75) saturate(1.1); }
.foot-scene[data-mode="night"] .ft-bottom { color: var(--on-dark-2); }
.foot-scene[data-mode="night"] .ft-bottom a { color: #fff; }
.foot-scene[data-mode="night"] .scene-svg .ct0, .foot-scene[data-mode="night"] .scene-svg .pv, .foot-scene[data-mode="night"] .scene-svg .rd,
.foot-scene[data-mode="night"] .scene-svg .bd path, .foot-scene[data-mode="night"] .scene-svg .tw path { filter: drop-shadow(0 0 3px rgba(79, 211, 238, .45)); }

/* what each mood shows */
.foot-scene[data-mode="day"] .star, .foot-scene[data-mode="day"] .moon { display: none; }
.foot-scene[data-mode="night"] .sun, .foot-scene[data-mode="night"] .pin,
.foot-scene[data-mode="night"] .lead, .foot-scene[data-mode="night"] .lead-dot { display: none; }

@media (max-width: 760px) {
  .foot-scene .scene { aspect-ratio: auto; height: 150px; }
  .foot-scene .ft-bottom { margin-top: 0; }
  .foot-scene .ft-band { display: none; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* project tiles: chips and two-column lists */
.chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.chips-row .tags { margin: 0; padding: 0; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; white-space: nowrap;
  font: 600 .76rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--c) 12%, var(--tile)); color: color-mix(in srgb, var(--c) 72%, var(--mix-ink)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ticks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
@media (max-width: 620px) { .ticks.two { grid-template-columns: minmax(0, 1fr); } }
.case-title { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem) !important; }
.case-sub { font: 500 .8rem/1.3 var(--f-mono) !important; color: var(--ink-3) !important; margin-top: -6px; }
@media (min-width: 900px) {
  .work-split.text-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .work-split.text-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.work .screen svg { display: block; }

/* header: mega menus for Services and Industries, and a scroll progress line in the pill */
.nav-item { position: relative; display: flex; }
.mega { display: none; }
@media (min-width: 861px) {
  .has-mega:is(:hover, :focus-within) > .mega { display: grid; }
  .has-mega > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6; }
  .mega { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: min(780px, 92vw); z-index: 60;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--line);
    border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(12, 23, 41, .35), 0 2px 6px rgba(12, 23, 41, .05); animation: mega-in .18s ease-out; }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
  @keyframes mega-in { from { opacity: 0; transform: translate(-50%, 6px); } }
}
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-content: start; }
.nav .mega .mega-item { white-space: normal; display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; color: var(--ink); font-size: inherit; text-decoration: none; }
.nav .mega .mega-item:hover { background: var(--tile-2); }
.mega-item b { display: block; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.mega-item small { display: block; color: var(--ink-3); font-size: .82rem; line-height: 1.35; margin-top: 2px; font-weight: 400; }
.mi-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 12%, var(--tile)); color: var(--c); }
.mi-ico svg { width: 20px; height: 20px; }
.mi-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; margin-top: 4px; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 15%, transparent); }
.nav .mega .mega-feature { white-space: normal; display: grid; align-content: space-between; gap: 8px; padding: 18px; border-radius: 16px; color: #fff; text-decoration: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(47, 128, 226, .5), transparent 60%), linear-gradient(160deg, #0F2547, #091629); }
.nav .mega .mega-feature:hover { color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(47, 128, 226, .7), transparent 60%), linear-gradient(160deg, #0F2547, #091629); }
.mega-feature .mf-k { font: 500 .76rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.mega-feature b { font: 640 1.35rem/1.15 var(--f); letter-spacing: -.03em; }
.mega-feature small { color: var(--on-dark-2); font-size: .86rem; line-height: 1.4; }
.mega-feature .mf-go { font-weight: 600; font-size: .9rem; }
/* the Solar menu: two pages and a feature panel; on phones its two links sit under "Solar" in the menu */
.mega-grid.one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) { .mega.mega-solar { width: min(620px, 92vw); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (max-width: 860px) {
  .nav-item { flex-direction: column; }
  .nav .mega-solar { display: block; padding: 0 0 4px 14px; }
  .nav .mega-solar :is(.mega-feature, small, .mi-ico) { display: none; }
  .nav .mega-solar .mega-item { padding: 11px 16px; border-radius: 12px; }
  .nav .mega-solar .mega-item b { font-weight: 500; font-size: .98rem; color: var(--ink-2); }
  .nav .mega-solar .mega-item b::before { content: "↳ "; color: var(--ink-3); }
}
/* on narrow laptops the six menu entries sit a little closer so the pill keeps one line */
@media (min-width: 861px) and (max-width: 1100px) {
  .nav a { padding: 10px 9px; }
  .has-mega > a::after { margin-left: 5px; }
  .head .btn { padding: 0 14px; }
}
@media (min-width: 861px) and (max-width: 1000px) {
  .nav a { padding: 10px 7px; font-size: .92rem; }
  .head .btn { padding: 0 12px; font-size: .88rem; }
}
/* the two solar page links on the Solar PV cards */
.solar-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.solar-ticks { margin-top: 10px; row-gap: 8px; }
.solar-ticks li { font-size: .92rem; }
.head-ruler { position: absolute; left: 26px; right: 26px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.head-ruler i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--blue), var(--blue-2), #18A4C9); }

/* magnetic buttons: bento.js nudges these toward a mouse pointer with the translate property */
:is(.btn, .more, .nav > a, .nav-item > a, .cad-tab, .ft-social, .pin, .copy-btn) {
  transition: translate .3s cubic-bezier(.2, .8, .2, 1), transform .2s, background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* the frame around each card's rolling picture (CAD paper is white; in the dark theme screenshots are reversed, see the end of this file) */
.hl-pic { margin: 0 0 4px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--r) - 8px); background: #fff; border: 1px solid var(--line); }
.hl-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
:root[data-theme="dark"] .hl-pic { border-color: var(--line-2); }
:root[data-theme="dark"] .hl-pic img { filter: brightness(.93); }

/* ================= dark theme: the same design on a deep navy ground (chosen in the header; follows the system by default) ================= */
:root[data-theme="dark"] {
  --grad-end: #18A4C9;
  color-scheme: dark;
  --ground: #0A101B;
  --tile: #111A2A;
  --tile-2: #0D1523;
  --ink: #E7EDF6;
  --ink-2: #A9B6CA;
  --ink-3: #7C899E;
  --line: #1F2B40;
  --line-2: #2B3952;
  --blue: #5BA4F7;
  --blue-2: #7DB9FF;
  --blue-soft: #13284A;
  --green: #4CC21A;
  --mix-ink: #fff;
  --solar-t: #2B2113; --roads-t: #172031; --roads: #8FA1BC; --survey-t: #2B1B12; --arch-t: #1C1836; --bess-t: #0D2627; --mfg-t: #2C1614; --fire-t: #2C1219;
  /* CAD drawings go back to AutoCAD's dark model space */
  --cad-bg: #0E1622; --cad-chrome: #172130; --cad-chrome-2: #1F2B3C; --cad-line: #2A384E; --cad-text: #C6D2E2; --cad-dim: #7D8CA3;
  --aci-red: #FF5C5C; --aci-orange: #FF9A3D; --aci-yellow: #FFD84D; --aci-green: #5EDB6E; --aci-cyan: #4FD3EE; --aci-blue: #5B97FF;
  --aci-magenta: #D67BFF; --aci-white: #E8EDF4; --aci-grey: #56657B;
  --shadow-1: 0 1px 1px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .25), 0 14px 34px -14px rgba(0, 0, 0, .65);
  --shadow-2: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 18px rgba(0, 0, 0, .35), 0 28px 56px -18px rgba(0, 0, 0, .8);
}
:root[data-theme="dark"] .tile { border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .head-pill { background: rgba(17, 26, 42, .8); border-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .brand img { filter: brightness(1.75) saturate(1.1); }
:root[data-theme="dark"] .mega { background: var(--tile); border-color: var(--line-2); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .btn-light { background: transparent; color: #9CCBFF; border-color: #3D86E8; }
:root[data-theme="dark"] .btn-light:hover { background: rgba(61, 134, 232, .14); color: #C2DEFF; border-color: #5BA4F7; }
:root[data-theme="dark"] .shot { background: var(--tile); }
:root[data-theme="dark"] .timeline li::after { background: var(--tile); }
:root[data-theme="dark"] .q-tile, :root[data-theme="dark"] .quote-lead { background: linear-gradient(160deg, #142744, var(--tile) 62%); }
:root[data-theme="dark"] .field :is(input, select, textarea):focus { background: var(--tile); }
:root[data-theme="dark"] .form-status { background: #142E1B; }
:root[data-theme="dark"] .field-err { color: #FF8A80; }
:root[data-theme="dark"] .field [aria-invalid="true"]:not(:focus) { border-color: #F0766B; }
:root[data-theme="dark"] :is(.code, .code-pre) { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .code .c, :root[data-theme="dark"] .code-pre .c { color: #7D8CA3; }
:root[data-theme="dark"] .code .k, :root[data-theme="dark"] .code-pre .k { color: #5B97FF; }
:root[data-theme="dark"] .code .s, :root[data-theme="dark"] .code-pre .s { color: #FFD84D; }
:root[data-theme="dark"] .code .f, :root[data-theme="dark"] .code-pre .f { color: #4FD3EE; }
:root[data-theme="dark"] .code .n, :root[data-theme="dark"] .code-pre .n { color: #D67BFF; }
:root[data-theme="dark"] .code svg circle { stroke: #E8EDF4; }
:root[data-theme="dark"] .code svg .fade path { stroke: #4FD3EE; }
:root[data-theme="dark"] .code svg .fade text { fill: #4FD3EE !important; }
:root[data-theme="dark"] .work .screen { border-color: var(--line); }

/* the small drawings and mock-ups in the pages use a few fixed light fills; in dark mode they turn into dark panels
   (text set in a style attribute, buttons and brand colours keep their own colours) */
:root[data-theme="dark"] main svg :is([fill="#fff"], [fill="#FFF"], [fill="#ffffff"], [fill="#FFFFFF"]) { fill: #16213A; }
:root[data-theme="dark"] main svg :is([fill="#F7F9FC"], [fill="#EEF2F7"], [fill="#EDF2F9"], [fill="#F6F8FB"]) { fill: #1B2840; }
:root[data-theme="dark"] main svg [fill="#E6EFFB"] { fill: #1A3156; }
:root[data-theme="dark"] main svg [fill^="rgba(255,255,255"] { fill: rgba(255, 255, 255, .04); }
:root[data-theme="dark"] main svg :is([stroke="#D3DAE5"], [stroke="#E2E7EF"], [stroke="#D5DDE8"], [stroke="#C6D0DD"], [stroke="#B7C2D2"]) { stroke: #3A4B68; }
:root[data-theme="dark"] main svg [fill="#E0F5F4"] { fill: rgba(12, 152, 152, .2); }
:root[data-theme="dark"] main svg [stroke="#3B2523"] { stroke: #E8857B; }
:root[data-theme="dark"] main svg [stroke="#3E3170"] { stroke: #9D8CF0; }
:root[data-theme="dark"] main svg text[style*="fill:#7255D4"] { fill: #A99BF5 !important; }
:root[data-theme="dark"] main svg :is([stroke="#E2C9C6"], [stroke="#F1DEDB"]) { stroke: #4A3036; }
:root[data-theme="dark"] main svg [stroke="#54647C"] { stroke: #8C9BB3; }
:root[data-theme="dark"] main svg :is([stroke="#7A869A"], [stroke="#8A96A8"]) { stroke: #95A3B8; }
:root[data-theme="dark"] main svg [stroke="#C9D2DE"] { stroke: #2C3A52; }
:root[data-theme="dark"] main svg [stroke="#182233"] { stroke: #A9B6CA; }
:root[data-theme="dark"] .step-n { -webkit-text-stroke-color: #3A4B68; }
:root[data-theme="dark"] ol.howto li::before, :root[data-theme="dark"] .countries li b { background: var(--blue-soft); color: var(--blue-2); box-shadow: inset 0 0 0 1px rgba(125, 185, 255, .35); }
:root[data-theme="dark"] main svg text[style*="fill:#0C1729"] { fill: var(--ink) !important; }
:root[data-theme="dark"] main svg text[style*="fill:#7A869A"] { fill: var(--ink-3) !important; }

/* the switch: a moon in light mode, a sun in dark mode */
.theme-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-left: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--tile); color: var(--ink-2); transition: color .2s, border-color .2s, transform .2s; }
.theme-btn:hover { color: var(--ink); border-color: var(--line-2); transform: rotate(-12deg); }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .ic-sun, :root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }
@media (max-width: 860px) { .theme-btn { margin-left: auto; } .menu-btn { margin-left: 8px; } }
@media (max-width: 360px) { .head .brand img { width: 40px; } .head .brand span { font-size: 1.08rem; } }
@media (max-width: 374px) { .head-pill { gap: 8px; padding-left: 12px; } .head .brand { gap: 8px; } .head .brand img { width: 34px; } .head .brand span { font-size: .95rem; } .theme-btn, .menu-btn { width: 40px; height: 40px; } .menu-btn { margin-left: 2px; } }
@media (min-width: 861px) and (max-width: 1000px) { .theme-btn { width: 38px; height: 38px; margin-left: 4px; } .nav a { padding: 10px 6px; } }
@media (min-width: 861px) and (max-width: 960px) { .head .brand span { font-size: 1.1rem; } .head .brand img { width: 44px; } }

/* phones: code panels and hero buttons */
@media (max-width: 520px) {
  .code { grid-template-columns: minmax(0, 1fr); }
  .code svg { justify-self: end; width: 96px; }
  .code-pre { white-space: pre; overflow-wrap: normal; font-size: .7rem; line-height: 1.7; padding: 14px; }
}
@media (max-width: 480px) {
  .hero .btn-row > .btn { flex: 1 1 100%; }
  .hero .btn-row > .more { min-height: 44px; }
}
@media (max-width: 899px) { .work-split.text-first > .screen { order: -1; } }
/* fewer stranded last words */
.tile p, .sec-side p, .hero-side p, .ft-lead p { text-wrap: pretty; }
[data-solar-count] { text-wrap: balance; }

/* laptops and up: the header lines up with the page content and grows to match the hero (option C, 3 Nov 2026) */
@media (min-width: 1200px) {
  html { scroll-padding-top: 116px; }
  .head-pill { max-width: 1232px; padding: 12px 12px 12px 22px; gap: 16px; }
  .head .brand img { width: 62px; }
  .head .brand span { font-size: 1.55rem; }
  .nav a { font-size: 1.08rem; padding: 12px 16px; }
  .head .btn { min-height: 52px; padding: 0 26px; font-size: 1.02rem; }
  .theme-btn { width: 50px; height: 50px; }
  .theme-btn svg { width: 21px; height: 21px; }
  .head-ruler { left: 34px; right: 34px; }
}

/* page background: colour bands from the top of the page. The hero sits on the logo blue, then every other section on
   amber, teal and violet in turn; each band is a full-width wash that fades into the ground above and below (chosen 3 Nov 2026) */
:root { --tint: 8%; }
:root[data-theme="dark"] { --tint: 10%; }
main { overflow-x: clip; }
main > :is(.hero, .section) { position: relative; }
main > .section:nth-child(even of .section) { padding-bottom: clamp(56px, 7vw, 104px); }
main > :is(.hero, .section:nth-child(even of .section))::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; width: 100vw; margin-left: -50vw;
}
main > .hero::before { top: -260px; bottom: -90px; background: linear-gradient(180deg, var(--sb) 0, var(--sb) calc(100% - 180px), transparent 100%); }
main > .section:nth-child(even of .section)::before {
  top: -90px; bottom: -90px; background: linear-gradient(180deg, transparent 0, var(--sb) 180px, var(--sb) calc(100% - 180px), transparent 100%);
}
main > .hero { --sb: color-mix(in srgb, #2F80E2 var(--tint), var(--ground)); }
main > .section:nth-child(6n+2 of .section) { --sb: color-mix(in srgb, #E08A1E var(--tint), var(--ground)); }
main > .section:nth-child(6n+4 of .section) { --sb: color-mix(in srgb, #0E9AA7 var(--tint), var(--ground)); }
main > .section:nth-child(6n of .section) { --sb: color-mix(in srgb, #7255D4 var(--tint), var(--ground)); }

/* card headers: a glowing round dot and the label in the card's colour (chosen 3 Nov 2026); the dark cards keep their own labels */
.tile:not(.lisp, .pva-big, .pva-mini, .cta-tile) .label:not([data-solar-count]) {
  color: color-mix(in srgb, var(--c, var(--blue)) 70%, var(--mix-ink)); font-weight: 600; gap: 11px; padding-left: 3px;
}
.tile:not(.lisp, .pva-big, .pva-mini, .cta-tile) .label:not([data-solar-count]) i {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--blue)) 18%, transparent), 0 0 12px color-mix(in srgb, var(--c, var(--blue)) 55%, transparent);
}

/* headings for screen readers only, so the heading levels run in order */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* inner pages: the live CAD window beside the words (chosen 3 Nov 2026), a little shorter than the homepage's */
.hero.page .hero-split h1 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); }
@media (min-width: 681px) and (max-width: 979px) { .hero.page .hero-split .cad { min-height: 440px; } }
@media (min-width: 980px) { .hero.page .hero-split .cad { min-height: 470px; } }

/* WhatsApp chat button, bottom right on every page */
.wa-btn { position: fixed; z-index: 45; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: 999px; background: #1FAF55; color: #fff; text-decoration: none;
  font: 600 .92rem/1 var(--f); box-shadow: 0 14px 30px -12px rgba(15, 90, 45, .6), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, box-shadow .2s; }
.wa-btn svg { width: 24px; height: 24px; flex: none; }
.wa-btn span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease; }
.wa-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(15, 90, 45, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.wa-btn:hover span, .wa-btn:focus-visible span { max-width: 120px; }
.wa-btn:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; }
@media (max-width: 680px) { .wa-btn { height: 48px; padding: 0 12px; } .wa-btn svg { width: 22px; height: 22px; } }

/* confidentiality note under the enquiry form */
.form-trust { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; padding: 12px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.5; color: var(--ink-2);
  background: color-mix(in srgb, var(--green) 7%, var(--tile)); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); }
.form-trust svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: color-mix(in srgb, var(--green) 75%, var(--mix-ink)); }
.form-trust b { color: var(--ink); }

/* Services: porting diagram */
.port-map { width: 100%; max-width: 440px; justify-self: center; }
.port-map .pm-core { fill: color-mix(in srgb, var(--c) 10%, var(--tile)); stroke: var(--c); stroke-width: 1.4; }
.port-map .pm-box { fill: var(--tile); stroke: var(--k); stroke-width: 1.4; }
.port-map .pm-l { fill: none; stroke: var(--line-2); stroke-width: 1.6; stroke-dasharray: 5 5; }
.port-map .pm-t { font: 600 14px var(--f); fill: var(--ink); }
.port-map .pm-s { font: 500 11px var(--f-mono); fill: var(--ink-3); }
.port-map .pm-dot { fill: var(--c); }
@media (prefers-reduced-motion: reduce) { .port-map .pm-dot { display: none; } }

/* Services: hours-saved estimator */
.est-grid { display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .est-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.est-inputs { display: grid; gap: 22px; }
.est-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: baseline; cursor: pointer; }
.est-row span { color: var(--ink-2); font-size: .98rem; }
.est-row b { font: 650 1.1rem/1 var(--f-mono); color: var(--ink); }
.est-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--blue); height: 22px; cursor: pointer; }
.est-note { color: var(--ink-3); font-size: .86rem; }
.est-out { display: grid; gap: 18px; padding: clamp(20px, 2.4vw, 28px); border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--green) 9%, var(--tile)), color-mix(in srgb, var(--blue) 8%, var(--tile)));
  border: 1px solid var(--line); justify-items: start; }
.est-out > div { display: grid; gap: 6px; }
.est-out b { font: 680 clamp(2.6rem, 1.9rem + 2vw, 3.6rem)/1 var(--f); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.est-out p { color: var(--ink-2); font-size: .98rem; }

/* Track record: the numbers roll into place like an odometer (chosen 3 Nov 2026). The final digits show without JS;
   bento.js resets them to zero and rolls them up when the card comes into view and on hover */
.ts-odo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: auto; }
.ts-odo > div { display: grid; gap: 8px; align-content: start; }
.odo { display: inline-flex; gap: 3px; align-self: start; }
.odo .d, .odo .sfx { display: inline-block; box-sizing: content-box; position: relative; height: 1.1em; line-height: 1.1em; overflow: hidden; padding: 4px 7px; border-radius: 8px;
  font: 700 2rem/1.1 var(--f-mono); background: #0E1A2E; color: #F4F7FB; box-shadow: inset 0 -12px 14px -12px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .12); }
.odo .d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.odo .sfx { color: #5FD823; }
.odo .d > span { display: block; transform: translateY(calc(var(--n) * -1.1em)); }
.ts-odo.pre .odo .d > span { transform: none; }
.ts-odo.pre.go .odo .d > span { transform: translateY(calc(var(--n) * -1.1em)); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) var(--dl, 0s); }
.ts-odo .lbl { font-size: .86rem; color: var(--ink-2); }
:root[data-theme="dark"] .odo :is(.d, .sfx) { background: #060B14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -12px 14px -12px rgba(0, 0, 0, .9); }

/* Works inside: the nine platforms in a grid; the highlight moves from one to the next (chosen 3 Nov 2026) */
.wi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.wi-grid > span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--tile-2); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--ink-2); transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s, transform .35s; }
.wi-grid > span i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: none; background: var(--c); background: color-mix(in srgb, var(--c) 84%, #000);
  color: #fff; font: 700 .7rem/1 var(--f-mono); font-style: normal; }
.wi-grid > span.on { background: var(--tile); color: var(--ink); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 13%, transparent); transform: translateY(-2px); }
@media (max-width: 520px) { .wi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* solar pages: horizontal highlight cards, the words on the left and a real result from the drawing on the right (chosen 4 Nov 2026) */
/* card colours Industries doesn't have; the slate lifts in dark mode so the step line stays clear */
:root { --earth: #2B9A57; --earth-t: #E3F5EA; --slate: #54647C; --sky: #0A87C2; --sky-t: #E0F2FB; --pink: #C4389B; --pink-t: #FBE8F5; }
:root[data-theme="dark"] { --earth-t: #0F2618; --slate: #8FA1BC; --sky-t: #0C2230; --pink-t: #2C1426; }
.hl-row .work-split { align-items: start; }
.hl-row h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); }
.hl-row p { font-size: 1.02rem; }
.hl-row .ticks { margin-top: 4px; }
.hl-row .ticks li { text-wrap: pretty; }
.hl-row code.inl { white-space: nowrap; }
.hl-row .hl-pic { margin: 0; }
.hl-row:hover .hl-pic img { transform: scale(1.04); }
@media (max-width: 899px) { .hl-row .hl-pic { order: -1; } }

/* a highlight picture that rolls through the steps of a tool: scroll-snap so it swipes natively; bento.js advances it.
   Each slide is the drawing with its caption below; the step buttons sit under that, so nothing covers the drawing */
.hl-seq { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; background: var(--tile-2); }
.seq-track { width: 100%; min-width: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.seq-track::-webkit-scrollbar { display: none; }
.seq-track:focus-visible { outline: 2px solid var(--blue-2); outline-offset: -2px; }
.seq-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; }
.hl-seq img { height: auto; aspect-ratio: 4 / 3; background: #fff; }
.hl-row:hover .hl-seq img { transform: none; }
/* drawn steps: the same frame as the pictures; what the step adds stays bright and the rest steps back */
.seq-art { aspect-ratio: 4 / 3; background: var(--cad-bg); }
.seq-art svg { display: block; width: 100%; height: 100%; }
.fig-svg .was { opacity: .36; }
.shot figure.hl-seq { display: grid; gap: 0; height: auto; }
.shot .hl-seq img { border-radius: 0; }
.shot .seq-slide figcaption { font-family: var(--f); color: var(--ink); }
.seq-slide figcaption { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 12px; font-size: .88rem; font-weight: 500; line-height: 1.35; color: var(--ink); border-top: 1px solid var(--line); }
.seq-slide figcaption b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--c) 86%, #000); color: #fff; font: 700 .74rem/1 var(--f); }
/* the step buttons: numbered circles on a line, chosen 4 Nov 2026. The line from the active step to the next fills while the picture waits, so the next move is clear */
.seq-steps { width: calc(100% - 20px); margin: 8px 10px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.seq-steps button { appearance: none; border: 0; background: none; cursor: pointer; position: relative; min-width: 0; display: grid; justify-items: center; gap: 6px; padding: 0; color: var(--ink-3); font: 600 .74rem/1.1 var(--f); white-space: nowrap; transition: color .25s; }
.seq-steps button b { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tile); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); font: 600 .8rem/1 var(--f); }
.seq-steps button:not(:last-child)::before, .seq-steps button:not(:last-child)::after { content: ""; position: absolute; top: 11.5px; left: 50%; height: 3px; pointer-events: none; }
.seq-steps button:not(:last-child)::before { width: 100%; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.seq-steps button:not(:last-child)::after { width: 0; background: var(--c); }
.seq-steps button:has(~ button[aria-current="true"])::after { width: 100%; }
.is-rolling .seq-steps button[aria-current="true"]:not(:last-child)::after { animation: seq-line 3.4s linear both; }
@keyframes seq-line { from { width: 0; } to { width: 100%; } }
.seq-steps button:hover, .seq-steps button[aria-current="true"] { color: var(--ink); }
.seq-steps button:has(~ button[aria-current="true"]) b { background: color-mix(in srgb, var(--c) 18%, var(--tile)); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--c); }
.seq-steps button[aria-current="true"] b { background: color-mix(in srgb, var(--c) 86%, #000); color: #fff; font-weight: 700; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 24%, transparent); }
.seq-steps button:focus-visible { outline: none; }
.seq-steps button:focus-visible b { outline: 2px solid var(--blue-2); outline-offset: 3px; }
/* bento.js shrinks the words, then drops them, when they no longer fit their cell */
.hl-seq[data-fit="small"] .seq-steps button { font-size: .64rem; }
.hl-seq[data-fit="nums"] .seq-steps button span { display: none; }
@media (max-width: 420px) { .seq-steps button { font-size: .7rem; } }

/* ground mount: hours by hand against hours with the tools (added 4 Nov 2026). Amber and blue pass the palette check in both themes; every bar carries its value */
.hvt-tile { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 20px 40px; --hand: #C47F12; --tool: #0B5CAD; }
:root[data-theme="dark"] .hvt-tile { --tool: #3F8AE0; }
.hvt-legend { display: flex; gap: 18px; margin-bottom: 8px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.hvt-legend span, .hvt-sum dt { display: inline-flex; align-items: center; gap: 7px; }
.hvt-tile i.hand, .hvt-tile i.tool { width: 12px; height: 12px; border-radius: 3px; }
.hvt-tile i.hand, .hvt-bar.hand { background: var(--hand); }
.hvt-tile i.tool, .hvt-bar.tool { background: var(--tool); }
.hvt { width: 100%; border-collapse: collapse; }
.hvt tr + tr { border-top: 1px solid var(--line); }
.hvt th { width: 30%; padding: 11px 16px 11px 0; text-align: left; font-weight: 500; font-size: .95rem; line-height: 1.3; color: var(--ink); }
.hvt td { padding: 11px 0; }
.hvt-line { display: flex; align-items: center; gap: 8px; }
.hvt-line + .hvt-line { margin-top: 2px; }
.hvt-bar { display: block; width: calc(var(--v) * .9); height: 13px; border-radius: 0 4px 4px 0; }
.hvt-val { flex: none; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.hvt-sum { display: grid; align-content: start; justify-items: start; gap: 8px; padding-left: 28px; border-left: 1px solid var(--line); }
.hvt-sum > b { font-size: clamp(3rem, 2rem + 3vw, 4.6rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.hvt-sum p { color: var(--ink-2); }
.hvt-sum dl { display: grid; gap: 8px; margin: 8px 0 0; width: 100%; }
.hvt-sum dl div { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.hvt-sum dt { color: var(--ink-2); }
.hvt-sum dd { margin: 0; font-weight: 600; color: var(--ink); }
@media (max-width: 899px) { .hvt-tile { grid-template-columns: minmax(0, 1fr); } .hvt-sum { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .hvt th, .hvt td { display: block; width: auto; } .hvt th { padding-bottom: 0; } .hvt td { padding-top: 6px; } }

/* landing page graphics: exploded drawing, 3D site, process sheets and drafting desk (chosen 4 Nov 2026) */
/* B: a drawing pulled apart into its layers */
.xp { --xa: #FFB547; --xc: #4FD1E8; --xr: #FF7A7A; --xb: #6EA8FF; --xg: #5BE08A; --xm: #D98BFF; --xw: #E8F0FA; --xk: #8AA0C0; position: relative; padding: 0; gap: 0; overflow: hidden; color: #E8F0FA; border-color: rgba(255, 255, 255, .08);
  background: radial-gradient(60% 80% at 50% 45%, #17396A 0%, transparent 72%), linear-gradient(160deg, #0B1E3A, #071222); }
.xp::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(140, 180, 230, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 180, 230, .055) 1px, transparent 1px); background-size: 28px 28px; }
.xp svg { position: relative; display: block; width: 100%; height: auto; fill: none; }
.xl * { vector-effect: non-scaling-stroke; stroke-width: 1.1; }
.xl .thick { stroke-width: 2.2; }
.xl .pl { fill: rgba(17, 42, 86, .56); stroke: rgba(150, 190, 240, .5); }
.xa { stroke: var(--xa); } .xc { stroke: var(--xc); } .xr { stroke: var(--xr); } .xb { stroke: var(--xb); } .xg { stroke: var(--xg); } .xm { stroke: var(--xm); } .xw { stroke: var(--xw); } .xk { stroke: var(--xk); }
.xp .fc { fill: rgba(79, 209, 232, .3); } .xp .fa { fill: rgba(255, 181, 71, .4); } .xp .fg { fill: rgba(91, 224, 138, .7); } .xp .fm { fill: rgba(217, 139, 255, .85); } .xp .fw { fill: rgba(232, 240, 250, .09); }
.xp .dash { stroke-dasharray: 4 3; } .xp .cl { stroke-dasharray: 12 3 2 3; }
.xt { fill: #E8F0FA; stroke: none !important; font: 500 3px var(--f-mono); }
.xr-s path { stroke: rgba(150, 190, 240, .38); stroke-dasharray: 3 4; }
.xl { transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 70ms), opacity .45s; transform: translateY(calc((2.5 - var(--i)) * 64px)); }
.xo { transition: opacity .45s; }
.xo .lead { stroke: rgba(170, 200, 240, .6); } .xo .dot { fill: #E8F0FA; }
.xo .nm { fill: #fff; font: 600 13px var(--f-mono); letter-spacing: .02em; } .xo .ds { fill: #A8B6CA; font: 500 13.5px var(--f); }
.xa-f { fill: var(--xa); } .xr-f { fill: var(--xr); } .xc-f { fill: var(--xc); } .xb-f { fill: var(--xb); } .xg-f { fill: var(--xg); } .xw-f { fill: var(--xw); }
.xp.art-ready:not(.in) .xl { transform: translateY(0); } .xp.art-ready:not(.in) .xo, .xp.art-ready:not(.in) .xr-s { opacity: 0; }
.xr-s { transition: opacity .8s .9s; }
.xp.cycling .xl:not(.on) { opacity: .5; } .xp.cycling .xo:not(.on) { opacity: .55; }
.xp .xl.on .pl { fill: rgba(30, 72, 140, .72); stroke: #BBD8FF; }
.xp-tag { position: absolute; z-index: 1; left: 22px; top: 18px; display: inline-flex; align-items: center; gap: 8px; color: #A8B6CA; font: 500 .72rem/1 var(--f-mono); }
.xp-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--xg); box-shadow: 0 0 8px var(--xg); }
.xp-key { display: none; }
@media (max-width: 720px) { .xp svg { height: 400px; } .xp-tag { left: 14px; top: 12px; font-size: .66rem; } .xp .xo { display: none; } .xp-key { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; list-style: none; margin: 0; padding: 4px 18px 20px; counter-reset: k 7; } .xp-key li { display: grid; align-content: start; gap: 2px; font-size: .78rem; line-height: 1.3; color: #A8B6CA; counter-increment: k -1; } .xp-key b { color: #fff; font: 600 .72rem/1.2 var(--f-mono); letter-spacing: .02em; } .xp-key b::before { content: counter(k) '  '; color: #5BE08A; } }

/* C: one site in 3D, every industry on it */
.iso { position: relative; padding: 0; gap: 0; overflow: hidden; background: linear-gradient(170deg, color-mix(in srgb, var(--blue-2) 9%, var(--tile)), var(--tile) 70%); }
.iso svg { display: block; width: 100%; height: auto; font-family: var(--f); }
.iso .st { fill: color-mix(in srgb, var(--earth) 9%, var(--tile)); stroke: color-mix(in srgb, var(--ink) 18%, transparent); }
.iso .sl { fill: color-mix(in srgb, var(--ink) 16%, var(--tile)); } .iso .sr { fill: color-mix(in srgb, var(--ink) 26%, var(--tile)); }
.iso .sg { fill: none; stroke: color-mix(in srgb, var(--ink) 6%, transparent); }
.iso .t, .iso .l, .iso .r { stroke: color-mix(in srgb, var(--f) 72%, var(--ink)); stroke-width: .7; stroke-linejoin: round; }
.iso .t { fill: color-mix(in srgb, var(--f) 26%, var(--tile)); } .iso .l { fill: color-mix(in srgb, var(--f) 55%, var(--tile)); } .iso .r { fill: color-mix(in srgb, var(--f) 80%, var(--tile)); }
:root[data-theme="dark"] .iso .t { fill: color-mix(in srgb, var(--f) 88%, #fff); } :root[data-theme="dark"] .iso .l { fill: color-mix(in srgb, var(--f) 46%, var(--tile)); } :root[data-theme="dark"] .iso .r { fill: color-mix(in srgb, var(--f) 28%, var(--tile)); }
:root[data-theme="dark"] .iso .t, :root[data-theme="dark"] .iso .l, :root[data-theme="dark"] .iso .r { stroke: color-mix(in srgb, var(--f) 60%, #fff); }
.iso .rd { fill: color-mix(in srgb, var(--ink) 15%, var(--tile)); stroke: color-mix(in srgb, var(--ink) 26%, transparent); stroke-width: .7; }
.iso .rc { fill: none; stroke: var(--tile); stroke-width: 1.4; stroke-dasharray: 9 8; }
.iso .rt { fill: none; stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
.iso .fl { fill: var(--ink-3); font: 500 10px var(--f-mono); }
.iso { --pvf: color-mix(in srgb, #2563EB 78%, var(--tile)); --pvl: #1E40AF; --pvp: var(--ink-3); }
:root[data-theme="dark"] .iso { --pvf: #2F6FE0; --pvl: #8DB7FF; }
.iso-pv { fill: var(--pvf); stroke: var(--pvl); stroke-width: .6; }
.iso-pm { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .5; } .iso-pp { fill: none; stroke: var(--pvp); stroke-width: 1; }
.iso .yd { fill: none; stroke: color-mix(in srgb, var(--bess) 70%, transparent); stroke-dasharray: 4 4; }
.iso .wn { fill: color-mix(in srgb, #fff 80%, var(--blue-2)); stroke: none; }
.iso .wf { fill: none; stroke: var(--arch); stroke-width: 1; stroke-dasharray: 5 3; }
.iso .dm { fill: none; stroke: var(--aci-green); } .iso .dt { fill: var(--aci-green); font: 500 9.5px var(--f-mono); }
.iso .tr { fill: color-mix(in srgb, var(--earth) 70%, var(--tile)); stroke: var(--earth); } .iso .tk { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.iso .ct { fill: none; stroke: color-mix(in srgb, var(--survey) 70%, transparent); } .iso .xp-x { fill: none; stroke: var(--aci-red); stroke-width: 1.3; }
.iso .tp { fill: none; stroke: var(--ink-2); stroke-width: 1.3; } .iso .pr { fill: var(--solar); stroke: var(--ink-2); } .iso .bm { fill: none; stroke: var(--aci-red); stroke-dasharray: 4 3; }
.iso .fm { fill: none; stroke: var(--fire); stroke-width: 2.4; stroke-linejoin: round; } .iso .hy { fill: none; stroke: var(--fire); stroke-width: 2.4; } .iso .hc { fill: var(--fire); stroke: var(--tile); }
.iso .gl { fill: color-mix(in srgb, #7DD3FC 70%, var(--tile)); stroke: color-mix(in srgb, var(--f) 72%, var(--ink)); stroke-width: .7; } .iso .dr { fill: #334155; }
.iso .isr { transition: opacity .6s var(--d), transform .8s cubic-bezier(.2, .8, .2, 1) var(--d); }
.iso.art-ready:not(.in) .isr { opacity: 0; transform: translateY(26px); }
.iso-car.a { animation: iso-a 16s linear infinite; } .iso-car.b { animation: iso-b 21s linear infinite; }
@keyframes iso-a { 0% { transform: none; opacity: 0; } 4%, 94% { opacity: 1; } 100% { transform: translate(607px, 251px); opacity: 0; } }
@keyframes iso-b { 0% { transform: none; opacity: 0; } 4%, 94% { opacity: 1; } 100% { transform: translate(-607px, -251px); opacity: 0; } }
.iso .ic { text-decoration: none; } .iso .il { fill: none; stroke: color-mix(in srgb, var(--c) 70%, var(--ink)); } .iso .id { fill: var(--c); stroke: var(--tile); stroke-width: 1.4; }
.iso .ic rect { fill: var(--tile); stroke: color-mix(in srgb, var(--c) 45%, var(--line-2)); transition: fill .2s; } .iso .ib { fill: var(--c); } .iso .ic text { fill: var(--ink); font: 600 13px var(--f); }
.iso .ic:hover rect, .iso .ic:focus-visible rect { fill: color-mix(in srgb, var(--c) 16%, var(--tile)); stroke: var(--c); }
@media (max-width: 720px) { .iso svg { height: 330px; } .iso .ic { display: none; } }

/* D: one drawing through the four steps, with a plotter running above */
.ps { position: relative; margin-bottom: 16px; padding-top: 22px; }
.ps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ps-cell { position: relative; border-radius: 16px; background: var(--cad-bg); border: 1px solid var(--line); box-shadow: var(--shadow-1); animation: ps-on 16s linear infinite; animation-delay: calc(var(--i) * 4s - 4s); }
.ps-cell svg { display: block; width: 100%; height: auto; }
.ps-cell + .ps-cell::before { content: ""; position: absolute; left: -15px; top: 50%; width: 14px; border-top: 1.5px dashed var(--line-2); }
.ps .thick { stroke-width: 2.2; } .ps .pen { stroke-width: .9; } .ps .dash { stroke-dasharray: 4 3; }
.ps .was { opacity: .45; }
.ps .prog { fill: var(--blue-2); stroke: none; } .ps .ok { fill: var(--green); stroke: none; } .ps .okt { stroke: #fff; stroke-width: 2; }
@keyframes ps-on { 0%, 24% { border-color: var(--blue-2); box-shadow: 0 0 0 1px var(--blue-2), var(--shadow-1); } 26%, 100% { border-color: var(--line); box-shadow: var(--shadow-1); } }
.ps-rail { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 10px); }
.ps-car { position: absolute; left: 12%; top: -6px; width: 34px; height: 14px; margin-left: -17px; border-radius: 4px; background: var(--ink); animation: ps-go 16s cubic-bezier(.6, 0, .3, 1) infinite; }
.ps-car b { position: absolute; left: 50%; top: 14px; width: 2px; height: 20px; margin-left: -1px; background: var(--ink); }
.ps-car b::after { content: ""; position: absolute; left: -3px; top: 20px; border: 4px solid transparent; border-top: 8px solid #D94A3D; }
@keyframes ps-go { 0%, 18% { left: 12%; } 25%, 43% { left: 37.5%; } 50%, 68% { left: 62.5%; } 75%, 93% { left: 87.5%; } 100% { left: 12%; } }
@media (max-width: 899px) { .ps { padding-top: 0; } .ps-rail { display: none; } .ps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-cell + .ps-cell::before { display: none; } }

/* E: from the drafting board to the plugin */
.dk { padding: 18px clamp(16px, 2.2vw, 28px) 16px; gap: 6px; }
.dk-dim { display: flex; align-items: center; gap: 14px; color: var(--aci-green); font: 500 .76rem/1 var(--f-mono); letter-spacing: .02em; }
.dk-dim i { flex: 1; height: 9px; border-left: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.dk-dim i:last-child { border-left: 0; border-right: 1px solid currentColor; }
.dk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dk-cell { margin: 0; display: grid; gap: 8px; min-width: 0; }
.dk-cell svg { display: block; width: 100%; height: auto; }
.dk-cell figcaption { display: flex; gap: 8px; justify-content: center; align-items: baseline; font-size: .88rem; color: var(--ink-2); text-align: center; }
.dk-cell figcaption b { color: var(--ink); font-weight: 650; }
.dk .fp { fill: color-mix(in srgb, var(--solar) 14%, var(--tile)); } .dk .fs { fill: var(--tile); } .dk .fo { fill: color-mix(in srgb, var(--aci-orange) 45%, var(--tile)); } .dk .fy { fill: color-mix(in srgb, var(--solar) 45%, var(--tile)); }
.dk .scr { fill: #0C1729; } .dk text.tg { fill: #5BE08A; font-size: 10px; } .dk .rb { fill: var(--blue-2); stroke: none; } .dk .ri { fill: var(--c); stroke: none; }
.dk .fig-svg { stroke-width: 1.4; }
.dk .dr { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease calc(var(--i) * .5s); }
.dk.art-ready:not(.in) .dr { stroke-dashoffset: 1; }
.dk-cell { --i: 0; }
@media (max-width: 720px) { .dk-row { gap: 8px; align-items: start; } .dk-cell { align-content: start; } .dk-cell figcaption { flex-direction: column; align-items: center; gap: 1px; font-size: .74rem; line-height: 1.25; } }
@media (prefers-reduced-motion: reduce) { .iso-car, .ps-cell, .ps-car { animation: none; } .ps-car { left: 62.5%; } .iso-car.b { display: none; } }

/* home hero: a blueprint sheet behind the words, and a glass editor whose code runs along wires into the drawing window (chosen 5 Nov 2026) */
.hero-bp .hero-top { position: relative; }
.hero-bp .hero-split .cad { align-self: stretch; }
.bp-sheet { position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); top: -300px; bottom: calc(-1 * clamp(14px, 1.7vw, 24px)); overflow: hidden; pointer-events: none; background-color: #0C4596;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(165deg, #0E52B0 0%, #0B3F8C 55%, #0A3373 100%);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px, auto; border-bottom: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 18px 40px -22px rgba(10, 40, 90, .55); }
.bp-art { position: absolute; left: 50%; top: 210px; width: 1440px; height: auto; translate: -50% 0; fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.bp-art .d { stroke-dasharray: 4 5; } .bp-art .c { stroke-dasharray: 18 5 3 5; }
.bp-art text { fill: rgba(255, 255, 255, .62); stroke: none; font: 500 11px var(--f-mono); }
.hero-bp .hero-top h1 { color: #fff; }
.hero-bp .hero-top h1 em { background: none; color: #7DE3FF; }
.hero-bp .hero-side p { color: #E6EEFB; }
.hero-bp .hero-top .chip { background: #071B3F; color: #fff; border-color: rgba(255, 255, 255, .2); }
.hero-bp .hero-top .chip i { background: #5FD823; box-shadow: 0 0 0 4px color-mix(in srgb, #5FD823 22%, transparent); }
.hero-bp .hero-side .btn-dark { background: #fff; color: #071B3F; box-shadow: 0 12px 26px -12px rgba(2, 12, 34, .7); }
.hero-bp .hero-side .btn-dark svg { color: #071B3F; }
.hero-bp .hero-side .btn-dark:hover { background: #E6F1FE; color: #071B3F; }
.hero-bp .hero-side .btn-light { background: #071B3F; color: #fff; border-color: rgba(255, 255, 255, .28); }
.hero-bp .hero-side .btn-light:hover { background: #0E2A5C; color: #fff; border-color: rgba(255, 255, 255, .6); }
.hero-bp .hero-side a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hc-tr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: none; }
.hc-tr .b { stroke: rgba(255, 255, 255, .34); stroke-width: 1.1; }
.hc-tr .p { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 12 400; stroke-dashoffset: 12; }
.hc-tr .p.go { animation: hc-go .95s cubic-bezier(.4, 0, .5, 1) forwards; }
@keyframes hc-go { to { stroke-dashoffset: -100; } }
.hc-tr .pad { fill: rgba(255, 255, 255, .45); transition: fill .25s; } .hc-tr .pad.lit { fill: var(--pc); }
.hc { min-width: 0; margin-top: -6px; overflow: hidden; border-radius: 14px; font: 500 .78rem/1.6 var(--f-mono); color: #EEF4FF; background: #071B3F; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 18px 36px -20px rgba(3, 18, 48, .8); }
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.hc-file { color: #fff; font-weight: 600; font-size: .68rem; line-height: 1.5; }
.hc-run { display: inline-flex; align-items: center; gap: 6px; color: #EEF4FF; font-size: .64rem; line-height: 1.5; white-space: nowrap; }
.hc-run i { width: 7px; height: 7px; border-radius: 50%; background: #5FD823; box-shadow: 0 0 8px #5FD823; }
.hc-lines { padding: 6px 12px 7px; }
.hc-l { display: flex; height: 1.6em; white-space: pre; }
.hc-no { flex: none; width: 12px; margin-right: 10px; text-align: right; color: rgba(255, 255, 255, .5); }
.hc-t { display: block; width: 0; overflow: hidden; }
.hc-l.on .hc-t { width: calc(var(--n) * 1ch + 1px); transition: width calc(var(--n) * 28ms) steps(24); }
.hc-l.typing .hc-t { box-shadow: 2px 0 0 #fff; }
.hc .k { color: #FFD84D; } .hc .f { color: #7DE3FF; }
.hc-bar { height: 3px; background: rgba(255, 255, 255, .12); }
.hc-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #5FD823; transition: width .45s; }

/* survey drawings: more ink colours, and the slanted hydrographic sounding (added 5 Nov 2026) */
.fig-svg text.tg { fill: var(--aci-green); } .fig-svg text.to { fill: var(--aci-orange); } .fig-svg text.tb { fill: var(--aci-blue); } .fig-svg text.tm { fill: var(--aci-magenta); }
.fig-svg text.sd { font-size: 10px; font-style: italic; } .fig-svg text.sd tspan { font-size: 6.5px; }
.fig-svg .hd { stroke-dasharray: 5 3; }
.sv-stats { grid-column: 1 / -1; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-stats .tile { grid-column: auto; grid-row: auto; }
@media (max-width: 899px) { .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sv-stats .tile { padding: 16px; } }
.fig-svg text.hl { paint-order: stroke; stroke: var(--cad-bg); stroke-width: 3px; stroke-linejoin: round; }

/* web-based portals: the drawn browser pictures, the ideas list, and the Services menu's odd last item (5 Nov 2026) */
.fig-svg .uf { fill: var(--cad-chrome); stroke: var(--cad-line); stroke-width: 1; }
.fig-svg .ub { fill: var(--cad-bg); stroke: var(--cad-line); stroke-width: 1; }
.fig-svg .ul { stroke: var(--cad-line); stroke-width: .8; }
.mega[aria-label="Services"] .mega-grid > :last-child { grid-column: 1 / -1; }
.idea-split { display: grid; gap: 22px 40px; grid-template-columns: minmax(0, 1fr); }
.idea-split > div { display: grid; gap: 12px; justify-items: start; align-content: start; }
@media (min-width: 900px) { .idea-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.idea-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.idea-grid li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 2px 10px; }
.idea-grid li::before { content: ""; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--c); }
.idea-grid b { font-weight: 620; color: var(--ink); }
.idea-grid span { grid-column: 2; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
@media (max-width: 600px) { .idea-grid { grid-template-columns: minmax(0, 1fr); } }

/* 404 */
.nf-code { font: 650 clamp(4rem, 12vw, 8rem)/1 var(--f-mono); letter-spacing: -.06em; color: var(--blue); }

/* contact page: text and contact details on the left, a plain form on the right, no drawings */
.contact-split { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.contact-intro { display: grid; gap: 18px; align-content: start; min-width: 0; }
.contact-intro .crumbs { margin: 0; }
.hero.page .contact-intro h1 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); }
.contact-lede { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.contact-form { gap: 16px; min-width: 0; }
.contact-form h2 { font-size: 1.45rem; letter-spacing: -.02em; color: var(--ink); }
.contact-list { display: grid; align-content: start; margin: 0; min-width: 0; }
.contact-list > div { display: grid; gap: 7px; padding: 16px 0; border-top: 1px solid var(--line); }
.contact-list dt { font: 500 .76rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.contact-list dd { margin: 0; }
.contact-note { font-size: .94rem; color: var(--ink-3); }
@media (min-width: 900px) {
  .contact-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 22px; }
  .contact-form { grid-column: 2; grid-row: 1 / span 2; }
  .contact-list { grid-column: 1; grid-row: 2; }
}

/* picture viewer: tap any rolling picture to see it large */
.seq-slide { position: relative; }
.seq-art, .hl-seq .seq-slide img { cursor: zoom-in; }
.seq-zoom { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: zoom-in;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--tile) 90%, transparent); color: var(--ink); box-shadow: var(--shadow-1); }
.seq-zoom svg, .pv button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seq-zoom:focus-visible, .pv button:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
dialog.pv { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ground); color: var(--ink); }
dialog.pv[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
dialog.pv::backdrop { background: rgba(5, 10, 20, .6); }
.pv-top { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--tile); }
.pv-top p { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 9px; font: 500 .9rem/1.35 var(--f); color: var(--ink); }
.pv-top p b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--blue)) 86%, #000); color: #fff; font: 700 .76rem/1 var(--f); }
.pv button { appearance: none; flex: none; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--tile); color: var(--ink); font: 600 .85rem/1 var(--f); cursor: pointer; }
.pv button:disabled { opacity: .4; cursor: default; }
.pv [hidden] { display: none; }
.pv-stage { overflow: auto; overscroll-behavior: contain; background: var(--cad-bg); display: flex; cursor: grab; touch-action: pan-x pan-y pinch-zoom; }
.pv-stage:focus { outline: none; }
.pv-pic { flex: none; margin: auto; }
.pv-pic svg, .pv-pic img { display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; }
.pv-pic img { background: #fff; }
.pv-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--tile); }
.pv-bar .pv-z { min-width: 64px; font-variant-numeric: tabular-nums; }
.pv-bar .pv-gap { flex: 1; max-width: 40px; }
:root[data-theme="dark"] .pv-pic img { filter: brightness(.93); }

/* phone menu: the four Industries detail pages sit under "Industries", like the two solar pages under "Solar" */
@media (max-width: 860px) {
  .nav .mega-ind { display: block; padding: 0 0 4px 14px; }
  .nav .mega-ind :is(.mega-feature, small, .mi-dot, .mega-item:not(.mi-page)) { display: none; }
  .nav .mega-ind .mega-grid { display: block; }
  .nav .mega-ind .mega-item { display: block; padding: 11px 16px; border-radius: 12px; }
  .nav .mega-ind .mega-item b { font-weight: 500; font-size: .98rem; color: var(--ink-2); }
  .nav .mega-ind .mega-item b::before { content: "↳ "; color: var(--ink-3); }
  /* no drop-down shadow on these indented lists in the dark theme */
  .nav .nav-item > .mega:is(.mega-solar, .mega-ind) { box-shadow: none; }
}

/* phone menu while open: the button shows an X, the page behind dims (a tap on it closes the menu, bento.js),
   and the menu stays inside the screen, scrolling on its own when it is taller */
.menu-btn .ic-x { display: none; }
.head.open .menu-btn .ic-bars { display: none; }
.head.open .menu-btn .ic-x { display: block; }
@media (max-width: 860px) {
  .head.open::before { content: ""; position: fixed; inset: 0; background: rgba(8, 18, 36, .45); z-index: -1; }
  .nav { max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; }
}

/* desktop menus: Escape hides the open drop-down and leaves focus on its heading (bento.js) */
@media (min-width: 861px) { .has-mega.shut > .mega { display: none !important; } }

/* closing banner: call and WhatsApp chips are links */
.cta-meta a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34); color: #fff; text-decoration: none; transition: background .2s; }
.cta-meta a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5FD823; box-shadow: 0 0 0 3px rgba(95, 216, 35, .25); }
.cta-meta a:hover { background: rgba(255, 255, 255, .24); }
.cta-meta a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) { .cta-meta a { min-height: 40px; padding: 8px 12px; } }

/* step-bar names: a two-word name may wrap onto two lines instead of touching its neighbour (review round 2, item 16) */
.seq-steps button { padding-inline: 3px; align-content: start; }
.seq-steps button span { white-space: normal; text-align: center; text-wrap: balance; max-width: 100%; }

/* big-number tiles sit two by two on phones; an odd last tile runs full width (review round 2, item 17) */
@media (max-width: 680px) {
  .bento:has(> .fig-num) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bento:has(> .fig-num) > .tile { grid-column: 1 / -1; }
  .bento > .tile.fig-num { grid-column: span 1; padding: 16px; gap: 8px; }
  .bento > .fig-num:nth-child(odd of .fig-num):nth-last-child(1 of .fig-num) { grid-column: 1 / -1; }
  .fig-num p { font-size: .9rem; line-height: 1.45; }
  .fig-num b { font-size: 2.2rem; }
  .fig-num b small { white-space: nowrap; }
}

/* the wide (520-unit) sector drawings: labels drawn larger on phones so they read at about 10px (review round 2, item 18) */
@media (max-width: 680px) { svg.ill[viewBox^="0 0 520"] text { font-size: 14px; } }

/* phones: a highlight card shows its label, name and pitch first, then the picture and step bar, then the bullets (review round 2, item 32) */
@media (max-width: 719px) {
  .hl-row .work-split { gap: 12px; }
  .hl-row .work-split > div { display: contents; }
  .hl-row .work-split > div > * { order: 1; }
  .hl-row .work-split > .hl-pic { order: 2; margin: 6px 0 4px; }
  .hl-row .work-split > div > .ticks, .hl-row .work-split > div > .ticks ~ * { order: 3; }
}

/* detail pages (survey, QxCAD, RCC, bridge) on desktop: the drawing takes the wider column, the text sits centred beside it in one column (review round 2, item 33) */
@media (min-width: 900px) {
  .detail-page .hl-row .work-split.text-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .detail-page .hl-row .ticks.two { grid-template-columns: minmax(0, 1fr); }
}

/* QxCAD: the trademark credit as a smaller line under the opening buttons (review round 2, item 35) */
.hero-side p.hero-credit { font-size: .86rem; line-height: 1.5; color: var(--ink-3); margin-top: -6px; }

/* phones: 'Start a project' keeps its own row and the smaller opening buttons share the next one (review round 2, item 48) */
@media (max-width: 480px) { .hero .btn-row > .btn.btn-light { flex: 1 1 0; min-width: 0; } }

/* dark theme: CAD screenshots reversed, as AutoCAD looks on a dark background (layer colours kept by the hue turn).
   The white fill behind a loading picture is reversed with it. Pictures marked data-keep (already dark, or a photo) stay as they are */
:root[data-theme="dark"] .hl-pic img:not([data-keep]),
:root[data-theme="dark"] .pv-pic img:not([data-keep]),
:root[data-theme="dark"] .tile.shot img:not([data-keep]) { filter: invert(.9) hue-rotate(180deg); }

/* ground-mount: a row of links to each tool card, and the longer tick lists folded after four */
.hl-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px; }
.hl-jump a { font: 500 .8rem/1 var(--f-mono); color: var(--ink-2); background: var(--tile); border: 1px solid var(--line); padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.hl-jump a:hover { color: var(--blue); border-color: var(--blue); }
.hl-jump a:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.more-ticks { margin-top: 10px; }
.more-ticks summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font: 600 .92rem/1.2 var(--f); color: var(--blue); padding: 6px 0; }
.more-ticks summary::-webkit-details-marker { display: none; }
.more-ticks summary::after { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tile-2); border: 1px solid var(--line); font: 500 .95rem/1 var(--f-mono); }
.more-ticks[open] summary::after { content: '\2212'; }
.more-ticks summary:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; border-radius: 6px; }
.more-ticks ul { margin-top: 8px; }

/* Work: sector links that jump to each project card */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 24px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line); box-shadow: var(--shadow-1); font: 600 .86rem/1 var(--f); color: var(--ink-2); text-decoration: none; transition: border-color .2s, color .2s; }
.jump a i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.jump a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
@media (max-width: 680px) { .jump { margin-top: -4px; } .jump a { min-height: 36px; padding: 0 12px 0 10px; font-size: .84rem; } }

/* Services: platforms as a 3 by 3 badge grid on phones, three per row on tablets */
@media (max-width: 680px) {
  #platforms.svc-plat .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #platforms.svc-plat .tile:not(.port) { grid-column: auto; padding: 14px 6px 12px; align-items: center; text-align: center; gap: 8px; border-radius: 16px; }
  #platforms.svc-plat .tile:not(.port) .tile-top { justify-content: center; }
  #platforms.svc-plat .tile:not(.port) .tile-top .label, #platforms.svc-plat .tile:not(.port) p { display: none; }
  #platforms.svc-plat .tile:not(.port) .ico { width: 38px; height: 38px; border-radius: 11px; }
  #platforms.svc-plat .tile:not(.port) h3 { font-size: .9rem; line-height: 1.2; }
  #platforms.svc-plat .tile.port { grid-column: 1 / -1; }
}
@media (min-width: 681px) and (max-width: 1080px) {
  #platforms.svc-plat .bento > .tile:not(.port) { grid-column: span 2; }
  #platforms.svc-plat .tile:not(.port) .tile-top { flex-wrap: wrap; gap: 10px; }
  #platforms.svc-plat .tile:not(.port) .tile-top .label { flex-basis: 100%; }
}
/* Services: deliverable cards with the icon beside the heading on phones */
@media (max-width: 680px) {
  #deliverables .tile:not(:has(.ind-split)) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px; align-items: start; }
  #deliverables .tile:not(:has(.ind-split)) .tile-top { grid-row: 1 / 3; }
  #deliverables .tile:not(:has(.ind-split)) .ico { width: 40px; height: 40px; border-radius: 12px; }
  #deliverables .tile:not(:has(.ind-split)) h3 { font-size: 1.1rem; }
  #deliverables .tile:not(:has(.ind-split)) p { font-size: .95rem; }
}

/* Work and Services: short card text sits centred beside the taller picture */
@media (min-width: 900px) { :is(#projects, #portals) .hl-row .work-split { align-items: center; } }

/* Services: the two time-saved results side by side between phone and computer widths */
@media (min-width: 560px) and (max-width: 899px) { .est-out { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: end; } .est-out > :is(p, a) { grid-column: 1 / -1; } }

/* Industries: sector jump buttons in the hero (review item 43) */
.ind-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.ind-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line); font: 500 .84rem/1 var(--f); color: var(--ink-2); text-decoration: none; transition: border-color .2s, color .2s; }
.ind-jump a i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }
.ind-jump a:hover { border-color: var(--c); color: var(--ink); }
@media (max-width: 700px) { .ind-jump a { min-height: 40px; } }

/* About: short client quotes inside cards (review item 44) */
.ab-quote { margin: 4px 0 0; display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--tile-2); border: 1px solid var(--line); }
.ab-quote blockquote { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.ab-quote figcaption { font-size: .84rem; color: var(--ink-3); }
.ab-quote figcaption b { color: var(--ink-2); font-weight: 600; }
.ab-quote figcaption a { color: var(--blue-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ab-quote figcaption a:hover { text-decoration: underline; }

/* Industries: on narrow screens show each card's drawing before the lists (review item 45).
   Scoped with :has(.ind-cols) so the other .ind-split cards on Services and Rooftop solar keep their layout. */
@media (max-width: 959px) {
  .ind-split:has(.ind-cols) { gap: 14px; }
  .ind-split:has(.ind-cols) > div:first-child { display: contents; }
  .ind-split:has(.ind-cols) > div:last-child { order: 1; margin: 6px 0 4px; }
  .ind-split:has(.ind-cols) .ind-cols { order: 2; }
}

/* contact form: box edges that can be made out on white and on navy (about 3:1); the blue focus edge and the red error edge still win */
:root { --field-line: #7C899E; }
:root[data-theme="dark"] { --field-line: #6A7A95; }
.field :is(input, select, textarea) { border-color: var(--field-line); }
.field :is(input, select, textarea):focus { outline: 2px solid transparent; outline-offset: 2px; }
@media (forced-colors: active) {
  .field :is(input, select, textarea):focus { outline: 2px solid Highlight; }
}

/* detail pages: each tool card shows four bullets; the rest open in place (native details, works without scripts) */
.tick-more { margin-top: 2px; }
.tick-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 .95rem/1 var(--f); color: var(--ink); border-radius: 8px; }
.tick-more summary::-webkit-details-marker { display: none; }
.tick-more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.tick-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.tick-more summary:hover { color: var(--blue); }
.tick-more summary:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }
.hl-row .tick-more > .ticks { margin-top: 2px; }

/* print and save as PDF: a white page with dark text; the header bar, WhatsApp button, step buttons, picture viewer buttons and footer drawing stay off.
   bento.js switches a dark page to the light theme and opens every '<n> more' list while printing; the colours below cover a browser that skips that */
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root[data-theme="dark"] { color-scheme: light; --ground: #fff; --tile: #fff; --tile-2: #F7F9FC; --ink: #0C1729; --ink-2: #44526A; --ink-3: #4A566B; --line: #E2E7EF; --line-2: #D3DAE5; --blue: #0B5CAD; --blue-2: #2F80E2; }
  html, body { background: #fff !important; }
  body::before, main > :is(.hero, .section)::before { display: none !important; }
  .skip, .head, .wa-btn, .seq-steps, .seq-zoom, dialog.pv, .foot-scene .scene, .ft-band, .ft-social, .tick-more > summary { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile { box-shadow: none !important; break-inside: avoid; }
  .seq-track { overflow: hidden !important; }
  .seq-slide:not(:first-child) { display: none !important; }
  .foot-scene, .foot-scene[data-mode="night"] { background: #fff !important; border-top: 1px solid #D3DAE5; }
  .foot-scene[data-mode="night"]::before { display: none; }
  .foot-scene[data-mode="night"] :is(.ft-lead p, .ft-contact a, .ft-contact small, .ft-col h2, .ft-col a, .ft-bottom, .ft-bottom a) { color: #0C1729 !important; }
  .foot-scene .ft-bottom { margin-top: 16px; }
}

/* the page behind the open phone menu does not scroll */
@media (max-width: 860px) { html:has(.head.open) { overflow: hidden; } }

@media (max-width: 360px) { .mail-row { flex-wrap: wrap; row-gap: 6px; } }

.hl-seq .seq-zoom { top: auto; bottom: 7px; right: 8px; }
.hl-seq .seq-slide figcaption { padding-right: 52px; }

.cta-meta span { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); color: #fff; }
.cta-meta a::after { content: "\2192"; opacity: .75; }
@media (max-width: 720px) { .cta-meta > * { flex: 1 1 auto; justify-content: center; } .cta-meta span { min-height: 40px; padding: 8px 12px; } }

@media (max-width: 680px) { .code-pre { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } }

.dk-cell figcaption b { white-space: nowrap; }

@media (max-width: 360px) { .mail-foot { flex-wrap: wrap; } }

.solar-ticks ~ .ill { margin-block: auto; }

@media (min-width: 901px) { .ft-top > .ft-lead { align-self: start; } }