/* ==========================================================================
   South East Roofing & Cladding — Industrial
   ==========================================================================

   Third site in this repo, and the one that has to look least like the other
   two. `south-east-roofing` is a light, rounded, domestic local-SEO site;
   `pwa-roofing` is graphite and orange. This one sells a commercial envelope
   package to main contractors, so it commits the other way: near-black navy
   ground, 4px radii instead of 16, condensed uppercase display type, and a
   single electric cyan doing all the pointing.

   Everything that separates this site from its siblings lives in :root. The
   component layer below is written against the tokens, so re-skinning is a
   :root edit — not a search and replace.

   Colour rules that are load-bearing, not taste:
     - cyan-400 is for large text, icons and rules on dark ground only. Body
       copy on dark uses --on-dark; cyan at 14px on #0c1220 is uncomfortable.
     - cyan-700 is the only cyan allowed on white (4.6:1).
     - hi-vis yellow is a CTA colour and nothing else. The moment it appears
       in a heading it stops meaning "click this".
   ========================================================================== */

:root {
  /* ---- ground ------------------------------------------------------- */
  --navy-975: #05080e;   /* deepest — footer, video scrim */
  --navy-950: #080d16;   /* page base on dark */
  --navy-900: #0c1220;   /* standard dark section */
  --navy-850: #111a2b;   /* elevated card on dark */
  --navy-800: #16233a;   /* floating card / hover */
  --navy-700: #223148;   /* hairline on dark */
  --navy-600: #33455f;

  /* ---- accent ------------------------------------------------------- */
  --cyan-700: #0072a3;   /* accessible cyan on white */
  --cyan-600: #0090cc;
  --cyan-500: #00a9e6;
  --cyan-400: #2ec8ff;   /* primary accent on dark */
  --cyan-300: #74dcff;
  --cyan-200: #a8ebff;
  --cyan-100: #d8f5ff;

  /* ---- call to action ----------------------------------------------- */
  --hivis-600: #a7bc00;
  --hivis-500: #c2da00;
  --hivis-400: #d7f205;
  --hivis-300: #e6ff4d;

  /* ---- light side ---------------------------------------------------- */
  --steel-300: #a9b8c6;
  --steel-200: #c6d2dd;
  --steel-100: #dde5ed;
  --mist-100: #eef2f6;
  --mist-050: #f6f8fa;
  --paper: #ffffff;

  /* ---- text ---------------------------------------------------------- */
  --ink-900: #0a1017;
  --ink-700: #33424f;
  --ink-500: #62717f;
  --ink-300: #93a1ad;
  --on-dark: #e8eff5;
  --on-dark-dim: #a6b7c6;   /* 8.4:1 on navy-900 — body copy, not decoration */

  /* ---- type ---------------------------------------------------------- */
  --f-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ---- geometry ------------------------------------------------------ */
  --r-card: 4px;
  --r-img: 6px;
  --r-tile: 3px;
  --r-pill: 2px;
  --wrap: 1360px;
  --header-h: 74px;

  /* ---- spacing scale ------------------------------------------------- */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* ---- motion -------------------------------------------------------- */
  --ease-spring: cubic-bezier(.2, .9, .3, 1);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --t-fast: .16s;
  --t-med: .3s;
  --t-slow: .6s;

  /* ---- depth --------------------------------------------------------- */
  /* layered and cyan-tinted; a flat black drop shadow reads as a 2012 card */
  --shadow-card:
    0 1px 1px rgba(5, 8, 14, .32),
    0 4px 10px -2px rgba(5, 8, 14, .3);
  --shadow-float:
    0 2px 4px rgba(5, 8, 14, .3),
    0 12px 28px -6px rgba(5, 8, 14, .5),
    0 24px 60px -20px rgba(0, 130, 190, .3);
  --shadow-btn:
    0 1px 2px rgba(5, 8, 14, .4),
    0 6px 18px -6px rgba(215, 242, 5, .45);
  --shadow-btn-cyan:
    0 1px 2px rgba(5, 8, 14, .4),
    0 6px 18px -6px rgba(46, 200, 255, .5);
  --shadow-light:
    0 1px 2px rgba(16, 33, 51, .06),
    0 8px 24px -8px rgba(16, 33, 51, .14);
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* iOS paints a grey box over anything tappable for ~300ms on touch. Every
     interactive element here already has its own :active state, so the system
     flash only muddies them. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--ink-700);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--ink-900);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

::selection { background: var(--cyan-400); color: var(--navy-975); }

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--hivis-400);
  color: var(--navy-975);
  padding: 12px 20px;
  font-weight: 600;
  font-family: var(--f-display);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   Layout utilities — a small hand-rolled layer, deliberately not Tailwind.
   The CDN build of Tailwind compiles in the browser and costs more CWV than
   this whole stylesheet.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.wrap--narrow { max-width: 900px; }

.sec { padding-block: var(--s-8); position: relative; }
.sec--tight { padding-block: var(--s-7); }
.sec--flush-top { padding-top: 0; }

.grid { display: grid; gap: var(--s-4); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.15fr; }

.flex { display: flex; }
.wrap-flex { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.g-1 { gap: var(--s-1); } .g-2 { gap: var(--s-2); } .g-3 { gap: var(--s-3); }
.g-4 { gap: var(--s-4); } .g-5 { gap: var(--s-5); } .g-6 { gap: var(--s-6); }

.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); }

.text-center { text-align: center; }
.relative { position: relative; }
.full { width: 100%; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   Type helpers
   ========================================================================== */

.h-xxl { font-size: clamp(2.75rem, 7.2vw, 5.75rem); letter-spacing: -.045em; }
.h-xl  { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.038em; }
.h-lg  { font-size: clamp(1.75rem, 3.2vw, 2.6rem); letter-spacing: -.032em; }
.h-md  { font-size: clamp(1.35rem, 2.1vw, 1.7rem); letter-spacing: -.026em; }
.h-sm  { font-size: 1.13rem; letter-spacing: -.018em; line-height: 1.25; }
.h-xs  { font-size: .98rem; letter-spacing: -.012em; line-height: 1.3; }

.lede {
  font-size: clamp(1.03rem, 1.35vw, 1.16rem);
  line-height: 1.72;
  color: var(--ink-700);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--cyan-700);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.muted { color: var(--ink-500); }
.accent { color: var(--cyan-700); }
.small { font-size: .88rem; }
.mono {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* text set on a dark ground */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark .lede, .on-dark p { color: var(--on-dark-dim); }
.on-dark .eyebrow { color: var(--cyan-400); }
.on-dark .muted { color: var(--on-dark-dim); }
.on-dark .accent { color: var(--cyan-400); }

/* the bright bit — a cyan gradient wordmark used once or twice per page */
.grad {
  background: linear-gradient(96deg, var(--cyan-300) 0%, var(--cyan-400) 42%, var(--cyan-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* the glow is what makes it read as lit rather than merely coloured */
  filter: drop-shadow(0 0 34px rgba(46, 200, 255, .34));
}
@supports not (background-clip: text) {
  .grad { color: var(--cyan-400); -webkit-text-fill-color: var(--cyan-400); }
}

/* ==========================================================================
   Section grounds
   ========================================================================== */

.sec--dark {
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(46, 200, 255, .1), transparent 62%),
    radial-gradient(760px 480px at 96% 108%, rgba(0, 114, 163, .14), transparent 66%),
    var(--navy-900);
  color: var(--on-dark);
}
.sec--darker { background: var(--navy-950); color: var(--on-dark); }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4,
.sec--darker h1, .sec--darker h2, .sec--darker h3, .sec--darker h4 { color: var(--on-dark); }
.sec--dark p, .sec--darker p { color: var(--on-dark-dim); }
.sec--dark .lede, .sec--darker .lede { color: var(--on-dark-dim); }
.sec--dark .eyebrow, .sec--darker .eyebrow { color: var(--cyan-400); }
.sec--dark .muted, .sec--darker .muted { color: var(--on-dark-dim); }
.sec--dark .accent, .sec--darker .accent { color: var(--cyan-400); }

.sec--light { background: var(--paper); }
.sec--alt {
  background:
    radial-gradient(700px 420px at 100% 0%, rgba(0, 169, 230, .07), transparent 60%),
    linear-gradient(180deg, var(--mist-050), var(--mist-100));
  border-block: 1px solid rgba(16, 33, 51, .07);
}

/* SVG noise. Without it the flat dark bands look like a rendering error on a
   good display; with it they read as a surface. */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* a hairline rule that fades out — used above section heads on dark */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--cyan-400), rgba(46, 200, 255, .12) 34%, transparent 72%);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--hivis-400);
  --btn-fg: var(--navy-975);
  --btn-bd: var(--hivis-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-display);
  font-size: .89rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition:
    transform var(--t-fast) var(--ease-spring),
    background-color var(--t-fast) linear,
    border-color var(--t-fast) linear,
    box-shadow var(--t-med) var(--ease-out);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-2px); --btn-bg: var(--hivis-300); --btn-bd: var(--hivis-300); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline-offset: 4px; }

.btn--sm { padding: 9px 16px; font-size: .78rem; }
.btn--lg { padding: 16px 30px; font-size: .95rem; }

.btn--cyan {
  --btn-bg: var(--cyan-500);
  --btn-fg: #00151f;
  --btn-bd: var(--cyan-500);
  box-shadow: var(--shadow-btn-cyan);
}
.btn--cyan:hover { --btn-bg: var(--cyan-400); --btn-bd: var(--cyan-400); }

/* outline on a dark ground */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  --btn-bd: rgba(228, 236, 243, .28);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  --btn-bg: rgba(46, 200, 255, .12);
  --btn-bd: var(--cyan-400);
  --btn-fg: #fff;
}

/* outline on a light ground */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: rgba(16, 33, 51, .22);
  box-shadow: none;
}
.btn--outline:hover { --btn-bd: var(--cyan-700); --btn-fg: var(--cyan-700); --btn-bg: rgba(0, 114, 163, .06); }

.btn--white { --btn-bg: #fff; --btn-fg: var(--navy-975); --btn-bd: #fff; box-shadow: var(--shadow-card); }
.btn--white:hover { --btn-bg: var(--cyan-100); --btn-bd: var(--cyan-100); }

.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cyan-700);
}
.on-dark .link-arrow, .sec--dark .link-arrow, .sec--darker .link-arrow,
.card--dark .link-arrow { color: var(--cyan-400); }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t-med) var(--ease-spring); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
}
.link-arrow--inline::after { display: none; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out),
    backdrop-filter var(--t-med) var(--ease-out);
}
.site-header.is-stuck,
.site-header.is-solid {
  background: rgba(8, 13, 22, .88);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--navy-700);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-stuck, .site-header.is-solid { background: var(--navy-950); }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}
/* Header mark.
   The supplied logo is a navy circular badge with the company name set inside
   it. At the 40px a header allows, that text is unreadable and the whole thing
   collapses to a white dot — so the header redraws the roof device from the
   logo as an SVG, at the logo's proportions, and the real artwork is used in
   the footer at 72px and as the favicon where it can actually be read. */
.brand__mark {
  width: 42px;
  height: 42px;
  flex: none;
  color: rgba(232, 239, 245, .45);
  transition: transform var(--t-med) var(--ease-spring), color var(--t-med) var(--ease-out);
}
.brand__mark svg { width: 100%; height: 100%; }
.brand:hover .brand__mark { transform: scale(1.06); color: var(--cyan-400); }

.brand__badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 4px 14px -4px rgba(0, 0, 0, .6);
  transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-out);
}
.brand__badge--lg { width: 72px; height: 72px; }
.brand:hover .brand__badge {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px var(--cyan-400), 0 6px 20px -4px rgba(46, 200, 255, .55);
}
.brand__name {
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  line-height: 1.1;
  color: #fff;
}
.brand__name-kicker {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cyan-400);
}
.brand__name b { font-size: .97rem; font-weight: 700; letter-spacing: -.02em; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav > a, .nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 0;
  background: none;
  font-family: var(--f-display);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--on-dark);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) linear;
}
.nav > a::after, .nav__trigger::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  background: var(--cyan-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-spring);
}
.nav > a:hover, .nav__trigger:hover,
.nav > a[aria-current="page"] { color: #fff; }
.nav > a:hover::after, .nav__trigger:hover::after,
.nav > a[aria-current="page"]::after,
.nav__item.is-open .nav__trigger::after { transform: scaleX(1); }
.nav__trigger svg { width: 12px; height: 12px; transition: transform var(--t-med) var(--ease-spring); }
.nav__item.is-open .nav__trigger svg { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 268px;
  padding: 8px;
  background: var(--navy-850);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition:
    opacity var(--t-med) var(--ease-out),
    transform var(--t-med) var(--ease-spring),
    visibility var(--t-med) linear;
}
.nav__item.is-open .nav__menu { opacity: 1; transform: none; visibility: visible; }
/* Hover-open lives here, not in site.js — see the comment on the dropdown
   block in that file. Gated on a real pointer so a tap on a touchscreen does
   not fire a phantom hover and leave the menu stuck open. */
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover .nav__menu { opacity: 1; transform: none; visibility: visible; }
}
.nav__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-tile);
  font-size: .87rem;
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.nav__menu a small {
  display: block;
  font-size: .74rem;
  color: var(--on-dark-dim);
  line-height: 1.45;
}
.nav__menu a:hover { background: rgba(46, 200, 255, .1); color: #fff; }
.nav__menu a:hover small { color: var(--cyan-200); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.header-phone {
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  font-size: .84rem;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(228, 236, 243, .24);
  border-radius: var(--r-tile);
  background: rgba(8, 13, 22, .5);
  color: var(--on-dark);
  cursor: pointer;
  transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.nav-toggle:hover { border-color: var(--cyan-400); background: rgba(46, 200, 255, .12); }
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-nav {
  display: none;
  padding: var(--s-3) var(--s-4) var(--s-5);
  background: var(--navy-950);
  border-top: 1px solid var(--navy-700);
  max-height: calc(100vh - var(--header-h));   /* fallback */
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav a {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--navy-800);
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--on-dark);
  text-decoration: none;
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav a.is-sub { padding-left: 18px; font-size: .92rem; color: var(--on-dark-dim); }
.mobile-nav .btn { margin-top: var(--s-3); }

/* A .btn inside the panel is a button, not a nav link. `.mobile-nav a` above is
 * one class more specific than `.btn`, so it wins every property they share —
 * and the one that matters is `color`. Left alone it paints the near-white link
 * colour onto the hi-vis yellow CTA: #e8eff5 on #d7f205 is 1.1:1, which is text
 * you cannot read. Restore the button's own foreground and its geometry. */
.mobile-nav a.btn {
  display: flex;
  padding: 14px 24px;
  /* Not `border-bottom: 0` — that removes the separator AND the bottom edge of
     .btn--ghost's own outline, leaving an open-bottomed box. Hand it back to the
     button: on the solid CTA this matches its background and disappears. */
  border-bottom: 1px solid var(--btn-bd);
  color: var(--btn-fg);
  font-size: .89rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------- photos in the menu
 * The gallery is a long way down the home page, so the menu carries a short
 * visual index into it. Thumbnails are a separate 300x200 set (assets/img/nav/)
 * — the gallery's own 1200px files are ~82 KB each and would cost half a
 * megabyte to open a menu. They are lazy and the panel is `hidden`, so nothing
 * is fetched until the burger is actually pressed. */
.mobile-nav__photos {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-800);
}
.mobile-nav__label {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan-400);
}
.mnav-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.mobile-nav .mnav-shots a {
  display: block;
  padding: 0;
  border-bottom: 0;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--navy-900);
}
.mnav-shots img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: opacity var(--t-fast) linear;
}
.mobile-nav .mnav-shots a:active img { opacity: .68; }
.mobile-nav a.mobile-nav__all {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 2px;
  border-bottom: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--cyan-400);
}
.mobile-nav__all svg { width: 16px; height: 16px; flex: none; }

@supports not (aspect-ratio: 3 / 2) {
  .mnav-shots img { height: 74px; }
}

/* the fixed right-hand quote tab, desktop only */
.side-tab {
  position: fixed;
  right: 0;
  top: 52%;
  z-index: 90;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  padding: 18px 11px;
  background: var(--hivis-400);
  color: var(--navy-975);
  font-family: var(--f-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 3px 3px;
  box-shadow: -4px 0 20px -6px rgba(215, 242, 5, .5);
  transition: background-color var(--t-fast) linear, padding var(--t-med) var(--ease-spring);
}
.side-tab:hover { background: var(--hivis-300); padding-inline: 14px; }

/* ==========================================================================
   Hero — full-bleed video, with the headline as the only bright thing on it
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(94vh, 880px);   /* fallback for Safari < 15.4 */
  min-height: min(94svh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--header-h) + var(--s-7));
  padding-bottom: 0;
  background: var(--navy-975);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the source clip is already monochrome; this deepens it so cyan is the
     only chroma above the fold */
  filter: grayscale(1) contrast(1.12) brightness(.62);
}
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-out); }
.hero__media video.is-playing { opacity: 1; }

/* The phone-sized clip has the grade above baked into the file by ffmpeg, so
 * the filter must come off or it is applied twice and the hero goes black.
 * Running grayscale+contrast+brightness per frame over a full-screen video is
 * also the single most expensive thing on the page for a mobile GPU — baking it
 * is what makes playing the video on a phone affordable at all. */
.hero__media video.is-baked { filter: none; }

/* three scrims, not one: a bottom ramp for the copy, a left ramp so the
   headline never sits on a bright roof, and a cyan wash for colour unity */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 8, 14, .78) 0%, rgba(5, 8, 14, .18) 26%, rgba(5, 8, 14, .5) 62%, rgba(5, 8, 14, .95) 100%),
    linear-gradient(96deg, rgba(5, 8, 14, .8) 0%, rgba(5, 8, 14, .25) 46%, transparent 78%);
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 700px at 12% 78%, rgba(0, 122, 176, .3), transparent 62%);
  mix-blend-mode: screen;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-bottom: var(--s-7);
  width: 100%;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 15px 7px 11px;
  margin-bottom: var(--s-4);
  border: 1px solid rgba(46, 200, 255, .34);
  border-radius: var(--r-pill);
  background: rgba(46, 200, 255, .09);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--f-display);
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan-200);
}
.hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hivis-400);
  box-shadow: 0 0 0 0 rgba(215, 242, 5, .7);
  animation: pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(215, 242, 5, .6); }
  70% { box-shadow: 0 0 0 9px rgba(215, 242, 5, 0); }
  100% { box-shadow: 0 0 0 0 rgba(215, 242, 5, 0); }
}

.hero__title {
  max-width: 17ch;
  margin: 0 0 var(--s-4);
  color: #fff;
  text-transform: uppercase;
  line-height: .96;
  text-wrap: balance;
}
.hero__title .grad { display: inline-block; }

.hero__lede {
  max-width: 54ch;
  margin-bottom: var(--s-5);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.68;
  color: #c6d5e2;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* the strip along the bottom of the hero: proof, not decoration */
.hero__bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(228, 236, 243, .16);
  background: rgba(5, 8, 14, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero__bar-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero__stat {
  padding: var(--s-4) var(--s-4);
  border-left: 1px solid rgba(228, 236, 243, .14);
}
.hero__stat:first-child { border-left: 0; padding-left: 0; }
.hero__stat-n {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
}
.hero__stat-n .u { color: var(--cyan-400); }
.hero__stat-l {
  margin-top: 6px;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--on-dark-dim);
}

/* inner-page hero: same language, no video */
.hero--page {
  min-height: 0;
  padding-top: calc(var(--header-h) + var(--s-7));
  padding-bottom: var(--s-7);
  background:
    radial-gradient(900px 520px at 78% -20%, rgba(46, 200, 255, .16), transparent 62%),
    radial-gradient(700px 460px at 0% 110%, rgba(0, 114, 163, .18), transparent 66%),
    var(--navy-950);
  justify-content: center;
}
.hero--page .hero__inner { padding-bottom: 0; }
.hero--page .hero__title { max-width: 22ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 var(--s-4);
  font-size: .8rem;
  color: var(--on-dark-dim);
}
.crumbs a { color: var(--cyan-400); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--navy-600); }

/* ==========================================================================
   Ticker — the project names that scroll under the hero
   ========================================================================== */

.ticker {
  position: relative;
  overflow: hidden;
  background: var(--navy-975);
  border-bottom: 1px solid var(--navy-800);
  padding-block: 15px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-inline: 26px;
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  white-space: nowrap;
}
.ticker__item::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-400);
  opacity: .75;
}
@keyframes ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ==========================================================================
   Statement band — one large claim, full bleed
   ========================================================================== */

.statement {
  position: relative;
  overflow: hidden;
  background: var(--navy-975);
  padding-block: var(--s-8);
}
.statement__mark {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  opacity: .07;
  color: var(--cyan-400);
  pointer-events: none;
}
.statement h2 {
  max-width: 22ch;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.02;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid rgba(16, 33, 51, .1);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-light);
}
.card--dark {
  background: var(--navy-850);
  border-color: var(--navy-700);
  box-shadow: var(--shadow-card);
  color: var(--on-dark-dim);
}
.card--dark h3, .card--dark h4 { color: var(--on-dark); }

.card--lift {
  transition:
    transform var(--t-med) var(--ease-spring),
    border-color var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
}
.card--lift:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 200, 255, .48);
  box-shadow: var(--shadow-float);
}
.card--lift:has(a:focus-visible) { border-color: var(--cyan-400); }

/* the numbered corner tag on process / spec cards */
.card__n {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 11px;
  background: rgba(46, 200, 255, .1);
  border-left: 1px solid var(--navy-700);
  border-bottom: 1px solid var(--navy-700);
  font-family: var(--f-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan-400);
}

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-tile);
  background: linear-gradient(150deg, rgba(46, 200, 255, .2), rgba(46, 200, 255, .05));
  border: 1px solid rgba(46, 200, 255, .3);
  color: var(--cyan-400);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile--light {
  background: linear-gradient(150deg, var(--cyan-100), #fff);
  border-color: rgba(0, 114, 163, .22);
  color: var(--cyan-700);
}

/* ==========================================================================
   Photos
   ========================================================================== */

.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-img);
  background: var(--navy-850);
  isolation: isolate;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* bottom scrim so any caption stays legible over any photo */
.photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(to top, rgba(5, 8, 14, .82), transparent);
  pointer-events: none;
}
/* a cyan multiply layer ties 36 phone photos shot in different weather into
   one set — without it the gallery looks like a camera roll */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 90, 140, .1), rgba(0, 45, 80, .2));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.photo--plain::before, .photo--plain::after { display: none; }

.photo__cap {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-3);
  z-index: 2;
  font-size: .82rem;
  color: #d6e3ee;
}
.photo__tag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(5, 8, 14, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(228, 236, 243, .2);
  font-family: var(--f-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cyan-300);
}

.photo-frame {
  position: relative;
  border-radius: var(--r-img);
}
/* a thin cyan bracket in one corner — a bit of engineering-drawing language */
.photo-frame::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -10px;
  width: 96px;
  height: 96px;
  border-left: 2px solid var(--cyan-400);
  border-bottom: 2px solid var(--cyan-400);
  opacity: .8;
  pointer-events: none;
}

/* ==========================================================================
   Service cards — image with the copy sitting on it (GeoRoof pattern,
   tightened up)
   ========================================================================== */

.svc {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-img);
  text-decoration: none;
  background: var(--navy-850);
  min-height: 380px;
  isolation: isolate;
}
.svc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturated, not darkened into mud. The work has to stay readable —
     these are the only photographs of it anyone will see. */
  filter: grayscale(.3) contrast(1.05) brightness(.9);
  transition: transform 1.1s var(--ease-out), filter var(--t-slow) var(--ease-out);
}
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 8, 14, .06) 0%, rgba(5, 8, 14, .34) 44%, rgba(5, 8, 14, .9) 88%, rgba(5, 8, 14, .96) 100%);
}
.svc__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: var(--s-5);
}
.svc__n {
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--cyan-400);
  margin-bottom: auto;
}
.svc h3 { color: #fff; margin-bottom: 10px; text-transform: uppercase; }
/* Shown at all times, not revealed on hover. A touch device has no hover, and
   a card whose only description is behind one is a card most visitors never
   read. Hover is reserved for the image, the rule and the arrow. */
.svc p {
  color: #c3d2df;
  font-size: .89rem;
  line-height: 1.58;
  margin-bottom: var(--s-3);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-display);
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan-400);
}
.svc__more svg { width: 15px; height: 15px; transition: transform var(--t-med) var(--ease-spring); }
/* the underline that grows across the bottom edge */
.svc__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan-400), var(--cyan-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-spring);
}
.svc:hover img, .svc:focus-visible img { transform: scale(1.05); filter: grayscale(0) contrast(1.05) brightness(1); }
.svc:hover .svc__more svg, .svc:focus-visible .svc__more svg { transform: translateX(5px); }
.svc:hover .svc__rule, .svc:focus-visible .svc__rule { transform: scaleX(1); }
.svc--tall { min-height: 480px; }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--navy-700);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--navy-850);
}
.stat {
  padding: var(--s-5) var(--s-4);
  border-right: 1px solid var(--navy-700);
}
.stat:last-child { border-right: 0; }
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__n .u { color: var(--cyan-400); }
.stat__l { margin-top: 8px; font-size: .84rem; color: var(--on-dark-dim); line-height: 1.45; }

/* ==========================================================================
   Client / accreditation strip
   ========================================================================== */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) var(--s-7);
}
.logos__item {
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.7vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  opacity: .72;
  transition: opacity var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.logos__item:hover { opacity: 1; color: #fff; }

.creds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}
.cred {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-pill);
  background: rgba(17, 26, 43, .7);
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.cred svg { width: 16px; height: 16px; color: var(--cyan-400); flex: none; }

/* ==========================================================================
   Project gallery
   ========================================================================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter {
  padding: 8px 15px;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  cursor: pointer;
  transition:
    border-color var(--t-fast) linear,
    color var(--t-fast) linear,
    background-color var(--t-fast) linear;
}
.filter:hover { color: #fff; border-color: var(--cyan-400); }
.filter[aria-pressed="true"] {
  background: var(--cyan-400);
  border-color: var(--cyan-400);
  color: var(--navy-975);
  font-weight: 700;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  /* Filtering hides tiles, which can strand a two-column tile with only one
     column left beside it. Dense backfills the hole instead of leaving a
     rectangle of empty page. */
  grid-auto-flow: dense;
}
.gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-img);
  background: var(--navy-850);
  cursor: zoom-in;
  isolation: isolate;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-spring);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.32) contrast(1.04) brightness(.94);
  transition: transform 1s var(--ease-out), filter var(--t-med) var(--ease-out);
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 42%, rgba(5, 8, 14, .88));
  opacity: .9;
  transition: opacity var(--t-med) var(--ease-out);
}
/* Captions are visible by DEFAULT, and only hidden-until-hover on devices that
   have a hover. They used to be hover-only for everyone, which meant that on a
   phone — where most of this gallery gets looked at — not one of the 35
   photographs was captioned until you tapped it. */
.shot__meta {
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 2;
  text-align: left;
  transition: transform var(--t-med) var(--ease-spring), opacity var(--t-med) var(--ease-out);
}
.shot__t {
  display: block;
  font-family: var(--f-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
}
.shot__s { display: block; font-size: .76rem; color: var(--cyan-300); margin-top: 2px; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.06); filter: grayscale(0) contrast(1.04) brightness(1); }
.shot__zoom {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(46, 200, 255, .18);
  border: 1px solid rgba(46, 200, 255, .45);
  color: var(--cyan-300);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-spring);
}
.shot__zoom svg { width: 15px; height: 15px; }

/* Hover is a progressive enhancement on top of the visible-by-default state
   above, not the thing that reveals it. */
@media (hover: hover) and (pointer: fine) {
  .shot__meta { transform: translateY(6px); opacity: 0; }
  .shot__zoom { opacity: 0; transform: scale(.85); }
  .shot:hover .shot__meta { transform: none; opacity: 1; }
  .shot:hover .shot__zoom { opacity: 1; transform: none; }
}
/* Keyboard users get the same reveal whatever the pointer type. */
.shot:focus-visible .shot__meta { transform: none; opacity: 1; }
.shot:focus-visible .shot__zoom { opacity: 1; transform: none; }

/* filter transitions, driven by site.js */
.shot.is-hidden { display: none; }
.shot.is-entering { opacity: 0; transform: scale(.97); }

/* The feature tiles that break the 3-up rhythm.
   3.06 rather than 3 because a two-column tile is two columns *plus the gap*
   wide, while its height must still match a single 3:2 tile beside it. Get
   this wrong by 3% and the row bottoms visibly fail to line up. */
.shot--wide { grid-column: span 2; aspect-ratio: 3.06; }
.shot--tall { grid-row: span 2; aspect-ratio: 0.729; }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding:
    max(clamp(12px, 3vw, 40px), env(safe-area-inset-top))
    max(clamp(12px, 3vw, 40px), env(safe-area-inset-right))
    max(clamp(12px, 3vw, 40px), env(safe-area-inset-bottom))
    max(clamp(12px, 3vw, 40px), env(safe-area-inset-left));
  background: rgba(3, 6, 11, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* stop a drag that reaches the end of the overlay from chaining into the
     page behind it */
  overscroll-behavior: contain;
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox.is-open { animation: fade .22s var(--ease-out); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__fig {
  position: relative;
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.lightbox__fig img {
  max-width: 100%;
  max-height: calc(100vh - 190px);   /* fallback */
  max-height: calc(100dvh - 190px);
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--r-img);
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9);
}
.lightbox__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  color: var(--on-dark);
}
.lightbox__cap b { font-family: var(--f-display); font-size: 1.02rem; letter-spacing: -.02em; }
.lightbox__cap span { font-size: .84rem; color: var(--cyan-300); }
.lightbox__count { font-size: .8rem; color: var(--on-dark-dim); font-variant-numeric: tabular-nums; }

.lightbox__btn {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 236, 243, .24);
  border-radius: 50%;
  background: rgba(8, 13, 22, .8);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--t-fast) linear, border-color var(--t-fast) linear, transform var(--t-fast) var(--ease-spring);
}
.lightbox__btn:hover { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--navy-975); transform: scale(1.06); }
.lightbox__btn svg { width: 19px; height: 19px; }
/* Kept clear of the iOS back-swipe zone, which owns roughly the first 20px of
   each screen edge — a button any closer than that gets a browser-back instead
   of a click about a third of the time. */
.lightbox__prev { left: max(clamp(6px, 2vw, 26px), calc(env(safe-area-inset-left) + 22px)); top: 50%; transform: translateY(-50%); position: fixed; }
.lightbox__next { right: max(clamp(6px, 2vw, 26px), calc(env(safe-area-inset-right) + 22px)); top: 50%; transform: translateY(-50%); position: fixed; }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__close {
  position: fixed;
  top: max(clamp(10px, 2vw, 26px), calc(env(safe-area-inset-top) + 8px));
  right: max(clamp(10px, 2vw, 26px), calc(env(safe-area-inset-right) + 8px));
}

/* Scroll lock.
   `overflow: hidden` on <body> alone does not hold on iOS — Safari keeps
   scrolling the document behind the overlay, and the reading position is lost
   on close. site.js pins the body with position:fixed and a negative top equal
   to the scroll offset, then restores it; these declarations are the CSS half
   of that. */
body.is-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ==========================================================================
   Before / after
   ========================================================================== */

.ba {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-img);
  aspect-ratio: 3 / 2;
  background: var(--navy-850);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: ew-resize;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba__after {
  -webkit-clip-path: inset(0 0 0 var(--pos, 50%));
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--cyan-400);
  box-shadow: 0 0 24px rgba(46, 200, 255, .7);
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan-400);
  color: var(--navy-975);
  box-shadow: 0 6px 24px -6px rgba(46, 200, 255, .8);
}
.ba__grip svg { width: 22px; height: 22px; }
.ba__tag {
  position: absolute;
  z-index: 2;
  bottom: var(--s-3);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(5, 8, 14, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.ba__tag--before { left: var(--s-3); }
.ba__tag--after { right: var(--s-3); color: var(--cyan-300); }
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 56px; }
.ba__range::-moz-range-thumb { width: 56px; height: 56px; border: 0; }
.ba:has(.ba__range:focus-visible) { outline: 2px solid var(--cyan-400); outline-offset: 3px; }

/* ==========================================================================
   Process steps
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.step { position: relative; padding-top: var(--s-4); border-top: 1px solid var(--navy-700); }
.step__n {
  font-family: var(--f-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--cyan-400);
  margin-bottom: var(--s-2);
}
.step h3 { margin-bottom: 10px; }
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--cyan-400);
}

/* ==========================================================================
   Sector list — a dense two-column index of what they build on
   ========================================================================== */

.sectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); }
.sector {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(16, 33, 51, .1);
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ink-900);
}
.sector svg { width: 18px; height: 18px; color: var(--cyan-700); flex: none; }
.sector span { margin-left: auto; font-family: var(--f-body); font-size: .8rem; color: var(--ink-500); font-weight: 400; }
.on-dark .sector, .sec--dark .sector { color: var(--on-dark); border-bottom-color: var(--navy-700); }
.on-dark .sector svg, .sec--dark .sector svg { color: var(--cyan-400); }
.on-dark .sector span, .sec--dark .sector span { color: var(--on-dark-dim); }

/* ==========================================================================
   Testimonial
   ========================================================================== */

.quote { max-width: 24ch; }
.quote__mark {
  font-family: var(--f-display);
  font-size: 5rem;
  line-height: .6;
  color: var(--cyan-400);
  opacity: .35;
}
.quote blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.028em;
  color: var(--on-dark);
  max-width: 22ch;
}
.quote figcaption { margin-top: var(--s-4); font-size: .88rem; color: var(--on-dark-dim); }
.quote figcaption b { display: block; color: var(--on-dark); font-family: var(--f-display); }

/* ==========================================================================
   Coverage map
   ========================================================================== */

.map-shell {
  position: relative;
  height: clamp(380px, 52vh, 560px);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--navy-850);
}
#coverage-map { position: absolute; inset: 0; }
/* recolour OSM raster tiles to sit inside the palette instead of fighting it */
.leaflet-tile-pane {
  filter: grayscale(1) invert(1) brightness(.72) contrast(1.1) hue-rotate(178deg) saturate(1.7);
}
.leaflet-container { background: var(--navy-900) !important; font-family: var(--f-body) !important; }
.leaflet-control-attribution {
  background: rgba(5, 8, 14, .72) !important;
  color: var(--on-dark-dim) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--cyan-400) !important; }
.leaflet-bar a {
  background: var(--navy-850) !important;
  color: var(--on-dark) !important;
  border-color: var(--navy-700) !important;
}
.leaflet-bar a:hover { background: var(--navy-800) !important; }

.map-pin {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.map-pin__dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(46, 200, 255, .22), 0 0 14px rgba(46, 200, 255, .8);
}
.map-pin__l {
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .95);
}
.map-pin--hq .map-pin__dot { background: var(--hivis-400); box-shadow: 0 0 0 3px rgba(215, 242, 5, .22), 0 0 16px rgba(215, 242, 5, .9); }

.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  text-align: center;
  color: var(--on-dark-dim);
}

.map-key { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: .82rem; color: var(--on-dark-dim); }
.map-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }

.region-list { columns: 3; column-gap: var(--s-6); list-style: none; }
.region-list li {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  padding: 7px 0 7px 18px;
  position: relative;
  font-size: .92rem;
  color: var(--on-dark-dim);
}
.region-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 7px;
  height: 1px;
  background: var(--cyan-400);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid rgba(16, 33, 51, .1); }
.faq__item { border-bottom: 1px solid rgba(16, 33, 51, .1); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink-900);
  cursor: pointer;
}
.faq__q:hover { color: var(--cyan-700); }
.faq__i {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 33, 51, .18);
  border-radius: 50%;
  transition: transform var(--t-med) var(--ease-spring), border-color var(--t-fast) linear;
}
.faq__i svg { width: 12px; height: 12px; }
.faq__q[aria-expanded="true"] .faq__i { transform: rotate(45deg); border-color: var(--cyan-700); color: var(--cyan-700); }
.faq__a { padding-bottom: var(--s-4); max-width: 76ch; color: var(--ink-700); }

.on-dark .faq, .sec--dark .faq { border-top-color: var(--navy-700); }
.on-dark .faq__item, .sec--dark .faq__item { border-bottom-color: var(--navy-700); }
.on-dark .faq__q, .sec--dark .faq__q { color: var(--on-dark); }
.on-dark .faq__q:hover, .sec--dark .faq__q:hover { color: var(--cyan-400); }
.on-dark .faq__i, .sec--dark .faq__i { border-color: var(--navy-600); }
.on-dark .faq__a, .sec--dark .faq__a { color: var(--on-dark-dim); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--navy-975);
  isolation: isolate;
}
.cta-band__media { position: absolute; inset: 0; z-index: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.4); }
.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(5, 8, 14, .94) 8%, rgba(5, 8, 14, .55) 62%, rgba(5, 8, 14, .8)),
    radial-gradient(700px 420px at 18% 50%, rgba(0, 122, 176, .34), transparent 64%);
}
.cta-band__inner { position: relative; z-index: 1; padding-block: var(--s-8); }
.cta-band h2 { color: #fff; text-transform: uppercase; max-width: 18ch; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-tile);
  background: rgba(8, 13, 22, .6);
  color: var(--on-dark);
  font-family: var(--f-body);
  /* 16px exactly, and not a pixel less. iOS Safari zooms the whole page in
     when a focused field's text is under 16px, and it does not zoom back out
     afterwards — the visitor is left scrolled sideways inside a form they were
     halfway through filling in. This one value is the single biggest mobile
     bug the form had. */
  font-size: 1rem;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: #56677a; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(46, 200, 255, .16);
}
.field select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 40px;
  /* the native arrow goes with appearance:none, so put one back — a select
     that looks like a text input is a select nobody opens */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ec8ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
}
.field select option { background: var(--navy-850); }
.field__hint { font-size: .78rem; color: var(--on-dark-dim); }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.note {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--hivis-400);
  border-radius: 0 var(--r-tile) var(--r-tile) 0;
  background: rgba(215, 242, 5, .07);
  font-size: .86rem;
  color: var(--on-dark-dim);
}
.note b { color: var(--hivis-300); }

/* The enquiry form's inline outcome. Colour alone does not carry the meaning —
   each state is also a distinct sentence, and the element is a live region. */
.form-result {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--navy-600);
  border-radius: 0 var(--r-tile) var(--r-tile) 0;
  background: rgba(22, 35, 58, .7);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--on-dark);
}
.form-result:focus-visible { outline-offset: 0; }
.form-result.is-ok { border-left-color: var(--hivis-400); background: rgba(215, 242, 5, .09); }
.form-result.is-error { border-left-color: #ff6b5a; background: rgba(255, 107, 90, .1); }
.form-result.is-pending { border-left-color: var(--cyan-400); background: rgba(46, 200, 255, .08); }

/* ==========================================================================
   Contact tiles
   ========================================================================== */

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--navy-700);
}
.contact-row:last-child { border-bottom: 0; }
.contact-row h3 { font-size: .96rem; margin-bottom: 3px; }
.contact-row a { color: var(--cyan-400); text-decoration: none; }
.contact-row a:hover { text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-975);
  border-top: 1px solid var(--navy-800);
  padding-block: var(--s-8) var(--s-5);
  color: var(--on-dark-dim);
}
.site-footer h4 {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: var(--s-3);
}
.footer-lead {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: #fff;
  max-width: 20ch;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 9px; }
.footer-links a {
  font-size: .9rem;
  color: var(--on-dark-dim);
  text-decoration: none;
  transition: color var(--t-fast) linear;
}
.footer-links a:hover { color: var(--cyan-400); }
.footer-bot {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-800);
  font-size: .82rem;
}
.footer-bot a { color: var(--on-dark-dim); }
.footer-bot a:hover { color: var(--cyan-400); }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-tile);
  color: var(--on-dark-dim);
  transition: border-color var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-fast) var(--ease-spring);
}
.socials a:hover { border-color: var(--cyan-400); color: var(--cyan-400); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-spring);
}
/* stagger children of a revealed grid */
.reveal.is-in > * { animation: rise .7s var(--ease-spring) backwards; }
.reveal.is-in > *:nth-child(2) { animation-delay: .07s; }
.reveal.is-in > *:nth-child(3) { animation-delay: .14s; }
.reveal.is-in > *:nth-child(4) { animation-delay: .21s; }
.reveal.is-in > *:nth-child(5) { animation-delay: .28s; }
.reveal.is-in > *:nth-child(6) { animation-delay: .35s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal--nostagger.is-in > * { animation: none; }

html:not(.js) .reveal, .no-js .reveal { opacity: 1; transform: none; }
html:not(.js) .reveal > *, .no-js .reveal > * { animation: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-phone { display: none; }
  .gallery--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --s-8: 76px; --s-9: 96px; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: var(--s-5); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-list { columns: 2; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--navy-700); }
  .statement__mark { opacity: .05; right: -140px; }
}

@media (max-width: 860px) {
  :root { --s-8: 64px; --header-h: 66px; }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery, .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-tab { display: none; }
  .hero { min-height: min(88vh, 720px); min-height: min(88svh, 720px); }
  .hero__bar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stat { padding: var(--s-3) var(--s-3); }
  .hero__stat:first-child, .hero__stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero__stat:nth-child(3), .hero__stat:nth-child(4) { border-top: 1px solid rgba(228, 236, 243, .14); }
  .sectors { grid-template-columns: 1fr; }
  .photo-frame::before { width: 62px; height: 62px; }
}

@media (max-width: 620px) {
  :root { --s-7: 48px; --s-8: 56px; }
  .cols-2, .cols-3, .cols-4, .cols-6 { grid-template-columns: 1fr; }
  /* The gallery deliberately does NOT collapse to one column. Thirty-five
     full-width photographs is a page nobody reaches the bottom of; two columns
     halves the scroll, and tapping any tile opens it full-screen anyway. */
  .gallery, .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shot--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
  .shot--tall { grid-row: span 1; aspect-ratio: 3 / 2; }
  .shot__meta { left: 10px; right: 10px; bottom: 10px; }
  .shot__t { font-size: .82rem; }
  .shot__s { font-size: .7rem; }
  .shot__zoom { display: none; }
  .steps { grid-template-columns: 1fr; }
  .region-list { columns: 1; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--navy-700); }
  .stat:last-child { border-bottom: 0; }
  .hero__title { max-width: none; }
  .btn { width: 100%; }
  .btn--sm, .header-actions .btn { width: auto; }
  /* Brand + CTA + burger will not fit across 390px, and what gets pushed off
     the end is the burger — i.e. the whole nav. The CTA is duplicated at the
     foot of the mobile menu, so it is the one that goes. */
  .header-actions .btn:not(.nav-toggle) { display: none; }
  .logos { gap: var(--s-3) var(--s-5); }
  /* Prev/next sat at bottom:18px, which is inside the 34px home-indicator
     swipe zone on every notched iPhone — the system ate roughly one tap in
     three. Lifted clear of it, and of the inset when there is one. */
  .lightbox__prev, .lightbox__next {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 46px);
    transform: none;
  }
  .lightbox__prev:hover, .lightbox__next:hover { transform: scale(1.06); }
  .lightbox__fig img { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); }
}

/* Small phones — iPhone SE and friends at 320-400px. Without this they get the
   620px layout, and the hero headline alone fills the screen. */
@media (max-width: 400px) {
  :root { --s-6: 40px; --s-7: 40px; --s-8: 48px; }
  .wrap { padding-inline: 18px; }
  .h-xxl { font-size: clamp(2.1rem, 11vw, 2.9rem); }
  .h-xl { font-size: clamp(1.75rem, 8.5vw, 2.3rem); }
  .h-lg { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .hero__eyebrow { font-size: .66rem; letter-spacing: .12em; padding: 6px 12px 6px 9px; }
  .hero__stat-n { font-size: 1.35rem; }
  .hero__stat-l { font-size: .72rem; }
  .brand__name b { font-size: .88rem; }
  .brand__name-kicker { font-size: .56rem; }
  .gallery, .gallery--4 { gap: 8px; }
  .card { padding: var(--s-4); }
}

/* Landscape phones. The viewport is under ~450px tall, which is shorter than
   several things that were sized for a portrait screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 0; padding-block: calc(var(--header-h) + var(--s-5)) var(--s-5); }
  .hero__bar { display: none; }
  /* the 380px floor was taller than the whole viewport */
  .map-shell { height: 78vh; min-height: 260px; }
  .mobile-nav { max-height: calc(100vh - var(--header-h)); }
  .lightbox__fig img { max-height: calc(100vh - 96px); max-height: calc(100svh - 96px); }
  .lightbox__cap { font-size: .78rem; }
  .lightbox__prev, .lightbox__next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
}

/* ==========================================================================
   Touch
   Everything here is about the finger, not the screen width — a 1024px tablet
   needs it and a 500px-wide desktop window does not. Apple and WCAG 2.5.8 both
   put the minimum target at 44px; the defaults above sit between 22px and 42px.
   ========================================================================== */

@media (pointer: coarse) {
  .nav-toggle { width: 46px; height: 46px; }
  /* a <button> does not inherit body's line-height — it gets UA `normal`,
     roughly 1.2 — so the padding has to do more work here than it looks */
  .filter { padding: 14px 18px; line-height: 1.2; }
  .filters { gap: 10px; }
  .btn--sm { padding: 13px 18px; }
  .socials a { width: 44px; height: 44px; }
  .brand { padding-block: 4px; }
  .footer-links li { margin-bottom: 0; }
  .footer-links a { display: inline-block; padding-block: 11px; }
  .footer-bot a { display: inline-block; padding-block: 12px; }
  .crumbs { gap: 10px; }
  .crumbs a { display: inline-block; padding-block: 12px; }
  .contact-row a { display: inline-block; padding-block: 11px; }
  /* the phone number in the footer address block */
  .site-footer address a { display: inline-block; padding-block: 12px; }
  .nav__menu a { padding: 13px 12px; }
  .link-arrow { padding-block: 12px; }
  .mobile-nav a { padding-block: 15px; }
  /* Leaflet ships 30px zoom buttons, which are a miss with a thumb */
  .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  /* the fixed header and the menu under it both have to clear a notch */
  .site-header__bar { padding-left: max(var(--s-4), env(safe-area-inset-left)); padding-right: max(var(--s-4), env(safe-area-inset-right)); }
  .mobile-nav { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
}

/* Belt and braces for the gallery: every tile's height comes from
   aspect-ratio, and its <img> is height:100%, so if aspect-ratio were ever
   dropped the tiles would collapse to nothing and the gallery would render as
   an empty page rather than a degraded one. */
@supports not (aspect-ratio: 3 / 2) {
  .shot, .ba { min-height: 220px; }
  .shot--wide { min-height: 260px; }
}

/* ==========================================================================
   Reduced motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .hero__media video { display: none; }
}

@media print {
  .site-header, .side-tab, .ticker, .lightbox, .nav-toggle, .hero__media { display: none !important; }
  body { background: #fff; color: #000; }
}