/* ==========================================================================
   Scaffold — high-rise contractor template · archesign.studio
   Kinetic: hi-vis lime on charcoal, diagonal bracing grid, moving site tape.
   1. Tokens  2. Base  3. Layout  4. Header  5. Components
   6. Signature (tower progress, tape, scaffold overlay, crane)  7. Pages  8. Footer
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --char: #17191a;
  --char-2: #202325;
  --char-3: #2c3032;
  --line: #3a3f42;
  --lime: #c8f31d;
  --lime-dim: #8fae14;
  --white: #f1f3ec;
  --muted: #8e948f;
  --silver: #c9cfcc;
  --lime-a: rgba(200, 243, 29, .055);
  --lime-b: rgba(200, 243, 29, .16);

  --font-d: "Chakra Petch", "Arial Narrow", "Segoe UI", sans-serif;
  --font-b: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 40px);
  --max: 1360px;
  --space: clamp(64px, 8.5vw, 128px);
  --cut: clamp(26px, 5vw, 84px);
  --ch: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: var(--white);
  font: 400 17px/1.62 var(--font-b);
  -webkit-font-smoothing: antialiased;
  background-color: var(--char);
  /* scaffold bracing lattice: two diagonals + occasional vertical standards */
  background-image:
    repeating-linear-gradient(90deg, rgba(201, 207, 204, .045) 0 2px, transparent 2px 340px),
    repeating-linear-gradient(45deg, var(--lime-a) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(-45deg, var(--lime-a) 0 1px, transparent 1px 68px);
}
main { display: block; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-d); text-transform: uppercase; line-height: .94; }
h1, h2 { font-weight: 700; font-style: italic; letter-spacing: -.012em; }
h3, .h3 { font-family: var(--font-d); font-weight: 600; letter-spacing: .01em; line-height: 1.08; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--char); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--char); padding: 10px 14px; z-index: 100; font: 700 14px var(--font-d); }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.lime { color: var(--lime); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font: 600 13px/1.2 var(--font-d); letter-spacing: .16em; text-transform: uppercase; color: var(--lime);
}
.eyebrow::before { content: ""; width: 26px; height: 9px; flex: none; background: var(--lime); clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); }
.label { font: 600 12px/1.3 var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* 3. Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space) 0; }
.section--tight { padding-top: 0; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 56px); }
.head h2 { font-size: clamp(38px, 5.6vw, 84px); max-width: 15ch; }
.head > p { max-width: 44ch; color: var(--muted); margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.split h2 { font-size: clamp(34px, 4.4vw, 64px); margin-bottom: 22px; }

/* diagonal-edged band */
.slant {
  position: relative; background: var(--char-2);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding: calc(var(--space) + var(--cut) * .6) 0;
}
.slant--lime { background: var(--lime); color: var(--char); }
.slant--lime .eyebrow { color: var(--char); }
.slant--lime .eyebrow::before { background: var(--char); }

/* 4. Header ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--char); border-bottom: 1px solid var(--line); transition: border-color .3s; }
.site-header::before {
  content: ""; display: block; height: 5px;
  background: repeating-linear-gradient(-45deg, var(--lime) 0 9px, var(--char) 9px 18px);
}
.scrolled .site-header { border-bottom-color: var(--lime-dim); }
.header-row { display: flex; align-items: center; gap: 28px; height: 74px; }
.logo { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; color: var(--white); }
.logo-mark { width: 34px; height: 34px; flex: none; }
.logo-word { font: italic 700 22px/1 var(--font-d); letter-spacing: .06em; display: inline-flex; align-items: center; gap: 10px; }
.logo-word small {
  font: 700 10px/1 var(--font-d); font-style: normal; letter-spacing: .2em; text-transform: uppercase;
  background: var(--lime); color: var(--char); padding: 5px 9px 4px 8px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.site-nav { display: flex; gap: 4px; align-items: center; }
.site-nav a {
  position: relative; padding: 10px 14px; font: 600 14px/1 var(--font-d); letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; gap: 8px; align-items: baseline; color: var(--silver); transition: color .2s;
}
.site-nav a i { font-style: normal; font-size: 10px; color: var(--lime-dim); }
.site-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--lime);
  transform: scaleX(0) skewX(-30deg); transform-origin: left; transition: transform .3s var(--ease);
}
.site-nav a:hover { color: var(--white); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1) skewX(-30deg); }
.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav .nav-cta { display: none; }
.menu-btn { display: none; }

@media (max-width: 900px) {
  .header-row .header-cta { display: none; }
  .menu-btn {
    display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--lime); border: 0;
    color: var(--char); cursor: pointer; position: relative; z-index: 60;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  }
  .bars, .bars::before, .bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease), background .3s; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -6px; } .bars::after { top: 6px; }
  .menu-open .bars { background: transparent; }
  .menu-open .bars::before { top: 0; transform: rotate(45deg); }
  .menu-open .bars::after { top: 0; transform: rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 0; z-index: 55; flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    padding: 90px var(--gutter) 40px; background-color: var(--char);
    background-image: repeating-linear-gradient(45deg, var(--lime-b) 0 1px, transparent 1px 56px), repeating-linear-gradient(-45deg, var(--lime-a) 0 1px, transparent 1px 56px);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .site-nav a { font: italic 700 clamp(34px, 9vw, 52px)/1 var(--font-d); letter-spacing: 0; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--white); }
  .site-nav a i { font: 600 13px var(--font-d); }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current="page"] { color: var(--lime); }
  .site-nav .nav-cta { display: inline-flex; color: var(--lime); font-size: clamp(24px, 6vw, 34px); border-bottom: 0; margin-top: 18px; }
  .menu-open .site-nav { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
}

/* 5. Components ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 16px 26px; cursor: pointer;
  font: 700 14px/1 var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--white);
  background: transparent; border: 2px solid var(--silver); transform: skewX(-12deg);
  transition: background .2s, color .2s, border-color .2s;
}
.btn > span { display: inline-block; transform: skewX(12deg); }
.btn:hover { border-color: var(--lime); color: var(--lime); }
.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--char); }
.btn--lime:hover { background: var(--white); border-color: var(--white); color: var(--char); }
.btn--dark { background: var(--char); border-color: var(--char); color: var(--lime); }
.btn--dark:hover { background: var(--white); border-color: var(--white); color: var(--char); }
.btn--sm { padding: 11px 18px; font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 18px; padding-left: 6px; }

.chamfer { clip-path: polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%); }
.corner { position: relative; }
.corner::after {
  content: ""; position: absolute; top: 0; right: 0; width: 36px; height: 36px; pointer-events: none;
  background: linear-gradient(225deg, transparent 0 15.6px, var(--lime) 15.6px 19px, transparent 19px);
}

.figure { margin: 0; position: relative; overflow: hidden; background: var(--char-2); }
.figure img { width: 100%; height: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; }
.figcap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.figcap b { font: 600 13px var(--font-d); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.figcap span { font-size: 14px; color: var(--muted); }

/* key data strip */
.spec { margin: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 3px; }
.spec > div { background: var(--char-2); padding: 18px 20px 20px; border-top: 3px solid var(--line); min-width: 0; }
.spec > div:first-child { border-top-color: var(--lime); }
.spec dt, .spec .k { display: block; font: 600 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.spec dd, .spec .v { margin: 0; font: italic 700 clamp(24px, 2.4vw, 36px)/1.05 var(--font-d); text-transform: uppercase; overflow-wrap: anywhere; }
.spec small { font: 500 14px var(--font-b); font-style: normal; color: var(--muted); text-transform: none; margin-left: 4px; }

.ticks { list-style: none; padding: 0; margin: 22px 0 0; }
.ticks li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 7px; background: var(--lime); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }

/* status chips */
.status {
  display: inline-block; font: 700 11px/1 var(--font-d); letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 12px 6px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.status--rising { background: var(--lime); color: var(--char); }
.status--topped { background: var(--silver); color: var(--char); }
.status--complete { background: var(--char-3); color: var(--white); }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 6. Signature components -------------------------------------------------- */
/* 6a. Tower progress widget */
.rise { --fh: 9px; --fg: 3px; background: var(--char-2); padding: 24px 24px 18px; position: relative; border-top: 4px solid var(--lime); }
.rise-head { margin-bottom: 20px; padding-right: 20px; }
.live { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 700 12px var(--font-d); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.live-dot { width: 9px; height: 9px; background: var(--lime); border-radius: 50%; animation: blink 1.4s steps(2, start) infinite; }
@keyframes blink { to { opacity: .15; } }
.rise-title { font-size: clamp(24px, 2.3vw, 34px); }
.rise-sub { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.rise-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: end; }
.rise-stack { position: relative; padding-top: 34px; }
.floors { list-style: none; margin: 0; padding: 0 0 0 38px; display: flex; flex-direction: column; gap: var(--fg); position: relative; }
.floors li { position: relative; height: var(--fh); }
.floors li::before { content: ""; position: absolute; inset: 0; background: var(--char-3); }
.floors li b { position: absolute; left: -38px; top: 50%; transform: translateY(-50%); font: 600 10px/1 var(--font-d); letter-spacing: .06em; color: var(--muted); }
.floors .c::before { background: var(--lime); }
.floors .fo::before { background: var(--lime-dim); }
.floors .en::before { background: var(--silver); }
.floors .st::before { background: repeating-linear-gradient(-45deg, rgba(200, 243, 29, .75) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--lime-dim); }
.floors .co::before { left: 41%; right: 41%; background: repeating-linear-gradient(45deg, var(--lime) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--lime); }
.floors .ns::before { background: transparent; border: 1px dashed #4d5357; }
.floors .sb::before { left: 9%; right: 9%; }
.floors .now b { color: var(--lime); }
.floors .now::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--lime); animation: pour 1.6s ease-in-out infinite; }
@keyframes pour { 50% { opacity: .2; } }
.flag {
  position: absolute; right: 0; bottom: calc(100% + 6px); white-space: nowrap; z-index: 1;
  font: 700 9px/1 var(--font-d); letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--char); padding: 4px 6px;
}
.crane-mini { position: absolute; top: 0; left: calc(var(--lab, 38px) + (100% - var(--lab, 38px)) / 2 - 1px); width: 3px; height: 34px; background: var(--silver); }
.crane-mini::before { content: ""; position: absolute; top: 3px; right: -26px; width: 112px; height: 5px; border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); background: repeating-linear-gradient(60deg, transparent 0 3px, var(--silver) 3px 4px, transparent 4px 6px); }
.crane-mini::after { content: ""; position: absolute; top: 8px; left: -64px; width: 9px; height: 22px; background: linear-gradient(var(--silver), var(--silver)) center top / 1px 15px no-repeat, linear-gradient(var(--lime), var(--lime)) center bottom / 9px 7px no-repeat; }
.ground { display: block; height: 7px; margin: 6px 0 0 30px; background: repeating-linear-gradient(-45deg, var(--muted) 0 1px, transparent 1px 5px); border-top: 2px solid var(--silver); }
.rise-big { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.rise-big b { font: italic 700 clamp(48px, 5vw, 72px)/.9 var(--font-d); color: var(--lime); }
.rise-big span { font: 600 14px var(--font-d); letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.meter { height: 8px; background: var(--char-3); margin: 12px 0 16px; position: relative; overflow: hidden; }
.meter span { position: absolute; inset: 0 auto 0 0; width: var(--p, 50%); background: repeating-linear-gradient(-45deg, var(--lime) 0 6px, var(--lime-dim) 6px 12px); }
.rise-dl { margin: 0 0 16px; display: grid; gap: 0; }
.rise-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.rise-dl dt { font: 600 11px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.rise-dl dd { margin: 0; text-align: right; font-weight: 700; }
.legend { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12px; color: var(--silver); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend li span { margin-left: auto; color: var(--muted); font-family: var(--font-d); }
.legend i { width: 14px; height: 9px; flex: none; }
.k-c { background: var(--lime); } .k-fo { background: var(--lime-dim); } .k-en { background: var(--silver); }
.k-st { background: repeating-linear-gradient(-45deg, var(--lime) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--lime-dim); }
.k-co { background: repeating-linear-gradient(45deg, var(--lime) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--lime); }
.k-ns { border: 1px dashed #5a6064; }
.rise-foot { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 11px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rise-foot a { color: var(--lime); }
.rise-foot a:hover { color: var(--white); }

.rise--full { --fh: 14px; --fg: 4px; padding: clamp(22px, 3vw, 40px); }
.rise--full .rise-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.rise--full { --lab: 46px; }
.rise--full .floors { padding-left: 46px; }
.rise--full .floors li b { left: -46px; font-size: 11px; }
.rise--full .flag { font-size: 11px; padding: 5px 8px; }
.stages { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15px; }
.stages th, .stages td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.stages th { font: 600 11px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stages td:first-child { white-space: nowrap; }
.stages td:first-child i { display: inline-block; width: 14px; height: 9px; margin-right: 10px; vertical-align: 1px; }
.stages td b { font-family: var(--font-d); font-weight: 600; letter-spacing: .04em; }

/* 6b. Kinetic tape + marquees */
.tape-zone { position: relative; overflow: hidden; }
.tape {
  position: relative; width: 116%; margin-left: -8%; overflow: hidden; z-index: 3;
  background: var(--lime); color: var(--char); transform: rotate(-4deg);
  border-top: 3px solid var(--char); border-bottom: 3px solid var(--char);
  box-shadow: 0 0 0 3px var(--lime);
}
.tape--silver {
  background: repeating-linear-gradient(90deg, var(--silver) 0 46px, #e2e6e4 46px 92px); transform: rotate(3deg);
  box-shadow: 0 0 0 3px var(--silver); z-index: 2;
}
.tape-track { display: flex; width: max-content; animation: tape 34s linear infinite; }
.tape--silver .tape-track { animation-direction: reverse; animation-duration: 46s; }
.tape-set { display: flex; flex: none; }
.tape-set span { padding: 14px 0 12px 26px; font: italic 700 clamp(18px, 2vw, 28px)/1 var(--font-d); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tape-set span::after { content: "—"; padding-left: 26px; }
.tape--silver .tape-set span { font-size: clamp(14px, 1.4vw, 18px); padding-top: 11px; padding-bottom: 9px; }
@keyframes tape { to { transform: translateX(-50%); } }

.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.marquee .tape-track { animation-duration: 52s; animation-direction: reverse; }
.marquee .tape-set span { font: italic 700 clamp(40px, 6vw, 92px)/1 var(--font-d); color: transparent; -webkit-text-stroke: 1px var(--silver); padding: 0 0 0 36px; }
.marquee .tape-set span::after { content: "/"; -webkit-text-stroke: 0; color: var(--lime); padding-left: 36px; }

/* 6c. Scaffold overlay + crane on tower artwork (positions from --tx/--tw = tower x/width in %) */
.site-fig { margin: 0; position: relative; overflow: hidden; background: var(--char-2); }
.site-fig img { width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; }
.scaf {
  position: absolute; pointer-events: none;
  left: calc(var(--tx) * 1% - 1.6%); width: calc(var(--tw) * 1% + 3.2%); top: var(--st, 5.5%); height: var(--sh, 24%);
  background:
    repeating-linear-gradient(0deg, rgba(200, 243, 29, .8) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(200, 243, 29, .9) 0 1.5px, transparent 1.5px 17px),
    repeating-linear-gradient(45deg, rgba(200, 243, 29, .38) 0 1px, transparent 1px 17px),
    rgba(20, 22, 23, .8);
  border-left: 2px solid var(--lime); border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
}
.scaf::before { content: ""; position: absolute; left: -2px; right: -2px; top: -7px; height: 7px; background: repeating-linear-gradient(-45deg, var(--lime) 0 5px, var(--char) 5px 10px); }
.ghost {
  position: absolute; pointer-events: none; left: calc(var(--tx) * 1%); width: calc(var(--tw) * 1%); top: var(--gt, 4%); height: var(--gh, 12%);
  background: repeating-linear-gradient(0deg, rgba(200, 243, 29, .22) 0 1px, transparent 1px 13px), var(--sky, rgba(32, 35, 37, .93));
  border: 1.5px dashed rgba(200, 243, 29, .65); border-bottom: 0;
}
.crane { position: absolute; pointer-events: none; left: var(--cl); top: var(--ct, 2.5%); width: var(--cw); height: var(--chh, 26%); }
.crane .jib {
  position: absolute; left: 0; right: 0; top: 0; height: 8px;
  border-top: 1.5px solid var(--silver); border-bottom: 1.5px solid var(--silver);
  background: repeating-linear-gradient(60deg, transparent 0 5px, var(--silver) 5px 6.5px, transparent 6.5px 10px);
}
.crane .mast {
  position: absolute; top: -10px; bottom: 0; left: var(--m, 76%); width: 8px;
  border-left: 1.5px solid var(--silver); border-right: 1.5px solid var(--silver);
  background: repeating-linear-gradient(30deg, transparent 0 5px, var(--silver) 5px 6.5px, transparent 6.5px 10px);
}
.crane .mast::before { content: ""; position: absolute; left: -6px; top: 12px; width: 16px; height: 12px; background: var(--lime); }
.crane .hook { position: absolute; top: 8px; left: var(--hk, 14%); width: 1.5px; height: var(--hl, 70%); background: var(--silver); }
.crane .hook::after { content: ""; position: absolute; left: -5px; bottom: -8px; width: 11px; height: 9px; background: var(--lime); clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 40%); }
.hook-tag {
  position: absolute; left: calc(var(--hk, 14%) - 8px); top: calc(var(--hl, 70%) + 22px); white-space: nowrap;
  font: 700 11px/1 var(--font-d); letter-spacing: .12em; text-transform: uppercase; background: var(--lime); color: var(--char);
  padding: 7px 10px 6px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.cam {
  position: absolute; left: 16px; top: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: rgba(23, 25, 26, .75); padding: 6px 10px;
}
.cam::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4b3e; animation: blink 1.4s steps(2, start) infinite; }
.viewfinder::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 4;
  background:
    linear-gradient(var(--lime), var(--lime)) left top / 26px 2px no-repeat, linear-gradient(var(--lime), var(--lime)) left top / 2px 26px no-repeat,
    linear-gradient(var(--lime), var(--lime)) right top / 26px 2px no-repeat, linear-gradient(var(--lime), var(--lime)) right top / 2px 26px no-repeat,
    linear-gradient(var(--lime), var(--lime)) left bottom / 26px 2px no-repeat, linear-gradient(var(--lime), var(--lime)) left bottom / 2px 26px no-repeat,
    linear-gradient(var(--lime), var(--lime)) right bottom / 26px 2px no-repeat, linear-gradient(var(--lime), var(--lime)) right bottom / 2px 26px no-repeat;
}

/* 7. Pages ----------------------------------------------------------------- */
/* hero */
.hero {
  position: relative; overflow: hidden; background: #131516;
  padding: clamp(36px, 5vw, 76px) 0 calc(var(--space) * .45 + var(--cut));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0 0 0 42%; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(200, 243, 29, .13) 0 1px, transparent 1px 38px), repeating-linear-gradient(-45deg, rgba(200, 243, 29, .13) 0 1px, transparent 1px 38px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(22px, 3vw, 40px); }
.hero-meta span { font: 600 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line); color: var(--silver); background: var(--char); }
.hero-meta span:first-child { border-color: var(--lime); color: var(--lime); }
.hero h1 { font-size: clamp(60px, 9.4vw, 160px); line-height: .84; letter-spacing: -.02em; }
.hero h1 span { display: block; }
.hero h1 .up { color: var(--lime); }
.hero h1 .fast { text-shadow: -.07em 0 0 rgba(200, 243, 29, .34), -.14em 0 0 rgba(200, 243, 29, .16), -.21em 0 0 rgba(200, 243, 29, .07); padding-left: .24em; }
.hero .lede { margin: clamp(24px, 3vw, 36px) 0 30px; font-size: clamp(17px, 1.45vw, 21px); color: var(--silver); max-width: 46ch; }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: clamp(30px, 4vw, 52px); max-width: 640px; }
.proof div { padding: 14px 16px; background: rgba(32, 35, 37, .8); border-left: 3px solid var(--lime); }
.proof b { display: block; font: italic 700 30px/1 var(--font-d); color: var(--white); }
.proof span { display: block; margin-top: 6px; font: 600 11px/1.3 var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* live stats */
.stats-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.stats-head p { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.stat { background: var(--char-2); padding: 24px 24px 22px; position: relative; }
.stat .label { display: block; }
.stat b { display: block; font: italic 700 clamp(52px, 6.2vw, 96px)/.95 var(--font-d); margin: 14px 0 8px; letter-spacing: -.02em; }
.stat b small { font-size: .38em; color: var(--lime); margin-left: 6px; letter-spacing: .02em; }
.stat p { margin: 0; color: var(--muted); font-size: 14px; }
.stat:nth-child(1) b { color: var(--lime); }

/* site cam + tape */
.cam-zone { padding: 0 0 clamp(70px, 9vw, 130px); }
.cam-fig { --ratio: 16 / 10; }
.cam-zone .tape-stack { position: relative; margin-top: clamp(-150px, -9vw, -60px); }
.cam-zone .tape--silver { margin-top: -18px; }
.cam-caption { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 70px); }
.cam-caption p { max-width: 58ch; color: var(--silver); margin: 0; }

/* service cards */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc-card { background: var(--char-2); padding: 28px 24px 26px; display: flex; flex-direction: column; transition: background .25s, transform .3s var(--ease); }
.svc-card:hover { background: var(--char-3); transform: translateY(-6px); }
.svc-card .code { font: 700 13px var(--font-d); letter-spacing: .14em; color: var(--lime); }
.svc-card h3 { font-size: clamp(22px, 1.9vw, 27px); margin: 34px 0 14px; min-height: 2.2em; }
.svc-card p { color: var(--muted); font-size: 15px; }
.svc-card .ticks { margin-top: auto; font-size: 14px; }
.svc-card .go { margin-top: 18px; font: 700 13px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }

/* project cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); }
.tcard { display: flex; flex-direction: column; background: var(--char-2); transition: background .25s, transform .3s var(--ease); }
.tcard:hover { background: var(--char-3); transform: translateY(-6px); }
.tcard .site-fig .status { position: absolute; left: 14px; bottom: 14px; z-index: 3; }
.tbody { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.tmeta { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 10px; font: 600 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tmeta span:first-child { color: var(--lime); }
.tbody h2, .tbody h3 { font-size: clamp(22px, 2vw, 28px); font-style: normal; font-weight: 600; letter-spacing: .01em; line-height: 1.06; }
.tbody h2, .tbody h3 { margin-bottom: 18px; }
.tspec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.tspec dt { font: 600 10px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tspec dd { margin: 2px 0 0; font: italic 700 22px/1.1 var(--font-d); }
.tbar { height: 6px; background: var(--char-3); margin-top: 16px; position: relative; }
.tbar span { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--lime); }
.tbar + .label { margin-top: 8px; display: block; font-size: 11px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 36px; padding-left: 6px; }
.filters button {
  font: 700 13px/1 var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); cursor: pointer;
  background: var(--char-2); border: 2px solid var(--line); padding: 12px 18px; transform: skewX(-12deg); transition: border-color .2s, color .2s, background .2s;
}
.filters button span { display: inline-block; transform: skewX(12deg); }
.filters button:hover { border-color: var(--lime); color: var(--white); }
.filters button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--char); }

/* 6-day cycle */
.cycle { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; counter-reset: d; }
.cycle li { --i: 0; background: var(--char-3); padding: 20px 18px 22px; min-height: calc(200px + var(--i) * 30px); position: relative; border-top: 4px solid var(--lime-dim); }
.cycle li:last-child { background: var(--lime); color: var(--char); border-top-color: var(--white); }
.cycle .day { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cycle .day b { font: italic 700 44px/1 var(--font-d); }
.cycle .day span { font: 700 12px var(--font-d); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.cycle li:last-child .day span { color: var(--char); }
.cycle h3 { font-size: 19px; margin: 18px 0 8px; }
.cycle p { margin: 0; font-size: 14px; color: var(--muted); }
.cycle li:last-child p { color: var(--char-3); }
.cycle li:nth-child(1) { --i: 0; } .cycle li:nth-child(2) { --i: 1; } .cycle li:nth-child(3) { --i: 2; }
.cycle li:nth-child(4) { --i: 3; } .cycle li:nth-child(5) { --i: 4; } .cycle li:nth-child(6) { --i: 5; }
.cycle-note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: 15px; }
.cycle-note b { color: var(--white); }

/* safety */
.safety { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.safety h2 { font-size: clamp(34px, 4.4vw, 64px); margin-bottom: 20px; }
.safety-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 28px 0 0; }
.safety-dl div { background: var(--char-2); padding: 16px 18px; border-left: 3px solid var(--lime-dim); }
.safety-dl dt { font: 600 11px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.safety-dl dd { margin: 4px 0 0; font: italic 700 30px/1.1 var(--font-d); }
.lti { padding: 14px; background: repeating-linear-gradient(-45deg, var(--lime) 0 16px, var(--char) 16px 32px); }
.lti-in { background: var(--char); padding: clamp(28px, 4vw, 52px) clamp(22px, 3vw, 44px); text-align: center; }
.lti-in b { display: block; font: italic 700 clamp(96px, 13vw, 200px)/.82 var(--font-d); color: var(--lime); letter-spacing: -.03em; }
.lti-in strong { display: block; font: italic 700 clamp(24px, 2.6vw, 38px)/1 var(--font-d); text-transform: uppercase; margin-top: 14px; }
.lti-in p { margin: 14px auto 0; color: var(--muted); max-width: 34ch; font-size: 15px; }

/* CTA band */
.cta h2 { font-size: clamp(44px, 7.4vw, 124px); line-height: .86; max-width: 12ch; }
.cta-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 28px 56px; }
.cta-row p { max-width: 40ch; margin: 0 0 22px; font-size: 18px; font-weight: 500; }

/* inner page head */
.page-head { position: relative; padding: clamp(40px, 6vw, 96px) 0 clamp(36px, 5vw, 64px); overflow: hidden; }
.page-head::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: min(46%, 620px); pointer-events: none; z-index: -1;
  background: repeating-linear-gradient(45deg, rgba(200, 243, 29, .11) 0 1px, transparent 1px 34px), repeating-linear-gradient(-45deg, rgba(200, 243, 29, .11) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.page-head .wrap { position: relative; }
.page-head h1 { font-size: clamp(42px, 11.5vw, 150px); line-height: .86; max-width: 13ch; }
.page-head .lede { margin: 26px 0 0; font-size: clamp(17px, 1.45vw, 21px); color: var(--silver); max-width: 56ch; }
.crumb { font: 600 13px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.crumb a { color: var(--lime); }
.crumb a:hover { color: var(--white); }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.head-row > div:first-child { min-width: 0; flex: 1 1 520px; }
.counter { display: flex; gap: 3px; }
.counter div { background: var(--char-2); padding: 14px 18px; border-top: 3px solid var(--lime); }
.counter b { display: block; font: italic 700 34px/1 var(--font-d); }
.counter span { font: 600 11px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* case study */
.case-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.prose { max-width: 66ch; }
.prose h2 { font-size: clamp(30px, 3.4vw, 50px); margin: 0 0 20px; }
.prose p { color: #c4cac6; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; color: var(--lime); }
.drawings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.drawings .figure img { --ratio: 4 / 3; }
.drawings > div { min-width: 0; }
.timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); gap: 3px; }
.timeline li { background: var(--char-2); padding: 18px 18px 22px; position: relative; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); padding-left: 30px; }
.timeline li:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 20px; }
.timeline li.done { background: var(--char-3); }
.timeline li.now { background: var(--lime); color: var(--char); }
.timeline .when { font: 700 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.timeline li.now .when { color: var(--char); }
.timeline b { display: block; font: 600 18px/1.15 var(--font-d); text-transform: uppercase; margin: 8px 0 6px; }
.timeline span:last-child { font-size: 14px; color: var(--muted); }
.timeline li.now span:last-child { color: var(--char-3); }
.next-link { display: block; }
.next-link .label { color: var(--char); }
.next-link h2 { font-size: clamp(40px, 6.6vw, 110px); line-height: .88; margin-top: 12px; transition: transform .35s var(--ease); }
.next-link:hover h2 { transform: translateX(14px); }
.next-link .arrow { display: inline-block; }

/* cycle detail rows (project) */
.cycle-rows { display: grid; gap: 3px; }
.cycle-row { display: grid; grid-template-columns: 110px minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: center; background: var(--char-2); padding: 18px 22px; }
.cycle-row:last-child { background: var(--lime); color: var(--char); }
.cycle-row .d { font: italic 700 38px/1 var(--font-d); color: var(--lime); }
.cycle-row:last-child .d, .cycle-row:last-child .muted { color: var(--char); }
.cycle-row h3 { font-size: 20px; }
.cycle-row p { margin: 0; font-size: 15px; }
.cycle-row .crew { font: 600 12px var(--font-d); letter-spacing: .12em; text-transform: uppercase; text-align: right; }

/* about */
.milestones { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; align-items: end; }
.milestones li { background: var(--char-2); padding: 18px 18px 20px; border-top: 3px solid var(--lime-dim); min-height: calc(150px + var(--i, 0) * 34px); }
.milestones li:nth-child(2) { --i: 1; } .milestones li:nth-child(3) { --i: 2; } .milestones li:nth-child(4) { --i: 3; } .milestones li:nth-child(5) { --i: 4; border-top-color: var(--lime); }
.milestones b { display: block; font: italic 700 40px/1 var(--font-d); color: var(--lime); }
.milestones p { margin: 10px 0 0; font-size: 14px; color: var(--silver); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.member { background: var(--char-2); }
.member .site-fig img { aspect-ratio: 6 / 7; filter: grayscale(.2); }
.member .tag-id { position: absolute; left: 12px; top: 12px; font: 700 11px var(--font-d); letter-spacing: .14em; background: var(--lime); color: var(--char); padding: 5px 8px; }
/* hi-vis vest over the portrait torso (--cx = silhouette centre in %) */
.member .vest {
  position: absolute; pointer-events: none; left: calc(var(--cx, 50%) - 34%); width: 68%; top: 74.6%; bottom: 0;
  clip-path: ellipse(50% 100% at 50% 100%);
  background:
    linear-gradient(180deg, transparent 50%, var(--silver) 50% 62%, transparent 62%),
    linear-gradient(90deg, transparent 31%, var(--silver) 31% 37%, transparent 37% 63%, var(--silver) 63% 69%, transparent 69%),
    conic-gradient(from 152deg at 50% 0, #141617 0deg 56deg, transparent 56deg),
    var(--lime);
  opacity: .92;
}
.member div.who { padding: 16px 18px 20px; }
.member h3 { font-size: 21px; }
.member p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.member .role { font: 600 12px var(--font-d); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-top: 8px; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.value { background: var(--char-3); padding: 26px 22px 24px; }
.value b { font: italic 700 46px/1 var(--font-d); color: var(--lime); }
.value h3 { font-size: 21px; margin: 18px 0 10px; }
.value p { margin: 0; font-size: 15px; color: var(--silver); }
.academy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.academy h2 { font-size: clamp(40px, 5.4vw, 84px); margin-bottom: 20px; }
.academy p { font-size: 17px; font-weight: 500; }
.trades { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 24px; }
.trades li { background: var(--char); color: var(--white); padding: 16px 18px; }
.trades b { display: block; font: 600 17px var(--font-d); text-transform: uppercase; letter-spacing: .03em; }
.trades span { font-size: 13px; color: var(--muted); }
.academy .spec > div { background: var(--char); color: var(--white); border-top-color: var(--char-3); }
.academy .spec > div:first-child { border-top-color: var(--white); }
.iso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.iso-card { border: 2px solid var(--line); padding: 26px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.iso-card .seal { grid-row: span 2; width: 64px; height: 64px; display: grid; place-items: center; background: var(--lime); color: var(--char); font: italic 700 15px/1 var(--font-d); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.iso-card h3 { font-size: 22px; }
.iso-card p { margin: 0; font-size: 14px; color: var(--muted); }

/* services */
.svc-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.svc-row:nth-child(even) > figure { order: 2; }
.svc-row .code { font: 700 14px var(--font-d); letter-spacing: .14em; color: var(--lime); }
.svc-row h2 { font-size: clamp(34px, 4.2vw, 62px); margin: 14px 0 18px; }
.svc-row p { color: var(--silver); max-width: 58ch; }
.svc-row .ticks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.svc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-meta span { font: 600 12px var(--font-d); letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; background: var(--char-3); }
.process { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.process li { background: var(--char-3); padding: 24px 30px 26px 34px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); }
.process li:first-child { padding-left: 22px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.process li:nth-child(4) { background: var(--lime); color: var(--char); }
.process .n { font: italic 700 36px/1 var(--font-d); color: var(--lime); }
.process li:nth-child(4) .n { color: var(--char); }
.process h3 { font-size: 19px; margin: 14px 0 8px; }
.process p { margin: 0; font-size: 14px; color: var(--muted); }
.process li:nth-child(4) p { color: var(--char-3); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); }
.faq-grid h2 { font-size: clamp(38px, 5vw, 72px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: block; position: relative; list-style: none; cursor: pointer; padding: 22px 54px 22px 0;
  font: 600 clamp(18px, 1.7vw, 22px)/1.25 var(--font-d); text-transform: uppercase; letter-spacing: .02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; width: 34px; height: 34px; margin-top: -17px; display: grid; place-items: center;
  font: 700 22px/1 var(--font-d); background: var(--char-3); color: var(--lime); transition: background .2s, color .2s;
}
.faq details[open] summary::after { content: "–"; background: var(--lime); color: var(--char); }
.faq summary:hover { color: var(--lime); }
.faq details p { margin: 0 0 24px; color: var(--silver); max-width: 70ch; }

/* contact */
.tender { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.form-card { background: var(--char-2); padding: clamp(22px, 3.4vw, 48px); border-top: 4px solid var(--lime); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font: 600 12px var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
.field label em { font-style: normal; color: var(--lime); }
.field input, .field select, .field textarea {
  width: 100%; font: 500 16px var(--font-b); color: var(--white); background: var(--char); border: 2px solid var(--line);
  padding: 14px 14px; border-radius: 0; appearance: none; transition: border-color .2s;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--lime) 50%), linear-gradient(135deg, var(--lime) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #565c60; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); }
.field input[type="file"] { padding: 11px; font-size: 14px; color: var(--muted); }
.field input[type="file"]::file-selector-button { font: 700 12px var(--font-d); letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--char); border: 0; padding: 9px 14px; margin-right: 14px; cursor: pointer; }
.field .hint { font-size: 13px; color: var(--muted); }
.form-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-foot .label { font-size: 11px; }
.form-note { grid-column: 1 / -1; margin: 0; padding: 14px 16px; background: var(--lime); color: var(--char); font-weight: 700; font-size: 15px; }
.next-steps { background: var(--char-3); padding: 28px 24px; }
.next-steps h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 18px; }
.next-steps ol { list-style: none; padding: 0; display: grid; gap: 3px; }
.next-steps li { background: var(--char-2); padding: 16px 16px 16px 58px; position: relative; font-size: 15px; color: var(--silver); }
.next-steps li b { display: block; color: var(--white); font: 600 16px var(--font-d); text-transform: uppercase; letter-spacing: .03em; }
.next-steps li i { position: absolute; left: 16px; top: 14px; font: italic 700 28px/1 var(--font-d); color: var(--lime); }
.next-steps .direct { margin: 22px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.next-steps .direct a { color: var(--lime); }
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.office { background: var(--char-2); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.office h3 { font: italic 700 clamp(34px, 4vw, 56px)/.9 var(--font-d); }
.office .coords { font: 600 12px var(--font-d); letter-spacing: .12em; color: var(--lime); text-align: right; }
.office address { grid-column: 1 / -1; font-style: normal; color: var(--silver); margin-top: 14px; }
.office address a { color: var(--white); border-bottom: 1px solid var(--lime-dim); }
.office address a:hover { color: var(--lime); }
.careers { display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 34px; }
.careers p { margin: 0; font: 600 clamp(18px, 1.9vw, 24px)/1.3 var(--font-d); text-transform: uppercase; }
.careers p span { color: var(--lime); }

/* 8. Footer ---------------------------------------------------------------- */
.site-footer { background: #121415; margin-top: var(--space); position: relative; overflow: hidden; }
.foot-tape { height: 12px; background: repeating-linear-gradient(-45deg, var(--lime) 0 14px, #121415 14px 28px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); padding-top: clamp(48px, 6vw, 84px); padding-bottom: 36px; }
.foot-brand p { color: var(--muted); max-width: 40ch; margin-top: 20px; font-size: 15px; }
.iso-line { display: flex; flex-wrap: wrap; gap: 6px; }
.iso-line span { font: 700 11px var(--font-d); letter-spacing: .12em; border: 1px solid var(--lime-dim); color: var(--lime); padding: 5px 8px; }
.foot-k { font: 600 12px var(--font-d); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 14px; }
.foot-col p { font-size: 15px; color: var(--silver); overflow-wrap: anywhere; }
.foot-col a:hover, .foot-base a:hover { color: var(--lime); }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot-social { display: flex; gap: 18px; }
.foot-word { overflow: hidden; line-height: .8; padding: 10px 0 0; user-select: none; }
.foot-word span {
  display: block; text-align: center; white-space: nowrap; font: italic 700 13.6vw/.8 var(--font-d); letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1px #4a5155; margin-bottom: -2.2vw;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card h3 { min-height: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cycle li { min-height: 0; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .drawings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .drawings > :first-child { grid-column: 1 / -1; }
  .drawings > :first-child img { aspect-ratio: 14 / 9; }
  .spec { --cols: 4 !important; }
}
@media (max-width: 980px) {
  .hero-grid, .split, .case-hero, .safety, .academy, .tender, .faq-grid, .svc-row, .cta-row { grid-template-columns: minmax(0, 1fr); }
  .svc-row:nth-child(even) > figure { order: 0; }
  .grid-3, .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iso { grid-template-columns: minmax(0, 1fr); }
  .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .milestones li { min-height: 0; }
  .rise { max-width: 560px; }
  .rise--full { max-width: none; }
  .cycle-row { grid-template-columns: 80px minmax(0, 1fr); }
  .cycle-row p { grid-column: 2; }
  .cycle-row .crew { grid-column: 2; text-align: left; }
  .spec { --cols: 2 !important; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-row { height: 66px; }
  .logo-word { font-size: 19px; }
  .logo-word small { display: none; }
  .grid-3, .svc-grid, .values, .offices, .form { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .member div.who { padding: 12px 12px 16px; }
  .member h3 { font-size: 16px; }
  .member .role { font-size: 10px; letter-spacing: .08em; }
  .member p:last-child { font-size: 13px; }
  .member .tag-id { left: 8px; top: 8px; font-size: 9px; }
  .counter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .counter div { padding: 12px 12px; }
  .counter b { font-size: 26px; }
  .counter span { font-size: 9px; letter-spacing: .08em; }
  .cycle-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; padding: 16px 16px; }
  .cycle-row .d { font-size: 26px; white-space: nowrap; }
  .cycle-row p, .cycle-row .crew { grid-column: 1 / -1; }
  .cam-zone .tape-stack { margin-top: -34px; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat { padding: 18px 16px; }
  .stat b { font-size: 46px; }
  .stat p { font-size: 13px; }
  .proof { grid-template-columns: minmax(0, 1fr); }
  .proof div { display: flex; align-items: baseline; gap: 14px; }
  .proof span { margin: 0; }
  .process, .timeline { grid-template-columns: minmax(0, 1fr); }
  .cycle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cycle li { padding: 16px 14px 18px; }
  .cycle .day b { font-size: 34px; }
  .process li, .process li:first-child, .timeline li, .timeline li:first-child {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); padding: 18px 20px 30px;
  }
  .rise { padding: 20px 16px 16px; }
  .rise-body, .rise--full .rise-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rise-big b { font-size: 52px; }
  .trades { grid-template-columns: minmax(0, 1fr); }
  .cta-row { grid-template-columns: minmax(0, 1fr); }
  .cam .cam-x { display: none; }
  .safety-dl dd { font-size: 24px; }
  .svc-row .ticks { grid-template-columns: minmax(0, 1fr); }
  .counter { flex-wrap: wrap; }
  .tape { width: 130%; margin-left: -15%; }
  .tape--silver { display: none; }
  .hook-tag { font-size: 9px; padding: 5px 7px 4px; }
  .cam { font-size: 9px; left: auto; right: 10px; top: 10px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .stages th:nth-child(3), .stages td:nth-child(3) { display: none; }
  .office { grid-template-columns: minmax(0, 1fr); }
  .office .coords { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tape-track { transform: none !important; }
}