/* =====================================================================
 * VDS 2026 SHELL — sitewide foundation
 * Loaded on EVERY page via wp_enqueue_style('vds26-shell'), with a
 * dependency on the child theme's style.css so it lands after it.
 *
 * Why this file exists (2026-09-10, Section 2):
 * The announcement bar and the header are theme markup in header.php and
 * render on every page, but their CSS was living in vds26-home.css, which
 * is homepage-only. The bar was therefore unstyled everywhere except the
 * front page. Anything sitewide belongs here; vds26-home.css is now only
 * the homepage's own section styles.
 *
 * The --black / --white bridge stays in vds26-home.css deliberately. It
 * re-points variables that color.css applies to every heading, p and li,
 * and widening that to the whole site is a change Section 2 has no mandate
 * to make.
 *
 * Tokens are lifted verbatim from GLP's styles.css :root block.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. WEBFONTS
 * Montserrat, self-hosted, subsetted to the Latin range this page uses
 * (238 glyphs incl. the arrows, middots and dashes the copy needs).
 * 12KB per face vs ~240KB for the .ttf the shell registered, and every
 * face carries font-display:swap, which none of the shell's did.
 * ------------------------------------------------------------------- */
@font-face{font-family:"Montserrat VDS";src:url("../fonts/woff2/montserrat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat VDS";src:url("../fonts/woff2/montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat VDS";src:url("../fonts/woff2/montserrat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat VDS";src:url("../fonts/woff2/montserrat-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------------
 * 2. DESIGN TOKENS — GLP verbatim
 * ------------------------------------------------------------------- */
:root{
  /* Brand accents, theme independent */
  --vds-red:#d92128;        /* GLP --indigo */
  --vds-red-deep:#b12025;   /* GLP --indigo-600 */
  --vds-red-mid:#ed3340;    /* GLP --crimson */
  --vds-red-light:#ed4753;  /* GLP --cyan */

  --vds-grad-brand:linear-gradient(120deg,#b12025 0%,#d92128 50%,#ed4753 100%);
  --vds-grad-brand-soft:linear-gradient(120deg,rgba(217,33,40,.12),rgba(237,71,83,.12));
  --vds-grad-warm:linear-gradient(120deg,#b12025 0%,#ed3340 100%);
  /* CONTRAST-SAFE BRAND RAMP. --vds-grad-brand ends on #ed4753, which caps
     white text at 3.73:1 — under AA for anything that is not large. Any
     brand-gradient surface CARRYING SMALL WHITE TEXT uses this instead: it
     runs #b12025 -> #d92128, whose worst point gives white 5.08:1. Keep
     --vds-grad-brand for rails, bars and other text-free decoration.
     Added §10-19 after audit.py was taught to resolve gradients. */
  --vds-grad-brand-deep:linear-gradient(120deg,#b12025 0%,#d92128 100%);

  --vds-r-sm:8px; --vds-r-md:14px; --vds-r-lg:22px; --vds-r-xl:32px; --vds-r-pill:999px;

  --vds-step--1:clamp(0.82rem,0.79rem + 0.15vw,0.9rem);
  --vds-step-0:clamp(1rem,0.96rem + 0.2vw,1.12rem);
  --vds-step-1:clamp(1.2rem,1.1rem + 0.5vw,1.5rem);
  --vds-step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --vds-step-3:clamp(2rem,1.6rem + 2vw,3rem);
  --vds-step-4:clamp(2.6rem,2rem + 3.2vw,4.6rem);

  --vds-font-display:"Montserrat VDS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --vds-font-body:"Montserrat VDS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --vds-section-y:clamp(3.5rem,2rem + 7vw,7rem);
  --vds-container:1200px;
  --vds-container-wide:1360px;
  --vds-gutter:clamp(1.1rem,0.6rem + 2vw,2.2rem);

  /* NOT from GLP: GLP has no duration tokens, these are the four values
     that account for ~90% of its transitions, promoted to tokens. */
  --vds-t-fast:.18s; --vds-t-base:.22s; --vds-t-slow:.4s;
}

/* Light — GLP verbatim */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --vds-bg:#ffffff; --vds-bg-alt:#F3F4F6;
  --vds-surface:#ffffff; --vds-surface-2:#F3F4F6; --vds-surface-3:#e5e7eb;
  --vds-ink:#111114; --vds-ink-2:#33383f; --vds-muted:#616a75;
  --vds-border:#e5e7eb; --vds-border-strong:#d1d5db;
  --vds-hero-ink:#111114; --vds-hero-ink-2:#33383f;
  --vds-hero-bg:
    radial-gradient(1200px 600px at 80% -10%,rgba(237,71,83,.10),transparent 60%),
    radial-gradient(900px 500px at 10% 10%,rgba(217,33,40,.09),transparent 55%),
    #ffffff;
  --vds-nav-bg:rgba(255,255,255,.85);
  --vds-card-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.07);
  --vds-card-shadow-lg:0 24px 60px rgba(0,0,0,.14);
  --vds-accent-ink:#c0242a;
}

/* Dark — GLP verbatim */
:root[data-theme="dark"]{
  color-scheme:dark;
  --vds-bg:#0b0b0c; --vds-bg-alt:#131315;
  --vds-surface:#17171a; --vds-surface-2:#1f1f23; --vds-surface-3:#2a2a2f;
  --vds-ink:#f5f5f6; --vds-ink-2:#c6c8cc; --vds-muted:#99A1AF;
  --vds-border:#2a2a2f; --vds-border-strong:#3a3a41;
  --vds-hero-ink:#f5f5f6; --vds-hero-ink-2:#c6c8cc;
  --vds-hero-bg:
    radial-gradient(1200px 600px at 80% -10%,rgba(237,71,83,.22),transparent 60%),
    radial-gradient(900px 500px at 10% 10%,rgba(217,33,40,.28),transparent 55%),
    #0a0a0b;
  --vds-nav-bg:rgba(11,11,12,.8);
  --vds-card-shadow:0 1px 2px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.5);
  --vds-card-shadow-lg:0 30px 70px rgba(0,0,0,.6);
  --vds-accent-ink:#ed4753;
}

/* ---------------------------------------------------------------------
 * 6. ACCESSIBILITY PRIMITIVES
 * The skip link and :focus-visible ring did not exist anywhere on this
 * site. Both are spec requirements (§5.3).
 * ------------------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:.75rem 1.25rem;background:var(--vds-red);color:#fff;font-family:var(--vds-font-display);font-weight:600;border-radius:0 0 var(--vds-r-sm) 0}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--vds-red);outline-offset:2px;border-radius:4px}

.vds-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------
 * 7. MOTION
 * GLP's own reduced-motion handling, kept. Every animation on this page
 * must survive this block being active.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* =====================================================================
 * SECTION 0a — ANNOUNCEMENT BAR
 * Sits above the header, so it is theme markup (header.php), not a
 * WPBakery section. Styles are NOT scoped to .home: the bar is sitewide.
 *
 * Derived from GLP's .cred-ticker bar (styles.css, "Credential ticker"):
 * the --bg-alt band, 1px bottom border, and .72rem / 600 / .14em uppercase
 * micro-caps. The marquee is deliberately not reproduced — GLP scrolls
 * because it cycles six credentials; this carries one message.
 * ------------------------------------------------------------------- */
.vds26-announce{background:var(--vds-bg-alt);border-bottom:1px solid var(--vds-border);transition:background-color var(--vds-t-slow),border-color var(--vds-t-slow)}
.vds26-announce-inner{display:flex;align-items:center;justify-content:center;gap:.7rem;max-width:var(--vds-container);margin-inline:auto;padding:.55rem var(--vds-gutter)}
.vds26-announce-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--vds-red);opacity:.85}

/* Text properties carry `body #content`-equivalent weight via a specific
   class chain; this bar is outside #content, so a plain class is enough. */
.vds26-announce .vds26-announce-text{margin:0;font-family:var(--vds-font-display);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--vds-ink-2);text-align:center}
.vds26-announce .vds26-announce-link{color:var(--vds-accent-ink);text-decoration:none;white-space:nowrap}
.vds26-announce .vds26-announce-link:hover{text-decoration:underline}
.vds26-announce .vds26-arrow{display:inline-block;transition:transform var(--vds-t-base)}
.vds26-announce .vds26-announce-link:hover .vds26-arrow{transform:translateX(3px)}

/* Unresolved content is meant to be impossible to miss in review, and
   impossible to mistake for a shipped link. */
.vds26-todo{display:inline-block;background:#ffe8a3;color:#5c4600;border:1px dashed #b58900;border-radius:3px;padding:0 .4rem;text-transform:none;letter-spacing:0;font-weight:700;white-space:normal}
:root[data-theme="dark"] .vds26-todo{background:#3d3200;color:#ffd85c;border-color:#8a6d00}

@media (max-width:480px){
  .vds26-announce-inner{padding-block:.5rem}
  .vds26-announce .vds26-announce-text{font-size:.65rem;letter-spacing:.1em}
}

/* =====================================================================
 * SECTION 2 — HEADER + MEGA NAV
 * Theme markup (template-parts/header/header_styles/left-right-header.php),
 * sitewide, outside #content. Plain class selectors are enough here: the
 * theme-options sheet scopes its text rules to `body #content`, which this
 * header sits outside of.
 *
 * Derived from GLP's "Header + Mega menu" block, styles.css. Two
 * deliberate departures, both recorded in handoff.md §9:
 *   - .mega-preview (the panel whose icon and caption swapped on hover) is
 *     not reproduced. Removed at Gerard's request, 2026-09-10.
 *   - GLP's <h5> column headings render as <p class="vds-mega-col-title">.
 *     Spec §0b: nothing in the header may enter the document outline.
 *
 * GLP's 23 desktop-first max-width queries are normalised to the build's
 * mobile-first 480 / 768 / 1024 / 1200 breakpoints.
 * ------------------------------------------------------------------- */

/* The shell theme paints its own header. Stand it down. */
#header.site-header{background:none;border:0;box-shadow:none;padding:0;min-height:0}
#header.site-header .top-widget{display:none}

/* Both header roots set the family explicitly. Everything inside inherits
   it, so a rule that only sets size/weight still lands in Montserrat. The
   theme's body font otherwise wins for anything not named individually —
   which is how the mega benefit lines and every drawer link shipped in the
   wrong face. */
.vds-header-bar,.vds-drawer{font-family:var(--vds-font-body)}

.vds-header-bar{
  position:sticky;top:0;z-index:100;
  background:var(--vds-nav-bg);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--vds-border);
  transition:background-color var(--vds-t-slow),border-color var(--vds-t-slow);
}
.vds-header-inner{
  display:flex;align-items:center;gap:1rem;
  width:100%;max-width:var(--vds-container-wide);
  margin-inline:auto;padding:.55rem var(--vds-gutter);
}

/* ---- Brand ---------------------------------------------------------- */
.vds-brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.vds-brand img{height:46px;width:auto;display:block}
/* Exactly one logo per theme. Both are in the DOM so neither flashes. */
.vds-brand .vds-logo-light,.vds-brand .vds-logo-dark{display:none}
:root:not([data-theme="dark"]) .vds-brand .vds-logo-light{display:block}
:root[data-theme="dark"] .vds-brand .vds-logo-dark{display:block}

/* ---- Desktop nav ---------------------------------------------------- */
.vds-nav-primary{display:none}
/* stretch, not center: the caret button's content is an 8px SVG, so
   centering leaves its hover background ~17px shorter than the link's and
   floating in the middle of the row. Stretching makes both children the
   full height of the item, so the two halves of the hover state line up. */
.vds-nav-item{position:static;display:flex;align-items:stretch}
.vds-nav-link{
  display:inline-flex;align-items:center;
  font-family:var(--vds-font-display);font-weight:500;font-size:.98rem;
  color:var(--vds-ink);text-decoration:none;
  padding:.6rem .5rem .6rem .85rem;border-radius:var(--vds-r-sm) 0 0 var(--vds-r-sm);
  transition:color var(--vds-t-base),background-color var(--vds-t-base);
}
.vds-nav-item:not(.has-mega) .vds-nav-link{padding-right:.85rem;border-radius:var(--vds-r-sm)}
.vds-nav-trigger{
  display:inline-flex;align-items:center;
  background:none;border:0;cursor:pointer;color:var(--vds-ink);
  padding:.6rem .7rem .6rem .35rem;border-radius:0 var(--vds-r-sm) var(--vds-r-sm) 0;
  transition:color var(--vds-t-base),background-color var(--vds-t-base);
}
.vds-nav-link:hover,.vds-nav-link.is-current,
.vds-nav-item:has(.vds-nav-trigger[aria-expanded="true"]) .vds-nav-link,
.vds-nav-trigger:hover,
.vds-nav-trigger[aria-expanded="true"]{
  color:var(--vds-accent-ink);background:var(--vds-surface-2);
}
.vds-caret{transition:transform .25s}
.vds-nav-trigger[aria-expanded="true"] .vds-caret{transform:rotate(180deg)}

/* ---- Mega panel ------------------------------------------------------
 * .vds-nav-item is position:static and .vds-header-bar is sticky (so it is
 * the containing block), which is what lets the panel centre on the whole
 * header rather than on the item that opened it. */
.vds-mega{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(10px);
  /* Sized from the column count the walker measured, so a 4-column
     Services panel and a 2-column Resources panel are each only as wide as
     they need to be. One fixed width would leave the small ones hollow. */
  width:min(1180px,calc(100vw - 2.5rem));
  background:var(--vds-surface);border:1px solid var(--vds-border);
  border-radius:var(--vds-r-lg);box-shadow:var(--vds-card-shadow-lg);
  padding:1.5rem;z-index:120;
  /* Four columns of real services makes this panel ~650px tall, which
     overruns a 1366x768 laptop. Cap it against the viewport and let it
     scroll rather than clipping links off the bottom. --vds-header-h is
     measured by the JS; the fallback covers the announcement bar + bar. */
  max-height:calc(100dvh - var(--vds-header-h,125px) - 1.5rem);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--vds-t-base) ease,transform var(--vds-t-base) ease;
}
/* Bridges the 10px gap so the pointer can travel into the panel. */
.vds-mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.vds-nav-trigger[aria-expanded="true"] + .vds-mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.vds-mega[data-cols="1"]{width:min(340px,calc(100vw - 2.5rem))}
.vds-mega[data-cols="2"]{width:min(620px,calc(100vw - 2.5rem))}
.vds-mega[data-cols="3"]{width:min(900px,calc(100vw - 2.5rem))}
.vds-mega[data-cols="4"]{width:min(1180px,calc(100vw - 2.5rem))}
/* The feature rail is a fixed 270px column ON TOP of the link columns, so
   every column count needs its own width. Without the 1- and 2-column
   rules, Resources squeezed two columns into 350px and wrapped every
   label onto three lines. */
.vds-mega[data-aside="1"][data-cols="1"]{width:min(660px,calc(100vw - 2.5rem))}
.vds-mega[data-aside="1"][data-cols="2"]{width:min(920px,calc(100vw - 2.5rem))}
.vds-mega[data-aside="1"][data-cols="3"]{width:min(1180px,calc(100vw - 2.5rem))}
.vds-mega[data-aside="1"][data-cols="4"]{width:min(1420px,calc(100vw - 2.5rem))}

.vds-mega-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:stretch}
.vds-mega[data-aside="1"] .vds-mega-inner{grid-template-columns:minmax(0,1fr) 270px}
.vds-mega-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.4rem}
.vds-mega[data-cols="1"] .vds-mega-cols{grid-template-columns:minmax(0,1fr)}
.vds-mega[data-cols="2"] .vds-mega-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.vds-mega[data-cols="4"] .vds-mega-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.vds-mega-col-title{
  font-family:var(--vds-font-display);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vds-muted);
  margin:0 0 .7rem;padding-left:.5rem;
}
.vds-mega-links{display:grid;gap:.1rem}
.vds-mega-link{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:.5rem .55rem;border-radius:var(--vds-r-sm);
  color:var(--vds-ink);text-decoration:none;
  transition:background-color var(--vds-t-fast),transform var(--vds-t-fast);
}
.vds-mega-link:hover,.vds-mega-link:focus-visible{background:var(--vds-surface-2);transform:translateX(2px)}
.vds-mega-link-icon{
  flex:0 0 32px;height:32px;border-radius:9px;
  background:var(--vds-grad-brand-soft);display:grid;place-items:center;
}
.vds-mega-link-icon svg{color:var(--vds-accent-ink)}
.vds-mega-link-text{display:block}
.vds-mega-link-text b{display:block;font-family:var(--vds-font-display);font-weight:600;font-size:.88rem}
.vds-mega-link-text span{display:block;font-size:.76rem;color:var(--vds-muted);line-height:1.3}

/* ---- Feature rail + CTA bar ------------------------------------------
 * GLP put a hover-swapping preview and a CTA card in one right-hand rail.
 * The preview is gone (Gerard), and the CTA moved to a bar under the
 * columns, so the rail now holds feature cards only and is present only
 * when there are some. */
.vds-mega-aside{display:flex;flex-direction:column;gap:1.4rem;padding-left:1.5rem;border-left:1px solid var(--vds-border)}
/* Heading outside the card, card beneath it — same rhythm as a link
   column, so the rail's top edge lines up with the column headings
   instead of starting a card above them. */
.vds-mega-feature-block{display:flex;flex-direction:column}

/* Full-width conversion bar, under everything the panel offers. */
.vds-mega-cta-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--vds-border);
}
.vds-mega-cta-title{
  margin:0;font-family:var(--vds-font-display);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vds-muted);
}
.vds-mega-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--vds-font-display);font-weight:600;font-size:.85rem;line-height:1.3;
  padding:.7rem 1.2rem;border-radius:var(--vds-r-pill);white-space:nowrap;
  border:1.5px solid var(--vds-border-strong);background:var(--vds-surface);
  color:var(--vds-ink);text-decoration:none;text-align:center;
  transition:transform var(--vds-t-fast),border-color var(--vds-t-fast),box-shadow var(--vds-t-base);
}
.vds-mega-cta-btn.primary{background:var(--vds-grad-brand);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(217,33,40,.32)}
.vds-mega-cta-btn:hover{transform:translateY(-1px)}
.vds-mega-cta-btn.primary:hover{box-shadow:0 12px 26px rgba(217,33,40,.42)}
.vds-mega-cta-btn .vds-arrow{transition:transform var(--vds-t-base)}
.vds-mega-cta-btn:hover .vds-arrow{transform:translateX(3px)}

/* ---- Right-hand cluster --------------------------------------------- */
.vds-nav-cta{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:0 0 auto}
.vds-nav-phone{
  display:none;align-items:center;gap:.4rem;
  font-family:var(--vds-font-display);font-weight:600;font-size:.88rem;
  color:var(--vds-ink);text-decoration:none;white-space:nowrap;
  padding:.5rem .6rem;border-radius:var(--vds-r-sm);
  transition:color var(--vds-t-base),background-color var(--vds-t-base);
}
.vds-nav-phone:hover{color:var(--vds-accent-ink);background:var(--vds-surface-2)}
.vds-nav-btn{
  display:none;align-items:center;justify-content:center;
  font-family:var(--vds-font-display);font-weight:600;font-size:.85rem;
  padding:.62rem 1.05rem;border-radius:var(--vds-r-pill);
  background:var(--vds-grad-brand);color:#fff;text-decoration:none;
  border:1.5px solid transparent;white-space:nowrap;
  box-shadow:0 8px 20px rgba(217,33,40,.32);
  transition:transform var(--vds-t-fast),box-shadow var(--vds-t-base);
}
.vds-nav-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(217,33,40,.42);color:#fff}

.vds-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;cursor:pointer;
  background:none;border:1.5px solid var(--vds-border-strong);border-radius:50%;
  color:var(--vds-ink);
  transition:color var(--vds-t-base),border-color var(--vds-t-base);
}
.vds-theme-toggle:hover{color:var(--vds-accent-ink);border-color:var(--vds-red)}
.vds-theme-toggle .vds-icon-moon{display:none}
:root[data-theme="dark"] .vds-theme-toggle .vds-icon-sun{display:none}
:root[data-theme="dark"] .vds-theme-toggle .vds-icon-moon{display:block}

/* ---- Drawer toggle --------------------------------------------------- */
.vds-drawer-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;cursor:pointer;
  background:none;border:1.5px solid var(--vds-border-strong);border-radius:var(--vds-r-sm);
  color:var(--vds-ink);
}
.vds-burger{display:grid;gap:4px;width:16px}
.vds-burger span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform var(--vds-t-base),opacity var(--vds-t-base)}
body.vds-drawer-open .vds-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.vds-drawer-open .vds-burger span:nth-child(2){opacity:0}
body.vds-drawer-open .vds-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- Mobile drawer: full-width panel, drill-down pages ---------------
 * Not a side flyout and not accordions — both were tried and rejected.
 * The panel drops below the header and fills the rest of the viewport;
 * tapping a parent slides the whole list left to that item's own page,
 * which opens with a Back button.
 *
 * Fixed, not in flow, so opening the menu never pushes the page down.
 * top is set from --vds-header-h, which the JS measures off the real
 * header (the announcement bar makes it variable). */
.vds-drawer{
  position:fixed;left:0;right:0;z-index:130;
  top:var(--vds-header-h,116px);
  height:calc(100dvh - var(--vds-header-h,116px));
  display:flex;flex-direction:column;
  padding:.5rem var(--vds-gutter) 1.25rem;
  background:var(--vds-bg);border-top:1px solid var(--vds-border);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--vds-t-base) ease,transform var(--vds-t-base) ease;
}
body.vds-drawer-open .vds-drawer{opacity:1;transform:translateY(0)}
body.vds-drawer-open{overflow:hidden}
.vds-drawer[hidden]{display:none}

/* The viewport clips the sliding pages. Its height is set inline by the JS
   to the active page's height, so the panel grows and shrinks with the
   page instead of holding the tallest one's height. */
.vds-dd-viewport{position:relative;overflow:hidden;transition:height var(--vds-t-base) ease}
.vds-dd-page{
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
/* Only the root is in flow; sub-pages are stacked over it and slid in.
   Nesting means a page can be BEHIND the active one rather than ahead of
   it, so there are three states, not two: ahead (default, off to the
   right), active, and behind (pushed left). */
.vds-dd-sub{position:absolute;inset:0 0 auto 0;transform:translateX(100%);background:var(--vds-bg)}
.vds-dd-sub[hidden]{display:none}
.vds-dd-page.is-active{transform:translateX(0)}
.vds-dd-page.is-behind{transform:translateX(-100%)}

/* Rows on the root page */
.vds-dd-row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:1rem .3rem;background:none;border:0;border-bottom:1px solid var(--vds-border);
  font-family:var(--vds-font-display);font-weight:600;font-size:1.05rem;
  color:var(--vds-ink);text-decoration:none;text-align:left;cursor:pointer;
}
.vds-dd-row:hover{color:var(--vds-accent-ink)}
.vds-dd-chevron{flex:0 0 auto;opacity:.55}

/* Sub-page furniture */
.vds-dd-back{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  padding:.7rem .3rem;background:none;border:0;cursor:pointer;
  font-family:var(--vds-font-display);font-weight:600;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--vds-muted);
}
.vds-dd-back:hover{color:var(--vds-accent-ink)}
.vds-dd-title{
  margin:0 0 .25rem;padding:0 .3rem;
  font-family:var(--vds-font-display);font-weight:700;font-size:1.35rem;color:var(--vds-ink);
}
.vds-dd-link{
  display:block;padding:.6rem .3rem;
  color:var(--vds-ink-2);font-size:.98rem;text-decoration:none;
}
.vds-dd-link:hover{color:var(--vds-accent-ink)}
.vds-dd-overview{font-weight:600;color:var(--vds-accent-ink);border-bottom:1px solid var(--vds-border);padding-bottom:.7rem}
.vds-dd-callout{font-weight:600;color:var(--vds-accent-ink);margin-top:.6rem}

/* ---- Drawer phone + CTA --------------------------------------------- */
.vds-drawer-cta{display:grid;gap:.6rem;margin-top:auto;padding-top:1.4rem}
.vds-drawer-phone{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--vds-font-display);font-weight:600;font-size:1rem;
  color:var(--vds-ink);text-decoration:none;
  padding:.7rem 1rem;border-radius:var(--vds-r-pill);
  border:1.5px solid var(--vds-border-strong);
}
.vds-drawer-phone:hover{color:var(--vds-accent-ink);border-color:var(--vds-red)}
.vds-nav-btn.vds-drawer-btn{display:inline-flex;padding:.8rem 1rem;font-size:.9rem}

@media (min-width:768px){
  .vds-nav-phone{display:inline-flex}
  .vds-nav-btn{display:inline-flex}
  /* Above 768 the header bar carries both, so the drawer copy is noise. */
  .vds-drawer-cta{display:none}
}

/* 1200, not 1024: six top-level items plus logo, phone, toggle and the
   audit button do not fit a 1024 bar without the nav wrapping. Tablets in
   that range get the drill-down drawer, which handles the depth better
   than a cramped mega would. */
@media (min-width:1200px){
  .vds-header-inner{gap:1.5rem;padding-block:.65rem}
  .vds-brand img{height:52px}
  .vds-nav-primary{display:flex;align-items:center;gap:.1rem;margin-inline:auto}
  .vds-nav-link{padding-left:.7rem;font-size:.94rem}
  .vds-nav-item:not(.has-mega) .vds-nav-link{padding-right:.7rem}
  .vds-drawer-toggle{display:none}
  .vds-drawer{display:none}
}

/* ---- Mega feature cards ---------------------------------------------
 * The rail's fresh-content slot: latest article (Resources), latest press
 * release (About), and a click-to-play video. Deliberately styled apart
 * from the link columns — a card reads as editorial, a row reads as
 * navigation, and conflating the two is what makes a rotating post look
 * like part of the site's structure. */
.vds-mega-aside{gap:.9rem}
.vds-mega-feature{
  display:block;border:1px solid var(--vds-border);border-radius:var(--vds-r-md);
  background:var(--vds-surface-2);overflow:hidden;text-decoration:none;color:var(--vds-ink);
  transition:border-color var(--vds-t-base),transform var(--vds-t-fast);
}
a.vds-mega-feature:hover{border-color:var(--vds-red);transform:translateY(-1px)}
.vds-mega-feature-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vds-mega-feature-body{display:block;padding:.7rem .85rem .85rem}
.vds-mega-feature-date{display:block;font-size:.7rem;color:var(--vds-muted);margin-bottom:.2rem}
.vds-mega-feature-body b{display:block;font-family:var(--vds-font-display);font-weight:600;font-size:.85rem;line-height:1.3}
.vds-mega-feature-more{
  display:inline-block;margin-top:.5rem;
  font-family:var(--vds-font-display);font-weight:600;font-size:.76rem;color:var(--vds-accent-ink);
}
a.vds-mega-feature:hover .vds-arrow{transform:translateX(3px)}
.vds-mega-feature .vds-arrow{display:inline-block;transition:transform var(--vds-t-base)}

/* YouTube facade. The iframe only exists after a click. */
.vds-yt-facade{
  position:relative;display:block;width:100%;padding:0;cursor:pointer;
  background:#000;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--vds-border);border-radius:var(--vds-r-md);
  transition:border-color var(--vds-t-base);
}
.vds-yt-facade:hover{border-color:var(--vds-red)}
.vds-yt-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:opacity var(--vds-t-base)}
.vds-yt-facade:hover img,.vds-yt-facade:focus-visible img{opacity:1}
.vds-yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.vds-yt-facade iframe,.vds-mega-feature-video iframe{width:100%;height:100%;border:0;display:block}

/* =====================================================================
 * BUTTON PRIMITIVE — sitewide (added Section 3)
 * Lives in the SHELL, not the homepage sheet, because §19's footer and
 * every subpage build need the same button. Gotcha #13: a primitive used
 * outside #content must not be defined in a homepage-only sheet.
 * Derived from GLP's .btn / .btn-primary / .btn-light / .btn-lg.
 * ===================================================================== */
.vds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--vds-font-display);font-weight:600;font-size:.92rem;line-height:1.2;
  padding:.8rem 1.4rem;border-radius:var(--vds-r-pill);border:1px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform var(--vds-t-base),box-shadow var(--vds-t-base),
             background var(--vds-t-base),color var(--vds-t-base),border-color var(--vds-t-base)}
.vds-btn:hover{text-decoration:none;transform:translateY(-1px)}
.vds-btn-lg{padding:.95rem 1.7rem;font-size:1rem}
.vds-btn-primary{background:var(--vds-grad-brand);color:#fff;box-shadow:0 8px 20px rgba(217,33,40,.32)}
.vds-btn-primary:hover{color:#fff;box-shadow:0 12px 26px rgba(217,33,40,.42)}
.vds-btn-secondary{background:var(--vds-ink);color:var(--vds-bg);border-color:var(--vds-ink);
  box-shadow:0 9px 24px rgba(0,0,0,.16)}
.vds-btn-secondary:hover{background:var(--vds-accent-ink);border-color:var(--vds-accent-ink);color:#fff}
/* Ghost — GLP's `.btn-ghost`. The quiet third button: §10's Back and Retake
   sit beside a primary and must not compete with it. Added §10; it belongs
   in the shell with the rest of the primitive, not in the homepage sheet. */
.vds-btn-ghost{background:transparent;color:var(--vds-ink);border-color:var(--vds-border-strong)}
.vds-btn-ghost:hover{background:var(--vds-surface-2);color:var(--vds-ink);border-color:var(--vds-ink)}
.vds-btn .vds-arrow{line-height:1;transition:transform var(--vds-t-base)}
.vds-btn:hover .vds-arrow{transform:translateX(3px)}

/* =====================================================================
 * §19 — FOOTER (sitewide)
 *
 * Lives in the SHELL, not the homepage sheet: the footer renders outside
 * `#content` on every page, and gotcha #13 is that a sitewide element
 * styled from a homepage-only sheet is unstyled everywhere else. §1's
 * announcement bar got this wrong once already.
 *
 * Gotcha #18: outside `#content` the element inherits the THEME's font
 * stack, not the page's, so `.vds-footer` sets font-family at its own root
 * exactly as `.vds-header-bar` and `.vds-drawer` do.
 *
 * DARK MODE is the reason this is a template rather than widgets. Every
 * colour below is a `--vds-*` token, so the footer follows the same
 * light/dark sets and the same manual toggle as the header, with no
 * `@media (prefers-color-scheme)` of its own and nothing inherited from
 * the theme's untokenised legacy widget CSS.
 * ===================================================================== */
.vds-footer{
  font-family:var(--vds-font-body);
  background:var(--vds-bg-alt);
  color:var(--vds-ink-2);
  border-top:1px solid var(--vds-border);
  padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.25rem);
}
.vds-footer-inner{
  width:100%;max-width:var(--vds-container-wide);
  margin-inline:auto;padding-inline:var(--vds-gutter);
}

/* ---- Top: brand + NAP ----------------------------------------------- */
.vds-footer-top{
  display:flex;flex-wrap:wrap;gap:1.75rem 2.5rem;
  align-items:flex-start;justify-content:space-between;
  padding-bottom:clamp(1.75rem,3.5vw,2.5rem);
  border-bottom:1px solid var(--vds-border);
}
.vds-footer-brand{flex:1 1 260px;min-width:0}
/* `.vds-brand` already owns the logo swap; the footer only resizes it. */
.vds-footer-logo img{height:52px}
.vds-footer-vmg{
  font-family:var(--vds-font-display);font-weight:600;font-size:.82rem;
  letter-spacing:.04em;color:var(--vds-muted);margin:.85rem 0 0;
}
.vds-footer-nap{flex:0 1 auto;min-width:0}
.vds-footer-nap-name{
  font-family:var(--vds-font-display);font-weight:700;font-size:1rem;
  color:var(--vds-ink);margin:0 0 .35rem;
}
/* UA italicises <address>. */
.vds-footer-nap-addr{
  font-style:normal;font-size:.9rem;line-height:1.55;
  color:var(--vds-ink-2);margin:0 0 .4rem;
}
.vds-footer-nap-tel{margin:0}
.vds-footer-nap-tel a{
  font-family:var(--vds-font-display);font-weight:700;font-size:1.05rem;
  color:var(--vds-accent-ink);text-decoration:none;
}
.vds-footer-nap-tel a:hover,
.vds-footer-nap-tel a:focus-visible{text-decoration:underline}

/* ---- Link columns ---------------------------------------------------- */
/* auto-fit rather than a fixed count: the four columns hold 8, 6, 4 and 6
   items, so a fixed 4-up leaves the short column with a long tail of empty
   space at the narrower desktop widths. */
.vds-footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:2rem 1.75rem;
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
}
/* A column label is NOT a section heading — this is the <h2> the parent
   theme's register_sidebar() emitted and the spec's cited footer defect. */
.vds-foot-label{
  font-family:var(--vds-font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--vds-ink);margin:0 0 .9rem;
}
.vds-footer-col ul{list-style:none;margin:0;padding:0}
.vds-footer-col li{margin:0 0 .5rem}
.vds-footer-col li:last-child{margin-bottom:0}
.vds-footer-col a{
  font-size:.9rem;line-height:1.45;color:var(--vds-ink-2);
  text-decoration:none;transition:color var(--vds-t-base);
}
.vds-footer-col a:hover,
.vds-footer-col a:focus-visible{color:var(--vds-accent-ink)}
.vds-footer-col a:focus-visible{
  outline:2px solid var(--vds-accent-ink);outline-offset:2px;border-radius:2px}
/* The industries list is deliberately unlinked (see the template part).
   It is styled as text, not as a link list that happens to be dead. */
.vds-foot-plain li{font-size:.9rem;line-height:1.45;color:var(--vds-muted)}

/* ---- Bottom: legal + copyright --------------------------------------- */
.vds-footer-bottom{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;
  align-items:center;justify-content:space-between;
  padding-top:clamp(1.25rem,2.5vw,1.75rem);
  border-top:1px solid var(--vds-border);
}
.vds-footer-legal{
  display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;
  list-style:none;margin:0;padding:0;
}
.vds-footer-legal a{
  font-size:.82rem;color:var(--vds-muted);text-decoration:none;
  transition:color var(--vds-t-base);
}
.vds-footer-legal a:hover,
.vds-footer-legal a:focus-visible{color:var(--vds-accent-ink)}
.vds-footer-legal a:focus-visible{
  outline:2px solid var(--vds-accent-ink);outline-offset:2px;border-radius:2px}
.vds-footer-copy{font-size:.82rem;color:var(--vds-muted);margin:0}

@media (max-width:600px){
  .vds-footer-top,.vds-footer-bottom{
    flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .vds-footer-col a,.vds-footer-legal a{transition:none}
}