/* ---------- Self hosted webfonts ----------
   Fonts are served from this domain rather than a third party CDN.
   That removes an external request from the critical path, keeps the
   site working if the CDN is blocked, and avoids sending visitor IP
   addresses to another company. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500 550; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600 650; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Struc Steel, Incorporated
   Design system built on the logo palette
   Brand blue #005090 / slate blue #4060A0 / light steel #B0C0D0
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand blues pulled directly from the logo artwork */
  --blue-950: #021F3B;
  --blue-900: #032F55;
  --blue-800: #05406F;
  --blue-700: #005090; /* primary brand blue */
  --blue-600: #1266AC;
  --blue-500: #2E82C8;
  --blue-400: #6BA6DC;
  --blue-300: #B3D8F7; /* accent for text sitting on the dark navy surfaces */
  --blue-200: #B0C0D0; /* light steel from logo bevel */
  --blue-100: #DCE5EE;
  --blue-050: #F1F5F9;

  --ink-900: #101922;
  --ink-800: #1C2833;
  --ink-700: #33414F;
  --ink-600: #4E5D6C;
  --ink-500: #6B7A89;
  --ink-300: #A8B4C0;
  --ink-200: #D7DEE5;
  --ink-100: #EAEFF3;
  --white: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(3, 47, 85, .06), 0 2px 8px rgba(3, 47, 85, .06);
  --shadow-md: 0 4px 12px rgba(3, 47, 85, .08), 0 12px 32px rgba(3, 47, 85, .08);
  --shadow-lg: 0 10px 24px rgba(3, 47, 85, .10), 0 28px 64px rgba(3, 47, 85, .12);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  /* Spacing scale. Generous by design so nothing crowds. */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 2.75rem;
  --sp-6: 3.5rem;
  --sp-7: 4.5rem;
  --sp-8: 6rem;

  --section-y: clamp(4.5rem, 8vw, 7.5rem);
  --container: 1200px;
  --container-narrow: 860px;

  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --header-h: 84px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--blue-900);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 var(--sp-3);
  font-weight: 600;
}

h1 { font-size: clamp(2.35rem, 5vw, 3.65rem); letter-spacing: -0.022em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.65rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--blue-800); }

ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.35rem; }
li { margin-bottom: .6rem; }
li:last-child { margin-bottom: 0; }

strong { color: var(--ink-900); font-weight: 650; }

hr {
  border: 0;
  height: 1px;
  background: var(--ink-200);
  margin: var(--sp-6) 0;
}

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

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--tint { background: var(--blue-050); }
.section--steel {
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--blue-950) 100%);
  color: var(--blue-100);
}
.section--steel h2, .section--steel h3, .section--steel h4 { color: var(--white); }
.section--steel a { color: var(--blue-400); }
.section--steel a:hover { color: var(--white); }

.section--line { border-top: 1px solid var(--ink-100); }

.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }

.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--sp-6); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-5); }
.prose > *:first-child { margin-top: 0; }

.text-center { text-align: center; }
.center-block { margin-inline: auto; }

.lead {
  font-size: clamp(1.15rem, 1.7vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-600);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-2);
}
.section--steel .eyebrow { color: var(--blue-400); }

.section-head {
  max-width: 760px;
  margin-bottom: var(--sp-6);
}
.section-head.text-center { margin-inline: auto; }
.section-head p:last-child { margin-bottom: 0; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--sp-4); }
.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)); }
.grid--wide { gap: var(--sp-5); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split--top { align-items: start; }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  padding: 1.05rem 1.85rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
  /* No transform on hover. Lifting a button promotes it to its own
     compositing layer, which re-rasterises the label with grayscale
     antialiasing and makes the text look noticeably thinner. The lift
     is done with shadow instead so the weight never changes. */
}

.btn--primary { background: var(--blue-700); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-800); color: var(--white); box-shadow: 0 6px 18px rgba(3,47,85,.22); }

.btn--outline { border-color: var(--blue-200); color: var(--blue-800); background: transparent; }
.btn--outline:hover { border-color: var(--blue-700); color: var(--blue-950); background: var(--blue-100); box-shadow: 0 4px 14px rgba(3,47,85,.12); }

.btn--ghost-light { border-color: rgba(255,255,255,.4); color: var(--white); background: transparent; }
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,.16); color: var(--white); }

.btn--light { background: var(--white); color: var(--blue-800); }
.btn--light:hover { background: var(--white); color: var(--blue-950); box-shadow: 0 6px 18px rgba(0,0,0,.20); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.btn-row--center { justify-content: center; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 650;
  font-size: .95rem;
}
.textlink::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.textlink:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ---------- Header ---------- */
.topbar {
  background: var(--blue-950);
  color: var(--blue-200);
  font-size: .82rem;
  letter-spacing: .015em;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 42px;
  padding-block: .35rem;
  flex-wrap: wrap;
}
.topbar a { color: var(--blue-100); }
.topbar a:hover { color: var(--white); }
.topbar-list {
  display: flex;
  gap: var(--sp-3);
  list-style: none;
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
.topbar-list li { margin: 0; }
.topbar-sep { color: rgba(176,192,208,.45); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--ink-100);
}
/* backdrop-filter creates a containing block for fixed children, which would
   trap the mobile drawer inside the header. Only apply it above the drawer
   breakpoint, where the nav is inline and nothing is position fixed. */
@media (min-width: 1121px) {
  .site-header {
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(160%) blur(10px);
  }
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }


.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: .75rem;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { width: 210px; max-width: 46vw; }

.primary-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-list > li { margin: 0; position: relative; }
.nav-list > li > a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .7rem .68rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-800);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-list > li > a:hover,
.nav-list > li.is-open > a { color: var(--blue-700); background: var(--blue-050); }
.nav-list > li > a[aria-current="page"] { color: var(--blue-700); }

.has-sub > a::after {
  content: "";
  width: .42rem; height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .55;
}

.subnav {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 310px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .6rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.subnav--right { left: auto; right: 0; }
.has-sub:hover .subnav,
.has-sub.is-open .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav li { margin: 0; }
.subnav a {
  display: block;
  padding: .62rem .85rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 550;
  color: var(--ink-700);
  line-height: 1.4;
}
.subnav a:hover { background: var(--blue-050); color: var(--blue-800); }
.subnav-head {
  padding: .5rem .85rem .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.header-cta { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.header-phone {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-900);
}
.header-phone span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.header-cta .btn { padding: .95rem 1.4rem; font-size: .88rem; }

.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  border: 1px solid var(--ink-200);
  background: var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 22px; height: 2px;
  background: var(--blue-900);
  border-radius: 2px;
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1420px) {
  .header-phone { display: none; }
}
@media (max-width: 1260px) {
  .nav-list > li > a { padding: .7rem .5rem; font-size: .855rem; }
  .brand img { width: 178px; }
  .header-cta .btn { padding: .9rem 1.1rem; font-size: .82rem; }
}
@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(390px, 88vw);
    background: var(--white);
    border-left: 1px solid var(--ink-100);
    box-shadow: var(--shadow-lg);
    padding: 9rem var(--sp-3) var(--sp-6);
    overflow-y: auto;
    transform: translateY(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .26s ease, opacity .22s ease, visibility .26s;
    z-index: 55;
  }
  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav-list > li > a { padding: .9rem .75rem; font-size: 1rem; justify-content: space-between; }
  .subnav {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--blue-100);
    border-radius: 0;
    margin: .25rem 0 .5rem .75rem;
    padding: 0 0 0 .35rem;
    display: none;
    min-width: 0;
  }
  .has-sub.is-open .subnav { display: block; }
  .has-sub:hover .subnav { display: none; }
  .has-sub.is-open:hover .subnav { display: block; }
  .header-cta .btn { display: none; }
  .nav-drawer-cta { display: block; margin-top: var(--sp-4); }
  .nav-drawer-cta .btn { display: flex; width: 100%; }
}
@media (min-width: 1121px) { .nav-drawer-cta { display: none; } }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(2,31,59,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s ease, visibility .26s;
  z-index: 50;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-140%);
  background: var(--blue-800);
  color: var(--white);
  padding: .9rem 1.4rem;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { transform: translateY(0); color: var(--white); }

/* ---------- Blueprint texture ---------- */
.blueprint-bg {
  background-color: var(--blue-950);
  background-image:
    linear-gradient(rgba(107,166,220,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,166,220,.09) 1px, transparent 1px),
    linear-gradient(rgba(107,166,220,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,166,220,.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--blue-100);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-500) 55%, var(--blue-200));
}
.hero .container { position: relative; z-index: 2; }

.hero--home {
  padding-block: clamp(5rem, 10vw, 8.5rem);
}
.hero--home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 980px) { .hero--home .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { color: var(--white); margin-bottom: var(--sp-3); }
.hero .lead { color: var(--blue-200); max-width: 60ch; }
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.hero-badges li {
  margin: 0;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-200);
  border: 1px solid rgba(176,192,208,.32);
  border-radius: 100px;
  padding: .45rem 1rem;
}

.hero--page {
  padding-block: clamp(3.75rem, 7vw, 6rem);
}
.hero--page h1 { max-width: 20ch; }
.hero--page .lead { margin-top: var(--sp-3); }

.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(176,192,208,.22);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  backdrop-filter: blur(6px);
}
.hero-card h2 {
  color: var(--white);
  font-size: 1.4rem;
  margin-bottom: var(--sp-2);
}
.hero-card p { color: var(--blue-200); font-size: .97rem; }
.hero-card ul { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.hero-card li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--blue-100);
  font-size: .97rem;
  margin-bottom: .85rem;
}
.hero-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .45rem;
  width: 1.05rem; height: .55rem;
  border-left: 2.5px solid var(--blue-400);
  border-bottom: 2.5px solid var(--blue-400);
  transform: rotate(-45deg);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  border-bottom: 1px solid var(--ink-100);
  background: var(--white);
  font-size: .85rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0; padding: 1rem 0;
  color: var(--ink-500);
}
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-300); }
.breadcrumbs a { color: var(--ink-600); font-weight: 550; }
.breadcrumbs a:hover { color: var(--blue-700); }
.breadcrumbs [aria-current="page"] { color: var(--blue-800); font-weight: 600; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
}
.card h3 { font-size: 1.28rem; margin-bottom: .85rem; }
.card p { font-size: .97rem; color: var(--ink-600); }
.card .textlink { margin-top: auto; padding-top: var(--sp-3); }

a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-200);
}

.card--tint { background: var(--blue-050); border-color: var(--blue-100); box-shadow: none; }
.card--dark {
  background: rgba(255,255,255,.05);
  border-color: rgba(176,192,208,.2);
  box-shadow: none;
}
.card--dark p { color: var(--blue-200); }

.card-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-3);
  color: var(--blue-700);
  flex-shrink: 0;
}
.card-icon svg { width: 27px; height: 27px; }
.card--dark .card-icon { background: rgba(255,255,255,.07); border-color: rgba(176,192,208,.22); color: var(--blue-400); }

.card-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--blue-200);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); } }

.stat { padding: var(--sp-2) 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  font-weight: 600;
  color: var(--blue-700);
  line-height: 1;
  margin-bottom: .6rem;
  letter-spacing: -0.02em;
}
.section--steel .stat-value { color: var(--blue-400); }
.stat-label {
  font-size: .88rem;
  color: var(--ink-600);
  line-height: 1.5;
  margin: 0;
}
.section--steel .stat-label { color: var(--blue-200); }

/* ---------- Check lists ---------- */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: var(--sp-2);
  line-height: 1.65;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem;
  width: 1.1rem; height: .58rem;
  border-left: 2.5px solid var(--blue-600);
  border-bottom: 2.5px solid var(--blue-600);
  transform: rotate(-45deg);
}
.checklist--tight li { margin-bottom: .7rem; }
.section--steel .checklist li::before { border-color: var(--blue-400); }

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pill-list li {
  margin: 0;
  padding: .55rem 1.1rem;
  border: 1px solid var(--blue-100);
  background: var(--blue-050);
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--blue-800);
}

/* ---------- Spec table ---------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec-table caption {
  text-align: left;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-500);
  padding-bottom: var(--sp-2);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 1.05rem 1.35rem;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
.spec-table thead th {
  background: var(--blue-050);
  color: var(--blue-900);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody th { font-weight: 650; color: var(--ink-900); width: 38%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Process steps ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }

.step {
  margin: 0;
  padding: var(--sp-4);
  border-top: 3px solid var(--blue-200);
  background: var(--white);
}
.step-num {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-600);
  display: block;
  margin-bottom: .75rem;
}
.step h3 { font-size: 1.15rem; margin-bottom: .7rem; }
.step p { font-size: .95rem; color: var(--ink-600); margin: 0; }

/* ---------- Image frames ----------
   Ready for real photography. Drop an <img> inside a figure.media-frame
   and it will crop to the ratio, round the corners and carry the shadow. */
.media-frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--blue-050);
  box-shadow: var(--shadow-md);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame--wide { aspect-ratio: 16 / 9; }
.media-frame--tall { aspect-ratio: 3 / 4; }
.media-frame--square { aspect-ratio: 1 / 1; }
.media-frame figcaption {
  padding: .9rem 1.1rem;
  font-size: .85rem;
  color: var(--ink-600);
  background: var(--white);
  border-top: 1px solid var(--ink-100);
}

/* ---------- Quote / testimonial ---------- */
.quote {
  border-left: 4px solid var(--blue-500);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin: 0;
}
.quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.55;
  color: var(--blue-900);
}
.quote footer {
  font-size: .88rem;
  color: var(--ink-500);
  font-weight: 600;
  margin-top: var(--sp-2);
}
.section--steel .quote p { color: var(--white); }
.section--steel .quote footer { color: var(--blue-200); }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--ink-200); }
.faq-item {
  border-bottom: 1px solid var(--ink-200);
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.6rem 3rem 1.6rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--blue-900);
  line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: .5rem; top: 2.1rem;
  width: 14px; height: 2px;
  background: var(--blue-600);
  transition: transform .2s ease;
}
.faq-item summary::before {
  content: "";
  position: absolute;
  right: .5rem; top: 2.1rem;
  width: 14px; height: 2px;
  background: var(--blue-600);
  transform: rotate(90deg);
  transition: transform .2s ease, opacity .2s ease;
}
.faq-item[open] summary::before { opacity: 0; transform: rotate(0); }
.faq-answer { padding: 0 3rem var(--sp-4) 0; }
.faq-answer p { color: var(--ink-600); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(150deg, var(--blue-800) 0%, var(--blue-950) 100%);
  color: var(--blue-100);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.cta-band h2 { color: var(--white); margin-bottom: var(--sp-3); }
.cta-band p { color: var(--blue-200); }
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .cta-inner { grid-template-columns: 1fr; } }
.cta-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.cta-actions .btn { width: 100%; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-md);
  container-type: inline-size;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
}
.form-grid .field--full { grid-column: 1 / -1; }

/* Dropdowns hold long option labels, so they always take the full row.
   Truncated option text is the fastest way to make a form feel cramped. */
.form-grid .field:has(select) { grid-column: 1 / -1; }
.form-grid .field--select { grid-column: 1 / -1; }

/* The card, not the viewport, decides when two columns stop fitting.
   This keeps the form comfortable even inside a narrow page column. */
@container (max-width: 460px) {
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .5rem; }
.field label {
  font-size: .85rem;
  font-weight: 650;
  color: var(--ink-800);
  letter-spacing: .01em;
}
.field .hint { font-size: .8rem; color: var(--ink-500); margin: 0; }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  min-width: 0;
  max-width: 100%;
  color: var(--ink-900);
  padding: .9rem 1rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(46,130,200,.18);
}
.form-note { font-size: .84rem; color: var(--ink-500); margin-top: var(--sp-3); }

/* ---------- Contact blocks ---------- */
.contact-block {
  display: grid;
  gap: var(--sp-4);
}
.contact-item { border-top: 2px solid var(--blue-100); padding-top: var(--sp-3); }
.contact-item h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.contact-item p { font-size: .97rem; margin-bottom: .35rem; }
.contact-item .big {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--blue-800);
}

/* ---------- Directory / link columns ---------- */
.link-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
@media (max-width: 860px) { .link-columns { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .link-columns { grid-template-columns: 1fr; } }
.link-columns ul { list-style: none; padding: 0; margin: 0; }
.link-columns li { margin-bottom: .75rem; }
.link-columns h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--blue-950);
  color: var(--blue-200);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  font-size: .93rem;
}
.site-footer h3 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.site-footer a { color: var(--blue-200); }
.site-footer a:hover { color: var(--white); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: var(--sp-6);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .7rem; }
.footer-logo {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.footer-logo img { width: 210px; }
.footer-bottom {
  border-top: 1px solid rgba(176,192,208,.18);
  padding-block: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  color: rgba(176,192,208,.8);
}
.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0; padding: 0;
}
.footer-bottom li { margin: 0; }

.social-row { display: flex; gap: .6rem; margin-top: var(--sp-3); }
.social-row a {
  width: 42px; height: 42px;
  border: 1px solid rgba(176,192,208,.28);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  transition: background .18s ease, border-color .18s ease;
}
.social-row a:hover { background: rgba(255,255,255,.1); border-color: var(--blue-400); }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Utility ---------- */
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

@media print {
  .site-header, .topbar, .site-footer, .cta-band, .nav-scrim { display: none; }
  body { color: #000; }
}

/* ---------- Refinements ---------- */
/* Headings inside a two column split read better a step down */
.split .prose h2 { font-size: clamp(1.55rem, 2.3vw, 2.05rem); }
.split .prose h2 + p { margin-top: 0; }

/* Keep the utility bar to a single tidy line on small screens */
@media (max-width: 860px) {
  .topbar .container { justify-content: center; row-gap: .25rem; }
  .topbar-list:first-child li:not(:nth-child(3)) { display: none; }
  .topbar-list { justify-content: center; }
}
@media (max-width: 560px) {
  .topbar-list:first-child { display: none; }
  .topbar .container { min-height: 38px; }
}

/* Card grids keep an even rhythm when text lengths differ */
.grid .card { height: 100%; }

/* Long tables never crowd the page edge on small screens */
@media (max-width: 620px) {
  .spec-table th, .spec-table td { padding: .9rem 1rem; }
  .spec-table tbody th { width: 42%; }
  .faq-item summary { padding-right: 2.5rem; }
  .faq-answer { padding-right: 0; }
}


/* ---------- Form refinements ---------- */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5D6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
  padding-right: 2.9rem;
  text-overflow: ellipsis;
}
.field input[type="date"] { padding-right: .85rem; }

/* Give the submit row room to breathe and let buttons share the width evenly */
.form-card .btn-row { margin-top: var(--sp-5); gap: var(--sp-2); }
.form-card .btn-row .btn { flex: 1 1 14rem; }
.form-card .form-status:empty { margin: 0; }


/* ---------- Split variants that give a form room to work ---------- */
.split--form { grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); }
.split--form-end { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); }
@media (max-width: 980px) {
  .split--form, .split--form-end { grid-template-columns: 1fr; }
}


/* ---------- Full width header and footer ---------- */
/* The utility bar, header and footer span the full viewport width.
   Padding scales with the screen so content never touches the edge. */
.topbar .container,
.site-header .container,
.site-footer .container {
  max-width: 100%;
  padding-inline: clamp(1.25rem, 3.5vw, 4rem);
}

/* With the extra room, the desktop nav can breathe again */
@media (min-width: 1121px) {
  .nav-list { gap: .2rem; }
  .nav-list > li > a { padding: .7rem .85rem; font-size: .93rem; }
  .brand img { width: 232px; }
}
@media (min-width: 1421px) {
  .header-phone { display: flex; }
}

/* Footer columns stay readable rather than stretching on very wide screens */
.footer-grid, .footer-bottom { max-width: 1600px; margin-inline: auto; }
.footer-bottom { width: 100%; }

/* Keep the logo and the close button visible and clickable above the
   open drawer, so there is always an obvious way out of the menu. */
@media (max-width: 1120px) {
  .brand, .header-cta { position: relative; z-index: 60; }
  .nav-toggle[aria-expanded="true"] { border-color: var(--blue-200); }
  .primary-nav { padding-top: 8rem; }
  .nav-drawer-cta { margin-top: var(--sp-5); }
}


/* ---------- Sticky header behaviour ----------
   Note: overflow-x hidden must never be set on html or body. It turns the
   root into a scroll container and silently disables position sticky.
   Nothing on this site overflows horizontally, so it is not needed. */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  transition: box-shadow .2s ease, padding .2s ease;
}
/* Do not add will-change, transform, filter, backdrop-filter or contain to
   this element at mobile widths. Each of them makes the header a containing
   block for fixed position children, which collapses the open nav drawer. */

/* Once the page scrolls, the bar tightens up slightly and lifts off the page */
.site-header.is-stuck {
  box-shadow: 0 1px 0 var(--ink-100), 0 6px 24px rgba(3, 47, 85, .10);
}
.site-header.is-stuck .header-inner {
  min-height: 70px;
  padding-block: .5rem;
}
.site-header.is-stuck .brand img { width: 196px; }

@media (max-width: 1120px) {
  .site-header.is-stuck .brand img { width: 168px; }
}

/* Footer credit sits with the legal links but reads as a separate mark */
.footer-credit { position: relative; padding-left: var(--sp-3); }
.footer-credit::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 14px;
  margin-top: -7px;
  background: rgba(176,192,208,.3);
}
.footer-credit a { color: rgba(176,192,208,.85); }
.footer-credit a:hover { color: var(--white); }
@media (max-width: 560px) {
  .footer-credit { padding-left: 0; }
  .footer-credit::before { display: none; }
}

/* Solid once stuck so page content never shows through the nav */
@media (min-width: 1121px) {
  .site-header.is-stuck { background: var(--white); backdrop-filter: none; }
}


/* ---------- Button rendering ----------
   Keep the label rasterised the same way at rest and on hover so the
   weight never appears to drop. */
.btn, .btn:hover, .btn:focus-visible, .btn:active {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.btn:active { box-shadow: none; }

/* The card lift is unchanged, but the transform is confined to the card
   so button labels inside a card are never re-rasterised on hover. */
.textlink { font-weight: 700; }


/* ---------- Legibility on dark surfaces ----------
   The mid blue accent measured 2.79:1 against the navy hero, below the
   4.5:1 minimum for body text. Every accent that sits on a dark surface
   now uses --blue-300, which measures at least 7:1 on all three of the
   dark backgrounds used on the site. */
.hero .eyebrow,
.section--steel .eyebrow,
.cta-band .eyebrow,
.blueprint-bg .eyebrow {
  color: var(--blue-300);
}

.section--steel a:not(.btn),
.cta-band a:not(.btn),
.hero a:not(.btn) {
  color: var(--blue-300);
}
.section--steel a:not(.btn):hover,
.cta-band a:not(.btn):hover,
.hero a:not(.btn):hover { color: var(--white); }

/* Buttons keep their own colour rules on every surface */
.section--steel .btn--light,
.cta-band .btn--light,
.hero .btn--light { color: var(--blue-800); }
.section--steel .btn--light:hover,
.cta-band .btn--light:hover,
.hero .btn--light:hover { color: var(--blue-950); }
.section--steel .btn--ghost-light,
.cta-band .btn--ghost-light,
.hero .btn--ghost-light { color: var(--white); }
.section--steel .btn--primary,
.cta-band .btn--primary,
.hero .btn--primary { color: var(--white); }

.section--steel .stat-value { color: var(--blue-300); }

/* Check marks and rules that share the accent */
.section--steel .checklist li::before { border-color: var(--blue-300); }
.hero-card li::before { border-color: var(--blue-300); }
.hero-badges li { color: #CBD9E6; border-color: rgba(179,216,247,.42); }
.hero .lead { color: #C6D4E2; }
.section--steel .lead,
.cta-band .lead { color: #C6D4E2; }
.section--steel .stat-label { color: #C6D4E2; }
.quote footer { color: var(--ink-500); }
.section--steel .quote p { color: var(--white); }
.section--steel .quote { border-left-color: var(--blue-300); }
.card--dark p { color: #C6D4E2; }
.card--dark .card-icon { color: var(--blue-300); border-color: rgba(179,216,247,.3); }

/* Footer and utility bar accents */
.topbar { color: #C6D4E2; }
.topbar a:not(.btn) { color: #DDE8F2; }
.site-footer { color: #C6D4E2; }
.site-footer a:not(.btn) { color: #C6D4E2; }
.site-footer a:not(.btn):hover { color: var(--white); }
.site-footer .btn--light { color: var(--blue-800); }
.site-footer .btn--light:hover { color: var(--blue-950); }
.footer-credit a:not(.btn) { color: #AFC1D2; }
.footer-bottom { color: #AFC1D2; }


/* ==========================================================================
   Hero photography
   The steel frame photograph sits behind the hero with a dark overlay
   heavy enough that every headline, label and button keeps its measured
   contrast. Overlay first, image second, so the gradient always wins.
   ========================================================================== */

.hero.blueprint-bg,
.hero--home.blueprint-bg,
.hero--page.blueprint-bg {
  background-color: var(--blue-950);
  background-image:
    /* readability overlay */
    linear-gradient(100deg,
      rgba(2, 31, 59, .94) 0%,
      rgba(2, 31, 59, .88) 38%,
      rgba(3, 47, 85, .74) 62%,
      rgba(3, 47, 85, .62) 100%),
    /* a touch of extra weight at the very bottom for the accent rule */
    linear-gradient(to bottom, rgba(2, 31, 59, 0) 55%, rgba(2, 31, 59, .55) 100%),
    url("img/hero-steel-frame-1800.jpg");
  background-size: auto, auto, cover;
  background-position: center, center, center 38%;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Serve the right file for the screen. Small screens never download the big one. */
@media (min-width: 1500px) {
  .hero.blueprint-bg,
  .hero--home.blueprint-bg,
  .hero--page.blueprint-bg {
    background-image:
      linear-gradient(100deg, rgba(2,31,59,.94) 0%, rgba(2,31,59,.88) 38%, rgba(3,47,85,.74) 62%, rgba(3,47,85,.62) 100%),
      linear-gradient(to bottom, rgba(2,31,59,0) 55%, rgba(2,31,59,.55) 100%),
      url("img/hero-steel-frame-2400.jpg");
  }
}
/* Between roughly tablet and small laptop the copy spans most of the width,
   so the diagonal veil is replaced by a heavier, more even one. Measured:
   this is the range where the lead paragraph would otherwise fall to 4.4:1. */
@media (max-width: 1100px) {
  .hero.blueprint-bg,
  .hero--home.blueprint-bg,
  .hero--page.blueprint-bg {
    background-image:
      linear-gradient(105deg, rgba(2,31,59,.95) 0%, rgba(2,31,59,.92) 45%, rgba(3,47,85,.86) 75%, rgba(3,47,85,.80) 100%),
      linear-gradient(to bottom, rgba(2,31,59,.20) 0%, rgba(2,31,59,.10) 45%, rgba(2,31,59,.55) 100%),
      url("img/hero-steel-frame-1280.jpg");
  }
}
@media (max-width: 640px) {
  .hero.blueprint-bg,
  .hero--home.blueprint-bg,
  .hero--page.blueprint-bg {
    /* Portrait screens put copy over the whole frame, so the veil goes darker
       and vertical rather than diagonal. */
    background-image:
      linear-gradient(to bottom, rgba(2,31,59,.84) 0%, rgba(2,31,59,.80) 50%, rgba(3,47,85,.76) 100%),
      url("img/hero-steel-frame-900.jpg");
    background-size: auto, cover;
    background-position: center, center;
  }
}

/* Keep a whisper of the blueprint grid over the photograph so the hero still
   reads as part of the same system as the rest of the site. */
.hero.blueprint-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(179, 216, 247, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179, 216, 247, .05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px;
}

/* Interior page heroes are shorter, so the copy sits tighter to the image.
   A little more veil keeps them as legible as the home hero. */
.hero--page.blueprint-bg::after {
  content: "";
  position: absolute;
  inset: 0 0 5px 0;
  z-index: 0;
  background: rgba(2, 31, 59, .30);
  pointer-events: none;
}

/* The hero card is glass over a photograph now, so it needs a touch more body */
.hero-card {
  background: rgba(2, 31, 59, .58);
  border-color: rgba(179, 216, 247, .28);
  backdrop-filter: blur(10px) saturate(140%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero.blueprint-bg { transition: background-position .3s ease; }
}