@charset "UTF-8";
/* ==========================================================================
   JAISWAL INFRASTRUCTURE GROUP
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography helpers
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Page hero (inner pages)
   9.  Section heading
   10. Figures & engineering drawings
   11. Statistics
   12. Service cards
   13. Capabilities & lifecycle stages
   14. Projects
   15. Clients
   16. Vision & mission
   17. Legacy
   18. Timeline
   19. Values (About)
   20. Services page extras
   21. Contact form
   22. Call to action
   23. Footer
   24. Motion
   25. Responsive
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Change a value here and it propagates across the whole site.
   ========================================================================== */

:root {
  /* --- Colour ---------------------------------------------------------- */
  --ink: #172126;            /* Deep charcoal / graphite — primary          */
  --ink-deep: #0d1417;       /* Near-black for hero grounds                */
  --accent: #e94b0c;         /* Industrial orange — accent only             */
  --accent-deep: #c33d09;
  --stone: #6f6253;          /* Warm concrete grey                         */
  --paper: #f5f4f1;          /* Warm off-white                             */

  /* Water. Orange is what the company builds; blue is the water moving
     through it. Two values because the drawings sit on both dark and light
     grounds: the bright one reads as water on charcoal (8.1:1 on --ink-deep),
     the deep one holds up on paper (3.8:1) — both clear WCAG 1.4.11. */
  --water: #1a7ab4;
  --water-bright: #4db5ea;
  --paper-dim: #eae8e3;
  --white: #fff;

  /* Hairlines — the site's structural language */
  --rule: #d8d5cf;
  --rule-dark: #2b393f;

  /* Text on light / on dark */
  --text-body: rgba(23, 33, 38, 0.78);
  --text-muted: rgba(23, 33, 38, 0.7);
  --text-faint: rgba(23, 33, 38, 0.45);
  --text-invert: rgba(255, 255, 255, 0.72);
  --text-invert-muted: rgba(255, 255, 255, 0.6);
  --text-invert-faint: rgba(255, 255, 255, 0.55);

  /* --- Type ------------------------------------------------------------ */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.15rem, 5.4vw, 4.75rem);
  --fs-h1: clamp(1.85rem, 4.6vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3.1vw, 2.55rem);
  --fs-h3: clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-stat: clamp(2.6rem, 7vw, 5.5rem);

  /* --- Space ----------------------------------------------------------- */
  --gutter: 1.5rem;
  --measure: 1400px;
  --section-y: 6rem;

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Drawing annotation visibility — see §10 */
  --dwg-labels: block;

  /* Resolved water colour for the drawings — see §26 */
  --flow: var(--water-bright);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
}

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

img {
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

::selection {
  background-color: var(--accent);
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}


/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: 5rem;
}

/* Grounds */
.on-paper      { background-color: var(--paper); }
.on-paper-dim  { background-color: var(--paper-dim); }
.on-ink        { background-color: var(--ink);      color: #fff; }
.on-ink-deep   { background-color: var(--ink-deep); color: #fff; }
.on-accent     { background-color: var(--accent);   color: #fff; }

.on-ink,
.on-ink-deep,
.on-accent {
  overflow: hidden;
}

.bordered-top    { border-top: 1px solid var(--rule); }
.bordered-bottom { border-bottom: 1px solid var(--rule); }

/* Faint engineering grid, sits behind section content */
.grid-tech::before,
.grid-tech-light::before,
.grid-tech-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 72px 72px;
}

.grid-tech::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.grid-tech-light::before {
  background-image:
    linear-gradient(to right, rgba(23, 33, 38, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 33, 38, 0.055) 1px, transparent 1px);
}

.grid-tech-accent::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

.grid-tech > .container,
.grid-tech-light > .container,
.grid-tech-accent > .container {
  position: relative;
}

/* A single restrained light source, used on dark hero grounds */
.glow {
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.16;
  pointer-events: none;
  background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
}

.glow--top-left  { left: -10rem; top: -10rem; }
.glow--top-right { right: -8rem; top: -10rem; width: 560px; height: 560px; opacity: 0.13; }

/* Hairline grid: cells separated by 1px borders rather than gaps, so an odd
   final row never leaves a filled empty cell. */
.hgrid {
  display: grid;
  border-top: 1px solid var(--rule);
}

.hgrid > * {
  border-bottom: 1px solid var(--rule);
}

.hgrid--dark {
  border-top-color: var(--rule-dark);
}

.hgrid--dark > * {
  border-bottom-color: var(--rule-dark);
}


/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */

.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.label--accent { color: var(--accent); }
.label--stone  { color: var(--stone); }
.label--invert { color: var(--text-invert-faint); }

.display {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  text-wrap: balance;
}

.stat {
  font-size: var(--fs-stat);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prose {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
}

.prose--invert { color: var(--text-invert); }

.prose p + p { margin-top: 1.25rem; }

.measure-sm { max-width: 36rem; }
.measure    { max-width: 42rem; }
.measure-lg { max-width: 48rem; }

.muted        { color: var(--text-muted); }
.muted-invert { color: var(--text-invert-muted); }
.accent       { color: var(--accent); }


/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

.btn .ico {
  transition: transform 0.5s var(--ease);
}

.btn:hover .ico,
.btn:focus-visible .ico {
  transform: translateX(4px);
}

.btn--solid {
  background-color: var(--accent);
  color: #fff;
}

.btn--solid:hover { background-color: var(--accent-deep); }

.btn--ink {
  background-color: var(--ink);
  color: #fff;
}

.btn--ink:hover { background-color: var(--ink-deep); }

.btn--outline {
  border: 1px solid rgba(23, 33, 38, 0.25);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--ink);
  background-color: var(--ink);
  color: #fff;
}

.btn--outline-invert {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn--outline-invert:hover {
  border-color: #fff;
  background-color: #fff;
  color: var(--ink);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Text link with sliding underline and advancing arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.arrow-link__text {
  position: relative;
}

.arrow-link__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.arrow-link:hover .arrow-link__text::after,
.arrow-link:focus-visible .arrow-link__text::after {
  transform: scaleX(1);
}

.arrow-link .ico {
  color: var(--accent);
  transition: transform 0.5s var(--ease);
}

.arrow-link:hover .ico,
.arrow-link:focus-visible .ico {
  transform: translateX(6px);
}

/* Inline icon sizing */
.ico {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--sm { width: 0.875rem; height: 0.875rem; }
.ico--lg { width: 2rem; height: 2rem; stroke-width: 1.25; }


/* ==========================================================================
   6. HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
    backdrop-filter 0.5s var(--ease);
}

.site-header.is-scrolled,
.site-header.is-open {
  background-color: rgba(13, 20, 23, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  transition: height 0.5s var(--ease);
}

.site-header.is-scrolled .site-header__bar { height: 4rem; }

/* --- Wordmark --------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}

.wordmark__rule {
  display: block;
  width: 3px;
  height: 2.25rem;
  flex: none;
  background-color: var(--accent);
  transition: height 0.5s var(--ease);
}

.site-header.is-scrolled .wordmark__rule { height: 1.75rem; }

.wordmark__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wordmark__name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.wordmark__sub {
  margin-top: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.wordmark--dark .wordmark__name { color: var(--ink); }
.wordmark--dark .wordmark__sub  { color: var(--stone); }

/* --- Desktop nav ------------------------------------------------------ */
.nav {
  display: none;
  align-items: center;
  gap: 2.25rem;
}

.nav__link {
  position: relative;
  padding-block: 0.25rem;
  font-size: 0.84375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s var(--ease);
}

.nav__link:hover { color: #fff; }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.625rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.nav__cta:hover {
  border-color: var(--accent);
  background-color: var(--accent);
}

.nav__cta .ico { transition: transform 0.5s var(--ease); }
.nav__cta:hover .ico { transform: translateX(4px); }

/* --- Mobile trigger & panel ------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  color: #fff;
}

.nav-toggle .ico { width: 1.5rem; height: 1.5rem; }
.nav-toggle__close { display: none; }
.site-header.is-open .nav-toggle__open  { display: none; }
.site-header.is-open .nav-toggle__close { display: block; }

.mobile-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--ink-deep);
}

.mobile-nav[hidden] { display: none; }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding-block: 1rem;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #fff;
}

.mobile-nav__label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.mobile-nav__name {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mobile-nav__link .ico { color: rgba(255, 255, 255, 0.55); }

.mobile-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  background-color: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
}

.mobile-nav__foot {
  padding-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: 7rem;
}

.hero__inner {
  display: grid;
  gap: 3.5rem;
  flex: 1;
  align-items: center;
  padding-bottom: 4rem;
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.hero__eyebrow .dash {
  display: block;
  width: 1.5rem;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
}

.hero__title { margin-top: 2rem; }
.hero__title .dim { color: rgba(255, 255, 255, 0.55); }

.hero__note {
  margin-top: 2rem;
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
}

.hero__lede { margin-top: 1.75rem; }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.75rem;
}

.hero__actions .btn { width: 100%; }

/* Lifecycle strip along the bottom edge of the hero */
.lifecycle {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
}

.lifecycle__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.lifecycle__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lifecycle__tick {
  display: block;
  width: 2px;
  height: 0.75rem;
  background-color: var(--accent);
}

.lifecycle__item--context .lifecycle__tick {
  width: 1px;
  height: 0.5rem;
  background-color: rgba(255, 255, 255, 0.25);
}

.lifecycle__item .label { color: rgba(255, 255, 255, 0.8); }
.lifecycle__item--context .label { color: rgba(255, 255, 255, 0.55); }

.lifecycle__sep {
  display: none;
  width: 1.5rem;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.12);
}


/* ==========================================================================
   8. PAGE HERO (inner pages)
   ========================================================================== */

.page-hero {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 4rem;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb__item .ico {
  width: 0.75rem;
  height: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.breadcrumb a { color: rgba(255, 255, 255, 0.55); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: rgba(255, 255, 255, 0.6); }

.page-hero__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
  color: var(--accent);
}

.page-hero__label .dash {
  display: block;
  width: 2rem;
  height: 1px;
  background-color: var(--accent);
}

.page-hero__title { margin-top: 1.5rem; max-width: 56rem; }
.page-hero__intro { margin-top: 1.75rem; }

/* Key/value strip */
.meta-strip {
  display: grid;
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule-dark);
}

.meta-strip__item {
  border-bottom: 1px solid var(--rule-dark);
  padding-block: 1.5rem;
}

.meta-strip__item dt { color: rgba(255, 255, 255, 0.6); }

.meta-strip__item dd {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}


/* ==========================================================================
   9. SECTION HEADING
   ========================================================================== */

.section-head { max-width: 48rem; }

.section-head__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
}

.on-ink .section-head__top,
.on-ink-deep .section-head__top {
  border-bottom-color: var(--rule-dark);
}

.on-accent .section-head__top {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.section-head__title { margin-top: 1.75rem; }
.section-head__intro { margin-top: 1.25rem; }


/* ==========================================================================
   10. FIGURES & ENGINEERING DRAWINGS
   --------------------------------------------------------------------------
   No project photography has been supplied, so each figure renders an inline
   SVG engineering drawing. To use a real photograph instead, replace the
   <svg> inside .figure__frame with:
       <img src="/assets/images/jackwell-construction.jpg"
            alt="…" width="1800" height="1240" loading="lazy">
   ========================================================================== */

.figure { position: relative; }

.figure__frame {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-deep);
  color: #fff;
}

.figure--light .figure__frame {
  background-color: var(--paper-dim);
  color: var(--ink);
  --flow: var(--water);
}

.figure__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background-size: 72px 72px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.figure--light .figure__frame::before {
  background-image:
    linear-gradient(to right, rgba(23, 33, 38, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 33, 38, 0.055) 1px, transparent 1px);
}

.figure__frame > svg,
.figure__frame > img {
  position: relative;
  width: 100%;
  height: auto;
  padding: 5%;
}

.figure__frame > img {
  padding: 0;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.figure__frame:hover > img { transform: scale(1.03); }

/* Corner registration marks — a quiet technical-drawing cue */
.figure__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* top-left */ linear-gradient(to right, currentColor 0 100%),
    linear-gradient(to bottom, currentColor 0 100%),
    /* top-right */ linear-gradient(to right, currentColor 0 100%),
    linear-gradient(to bottom, currentColor 0 100%),
    /* bottom-left */ linear-gradient(to right, currentColor 0 100%),
    linear-gradient(to bottom, currentColor 0 100%),
    /* bottom-right */ linear-gradient(to right, currentColor 0 100%),
    linear-gradient(to bottom, currentColor 0 100%);
  background-repeat: no-repeat;
  background-size:
    1.25rem 1px, 1px 1.25rem,
    1.25rem 1px, 1px 1.25rem,
    1.25rem 1px, 1px 1.25rem,
    1.25rem 1px, 1px 1.25rem;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  opacity: 0.25;
}

.figure--light .figure__frame::after { opacity: 0.2; }

.figure__caption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--stone);
}

.on-ink .figure__caption,
.on-ink-deep .figure__caption {
  color: rgba(255, 255, 255, 0.55);
}

.figure__caption .dash {
  display: block;
  width: 2rem;
  height: 1px;
  flex: none;
  background-color: var(--accent);
}

/* Drop the annotation layer in narrow slots rather than render it too small
   to read. Custom property so it also reaches <use> shadow content. */
.figure--nolabels { --dwg-labels: none; }
.dwg-labels { display: var(--dwg-labels, block); }


/* ==========================================================================
   11. STATISTICS
   ========================================================================== */

.stat-pair {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2.5rem;
}

.stat-pair dt { color: var(--stone); }
.stat-pair dd { margin-top: 1rem; }

.stat-row {
  display: grid;
  gap: 2rem;
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
  padding-top: 3rem;
}

.stat-row__label {
  margin-top: 1rem;
  color: var(--stone);
}


/* ==========================================================================
   12. SERVICE CARDS
   ========================================================================== */

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  scroll-margin-top: 8rem;
  transition: background-color 0.5s var(--ease);
}

.svc-card:hover { background-color: #fff; }
.on-ink .svc-card:hover { background-color: rgba(255, 255, 255, 0.04); }

/* Orange rule on hover — the site's signature micro-interaction */
.svc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.svc-card:hover::before,
.svc-card:focus-visible::before {
  transform: scaleX(1);
}

.svc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.svc-card__index { color: var(--stone); }
.on-ink .svc-card__index { color: rgba(255, 255, 255, 0.55); }

.svc-card__corner {
  color: var(--text-faint);
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}

.on-ink .svc-card__corner { color: rgba(255, 255, 255, 0.55); }

.svc-card:hover .svc-card__corner {
  transform: translate(2px, -2px);
  color: var(--accent);
}

.svc-card__icon {
  margin-top: 2rem;
  color: rgba(23, 33, 38, 0.6);
  transition: color 0.5s var(--ease);
}

.on-ink .svc-card__icon { color: rgba(255, 255, 255, 0.7); }
.svc-card:hover .svc-card__icon { color: var(--accent); }

.svc-card__title {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.on-ink .svc-card__title { color: #fff; }

.svc-card__desc {
  margin-top: 0.75rem;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.on-ink .svc-card__desc { color: var(--text-invert-muted); }

/* Scope list, revealed on hover — clipped, never removed from the a11y tree */
.svc-card__scope {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.7s var(--ease), opacity 0.7s var(--ease),
    margin-top 0.7s var(--ease);
}

.svc-card:hover .svc-card__scope,
.svc-card:focus-visible .svc-card__scope,
.svc-card:focus-within .svc-card__scope {
  max-height: 14rem;
  margin-top: 1.25rem;
  opacity: 1;
}

.svc-card__scope ul {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.on-ink .svc-card__scope ul { border-top-color: rgba(255, 255, 255, 0.12); }

.svc-card__scope li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--stone);
}

.on-ink .svc-card__scope li { color: rgba(255, 255, 255, 0.55); }

.svc-card__scope li .dot {
  display: block;
  width: 0.25rem;
  height: 0.25rem;
  flex: none;
  background-color: var(--accent);
}

.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--stone);
  transition: color 0.5s var(--ease);
}

.on-ink .svc-card__more { color: rgba(255, 255, 255, 0.55); }
.svc-card:hover .svc-card__more { color: var(--accent); }

.svc-card__more .dash {
  display: block;
  width: 1.25rem;
  height: 1px;
  background-color: currentColor;
}


/* ==========================================================================
   13. CAPABILITIES & LIFECYCLE STAGES
   ========================================================================== */

.cap-list {
  margin-top: 4rem;
  border-top: 1px solid var(--rule-dark);
}

.cap-list__item {
  position: relative;
  border-bottom: 1px solid var(--rule-dark);
  padding-block: 2.5rem;
}

.cap-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.cap-list__item:hover::before { transform: scaleX(1); }

.cap-list__title { margin-top: 1.5rem; color: #fff; }
.cap-list__body  { margin-top: 1rem; font-size: 0.9375rem; }

.cap-foot {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
}

/* --- Lifecycle stage table -------------------------------------------- */
.stage-grid {
  display: grid;
  margin-top: 4rem;
  border-top: 1px solid var(--rule-dark);
}

.stage {
  position: relative;
  border-bottom: 1px solid var(--rule-dark);
  padding-block: 1.75rem;
}

.stage--context { opacity: 0.55; }

.stage__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stage__tick {
  display: block;
  width: 2px;
  height: 1rem;
  background-color: var(--accent);
}

.stage--context .stage__tick {
  height: 0.75rem;
  background-color: rgba(255, 255, 255, 0.25);
}

.stage__index { color: rgba(255, 255, 255, 0.6); }

.stage__title {
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.stage__detail {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-invert-muted);
}

.stage__flag { margin-top: 1rem; color: var(--accent); }
.stage--context .stage__flag { color: rgba(255, 255, 255, 0.55); }


/* ==========================================================================
   14. PROJECTS
   ========================================================================== */

.proj-grid { margin-top: 4rem; }

.proj-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--paper);
  transition: background-color 0.5s var(--ease);
}

.proj-card:hover { background-color: #fff; }

.proj-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--ink-deep);
  color: #fff;
}

.proj-card__media > svg,
.proj-card__media > img {
  width: 100%;
  height: 100%;
}

.proj-card__media > svg {
  padding: 9%;
  opacity: 0.35;
}

.proj-card__media > img {
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.proj-card:hover .proj-card__media > img { transform: scale(1.03); }

.proj-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 72px 72px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.proj-card__status {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.375rem 0.75rem;
  background-color: var(--accent);
  color: #fff;
}

.proj-card__pending {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Corner marks on placeholder media */
.proj-card__media--marks::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to right, #fff 0 100%), linear-gradient(to bottom, #fff 0 100%),
    linear-gradient(to right, #fff 0 100%), linear-gradient(to bottom, #fff 0 100%),
    linear-gradient(to right, #fff 0 100%), linear-gradient(to bottom, #fff 0 100%),
    linear-gradient(to right, #fff 0 100%), linear-gradient(to bottom, #fff 0 100%);
  background-size:
    1.25rem 1px, 1px 1.25rem, 1.25rem 1px, 1px 1.25rem,
    1.25rem 1px, 1px 1.25rem, 1.25rem 1px, 1px 1.25rem;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  opacity: 0.2;
}

.proj-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}

.proj-card__cat { color: var(--stone); }

.proj-card__title { margin-top: 1rem; }

.proj-card__client,
.proj-card__note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.proj-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.proj-card__loc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--stone);
}

.proj-card__loc .ico { color: var(--accent); }

/* Awaiting-records note under the placeholder grid */
.proj-note {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 2.5rem;
}

/* Filter chips */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2rem;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--rule);
  padding: 0.625rem 1rem;
  color: var(--stone);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

.filter:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.filter[aria-pressed="true"] {
  border-color: var(--accent);
  background-color: var(--accent);
  color: #fff;
}

.filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
  margin-top: 3rem;
}

.filter-list li {
  border: 1px solid var(--rule);
  padding: 0.625rem 1rem;
  color: var(--stone);
}


/* ==========================================================================
   15. CLIENTS
   --------------------------------------------------------------------------
   Presented as typography. No third-party logo has been sourced or recreated;
   an official file supplied by the organisation is required first. To add one,
   replace the <p class="client-card__name"> with an <img>.
   ========================================================================== */

.client-grid { margin-top: 4rem; }

.client-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 10.5rem;
  padding: 1.75rem;
  transition: background-color 0.5s var(--ease);
}

.client-card:hover { background-color: #fff; }

.client-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.client-card:hover::before { transform: scaleX(1); }

.client-card__sector { color: var(--stone); }

.client-card__name {
  margin-top: 1.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.client-card__sub {
  margin-top: 0.625rem;
  color: var(--stone);
}

.client-card__more {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-faint);
}


/* ==========================================================================
   16. VISION & MISSION
   ========================================================================== */

.vm-list { margin-top: 3.5rem; }
.vm-list > * + * { margin-top: 3rem; }

.vm-block {
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
}

.vm-block--mission { border-left-color: rgba(255, 255, 255, 0.2); }

.vm-block dt { color: var(--accent); }
.vm-block--mission dt { color: rgba(255, 255, 255, 0.6); }

.vm-block dd {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  text-wrap: balance;
}

.vm-block--mission dd { color: rgba(255, 255, 255, 0.85); }


/* ==========================================================================
   17. LEGACY
   --------------------------------------------------------------------------
   The three supplied logo files, used unmodified and at their own aspect
   ratios. object-fit: contain guarantees no distortion; the white plate is
   what the artwork was drawn for.
   ========================================================================== */

.legacy-grid { margin-top: 4rem; }

.legacy-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  transition: background-color 0.5s var(--ease);
}

.legacy-card:hover { background-color: #fff; }

.legacy-card__rel { color: var(--accent); }

.logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11rem;
  margin-top: 1.75rem;
  border: 1px solid var(--rule);
  background-color: #fff;
  padding: 1.5rem;
}

.logo-plate img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.legacy-card__name { margin-top: 1.75rem; }
.legacy-card__desc { margin-top: 0.5rem; color: var(--stone); }

.legacy-card__note {
  margin-top: 1rem;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.legacy-disclaimer {
  max-width: 48rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--stone);
}


/* ==========================================================================
   18. TIMELINE
   The vertical rule fills as the section scrolls past — the only
   scroll-linked animation on the site. See assets/js/main.js.
   ========================================================================== */

.timeline {
  position: relative;
  margin-top: 4rem;
}

.timeline__track,
.timeline__fill {
  display: none;
  position: absolute;
  left: 7px;
  top: 0.5rem;
  width: 1px;
  height: calc(100% - 1rem);
}

.timeline__track { background-color: rgba(255, 255, 255, 0.12); }

.timeline__fill {
  background-color: var(--accent);
  transform: scaleY(var(--progress, 0));
  transform-origin: top;
}

.timeline__list > * + * { margin-top: 3.5rem; }

.timeline__item { position: relative; }

.timeline__node {
  display: none;
  position: absolute;
  left: 0;
  top: 3.375rem;
  width: 15px;
  height: 15px;
  border: 1px solid var(--accent);
  background-color: var(--ink);
  align-items: center;
  justify-content: center;
}

.timeline__node span {
  display: block;
  width: 5px;
  height: 5px;
  background-color: var(--accent);
}

.timeline__marker {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.timeline__title { color: #fff; }
.timeline__body  { margin-top: 1rem; font-size: 0.9375rem; }


/* ==========================================================================
   19. VALUES (About)
   ========================================================================== */

.values-grid {
  display: grid;
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
}

.value {
  position: relative;
  border-bottom: 1px solid var(--rule);
  padding-block: 2rem;
}

.value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.value:hover::before { transform: scaleX(1); }

.value__title {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.value__body {
  margin-top: 0.75rem;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Callout panel with accent rule (engineering capability, technical scope) */
.panel {
  border-left: 2px solid var(--accent);
  background-color: var(--paper-dim);
  padding: 1.75rem;
}

.panel__label { color: var(--stone); }

.panel__lede {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}

.panel__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.panel__grid dt { color: var(--accent); }

.panel__grid dd {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Definition rows (technical scope tables) */
.defrows { margin-top: 1.5rem; }

.defrows__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.875rem;
  border-top: 1px solid var(--rule);
}

.defrows__row:first-child { border-top: 0; }

.defrows dt { font-size: 0.875rem; color: rgba(23, 33, 38, 0.65); }
.defrows dd { font-size: 0.875rem; font-weight: 500; text-align: right; }

/* Bulleted scope lists */
.scope-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.scope-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: rgba(23, 33, 38, 0.8);
}

.scope-list li::before {
  content: "";
  flex: none;
  width: 0.25rem;
  height: 0.25rem;
  margin-top: 0.5rem;
  background-color: var(--accent);
}


/* ==========================================================================
   20. SERVICES PAGE EXTRAS
   ========================================================================== */

.cat-index { display: grid; }

.cat-index__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  transition: background-color 0.5s var(--ease);
}

.cat-index__link:hover { background-color: #fff; }

.cat-index__title {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.cat-index__count {
  margin-top: auto;
  padding-top: 1.25rem;
  color: var(--stone);
}

.cat-block { scroll-margin-top: 6rem; }

.cat-block__head-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
}

.on-ink .cat-block__head-top { border-bottom-color: var(--rule-dark); }

.cat-block__title   { margin-top: 1.75rem; }
.cat-block__summary { margin-top: 1.25rem; }
.cat-block__figure  { margin-top: 2.5rem; }

/* Numbered capability rows (Expertise) */
.numrow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
  transition: background-color 0.5s var(--ease);
}

.numrow:hover { background-color: #fff; }

.numrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.numrow:hover::before { transform: scaleX(1); }

.numrow__num {
  flex: none;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.numrow__body { margin-top: 0.75rem; font-size: 0.9375rem; }

/* Operating-environment cards */
.env-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
}

.env-card__index { margin-top: 1.75rem; color: var(--accent); }
.env-card__title { margin-top: 1rem; }
.env-card__body  { margin-top: 0.75rem; font-size: 0.9375rem; }


/* ==========================================================================
   21. CONTACT FORM
   ========================================================================== */

.form { display: grid; gap: 1.75rem; }

.form__row { display: grid; gap: 1.75rem; }

.form__label {
  display: block;
  margin-bottom: 0.625rem;
  color: var(--stone);
}

.form__req { color: var(--accent); }

.form__control {
  width: 100%;
  border: 1px solid var(--rule);
  background-color: #fff;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}

.form__control::placeholder { color: rgba(23, 33, 38, 0.35); }
.form__control:focus { outline: 0; border-color: var(--ink); }
.form__control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

select.form__control {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172126' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

textarea.form__control { resize: vertical; min-height: 9rem; }

.form__control[aria-invalid="true"] { border-color: var(--accent); }

.form__error {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--accent);
}

.form__error.is-visible { display: flex; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.5rem;
}

.form__hint { font-size: 0.8125rem; color: var(--stone); }

.form__honeypot { display: none; }

/* Submission status notice */
.notice {
  display: none;
  gap: 1rem;
  border-left: 2px solid var(--accent);
  background-color: var(--paper-dim);
  padding: 1.5rem;
}

.notice.is-visible { display: flex; }

.notice__icon { flex: none; margin-top: 2px; color: var(--accent); width: 1.25rem; height: 1.25rem; }
.notice__title { font-size: 0.9375rem; font-weight: 600; }

.notice__body {
  margin-top: 0.5rem;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: rgba(23, 33, 38, 0.75);
}

/* Contact details panel */
.contact-details { display: grid; gap: 1.5rem; margin-top: 2rem; }

.contact-details > div { display: flex; gap: 1rem; }

.contact-details .ico { flex: none; margin-top: 2px; color: var(--accent); }

.contact-details dd {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.contact-details a:hover { color: var(--accent); }

.discuss-list { margin-top: 1.25rem; border-top: 1px solid var(--rule); }

.discuss-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--rule);
  padding-block: 1rem;
  font-size: 0.9375rem;
}

.discuss-list li::before {
  content: "";
  flex: none;
  width: 0.25rem;
  height: 0.25rem;
  background-color: var(--accent);
}

/* Map — placeholder until coordinates are confirmed. See README §1. */
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-top: 1.25rem;
  border: 1px solid var(--rule);
  background-color: var(--ink-deep);
}

.map iframe { width: 100%; height: 100%; border: 0; }

.map__placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  padding-inline: 1.5rem;
  text-align: center;
}

.map__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 72px 72px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.map__placeholder > * { position: relative; }
.map__placeholder .ico { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.map__placeholder p { font-size: 0.9375rem; font-weight: 500; color: #fff; }
.map__placeholder .label { color: rgba(255, 255, 255, 0.55); }


/* ==========================================================================
   22. CALL TO ACTION
   ========================================================================== */

.cta { padding-block: 5rem; }

.cta__inner { display: grid; gap: 3rem; }

.cta__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1rem;
}

.cta__top .label { color: rgba(255, 255, 255, 0.7); }

.cta__title { margin-top: 2rem; }

.cta__lede {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.cta__actions .label { color: rgba(255, 255, 255, 0.7); }


/* ==========================================================================
   23. FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--rule-dark);
  background-color: var(--ink-deep);
  color: #fff;
}

.site-footer__main {
  display: grid;
  gap: 3.5rem;
  padding-block: 4rem;
}

.site-footer__tagline { margin-top: 1.75rem; color: rgba(255, 255, 255, 0.6); }

.site-footer__about {
  max-width: 28rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

.site-footer h2 { color: rgba(255, 255, 255, 0.6); }

.site-footer__list { margin-top: 1.5rem; display: grid; gap: 0.875rem; }

.site-footer__list a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s var(--ease);
}

.site-footer__list a:hover { color: var(--accent); }

.site-footer__contact {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__contact li { display: flex; gap: 0.75rem; }
.site-footer__contact .ico { flex: none; margin-top: 2px; color: var(--accent); }
.site-footer__contact a:hover { color: var(--accent); }

.site-footer__enquiries {
  display: inline-block;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  color: #fff;
}

.site-footer__enquiries:hover { color: var(--accent); }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 2rem;
}

.site-footer__copy { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.site-footer__meta { color: rgba(255, 255, 255, 0.55); }

.site-footer__credit {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__credit strong {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}


/* ==========================================================================
   24. MOTION
   Restrained: a fade-up on scroll, one scroll-linked timeline, hover reveals.
   Everything is opt-in through JS adding .is-in, so content is visible if
   JavaScript never runs.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .timeline__fill { transform: scaleY(1); }
}


/* ==========================================================================
   25. RESPONSIVE
   Mobile-first. 640 / 768 / 1024 / 1280 to match the previous breakpoints.
   ========================================================================== */

/* --- ≥ 640px ----------------------------------------------------------- */
@media (min-width: 40em) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { width: auto; }

  .stat-pair,
  .panel__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .values-grid,
  .stage-grid,
  .meta-strip   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Hairline verticals for two-column hairline grids */
  .hgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hgrid--2 > * { border-left: 1px solid var(--rule); }
  .hgrid--2 > *:nth-child(odd) { border-left: 0; }
  .hgrid--dark.hgrid--2 > * { border-left-color: var(--rule-dark); }

  .meta-strip__item,
  .stage,
  .value {
    border-left: 1px solid var(--rule-dark);
    padding-inline: 1.5rem;
  }

  .value { border-left-color: var(--rule); }

  .meta-strip__item:nth-child(odd),
  .stage:nth-child(odd),
  .value:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .panel { padding: 2rem; }
  .proj-card__body,
  .svc-card,
  .client-card,
  .legacy-card,
  .env-card { padding: 2rem; }

  .proj-note { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --- ≥ 768px ----------------------------------------------------------- */
@media (min-width: 48em) {
  :root {
    --gutter: 2.5rem;
    --section-y: 8rem;
  }

  .prose { font-size: 1.0625rem; }

  .site-header__bar { height: 5.75rem; }
  .site-header.is-scrolled .site-header__bar { height: 4.25rem; }
  .wordmark__rule { height: 2.5rem; }
  .wordmark__name { font-size: 1.1875rem; }
  .wordmark__sub  { font-size: 0.59375rem; }

  .hero { padding-top: 9rem; }
  .lifecycle__list { gap: 0.75rem 2rem; }
  .lifecycle__sep { display: block; }

  .page-hero { padding-top: 11rem; padding-bottom: 5rem; }

  .panel__lede { font-size: 1.25rem; }
  .vm-block { padding-left: 2rem; }
  .vm-block dd { font-size: 1.3125rem; }
  .cta { padding-block: 7rem; }

  /* Timeline switches to the two-column form with the drawn rule */
  .timeline__track,
  .timeline__fill { display: block; }
  .timeline__node { display: flex; }
  .timeline__list > * + * { margin-top: 0; }
  .timeline__item-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2.5rem;
    padding-block: 3rem;
  }
  .timeline__marker-col { padding-left: 3.5rem; }
  .timeline__body-col {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.75rem;
  }

  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head--center .section-head__top { justify-content: center; }
}

/* --- ≥ 1024px ---------------------------------------------------------- */
@media (min-width: 64em) {
  :root { --gutter: 3.5rem; }

  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }

  .hero__inner {
    grid-template-columns: 7fr 5fr;
    gap: 3rem;
    padding-bottom: 5rem;
  }

  .hero__copy { padding-right: 2rem; }

  .cols-3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stage-grid,
  .meta-strip,
  .values-grid,
  .cat-index  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Three-column hairline grid */
  .hgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hgrid--3 > * { border-left: 1px solid var(--rule); }
  .hgrid--3 > *:nth-child(3n + 1) { border-left: 0; }

  .cat-index > * { border-left: 1px solid var(--rule); }
  .cat-index > *:nth-child(4n + 1) { border-left: 0; }

  .meta-strip__item:nth-child(odd),
  .stage:nth-child(odd),
  .value:nth-child(odd) {
    border-left: 1px solid var(--rule-dark);
    padding-left: 1.5rem;
  }

  .value:nth-child(odd) { border-left-color: var(--rule); }

  .meta-strip__item:nth-child(4n + 1),
  .stage:nth-child(4n + 1),
  .value:nth-child(4n + 1) {
    border-left: 0;
    padding-left: 0;
  }

  /* Lifecycle stages wrap to 4 + 3; keep row 2 aligned to the left edge */
  .stage:nth-child(5) { border-left: 0; padding-left: 0; }

  .cap-list { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
  .cap-list__item { border-left: 1px solid var(--rule-dark); padding-inline: 2rem; }
  .cap-list__item:first-child { border-left: 0; padding-left: 0; }

  .cap-foot { grid-template-columns: 2fr 1fr; align-items: end; }
  .cap-foot__link { justify-self: end; }

  /* Generic 12-column split used by the editorial sections */
  .split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4rem;
  }

  .split--center { align-items: center; }
  .split--start  { align-items: start; }
  .split--end    { align-items: end; }

  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-3  { grid-column: span 3; }
  .col-2  { grid-column: span 2; }

  .justify-end { justify-self: end; }

  .sticky-figure { position: sticky; top: 8rem; }

  .numrow { flex-direction: row; align-items: flex-start; gap: 2.5rem; padding: 2.5rem; }
  .numrow__num { width: 6rem; }

  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- ≥ 1280px ---------------------------------------------------------- */
@media (min-width: 80em) {
  .split { gap: 4rem; }
}


/* ==========================================================================
   26. DRAWING ANIMATION
   --------------------------------------------------------------------------
   Brings the engineering drawings to life by animating the thing the company
   actually does: moving water. Flow is shown the way a P&ID shows it — dashes
   travelling along the pipe centreline in the direction of flow — rather than
   with decorative motion.

   Each `.dwg-flow` path is authored in the direction the water travels, so a
   negative dashoffset always reads as "forward". The dash period (12 + 20)
   matches the offset delta, so the loop is seamless.

   All of it is switched off under prefers-reduced-motion at the end of this
   section, and none of it is load-bearing: the drawings are complete and
   correct with every animation disabled.
   ========================================================================== */

/* --- Flowing water in a pipe or channel -------------------------------- */
@keyframes dwg-flow {
  to { stroke-dashoffset: -32; }
}

.dwg-flow {
  fill: none;
  stroke: var(--flow, #1a7ab4);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 12 20;
  animation: dwg-flow 1.5s linear infinite;
}

/* Wider bores read better with a slightly heavier trace */
.dwg-flow--bold { stroke-width: 4.4; }

/* The standing water column: a continuous translucent trace under the
   travelling dashes, so a full pipe reads as full rather than as a dotted
   line on an empty bore. Not animated — it is the water, not the movement. */
.dwg-flow-bed {
  fill: none;
  stroke: var(--flow, #1a7ab4);
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.2;
}

.dwg-flow-bed--bold { stroke-width: 11; }

/* Staggered starts make a multi-stage system read left to right */
.dwg-flow--d1 { animation-delay: -1.1s; }
.dwg-flow--d2 { animation-delay: -0.75s; }
.dwg-flow--d3 { animation-delay: -0.35s; }

/* --- Water surface shimmer --------------------------------------------- */
@keyframes dwg-drift {
  0%   { transform: translateX(0);    opacity: 0; }
  25%  { opacity: 0.5; }
  75%  { opacity: 0.5; }
  100% { transform: translateX(34px); opacity: 0; }
}

.dwg-ripple {
  stroke: var(--flow, #1a7ab4);
  animation: dwg-drift 4s ease-in-out infinite;
}

.dwg-ripple--b { animation-delay: -1.3s; }
.dwg-ripple--c { animation-delay: -2.6s; }

/* --- Running plant: a slow breath on pump and process units ------------ */
@keyframes dwg-breathe {
  0%, 100% { opacity: 0.16; }
  50%      { opacity: 0.42; }
}

.dwg-pulse {
  animation: dwg-breathe 2.8s ease-in-out infinite;
}

.dwg-pulse--b { animation-delay: -0.9s; }
.dwg-pulse--c { animation-delay: -1.8s; }

/* Large process-unit washes: a much quieter breath, so the accent linework
   drawn on top of them stays legible rather than washing out accent-on-accent */
@keyframes dwg-breathe-soft {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.17; }
}

.dwg-pulse--soft { animation-name: dwg-breathe-soft; }

/* --- Flow seen end-on (pipe cross section) ------------------------------
   A cross section cannot show axial flow, so the bore gets a slow rotating
   dashed ring instead — swirl, not travel. */
@keyframes dwg-swirl {
  to { transform: rotate(360deg); }
}

.dwg-swirl {
  stroke: var(--flow, #1a7ab4);
  transform-box: fill-box;
  transform-origin: center;
  animation: dwg-swirl 9s linear infinite;
}

/* --- Rising water level ------------------------------------------------- */
@keyframes dwg-fill {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.dwg-level {
  animation: dwg-fill 5s ease-in-out infinite;
}

/* Off-screen drawings stop repainting. Toggled by assets/js/main.js; without
   JS nothing is paused and every drawing animates as authored. */
.dwg-paused .dwg-flow,
.dwg-paused .dwg-ripple,
.dwg-paused .dwg-pulse,
.dwg-paused .dwg-swirl,
.dwg-paused .dwg-level {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .dwg-flow,
  .dwg-ripple,
  .dwg-pulse,
  .dwg-swirl,
  .dwg-level {
    animation: none;
  }

  /* Keep the flow trace legible as a static dashed centreline */
  .dwg-ripple { opacity: 0.4; }
}