/* =================================================================
   FINESSE INFRA STEEL CONSTRUCTIONS CONTRACTING
   Swiss-industrial foundation + glass accent on three surfaces.
   Built 2026-05-15. One canonical sheet, no !important hacks.
   ================================================================= */

/* -----------------------------------------------------------------
   01 · TOKENS
   ----------------------------------------------------------------- */
:root {
  /* Palette — paper / ink / amber (drawn from logo)
   * Naming convention (added 2026-05-19):
   *   --paper, --paper-2, --paper-3  → OPAQUE shade variants of the
   *      paper hue (lightest → progressively darker solid creams,
   *      e.g. for stacked .section backgrounds).
   *   --paper-5, --paper-10, --paper-12, --paper-35, --paper-50,
   *   --paper-72, --paper-78, --paper-85, --paper-92, --paper-96
   *      → ALPHA variants of --paper (number = opacity × 100, so
   *      --paper-50 = rgba(paper, 0.50); used for muted text on dark
   *      surfaces or translucent fills over imagery/dark grounds).
   *   --paper-2 is the SECOND SHADE, NOT alpha 0.02. Same for
   *   --paper-3 — it is a darker cream, not alpha 0.03. */
  --paper:        #F2EFE8;
  --paper-2:      #E8E4D9;
  --paper-3:      #D9D4C5;
  --ink:          #15140f;   /* primary / bold text */
  --ink-bg:       #1A1A1A;   /* dark surface background (replaces black-on-page) */
  --ink-soft:     #2a2620;   /* body paragraph text — softer than --ink */
  --ink-2:        #1A1A18;
  --ink-3:        #2A2A26;
  --ink-faint:    #6e6757;   /* light / muted label text — AA-compliant on paper at 10.5px */
  --amber:        #E2A23B;
  --amber-2:      #C8862A;
  --rust:         #8A3A1A;
  --steel:        #5A5E61;

  /* Hairlines */
  --line:             rgba(12, 12, 12, 0.14);
  --line-strong:      rgba(12, 12, 12, 0.32);
  --line-dark:        rgba(242, 239, 232, 0.16);
  --line-dark-strong: rgba(242, 239, 232, 0.36);

  /* Paper alpha tokens — opacity of the paper hue (#F2EFE8) over
     whatever sits behind. Used for: muted text on dark grounds
     (-50, -72, -78, -92); translucent fills/borders for buttons,
     lightbox close, blueprint grid lines (-5, -10, -12, -35, -85);
     and the opaque-fallback for glass surfaces when backdrop-filter
     is unsupported (-85, -96). See naming-convention note above. */
  --paper-5:  rgba(242, 239, 232, 0.05);
  --paper-10: rgba(242, 239, 232, 0.10);
  --paper-12: rgba(242, 239, 232, 0.12);
  --paper-35: rgba(242, 239, 232, 0.35);
  --paper-50: rgba(242, 239, 232, 0.50);
  --paper-72: rgba(242, 239, 232, 0.72);
  --paper-78: rgba(242, 239, 232, 0.78);
  --paper-85: rgba(242, 239, 232, 0.85);
  --paper-92: rgba(242, 239, 232, 0.92);
  --paper-96: rgba(242, 239, 232, 0.96);

  /* Glass — used on hero card, mega menu, scrolled-state header,
     compare-slider chips, project hover strips, map chips, dark-CTA eyebrow.
     Hero bg is a subtle ink tint so paper-color text pops against the
     blurred photo behind it (matches the sample mockup). */
  --glass-bg-hero:      rgba(12, 12, 12, 0.22);
  --glass-bg-menu:      rgba(242, 239, 232, 0.78);
  --glass-bg-header:    rgba(242, 239, 232, 0.72);
  --glass-bg-chip:      rgba(12, 12, 12, 0.42);
  --glass-bg-chip-ink:  rgba(242, 239, 232, 0.12);
  --glass-border:       rgba(255, 255, 255, 0.28);
  --glass-border-menu:  rgba(12, 12, 12, 0.08);
  --glass-border-chip:  rgba(255, 255, 255, 0.18);
  --glass-blur:         6px;
  --glass-blur-strong:  20px;
  --glass-saturate:     120%;
  --glass-shadow:       0 30px 80px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --glass-shadow-menu:  0 24px 60px -20px rgba(0, 0, 0, 0.18);

  /* Type — unified on Inter / Inter Tight (Archivo retired 2026-05-18,
     except the footer giant wordmark which is pinned to Archivo directly
     on `.footer-massive text` further down). */
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Was JetBrains Mono — now a tight, all-caps Inter spec used for eyebrows,
     metadata, chips, nav labels, etc. Variable name kept as --font-mono so we
     don’t have to touch every callsite; it just isn’t monospaced anymore. */
  --font-mono:    "Inter Tight", "Inter", -apple-system, sans-serif;

  /* Layout */
  --gutter: clamp(24px, 4vw, 56px);
  --max:    1640px;
  --header-h:         80px;
  --header-h-compact: 64px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* -----------------------------------------------------------------
   02 · RESET
   ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h-compact); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ink-bg); color: var(--paper); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Body scroll lock used by the mobile drawer. */
body.nav-locked { position: fixed; inset: 0 0 auto 0; width: 100%; overflow: hidden; }

/* Skip-to-content link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-bg);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 9999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* -----------------------------------------------------------------
   03 · TYPE
   ----------------------------------------------------------------- */
.eyebrow, .meta, .mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  max-width: 28ch;
  /* Long unbreakable tokens (emails, URLs) inside .meta—e.g. the form-status
     spans on contact.html / careers.html—would otherwise push past max-width
     with no break opportunity. `anywhere` only fires when no normal break
     point fits the line, so prose still wraps on spaces first. */
  overflow-wrap: anywhere;
  /* Labels render as "light text" per the type spec — muted warm gray on
     paper. Dark-surface override below flips them to paper-tinted so they
     don’t vanish into a near-black background. */
  color: var(--ink-faint);
}
/* On dark surfaces, --ink-faint (#8b8676) on --ink (#15140f) drops below
   AA contrast. Repaint every label class — including .mono, which wasn’t
   covered by the original override. */
.section--dark .eyebrow,
.section--dark .meta,
.section--dark .mono,
.hero .eyebrow, .hero .meta, .hero .mono,
.split-feature .eyebrow, .split-feature .meta, .split-feature .mono,
.cta-start .eyebrow, .cta-start .meta, .cta-start .mono {
  color: var(--paper-72);
}

/* Coral eyebrow — heavier and tighter-tracked than .meta, used for
   section-opening labels that want presence on amber/coral surfaces. */
.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--amber, var(--ink));
}
.section--dark .label { color: var(--amber); }

/* Type scale (Inter Tight) — see hierarchy spec, 2026-05-18.
   .display  → hero h1/h2  → Inter Tight 800 / clamp(48,7vw,96) / -0.028em / lh 1
   h1, h2    → inherit .display defaults below
   h3 card   → Inter Tight 700 / ~24px / lh 1.05
   h4 method → Inter Tight 700 / ~22px / lh 1.10
   h5 footer → Inter Tight 600 / 11–12px uppercase / 0.18em */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}
h1, h2, .display {
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.028em;
  line-height: 1;
}
@media (max-width: 720px) {
  h1, h2, .display { font-size: clamp(36px, 8.5vw, 56px); }
}
h3 {
  font-weight: 700;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.018em;
  line-height: 1.05;
}
h4 {
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
h5 {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-faint);
}
.section--dark h5, .site-footer h5 { color: var(--paper-72, var(--paper)); }

/* Dark-surface override: global `color: var(--ink)` on h1–h4 leaves
   headings invisible (dark on dark) wherever a parent re-colours to
   paper — dark sections, the hero, hovered service cards, etc. Restore
   paper so the reveal animation doesn't fade to nothing. */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.split-feature.section--dark h1, .split-feature.section--dark h2,
.split-feature.section--dark h3, .split-feature.section--dark h4,
.coords-map__banner h1, .coords-map__banner h2,
.coords-map__banner h3, .coords-map__banner h4,
.service-card:hover h3,
.svc-card:hover h3 {
  color: var(--paper);
}
/* Amber accents inside headings (e.g. `<em class="accent--amber">`)
   stay amber even when the parent heading is repainted paper on dark.
   The utility class handles the color directly; this block keeps the
   font-style:normal nudge for italicized accents on dark grounds. */
.section--dark h1 em.accent--amber,
.section--dark h2 em.accent--amber,
.section--dark h3 em.accent--amber,
.section--dark h4 em.accent--amber {
  color: var(--amber);
}
p  {
  margin: 0 0 1em;
  text-wrap: pretty;
  color: var(--ink-soft);
  max-width: 36ch;
}

/* Dark-surface override: when a <p> lives inside a dark container,
   ink-soft body color becomes unreadable. Restore paper. */
.section--dark p,
.hero p,
.split-feature p,
.site-footer p,
.coords-map__banner p,
.service-card:hover p,
.svc-card:hover p {
  color: var(--paper-92, var(--paper));
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 60ch;
  color: var(--ink-3, var(--ink-soft));
}
.bigcopy {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1;
  letter-spacing: -0.024em;
  max-width: 28ch;
  text-wrap: balance;
}
@media (max-width: 720px) {
  .bigcopy { font-size: clamp(30px, 8.5vw, 44px); }
}
.bigcopy em { font-style: normal; color: var(--amber); }

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.section--dark .spec-list { color: var(--paper-78); }

/* -----------------------------------------------------------------
   04 · CONTAINER & RULES
   ----------------------------------------------------------------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Safety net for direct text/heading children of <section> without a .container wrapper. */
main > section > h1,
main > section > h2,
main > section > h3,
main > section > h4,
main > section > p,
main > section > .eyebrow,
main > section > .meta,
main > section > .lead,
main > section > .bigcopy,
main > section > .btn,
main > section > ul,
main > section > ol {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

section { position: relative; }
.section { padding-block: clamp(64px, 9vw, 160px); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.section--dark { background: var(--ink-bg); color: var(--paper); }
/* (Label color override for dark surfaces lives next to the .eyebrow base
   rule in §03 TYPE so the two stay in sync — including .mono.) */
.section--paper2 { background: var(--paper-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule-strong { height: 1px; background: var(--ink-bg); border: 0; }

/* Blueprint grids — subtle background pattern */
.bp-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(12,12,12,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,12,12,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  z-index: 1;
}
.bp-grid-dark {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--paper-5) 1px, transparent 1px),
    linear-gradient(to bottom, var(--paper-5) 1px, transparent 1px);
  background-size: 80px 80px;
}

.section-head {
  /* Stack eyebrow above the headline so the headline gets the FULL container
     width — no eyebrow column eating a third of the row. Editorial, roomy. */
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 88px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 104px;
}
.section-head .eyebrow { padding-top: 0; }
.section--dark .section-head { border-bottom-color: var(--line-dark-strong); }

/* When section-head is the ONLY content of its section (e.g. homepage About
   intro: eyebrow + bigcopy with nothing below), the trailing 104px margin and
   88px padding-bottom become dead space between this section and its
   neighbour. Strip both but KEEP the border-bottom hairline (with a small
   padding-bottom for breathing room) so the section break stays marked. */
.section-head.section-head--bare {
  padding-bottom: clamp(20px, 2.5vw, 40px);
  margin-bottom: 0;
}

/* Paired modifiers for a tight transition between two related sections.
   Apply --snug-bottom on the section above the break and --snug-top on the
   section below it. Without these, two adjacent .section blocks stack their
   full padding-block clamp (up to 160 + 160 = 320px on wide desktop). */
.section.section--snug-bottom { padding-bottom: clamp(8px, 1vw, 16px); }
.section.section--snug-top    { padding-top:    clamp(12px, 1.5vw, 24px); }

/* Big, free headlines. Run them out to the container edge. */
.section-head h2 {
  font-size: clamp(56px, 9vw, 144px);
  letter-spacing: -0.034em;
  line-height: 0.96;
  max-width: none;
  text-wrap: balance;
}
.section-head > div {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.section-head .lead {
  max-width: 64ch;
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .section-head {
    gap: 24px;
    padding-bottom: 48px;
    margin-bottom: 56px;
  }
  .section-head h2 { font-size: clamp(40px, 9.5vw, 72px); }
}

/* -----------------------------------------------------------------
   05 · BUTTONS
   ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease), border-color .25s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(.99); }
.btn::after {
  content: "→";
  font-size: 14px;
  transition: transform .25s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }
.btn-no-arrow::after { content: ""; }

.btn-primary { background: var(--ink-bg); color: var(--paper); }
.btn-primary:hover { background: var(--amber); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink-bg); color: var(--paper); }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: var(--ink-bg); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--amber); }
/* Paper-bordered ghost for use on dark / image backgrounds */
.btn-ghost-light {
  background: rgba(12, 12, 12, 0.28);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--paper);
  border-color: var(--paper-85);
  border-width: 1.5px;
}
.btn-ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* -----------------------------------------------------------------
   06 · GLASS UTILITY
   Applied to surfaces that float over imagery or dark backgrounds.
   Two variants: .glass (translucent, hero) and .glass--menu (opaque, mega).
   ----------------------------------------------------------------- */
.glass {
  background: var(--glass-bg-hero);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass--menu {
  background: var(--glass-bg-menu);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
          backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-menu);
  box-shadow: var(--glass-shadow-menu);
}
/* Fallback when backdrop-filter is unsupported (older browsers) — opacity goes up. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass        { background: var(--paper-85); }
  .glass--menu  { background: var(--paper-96); }
}

/* Small glass chip — used on dark map, dark CTA eyebrow, compare-slider labels. */
.glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--paper);
  background: var(--glass-bg-chip);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border-chip);
  border-radius: 999px;
}
/* On a paper background a chip needs an ink-tinted plate so the mono
   text reads. Same material law as .glass-chip; flipped palette. */
.glass-chip--on-paper {
  color: var(--ink);
  background: rgba(12, 12, 12, 0.06);
  border-color: rgba(12, 12, 12, 0.10);
}

/* -----------------------------------------------------------------
   07 · SITE HEADER  —  single dark liquid-glass state, always.
   ----------------------------------------------------------------- */
/* SITE HEADER — two states.
   1. Default (over hero, top of page): transparent. Paper-colored text
      so it reads against the dark hero photography.
   2. .is-scrolled (after hero, or on any non-hero page): solid paper
      background with ink text — V2 style. JS toggles `.is-scrolled` on
      scroll past the hero, and forces it on pages without a `.hero`. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top, 0);
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--paper);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.site-header.is-scrolled {
  background: var(--paper);
  border-bottom-color: var(--ink);
  color: var(--ink);
}

/* While transparent (over hero) all chrome stays in paper colour. */
.site-header .nav > a,
.site-header .nav .nav-trigger { color: var(--paper); }
.site-header .nav > a:hover,
.site-header .nav > a.is-active,
.site-header .nav .nav-trigger:hover,
.site-header .nav .nav-trigger.is-active { border-bottom-color: var(--paper); }
.site-header .menu-toggle { color: var(--paper); border-color: rgba(255, 255, 255, 0.55); }
.site-header .menu-toggle:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.site-header .header-cta { color: var(--paper); border-color: var(--paper); }
.site-header .header-cta:hover { background: var(--paper); color: var(--ink); }

/* After scroll past hero / on non-hero pages, flip palette to ink/paper.
   Exclude .drawer-cta: it's the ink-filled pill in the mobile drawer and
   needs to keep its paper text. Without the :not() the rule paints the
   drawer CTA label ink-on-ink and the button reads as a black blob. */
.site-header.is-scrolled .nav > a:not(.drawer-cta),
.site-header.is-scrolled .nav .nav-trigger { color: var(--ink); }
.site-header.is-scrolled .nav > a:not(.drawer-cta):hover,
.site-header.is-scrolled .nav > a:not(.drawer-cta).is-active,
.site-header.is-scrolled .nav .nav-trigger:hover,
.site-header.is-scrolled .nav .nav-trigger.is-active { border-bottom-color: var(--ink); }
.site-header.is-scrolled .menu-toggle { color: var(--ink); border-color: var(--ink); }
.site-header.is-scrolled .menu-toggle:hover { background: var(--ink-bg); color: var(--paper); border-color: var(--ink); }
/* .header-cta stays as default solid-ink pill with paper text in both
   states (over hero + after scroll). No is-scrolled override or the
   button text would go ink-on-ink and disappear. */
.site-header .brand img { filter: none; }

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: var(--header-h-compact);
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand img {
  height: 44px;
  width: auto;
  aspect-ratio: 2630 / 480;
}

/* Top scrim under the header — disabled. The paper-tinted gradient was
   sized for the old paper-style header; with the new transparent-over-hero
   header it bled as a white glow at the top of the hero. The header now
   reads against the hero photography directly. */
.hero__scrim { display: none; }

/* -----------------------------------------------------------------
   08 · PRIMARY NAV
   ----------------------------------------------------------------- */
.nav {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
}
.nav > a,
.nav .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  cursor: pointer;
  background: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav > a:hover,
.nav .nav-trigger:hover { border-bottom-color: var(--ink); }
.nav > a.is-active,
.nav .nav-trigger.is-active { border-bottom-color: var(--ink); }

.nav-trigger__chev {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.nav-group.is-open .nav-trigger__chev { transform: rotate(-135deg) translate(-2px, -2px); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--ink-bg);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.header-cta::after { content: "→"; font-size: 14px; transition: transform .25s var(--ease); }
.header-cta:hover { background: var(--amber); color: var(--ink); }
.header-cta:hover::after { transform: translateX(4px); }
.header-cta:active { transform: scale(.98); }

.nav > .drawer-cta { display: none; }
.menu-toggle { display: none; }

/* -----------------------------------------------------------------
   09 · MEGA MENU
   Glass-paper panel, 4 columns (3 service columns + image feature).
   Single canonical block; no !important.
   ----------------------------------------------------------------- */
.nav-group { position: relative; }

/* Hover-buffer between the trigger and the panel — prevents close-flicker. */
.nav-group::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -40px;
  right: -40px;
  height: 12px;
}

.mega {
  /* Mega menu — solid paper, V2 style. No blur, no glass.
     Clean ink-on-paper panel with a hairline border + soft shadow. */
  --mega-bg:          var(--paper);
  --mega-text:        var(--ink);
  --mega-text-muted:  var(--ink-3);
  --mega-text-dim:    var(--steel);
  --mega-num-bg:      var(--ink);
  --mega-num-fg:      var(--amber);
  --mega-border:      var(--line-strong);
  --mega-divider:     var(--line);
  --mega-hover-bg:    var(--paper-2);
  --mega-icon-bg:     var(--paper);
  --mega-icon-color:  var(--ink);
  --mega-foot-bg:     var(--paper-2);

  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1280px, calc(100vw - 48px));
  max-width: 1320px;
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  z-index: 70;
  background: var(--mega-bg);
  border: 1px solid var(--mega-border);
  box-shadow: 0 30px 60px -32px rgba(12, 12, 12, 0.28);
  overflow: hidden;
  color: var(--mega-text);
}
.nav-group.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear 0s;
}

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.15fr;
  gap: 0;
  padding: 20px 24px;
}
.mega__col {
  padding: 4px 22px 4px 22px;
  border-right: 1px solid var(--mega-divider);
}
.mega__col:nth-child(3) { border-right: 1px solid var(--mega-divider); }
.mega__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mega-text-muted);
  margin: 0 0 12px 0;
  /* <button> normalization — label looks like a paragraph on desktop, only
     behaves as a real button when the drawer is open (mobile accordion). */
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: default;
  font-weight: 400;
}
.nav.is-open .mega__label { cursor: pointer; }
.mega__label:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.mega__num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 22px;
  background: var(--mega-num-bg);
  color: var(--mega-num-fg);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.mega__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  padding: 7px 12px;
  margin: 0 -12px 2px;
  border-radius: 10px;
  color: var(--mega-text);
  transition: background .2s var(--ease);
}
.mega__item:hover,
.mega__item.is-current {
  background: var(--mega-hover-bg);
}
.mega__item:focus-visible {
  background: var(--mega-hover-bg);
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.mega__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--mega-icon-bg);
  border-radius: 8px;
  color: var(--mega-icon-color);
  flex-shrink: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.mega__item:hover .mega__icon,
.mega__item.is-current .mega__icon {
  background: var(--amber);
  color: var(--ink);
}
.mega__icon svg { width: 20px; height: 20px; }
.mega__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--mega-text);
}
.mega__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--mega-text-muted);
}

/* Image feature column (4th) */
.mega__feature {
  position: relative;
  display: block;
  margin: -20px -24px -20px 0;
  border-left: 1px solid var(--line);
  overflow: hidden;
  min-height: 360px;
  color: var(--paper);
}
.mega__feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.mega__feature:hover img { transform: scale(1.04); }
.mega__feature-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(12,12,12,0.05) 0%, rgba(12,12,12,0.78) 100%);
}
.mega__feature-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--amber);
}
.mega__feature-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 22ch;
}
.mega__feature-cta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--amber);
}

/* Footer row — desktop: both items right-aligned (View all services
   sits immediately before the "Not sure where to start?" help line,
   keeping the bottom-left corner clear of the floating call/WhatsApp
   buttons). Mobile drawer overrides this further down to stack at left. */
.mega__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 18px 32px;
  border-top: 1px solid var(--mega-divider);
  background: var(--mega-foot-bg);
  flex-wrap: wrap;
}
.mega__viewall {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--mega-text);
  transition: color .2s var(--ease);
}
.mega__viewall:hover { color: var(--amber); }
.mega__help {
  margin: 0;
  font-size: 14px;
  color: var(--mega-text-muted);
}
.mega__help a {
  color: var(--mega-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.mega__help a:hover { color: var(--amber); }

/* -----------------------------------------------------------------
   10 · HERO
   Fullscreen cinematic with slideshow, glass card, and scroll-pin
   reveal that brings in the lead paragraph. Built as outer-tall
   container with a position:sticky inner pinned at top:0 — the most
   reliable scroll-pin pattern (no nested sticky-inside-absolute).
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink-bg);
  /* Outer = 100vh (the pinned viewport) + 60vh of scroll for reveal */
  height: 160vh;
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero__slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.6s var(--ease);
  filter: contrast(1.04) saturate(0.96);
}
.hero__slide.is-current {
  opacity: 1;
  animation: heroKenBurns 12s ease-out forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.10); }
}

/* Hero card — sits in normal flow inside the pinned wrapper. */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  padding-left: clamp(20px, 4vw, 72px);
  padding-right: var(--gutter);
}
.hero__card {
  width: min(880px, calc(100vw - 48px));
  padding: clamp(28px, 2.6vw, 44px);
  border-radius: clamp(20px, 1.6vw, 28px);
  color: var(--paper);
  overflow: hidden;
  /* Establish a container so .hero__title can size itself relative to the
     CARD's width (via cqi units), not the viewport. That makes the title
     always fill the card on one line per <br>, with no overflow. */
  container-type: inline-size;
}
/* Title + lead occupy the same grid cell — both stretch to fill it,
   so the card has no dead space whether title or lead is showing.
   Fixed height (not min-height) so the card stays the same size
   regardless of which child is showing. */
.hero__swap {
  display: grid;
  grid-template-columns: 1fr;
  /* min-height (not height) so the card can grow if title wraps to more
     than 3 lines on narrow viewports. Both children still stretch via
     grid alignment, so the title<->lead crossfade still occupies the
     same cell. */
  min-height: clamp(240px, 28vh, 300px);
}
.hero__swap > * {
  grid-area: 1 / 1;
  min-width: 0;
}
/* Title — always 3 lines (Steel / construction, / finessed for Dubai.) at
   every viewport, filling the glass card as large as possible. The font
   is sized in cqi (% of the card's inline-size, declared as a container
   on .hero__card above), so as the card grows the title grows with it
   and the longest line "finessed for Dubai." always stretches across
   the card's inner width without ever overflowing. nowrap then locks
   the layout to exactly 3 lines per the <br>s in the markup. */
.hero__title {
  margin: 0;
  /* Hero caption is a deliberate exception to the 2026-05-18 type swap:
     it keeps Archivo 800 (the original family + weight). Everything else
     on the site moved to Inter Tight via --font-display. */
  font-family: "Archivo", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  /* 10.4cqi ≈ 10.4% of card inner width — empirically the largest scale
     at which "finessed for Dubai." (the longest line in this typeface
     after the <br>s in the markup) still fits on a single line inside
     the glass card, leaving roughly a 1-2% safety margin so sub-pixel
     rounding never pushes the line into overflow. Lower clamp guards
     against tiny containers; upper clamp keeps the title from getting
     comically huge on >1900px screens. */
  font-size: clamp(22px, 10.4cqi, 100px);
  line-height: 1.0;
  /* Letter-spacing kept at -0.035em (owner request 2026-05-18): the
     hero caption keeps the tracking it had under Archivo even though the
     family is now Inter Tight. The rest of the site follows the new
     -0.028em .display spec — this is a deliberate hero-only exception. */
  letter-spacing: -0.035em;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
  /* white-space:nowrap alone is not enough — the base `h1` rule sets
     `text-wrap: balance`, which resets the wrap-mode portion of nowrap.
     Explicit `text-wrap: nowrap` keeps every line on one physical line. */
  white-space: nowrap;
  text-wrap: nowrap;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
  align-self: center;
  width: 100%;
  min-width: 0;
}
/* Note: previously this block set `text-wrap: balance` on .hero__title for
   ≤520px. The `text-wrap` longhand resets the `text-wrap-mode` portion of
   the `white-space: nowrap` shorthand, which re-enabled wrapping and broke
   the 3-line layout. Removed; nowrap on the base rule now wins. */

/* Mobile (≤600px) — switch the hero caption from 3 lines to 4 lines so the
   type can scale much larger inside the glass card. The visual jump is
   realised by `.hero__title-tail { display: block }` which pushes the
   "for Dubai." span to its own line; the space between "finessed" and
   the span sits harmlessly at the end of line 3.
   With "construction," now the longest line (was "finessed for Dubai." on
   desktop), the cqi multiplier is bumped from 10.4 to 16. 17cqi was tried
   first and clipped the trailing comma of "construction," on iPhone Pro by
   ~2px; the corrected "construction," advance is ~6.0em (incl. -0.035em
   letter-spacing), not the ~5.4em earlier estimate. 16cqi gives ~96% fill
   across the full 320–600px range with ~4% margin each side — enough that
   sub-pixel rounding and any future font-metric drift can't push it over. */
@media (max-width: 600px) {
  .hero__title { font-size: clamp(22px, 16cqi, 100px); }
  .hero__title-tail { display: block; }
}
/* When the hero is revealed, the title slides up and fades out, the
   lead crossfades into its place. */
.hero.is-revealed .hero__title {
  opacity: 0;
  transform: translateY(-32px);
  pointer-events: none;
}
.hero__title em {
  font-style: normal;
  color: var(--amber-2);
  background-image:
    linear-gradient(
      110deg,
      rgba(255, 248, 220, 0) 44%,
      rgba(255, 248, 220, 0.55) 49%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 248, 220, 0.55) 51%,
      rgba(255, 248, 220, 0) 56%
    ),
    linear-gradient(
      90deg,
      #D9922E 0%, #F1B533 12.5%, #F6EE93 25%, #F6C645 37.5%,
      #E8A52D 50%,
      #F6C645 62.5%, #F6EE93 75%, #F1B533 87.5%, #D9922E 100%
    );
  background-size: 600% 100%, 250% 100%;
  background-position: 0% 0, 0% 50%;
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroGoldShimmer 9s linear infinite;
  will-change: background-position;
  /* No text-shadow — would draw dark halos through the gold gradient. */
  text-shadow: none;
}
@keyframes heroGoldShimmer {
  0%   { background-position: 600% 0, 333.3333% 50%; }
  100% { background-position:   0% 0,         0% 50%; }
}

/* Lead — hidden initially; takes the title's place on reveal.
   Flex column with space-between so the paragraph anchors to the top
   of the card area and the buttons land at the bottom — no dead space. */
.hero__lead {
  margin: 0;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease) .15s, transform .8s var(--ease) .15s;
  pointer-events: none;
  will-change: opacity, transform;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.hero__lead p {
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.55;
  color: #F2EFE8;
  margin: 0 0 28px;
  max-width: 100%;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
  font-weight: 500;
  letter-spacing: 0;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  align-items: center;
}
.hero__actions .btn {
  padding: 20px 36px;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
  font-weight: 600;
}
.hero__actions .btn-ghost-light {
  background: rgba(242, 239, 232, 0.10);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.hero.is-revealed .hero__lead { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Slideshow dots */
.hero__dots {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  z-index: 5;
  padding: 0 var(--gutter);
  pointer-events: auto;
}
.hero__dots button {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(242, 239, 232, 0.35);
  cursor: pointer;
  transition: background .25s var(--ease), width .25s var(--ease);
}
.hero__dots button:hover { background: rgba(242, 239, 232, 0.7); }
.hero__dots button.is-active { background: var(--amber); width: 42px; }

/* Reduced motion — show title + lead immediately, no Ken Burns, no crossfade. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-current { animation: none; }
  .hero__slide { transition: none; }
  .hero__title em { animation: none; background-position: 50% 0, 50% 50%; }
  .hero__lead { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------
   11 · TRUST STRIP
   ----------------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.trust__item {
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.trust__item:last-child { border-right: 0; }
.trust__item strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
}
.trust__item small {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--steel);
}

/* Dark-surface override: trust strip lives on the about page's safety-
   record band, where the section flips to ink. Big numerals default to
   var(--ink) (dark-on-dark, invisible) and the mono labels are --steel
   (low contrast on ink). Repaint to paper / paper-72 so the numbers and
   labels actually read, and lift the cell dividers from --line (near-
   black, invisible on ink) to the dark-surface equivalents. */
.section--dark .trust {
  border-top-color: var(--line-dark-strong);
  border-bottom-color: var(--line-dark-strong);
}
.section--dark .trust__item { border-right-color: var(--line-dark); }
.section--dark .trust__item strong { color: var(--paper); }
.section--dark .trust__item small { color: var(--paper-72); }

/* -----------------------------------------------------------------
   12 · SPLIT FEATURE
   Two-pane block (was part of the legacy hero):
   left = villa-extension photo, right = before/after compare slider.
   Full-bleed; tight figcaption strip on dark ink underneath.
   Glass labels float over imagery (the "melt seamlessly" rule).
   ----------------------------------------------------------------- */
.split-feature {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ink-bg);
}
/* TWO independent items side-by-side; each carries its own caption,
   so on mobile they stack cleanly with the right caption underneath. */
.split-feature__panes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.split-feature__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--ink-bg);
  min-width: 0;
}
.split-feature__item:nth-child(even) {
  border-left: 1px solid var(--line-dark-strong);
}
.split-feature__item:nth-child(n + 3) {
  border-top: 1px solid var(--line-dark-strong);
}
.split-feature__pane {
  position: relative;
  overflow: hidden;
  background: var(--ink-bg);
  aspect-ratio: 4 / 3;       /* gives each pane a consistent frame */
  flex: 1 1 auto;
}
.split-feature__pane > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% center;
  filter: contrast(1.05) saturate(0.9);
}
/* Per-pane caption (replaces the old single meta band). */
.split-feature__cap {
  padding: 14px clamp(20px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink-bg);
  border-top: 1px solid var(--line-dark-strong);
  margin: 0;
}
/* Tablet & mobile: stack the panes; each keeps its own caption directly below it. */
@media (max-width: 1024px) {
  .split-feature__panes { grid-template-columns: 1fr; }
  .split-feature__item:nth-child(even) { border-left: 0; }
  .split-feature__item + .split-feature__item {
    border-top: 1px solid var(--line-dark-strong);
  }
  .split-feature__pane { aspect-ratio: 16 / 10; }
}

.compare {
  --pos: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  touch-action: pan-y;
  background: var(--ink-bg);
  overflow: hidden;
}
.compare__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
  pointer-events: none;
}
.compare__img--top {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  will-change: clip-path;
}
.compare__label {
  position: absolute;
  top: 18px;
  z-index: 3;
  pointer-events: none;
}
.compare__label--before { left: 18px; }
.compare__label--after  { right: 18px; }
.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--paper);
  transform: translateX(-50%);
  z-index: 4;
  cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.compare__handle:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.compare__handle,
.compare__knob { touch-action: none; }
.compare__knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  display: grid; place-items: center;
  /* Drag affordance — kept at 16px / 700 (not the label spec) so the
     "↔" glyph reads at thumb size against the photo behind it. */
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}
.compare__hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  transition: opacity .35s ease;
}
.compare.is-touched .compare__hint { opacity: 0; }
/* Compare chips: compact, solid pill (no backdrop-filter).
   backdrop-filter over the will-change:clip-path top image repaints
   unreliably mid-drag on mobile — a solid pill renders cleanly. */
.compare__label,
.compare__hint {
  padding: 4px 9px;
  font-size: 9px;
  letter-spacing: 0.08em;
  background: rgba(12, 12, 12, 0.66);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.compare__label         { top: 12px; }
.compare__label--before { left: 12px; }
.compare__label--after  { right: 12px; }
.compare__hint          { bottom: 12px; }

/* -----------------------------------------------------------------
   13 · TWO-UP (image + copy)
   ----------------------------------------------------------------- */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;       /* both columns share the row height */
  border: 1px solid var(--ink);  /* a single frame around the pair, replaces the orphan-prone column divider */
}
.two-up__media {
  /* Pinning width to the grid column width prevents aspect-ratio from
     inferring a width that bursts out of its column when the copy column
     is taller than (column-width × 5/4). object-fit: cover on the inner
     image still gives the portrait crop the design wants. */
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 5;
  height: 100%;               /* stretch to row height so the image fills when copy column is taller */
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--ink);   /* divider lives on the media column so it can never out-run the image */
}
.two-up__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.two-up__copy {
  padding: clamp(40px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
/* Modifier: copy-heavy two-up (about.html workshop intro). Desktop only.
   On mobile the standard 1fr stack from the (max-width: 1119px) block applies. */
@media (min-width: 1120px) {
  .two-up--copy-wide { grid-template-columns: 0.62fr 1.38fr; }
  .two-up--copy-wide .two-up__copy {
    padding: clamp(32px, 3.6vw, 56px) clamp(36px, 3.8vw, 64px);
    gap: 20px;
  }
  /* Modifier: force a .two-up to stack image-over-copy at desktop instead of
     the default 2-column split. Mirrors the (max-width: 1119px) tablet rules so
     the slider takes the full row width with copy below it. Used by villa.html B.01. */
  .two-up--stacked { grid-template-columns: 1fr; }
  .two-up--stacked > .two-up__copy { border-left: 0; }
  .two-up--stacked > .two-up__media {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  /* about.html workshop hero combines --copy-wide + --stacked. Source is
     4:3 landscape; the default --stacked 16/10 crop trims the buildings
     roof and the steel-beam pile. 3:2 keeps both with only minor sky/floor
     trim. */
  .two-up--copy-wide.two-up--stacked > .two-up__media { aspect-ratio: 3 / 2; }
}

/* -----------------------------------------------------------------
   14 · STATS
   ----------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
/* `.stats--3` is the 3-cell variant used on about.html. minmax(0, 1fr)
   lets column tracks shrink below intrinsic min-content on phones —
   without this an inline `repeat(3,1fr)` forces three .stat cells past a
   320–390px viewport edge. Responsive overrides below stack to 2 / 1. */
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat {
  padding: 40px 28px;
  border-right: 1px solid currentColor;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* allow grid track to shrink below intrinsic content size */
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 5vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.stat__num em { font-style: normal; color: var(--amber); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}

/* -----------------------------------------------------------------
   15 · SERVICE CARDS
   ----------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.service-card {
  grid-column: span 6;
  padding: 48px 36px;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  background: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease);
  color: inherit;
}
.service-card:nth-child(2n) { border-right: 0; }
.service-card:hover { background: var(--ink-bg); color: var(--paper); }
.service-card:hover .service-card__num { color: var(--amber); }
.service-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.service-card__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: var(--steel);
  font-weight: 400;
}
.service-card__arrow {
  width: 40px; height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover .service-card__arrow {
  transform: rotate(-45deg);
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
.service-card h3 {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Stretched-link pattern: heading link covers the whole card so the card is
   clickable, while inline links inside <p> stay clickable. This replaces the
   previous outer <a class="service-card"> wrapper, which contained nested <a>
   links inside <p> — invalid HTML that the parser was splitting in half. */
.service-card__link {
  color: inherit;
  text-decoration: none;
}
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.service-card p,
.service-card .service-card__tags {
  position: relative;
}
.service-card p a {
  position: relative;
  z-index: 2;
}
.service-card p {
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 50ch;
  color: var(--ink-soft);
}
.service-card:hover p { color: var(--paper-92); }
.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.service-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.7;
}

/* "Services hub" grid (services.html) uses a slightly different cell name. */
.svc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.svc-card {
  grid-column: span 4;
  padding: 44px 32px;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease);
  color: inherit;
}
.svc-card:nth-child(3n) { border-right: 0; }
.svc-card:hover { background: var(--ink-bg); color: var(--paper); }
.svc-card__top { display: flex; justify-content: space-between; gap: 16px; }
.svc-card__num { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; letter-spacing: 0.18em; font-weight: 400; color: var(--steel); }
.svc-card__arrow {
  width: 36px; height: 36px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.svc-card:hover .svc-card__arrow { transform: rotate(-45deg); background: var(--amber); color: var(--ink); border-color: var(--amber); }
.svc-card h3 { font-size: clamp(22px, 1.8vw, 28px); }
.svc-card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.svc-card:hover p { color: var(--paper-92); }
.svc-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.svc-card__tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; opacity: 0.7;
}

/* -----------------------------------------------------------------
   16 · CAPABILITIES (dark technology section)
   ----------------------------------------------------------------- */
.capabilities {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}
.capability {
  grid-column: span 4;
  padding: 48px 32px;
  border-right: 1px solid var(--line-dark-strong);
  border-bottom: 1px solid var(--line-dark-strong);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.capability:last-child { border-right: 0; }
.capability__icon {
  width: 64px; height: 64px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.capability h3 { font-size: clamp(28px, 2.8vw, 40px); }
.capability__specs {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
}
.capability__specs li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-dark);
}
.capability__specs li span:last-child { color: var(--amber); }

/* -----------------------------------------------------------------
   17 · PROCESS (horizontal timeline of cards)
   ----------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid currentColor;
}
.process__step {
  padding: 40px 28px 32px;
  border-right: 1px solid currentColor;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.process__step:last-child { border-right: 0; }
.process__step::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 12px; height: 12px;
  background: currentColor;
  transform: translate(-6px, -6px);
  border-radius: 50%;
}
.process__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 400;
}
.process__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.process__step p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
/* .meta inside a process step would otherwise inherit the 15.5px body size
   above (specificity 0,1,1 beats the lone `.meta` rule). Re-pin it to a
   small caption scale. Sentence-case + tight tracking lets the longest
   string ("Output: shop drawings, weld map, BoQ, finish board") sit on
   one line even on a ~360 px mobile viewport — the all-caps label
   treatment from the global `.meta` rule wrapped this to 3–4 lines per
   card. */
.process__step p.meta {
  /* Keep the global .meta label treatment (uppercase, mono, 0.18em
     tracking). Only override the body-size inheritance from
     `.process__step p` and lift the 28ch width cap so the line uses the
     full card width before wrapping. If it doesn't fit, it wraps. */
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  max-width: none;
  margin-top: 4px;
}

/* -----------------------------------------------------------------
   18 · MARQUEE
   ----------------------------------------------------------------- */
.marquee {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  padding: 22px 0;
  background: var(--ink-bg);
  color: var(--paper);
}
.marquee__track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: -0.01em;
  align-items: center;
}
.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 64px;
}
.marquee__track > span::after {
  content: "✺";
  color: var(--amber);
  font-size: 0.7em;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -----------------------------------------------------------------
   19 · DUBAI SVG MAP
   ----------------------------------------------------------------- */
.map-wrap {
  position: relative;
  border: 1px solid var(--line-dark-strong);
  background: var(--ink-bg);
  aspect-ratio: 726 / 568;
  overflow: hidden;
}
.map-wrap svg { width: 100%; height: 100%; }
/* Mobile: match the box to the map content ratio so it ends right at the
   content (no empty band below). The map's bottom-right corner has no pins,
   so the small legend chip sits over that corner clear of Arabian Ranches. */
@media (max-width: 640px) {
  .map-wrap { aspect-ratio: 726 / 568; }
}
.map-pin { cursor: pointer; }
.map-pin circle { transition: r .2s var(--ease), fill .2s var(--ease); }
.map-pin:hover circle.dot { r: 8; fill: var(--amber); }

.map-legend {
  position: absolute;
  inset: auto auto clamp(16px, 2vw, 28px) clamp(16px, 2vw, 28px);
  width: max-content;
  max-width: calc(100% - 32px);
  background: rgba(12, 12, 12, 0.26);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
          backdrop-filter: blur(5px) saturate(120%);
  border: 1px solid var(--glass-border-chip);
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.5);
  z-index: 4;
  pointer-events: none;
}
.map-legend strong { color: var(--amber); font-weight: 500; }
.map-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.map-legend__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.map-legend__swatch--workshop { background: var(--amber); box-shadow: 0 0 0 2px rgba(226, 162, 59, 0.25); }
.map-legend__swatch--project  { background: var(--paper); box-shadow: 0 0 0 2px rgba(242, 239, 232, 0.25); }
@media (max-width: 640px) {
  .map-legend { font-size: 8.5px; padding: 6px 8px; gap: 4px; }
  .map-legend__swatch { width: 7px; height: 7px; flex-basis: 7px; }
}

/* -----------------------------------------------------------------
   20 · PROJECT GALLERY (home page)
   ----------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.gallery .project { grid-column: span 6; align-self: start; }
.gallery .project--wide   { grid-column: span 8; }
.gallery .project--narrow { grid-column: span 4; }

.project {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ink-bg);
  color: inherit;
}
.project__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.project--tall .project__img { aspect-ratio: 3 / 4; }
.project__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
  filter: contrast(1.05) saturate(0.9);
}
.project:hover .project__img img { transform: scale(1.04); }

.project__meta {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
}
/* Background now inherits from the section; only repaint text on dark. */
.section--dark .project__meta { color: var(--paper); }
.project__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  text-transform: none;
  flex: 1;
}
.project__cat { color: var(--steel); }

/* Glass strip at the bottom of each project tile on hover */
.project__overlay {
  position: absolute;
  inset: auto 12px 12px 12px;
  padding: 10px 14px;
  background: var(--glass-bg-chip);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border-chip);
  border-radius: 10px;
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.project:hover .project__overlay { opacity: 1; transform: none; }

/* -----------------------------------------------------------------
   21 · FILTER PILLS (projects page)
   ----------------------------------------------------------------- */
.filter-pill {
  padding: 10px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter-pill:hover { border-color: var(--ink); }
.filter-pill.is-active { background: var(--ink-bg); color: var(--paper); border-color: var(--ink); }

/* Archive toolbar */
.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.archive-toolbar__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--steel);
}
.archive-toolbar__count strong { color: var(--ink); font-weight: 700; }
.archive-toolbar__filters { display: flex; flex-wrap: wrap; gap: 8px; }

.archive-section { padding-block: clamp(48px, 6vw, 80px) clamp(24px, 3vw, 48px); }
.archive-section__head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  align-items: end;
  padding: 24px 0;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 16px;
}
.archive-section__num { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; letter-spacing: 0.18em; font-weight: 400; color: var(--steel); }
.archive-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
}
.archive-section__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
@media (max-width: 900px) and (min-width: 769px) {
  .archive-section__head { grid-template-columns: 80px 1fr; }
  .archive-section__count { grid-column: 1 / -1; white-space: normal; }
}

.proj-row {
  display: grid;
  /* Narrow text-meta column on the left, wide image strip on the right
     (~290/810 split at desktop). Was 1fr 320px (text wide, images cramped). */
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.proj-row.is-hidden { display: none; }
.cat-block.is-hidden,
[data-cat-block].is-hidden { display: none; }

.proj-row__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.proj-row__cat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  display: flex;
  gap: 12px;
  align-items: center;
}
.proj-row__cat::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}
.proj-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.proj-row__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}
.proj-row__specs > div { display: flex; flex-direction: column; gap: 4px; }
.proj-row__specs span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}
.proj-row__specs strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.proj-row__images {
  display: grid;
  /* Three columns: hero (2fr) + two squares. With a 2/1 aspect on the
     hero and 1/1 on the squares, all three render at identical row
     height (hero_height = hero_col_width/2 = small_col_width = small_height). */
  grid-template-columns: 2fr 1fr 1fr;
  gap: 6px;
}
.proj-row__images > a {
  position: relative;
  background: var(--ink-bg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.proj-row__images > a:first-child {
  aspect-ratio: 2 / 1;
}
/* Tablet & mobile: collapse to the original 2-col grid with hero on its
   own row. Switching to a 3-col strip on a 400-px-wide phone would make
   every image too small to read. */
@media (max-width: 900px) {
  .proj-row__images { grid-template-columns: 1fr 1fr; }
  .proj-row__images > a { aspect-ratio: 4 / 3; }
  .proj-row__images > a:first-child {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
  }
}
.proj-row__images img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.proj-row__images > a:hover img { transform: scale(1.04); }
.proj-img--elev      img { filter: contrast(1.18) saturate(0.45) brightness(1.05) hue-rotate(-8deg); }
.proj-img--detail    img { filter: contrast(1.1)  saturate(0.7)  brightness(0.88); }
.proj-img--blueprint img { filter: contrast(1.4)  saturate(0.2)  brightness(1.1) sepia(0.15) hue-rotate(180deg); mix-blend-mode: multiply; }
.proj-img--mono      img { filter: grayscale(1)   contrast(1.2)  brightness(0.95); }
.proj-img--warm      img { filter: contrast(1.08) saturate(1.1)  brightness(0.95) sepia(0.18); }
.proj-img--hero      img { filter: contrast(1.05) saturate(0.92) brightness(0.95); }

/* -----------------------------------------------------------------
   22 · PAGE HEADER (sub pages)
   ----------------------------------------------------------------- */
.page-header {
  border-bottom: 1px solid var(--ink);
  padding-top: calc(var(--header-h) + clamp(32px, 6vw, 96px));
  padding-bottom: clamp(48px, 6vw, 100px);
  position: relative;
}
.page-header__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 32px;
}
.page-header__crumb span { color: var(--ink); }
.page-header h1 { max-width: 18ch; }
.page-header em {
  font-style: normal;
  color: var(--amber-2);
}

/* -----------------------------------------------------------------
   23 · FORMS
   ----------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; grid-column: span 1; }
.field--full { grid-column: span 2; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field label,
.field legend {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0;
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0;
  font-size: 17px;
  font-family: var(--font-sans);
  transition: border-color .2s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
  box-shadow: 0 1px 0 0 var(--ink);
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  box-shadow: 0 1px 0 0 var(--ink), 0 0 0 3px rgba(226, 162, 59, 0.35);
}
.field textarea { resize: vertical; min-height: 120px; }

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.checkbox-pill { position: relative; cursor: pointer; }
.checkbox-pill input { position: absolute; opacity: 0; }
.checkbox-pill span {
  display: block;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.checkbox-pill input:checked + span {
  background: var(--ink-bg);
  color: var(--paper);
  border-color: var(--ink);
}

.field-file { position: relative; }
.field-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.field-file__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  transition: border-color .2s, color .2s;
  cursor: pointer;
}
.field-file:hover .field-file__label { border-color: var(--ink); color: var(--ink); }
.field-file__hint {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 6px;
}

/* -----------------------------------------------------------------
   24 · REVIEWS
   ----------------------------------------------------------------- */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 0 32px;
}
.reviews-summary__score {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.reviews-summary__divider { width: 1px; height: 48px; background: var(--line-strong); }
.reviews-summary__meta { display: flex; flex-direction: column; gap: 6px; }
.reviews-summary__stars { color: var(--amber); letter-spacing: 4px; font-size: 18px; }
.reviews-summary__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}
.reviews-summary__google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--ink);
  margin-left: auto;
  transition: background .2s, color .2s;
  border-radius: 999px;
}
.reviews-summary__google:hover { background: var(--ink-bg); color: var(--paper); }

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
}
.review {
  padding: 32px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review:last-child { border-right: 0; }
.review__stars { color: var(--amber); letter-spacing: 4px; font-size: 16px; }
.review__text { font-size: 16px; line-height: 1.65; color: var(--ink-soft); flex: 1; }
.review__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-3);
}
.review__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.review__date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

/* -----------------------------------------------------------------
   25 · CLIENTS
   ----------------------------------------------------------------- */
.clients {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.client-tile {
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
}
.client-tile:nth-child(6n) { border-right: 0; }

.clients-mobile { display: none; }

.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  text-align: center;
}
.clients-grid > div {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------
   26 · CTA BANNER
   ----------------------------------------------------------------- */
.cta-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(50%, 280px), 1fr));
  gap: 40px;
  align-items: end;
}
.cta-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.cta-start__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(50%, 280px), 1fr));
  gap: 40px;
  align-items: end;
}

/* -----------------------------------------------------------------
   27 · LEADERSHIP GRID (about page)
   ----------------------------------------------------------------- */
.leaders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  border-bottom: 0;
}
.leader {
  padding: 40px 32px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  min-height: 340px;
}
.leader:last-child { border-right: 0; }
.leader__photo {
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ink);
  flex-shrink: 0;
}
.leader__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leader__role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-2);
  margin-top: 4px;
}
.leader__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.leader__bio {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 28ch;
}

/* -----------------------------------------------------------------
   28 · TIMELINE (about page)
   ----------------------------------------------------------------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.timeline__item {
  padding: 32px 24px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timeline__item:last-child { border-right: 0; }
.timeline__year {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--amber-2);
}
.timeline__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}
.timeline__body { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* -----------------------------------------------------------------
   29 · EQUIPMENT TABLE (about page)
   ----------------------------------------------------------------- */
.equip {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  table-layout: fixed;
}
.equip th,
.equip td {
  text-align: left;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.equip th:nth-child(1),
.equip td:nth-child(1) { width: 26%; padding-left: 0; }
.equip th:nth-child(2),
.equip td:nth-child(2) { width: 46%; }
.equip th:nth-child(3),
.equip td:nth-child(3) { width: 28%; padding-right: 0; }
.equip thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 1px solid var(--ink);
  font-weight: 400;
}
.equip td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.equip td.equip__cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* -----------------------------------------------------------------
   30 · CERTIFICATIONS GRID
   ----------------------------------------------------------------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(25%, 170px), 1fr));
  gap: 16px;
}
.cert-grid > .cert-card,
.cert-grid > div {
  border: 1px solid var(--ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  aspect-ratio: 1 / 1.2;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.cert-card--amber,
.cert-grid > div.is-amber {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--ink);
}
.cert-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  color: var(--steel);
}
.cert-card--amber .cert-card__body { color: var(--ink); opacity: .78; }
.cert-card__body .mono { font-size: 11.5px; letter-spacing: .02em; }
.cert-card__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cert-card__foot h3 { line-height: 1.05; }
.cert-card__scope { color: var(--steel); }
.cert-card--amber .cert-card__scope { color: var(--ink); opacity: .78; }
.cert-card__cta {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  letter-spacing: .04em;
  transition: color .22s ease, border-color .22s ease;
}
a.cert-card { cursor: pointer; }
a.cert-card:hover {
  background: var(--ink-bg);
  color: var(--paper);
  border-color: var(--ink);
}
a.cert-card:hover .cert-card__body,
a.cert-card:hover .cert-card__scope { color: var(--paper); opacity: .72; }
a.cert-card:hover .cert-card__cta {
  color: var(--amber);
  border-top-color: rgba(255,255,255,.18);
}
a.cert-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

/* -----------------------------------------------------------------
   31 · VALUES (careers page)
   ----------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}
.value {
  padding: 40px 32px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
}
.value:last-child { border-right: 0; }
.value__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--amber-2);
}
.value__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.value__body {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.55;
}

/* -----------------------------------------------------------------
   32 · IMAGE STRIP
   ----------------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 12px;
}
.strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
}

/* -----------------------------------------------------------------
   33 · PROCESS LINE (about page diagram)
   ----------------------------------------------------------------- */
.process-line {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--ink);
}
.process-line__step {
  padding: 28px 20px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.process-line__step:last-child { border-right: 0; }
.process-line__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--amber-2);
}
.process-line__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.process-line__desc {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* -----------------------------------------------------------------
   34 · FAQ ACCORDION
   ----------------------------------------------------------------- */
.faq-section {
  padding-block: clamp(64px, 9vw, 160px);
  background: var(--paper-2);
}
.faq-section h2 { margin-bottom: clamp(20px, 2vw, 32px); }
.faq-intro {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  max-width: 95ch;
  color: var(--ink-3);
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.faq-intro strong { color: var(--ink); }
.faq-item { border-top: 1px solid var(--line-strong); padding: 0; }
.faq-item:last-of-type { border-bottom: 1px solid var(--line-strong); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2vw, 28px) 56px clamp(20px, 2vw, 28px) 0;
  position: relative;
  user-select: none;
  transition: color .2s var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary > h3 {
  display: inline;
  font-size: clamp(17px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  font-weight: 700;
  line-height: 1.25;
}
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 400;
  color: var(--amber-2);
  transition: transform .25s var(--ease);
  line-height: 1;
}
.faq-item[open] > summary::after { content: "−"; color: var(--ink); }
.faq-item > summary:hover > h3 { color: var(--amber-2); }
.faq-item > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.faq-answer {
  padding: 0 clamp(0px, 4vw, 64px) clamp(24px, 3vw, 36px) 0;
  color: var(--ink-3);
  max-width: none;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.65;
}
/* Desktop: cap running text widths so long lines stay readable, but keep bullet lists single-column. */
@media (min-width: 900px) {
  .faq-answer p,
  .faq-answer ol,
  .faq-answer ul {
    max-width: 95ch;
  }
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.faq-answer ul li { position: relative; padding: 4px 0 4px 20px; }
.faq-answer ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--amber-2);
  font-family: var(--font-mono);
}
.faq-answer strong { color: var(--ink); font-weight: 600; }
.faq-answer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--amber-2);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.faq-answer a:hover { color: var(--amber-2); }
.faq-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 12px;
}

/* -----------------------------------------------------------------
   35 · COORDINATES MAP (Google Maps embed card on about/contact)
   ----------------------------------------------------------------- */
.coords-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(50%, 280px), 1fr));
  gap: 0;
  border: 1px solid var(--ink);
}
.coords-info {
  padding: 48px;
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.coords-info__line { font-size: 18px; margin: 8px 0 0; line-height: 1.5; }
.coords-media { aspect-ratio: 1 / 1; overflow: hidden; }
.coords-media img { width: 100%; height: 100%; object-fit: cover; }

.coords-heart { font-style: normal; color: var(--amber-2); }

.coords-map {
  position: relative;
  margin-top: 24px;
  border: 1px solid var(--ink);
  background: var(--ink-bg);
  color: var(--paper);
  overflow: hidden;
}
.coords-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--ink-bg);
  overflow: hidden;
}
.coords-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(1.04) saturate(0.95);
  transition: filter .5s var(--ease);
}
.coords-map:hover .coords-map__frame iframe { filter: contrast(1.08) saturate(1.15); }

.coords-map__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}
.coords-map__pin-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--paper);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  animation: coordsPinBob 2.6s ease-in-out infinite;
}
.coords-map__pin-ring,
.coords-map__pin-ring--2 {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  opacity: 0;
  animation: coordsPinPulse 2.4s ease-out infinite;
}
.coords-map__pin-ring--2 { animation-delay: 1.2s; }
@keyframes coordsPinPulse {
  0%   { transform: scale(0.6); opacity: 0.85; }
  80%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes coordsPinBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.coords-map__compass {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--glass-bg-chip);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--amber);
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 3;
}
.coords-map__compass-n {
  position: absolute;
  top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--amber);
}
.coords-map__compass-needle {
  width: 2px;
  height: 30px;
  background: linear-gradient(to bottom, var(--amber) 0 50%, var(--paper) 50% 100%);
  transform-origin: 50% 50%;
  animation: coordsCompassSpin 9s ease-in-out infinite;
}
@keyframes coordsCompassSpin {
  0%   { transform: rotate(-12deg); }
  50%  { transform: rotate(12deg); }
  100% { transform: rotate(-12deg); }
}

.coords-map__banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  background: var(--ink-bg);
  color: var(--paper);
  border-top: 1px solid var(--line-dark-strong);
  overflow: hidden;
  transition: background .3s var(--ease);
}
.coords-map__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(226, 162, 59, 0.18) 45%,
    rgba(226, 162, 59, 0.28) 50%,
    rgba(226, 162, 59, 0.18) 55%,
    transparent 100%);
  transform: translateX(-110%);
  transition: transform .9s var(--ease);
  pointer-events: none;
}
.coords-map__banner:hover { background: var(--ink-bg); }
.coords-map__banner:hover::before { transform: translateX(110%); }
.coords-map__banner-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: coordsPinBob 2.6s ease-in-out infinite;
}
.coords-map__banner-text {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.coords-map__banner-text em { font-style: normal; color: var(--amber); }
.coords-map__banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}

/* -----------------------------------------------------------------
   36 · FOOTER
   ----------------------------------------------------------------- */
.site-footer {
  background: var(--ink-bg);
  color: var(--paper);
  padding: clamp(48px, 6vw, 96px) 0 32px;
  border-top: 1px solid var(--ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 64px;
  position: relative;
}
.footer-grid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-dark-strong);
}
.footer-brand img {
  height: 60px;
  width: auto;
  aspect-ratio: 2630 / 480;
  margin-bottom: 24px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--paper-72);
  max-width: 38ch;
}
.footer-col h3,
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--amber);
  margin-bottom: 20px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-col a {
  font-size: 15px;
  color: var(--paper-92);
  transition: color .2s;
}
.footer-col a:hover { color: var(--amber); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-50);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-massive {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
  padding: 0 clamp(12px, 1.5vw, 24px);
  box-sizing: border-box;
  overflow: visible;
}
.footer-massive text {
  /* Footer giant wordmark — pinned to Archivo per owner request 2026-05-18.
     Rest of the site uses Inter Tight via --font-display; this is the only
     surface that keeps the original Archivo display family. */
  font-family: "Archivo", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: normal;
  fill: transparent;
  stroke: #F2EFE8;
  stroke-width: 1.2;
  paint-order: stroke;
  font-size: 170px;
}

/* -----------------------------------------------------------------
   37 · REVEAL ANIMATIONS
   ----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}

/* -----------------------------------------------------------------
   38 · PERFORMANCE / DEVICE POLISH
   ----------------------------------------------------------------- */
@supports (content-visibility: auto) {
  main > section:not(.hero):not(.page-header) {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
}

img { image-rendering: auto; }

/* Respect Safari + Chrome safe-area on the FAB */
@supports (padding: max(0px)) {
  .fc-fab { bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-data: reduce) {
  .marquee__track { animation: none; }
  .bp-grid, .bp-grid-dark { display: none; }
}
@media (forced-colors: active) {
  .btn, .header-cta, .nav > a { forced-color-adjust: none; }
}
@media print {
  .site-header, .site-footer, .marquee, .hero, .nav, .menu-toggle, .reveal,
  .fc-fab, .hero__dots { display: none; }
  body { background: #fff; color: #1C1B17; }
  a { color: #1C1B17; text-decoration: underline; }
}

/* -----------------------------------------------------------------
   39 · RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 1180px) {
  .mega__inner { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .mega { width: min(1100px, calc(100vw - 32px)); }
}

@media (max-width: 1119px) {
  /* Hide desktop nav, show hamburger. Breakpoint sits above iPad-landscape
     (1024) so the tablet header doesn't try to fit the inline nav at the
     width where labels would wrap. */
  .nav { display: none; }
  .header-cta { display: none; }

  /* On any viewport where the hamburger takes over, the header has only
     ONE state: solid paper with ink chrome. No transparent-over-hero
     treatment — there's no inline nav to read against dark imagery, the
     drawer flips to paper anyway, and the hero photo behind a transparent
     header reads as visual noise next to the floating logo + hamburger. */
  .site-header,
  .site-header.is-scrolled {
    background: var(--paper);
    border-bottom-color: var(--ink);
  }
  .site-header .menu-toggle { color: var(--ink); border-color: var(--ink); }
  .site-header .menu-toggle:hover { background: var(--ink-bg); color: var(--paper); border-color: var(--ink); }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    justify-self: end;
    background: transparent;
    color: var(--ink);
    transition: background .25s var(--ease), color .25s var(--ease);
  }
  .menu-toggle:hover { background: var(--ink-bg); color: var(--paper); }
  .site-header__inner { grid-template-columns: auto 1fr; gap: 16px; }
  .brand { justify-self: start; }

  /* Drawer — explicit height because top+bottom inset on a fixed flex
     column can collapse to content height in some browsers.
     justify-content + align-items are reset here: the base `.nav` sets
     them to `center` for the desktop horizontal layout, which would
     vertically centre the column when the drawer flips to flex-column,
     pushing the first items above the viewport when the mega is open. */
  .nav.is-open {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100dvh - var(--header-h));
    height: calc(100vh - var(--header-h));
    background: var(--paper);
    padding: 24px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px);
    gap: 0;
    z-index: 49;
    border-top: 1px solid var(--ink);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Drawer text colour — the desktop `.site-header .nav > a` rule paints
     nav items in `var(--paper)` because the header is dark glass. Inside
     the open drawer the background flips to `var(--paper)`, so without
     this override the nav text would be paper-on-paper (invisible).
     Exclude .drawer-cta so the pill button keeps its paper-on-ink fill. */
  .site-header .nav.is-open > a:not(.drawer-cta),
  .site-header .nav.is-open .nav-trigger { color: var(--ink); }
  .site-header .nav.is-open > a:not(.drawer-cta):hover,
  .site-header .nav.is-open > a:not(.drawer-cta).is-active,
  .site-header .nav.is-open .nav-trigger:hover,
  .site-header .nav.is-open .nav-trigger.is-active { border-bottom-color: var(--ink); }

  .nav.is-open > a,
  .nav.is-open .nav-trigger {
    width: 100%;
    padding: 18px 0;
    font-size: 10.5px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    justify-content: space-between;
  }
  .nav.is-open .nav-group { width: 100%; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav-group .nav-trigger { border-bottom: 0; }
  .nav.is-open .nav-group::before { display: none; }
  .nav.is-open .mega {
    /* Inside the paper drawer, the mega becomes a flat accordion list.
       Flip ALL palette tokens to ink/paper-2 so text stays readable on
       the paper background. */
    --mega-text:        var(--ink);
    --mega-text-muted:  var(--ink-3);
    --mega-text-dim:    var(--steel);
    --mega-num-bg:      var(--ink);
    --mega-num-fg:      var(--amber);
    --mega-border:      var(--line);
    --mega-divider:     var(--line);
    --mega-hover-bg:    var(--paper-2);
    --mega-icon-bg:     var(--paper-2);
    --mega-icon-color:  var(--ink);
    --mega-foot-bg:     transparent;
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: 0;
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease), opacity .25s var(--ease);
  }
  .nav.is-open .nav-group.is-open .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 2400px;
  }
  .nav.is-open .mega__inner {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }
  /* Mobile mega — each column becomes its own collapsible accordion.
     The .mega__label is the trigger (clickable). .mega__item children
     are hidden until the column gets .is-open via JS. */
  .nav.is-open .mega__col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0;
    margin: 0;
    display: block;
  }
  .nav.is-open .mega__col:last-child { border-bottom: 0; }

  .nav.is-open .mega__label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    position: relative;
  }
  .nav.is-open .mega__label::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s var(--ease);
  }
  .nav.is-open .mega__col.is-open .mega__label::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* Items hidden by default in mobile; revealed when column .is-open.
     max-height needs to be tall enough for icon (44px) + 2-line title +
     2-line description without clipping. */
  .nav.is-open .mega__col .mega__item {
    padding: 0;
    margin: 0;
    border-radius: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .35s var(--ease), opacity .2s var(--ease), padding .2s var(--ease);
  }
  .nav.is-open .mega__col.is-open .mega__item {
    max-height: 240px;
    opacity: 1;
    pointer-events: auto;
    padding: 14px 0;
  }
  /* Last item in an open column gets a bit of bottom space */
  .nav.is-open .mega__col.is-open .mega__item:last-of-type { padding-bottom: 20px; }

  .nav.is-open .mega__item:hover,
  .nav.is-open .mega__item.is-current { background: transparent; }
  .nav.is-open .mega__name { color: var(--ink); }
  .nav.is-open .mega__desc { color: var(--ink-3); }
  .nav.is-open .mega__icon { background: var(--paper-2); color: var(--ink); }
  .nav.is-open .mega__feature { display: none; }
  .nav.is-open .mega__foot {
    padding: 16px 0;
    background: transparent;
    border-top: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .nav.is-open .mega__viewall,
  .nav.is-open .mega__help,
  .nav.is-open .mega__help a { color: var(--ink); }
  /* Drawer "Request a Quote" — match the site .btn.btn-primary look:
     pill, ink background, paper text, mono caps, arrow that nudges. */
  .nav.is-open > .drawer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 28px;
    margin: 28px 0 8px;
    background: var(--ink-bg);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 400;
    border: 1px solid var(--ink);
    border-radius: 999px;
    align-self: stretch;
    white-space: nowrap;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  }
  .nav.is-open > .drawer-cta::after {
    content: "→";
    font-size: 10.5px;
    transition: transform .25s var(--ease);
  }
  .nav.is-open > .drawer-cta:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }
  .nav.is-open > .drawer-cta:hover::after { transform: translateX(4px); }

  /* Hero card stays anchored center-left on tablet — title font-size is
     intentionally NOT overridden here so the base clamp keeps the 3-line
     layout intact at this breakpoint. */

  /* Section grids collapse */
  /* section-head collapse moved to its own 760px breakpoint near the rule */
  /* .stats--3 stays at 3 columns even on phones (intentional per CLAUDE.md),
     so the 2-col mobile :nth-child rules below would mis-fire: clearing the
     2–3 col divider and painting a partial 2/3 horizontal line under the
     first two cells. Scope the rules to non-.stats--3 variants. */
  .stats:not(.stats--3) { grid-template-columns: repeat(2, 1fr); }
  .stats:not(.stats--3) .stat:nth-child(2n) { border-right: 0; }
  .stats:not(.stats--3) .stat:nth-child(-n+2) { border-bottom: 1px solid currentColor; }
  /* .stats--3 keeps 3 columns at ≤720px, so each cell is only ~100px wide on
     a 360px phone. Base .stat__num clamp floor (48px) + .stat 28px side padding
     overflows the column — "500+" bled into "311" in the about-page screenshot.
     Shrink number type and trim side padding so the figure fits inside its cell. */
  .stats--3 .stat { padding: 28px 10px; }
  .stats--3 .stat__num { font-size: clamp(28px, 9vw, 48px); }
  .service-card { grid-column: span 12; border-right: 0; }
  .svc-card { grid-column: span 12; border-right: 0; }
  .process { grid-template-columns: 1fr 1fr; }
  .process__step:nth-child(2n) { border-right: 0; }
  .process__step:nth-child(-n+2) { border-bottom: 1px solid currentColor; }
  .capability { grid-column: span 12; border-right: 0; }
  .gallery .project,
  .gallery .project--wide,
  .gallery .project--narrow { grid-column: span 12; }
  .two-up { grid-template-columns: 1fr; }
  .two-up__copy { border-left: 0; }
  .two-up__media {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);   /* horizontal stack on mobile uses a bottom hairline instead */
  }
  .form-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .trust__item:nth-child(3n) { border-right: 0; }
  .leaders { grid-template-columns: repeat(2, 1fr); }
  .leader:nth-child(2n) { border-right: 0; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline__item:nth-child(2n) { border-right: 0; }
  .timeline__item:last-child { border-right: 0; }
  /* Row-bottom dividers: every item except the last-child gets a bottom
     hairline. For an EVEN total count (e.g. 4, 6) the second-to-last item
     sits in col 1 of the last row — clear its border-bottom so the row
     above container.border-bottom stays clean. For ODD totals (e.g. 5) the
     second-to-last item is in col 2 of a non-last row and must keep its
     hairline, otherwise row 2 ends up with a half-width divider. */
  .timeline__item:not(:last-child) { border-bottom: 1px solid var(--ink); }
  .timeline__item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .process-line { grid-template-columns: repeat(2, 1fr); }
  .process-line__step:nth-child(2n) { border-right: 0; }
  .process-line__step:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--ink); }
  .clients { grid-template-columns: repeat(3, 1fr); }
  .client-tile:nth-child(6n) { border-right: 1px solid var(--line); }
  .client-tile:nth-child(3n) { border-right: 0; }
  .reviews { grid-template-columns: 1fr; }
  .review { border-right: 0; border-bottom: 1px solid var(--ink); }
  .review:last-child { border-bottom: 0; }
  .values { grid-template-columns: 1fr; }
  .value { border-right: 0; border-bottom: 1px solid var(--ink); }
  .value:last-child { border-bottom: 0; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }

  /* .equip keeps its proportional desktop layout on tablets — table-layout:fixed
     + word-wrap handle wrapping. Mobile card layout takes over below 720px. */

  .compare-section__head { grid-template-columns: 1fr; }
  .section { padding-block: clamp(48px, 8vw, 96px); }
}

@media (max-width: 768px) {
  .archive-section__head { grid-template-columns: 1fr; gap: 8px; }
  .proj-row { grid-template-columns: 1fr; gap: 16px; }
  .proj-row__images { grid-column: 1; }
  .proj-row__specs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* Header logo smaller on phones */
  .brand img { height: 36px; }
  :root { --header-h: 64px; --header-h-compact: 56px; }
  .site-header__inner { padding-left: 12px; }

  /* Hero copy padding compress — title font-size handled by the base
     clamp so the 3-line layout is preserved at this breakpoint too. */
  .hero { height: 175vh; }
  /* No outer margin on the card — at 320px every pixel of inner width
     counts so "finessed for Dubai." can fit on one line at 24px. Stage
     padding already provides breathing room from the viewport edge. */
  .hero__card { margin: 0; max-width: none; width: 100%; }

  /* Trust badges 2 columns */
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(2n) { border-right: 0; }
  .trust__item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--line); }

  h2 { font-size: clamp(30px, 8vw, 48px); }
  h3 { font-size: clamp(20px, 5vw, 28px); }
  .bigcopy { font-size: clamp(28px, 8vw, 48px); }

  .two-up__copy { padding: 32px 20px; }

  /* Reduce expensive image filters on phones */
  .project__img img,
  .strip img,
  .proj-img--hero img,
  .proj-img--detail img,
  .proj-img--blueprint img,
  .proj-img--mono img,
  .proj-img--warm img,
  .proj-img--elev img { filter: none; }

  .strip { grid-template-columns: repeat(2, 1fr); }
  .form-grid { gap: 14px; }
  .reviews-summary__google { margin-left: 0; }

  /* Min tap target (mobile width-based fallback) */
  .filter-pill, .checkbox-pill span, .btn { min-height: 44px; }

  /* Mobile clients */
  .clients { display: none; }
  .clients-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  .clients-mobile > * {
    aspect-ratio: 3 / 2;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    background: var(--paper);
  }
  .clients-mobile > *:nth-child(2n) { border-right: 0; }
  .clients-mobile > *:nth-last-child(-n+2) { border-bottom: 0; }
  .clients-mobile .client-tile {
    aspect-ratio: 3 / 2;
    border-right: 0;
    border-bottom: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
    text-align: center;
    line-height: 1.55;
  }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process: single col */
  .process { grid-template-columns: 1fr; }
  .process__step {
    padding: 40px 24px;
    border-right: 0;
    border-bottom: 1px solid currentColor;
  }
  .process__step:last-child { border-bottom: 0; }

  /* Process line (about) */
  .process-line { grid-template-columns: 1fr; }
  .process-line__step {
    padding: 28px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .process-line__step:last-child { border-bottom: 0; }

  /* Timeline single col */
  .timeline { grid-template-columns: 1fr; }
  .timeline__item {
    padding: 28px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .timeline__item:last-child { border-bottom: 0; }
  .timeline__year { font-size: clamp(36px, 10vw, 48px); }

  /* Equipment table → card list */
  .equip { display: block; overflow: visible; white-space: normal; border-top: 1px solid var(--ink); border-collapse: collapse; }
  .equip thead { display: none; }
  .equip tbody { display: block; width: 100%; }
  .equip tr { display: block; width: 100%; min-width: 0; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
  .equip th, .equip td { display: block; width: 100%; padding: 0; border: 0; font-size: 15px; line-height: 1.55; white-space: normal; }
  /* Override desktop's table-layout:fixed per-column widths (.equip td:nth-child(N)
     has higher specificity than the row above, so 26%/46%/28% would otherwise win
     and squash each card cell on mobile). */
  .equip td:nth-child(1),
  .equip td:nth-child(2),
  .equip td:nth-child(3) { width: 100%; padding: 0; }
  .equip td:not(:first-child) { margin-top: 14px; }
  .equip td:first-child { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; margin-bottom: 16px; }
  .equip td:nth-child(2)::before {
    content: "Capability";
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 6px;
  }
  .equip td.equip__cap::before {
    content: "Capacity / Range";
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 6px;
  }
  .equip td.equip__cap { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; color: var(--ink-3); }

  /* Leaders stack */
  .leaders { grid-template-columns: 1fr; }
  .leader { padding: 32px 20px; border-right: 0; min-height: 0; }
  .leader__photo { width: 112px; height: 112px; }

  /* Principle grid (about.html Approach, careers.html Working at Finesse):
     the container has only border-top, and items 1 + 2 carry an inline
     border-right that acts as a column divider in the desktop 3-column
     layout. When the grid stacks at ≤720px the hairlines form a partial
     L-shape (top + part of right) instead of a complete enclosure. Close
     the rectangle: extend the right hairline through the last item, and
     add the matching left and bottom hairlines so all four sides meet. */
  .principle-grid {
    border-left: 1px solid var(--line-dark-strong);
    border-bottom: 1px solid var(--line-dark-strong);
  }
  .principle-grid > :last-child { border-right: 1px solid var(--line-dark-strong); }

  /* 4-up cert grid → horizontal scroll */
  .cert-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 12px;
  }
  .cert-grid::-webkit-scrollbar { display: none; }
  .cert-grid > .cert-card,
  .cert-grid > div {
    flex: 0 0 72%;
    max-width: 280px;
    min-width: 220px;
    scroll-snap-align: start;
  }

  /* Footer */
  .site-footer { padding: 48px 0 28px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand    brand"
      "company  services"
      "workshop services";
    gap: 32px 24px;
    padding-bottom: 40px;
  }
  .footer-grid > :nth-child(1) { grid-area: brand; }
  .footer-grid > :nth-child(2) { grid-area: company; }
  .footer-grid > :nth-child(3) { grid-area: services; }
  .footer-grid > :nth-child(4) { grid-area: workshop; }
  .footer-brand img { height: 56px; margin-bottom: 16px; }
  .footer-massive { display: block; margin-top: 20px; padding: 0; }
  .footer-bottom {
    padding-top: 22px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
  }
  .marquee__track { font-size: clamp(16px, 4vw, 22px); gap: 32px; }
  .marquee__track > span { gap: 32px; }
}

@media (max-width: 480px) {
  :root { --gutter: 20px; }
  /* Compact padding so the card has enough inner width for "finessed for
     Dubai." to stay on one line at 320-480px. Title font is controlled
     by the base clamp on .hero__title; do not override it here. */
  .hero__card { padding: 16px; width: min(880px, calc(100vw - 24px)); }
  .hero__lead p { font-size: 15px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .compare__knob { width: 40px; height: 40px; font-size: 14px; }
}

/* -----------------------------------------------------------------
   40 · FAB (floating contact buttons)
   The site-wide JS injector creates .fc-fab pills; this is the
   canonical CSS so we don't ship the same styles inline in JS.
   ----------------------------------------------------------------- */
.fc-fab {
  position: fixed;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  z-index: 9998;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fc-fab:hover { transform: scale(1.08); }
.fc-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--amber), 0 6px 18px rgba(0,0,0,.18);
}
.fc-fab svg { width: 28px; height: 28px; display: block; fill: var(--paper); pointer-events: none; }
.fc-wa   { right: 20px; background: #25D366; }
.fc-call { left: 20px;  background: #1f2937; }
.fc-tip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #111827;
  color: var(--paper);
  font: 500 12px/1 var(--font-sans);
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.fc-wa   .fc-tip { right: calc(100% + 12px); }
.fc-call .fc-tip { left:  calc(100% + 12px); }
.fc-fab:hover .fc-tip,
.fc-fab:focus-visible .fc-tip { opacity: 1; }
.fc-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: fc-pulse 2s ease-out infinite;
}
@keyframes fc-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.6); opacity: 0;   }
}
@media (max-width: 640px) {
  .fc-fab { width: 52px; height: 52px; bottom: 16px; }
  .fc-wa   { right: 16px; }
  .fc-call { left: 16px;  }
}
@media (hover: none) { .fc-tip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fc-fab, .fc-fab:hover { transition: none; transform: none; }
  .fc-wa::before { animation: none; display: none; }
}
/* Hide floating call/WhatsApp pills while the mobile drawer is open, so they
   don't sit on top of the drawer's "Request a Quote" CTA at 320–414px. */
body.nav-locked .fc-fab { display: none; }

/* =================================================================
   POLISH ADDITIONS — magnetic CTAs, ken-burns drift, map legend,
   counter typography. Pure additions; no override of earlier rules.
   ================================================================= */

/* Buttons that participate in the magnetic / parallax language need
   a transform-aware transition so the spring-back feels right. */
[data-magnetic],
.btn[data-magnetic] {
  transition: transform .35s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

/* Counter digits use tabular numerals so they don't wobble while
   counting up — only applied where the count is happening. */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* Touch-input minimum tap targets — applies on any pointer-coarse device
   regardless of viewport width (iPad portrait at 768px is still touch).
   The width-based .btn min-height inside @media (max-width: 720px) above
   covers small phones; this rule extends the floor to all touch hardware. */
@media (hover: none) and (pointer: coarse) {
  .filter-pill, .checkbox-pill span, .btn { min-height: 44px; }
  .footer-col a { display: inline-block; padding: 6px 0; }
  .footer-bottom a { display: inline-block; padding: 6px 0; }
}

/* Ken-Burns drift utility — slow infinite pan, applied by JS when an
   archive section enters view. Reduced-motion media query at the bottom
   short-circuits it back to a static state. */
.kb-drift {
  animation: kbDrift 18s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}
@keyframes kbDrift {
  from { transform: scale(1.02) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.06) translate3d( 1.2%,  0.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kb-drift { animation: none; transform: none; }
  [data-magnetic] { transition: none; transform: none !important; }
  [data-parallax] { transform: none !important; }
}

/* Older browsers (no backdrop-filter) — bump the legend background
   so the text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .map-legend { background: rgba(12, 12, 12, 0.55); }
}

/* =================================================================
   OVERFLOW / NARROW-VIEWPORT FIXES
   Long unbroken words ("steelconstruction", "info@finessesteelfab.com",
   "Decorative") clipped the right edge of their containers under 360px.
   Allow them to break mid-word as a last resort instead.
   ================================================================= */
.page-header h1,
.page-header .reveal h1,
.page-header p,
.page-header .lead {
  overflow-wrap: anywhere;
  word-break: normal;
}

.coords-info__line,
.coords-info p,
.coords-info a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Email addresses must always render on a single line — never wrap or
   break mid-character. Applies to every mailto link site-wide and any
   element explicitly marked .email-line (e.g. plain-text email on
   about.html). Overrides the narrow-viewport break rules above. */
a[href^="mailto:"],
.email-line {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* coords-map banner — at narrow widths the icon, text, and CTA need to
   wrap as defined rows, not collapse the text into a 1-char column.
   Lifted from V4's 640/380 media queries. */
@media (max-width: 640px) {
  .coords-map__banner {
    flex-wrap: wrap;
    padding: 18px 20px;
    gap: 14px;
  }
  .coords-map__banner-icon { width: 38px; height: 38px; }
  .coords-map__banner-text {
    flex: 1 1 calc(100% - 56px);
    font-size: 19px;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .coords-map__banner-cta {
    flex: 1 1 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 10.5px;
  }
}
@media (max-width: 380px) {
  .coords-map__banner-text { font-size: 17.5px; }
}

/* Services nav button — keep label + chevron on one line so a stray
   wrap never adds a sub-pixel overflow during transitions. */
.nav .nav-trigger { white-space: nowrap; }

/* beam-strengthening method grid — 4 cards. auto-fit was producing a
   3+1 orphan layout at tablet widths. Pin breakpoints explicitly:
   4 cols → 2×2 → 1×4. Cells outline themselves (no doubled borders). */
.method-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .method-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .method-grid { grid-template-columns: 1fr; }
}
.method-grid > * {
  border: 0 !important;
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  box-sizing: border-box;
}

/* =================================================================
   PROJECT IMAGE LIGHTBOX
   Click any image in .proj-row__images to view it full-size. JS in
   app.js handles open/close; this file owns the visual styling.
   ================================================================= */
.proj-row__images > a {
  cursor: zoom-in;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  background: rgba(12, 12, 12, 0.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox__img {
  /* Show the image fully, never crop — width and height both bounded
     to the viewport, object-fit: contain preserves the aspect ratio. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Strip any of the project filter treatments (sepia, contrast, etc.)
     so the lightbox shows the raw photo. */
  filter: none;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  background: var(--ink-bg);
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper-12);
  border: 1px solid var(--paper-35);
  color: var(--paper);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lightbox__close:hover {
  background: var(--paper);
  color: var(--ink);
  transform: scale(1.05);
}
.lightbox__close svg { width: 18px; height: 18px; }
body.lightbox-open {
  overflow: hidden;
}

/* Lightbox prev / next arrows */
.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10001;
  transition: background 180ms ease, transform 180ms ease;
}
.lightbox__nav:hover { background: rgba(0, 0, 0, 0.8); }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 640px) {
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__nav svg { width: 18px; height: 18px; }
}

/* Lightbox counter "3 / 50" */
.lightbox__counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  z-index: 10001;
  pointer-events: none;
}
.lightbox__counter[hidden] { display: none; }

/* "See more" toggle for archive grids */
.archive-grid[data-visible-initial]:not(.is-expanded) > a:nth-child(n+9) {
  display: none;
}
.see-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px auto 0;
  padding: 12px 22px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong, var(--ink));
  font: 500 12px/1 var(--font-mono, "Inter Tight", system-ui, sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.archive-section .see-more-btn {
  display: flex;
  width: fit-content;
  margin: 24px auto 0;
}
.see-more-btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}
.see-more-btn[aria-expanded="true"] {
  background: var(--ink);
  color: var(--paper);
}



/* -----------------------------------------------------------------
   62 · MIN FONT SIZE (TABLET & DESKTOP)
   -----------------------------------------------------------------
   Bumps every <12px mono/caption font up to 12px on viewports
   >= 721px. Mobile (<=720px) keeps the smaller, tighter caption
   scale defined above so dense labels still fit on a phone.
   Generated from a sweep of the file; covers eyebrow/meta/mono,
   stat labels, table headers, nav drawer chips, footer headings,
   form legends, project/archive captions, etc.
   ----------------------------------------------------------------- */
@media (min-width: 721px) {
  /* !important so inline style="font-size: ..." on table cells & inline
     spans in about.html / careers.html also get bumped on tablet+. */
  .eyebrow, .meta, .mono,
  .label,
  .spec-list,
  .btn,
  .glass-chip,
  .header-cta,
  .mega__label,
  .mega__num,
  .mega__feature-eyebrow,
  .mega__feature-cta,
  .mega__viewall,
  .trust__item small,
  .split-feature__cap,
  .stat__label,
  .service-card__num,
  .service-card__tag,
  .svc-card__num,
  .svc-card__tag,
  .capability__specs li,
  .process__num,
  .process__step p.meta,
  .project__meta,
  .project__overlay,
  .filter-pill,
  .archive-toolbar__count,
  .archive-section__num,
  .archive-section__count,
  .proj-row__cat,
  .proj-row__specs span,
  .page-header__crumb,
  .field label, .field legend,
  .checkbox-pill span,
  .field-file__hint,
  .reviews-summary__count,
  .reviews-summary__google,
  .review__date,
  .client-tile,
  .leader__role,
  .timeline__label,
  .equip thead th,
  .equip td.equip__cap,
  .cert-card__body .mono,
  .value__num,
  .process-line__num,
  .faq-source,
  .coords-map__compass-n,
  .coords-map__banner-cta,
  .footer-col h3, .footer-col h4,
  .footer-bottom,
  .nav.is-open > a, .nav.is-open .nav-trigger,
  .nav.is-open > .drawer-cta,
  .nav.is-open > .drawer-cta::after {
    font-size: 12px !important;
  }
  /* Inline font-size on table cells & careers.html spans, force to 12px */
  .equip td.equip__cap[style*="font-size"],
  .field-file__label span[style*="font-size"],
  ul[style] li > strong[style*="font-size"] {
    font-size: 12px !important;
  }
}

/* -----------------------------------------------------------------
   23 · TEXT COLOR UTILITIES (added 2026-05-19)
   Class-driven replacements for inline color overrides that used to
   live on individual HTML elements. Sweep done 2026-05-19; see
   MEMORY.md "Text color hierarchy" for the canonical rules.
   ----------------------------------------------------------------- */

/* Muted body paragraph — for bare <p> in light cards/two-up/success
   panels. On dark surfaces, snaps to the universal --paper-92 body tone. */
.text-muted { color: var(--ink-3); }
.section--dark .text-muted,
.hero .text-muted,
.split-feature .text-muted,
.site-footer .text-muted,
.coords-map__banner .text-muted { color: var(--paper-92); }

/* More-muted meta/label tone — slightly cooler than the default
   --ink-faint. On dark surfaces, drops to --paper-50 (most muted). */
.text-faint { color: var(--steel); }
.section--dark .text-faint,
.hero .text-faint,
.split-feature .text-faint,
.site-footer .text-faint,
.coords-map__banner .text-faint { color: var(--paper-50); }

/* Lead paragraphs on dark surfaces: deliberately a touch more muted
   than the universal --paper-92 body tone, because leads are supporting
   copy. Wins over .section--dark p (0,1,1) at 0,2,0. */
.section--dark .lead,
.hero .lead,
.split-feature .lead,
.site-footer .lead,
.coords-map__banner .lead { color: var(--paper-78); }

/* Amber-tone accents — used inside h1/h2 for highlighted phrases,
   inside <em> for italicized accents, and on .eyebrow for the
   form-success "Received" label. font-style:normal is bundled here
   so <em class="accent--amber"> doesn't render italic. */
.accent--amber   { color: var(--amber);   font-style: normal; }
.accent--amber-2 { color: var(--amber-2); font-style: normal; }

/* Apprenticeship-programme stage list (careers.html) —
   <ul class="stage-list"> ... <li><strong class="stage-num">06 MO</strong>
   <span><strong class="stage-name">…</strong>
   <span class="stage-desc">…</span></span></li> */
.stage-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.stage-list li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.stage-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--amber-2);
  padding-top: 6px;
}
.stage-name { display: block; font-size: 16px; margin-bottom: 4px; }
.stage-desc { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; display: block; }