/* Medikonstruk revamp prototype
   Theme: light base in a clinical blue-grey, with navy color blocks (hero, build sequence, credentials).
   Shape: square corners everywhere (radius 0), like a construction drawing. */

/* Type: Barlow Condensed for headlines (tall, uppercase, like drawing-sheet titles), Satoshi for text */
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  /* Brand blue, deepened from the legacy #4169E1 (hue kept) */
  --blue: oklch(0.47 0.2 264);
  --blue-hover: oklch(0.41 0.19 264);
  --blueprint: oklch(0.29 0.12 265);
  --blueprint-2: oklch(0.34 0.13 265);
  --bp-line: oklch(0.93 0.03 255);
  --bp-dim: oklch(0.93 0.03 255 / 0.55);
  --water: oklch(0.84 0.11 215);
  --amber: oklch(0.85 0.16 85);      /* site safety yellow: the construction accent; always paired with navy text */

  --bg: oklch(0.955 0.014 262);
  --surface: oklch(0.925 0.02 262);
  --navy: oklch(0.24 0.09 265);
  --ink: oklch(0.2 0.035 265);
  --ink-2: oklch(0.43 0.025 265);
  --line: oklch(0.85 0.018 262);
  --white: oklch(0.995 0.002 265);

  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font: "Satoshi", system-ui, sans-serif;
  --font-label: var(--font);
  --display-tracking: 0.004em;
  --guide: oklch(0.55 0.05 262 / 0.14);   /* column guide lines, readable on light and navy */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out-expo-ish */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 68px;
  --header-gap: 12px;
  --header-space: calc(var(--header-h) + var(--header-gap) * 2);
  --section: clamp(72px, 10vw, 144px);

  /* z-index scale */
  --z-header: 20;
  --z-skip: 30;
  --z-preview: 15;
  --z-bar: 18;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-space); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:where(h1, h2, .value-letter, .t-year, .spec-figure) { font-family: var(--font-display); }
:where(h1, h2) { text-transform: uppercase; }
:where(.step-num, .svc-row-num, .stage-count, .lb-count) { font-family: var(--font-label); }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: var(--z-skip); background: var(--ink); color: var(--white); padding: 10px 16px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Buttons: pills with a hex-nut arrow. On hover the fill wipes in from the nut and the nut turns a third, like it is being tightened.
   Shape rule: interactive controls are round (pills, circles); containers, media and fields stay square like a drawing. */
.btn {
  --btn-bg: var(--blue); --btn-fg: var(--white); --btn-border: transparent;
  --btn-fill: var(--amber); --btn-fill-fg: var(--navy);
  --nut-bg: var(--amber); --nut-fg: var(--navy); --nut-bg-hover: var(--navy); --nut-fg-hover: var(--amber);
  --nut: 40px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 6px 6px 6px 24px; border-radius: 999px;
  font: 600 0.9375rem/1 var(--font); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .2s var(--ease-quart);
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--btn-fill); transform: scaleX(0); transform-origin: right center;
  transition: transform .6s var(--ease);
}
.btn-nut { position: relative; display: grid; place-items: center; flex: none; width: var(--nut); height: var(--nut); color: var(--nut-fg); transition: color .45s var(--ease); }
.btn-nut::before {
  content: ""; position: absolute; inset: 0; background: var(--nut-bg);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  transition: transform .8s var(--ease), background-color .45s var(--ease);
}
.btn-arrow { position: relative; font-size: 1rem; line-height: 1; transition: transform .45s var(--ease); }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); border-color: var(--btn-fill); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover .btn-nut, .btn:focus-visible .btn-nut { color: var(--nut-fg-hover); }
.btn:hover .btn-nut::before, .btn:focus-visible .btn-nut::before { transform: rotate(120deg); background: var(--nut-bg-hover); }
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { transform: translateX(2px); }
.btn:active { transform: scale(0.98); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--ink); --btn-fill: var(--navy); --btn-fill-fg: var(--white); --nut-bg: var(--navy); --nut-fg: var(--white); --nut-bg-hover: var(--amber); --nut-fg-hover: var(--navy); }
.btn-ghost-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: oklch(0.97 0.01 262 / 0.5); --btn-fill: var(--white); --btn-fill-fg: var(--navy); --nut-bg: var(--white); --nut-fg: var(--navy); --nut-bg-hover: var(--amber); --nut-fg-hover: var(--navy); }
.text-link { font-weight: 600; text-decoration: none; color: var(--blue); white-space: nowrap; }
.text-link span { display: inline-block; transition: transform .3s var(--ease); }
.text-link:hover span { transform: translateX(4px); }

/* Header: a frosted-glass pill floating over the first section, white type, a hairline divider after the logo.
   The logo keeps its own white pill (never on dark). The glass deepens once scrolled so white text stays readable
   over light sections; the blur sits on ::before because backdrop-filter on the bar would trap the fixed mobile menu. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  padding: var(--header-gap) var(--gutter) 0;
  margin-bottom: calc(-1 * (var(--header-h) + var(--header-gap)));
  pointer-events: none;
  --glass: oklch(0.24 0.09 265 / 0.38);
}
.site-header.is-scrolled, body:has(.article) .site-header { --glass: oklch(0.22 0.08 265 / 0.84); }
.site-header .header-row {
  position: relative; isolation: isolate;
  pointer-events: auto; max-width: 1312px; height: var(--header-h); padding: 0 8px;
  display: flex; align-items: center; gap: 20px;
  border: 1px solid oklch(1 0 0 / 0.28); border-radius: 999px;
  box-shadow: 0 16px 40px -24px oklch(0.1 0.05 265 / 0.7);
}
.site-header .header-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background-color .4s var(--ease-quart);
}
.brand { display: block; flex: none; margin: 0; padding: 6px 16px; border-radius: 999px; background: var(--white); }
.brand img { height: 38px; width: auto; }
.brand--footer { padding: 0; background: none; }
.brand--footer img { height: 56px; }
.nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-left: 20px; border-left: 1px solid oklch(1 0 0 / 0.28); }
.nav > ul { display: flex; gap: 2px; }
.nav > ul > li { position: relative; display: flex; align-items: center; }
.nav ul a {
  display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none;
  font-size: 0.9375rem; font-weight: 500; color: oklch(0.97 0.01 262 / 0.86); transition: color .2s, background-color .2s;
}
.nav ul a { white-space: nowrap; }
/* six links and the Contact us button share the bar: tighter links on small laptops, until the menu takes over at 1040 */
@media (min-width: 1041px) and (max-width: 1240px) {
  .nav > ul { gap: 0; }
  .nav ul a { padding-inline: 9px; font-size: 0.875rem; }
  .has-sub > a { padding-right: 4px; }
  .nav { gap: 12px; padding-left: 12px; }
  .nav-cta { padding-left: 16px; }
}
.nav ul a:hover { color: var(--white); background: oklch(1 0 0 / 0.1); }
.nav ul a[aria-current="page"] { color: var(--white); background: oklch(1 0 0 / 0.16); }
.has-sub > a { padding-right: 6px; }
.sub-toggle {
  display: grid; place-items: center; width: 26px; height: 32px; margin-left: -2px; padding: 0;
  background: none; border: 0; border-radius: 999px; color: oklch(0.97 0.01 262 / 0.86); cursor: pointer;
}
.sub-toggle::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.sub-toggle[aria-expanded="true"]::before, .has-sub:hover .sub-toggle::before { transform: translateY(1px) rotate(-135deg); }
.sub {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 300px; padding: 8px;
  display: grid; gap: 2px; border-radius: 20px; background: oklch(0.22 0.08 265 / 0.96); border: 1px solid oklch(1 0 0 / 0.16);
  box-shadow: 0 24px 48px -24px oklch(0.08 0.04 265 / 0.8);
  visibility: hidden; opacity: 0; translate: 0 -6px;
  transition: opacity .25s var(--ease-quart), translate .25s var(--ease-quart), visibility 0s .25s;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .sub-toggle[aria-expanded="true"] + .sub { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.sub a { padding: 12px 16px; border-radius: 14px; }
.nav-cta { --nut: 34px; min-height: 50px; padding-left: 20px; }
.menu-toggle { display: none; }

/* Hero: a blueprint canvas with the office timelapse framed like a drawing sheet, and a caution tape of services */
.hero {
  --grid: oklch(0.93 0.03 255 / 0.07);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--white);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  mask-image: radial-gradient(ellipse 90% 80% at 70% 40%, #000 20%, transparent 90%);
}
.hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  min-height: clamp(640px, calc(100svh - 64px), 900px);
  padding-block: calc(var(--header-space) + clamp(32px, 5vw, 64px)) clamp(56px, 7vw, 96px);
}
.hero-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero-title {
  font-weight: 700;
  font-size: clamp(3.25rem, 1.6rem + 4.6vw, 5.5rem);
  line-height: 0.92; letter-spacing: var(--display-tracking);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-title .line > span { display: inline-block; }
.hero-title em { font-style: normal; color: var(--amber); }
.hero-sub { font-size: 1.1875rem; color: oklch(0.9 0.025 262); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Title block: the proof, ruled like the title block in the corner of a drawing sheet (hairline cells, small caps
   labels, condensed values); the client names run along the bottom row */
.title-block {
  --rule: oklch(0.93 0.03 255 / 0.28);
  display: grid; grid-template-columns: repeat(4, auto); width: min(100%, 640px); margin: 16px 0 0;
  border: 1px solid var(--rule); background: var(--navy); /* solid, so the hero skyline never runs through the figures */
}
.title-block > div { padding: 12px 16px 14px; border-left: 1px solid var(--rule); }
.title-block > div:first-child { border-left: 0; }
.title-block dt { font-family: var(--font-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.93 0.03 255 / 0.7); }
.title-block dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em; color: var(--white); white-space: nowrap; }
.title-block > .title-block-clients { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; border-left: 0; border-top: 1px solid var(--rule); }
.title-block-clients dt { flex: none; }
.title-block-clients dd { font-family: var(--font); font-size: 0.9375rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; white-space: normal; color: oklch(0.93 0.02 262); }
.title-block-clients dd [aria-hidden] { margin-inline: 4px; color: var(--amber); }
.title-block-clients .tb-name { white-space: nowrap; }
@media (max-width: 600px) {
  .title-block { grid-template-columns: 1fr 1fr; }
  .title-block > div:nth-child(3) { border-left: 0; }
  .title-block > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .title-block > div:not(.title-block-clients) dd { font-size: 1.375rem; }
  .title-block > .title-block-clients { flex-direction: column; gap: 6px; }
}

.hero-frame { grid-column: 8 / -1; position: relative; margin: 52px 0 24px 24px; }
.crop { position: absolute; width: 22px; height: 22px; border: 0 solid var(--amber); }
.crop--tl { top: -20px; left: -20px; border-top-width: 3px; border-left-width: 3px; }
.crop--tr { top: -20px; right: -20px; border-top-width: 3px; border-right-width: 3px; }
.crop--bl { bottom: -20px; left: -20px; border-bottom-width: 3px; border-left-width: 3px; }
.crop--br { bottom: -20px; right: -20px; border-bottom-width: 3px; border-right-width: 3px; }
.hero-dim {
  position: absolute; left: 0; right: 0; top: -48px; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.93 0.03 255 / 0.85);
}
.hero-dim::before, .hero-dim::after { content: ""; flex: 1; height: 7px; border: 0 solid oklch(0.93 0.03 255 / 0.45); border-top-width: 1px; }
.hero-dim::before { border-left-width: 1px; }
.hero-dim::after { border-right-width: 1px; }

/* ISO stamp: pressed over the top right corner of the project frame like an inspection seal on a drawing */
.hero-foot { position: relative; }
.hero-stamp { position: absolute; z-index: 3; right: -40px; top: -34px; display: grid; width: 124px; height: 124px; aspect-ratio: 1; rotate: 8deg; }
.hero-stamp > svg { grid-area: 1 / 1; display: block; width: 100%; height: 100%; overflow: visible; }
/* The shadow sits on the still face as a round box-shadow, never as a filter on the stamp: a drop-shadow around the
   turning rim was redrawn every frame and halved the scroll frame rate on phones (October 2026). */
.hero-stamp-face { border-radius: 50%; box-shadow: 0 8px 14px oklch(0.08 0.04 265 / 0.45); }
.hero-stamp circle { fill: var(--amber); stroke: var(--navy); stroke-width: 2.5; }
.hero-stamp text { fill: var(--navy); font-family: var(--font-label); font-weight: 700; }
.hero-stamp-ring text { font-size: 9.5px; letter-spacing: 0.12em; }
.hero-stamp-ring { transform-origin: 50% 50%; }
.hero-stamp-core { font-size: 24px; font-family: var(--font-display); letter-spacing: 0.02em; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Caution tape: the services, drifting along the foot of the hero */
.tape {
  position: relative; overflow: hidden; background: var(--amber); color: var(--navy);
  border-block: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--navy) 0 10px, var(--amber) 10px 20px) 6;
}
.tape-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.tape ul { display: flex; }
.tape li {
  display: flex; align-items: center; gap: 28px; padding: 14px 28px 14px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.tape li::after { content: ""; width: 12px; height: 12px; background: var(--navy); clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%); }

/* Clients: two rows of full-colour logos drifting in opposite directions over a blueprint grid */
.clients {
  --grid: oklch(0.47 0.2 264 / 0.08);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface);
  padding-block: clamp(64px, 8vw, 112px);
}
.clients::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 30%, transparent 100%);
}
.clients-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 32px; margin-bottom: clamp(32px, 4vw, 52px); }
.clients-head p { margin-top: 16px; color: var(--ink-2); font-size: 1.125rem; max-width: 56ch; }

/* Client rows as two tape measures laid across the section at slight angles, crossing like tapes on a site table.
   Ticks and numbers live on each client segment so they travel with the tape. */
.marquee {
  display: grid; gap: clamp(28px, 4vw, 44px); padding-block: 20px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-row {
  --tick: oklch(0.24 0.09 265 / 0.55);
  overflow: hidden; margin-inline: -3%;
  background: var(--white);
  border-block: 2px solid var(--navy);
  box-shadow: 0 22px 34px -26px oklch(0.24 0.09 265 / 0.6);
  transform: rotate(-1.6deg);
}
.marquee-row--reverse { transform: rotate(1.2deg); }
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-s, 58s) linear infinite; }
.marquee-row--reverse .marquee-track { --marquee-s: 70s; animation-direction: reverse; }
.marquee-row:hover .marquee-track, .marquee-row:focus-within .marquee-track, .is-offscreen .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-list { display: flex; }
.client { flex: none; width: 272px; border-right: 1px solid oklch(0.24 0.09 265 / 0.18); }

.client-tile {
  position: relative; display: grid; grid-template-rows: 1fr auto; width: 100%; height: 168px; padding: 0;
  font: inherit; color: inherit; text-align: left; background:
    /* ruler ticks, top and bottom: minor every 8px, major every 40px */
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px) left top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 40px) left top / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 8px) left bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 40px) left bottom / 100% 14px no-repeat;
  border: 0;
}
.client-no { position: absolute; top: 18px; left: 10px; font-family: var(--font-label); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--navy); font-variant-numeric: tabular-nums; }
.client-logo { display: grid; place-items: center; padding: 30px 26px 4px; min-height: 0; }
.client-logo img { height: 58px; width: auto; max-width: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.client-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px 24px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2);
}
.client-count { color: var(--blue); white-space: nowrap; }
.client-count > span { display: inline-block; transition: transform .3s var(--ease); }
/* hover: a safety-yellow marker stroke slides in under the logo */
.client-tile::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 18px; height: 3px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
button.client-tile { cursor: pointer; }
button.client-tile:hover::after, button.client-tile:focus-visible::after { transform: scaleX(1); }
button.client-tile:hover .client-logo img, button.client-tile:focus-visible .client-logo img { transform: scale(1.06); }
button.client-tile:hover .client-count > span, button.client-tile:focus-visible .client-count > span { transform: translateX(3px); }
button.client-tile:focus-visible { outline-offset: -4px; }

/* Build sequence (the one drenched section) */
.sequence { background: var(--blueprint); color: var(--bp-line); padding-block: var(--section); }
.sequence-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 88px); }
.sequence-head h2 {
  font-weight: 620; color: var(--white);
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.75rem); line-height: 0.95; letter-spacing: var(--display-tracking);
  margin-bottom: 24px;
}
.sequence-head p { font-size: 1.125rem; max-width: 58ch; color: var(--bp-line); }

.sequence-body { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.plan-frame {
  position: sticky; top: calc(var(--header-space) + 24px);
  border: 1px solid oklch(0.93 0.03 255 / 0.2);
  background:
    linear-gradient(oklch(0.93 0.03 255 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, oklch(0.93 0.03 255 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--blueprint-2);
  padding: clamp(12px, 2vw, 28px);
}
.plan { width: 100%; height: auto; display: block; overflow: visible; }
.plan :is(path, line, rect, circle) { fill: none; stroke: var(--bp-line); stroke-width: 1.5; stroke-linecap: square; }
.plan text { fill: var(--bp-line); stroke: none; font: 600 11px var(--font-label); letter-spacing: 0.1em; }
.plan text.dim { fill: var(--bp-dim); }
.plan .grid-lines line { stroke: oklch(0.93 0.03 255 / 0.28); stroke-width: 1; }
.plan .grid-tags text { fill: var(--bp-dim); text-anchor: middle; }
.plan .wall { stroke-width: 4; }
.plan .door { stroke-width: 1; }
.plan .water :is(path, rect, circle) { stroke: var(--water); }
.plan .water text { fill: var(--water); }
.plan .water .loop { stroke-width: 2.5; }
.plan .stations .machines rect { fill: var(--bp-line); stroke: none; }
.plan .waste :is(path, rect) { stroke: var(--bp-line); }
.plan .waste .drain { stroke-width: 2; }

.steps { counter-reset: none; }
.step {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 24px; opacity: 0.4; transition: opacity .5s var(--ease-quart);
}
.step:first-child { min-height: 40vh; justify-content: flex-start; }
.step:last-child { min-height: 50vh; }
.step.is-current { opacity: 1; }
.step h3 {
  display: flex; align-items: baseline; gap: 16px;
  font-weight: 620; color: var(--white);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15; margin-bottom: 14px;
}
.step-num { font-weight: 500; font-size: 0.9375rem; color: var(--water); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.step p { max-width: 42ch; }

/* Plan drawing states: only when JS is running. Without JS the full plan shows. */
.js .plan .layer :is(path, line, rect, circle):not(.machines rect) {
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-quart);
}
.js .plan .layer :is(text, .machines rect) { opacity: 0; transition: opacity .6s var(--ease-quart) .5s; }
.js .plan .layer { transition: opacity .6s var(--ease-quart); }
.js .plan .layer.is-drawn :is(path, line, rect, circle):not(.machines rect) { stroke-dashoffset: 0; }
.js .plan .layer.is-drawn :is(text, .machines rect) { opacity: 1; }
.js .plan .layer.is-drawn:not(.is-current) { opacity: 0.5; }
.js .plan .water.is-drawn .loop { animation: flow 2.4s linear infinite 1.6s; stroke-dasharray: 0.018 0.012; }
@keyframes flow { to { stroke-dashoffset: -0.3; } }

/* Section headings (one style for every page) */
:where(.clients, .featured, .services, .explorer, .about-home, .accred, .news, .about-intro, .offered, .values-block, .history, .team, .svc-about, .faq, .contact, .vacancies, .trades) h2 {
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem); line-height: 0.95; letter-spacing: var(--display-tracking);
}

/* Page hero (inner pages) */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-bottom: 8px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--navy) 0 10px, var(--amber) 10px 20px) 8;
  min-height: clamp(340px, 50vh, 520px); display: flex; align-items: flex-end;
  background: var(--navy); color: var(--white);
}
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: dark enough that every banner photo keeps the text at WCAG AA (measured slide by slide, both widths): a
   bottom-up fade plus a shade on the text side. Phones stack the text across the full width, so the shade is even. */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, oklch(0.2 0.08 265 / 0.55), oklch(0.2 0.08 265 / 0.2) 55%, transparent 75%),
    linear-gradient(to top, oklch(0.2 0.08 265 / 0.95), oklch(0.2 0.08 265 / 0.7) 55%, oklch(0.2 0.08 265 / 0.5));
}
@media (max-width: 900px) {
  .page-hero::after { background: linear-gradient(to top, oklch(0.2 0.08 265 / 0.95), oklch(0.2 0.08 265 / 0.8) 45%, oklch(0.2 0.08 265 / 0.72)); }
}
.page-hero-inner { text-shadow: 0 1px 3px oklch(0.15 0.06 265 / 0.6); }
.page-hero { min-height: clamp(460px, 72vh, 680px); }
.page-hero-inner { position: relative; z-index: 2; width: 100%; padding-block: calc(var(--header-space) + clamp(48px, 7vw, 96px)) clamp(40px, 5vw, 64px); padding-right: calc(var(--gutter) + min(460px, 38%) + 40px); }
.page-hero-spec { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; pointer-events: none; }
.page-hero-spec .spec { pointer-events: auto; width: min(460px, 38%); }
.page-hero h1 {
  font-weight: 640; max-width: 22ch;
  font-size: clamp(3rem, 1.6rem + 5vw, 6rem); line-height: 0.92; letter-spacing: var(--display-tracking);
}
.page-hero-inner > p { margin-top: 18px; max-width: 60ch; font-size: 1.125rem; color: oklch(0.93 0.02 262); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 0.9375rem; font-weight: 500; color: oklch(0.93 0.02 262); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.75; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs--dark ol { color: var(--ink-2); }

/* Project cards (explorer) */
.card-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.card-media { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card-media::after {
  content: "View photos"; position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px;
  font-size: 0.875rem; font-weight: 600; color: var(--white);
  background: linear-gradient(to top, oklch(0.2 0.08 265 / 0.85), transparent);
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease-quart), transform .45s var(--ease);
}
.card-more { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--white); color: var(--ink); }
.card-kind { display: block; margin-top: 14px; font-size: 0.8125rem; color: var(--blue); font-weight: 600; }
.card-name { display: block; margin-top: 4px; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; transition: color .25s; }
.card-place { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--ink-2); }
.card-btn:hover .card-media img, .card-btn:focus-visible .card-media img { transform: scale(1.05); }
.card-btn:hover .card-media::after, .card-btn:focus-visible .card-media::after { opacity: 1; transform: none; }
.card-btn:hover .card-name { color: var(--blue); }

.stage-arrow {
  width: 48px; height: 48px; display: inline-grid; place-items: center; flex: none;
  border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.125rem; cursor: pointer;
  transition: background-color .25s, color .25s, opacity .25s;
}

/* Featured projects (home) as a drawing register: a sheet on the left, the sheet index on the right.
   Hovering or focusing an index row wipes that project onto the sheet behind a sweeping level line. */
.featured { background: var(--bg); padding-block: var(--section); }
.featured-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.featured-head p { margin-top: 16px; color: var(--ink-2); font-size: 1.125rem; max-width: 56ch; }
.featured-head .text-link { padding-bottom: 6px; }

.register { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }

.sheet { position: sticky; top: calc(var(--header-space) + 16px); cursor: zoom-in; }
.sheet-dim {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-inline: 14px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
}
.sheet-dim-line { flex: 1; height: 1px; background: var(--navy); position: relative; transform-origin: center; transition: transform 1.1s var(--ease); }
/* end ticks of the dimension line */
.sheet-dim-line:first-child::before, .sheet-dim-line:last-child::after {
  content: ""; position: absolute; top: -6px; width: 1px; height: 13px; background: var(--navy);
}
.sheet-dim-line:first-child::before { left: 0; }
.sheet-dim-line:last-child::after { right: 0; }
.sheet-dim-label { white-space: nowrap; }

.sheet-frame { position: relative; padding: 14px; }
.sheet-mark { position: absolute; width: 28px; height: 28px; border: 0 solid var(--navy); transition: transform .8s var(--ease) .2s; }
.sheet-mark--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; transform-origin: top left; }
.sheet-mark--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; transform-origin: top right; }
.sheet-mark--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; transform-origin: bottom left; }
.sheet-mark--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; transform-origin: bottom right; }

.sheet-photo { position: relative; container-type: inline-size; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.sheet-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: transform 1.2s var(--ease); }
.sheet-img.is-prev { opacity: 1; z-index: 1; }
.sheet-img.is-active { opacity: 1; z-index: 2; animation: sheet-wipe .9s var(--ease) both; }
.sheet:hover .sheet-img.is-active { transform: scale(1.03); }
@keyframes sheet-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* the level line that sweeps across with each wipe */
.sheet-scan {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 3px; background: var(--amber);
  box-shadow: 0 0 0 1px oklch(0.24 0.09 265 / 0.25); opacity: 0; pointer-events: none;
}
.sheet-scan.is-sweeping { animation: sheet-scan .9s var(--ease) both; }
@keyframes sheet-scan {
  0% { transform: translateX(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(100cqw); opacity: 0; }
}

.sheet-view {
  position: absolute; z-index: 4; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; background: var(--white); color: var(--ink);
  transform: translateY(8px); opacity: 0; transition: opacity .3s var(--ease-quart), transform .45s var(--ease);
}
.sheet:hover .sheet-view { opacity: 1; transform: none; }

/* title block, as in the corner of a drawing sheet */
.sheet-block {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) auto; margin: 14px 14px 0;
  border: 1.5px solid var(--navy); background: var(--white);
}
.sheet-cell { padding: 10px 14px 12px; min-width: 0; }
.sheet-cell + .sheet-cell { border-left: 1px solid var(--navy); }
.sheet-cell dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.sheet-cell dd { margin: 4px 0 0; font-size: 1rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-cell dd:empty::before { content: ""; display: block; width: 24px; height: 2px; margin-block: 9px; background: currentColor; }
.sheet-cell--no { background: var(--amber); color: var(--navy); min-width: 104px; }
.sheet-cell--no dt { color: var(--navy); }
.sheet-cell--no dd { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; margin-top: 2px; }
.sheet-cell--no small { font-size: 0.875rem; margin-left: 2px; }
.sheet.is-swapping .sheet-cell dd { animation: sheet-text .5s var(--ease) both; }
@keyframes sheet-text { from { opacity: 0; transform: translateY(6px); } }

/* the sheet index */
.reg-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--navy); }
.reg-list li { border-bottom: 1px solid var(--line); }
.reg-row {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; align-items: center; gap: 16px;
  width: 100%; padding: 15px 4px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.reg-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.reg-no {
  justify-self: start; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink-2);
  transition: background-color .3s, border-color .3s, color .3s;
}
.reg-thumb { display: none; }
.reg-text { display: grid; gap: 2px; min-width: 0; }
.reg-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; transition: color .25s; }
.reg-meta { font-size: 0.875rem; color: var(--ink-2); }
.reg-go {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--ink-2); transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--ease);
}
.reg-row.is-active::after { transform: scaleX(1); }
.reg-row.is-active .reg-no { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.reg-row.is-active .reg-name { color: var(--blue); }
.reg-row.is-active .reg-go { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(-45deg); }
.reg-row:focus-visible { outline-offset: -2px; }

/* drawn in when the register scrolls into view */
.js .register:not(.is-drawn) .sheet-mark { transform: scale(0); }
.js .register:not(.is-drawn) .sheet-dim-line { transform: scaleX(0); }

@media (max-width: 900px) {
  .register { grid-template-columns: minmax(0, 1fr); }
  .sheet { display: none; }
  .reg-row { grid-template-columns: 96px minmax(0, 1fr) 32px; gap: 14px; padding-block: 14px; }
  .reg-no { position: absolute; z-index: 1; top: 20px; left: 10px; padding: 2px 7px; background: var(--white); border-color: var(--white); font-size: 0.6875rem; }
  .reg-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
  .reg-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .reg-go { width: 32px; height: 32px; }
  .reg-name { font-size: 1rem; }
  /* no sheet on small screens, so no row is singled out */
  .reg-row.is-active::after { transform: scaleX(0); }
  .reg-row.is-active .reg-no { background: var(--white); border-color: var(--white); color: var(--ink-2); }
  .reg-row.is-active .reg-name { color: inherit; }
  .reg-row.is-active .reg-go { background: none; border-color: var(--line); color: var(--ink-2); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-img.is-active { animation: none; }
  .sheet-scan { display: none; }
  .sheet.is-swapping .sheet-cell dd { animation: none; }
  .sheet-img, .reg-row::after, .reg-go, .sheet-mark, .sheet-dim-line { transition: none; }
}

/* Explorer (Our Work, service pages) */
.explorer { background: var(--bg); padding-block: var(--section); }
.explorer-head { margin-bottom: 28px; }
.explorer-head p { margin-top: 14px; color: var(--ink-2); font-size: 1.125rem; max-width: 58ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  font: 500 0.9375rem var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip span { font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip[aria-pressed="true"] span { color: oklch(0.85 0.03 255); }
.explorer-count { margin: 24px 0 20px; font-size: 0.875rem; color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 24px; }
.cards .card.is-entering { animation: card-in .5s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }

/* Lightbox */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: oklch(0.15 0.05 265); color: var(--white);
}
.lightbox::backdrop { background: oklch(0.15 0.05 265); }
/* Opens and closes with a fade (top layer kept through the exit); the photo morph runs its own transition instead */
.lightbox, .lightbox::backdrop { opacity: 0; transition: opacity .3s var(--ease-quart), overlay .3s allow-discrete, display .3s allow-discrete; }
.lightbox[open], .lightbox[open]::backdrop { opacity: 1; }
@starting-style { .lightbox[open], .lightbox[open]::backdrop { opacity: 0; } }
html.lb-morph .lightbox, html.lb-morph .lightbox::backdrop { transition: none; }
.lightbox[open] .lb-inner { animation: fade-up .35s var(--ease) both; }
.lb-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: 100%; }
.lb-stage { display: grid; place-items: center; padding: 56px 88px; min-height: 0; height: 100%; margin: 0; container-type: size; }
/* Fill the stage whatever the file size (small originals scale up), with the box hugging the photo so it can morph
   to and from the card it opened from. --ar is the photo's width / height, set by main.js. */
.lb-stage img { width: min(100cqw, 100cqh * var(--ar, 1.5)); height: auto; }
.lb-info { display: flex; flex-direction: column; gap: 10px; padding: 72px 36px 36px; border-left: 1px solid oklch(1 0 0 / 0.12); overflow-y: auto; }
.lb-kind { color: var(--water); font-size: 0.875rem; font-weight: 600; }
.lb-title { font-weight: 620; font-size: 1.75rem; line-height: 1.15; }
.lb-place { color: var(--bp-line); }
.lb-about { margin-top: 6px; font-size: 0.9375rem; line-height: 1.6; color: oklch(1 0 0 / 0.78); }
.lb-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.lb-thumbs button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; opacity: 0.6; }
.lb-thumbs button[aria-current="true"] { border-color: var(--water); opacity: 1; }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lb-count { margin-top: auto; font-size: 0.875rem; color: var(--bp-dim); }
.lb-btn, .lb-close {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px;
  background: oklch(1 0 0 / 0.08); border: 1px solid oklch(1 0 0 / 0.3); border-radius: 50%; color: var(--white); font-size: 1.25rem; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lb-btn:hover, .lb-close:hover { background: var(--white); color: var(--ink); }
.lb-prev { left: 20px; top: 50%; translate: 0 -50%; }
.lb-next { right: calc(380px + 20px); top: 50%; translate: 0 -50%; }
.lb-close { top: 16px; right: 16px; font-size: 1.75rem; }

/* Services: pick a service, browse its projects on the stage */
.services { background: var(--white); padding-block: var(--section); }
.svc-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.svc-lede { color: var(--ink-2); font-size: 1.125rem; max-width: 40ch; margin: 20px 0 clamp(28px, 4vw, 44px); }
.svc-list { border-top: 1px solid var(--line); }
.svc { border-bottom: 1px solid var(--line); }
.svc-btn {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; width: 100%;
  padding: 22px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
}
.svc-name { font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.15; transition: color .3s; }
.svc-count { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-btn:hover .svc-name, .svc.is-active .svc-name { color: var(--blue); }
.svc-thumb { display: none; }
.svc-detail { display: grid; grid-template-rows: 1fr; }
.svc-detail > div { overflow: hidden; }
.js .svc-detail { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.js .svc.is-active .svc-detail { grid-template-rows: 1fr; }
.svc-detail p { color: var(--ink-2); max-width: 46ch; }
.svc-detail .text-link { display: inline-block; margin: 16px 0 24px; }
.svc-scope { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.svc-scope li { font-size: 0.8125rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }

.stage { position: sticky; top: calc(var(--header-space) + 20px); }
.stage-view { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--navy); }
.stage-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease-quart), visibility 0s .7s; }
.stage-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.stage-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.stage-slide.is-active img { transform: scale(1); }
.stage-slide figcaption {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px;
  padding: 72px 24px 22px; color: var(--white);
  background: linear-gradient(to top, oklch(0.2 0.08 265 / 0.92), transparent);
}
.stage-kind { font-size: 0.8125rem; font-weight: 600; color: var(--water); }
.stage-name { font-size: 1.375rem; font-weight: 620; line-height: 1.2; }
.stage-place { font-size: 0.9375rem; color: var(--bp-line); }
.stage-bar { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.stage-count { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 44px; }
.stage-progress { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.stage-progress span { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.stage-progress span.is-running { animation: progress var(--stage-ms, 5000ms) linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
.stage-arrow { width: 44px; height: 44px; font-size: 1rem; }
.stage-arrow:hover { background: var(--ink); color: var(--white); }

/* Services overview rows */
.svc-index { background: var(--bg); padding-block: var(--section); }
.svc-rows { border-top: 1px solid var(--line); }
.svc-rows li { border-bottom: 1px solid var(--line); }
.svc-rows a { display: grid; grid-template-columns: 56px 200px 1fr auto; gap: 32px; align-items: center; padding: 24px 0; text-decoration: none; transition: background-color .3s; }
.svc-rows a:hover { background: var(--white); }
.svc-row-num { font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; padding-left: 8px; }
.svc-row-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.svc-row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-rows a:hover .svc-row-media img { transform: scale(1.06); }
.svc-row-name { display: block; font-weight: 620; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.15; }
.svc-row-text { display: block; margin-top: 8px; color: var(--ink-2); max-width: 60ch; }
.svc-row-cta { font-weight: 600; color: var(--blue); white-space: nowrap; padding-right: 8px; }

/* Service detail */
.svc-about { background: var(--white); padding-block: var(--section); }
.svc-about-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.svc-about h2 { margin-bottom: 24px; }
.svc-about p { color: var(--ink-2); max-width: 64ch; }
.svc-about p + p { margin-top: 16px; }
.svc-about figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.faq { background: var(--white); padding-block: var(--section); }
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--blue); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a p { padding-bottom: 22px; color: var(--ink-2); max-width: 62ch; }

/* Home: about + values */
.about-home { background: var(--bg); padding-block: var(--section); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(48px, 6vw, 80px); }
.values li { border-top: 2px solid var(--ink); padding-top: 20px; }
.value-letter { display: block; font-weight: 750; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; color: var(--blue); }
.values h3 { margin-top: 12px; font-size: 1.375rem; font-weight: 620; }
.values p { margin-top: 8px; color: var(--ink-2); }

/* Accreditations (tabs) */
.accred { background: var(--navy); color: var(--bp-line); padding-block: var(--section); }
.accred h2 { color: var(--white); max-width: 22ch; margin-bottom: clamp(28px, 4vw, 44px); }

/* News */
.news { background: var(--bg); padding-block: var(--section); }
.news-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.post a { display: block; text-decoration: none; }
.post-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post a:hover img { transform: scale(1.05); }
.post time { display: block; margin-top: 14px; font-size: 0.8125rem; color: var(--ink-2); }
.post-title { display: block; margin-top: 6px; font-size: 1.125rem; font-weight: 600; line-height: 1.3; transition: color .25s; }
.post a:hover .post-title { color: var(--blue); }
.post--big { grid-column: span 2; grid-row: span 2; }
.post--big .post-media { aspect-ratio: 16 / 11; }
.post--big .post-title { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 620; }

/* Article */
.article { background: var(--white); padding-block: calc(var(--header-space) + clamp(32px, 5vw, 72px)) var(--section); }
.article-head { max-width: 1000px; }
.article-head time { color: var(--ink-2); font-size: 0.9375rem; }
.article-head h1 { margin-top: 12px; font-weight: 700; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.75rem); line-height: 0.95; letter-spacing: var(--display-tracking); }
.article-media { display: grid; gap: 24px; margin-top: clamp(32px, 5vw, 56px); }
.article-media--more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); max-width: 1000px; }
.article-media img { width: 100%; height: auto; }
/* Article text: a reading column with the opening paragraph set as the lede */
.article-body { max-width: 1000px; margin-top: clamp(32px, 5vw, 56px); }
.article-body p { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.article-body p + p { margin-top: 1.1em; }
.article-body p:first-child { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.6; color: var(--ink); }
/* Privacy Notice: the same reading column, with section headings */
.article-body h2 { max-width: 68ch; margin: clamp(32px, 4vw, 48px) 0 12px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.article-body h2 + p { margin-top: 0; }
.privacy-contact { display: grid; gap: 8px; font-size: 1.0625rem; color: var(--ink-2); }
.privacy-contact a { color: var(--blue); }

/* About */
.about-intro { background: var(--white); padding-block: var(--section); }
.about-intro-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.about-intro h2 { margin-bottom: 20px; }
.about-intro p { color: var(--ink-2); font-size: 1.125rem; max-width: 52ch; }
.about-intro figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.offered { background: var(--bg); padding-block: var(--section); }
.offered h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.values-block { background: var(--white); padding-block: var(--section); }
.values-block .values { margin-top: clamp(28px, 4vw, 44px); }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(48px, 6vw, 80px); }
.vm-item { background: var(--bg); padding: clamp(24px, 3vw, 40px); }
.vm-item img { width: 56px; height: 56px; }
.vm-item h3 { margin: 18px 0 10px; font-size: 1.5rem; font-weight: 620; }
.vm-item p { color: var(--ink-2); }
.history { background: var(--bg); padding-block: var(--section); }
.history h2 { margin-bottom: clamp(28px, 4vw, 44px); }
/* Company history on a dimension line: one rule across, a tick at each milestone, the date set large.
   A tick drops from the rule at each milestone. */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--navy); }
.timeline li { position: relative; display: flex; flex-direction: column; padding: 24px 28px 0 0; }
.timeline li + li { padding-left: 28px; border-left: 1px solid var(--navy); }
.timeline li::before { content: ""; position: absolute; top: -2px; left: 0; width: 2px; height: 14px; background: var(--navy); }
.timeline li + li::before { left: -1px; }
.timeline .t-year { order: -1; font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1; text-transform: uppercase; letter-spacing: var(--display-tracking); color: var(--ink); }
.timeline h3 { margin-top: 14px; font-size: 1.1875rem; font-weight: 620; }
.timeline figure { order: 1; margin: 24px 0 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.timeline figure img { width: 100%; height: 100%; object-fit: cover; }
.timeline li > p:last-child { flex: 1; margin-top: 10px; color: var(--ink-2); font-size: 0.9375rem; max-width: 46ch; }
.team { position: relative; isolation: isolate; overflow: hidden; background: var(--white); padding-block: var(--section); }
.team-head { position: relative; padding-top: clamp(48px, 5vw, 72px); }
.team-head h2 { position: relative; }
/* Hard hat line drawing: its own band above the leaders, brim resting just over the photos; spans the viewport so the survey line runs in from the left edge */
.team-art { position: absolute; z-index: -1; bottom: 0; right: calc(50% - 50vw); width: max(100vw, 900px); height: auto; overflow: visible; }
.team-art path, .team-art polygon { fill: none; stroke: oklch(0.47 0.12 264 / 0.38); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.team-art .art-line { stroke: oklch(0.47 0.12 264 / 0.24); }
.team-art .art-dash { stroke-dasharray: 6 5; }
.team-art .art-hex { fill: var(--amber); stroke: var(--navy); stroke-opacity: 0.7; stroke-width: 1.25; }
.team-art .art-cross { fill: var(--navy); stroke: none; }
.team-art .art-center { stroke: oklch(0.47 0.12 264 / 0.3); stroke-width: 1; stroke-dasharray: 14 4 2 4; }
.team-art .art-gloss { stroke: oklch(1 0 0 / 0.95); stroke-width: 3; }
.art-callout path { stroke: oklch(0.47 0.12 264 / 0.3); stroke-width: 1; }
.art-callout text { fill: var(--ink-2); font: 600 12px var(--font-label); letter-spacing: 0.16em; }
.js .team-art [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) calc(var(--i, 0) * 160ms); }
.js .team-art.is-drawn [pathLength] { stroke-dashoffset: 0; }
.js .team-art :is(.art-hex, .art-cross, .art-dash, .art-center, .art-gloss, .art-callout) { opacity: 0; transition: opacity .8s var(--ease) 1.4s, fill-opacity .8s; }
.js .team-art.is-drawn :is(.art-hex, .art-cross, .art-dash, .art-center, .art-gloss, .art-callout) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .team-art :is(path, polygon, .art-hex, .art-cross, .art-dash, .art-center, .art-gloss, .art-callout) { transition: none; stroke-dashoffset: 0; opacity: 1; }
}
@media (max-width: 900px) {
  .team-head { padding-top: 150px; }
  .team-art { top: -30px; bottom: auto; right: calc(var(--gutter) * -1); }
}
.team h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.team .team-head--sub { margin-top: clamp(88px, 10vw, 140px); }
.people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
.people--leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* one column per leader, so the row stays full */
.person figure { aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.person figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); transition: filter .5s var(--ease-quart), transform .8s var(--ease); }
.person:hover figure img { filter: none; transform: scale(1.04); }
.person-name { margin-top: 12px; font-weight: 600; line-height: 1.3; }
.person-role { margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); }
.people--leaders .person-name { font-size: 1.125rem; }

/* Contact */
.contact { background: var(--white); padding-block: var(--section); }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact h2 { margin-bottom: 20px; }
.contact-copy > p { color: var(--ink-2); font-size: 1.125rem; max-width: 40ch; }
.direct { margin-top: 40px; display: grid; gap: 22px; }
.direct > div { display: grid; grid-template-columns: 72px 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.direct dt { font-size: 0.875rem; color: var(--ink-2); }
.direct dd { display: flex; flex-direction: column; gap: 4px; }
.direct a { text-decoration: none; font-weight: 600; }
.direct a:hover { color: var(--blue); }
.contact-office { margin-top: 32px; }
.office-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface); }
.contact-office figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--ink-2); }

/* Office location: the live Google map set in a location sheet (navy frame and label strip, like the site plan) */
.contact-map { margin-top: 28px; background: var(--white); border: 1.5px solid var(--navy); box-shadow: 0 22px 44px -32px oklch(0.24 0.09 265 / 0.45); }
.contact-map-head {
  display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1.5px solid var(--navy);
  font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
}
.contact-map-head span:last-child { color: var(--ink-2); }
.contact-map iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 0; background: var(--surface); }
.contact-map figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px; border-top: 1.5px solid var(--navy); font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 600px) { .contact-map iframe { aspect-ratio: 4 / 3; } }

.brief { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; background: var(--bg); border: 1px solid var(--line); padding: clamp(20px, 3vw, 40px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field :is(input, select, textarea) {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid oklch(0.72 0.015 265); border-radius: 0;
  padding: 12px 14px; min-height: 48px; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field :is(input, select, textarea)::placeholder { color: oklch(0.5 0.02 265); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px oklch(0.47 0.2 264 / 0.18); }
.field [aria-invalid="true"] { border-color: oklch(0.52 0.19 27); }
.error { font-size: 0.875rem; color: oklch(0.48 0.19 27); }
.brief-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.brief-status { font-size: 0.9375rem; color: var(--ink-2); }
.brief-status.is-ok { color: oklch(0.45 0.12 155); font-weight: 600; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 80px);
  background: var(--bg);
}
.footer-grid { display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: 32px; }
.brand--footer { margin-bottom: 16px; }
.footer-note { color: var(--ink-2); max-width: 36ch; font-size: 0.9375rem; }
.footer-h { font-size: 0.9375rem; font-weight: 700; margin-bottom: 14px; }
.site-footer ul { display: grid; gap: 10px; font-size: 0.9375rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--blue); }
.footer-contact { color: var(--ink-2); }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(48px, 6vw, 80px); padding-block: 24px; font-size: 0.875rem; color: var(--ink-2); position: relative; }
.footer-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }

/* Motion: page load choreography (runs on load, no JS gate) */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line > span { animation: line-up 1.1s var(--ease) both; }
  .hero-title .line:nth-child(2) > span { animation-delay: .09s; }
  .hero-sub, .hero-ctas, .title-block { animation: fade-up .9s var(--ease) .35s both; }
  .hero-stamp-ring { animation: spin 22s linear infinite; }
  .title-block { animation-delay: .5s; }
  .hero-frame { animation: fade-up 1s var(--ease) .2s both; }
  .page-hero-media img { animation: settle 2.2s var(--ease) both; }
  .page-hero-inner > * { animation: fade-up .9s var(--ease) both; }
  .page-hero-inner > *:nth-child(2) { animation-delay: .08s; }
  .page-hero-inner > *:nth-child(3) { animation-delay: .16s; }

  @supports (animation-timeline: view()) {
    .cards .card, .person, .post, .timeline li, .svc-rows li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes settle { from { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .plan .layer :is(path, line, rect, circle), .js .plan .layer :is(text, .machines rect) { transition: none; }
  .js .plan .water.is-drawn .loop { animation: none; stroke-dasharray: none; }
  .step, .stage-slide, .stage-slide img, .js .svc-detail, .card-media img { transition: none; }
  .stage-slide img { transform: none; }
  .tabpanel, .lightbox[open] .lb-inner, .cards .card.is-entering { animation: none; }
  .tape-track { animation: none; }
  .btn, .btn::before, .btn-nut::before, .btn-arrow { transition: none; }
  .btn:hover .btn-nut::before, .btn:focus-visible .btn-nut::before { transform: none; }
  /* Logos stop moving: one static, wrapped set */
  .marquee { mask-image: none; padding-inline: var(--gutter); }
  .marquee-track { animation: none; width: auto; }
  .marquee-row--reverse, .marquee-list[aria-hidden] { display: none; }
  .marquee-list { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .marquee-row { transform: none; margin-inline: 0; }
  .marquee-list { background: var(--white); }
  .client { border-bottom: 1px solid oklch(0.24 0.09 265 / 0.18); }
  .client-tile, .client-count > span { transition: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-frame { grid-column: 8 / -1; margin-left: 16px; }
  .nav ul a { padding-inline: 10px; }
  .nav { gap: 16px; }
  .people--leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .people:not(.people--leaders) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .lb-inner { grid-template-columns: minmax(0, 1fr) 320px; }
  .lb-next { right: calc(320px + 20px); }
}

/* Header menu: the links fold into a panel below 1040px, where six links and the button no longer fit the bar */
@media (max-width: 1040px) {
  :root { --header-h: 64px; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 48px; height: 48px; border-radius: 50%; background: oklch(1 0 0 / 0.12); border: 0; cursor: pointer; color: var(--white);
  }
  .menu-toggle-bars, .menu-toggle-bars::before { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease); }
  .menu-toggle-bars::before { content: ""; position: absolute; top: 7px; }
  .menu-toggle-bars { transform: translateY(-3.5px); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(-7px) rotate(-90deg); }
  .site-header .header-row { padding: 0 6px; }
  .brand img { height: 32px; }
  .nav {
    position: fixed; inset: calc(var(--header-space) - 4px) var(--gutter) auto var(--gutter);
    flex-direction: column; align-items: stretch; gap: 20px;
    background: var(--navy); border: 1px solid oklch(1 0 0 / 0.16); border-radius: 28px; border-left: 1px solid oklch(1 0 0 / 0.16);
    box-shadow: 0 24px 48px -24px oklch(0.24 0.09 265 / 0.5);
    padding: 16px 16px 20px;
    max-height: calc(100dvh - var(--header-space) - 12px); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .3s var(--ease-quart), transform .3s var(--ease-quart), visibility 0s .3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 4px; }
  .nav ul a { padding: 12px 16px; font-size: 1.1875rem; color: var(--white); }
  .nav > ul > li { display: block; }
  .sub-toggle { display: none; }
  .sub { position: static; min-width: 0; padding: 0 0 6px 16px; visibility: visible; opacity: 1; translate: none; background: none; border: 0; box-shadow: none; }
  .sub a { font-size: 1rem; padding: 8px 16px; color: oklch(0.9 0.02 262); }
  .nav-cta { min-height: 52px; justify-content: space-between; }
  .brand img { height: 36px; }
  .nav-foot { display: grid; gap: 12px; padding: 16px 16px 4px; border-top: 1px solid oklch(1 0 0 / 0.16); }
  .nav-call { display: flex; flex-direction: column; gap: 2px; color: var(--white); text-decoration: none; font: 600 1.5rem var(--font-display); letter-spacing: 0.02em; }
  .nav-call span { font: 500 0.8125rem var(--font); letter-spacing: 0; color: oklch(0.9 0.02 262); }
  .nav-foot .btn { justify-content: space-between; min-height: 52px; }
}

@media (max-width: 900px) {

  .hero-grid { min-height: 0; row-gap: 0; padding-bottom: 72px; }
  .hero-copy { grid-column: 1 / -1; gap: 24px; }
  .hero-frame { grid-column: 1 / -1; margin: 88px 20px 0; }

  .sequence-body { grid-template-columns: 1fr; gap: 0; }
  .plan-frame { top: var(--header-h); margin-inline: calc(var(--gutter) * -1); border-inline: 0; z-index: 1; }
  .step { min-height: 46vh; }
  .step:first-child { min-height: 30vh; padding-top: 40px; }

  .featured-head { flex-direction: column; align-items: flex-start; }

  .svc-layout, .svc-about-grid, .faq-grid, .about-home-grid, .about-intro-grid, .tabpanel, .contact-grid, .history-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { position: static; }
  .svc-rows a { grid-template-columns: 96px 1fr; gap: 16px 20px; }
  .svc-row-num { display: none; }
  .svc-row-cta { grid-column: 2; padding-right: 0; }

  .values, .timeline, .vm { grid-template-columns: minmax(0, 1fr); }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post--big { grid-column: 1 / -1; grid-row: auto; }

  .lb-inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb-stage { padding: 64px 12px 12px; }
  .lb-stage { overflow: hidden; }
  .lb-stage img { max-height: 100%; }
  .lb-info { border-left: 0; border-top: 1px solid oklch(1 0 0 / 0.12); padding: 20px var(--gutter) 24px; max-height: 40dvh; }
  .lb-thumbs { grid-template-columns: repeat(5, 1fr); }
  .lb-prev, .lb-next { top: auto; bottom: calc(40dvh + 12px); translate: none; width: 44px; height: 44px; }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
}

@media (max-width: 560px) {
  .brief { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; }
  .clients-head { flex-direction: column; align-items: flex-start; }
  .client { width: 208px; }
  .client-tile { height: 140px; }
  .client-logo img { height: 44px; }
  .client-meta { padding: 6px 12px 22px; font-size: 0.6875rem; }
  .posts { grid-template-columns: 1fr; }
  /* the President on top at half width, the two managers below: no lone card on the last row */
  .people--leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .people--leaders > :first-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .people:not(.people--leaders) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
  .people:not(.people--leaders) .person-name { font-size: 0.875rem; }
  .people:not(.people--leaders) .person-role { font-size: 0.75rem; }
  .news-head { flex-direction: column; }
}

/* Column guides: thin vertical lines like the grid of a drawing sheet. Drawn inside each section, over its
   background but under its content, so they never cross cards, logos, photos or text. */
main > section:not(.hero, .page-hero), main > article, .site-footer { position: relative; isolation: isolate; }
main > section:not(.hero, .page-hero)::after, main > article::after, .site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter);
  background:
    linear-gradient(to right, var(--guide) 1px, transparent 1px) content-box 0 0 / 25% 100% repeat-x,
    linear-gradient(to left, var(--guide) 1px, transparent 1px) content-box;
}

/* Spec sheet: navy panel, a wireframe building that draws itself, one figure */
.spec {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 24px; align-items: center;
  padding: clamp(20px, 2.4vw, 32px); background: var(--ink); color: var(--white);
}
.spec-label { font-size: 0.875rem; color: oklch(0.85 0.03 262); }
.spec-figure { margin-top: 6px; font-weight: 700; font-size: clamp(3.25rem, 2rem + 3.6vw, 5.25rem); line-height: 0.9; text-transform: uppercase; white-space: nowrap; }
.spec-figure span { margin-left: 4px; font-size: 0.36em; vertical-align: top; color: var(--amber); }
/* a long unit sits on its own line under the figure */
.spec-figure--stack span { display: block; margin: 8px 0 0; }
.spec-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 20px; }
.spec-caption { flex: 1 1 11ch; font-size: 1.0625rem; line-height: 1.25; }
.spec-nav { display: flex; gap: 8px; flex: none; }
.round-btn {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid oklch(0.97 0.01 262 / 0.5); color: var(--white); text-decoration: none; font-size: 1.0625rem;
  transition: background-color .25s, color .25s, border-color .25s;
}
.round-btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.wire { display: block; width: 100%; height: auto; overflow: visible; }
.wire path { fill: none; stroke-linecap: square; }
.wire-lines path { stroke: var(--bp-line); stroke-width: 0.055; }
.wire-hidden path { stroke: var(--bp-dim); stroke-width: 0.035; stroke-dasharray: 0.05 0.05; }
.wire-windows path { fill: var(--amber); fill-opacity: 0; stroke: var(--bp-dim); stroke-width: 0.03; }
.js .wire-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) calc(var(--i) * 45ms); }
.js .wire.is-drawn .wire-lines path { stroke-dashoffset: 0; }
.js .wire-hidden, .js .wire-windows { opacity: 0; transition: opacity .8s var(--ease) .9s; }
.js .wire.is-drawn .wire-hidden, .js .wire.is-drawn .wire-windows { opacity: 1; }
@keyframes lights { 0%, 100% { fill-opacity: 0; } 12%, 58% { fill-opacity: 0.9; } 70% { fill-opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wire.is-drawn .wire-windows path { animation: lights 8s var(--ease-quart) infinite; animation-delay: calc(1.4s + var(--w) * 0.45s); }
}
@media (prefers-reduced-motion: reduce) {
  .js .wire-lines path { transition: none; stroke-dashoffset: 0; }
  .js .wire-hidden, .js .wire-windows { opacity: 1; transition: none; }
  .wire-windows path:nth-child(3n) { fill-opacity: 0.85; }
}

/* Home about: the spec sheet sits under the team photo as its title block, never over the people */

@media (max-width: 900px) {
  main > section::after, main > article::after, .site-footer::after { background-size: 50% 100%, auto; }
  .page-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .page-hero-inner { padding-right: var(--gutter); }
  .page-hero-spec { position: relative; padding-inline: var(--gutter); justify-content: stretch; }
  .page-hero-spec .spec { width: 100%; }
}
@media (max-width: 480px) {
  .spec { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 16px; }
}

/* Hero showcase: one project at a time; the current one fades out drifting left as the next arrives from the right.
   A traced building (cutout) floats free like a scale model; other projects are clean photos in a drawing-sheet border. */
.showcase-stage { display: grid; }
.show {
  grid-area: 1 / 1; display: grid; grid-template-rows: 1fr auto; gap: 28px; align-content: end;
  opacity: 0; transform: translateX(64px); pointer-events: none;
  transition: opacity .9s var(--ease), transform 1.2s var(--ease);
}
.show.is-active { opacity: 1; transform: none; pointer-events: auto; }
.show.is-leaving { opacity: 0; transform: translateX(-64px); }
.show-media { display: grid; align-items: end; padding: 0; background: none; border: 0; cursor: pointer; }
.show-media img { width: 100%; height: auto; transition: transform .8s var(--ease); }

/* photo: plain, with the offset hairline border of a drawing sheet */
.show-media:not(.show-media--cutout) { margin: 10px; }
.show-media:not(.show-media--cutout) img { aspect-ratio: 5 / 4; object-fit: cover; outline: 1px solid oklch(0.93 0.03 255 / 0.3); outline-offset: 10px; }
.show-media:not(.show-media--cutout):hover img, .show-media:not(.show-media--cutout):focus-visible img { transform: scale(1.02); }

/* cutout: the building alone, a little larger than the frame, grounded by a shadow and a dimension line */
.show-media--cutout { position: relative; margin-left: -14%; padding-bottom: 34px; }
.show-media--cutout img { filter: drop-shadow(0 26px 22px oklch(0.08 0.04 265 / 0.55)); transform-origin: 50% 100%; }
.show-media--cutout:hover img, .show-media--cutout:focus-visible img { transform: translateY(-6px); }
.show-media--cutout::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 9px;
  border: 0 solid oklch(0.93 0.03 255 / 0.5); border-top-width: 1px; border-inline-width: 1px;
}

.show-cap { display: grid; gap: 2px; padding-left: 4px; }
.show-kind { font-size: 0.8125rem; font-weight: 600; color: var(--amber); }
.show-name { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.show-place { font-size: 0.9375rem; color: oklch(0.85 0.03 262); }
.showcase-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.showcase-count { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: oklch(0.85 0.03 262); min-width: 52px; }
.showcase-progress { flex: 1; height: 2px; background: oklch(0.93 0.03 255 / 0.2); overflow: hidden; }
.showcase-progress span { display: block; height: 100%; background: var(--amber); transform-origin: left; transform: scaleX(0); }
.showcase-progress span.is-running { animation: progress var(--show-ms, 5000ms) linear forwards; }
.showcase-progress span.is-paused { animation-play-state: paused; }
.round-btn--sm { width: 40px; height: 40px; flex: none; background: none; font: inherit; cursor: pointer; }

@media (max-width: 900px) {
  .show-name { font-size: 1.5rem; }
  .show-media--cutout { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .show, .show-media img { transition: opacity .3s linear; }
  .show, .show.is-leaving { transform: none; }
}

@media (max-width: 900px) {
  .hero-stamp { right: -18px; top: -38px; width: 96px; height: 96px; }
}

/* Loader: first visit of a session only. The original logo on white is revealed left to right, a caution-stripe
   bar fills, then the sheet lifts away. Shown only when <html> has .is-loading (set in <head>). */
.loader { display: none; }
.is-loading .loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--white);
  transition: transform .9s var(--ease) .15s, visibility 0s 1.1s;
}
.is-loading .loader::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(oklch(0.47 0.2 264 / 0.06) 1px, transparent 1px), linear-gradient(90deg, oklch(0.47 0.2 264 / 0.06) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
}
.loader-inner { position: relative; display: grid; justify-items: center; gap: 28px; width: min(360px, 72vw); }
.loader-logo { width: 100%; height: auto; clip-path: inset(0 100% 0 0); animation: logo-draw 1.1s var(--ease) .15s forwards; }
.loader-bar { width: 100%; height: 8px; background: var(--surface); overflow: hidden; }
.loader-bar span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  background: repeating-linear-gradient(-45deg, var(--navy) 0 8px, var(--amber) 8px 16px);
  animation: bar-fill 1.6s var(--ease-quart) .3s forwards;
}
@keyframes logo-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes bar-fill { 0% { transform: scaleX(0); } 70% { transform: scaleX(0.82); } 100% { transform: scaleX(1); } }
.is-loaded .loader { transform: translateY(-100%); visibility: hidden; }
.is-loaded .loader-bar span { animation: none; transform: scaleX(1); }

/* ===================================================================
   Motion language shared by every page
   Headings rise in one word at a time, photos pour in from their bottom
   edge, figures count up, pills pull toward the pointer, and a surveyor's
   crosshair stands in for the arrow cursor. All of it is gated on .js and
   collapses to plain content when motion is reduced.
   =================================================================== */
.rv-words .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rv-words .wd > span { display: inline-block; }
.js .rv-words .wd > span { transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .rv-words:not(.is-in) .wd > span { transform: translateY(110%); }

.js .rv { transition: opacity .9s var(--ease-quart), transform 1s var(--ease); }
.js .rv:not(.is-in) { opacity: 0; transform: translateY(24px); }
.js .rv:nth-child(2) { transition-delay: .08s; }
.js .rv:nth-child(3) { transition-delay: .16s; }
.js .rv:nth-child(4) { transition-delay: .24s; }
/* photos: the picture itself is clipped and lifts from the bottom, like a pour. The figure stays unclipped,
   because an element clipped to nothing never counts as on screen and so would never be revealed. */
.js .rv:is([data-rv="img"], figure) { opacity: 1; transform: none; transition: none; }
.js .rv:is([data-rv="img"], figure) > :is(img, video) { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease); }
.js .rv:is([data-rv="img"], figure):not(.is-in) > :is(img, video) { clip-path: inset(100% 0 0 0); }
/* Blur-up: a photo with a placeholder (.lq, set by render) shows its soft preview at once and sharpens in when the file
   arrives; one without (the cut-out) fades up instead. main.js sets .is-arriving on photos that load after scrolling in. */
img.lq { background-size: cover; background-position: center; background-repeat: no-repeat; }
.js img.is-arriving { animation: img-in .7s var(--ease-quart) backwards; }
.js img.lq.is-arriving { animation: img-sharpen .6s var(--ease-quart) backwards; }
@keyframes img-in { from { opacity: 0; } }
@keyframes img-sharpen { from { filter: blur(14px); } }
@media (prefers-reduced-motion: reduce) { .js img.lq.is-arriving { animation: none; } }

/* page to page: the old page fades as the new one settles in */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s var(--ease-quart) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
.site-header { view-transition-name: site-header; }

/* ===== Home: about as a site board ===== */
.about-home h2 { max-width: 15ch; margin-bottom: clamp(32px, 4vw, 56px); }
/* The team photos pinned up like prints on a site office board: white-bordered prints at slight angles, held by a strip
   of masking tape, each with a safety-yellow label. The lead photo is large; the rest are scattered along the row below, the first tucked under its edge. A print
   straightens and lifts under the pointer and opens the photo viewer. (.pinboard is display: contents, so the prints
   and .board-copy share one grid.) */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.5vw, 40px); align-items: start; }
.pinboard { display: contents; }
.board-copy { grid-column: 8 / -1; grid-row: 1; align-self: center; }
.board-copy > p { color: var(--ink-2); max-width: 46ch; }
.board-copy > p + p { margin-top: 14px; }
.board-copy .btn { margin-top: 28px; }
.pin {
  --r: 0deg; position: relative; display: block; padding: 10px 10px 12px; border: 0; background: var(--white); cursor: zoom-in;
  box-shadow: 0 1px 2px oklch(0.24 0.09 265 / 0.14), 0 22px 38px -24px oklch(0.24 0.09 265 / 0.55);
  rotate: var(--r); transition: rotate .6s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease);
}
.pin:hover, .pin:focus-visible { rotate: 0deg; translate: 0 -6px; z-index: 3; box-shadow: 0 1px 2px oklch(0.24 0.09 265 / 0.14), 0 34px 50px -26px oklch(0.24 0.09 265 / 0.6); }
.pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.pin img { display: block; width: 100%; height: auto; }
.pin-tape {
  position: absolute; z-index: 1; top: -12px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -4deg;
  background: oklch(0.9 0.09 95 / 0.62); box-shadow: 0 1px 2px oklch(0.24 0.09 265 / 0.12);
  clip-path: polygon(0 12%, 5% 0, 12% 10%, 20% 2%, 82% 6%, 90% 0, 100% 9%, 97% 100%, 88% 90%, 78% 100%, 8% 94%, 2% 100%);
}
.pin-label {
  position: absolute; z-index: 1; left: 18px; bottom: -13px; padding: 5px 10px 4px; rotate: -1.5deg;
  background: var(--amber); color: var(--navy); box-shadow: 0 2px 4px oklch(0.24 0.09 265 / 0.2);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.pin:nth-child(1) { --r: -1deg; grid-column: 1 / 8; grid-row: 1; }
.pin:nth-child(1) img { aspect-ratio: 3 / 2; object-fit: cover; }
.pin:nth-child(1) .pin-label { top: 24px; bottom: auto; left: -10px; font-size: 1.0625rem; }
.pin:nth-child(2) { --r: 2.2deg; grid-column: 7 / 10; grid-row: 2; margin-top: 44px; }
.pin:nth-child(3) { --r: 1.2deg; grid-column: 1 / 7; grid-row: 2; margin: -36px 0 0 6%; z-index: 2; }
.pin:nth-child(3) .pin-tape { left: 22%; rotate: 5deg; }
.pin:nth-child(4) { --r: -2.4deg; grid-column: 10 / -1; grid-row: 2; margin-top: -4px; }
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 40px; }
  .pin:nth-child(n) { grid-column: auto; grid-row: auto; margin: 0; }
  .pin:nth-child(1) { grid-column: 1 / -1; order: 0; }
  .board-copy { grid-column: 1 / -1; grid-row: auto; order: 1; padding-top: 0; }
  .pin:nth-child(2), .pin:nth-child(4) { order: 2; padding: 6px 6px 8px; }
  .pin:nth-child(3) { grid-column: 1 / -1; order: 3; }
  .pin:nth-child(2) .pin-label, .pin:nth-child(4) .pin-label { left: 8px; font-size: 0.8125rem; white-space: normal; }
  .pin-tape { width: 64px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }

/* ===== Home: accreditations as a certificate wall ===== */
.accred { overflow: hidden; }
.accred-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); }
.accred h2 { margin: 0; }
.accred-seal { position: static; width: clamp(108px, 12vw, 150px); height: auto; flex: none; translate: none; rotate: none; }
.accred-seal .hero-stamp-face { box-shadow: 0 12px 22px oklch(0.05 0.03 265 / 0.6); }
.accred-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.tablist { display: flex; flex-direction: column; gap: 0; margin: 0; border-top: 1px solid oklch(1 0 0 / 0.25); }
.tablist [role="tab"] {
  position: relative; display: grid; gap: 6px; width: 100%; min-height: 0; padding: 22px 0 24px; text-align: left;
  font: inherit; color: oklch(1 0 0 / 0.55); background: none; border: 0; border-bottom: 1px solid oklch(1 0 0 / 0.25); cursor: pointer;
  transition: color .3s;
}
.tablist [role="tab"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.tab-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; text-transform: uppercase; letter-spacing: var(--display-tracking); }
.tab-title { font-size: 0.875rem; }
.tablist [role="tab"]:hover, .tablist [role="tab"][aria-selected="true"] { color: var(--white); }
.tablist [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tabpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; animation: fade-up .6s var(--ease) both; }
.tabpanel[hidden] { display: none; }
.cert-photo { position: relative; margin: 0; padding: 12px; }
.cert-photo .sheet-mark { border-color: var(--white); }
.cert-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cert-text { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 40px; align-items: start; }
.cert-text h3 { color: var(--white); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 620; line-height: 1.15; margin: 0; }
.cert-text p { max-width: 60ch; }

/* ===== News as a site diary: dated rows, a photo trails the pointer ===== */
.diary { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.diary li { border-bottom: 1px solid var(--line); }
.diary-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; align-items: center; gap: 24px; padding: 26px 0; text-decoration: none; color: inherit; }
.diary-row time { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.diary-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; transition: color .25s, transform .6s var(--ease); }
.diary-thumb { display: none; }
.diary-go { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--ease); }
.diary-row:hover .diary-title, .diary-row:focus-visible .diary-title { color: var(--blue); transform: translateX(12px); }
.diary-row:hover .diary-go, .diary-row:focus-visible .diary-go { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(-45deg); }
.diary-preview { position: fixed; top: 0; left: 0; z-index: var(--z-preview); width: clamp(220px, 24vw, 340px); pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-quart); }
.diary-preview img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transform: translate(6%, -56%) rotate(-3deg) scale(0.9); transition: transform .5s var(--ease);
  box-shadow: 0 30px 50px -24px oklch(0.2 0.06 265 / 0.5);
}
.diary-preview.is-on { opacity: 1; }
.diary-preview.is-on img { transform: translate(6%, -56%) rotate(-3deg) scale(1); }

/* ===== Contact as a printed brief: ruled fields, phone numbers set large ===== */
.direct { margin-top: 40px; display: grid; gap: 0; border-top: 2px solid var(--navy); }
.direct > div { grid-template-columns: 88px 1fr; gap: 16px; border-top: 0; border-bottom: 1px solid var(--line); padding: 18px 0; }
.direct dt { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); padding-top: 6px; }
.direct dd { gap: 6px; min-width: 0; }
.direct dd a { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; letter-spacing: 0.005em; overflow-wrap: anywhere; }
/* The email is the longest line: a size that keeps it whole in the column; if it must wrap, it breaks after the @ */
.direct dd a[href^="mailto"] { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem); }
.brief { background: none; border: 0; border-top: 2px solid var(--navy); padding: 28px 0 0; gap: 26px 32px; }
.field label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.field :is(input, select, textarea) { background: transparent; border: 0; border-bottom: 1.5px solid oklch(0.62 0.02 265); padding: 8px 0 10px; min-height: 44px; font-size: 1.0625rem; }
.field :is(input, select, textarea):focus { box-shadow: none; border-bottom: 2px solid var(--blue); }
.field [aria-invalid="true"] { border-bottom-color: oklch(0.52 0.19 27); }
.field textarea { min-height: 96px; }

/* ===== Footer: a closing statement, then the directory, then a hazard edge ===== */
.site-footer { border-top: 0; padding-top: 0; background: var(--navy); color: var(--bp-line); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(40px, 5vw, 72px); }
.footer-line {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--display-tracking);
  font-size: clamp(2.75rem, 1rem + 7.5vw, 6rem); line-height: 0.92; color: var(--white); max-width: 11ch; text-wrap: balance;
}
.footer-line .wd:nth-child(3) { color: var(--amber); }
.footer-top-btn { width: 64px; height: 64px; flex: none; border-color: oklch(1 0 0 / 0.4); }
/* Blueprint skyline (build/skyline.mjs): stands on the divider under this row, left of the back-to-top button */
.footer-top { position: relative; }
.skyline {
  position: absolute; z-index: 0; pointer-events: none; overflow: visible;
  right: calc(var(--gutter) + 96px); bottom: calc(-1 * clamp(40px, 5vw, 64px)); width: min(52%, 720px); height: auto;
}
.skyline :is(path, circle) { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sky-lines path { stroke: oklch(0.93 0.03 255 / 0.42); stroke-width: 1.25; }
.sky-detail path { stroke: oklch(0.93 0.03 255 / 0.16); stroke-width: 1; }
.sky-notes :is(path, circle) { stroke: oklch(0.84 0.11 215 / 0.4); stroke-width: 1; }
.sky-notes path { stroke-dasharray: 4 4; }
.sky-notes path:has(+ text.lvl) { stroke-dasharray: none; }
.sky-notes text { fill: oklch(0.84 0.11 215 / 0.75); font: 600 11px var(--font-label); text-anchor: middle; letter-spacing: 0.06em; }
.sky-notes text.lvl { text-anchor: start; font-size: 10px; }
.sky-lit :is(rect, path) { fill: var(--amber); }
.sky-lit rect { fill-opacity: 0.9; }
.js .sky-lines [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease) calc(var(--i, 0) * 140ms); }
.js .skyline.is-drawn .sky-lines [pathLength] { stroke-dashoffset: 0; }
.js .skyline :is(.sky-detail, .sky-notes) { opacity: 0; transition: opacity 1.2s var(--ease) 1.2s; }
.js .skyline .sky-lit > * { opacity: 0; transition: opacity .9s var(--ease) calc(2.2s + var(--k, 8) * 180ms); }
.js .skyline.is-drawn :is(.sky-detail, .sky-notes, .sky-lit > *) { opacity: 1; }
@media (max-width: 900px) {
  .skyline { right: var(--gutter); width: min(58%, 420px); }
  .sky-detail path { stroke-opacity: 0.6; }
  .sky-notes { display: none; }
}
@media (max-width: 1340px) {
  .sky-levels { display: none; } /* would touch the closing line */
}
@media (prefers-reduced-motion: reduce) {
  .js .skyline :is(.sky-detail, .sky-notes, .sky-lit > *), .js .sky-lines [pathLength] { transition: none; opacity: 1; stroke-dashoffset: 0; }
}
/* Home hero: the same skyline as a horizon rising out of the caution tape, behind the copy and the showcase. Pure
   linework (no lit windows, sign or grid notes): the lower floors, tanks and basin read clearly, then it dissolves
   upward well before the text and fades out at the sides. Draws in on load and drifts with the hero parallax. */
.skyline--hero {
  left: 0; right: 0; bottom: 100%; z-index: -1; margin-inline: auto;
  width: min(1240px, calc(100% - 2 * var(--gutter))); opacity: 0.6;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to top, #000 12%, transparent 46%);
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to top, #000 12%, transparent 46%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.skyline--hero .sky-lines path { stroke-width: 1; }
.skyline--hero :is(.sky-lit, .sky-notes) { display: none; }
@media (max-width: 900px) { .skyline--hero { right: 0; width: 100%; opacity: 0.4; } }

.footer-grid { padding-top: clamp(40px, 5vw, 64px); }
.footer-grid::before { content: ""; grid-column: 1 / -1; border-top: 1px solid oklch(1 0 0 / 0.18); margin-top: -1px; }
.brand--footer { display: inline-block; padding: 10px 18px; background: var(--white); border-radius: 999px; }
.footer-h { color: var(--white); }
.site-footer a { color: var(--bp-line); }
.site-footer a:hover { color: var(--amber); }
.footer-note, .footer-contact, .footer-base { color: oklch(0.93 0.03 255 / 0.72); }
.footer-base::before { border-color: oklch(1 0 0 / 0.18); }
.hazard { height: 10px; background: repeating-linear-gradient(-45deg, var(--amber) 0 18px, var(--navy) 18px 36px); }

@media (max-width: 900px) {
  .accred-grid, .cert-text { grid-template-columns: minmax(0, 1fr); }
  .accred-head { flex-direction: column; align-items: flex-start; }
  .accred-seal { order: -1; width: 96px; }
  .tablist [role="tab"] { padding-block: 16px; }
  .diary-row { grid-template-columns: 96px minmax(0, 1fr) 40px; grid-template-rows: auto auto; gap: 4px 14px; padding: 16px 0; }
  .diary-thumb { display: block; grid-column: 1; grid-row: 1 / 3; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
  .diary-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .diary-row time { grid-column: 2; grid-row: 1; }
  .diary-title { grid-column: 2; grid-row: 2; font-size: 1.0625rem; }
  .diary-go { grid-column: 3; grid-row: 1 / 3; width: 40px; height: 40px; }
  .diary-row:hover .diary-title { transform: none; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv-words .wd > span, .js .rv, .js .rv > :is(img, video) { transition: none; }
  .js .rv-words:not(.is-in) .wd > span { transform: none; }
  .js .rv:not(.is-in) { opacity: 1; transform: none; }
  .js .rv:not(.is-in) > :is(img, video) { clip-path: none; }
  .tabpanel { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ===== Paths to an inquiry ===== */
.reg-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.reg-cta p { font-size: 1.0625rem; font-weight: 600; }
.lb-cta { align-self: flex-start; margin-top: 20px; }
.lb-cta[hidden] { display: none; }
/* credentials beside the form */
.brief-proof {
  list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 0.9375rem; font-weight: 600;
}
.brief-proof li { display: flex; align-items: center; gap: 10px; }
.brief-proof li::before { content: ""; flex: none; width: 10px; height: 11px; background: var(--amber); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

@media (max-width: 700px) {
  /* phones keep only the two outer guide lines, so none runs through the text */
  main > section:not(.hero, .page-hero)::after, main > article::after, .site-footer::after {
    background:
      linear-gradient(to right, var(--guide) 1px, transparent 1px) content-box 0 0 / 100% 100% no-repeat,
      linear-gradient(to left, var(--guide) 1px, transparent 1px) content-box;
  }
  .direct > div { grid-template-columns: 64px minmax(0, 1fr); }
  .direct dd a[href^="mailto"] { font-size: 1.25rem; }
  .brief-proof { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Our Work: the first project of a long list is a lead tile ===== */
@media (min-width: 901px) {
  .cards .card--big { grid-column: span 2; grid-row: span 2; }
  .cards .card--big .card-btn { display: flex; flex-direction: column; height: 100%; }
  .cards .card--big .card-media { flex: 1; min-height: 0; aspect-ratio: auto; }
  .cards .card--big .card-name { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
}
@media (max-width: 900px) {
  .timeline li { padding: 22px 0 32px; }
  .timeline li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--navy); }
  .timeline li + li::before { left: 0; top: -1px; }
}

/* Conversion: the quote path on every screen size */
.nav-foot { display: none; }
.explorer-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 2px solid var(--navy);
}
.explorer-cta p { font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; }
.explorer-cta strong { color: var(--ink); font-weight: 650; }
.seq-cta { display: inline-block; margin-top: 20px; color: var(--water); }
.next-steps { margin-top: 28px; display: grid; gap: 12px; max-width: 44ch; }
.next-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; color: var(--ink); }
.next-no {
  display: inline-grid; place-items: center; width: 24px; height: 26px; background: var(--amber); color: var(--navy);
  font: 700 0.8125rem var(--font-label); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.brief-note { flex-basis: 100%; font-size: 0.8125rem; color: var(--ink-2); }
.brief-note a, .brief-fail a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A failed send says so plainly, with the phone and email as the way through */
.brief-fail { flex-basis: 100%; padding: 12px 14px; border-left: 3px solid oklch(0.48 0.19 27); background: oklch(0.97 0.02 27); font-size: 0.9375rem; color: var(--ink); }
.brief-fail a { font-weight: 600; }
/* Honeypot for spam bots: never shown, never reached by keyboard */
.brief-trap { display: none; }
.brief [type=submit]:disabled { opacity: 0.6; cursor: progress; }
.action-bar { display: none; }

@media (max-width: 900px) {
  /* Contact on phones: lead with the reassurance and the form; contact details and the office follow */
  .contact-grid { display: flex; flex-direction: column; gap: 0; }
  .contact-copy, .contact-side { display: contents; }
  .contact-grid > * , .contact-copy > *, .contact-side > * { order: 9; }
  .contact-copy > h2 { order: 1; }
  .contact-copy > p { order: 2; }
  .next-steps { order: 3; margin-bottom: 32px; }
  .brief { order: 4; }
  .brief-proof { order: 5; }
  .direct { order: 6; }
  .contact-office { order: 7; }
  .site-sheet { order: 8; }

  .action-bar {
    position: fixed; z-index: var(--z-bar); left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px;
    background: var(--navy); border: 1px solid oklch(1 0 0 / 0.16); border-radius: 999px;
    box-shadow: 0 18px 40px -18px oklch(0.24 0.09 265 / 0.6);
    visibility: hidden; opacity: 0; transform: translateY(24px);
    transition: opacity .3s var(--ease-quart), transform .3s var(--ease-quart), visibility 0s .3s;
  }
  .action-bar.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .action-call {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px;
    background: oklch(1 0 0 / 0.12); color: var(--white); font-weight: 600; text-decoration: none;
  }
  .action-quote { justify-content: space-between; min-height: 48px; }
  .explorer-cta .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .action-bar { transition: none; }
}

/* Depth: parallax tied to scroll (CSS scroll-driven animations). The individual translate and scale properties are
   used so the depth composes with the hover and reveal transforms already on these elements. Static where the
   browser lacks scroll timelines and when motion is reduced. --plx scales every distance (lower on phones). */
.sheet-depth { position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root { --plx: 1; }

    /* Home hero, as it scrolls away: the copy recedes, the drawing frame lags, the scale model rises off its sheet */
    .hero-copy { animation: plx-recede linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .skyline--hero { animation: plx-recede linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-frame .showcase-stage { animation: plx-stage linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-frame .show-media--cutout img { animation: plx-model linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-frame .crop { animation: plx-marks linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }

    /* Page banners: the photo drifts slower than the title over it */
    .page-hero-media img {
      scale: 1.16;
      animation: settle 2.2s var(--ease) both, plx-banner linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 80vh;
    }

    /* Large project photos move inside their frames while the frame passes */
    .sheet-depth { scale: 1.1; animation: plx-photo linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .svc-about figure { overflow: hidden; }
    .svc-about figure img { scale: 1.1; animation: plx-photo linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

    /* Accreditation photo: a print shifting against the crop marks pinned around it */
    .cert-photo img { animation: plx-print linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes plx-recede { to { translate: 0 calc(40px * var(--plx)); } }
@keyframes plx-stage { to { translate: 0 calc(-36px * var(--plx)); } }
@keyframes plx-model { to { translate: 0 calc(-56px * var(--plx)); scale: 1.04; } }
@keyframes plx-marks { to { translate: 0 calc(22px * var(--plx)); } }
@keyframes plx-banner { to { translate: 0 calc(7% * var(--plx)); } }
@keyframes plx-photo { from { translate: 0 calc(-4% * var(--plx)); } to { translate: 0 calc(4% * var(--plx)); } }
@keyframes plx-print { from { translate: 0 calc(-10px * var(--plx)); } to { translate: 0 calc(10px * var(--plx)); } }
@media (max-width: 900px) {
  :root { --plx: 0.6; }
}

/* Photo viewer morph: the clicked photo flies into the viewer while the page and the viewer crossfade. The header
   gives up its own transition name so it does not paint over the viewer mid-flight. */
html.lb-morph .site-header { view-transition-name: none; }
html.lb-morph::view-transition-old(root) { animation: vt-out .3s var(--ease-quart) both; }
html.lb-morph::view-transition-new(root) { animation: vt-fade-in .35s var(--ease-quart) both; }
::view-transition-group(lb-photo) { animation-duration: .6s; animation-timing-function: var(--ease); }
::view-transition-old(lb-photo), ::view-transition-new(lb-photo) { height: 100%; object-fit: cover; }
@keyframes vt-fade-in { from { opacity: 0; } }

/* Site progress: a medical building drawn in elevation and built by the page scroll (markup: gauge in render.mjs).
   Each part runs over its own slice of the scroll (--a to --b): piles, foundation, five floors of columns, slab and
   glazing, the roof, then the cross. The crane hoists the slabs and leaves when the building tops out. It lives in the
   header pill (white lines on the glass), so it is always in view and never covers content; desktop adds a readout.
   Hidden where scroll timelines are missing and when motion is reduced. */
@property --pct { syntax: "<integer>"; inherits: false; initial-value: 0; }
.site-gauge { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-gauge {
      --g-struct: var(--white); --g-col: var(--water); --g-pane: var(--water); --g-ghost: oklch(1 0 0 / 0.4);
      display: flex; align-items: center; gap: 12px; flex: none; margin-right: 14px; color: var(--white); pointer-events: none;
    }
    /* --u is one drawing unit of the 88 x 122 sheet */
    .g-art { --u: calc(38px / 88); position: relative; width: calc(88 * var(--u)); height: calc(122 * var(--u)); }
    .g-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .g-part, .g-hoist { position: absolute; display: block; }
    .g-part { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
    .g-hoist { inset: 0; }
    .g-ghost { fill: none; stroke: var(--g-ghost); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
    .g-line { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
    .g-fill { fill: currentColor; }
    .g-slab, .g-pile { background: var(--g-struct); }
    .g-col { background: var(--g-col); }
    .g-pane { background: var(--g-pane); }
    .g-pane::before { content: ""; position: absolute; inset: 0; background: var(--amber); opacity: 0; }
    .g-cable { width: 1px; margin-left: -0.5px; background: currentColor; }
    .g-cross rect { fill: var(--amber); }

    .g-part[style*="--a"], .g-pane::before, .g-hoist, .g-cable, .g-load, .gauge-pct {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: scroll(root); animation-range: var(--a) var(--b);
    }
    .g-pile { transform-origin: top; animation-name: g-grow; }
    .g-col { transform-origin: bottom; animation-name: g-grow; }
    .g-slab { animation-name: g-set; }
    .g-found { transform-origin: center; animation-name: g-pour; }
    .g-part.g-pane { animation-name: g-on; animation-range: var(--a) calc(var(--a) + (var(--b) - var(--a)) * 0.45); }
    .g-pane::before { animation-name: g-glaze; }
    .site-gauge .g-crane { transform-origin: bottom; animation-name: g-grow, g-off; animation-range: 0% 8%, 92% 98%; }
    .g-hoist { animation-name: g-on, g-off; animation-range: 8% 10%, 84% 88%; }
    .g-cable { transform-origin: top; animation-name: g-reel; animation-range: 10% 85%; }
    .g-load { animation-name: g-lift; animation-range: 10% 85%; }
    .g-cross { transform-origin: center; animation-name: g-top-out; }

    .gauge-label {
      display: grid; justify-items: end; font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
      font-size: 0.8125rem; letter-spacing: 0.08em; line-height: 1.15; color: oklch(0.97 0.01 262 / 0.7);
    }
    /* At the very top "Built 0%" read like an unfinished website: the readout arrives once the page starts to scroll */
    .gauge-label { animation: g-reveal linear both; animation-timeline: scroll(root); animation-range: 40px 240px; }
    .gauge-pct { font-size: 1.25rem; letter-spacing: 0.02em; color: var(--white); }
    .gauge-pct { font-variant-numeric: tabular-nums; counter-reset: pct var(--pct); animation-name: g-count; animation-range: 0% 100%; }
    .gauge-pct::after { content: counter(pct) "%"; }

    /* Menu widths: the drawing alone, between the logo and the menu button; too tight beside the logo under 360px */
    @media (max-width: 1040px) {
      .site-gauge { margin: 0 4px 0 auto; }
      .g-art { --u: calc(34px / 88); }
      .site-gauge + .menu-toggle { margin-left: 0; }
      .gauge-label { display: none; }
    }
    @media (max-width: 359px) {
      .site-gauge { display: none; }
      .site-gauge + .menu-toggle { margin-left: auto; }
    }
  }
}
@keyframes g-grow { from { scale: 1 0; } }
@keyframes g-pour { from { scale: 0 1; } }
@keyframes g-set { from { translate: 0 calc(-12 * var(--u)); opacity: 0; } 30% { opacity: 1; } }
@keyframes g-glaze { 45% { opacity: 1; } } /* the amber flash over each pane as it glazes */
@keyframes g-on { from { opacity: 0; } }
@keyframes g-off { to { opacity: 0; } }
@keyframes g-reel { to { scale: 1 0.1; } }
@keyframes g-lift { to { translate: 0 calc(-64 * var(--u)); } }
@keyframes g-top-out { from { scale: 0; opacity: 0; } }
@keyframes g-count { to { --pct: 100; } }
@keyframes g-reveal { from { opacity: 0; translate: 8px 0; } }


/* Drafting sheet: the light "white" sections read as a drawing on cool, blue-tinted paper with a fine blueprint grid
   (24px squares, a heavier line every 120px) in the brand blue. The grid sits under the column guides and fades out
   toward the bottom of each section, so text, forms and photos stay on clean paper. */
:root {
  --sheet: oklch(0.975 0.012 258);
  --grid-minor: oklch(0.47 0.2 264 / 0.05);
  --grid-major: oklch(0.47 0.2 264 / 0.09);
}
:is(.services, .svc-about, .faq, .article, .about-intro, .values-block, .team, .contact, .vacancies) { background-color: var(--sheet); }
:is(.services, .svc-about, .faq, .article, .about-intro, .values-block, .team, .contact, .vacancies)::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
  mask-image: linear-gradient(#000, #000 35%, oklch(0 0 0 / 0.35));
}

/* Site plan sheet (build/siteplan.mjs): an empty lot waiting for the visitor's project, printed on white with a
   title block, under the credentials in the contact section */
.site-sheet {
  margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 200px;
  background: var(--white); border: 1.5px solid var(--navy); box-shadow: 0 22px 44px -32px oklch(0.24 0.09 265 / 0.45);
}
.site-plan { display: block; width: 100%; height: auto; padding: clamp(14px, 2vw, 24px); overflow: visible; }
.site-plan :is(path, circle) { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sp-lines path { stroke: oklch(0.47 0.2 264 / 0.75); stroke-width: 1.25; }
.sp-bound path { stroke: var(--navy); stroke-width: 1.75; stroke-dasharray: 14 4 2 4; } /* property line */
.sp-bound .sp-setback { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 5 5; stroke-opacity: 0.6; }
.sp-notes .sp-north { fill: var(--navy); stroke: var(--navy); }
.sp-road path { stroke: oklch(0.47 0.2 264 / 0.45); stroke-dasharray: 10 8; }
.sp-trees :is(circle, path) { stroke: oklch(0.55 0.1 160 / 0.7); stroke-width: 1; }
.sp-notes text, .sp-mark text {
  fill: var(--ink-2); font: 700 13px var(--font-label); letter-spacing: 0.12em; text-anchor: middle;
  paint-order: stroke; stroke: var(--white); stroke-width: 5px; stroke-linejoin: round;
}
.sp-notes .sp-small { font-size: 10px; font-weight: 600; }
.sp-mark path { fill: var(--amber); stroke: var(--navy); stroke-width: 1.25; }
.sp-mark text { fill: var(--navy); font-size: 12px; }
.site-block { display: grid; align-content: stretch; border-left: 1.5px solid var(--navy); }
.site-block > div { display: grid; align-content: center; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.site-block > div:last-child { border-bottom: 0; }
.site-block dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.site-block dd { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.15; text-transform: uppercase; color: var(--navy); }
.site-status { background: var(--amber); }
.site-status dt { color: var(--navy); }
.js .sp-lines [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) calc(var(--i, 0) * 150ms) }
.js .site-plan.is-drawn .sp-lines [pathLength] { stroke-dashoffset: 0; }
.js .site-plan :is(.sp-bound, .sp-road, .sp-trees, .sp-notes, .sp-mark) { opacity: 0; transition: opacity .9s var(--ease) 1.2s; }
.js .site-plan .sp-bound { transition-delay: .1s; }
.js .site-plan .sp-mark { transform-box: fill-box; transform-origin: center; scale: 0.6; transition: opacity .6s var(--ease) 1.9s, scale .8s var(--ease) 1.9s; }
.js .site-plan.is-drawn :is(.sp-bound, .sp-road, .sp-trees, .sp-notes, .sp-mark) { opacity: 1; scale: 1; }
@media (max-width: 560px) {
  .site-sheet { grid-template-columns: minmax(0, 1fr); }
  .site-block { grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1.5px solid var(--navy); }
  .site-block > div { padding: 10px 14px; }
  .site-block > div:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line); }
  .site-status { grid-column: 1 / -1; }
  .sp-notes .sp-small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .site-plan :is(.sp-bound, .sp-road, .sp-trees, .sp-notes, .sp-mark), .js .sp-lines [pathLength] { transition: none; opacity: 1; scale: 1; stroke-dashoffset: 0; }
}

/* Tape measure (markup: measure in render.mjs): the steel hook is caught on the top edge of the screen and the case
   hangs on the blade. The page scroll pulls the case down the right edge (more tape out) and winds it back up; both
   run on the same scroll timeline so the blade always meets the case's slot. Ticks every 8px, a number every 40px
   (desktop). Hidden without scroll timelines or with reduced motion. Not to be confused with .tape (hero caution tape). */
.measure { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .measure {
      --blade-w: 12px; --case-w: 34px; --case-h: calc(var(--case-w) * 1.1); --reach: calc(100dvh - var(--case-h) - 18px);
      display: block; position: fixed; top: 0; right: 6px; z-index: 16; width: var(--case-w); height: 100dvh; pointer-events: none;
    }
    .measure-hook {
      position: absolute; top: 0; right: calc((var(--case-w) - var(--blade-w)) / 2 - 4px); width: calc(var(--blade-w) + 8px); height: 10px;
      background:
        linear-gradient(oklch(0.38 0.01 265) 0 2.5px, oklch(0.5 0.01 265 / 0.6) 2.5px 3.5px, transparent 3.5px), /* lip bent over the top edge */
        radial-gradient(circle, oklch(0.45 0.01 265) 1.2px, transparent 1.6px) 3px 4px / 5px 5px no-repeat,
        radial-gradient(circle, oklch(0.45 0.01 265) 1.2px, transparent 1.6px) calc(100% - 3px) 4px / 5px 5px no-repeat,
        linear-gradient(oklch(0.62 0.012 265), oklch(0.86 0.008 265) 45%, oklch(0.6 0.012 265));
      border-radius: 0 0 2px 2px; box-shadow: 0 2px 3px oklch(0.24 0.09 265 / 0.35);
      z-index: 2;
    }
    /* The blade is a window sliding down from above the hook while the tape inside slides up by the same amount, so
       the ticks stay put against the hook and only the visible length grows. Both are transforms: no layout per frame. */
    .measure-blade {
      position: absolute; top: 4px; right: calc((var(--case-w) - var(--blade-w)) / 2); width: var(--blade-w); height: calc(var(--reach) + 6px);
      overflow: clip; overflow-clip-margin: 10px;
      animation: measure-window linear both; animation-timeline: scroll(root);
    }
    .measure-tape {
      position: absolute; inset: 0;
      background:
        linear-gradient(var(--navy) 1.5px, transparent 1.5px) left 0 top 4px / 70% 40px repeat-y,
        linear-gradient(oklch(0.24 0.09 265 / 0.7) 1px, transparent 1px) left 0 top 4px / 35% 8px repeat-y,
        var(--amber);
      box-shadow: -1px 0 0 oklch(0.24 0.09 265 / 0.18), -3px 2px 8px -2px oklch(0.24 0.09 265 / 0.3);
      animation: measure-unroll linear both; animation-timeline: scroll(root);
    }
    .measure-blade span {
      position: absolute; right: 1px; top: calc(var(--n) * 40px + 4px); translate: 0 3px;
      writing-mode: vertical-rl; font: 700 8px/1 var(--font-display); color: var(--navy);
    }
    .measure-case {
      position: absolute; top: 4px; right: 0; width: var(--case-w); height: auto; overflow: visible; z-index: 1;
      filter: drop-shadow(0 6px 8px oklch(0.24 0.09 265 / 0.35));
      animation: measure-case linear both; animation-timeline: scroll(root);
    }
    .mc-body { fill: var(--amber); stroke: var(--navy); stroke-width: 1.5; }
    .mc-slot, .mc-lock { fill: var(--navy); }
    .mc-face { fill: var(--navy); }
    .mc-hub { fill: oklch(0.8 0.01 265); stroke: oklch(0.55 0.01 265); }
    .mc-clip { fill: oklch(0.72 0.01 265); stroke: oklch(0.5 0.01 265); }
    .mc-grip { fill: none; stroke: oklch(0.24 0.09 265 / 0.45); stroke-width: 1.2; stroke-linecap: round; }
  }
}
@keyframes measure-window { from { translate: 0 -100%; } }
@keyframes measure-unroll { from { translate: 0 100%; } }
@keyframes measure-case { to { translate: 0 var(--reach); } }
@media (max-width: 900px) {
  .measure { --blade-w: 8px; --case-w: 22px; right: 1px; }
  .measure-blade span { display: none; }
}

/* Banner slideshow (pageHero slides): photos stacked, the current one fades in and eases out of a slight zoom. The
   scroll parallax still moves each photo. "Pictured" names the project under the title. */
.page-hero-media img { position: absolute; inset: 0; }
.page-hero-media[data-slides] img { opacity: 0; scale: 1.12; transition: opacity 1.8s var(--ease-quart), scale 9s linear; }
.page-hero-media[data-slides] img.is-on { opacity: 1; scale: 1.02; }
.hero-pictured {
  margin-top: 28px;
  font-size: 0.9375rem; color: oklch(0.93 0.02 262);
}
.hero-pictured::before { content: ""; display: inline-block; vertical-align: -1px; margin-right: 10px; width: 10px; height: 11px; background: var(--amber); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hero-pictured > span:first-child { margin-right: 6px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8125rem; color: var(--amber); }
.hero-pictured[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .page-hero-media[data-slides] img { transition: none; scale: 1; }
}

/* ===== Job Opportunities (/careers/): the open positions as a schedule on a drawing sheet, the trades on the team as
   the discipline legend of a drawing set, and one page per posting with its title block ===== */
.vacancies, .trades { padding-block: var(--section); }
.trades { background: var(--bg); }
.vac-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.vac-intro p { justify-self: end; max-width: 44ch; font-size: 1.125rem; color: var(--ink-2); }
.vac-sheet { position: relative; padding: clamp(20px, 3vw, 40px); background: var(--white); box-shadow: 0 1px 2px oklch(0.24 0.09 265 / 0.08), 0 18px 40px -28px oklch(0.24 0.09 265 / 0.35); }
.vac-head, .vac-row, .vac-blank-row {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 52px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1.2fr) 36px;
}
.vac-head { padding: 0 4px 10px; border-bottom: 1.5px solid var(--navy); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.vac-list li { border-bottom: 1px solid var(--line); }
.vac-row { position: relative; padding: 18px 4px; text-decoration: none; }
.vac-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.vac-no {
  justify-self: start; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); transition: background-color .3s, border-color .3s, color .3s;
}
.vac-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; transition: color .25s; }
.vac-sample { display: inline-block; margin-left: 8px; padding: 2px 8px; vertical-align: 2px; background: var(--amber); color: var(--navy); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.vac-cell { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vac-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vac-go {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
  color: var(--ink-2); transition: background-color .3s, border-color .3s, color .3s, transform .5s var(--ease);
}
.vac-row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.vac-row:is(:hover, :focus-visible) .vac-no { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.vac-row:is(:hover, :focus-visible) .vac-title { color: var(--blue); }
.vac-row:is(:hover, :focus-visible) .vac-go { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(-45deg); }
.vac-row:focus-visible { outline-offset: -2px; }
/* nothing open: ruled blank rows with a rubber stamp pressed across them */
.vac-blank { position: relative; }
.vac-blank-row { padding: 27px 4px; border-bottom: 1px solid var(--line); }
.vac-blank-row i { height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.vac-blank-row i:first-child { grid-column: 2; width: 72%; }
.vac-stamp {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -6deg;
  display: grid; justify-items: center; gap: 4px; padding: 14px 30px 12px;
  border: 3px solid var(--blue); outline: 1.5px solid var(--blue); outline-offset: 4px;
  background: oklch(0.995 0.002 265 / 0.9); color: var(--blue); text-align: center; text-transform: uppercase; white-space: nowrap;
}
.vac-stamp span { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 0.95; letter-spacing: 0.04em; }
.vac-stamp small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; }
/* pressed onto the sheet after the sheet has come in: drops from above and lands with a slight bounce */
.js .vac-stamp.rv { transform: none; transition: opacity .2s ease-out .45s, scale .55s cubic-bezier(0.3, 1.5, 0.5, 1) .45s; }
.js .vac-stamp.rv:not(.is-in) { opacity: 0; scale: 1.4; transform: none; }
.vac-block { width: min(100%, 640px); margin: 24px 0 0 auto; }
.vac-block dd { white-space: normal; }
.vac-block .sheet-cell--no dd { font-variant-numeric: tabular-nums; }

.trades-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.trades-copy { position: sticky; top: calc(var(--header-space) + 24px); }
.trades-copy > p { margin-top: 20px; max-width: 46ch; font-size: 1.125rem; color: var(--ink-2); }
.trades-quote { margin: 32px 0 28px; padding-top: 20px; border-top: 2px solid var(--navy); }
.trades-quote p { max-width: 30ch; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 500; line-height: 1.4; color: var(--ink); }
.trades-quote footer { margin-top: 12px; font-size: 0.875rem; color: var(--ink-2); }
.legend { border-top: 1.5px solid var(--navy); }
.legend-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
/* a grid line runs down through the bubbles, as on a structural grid */
.legend-row::before { content: ""; position: absolute; top: 0; bottom: -1px; left: 28px; border-left: 1px dashed oklch(0.24 0.09 265 / 0.35); }
.legend-bubble {
  position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--navy); background: var(--white); color: var(--navy);
  font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; transition: background-color .3s;
}
.legend-row:hover .legend-bubble { background: var(--amber); }
.legend-text h3 { font-size: 1.25rem; font-weight: 620; line-height: 1.25; }
.legend-text p { margin-top: 6px; color: var(--ink-2); }
.legend-text .legend-licence { margin-top: 8px; font-size: 0.875rem; font-weight: 600; color: var(--blue); }
.team-join { margin-top: clamp(40px, 5vw, 64px); font-size: 1.125rem; color: var(--ink-2); }

.job .article-head { max-width: 1360px; }
.job-sample { padding: 10px 16px; margin-bottom: 28px; background: var(--amber); color: var(--navy); font-weight: 700; }
.job-block { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; margin: clamp(28px, 4vw, 44px) 0 0; }
.job-block dd { white-space: normal; }
.job-block .sheet-cell--no dd { font-size: 1.5rem; white-space: nowrap; }
.job-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 88px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.job-summary { max-width: 62ch; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.6; }
.job-body h2 { margin: clamp(36px, 4vw, 52px) 0 16px; font-weight: 700; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1; letter-spacing: var(--display-tracking); }
.job-list li { position: relative; max-width: 62ch; padding-left: 28px; color: var(--ink-2); line-height: 1.6; }
.job-list li + li { margin-top: 10px; }
.job-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 9px; height: 9px; border: 1.5px solid var(--navy); }
.job-apply { position: sticky; top: calc(var(--header-space) + 24px); padding: clamp(24px, 3vw, 36px); background: var(--navy); color: var(--white); }
.job-apply h2 { font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: var(--display-tracking); }
.job-apply p { margin-top: 14px; color: var(--bp-line); }
.job-apply .btn { margin-top: 22px; }
.job-apply .job-closes { margin-top: 18px; padding-top: 14px; border-top: 1px solid oklch(0.93 0.03 255 / 0.25); font-size: 0.9375rem; }
.job-foot { margin-top: clamp(48px, 6vw, 80px); }

@media (max-width: 900px) {
  .vac-intro { grid-template-columns: minmax(0, 1fr); }
  .vac-intro p { justify-self: start; }
  .vac-sheet { padding: 16px; }
  .vac-head { display: none; }
  .vac-list { border-top: 1.5px solid var(--navy); }
  .vac-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 18px 44px 18px 0; }
  .vac-no, .vac-title { grid-column: 1 / -1; }
  .vac-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .vac-go { position: absolute; top: 18px; right: 0; width: 32px; height: 32px; }
  .vac-blank { border-top: 1.5px solid var(--navy); }
  .vac-blank-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; padding: 22px 0; }
  .vac-blank-row i:first-child { grid-column: 1 / -1; width: 70%; }
  .vac-blank-row i:nth-child(n + 4) { display: none; }
  .vac-stamp { padding: 12px 22px 10px; }
  .vac-block { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
  .vac-block .sheet-cell:nth-child(2) { display: none; }
  .vac-block .sheet-cell--no { border-left: 1px solid var(--navy); }
  .trades-grid, .job-grid { grid-template-columns: minmax(0, 1fr); }
  .trades-copy, .job-apply { position: static; }
  .legend-row { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .legend-row::before { left: 22px; }
  .legend-bubble { width: 44px; height: 44px; font-size: 1.375rem; }
  .job-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .job-block .sheet-cell { border-left: 0; border-top: 1px solid var(--navy); }
  .job-block .sheet-cell:nth-child(-n + 2) { border-top: 0; }
  .job-block .sheet-cell:nth-child(even) { border-left: 1px solid var(--navy); }
  .job-block .sheet-cell--no { grid-column: 1 / -1; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .vac-stamp.rv, .js .vac-stamp.rv:not(.is-in) { scale: 1; transition: none; }
  .vac-row::after, .vac-no, .vac-go, .legend-bubble { transition: none; }
}

/* ===== BIR Registration Seal Badge (birBadge() in build/media.mjs): the business permit posted at the site gate, a
   white sheet taped to the footer. BIR asks for it to be visible and scannable, so the QR stays large and on white. */
.bir-plate {
  position: relative; display: grid; grid-template-columns: minmax(0, 200px) 100px; align-items: center; gap: 10px 14px;
  width: fit-content; max-width: 100%; margin: 28px 0 0; padding: 16px 16px 14px; background: var(--white); color: var(--navy);
}
.bir-plate::before, .bir-plate::after {
  content: ""; position: absolute; top: -9px; width: 54px; height: 18px; background: oklch(0.86 0.13 88 / 0.85);
}
.bir-plate::before { left: -12px; rotate: -32deg; }
.bir-plate::after { right: -12px; rotate: 32deg; }
.bir-plate img { display: block; width: 100%; height: auto; }
.bir-plate figcaption {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-top: 10px;
  border-top: 1px solid oklch(0.32 0.1 260 / 0.2); font-size: 0.75rem; color: oklch(0.32 0.06 260);
}
.bir-plate strong { font-family: var(--font-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.bir-plate span { font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .bir-plate { grid-template-columns: minmax(0, 1fr) 84px; } }