/* Linfox Distribution Centre
   Layout concept: the dock face. A long horizontal rhythm of red facade, black data bars
   (taken from the build film's lower thirds) and yellow floor lane markings, on concrete and white.
   Brand: official Linfox palette and Arial only (Linfox brand guidelines, December 2025). */

:root {
  /* Colour: official palette plus screen tints */
  --red: #BE2228;          /* Linfox Red, Pantone 7621 C */
  --red-deep: #9C1A20;     /* hover and pressed state */
  --yellow: #FFF200;       /* Yellow C */
  --black: #000000;        /* Process Black C */
  --grey: #BBBBBB;         /* Cool Grey 4 C */
  --ink: #111214;          /* running text on light grounds */
  --soft: #55585C;         /* supporting copy on light grounds */
  --concrete: #F1F2F2;     /* cool grey tint, alternate sections */
  --rule: #D7D8D9;         /* hairlines on light grounds */
  --paper: #FFFFFF;
  --ice: #1CB5D9;          /* chamber colour used in the source layout diagram */
  --on-dark-soft: #B5B7BA; /* supporting copy on black */
  --rule-dark: #2A2B2E;

  /* Type: Arial only, ten whole-pixel tokens */
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --fs-display: 88px;  /* hero headline            */
  --fs-title:   56px;  /* section heading          */
  --fs-figure:  48px;  /* stat numerals            */
  --fs-h2:      32px;  /* panel heading, rep name  */
  --fs-h3:      22px;  /* card and pillar heading  */
  --fs-h4:      20px;  /* lead paragraph           */
  --fs-body:    17px;  /* running copy             */
  --fs-sm:      15px;  /* nav, buttons, list copy  */
  --fs-meta:    13px;  /* tag, caption, label      */
  --fs-micro:   12px;  /* chip meta, credits       */

  --gutter: clamp(16px, 5vw, 64px);
  --header-h: 76px;
  --section-y: clamp(72px, 9vw, 136px);
  --max: 1320px;
}

@media (max-width: 1024px) {
  :root { --fs-display: 64px; --fs-title: 44px; --fs-figure: 40px; --fs-h2: 28px; --header-h: 68px; }
}
@media (max-width: 640px) {
  :root { --fs-display: 44px; --fs-title: 34px; --fs-figure: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 18px; --fs-body: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--paper);
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--black); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--yellow); color: var(--black); font-weight: 700; font-size: var(--fs-sm);
  padding: 12px 16px; text-decoration: none;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Type system: heading, lead, copy ---------- */
h1, h2 { font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 0.96; }
h2 { font-size: var(--fs-title); line-height: 1.02; max-width: 17ch; }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h4 { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lead { font-size: var(--fs-h4); line-height: 1.5; color: var(--ink); max-width: 58ch; }
.copy { font-size: var(--fs-body); color: var(--soft); max-width: 62ch; }
.kicker { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.note { font-size: var(--fs-meta); color: var(--soft); max-width: 46ch; }

/* Tag: the black and yellow label bar from the build film */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--black); color: var(--yellow);
  padding: 7px 12px 7px 7px; line-height: 1.2;
}
.tag::before { content: ""; width: 10px; height: 10px; background: var(--yellow); flex: none; }
.tag-yellow { background: var(--yellow); color: var(--black); }
.tag-yellow::before { background: var(--black); }

.section { padding-block: var(--section-y); }
.section-concrete { background: var(--concrete); }
.section-dark { background: var(--black); color: var(--paper); }
.section-dark .lead { color: var(--paper); }
.section-dark .copy { color: var(--on-dark-soft); }
.section-red { background: var(--red); color: var(--paper); }
.section-red .lead { color: var(--paper); }
.section-red .tag { background: var(--black); }

.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .tag { justify-self: start; }
.section-head-row { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 24px 48px; }
.section-head-row > div { display: grid; gap: 20px; justify-items: start; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.01em; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-red { background: var(--red); color: var(--paper); }
.btn-red:hover { background: var(--red-deep); }
.btn-yellow { background: var(--yellow); color: var(--black); }
.btn-yellow:hover { background: var(--paper); }
.btn-black { background: var(--black); color: var(--paper); }
.btn-black:hover { background: var(--red); }
.btn-ghost { border-color: rgba(255,255,255,.8); color: var(--paper); background: rgba(0,0,0,.2); }
.btn-ghost:hover { background: var(--paper); color: var(--black); }
.btn-outline { border-color: currentColor; background: transparent; }
.btn-outline:hover { background: var(--black); border-color: var(--black); color: var(--paper); }
.btn-block { width: 100%; }
.btn-meta { font-size: var(--fs-micro); font-weight: 700; opacity: .75; letter-spacing: 0.08em; }
.arrow { width: 16px; height: 12px; flex: none; position: relative; transition: transform .18s ease; }
.arrow::before { content: ""; position: absolute; left: 0; right: 2px; top: 5px; height: 2px; background: currentColor; }
.arrow::after { content: ""; position: absolute; right: 1px; top: 1px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.btn:hover .arrow { transform: translateX(4px); }
.text-link {
  background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
  border-bottom: 3px solid var(--yellow);
}
.text-link:hover { border-bottom-color: var(--red); }

/* Icon: official Linfox glyphs, tinted through a mask */
.icon {
  display: inline-block; width: 40px; height: 40px; flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand img { width: 88px; height: auto; }
.brand-name {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-left: 2px solid var(--black); padding-left: 14px; line-height: 1.25; max-width: 13ch;
}
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav a:not(.btn) {
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none; padding: 10px 12px;
  border-bottom: 3px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--rule); }
.site-nav a.is-current { border-bottom-color: var(--yellow); }
.nav-cta { margin-left: 12px; min-height: 46px; }
.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 10px;
  background: var(--black); color: var(--paper); border: 0; min-height: 44px; padding: 0 16px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 18px; height: 2px; background: var(--yellow); position: relative; transition: transform .2s ease;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; left: 0; right: 0; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--paper); overflow-y: auto;
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--rule);
  }
  .site-nav:not(.is-open) { display: none; }
  .site-nav a:not(.btn) { font-size: var(--fs-h3); padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .site-nav a.is-current { border-bottom-color: var(--rule); box-shadow: inset 4px 0 0 var(--yellow); padding-left: 16px; }
  .nav-cta { margin: 24px 0 0; min-height: 56px; }
}
@media (max-width: 520px) { .brand-name { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: var(--paper); background: var(--black);
  min-height: min(calc(100svh - var(--header-h)), 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,0) 72%),
    linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 45%);
}
.hero-body { display: grid; gap: 24px; justify-items: start; padding-top: clamp(64px, 10vh, 120px); padding-bottom: 28px; }
.hero h1 { max-width: 11ch; }
.hero .lead { color: var(--paper); max-width: 46ch; }
.hero .actions { margin-top: 8px; }
.hero-body > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-body > :nth-child(2) { animation-delay: .06s; }
.hero-body > :nth-child(3) { animation-delay: .12s; }
.hero-body > :nth-child(4) { animation-delay: .18s; }
@keyframes rise { from { transform: translateY(24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-body > * { animation: none; } }

.hero-credit {
  display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-bottom: 14px;
  font-size: var(--fs-micro); color: rgba(255,255,255,.85);
}
.media-toggle {
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.6); color: var(--paper);
  font-size: var(--fs-micro); font-weight: 700; padding: 6px 10px; cursor: pointer;
}
.media-toggle:hover { background: var(--black); }

.factbar { background: var(--black); border-top: 4px solid var(--yellow); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact {
  display: flex; flex-direction: column-reverse; gap: 6px; justify-content: flex-end;
  padding: 22px 24px 24px; border-left: 1px solid var(--rule-dark);
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact dt { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.fact dd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fig { font-size: var(--fs-figure); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig small { font-size: .55em; letter-spacing: 0; }
[data-count] { display: inline-block; text-align: right; }
.unit { font-size: var(--fs-sm); font-weight: 700; color: var(--yellow); }
@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--rule-dark); }
}
@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero-body { padding-top: 160px; }
  .hero-video { object-position: 58% center; transform: scale(1.12); transform-origin: 50% 100%; } /* zoom from the base so the ponds above the roof leave the frame */
  .hero-media::after { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.25) 100%); }
  .fact { padding: 16px 14px 18px; }
  .fact:nth-child(even) { padding-right: 0; }
}

/* ---------- Facility ---------- */
.facility {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.facility-text { display: grid; gap: 20px; justify-items: start; }
.facility-photo { position: relative; }
.facility-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
figcaption { font-size: var(--fs-micro); color: var(--soft); margin-top: 10px; }
.section-dark figcaption { color: var(--on-dark-soft); }
.pillars {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--black); margin-top: clamp(16px, 3vw, 40px);
}
.pillar { display: grid; gap: 12px; align-content: start; padding: 32px 32px 8px 0; }
.pillar + .pillar { padding-left: 32px; border-left: 1px solid var(--rule); }
.pillar .icon { color: var(--red); width: 44px; height: 44px; }
@media (max-width: 900px) {
  .facility { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar, .pillar + .pillar { padding: 24px 0; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--rule); }
}

/* ---------- Temperature zones ---------- */
.zones { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.zone-list { display: grid; border-top: 1px solid var(--rule-dark); }
.zone {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-dark);
  padding: 15px 14px 15px 10px; cursor: pointer; color: var(--on-dark-soft);
  box-shadow: inset 0 0 0 transparent; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.zone:hover { background: #101113; color: var(--paper); }
.zone[aria-checked="true"] { color: var(--paper); background: #141518; box-shadow: inset 4px 0 0 var(--yellow); }
.zone-name { font-size: var(--fs-sm); font-weight: 700; }
.zone-temp { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.swatch { width: 14px; height: 14px; }
.swatch-cold { background: var(--ice); }
.swatch-ambient { background: var(--red); }
.swatch-mezz { background: var(--yellow); }
.zone-view { display: grid; gap: 20px; }
.plan { position: relative; background: #DCE3E8; }
.plan img { width: 100%; }
.hotspot {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer; padding: 0;
}
.hotspot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px rgba(0,0,0,.45);
}
.hotspot:hover { border-color: var(--black); }
/* One callout at a time, styled after the labels in the source layout diagram */
.plan-leader { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plan-leader line { stroke: var(--paper); stroke-width: 2; filter: drop-shadow(0 0 1px rgba(0,0,0,.7)); transition: stroke-dashoffset .35s ease .12s; }
.plan-callout {
  position: absolute; left: 0; top: 0; z-index: 3; display: grid; min-width: 11.5em; pointer-events: none;
  text-transform: uppercase; font-weight: 700; line-height: 1.2; filter: drop-shadow(0 3px 8px rgba(0,0,0,.28));
}
.callout-name { background: var(--paper); color: var(--black); font-size: var(--fs-sm); text-align: right; padding: 6px 10px; }
.callout-bar {
  position: relative; margin-left: 14%; display: flex; justify-content: flex-end; align-items: center;
  min-height: 26px; padding: 4px 10px 4px 34px; background: var(--ice); color: var(--black); font-size: var(--fs-meta);
}
.callout-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: var(--black); }
.plan-callout[data-kind="ambient"] .callout-bar { background: var(--red); color: var(--paper); }
.plan-callout[data-kind="mezz"] .callout-bar { background: var(--yellow); }
.plan-callout.is-in { animation: callout-in .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes callout-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .plan-callout.is-in { animation: none; } .plan-leader line { transition: none; } }
.hotspot.is-active { border: 3px solid var(--red); box-shadow: 0 0 0 4px rgba(255,242,0,.9); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(190,34,40,.55), 0 0 0 4px rgba(255,242,0,.9); } 100% { box-shadow: 0 0 0 18px rgba(190,34,40,0), 0 0 0 4px rgba(255,242,0,.9); } }
@media (prefers-reduced-motion: reduce) { .hotspot.is-active { animation: none; } }
.scale { margin: 0; }
.scale svg { width: 100%; height: auto; }
#scale-range { transition: x .35s ease, width .35s ease; }
@media (max-width: 640px) {
  /* SVG units shrink with the drawing; restate them so labels stay near 12 to 14px on a phone */
  .scale-ticks text { font-size: 22px; }
  .scale-ticks .tick-minor { display: none; }
  #scale-label { font-size: 26px; }
  .hotspot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .hotspot::before { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .plan-callout { min-width: 9.5em; }
  .callout-name { font-size: var(--fs-meta); padding: 4px 8px; }
  .callout-bar { min-height: 20px; padding: 2px 8px 2px 24px; font-size: var(--fs-micro); }
  .callout-bar::before { width: 16px; }
}
@media (max-width: 900px) {
  .zones { grid-template-columns: minmax(0, 1fr); }
  .zone-view { order: -1; }
  .zone-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .zone { grid-template-columns: 12px minmax(0, 1fr); row-gap: 2px; padding: 12px 8px 12px 10px; }
  .zone .swatch { grid-row: span 2; width: 12px; height: 12px; }
  .zone-temp { font-size: var(--fs-meta); }
}

/* ---------- Specifications ---------- */
.specs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.specs-intro {
  display: grid; gap: 20px; justify-items: start;
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 32px);
}
.requests { display: grid; gap: 12px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--rule); }
.request-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 4px; }
.spec-list { border-top: 2px solid var(--black); }
.spec {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.spec dt { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); padding-top: 4px; }
.spec dd { font-size: var(--fs-h4); font-weight: 700; line-height: 1.4; }
@media (max-width: 900px) {
  .specs { grid-template-columns: minmax(0, 1fr); }
  .specs-intro { position: static; }
}
@media (max-width: 520px) {
  .spec { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
}

/* ---------- Inside band ---------- */
.inside {
  position: relative; color: var(--paper); background: var(--black);
  min-height: clamp(380px, 62vh, 680px); display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate;
}
.inside-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.inside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 55%); }
.inside-body { display: flex; flex-wrap: wrap; gap: 16px 64px; padding-bottom: 20px; }
.inside-stat { display: grid; gap: 6px; }
.inside-stat .fig { font-size: var(--fs-display); }
.inside-stat span:last-child { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); }

/* ---------- Services tabs ---------- */
.tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--black); margin-bottom: clamp(28px, 4vw, 48px);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  padding: 16px 22px; background: none; border: 0; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 700; color: var(--soft); white-space: nowrap;
}
.tab .icon { width: 26px; height: 26px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--black); color: var(--yellow); }
.panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.panel-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.panel-photo-contain img { object-fit: contain; background: var(--paper); }
.panel-text { display: grid; gap: 16px; justify-items: start; }
.panel-text h3 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.panel-text h4 { margin-top: 12px; }
.ticks { display: grid; gap: 10px; width: 100%; }
.ticks li {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; align-items: baseline;
  font-size: var(--fs-sm); padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.ticks li::before { content: ""; width: 10px; height: 10px; background: var(--red); transform: translateY(1px); }
@media (max-width: 900px) { .panel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Build story ---------- */
.film { position: relative; background: #0B0B0C; border: 1px solid var(--rule-dark); }
.film video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0B0B0C; }
.phases {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0;
  border-left: 1px solid var(--rule-dark);
}
.phase {
  width: 100%; height: 100%; display: grid; gap: 6px; text-align: left; align-content: start;
  background: none; border: 0; border-right: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark);
  border-top: 4px solid transparent; padding: 16px 16px 18px; cursor: pointer; color: var(--on-dark-soft);
}
.phase:hover { color: var(--paper); background: #101113; }
.phase.is-current { border-top-color: var(--yellow); color: var(--paper); }
.phase-no { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; color: var(--yellow); }
.phase-name { font-size: var(--fs-sm); font-weight: 700; }
@media (max-width: 900px) { .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Location ---------- */
.location { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.location-text { display: grid; gap: 20px; justify-items: start; }
.access { display: grid; width: 100%; border-top: 2px solid var(--black); }
.access li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-weight: 700; font-size: var(--fs-sm); }
.access .icon { width: 30px; height: 30px; color: var(--red); }
.site-address { font-style: normal; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--soft); }
.site-address strong { color: var(--ink); }
.route { margin: 0; }
.route svg { width: 100%; height: auto; }
/* Live map: a fixed ratio box. Before it loads, a spacer with the same ratio sets the height, and the
   box grows past it only when the consent card needs more room (phones), so loading the map does not shift the page */
.map { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--concrete); }
.map.is-live { display: block; aspect-ratio: 21 / 8; min-height: 320px; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Consent state: a drawn street grid with the DC marker where two roads cross, so the panel reads as a map without calling Google */
.map-consent {
  --mx: 64%; --my: 42%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 320px;
  background-color: var(--concrete);
  background-image:
    linear-gradient(90deg, transparent calc(var(--mx) - 8px), var(--paper) calc(var(--mx) - 8px), var(--paper) calc(var(--mx) + 8px), transparent calc(var(--mx) + 8px)),
    linear-gradient(180deg, transparent calc(var(--my) - 8px), var(--paper) calc(var(--my) - 8px), var(--paper) calc(var(--my) + 8px), transparent calc(var(--my) + 8px)),
    linear-gradient(152deg, transparent calc(50% - 5px), var(--paper) calc(50% - 5px), var(--paper) calc(50% + 5px), transparent calc(50% + 5px)),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    linear-gradient(180deg, var(--rule) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 56px 56px, 56px 56px;
}
.map-consent::before { content: ""; grid-area: 1 / 1; aspect-ratio: 21 / 8; }
.map-pin {
  position: absolute; left: var(--mx); top: var(--my); transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 64px; height: 64px;
  background: var(--red); color: var(--paper); box-shadow: 0 0 0 6px rgba(190, 34, 40, .18);
}
.map-pin .icon { width: 36px; height: 36px; }
.map-card {
  grid-area: 1 / 1; align-self: end; justify-self: start; position: relative;
  display: grid; gap: 14px; justify-items: start; max-width: 460px;
  margin: clamp(16px, 3vw, 32px); padding: clamp(20px, 3vw, 32px);
  background: var(--paper); border-top: 4px solid var(--red);
}
.map-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.map-card .note:empty { display: none; }
@media (max-width: 900px) {
  .location { grid-template-columns: minmax(0, 1fr); }
  .map.is-live, .map-consent::before { aspect-ratio: 4 / 3; }
}
/* Phones: marker on top, card below it, so the card never covers the marker */
@media (max-width: 640px) {
  .map-consent { --mx: 50%; --my: 72px; }
  .map-card { align-self: start; justify-self: stretch; max-width: none; margin-top: 136px; }
}

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); grid-auto-flow: dense; gap: 12px; }
.gallery li { min-width: 0; }
.g-wide { grid-column: span 2; grid-row: span 2; }
.g-tall { grid-row: span 2; }
.g-item {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--black); overflow: hidden;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.g-item:hover img { transform: scale(1.04); opacity: .9; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 30vw, 220px); } }
@media (max-width: 900px) { .section-head-row { grid-template-columns: minmax(0, 1fr); } }

.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(0,0,0,.94); color: var(--paper);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0,0,0,.6); }
.lightbox-figure {
  display: grid; gap: 12px; justify-items: center;
  padding: calc(64px + env(safe-area-inset-top, 0px)) max(72px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(72px, env(safe-area-inset-left, 0px));
}
.lightbox-figure img { max-height: calc(100vh - 180px); width: auto; object-fit: contain; }
.lightbox figcaption { color: var(--paper); font-size: var(--fs-meta); font-weight: 700; margin: 0; }
.lb-close {
  position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--yellow); color: var(--black); border: 0; font-weight: 700; font-size: var(--fs-sm); padding: 10px 16px; cursor: pointer;
}
.lb-btn {
  position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border: 0; cursor: pointer;
  background: var(--black); color: var(--paper); border: 1px solid #3A3C3F;
}
.lb-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; }
.lb-prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.lb-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.lb-next { right: max(12px, env(safe-area-inset-right, 0px)); }
.lb-next::after { transform: translate(-70%, -50%) rotate(45deg); }
.lb-btn:hover { background: var(--red); }
@media (max-width: 640px) {
  .lightbox-figure { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .lb-btn { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0; }
}

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-text { display: grid; gap: 20px; justify-items: start; }
.contact h2 { max-width: 13ch; }
.rep { display: grid; gap: 6px; width: 100%; margin-top: 12px; padding-top: 24px; border-top: 2px solid var(--paper); }
.break { overflow-wrap: anywhere; }
.copy-btn {
  flex: none; background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,.7);
  font-size: var(--fs-micro); font-weight: 700; padding: 6px 10px; cursor: pointer;
}
.copy-btn:hover { background: var(--paper); color: var(--red); }
.office { font-style: normal; font-size: var(--fs-sm); line-height: 1.6; margin-top: 18px; }
.office strong { display: block; font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }

.enquiry { background: var(--paper); color: var(--ink); padding: clamp(24px, 4vw, 44px); border-top: 6px solid var(--yellow); }
#enquiry-form { display: grid; gap: 22px; }
.field-group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.field-group legend, .field label {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; margin-bottom: 8px;
}
.optional { font-weight: 400; letter-spacing: 0.04em; color: var(--soft); text-transform: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; min-width: 0; }
.field label { display: block; }
.field input, .field textarea {
  width: 100%; min-width: 0; font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--paper); border: 2px solid var(--grey); border-radius: 0; padding: 12px 14px; min-height: 50px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 3px var(--yellow); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--black); }
.segmented label { position: relative; display: block; }
.segmented label + label { border-left: 2px solid var(--black); }
.segmented input, .chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span {
  display: flex; align-items: center; justify-content: center; text-align: center; height: 100%;
  min-height: 52px; padding: 8px 10px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; line-height: 1.25;
}
.segmented input:checked + span { background: var(--black); color: var(--yellow); }
.segmented input:focus-visible + span, .chips input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--black); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  border: 2px solid var(--grey); font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.chips span::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--grey); flex: none; }
.chips input:checked + span { border-color: var(--black); background: var(--yellow); }
.chips input:checked + span::before { background: var(--black); border-color: var(--black); }
.form-error { color: var(--red); font-weight: 700; font-size: var(--fs-sm); }
.form-note { font-size: var(--fs-meta); color: var(--soft); }
.form-note a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.draft { display: grid; gap: 16px; }
.draft h3 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
.draft-meta { display: grid; border-top: 2px solid var(--black); }
.draft-meta > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.draft-meta dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); padding-top: 2px; }
.draft-meta dd { font-weight: 700; min-width: 0; }
.draft-body {
  margin: 0; font-family: var(--font); font-size: var(--fs-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--concrete); padding: 18px; max-height: 360px; overflow: auto;
}
.draft-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.draft-actions .text-link { margin-left: 8px; }
@media (max-width: 1024px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .segmented { grid-template-columns: minmax(0, 1fr); }
  .segmented label + label { border-left: 0; border-top: 2px solid var(--black); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--on-dark-soft); font-size: var(--fs-sm); padding-bottom: env(safe-area-inset-bottom, 0px); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; padding-block: 64px 40px; }
.footer-brand { display: grid; gap: 18px; justify-items: start; }
.footer-brand img { width: 110px; }
.footer-brand p { color: var(--paper); font-weight: 700; }
.footer-label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 12px; }
.footer-links { display: grid; gap: 8px; }
.footer-links a, .footer-legal a, .to-top { color: var(--paper); text-decoration: none; font-weight: 700; }
.footer-links a:hover, .footer-legal a:hover, .to-top:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid var(--rule-dark); font-size: var(--fs-meta); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 900px) { .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.footer-legal a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 4px; }

/* ---------- Legal page (privacy.html) ---------- */
.legal-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.legal-actions .back-link {
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none; padding: 10px 12px;
  border-bottom: 3px solid transparent;
}
.legal-actions .back-link:hover { border-bottom-color: var(--rule); }
.legal-actions .btn { min-height: 46px; }

.legal-hero { background: var(--black); color: var(--paper); padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px); }
.legal-hero .wrap { display: grid; gap: 24px; justify-items: start; }
.legal-hero h1 { font-size: var(--fs-title); line-height: 1.02; }
.legal-hero .lead { color: var(--paper); max-width: 62ch; }
.legal-meta { font-size: var(--fs-meta); color: var(--on-dark-soft); }

.legal-body {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start;
  gap: 48px 80px; padding-block: clamp(56px, 7vw, 104px);
}
.legal-toc { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 32px); display: grid; gap: 12px; }
.legal-toc ol { display: grid; counter-reset: toc; }
.legal-toc a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr);
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; text-decoration: none; color: var(--soft); padding: 7px 0;
}
.legal-toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-size: var(--fs-micro); color: var(--red); padding-top: 2px; }
.legal-toc a:hover { color: var(--ink); }

.legal-article { display: grid; gap: clamp(48px, 5vw, 64px); max-width: 760px; counter-reset: sec; }
.legal-article section { display: grid; gap: 16px; scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px); }
.legal-article h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; max-width: none; }
.legal-article section > h2 { display: grid; gap: 10px; }
.legal-article section > h2::before {
  counter-increment: sec; content: counter(sec, decimal-leading-zero);
  font-size: var(--fs-meta); letter-spacing: 0.12em; color: var(--red);
}
.legal-article h3 { margin-top: 8px; }
.legal-article p, .legal-list li { color: var(--soft); max-width: 68ch; }
.legal-article strong { color: var(--ink); }
.legal-article a { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Bullet: the yellow and black square from the tag */
.legal-list { display: grid; gap: 10px; }
.legal-list li { position: relative; padding-left: 26px; }
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px;
  background: var(--yellow); box-shadow: inset 0 0 0 2px var(--black);
}

.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--rule); }
.legal-table th:last-child, .legal-table td:last-child { padding-right: 0; }
.legal-table thead th {
  font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 2px solid var(--black); padding-block: 0 10px;
}
.legal-table td { color: var(--soft); }
.legal-table td:first-child { color: var(--ink); font-weight: 700; width: 34%; }
.legal-table td:nth-child(2) { width: 26%; }

.legal-rights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.legal-rights li { background: var(--paper); padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.legal-rights h3 { margin: 0; }
.legal-rights p { font-size: var(--fs-sm); }
.legal-ref { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }

.legal-contact { background: var(--black); color: var(--paper); padding: clamp(28px, 4vw, 44px); display: grid; gap: 16px; justify-items: start; }
.legal-contact p:not(.tag) { color: var(--on-dark-soft); }
.legal-contact dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 28px; margin-top: 8px; font-size: var(--fs-sm); width: 100%; }
.legal-contact dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); padding-top: 3px; }
.legal-contact dd { color: var(--paper); }
.legal-contact a { color: var(--paper); text-decoration-color: var(--yellow); }

@media (max-width: 900px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .legal-toc { position: static; border: 1px solid var(--rule); padding: 20px 24px; }
  .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 700px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: auto; }
  .legal-table tr { padding-block: 18px; border-bottom: 1px solid var(--rule); }
  .legal-table tr:first-child { border-top: 2px solid var(--black); }
  .legal-table td, .legal-table td:first-child, .legal-table td:nth-child(2) { border: 0; padding: 0; width: auto; }
  .legal-table td[data-label]::before {
    content: attr(data-label); display: block; margin-top: 12px;
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  }
  .legal-rights { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .legal-actions .back-link { display: none; }
  .legal-toc ol { grid-template-columns: minmax(0, 1fr); }
  .legal-contact dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .legal-contact dd + dt { margin-top: 12px; }
}