/* STS USA LLC – built on the Glatz-Gruppe design language (type, spacing, cards),
   recoloured to the STS brand: blue #005ca8 and the grey of the logo dot #70848f. */
:root {
  --c-blue: #005ca8;
  --c-blue-dark: #00457f;
  --c-navy: #002b4a;
  --c-navy-deep: #001729;
  --c-grey: #70848f;
  --c-grey-light: #cfd8de;
  --c-sky: #e9f1f9;
  --c-green: #7cb342;
  --c-ink: #1b1f2a;
  --c-body: #39424d;
  --c-muted: #66717d;
  --c-bg: #ffffff;
  --c-bg-alt: #f4f6f9;
  --c-border: #e2e6ec;

  --font-base: "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --max-width: 1200px;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(0, 23, 41, 0.06), 0 8px 24px rgba(0, 23, 41, 0.06);
  --header-h: 84px;
}

/* Self-hosted fonts (no third-party font CDN). */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 60px); }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--c-body);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-navy); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; color: var(--c-navy); line-height: 1.2; }
h2 { font-size: 2rem; margin: 0 0 0.75rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--c-navy); color: #fff; padding: 0.6rem 1rem; z-index: 300; }
.skip-link:focus { left: 1rem; color: #fff; }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--c-navy-deep); color: #b9c6d1; font-size: 0.8rem; }
.topbar .container { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.topbar a { color: #e3eaf0; }
.topbar a:hover { color: #fff; }
.topbar-links { display: flex; gap: 1.25rem; }

/* ---------- Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Opaque and without backdrop-filter: a filtered ancestor would become the
     containing block for the fixed mobile menu. */
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}
.site-header > .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 2rem; }
.brand img { height: 50px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 0.25rem; height: 100%; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
  display: flex; align-items: center; gap: 0.3rem; height: 100%; white-space: nowrap;
  padding: 0 0.85rem; color: var(--c-ink); font-weight: 700; font-size: 0.95rem;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-item.open > .nav-link { color: var(--c-blue); }
.nav-link.active { color: var(--c-blue); border-bottom-color: var(--c-blue); }
.nav-link .chev { width: 10px; height: 10px; transition: transform 0.2s; }
.nav-item:hover .chev, .nav-item.open .chev { transform: rotate(180deg); }
.nav-cta { margin-left: 0.75rem; }

.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--c-border); border-top: 3px solid var(--c-blue);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
  padding: 0.6rem; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.nav-item:hover > .dropdown, .nav-item:focus-within > .dropdown, .nav-item.open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 0.5rem 0.75rem; border-radius: 5px; color: var(--c-ink); font-size: 0.92rem; }
.dropdown a:hover { background: var(--c-sky); color: var(--c-blue); }

/* Products mega menu */
.mega { left: 50%; transform: translate(-42%, 6px); width: min(980px, 92vw); padding: 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.nav-item:hover > .mega, .nav-item:focus-within > .mega, .nav-item.open > .mega { transform: translate(-42%, 0); }
.mega-col h4 { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-grey); }
.mega-col h4 a { padding: 0; color: inherit; display: inline; }
.mega-col h4 a:hover { background: none; color: var(--c-blue); }
.mega-col a { padding: 0.35rem 0.5rem; margin-left: -0.5rem; font-size: 0.9rem; }
.mega-col .mega-all { font-weight: 700; color: var(--c-blue); margin-top: 0.35rem; }
.mega-feature { background: var(--c-sky); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; }
.mega-feature img { border-radius: 6px; margin-bottom: 0.75rem; background: #fff; }
.mega-feature strong { color: var(--c-navy); display: block; }
.mega-feature span { font-size: 0.85rem; color: var(--c-muted); }
.mega-feature a { padding: 0; margin: 0; }
.mega-feature a:hover { background: none; }

.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--c-navy); }
.nav-toggle svg { width: 28px; height: 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.5rem; border-radius: 5px; font-weight: 700; font-size: 0.95rem; line-height: 1.2;
  background: var(--c-blue); color: #fff; border: 2px solid var(--c-blue); cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--c-blue-dark); border-color: var(--c-blue-dark); color: #fff; }
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.88rem; }
.btn-outline { background: transparent; color: var(--c-blue); }
.btn-outline:hover { background: var(--c-blue); color: #fff; }
.btn-light { background: #fff; color: var(--c-navy); border-color: #fff; }
.btn-light:hover { background: var(--c-sky); border-color: var(--c-sky); color: var(--c-navy-deep); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-ghost-light:hover { background: #fff; color: var(--c-navy); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.link-arrow { font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
.link-arrow::after { content: "→"; transition: transform 0.15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Sections ---------- */
section { padding: 5rem 0; }
section.alt { background: var(--c-bg-alt); }
section.tight { padding: 3.5rem 0; }
.eyebrow {
  display: block; margin-bottom: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; color: var(--c-grey);
}
.section-head { max-width: 720px; margin-bottom: 2.75rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.08rem; color: var(--c-body); margin: 0; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; }
.section-head-row .section-head { margin-bottom: 0; }
.lead { font-size: 1.15rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split.reverse > :first-child { order: 2; }
.split img.framed, .framed { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Home hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 45%, var(--c-blue) 100%);
  padding: 4.5rem 0 3.5rem;
}
/* Photo bleeds to the right edge over the full hero height and fades into the navy on its left,
   so no white from the image ever touches the white page below. */
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) 1fr; min-height: 560px; align-items: center; }
.hero-copy { padding-bottom: 0.5rem; }
.hero-accent { display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--c-grey-light); margin-bottom: 1.5rem; }
.hero .kicker { font-size: 1rem; color: #cfe0f0; font-weight: 700; margin-bottom: 0.75rem; display: block; }
.hero h1 { color: #fff; font-size: 3rem; line-height: 1.08; margin: 0 0 1.25rem; letter-spacing: -0.02em; }
.hero p.lead { color: #dbe6f0; max-width: 560px; margin-bottom: 2rem; }
.hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 15% 60%;
  /* The mask fades the photo into whatever lies behind it, so the hero gradient shows no seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 18%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 18%, #000 38%);
}
.hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,23,41,0.45) 0%, rgba(0,23,41,0) 28%);
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 2.25rem 0 3.5rem; font-size: 0.88rem; color: #cfe0f0; }
.hero-badges span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-badges svg { width: 18px; height: 18px; color: #fff; }

/* Pillars directly under the hero */
.pillars { background: #fff; border-bottom: 1px solid var(--c-border); padding: 0; }
.pillars .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar { display: flex; gap: 1rem; padding: 1.75rem 1.5rem; border-left: 1px solid var(--c-border); color: var(--c-body); transition: background 0.15s; }
.pillar:last-child { border-right: 1px solid var(--c-border); }
.pillar:hover { background: var(--c-sky); color: var(--c-body); }
.pillar svg { flex: none; width: 40px; height: 40px; color: var(--c-blue); }
.pillar strong { display: block; color: var(--c-navy); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.88rem; margin-bottom: 0.2rem; }
.pillar span { font-size: 0.88rem; line-height: 1.45; display: block; }

/* ---------- Inner page hero ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 55%, var(--c-blue) 100%);
  color: #fff; padding: 2rem 0 3.5rem;
}
.page-hero h1 { color: #fff; font-size: 2.6rem; margin: 0 0 0.75rem; max-width: 820px; }
.page-hero .eyebrow { color: #a9c3da; }
.page-hero p.lead { color: #dbe6f0; max-width: 720px; margin: 0; }
.page-hero.with-media .container { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.page-hero.with-media img { border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.breadcrumb { font-size: 0.82rem; margin-bottom: 2rem; color: #a9c3da; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.breadcrumb a { color: #dbe6f0; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb.on-light { color: var(--c-muted); margin: 1.5rem 0 0; }
.breadcrumb.on-light a { color: var(--c-blue); }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; color: var(--c-body);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
a.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #cdd6e0; color: var(--c-body); }
.card-media { aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--c-border); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: contain; }
.card-media.wide { aspect-ratio: 16 / 10; }
/* Pinned so a tall image cannot stretch its aspect-ratio frame; keeps sibling cards level. */
.card-media.cover img { position: absolute; inset: 0; object-fit: cover; }
/* Tall images (e.g. diagrams) inside a wide frame: pin the image so it cannot stretch the frame. */
.card-media.fit img { position: absolute; top: 0.75rem; left: 0.75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: contain; }
.card-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.card-body .sub { color: var(--c-muted); font-size: 0.9rem; margin: 0 0 0.75rem; }
.card-body p { font-size: 0.93rem; }
.card-body .link-arrow { margin-top: auto; padding-top: 0.75rem; font-size: 0.9rem; }
.card-flags { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; }

.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem; border-radius: 3px; background: var(--c-sky); color: var(--c-blue);
}
.badge.new { background: var(--c-green); color: #fff; }
.badge.cert { background: var(--c-navy); color: #fff; }
.badge.grey { background: #eef1f4; color: var(--c-grey); }
.badge svg { width: 12px; height: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.chips li { font-size: 0.78rem; padding: 0.2rem 0.55rem; border: 1px solid var(--c-border); border-radius: 20px; color: var(--c-muted); background: #fff; }

/* Category tiles (image + text side by side) */
.cat-tile { display: grid; grid-template-columns: 180px 1fr; }
.cat-tile .card-media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--c-border); padding: 0.75rem; }
.cat-tile .card-body { justify-content: center; }

/* Value / feature cards */
.value-card { padding: 1.75rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); border-top: 3px solid var(--c-blue); }
.value-card h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; }
.value-card p { margin: 0; font-size: 0.95rem; }
.value-card svg { width: 36px; height: 36px; color: var(--c-blue); margin-bottom: 1rem; }
.value-card .num { font-size: 2.4rem; font-weight: 700; color: var(--c-blue); line-height: 1; display: block; margin-bottom: 0.5rem; }

.benefit { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.benefit .ico { flex: none; width: 76px; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--c-sky); color: var(--c-blue); }
.benefit .ico svg { width: 34px; height: 34px; }
.benefit span { padding: 1rem 1rem 1rem 0; font-weight: 700; color: var(--c-navy); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; line-height: 1.35; }

/* Owner portrait (company page) and compact owner strip (home page) */
.owner-portrait { margin: 0; position: relative; max-width: 440px; }
.owner-portrait img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.owner-portrait figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(255,255,255,0.94); border-radius: 6px; padding: 0.75rem 1rem;
  border-left: 3px solid var(--c-blue); box-shadow: var(--shadow);
}
.owner-portrait figcaption strong { display: block; color: var(--c-navy); }
.owner-portrait figcaption span { font-size: 0.85rem; color: var(--c-muted); }
.leadership { grid-template-columns: minmax(0, 0.8fr) 1fr; }
.owner-strip {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
  margin-top: 3.5rem; padding: 1.25rem 1.5rem; background: var(--c-bg-alt); border-radius: var(--radius); color: var(--c-body);
}
.owner-strip:hover { color: var(--c-body); background: var(--c-sky); }
.owner-strip img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow); }
.owner-strip strong { color: var(--c-navy); }
.mega-col .badge { margin-left: 0.35rem; vertical-align: 1px; padding: 0.1rem 0.4rem; font-size: 0.62rem; }

/* Stats band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat strong { display: block; font-size: 2.6rem; color: var(--c-blue); line-height: 1.1; }
.stat span { font-size: 0.9rem; color: var(--c-muted); }

/* Check list */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.checklist.cols-2 { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--c-sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005ca8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* ---------- Product detail ("article page") ---------- */
.pd-top { padding: 0 0 4rem; }
.pd-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: start; margin-top: 1.5rem; }
.gallery-main { border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-main .card-flags { top: 1rem; left: 1rem; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; margin-top: 0.75rem; }
.gallery-thumbs button { border: 1px solid var(--c-border); border-radius: 6px; padding: 0; background: #fff; cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs button[aria-current="true"] { border: 2px solid var(--c-blue); }
.pd-summary h1 { font-size: 2.4rem; margin: 0 0 0.35rem; }
.pd-summary .model { font-size: 1.1rem; color: var(--c-grey); font-weight: 700; margin: 0 0 1.25rem; }
.pd-summary .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.pd-summary .lead { margin-bottom: 1.5rem; }
.keyfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 1.75rem; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.keyfacts div { padding: 0.85rem 1rem; border-bottom: 1px solid var(--c-border); }
.keyfacts div:nth-child(odd) { border-right: 1px solid var(--c-border); }
.keyfacts div:nth-last-child(-n+2) { border-bottom: 0; }
.keyfacts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-grey); font-weight: 700; }
.keyfacts dd { margin: 0.15rem 0 0; font-weight: 700; color: var(--c-navy); font-size: 0.95rem; }
.pd-note { font-size: 0.85rem; color: var(--c-muted); margin-top: 1rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.pd-note svg { flex: none; width: 16px; height: 16px; margin-top: 0.2rem; color: var(--c-grey); }

.subnav { position: sticky; top: var(--header-h); z-index: 50; background: #fff; border-bottom: 1px solid var(--c-border); border-top: 1px solid var(--c-border); }
.subnav .container { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 1rem 0.9rem; white-space: nowrap; font-weight: 700; font-size: 0.9rem; color: var(--c-muted); border-bottom: 3px solid transparent; }
.subnav a:hover, .subnav a.active { color: var(--c-blue); border-bottom-color: var(--c-blue); }
.subnav .subnav-cta { margin-left: auto; align-self: center; padding: 0.5rem 1.1rem; color: #fff; border: 2px solid var(--c-blue); }
.subnav .subnav-cta:hover { color: #fff; border-color: var(--c-blue-dark); }

.pd-section { padding: 4rem 0; border-bottom: 1px solid var(--c-border); }
.pd-section:last-of-type { border-bottom: 0; }
.pd-section h2 { font-size: 1.6rem; }
.pd-two { display: grid; grid-template-columns: 1fr 340px; gap: 3.5rem; align-items: start; }
.aside-card { background: var(--c-bg-alt); border-radius: var(--radius); padding: 1.5rem; }
.aside-card h3 { font-size: 1rem; }
.aside-card p { font-size: 0.92rem; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.spec-table th { width: 38%; color: var(--c-navy); font-weight: 700; background: var(--c-bg-alt); }
.spec-table td .imp { color: var(--c-muted); white-space: nowrap; }
.spec-table thead th { background: var(--c-navy); color: #fff; width: auto; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.spec-table code, .itemno { font-family: "Consolas", "SFMono-Regular", Menlo, monospace; font-size: 0.9em; background: var(--c-sky); color: var(--c-navy); padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); }
.table-wrap .spec-table tr:last-child th, .table-wrap .spec-table tr:last-child td { border-bottom: 0; }
.table-note { font-size: 0.85rem; color: var(--c-muted); margin-top: 0.75rem; }

.story { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; padding: 2.5rem 0; }
.story + .story { border-top: 1px dashed var(--c-border); }
.story.flip > :first-child { order: 2; }
.story img { border-radius: var(--radius); border: 1px solid var(--c-border); background: #fff; }
.story h3 { font-size: 1.45rem; }
.story .eyebrow { color: var(--c-blue); }

.video-slot { aspect-ratio: 16 / 9; background: var(--c-navy) center / cover no-repeat; border-radius: var(--radius); position: relative; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.video-slot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,23,41,0.15), rgba(0,23,41,0.65)); }
.video-slot > * { position: relative; }

/* Accessory spec cards (small parts shown inline instead of on their own page) */
.part-card { display: grid; grid-template-columns: 150px 1fr; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 20px); }
.part-card .card-media { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--c-border); padding: 0.5rem; }
.part-card .card-body { padding: 1.25rem 1.4rem; }
.part-card dl { margin: 0 0 0.75rem; font-size: 0.9rem; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; }
.part-card dt { color: var(--c-grey); font-weight: 700; }
.part-card dd { margin: 0; }
.part-card .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Filter bar & search ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter-bar button { border: 1px solid var(--c-border); background: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-family: inherit; font-weight: 700; font-size: 0.85rem; color: var(--c-muted); cursor: pointer; }
.filter-bar button[aria-pressed="true"] { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.search-box { display: flex; gap: 0.5rem; max-width: 640px; }
.search-box input { flex: 1; padding: 0.85rem 1rem; border: 1px solid var(--c-border); border-radius: 5px; font: inherit; font-size: 1.05rem; }
.search-meta { color: var(--c-muted); margin: 1.5rem 0; }
.header-search { color: var(--c-ink); padding: 0.5rem; display: flex; }
.header-search svg { width: 20px; height: 20px; }
.header-search:hover { color: var(--c-blue); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--c-navy); color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0,92,168,0.55), rgba(0,92,168,0) 70%); }
.cta-band .container { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.cta-band h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-band p { color: #c9d6e1; margin: 0; max-width: 620px; }

/* ---------- Trade show / timeline ---------- */
.event { display: grid; grid-template-columns: 110px 1fr auto; gap: 1.5rem; align-items: center; padding: 1.5rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.event + .event { margin-top: 1rem; }
.event-date { text-align: center; background: var(--c-sky); border-radius: 6px; padding: 0.75rem 0.5rem; color: var(--c-navy); }
.event-date strong { display: block; font-size: 1.5rem; line-height: 1.1; }
.event-date span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.event h3 { margin-bottom: 0.2rem; }
.event p { margin: 0; font-size: 0.93rem; color: var(--c-muted); }
.event .badge { justify-self: start; }
.event.past { opacity: 0.8; }
.event.past .event-date { background: #eef1f4; color: var(--c-grey); }

/* ---------- News ---------- */
.news-card .card-media { aspect-ratio: 16 / 10; }
.news-card .card-media img { object-fit: cover; }
.news-meta { font-size: 0.8rem; color: var(--c-grey); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.article-hero { padding: 0 0 2.5rem; }
.article-hero h1 { font-size: 2.6rem; max-width: 860px; margin: 1rem 0; }
.article-hero .lead { max-width: 760px; color: var(--c-body); }
.article-cover { border-radius: var(--radius); overflow: hidden; margin-bottom: 3rem; aspect-ratio: 21 / 9; background: var(--c-bg-alt); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; align-items: start; padding-bottom: 5rem; }
.prose { font-size: 1.08rem; max-width: 720px; }
.prose h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.prose h3 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.prose blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--c-blue); background: var(--c-sky); color: var(--c-navy); font-size: 1.15rem; font-weight: 700; border-radius: 0 var(--radius) var(--radius) 0; }
.prose figure { margin: 2rem 0; }
.prose figure img { border-radius: var(--radius); border: 1px solid var(--c-border); }
.prose figcaption { font-size: 0.85rem; color: var(--c-muted); margin-top: 0.5rem; }
.prose .callout { background: var(--c-bg-alt); border-radius: var(--radius); padding: 1.25rem 1.5rem; font-size: 1rem; }
.press-source { margin-top: 2.5rem; border-left: 4px solid var(--c-blue); }
.press-source .eyebrow { margin-bottom: 0.3rem; }
.press-note { display: grid; gap: 0.3rem; margin-top: 2rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--c-border); border-left: 3px solid var(--c-blue); border-radius: var(--radius); color: var(--c-body); }
.press-note:hover { color: var(--c-body); box-shadow: var(--shadow); }
.press-note .eyebrow { margin: 0; }
.press-note strong { color: var(--c-navy); line-height: 1.35; }
.press-note .link-arrow { font-size: 0.88rem; color: var(--c-blue); }
.article-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.25rem; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li + li { border-top: 1px solid var(--c-border); }
.mini-list a { display: grid; grid-template-columns: 56px 1fr; gap: 0.75rem; align-items: center; padding: 0.6rem 0; color: var(--c-navy); font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.mini-list img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--c-border); border-radius: 5px; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--c-border); }
.article-nav a { display: block; padding: 1rem 1.25rem; border: 1px solid var(--c-border); border-radius: var(--radius); }
.article-nav a span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-grey); font-weight: 700; }
.article-nav a.next { text-align: right; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3.5rem; align-items: start; }
.contact-form { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 2rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.35rem; color: var(--c-navy); }
.field label .opt { font-weight: 400; color: var(--c-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem 0.8rem; border: 1px solid #cfd6de; border-radius: 5px;
  font: inherit; font-size: 1rem; color: var(--c-ink); background: #fff;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--c-blue); outline-offset: 0; border-color: var(--c-blue); }
.form-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; margin: 1.25rem 0; }
.form-consent input { margin-top: 0.3rem; }
.hp { position: absolute; left: -5000px; }
.form-status { display: none; padding: 1rem 1.25rem; border-radius: 6px; margin-bottom: 1.25rem; font-weight: 700; }
.form-status.ok { display: block; background: #e8f5e9; color: #1b5e20; }
.form-status.err { display: block; background: #fdecea; color: #8a1c13; }
.contact-side { display: grid; gap: 1.25rem; }
.contact-mail { background: #fff; border: 1px solid var(--c-border); border-top: 3px solid var(--c-blue); border-radius: var(--radius); padding: 2rem; }
.mail-address { font-size: 1.6rem; font-weight: 700; margin: 0.5rem 0 1rem; word-break: break-all; }
.mail-context { background: var(--c-sky); color: var(--c-navy); font-weight: 700; padding: 0.6rem 0.9rem; border-radius: 5px; }
.contact-card { background: var(--c-bg-alt); border-radius: var(--radius); padding: 1.75rem; }
.contact-card h3 { font-size: 1.05rem; }
.contact-card p { font-size: 0.95rem; }
.contact-card .big { font-size: 1.15rem; font-weight: 700; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.steps li { counter-increment: s; position: relative; padding-left: 2.4rem; font-size: 0.95rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -0.05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-blue); color: #fff; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }

/* FAQ */
.faq details { border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; }
.faq details + details { margin-top: 0.75rem; }
.faq summary { cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 700; color: var(--c-navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--c-blue); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 1.25rem 1.1rem; }

/* ---------- Legal ---------- */
.legal-content { max-width: 800px; }
.legal-content h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.legal-content h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.placeholder { background: #fff7e0; border: 1px dashed #e0b400; padding: 0.1rem 0.4rem; border-radius: 3px; color: #7a5c00; font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-navy-deep); color: #9fb0bf; font-size: 0.9rem; padding: 4rem 0 2rem; }
.site-footer a { color: #d6e0e8; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-logo { height: 46px; width: auto; margin-bottom: 1.25rem; }
.footer-grid h4 { color: #fff; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-group { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font-size: 0.82rem; }
.footer-group img { height: 30px; width: auto; opacity: 0.9; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: #7f93a4; }
.footer-bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 44px; height: 44px; border-radius: 50%; background: var(--c-blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity 0.2s; z-index: 90; }
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { color: #fff; background: var(--c-blue-dark); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pillars .container { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(2) { border-right: 1px solid var(--c-border); }
  .pillar:nth-child(-n+2) { border-bottom: 1px solid var(--c-border); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 2.5rem; }
}
/* Seven top-level items plus search and CTA need ~1100px; below that the menu collapses. */
@media (max-width: 1120px) {
  :root { --header-h: 70px; }
  .brand img { height: 40px; }
  .nav-toggle { display: inline-flex; position: relative; z-index: 2; }
  .brand { position: relative; z-index: 2; }
  .main-nav {
    position: fixed; inset: 0; z-index: 1; height: auto;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    /* Room for top bar + header, which stay visible above the panel. */
    padding: calc(var(--header-h) + 3rem) 1.5rem 2rem; overflow-y: auto;
    /* Hidden (not just off-screen) while closed, so keyboard focus skips it. */
    transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .main-nav.open { transform: none; visibility: visible; transition: transform 0.25s ease; }
  .nav-item { height: auto; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--c-border); }
  .nav-link { padding: 1rem 0; justify-content: space-between; border: 0; font-size: 1.05rem; }
  .nav-link.active { border: 0; }
  .dropdown, .mega {
    position: static; opacity: 1; visibility: visible; transform: none !important;
    box-shadow: none; border: 0; padding: 0 0 1rem; width: auto; min-width: 0; display: none;
  }
  .nav-item:hover > .dropdown, .nav-item:hover > .mega { display: none; }
  .nav-item.open > .dropdown { display: block; }
  .nav-item.open > .mega { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .mega-feature { display: none; }
  .nav-cta { margin: 1.5rem 0 0; justify-content: center; }
  .header-search { display: none; }
}
@media (max-width: 980px) {
  .topbar-links .hide-sm { display: none; }
  .hero-grid, .split, .leadership, .page-hero.with-media .container, .pd-grid, .pd-two, .story, .contact-grid, .article-layout { grid-template-columns: 1fr; }
  .split.reverse > :first-child, .story.flip > :first-child { order: 0; }
  .hero { padding: 3.5rem 0 0; display: flex; flex-direction: column; }
  .hero-grid { min-height: 0; }
  .hero-badges { margin-bottom: 2rem; }
  /* Stacked: the photo follows the copy at full width and fades in from the navy above it. */
  .hero-media { position: relative; order: 2; width: 100%; height: clamp(220px, 52vw, 420px); }
  .hero-media img { object-position: 30% 60%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .hero h1 { font-size: 2.2rem; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .article-aside { position: static; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  section { padding: 3.5rem 0; }
  .container { padding: 0 1rem; }
  h2 { font-size: 1.6rem; }
  .page-hero h1, .article-hero h1, .pd-summary h1 { font-size: 1.9rem; }
  .grid-2, .grid-3, .grid-4, .pillars .container, .form-grid, .checklist.cols-2, .article-nav { grid-template-columns: 1fr; }
  .owner-strip { grid-template-columns: auto 1fr; gap: 1rem; }
  .owner-strip img { width: 64px; height: 64px; }
  .owner-strip .link-arrow { grid-column: 1 / -1; }
  .pillar { border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
  .cat-tile, .part-card { grid-template-columns: 110px 1fr; }
  .keyfacts { grid-template-columns: 1fr; }
  .keyfacts div:nth-child(odd) { border-right: 0; }
  .keyfacts div:nth-last-child(2) { border-bottom: 1px solid var(--c-border); }
  .event { grid-template-columns: 80px 1fr; }
  .event .btn { grid-column: 1 / -1; justify-self: start; }
  .topbar .container > span { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 1.25rem; }
  .subnav .subnav-cta { display: none; }
}

@media print {
  .topbar, .site-header, .subnav, .site-footer, .cta-band, .to-top, .gallery-thumbs, .btn-row, .related { display: none !important; }
  body { font-size: 11pt; }
  .pd-grid { grid-template-columns: 1fr 1fr; }
  .pd-section { padding: 1.5rem 0; page-break-inside: avoid; }
  a { color: inherit; }
}