/* ============================================================================
   AmbiPower — main stylesheet. Depends on tokens.css.

   This is an adaptation of the AmbiSecure design system
   (ambisecure-site/assets/css/main.css) onto AmbiPower's generator markup.
   Geometry, type scale, spacing rhythm, colour roles, component language and
   breakpoints are ported from that reference so the two Ambimat Group sites
   read as one design family. All content, branding, imagery and destinations
   remain AmbiPower's own — no AmbiSecure wording, product names or assets.

   Reference mapping (AmbiSecure selector -> AmbiPower selector):
     .ecosystem-bar / -inner  -> .ecobar / .ecobar .container
     .navbar / .brand-mark    -> .site-header .navbar / .brand-mark
     .nav-links / .nav-btn    -> .primary-nav .nav-links / .nav-btn
     .hero / .hero-container  -> .hero / .hero-container
     section / .section-*     -> .section / .container / .section-head
     .card / .blog-card       -> .card
     .callout / .prose / .faq -> .callout / .prose / .faq
     footer.site-footer       -> .site-footer
     .as-consent              -> .consent-banner

   Mobile-first concerns retained from the previous AmbiPower sheet: no-JS core,
   focus-visible, reduced-motion, 200% zoom, keyboard operation.
   ============================================================================ */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display face on every heading and UI control, matching the reference. */
h1, h2, h3, h4, h5, h6,
.brand, .nav-links a, .nav-links .navlink, .btn, .nav-btn, .nav-search,
.section-title, .hero-title, .eyebrow, .badge, .chip, .pill,
.brand-line, .eco-label, .site-footer h3, .stat-num, .post-meta, .breadcrumb {
  font-family: var(--font-display);
  letter-spacing: -0.1px;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
ul, ol { padding-left: 1.25rem; }

/* ── Focus / skip link ────────────────────────────────────────────────────── */
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--brand-dark); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); text-decoration: none; transition: top .15s;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ── Layout primitives ────────────────────────────────────────────────────── */
/* The reference puts horizontal padding on the full-bleed band (section, hero,
   navbar, footer) and centres an unpadded max-width container inside it. */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; }
.section { padding: var(--pad-section-y) var(--pad-section-x); }
.section.alt { background: var(--brand-soft); }
.section.dark { background: var(--brand-dark); color: #fff; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark p { color: var(--on-dark-muted); }
.section-narrow { max-width: 1000px; margin-inline: auto; }
.prose { max-width: var(--maxw-prose); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--sp-4); }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.mt-4 { margin-top: var(--sp-4); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1 { font-size: var(--fs-h1); line-height: 1.18; letter-spacing: -0.6px; font-weight: 700; color: var(--ink); }
h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.5px; font-weight: 700; color: var(--ink); }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; color: var(--ink); }
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 2.6px;
  color: var(--accent-dark);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
}

/* Section heading block. Centred by default like the reference; `.left` opts
   into the left-aligned editorial variant used by interior page heads. */
.section-head { text-align: center; margin-bottom: 60px; }
.section-head.left { text-align: left; }
.section-head .eyebrow { display: inline-block; margin-bottom: 12px; }
.section-head h1, .section-head h2 { margin-bottom: 16px; }
.section-head .section-line { width: 60px; height: 3px; background: var(--brand-red); margin: 14px auto 22px; }
.section-head.left .section-line { margin-left: 0; }
.section-head .lead { max-width: 760px; margin-inline: auto; }
.section-head.left .lead { margin-inline: 0; }

/* ── Ecosystem / utility bar ──────────────────────────────────────────────── */
.ecobar {
  background: var(--brand-dark);
  color: var(--on-dark);
  font-size: 12.5px;
  letter-spacing: 0.2px;
  border-bottom: 1px solid #4A5051;
}
/* The reference centres a --maxw-hero box and puts the 80px gutter INSIDE it,
   so the bar's first item sits further in than the header's. Reproduced here. */
.ecobar .container {
  max-width: var(--maxw-hero);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 9px var(--pad-section-x);
}
.ecobar .eco-label {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--on-dark-muted);
}
.ecobar ul { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
/* inline-block so the vertical padding contributes to the bar's height. In the
   reference these links are direct flex children (and so blockified); here they
   sit inside list items, which would otherwise swallow 8px of bar height. */
.ecobar a {
  display: inline-block;
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 500;
  font-family: var(--font-display);
  position: relative;
  padding: 4px 2px;
  transition: color .2s ease;
}
.ecobar a:hover { color: #fff; }
.ecobar a[aria-current="page"] { color: #fff; }
/* Active-brand marker: red rule pinned to the bar's lower edge. */
.ecobar a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 2px;
  background: var(--brand-red);
}
/* Off-site group destinations carry the reference's external-link mark. The
   current site has no rel="noopener", so it keeps the red underline instead. */
.ecobar a[rel~="noopener"]::after { content: ' \2197'; font-size: 10px; opacity: .6; }
.ecobar .eco-note {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--on-dark-muted);
  font-family: var(--font-display);
}

/* ── Primary header ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--brand-soft);
}
/* Hairline red gradient under the header, as in the reference. */
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-red) 30%, var(--brand-red) 70%, transparent);
  opacity: 0.35;
  pointer-events: none;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px var(--pad-section-x);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
/* The official AmbiPower medallion carries its own internal wordmark, so no
   adjacent text lockup is rendered — same treatment as the reference crest. */
.brand-mark { height: 52px; width: 52px; flex-shrink: 0; }

.primary-nav { display: flex; justify-content: center; flex: 1 1 auto; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links .navlink {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  font-family: var(--font-display);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover,
.nav-links .navlink:hover,
.nav-links a[aria-current="page"],
.nav-links .navlink[aria-expanded="true"] {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}
.nav-links .navlink .caret { font-size: 9px; opacity: .7; transition: transform .2s ease; }
.nav-links .navlink[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Dropdown: rendered in the reference's surface language — white panel, hairline
   border, 6px radius, red top accent — rather than a generic floating list. */
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 14px;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 120;
}
.dropdown.wide { min-width: 340px; }
.dropdown::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--brand-red);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.nav-links > li:hover > .dropdown,
.nav-links > li:focus-within > .dropdown,
.dropdown[data-open="true"] { display: block; }
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--brand-dark);
  text-decoration: none;
  border-bottom: 0;
  transition: background .15s ease, color .15s ease;
}
.dropdown a:hover { background: var(--brand-soft); color: var(--brand-red); }
.dropdown .group-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 12px 6px;
}
.dropdown .group-label:first-child { padding-top: 4px; }

/* Header actions: search trigger + red Contact CTA + mobile toggle. */
.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-search:hover { border-color: var(--brand-red); color: var(--brand-dark); box-shadow: var(--shadow-sm); }
.nav-search svg { display: block; }
.nav-search kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--brand-soft);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--muted);
  border: 1px solid var(--line);
}
.nav-btn {
  background: var(--brand-red);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.3px;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, box-shadow .2s ease;
}
.nav-btn:hover { background: var(--brand-red-dark); color: #fff; box-shadow: 0 6px 14px rgba(227, 34, 42, 0.22); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--brand-dark);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ── Site search (command palette) ────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 29, 30, 0.45);
  display: none;
  padding: 12vh 20px 20px;
}
.search-overlay[data-open="true"] { display: block; }
.search-panel {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(58, 63, 64, 0.28);
  overflow: hidden;
}
.search-field { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.search-field svg { color: var(--muted); flex-shrink: 0; }
.search-field input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
}
.search-results { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; }
.search-results li { margin: 0; }
.search-results a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.search-results a:hover, .search-results a:focus-visible { background: var(--brand-soft); }
.search-results .sr-title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; display: block; }
.search-results .sr-path { font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
.search-empty { padding: 18px 20px; color: var(--muted); font-size: 14.5px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  /* The reference uses `transition: all`, which also animates the focus ring's
     width and colour in over 200ms. A focus indicator must be present the
     instant the control is focused, so outline is excluded while the hover
     treatment (fill, lift, shadow) keeps easing. */
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-red); color: #fff; }
.btn-primary:hover { background: var(--brand-red-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(227, 34, 42, 0.22); }
/* Secondary = the reference's outlined dark button. */
.btn-secondary { background: transparent; color: var(--brand-dark); border-color: var(--brand-dark); }
.btn-secondary:hover { background: var(--brand-dark); color: #fff; }
/* Ghost = hairline-bordered tertiary. */
.btn-ghost { background: transparent; color: var(--brand-dark); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand-red); color: var(--brand-red); }
/* Text-only CTA for low-emphasis third actions. */
.btn-text { background: transparent; color: var(--ink); border-color: transparent; padding-left: 6px; padding-right: 6px; }
.btn-text:hover { background: transparent; color: var(--brand-red); }
.btn-small { padding: 10px 18px; font-size: 12.5px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-5); }

/* ── Homepage hero ────────────────────────────────────────────────────────── */
.hero {
  min-height: 88vh;
  background:
    radial-gradient(ellipse at 82% -10%, rgba(227, 34, 42, 0.09), transparent 58%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    #ffffff;
  background-size: auto, 60px 60px, 60px 60px, auto;
  padding: 56px var(--pad-section-x) 96px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* Restrained diagonal hatch, masked into the top-right quadrant. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49.5%, rgba(227, 34, 42, 0.04) 49.5%, rgba(227, 34, 42, 0.04) 50.5%, transparent 50.5%);
  background-size: 18px 18px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black, transparent 70%);
}
.hero-container {
  max-width: var(--maxw-hero);
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  position: relative;
}
.hero-left { flex: 1.05; }
.hero-right { flex: 0.95; display: flex; justify-content: center; }

.hero-logo {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 0 10px;
  filter: drop-shadow(0 6px 16px rgba(58, 63, 64, 0.14));
}
.hero-tag {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2.6px;
  color: var(--brand-red);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-tag::before { content: ''; width: 22px; height: 2px; background: var(--brand-red); }

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.04;
  color: var(--ink);
  margin-bottom: 28px;
  letter-spacing: -1.6px;
}
.hero-title .accent { color: var(--brand-red); }

.hero-desc {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 38px;
}
.hero .cta-row { margin-top: 0; }

.hero-creds {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 22px 26px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  list-style: none;
  padding-left: 0;
}
.hero-creds li { display: inline-flex; align-items: center; gap: 8px; }
.hero-creds li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-red);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Right-side featured visual: the official AmbiPower medallion presented in the
   reference's circular editorial language, with a caption block beneath. */
.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }
.hero-medallion { position: relative; display: block; width: 100%; max-width: 420px; }
/* Dashed orbit ring echoing the reference's editorial framing of its crest. */
.hero-medallion::before {
  content: '';
  position: absolute;
  inset: -7%;
  border: 1px dashed rgba(97, 106, 108, 0.28);
  border-radius: 50%;
  pointer-events: none;
}
.hero-crest {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 18px 44px rgba(58, 63, 64, 0.18));
}
.hero-visual-meta { text-align: center; max-width: 420px; }
.hero-visual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.hero-visual-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-red); flex-shrink: 0; }
.hero-visual-label {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.hero-visual-caption { font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* ── Interior page head ───────────────────────────────────────────────────── */
/* The reference does NOT reuse the homepage's two-column hero on interior
   pages. Its hub and article templates open with a tighter band
   (`padding: 60px 80px 30px`) holding a prose-width, left-aligned head.
   `.page-head` reproduces that; `.section.article` is the article body band. */
.page-head { padding: 60px var(--pad-section-x) 30px; }
/* The reference centres the head's prose box in the band while keeping its text
   left-aligned, so the H1 sits inboard of the section titles below it. */
.page-head .section-head { text-align: left; margin: 0 auto; max-width: var(--maxw-prose); }
.page-head h1 { font-size: var(--fs-h1); margin-bottom: 16px; }
.page-head h1 .accent { color: var(--brand-red); }
.page-head .lead { margin-inline: 0; }
/* A hub's first content section sits directly under the head, so it drops its
   own top padding rather than double-spacing. */
.page-head + .section { padding-top: 30px; }
.section.article { padding: 60px var(--pad-section-x); }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb {
  padding: 18px var(--pad-section-x) 0;
  font-size: 12.5px;
  font-family: var(--font-display);
  letter-spacing: 0.4px;
  color: var(--muted-2);
  text-transform: uppercase;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.breadcrumb a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--brand-red); }
.breadcrumb li::after { content: '/'; margin: 0 8px; color: var(--line); }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb li[aria-current="page"] { color: var(--brand-dark); }

/* ── Grids & cards ────────────────────────────────────────────────────────── */
/* Flex-wrap with a centred last row: full rows match a CSS grid exactly, and
   orphans centre instead of hanging left. Ported from the reference. */
.grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.grid-2 { gap: 28px; }
.grid-3 { gap: 24px; }
.grid-4 { gap: 22px; }
.grid-2 > * { flex: 1 1 calc((100% - 28px) / 2); max-width: calc((100% - 28px) / 2); min-width: 0; }
.grid-3 > * { flex: 1 1 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); min-width: 0; }
.grid-4 > * { flex: 1 1 calc((100% - 66px) / 4); max-width: calc((100% - 66px) / 4); min-width: 0; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 32px 28px;
  border-radius: var(--radius-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Red rule that draws in from the left edge on hover. */
.card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 3px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D8D8DA; }
a.card:hover::before { transform: scaleX(1); }
.card h2, .card h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); font-family: var(--font-display); margin: 0; }
.card p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }
.card ul { margin: 0; padding-left: 1.1rem; }
.card li { color: var(--muted); font-size: 15px; line-height: 1.8; }
.card .card-meta {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--accent-dark);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.card-soft { background: var(--brand-soft); padding: 30px; border-radius: var(--radius-card); }

.badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(227, 34, 42, 0.08);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.chip { background: var(--brand-soft); color: var(--brand-dark); font-size: 11.5px; padding: 6px 12px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; display: inline-block; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; }
.stat { text-align: center; padding: 24px 12px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat-num { font-size: 32px; font-weight: 700; color: var(--brand-red); font-family: var(--font-display); }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 8px; letter-spacing: 0.3px; font-family: var(--font-display); }

/* ── Feature row ──────────────────────────────────────────────────────────── */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 80px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse > :first-child { order: 2; }

/* ── Notices ──────────────────────────────────────────────────────────────── */
.notice {
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  color: var(--note-ink);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
}
.notice strong { color: var(--note-ink); }
.notice.info { background: var(--info-bg); border-color: var(--info-border); color: var(--ink); }

/* ── Feature / spec lists ─────────────────────────────────────────────────── */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  padding: 10px 0 10px 26px;
  position: relative;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.feature-list li:last-child { border-bottom: none; }
/* Diamond marker, matching the reference bullet language. */
.feature-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 19px;
  width: 8px; height: 8px;
  background: var(--brand-red);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ── Two-column detail layout ─────────────────────────────────────────────── */
.detail { display: grid; gap: 60px; }
@media (min-width: 900px) { .detail { grid-template-columns: 2fr 1fr; align-items: start; } }
.detail aside { position: sticky; top: calc(var(--header-h) + 12px); }
.detail h2 { font-size: var(--fs-h3); margin-top: 8px; }
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  background: #fff;
}
.panel h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; font-family: var(--font-display); }
.panel p, .panel li { font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.panel ul { margin: 0; padding-left: 1.1rem; }

/* ── Prose (articles, blog, legal) ────────────────────────────────────────── */
.prose h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.18; margin-bottom: 18px; letter-spacing: -0.6px; }
.prose h2 { font-size: 26px; font-weight: 700; margin: 44px 0 14px; letter-spacing: -0.3px; }
.prose h3 { font-size: 19px; font-weight: 700; margin: 28px 0 10px; }
.prose p { font-size: 16.5px; line-height: 1.85; margin-bottom: 16px; color: var(--muted); }
.prose ul, .prose ol { margin: 10px 0 20px 22px; padding-left: 0; }
.prose li { font-size: 16.5px; line-height: 1.85; margin-bottom: 8px; color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
  border-left: 3px solid var(--brand-red);
  padding: 8px 18px;
  margin: 22px 0;
  color: var(--muted);
  background: var(--brand-soft);
  border-radius: 0 6px 6px 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 14.5px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.prose thead { background: var(--brand-soft); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.prose th { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; }
.prose td { color: var(--muted); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 36px 0; }
.prose a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

.post-meta {
  font-size: 13px;
  color: var(--muted-2);
  margin-bottom: 18px;
  letter-spacing: 0.3px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
}

/* ── FAQ accordion ────────────────────────────────────────────────────────── */
.faq { max-width: 860px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.faq details[open] { border-color: #D8D8DA; box-shadow: 0 6px 18px rgba(58, 63, 64, .06); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron disclosure, matching the reference accordion. */
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s, border-color .15s;
  margin-top: -3px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq summary:hover { color: var(--brand-red); }
.faq summary:hover::after { border-color: var(--brand-red); }
.faq .faq-a { padding: 0 20px 16px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.faq .faq-a.pending { color: var(--note-ink); }

/* ── Callout / CTA band ───────────────────────────────────────────────────── */
.callout {
  background: var(--brand-dark);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 56px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, transparent 49.5%, rgba(227, 34, 42, 0.10) 49.5%, rgba(227, 34, 42, 0.10) 50.5%, transparent 50.5%);
  background-size: 16px 16px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 50% 100% at 100% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 100% 50%, black, transparent 80%);
}
.callout > * { position: relative; }
.callout h2 { font-size: 26px; font-weight: 700; margin-bottom: 10px; color: #fff; letter-spacing: -0.3px; }
.callout p { color: var(--on-dark-muted); max-width: 620px; font-size: 15px; line-height: 1.7; }
.callout .cta-row { margin-top: 0; }
.callout .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.callout .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-field { display: grid; gap: 6px; margin-bottom: 18px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--brand-dark); font-family: var(--font-display); letter-spacing: 0.3px; }
.form-field .req { color: var(--brand-red); }
.form-field input, .form-field textarea, .form-field select {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(227, 34, 42, 0.15);
}
.form-hint { font-size: var(--fs-small); color: var(--muted); }
.form-status { margin-top: var(--sp-3); }
form[data-inactive="true"] .btn[type="submit"] { pointer-events: none; }
.contact-block > .notice { margin-bottom: var(--sp-4); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--brand-dark);
  color: var(--on-dark-muted);
  padding: 70px var(--pad-section-x) 30px;
  font-size: 14px;
}
.site-footer a { color: var(--on-dark-muted); text-decoration: none; font-size: 13.5px; transition: color .2s; }
.site-footer a:hover { color: var(--brand-red); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid #4A5051;
}
.site-footer h3 {
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  font-family: var(--font-display);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-brand .brand-mark { height: 84px; width: 84px; margin-bottom: 16px; }
.footer-brand p { color: var(--on-dark-muted); line-height: 1.65; margin-top: 10px; font-size: 13.5px; }
.footer-brand b { color: #fff; }
.footer-eco {
  margin-top: 18px;
  padding-top: 22px;
  font-size: 12px;
  color: var(--on-dark-muted);
  font-family: var(--font-display);
  letter-spacing: 0.3px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.footer-eco a { color: var(--on-dark); }
.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 12.5px;
  color: var(--on-dark-muted);
  flex-wrap: wrap;
  gap: 14px;
}
.footer-social { display: flex; gap: 10px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--on-dark-muted); text-decoration: none; cursor: pointer; }
.linkbtn:hover { color: var(--brand-red); }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.notfound-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-5); }

/* ── Cookie consent ───────────────────────────────────────────────────────── */
/* Floating card with a red accent edge, matching the reference treatment. */
.consent-banner {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 400;
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(58, 63, 64, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(58, 63, 64, 0.04), 0 22px 60px rgba(58, 63, 64, 0.18);
  padding: 18px 22px 18px 26px;
  color: var(--ink);
  overflow: hidden;
}
.consent-banner[hidden] { display: none; }
.consent-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--brand-red);
}
.consent-inner { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.consent-inner > div:first-child { flex: 1 1 360px; min-width: 0; }
.consent-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 5px; color: var(--ink); }
.consent-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; max-width: 70ch; }
.consent-desc a { color: var(--accent-dark); }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; flex-wrap: wrap; }
.consent-banner .btn { padding: 10px 16px; font-size: 12.5px; border-radius: var(--radius); }
.consent-manage { flex: 1 1 100%; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.consent-manage[hidden] { display: none; }
.consent-manage .form-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.consent-manage .form-field input { width: auto; }
.consent-manage label { color: var(--ink); font-family: var(--font-sans); font-weight: 400; font-size: 14px; text-transform: none; letter-spacing: 0; }

/* ============================================================================
   RESPONSIVE — breakpoints ported from the reference (1080 / 880 / 520)
   ============================================================================ */
@media (max-width: 1180px) {
  :root { --pad-section-x: 48px; }
  .nav-links { gap: 18px; }
  .nav-search .nav-search-label, .nav-search kbd { display: none; }
  .nav-search { padding: 8px 10px; }
}

@media (max-width: 1080px) {
  .hero-container { flex-direction: column; gap: 50px; }
  .hero-right { width: 100%; max-width: 480px; }
  .hero-title { font-size: 52px; }
  .grid-4 > * { flex: 1 1 calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* Mobile navigation. No-JS: nav is revealed by nojs.css so links are never
   lost. With JS the default collapsed state here applies (no layout shift). */
@media (max-width: 980px) {
  :root { --pad-section-x: 24px; --header-h: 70px; }
  .navbar { padding: 14px var(--pad-section-x); flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .nav-search { display: none; }

  .primary-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    padding: 24px;
    border-bottom: 2px solid var(--brand-red);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .primary-nav[data-open="true"] { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links > li { border-bottom: 1px solid var(--line-soft); }
  .nav-links a, .nav-links .navlink {
    width: 100%;
    padding: 14px 2px;
    justify-content: space-between;
    border-bottom: 0;
    font-size: 15px;
  }
  .nav-links a:hover, .nav-links .navlink:hover { border-bottom-color: transparent; }

  /* Dropdowns become inline disclosure sections, not floating panels. */
  .dropdown {
    position: static;
    transform: none;
    display: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 10px 12px;
    min-width: 0;
  }
  .dropdown::before { content: none; }
  .nav-links > li:hover > .dropdown, .nav-links > li:focus-within > .dropdown { display: none; }
  .dropdown[data-open="true"] { display: block; }
  .dropdown a { padding: 9px 10px; }
}

@media (max-width: 880px) {
  .ecobar .container { gap: 14px; font-size: 11.5px; }
  .ecobar .eco-note { display: none; }

  .section { padding: 70px var(--pad-section-x); }
  .page-head { padding: 40px var(--pad-section-x) 20px; }
  .section.article { padding: 40px var(--pad-section-x); }
  .hero { padding: 60px var(--pad-section-x) 80px; min-height: 0; }
  .hero-title { font-size: 40px; line-height: 1.12; letter-spacing: -0.6px; }
  .hero-logo { width: 68px; height: 68px; }
  .hero-medallion { max-width: 300px; }
  .hero-desc { font-size: 16.5px; }
  .hero-creds { font-size: 12px; gap: 14px 18px; }
  .section-head { margin-bottom: 40px; }
  h2, .section-head h2 { font-size: 28px; }

  .grid-2 > *, .grid-3 > *, .grid-4 > * { flex: 1 1 100%; max-width: 100%; }
  .feature-row { grid-template-columns: 1fr; gap: 30px; }
  .feature-row.reverse > :first-child { order: 0; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: none; border-top: 1px solid var(--line); padding-top: 18px; }
  .callout { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .detail { gap: 40px; }
  .detail aside { position: static; }

  .site-footer { padding: 50px var(--pad-section-x) 24px; }
}

@media (max-width: 520px) {
  /* Keep the group bar to a compact two rows on small phones. */
  .ecobar { font-size: 11.5px; }
  .ecobar .container { gap: 6px 14px; padding-block: 7px; }
  .ecobar .eco-label { flex: 1 0 100%; }
  .hero-title { font-size: 32px; }
  .prose h1, .page-head h1 { font-size: 28px; }
  .prose h2 { font-size: 22px; }
  .stat-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .consent-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px 16px 22px; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; text-align: center; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  a.card:hover, .btn-primary:hover { transform: none; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .ecobar, .site-footer, .nav-toggle, .callout, .cta-row,
  .consent-banner, .search-overlay { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
  .hero, .page-hero { background: none; min-height: 0; padding: 20px 0; }
}