/* ==========================================================================
   CF Composites Ltd - design system
   --------------------------------------------------------------------------
   FONT SWAP NOTE
   Haffer Semi Mono (the signed-off secondary face) and the brand primary are
   both licensed faces and cannot be loaded from Google Fonts. Two stand-ins
   are used below, chosen to match the proportions closely:

     Martian Mono  ->  stand-in for Haffer Semi Mono
     Archivo       ->  stand-in for the brand primary

   To swap for the real files: self-host the woff2 files, replace the @import
   with @font-face blocks, and change the two --font-* values. Nothing else
   in this stylesheet needs to change.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Martian+Mono:wght@300;400;500&display=swap');

:root {
  /* Signed-off brand palette. Do not change without Colin. */
  --cream:      #f2f1ef;   /* paper */
  --black:      #0c1013;   /* ink */
  --black-alt:  #070a0c;   /* ink, deeper */
  --mint:       #cedfd9;   /* Composite Fade */
  --teal:       #3a5256;   /* Mineral Green */

  /* Semantic aliases, so component CSS reads clearly */
  --paper:      var(--cream);
  --ink:        var(--black);
  --fade:       var(--mint);
  --mineral:    var(--teal);

  --paper-dim:  #e7e6e3;
  --hair-light: rgba(242, 241, 239, 0.16);
  --hair-dark:  rgba(12, 16, 19, 0.14);
  --flag:       #b8804a;   /* placeholder marker only, not a brand colour */

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --container-max: 1320px;
  --gutter: 40px;
  --section-pad: clamp(72px, 8.5vw, 130px);
  --nav-h: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  clip-path: inset(50%);
  background: var(--fade);
  color: var(--ink);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.skip-link:focus { clip-path: none; }

:focus-visible {
  outline: 2px solid var(--fade);
  outline-offset: 3px;
}
.bg-paper :focus-visible,
.bg-cream :focus-visible { outline-color: var(--mineral); }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4.25rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.5rem); }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin: 0; }
p + p { margin-top: 1em; }

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* Data label / value pairs. This is where the mono face earns its keep:
   field names and measured values, not decoration. */
.eyebrow,
.col-head,
dl dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.col-head {
  display: block;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair-dark);
  color: var(--mineral);
  text-transform: none;
}
.bg-ink .col-head,
.bg-dark .col-head { color: var(--fade); border-bottom-color: var(--hair-light); }

.eyebrow { text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Placeholder markers
   Anything wearing .tbc or .tbc-val is unwritten copy. Deliberately loud so
   it cannot ship by accident. Delete these two rules to see the site clean.
   -------------------------------------------------------------------------- */

.tbc,
.tbc-val {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--flag);
  border: 1px dashed currentColor;
  padding: 2px 7px;
  white-space: nowrap;
  vertical-align: middle;
}
.tbc-block {
  display: block;
  white-space: normal;
  margin-bottom: 20px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-fill-mint  { background: var(--fade);  color: var(--ink); }
.btn-fill-mint:hover  { background: #ffffff; }
.btn-fill-dark  { background: var(--ink);   color: var(--paper); }
.btn-fill-dark:hover  { background: var(--mineral); }
.btn-outline-light { border-color: rgba(242, 241, 239, 0.34); color: var(--paper); }
.btn-outline-light:hover { border-color: var(--fade); color: var(--fade); }
.btn-outline-dark  { border-color: rgba(12, 16, 19, 0.28); color: var(--ink); }
.btn-outline-dark:hover  { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.btn .arrow { width: 13px; height: 9px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--mineral);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.18s ease;
}
.link-arrow::after {
  content: '';
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width 0.2s ease;
}
.link-arrow:hover::after { width: 26px; }
/* Older templates put an <img class="arrow"> inside .link-arrow. The rule
   drawn by ::after above replaces it, so it would render twice. */
.link-arrow .arrow { display: none; }
.bg-ink .link-arrow,
.bg-dark .link-arrow,
.bg-mineral .link-arrow { color: var(--fade); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.site-nav {
  background: rgba(12, 16, 19, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hair-light);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

.site-nav .logo img { height: 28px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-links a {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0;
  color: rgba(242, 241, 239, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.16s ease;
}

/* Exclude .btn: some templates add .active to the nav quote button, and a
   higher-specificity colour here would paint mint text on a mint fill. */
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn).active,
.nav-links a:not(.btn)[aria-current="page"] { color: var(--fade); }

/* Current page gets a rule as well as the colour change, so the state is not
   carried by colour alone. Uses text-decoration rather than a box edge: the
   dropdown triggers are full nav height, so a box edge would draw a stray
   line at the bottom of the bar instead of under the word. */
.nav-links a:not(.btn)[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
/* Keep the rule off the caret so it stops at the word. */
.nav-links a[aria-current="page"] .caret,
.nav-links a[aria-current="page"]::after { text-decoration: none; }

/* Caret drawn in CSS rather than a "▾" glyph, so it is identical on every
   page and does not depend on markup. */
.dropdown-trigger::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.55;
  transition: opacity 0.16s ease;
}
.dropdown:hover .dropdown-trigger::after,
.dropdown.open .dropdown-trigger::after { opacity: 1; }

.nav-links .caret { font-size: 9px; opacity: 0.5; }

.nav-links .btn {
  padding: 11px 20px;
  font-family: var(--font-mono);
  color: var(--ink);
}
.nav-links .btn:hover { color: var(--ink); }

.nav-toggle { display: none; }

.site-nav.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }

/* --------------------------------------------------------------------------
   Nav dropdowns

   The trigger fills the full height of the nav bar and the menu opens flush
   against the bar's lower edge. That leaves no dead strip between the two, so
   moving the pointer straight down never drops the hover. The visual gap is
   made by transparent padding on the menu itself, which is still part of the
   menu's hit area.
   -------------------------------------------------------------------------- */

.dropdown { position: relative; display: flex; align-items: center; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  transform: translateY(-6px);
  min-width: 262px;
  /* Transparent top strip. Bridges the gap and stays hoverable. */
  padding: 14px 0 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 110;
}

/* The visible panel. Backed onto an inner box so the bridge above stays clear. */
.dropdown-menu::before {
  content: '';
  position: absolute;
  inset: 14px 0 0;
  background: var(--black-alt);
  border: 1px solid var(--hair-light);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  z-index: -1;
}

.dropdown-menu a {
  position: relative;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: rgba(242, 241, 239, 0.7);
  white-space: nowrap;
}
.dropdown-menu a:first-of-type { margin-top: 8px; }
.dropdown-menu a:last-of-type { margin-bottom: 8px; }
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible { color: var(--fade); background: rgba(206, 223, 217, 0.08); }

/* No :focus-within here. It would match the trigger too, which re-opened the
   menu the moment Escape returned focus to it. Keyboard opening is handled in
   main.js via ArrowDown, following the ARIA disclosure-navigation pattern. */
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Full-height trigger, desktop only. On mobile the menu is static. */
@media (min-width: 901px) {
  .site-nav .nav-links { align-self: stretch; }
  .nav-links > .dropdown,
  .nav-links > a:not(.btn) { align-self: stretch; }
  .dropdown > .dropdown-trigger,
  .nav-links > a:not(.btn) { height: 100%; }
}

/* --------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */

section { position: relative; }

.section     { padding: var(--section-pad) 0; }
.section-pad { padding: var(--section-pad) 0; }
.section-pad-sm { padding: clamp(56px, 6vw, 92px) 0; }

.bg-paper, .bg-cream { background: var(--paper); color: var(--ink); }
.bg-ink,   .bg-dark  { background: var(--ink);   color: var(--paper); }
.bg-mint             { background: var(--fade);  color: var(--ink); }
.bg-mineral          { background: var(--mineral); color: var(--paper); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(36px, 4vw, 60px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair-dark);
}
.bg-ink .section-head,
.bg-dark .section-head,
.bg-mineral .section-head { border-bottom-color: var(--hair-light); }

.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 { max-width: 22ch; }

.bg-dark .eyebrow  { color: rgba(242, 241, 239, 0.4); }
.bg-cream .eyebrow { color: var(--mineral); }

.lede-block {
  max-width: 68ch;
  margin-bottom: clamp(44px, 5vw, 76px);
}
.lede-block h2 { margin-bottom: 22px; }
.lede-block p {
  font-size: 1.0625rem;
  color: rgba(12, 16, 19, 0.7);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   HERO with video
   -------------------------------------------------------------------------- */

.v-hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--black-alt);
  color: var(--paper);
  overflow: hidden;
}

.v-hero-media { position: absolute; inset: 0; }

.v-hero-video,
.v-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Graded so white type stays legible over a busy workshop shot.
   Composite Fade tint at low opacity ties the footage to the brand. */
.v-hero-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 10, 12, 0.94) 0%, rgba(7, 10, 12, 0.72) 42%, rgba(7, 10, 12, 0.32) 100%),
    linear-gradient(to top, rgba(7, 10, 12, 0.96) 0%, rgba(7, 10, 12, 0) 46%),
    linear-gradient(to bottom, rgba(58, 82, 86, 0.34) 0%, rgba(58, 82, 86, 0) 34%);
}

.v-hero-inner {
  position: relative;
  width: 100%;
  padding-top: clamp(96px, 14vh, 168px);
  padding-bottom: clamp(48px, 6vh, 76px);
}

.v-hero-title {
  font-size: clamp(2.15rem, 5.4vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.02;
  max-width: 20ch;
  margin-bottom: 28px;
}

.v-hero-lede {
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: rgba(242, 241, 239, 0.76);
  margin-bottom: 34px;
}

.v-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Instrument-panel strip of real facts, pinned to the base of the hero */
.spec-strip {
  position: relative;
  border-top: 1px solid var(--hair-light);
  background: rgba(7, 10, 12, 0.6);
  backdrop-filter: blur(6px);
}
.spec-strip .wrap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding-left: 0;
  padding-right: 0;
}
.spec-strip dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  margin: 0;
}
.spec-cell {
  padding: 18px var(--gutter);
  border-right: 1px solid var(--hair-light);
  min-width: 0;
}
.spec-cell:first-child { padding-left: var(--gutter); }
.spec-cell:last-child { border-right: none; }
.spec-cell dt {
  color: rgba(206, 223, 217, 0.6);
  margin-bottom: 5px;
}
.spec-cell dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.spec-cell dd .unit {
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(242, 241, 239, 0.55);
}

.v-hero-sound {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  border-left: 1px solid var(--hair-light);
  padding: 18px var(--gutter);
  color: rgba(242, 241, 239, 0.55);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.16s ease;
}
.v-hero-sound:hover { color: var(--fade); }
.v-hero-sound-icon {
  width: 8px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.v-hero-sound[aria-pressed="true"] .v-hero-sound-icon {
  border: none;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

/* --------------------------------------------------------------------------
   What we make
   -------------------------------------------------------------------------- */

.make-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
}

.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tick-list li {
  position: relative;
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 0.9375rem;
  color: rgba(12, 16, 19, 0.78);
  line-height: 1.45;
}
.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 1px;
  background: var(--mineral);
}
.bg-ink .tick-list li,
.bg-dark .tick-list li {
  color: rgba(242, 241, 239, 0.76);
  border-bottom-color: var(--hair-light);
}
.bg-ink .tick-list li::before,
.bg-dark .tick-list li::before { background: var(--fade); }

.col-note {
  margin-top: 18px;
  font-size: 0.875rem;
  color: rgba(12, 16, 19, 0.55);
}

/* --------------------------------------------------------------------------
   Capabilities as specification rows
   -------------------------------------------------------------------------- */

.cap-table { border-top: 1px solid var(--hair-light); }

.cap-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--hair-light);
}

.cap-media { overflow: hidden; background: var(--black-alt); }
.cap-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cap-row:hover .cap-media img { transform: scale(1.035); }

.cap-body h3 {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cap-body h3 a { transition: color 0.16s ease; }
.cap-body h3 a:hover { color: var(--fade); }

.cap-body > p {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: rgba(242, 241, 239, 0.65);
  max-width: 60ch;
  margin-bottom: 22px;
}

.tag-new {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--fade);
  padding: 3px 8px;
}

.cap-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--hair-light);
}
.cap-spec > div {
  background: var(--ink);
  padding: 13px 16px;
}
.cap-spec dt { color: rgba(206, 223, 217, 0.55); margin-bottom: 5px; }
.cap-spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.cap-spec dd.tbc-val { display: inline-block; }

.cap-footnote {
  margin-top: 32px;
  font-size: 0.875rem;
  color: rgba(242, 241, 239, 0.5);
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   Featured case study
   -------------------------------------------------------------------------- */

.case-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.case-feature-media { margin: 0; }
.case-feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.case-feature-body h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin-bottom: 18px;
}
.case-feature-body > p {
  font-size: 1rem;
  line-height: 1.62;
  color: rgba(12, 16, 19, 0.7);
  max-width: 54ch;
  margin-bottom: 26px;
}

.case-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 0 0 28px;
  background: var(--hair-dark);
}
.case-spec > div { background: var(--paper); padding: 13px 15px; }
.case-spec dt { color: var(--mineral); margin-bottom: 5px; }
.case-spec dd { margin: 0; font-size: 0.875rem; font-weight: 500; }

/* --------------------------------------------------------------------------
   Facility
   -------------------------------------------------------------------------- */

.facility-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.facility-table dl {
  margin: 0;
  border-top: 1px solid var(--hair-light);
}
.fac-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair-light);
}
.fac-row dt { color: rgba(242, 241, 239, 0.55); }
.fac-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--fade);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.facility-note {
  margin-top: 26px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(242, 241, 239, 0.6);
  max-width: 46ch;
}

.facility-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.facility-media figure { margin: 0; }
.facility-media figure:first-child { grid-column: 1 / -1; }
.facility-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.88);
}
.facility-media figure:first-child img { aspect-ratio: 16 / 9; }
.facility-media figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(206, 223, 217, 0.55);
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Sector band

   A 6-column mosaic: two larger tiles on the first row (4 + 2), three equal
   tiles on the second (2 + 2 + 2). The previous version put all five in one
   row, which left the four non-lead tiles about 210px wide. At that width the
   photographs were unreadable and "Specialist Engineering" wrapped onto two
   lines. Two height tiers give every sector enough image area to be
   recognised and enough room for a line of copy.
   -------------------------------------------------------------------------- */

.sector-band {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.sector-card {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  background: var(--ink);
  grid-column: span 2;
  height: clamp(230px, 20vw, 288px);
}
/* First row: wide lead plus one companion tile. */
.sector-card:nth-child(1) { grid-column: span 4; }
.sector-card:nth-child(1),
.sector-card:nth-child(2) { height: clamp(300px, 27vw, 392px); }

.sector-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: saturate(0.85) brightness(0.9);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s ease;
}
.sector-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7,10,12,0.95) 0%, rgba(7,10,12,0.72) 26%, rgba(7,10,12,0.28) 62%, rgba(7,10,12,0.04) 100%);
}
.sector-card:hover > img { transform: scale(1.05); filter: saturate(0.95) brightness(1); }

.sector-card-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px;
  color: var(--paper);
}
.sector-card-text h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.sector-card.is-lead .sector-card-text { padding: 28px; }
.sector-card.is-lead .sector-card-text h3 { font-size: 1.625rem; font-weight: 500; }
.sector-card-text p {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(242, 241, 239, 0.74);
  max-width: 34ch;
}

.sector-footnote {
  margin-top: 22px;
  font-size: 0.875rem;
  color: rgba(12, 16, 19, 0.5);
}

/* --------------------------------------------------------------------------
   Runsheet - a real sequence, so it gets real numbers
   -------------------------------------------------------------------------- */

.runsheet {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(242, 241, 239, 0.2);
}
.runsheet li {
  counter-increment: step;
  background: var(--mineral);
  padding: 28px 26px 32px;
}
.runsheet li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(206, 223, 217, 0.7);
  margin-bottom: 20px;
}
.runsheet h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 9px;
}
.runsheet p {
  font-size: 0.875rem;
  line-height: 1.58;
  color: rgba(242, 241, 239, 0.74);
}

/* --------------------------------------------------------------------------
   Film block
   -------------------------------------------------------------------------- */

.film-block {
  position: relative;
  background: var(--black-alt);
  color: var(--paper);
  overflow: hidden;
  padding: clamp(60px, 8vw, 108px) 0;
}
.film-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.film-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.film-text h2 { margin-bottom: 12px; }
.film-text p {
  font-size: 0.9375rem;
  color: rgba(242, 241, 239, 0.66);
  max-width: 46ch;
}

.film-play {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: 1px solid rgba(242, 241, 239, 0.3);
  padding: 18px 28px 18px 22px;
  color: var(--paper);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.film-play:hover { border-color: var(--fade); background: rgba(206, 223, 217, 0.08); }
.film-play-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--fade);
  flex-shrink: 0;
}
.film-play-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-align: left;
}
.film-play-meta {
  display: block;
  font-size: 0.75rem;
  color: rgba(242, 241, 239, 0.5);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   RFQ
   -------------------------------------------------------------------------- */

.rfq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.rfq-lede h2 { margin-bottom: 18px; max-width: 24ch; }
.rfq-lede > p {
  font-size: 1rem;
  line-height: 1.62;
  color: rgba(12, 16, 19, 0.7);
  max-width: 52ch;
  margin-bottom: 30px;
}
.rfq-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.rfq-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--hair-dark);
}
.rfq-contact dt { color: var(--mineral); margin-bottom: 5px; }
.rfq-contact dd { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.rfq-contact dd a:hover { color: var(--mineral); }

.numbered-list {
  list-style: none;
  counter-reset: rfq;
  margin: 0;
  padding: 0;
}
.numbered-list li {
  counter-increment: rfq;
  position: relative;
  padding: 13px 0 13px 34px;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(12, 16, 19, 0.78);
}
.numbered-list li::before {
  content: counter(rfq);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--mineral);
}

/* --------------------------------------------------------------------------
   Pointer target sizes
   These links were 17px to 30px tall, which is fine to read but tight to
   tap. Given a height without changing how they look.
   -------------------------------------------------------------------------- */

.link-arrow { min-height: 34px; }
.cap-body h3 a,
.capability-row h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.rfq-contact dd a,
.footer-bottom .contact a,
.contact-item a,
.form-field.full > a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

/* --------------------------------------------------------------------------
   Video lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 12, 0.975);
}
.lightbox-panel {
  position: relative;
  width: 100%;
  max-width: 1180px;
}
.lightbox-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
  object-fit: cover;
}
.lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid rgba(242, 241, 239, 0.3);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.lightbox-close:hover { border-color: var(--fade); }

body.lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-top: 72px;
  overflow: hidden;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 52px;
}

.footer-col h4 {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(206, 223, 217, 0.5);
}

.footer-col .logo img { height: 28px; width: auto; margin-bottom: 20px; }
.footer-col p { color: rgba(242, 241, 239, 0.5); font-size: 0.875rem; line-height: 1.6; max-width: 34ch; }

.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.footer-col ul a {
  color: rgba(242, 241, 239, 0.55);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  min-height: 34px;
}
.footer-col ul a:hover { color: var(--fade); }

.footer-address {
  margin-top: 22px;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(242, 241, 239, 0.45);
}

.iso-badge { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.iso-badge .mark {
  background: var(--fade);
  color: var(--ink);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 500;
}
.iso-badge span.label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  color: rgba(242, 241, 239, 0.45);
}

.footer-bottom {
  border-top: 1px solid var(--hair-light);
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(242, 241, 239, 0.35);
}

.footer-bottom .contact { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-bottom .contact a { font-size: 0.8125rem; color: rgba(242, 241, 239, 0.55); }
.footer-bottom .contact a:hover { color: var(--fade); }

/* The artwork is a stacked "CF / COMPOSITES" lockup at 997x288. The ratio
   below crops to the lower word only, bottom-aligned, so it bleeds off the
   page edge at any width. No fixed pixel offsets. */
.footer-wordmark {
  width: 100%;
  aspect-ratio: 997 / 138;
  max-height: 168px;
  overflow: hidden;
  margin-top: 8px;
  position: relative;
  opacity: 0.8;
}
.footer-wordmark img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
}

/* ==========================================================================
   Inner page components carried over from v1 (still in use by the other
   templates). Tokens above flow through, so they pick up the type and
   colour refinements automatically.
   ========================================================================== */

/* Legacy hero (inner pages) */
.hero { position: relative; color: var(--paper); overflow: hidden; }
.hero .hero-bg {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0.2;
}
.hero .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,10,12,0.55), var(--ink));
}
.hero .hero-content {
  position: relative;
  padding: 128px var(--gutter) 108px;
  max-width: var(--container-max);
  margin: 0 auto;
}
.hero .hero-content .eyebrow { color: rgba(206, 223, 217, 0.7); margin-bottom: 16px; }
.hero h1 { color: var(--paper); margin-bottom: 30px; }
.hero .hero-copy { max-width: 56ch; color: rgba(242, 241, 239, 0.68); font-size: 1.125rem; line-height: 1.62; margin-bottom: 36px; }
.hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Legacy stat bar */
.stat-bar { background: var(--fade); padding: 20px var(--gutter); }
.stat-bar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { display: flex; align-items: center; gap: 16px; }
.stat .rule { width: 1px; height: 32px; background: rgba(12, 16, 19, 0.2); }
.stat .value { font-family: var(--font-mono); font-weight: 500; font-size: 0.9375rem; display: block; font-variant-numeric: tabular-nums; }
.stat .label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: rgba(12, 16, 19, 0.58); }

/* Page header */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 168px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero .hero-bg {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0.34;
}
.page-hero .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,10,12,0.5), var(--ink));
}
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { color: rgba(206, 223, 217, 0.6); margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); color: var(--paper); max-width: 24ch; }
.page-hero .lede { max-width: 58ch; margin-top: 22px; color: rgba(242, 241, 239, 0.65); }

/* Legacy card grid */
.card-grid { display: grid; background: var(--hair-light); gap: 1px; }
.card {
  background: var(--ink);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}
.card .index { color: var(--fade); opacity: 0.4; font-family: var(--font-mono); font-size: 0.75rem; }
.card h3 { color: var(--paper); margin-top: 30px; margin-bottom: 10px; font-size: 0.9375rem; }
.card p { color: rgba(242, 241, 239, 0.55); font-size: 0.8125rem; line-height: 1.6; }

/* Legacy tiles
   v1 stacked these with negative z-index (img at -2, scrim at -1). Because
   .tile has no background and no z-index of its own it never formed a
   stacking context, so the image painted behind the nearest one, which is the
   section. On a cream section the photo was hidden behind the section's own
   background colour, taking the cream and mint text down with it.
   The single missing piece was isolation, which contains both layers inside
   the tile. Keeping the layers negative means content positioning is left
   completely alone, so absolutely positioned children like .case-badge stay
   pinned where they were put. */
.tile-grid { display: grid; gap: 14px; }
.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  overflow: hidden;
  min-height: 260px;
  color: var(--paper);
  /* Dark fallback, so the light text stays legible if an image is missing. */
  background: var(--ink);
}
.tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: saturate(0.85) brightness(0.92);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s ease;
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7,10,12,0.95) 0%, rgba(7,10,12,0.74) 20%, rgba(7,10,12,0.34) 56%, rgba(7,10,12,0.06) 100%);
}

.tile:hover > img { transform: scale(1.05); filter: saturate(0.95) brightness(1); }

.tile .eyebrow { color: rgba(206, 223, 217, 0.8); margin-bottom: 8px; }
.tile h3 { color: var(--paper); font-weight: 500; font-size: 1.125rem; }
.tile-detailed h3 { font-size: 1.5rem; margin-bottom: 8px; }
.tile-detailed p { color: rgba(242, 241, 239, 0.72); font-size: 0.875rem; line-height: 1.6; max-width: 52ch; }

/* Legacy case study block */
.case-study { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.case-study .eyebrow { color: var(--fade); margin-bottom: 16px; }
.case-study h2 { color: var(--paper); margin-bottom: 22px; }
.case-study .lede { color: rgba(242, 241, 239, 0.65); font-size: 1rem; margin-bottom: 30px; }
.case-study blockquote { margin: 0 0 30px; padding-left: 20px; border-left: 2px solid var(--fade); }
.case-study blockquote p:first-child { color: var(--paper); font-size: 1rem; margin-bottom: 8px; }
.case-study blockquote cite {
  font-family: var(--font-mono); font-style: normal; font-size: 0.75rem;
  letter-spacing: 0.02em; color: rgba(206, 223, 217, 0.55);
}
.case-study figure { margin: 0; position: relative; }
.case-study figure img { width: 100%; }
.case-study .result { background: var(--fade); color: var(--ink); padding: 20px; }
.case-study .result .eyebrow { color: var(--ink); margin-bottom: 4px; }
.case-study .result p { font-weight: 500; font-size: 0.875rem; }

.case-badge {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 1;
  background: var(--ink);
  color: var(--fade);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 7px 12px;
}

/* Legacy process CTA */
.process-cta {
  background: var(--black-alt);
  min-height: 360px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
}
.process-cta .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.process-cta .content { position: relative; color: var(--paper); max-width: 600px; }
.process-cta .eyebrow { color: rgba(206, 223, 217, 0.55); margin-bottom: 22px; }
.process-cta .play {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--fade);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 30px;
}
.process-cta .play img { width: 17px; height: 17px; }
.process-cta h2 { margin-bottom: 12px; }
.process-cta .note { color: rgba(242, 241, 239, 0.5); font-size: 0.875rem; }

/* Legacy CTA banner */
.cta-banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-banner .eyebrow { color: rgba(12, 16, 19, 0.5); margin-bottom: 16px; }
.cta-banner h2 { max-width: 26ch; }
.cta-banner .ctas { display: flex; flex-wrap: wrap; gap: 14px; flex-shrink: 0; }

/* Generic content */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-field { display: flex; flex-direction: column; gap: 8px; grid-column: span 1; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  color: rgba(242, 241, 239, 0.55);
}
.form-field input, .form-field select, .form-field textarea {
  background: transparent;
  border: 1px solid rgba(242, 241, 239, 0.25);
  color: var(--paper);
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--fade); }

.bg-cream .form-field label,
.bg-paper .form-field label { color: var(--mineral); }
.bg-cream .form-field input, .bg-cream .form-field textarea, .bg-cream .form-field select,
.bg-paper .form-field input, .bg-paper .form-field textarea, .bg-paper .form-field select {
  background: #fff;
  border-color: rgba(12, 16, 19, 0.14);
  color: var(--ink);
}
.bg-cream .form-field input::placeholder, .bg-cream .form-field textarea::placeholder,
.bg-paper .form-field input::placeholder, .bg-paper .form-field textarea::placeholder {
  color: rgba(12, 16, 19, 0.45);
}

.contact-item { margin-bottom: 30px; }
.contact-item .eyebrow { margin-bottom: 8px; }
.contact-item p, .contact-item a { font-size: 1rem; }
.contact-item h3 { color: var(--ink); }

/* Sector pages */
.sector-hero { min-height: 500px; display: flex; align-items: flex-end; }
.sector-hero .hero-bg { opacity: 1; }
.sector-hero .hero-content { padding: 156px 0 60px; width: 100%; }
.sector-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 0; }
.sectors-hero .hero-content { padding: 156px var(--gutter) 60px; }
.sectors-hero h1 { max-width: 24ch; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(206, 223, 217, 0.68);
  margin-bottom: 36px;
}
.back-link .arrow { width: 13px; height: 9px; }

.sector-copy { max-width: 66ch; margin-top: 16px; font-size: 1.0625rem; line-height: 1.62; color: rgba(12, 16, 19, 0.7); }

.dot-list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--hair-dark); }
.dot-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 0.9375rem;
  color: rgba(12, 16, 19, 0.72);
}
.dot-list li::before {
  content: '';
  width: 8px; height: 1px;
  background: var(--mineral);
  flex-shrink: 0;
}

/* Capability list (inner page) */
.capability-list { border-top: 1px solid var(--hair-dark); }
.capability-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 30px 0;
  border-bottom: 1px solid var(--hair-dark);
}
.capability-row .index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(12, 16, 19, 0.4);
  padding-top: 5px;
  width: 22px;
  flex-shrink: 0;
}
.capability-row h3 { color: var(--ink); font-size: 1.25rem; font-weight: 500; margin-bottom: 8px; }
.capability-row h3 a:hover { color: var(--mineral); }
.capability-row p { font-size: 0.9375rem; color: rgba(12, 16, 19, 0.7); max-width: 60ch; }

/* About page */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-card { background: var(--ink); padding: 20px; }
.info-card .value { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.875rem; color: var(--fade); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.info-card .label { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: rgba(242, 241, 239, 0.45); }

.ethos-block { max-width: 62ch; margin: 0 auto; text-align: center; }
.ethos-block .eyebrow { color: rgba(206, 223, 217, 0.55); display: block; margin-bottom: 16px; }
.ethos-block h2 { color: var(--paper); margin-bottom: 22px; }
.ethos-block p { color: rgba(242, 241, 239, 0.65); font-size: 1rem; line-height: 1.62; margin-top: 16px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.team-grid figure { margin: 0; }
.team-grid img { width: 100%; height: 260px; object-fit: cover; filter: saturate(0.9); }
.team-grid figcaption {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  color: var(--mineral); padding-top: 14px;
}

/* Capability detail page */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media-grid img { width: 100%; height: 220px; object-fit: cover; }

.highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.highlight-card {
  border: 1px solid var(--hair-dark);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.highlight-card h3 { color: var(--ink); }

.spec-list { margin: 16px 0 0; border-top: 1px solid var(--hair-dark); }
.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair-dark);
}
.spec-row dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--mineral); }
.spec-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Quote page */
.enquiry-tabs { display: flex; gap: 1px; background: var(--hair-dark); }
.enquiry-tabs .tab {
  flex: 1;
  padding: 16px 12px;
  background: var(--paper-dim);
  border: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(12, 16, 19, 0.5);
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.enquiry-tabs .tab.active { background: var(--ink); color: var(--fade); }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px dashed rgba(12, 16, 19, 0.22);
  padding: 40px 24px;
  text-align: center;
}
.dropzone p { font-size: 0.9375rem; color: rgba(12, 16, 19, 0.55); margin-bottom: 6px; }
.dropzone .filetypes { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: rgba(12, 16, 19, 0.45); }
.dropzone.is-dragover { border-color: var(--mineral); background: rgba(58, 82, 86, 0.07); }
.dropzone .file-list { margin-top: 12px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--mineral); }

/* ==========================================================================
   Motion. One orchestrated reveal on the hero, nothing else on scroll.
   Per-section fade-and-slide is deliberately not used.
   ========================================================================== */

.v-hero-title,
.v-hero-lede,
.v-hero-actions {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-in 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.v-hero-lede    { animation-delay: 0.1s; }
.v-hero-actions { animation-delay: 0.18s; }
.spec-strip {
  opacity: 0;
  animation: hero-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 0.26s forwards;
}

@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Legacy reveal hook: kept so existing pages do not break, but the transform
   is removed so nothing slides on scroll. */
[data-reveal] { opacity: 0; transition: opacity 0.6s ease; }
[data-reveal].is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .v-hero-title, .v-hero-lede, .v-hero-actions, .spec-strip,
  [data-reveal] { opacity: 1; transform: none; }
}

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

@media (max-width: 1180px) {
  /* Lead goes full width, remaining four pair up two-by-two. */
  .sector-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sector-card { grid-column: span 2; height: clamp(230px, 24vw, 290px); }
  .sector-card:nth-child(1) { grid-column: 1 / -1; height: clamp(260px, 28vw, 340px); }
  .sector-card:nth-child(2) { height: clamp(230px, 24vw, 290px); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .facility-layout,
  .rfq-layout,
  .case-feature { grid-template-columns: 1fr; }
  .runsheet { grid-template-columns: repeat(2, 1fr); }
  .cap-row { grid-template-columns: 220px 1fr; }
  .spec-strip dl { grid-template-columns: repeat(2, 1fr); }
  .spec-cell:nth-child(2) { border-right: none; }
  .spec-cell:nth-child(1), .spec-cell:nth-child(2) { border-bottom: 1px solid var(--hair-light); }
}

@media (max-width: 900px) {
  :root { --gutter: 22px; --nav-h: 62px; }

  .make-grid { grid-template-columns: 1fr; }
  .sector-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-card { grid-column: span 1; }
  .sector-card:nth-child(1) { grid-column: 1 / -1; }
  .facility-media { grid-template-columns: 1fr 1fr; }
  .film-inner { flex-direction: column; align-items: flex-start; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--paper);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .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); }

  /* The nav bar's backdrop-filter makes it the containing block for any
     fixed-position descendant, so the panel below was being sized against
     the 62px bar rather than the viewport. Dropping the filter on small
     screens hands the panel back to the viewport, and saves the GPU work.
     The bar is opaque here anyway. */
  .site-nav {
    backdrop-filter: none;
    background: var(--ink);
  }

  /* Off-canvas panel, kept inside the viewport at all times.
     Previously this slid to translateX(100%), which parked it at
     100vw..200vw and doubled document.scrollWidth, giving every page a
     horizontal scrollbar even when the menu was shut. Fading and dropping
     it in place has no geometry outside the viewport. */
  .nav-links {
    display: flex;
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 44px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 105;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }

  /* Tap targets. 52px rows for the top level, 46px inside a submenu. */
  .nav-links > a,
  .nav-links > .dropdown { width: 100%; border-bottom: 1px solid var(--hair-light); }
  .nav-links > .dropdown { flex-direction: column; align-items: stretch; padding: 0; }
  .nav-links > a,
  .nav-links .dropdown-trigger {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-links a { font-size: 1rem; }
  .nav-links .btn { margin-top: 22px; min-height: 52px; width: 100%; }

  .dropdown-menu {
    position: static;
    left: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    border: none;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    padding: 4px 0 0 14px;
    width: 100%;
  }
  /* No floating panel on mobile, so the backing box is not needed. */
  .dropdown-menu::before { display: none; }
  .dropdown.open .dropdown-menu { display: flex; }
  .dropdown-menu a {
    padding: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
  }
  .dropdown-menu a:first-of-type,
  .dropdown-menu a:last-of-type { margin: 0; }

  .stat-bar .wrap, .footer-grid, .case-study, .two-col, .form-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr !important; }
  .tile-grid { grid-template-columns: 1fr !important; }
  .cta-banner .wrap { flex-direction: column; align-items: flex-start; }
  .capability-row { flex-direction: column; gap: 10px; }
  .info-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid, .highlight-grid { grid-template-columns: 1fr; }
  .case-feature-body { flex-direction: column; align-items: flex-start; gap: 16px; }
  .enquiry-tabs { flex-direction: column; }
  .tile-detailed[style] { grid-column: 1 !important; grid-row: auto !important; }
  .hero .hero-content { padding: 100px var(--gutter) 84px; }
  .page-hero { padding: 132px 0 52px; }
  .sector-hero .hero-content { padding: 124px 0 48px; }
  .sectors-hero .hero-content { padding: 124px var(--gutter) 48px; }
}

@media (max-width: 720px) {
  .cap-row { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
  .cap-media img { aspect-ratio: 16 / 9; }
  .runsheet { grid-template-columns: 1fr; }
  .sector-band { grid-template-columns: 1fr; }
  .sector-card,
  .sector-card:nth-child(1),
  .sector-card:nth-child(2) { grid-column: 1 / -1; height: clamp(230px, 54vw, 300px); }
  .sector-card.is-lead .sector-card-text { padding: 22px; }
  .sector-card.is-lead .sector-card-text h3 { font-size: 1.375rem; }
  .facility-media { grid-template-columns: 1fr; }
  .v-hero { min-height: 0; }
  .v-hero-inner { padding-top: 84px; padding-bottom: 44px; }
  .spec-strip dl { grid-template-columns: repeat(2, 1fr); }
  .spec-cell { border-bottom: 1px solid var(--hair-light); padding: 13px 16px; }
  .spec-cell:first-child { padding-left: var(--gutter); }
  .spec-cell:nth-child(2n) { border-right: none; }
  .spec-cell:nth-child(3) { padding-left: var(--gutter); }
  .spec-strip .wrap { flex-direction: column; gap: 0; }
  .v-hero-sound { border-left: none; width: 100%; justify-content: flex-start; padding: 14px var(--gutter); }
  .btn { width: 100%; }
  .v-hero-actions .btn, .rfq-actions .btn, .cta-banner .ctas .btn { width: auto; flex: 1 1 auto; }
  .lightbox-close { top: auto; bottom: -46px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Small-screen refinements
   --------------------------------------------------------------------------
   Two jobs here. First, a legible type floor and tap targets big enough to
   hit: the design uses 11px mono for data labels, which is fine on a desktop
   spec sheet but too small on a phone. Second, overriding the inline styles
   left in the v1 templates. Those sit at the top of the cascade, so !important
   is the only way to reach them without editing markup on every page.
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Type floor. Nothing below 12px, body copy no smaller than 13px. --- */
  .eyebrow,
  .col-head,
  dl dt,
  .btn,
  .link-arrow,
  .footer-col h4,
  .iso-badge span.label,
  .footer-bottom p,
  .form-field label,
  .case-badge,
  .team-grid figcaption,
  .facility-media figcaption,
  .dropzone .filetypes,
  .v-hero-sound { font-size: 0.75rem; }

  .cap-spec dd,
  .fac-row dd,
  .spec-row dd,
  .runsheet li::before,
  .numbered-list li::before,
  .film-play-meta,
  .tbc, .tbc-val { font-size: 0.8125rem; }

  .card p,
  .footer-col p,
  .footer-col ul a,
  .footer-address,
  .footer-bottom .contact a,
  .col-note,
  .cap-footnote,
  .sector-footnote { font-size: 0.875rem; }

  /* --- Tap targets --- */
  .footer-col ul { gap: 0; }
  .footer-col ul a {
    display: flex;
    align-items: center;
    min-height: 42px;
  }
  .footer-bottom .contact { gap: 0; flex-direction: column; align-items: flex-start; }
  .footer-bottom .contact a { display: flex; align-items: center; min-height: 42px; }
  .link-arrow,
  .back-link { min-height: 44px; display: inline-flex; align-items: center; }
  .section-head .link-arrow { align-self: flex-start; }
  .site-nav .logo,
  .footer-col .logo { display: flex; align-items: center; min-height: 44px; }
  .dot-list li a,
  .capability-row h3 a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Stack section headings above their "view all" link rather than
     squeezing both onto one line. */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* --- Overrides for v1 inline styles --- */
  .two-col[style],
  .tile-grid[style],
  .card-grid[style],
  .form-grid[style],
  .info-grid[style],
  .media-grid[style],
  .highlight-grid[style] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 20px !important;
  }
  .hero-content[style] {
    padding-top: 108px !important;
    padding-bottom: 52px !important;
  }
  /* Inline 72px and 60px headings on the case study templates. */
  .hero-content h1[style],
  .page-hero h1[style] {
    font-size: clamp(1.9rem, 8.5vw, 2.75rem) !important;
    line-height: 1.08 !important;
  }
  h2[style] { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .tile h3[style],
  .case-feature-body h3[style] { font-size: clamp(1.15rem, 5.4vw, 1.5rem) !important; }
  .tile[style] { min-height: 240px !important; }
  /* Fixed pixel image heights in the templates. */
  img[style*="height:380px"],
  img[style*="height:320px"] { height: auto !important; aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  /* Buttons go full width so they are easy to hit, and their labels no
     longer have room to sit side by side. */
  .v-hero-actions,
  .rfq-actions,
  .cta-banner .ctas,
  .hero .hero-ctas { flex-direction: column; align-items: stretch; }
  .v-hero-actions .btn,
  .rfq-actions .btn,
  .cta-banner .ctas .btn,
  .hero .hero-ctas .btn { width: 100%; flex: 0 0 auto; }

  .team-grid { grid-template-columns: 1fr; }
  .team-grid img { height: 240px; }
  .facility-media { grid-template-columns: 1fr; }
  .film-play { width: 100%; }
}