/* ==========================================================================
   Duravex — site styles

   The design system below is ported from the Duravex line card, the page
   management approved. It was written as a self-contained fragment pasted
   into Drupal, with all CSS inline and every class scoped under `.dvx` to
   survive DXPR. None of that is needed here: the scoping wrapper is gone,
   classes are unprefixed, and the styles live in this file.

   ⚠ PALETTE DIVERGENCE — see docs/branding.md.
   These are the line card's values, not the branding PDF's. They are close
   but not identical, and --zinc has no equivalent in the guidelines at all.
   Kept as-is so the approved design is preserved; the reconciliation is an
   open decision, not an oversight.

       line card            branding.md
       --ink   #0D1B2F      #011636
       --brand #17325C      #003265
       --paper #F2F4F6      #F5F5F5
       --zinc  #F2B01E      (none)
   ========================================================================== */

:root {
  --ink:      #0D1B2F;
  --brand:    #17325C;
  --brand-2:  #254C86;
  --steel:    #69747F;
  --edge:     #D3D8DE;
  --paper:    #F2F4F6;
  --surface:  #FFFFFF;
  --zinc:     #F2B01E;

  --muted:    #46566A;   /* body copy on light */
  --on-dark:  #DDE5EF;   /* body copy on brand */
  --dim:      #8FA3BE;   /* labels on ink */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --pad:  clamp(20px, 5vw, 64px);
  --maxw: 1180px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  margin: 0; letter-spacing: -0.02em; line-height: 1.08;
  text-wrap: balance;   /* even line lengths across a headline */
}
p { margin: 0; text-wrap: pretty; }   /* no single-word last lines */
img { max-width: 100%; height: auto; display: block; border: 0; }
figure, dl, dd { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--zinc); outline-offset: 3px; }

.wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding-left: var(--pad); padding-right: var(--pad);
}

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brand-2);
}
.rule { width: 44px; height: 4px; background: var(--zinc); border: 0; margin: 0 0 18px; }
.cap {
  font-family: var(--mono); font-size: 11px; color: var(--steel);
  letter-spacing: .08em; text-transform: uppercase; margin-top: 10px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--brand); color: #fff; padding: .5rem 1rem;
}

/* ---------- Site header ---------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--edge); }
.header-inner {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 18px;
}
.logo img { width: 150px; }
.site-header nav ul {
  display: flex; flex-wrap: wrap; gap: 26px;
  list-style: none; margin: 0; padding: 0;
}
.site-header nav a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { border-bottom-color: var(--zinc); }

/* ---------- Certification strip ---------- */

.certbar { background: var(--ink); color: #C6CFDA; }
.certbar .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between;
  padding-block: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
}
.certbar strong { color: #fff; font-weight: 500; }

/* ---------- Hero ---------- */

.hero { background: var(--surface); border-bottom: 1px solid var(--edge); }
.hero .wrap {
  padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(36px, 5vw, 66px);
}

/* Two-column only when there is actually a second column to fill. */
.hero:has(.hero-media) .wrap {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 60px); align-items: center;
}

/* Dark variant — used on the homepage, where the hero opens the page rather
   than introducing a line card. Colours are set in the "Dark bands" block
   near the end of this file, not here. */
.hero--dark { background: var(--ink); border-bottom: 0; }
.hero--dark .lede { max-width: 62ch; }
.hero--dark .rule { margin-bottom: 22px; }

/* Photographic variant.

   The scrim is not decoration — it is what makes the text legible, so it is
   built to work at any crop rather than relying on the photo's composition
   surviving `object-fit: cover`. Two layers:

     1. a left-weighted horizontal wash, so copy sits on near-solid ink while
        the laser head and sparks stay visible on the right;
     2. a full-width vertical wash, which carries the mobile case where cover
        crops to the bright centre of the frame.

   Text is never placed on bare photo. */
.hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.hero--photo .hero-bg {
  position: absolute; inset: 0; z-index: -2;
}
.hero--photo .hero-bg picture { display: block; width: 100%; height: 100%; }
.hero--photo .hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
}
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgb(13 27 47 / .94) 0%,
      rgb(13 27 47 / .88) 32%,
      rgb(13 27 47 / .50) 60%,
      rgb(13 27 47 / .15) 100%),
    linear-gradient(180deg,
      rgb(13 27 47 / .25) 0%,
      rgb(13 27 47 / .06) 45%,
      rgb(13 27 47 / .40) 100%);
}
.hero--photo .wrap { position: relative; }
.hero--photo .lede { max-width: 54ch; }

/* Below the split point the photo is cropped hard to its centre, which is the
   brightest, busiest part of the frame. Flatten the wash so it covers evenly. */
@media (max-width: 860px) {
  .hero--photo::before {
    background: linear-gradient(180deg, rgb(13 27 47 / .90) 0%, rgb(13 27 47 / .82) 60%, rgb(13 27 47 / .92) 100%);
  }
  .hero--photo .hero-bg img,
  .hero--photo .hero-bg picture { object-position: 60% 50%; }
}
.hero h1 {
  font-size: clamp(28px, 3.9vw, 44px); font-weight: 800;
  margin: 14px 0 20px; max-width: 18ch;
}
.hero h1 .thin { font-weight: 500; color: var(--brand-2); }
.hero .lede { font-size: clamp(16px, 1.4vw, 18px); color: #3B4A5C; max-width: 46ch; }
.hero-media img { border-radius: 2px; box-shadow: 0 18px 40px -24px rgb(13 27 47 / .55); }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}

/* ---------- Fact strip ---------- */

.facts { background: var(--ink); color: #fff; }
.facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 0; }
.fact { padding: 24px; border-left: 1px solid rgb(255 255 255 / .14); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact dt {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.fact dd {
  margin-top: 6px; font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 2vw, 25px); letter-spacing: -.01em;
}

@media (max-width: 820px) {
  .facts .wrap { grid-template-columns: repeat(2, 1fr); }
  .fact { border-left: 0; padding: 18px 0; }
  .fact:nth-child(2n) { padding-left: 24px; border-left: 1px solid rgb(255 255 255 / .14); }
}

/* ---------- Section shell ---------- */

.sec { padding-block: clamp(48px, 6.5vw, 84px); }
.sec-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; }
.sec-head p { color: var(--muted); margin-top: 14px; }

/* ---------- Attenuation scale ---------- */

.scale {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 2px;
  padding: clamp(22px, 3.2vw, 38px); --labelw: 190px;
}
.axis { position: relative; height: 22px; margin-left: var(--labelw); border-bottom: 1px solid var(--edge); }
.tick {
  position: absolute; bottom: 0; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--steel);
}
.tick::after {
  content: ""; position: absolute; left: 50%; bottom: -6px;
  width: 1px; height: 6px; background: var(--edge);
}
.grade {
  display: grid; grid-template-columns: var(--labelw) 1fr; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--edge);
}
.grade:last-of-type { border-bottom: 0; }
.grade-name { font-family: var(--display); font-weight: 700; font-size: 17px; padding-right: 18px; }
.grade-name span {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--steel); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px;
}
.track { position: relative; height: 34px; }
.track::before {
  content: ""; position: absolute; inset: 14px 0 auto;
  height: 6px; background: var(--paper); border-radius: 1px;
}
.bar { position: absolute; top: 8px; height: 18px; }
.fill {
  position: absolute; inset: 0; border-radius: 1px; background: var(--brand-2);
  transform: scaleX(0); transform-origin: left center;
  animation: grow .85s cubic-bezier(.22,.75,.3,1) forwards;
}
.bar::after {
  content: ""; position: absolute; right: 0; top: 0; width: 3px; height: 100%;
  background: var(--zinc); opacity: 0; animation: fade .4s ease forwards;
}
.bar-val {
  position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 12px);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--ink); white-space: nowrap;
  opacity: 0; animation: fade .5s ease forwards;
}

/* Depth ramp: lighter grades read as lower attenuation. */
.g1 .fill { background: #93A6BF; animation-delay: .05s; }
.g2 .fill { background: #5A7BA8; animation-delay: .20s; }
.g3 .fill { background: var(--brand-2); animation-delay: .35s; }
.g4 .fill { background: var(--brand);   animation-delay: .50s; }
.g1 .bar::after { animation-delay: .75s; }  .g1 .bar-val { animation-delay: .60s; }
.g2 .bar::after { animation-delay: .90s; }  .g2 .bar-val { animation-delay: .75s; }
.g3 .bar::after { animation-delay: 1.05s; } .g3 .bar-val { animation-delay: .90s; }
.g4 .bar::after { animation-delay: 1.20s; } .g4 .bar-val { animation-delay: 1.05s; }

@keyframes grow { to { transform: scaleX(1); } }
@keyframes fade { to { opacity: 1; } }

.scale-foot {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  justify-content: space-between; align-items: baseline;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge);
  font-size: 14px; color: var(--muted);
}
.unit {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}

@media (max-width: 700px) {
  .scale { --labelw: 118px; }
  .grade-name { font-size: 15px; }
  .grade-name span { color: var(--brand-2); }
  .bar-val { display: none; }
}

/* ---------- Split + note ---------- */

.split {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: start;
  margin-top: clamp(28px, 4vw, 44px);
}
.note {
  background: var(--surface); border: 1px solid var(--edge);
  border-left: 4px solid var(--zinc);
  padding: 22px 24px; border-radius: 2px;
}
.note h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.note p { color: var(--muted); font-size: 15px; }

@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Card grid ---------- */

.band-surface { background: var(--surface); border-block: 1px solid var(--edge); }

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--edge);
  border: 1px solid var(--edge); border-radius: 2px;
}
.card { background: var(--surface); padding: 26px 24px 28px; transition: background .2s ease; }
.card:hover { background: #FAFBFC; }
.card h3 { font-size: 18px; font-weight: 700; margin: 10px 0; }
.card p { color: var(--muted); font-size: 15px; }
.idx { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--zinc); }

.card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card-body { padding: 26px 24px 28px; }
.card:has(img) { padding: 0; }

/* Brand cards — the homepage services tiles as full cards: brand blue,
   rounded, white text. Layout and background live here; the text colours
   are in the dark block at the end of the file, per docs/css-architecture.md. */
.cards--brand { gap: 16px; background: none; border: 0; }
.cards--brand .card { background: var(--brand); border-radius: 12px; }
.cards--brand .card:hover { background: var(--brand); }

/* Section lead-in inside a .sec-head — same treatment as the homepage's
   .section lead-ins. Classed so it wins over .sec-head p by specificity
   rather than source order. */
.sec-head .sec-lead {
  font-size: clamp(18px, 1.65vw, 21px);
  font-weight: 600; line-height: 1.45;
  color: #22334A;
}
/* A .sec-head carrying a lead-in escapes the 60ch cap — the lead runs the
   width of the column and wraps only where the column ends. .sec-head--wide
   does the same explicitly, for a heading that should hold one line. */
.sec-head:has(.sec-lead),
.sec-head--wide { max-width: none; }

@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

.media-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: clamp(24px, 3.5vw, 40px);
}
@media (max-width: 700px) { .media-pair { grid-template-columns: 1fr; } }

/* Example lists inside cards — the "what we build" grid. Gold dash marker,
   same visual language as the services list and quality bullets. */
.card ul { list-style: none; margin: 14px 0 0; padding: 0; }
.card li {
  position: relative; padding-left: 18px;
  color: var(--muted); font-size: 14.5px; line-height: 1.5;
}
.card li + li { margin-top: 8px; }
.card li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 2px; background: var(--zinc);
}

/* ---------- Reasons list ---------- */

/* Numbered proof-point rows — "why Duravex" on segment pages. Same row
   rhythm as .specs, but with room for a heading and two paragraphs. */
.reasons { border-top: 1px solid var(--edge); }
.reason {
  display: grid; grid-template-columns: 84px 1fr; gap: 24px;
  padding: clamp(24px, 3vw, 32px) 0; border-bottom: 1px solid var(--edge);
}
.reason-num {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; color: var(--zinc); padding-top: 5px;
}
.reason h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.reason p { color: var(--muted); max-width: 68ch; }
.reason p + p { margin-top: 10px; }
.reason strong { color: var(--ink); font-weight: 600; }

@media (max-width: 700px) {
  .reason { grid-template-columns: 1fr; gap: 4px; }
}

/* Step number above a .pillar heading — the numbered process grid. */
.step-num {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zinc);
  margin-bottom: 8px;
}

/* ---------- Capability list ---------- */

.specs { border-top: 1px solid var(--edge); }
.spec {
  display: grid; grid-template-columns: 230px 1fr; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--edge); align-items: baseline;
}
.spec dt {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-2);
}
.spec dd { font-size: 16px; color: #22334A; }

@media (max-width: 700px) { .spec { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Quality ---------- */

.quality { background: var(--brand); color: #fff; }
.quality .wrap {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.quality h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; }
.quality .eyebrow { color: var(--zinc); }
.quality p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--on-dark); }
.quality ul {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
}
.quality li {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  padding-left: 16px; position: relative;
}
.quality li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--zinc);
}

@media (max-width: 860px) {
  .quality .wrap { grid-template-columns: 1fr; }
  .quality ul { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact { background: var(--surface); border-top: 1px solid var(--edge); }
.contact .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.contact h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin-bottom: 16px; }
.contact .sub { color: var(--muted); max-width: 34ch; }
.line { margin-bottom: 4px; font-size: 16px; }
.line a { text-decoration: none; border-bottom: 1px solid var(--zinc); padding-bottom: 1px; }
.line a:hover { color: var(--brand-2); }
.role {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px;
}
.block + .block { margin-top: 22px; }

@media (max-width: 860px) { .contact .wrap { grid-template-columns: 1fr; } }

/* ---------- Home page ---------- */

/* Generic section shell. `.sec` is the line-card variant (its own heading
   block); `.section` is the simpler one used by ordinary pages. */
.section { padding-block: clamp(48px, 6.5vw, 84px); }
.section--alt { background: var(--surface); border-block: 1px solid var(--edge); }
.section h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; }
/* Section lead-in — the line between an h2 and the content below it. Close to
   a subheading in function, so it carries more weight than body copy.

   Unclassed paragraphs only: a classed paragraph (.intro, .closing) styles
   itself, and without :not([class]) this selector's specificity (0,2,1)
   silently beats theirs so their colour never lands. */
.section > .wrap > p:not([class]) {
  font-size: clamp(18px, 1.65vw, 21px);
  font-weight: 600; line-height: 1.45;
  color: #22334A;
  margin-top: 16px;
  /* Wider than the 45–75ch reading measure on purpose. These are single
     sentences introducing a section, not prose — the measure rule earns its
     keep over paragraphs, and holding these to 58ch was breaking one-liners
     onto a second line for no benefit. Long enough to wrap still balances. */
  max-width: 86ch;
  text-wrap: balance;
}

.lede { font-size: clamp(16px, 1.4vw, 18px); color: #3B4A5C; max-width: 46ch; }

/* Sub-heading inside a .section, below the lead-in. */
.subhead {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; color: var(--brand);
}
.subhead + .specs { margin-top: 8px; }

.meta {
  margin-top: 28px; padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / .18);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}

.cta { background: var(--brand); color: #fff; padding-block: clamp(48px, 6.5vw, 84px); }
.cta h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; }
.cta p { color: var(--on-dark); margin-top: 14px; max-width: 60ch; }

/* On a line-card page the gap below the intro comes from .sec-head's own
   margin. A .section has no such wrapper — its h2 and lead-in are direct
   children — so the grid has to space itself off them. */
.section .cards { margin-top: clamp(28px, 4vw, 44px); }

/* Card grid without the hairline-border technique — used where the item count
   does not divide evenly and an empty cell would show as a grey block. */
.cards--plain { gap: 16px; background: none; border: 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Top rule matches .pillar — it separates the blocks and ties the two
   sections together. Sits above the image, since the image is the first
   child. */
.cards--plain .card {
  border: 1px solid var(--edge);
  border-top: 3px solid var(--brand);
}
/* Breathing room between the rule and the image, so the rule reads as a
   marker on the card rather than a frame around the photo. */
.cards--plain .card:has(img) { padding-top: 18px; }

/* A card that is itself a link — used where the vertical has a page behind it. */
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-top-color: var(--zinc); }
a.card:hover .card-link { color: var(--brand-2); }
.card-link {
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}
.card-link::after { content: " →"; }

.services {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.services li {
  display: flex; align-items: center; gap: 14px;
  min-height: 88px; padding: 20px 24px;
  background: var(--brand); color: #fff;
  border-radius: 12px;
  font-family: var(--display); font-weight: 600;
  font-size: 17px; line-height: 1.3;
}
/* Gold marker, same language as the quality list and the hero rule. */
.services li::before {
  content: ""; flex: none;
  width: 12px; height: 3px; background: var(--zinc);
}
/* Tiles that have a page. The link's ::after stretches over the whole tile,
   so the tile is the click target while the markup stays one link. A gold
   arrow tells linked tiles apart from the ones that do not lead anywhere yet.
   White on --brand-2 (hover) is 8.6:1; gold on --brand is 7.2:1. */
.services li:has(> a) { position: relative; transition: background-color .15s; }
.services li:has(> a):hover { background: var(--brand-2); }
.services li > a { flex: 1; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.services li > a::after {
  content: "\2192"; margin-left: auto; color: var(--zinc); font-size: 20px; line-height: 1;
}
.services li > a::before { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.services li > a:focus-visible { outline: none; }
.services li:has(> a:focus-visible) { outline: 3px solid var(--zinc); outline-offset: 3px; }

.pillars {
  display: grid; gap: clamp(24px,4vw,40px); margin-top: clamp(28px,4vw,44px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pillar { padding-top: 16px; border-top: 3px solid var(--brand); }
.pillar h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.pillar p { color: var(--muted); font-size: 15px; }

/* Lead paragraphs. --muted at this size reads washed out on --paper (6.7:1),
   so these carry more weight and a deeper ink than ordinary body copy. */
.intro {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500; line-height: 1.5;
  color: #22334A; max-width: 66ch;
}
.closing {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 500; line-height: 1.5;
  color: #22334A; max-width: 68ch;
}

.btn {
  display: inline-block; margin-top: 26px;
  background: var(--zinc); color: var(--ink);
  padding: 14px 30px; text-decoration: none;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.btn:hover { background: #fff; }
button.btn { border: 0; cursor: pointer; }
button.btn:hover { background: var(--ink); color: #fff; }

/* ---------- Contact form ---------- */

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 6vw, 80px); align-items: start;
}
.form { max-width: 640px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.field .optional { font-weight: 400; color: var(--steel); text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--steel); border-radius: 0;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--brand-2); outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 9em; }

/* Application form extras: select, file input, radio and checkbox groups. */
.field select {
  width: 100%; padding: 12px 14px;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--steel); border-radius: 0;
}
.field input[type="file"] { padding: 10px; }
/* City and State side by side; stacked on phones. */
.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field select:focus-visible,
.choice input:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 1px; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.choice legend {
  margin-bottom: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
/* Override .field label: these are option labels, not field captions. */
.field.choice label {
  display: inline-flex; align-items: flex-start; gap: 8px; margin: 0 24px 6px 0;
  font-family: inherit; font-size: inherit; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.field.choice input { width: auto; margin-top: .3em; accent-color: var(--brand); }
/* Labels are controls, not copy: a click or double-click on one should not
   highlight its text. Option labels already toggle their input (the input is
   inside the label); the pointer says so. -webkit- for Safari on iOS. */
.field label, .choice legend { -webkit-user-select: none; user-select: none; }
.field.choice label, .field.choice input { cursor: pointer; }
.hint { margin-top: 6px; font-size: 14px; color: var(--muted); }
/* Error colour is not in the brand palette; #9B1C1C is 7.9:1 on white. */
.form-error {
  margin-top: 10px; padding: 10px 14px;
  background: var(--surface); border-left: 4px solid #9B1C1C;
  color: #9B1C1C; font-weight: 500;
}
#form-error { margin-bottom: 0; }
button.btn:disabled { opacity: .6; cursor: progress; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-details h2 { font-size: 20px; margin-bottom: 12px; }
.contact-details address { font-style: normal; margin-bottom: 12px; }
.contact-details address + h2,
.contact-details p + h2 { margin-top: 32px; }
.contact-note { margin-top: 24px; color: var(--muted); }

@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- News ---------- */

.newslist { list-style: none; margin: 0; padding: 0; }
.newsitem {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px 40px;
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--edge);
}
.newsitem:last-child { border-bottom: 1px solid var(--edge); }
.newsdate {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--steel);
  padding-top: 4px;
}
.newsitem h2 { font-size: clamp(20px, 2vw, 25px); font-weight: 700; margin-bottom: 10px; }
.newsitem h2 a { text-decoration: none; }
.newsitem h2 a:hover { color: var(--brand-2); }
.newsteaser { color: var(--muted); max-width: 62ch; }
.newsitem .card-link { margin-top: 12px; }
.newsitem .card-link a { text-decoration: none; }
.job-apply .btn { margin-top: 14px; }
.apply-general { margin-top: clamp(32px, 5vw, 48px); }
.apply-general .btn { margin-top: 10px; }
/* .btn's white hover is meant for dark bands; on these light sections it would vanish. */
.job-apply .btn:hover,
.apply-general .btn:hover { background: var(--ink); color: #fff; }

/* A posting page (job.njk): Apply plus the PDF link, under the hero title and
   again after the description. The PDF link inherits its colour, so it reads
   white on the dark hero and ink below without a dark-block override. */
.job-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: 26px;
}
.job-actions .btn { margin-top: 0; }
.job-pdf {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--zinc); padding-bottom: 2px;
}
.job-actions--end { margin-top: clamp(32px, 4vw, 44px); }
.job-actions--end .btn:hover { background: var(--ink); color: #fff; }

@media (max-width: 720px) {
  .newsitem { grid-template-columns: 1fr; gap: 6px; }
}

/* Article body — the one place authors write free-form Markdown, so the
   elements they can produce all need a defined style. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-size: clamp(20px, 1.9vw, 24px); font-weight: 700;
  margin-top: 1.8em; color: var(--ink);
}
.prose h3 { font-size: 18px; font-weight: 700; margin-top: 1.6em; }
.prose p, .prose li { color: #22334A; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--zinc); color: var(--muted);
}
.prose code {
  font-family: var(--mono); font-size: .9em;
  background: var(--paper); padding: 2px 5px; border-radius: 3px;
}
.prose img { border-radius: 2px; margin-block: 1.6em; }

.back {
  margin-top: clamp(32px, 4vw, 48px); padding-top: 20px;
  border-top: 1px solid var(--edge);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.back a { text-decoration: none; border-bottom: 1px solid var(--zinc); }

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

.site-footer { background: var(--ink); color: var(--dim); }
.footer-inner {
  display: grid; gap: clamp(24px,4vw,48px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-block: clamp(40px,5vw,60px) 32px;
}
.footer-brand img { width: 140px; }
.footer-cert {
  margin-top: 16px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
}
.footer-heading {
  font-family: var(--mono); font-size: 11px; color: #fff;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.site-footer p { margin-bottom: 6px; }
.site-footer a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--zinc); }
.footer-legal {
  border-top: 1px solid rgb(255 255 255 / .12);
  padding-block: 16px; font-size: 12px;
}

/* ==========================================================================
   Dark bands

   Any band sitting on --ink or --brand. This block comes LAST on purpose:
   several components set a dark text colour for use on light backgrounds
   (.lede, .sec-head p, .card p), and those rules have the same specificity
   as a `.hero--dark .lede`-style override. Source order is what decides it,
   so the dark rules must come after every component that sets a colour.

   Rules:
     - body copy is white, never a tinted grey
     - eyebrows and small accents are gold
     - mono labels use a light tint, still ≥ 10:1 on ink
   ========================================================================== */

.hero--dark,
.certbar,
.facts,
.quality,
.cta,
.site-footer { color: #fff; }

.hero--dark h1, .hero--dark h2, .hero--dark h3,
.quality h2, .quality h3,
.cta h2, .cta h3 { color: #fff; }

/* Body copy on dark. White — a muted grey drops below AA here. */
.hero--dark p, .hero--dark .lede,
.quality p,
.cta p,
.site-footer p { color: #fff; }

/* Gold for the small labels that sit above a heading. */
.hero--dark .eyebrow,
.quality .eyebrow,
.cta .eyebrow { color: var(--zinc); }

/* Mono labels: tinted rather than pure white, to keep them subordinate to
   body copy without losing legibility. #C6CFDA is ~10.8:1 on --ink. */
.hero--dark .meta,
.facts dt,
.site-footer .footer-cert,
.site-footer .footer-legal p { color: #C6CFDA; }

.quality li,
.footer-heading { color: #fff; }

/* Brand cards: white text on --brand, gold index letters and list markers
   (the .idx and li::before rules already use --zinc, which holds on dark). */
.cards--brand .card h3 { color: #fff; }
.cards--brand .card p,
.cards--brand .card li { color: #fff; }

/* ---------- Motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important; animation-delay: 0s !important;
    transition: none !important;
  }
  .fill { transform: scaleX(1); }
  .bar::after, .bar-val { opacity: 1; }
}

/* The line card is meant to be printable — keep the dark bands from
   dropping out and the chart from rendering mid-animation. */
@media print {
  .certbar, .facts, .quality, .site-footer {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .fill { animation: none; transform: scaleX(1); }
  .bar::after, .bar-val { animation: none; opacity: 1; }
  .site-header nav { display: none; }
}