/* main.css — layout + components. References tokens.css only. */

/* ============================================================= BASE */
body {
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: var(--fw-regular);
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}
/* lenis smooth-scroll hooks */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
strong { font-weight: var(--fw-semibold); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* safe-area aware gutters (notch / rounded corners in landscape) */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: calc(var(--z-header) + 2);
  background-image: var(--metal-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}

/* Skip link */
.skip-link {
  position: fixed;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: calc(var(--z-header) + 3);
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  transform: translateY(calc(-100% - var(--sp-5)));
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================= BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: var(--fw-medium);
  font-size: var(--fs-200);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  /* One composed transform so hover-lift, press, and the JS magnetic pull
     (--magnet-x/y, set on .btn--primary by cursor.js) coexist instead of
     overwriting each other (ANIMATION-AUDIT §C4). */
  --lift: 0px;
  --press: 1;
  transform: translate(var(--magnet-x, 0px), calc(var(--magnet-y, 0px) + var(--lift)))
             scale(var(--press));
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:hover { --lift: -2px; }
.btn:active { --press: 0.97; }

.btn--primary {
  /* metallic steel button: core→deep sweep (AA-safe under white text) with a
     subtle top sheen edge. The vivid sheen is kept off the text area. */
  background-color: var(--blue);
  background-image: var(--metal-gradient-text);
  background-size: 160% 160%;
  background-position: 0% 0%;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 8px 20px -10px rgba(var(--blue-rgb), 0.6);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-position var(--dur-slow) var(--ease-out);
}
.btn--primary:hover {
  background-position: 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
              0 14px 30px -10px rgba(var(--blue-rgb), 0.75);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }

/* ============================================================= HEADER / NAV */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* default: transparent, sitting over the (dark) hero -> light content */
  color: var(--on-dark);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
/* Transparent-state scrim: guarantees the wordmark + links never wash out over a
   busy hero (RESEARCH §3.3). Fades away once the header turns solid. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + var(--sp-6));
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--dur) var(--ease-out);
}
.site-header.is-solid::before { opacity: 0; }
.legal-header::before { display: none; }   /* solid legal header needs no scrim */
.site-header.is-solid {
  color: var(--ink);
  background: var(--paper-70);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: var(--header-shadow);
}

.nav {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  height: 38px;
}
.nav__logo-img {
  display: block;
  height: 30px;                   /* width derives from intrinsic ratio -> no CLS */
  width: auto;
}
/* Default header is transparent over the dark hero -> light wordmark.
   Once solid (light bg), swap to the full-colour wordmark. */
.nav__logo-img--color { display: none; }
.site-header.is-solid .nav__logo-img--light { display: none; }
.site-header.is-solid .nav__logo-img--color { display: block; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: currentColor;
  opacity: 0.82;
  padding: 0.5rem 0.15rem;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__link:hover { opacity: 1; }
/* underline indicator */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }

/* Active link — legible in BOTH header states */
.nav__link.is-active { opacity: 1; }
.nav__link.is-active::after { transform: scaleX(1); }
/* In solid state, tint the active link + its indicator brand-blue */
.site-header.is-solid .nav__link.is-active { color: var(--blue); }

.nav__cta { margin-left: var(--sp-2); }
/* In transparent state, the CTA keeps the gradient (legible on dark hero). */

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* ============================================================= HAMBURGER */
.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  color: inherit;
  z-index: calc(var(--z-menu) + 1);
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  /* transform-only animation (no `top`) per ANIMATION-AUDIT §C3 */
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle-bars { top: 50%; }
.nav__toggle-bars::before { transform: translate(-50%, calc(-50% - 7px)); }
.nav__toggle-bars::after { transform: translate(-50%, calc(-50% + 7px)); }
/* animate to an X when open (transform + opacity only) */
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================= MOBILE MENU */
.nav__panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 88vw);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
  background: var(--ink-soft);
  color: var(--on-dark);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
}
.nav__panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}
.nav__panel-link {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: var(--fw-medium);
  color: var(--on-dark);
  padding: var(--sp-2) 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav__panel.is-open .nav__panel-link {
  opacity: 1;
  transform: translateY(0);
}
/* staggered reveal */
.nav__panel.is-open .nav__panel-link:nth-child(1) { transition-delay: 0.10s; }
.nav__panel.is-open .nav__panel-link:nth-child(2) { transition-delay: 0.16s; }
.nav__panel.is-open .nav__panel-link:nth-child(3) { transition-delay: 0.22s; }
.nav__panel.is-open .nav__panel-link:nth-child(4) { transition-delay: 0.28s; }
.nav__panel.is-open .nav__panel-link:nth-child(5) { transition-delay: 0.34s; }
.nav__panel.is-open .nav__panel-cta { transition-delay: 0.42s; }
.nav__panel-link.is-active { color: var(--blue-sheen); }
.nav__panel-cta { margin-top: var(--sp-5); align-self: flex-start; opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.nav__panel.is-open .nav__panel-cta { opacity: 1; transform: translateY(0); }

.nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-menu) - 1);
  background: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.nav__backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease-out); }

/* scroll-lock helper (also pauses lenis in JS) */
body.is-locked { overflow: hidden; }

@media (max-width: 900px) {
  .nav__menu { display: none; }
  .nav__cta--desktop { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width: 901px) {
  .nav__panel, .nav__backdrop { display: none; }
}

/* All sections clear the fixed header when targeted by an anchor. */
main > section { scroll-margin-top: var(--header-h); }

/* ============================================================= LEGAL PAGES */
.legal-header { position: fixed; } /* stays solid (no JS toggling on legal pages) */
.legal-back { font-size: var(--fs-200); }
.legal {
  padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-9);
  background: var(--paper);
}
.legal__inner { max-width: var(--container-narrow); }
.legal h1 { font-size: var(--fs-700); margin: var(--sp-2) 0 var(--sp-3); }
.legal h2 { font-size: var(--fs-500); margin: var(--sp-7) 0 var(--sp-3); }
.legal p, .legal li { color: var(--ink-70); }
.legal p { margin-bottom: var(--sp-4); }
.legal ul { margin: 0 0 var(--sp-4) 1.25rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.legal a { color: var(--blue-deep); text-decoration: underline; }
.legal a:hover { color: var(--blue); }
.legal__updated { color: var(--ink-55); font-size: var(--fs-200); margin-bottom: var(--sp-6); }
.legal__home { margin-top: var(--sp-7); }
.legal-ph {
  display: inline;
  font-size: var(--fs-200);
  color: var(--blue-deep);
  background: rgba(var(--blue-rgb), 0.08);
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm);
}
.legal-footer { padding: var(--sp-6) 0; }

/* ============================================================= RESPONSIVE HARDENING (#35)
   Mobile-first throughout; this block tightens rhythm + safe areas at the edges. */
@media (max-width: 640px) {
  /* --section-y already scales down via clamp; just tighten the head */
  .section-head { margin-bottom: var(--sp-6); }
  .why__prop-inner { padding: var(--sp-5); }
}
@media (max-width: 380px) {
  /* keep the oversized hero headline from feeling cramped on the smallest phones */
  :root { --fs-800: clamp(2.2rem, 11vw, 2.6rem); }
}
/* Landscape phones: don't let the 100svh hero swallow short viewports */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 540px; }
}
/* ============================================================= HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--on-dark);
  background: var(--ink-soft);     /* fallback behind the image */
  padding: calc(var(--header-h) + var(--sp-6)) 0 var(--sp-9);
  isolation: isolate;
}
/* Media layer — full-bleed, edge-to-edge (no gap), with parallax headroom */
.hero__media {
  position: absolute;
  inset: -10% 0;                   /* extra height so parallax never shows a gap */
  z-index: -2;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Directional scrim: strong on the left (text) → clear on the right, plus a
   bottom scrim for depth/scroll-cue and a restrained metallic-blue tint (no warm
   cast). Keeps white hero text well above AA without dimming the whole photo. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;        /* above the image within hero__media (which is z-index:-2, so still behind the text) */
  background:
    /* directional scrim (strong left, over the text column) */
    linear-gradient(100deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.7) 45%, rgba(10, 10, 10, 0.32) 74%, rgba(10, 10, 10, 0.1) 100%),
    /* bottom scrim for depth + scroll cue */
    linear-gradient(0deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0) 34%),
    /* restrained metallic-blue tint */
    linear-gradient(180deg, rgba(var(--blue-deep-rgb), 0.18) 0%, rgba(var(--blue-deep-rgb), 0.05) 100%),
    /* flat veil so a busy image never fights the text anywhere */
    linear-gradient(rgba(10, 10, 10, 0.34), rgba(10, 10, 10, 0.34));
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  max-width: var(--container);
}
.hero__eyebrow {
  font-family: var(--font-head);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue-sheen);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--blue-sheen);
  border-radius: 2px;
}
.hero__title {
  font-size: var(--fs-900);
  line-height: var(--lh-tight);
  color: #fff;
  max-width: 16ch;                 /* keeps it to ~3 confident lines */
  text-wrap: balance;
}
.hero__sub {
  font-size: var(--fs-400);
  color: var(--on-dark-70);
  max-width: 52ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

/* Above-the-fold trust answer: what + where + why dependable, in one line. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  list-style: none;
  padding: 0;
  font-family: var(--font-head);
  font-size: var(--fs-200);
  color: var(--on-dark-70);
}
.hero__trust li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__trust svg { color: var(--blue-sheen); flex: none; }

/* Ghost button variant for dark backgrounds */
.btn--on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn--on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Restrained pixel-dissolve accent — sparse drifting squares */
.hero__pixels {
  position: absolute;
  inset: 0;
  z-index: 2;        /* above the scrim, still behind hero text */
  pointer-events: none;
  overflow: hidden;
}
.hero__pixels span {
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--blue-sheen);
  opacity: 0.16;
  will-change: transform, opacity;
  animation: pixelDrift 9s var(--ease-in-out) infinite;
}
.hero__pixels span:nth-child(1) { top: 22%; right: 14%; width: 18px; height: 18px; opacity: 0.20; animation-delay: 0s; }
.hero__pixels span:nth-child(2) { top: 40%; right: 8%;  animation-delay: 1.2s; }
.hero__pixels span:nth-child(3) { top: 64%; right: 22%; width: 10px; height: 10px; opacity: 0.12; animation-delay: 2.1s; }
.hero__pixels span:nth-child(4) { top: 30%; right: 30%; width: 8px;  height: 8px;  opacity: 0.10; animation-delay: 0.6s; }
.hero__pixels span:nth-child(5) { top: 78%; right: 12%; width: 12px; height: 12px; animation-delay: 3s; }
.hero__pixels span:nth-child(6) { top: 14%; right: 40%; width: 7px;  height: 7px;  opacity: 0.10; animation-delay: 1.8s; }
.hero__pixels span:nth-child(7) { top: 54%; right: 38%; width: 9px;  height: 9px;  opacity: 0.12; animation-delay: 2.6s; }
@keyframes pixelDrift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.10; }
  50%      { transform: translate3d(0, -16px, 0); opacity: 0.24; }
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--on-dark-70);
  transition: opacity var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hero__scroll:hover { color: #fff; }
.hero__scroll-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, var(--blue-sheen), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: -50%;
  width: 100%; height: 50%;
  background: #fff;
  animation: scrollPulse 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}
.hero.is-scrolled .hero__scroll { opacity: 0; pointer-events: none; }

/* Mobile / tablet-portrait full-bleed fix: the hero <picture> is display:inline
   with auto height, so .hero__img's height:100% can't resolve — the image
   collapses to its intrinsic 3:2 height and the flat --ink-soft hero background
   shows through below it on tall/narrow viewports. Give the <picture> a real box
   so the already-declared object-fit:cover fills the whole hero. Scoped to
   <=1024px; desktop (tested at 1440) keeps its existing rendering untouched. */
@media (max-width: 1024px) {
  .hero__media picture { display: block; width: 100%; height: 100%; }
  .hero__img { object-position: 62% center; }   /* keep the technician in frame */
}

@media (max-width: 600px) {
  .hero__title { max-width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__scroll { display: none; }
}

/* Entrance: pre-hide only when motion is allowed; animations.js reveals. */
html.anim-ready .hero [data-hero] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero__pixels span { animation: none; }
  .hero__scroll-line::after { animation: none; }
}

/* ============================================================= SECTION PRIMITIVES */
.section { padding: var(--section-y) 0; }
.section--airy { padding: var(--section-y-lg) 0; }   /* hero-adjacent + signature */
/* Shared image grade so a mixed photo set reads as one brand (REDESIGN-PLAN §1). */
.media-grade { filter: var(--media-grade); }
.section-head {
  max-width: 760px;
  margin: 0 auto var(--sp-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* Left-aligned head variant — used to break the centred-everything monotony. */
.section-head--left {
  margin-inline: 0;
  text-align: left;
  align-items: flex-start;
}
.eyebrow {
  font-family: var(--font-head);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);            /* one rule: blue on light, sheen on dark (below) */
}
/* Unified dark-context eyebrow (covers Why and any dark section head). */
.section-head--dark .eyebrow,
.section--dark .eyebrow { color: var(--blue-sheen); }
.section-head h2 { font-size: var(--fs-700); }
.section-head p { color: var(--ink-70); font-size: var(--fs-400); max-width: 60ch; }
.section-head:not(.section-head--left) p { margin-inline: auto; }

/* ============================================================= SERVICES */
.services { background: var(--paper); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-card {
  position: relative;
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-image: var(--metal-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--blue-rgb), 0.25);
}
.service-card:hover::before,
.service-card:focus-within::before { transform: scaleX(1); }
.service-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius);
  background: rgba(var(--blue-rgb), 0.08);
  color: var(--blue);
  margin-bottom: var(--sp-4);
}
.service-card h3 { font-size: var(--fs-500); margin-bottom: var(--sp-2); }
.service-card p { color: var(--ink-70); }
/* Featured first card — a focal anchor so the grid isn't visually flat. */
.service-card--feature {
  background: var(--paper-2);
  border-color: rgba(var(--blue-rgb), 0.28);
}
.service-card--feature::before { transform: scaleX(1); }   /* keep its metallic top rule lit */
.service-card--feature h3 { font-size: var(--fs-600); }
.service-card--feature .service-card__icon { color: #fff; background: var(--blue); border-color: transparent; }
.services__foot { text-align: center; margin-top: var(--sp-7); color: var(--ink-70); }
.services__foot a { color: var(--blue); font-weight: var(--fw-medium); }
.services__foot a:hover { color: var(--blue-deep); text-decoration: underline; }

@media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .services__grid { grid-template-columns: 1fr; } }

/* ============================================================= WHY (dark band) */
.why {
  position: relative;
  background: var(--ink-soft);
  color: var(--on-dark);
  overflow: hidden;
}
.section-head--dark h2 { color: #fff; }
.section-head--dark p { color: var(--on-dark-70); }
/* restrained brand glow */
.why__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 120vw;
  max-width: 1400px;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(var(--blue-rgb), 0.28) 0%, rgba(var(--blue-rgb), 0.10) 35%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.why .container { position: relative; z-index: 1; }

/* hairline-divider grid (restrained, not boxy) */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(244, 247, 251, 0.12);
  border: 1px solid rgba(244, 247, 251, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.why__prop { background: var(--ink-soft); }
.why__prop-inner { padding: var(--sp-6); height: 100%; }
.why__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: rgba(var(--blue-sheen-rgb), 0.12);
  color: var(--blue-sheen);
  margin-bottom: var(--sp-4);
}
.why__prop h3 { color: #fff; font-size: var(--fs-500); margin-bottom: var(--sp-2); }
.why__prop p { color: var(--on-dark-70); font-size: var(--fs-300); }
.why__cta { margin-top: var(--sp-6); text-align: center; }

@media (max-width: 900px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why__grid { grid-template-columns: 1fr; } }

/* ============================================================= PROCESS (how we work) */
.process { background: var(--paper-2); }

/* Sticky-rail layout: the rail stays in view while the steps scroll past
   (CSS sticky — robust, no pin/scroll-jack). Active step set by IO in JS. */
.process__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* progress rail (sticky on desktop) */
.process__rail {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-7));
  align-self: start;
}
.process__rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: relative;
}
.process__rail ol::before {   /* connector line behind the dots */
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--line);
}
.process__dot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-55);
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.process__dot-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--font-head);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.process__dot-label { font-family: var(--font-head); font-size: var(--fs-200); font-weight: var(--fw-medium); }
.process__dot.is-active { opacity: 1; color: var(--ink); }
.process__dot.is-active .process__dot-num { background-image: var(--metal-gradient-text); color: #fff; border-color: transparent; }
.process__dot.is-past { opacity: 1; color: var(--ink-70); }
.process__dot.is-past .process__dot-num { background: var(--blue); color: #fff; border-color: transparent; }

/* steps column — generously spaced; each reveals on scroll */
.process__steps { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 7rem); }
.process__step { margin: 0; max-width: 640px; }
.process__num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  background-image: var(--metal-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--sp-2);
}
.process__label {
  font-family: var(--font-head);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--sp-2);
}
/* Fill line 1 before wrapping (override the global heading text-wrap:balance,
   which was evening the lines and dropping "by" to line 2 on the Plan step). */
.process__step h3 { font-size: var(--fs-600); margin-bottom: var(--sp-3); text-wrap: pretty; }
.process__step p { color: var(--ink-70); max-width: 54ch; margin-bottom: var(--sp-5); }
.process__visual {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
}
.process__visual img { width: 100%; height: 100%; object-fit: cover; filter: var(--media-grade); }
/* metallic-blue multiply grade — guarantees no warm/brownish cast, ties to brand */
.process__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(var(--blue-deep-rgb), 0.22) 0%, rgba(var(--blue-deep-rgb), 0.05) 60%, transparent 100%);
  mix-blend-mode: multiply;
}
.process__foot { text-align: center; margin-top: var(--section-y); color: var(--ink-70); }
.process__foot a { color: var(--blue); font-weight: var(--fw-medium); }
.process__foot a:hover { color: var(--blue-deep); text-decoration: underline; }

/* mobile: drop the rail (the big step number is the marker), single column */
@media (max-width: 900px) {
  .process__layout { grid-template-columns: 1fr; gap: 0; }
  .process__rail { display: none; }
  .process__steps { gap: var(--section-y); }
  .process__step { max-width: 560px; margin-inline: auto; }
}

/* ============================================================= CONTACT (dark closing band) */
.contact { background: var(--ink-soft); color: var(--on-dark); }
.contact__intro h2 { color: #fff; }
.contact .contact__lead { color: var(--on-dark-70); }   /* scoped so it beats the base .contact__lead{ink-70} */
.contact .contact__detail-label { color: var(--blue-sheen); }
.contact .contact__detail-value { color: var(--on-dark); }
.contact a.contact__detail-value:hover { color: var(--blue-sheen); }
.contact .contact__popia { color: var(--on-dark-70); }
/* 24/7 after-hours support — emphasised badge (genuine selling point) */
.contact__emergency {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--blue-sheen-rgb), 0.14);
  color: var(--blue-sheen);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.contact__emergency svg { flex: none; }
/* WhatsApp = neutral on-dark chip (no off-palette green), keeps the glyph */
.btn--whatsapp { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); margin-top: var(--sp-2); }
.btn--whatsapp:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-8);
  align-items: start;
}
.contact__intro h2 { font-size: var(--fs-700); margin: var(--sp-2) 0 var(--sp-4); }
.contact__lead { color: var(--ink-70); max-width: 44ch; }
.contact__details {
  list-style: none;
  margin: var(--sp-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contact__details li { display: flex; flex-direction: column; gap: 2px; }
.contact__detail-label {
  font-family: var(--font-head);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
}
.contact__detail-value { font-size: var(--fs-400); color: var(--ink); }
a.contact__detail-value:hover { color: var(--blue); }

/* form */
.contact__form-wrap {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-200); font-weight: var(--fw-medium); color: var(--ink); }
.req { color: var(--blue); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-300);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.16);
}
.field [aria-invalid="true"] { border-color: #c0392b; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16); }
.field__error { color: #c0392b; font-size: var(--fs-100); }
.field__error:empty { display: none; }

.field--check { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.field--check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--blue); }
.field--check label { font-weight: var(--fw-regular); font-size: var(--fs-200); color: var(--ink-70); line-height: 1.5; }
.field--check a { color: var(--blue); text-decoration: underline; }
.contact__popia { color: var(--ink-55); }

.contact__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.contact__submit { width: 100%; margin-top: var(--sp-2); }
.contact__submit[disabled] { opacity: 0.7; cursor: progress; }
.contact__reassure { color: var(--ink-55); font-size: var(--fs-100); text-align: center; margin-top: var(--sp-3); }
.form-status { margin-top: var(--sp-3); font-size: var(--fs-200); text-align: center; }
.form-status:empty { display: none; }
.form-status.is-success { color: #1e7e44; }
.form-status.is-error { color: #c0392b; }

@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; gap: var(--sp-7); } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================= CUSTOM CURSOR */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor label,
html.has-custom-cursor [role="button"] { cursor: none; }
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select { cursor: auto; }

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  will-change: transform;
}
html.cursor-active .cursor-dot,
html.cursor-active .cursor-ring { opacity: 1; }
html.cursor-text .cursor-dot,
html.cursor-text .cursor-ring { opacity: 0; }

.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--blue);
}
.cursor-ring { display: grid; place-items: center; }
.cursor-ring::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(var(--blue-rgb), 0.6);
  border-radius: 50%;
  transition: transform 0.22s var(--ease-out), background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
}
html.cursor-hover .cursor-ring::before { transform: scale(1.7); background: rgba(var(--blue-rgb), 0.08); border-color: rgba(var(--blue-rgb), 0.9); }
html.cursor-down .cursor-ring::before { transform: scale(0.8); }
html.cursor-hover .cursor-dot { opacity: 0; }
.cursor-ring__label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-head);
  font-size: var(--fs-100);
  color: var(--blue-deep);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.cursor-ring.has-label::before { transform: scale(3.2); background: var(--paper); border-color: rgba(var(--blue-rgb), 0.25); }
.cursor-ring.has-label .cursor-ring__label { opacity: 1; }

/* ============================================================= INDUSTRIES */
.industries { background: var(--paper); }
.industries__beyond {
  background-image: var(--metal-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: var(--fw-semibold);
}
.industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Clean card: clear graded image on top + text on a solid panel below
   (replaces the murky text-on-image overlay — FIX #71). */
.industry {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.industry:hover,
.industry:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); }
.industry picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.industry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--media-grade);
  transition: transform 0.5s var(--ease-out);
}
.industry:hover img,
.industry:focus-within img { transform: scale(1.04); }
.industry__label { padding: var(--sp-5); }
.industry__label h3 { color: var(--ink); font-size: var(--fs-500); }
.industry__label p { color: var(--ink-70); font-size: var(--fs-200); margin-top: var(--sp-2); }

@media (max-width: 900px) { .industries__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (max-width: 560px) { .industries__grid { grid-template-columns: 1fr; } }

/* ============================================================= ABOUT */
.about { background: var(--paper-2); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;               /* centre the (shorter, facts-free) copy against the image */
}
.about__media { position: relative; margin: 0; }
.about__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.about__frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--media-grade); }
.about__pixels { position: absolute; right: -10px; bottom: -10px; display: grid; grid-template-columns: repeat(2, 14px); gap: 6px; }
.about__pixels span { width: 14px; height: 14px; border-radius: 2px; background-image: var(--metal-gradient); }
.about__pixels span:nth-child(2) { opacity: 0.7; }
.about__pixels span:nth-child(3) { opacity: 0.5; }
.about__pixels span:nth-child(4) { opacity: 0.3; }

.about__body { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.about__body h2 { font-size: var(--fs-700); }
.about__body > p { color: var(--ink-70); font-size: var(--fs-300); max-width: 56ch; }
/* tagline = deck under the heading (tighter to it); brand slogan */
.about__tagline {
  margin-top: calc(var(--sp-2) * -1);
  font-family: var(--font-head);
  font-size: var(--fs-500);
  font-weight: var(--fw-medium);
  background-image: var(--metal-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* lead = a touch larger than body, ink, comfortable (not oversized) */
.about__lead { font-size: var(--fs-400); line-height: 1.5; color: var(--ink); max-width: 52ch; margin-top: var(--sp-2); }
.about__cta { margin-top: var(--sp-3); }

@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .about__frame { aspect-ratio: 16 / 10; }
}

/* ============================================================= FOOTER */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--on-dark-70);
  padding: var(--sp-9) 0 var(--sp-6);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-image: var(--metal-gradient);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(244, 247, 251, 0.12);
}
.footer__logo { display: inline-flex; }
.footer__logo img { display: block; height: 34px; width: auto; }
.footer__tagline { color: var(--blue-sheen); font-family: var(--font-head); font-size: var(--fs-200); margin-top: var(--sp-3); }
.footer__blurb { color: var(--on-dark-70); font-size: var(--fs-200); margin-top: var(--sp-3); max-width: 38ch; }
.footer__h {
  font-family: var(--font-head);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: var(--sp-4);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__col a { color: var(--on-dark-70); font-size: var(--fs-200); transition: color var(--dur-fast) var(--ease-out); }
.footer__col a:hover { color: #fff; }
.footer__cta { margin-top: var(--sp-5); }
.footer__emergency { color: var(--blue-sheen); font-weight: var(--fw-semibold); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: var(--fs-100);
  color: var(--on-dark-70);
}
.footer__bar-links { display: flex; align-items: center; gap: var(--sp-5); }
.footer__bar-links a { color: var(--on-dark-70); transition: color var(--dur-fast) var(--ease-out); }
.footer__bar-links a:hover { color: #fff; }
.footer__top { font-family: var(--font-head); }

@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } .footer__bar { justify-content: center; text-align: center; } }