/* ==========================================================================
   WNCC — stylesheet
   Reads every value from tokens.css. Ordered: reset → base → layout →
   header → hero → components → sections → footer → motion → responsive.
   Selectors are kept to a single class wherever possible so that section
   padding is never fought over by two rules of equal specificity.
   ========================================================================== */

/* --------------------------------------------------------------- 1. reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- 2. base */
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }

a { color: var(--marine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marine-deep); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--navy-900); color: #fff; padding: .75rem 1.25rem;
  border-radius: var(--radius); font-size: var(--t-sm); font-weight: 500;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: .75rem; color: #fff; }

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

/* -------------------------------------------------------------- 3. layout */
.shell {
  width: 100%;
  max-width: var(--shell-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: 880px; }

.band { padding-block: var(--section-y); }
.band-shell { background: var(--shell); }
.band-navy { background: var(--navy-900); color: var(--on-navy); }
.band-navy h2, .band-navy h3 { color: #fff; }

.band-tight { padding-block: calc(var(--section-y) * .62); }

/* A section head: mono eyebrow, serif title, optional lead. */
.head { max-width: var(--measure); }
.head-wide { max-width: 76ch; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sand-deep);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
  max-width: 5rem;
}
.eyebrow-plain::after { display: none; }
.band-navy .eyebrow { color: var(--sand); }
.band-navy .eyebrow::after { background: rgba(201, 177, 137, .3); }

.lead {
  font-size: var(--t-lead);
  color: var(--body);
  max-width: var(--measure);
  margin-top: 1.15rem;
}
.band-navy .lead { color: var(--on-navy); }

.measure { max-width: var(--measure); }

/* -------------------------------------------------------------- 4. header */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--base) var(--ease);
}
.masthead.is-stuck { box-shadow: var(--shadow-nav); }

.masthead-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 78px;
}

.brand { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.brand img { height: 42px; width: auto; }
.brand:focus-visible { outline-offset: 6px; }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .25rem; }

.nav-link {
  display: block;
  padding: .7rem .95rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  position: relative;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-link:hover { color: var(--marine); background: var(--shell); }

/* Active page marker: a short marine rule under the label. */
.nav-link[aria-current="page"] { color: var(--marine); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute; left: .95rem; right: .95rem; bottom: .35rem;
  height: 2px; background: var(--marine); border-radius: 2px;
}

.nav-item { position: relative; }

.nav-toggle {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem .95rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  border-radius: var(--radius);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-toggle:hover { color: var(--marine); background: var(--shell); }
.nav-toggle .chev { transition: transform var(--fast) var(--ease); }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + .3rem); right: 0;
  min-width: 216px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: .4rem;
  display: none;
}
.dropdown.is-open { display: block; }

.dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .75rem;
  font-size: var(--t-sm); color: var(--ink); text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dropdown a:hover { background: var(--shell); color: var(--marine); }
.dropdown a .ext { color: var(--muted); flex-shrink: 0; }
.dropdown a:hover .ext { color: var(--marine); }

.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink);
}
.burger:hover { background: var(--shell); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 78px 0 0 0; z-index: 99;
  background: var(--paper);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  display: none;
}
.drawer.is-open { display: block; }
body.is-locked { overflow: hidden; }

.drawer-link {
  display: block;
  padding: .95rem 0;
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer-link[aria-current="page"] { color: var(--marine); }

.drawer-group { padding-block: 1.4rem .4rem; }
.drawer-group-label {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sand-deep);
  margin-bottom: .6rem;
}
.drawer-sub {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 0; font-size: var(--t-sm);
  color: var(--body); text-decoration: none;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------- 5. hero */
.hero {
  position: relative;
  isolation: isolate;          /* keeps the negative-z photo layer inside the hero */
  background: var(--navy-900);
  color: var(--on-navy);
  overflow: hidden;
}
/* Ambient ground: one marine bloom, one sand bloom, and a 44px survey grid
   masked to fade out — the site plan under the plant photograph. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 78% 12%, rgba(47, 107, 208, .30), transparent 62%),
    radial-gradient(52% 62% at 8% 92%, rgba(122, 101, 53, .22), transparent 66%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(232, 238, 248, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 238, 248, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem);
  min-block-size: min(72svh, 640px);
}

.hero-est {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sand);
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.4rem;
}
.hero-est::before {
  content: ""; width: 2.25rem; height: 1px; background: var(--sand); opacity: .7;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: -.022em;
  font-weight: 600;
  color: #fff;
}
.hero-title em {
  font-style: italic;
  color: var(--marine-lift);
}

.hero-body {
  font-size: var(--t-lead);
  color: var(--on-navy);
  max-width: 54ch;
  margin-top: 1.5rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

/* The plant photograph runs the full width of the page, behind the claim. */
.hero-figure {
  position: absolute; inset: 0;
  z-index: -2;
  margin: 0;
  overflow: hidden;
}
.hero-figure picture { display: block; block-size: 100%; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Type over a photograph needs its own ground: navy carried in from the
   leading edge, plus a top-and-tail fade that seats masthead and caption. */
.hero-scrim {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,
      rgba(6, 21, 47, .93) 0%, rgba(6, 21, 47, .84) 34%,
      rgba(6, 21, 47, .46) 66%, rgba(6, 21, 47, .22) 100%),
    linear-gradient(to bottom,
      rgba(6, 21, 47, .46) 0%, rgba(6, 21, 47, .06) 30%,
      rgba(6, 21, 47, .06) 60%, rgba(6, 21, 47, .58) 100%);
}

.hero-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem clamp(1.15rem, 5vw, 3rem) .95rem;
  text-align: end;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  background: linear-gradient(transparent, rgba(6, 21, 47, .55));
}

/* --------------------------------------------------------- 6. page heads */
.page-head {
  position: relative;
  background: var(--navy-900);
  color: var(--on-navy);
  overflow: hidden;
}
.page-head-media {
  position: absolute; inset: 0;
}
.page-head-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .26;
  filter: saturate(.75);
}
.page-head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--navy-900) 22%, rgba(6, 21, 47, .74) 68%, rgba(6, 21, 47, .5));
}
.page-head-inner {
  position: relative; z-index: 1;
  padding-block: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);
}
.page-head h1 { color: #fff; font-size: var(--t-h1); }
.page-head .lead { color: var(--on-navy); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--on-navy-mute);
  margin-bottom: 1.15rem;
}
.crumbs a { color: var(--on-navy-mute); text-decoration: none; }
.crumbs a:hover { color: var(--marine-lift); text-decoration: underline; }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current="page"] { color: var(--sand); }

/* ----------------------------------------------------------- 7. buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.4rem;
  font-size: var(--t-sm); font-weight: 500;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { transition: transform var(--base) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary { background: var(--marine); color: #fff; border-color: var(--marine); }
.btn-primary:hover { background: var(--marine-deep); border-color: var(--marine-deep); color: #fff; }

.btn-ghost { color: #fff; border-color: rgba(232, 238, 248, .32); }
.btn-ghost:hover { background: rgba(232, 238, 248, .1); border-color: rgba(232, 238, 248, .6); color: #fff; }

.btn-outline { color: var(--ink); border-color: var(--line-2); background: var(--paper); }
.btn-outline:hover { border-color: var(--marine); color: var(--marine); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--marine); text-decoration: none;
}
.link-arrow .arrow { transition: transform var(--base) var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* -------------------------------------------------------------- 8. cards */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The list item stretches to the row height; the card has to be told to fill
   it, or a two-line title makes one card taller than its neighbours. */
.grid > li { display: flex; }
.grid > li > .card { flex: 1; }

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease),
              border-color var(--base) var(--ease);
}
a.card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  border-color: var(--line-2);
}

.card-media { position: relative; background: var(--sunk); overflow: hidden; }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 500ms var(--ease);
}
a.card:hover .card-media img { transform: scale(1.035); }

.card-body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card-title {
  font-family: var(--font-display);
  font-size: 1.1875rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
a.card:hover .card-title { color: var(--marine); }
.card-note { font-size: var(--t-sm); color: var(--muted); }
.card-foot { margin-top: auto; padding-top: 1.25rem; }

/* Count chip on a division card: how many lines it carries. */
.card-count {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand-deep);
  margin-bottom: .6rem;
}

/* ------------------------------------------------- 9. representation index
   The signature block. WNCC is an agent, so the breadth of what it
   represents is the substance of the business. This sets every product line
   from the four division pages as one scannable register, the way an
   engineering handbook indexes its parts.                                 */
.index-wrap {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.index-group { border-bottom: 1px solid var(--line); }
.index-group:last-child { border-bottom: 0; }

.index-row {
  display: grid;
  grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: 2rem;
  align-items: start;
}

.index-key { position: sticky; top: 96px; }
.index-key-name {
  font-family: var(--font-display);
  font-size: 1.1875rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
  text-decoration: none;
  display: inline-block;
}
a.index-key-name:hover { color: var(--marine); }
.index-key-meta {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sand-deep);
  margin-top: .5rem;
}

/* A grid rather than CSS columns: a division with three lines fills three
   cells across instead of stacking two and leaving a column empty. */
.index-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .15rem 2.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.95;
  color: var(--body);
}
.index-terms li {
  padding-left: 1rem;
  position: relative;
}
.index-terms li::before {
  content: "";
  position: absolute; left: 0; top: .85em;
  width: .45rem; height: 1px;
  background: var(--sand);
}
.index-terms .sub {
  color: var(--muted);
  font-style: italic;
}

/* --------------------------------------------------------- 10. statement */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.statement-copy p + p { margin-top: 1.15rem; }

.figure {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.figure img { width: 100%; height: auto; }
.figure figcaption {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--shell);
}

/* ------------------------------------------------------- 11. spec blocks
   A division page: a heading, an optional paragraph, a figure and a list of
   equipment. Repeated down the page.                                      */
.spec { border-top: 1px solid var(--line); padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.spec:first-of-type { border-top: 0; padding-top: 0; }

.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.spec-index {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  color: var(--sand-deep);
  margin-bottom: .75rem;
}
.spec h2 { font-size: var(--t-h2); }
.spec h3 { font-size: var(--t-h3); }
.spec p { margin-top: 1rem; max-width: var(--measure); }

.spec-note {
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  border-left: 2px solid var(--line-2);
  background: var(--shell);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* Equipment list — mono, ruled, scannable. */
.spec-list {
  margin-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.spec-list li {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--body);
  padding: .62rem 0 .62rem 1.15rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.spec-list li::before {
  content: "";
  position: absolute; left: 0; top: 1.02em;
  width: .5rem; height: 1px; background: var(--sand);
}

.spec-sub {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 1.75rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line-2);
}
.spec-sub:first-child { margin-top: 0; }

/* ---------------------------------------------------------- 12. gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.tile {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sunk);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease);
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 45 / 32;
  transition: transform 600ms var(--ease);
}
.tile:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.tile:hover img { transform: scale(1.04); }
.tile-zoom {
  position: absolute; right: .7rem; bottom: .7rem;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: rgba(6, 21, 47, .72);
  color: #fff;
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}
.tile:hover .tile-zoom, .tile:focus-visible .tile-zoom { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 12, 26, .94);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: min(1400px, 100%);
  max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  padding: 1.25rem;
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: rgba(255, 255, 255, .75);
}
.lightbox-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  transition: background var(--fast) var(--ease);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .2); }
.lightbox-prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(.5rem, 2vw, 1.5rem); }
.lightbox-close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.5rem, 2vw, 1.5rem); transform: none; }

/* ----------------------------------------------------- 13. certificates */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.cert {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow var(--base) var(--ease), transform var(--base) var(--ease);
}
.cert:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.cert-media {
  background: var(--sunk);
  padding: 1.25rem;
  display: grid; place-items: center;
}
.cert-media img {
  width: 100%; height: auto;
  aspect-ratio: 7 / 9;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  background: #fff;
}
.cert-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.cert-name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.cert-meta {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--sand-deep);
  margin-bottom: .5rem;
}
.cert-foot { margin-top: auto; padding-top: 1rem; }

/* --------------------------------------------------------- 14. contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.detail-list { border-top: 1px solid var(--line); }
.detail {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.detail dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sand-deep);
}
.detail dd { margin: 0; font-size: var(--t-body); color: var(--ink); }
.detail dd a { text-decoration: none; }
.detail dd a:hover { text-decoration: underline; }

.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.field .req { color: var(--marine); }
.field input, .field textarea {
  width: 100%;
  padding: .8rem .9rem;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(47, 107, 208, .16);
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.field-error {
  font-size: var(--t-xs);
  color: var(--stop);
  display: none;
}
.field.has-error input, .field.has-error textarea { border-color: var(--stop); }
.field.has-error .field-error { display: block; }

/* Honeypot — off-screen, never shown, never focusable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  font-size: var(--t-sm);
  padding: .85rem 1rem;
  border-radius: var(--radius);
  display: none;
}
.form-status.is-ok { display: block; background: #EAF5F0; color: var(--ok); border: 1px solid #BFE0D2; }
.form-status.is-bad { display: block; background: #FBEDED; color: var(--stop); border: 1px solid #EFC9C9; }

.form-note { font-size: var(--t-xs); color: var(--muted); }

/* ------------------------------------------------------------ 15. footer */
.footer { background: var(--navy-900); color: var(--on-navy-mute); }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.footer-logo { height: 46px; width: auto; margin-bottom: 1.35rem; }
.footer-about { font-size: var(--t-sm); max-width: 42ch; color: var(--on-navy-mute); }

.footer-head {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.1rem;
}
.footer-list { display: grid; gap: .6rem; }
.footer-list a {
  font-size: var(--t-sm);
  color: var(--on-navy-mute);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.footer-list a:hover { color: #fff; }

.footer-contact { display: grid; gap: .6rem; font-size: var(--t-sm); }
.footer-contact a { color: var(--on-navy-mute); text-decoration: none; }
.footer-contact a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(232, 238, 248, .12);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: var(--t-xs);
}
.footer-parent { color: var(--on-navy-mute); }
.footer-parent a { color: var(--marine-lift); text-decoration: none; }
.footer-parent a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- 16. cta */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  color: var(--on-navy);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 88% 20%, rgba(47, 107, 208, .34), transparent 64%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; font-size: var(--t-h2); }
.cta p { margin-top: .75rem; max-width: 52ch; }

/* ----------------------------------------------------------- 17. motion */
/* Reveals are scoped to .js, which an inline script sets on <html> before
   paint. Without JavaScript the content is simply visible — it must never be
   left at opacity 0 for a reader or a crawler. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* Hero load sequence */
.js .hero-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  animation: rise 700ms var(--ease) forwards;
}
.js .hero-stagger > *:nth-child(1) { animation-delay: 60ms; }
.js .hero-stagger > *:nth-child(2) { animation-delay: 140ms; }
.js .hero-stagger > *:nth-child(3) { animation-delay: 220ms; }
.js .hero-stagger > *:nth-child(4) { animation-delay: 300ms; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero-stagger > * { opacity: 1; transform: none; animation: none; }
}

/* ------------------------------------------------------- 18. responsive */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .nav, .dropdown { display: none; }
  .burger { display: flex; }
  .hero-inner { gap: 2.5rem; }
  /* Below the split the copy runs the full measure, so the horizontal wash
     has nowhere clean to fall — darken evenly instead. */
  .hero-scrim {
    background-image:
      linear-gradient(to bottom,
        rgba(6, 21, 47, .80) 0%, rgba(6, 21, 47, .72) 45%, rgba(6, 21, 47, .88) 100%);
  }
  .statement { grid-template-columns: minmax(0, 1fr); }
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .index-key { position: static; }
  .cta { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .grid-3, .gallery-grid, .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-terms { column-gap: 1.5rem; }
}

@media (max-width: 560px) {
  .masthead-inner { min-height: 66px; }
  .drawer { inset-block-start: 66px; }
  .brand img { height: 34px; }
  .grid-2, .grid-3, .grid-4, .gallery-grid, .cert-grid { grid-template-columns: minmax(0, 1fr); }
  .detail { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------- 19. printing */
@media print {
  .masthead, .drawer, .footer, .cta, .lightbox, .skip-link { display: none !important; }
  body { color: #000; background: #fff; }
  .page-head { background: #fff; color: #000; }
  .page-head h1 { color: #000; }
  .page-head-media { display: none; }
}