/* =========================================================
   COPPER & FLOW — DESIGN TOKENS
   ========================================================= */
:root {
  --navy-950: #07131F;
  --navy-900: #0B1B2A;
  --navy-850: #102434;

  --ivory-100: #F3EFE7;
  --ivory-50: #FAF8F3;

  --slate-500: #66727D;
  --slate-300: #AAB2B8;

  --copper-shadow: #60351F;
  --copper-dark: #92502E;
  --copper-main: #B96839;
  --copper-highlight: #D88C56;

  --brass-shadow: #76501F;
  --brass-main: #C6923E;
  --brass-highlight: #E2BB63;

  --white: #FFFFFF;

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: Inter, Arial, Helvetica, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 96px;
  --space-9: 120px;
  --space-10: 160px;

  --content-max: 1440px;
  --copy-max: 68ch;
  --narrow-copy-max: 52ch;

  --page-pad: 48px;
  --section-space: 140px;
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 80px;
}

@media (max-width: 1439px) {
  :root { --page-pad: 40px; }
}
@media (max-width: 1023px) {
  :root { --page-pad: 32px; --section-space: 88px; }
}
@media (max-width: 767px) {
  :root { --page-pad: 20px; --section-space: 72px; }
}
@media (max-width: 360px) {
  :root { --page-pad: 16px; }
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy-950);
  color: var(--ivory-100);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
svg { display: block; }

html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.section-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(48px, 5.5vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-highlight);
  margin-bottom: var(--space-2);
}
.demo-notice {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--slate-300);
  opacity: 0.85;
  margin-top: var(--space-2);
}
.section--light .demo-notice { color: var(--slate-500); }

/* =========================================================
   LAYOUT
   ========================================================= */
.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.section { position: relative; padding-top: var(--section-space); padding-bottom: var(--section-space); scroll-margin-top: var(--header-h); }
.section--dark { background: var(--navy-950); color: var(--ivory-100); }
.section--light { background: var(--ivory-100); color: var(--navy-950); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--copper-main);
  color: var(--navy-950);
  padding: 12px 20px;
  z-index: 1000;
  font-weight: 700;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

:focus-visible {
  outline: 3px solid var(--copper-highlight);
  outline-offset: 2px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: transform 180ms var(--ease-editorial), background-color 180ms, color 180ms, border-color 180ms;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--copper-main);
  color: var(--navy-950);
}
.btn--primary:hover { background: var(--copper-highlight); transform: translateY(-2px); }
.btn--secondary {
  background: transparent;
  color: var(--ivory-100);
  border-color: var(--copper-main);
}
.section--light .btn--secondary { color: var(--navy-950); border-color: var(--copper-dark); }
.btn--secondary:hover { background: rgba(185, 104, 57, 0.12); transform: translateY(-2px); }

/* =========================================================
   PIPE SVG (shared, JS-populated) & DIVIDER
   ========================================================= */
.pipe-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.divider {
  overflow: hidden;
  width: 100%;
  height: 200px;
  background: var(--navy-950);
}
/* Stage A.2H: the master route asset is rendered at NATIVE 1:1 scale
   (copper-flow-divider-master.svg's own viewBox matches .divider__tile
   below), the same way Projects/Services render their own inline pipe
   SVGs, so pipe thickness and fitting size read the same across the
   whole site instead of one section's artwork being stretched larger
   than the rest. That decouples "how wide the pipe composition looks"
   from "how far the animation has to travel to cover the viewport":
   full-width coverage and a seamless loop come from repeating a fixed
   tile in index.html, not from scaling the artwork to fit.

   Stage A.2I: the tile shrank from 1050px to 520px (shorter straight
   runs, tighter overall composition) and the route now runs edge-to-edge
   at the shared baseline with no end caps at the tile boundaries, so
   consecutive tiles connect as one continuous pipe with no visible gap.
   index.html repeats ten of these tiles so the track still comfortably
   outlasts wide viewports with a spare tile to loop into. */
.divider__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: divider-scroll 8s linear infinite;
  will-change: transform;
}
.divider__tile { width: 520px; height: 200px; object-fit: none; flex-shrink: 0; }
@keyframes divider-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-520px); }
}

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 350ms var(--ease-editorial);
}
.intro[data-hide] { opacity: 0; }
.intro[hidden] { display: none; }
/* Stage A.2L: the pipe used to be a small fixed-size decoration
   sitting BESIDE the wordmark in a flex row. It is now a full-viewport
   background layer (sized/positioned by buildIntroPipe() in
   js/main.js from the wordmark's own real measured position, never a
   guessed box) that spirals in behind the business name, so it needs
   its own stacking context below the text rather than sharing a flex
   row with it. */
.intro__pipe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.intro__composition {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

/* Progressive construction: every straight run draws along its own
   length (stroke-dashoffset) and every fitting (elbow) fades in once
   the pipe reaches it, in strict build order -- buildIntroPipe() (js/
   main.js) tags each segment intro__seg / intro__seg--fitting in the
   order it is physically laid down (spiralling inward, entry run
   first) and sets its own transition-delay/duration and initial
   stroke-dasharray/dashoffset as inline styles, since the spiral's
   segment count and each leg's length are computed at runtime rather
   than fixed -- these rules just say WHAT changes on reveal, not
   when. Once revealed, a segment's opacity/dashoffset only ever moves
   toward "visible" and never back, so nothing already drawn
   disappears. */
.intro__seg line {
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
  /* Root-cause fix: the reveal rule below (".intro[data-stage=pipe]
     .intro__seg line") matches every line in the SVG the instant
     data-stage flips to "pipe", not just the one whose own delay has
     elapsed. With opacity excluded from transition-property, that
     unconditionally set opacity:1 for every not-yet-drawn line at that
     same instant, while its stroke-dashoffset stayed fully retracted
     pending its own transition-delay -- a fully-opaque, zero-length,
     round-capped stroke still paints a small dot at its start point.
     Confirmed directly on the live page (element-elimination test):
     hiding leg 4's highlight line removed the dot; restoring it on a
     fresh load brought the dot back. Including opacity here ties its
     reveal to the same per-line transition-delay/duration as
     stroke-dashoffset (both set inline in buildIntroPipe()), so a line
     only starts becoming visible at the exact instant it starts
     drawing. */
  opacity: 0;
  transition-property: stroke-dashoffset, opacity;
  transition-timing-function: var(--ease-editorial);
}
.intro__seg--fitting { opacity: 0; transition-property: opacity; transition-timing-function: var(--ease-editorial); }
.intro[data-stage="pipe"] .intro__seg--fitting,
.intro[data-stage="type"] .intro__seg--fitting,
.intro[data-stage="hold"] .intro__seg--fitting,
.intro[data-stage="out"] .intro__seg--fitting { opacity: 1; }
.intro[data-stage="pipe"] .intro__seg line,
.intro[data-stage="type"] .intro__seg line,
.intro[data-stage="hold"] .intro__seg line,
.intro[data-stage="out"] .intro__seg line { stroke-dashoffset: 0; opacity: 1; }

.intro__type { opacity: 0; transition: opacity 350ms var(--ease-editorial); }
.intro[data-stage="type"] .intro__type,
.intro[data-stage="hold"] .intro__type,
.intro[data-stage="out"] .intro__type { opacity: 1; }
.intro__wordmark {
  font-family: var(--font-display);
  color: var(--ivory-100);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 0.95;
  text-transform: uppercase;
}
.intro__amp { color: var(--copper-main); }
.intro__tagline {
  color: var(--copper-highlight);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(7, 19, 31, 0.72);
  backdrop-filter: blur(0px);
  transition: background-color 220ms var(--ease-editorial), backdrop-filter 220ms var(--ease-editorial), box-shadow 220ms;
}
.site-header[data-scrolled] {
  background: rgba(7, 19, 31, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(185, 104, 57, 0.18);
}
.site-header__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.brand { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.brand__mark { width: 34px; height: 34px; }
.brand__word {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ivory-100);
  white-space: nowrap;
}
.brand__amp { color: var(--copper-main); }
.nav { margin-left: var(--space-4); flex: 1; }
.nav__list { display: flex; gap: var(--space-4); }
.nav__list a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivory-100);
  padding: 8px 0;
  position: relative;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--copper-main);
  transition: right 200ms var(--ease-editorial);
}
.nav__list a:hover::after { right: 0; }
.nav__cta { flex-shrink: 0; min-height: 44px; padding: 0 22px; }
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ivory-100);
  transition: transform 220ms var(--ease-editorial), opacity 220ms;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 400;
  background: var(--navy-950);
  padding: var(--space-6) var(--page-pad);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 260ms var(--ease-editorial), opacity 260ms var(--ease-editorial);
}
.mobile-menu[data-open] { transform: translateY(0); opacity: 1; }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px);
  text-transform: uppercase;
  color: var(--ivory-100);
}

@media (max-width: 1023px) {
  .nav, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* Final Responsive QA: at the narrow end of the desktop-nav range
   (1024-1199px) the five nav links at their default 32px gap / 13px
   size no longer fit .nav's available width alongside the brand and
   CTA button, so individual links wrapped to 2-3 lines inside the
   fixed-height header. Nothing about the 1024px breakpoint itself
   changes -- the desktop nav still takes over at exactly 1024px, only
   its own spacing tightens until 1200px+ restores the original
   values, which is where the unmodified rule above already fits on
   one line. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .site-header__inner { gap: 24px; }
  .nav__list { gap: 12px; }
  .nav__list a { font-size: 12px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--space-8); }
.hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.hero__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(74px, 8.5vw, 150px);
  line-height: 0.88;
}
.hero__line { display: block; }
.hero__line--ivory { color: var(--ivory-100); }
.hero__line--copper { color: var(--copper-main); }
.hero__sub {
  max-width: var(--narrow-copy-max);
  color: var(--slate-300);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.6;
  margin-top: var(--space-4);
}
.hero__actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }
.hero__media { position: relative; border-radius: 4px; overflow: hidden; min-height: 420px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; min-height: 0; }
  .hero__media img { aspect-ratio: 16 / 10; height: auto; }
}

/* Desktop's clamp() minimum (74px) is too large once the viewport itself
   drops below ~600px -- it no longer scales down with 8.5vw and clips.
   Give small/standard mobile its own ceiling+floor so the headline always
   fits the actual content width instead of relying on overflow-x:hidden. */
@media (max-width: 599px) {
  .hero__headline { font-size: clamp(30px, 13vw, 52px); }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services__pipe-wrap { position: relative; margin-top: var(--space-8); padding-top: var(--space-7); }
.services__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
.services__item { padding-top: var(--space-5); text-align: center; }
.services__item h3 {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1);
}
.services__item p { font-size: 13px; color: var(--slate-300); line-height: 1.55; }

/* Finalisation QA: the 2-column state that used to live here (768-1023px)
   put 6 items across 3 rows while the pipe route was still a single-row
   horizontal spine, so a branch drop for a lower row ran straight through
   the row above it. Collapsed into the same stacked/vertical-spine
   treatment as mobile, at the same 1023px threshold js/main.js now uses
   to choose buildVerticalSpine() -- see renderAllPipes(). */
@media (max-width: 1023px) {
  .services__pipe-wrap { padding-top: 0; padding-left: var(--space-6); }
  .services__list { grid-template-columns: 1fr; gap: var(--space-5); }
  .services__item { text-align: left; padding-top: 0; padding-left: var(--space-4); }
}

/* =========================================================
   TRUST
   ========================================================= */
.trust__copy { max-width: var(--copy-max); color: var(--slate-500); margin-top: var(--space-3); font-size: clamp(16px, 1.1vw, 19px); }
.trust__pipe-wrap { position: relative; margin-top: var(--space-8); padding-top: var(--space-7); }
.trust__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.trust__item { padding-top: var(--space-5); text-align: center; }
.trust__num { display: block; font-family: var(--font-display); color: var(--copper-main); font-size: 14px; margin-bottom: var(--space-1); }
.trust__label { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(20px, 2vw, 30px); }

@media (max-width: 767px) {
  .trust__pipe-wrap { padding-top: 0; padding-left: var(--space-6); }
  .trust__list { grid-template-columns: 1fr; gap: var(--space-5); }
  .trust__item { text-align: left; padding-top: 0; padding-left: var(--space-4); }
}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects__composition { position: relative; }
.projects__heading { position: relative; z-index: 1; width: fit-content; }
.projects__pipe { z-index: 0; }
.projects__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-9); padding-top: var(--space-7); }

.project { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-7); align-items: center; }
.project:nth-child(even) { grid-template-columns: 1fr 1.3fr; }
.project:nth-child(even) .project__media { order: 2; }
.project:nth-child(even) .project__label { order: 1; text-align: right; }
.project:nth-child(even) .project__label .project__title { margin-left: auto; }

.project__media { display: block; width: 100%; border: 0; background: none; }
.project__media img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.project__label { width: fit-content; }
.project:nth-child(even) .project__label { margin-left: auto; }
.project__number {
  display: block;
  font-family: var(--font-display);
  color: var(--copper-main);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
}
.project__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.02;
  margin-top: var(--space-1);
}

@media (max-width: 1023px) {
  .project, .project:nth-child(even) { grid-template-columns: 1fr; }
  .project:nth-child(even) .project__media { order: -1; }
  .project:nth-child(even) .project__label { text-align: left; margin-left: 0; }
  .project:nth-child(even) .project__label .project__title { margin-left: 0; }
  /* reserve a clear left gutter for the simplified mobile/tablet pipe trunk
     so it never runs beside/through photography or wraps under numbering */
  .projects__list { padding-left: var(--space-6); gap: var(--space-7); }
  /* Final correction: buildProjectsRouteStacked() (js/main.js) routes the
     first branch's initial horizontal jog at headSouth.y + MIN_JOG_CLEAR
     (~147px below the composition top) before it turns down into the
     left-gutter trunk -- that jog needs to complete above the first
     project photograph, not through it. The desktop-inherited padding-top
     (--space-7, 80px) only reserved ~124px above the photo, so the jog
     crossed roughly 23px into the image at every stacked width (confirmed
     directly at 375-768px, not just one width).

     Spacing-rhythm follow-up: --space-9 (120px) cleared the jog but left
     only ~17px of visible breathing room between the pipe and the photo,
     while the photo-to-label gap below stayed at the desktop .project gap
     (--space-7, 80px) -- a value meant as the desktop side-by-side
     column-gap, inherited unchanged as a vertical row-gap once .project
     collapses to a single column here, not a deliberate mobile choice.
     --space-10 restores a clear, intentional gap above the photo; the
     .project override below gives the photo-to-label gap its own
     deliberate mobile value instead of the leftover desktop one, so the
     photo reads as centred in the space between pipe and label rather
     than pinned to the pipe with a void beneath it. */
  .projects__list { padding-top: var(--space-10); }
  .project { gap: var(--space-5); }
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
/* padding-left reserves the route column: widened from --space-7 (80px)
   so the canonical kit's larger elbow (ELBOW_RO ~30px vs the old hand-drawn
   ~10.5px fitting) has room for a genuine orthogonal jog between the two
   trunk x-positions without the fitting bodies overlapping or intruding
   into the copy column -- see PipeKit._dims.MIN_JOG_CLEAR in buildHowRoute(). */
.how__pipe-wrap { position: relative; margin-top: var(--space-8); padding-left: 148px; }
@media (max-width: 767px) {
  /* below 768px the route simplifies to a single straight trunk (see
     buildHowRoute()'s mobileQuery check in js/main.js), so it no longer
     needs room for a sideways jog between two elbows */
  .how__pipe-wrap { padding-left: var(--space-6); }
}
.how__list { display: flex; flex-direction: column; gap: var(--space-7); }
.how__item { padding-left: var(--space-4); }
.how__num { display: block; font-family: var(--font-display); color: var(--copper-main); font-size: 14px; margin-bottom: var(--space-1); }
.how__item h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(22px, 2vw, 34px); margin-bottom: var(--space-1); }
.how__item p { color: var(--slate-500); max-width: var(--narrow-copy-max); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  column-gap: clamp(64px, 7vw, 120px);
  align-items: start;
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-300); }
.field input, .field textarea {
  background: var(--navy-900);
  border: 1px solid #24384A;
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--ivory-100);
  min-height: 48px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--copper-main); }
.field__error { font-size: 12px; color: var(--copper-highlight); min-height: 16px; }
.contact-form__status { font-size: 13px; color: var(--copper-highlight); min-height: 18px; }
.contact-form .btn { align-self: flex-start; margin-top: var(--space-1); }

.contact__info-col { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-9); }
.contact__label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-highlight); margin-bottom: var(--space-2); }
.contact__value { font-size: 18px; line-height: 1.6; }
/* Stage A.2L: the phone number and opening hours were reading too
   small for the available right-hand column -- sized up here (phone
   number promoted to the display face for immediate readability,
   hours given more line-height for breathing room) while the block
   labels above stay compact, so the label/value hierarchy reads more
   clearly rather than everything growing by the same amount. */
.contact__block:nth-of-type(1) .contact__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.contact__block:nth-of-type(2) .contact__value { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.75; }
.contact__map { width: 100%; height: auto; border-radius: 4px; }

@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__info-col { margin-top: var(--space-6); }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(7, 19, 31, 0.92); }
.lightbox__dialog {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lightbox__img { width: 100%; max-height: 76vh; object-fit: contain; border-radius: 3px; }
.lightbox__caption { color: var(--ivory-100); font-size: 14px; text-align: center; }
.lightbox__close {
  position: absolute;
  top: -44px; right: 0;
  width: 40px; height: 40px;
  font-size: 28px;
  color: var(--ivory-100);
  display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--navy-950); border-top: 1px solid #16293A; padding: var(--space-7) 0 var(--space-5); }
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.site-footer__tagline { color: var(--copper-highlight); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.site-footer__nav { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.site-footer__nav a { font-size: 13px; color: var(--slate-300); }
.site-footer__nav a:hover { color: var(--ivory-100); }
.site-footer__disclaimer { font-size: 12px; color: var(--slate-500); max-width: 60ch; margin-top: var(--space-4); }
.site-footer__credit { font-size: 12px; color: var(--slate-300); }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .divider__track { animation: none; transform: translateX(0); }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* reveal-on-scroll utility (JS toggles [data-revealed]) */
/* opacity-only: geometry-bearing wraps must never move, or measured pipe
   coordinates would go stale mid-transition */
[data-reveal] { opacity: 0; transition: opacity 550ms var(--ease-editorial); }
[data-reveal][data-revealed] { opacity: 1; }