@charset "utf-8";
/* ==========================================================================
   博翔科技 PROTECT SAFE - design system
   Reference class: international conformity-assessment bodies (TUV, SGS,
   Intertek, Bureau Veritas). Engineering-grade, data-dense, calm.

   Contents
   01 tokens          06 hero            11 metrics (KPI / meter)
   02 base            07 sections        12 article
   03 typography      08 cards           13 forms
   04 layout          09 tables          14 footer
   05 header / nav    10 process         15 utilities / motion / print
   ========================================================================== */

/* -- 01 tokens ----------------------------------------------------------- */
:root {
  color-scheme: light;              /* fixed light brand surface; no auto-invert */

  /* brand ramp - blue. --brand-600 is the validated mark colour (>=3:1 on
     surface, inside the L band, above the chroma floor). Meter tracks use a
     lighter step of this same ramp, never a second hue. */
  --brand-50:  #eef5fc;
  --brand-100: #d9e8f7;
  --brand-200: #b8d4ef;
  --brand-300: #8ab9e3;
  --brand-400: #4a8fd0;
  --brand-600: #0b5cab;            /* primary / meter fill */
  --brand-700: #084a8b;
  --brand-800: #063a6d;

  /* navy - surfaces and deep sections */
  --navy-900: #06172b;
  --navy-800: #0a1f38;
  --navy-700: #0e2c4d;
  --navy-600: #143a63;

  /* cyan - single accent, used on navy surfaces only */
  --accent:      #17a2d4;
  --accent-text: #6cc9ea;          /* text-weight accent on navy */

  /* ink + neutrals */
  --ink:        #0c1a2b;
  --ink-2:      #223851;
  --muted:      #5b6f86;
  --muted-2:    #7b8da3;
  --line:       #dde5ed;
  --line-2:     #c8d4e0;
  --surface:    #ffffff;
  --surface-2:  #f4f8fb;
  --surface-3:  #eaf1f7;

  /* status - reserved, never reused as a series colour */
  --ok:      #0e7a52;
  --ok-bg:   #e6f4ee;
  --warn:    #9a5b00;
  --warn-bg: #fdf1de;
  --crit:    #a3231f;
  --crit-bg: #fbeae9;

  /* type */
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
          system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* fluid type scale */
  --fs-display: clamp(2.5rem, 1.35rem + 3.6vw, 4.25rem);
  --fs-h1:      clamp(2rem, 1.3rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.55rem, 1.15rem + 1.25vw, 2.35rem);
  --fs-h3:      clamp(1.15rem, 1rem + .5vw, 1.45rem);
  --fs-h4:      clamp(1rem, .95rem + .25vw, 1.15rem);
  --fs-lead:    clamp(1rem, .95rem + .4vw, 1.19rem);
  --fs-body:    .975rem;
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;
  --fs-label:   .69rem;

  /* rhythm */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sp-section: clamp(3.75rem, 2rem + 6vw, 7rem);
  --sp-block: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);

  --radius: 3px;                   /* near-square: engineering, not consumer */
  --radius-lg: 5px;
  --ring: 0 0 0 3px rgba(11, 92, 171, .28);
  --shadow-1: 0 1px 2px rgba(9, 30, 54, .06), 0 2px 8px rgba(9, 30, 54, .05);
  --shadow-2: 0 2px 4px rgba(9, 30, 54, .07), 0 12px 32px rgba(9, 30, 54, .1);
  --ease: cubic-bezier(.32, .72, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;      /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--fs-body)/1.85 var(--sans);
  font-feature-settings: "palt" 1;  /* tighter CJK punctuation */
  text-spacing-trim: space-first;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--surface-3); }   /* placeholder tone while decoding */

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-block) 0; }

::selection { background: var(--brand-200); color: var(--navy-900); }

.skip-link {
  position: absolute; left: 1rem; top: -3.5rem; z-index: 200;
  background: var(--navy-900); color: #fff;
  padding: .7rem 1.1rem; font-size: var(--fs-sm); font-weight: 700;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 1rem; text-decoration: none; }

/* -- 03 typography ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.24; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--ink); }

code, kbd, samp {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--surface-3);
  padding: .1em .35em;
  border-radius: 2px;
}

/* eyebrow: small caps label above a heading */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-600);
}
.eyebrow::before {
  content: ""; flex: 0 0 1.75rem; height: 2px;
  background: currentColor;
}
.eyebrow--light { color: var(--accent-text); }
.eyebrow--center { justify-content: center; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 68ch;
}
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* -- 04 layout ----------------------------------------------------------- */
.shell {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.shell--narrow { width: min(860px, 100% - var(--gutter) * 2); }

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.25rem); }
.section--alt { background: var(--surface-2); }
.section--navy { background: var(--navy-800); color: #eaf1f7; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #b7c8d9; }

/* section header: title left, action right */
.sec-head {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--sp-block);
}
.sec-head > div { max-width: 62ch; }
.sec-head h2 + p { margin-top: .9rem; color: var(--muted); }

.grid { display: grid; gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.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--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
/* align-items: start matters here. Without it the row stretches the sidebar to the
   main column's height, and the aside cards inherit that stretch - a 240px card
   ends up as a 900px block of flat colour. */
.grid--aside {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

/* -- 05 header / nav ----------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: #9fb3c6;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 2.5rem;
}
.topbar a { color: #cfdcea; }
.topbar a:hover { color: #fff; }
.topbar__contact { display: flex; align-items: center; gap: 1.5rem; }
.topbar__contact span { display: inline-flex; align-items: center; gap: .4rem; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header--scrolled { box-shadow: var(--shadow-1); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 4.75rem;
}

.brand { display: inline-flex; align-items: center; gap: .8rem; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }

/* The real wordmark is a 240x68 transparent asset; cap by height so it stays
   crisp and the header rhythm does not depend on the source pixel size. */
.brand__logo {
  height: 2.9rem; width: auto; background: transparent;
}
.brand__badge {
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto; background: transparent;
}
@media (max-width: 420px) { .brand__logo { height: 2.4rem; } }
.brand__name {
  display: block; font-size: .95rem; font-weight: 800;
  letter-spacing: .11em; color: var(--navy-800); line-height: 1.2;
}
.brand__sub {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .22em; color: var(--muted-2); margin-top: .18rem;
}

.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .7rem .8rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  border-radius: var(--radius);
}
.nav__link:hover { color: var(--brand-600); background: var(--brand-50); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--brand-600); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: .8rem; bottom: -1px; height: 2px;
  background: var(--brand-600);
}
.nav__item { position: relative; }
.nav__caret { width: .55rem; height: .55rem; opacity: .5; transition: transform .2s var(--ease); }
.nav__item[data-open="true"] .nav__caret { transform: rotate(180deg); }

/* mega menu */
/* Three columns, not two: with 12 services a 2-column panel is ~660px tall and
   its last two rows fall below the fold on a 768px-high laptop. Three columns
   makes it 4 rows, and the max-height is a safety net for any future growth. */
.mega {
  position: absolute; top: calc(100% + 1px); left: 50%;
  translate: -50% 0;
  width: min(64rem, calc(100vw - 3rem));
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: 1.25rem 1.35rem 1.35rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .15rem 1.25rem;
  max-height: calc(100dvh - 8.5rem); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; translate: -50% .5rem;
  transition: opacity .18s var(--ease), translate .18s var(--ease), visibility .18s;
}
@media (max-width: 1180px) { .mega { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nav__item[data-open="true"] > .mega { opacity: 1; visibility: visible; translate: -50% 0; }
.mega__col-title {
  grid-column: 1 / -1;
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
  padding: .35rem .6rem .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .5rem;
}
.mega__link {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .05rem .45rem;
  padding: .5rem .55rem;
  border-radius: var(--radius);
  color: var(--ink);
}
.mega__link:hover { background: var(--brand-50); text-decoration: none; }
.mega__link b { font-size: var(--fs-sm); font-weight: 700; grid-column: 2; }
.mega__link span {
  grid-column: 2; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6;
}
.mega__num {
  grid-row: 1 / span 2; font-size: var(--fs-xs); font-weight: 800;
  color: var(--brand-300); padding-top: .15rem;
  font-variant-numeric: tabular-nums;
}

.nav__cta {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--brand-600); color: #fff;
  padding: .85rem 1.15rem;
  font-size: var(--fs-sm); font-weight: 700;
  border-radius: var(--radius);
  transition: background .18s var(--ease);
}
.nav__cta:hover { background: var(--brand-700); color: #fff; text-decoration: none; }

.nav__toggle {
  display: none; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line-2); background: var(--surface);
  border-radius: var(--radius); cursor: pointer;
  padding: 0; place-items: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 1.1rem; height: 2px;
  background: var(--ink); transition: transform .2s var(--ease), opacity .2s;
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::before { opacity: 0; }
.nav__toggle[aria-expanded="true"] span::after { transform: rotate(-90deg) translateX(0); }

/* -- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: .95rem 1.4rem;
  font: 700 var(--fs-sm)/1.2 var(--sans);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-align: center;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand-600); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; }
.btn--dark { background: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-700); color: #fff; }
.btn--white { background: #fff; color: var(--brand-700); }
.btn--white:hover { background: var(--brand-50); color: var(--brand-800); }
.btn--outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--brand-600); color: var(--brand-600); background: var(--brand-50); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.btn--sm { padding: .65rem 1rem; font-size: var(--fs-xs); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand-600);
}
.text-link::after { content: "→"; transition: translate .18s var(--ease); }
.text-link:hover { text-decoration: none; }
.text-link:hover::after { translate: 3px 0; }

/* -- 06 hero ------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(112deg, var(--navy-900) 0%, var(--navy-700) 55%, #0b3f74 100%);
  color: #fff;
}
.hero__grid, .subhero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(160deg, #000 15%, transparent 78%);
}

/* ---- hero motion -------------------------------------------------------
   Three cheap, composited layers over the static grid. Everything animates
   transform/opacity only (no layout, no paint of large areas), each layer is
   decorative and aria-hidden, and the whole block is gated behind
   prefers-reduced-motion so it never moves for viewers who opted out. */
.hero__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* 1. a slow drift on a second, finer grid - reads as depth, not movement */
.hero__fx-grid {
  position: absolute; inset: -76px;
  background-image:
    linear-gradient(rgba(108, 201, 234, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 201, 234, .07) 1px, transparent 1px);
  background-size: 152px 152px;
  mask-image: radial-gradient(120% 90% at 78% 40%, #000 0%, transparent 70%);
}

/* 2. a scanning sweep, like a measurement pass across the field */
.hero__fx-scan {
  position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg,
    transparent 0%, rgba(108, 201, 234, .05) 45%,
    rgba(108, 201, 234, .1) 50%, rgba(108, 201, 234, .05) 55%, transparent 100%);
  will-change: transform;
}

/* 3. drifting nodes - a sparse constellation, not confetti */
.hero__fx-node {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-text); opacity: .5;
  box-shadow: 0 0 0 1px rgba(108, 201, 234, .25), 0 0 14px 2px rgba(23, 162, 212, .35);
  will-change: transform, opacity;
}
.hero__fx-node:nth-child(1) { top: 22%; left: 61%; }
.hero__fx-node:nth-child(2) { top: 58%; left: 72%; }
.hero__fx-node:nth-child(3) { top: 37%; left: 85%; }
.hero__fx-node:nth-child(4) { top: 74%; left: 55%; }
.hero__fx-node:nth-child(5) { top: 14%; left: 78%; }

/* thin connector lines between a couple of nodes: an engineering diagram feel */
.hero__fx-link {
  position: absolute; height: 1px; transform-origin: left center;
  background: linear-gradient(90deg, rgba(108, 201, 234, .35), transparent);
}
.hero__fx-link:nth-of-type(1) { top: 22%; left: 61%; width: 15.5rem; rotate: 27deg; }
.hero__fx-link:nth-of-type(2) { top: 58%; left: 72%; width: 11rem; rotate: -34deg; }

@media (prefers-reduced-motion: no-preference) {
  .hero__fx-grid { animation: hero-drift 34s linear infinite; }
  .hero__fx-scan { animation: hero-scan 11s ease-in-out infinite; }
  .hero__fx-node { animation: hero-float 7s ease-in-out infinite; }
  .hero__fx-node:nth-child(2) { animation-duration: 9s; animation-delay: -2s; }
  .hero__fx-node:nth-child(3) { animation-duration: 8s; animation-delay: -4s; }
  .hero__fx-node:nth-child(4) { animation-duration: 10s; animation-delay: -1s; }
  .hero__fx-node:nth-child(5) { animation-duration: 6.5s; animation-delay: -3s; }
  .hero__fx-link { animation: hero-link 11s ease-in-out infinite; }
  .hero__fx-link:nth-of-type(2) { animation-delay: -5s; }
}

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-152px, -152px, 0); }
}
@keyframes hero-scan {
  0%   { transform: translate3d(-45%, 0, 0); }
  50%  { transform: translate3d(190%, 0, 0); }
  100% { transform: translate3d(-45%, 0, 0); }
}
@keyframes hero-float {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .35; }
  50%      { transform: translate3d(0, -14px, 0); opacity: .8; }
}
@keyframes hero-link {
  0%, 100% { opacity: .25; }
  50%      { opacity: .7; }
}

/* The effect layer is pure decoration; drop it entirely on small screens where
   the panel it sits behind is hidden anyway. */
@media (max-width: 900px) { .hero__fx { display: none; } }
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.75rem);
}
.hero h1 { color: #fff; font-size: var(--fs-display); letter-spacing: -.035em; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero__lead { margin-top: 1.5rem; color: #c3d2e1; font-size: var(--fs-lead); max-width: 40ch; }
.hero .btn-row { margin-top: 2.25rem; }

/* trust strip under the hero */
.hero__strip {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem;
  padding-block: 1.5rem;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #93a8bd;
}
.hero__strip b { color: #fff; font-weight: 800; }

/* hero side panel: standards board */
.stdboard {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(6, 23, 43, .55);
  backdrop-filter: blur(4px);
}
.stdboard__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #9fb8cd;
}
.stdboard__head b { color: var(--accent-text); }
.stdboard__body { display: grid; grid-template-columns: repeat(2, 1fr); }
.stdboard__cell {
  padding: .95rem 1.1rem;
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.stdboard__cell:nth-child(2n) { border-right: 0; }
.stdboard__cell:nth-last-child(-n+2) { border-bottom: 0; }
.stdboard__cell small {
  display: block; font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: #7f97ae; margin-bottom: .3rem;
}
.stdboard__cell b { font-size: var(--fs-sm); color: #fff; font-weight: 700; }

/* inner-page hero */
.subhero {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--navy-900), var(--navy-700) 70%, #0b3d70);
  color: #fff;
}
.subhero__inner { position: relative; padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem); }
.subhero h1 { color: #fff; max-width: 34ch; }
.subhero__lead { margin-top: 1.1rem; color: #b9c9d8; font-size: var(--fs-lead); max-width: 62ch; }
.subhero__meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.5rem;
  font-size: var(--fs-sm); color: #9fb4c8;
}
.subhero__meta b { color: #fff; font-weight: 700; }

/* breadcrumbs */
.crumbs { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0; padding-block: .8rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand-600); }
.crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 600; }

/* -- 07 sections --------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.pillar {
  background: var(--surface); padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.pillar__num {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em;
  color: var(--brand-400); font-variant-numeric: tabular-nums;
}
.pillar h3 { font-size: var(--fs-h4); }
.pillar p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* split feature block with image */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.feature--flip > figure { order: -1; }
.feature figure { margin: 0; position: relative; }
.feature figure img { width: 100%; border-radius: var(--radius); }
.feature figcaption {
  margin-top: .75rem; font-size: var(--fs-xs); color: var(--muted-2);
}

/* -- 08 cards ------------------------------------------------------------ */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative; background: var(--surface);
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.15rem);
  display: flex; flex-direction: column; gap: .85rem;
  min-height: 15rem;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
a.card:hover { background: var(--brand-700); color: #fff; text-decoration: none; }
a.card:hover :is(h3, p, small, .card__num, .card__tag) { color: #fff; }
a.card:hover .card__arrow { color: #fff; translate: 3px -3px; }
.card__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.card__num {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em;
  color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.card__tag {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em;
  color: var(--brand-600); text-transform: uppercase;
}
.card h3 { font-size: var(--fs-h3); }
.card p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.card__std {
  margin-top: auto; padding-top: .5rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}
.card__arrow {
  position: absolute; right: 1.5rem; bottom: 1.35rem;
  color: var(--brand-300); font-size: 1.05rem;
  transition: translate .2s var(--ease), color .2s var(--ease);
}

/* article card */
.post-card {
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.post-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-1); text-decoration: none; }
a.post-card:hover h3 { color: var(--brand-700); }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--ease); }
a.post-card:hover .post-card__media img { scale: 1.03; }
.post-card__body { padding: 0 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.post-card h3 { font-size: 1.05rem; line-height: 1.55; transition: color .2s var(--ease); }
.post-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.post-card__more { margin-top: auto; padding-top: .4rem; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-600); }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .5rem;
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .08em;
  background: var(--brand-50); color: var(--brand-700);
  border-radius: 2px; text-transform: uppercase;
}
.chip--ok { background: var(--ok-bg); color: var(--ok); }
.chip--warn { background: var(--warn-bg); color: var(--warn); }
.chip--crit { background: var(--crit-bg); color: var(--crit); }

/* industry list */
.ilist { border-top: 1px solid rgba(255, 255, 255, .2); }
.ilist a {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
  align-items: center; gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
}
.ilist a:hover { text-decoration: none; }
.ilist a:hover h3 { color: var(--accent-text); }
.ilist span, .ilist b { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 800; }
.ilist h3 { font-size: var(--fs-h4); color: #fff; transition: color .2s var(--ease); }
.ilist small { display: block; margin-top: .3rem; font-size: var(--fs-xs); color: #9db1c5; font-weight: 400; letter-spacing: 0; }

/* -- 09 tables ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
table.data caption {
  caption-side: top; text-align: left;
  padding: .9rem 1rem; font-size: var(--fs-xs); font-weight: 700;
  color: var(--muted); background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
table.data th, table.data td {
  padding: .8rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.data thead th {
  background: var(--surface-2); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
  white-space: nowrap;
}
table.data tbody tr:last-child :is(th, td) { border-bottom: 0; }
table.data tbody tr:hover { background: var(--brand-50); }
table.data th[scope="row"] { font-weight: 700; color: var(--ink); }

/* standards directory */
.directory { border-top: 2px solid var(--navy-800); }
.directory__row {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, .5rem + 2vw, 3rem);
  padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.directory__title { display: flex; flex-direction: column; gap: .5rem; }
.directory__title small {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-600);
}
.directory__title h3 { font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); }
.directory__title p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.directory__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; align-content: start; }
.directory__items li {
  display: grid; grid-template-columns: 1rem 1fr; gap: .6rem;
  padding: .7rem 0; border-bottom: 1px solid var(--surface-3);
  font-size: var(--fs-sm);
}
.directory__items li::before { content: "↗"; color: var(--brand-400); font-size: var(--fs-xs); }

/* -- 10 process ---------------------------------------------------------- */
.steps { counter-reset: step; border-top: 1px solid var(--line); }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 3.25rem minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 1rem 1.5rem; align-items: baseline;
  padding-block: 1.5rem; border-bottom: 1px solid var(--line);
}
.step::before {
  content: "0" counter(step);
  font-size: var(--fs-xs); font-weight: 800; color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--fs-h4); }
.step p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.step__note {
  grid-column: 2 / -1; margin-top: .4rem;
  font-size: var(--fs-xs); color: var(--muted-2);
}

/* -- 11 metrics ---------------------------------------------------------- */
/* KPI row of stat tiles. Values wear text tokens, not the mark colour. */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.kpi {
  background: var(--surface); padding: 1.5rem 1.5rem 1.35rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.kpi__value {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
  font-weight: 700; line-height: 1.05; color: var(--ink);
  letter-spacing: -.03em;
  /* proportional figures: tabular-nums looks loose at display sizes */
}
.kpi__value sub, .kpi__unit {
  font-size: .4em; font-weight: 700; color: var(--muted); margin-left: .2em;
  vertical-align: baseline;
}
.kpi__label { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.kpi__note { font-size: var(--fs-label); color: var(--muted-2); letter-spacing: .04em; }
.section--navy .kpi { background: transparent; }
.section--navy .kpi-row { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .16); }
.section--navy .kpi__value { color: #fff; }
.section--navy .kpi__label { color: #a9bccf; }
.section--navy .kpi__note { color: #7f96ac; }

/* Meter: ratio against a limit. Fill = --brand-600 (validated); track is a
   lighter step of the SAME ramp so state reads across the whole bar. */
.meters { display: grid; gap: 1.35rem; }
.meter__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .5rem;
}
.meter__label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.meter__value {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.meter__track {
  height: .5rem; background: var(--brand-100); border-radius: 999px; overflow: hidden;
}
.meter__fill {
  height: 100%; background: var(--brand-600); border-radius: 999px;
  transform-origin: left center;
  width: 0;
}
/* Width comes from the data attribute, not an inline style, so the strict CSP
   needs no style-src 'unsafe-inline' and the meter still renders without JS.
   Steps of 1% cover every value the content can hold. */
.meter__fill[data-value="0"] { width: 0% }
.meter__fill[data-value="5"] { width: 5% }
.meter__fill[data-value="10"] { width: 10% }
.meter__fill[data-value="15"] { width: 15% }
.meter__fill[data-value="20"] { width: 20% }
.meter__fill[data-value="25"] { width: 25% }
.meter__fill[data-value="30"] { width: 30% }
.meter__fill[data-value="35"] { width: 35% }
.meter__fill[data-value="40"] { width: 40% }
.meter__fill[data-value="45"] { width: 45% }
.meter__fill[data-value="50"] { width: 50% }
.meter__fill[data-value="55"] { width: 55% }
.meter__fill[data-value="60"] { width: 60% }
.meter__fill[data-value="65"] { width: 65% }
.meter__fill[data-value="70"] { width: 70% }
.meter__fill[data-value="75"] { width: 75% }
.meter__fill[data-value="80"] { width: 80% }
.meter__fill[data-value="85"] { width: 85% }
.meter__fill[data-value="86"] { width: 86% }
.meter__fill[data-value="87"] { width: 87% }
.meter__fill[data-value="88"] { width: 88% }
.meter__fill[data-value="89"] { width: 89% }
.meter__fill[data-value="90"] { width: 90% }
.meter__fill[data-value="91"] { width: 91% }
.meter__fill[data-value="92"] { width: 92% }
.meter__fill[data-value="93"] { width: 93% }
.meter__fill[data-value="94"] { width: 94% }
.meter__fill[data-value="95"] { width: 95% }
.meter__fill[data-value="96"] { width: 96% }
.meter__fill[data-value="97"] { width: 97% }
.meter__fill[data-value="98"] { width: 98% }
.meter__fill[data-value="99"] { width: 99% }
.meter__fill[data-value="100"] { width: 100% }
.meter__note { margin-top: .4rem; font-size: var(--fs-xs); color: var(--muted-2); }
.section--navy .meter__label { color: #fff; }
.section--navy .meter__value { color: #cfdcea; }
.section--navy .meter__track { background: rgba(255, 255, 255, .16); }
.section--navy .meter__fill { background: var(--accent); }

/* market coverage matrix */
.coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.coverage__cell { background: var(--surface); padding: 1.25rem; }
.coverage__cell > b {
  display: block; font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-600); margin-bottom: .75rem;
}
.coverage__cell ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.coverage__cell li { font-size: var(--fs-sm); color: var(--ink-2); }
.coverage__cell li small { display: block; font-size: var(--fs-xs); color: var(--muted-2); }

/* -- 12 article ---------------------------------------------------------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }

.prose {
  font-size: 1.03rem; line-height: 1.95; color: var(--ink-2);
  /* The measure is capped for readability, but tables and figures are allowed to
     break out of it (see .prose .table-wrap / figure below) because a 12-column
     standards table squeezed into 74ch is unreadable. */
  --measure: 74ch;
  --breakout: 6rem;
  max-width: var(--measure);
}
.prose > * + * { margin-top: 1.3em; }

/* H2: an accent bar in the left margin instead of a plain hairline, so section
   boundaries are obvious when skimming a long standards article. */
.prose h2 {
  position: relative;
  margin-top: 2.7em; padding-top: 1.15em;
  border-top: 1px solid var(--line);
  font-size: clamp(1.38rem, 1.1rem + .85vw, 1.85rem);
  letter-spacing: -.02em;
  scroll-margin-top: 7rem;
}
.prose h2::after {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 3.25rem; height: 3px; background: var(--brand-600);
}
.prose h3 {
  margin-top: 2.05em; padding-left: .8rem;
  border-left: 3px solid var(--brand-200);
  font-size: clamp(1.12rem, 1rem + .42vw, 1.32rem);
  scroll-margin-top: 7rem;
}
.prose h4 {
  margin-top: 1.7em; font-size: 1.02rem; color: var(--ink);
}
.prose h4::before {
  content: ""; display: inline-block; width: .4rem; height: .4rem;
  margin-right: .5rem; vertical-align: .12em;
  background: var(--brand-400); rotate: 45deg;
}
.prose p { margin-bottom: 0; }
.prose :is(ul, ol) { padding-left: 1.35rem; display: grid; gap: .6rem; }
.prose li { padding-left: .2rem; }
.prose li::marker { color: var(--brand-400); font-weight: 700; }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.prose figcaption {
  margin-top: .7rem; font-size: var(--fs-xs); color: var(--muted-2);
  padding-left: .75rem; border-left: 2px solid var(--line-2);
}
.prose blockquote {
  margin: 2em 0; padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--brand-600); background: var(--surface-2);
  font-size: var(--fs-lead); color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-200); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--brand-600); }

/* Data-dense blocks break out past the reading measure. Standards tables carry
   three or four columns of codes and notes; at 74ch every cell wraps. */
.prose .table-wrap,
.prose figure,
.prose .deadline {
  width: calc(100% + var(--breakout));
  max-width: calc(100vw - var(--gutter) * 2);
  margin-inline: 0;
}
.prose .table-wrap { margin-block: 2.2em; }
.prose .deadline { margin-block: 1.6em; }
@media (max-width: 1080px) { .prose { --breakout: 0rem; } }

/* Row headers in article tables are usually a code, a date or a standard number:
   never break them, and let the value columns absorb the wrapping instead. */
.prose table.data th[scope="row"] {
  white-space: nowrap; vertical-align: top;
  background: var(--surface-2);
}
.prose table.data td { vertical-align: top; }
.prose table.data thead th { position: sticky; top: 0; z-index: 1; }

/* answer-first summary box */
.answer-box {
  border: 1px solid var(--brand-200); border-left: 3px solid var(--brand-600);
  background: var(--brand-50);
  padding: clamp(1.15rem, 1rem + .6vw, 1.6rem);
  border-radius: var(--radius);
}
.answer-box > b {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-700); margin-bottom: .7rem;
}
.answer-box p { font-size: var(--fs-lead); line-height: 1.8; color: var(--ink); margin: 0; }
.answer-box ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.answer-box li { font-size: var(--fs-sm); }

/* key takeaways */
.takeaways {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); padding: clamp(1.15rem, 1rem + .6vw, 1.6rem);
}
.takeaways > b {
  display: block; font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .8rem;
}
.takeaways ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; }
.takeaways li { font-size: var(--fs-sm); color: var(--ink-2); }

/* callouts */
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--muted-2);
  background: var(--surface); padding: 1.1rem 1.35rem; border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.callout > b { display: block; margin-bottom: .4rem; font-size: var(--fs-sm); }
.callout--note { border-left-color: var(--brand-600); background: var(--brand-50); }
.callout--warn { border-left-color: var(--warn); background: var(--warn-bg); }
.callout--crit { border-left-color: var(--crit); background: var(--crit-bg); }
.callout--ok { border-left-color: var(--ok); background: var(--ok-bg); }

/* deadline / date strip */
.deadline {
  display: flex; flex-wrap: wrap; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.deadline > div { background: var(--surface); padding: .9rem 1.15rem; flex: 1 1 9rem; }
.deadline small {
  display: block; font-size: var(--fs-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: .3rem;
}
.deadline b { font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; }

/* table of contents */
.toc { position: sticky; top: 6.5rem; }
.toc__title {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: .7rem; border-bottom: 1px solid var(--line); margin-bottom: .7rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.toc a {
  display: block; padding: .45rem .6rem;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0;
}
.toc a:hover { color: var(--brand-600); background: var(--brand-50); text-decoration: none; }
.toc a[aria-current="true"] {
  color: var(--brand-700); font-weight: 700;
  border-left-color: var(--brand-600); background: var(--brand-50);
}
.toc ol ol { padding-left: .85rem; }
.toc ol ol a { font-size: var(--fs-xs); }

/* aside blocks */
.aside-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; background: var(--surface-2);
}
.aside-card > b {
  display: block; font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .7rem;
}
.aside-card p { font-size: var(--fs-sm); color: var(--muted); }
.aside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.aside-card li { font-size: var(--fs-sm); }
.aside-card--navy { background: var(--navy-800); border-color: var(--navy-800); color: #cfdcea; }
.aside-card--navy > b { color: var(--accent-text); }
.aside-card--navy p { color: #a9bccf; }
.aside-card__actions { display: grid; gap: .55rem; margin-top: 1.1rem; }
.aside-card__actions .btn { width: 100%; gap: .5rem; }
.aside-card__actions .btn svg { flex: 0 0 auto; }

/* author / reviewer credential box */
.byline {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem;
  align-items: center;
  padding: 1.15rem 0; border-block: 1px solid var(--line);
  margin-top: 1.75rem;
}
.byline__avatar {
  grid-row: 1 / span 2; width: 2.85rem; height: 2.85rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--navy-800); color: #fff; font-weight: 800; font-size: .95rem;
}
.byline__name { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.byline__meta { font-size: var(--fs-xs); color: var(--muted); }
.byline__meta b { color: var(--ink-2); font-weight: 600; }

.authorbox {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem;
  padding: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); margin-top: var(--sp-block);
}
.authorbox__avatar {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-800); color: #fff; font-weight: 800; font-size: 1.1rem;
}
.authorbox h2 { font-size: var(--fs-h4); }
.authorbox p { font-size: var(--fs-sm); color: var(--muted); margin: .5rem 0 0; }
.authorbox ul { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.authorbox li {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
  background: var(--surface); border: 1px solid var(--line-2);
  padding: .25rem .5rem; border-radius: 2px; color: var(--ink-2);
}

/* FAQ */
.faq { display: grid; gap: .5rem; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.faq details[open] { border-color: var(--brand-200); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem; cursor: pointer;
  font-size: var(--fs-body); font-weight: 700; color: var(--ink);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto; color: var(--brand-600);
  font-size: 1.15rem; font-weight: 400; line-height: 1;
  transition: rotate .2s var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 1.25rem 1.25rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.85; }
.faq details > div > * + * { margin-top: .8rem; }

/* sources */
.sources { margin-top: var(--sp-block); }
.sources > b {
  display: block; font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding-bottom: .7rem; border-bottom: 1px solid var(--line); margin-bottom: .8rem;
}
.sources ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .55rem; }
.sources li { font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
.sources a { font-weight: 600; }

/* prev/next */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--sp-block); }
.pager a { background: var(--surface); padding: 1.25rem 1.4rem; color: var(--ink); }
.pager a:hover { background: var(--brand-50); text-decoration: none; }
.pager small { display: block; font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .45rem; }
.pager b { font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; }
.pager a:last-child { text-align: right; }

/* pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: var(--sp-block); }
.pagination a, .pagination span {
  min-width: 2.5rem; padding: .6rem .75rem; text-align: center;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--brand-600); color: var(--brand-600); background: var(--brand-50); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* -- CTA band ------------------------------------------------------------ */
.cta-band {
  background: var(--brand-600); color: #fff;
  padding-block: clamp(3rem, 2rem + 3.5vw, 4.75rem);
  text-align: center;
}
.cta-band h2 { color: #fff; max-width: 26ch; margin-inline: auto; }
.cta-band p { color: #d3e6f8; max-width: 56ch; margin: 1rem auto 0; }
.cta-band .btn-row { justify-content: center; margin-top: 2rem; }
.cta-band__tel { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: var(--fs-sm); padding: .95rem 0; }

/* -- pillars: the four headline propositions ----------------------------- */
.props { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.prop {
  position: relative; background: var(--surface);
  padding: clamp(1.5rem, 1rem + 1vw, 2.1rem);
  display: flex; flex-direction: column; gap: .6rem;
  color: var(--ink); overflow: hidden;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.prop::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--brand-600); scale: 0 1; transform-origin: left;
  transition: scale .28s var(--ease);
}
a.prop:hover { text-decoration: none; background: var(--brand-50); }
a.prop:hover::before { scale: 1 1; }
.prop__tag {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .16em;
  color: var(--brand-400);
}
.prop h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); }
.prop p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.prop__more {
  margin-top: auto; padding-top: .75rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand-600);
}

/* -- one-stop band ------------------------------------------------------- */
.onestop {
  background: linear-gradient(105deg, var(--navy-800), var(--navy-600) 70%, #12507f);
  color: #fff; position: relative; overflow: hidden;
}
.onestop__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem);
}
.onestop h2 { color: #fff; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.3rem); }
.onestop p { color: #bdd0e2; margin-top: 1rem; }
.onestop__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.onestop__chips span {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  border: 1px solid rgba(255, 255, 255, .28); color: #dcebf7;
  padding: .35rem .7rem; border-radius: 999px;
}
.onestop__cta { display: grid; gap: .75rem; justify-items: stretch; }

/* -- video ---------------------------------------------------------------- */
/* One feature player beside a routing panel, then the remaining players in a
   single row. A vertical playlist beside the feature would leave the left column
   two-thirds empty, which is what the first layout did. */
.video-lead {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start;
}
.video-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--navy-900); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { margin-top: .85rem; }
.video-caption h3 { font-size: var(--fs-h4); line-height: 1.5; }
.video-caption p { font-size: var(--fs-sm); color: var(--muted); margin: .4rem 0 0; }
.video-row .video-caption h3 { font-size: var(--fs-body); }

.video-aside {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
}
.video-aside h3 { font-size: var(--fs-h4); margin-bottom: .7rem; }
.video-aside__list { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .1rem; }
.video-aside__list li {
  font-size: var(--fs-sm); color: var(--muted);
  padding: .6rem 0; border-bottom: 1px solid var(--surface-3);
}
.video-aside__list a { font-weight: 700; }
.video-aside .btn { width: 100%; }

@media (max-width: 900px) { .video-row { grid-template-columns: minmax(0, 1fr); } }

/* -- inspection categories ---------------------------------------------- */
.insp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1vw, 1.5rem); }
.insp__item {
  display: flex; flex-direction: column; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.insp__item:hover { text-decoration: none; border-color: var(--brand-300); box-shadow: var(--shadow-1); }
a.insp__item:hover h3 { color: var(--brand-700); }
.insp__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-3); }
.insp__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s var(--ease); }
a.insp__item:hover .insp__media img { scale: 1.05; }
.insp__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.insp__body h3 { font-size: var(--fs-h4); transition: color .2s var(--ease); }
.insp__body p { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.7; }
.insp__body .insp__more { margin-top: auto; padding-top: .6rem; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-600); }

/* -- why-us + training gallery ------------------------------------------ */
.why-split {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start;
}
.training { margin: 0; }
.training__head { display: grid; gap: .4rem; margin-bottom: 1rem; }
.training__head b { font-size: var(--fs-h4); color: var(--ink); }
/* A masonry-ish mosaic: the first shot spans two columns so the block reads as a
   composed gallery rather than a uniform grid of thumbnails. */
.training__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.training__grid img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: scale .35s var(--ease);
}
.training__grid img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.training__grid img:hover { scale: 1.015; }
@media (max-width: 900px) {
  .why-split { grid-template-columns: minmax(0, 1fr); }
  .training__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .training__grid img:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .training__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- about / markets ----------------------------------------------------- */
.markets { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.markets > div {
  background: var(--surface); padding: 1rem 1.15rem;
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem;
  align-items: baseline;
}
.markets b {
  font-size: var(--fs-sm); font-weight: 800; color: var(--brand-700);
}
.markets span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.75; }

/* -- map ----------------------------------------------------------------- */
.map-frame {
  position: relative; aspect-ratio: 4 / 3; min-height: 22rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-3);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* -- floating quick actions --------------------------------------------- */
.fab {
  position: fixed; right: clamp(.75rem, .5rem + 1vw, 1.5rem);
  bottom: clamp(1rem, .5rem + 2vw, 2.5rem);
  z-index: 90; display: grid; gap: .6rem;
}
.fab__btn {
  display: flex; align-items: center; gap: 0;
  height: 3.25rem; padding: 0 .95rem;
  border-radius: 999px; color: #fff;
  box-shadow: 0 3px 10px rgba(9, 30, 54, .25), 0 10px 28px rgba(9, 30, 54, .18);
  transition: gap .22s var(--ease), padding .22s var(--ease), filter .18s var(--ease);
}
.fab__btn:hover { text-decoration: none; filter: brightness(1.08); gap: .55rem; padding-inline: 1.15rem; }
.fab__btn svg { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.fab__btn--line { background: #06c755; }
.fab__btn--tel { background: var(--brand-600); }
.fab__label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 700;
  transition: max-width .22s var(--ease);
}
.fab__btn:hover .fab__label, .fab__btn:focus-visible .fab__label { max-width: 9rem; }
/* Touch devices get no hover, so always show the labels there. */
@media (hover: none) {
  .fab__btn { gap: .5rem; padding-inline: 1.1rem; }
  .fab__label { max-width: 9rem; }
}
@media print { .fab { display: none; } }

/* -- 13 forms ------------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field > label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.field > label .req { color: var(--crit); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem;
  font: inherit; font-size: var(--fs-sm);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--brand-600); box-shadow: var(--ring);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.7; }
.field__hint { font-size: var(--fs-label); color: var(--muted-2); }
.form__panel {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.form__note { font-size: var(--fs-label); color: var(--muted-2); line-height: 1.7; }

.contact-list { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.contact-list > div { border-top: 1px solid var(--line); padding-top: .9rem; }
.contact-list small {
  display: block; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: .4rem;
}
.contact-list b, .contact-list a { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.contact-list a:hover { color: var(--brand-600); }
.contact-list p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* -- 14 footer ----------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #97abbf; padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); font-size: var(--fs-sm); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub { color: #7f95ab; }
.site-footer .brand__mark { border-color: var(--accent-text); color: var(--accent-text); }
.footer-grid > div > p { margin-top: 1.1rem; max-width: 32ch; font-size: var(--fs-xs); line-height: 1.85; }
.footer-grid h2 {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-grid a { color: #97abbf; font-size: var(--fs-xs); }
.footer-grid a:hover { color: #fff; }
.footer-meta {
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  justify-content: space-between; align-items: center;
  padding-block: 1.35rem; font-size: var(--fs-label); color: #6f8499;
}
.footer-meta ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }

/* -- 15 utilities / motion / print --------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* align-content: start keeps each row at its content height, so a stack of cards
   never distributes leftover space into the cards themselves. */
.stack { display: grid; gap: var(--sp-block); align-content: start; }
.stack--sm { display: grid; gap: 1rem; align-content: start; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Spacing / type utilities. These exist so page templates never need an inline
   style attribute, which keeps `style-src 'self'` viable in the CSP. */
.mt-block { margin-top: var(--sp-block); }
.mb-block { margin-bottom: var(--sp-block); }
.mt-half { margin-top: .5rem; }
.mt-3q { margin-top: .75rem; }
.mt-1 { margin-top: 1rem; }
.mt-125 { margin-top: 1.25rem; }
.mt-2 { margin-top: 2rem; }
.m-0 { margin: 0; }
.mb-2 { margin-bottom: 2rem; }
.fig-flush { margin: 0 0 2rem; }
.fig-top { margin: 2rem 0 0; }
.lead-center { margin: 1.25rem auto 2rem; }
.panel-intro { margin: .75rem 0 1.5rem; }
.h-sub { font-size: var(--fs-h3); }
.h-sub-spaced { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.fw-normal { font-weight: 400; }
.tiny { font-size: .7rem; }
.justify-center { justify-content: center; }
.w-narrow { max-width: 26rem; }
.on-navy { color: #cfdcea; }
.on-navy-muted { color: #8fa5b9; }
.plain-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.section--hero-pad { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }

/* Partner/standards logo wall. Explicit column counts rather than auto-fit so the
   item count always divides evenly and no orphan cell is left on the last row. */
.logos {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (max-width: 1080px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Logo tile: a mark centred in a fixed-height cell, never cropped or tinted. */
.logo-cell {
  display: grid; place-items: center; min-height: 6.5rem;
  background: var(--surface); padding: 1rem .75rem;
}
.logo-cell img {
  max-height: 3rem; width: auto; object-fit: contain; background: transparent;
}

/* A mega-menu panel reused as a static in-page grid (service cross-links). */
.mega--static {
  position: static; opacity: 1; visibility: visible; translate: none;
  width: auto; box-shadow: none;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.mega--static-spaced { margin-top: 1.5rem; }
.mega__link--tight { padding: .85rem .6rem; }

/* reveal-on-scroll, opt-in via JS adding .is-in */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; translate: 0 14px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
  .reveal.is-in { opacity: 1; translate: 0 0; }
}

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

/* forced-colors: keep structure legible when hues are overridden */
@media (forced-colors: active) {
  .card, .post-card, .kpi, .meter__track, .answer-box, .takeaways, .callout { border: 1px solid CanvasText; }
  .meter__fill { background: Highlight; }
}

/* -- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
  .site-header[data-menu="open"] .nav__links {
    display: grid; position: absolute; inset-inline: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2); padding: .75rem var(--gutter) 1.25rem;
    gap: 0; max-height: calc(100dvh - 8rem); overflow-y: auto;
  }
  .site-header[data-menu="open"] .nav__item { border-bottom: 1px solid var(--line); }
  .site-header[data-menu="open"] .nav__link { padding: 1rem .25rem; width: 100%; justify-content: space-between; }
  .site-header[data-menu="open"] .mega {
    position: static; width: auto; translate: 0; opacity: 1; visibility: visible;
    border: 0; box-shadow: none; padding: 0 0 .75rem; grid-template-columns: 1fr;
    display: none;
  }
  .site-header[data-menu="open"] .nav__item[data-open="true"] > .mega { display: grid; }
  .site-header[data-menu="open"] .mega__col-title { display: none; }
  .nav { position: relative; }

  .hero__inner, .feature, .grid--split, .grid--aside, .grid--2, .grid--3, .grid--4,
  .onestop__inner, .video-lead { grid-template-columns: minmax(0, 1fr); }
  .feature--flip > figure { order: 0; }
  .pillars, .cards--2, .cards--3, .props, .insp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory__row, .step { grid-template-columns: minmax(0, 1fr); }
  .step::before { display: none; }
  .step__note { grid-column: 1; }
  .stdboard { display: none; }
}

@media (max-width: 640px) {
  .topbar__inner { justify-content: center; }
  .topbar__inner > span { display: none; }        /* tagline */
  .topbar__contact { gap: 1rem; }
  .topbar__contact span { display: none; }        /* tax id */
  .pillars, .cards--2, .cards--3, .form__row, .directory__items,
  .contact-list, .pager, .toc ol, .props { grid-template-columns: minmax(0, 1fr); }
  .markets > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .pager a:last-child { text-align: left; }
  .hero__strip { gap: .5rem 1.25rem; font-size: 10px; }
  .btn { width: 100%; }
  /* The email is long enough to wrap the utility bar on a 375px screen; the
     footer and contact page both carry it, so drop it here. */
  .topbar__contact a[href^="mailto:"] { display: none; }
  .btn-row { flex-direction: column; }
  .cta-band .btn-row { flex-direction: column; align-items: stretch; }
  .authorbox { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: .98rem; }
}

@media print {
  .topbar, .site-header, .cta-band, .toc, .pager, .pagination, .site-footer,
  .nav__toggle, .aside-card--navy { display: none !important; }
  body { font-size: 10.5pt; line-height: 1.6; color: #000; }
  .prose { max-width: none; }
  .prose h2 { break-after: avoid; }
  .prose figure, .table-wrap, .faq details { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .subhero, .hero { background: none !important; color: #000 !important; }
  .subhero h1, .hero h1 { color: #000 !important; }
}