/* ============================================================
   Outlook UAS v3 — shared design system (v1.3 chrome + v2.x type/LDS)
   Extracted from the page chassis so new pages link one sheet
   instead of duplicating ~400 inline lines. Existing pages still
   inline their own copy (back-port later to consolidate).
   - --landing-bg points at the optimized external WebP (no base64)
   - cubic-bezier easings corrected to (.2,.8,.2,1)
   ============================================================ */
:root {
 --bg-0: #1a1310;
 --tan-light: #d6c2a3;
 --tan: #c4ad8e;
 --wine: #7a2a32;
 --wine-light: #d99a9f;
 --green: #74C365;
 --green-dark: #5BA850;
 --green-light: #8FD47D;
 --fg: #f5ece0;
 --fg-1: #e8ddcd;
 --fg-2: #d4c5b0;
 --fg-3: #9e8b75;
 --fg-mute: #6b594b;
 --line: rgba(196, 173, 142, 0.10);
 --line-2: rgba(196, 173, 142, 0.20);
 --f-display: 'Manrope', system-ui, sans-serif;
 --f-body: 'Manrope', system-ui, sans-serif;
 --f-mono: 'Manrope', system-ui, sans-serif;
 --landing-bg: url('Digital%20Assets/Backgrounds/landing-bg-desktop-1920x1080.webp');

 /* --- OU CONTROL SURFACE v1.4 tokens (2026-08-07) --- */
 --ctl-r: 2px;
 --ctl-bg: rgba(28, 21, 17, 0.55);
 --ctl-bg-hi: rgba(36, 27, 22, 0.74);
 --ctl-line: rgba(196, 173, 142, 0.14);
 --ctl-line-hi: rgba(196, 173, 142, 0.34);
 --ctl-line-on: rgba(143, 212, 125, 0.45);
 --ctl-tick: transparent;
 --ctl-sheen: rgba(245, 236, 224, 0.05);
 --ctl-panel-bg: rgba(16, 12, 10, 0.94);
 --ctl-panel-line: rgba(196, 173, 142, 0.16);
 --ctl-panel-sh: 0 26px 60px -18px rgba(0, 0, 0, 0.88);
 }
 * { box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 html, body { margin: 0; padding: 0; background: #0a0f0e; color: var(--fg); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
 h1, h2, h3, h4.display { font-family: var(--f-display); letter-spacing: -0.015em; }
 .micro { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; color: var(--fg-3); }
 .mono { font-family: var(--f-mono); }
 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; }

  body { position: relative; }
 .page-backdrop {
 position: absolute; inset: 0;
 z-index: 0; pointer-events: none; overflow: hidden;
 background: linear-gradient(180deg, #0d1413 0%, #0e1514 55%, #0b100f 100%);
 }
 .backdrop-top {
 position: absolute; top: 0; left: 0; right: 0; height: clamp(560px, 88vh, 960px);
 background-image: var(--page-bg, var(--landing-bg));
 background-size: cover; background-position: center top; background-repeat: no-repeat;
 filter: contrast(1.05) brightness(0.94) saturate(0.9);
 -webkit-mask-image: linear-gradient(180deg, black 0%, black 42%, rgba(0,0,0,0.55) 68%, transparent 98%);
 mask-image: linear-gradient(180deg, black 0%, black 42%, rgba(0,0,0,0.55) 68%, transparent 98%);
 }
 .backdrop-final {
 position: absolute; bottom: 0; left: 0; right: 0; height: 460px;
 background-image: var(--page-bg, var(--landing-bg));
 background-size: cover; background-position: center bottom; background-repeat: no-repeat;
 filter: contrast(1.05) brightness(0.82) saturate(0.85); opacity: 0.5;
 -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 55%, black 100%);
 mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 55%, black 100%);
 }
 .backdrop-top::after {
 content: ""; position: absolute; inset: 0;
 background: linear-gradient(180deg, rgba(10,15,14,0.42) 0%, rgba(10,15,14,0.24) 40%, rgba(13,20,19,0.5) 100%);
 }
 .backdrop-tint {
 position: absolute; inset: 0;
 background:
 radial-gradient(60% 40% at 30% 12%, rgba(116, 195, 101, 0.05), transparent 70%),
 radial-gradient(50% 35% at 80% 70%, rgba(143, 212, 125, 0.04), transparent 70%),
 radial-gradient(70% 50% at 50% 96%, rgba(122, 42, 50, 0.05), transparent 70%);
 mix-blend-mode: overlay;
 }
 .site-header, main, footer { position: relative; z-index: 2; }

 .scrim { position: relative; }
 .scrim::before {
 content: ""; position: absolute; left: 0; right: 0; top: 10%; bottom: 10%;
 background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(10, 15, 14, 0.70) 0%, rgba(10, 15, 14, 0.42) 70%, rgba(10, 15, 14, 0) 100%);
 z-index: -1; pointer-events: none;
 }

 .site-header {
 display: flex; align-items: center; justify-content: space-between;
 padding: 18px 40px; position: sticky; top: 0; z-index: 50;
 background: rgba(26, 19, 16, 0.65); backdrop-filter: blur(14px);
 border-bottom: 1px solid rgba(196, 173, 142, 0.10);
 }

/* ---------- CTA chassis (filled controls only) ---------- */
.btn,
.btn-glow,
.ou-mega-feat .ft-btn,
.ou-mcta-btn,
.ou-fab {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--ctl-r);
  border: 1px solid var(--ctl-line);
  box-shadow: none;
  transition:
    transform 0.15s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
  will-change: transform;
}

.btn::before,
.btn-glow::before,
.ou-mega-feat .ft-btn::before,
.ou-mcta-btn::before,
.ou-fab::before {
  content: "";
  position: absolute;
  inset: -70%;
  z-index: -1;
  pointer-events: none;
  filter: blur(16px);
  opacity: 0;
  transform: translateX(-70%) rotate(20deg);
}
.btn:hover::before,
.btn-glow:hover::before,
.ou-mega-feat .ft-btn:hover::before,
.ou-mcta-btn:hover::before,
.ou-fab:hover::before {
  opacity: 1;
  animation: ou-sweep 3.2s ease-in-out infinite;
}
@keyframes ou-sweep {
  0%   { transform: translateX(-70%) rotate(20deg); }
  50%  { transform: translateX(0%)   rotate(20deg); }
  100% { transform: translateX(70%)  rotate(20deg); }
}

.nav-drop-card a,
.ou-mega-link,
.ou-msec-btn,
.ou-mflat,
.ou-msub-in a {
  position: relative;
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: auto;
  overflow: visible;
  transition: transform 0.15s ease, color 0.25s ease, border-color 0.25s ease;
}
.nav-drop-card a::before, .nav-drop-card a::after,
.ou-mega-link::before, .ou-mega-link::after,
.ou-msec-btn::before, .ou-msec-btn::after,
.ou-mflat::before, .ou-mflat::after,
.ou-msub-in a::before, .ou-msub-in a::after { content: none; display: none; }

.nav-drop-card a:hover,
.ou-mega-link:hover,
.ou-msec-btn:hover,
.ou-mflat:hover,
.ou-msub-in a:hover {
  transform: translateX(2px);
  color: var(--fg);
}
.nav-drop-card a:active,
.ou-mega-link:active,
.ou-msec-btn:active,
.ou-mflat:active,
.ou-msub-in a:active {
  transform: translateX(1px);
}

.site-header .nav-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer; text-decoration: none;
  padding: 0; border: 0; border-radius: 0;
  background: none;
  isolation: auto; overflow: visible;
  transition: color 200ms ease;
}
.site-header .nav-link::before, .site-header .nav-link::after { content: none; display: none; }
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--fg); }
.site-header .nav-link:focus-visible { outline: 2px solid var(--green-light); outline-offset: 3px; }
.nav-drop-wrap { position: relative; display: inline-flex; }

/* ---------- LEGACY (no-JS) DROPDOWN PANEL ---------- */
.nav-drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 12px; opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s; z-index: 60;
}
.nav-drop-wrap:hover .nav-drop, .nav-drop-wrap:focus-within .nav-drop { opacity: 1; visibility: visible; }
.nav-drop-card {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 246px; padding: 6px;
  background: var(--ctl-panel-bg);
  border: 1px solid var(--ctl-panel-line);
  border-radius: var(--ctl-r);
  box-shadow: var(--ctl-panel-sh);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(6px); transition: transform 0.18s ease;
}
.nav-drop-wrap:hover .nav-drop-card { transform: translateY(0); }
.nav-drop-head {
  display: block; padding: 8px 11px 9px; margin-bottom: 1px;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tan);
  border-bottom: 1px solid var(--ctl-panel-line);
}
.nav-drop-card a {
  display: block; padding: 10px 12px;
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  color: var(--fg-2); text-decoration: none; white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer; user-select: none; text-decoration: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background-image: linear-gradient(180deg, rgba(245, 236, 224, 0.13), rgba(245, 236, 224, 0) 62%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* every filled CTA sweeps cream, not colour */
.btn::before, .btn-glow::before, .ou-mcta-btn.primary::before,
.ou-mega-feat .ft-btn::before, .ou-fab::before {
  background: conic-gradient(
    from 180deg,
    rgba(245, 236, 224, 0),
    rgba(245, 236, 224, 0.42),
    rgba(245, 236, 224, 0.22),
    rgba(245, 236, 224, 0.10),
    rgba(245, 236, 224, 0)
  );
}

/* primary = green */
.btn-primary {
  background-color: var(--green);
  color: #0a1f10;
  border-color: var(--green-light);
}
.btn-primary:hover { background-color: var(--green-light); border-color: #b6ebA6; color: #08210f; }

/* secondary = tan, filled but quieter than green */
.btn-ghost {
  background-color: var(--tan);
  color: #241b16;
  border-color: var(--tan-light);
}
.btn-ghost:hover { background-color: var(--tan-light); border-color: #e9dcc4; color: #1f1712; }

/* tertiary = steel neutral */
.btn-steel, .btn-gray {
  background-color: #5f6a78;
  color: var(--fg);
  border-color: #9eaaba;
}
.btn-steel:hover, .btn-gray:hover { background-color: #74808f; border-color: #b9c3cf; }

  .hero-link {
 font-family: var(--f-display); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
 color: var(--fg-2); text-decoration: none; display: inline-flex; align-items: baseline;
 border-bottom: 1px solid transparent; padding-bottom: 1px;
 /* WCAG 2.5.8 target size. Height came from line-height alone, giving 22px --
    2px under the 24px minimum. Found on the 44-page sweep 2026-08-25 on
    /quote-received ("Open client workspace", 185x22) and /programs ("Review
    the training"), both of which also failed the SPACING exception, so
    neither was let off. Same shared class on 36 pages, so this is one fix
    rather than two page patches.
    min-height, not padding: it is measurable by a checker reading
    getBoundingClientRect, where an expanded ::after hit area would look
    unchanged and quietly keep failing every audit. The only visible effect is
    the hover underline sitting ~2px lower. */
 min-height: 24px;
 }
 .hero-link .hero-link-arrow { display: inline-block; margin-left: 8px; color: var(--green-light); opacity: 0; transform: translateX(-6px); transition: opacity 220ms, transform 300ms cubic-bezier(.2,.8,.2,1); font-size: 0.85em; }
 .hero-link:hover { color: var(--green-light); border-bottom-color: rgba(143, 212, 125, 0.45); }
 .hero-link:hover .hero-link-arrow { opacity: 1; transform: translateX(0); }

 .subhead { font-family: var(--f-display); font-size: 20px; font-weight: 500; color: var(--fg-2); line-height: 1.45; letter-spacing: 0.01em; }

 /* ========== INDEX ROWS ========== */
 .ind-index { max-width: 1180px; margin: 0 auto; }
 .ind-row {
 display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px;
 padding: 20px 6px; width: 100%;
 border-top: 1px solid var(--line);
 text-decoration: none; color: inherit; position: relative; cursor: pointer;
 }
 .ind-index > .ind-row:last-child { border-bottom: 1px solid var(--line); }
 .ind-name {
 font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600;
 letter-spacing: -0.01em; line-height: 1.15; color: var(--fg-1);
 transition: color 220ms, transform 320ms cubic-bezier(.2,.8,.2,1); display: inline-block;
 }
 .ind-val { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--fg-3); text-align: right; transition: color 220ms; }
 .ind-row:hover .ind-val { color: var(--fg-1); }
 .ind-arrow {
 display: inline-block; margin-left: 12px; color: var(--green-light); font-size: 0.8em;
 opacity: 0; transform: translateY(-6px);
 transition: opacity 240ms, transform 320ms cubic-bezier(.2,.8,.2,1);
 }
 .ind-row:hover .ind-name { color: var(--green-light); }
 .ind-row:hover .ind-arrow { opacity: 1; transform: translateY(0); }
 .ind-row:focus-visible { outline: 1px solid var(--green-light); outline-offset: 4px; border-radius: 4px; }

 .svc-row { scroll-margin-top: 84px; }
 .svc-row[aria-expanded="true"] .ind-name { color: var(--green-light); }
 .svc-row[aria-expanded="true"] .ind-val { color: var(--fg-1); }
 .svc-row[aria-expanded="true"] .ind-arrow { opacity: 1; transform: translateY(0) rotate(180deg); }
 .svc-row[aria-expanded="true"]::before {
 content: ""; position: absolute; left: -22px; top: 24px; bottom: 24px;
 width: 2px; background: var(--green-light); border-radius: 2px;
 }

 /* ========== ACCORDION MECHANICS (height-auto via grid rows) ========== */
 .acc-body {
 display: grid; grid-template-rows: 0fr;
 transition: grid-template-rows 460ms cubic-bezier(.2,.8,.2,1);
 }
 .acc-body.open { grid-template-rows: 1fr; }
 .acc-inner { overflow: hidden; min-height: 0; }
 html:not(.js) .acc-body { grid-template-rows: 1fr; }
 .svc-pad { padding: 18px 6px 56px; }
 .ins-pad { padding: 4px 2px 28px; }
 .lds-pad { padding: 18px 6px 48px; }

 /* ========== PIPELINE LEDGER ========== */
 .pipe-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
 .pipe-head { font-size: clamp(23px, 2.5vw, 30px); font-weight: 700; margin: 0 0 16px; line-height: 1.18; color: var(--fg); }
 .pipe-lede { font-family: var(--f-display); font-size: clamp(17px, 1.9vw, 21px); font-weight: 500; color: var(--fg-1); line-height: 1.34; margin: -2px 0 18px; max-width: 46ch; }
 .pipe-subhead { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: 0.005em; color: var(--fg-3); text-transform: none; }
 .pipe-intro { font-size: 15px; color: var(--fg-2); line-height: 1.7; margin: 0; max-width: 58ch; }
 .prob-row {
 display: block; padding: 14px 2px; border-top: 1px solid var(--line);
 }
 .prob-row:last-child { border-bottom: 1px solid var(--line); }
 .prob-text { display: block; font-size: 14px; color: var(--fg-2); line-height: 1.6; }
 .prob-text strong { color: var(--fg-1); font-weight: 600; }

 .form-row { padding: 14px 2px; border-top: 1px solid var(--line); }
 .form-row:last-child { border-bottom: 1px solid var(--line); }
 .form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
 .form-name { font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--fg-1); }
 .form-acro { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--green-light); text-align: right; white-space: nowrap; }
 .form-use { font-size: 13px; color: var(--fg-3); line-height: 1.55; margin-top: 5px; }

 .vp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 28px; }
 .vp-item { border-left: 1px solid var(--line-2); padding-left: 16px; }
 .vp-head { font-size: 22px; font-weight: 600; color: var(--fg); line-height: 1.05; letter-spacing: -0.015em; }
 .vp-sub { font-size: 14px; font-weight: 600; color: var(--green-light); margin-top: 5px; letter-spacing: -0.01em; }
 .pipe-vp { margin-bottom: 30px; }
 .pipe-cta { width: 100%; height: 52px; font-size: 15px; }

 /* ========== INSIGHT SUB-DROPDOWNS ========== */
 .ins-block { margin-top: 44px; }
 .ins-item { border-top: 1px solid var(--line); }
 .ins-item:last-child { border-bottom: 1px solid var(--line); }
 .ins-row {
 display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px;
 width: 100%; padding: 16px 2px; cursor: pointer;
 }
 .ins-row:focus-visible { outline: 1px solid var(--green-light); outline-offset: 3px; border-radius: 4px; }
 .ins-name {
 font-family: var(--f-display); font-size: clamp(17px, 1.8vw, 21px); font-weight: 600;
 color: var(--fg-1); transition: color 220ms;
 }
 .ins-arrow {
 display: inline-block; margin-left: 10px; color: var(--green-light); font-size: 0.75em;
 transform: rotate(90deg); opacity: 0; transition: opacity 240ms, transform 320ms cubic-bezier(.2,.8,.2,1);
 }
 .ins-val { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fg-3); text-align: right; transition: color 220ms; }
 .ins-row:hover .ins-name { color: var(--green-light); }
 .ins-row:hover .ins-arrow { opacity: 1; }
 .ins-row[aria-expanded="true"] .ins-name { color: var(--green-light); }
 .ins-row[aria-expanded="true"] .ins-arrow { opacity: 1; transform: rotate(270deg); }
 .ins-row[aria-expanded="true"] .ins-val { color: var(--fg-1); }
 .ins-title { font-size: 18px; font-weight: 600; color: var(--fg); margin: 4px 0 10px; }
 .ins-blurb { font-size: 14px; color: var(--fg-2); line-height: 1.7; margin: 0 0 18px; max-width: 78ch; }
 .mini-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 28px; }
 .mini-row { border-left: 1px solid var(--line-2); padding-left: 14px; }
 .mini-name { display: block; font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.3; }
 .mini-acro { display: block; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--green-light); margin-top: 5px; }

 /* ========== REFERENCE + TIER ROWS (static, on-page) ========== */
 .ref-row.tier-row { cursor: default; }
 .ref-row:hover .ind-name { color: var(--fg-1); transform: none; }
 .ref-row:hover .ind-val { color: var(--green-light); }
 .ref-name-sz { font-size: clamp(19px, 2vw, 24px); }
 .ref-desc { display: block; font-family: var(--f-body); font-size: 15px; font-weight: 400; color: var(--fg-2); line-height: 1.55; margin-top: 6px; max-width: 52ch; }
 .ref-ex { display: block; font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--tan); font-variant-numeric: tabular-nums; margin-top: 10px; }
 .tier-name { font-size: clamp(20px, 2.2vw, 26px); }

 /* ========== LDS · the one wine moment ========== */
 .lds-row { max-width: 1180px; margin: 0 auto; }
 .lds-vp { border-left: 2px solid rgba(122, 42, 50, 0.75); padding-left: 20px; }
 .lds-vp .vp-head { font-size: clamp(30px, 3.4vw, 40px); }
 .lds-vp .vp-sub { color: var(--wine-light); font-size: 16px; }
 .lds-line { font-family: var(--f-display); font-size: clamp(16px, 1.9vw, 21px); font-weight: 600; color: var(--fg-1); line-height: 1.4; }
 .lds-ex { border-left: 2px solid rgba(122, 42, 50, 0.6); padding-left: 18px; font-size: 14px; color: var(--fg-2); line-height: 1.7; }
 .lds-ex-name { font-weight: 600; color: var(--wine-light); }

 /* ========== SECTION + LAYOUT HELPERS ========== */
 .pad-section { padding-left: 64px; padding-right: 64px; }
 .wrap { max-width: 1280px; margin: 0 auto; }
 .wrap-narrow { max-width: 920px; margin: 0 auto; }
 .eyebrow-meta { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; color: var(--fg-3); }
 .hero-h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.022em; margin: 0; color: var(--fg); }
 .hero-grad { background: linear-gradient(90deg, #8FD47D 0%, #d6c2a3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
 .lede { font-size: clamp(16px, 1.9vw, 20px); color: var(--fg-2); line-height: 1.55; max-width: 60ch; }
 .body-copy { font-size: 15px; color: var(--fg-2); line-height: 1.75; max-width: 64ch; }
 .body-copy p { margin: 0 0 16px; }
 .section-head { font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.12; margin: 0 0 14px; color: var(--fg); letter-spacing: -0.02em; }

 .site-footer { background: rgba(20, 14, 11, 0.92); border-top: 1px solid var(--line); padding: 64px 40px 32px; backdrop-filter: blur(20px); }
 .site-footer a { color: var(--fg-2); text-decoration: none; }
 .site-footer a:hover { color: var(--fg); }

 @media (min-width: 1800px) {
 :root { --landing-bg: url('Digital%20Assets/Backgrounds/landing-bg-desktop-2560x1440.webp'); }
 }
 @media (max-width: 1000px) {
 .pipe-grid { grid-template-columns: 1fr; gap: 40px; }
 .mini-list { grid-template-columns: 1fr 1fr; }
 }
 @media (max-width: 768px) {
 :root { --landing-bg: url('Digital%20Assets/Backgrounds/landing-bg-mobile-1080x1920.webp'); }
 .site-header { padding: 14px 20px; }
 .nav-list { display: none !important; }
 .header-lockup { font-size: 11px !important; max-width: 170px; }
 .pad-section { padding-left: 24px !important; padding-right: 24px !important; }
 .ind-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 2px; }
 .ind-val { text-align: left; }
 .svc-row[aria-expanded="true"]::before { left: -12px; }
 .ins-row { grid-template-columns: 1fr; gap: 6px; }
 .ins-val { text-align: left; }
 .mini-list { grid-template-columns: 1fr; }
 .footer-grid { grid-template-columns: 1fr 1fr !important; }
 }
 @media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .acc-body { transition: none; }
 .btn::after { display: none; }
 }

/* ========== SECTION BAND · sticky lead + hairline rows ========== */
.sb-section { scroll-margin-top: 90px; }
.sb-wrap {
 display: grid; grid-template-columns: minmax(290px, 0.85fr) 1.15fr;
 gap: 56px; max-width: 1180px; margin: 0 auto; align-items: start;
}
.sb-lead { position: sticky; top: 104px; }
.sb-lead > :last-child { margin-bottom: 0; }
.sb-h2 { font-size: clamp(26px, 3.1vw, 38px); font-weight: 700; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--fg); }
.sb-lede { margin: 0 0 24px; color: var(--fg-2); }
.sb-cta {
 display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
 font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
 color: var(--green-light); text-decoration: none;
 border-bottom: 1px solid rgba(143, 212, 125, 0.35); padding-bottom: 3px;
}
.sb-cta:hover, .sb-cta:focus-visible { border-bottom-color: var(--green-light); }
.sb-body { min-width: 0; }
.sb-rows { margin: 0; padding: 0; }
.sb-row { padding: 22px 0; border-top: 1px solid var(--line); }
.sb-row:first-child { padding-top: 0; border-top: 0; }
.sb-row h3 { font-family: var(--f-display); font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 9px; color: var(--fg); }
.sb-row p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--fg-2); }
.sb-row p:last-child { margin-bottom: 0; }
.sb-link { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg-3); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.sb-link:hover, .sb-link:focus-visible { color: var(--green-light); border-bottom-color: var(--green-light); }
@media (max-width: 960px) {
 .sb-wrap { grid-template-columns: 1fr; gap: 32px; }
 .sb-lead { position: static; }
}
@media (max-width: 720px) {
 .sb-row { padding: 18px 0; }
}

/* form + hero scale */
.btn-glow {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 30px;
  font-family: var(--f-display, 'Manrope', system-ui, sans-serif);
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background-color: var(--green);
  background-image: linear-gradient(180deg, rgba(245, 236, 224, 0.13), rgba(245, 236, 224, 0) 62%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  color: #0a1f10;
  border-color: var(--green-light);
}
.btn-glow:hover { background-color: var(--green-light); border-color: #b6ebA6; color: #08210f; transform: translateY(-1px); }
.btn-glow:active { transform: translateY(0) scale(0.99); }
.btn-glow:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.btn-glow:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn-glow:disabled::before { display: none; }
.btn-glow-display { font-size: 16px; height: auto; padding: 18px 40px; }
.btn-glow-tan {
  background-color: var(--tan);
  color: #241b16;
  border-color: var(--tan-light);
}
.btn-glow-tan:hover { background-color: var(--tan-light); border-color: #e9dcc4; color: #1f1712; }
@media (max-width: 480px) {
  .btn-glow-display { font-size: 15px; padding: 15px 26px; }
}


/* ---------- DESKTOP MEGA PANEL ---------- */
.ou-mega-card {
  display: grid; gap: 5px; padding: 6px;
  background: var(--ctl-panel-bg);
  border: 1px solid var(--ctl-panel-line);
  border-radius: var(--ctl-r);
  box-shadow: var(--ctl-panel-sh);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ou-mega-card.has-feat { grid-template-columns: 1fr 1fr 0.92fr; }
.ou-mega-col { display: flex; flex-direction: column; gap: 5px; padding: 4px; }
.ou-mega-h {
  font-family: var(--f-mono, Manrope, system-ui, sans-serif);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tan, #c4ad8e); font-weight: 700;
  padding: 7px 10px 8px; margin-bottom: 1px;
  border-bottom: 1px solid var(--ctl-panel-line);
}
.ou-mega-link { display: block; padding: 8px 10px; text-decoration: none; }
.ou-mega-link .t {
  display: block; font-family: var(--f-display, Manrope, system-ui, sans-serif);
  font-size: 13.5px; font-weight: 600; color: var(--fg-1, #e8ddcd);
  transition: color 0.25s ease;
}
.ou-mega-link .d {
  display: block; font-size: 11.5px; color: var(--fg-3, #9e8b75);
  margin-top: 3px; line-height: 1.4;
}
.ou-mega-link:hover .t { color: var(--fg, #f5ece0); }
.ou-mega-feat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding: 6px 4px 4px 20px;
  background: none;
  border: 0;
  border-left: 1px solid var(--ctl-panel-line);
}
.ou-mega-feat .ft-k {
  font-family: var(--f-mono, Manrope, system-ui, sans-serif); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tan, #c4ad8e); font-weight: 700;
}
.ou-mega-feat .ft-h {
  font-family: var(--f-display, Manrope, system-ui, sans-serif);
  font-size: 17px; font-weight: 800; line-height: 1.15; margin: 6px 0 5px; color: var(--fg, #f5ece0);
}
.ou-mega-feat .ft-p { font-size: 12px; color: var(--fg-2, #d4c5b0); line-height: 1.5; }
.ou-mega-feat .ft-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px;
  font-family: var(--f-display, Manrope, system-ui, sans-serif);
  font-weight: 700; font-size: 12.5px; text-decoration: none;
  background-color: var(--green, #74C365);
  background-image: linear-gradient(180deg, rgba(245, 236, 224, 0.13), rgba(245, 236, 224, 0) 62%);
  color: #0a1f10;
  border-color: var(--green-light, #8FD47D);
}
.ou-mega-feat .ft-btn:hover {
  transform: translateX(2px);
  background-color: var(--green-light, #8FD47D);
  border-color: #b6eba6;
  color: #08210f;
}

/* ---------- MOBILE MENU ---------- */
.vnav-burger {
  display: none; background: none;
  border: 1px solid rgba(196, 173, 142, 0.25);
  border-radius: var(--ctl-r);
  width: 42px; height: 38px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.ou-mob-search {
  border-radius: var(--ctl-r);
  border: 1px solid var(--ctl-line);
  background: none;
}
.ou-msec { border-bottom: 1px solid var(--ctl-line); margin-bottom: 0; }
.ou-msec-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px;
  font-family: var(--f-display, Manrope, system-ui, sans-serif);
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  color: var(--fg-1, #e8ddcd); cursor: pointer;
}
.ou-msec.open > .ou-msec-btn { color: var(--fg, #f5ece0); }
/* VERTICAL padding here would survive `grid-template-rows: 0fr`, because that
   zeroes the content box only. A 5px/5px pad therefore left a 10px sliver of
   lit surface under every collapsed section. Indent horizontally, breathe with
   first/last-child margins instead. */
.ou-msub-in {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 0 0 6px;
  overflow: hidden; min-height: 0;
}
.ou-msub-in a:first-child { margin-top: 2px; }
.ou-msub-in a:last-child { margin-bottom: 8px; }
.ou-msub-in a {
  display: block; padding: 10px 4px 10px 14px;
  font-family: var(--f-body, Manrope, system-ui, sans-serif);
  font-size: 14px; font-weight: 500;
  color: var(--fg-2, #d4c5b0); text-decoration: none;
  border-left: 1px solid var(--ctl-line); margin: 0;
}
.ou-mflat {
  display: block; padding: 16px 4px; margin-bottom: 0;
  font-family: var(--f-display, Manrope, system-ui, sans-serif);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg-1, #e8ddcd); text-decoration: none;
  border-bottom: 1px solid var(--ctl-line);
}
.ou-mflat.portal { color: var(--green-light, #8FD47D); }
.ou-mcta-btn {
  display: flex; align-items: center; justify-content: center;
  height: 52px;
  font-family: var(--f-display, Manrope, system-ui, sans-serif);
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.ou-mcta-btn.primary {
  background-color: var(--green, #74C365);
  background-image: linear-gradient(180deg, rgba(245, 236, 224, 0.13), rgba(245, 236, 224, 0) 62%);
  color: #0a1f10;
  border-color: var(--green-light, #8FD47D);
}
.ou-mcta-btn.primary:hover { background-color: var(--green-light, #8FD47D); border-color: #b6eba6; color: #08210f; }
.ou-mcta-btn.ghost {
  background-color: var(--tan, #c4ad8e);
  background-image: linear-gradient(180deg, rgba(245, 236, 224, 0.13), rgba(245, 236, 224, 0) 62%);
  color: #241b16;
  border-color: var(--tan-light, #d6c2a3);
}
.ou-mcta-btn.ghost:hover { background-color: var(--tan-light, #d6c2a3); border-color: #e9dcc4; color: #1f1712; }

/* ---------- FLOATING QUOTE CONTROL ---------- */
.ou-fab {
  display: none; position: fixed; right: 16px; bottom: 16px;
  width: 64px; height: 64px; z-index: 2100;
  align-items: center; justify-content: center;
  background-color: var(--green, #74C365);
  background-image: linear-gradient(180deg, rgba(245, 236, 224, 0.13), rgba(245, 236, 224, 0) 62%);
  border-color: var(--green-light, #8FD47D);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8);
  text-decoration: none; text-align: center;
  font-family: var(--f-display, Manrope, system-ui, sans-serif);
  font-weight: 700; font-size: 14px; color: #0a1f10;
}
.ou-fab:hover { background-color: var(--green-light, #8FD47D); border-color: #b6eba6; }
.ou-fab:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.ou-fab:active { transform: scale(0.96); }

.nav-drop-wrap.ou-open > .nav-link { color: var(--green-light); }
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-glow, .nav-drop-card a, .ou-mega-link,
  .ou-mega-feat .ft-btn, .ou-msec-btn, .ou-mflat, .ou-msub-in a,
  .ou-mcta-btn, .ou-fab { transition: none; }
  .btn::before, .btn-glow::before,
  .nav-drop-card a::before, .ou-mega-link::before, .ou-mega-feat .ft-btn::before,
  .ou-msec-btn::before, .ou-mflat::before, .ou-msub-in a::before,
  .ou-mcta-btn::before, .ou-fab::before { display: none; }
  .btn:hover, .btn-glow:hover,
  .nav-drop-card a:hover, .ou-mega-link:hover, .ou-msec-btn:hover,
  .ou-mflat:hover, .ou-msub-in a:hover, .ou-mcta-btn:hover { transform: none; }
}


/* This block is emitted AFTER v3-nav.js's own responsive rules, so the two
   controls that are display:none at rest have to re-assert their mobile
   display here or the burger and the quote fab never appear. */
@media (max-width: 768px) {
  .vnav-burger { display: flex; position: relative; z-index: 2001; }
  .ou-fab { display: flex; }
}
/* The fab is z-index 2100 and the mobile overlay is 2000, so at rest it
   floated ON TOP of the open menu and sat over the last CTA. */
body.ou-mob-open .ou-fab { display: none !important; }

/* PRE-EXISTING BUG, found while testing this pass: .site-header is
   position:sticky with z-index 50, which makes it a stacking context. The
   burger's z-index 2001 is therefore scoped INSIDE that 50, so once the
   overlay (z-index 2000) is up the close button is painted underneath it
   and .ou-mob-brand swallows the tap. On a phone that left Escape or
   following a link as the only ways out of the menu. Lifting the whole
   header above the overlay while it is open fixes both; everything in the
   header except the burger is hidden so the overlay's own brand row reads
   through, and the X lands exactly where the burger was tapped. */
body.ou-mob-open .site-header {
  z-index: 2002;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
body.ou-mob-open .site-header > *:not(.vnav-burger) { opacity: 0; pointer-events: none; }
body.ou-mob-open .ou-mob-brand { pointer-events: none; }


:root {
  /* Chrome colours, 4th pass 2026-08-07: "blend seamlessly with the
     background images, but still enough contrast for green footer links
     and the nav headers as-is."

     Measured, not guessed. With the chrome removed, the terrain actually
     sitting behind these two bands is nearly black -- header median
     #0a0905 (ridge-green) to #181f25 (contours-slate), footer median
     #0a0805 to #0c1111. That is why #2f4865 and #6d7888 read as pasted-on
     stripes: they sit 0.06 and 0.18 above the terrain in luminance. These
     sit within 0.005, so the seam disappears.

     TRANSLUCENT on purpose. Seamless means the terrain has to continue
     THROUGH the band, not stop at a hard horizontal edge -- especially on
     ridge-green, where bright ridges (#738648) run right under the header.
     Alpha is tuned so the worst case still clears WCAG AA comfortably. */
  --chrome-head: rgba(20, 27, 34, 0.80);   /* #141b22 @ .80 */
  --chrome-foot: rgba(18, 24, 26, 0.85);   /* #12181a @ .85 */
  --chrome-line: rgba(196, 173, 142, 0.10);
}

/* ---------- 1. the page itself: no canvas paint ---------- */
.page-backdrop { background: none !important; }
.landing-backdrop { background-color: transparent !important; }

/* the green + wine radial glow, on every page */
.backdrop-tint { display: none !important; }
/* the dark veil laid over the terrain image */
.backdrop-top::after { display: none !important; content: none !important; }
/* the dark ellipse behind hero copy */
.scrim::before { display: none !important; content: none !important; }
.landing-backdrop::after { display: none !important; content: none !important; }

/* KEPT, untouched: .backdrop-top, .backdrop-final, .backdrop-hero,
   .topo-layer-a, .topo-layer-b -- the image and its mask fades.
   KEPT: .section-breathe / .section-breathe.fade-up -- the transition. */

/* aerial-data's warm tint + glow stack over the terrain */
.topo-layer-c, .topo-layer-d { display: none !important; }

/* ---------- 2. decorative glows ---------- */
.md-glow,
.cpo-head::before,
.cpo-shot::before,
.dx-block#discovery::before,
.card-glow::after,
.card::before,
.feat-scan::before { display: none !important; content: none !important; }

/* ---------- 3. header + footer chrome ---------- */
.site-header {
  background: var(--chrome-head) !important;
  border-bottom: 1px solid var(--chrome-line) !important;
  /* declared here too: the blur is load-bearing for the blend, and not
     every page's own chassis sets it */
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}
.site-footer {
  background: var(--chrome-foot) !important;
  border-top: 1px solid var(--chrome-line) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.site-footer a {
  color: var(--green-light, #8FD47D) !important;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #b6e4a7 !important;
}
.site-footer .micro a,
.site-footer .footer-legal a {
  color: var(--fg-3, #9e8b75) !important;
}
/* Inline .75 opacity on the footer privacy note drops this 9px text below
   AA after compositing. Keep every footer micro row fully opaque. */
.site-footer .micro { opacity: 1 !important; }
.site-footer .micro a:hover,
.site-footer .footer-legal a:hover {
  color: var(--green-light, #8FD47D) !important;
}

/* ---------- 4. cards and section containers: flat ---------- */
/* Paint only. Padding, gap and layout are deliberately left alone so
   nothing collapses -- the spacing that read as a card stays as
   whitespace. */
.card,
.feat,
.article-cta,
.auth-card,
.case-thumb,
.feat-post,
.feat-scan,
.finding,
.flow-step,
.founder-fig,
.fp-hero-fig,
.hero-shot,
.isl-img,
.legal .toc,
.legal .cat,
.mode-half,
.mv3d-chip,
.note-box,
.note-cta,
.os-rg,
.port-note,
.post-thumb,
.pr-fig,
.pr-shot,
.qt-chip,
.recap,
.rel-card,
.step,
.svc-col,
.svc-col.b108,
.svc-hero-fig,
.vis-card,
.choice .c-thumb,
.service-tile-icon,
.svc-index-bar,
.cpo-shot img,
.dq-art img,
.portal-hero-grid img {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* hover affordance on cards went with the card */
.card:hover, .card:hover:not(.card-static) {
  box-shadow: none !important;
  border-color: transparent !important;
  transform: none !important;
}

/* the map canvas keeps its dark plate (a render surface, not shading)
   but loses the box */
.map-vis {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* media frames: the picture stays, the frame around it goes */
.zoomable, .hero-media, .feat-scan {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.zoomable:hover { box-shadow: none !important; }

/* The portfolio filter bar is sticky chrome, not a section: it scrolls
   over live content and needs a backing, so it follows the header token. */
.filter-bar {
  background: var(--chrome-head) !important;
  border-radius: 0 !important;
}

/* ---------- 5. edge-accent notes: keep the rule, drop the fill ---------- */
/* These read as a coloured left rule against nothing, which is the
   "horizontal rules and whitespace" shape, not a card. */
.acc-note {
  background: none !important;
  border: 0 !important; border-left: 2px solid var(--green, #74C365) !important;
  border-radius: 0 !important;
}
.reg-note, .portal-qualifier {
  background: none !important;
  border: 0 !important; border-left: 2px solid var(--green-light, #8FD47D) !important;
  border-radius: 0 !important;
}
.legal .callout {
  background: none !important;
  border: 0 !important; border-left: 3px solid var(--green-light, #8FD47D) !important;
  border-radius: 0 !important;
}
.tailor-note, .auth-note {
  background: none !important;
  border: 0 !important; border-left: 2px solid rgba(143, 212, 125, 0.4) !important;
  border-radius: 0 !important;
}

/* ---------- 6. inline-style leftovers ---------- */
/* Seven decorations and boxes live in style="" attributes rather than in a
   class. They are killed from here instead of by editing the markup: an
   !important author declaration outranks a plain inline style, so no page
   file has to change. Attribute selectors are matched on distinctive
   substrings; if that markup is ever reformatted these rules simply stop
   matching, which is a no-op, never a break. */

/* the green radial wash behind the services and quote-sent heroes, and the
   dark gradient over "what happens next" */
main div[style*="radial-gradient(40% 55%"],
main div[style*="radial-gradient(36% 50%"],
main div[style*="rgba(10, 15, 14, 0.35)"] { display: none !important; }

/* inline card boxes */
#ops-redirect,
main div[style*="background: rgba(10,15,14,.45)"] {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* inline media frames: the picture stays, the frame goes */
main div[style*="aspect-ratio: 3168 / 1344"],
main div[style*="aspect-ratio: 2528 / 1696"],
main div[style*="border-radius: 10px"][style*="aspect-ratio: 16 / 9"] {
  border: 0 !important;
  border-radius: 0 !important;
}

/* ---------- 7. tables: rules, not boxes ---------- */
.legal table.ck th, .legal table.ck td,
.legal table.priv th, .legal table.priv td {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line, rgba(196,173,142,0.10)) !important;
}
.legal table.ck th, .legal table.priv th {
  border-bottom-color: var(--line-2, rgba(196,173,142,0.20)) !important;
}

/* ---------- 8. nav link scale ---------- */
.site-header .nav-link,
.nav-link {
  font-size: 15px !important;
}
@media (max-width: 1200px) {
  /* the gap is an inline style on .nav-list, hence !important */
  .site-header .nav-list { gap: 16px !important; }
}
@media (max-width: 1160px) {
  .ou-lockup-hdr { display: none !important; }
  .ou-lockup-hdr-sm { display: block !important; }
}
/* 769-900px: the compact lockup plus seven links will not carry 15px on one
   line at any gap. Step down here.

   NOTE this band also FIXES A PRE-EXISTING BUG. The page-level 769-1080 /
   769-920 reformat documented in [[outlook-uas-brand-lockups]] never actually
   applied: it sets .site-header .nav-link{font-size:12px!important} inside a
   media query, but v3-nav.js re-injects .site-header .nav-link{font-size:13px}
   at RUNTIME, appended last in <head>. Equal specificity, both effectively
   final, later source order wins -- so the page rule lost and the nav shipped
   at 13px and WRAPPED TO TWO LINES from 769 to 880px. Measured on the
   unmodified build before this change, so it is not a regression from it.
   This block is emitted after the injection, so it is the one that sticks.
   Verified single-line at 900/880/860/840/800/769 with 30px clearance. */
@media (min-width: 769px) and (max-width: 900px) {
  .site-header .nav-link,
  .nav-link { font-size: 13.5px !important; }
  .site-header .nav-list { gap: 10px !important; }
  .site-header { padding-left: 20px !important; padding-right: 20px !important; }
}


/* ---------- 1. nav -> hero breathing room, one token sitewide ---------- */
/* !important because six pages set the hero padding-top in a style=""
   attribute rather than in a class. */
main > section.pad-section:first-of-type { padding-top: 112px !important; }
@media (max-width: 768px) {
  main > section.pad-section:first-of-type { padding-top: 72px !important; }
}

/* ---------- 2. the plate: hairline + micro-radius on every content image ---------- */
/* 3px, not the 10-14px the retired cards used: it sits with the 2px
   control-surface radius instead of reintroducing a rounded card. */
main img[src*='Digital%20Assets/']:not([src*='/Logos/']) {
  display: block;
  border: 1px solid rgba(196, 173, 142, 0.18) !important;
  border-radius: 3px !important;
}

/* ---------- 3. the feather ---------- */
/* 3a. <figure> frames -- pseudo pinned to the image's grid cell.
       :not([hidden]) is NOT decoration. `display: grid !important` beats a
       plain `[hidden] { display: none }` on important alone, whatever the
       specificity. aerial-data's #dq-art is exactly that shape: a hidden
       <figure> whose <img> src is empty until showArt() fills it, and which
       showArt() re-hides on the !OUTCOME_ART path with the src still set.
       Without this guard the figure paints while hidden. Caught by rendering
       the state, not by reading the CSS. */
main figure:has(> img[src*='Digital%20Assets/']):not([hidden]) {
  display: grid !important;
  grid-template-columns: 1fr;
  align-content: start;
}
main figure:has(> img[src*='Digital%20Assets/']):not([hidden])::after {
  content: "" !important;
  display: block !important;
  grid-area: 1 / 1;
  pointer-events: none;
  border-radius: 3px;
  background:
    linear-gradient(to right,  rgba(6,10,9,.40), transparent 7%, transparent 93%, rgba(6,10,9,.40)),
    linear-gradient(to bottom, rgba(6,10,9,.40), transparent 8%, transparent 92%, rgba(6,10,9,.40));
}

/* 3b. div / span / a frames holding nothing but the image.
       :not(:has(> :not(img))) is the guard -- a frame with any other
       element child is skipped, so an overlay never lands on text. Only
       `position` is set; `display` is left alone so .map-vis (flex),
       .isl-img (flex) and .ps-thumb (block) keep their own layout. */
main div:has(> img[src*='Digital%20Assets/']):not(:has(> :not(img))),
main span:has(> img[src*='Digital%20Assets/']):not(:has(> :not(img))),
main a:has(> img[src*='Digital%20Assets/']):not(:has(> :not(img))) {
  position: relative;
}
main div:has(> img[src*='Digital%20Assets/']):not(:has(> :not(img)))::after,
main span:has(> img[src*='Digital%20Assets/']):not(:has(> :not(img)))::after,
main a:has(> img[src*='Digital%20Assets/']):not(:has(> :not(img)))::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 3px;
  background:
    linear-gradient(to right,  rgba(6,10,9,.40), transparent 7%, transparent 93%, rgba(6,10,9,.40)),
    linear-gradient(to bottom, rgba(6,10,9,.40), transparent 8%, transparent 92%, rgba(6,10,9,.40));
}

/* ---------- 4. the caption ---------- */
/* Twelve figcaptions already existed across seven pages in three
   different sizes. Same mono micro-label as .eyebrow-meta, so a captioned
   image reads as evidence in the site's own voice. */
main figure > figcaption {
  padding: 12px 2px 0 !important;
  font-family: var(--f-mono, ui-monospace, SFMono-Regular, monospace) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  color: var(--fg-3, #9e8b75) !important;
  border-top: 0 !important;
}

/* ============================================================
   SKIP LINK (WCAG 2.4.1 Bypass Blocks). Added 2026-08-17.

   The rules existed ONLY inline in index.html (lines 841-842), so the four
   legal pages carried <main id="main-content"> with nothing linking to it,
   and adding a bare anchor to them would have rendered a visible link at
   the top of each page. Promoted to the shared sheet instead: all four
   link v3-system.css, so this is one edit rather than four.

   Off-screen until focused, not display:none. A display:none skip link is
   not reachable by keyboard, which defeats the point.

   index.html keeps its inline copy; the declarations are identical, so
   whichever wins produces the same result.
   ============================================================ */
.skip-link {
  position: fixed; left: -9999px; top: 0; z-index: 60;
  background: var(--bg-0); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 10px 16px; font-size: 13px; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }