/* ==========================================================================
   POMEC Engineering — site styles
   Mobile-first. Breakpoints: 640 / 960 / 1200.
   ========================================================================== */

/* ---------- Fonts: self-hosted latin subsets (SIL Open Font License) ---------- */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  src: url(../fonts/archivo-var.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: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/plex-sans-var.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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/plex-mono-500.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: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/plex-mono-600.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;
}

:root {
  /* Brand */
  --navy-950: #0A1428;
  --navy-900: #0E1A33;
  --navy-800: #14254A;
  --navy-700: #1D3361;
  --navy-600: #2A4680;
  --orange-500: #F26A1F;
  --orange-600: #D9570F;
  --orange-ink: #B84A0B;      /* orange for text on light surfaces (AA) */
  --steel-50: #F5F7FA;
  --steel-100: #ECEFF4;
  --steel-200: #DDE2EA;
  --steel-300: #C3CAD5;
  --steel-500: #6A7586;
  --steel-600: #4F5A6A;
  --steel-700: #39424F;

  /* Semantic */
  --bg: #FFFFFF;
  --surface: var(--steel-50);
  --ink: var(--navy-900);
  --ink-soft: #3E4A5C;
  --ink-mute: var(--steel-600);
  --line: var(--steel-200);
  --accent: var(--orange-500);
  --on-accent: var(--navy-950);
  --focus: var(--orange-500);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Space (4pt base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(4rem, 9vw, 8rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1240px;

  --radius: 4px;
  --shadow-1: 0 1px 2px rgba(14, 26, 51, .06), 0 2px 8px rgba(14, 26, 51, .06);
  --shadow-2: 0 10px 30px -10px rgba(14, 26, 51, .28);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  /* Micro-interaction language: things glide in (expo), small parts settle with a touch of spring */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-quick: cubic-bezier(.5, 0, .75, 0);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;

  /* House photo grade: one treatment for every photo so stock reads as one shoot */
  --grade: saturate(.78) contrast(1.07) brightness(.97);
  --tint: linear-gradient(160deg, rgba(20, 37, 74, .55) 0%, rgba(20, 37, 74, .12) 55%, rgba(242, 106, 31, .28) 100%);

  --header-h: 72px;
  --z-header: 100;
  --z-nav: 110;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--accent); color: var(--on-accent); padding: .75rem 1rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--fill { stroke: none; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow--light { color: var(--orange-500); }

.display {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  font-weight: 760;
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  line-height: .98;
  letter-spacing: -.025em;
}
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 720;
  font-variation-settings: "wdth" 112;
  letter-spacing: -.02em;
}
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 680; font-variation-settings: "wdth" 106; }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-mute); }
.accent-text { color: var(--orange-500); }
.mono { font-family: var(--font-mono); }

/* Section heading pattern: drawing-sheet label + title */
.sheet-head { display: grid; gap: var(--s-5); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sheet-head__ref {
  display: flex; align-items: center; gap: var(--s-4);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.sheet-head__ref .num { color: var(--orange-ink); }
.sheet-head__ref::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--steel-300) 0 1px, transparent 1px 12px) bottom/100% 7px no-repeat,
              linear-gradient(var(--steel-300), var(--steel-300)) bottom/100% 1px no-repeat;
  height: 7px;
}
.sheet-head--light .sheet-head__ref { color: var(--steel-300); }
.sheet-head--light .sheet-head__ref .num { color: var(--orange-500); }
.sheet-head--light .sheet-head__ref::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 12px) bottom/100% 7px no-repeat,
              linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)) bottom/100% 1px no-repeat;
}
@media (min-width: 960px) {
  .sheet-head--split { grid-template-columns: 1fr 1fr; align-items: end; column-gap: var(--s-8); }
  .sheet-head--split .sheet-head__ref { grid-column: 1 / -1; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .8rem 1.4rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius); cursor: pointer; touch-action: manipulation;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.btn .icon { transition: transform var(--t-med) var(--ease-out); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: var(--accent); }
.btn--primary:hover { --btn-bg: #FF7B30; --btn-bd: #FF7B30; }
.btn--dark { --btn-bg: var(--navy-900); --btn-fg: #fff; --btn-bd: var(--navy-900); }
.btn--dark:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); }
.btn--ghost { --btn-fg: var(--ink); --btn-bd: var(--steel-300); }
.btn--ghost:hover { --btn-bd: var(--ink); }
.btn--ghost-light { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--ghost-light:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.06); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;
  transition: background-size var(--t-med) var(--ease-out);
}
.link-arrow:hover { background-size: calc(100% - 1.75rem) 1.5px; }
.link-arrow .icon { color: var(--orange-500); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  color: #fff;
  transition: background-color var(--t-med) ease, box-shadow var(--t-med) ease, transform var(--t-med) var(--ease-out);
  --mark-navy: #fff;
}
.topbar {
  display: none;
  font-size: .82rem; color: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 38px; }
.topbar__note, .topbar__links a { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__links { display: flex; gap: 1.5rem; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .icon { width: 1rem; height: 1rem; color: var(--orange-500); }

.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
.brand__mark { width: 44px; height: auto; }
.brand__text { display: grid; gap: 5px; }
.brand__word { width: 124px; height: auto; color: currentColor; }
.brand__tag {
  font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: currentColor; opacity: .85; white-space: nowrap;
}
.brand__tag b { color: var(--orange-500); font-weight: 600; }

.site-header.is-solid {
  background: rgba(255,255,255,.97);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(14,26,51,.3);
  --mark-navy: var(--navy-800);
}
.site-header.is-solid .topbar { display: none; }
.site-header.is-solid .brand { color: var(--steel-600); }
.site-header.is-solid .brand__tag { color: var(--navy-800); opacity: 1; }
@supports (backdrop-filter: blur(8px)) {
  .site-header.is-solid { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(12px); }
}

.nav-toggle {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-right: -8px;
  background: none; border: 0; color: inherit; cursor: pointer; border-radius: var(--radius);
}
.nav-toggle .icon { width: 28px; height: 28px; grid-area: 1 / 1; transition: opacity var(--t-fast), transform var(--t-med) var(--ease-out); }
.nav-toggle .icon--close { opacity: 0; transform: rotate(-90deg); }
.nav-open .nav-toggle .icon--open { opacity: 0; transform: rotate(90deg); }
.nav-open .nav-toggle .icon--close { opacity: 1; transform: none; }

/* Mobile nav panel */
.site-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-nav);
  display: flex; flex-direction: column; gap: 2rem;
  padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--navy-900); color: #fff;
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--t-med) ease, transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.nav-open .site-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav-open { overflow: hidden; }
.nav-open .site-header { background: var(--navy-900); color: #fff; --mark-navy: #fff; box-shadow: none; }
.nav-open .site-header .brand { color: #fff; }
.nav-open .site-header .brand__tag { color: #fff; }
.site-nav__list { display: grid; }
.site-nav__list a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 650; font-variation-settings: "wdth" 110;
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-nav__list a[aria-current="page"] { color: var(--orange-500); }
.site-nav__cta { align-self: flex-start; }
.site-nav__meta { display: grid; gap: .75rem; margin-top: auto; color: rgba(255,255,255,.75); font-size: .95rem; }
.site-nav__meta a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; min-height: 44px; }
.site-nav__meta .icon { color: var(--orange-500); }

@media (min-width: 1100px) {
  .topbar { display: block; }
  .nav-toggle { display: none; }
  .site-nav {
    position: static; inset: auto; flex-direction: row; align-items: center; gap: 1.75rem;
    padding: 0; background: none; color: inherit; overflow: visible;
    visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .site-nav__list { display: flex; gap: .25rem; }
  .site-nav__list a {
    position: relative; min-height: 44px; padding: 0 .8rem; border: 0;
    font-family: var(--font-body); font-size: .97rem; font-weight: 500; font-variation-settings: normal;
  }
  .site-nav__list a::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 6px; height: 2px;
    background: var(--orange-500); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-med) var(--ease-out);
  }
  .site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav__list a[aria-current="page"] { color: inherit; }
  .site-nav__contact { display: none; }
  .site-nav__meta { display: none; }
  .site-nav__cta { min-height: 44px; padding: .65rem 1.1rem; font-size: .95rem; }
}
@media (max-width: 1099.98px) { .site-nav__list .site-nav__contact { display: block; } }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; min-height: 100dvh;
  display: grid; align-items: end;
  color: #fff; background: var(--navy-900);
  overflow: hidden;
}
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { z-index: -2; }
.hero__media img { object-fit: cover; object-position: 30% 50%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,20,40,.72) 0%, rgba(10,20,40,.2) 30%, rgba(10,20,40,.55) 60%, rgba(10,20,40,.94) 100%),
    linear-gradient(90deg, rgba(10,20,40,.55) 0%, rgba(10,20,40,0) 70%);
}
.hero__lines { position: absolute; top: 0; right: 0; width: min(46vw, 560px); z-index: -1; opacity: .85; pointer-events: none; }
.hero__content { padding-block: calc(var(--header-h) + 3rem) clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1.75rem; }
.hero__title { max-width: 14ch; }
.hero__title em { font-style: normal; color: var(--orange-500); }
.hero__lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: rgba(255,255,255,.88); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero__strip li { padding: 1rem 1rem 0 0; display: grid; gap: .2rem; }
.hero__strip .k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.hero__strip .v { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; font-variation-settings: "wdth" 108; }
@media (min-width: 960px) {
  .hero__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__strip li { padding: 1.25rem 1.5rem 0 0; }
  .hero__strip li + li { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,.18); }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative; isolation: isolate; color: #fff; background: var(--navy-900); overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(4rem, 9vw, 7rem)) clamp(3rem, 6vw, 5rem);
}
.page-hero__media, .page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero__media { z-index: -2; }
.page-hero__media img { object-fit: cover; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,20,40,.95) 0%, rgba(10,20,40,.82) 45%, rgba(10,20,40,.45) 100%);
}
.page-hero__inner { display: grid; gap: 1.5rem; }
.page-hero__inner > * { max-width: 820px; }
.page-hero .lead { color: rgba(255,255,255,.85); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--orange-500); }

/* Diagonal band (from letterhead) */
.slash-band {
  position: relative; height: 44px; background: var(--navy-900); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.slash-band::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 38%;
  background: var(--orange-500); clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%);
}
.slash-band span {
  position: relative; z-index: 1; margin-right: 20%;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; color: rgba(255,255,255,.8);
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--navy-900); color: #fff; }
.section--dark .lead, .section--dark .muted { color: rgba(255,255,255,.78); }
.section--tight-top { padding-top: clamp(2.5rem, 5vw, 4rem); }

.blueprint {
  background-color: var(--navy-900);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

/* Intro statement */
.statement { display: grid; gap: var(--s-6); }
.statement__text { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 560; font-variation-settings: "wdth" 104; line-height: 1.2; letter-spacing: -.015em; }
.statement__text span { color: var(--steel-500); }
@media (min-width: 960px) { .statement { grid-template-columns: 1fr 2.4fr; align-items: start; } }

/* ---------- Lifecycle (Design → Supply → Install → Maintain) ---------- */
.lifecycle { position: relative; display: grid; gap: 0; counter-reset: stage; }
.stage {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 0 1.25rem;
  padding-bottom: 2.25rem;
}
.stage::before {
  content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px;
  background: repeating-linear-gradient(var(--steel-300) 0 6px, transparent 6px 12px);
}
.stage:last-child::before { display: none; }
.stage__node {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; border: 2px solid var(--navy-800); color: var(--navy-800);
  position: relative; z-index: 1;
}
.stage__node .icon { width: 24px; height: 24px; }
.stage:nth-child(4) .stage__node { border-color: var(--orange-500); color: var(--orange-ink); }
.stage__body { padding-top: .35rem; display: grid; gap: .5rem; }
.stage__num { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; color: var(--orange-ink); font-weight: 600; }
.stage__title { font-size: 1.35rem; font-variation-settings: "wdth" 110; }
.stage__text { color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 960px) {
  .lifecycle { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .stage { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 0; }
  .stage::before {
    left: 64px; right: -2rem; top: 27px; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, var(--steel-300) 0 6px, transparent 6px 12px);
  }
}

/* ---------- Discipline cards ---------- */
.disciplines { display: grid; gap: 1rem; }
@media (min-width: 640px) { .disciplines { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .disciplines { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.dcard {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; padding: 1.75rem; color: #fff; text-decoration: none; overflow: hidden;
  border-radius: var(--radius); background: var(--navy-800);
}
.dcard__media { position: absolute; inset: 0; z-index: -2; }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo), filter .9s var(--ease-expo); }
.dcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,20,40,.15) 0%, rgba(10,20,40,.55) 45%, rgba(10,20,40,.96) 100%);
  transition: background-color var(--t-med);
}
.dcard:hover .dcard__media img { transform: scale(1.06); }
.dcard__code {
  position: absolute; top: 1.25rem; left: 1.75rem; right: 1.75rem; display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
.dcard__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-500); color: var(--navy-950); margin-bottom: 1.25rem; }
.dcard__icon .icon { width: 22px; height: 22px; }
.dcard h3 { font-size: 1.55rem; font-variation-settings: "wdth" 108; margin-bottom: .6rem; }
.dcard p { color: rgba(255,255,255,.82); font-size: .98rem; margin-bottom: 1.25rem; }
.dcard__more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; }
.dcard__more .icon { color: var(--orange-500); transition: transform var(--t-med) var(--ease-out); }
.dcard:hover .dcard__more .icon { transform: translateX(4px); }

/* ---------- Split feature ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.split__body { display: grid; gap: 1.5rem; align-content: start; }
.figure { position: relative; margin: 0; }
.figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--steel-100); }
.figure--wide img { aspect-ratio: 4 / 3; }
.figure__tag {
  position: absolute; left: -1px; bottom: 1.5rem;
  background: var(--navy-900); color: #fff; padding: 1rem 1.25rem; max-width: 80%;
  border-left: 4px solid var(--orange-500);
}
.figure__tag .k { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300); }
.figure__tag .v { font-family: var(--font-display); font-size: 1.15rem; font-weight: 650; font-variation-settings: "wdth" 108; }
.figure__frame { position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1.5px solid var(--orange-500); border-radius: var(--radius); z-index: -1; }
.figure-wrap { position: relative; isolation: isolate; }
@media (max-width: 639.98px) { .figure__frame { inset: .75rem -.5rem -.75rem .75rem; } }

.checklist { display: grid; gap: .9rem; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: .75rem; align-items: start; }
.checklist .icon { width: 22px; height: 22px; margin-top: .2rem; color: var(--orange-ink); stroke-width: 2.25; }
.section--dark .checklist .icon { color: var(--orange-500); }
.checklist strong { display: block; font-weight: 600; }
.checklist span { color: var(--ink-mute); font-size: .98rem; }
.section--dark .checklist span { color: rgba(255,255,255,.7); }

/* ---------- Sectors ---------- */
.sectors { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 640px) { .sectors { grid-template-columns: repeat(3, 1fr); } }
.sectors > li { display: flex; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sector {
  flex: 1; display: grid; gap: .75rem; align-content: start; padding: 1.5rem 1.25rem 1.75rem;
  text-decoration: none; transition: background-color var(--t-med);
}
.sector:hover { background: var(--surface); }
.sector:hover h3 { color: var(--orange-ink); }
.sector .icon { width: 30px; height: 30px; color: var(--navy-700); stroke-width: 1.5; }
.sector h3 { font-size: 1.1rem; font-variation-settings: "wdth" 106; }
.sector p { color: var(--ink-mute); font-size: .92rem; line-height: 1.55; }

/* ---------- Reach map ---------- */
.reach { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .reach { grid-template-columns: 1fr 1.2fr; } }
.reach__map { width: 100%; height: auto; }
.reach__map .land { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 4; }
.reach__map .route { fill: none; stroke: var(--orange-500); stroke-width: 1.5; opacity: .85; }
.reach__map .node { fill: var(--navy-900); stroke: #fff; stroke-width: 1.5; }
.reach__map .hub { fill: var(--orange-500); }
.reach__map .hub-ring { fill: none; stroke: var(--orange-500); stroke-width: 1.5; transform-origin: center; transform-box: fill-box; }
.reach__map text { fill: rgba(255,255,255,.88); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; }
.reach__map .hub-label { fill: #fff; font-size: 13px; font-weight: 600; }
.reach__map .grid-line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.reach__map .coord { fill: rgba(255,255,255,.62); font-size: 10px; }
.countries { display: flex; flex-wrap: wrap; gap: .5rem; }
.countries li {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; padding: .45rem .8rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: rgba(255,255,255,.9);
}
.countries li.is-hq { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-950); font-weight: 600; }

/* ---------- Project cards ---------- */
.projects-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .projects-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.pcard { display: grid; gap: 1rem; align-content: start; text-decoration: none; }
.pcard__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--steel-100); }
.pcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-expo), filter .9s var(--ease-expo); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__tag {
  position: absolute; top: 1rem; left: 1rem; padding: .35rem .7rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.94); color: var(--navy-900); border-radius: 2px;
}
.pcard__meta { display: flex; gap: 1rem; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.pcard__meta span + span::before { content: "·"; margin-right: 1rem; color: var(--orange-ink); }
.pcard h3 { font-size: 1.3rem; font-variation-settings: "wdth" 106; line-height: 1.2; }
.pcard p { color: var(--ink-soft); font-size: .98rem; }
.pcard__scope { display: flex; flex-wrap: wrap; gap: .4rem; }
.pcard__scope li { font-size: .78rem; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-soft); }
.pcard[hidden] { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filter {
  min-height: 44px; padding: .55rem 1.1rem; border: 1.5px solid var(--steel-300); border-radius: 999px;
  background: #fff; font-size: .92rem; font-weight: 500; cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.filter:hover { border-color: var(--navy-800); }
.filter[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.filter-status { margin-bottom: 1.5rem; color: var(--ink-mute); font-size: .92rem; }

/* ---------- Portfolio sector cards ---------- */
.sector-cards { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .sector-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sector-cards { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; } }
.scard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 1.5rem); transition: box-shadow var(--t-med), border-color var(--t-med); }
.scard:hover { box-shadow: var(--shadow-2); border-color: transparent; }
.scard__media { position: relative; background: var(--steel-100); }
.scard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.scard__icon { position: absolute; left: 1.5rem; bottom: -24px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-500); color: var(--navy-950); border: 3px solid #fff; z-index: 1; }
.scard__icon .icon { width: 22px; height: 22px; }
.scard__body { display: grid; gap: .75rem; align-content: start; padding: 2.25rem 1.5rem 1.75rem; flex: 1; }
.scard h3 { font-size: 1.35rem; font-variation-settings: "wdth" 108; }
.scard p { color: var(--ink-soft); font-size: .98rem; }
.scard__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.scard__tags li { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .6rem; background: var(--steel-100); color: var(--navy-800); border-radius: 2px; }
.section--surface .pcard__scope li { background: #fff; }

/* ---------- Image band ---------- */
.image-band { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--navy-900); }
.image-band__media, .image-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.image-band__media { z-index: -2; }
.image-band__media img { object-fit: cover; }
.image-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,20,40,.92) 0%, rgba(10,20,40,.7) 55%, rgba(10,20,40,.35) 100%); }
.image-band__inner { padding-block: clamp(5rem, 12vw, 9rem); display: grid; gap: 1.5rem; }
.image-band__inner > * { max-width: 720px; }

/* ---------- Service detail (services page) ---------- */
.service { padding-block: var(--section); border-top: 1px solid var(--line); }
.service:first-of-type { border-top: 0; }
.service__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.service__code { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); font-weight: 600; }
.service__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 960px) {
  .service__head { grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: 4rem; }
  .service__grid { grid-template-columns: 1fr 1.25fr; align-items: start; }
  .service--flip .service__grid > :first-child { order: 2; }
}
.service__media { position: relative; display: grid; gap: 1rem; grid-template-columns: 1.4fr 1fr; align-items: start; }
.service__media img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--steel-100); }
.service__media .ph:last-child { margin-top: 3rem; }
.capabilities { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .capabilities { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.cap { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.cap .icon { width: 26px; height: 26px; color: var(--navy-700); stroke-width: 1.5; margin-top: .15rem; }
.cap h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; margin-bottom: .25rem; }
.cap p { font-size: .94rem; color: var(--ink-mute); line-height: 1.55; }
.dsim { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.dsim li {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--steel-100); border-radius: 2px; color: var(--navy-800);
}
.dsim .icon { width: 16px; height: 16px; color: var(--orange-ink); stroke-width: 2.25; }

.service-nav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .service-nav { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); } }
.service-nav ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.service-nav ul::-webkit-scrollbar { display: none; }
.service-nav a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 56px; padding: 0 1rem; white-space: nowrap;
  font-weight: 500; font-size: .95rem; text-decoration: none; color: var(--ink-soft);
  border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.service-nav a:hover { color: var(--ink); }
.service-nav a.is-active { color: var(--ink); border-color: var(--orange-500); }
.service-nav .icon { width: 18px; height: 18px; color: var(--orange-ink); }

/* ---------- Maintenance plans ---------- */
.plans { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem 1.75rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.plan--featured { background: var(--navy-900); color: #fff; border-color: var(--navy-900); box-shadow: var(--shadow-2); }
.plan__badge {
  position: absolute; top: -12px; left: 1.75rem; padding: .3rem .7rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--orange-500); color: var(--navy-950); border-radius: 2px;
}
.plan__code { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); font-weight: 600; }
.plan--featured .plan__code { color: var(--orange-500); }
.plan h3 { font-size: 1.6rem; font-variation-settings: "wdth" 110; }
.plan > p { color: var(--ink-mute); font-size: .98rem; }
.plan--featured > p { color: rgba(255,255,255,.75); }
.plan .checklist { gap: .7rem; font-size: .96rem; }
.plan .checklist .icon { width: 20px; height: 20px; }
.plan--featured .checklist .icon { color: var(--orange-500); }
.plan .checklist span { color: var(--ink-soft); font-size: inherit; }
.plan--featured .checklist span { color: rgba(255,255,255,.88); }
.plan .btn { margin-top: auto; align-self: flex-start; }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
@media (min-width: 960px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--navy-900); padding: 1.75rem 1.25rem; display: grid; gap: .5rem; align-content: start; }
.kpi .icon { width: 28px; height: 28px; color: var(--orange-500); stroke-width: 1.5; }
.kpi strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; font-variation-settings: "wdth" 108; }
.kpi span { color: rgba(255,255,255,.7); font-size: .94rem; line-height: 1.5; }

.process { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 640px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process { grid-template-columns: repeat(5, 1fr); } }
.process li { counter-increment: step; padding: 1.5rem 1.25rem; background: var(--surface); border-top: 3px solid var(--navy-800); display: grid; gap: .6rem; align-content: start; }
.process li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-weight: 600; font-size: .8rem; letter-spacing: .14em; color: var(--orange-ink); }
.process h3 { font-size: 1.15rem; font-variation-settings: "wdth" 106; }
.process p { font-size: .94rem; color: var(--ink-mute); line-height: 1.55; }

.scope-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .scope-grid { grid-template-columns: repeat(3, 1fr); } }
.scope { display: grid; gap: .75rem; align-content: start; padding: 2rem 1.75rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy-800); border-radius: var(--radius); }
.scope:nth-child(3) { border-top-color: var(--orange-500); }
.scope__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--navy-900); color: #fff; margin-bottom: .5rem; }
.scope__icon .icon { width: 22px; height: 22px; }
.scope__code { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.scope h3 { font-size: 1.4rem; font-variation-settings: "wdth" 108; margin-bottom: .5rem; }
.scope__list { display: grid; border-top: 1px solid var(--line); }
.scope__list li { position: relative; padding: .65rem 0 .65rem 1.25rem; border-bottom: 1px solid var(--line); font-size: .96rem; color: var(--ink-soft); line-height: 1.45; }
.scope__list li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 7px; height: 7px; background: var(--orange-500); transform: rotate(45deg); }

/* ---------- About ---------- */
.values { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .values { grid-template-columns: repeat(4, 1fr); } .values--five { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 640px) and (max-width: 1099.98px) { .values--five .value:last-child { grid-column: 1 / -1; } }
.value { background: #fff; padding: 2rem 1.5rem; display: grid; gap: .75rem; align-content: start; }
.value__letter { font-family: var(--font-display); font-size: 3rem; font-weight: 800; font-variation-settings: "wdth" 125; line-height: 1; color: var(--orange-500); }
.value h3 { font-size: 1.2rem; font-variation-settings: "wdth" 108; }
.value p { color: var(--ink-mute); font-size: .96rem; }

.standards { display: flex; flex-wrap: wrap; gap: .6rem; }
.standards li { padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 2px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--ink-soft); background: #fff; }

/* ---------- Contact ---------- */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 1000px) { .contact { grid-template-columns: 1fr 1.35fr; align-items: start; } }
.contact-cards { display: grid; gap: 1rem; }
.ccard {
  display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; padding: 1.25rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-med);
}
a.ccard:hover { border-color: var(--navy-800); box-shadow: var(--shadow-1); }
.ccard__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--navy-900); color: #fff; }
.ccard__icon .icon { width: 22px; height: 22px; }
.ccard--wa .ccard__icon { background: #1F8F4E; }
.ccard .k { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .2rem; }
.ccard .v { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }

.form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label, .field legend { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--orange-ink); }
.field .hint { font-size: .85rem; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem; font-size: 1rem;
  background: var(--steel-50); border: 1.5px solid var(--steel-300); border-radius: var(--radius);
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel-500); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-800); background-color: #fff; box-shadow: 0 0 0 3px rgba(242,106,31,.35); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C2261C; }
.field__error { display: none; align-items: center; gap: .4rem; color: #B3211A; font-size: .88rem; font-weight: 500; }
.field.has-error .field__error { display: flex; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; cursor: pointer;
  border: 1.5px solid var(--steel-300); border-radius: 999px; font-size: .92rem; font-weight: 500; background: #fff;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip span:hover { border-color: var(--navy-800); }
.chip input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.form__note { font-size: .85rem; color: var(--ink-mute); max-width: 40ch; }
.form-status { display: none; padding: 1rem 1.25rem; border-radius: var(--radius); font-weight: 500; }
.form-status.is-visible { display: flex; gap: .75rem; align-items: start; }
.form-status--ok { background: #E8F5EC; color: #14532D; border: 1px solid #A7D7B5; }
.form-status--err { background: #FDECEA; color: #8A1C14; border: 1px solid #F3B4AE; }
.form-status .icon { margin-top: .15rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px; padding: 1rem 0;
  font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.4rem; color: var(--orange-ink); transition: transform var(--t-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.25rem; color: var(--ink-soft); max-width: 70ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #fff; --mark-navy: #fff; }
.footer-cta { padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem); display: grid; gap: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-cta__title { font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 720; font-variation-settings: "wdth" 112; letter-spacing: -.02em; max-width: 20ch; }
.footer-cta__title span { color: var(--orange-500); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.title-block {
  display: grid; margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid rgba(255,255,255,.18);
}
.tb-cell { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.18); display: grid; gap: .9rem; align-content: start; }
.tb-cell:last-child { border-bottom: 0; }
.tb-label { display: block; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-500); }
.tb-list { display: grid; gap: .3rem; font-size: .96rem; color: rgba(255,255,255,.8); }
.tb-list a { text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.tb-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orange-500); }
.tb-contact li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; }
.tb-contact .icon { width: 18px; height: 18px; margin-top: .55rem; color: var(--orange-500); }
.tb-contact span { padding-block: .4rem; }
.tb-about { font-size: .95rem; color: rgba(255,255,255,.7); max-width: 38ch; }
.tb-brand .brand__word { width: 150px; }
.tb-brand .brand__mark { width: 54px; }
.tb-meta { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.tb-meta > div { padding: 1rem 1.5rem; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.tb-meta > div:nth-child(2n) { border-right: 0; }
.tb-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.tb-value { font-family: var(--font-mono); font-size: .85rem; color: rgba(255,255,255,.85); }
@media (min-width: 760px) {
  .title-block { grid-template-columns: 1.3fr 1fr 1fr; }
  .tb-cell { border-right: 1px solid rgba(255,255,255,.18); }
  .tb-brand { grid-row: span 2; }
  .tb-cell:nth-child(3) { border-right: 0; }
  .tb-cell:nth-child(4) { border-bottom: 0; }
  .tb-meta { border-right: 0; border-bottom: 0; }
}
@media (min-width: 1100px) {
  .title-block { grid-template-columns: 1.35fr 1fr 1fr 1.25fr .9fr; }
  .tb-brand { grid-row: auto; }
  .tb-cell { border-bottom: 0; }
  .tb-cell:nth-child(3) { border-right: 1px solid rgba(255,255,255,.18); }
  .tb-cell:nth-child(4) { border-right: 1px solid rgba(255,255,255,.18); }
  .tb-meta { grid-template-columns: 1fr; }
  .tb-meta > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18) !important; }
  .tb-meta > div:last-child { border-bottom: 0 !important; }
}
.footer-base { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding-block: 1.5rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.footer-base__coords { font-family: var(--font-mono); letter-spacing: .08em; }

/* ==========================================================================
   Micro-interactions — one quiet motion language, applied consistently
   ========================================================================== */

/* Buttons: a lighter tone sweeps in from the leading edge; arrows travel out and return */
.btn { position: relative; isolation: isolate; overflow: hidden; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform .5s var(--spring); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep, transparent);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .55s var(--ease-expo);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn--primary { --btn-sweep: #FF8A45; }
.btn--primary:hover { --btn-bg: var(--accent); --btn-bd: #FF8A45; }
.btn--dark { --btn-sweep: var(--navy-700); }
.btn--dark:hover { --btn-bg: var(--navy-900); }
.btn--ghost { --btn-sweep: var(--steel-100); }
.btn--ghost-light { --btn-sweep: rgba(255,255,255,.1); }
.btn--ghost-light:hover { --btn-bg: transparent; }
.btn:active { transform: scale(.975); transition-duration: .12s; }
@keyframes arrow-run {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(14px); opacity: 0; }
  41% { transform: translateX(-12px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.btn:hover svg:has(use[href="#i-arrow"]),
.link-arrow:hover svg:has(use[href="#i-arrow"]),
.dcard:hover .dcard__more svg,
.action-bar__primary:hover svg { animation: arrow-run .6s var(--ease-expo); }
.dcard:hover .dcard__more .icon { transform: none; }

/* Focus rings settle into place rather than snapping on */
@keyframes focus-in { from { outline-offset: 8px; outline-color: transparent; } }
:focus-visible { animation: focus-in .22s var(--ease-expo); }

/* Brand mark: the chevrons breathe apart on hover */
.brand__mark path { transition: transform .6s var(--spring); }
.brand:hover .mark-top { transform: translateY(-1.5px); }
.brand:hover .mark-v { transform: translateY(2.5px); }

/* Desktop nav: one indicator glides between items and rests on the current page */
.nav-indicator {
  position: absolute; left: 0; bottom: 6px; height: 2px; width: 1px; background: var(--orange-500);
  transform-origin: left; pointer-events: none; opacity: 0;
  transition: transform .45s var(--ease-expo), opacity .25s ease;
}
@media (min-width: 1100px) {
  .site-nav__list { position: relative; }
  .has-indicator .site-nav__list a::after { display: none; }
}
.service-nav ul { position: relative; }
.service-nav .nav-indicator { bottom: 0; }
.has-indicator.service-nav a.is-active { border-color: transparent; }

/* Header steps aside while reading down, returns on the way up; a hairline tracks progress */
.site-header.is-tucked { transform: translateY(-100%); }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange-500); transform: scaleX(var(--progress, 0)); transform-origin: left; opacity: 0;
  transition: opacity .3s ease;
}
.site-header.is-solid::after { opacity: 1; }
.service-nav { transition: top .45s var(--ease-expo); }
.header-tucked .service-nav { top: 0; }

/* Photos "develop" to natural colour under the cursor */
main img { transition: filter .9s var(--ease-expo), transform 1.2s var(--ease-expo); }
.ph::after, .figure::after, .pcard__media::after, .scard__media::after { transition: opacity .9s var(--ease-expo); }
@media (hover: hover) {
  .pcard:hover img, .scard:hover img, .figure-wrap:hover img, .dcard:hover img, .ph:hover img { filter: saturate(1) contrast(1.02); }
  .pcard:hover .pcard__media::after, .scard:hover .scard__media::after, .figure-wrap:hover .figure::after, .ph:hover::after { opacity: .3; }
  .figure__frame { transition: transform .9s var(--ease-expo); }
  .figure-wrap:hover .figure__frame { transform: translate(-8px, -8px); }
  .pcard h3, .scard h3 { transition: color .3s ease; }
  .pcard:hover h3, .scard:hover h3 { color: var(--navy-700); }
}

/* Form fields: an orange rule draws under the field; the label follows focus */
.field input, .field textarea {
  background-image: linear-gradient(var(--orange-500), var(--orange-500));
  background-repeat: no-repeat; background-position: left bottom; background-size: 0 2px;
  transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast), background-size .6s var(--ease-expo);
}
.field input:focus, .field textarea:focus { background-size: 100% 2px; box-shadow: 0 0 0 3px rgba(242,106,31,.18); }
.field label { transition: color .25s ease; }
.field:focus-within > label { color: var(--orange-ink); }
.chip span { transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform .4s var(--spring); }
.chip input:checked + span { transform: scale(1.03); }
.filter { transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform .4s var(--spring); }
.filter:active, .chip:active span { transform: scale(.96); }

/* FAQ and long lists open with their real height instead of jumping */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease-expo), content-visibility .5s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
.faq summary::after { transition: transform .5s var(--spring); }

/* Copy-to-clipboard on contact details */
.ccard-wrap { position: relative; }
.ccard-wrap .ccard { padding-right: 6.5rem; }
.copy-btn {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .4rem .7rem;
  font: 600 .78rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  opacity: 0; transition: opacity .25s ease, color .2s ease, border-color .2s ease, transform .4s var(--spring);
}
.copy-btn .icon { width: 15px; height: 15px; }
.ccard-wrap:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.is-done { opacity: 1; }
.copy-btn:hover { color: var(--ink); border-color: var(--steel-500); }
.copy-btn:active { transform: translateY(-50%) scale(.94); }
.copy-btn.is-done { color: #1F7A45; border-color: #A7D7B5; }
@media (hover: none) { .copy-btn { opacity: 1; } }
@media (max-width: 479.98px) {
  .ccard-wrap .ccard { padding-right: 3.75rem; }
  .copy-btn { width: 40px; padding: 0; justify-content: center; }
  .copy-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Mobile menu: items arrive in sequence with drawing-sheet numbers */
@media (max-width: 1099.98px) {
  .site-nav__list { counter-reset: navitem; }
  .site-nav__list a { counter-increment: navitem; justify-content: flex-start; gap: 1rem; }
  .site-nav__list a::before { content: counter(navitem, decimal-leading-zero); font: 600 .75rem var(--font-mono); letter-spacing: .1em; color: var(--orange-500); min-width: 1.6rem; }
  .site-nav__list li, .site-nav__cta, .site-nav__meta { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .5s var(--ease-expo); }
  .nav-open .site-nav__list li, .nav-open .site-nav__cta, .nav-open .site-nav__meta { opacity: 1; transform: none; }
  .nav-open .site-nav__list li:nth-child(1) { transition-delay: .06s; } .nav-open .site-nav__list li:nth-child(2) { transition-delay: .1s; }
  .nav-open .site-nav__list li:nth-child(3) { transition-delay: .14s; } .nav-open .site-nav__list li:nth-child(4) { transition-delay: .18s; }
  .nav-open .site-nav__list li:nth-child(5) { transition-delay: .22s; } .nav-open .site-nav__cta { transition-delay: .28s; }
  .nav-open .site-nav__meta { transition-delay: .32s; }
}

/* ---------- Phone layout (designed for the thumb, not shrunk) ---------- */
.action-bar { display: none; }
.collapse-toggle { display: none; }
@media (max-width: 759.98px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 1px;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.12); box-shadow: 0 -8px 24px -12px rgba(10,20,40,.5);
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 60px;
    background: var(--navy-900); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem;
  }
  .action-bar a .icon { color: var(--orange-500); width: 20px; height: 20px; }
  .action-bar { transform: translateY(110%); transition: transform .55s var(--ease-expo); }
  .action-bar.is-visible { transform: none; }
  .action-bar a { transition: background-color .2s ease; }
  .action-bar a:active { background: var(--navy-700); }
  .action-bar .action-bar__primary { background: var(--orange-500); color: var(--navy-950); }
  .action-bar .action-bar__primary:active { background: #FF8A45; }
  .action-bar .action-bar__primary .icon { color: var(--navy-950); }
  .nav-open .action-bar { display: none; }
}

@media (max-width: 639.98px) {
  /* Home: discipline cards shorter, sectors as a compact tappable index */
  .dcard { min-height: 340px; padding: 1.5rem; }
  .dcard p { font-size: .94rem; margin-bottom: 1rem; }
  .sectors { grid-template-columns: 1fr; }
  .sector { grid-template-columns: 30px 1fr 20px; align-items: center; gap: 1rem; padding: 1rem 1.1rem; min-height: 60px; }
  .sector p { display: none; }
  .sector h3 { font-size: 1.02rem; }
  .sector::after { content: "›"; font-size: 1.4rem; color: var(--orange-ink); justify-self: end; line-height: 1; }

  /* Services: one strong image per discipline instead of a squeezed pair */
  .service__media { grid-template-columns: 1fr; }
  .service__media .ph:last-child { display: none; }
  .service__media img { aspect-ratio: 16 / 10; }

  /* Portfolio: sector cards become compact rows */
  .sector-cards { gap: .75rem; }
  .scard { display: grid; grid-template-columns: 104px 1fr; }
  .scard__media img { height: 100%; aspect-ratio: auto; min-height: 120px; }
  .scard__icon, .scard__tags { display: none; }
  .scard__body { padding: 1rem 1.1rem; gap: .35rem; }
  .scard h3 { font-size: 1.08rem; }
  .scard p { font-size: .9rem; line-height: 1.5; }

  /* Filters scroll sideways in one row instead of stacking four rows deep */
  .filters { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; margin-bottom: 1.5rem; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; scroll-snap-align: start; }

  /* Long lists show the first few, with a button for the rest */
  [data-collapse="4"].is-collapsed > :nth-child(n+5),
  [data-collapse="3"].is-collapsed > :nth-child(n+4) { display: none; }
  .collapse-toggle {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; margin-top: 1rem; padding: .6rem 1.1rem;
    background: none; border: 1.5px solid var(--steel-300); border-radius: var(--radius); font-weight: 600; cursor: pointer; color: var(--ink);
  }
  .collapse-toggle::after { content: "+"; font-family: var(--font-mono); color: var(--orange-ink); font-size: 1.1rem; }
  .collapse-toggle[aria-expanded="true"]::after { content: "–"; }
}

/* ---------- Photo grade ---------- */
main img, .hero__media img { filter: var(--grade); }
.ph, .figure, .pcard__media, .scard__media { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.ph::after, .figure::after, .pcard__media::after, .scard__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--tint); mix-blend-mode: soft-light;
}
.figure__tag, .pcard__tag { z-index: 2; }
.figure { overflow: visible; }
.figure::after { border-radius: var(--radius); }
.scard__media { overflow: visible; border-radius: 0; }
.scard__icon { z-index: 2; }

/* ---------- Image loading & motion ---------- */
.js img[loading="lazy"] { opacity: 0; transition: opacity var(--t-slow) ease, filter .9s var(--ease-expo), transform 1.2s var(--ease-expo); }
.js img[loading="lazy"].is-loaded { opacity: 1; }

/* Signature motion 1 — section rulers "measure in" like a drawing being dimensioned */
.js .sheet-head__ref::after { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease-out) .15s; }
.js .sheet-head__ref.is-in::after { transform: none; }

/* Signature motion 2 — lifecycle: each stage energises, then its connector draws to the next */
.js .lifecycle .stage__node { border-color: var(--steel-300); color: var(--steel-500); transition: border-color .4s ease, color .4s ease, background-color .4s ease, box-shadow .6s ease; transition-delay: calc(var(--i) * 420ms); }
.js .lifecycle.is-in .stage__node { border-color: var(--navy-800); color: var(--navy-800); box-shadow: 0 0 0 6px rgba(20, 37, 74, .08); }
.js .lifecycle.is-in .stage:nth-child(4) .stage__node { border-color: var(--orange-500); color: var(--orange-ink); box-shadow: 0 0 0 6px rgba(242, 106, 31, .14); }
.js .lifecycle .stage::before { transform: scaleY(0); transform-origin: top; transition: transform .42s linear; transition-delay: calc(var(--i) * 420ms + 200ms); }
.js .lifecycle.is-in .stage::before { transform: none; }
.lifecycle .stage:nth-child(1) { --i: 0; } .lifecycle .stage:nth-child(2) { --i: 1; }
.lifecycle .stage:nth-child(3) { --i: 2; } .lifecycle .stage:nth-child(4) { --i: 3; }
@media (min-width: 960px) {
  .js .lifecycle .stage::before { transform: scaleX(0); transform-origin: left; }
  .js .lifecycle.is-in .stage::before { transform: none; }
}

/* Signature motion 3 — reach map: routes run out from Nairobi, then each city lights up */
.js .reach__map .route path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out); }
.js .reach__map.is-in .route path { stroke-dashoffset: 0; }
.js .reach__map .node, .js .reach__map .city { opacity: 0; transition: opacity .5s ease; }
.js .reach__map.is-in .node, .js .reach__map.is-in .city { opacity: 1; }
.reach__map .route path:nth-child(1) { transition-delay: 0ms; } .reach__map .route path:nth-child(2) { transition-delay: 90ms; }
.reach__map .route path:nth-child(3) { transition-delay: 180ms; } .reach__map .route path:nth-child(4) { transition-delay: 270ms; }
.reach__map .route path:nth-child(5) { transition-delay: 360ms; } .reach__map .route path:nth-child(6) { transition-delay: 450ms; }
.reach__map .route path:nth-child(7) { transition-delay: 540ms; } .reach__map .route path:nth-child(8) { transition-delay: 630ms; }
.reach__map .route path:nth-child(9) { transition-delay: 720ms; } .reach__map .route path:nth-child(10) { transition-delay: 810ms; }
.js .reach__map.is-in .node, .js .reach__map.is-in .city { transition-delay: 900ms; }

.hero-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease-out) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hub-ring { animation: pulse 2.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .sheet-head__ref::after, .js .lifecycle .stage::before { transform: none; }
  .js .reach__map .route path { stroke-dashoffset: 0; }
  .js .reach__map .node, .js .reach__map .city { opacity: 1; }
  .hero-line { stroke-dashoffset: 0; }
  .hub-ring { display: none; }
}

/* ---------- Utilities ---------- */
.stack-lg > * + * { margin-top: 1.5rem; }
.center { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.note-edit { outline: 1px dashed transparent; }

@media print {
  .site-header, .site-footer .footer-cta, .slash-band, .service-nav { display: none; }
  .hero, .page-hero { min-height: 0; color: var(--ink); background: none; }
}