/*
 * TRIPLE S — base element + cinematic system layer (ROUND 2).
 * Built on tokens.css. R1 kept this layer deliberately thin; R2 (DESIGN-DIRECTIVES-R2.md,
 * "too stale" remediation) adds the full depth/glass/card/motion system that the compact
 * Elementor builder (scripts/import-pages.php) hooks into via stable class names:
 *   sections : ss-hero ss-depth ss-dots ss-glow ss-footer ss-legal
 *   columns  : ss-card ss-card--soft
 *   widgets  : ss-eyebrow ss-hgold ss-hl ss-cta-row ss-check ss-grid (+ variants)
 * Native Elementor settings carry the base surface (bg/border/pad) so cards read correctly
 * even where class injection is unavailable; this file adds the richness settings can't:
 * dot-grid, gold glow, hover lift, gold checkmarks, glass header, entrance motion.
 * All colour choices preserve WCAG 2.2 AA contrast (docs/DESIGN-SYSTEM.md).
 */

/* ============================================================ BASE ELEMENTS */
body {
  background-color: var(--ss-bg);
  background-image:
    radial-gradient(1200px 700px at 80% -5%, rgba(255,210,0,0.05), transparent 60%),
    linear-gradient(180deg, #131417 0%, #1B1C20 100%);
  background-attachment: fixed;
  color: var(--ss-text-body);
  font-family: var(--ss-font-body);
  font-size: var(--ss-fs-body);
  line-height: var(--ss-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ss-font-head);
  line-height: var(--ss-lh-head);
  color: var(--ss-text);
  font-weight: 700;
}
h1 { font-size: var(--ss-fs-h1); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--ss-fs-h2); }
h3 { font-size: var(--ss-fs-h3); }
h4 { font-size: var(--ss-fs-h4); }
h5 { font-size: var(--ss-fs-h5); }
h6 { font-size: var(--ss-fs-h6); }

/* Eyebrow / label utility. */
.ss-eyebrow, .ss-eyebrow .elementor-heading-title {
  font-size: var(--ss-fs-eyebrow);
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ss-accent);
  font-weight: 600;
}

a { color: var(--ss-accent); text-decoration: none; transition: color var(--ss-dur-micro) var(--ss-ease); }
a:hover { color: var(--ss-accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 2px;
}
p { color: var(--ss-text-body); }
.ss-muted, small { color: var(--ss-text-muted); }
hr { border: 0; border-top: 1px solid var(--ss-border); }

/* Gold keyword emphasis inside headings (hgold widget). */
.ss-hl { color: var(--ss-accent); }

/* ============================================== SECTION DEPTH SYSTEM (G1) */
/* On this Hello + free-Elementor 3.26 build, SECTION/COLUMN custom classes are stripped from the
   frontend (optimized markup) — only WIDGET classes render. So the builder drops a hidden marker
   widget (`.ss-mark …hooks`) into each section and we style the enclosing section via `:has()`.
   The marker travels verbatim in the kit, so the cinematic system is fully portable. Browsers
   without :has() (pre-2023) gracefully fall back to the section's native dark gradient/fill. */
.ss-mark { display: none !important; }

/* Ensure decorative ::before/::after layers sit behind content. */
.elementor-section:has(.ss-mark.ss-dots),
.elementor-section:has(.ss-mark.ss-glow) { position: relative; overflow: hidden; }
.elementor-section:has(.ss-mark.ss-dots) > .elementor-container,
.elementor-section:has(.ss-mark.ss-glow) > .elementor-container { position: relative; z-index: 1; }

/* Faint gold dot-grid on alternating sections. */
.elementor-section:has(.ss-mark.ss-dots)::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,210,0,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
/* Radial gold glow behind section headings (::after so it can coexist with the dot-grid). */
.elementor-section:has(.ss-mark.ss-glow)::after {
  content: "";
  position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 640px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,210,0,0.10), transparent 62%);
}

/* R8 · GEMINI-AUDIT-R8 Finding 1 (ACCEPTED). On the 3 omitted-positioning family pages
   (Smart Communities / Enterprise Security / Digital Transformation) the "What we provide"
   capabilities slab (.ss-dots) abuts the hero directly — no positioning section between — so
   its label sat slightly tight under the hero. When (and ONLY when) that BARE-dots capabilities
   section is the immediate sibling of the hero, lift its top padding to var(--sp-8) (64px, the
   auditor's --space-8). The other 10 families put a .ss-glow positioning section between hero and
   .ss-dots, so the adjacency never matches them.
   CEO-R8/D-049 SCOPE FIX: the marker carries the section's FULL cls string (import-pages.php:476),
   and contact-us's post-hero section is `ss-glow ss-dots` (a COMBINED-class marker
   `ss-mark ss-glow ss-dots`) whose authored 88px padding this rule was wrongly clamping to 64px.
   `.ss-mark.ss-dots:not(.ss-glow)` requires the dots marker to NOT also be a glow marker, so it
   matches the 3 families' bare `ss-mark ss-dots` and excludes contact-us's combined marker →
   genuine zero regression across all 20 pages. CSS-only (no page-data change → kit ZIP unchanged);
   !important clears Elementor's per-post padding. */
.elementor-section:has(.ss-mark.ss-hero) + .elementor-section:has(.ss-mark.ss-dots:not(.ss-glow)) {
  padding-top: var(--sp-8) !important;
}

/* ================================================================ HERO (H1) */
.elementor-section:has(.ss-mark.ss-hero) { position: relative; }
.elementor-section:has(.ss-mark.ss-hero) > .elementor-container { position: relative; z-index: 1; }
.elementor-section:has(.ss-mark.ss-hero) .ss-hgold .elementor-heading-title,
.elementor-section:has(.ss-mark.ss-hero) h1 {
  font-size: clamp(2.6rem, 5.6vw, 3.9rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  max-width: 16ch;
}
.elementor-section:has(.ss-mark.ss-hero) .ss-eyebrow { margin-bottom: 0.5rem; }
.elementor-section:has(.ss-mark.ss-hero) p { max-width: 54ch; color: #D6DCE5; }
/* WCAG AA (BLOCKER-1): hero text legibility is carried by a heavier native image scrim set in
   the page JSON (Elementor's own per-element overlay CSS outranks a child-theme override, so the
   fix lives at the source — scrim rgba ~0.95→0.85 top→bottom on About/Contact/Solutions/Capabilities). */

/* ================================================================ BUTTONS */
.elementor-button, .ss-btn-el .elementor-button {
  background-color: var(--ss-accent);
  color: var(--ss-graphite);
  font-family: var(--ss-font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--r-md);
  padding: 16px 34px;
  transition: transform var(--ss-dur-micro) var(--ss-ease), background-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease);
}
.elementor-button:hover { background-color: var(--ss-accent-hover); color: var(--ss-graphite); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,210,0,0.18); }
/* Ghost (outline) button. Elementor emits a global filled background for every .elementor-button
   from the kit's Global Styles; that background out-specifies this 2-class selector and used to
   leave the ghost widget gold-FILLED while this rule's light text still applied — gold-on-gold,
   measured at 1.80:1 (AA fail) on all 13 family + 2 sector "Explore →" buttons (D-047). Forcing
   the transparent background wins over the kit style so the light text sits on the dark card
   (~12:1). !important is the established override idiom in this file (cf. reduced-motion block). */
.ss-btn-ghost .elementor-button {
  background-color: transparent !important; color: var(--ss-text);
  border: 1px solid #414042;
}
.ss-btn-ghost .elementor-button:hover { background-color: var(--ss-accent) !important; color: var(--ss-graphite); border-color: var(--ss-accent); }

/* Inline dual-CTA row (cta widget). */
.ss-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.ss-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ss-font-head); font-weight: 700; letter-spacing: 0.02em;
  /* Gemini R7 · F4: a matched floor so the pair reads balanced — the short primary
     ("Contact Us", measured 161px) no longer sits far narrower than the secondary
     ("Private/Public Sector Solutions", ~273px). Mobile rule below sets width:100%. */
  min-width: 220px;
  padding: 16px 34px; border-radius: var(--r-md);
  transition: transform var(--ss-dur-micro) var(--ss-ease), background-color var(--ss-dur-micro) var(--ss-ease), box-shadow var(--ss-dur-micro) var(--ss-ease), border-color var(--ss-dur-micro) var(--ss-ease);
}
.ss-cta-btn--primary { background: var(--ss-accent); color: var(--ss-graphite); }
.ss-cta-btn--primary:hover { background: var(--ss-accent-hover); color: var(--ss-graphite); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,210,0,0.20); }
.ss-cta-btn--ghost { background: transparent; color: #fff; border: 1px solid #414042; }
.ss-cta-btn--ghost:hover { background: var(--ss-accent); color: var(--ss-graphite); border-color: var(--ss-accent); transform: translateY(-2px); }

/* ================================================================ CARDS */
/* Card = an Elementor column carrying .ss-card; native bg/border/pad already applied. */
.ss-card {
  border-radius: 8px;
  transition: transform .3s var(--ss-ease), box-shadow .3s var(--ss-ease), border-color .3s var(--ss-ease);
  position: relative;
}
.ss-card::after { /* persistent 2px gold top accent (P1), intensifies on hover */
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--ss-accent); opacity: 0.5; transition: opacity .3s var(--ss-ease);
  border-radius: 8px 8px 0 0;
}
.ss-card:hover { transform: translateY(-4px); border-color: var(--ss-accent) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,210,0,0.25); }
.ss-card:hover::after { opacity: 1; }
.ss-card h3 { margin-bottom: .5rem; }
.ss-card--soft:hover { transform: none; }

/* ======================================================= CARD GRIDS (grid widget) */
.ss-grid {
  display: grid;
  grid-template-columns: repeat(var(--ss-cols, 4), minmax(0, 1fr));
  gap: 18px;
  margin: 8px 0;
}
.ss-gcard {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  padding: 22px 20px;
  transition: transform .3s var(--ss-ease), border-color .3s var(--ss-ease), box-shadow .3s var(--ss-ease);
}
.ss-gcard:hover { transform: translateY(-4px); border-color: var(--ss-accent); box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
.ss-gcard-ico { display: inline-flex; margin-bottom: 12px; color: var(--ss-accent); }
.ss-gcard-ico .ss-ico { width: 30px; height: 30px; }
.ss-gcard-num { display: block; font-family: var(--ss-font-head); font-size: .82rem; letter-spacing: .1em; color: var(--ss-accent); margin-bottom: 10px; }
.ss-gcard-kick { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ss-text-muted); margin-bottom: 8px; }
.ss-gcard-t { font-size: 1.02rem; font-family: var(--ss-font-head); font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.ss-gcard-x { font-size: .92rem; color: var(--ss-text-muted); line-height: 1.5; margin: 0; }

/* micro-cards (compact, uppercase label) — used by About "Our Values". The homepage
   Industries grid layers `.ss-grid--sectors` on top for the R5 dual-anchor tactical anatomy
   (search "ROUND 5 — INDUSTRIES" at the end of this file). */
.ss-grid--micro .ss-gcard { padding: 18px 16px; }
.ss-grid--micro .ss-gcard-t { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* why-matrix: big gold index number */
.ss-grid--matrix .ss-gcard { background: var(--ss-surface); }
.ss-grid--matrix .ss-gcard-num { font-size: 1rem; }

/* stats ribbon: big gold numbers over graphite labels */
.ss-grid--stats { gap: 0; margin-top: 40px; border: 1px solid var(--ss-border); border-radius: 8px; overflow: hidden; background: #1B1C20; }
.ss-grid--stats .ss-gcard { text-align: center; background: transparent; border: 0; border-left: 1px solid var(--ss-border); border-radius: 0; padding: 26px 18px; }
.ss-grid--stats .ss-gcard:first-child { border-left: 0; }
.ss-grid--stats .ss-gcard:hover { transform: none; box-shadow: none; }
.ss-grid--stats .ss-gcard-num { font-size: 2.3rem; font-weight: 800; color: var(--ss-accent); margin-bottom: 6px; line-height: 1; word-break: normal; }
.ss-grid--stats .ss-gcard-t { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ss-text-muted); font-weight: 600; }

/* accreditation badges: centered emblem cards */
.ss-grid--badges .ss-gcard { text-align: center; background: #17181B; border-color: var(--ss-border); padding: 20px 14px; display: flex; align-items: center; justify-content: center; min-height: 62px; }
.ss-grid--badges .ss-gcard-t { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; margin: 0; color: #E7E7EA; font-weight: 600; }
.ss-grid--badges .ss-gcard:hover { border-color: var(--ss-accent); }

/* offices: pin cards over subtle map tint */
.ss-grid--office .ss-gcard-ico { color: var(--ss-accent); }

/* ============================================ ICON LIST — gold checkmarks (no bullets) */
.ss-check { list-style: none; margin: 0; padding: 0; }
.ss-check li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  color: var(--ss-text-body); line-height: 1.5;
}
.ss-check li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  background: var(--ss-accent);
  -webkit-mask: no-repeat center / 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/></svg>");
          mask: no-repeat center / 14px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/></svg>");
  border-radius: 3px;
}
.ss-check--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }

/* Footer explore links: no bullets, quiet */
.ss-foot-links .ss-check li { padding-left: 0; margin-bottom: 8px; }
.ss-foot-links .ss-check li::before { display: none; }

/* Legacy plain <ul> lists still used on unconverted pages — quiet dark bullets. */
.elementor-widget-text-editor ul { padding-left: 1.1rem; }
.elementor-widget-text-editor ul li { margin-bottom: .4rem; color: var(--ss-text-body); }
.elementor-widget-text-editor ul li::marker { color: var(--ss-accent); }

/* ============================================ SPLIT ROWS / IMAGERY FRAMES (P2) */
.ss-frame { position: relative; }
.ss-frame::before, .ss-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px; z-index: 2; pointer-events: none;
  border-color: var(--ss-accent); border-style: solid; border-width: 0;
}
.ss-frame::before { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.ss-frame::after  { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }

/* Elementor defaults every background overlay to opacity:0.5 and only honours the per-element
   opacity setting on sections — COLUMN overlays stay at 0.5, leaving split-row imagery too
   bright. Force full opacity so the graphite scrims (set in the page JSON) land at their
   intended strength and all photography reads as one dark cinematic system. */
.elementor-background-overlay { opacity: 1 !important; }

/* ===================================== PORTABLE CINEMATIC IMAGERY (heroes + split rows)
   The R2 imagery is shipped INSIDE this child theme (assets/img/*.jpg) and painted here via
   `ss-img--<slug>` hook classes. Elementor's Website-Kit export does NOT carry raw-URL or
   media-library backgrounds to a clean machine — every such background imports as Elementor's
   placeholder.png (proven in the clean-room re-import). Owning the imagery in theme CSS makes it
   fully portable: it travels with triple-s-child.zip and renders on any install, kit or no kit.
   Class hooks that actually render on this Hello+free-Elementor build are SECTION- and
   WIDGET-level (never COLUMN-level), so heroes bind on the section and split photos on a widget. */

/* Hero photo sections. The builder drops a `.ss-mark.ss-herobg--<slug>` marker widget into the
   hero; the SECTION paints the photo as its own background (full-bleed, no positioning gymnastics)
   and the `.ss-hero` ::before scrim above already darkens it so headline text clears WCAG AA. The
   dark section fill (set natively by the builder) is the graceful fallback without :has(). */
.elementor-section:has(.ss-mark.ss-herobg) {
  position: relative;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
}
/* Graphite scrim over the hero photo — keeps H1/eyebrow/paragraph at WCAG AA on every frame. */
.elementor-section:has(.ss-mark.ss-herobg)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,0.86) 0%, rgba(11,11,12,0.70) 52%, rgba(11,11,12,0.92) 100%);
}
.elementor-section:has(.ss-mark.ss-herobg--coastal-terminal) { background-image: url("../img/coastal-terminal.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--dubai-dusk)          { background-image: url("../img/dubai-dusk.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--servers)             { background-image: url("../img/servers.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--avionics)            { background-image: url("../img/avionics.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--maritime)            { background-image: url("../img/maritime.jpg"); }

/* Split-row image panel (a widget inside the image column). 1px gold border + radius = the gold
   frame; .ss-frame adds the gold corner brackets; min-height gives intrinsic height so the panel
   never collapses on mobile (fixes former SF-3). A light scrim keeps every photo one graphite system. */
.ss-splitphoto {
  position: relative; min-height: 340px; height: 100%;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  background-color: #0B0B0C; border: 1px solid #4a3d15; border-radius: 8px; overflow: hidden;
}
.ss-splitphoto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,0.34) 0%, rgba(11,11,12,0.22) 100%);
}

/* Per-image URL bindings — theme-relative so they resolve on any install; theme ships the files. */
.ss-img--coastal-terminal { background-image: url("../img/coastal-terminal.jpg"); }
.ss-img--dubai-dusk          { background-image: url("../img/dubai-dusk.jpg"); }
.ss-img--servers             { background-image: url("../img/servers.jpg"); }
.ss-img--avionics            { background-image: url("../img/avionics.jpg"); }
.ss-img--maritime            { background-image: url("../img/maritime.jpg"); }
.ss-img--advisory            { background-image: url("../img/advisory.jpg"); }

/* ================================================= VISION / MISSION / PURPOSE (P3) */
.ss-vmp { border-left: 3px solid var(--ss-accent) !important; }
.ss-vmp h3 { color: #fff; }

/* ================================================= STICKY GLASS HEADER (G2) */
.site-header, header.site-header, .elementor-location-header {
  position: sticky; top: 0; z-index: 999;
  background: rgba(19,20,23,0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .site-title, .site-header .site-branding a, .site-title a {
  font-family: var(--ss-font-head); font-weight: 700; font-size: 22px;
  letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
.site-header nav a, .site-header .elementor-nav-menu a, #site-navigation a {
  position: relative; color: #EDEDED; font-family: var(--ss-font-head); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; font-size: .86rem;
}
.site-header nav a::after, #site-navigation a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--ss-accent); transition: width .25s var(--ss-ease);
}
.site-header nav a:hover, #site-navigation a:hover { color: var(--ss-accent); }
.site-header nav a:hover::after, #site-navigation a:hover::after { width: 100%; }

/* ==================================================== FOOTER ARCHITECTURE (G4) */
.elementor-section:has(.ss-mark.ss-footer) { position: relative; }
.elementor-section:has(.ss-mark.ss-footer)::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,210,0,0.30);
}
.ss-foot-brand .elementor-heading-title { font-family: var(--ss-font-head); font-size: 1.4rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.ss-foot-h .elementor-heading-title { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: var(--ss-tracking-label); margin-bottom: .4rem; }
.ss-foot-note, .ss-foot-note p, .ss-foot-note li { color: var(--ss-text-muted); font-size: .92rem; }
.ss-foot-links .ss-check li a, .ss-foot-links .ss-check li { color: var(--ss-text-muted); font-size: .92rem; }
.ss-foot-links li:hover { color: var(--ss-accent); }
/* R10 G3: keep every compliance chip on one line at 390/768/1440. Uniform ~10px uppercase
   chip typography (letter-spacing .05em) + nowrap so "CAGE 7LUB2" and "ISO/IEC 27001" never
   wrap. AA text floor (#E7E7EA, inherited from .ss-grid--badges) is unchanged — rest-state
   readable.

   D-072: the sentence that used to sit here — "the footer columns go full-width at mobile so
   the 2-col grid always has room" — was true at 390/768 and FALSE at 1440, which is the only
   width where the COMPLIANCE column is narrow. `nowrap` inside a `.ss-gcard` that inherits
   `overflow: hidden` (the D8 steel-plate rule) does not wrap and does not scroll: it
   AMPUTATES. Measured at 100 of 120 chips clipped at 1440 on all 20 pages, worst 42.09px —
   "ISO/IEC 27001" rendering as "D/IEC 270" — because `minmax(0, 1fr)` lets each track
   collapse to 32.23px of content box under 46-74px of text. Raising the track FLOOR to
   `max-content` lets the column still grow to 1fr but never shrink below the label it clips.
   Do NOT "fix" a future recurrence by dropping `nowrap` (that re-opens G3, the wrap this
   block exists to cure) or by shrinking the font (it walks a credential string toward the AA
   floor). Guarded by scripts/screenshots/chipfit.js — measure, do not assume. */
.ss-grid--footbadges { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
.ss-grid--footbadges .ss-gcard { min-height: 40px; padding: 10px 14px; } /* R11c: text no longer kisses the chip outline (client request) */
.ss-grid--footbadges .ss-gcard-t { font-size: .625rem; letter-spacing: .05em; white-space: nowrap; }
.ss-legal-line, .ss-legal-line p { text-align: center; color: var(--ss-text-muted); font-size: .8125rem; margin: 0; }

/* ================================================= CONTACT PORTAL INPUTS (P4) */
.ss-form { display: flex; flex-direction: column; gap: 16px; }
.ss-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ss-field { display: flex; flex-direction: column; gap: 6px; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ss-text-muted); font-weight: 600; }
.ss-form input, .ss-form textarea, .ss-form select,
.elementor-field-group input, .elementor-field-group textarea {
  background: #212227; border: 1px solid #3A3A3D; color: #fff; border-radius: 4px; padding: 12px 14px;
  font-family: var(--ss-font-body); font-size: 1rem; text-transform: none; letter-spacing: normal;
  width: 100%;
}
.ss-form input:focus, .ss-form textarea:focus,
.elementor-field-group input:focus, .elementor-field-group textarea:focus { border-color: var(--ss-accent); outline: none; }
.ss-form-submit { align-self: flex-start; border: 0; cursor: pointer; }
.ss-form-note { font-size: .84rem; color: var(--ss-text-muted); margin: 4px 0 0; }
@media (max-width: 767px) { .ss-form-row { grid-template-columns: 1fr; } }

/* ================================================= MOTION / ENTRANCE (G5) */
@keyframes ss-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ss-grid .ss-gcard { opacity: 0; animation: ss-fade-up .6s var(--ss-ease) forwards; }
.ss-grid .ss-gcard:nth-child(1) { animation-delay: .00s; }
.ss-grid .ss-gcard:nth-child(2) { animation-delay: .08s; }
.ss-grid .ss-gcard:nth-child(3) { animation-delay: .16s; }
.ss-grid .ss-gcard:nth-child(4) { animation-delay: .24s; }
.ss-grid .ss-gcard:nth-child(5) { animation-delay: .32s; }
.ss-grid .ss-gcard:nth-child(n+6) { animation-delay: .40s; }
.ss-card { opacity: 0; animation: ss-fade-up .6s var(--ss-ease) .05s forwards; }

/* Container helper mirroring the kit's max width. */
.ss-container { max-width: var(--ss-container); margin-inline: auto; padding-inline: var(--sp-5); }
.ss-section { padding-block: var(--ss-section-y); }

/* ===================================================== MOBILE (M1 · 390px) */
@media (max-width: 767px) {
  .ss-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .ss-grid--stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ss-check--2 { grid-template-columns: 1fr; }
  .elementor-section:has(.ss-mark.ss-hero) .ss-hgold .elementor-heading-title,
  .elementor-section:has(.ss-mark.ss-hero) h1 { font-size: 1.875rem; line-height: 1.15; }
  .ss-splitphoto { min-height: 220px; }
  h2 { font-size: 1.8rem; }
  .elementor-column, .ss-card { padding-left: 24px !important; padding-right: 24px !important; }
  /* R10 G4: stacked pre-footer CTA buttons keep a uniform 16px gap at ≤767px (was reading
     tight against the 24px content rhythm) for touch-target separation. */
  .ss-cta-row { flex-direction: column; gap: 16px; }
  .ss-cta-btn { width: 100%; }
}
@media (max-width: 479px) {
  .ss-grid, .ss-grid--stats { grid-template-columns: 1fr 1fr; }
  .ss-grid--micro { grid-template-columns: 1fr 1fr; }
}

/* WCAG 2.2: honor reduced-motion — kill transforms/animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ss-grid .ss-gcard, .ss-card { opacity: 1 !important; animation: none !important; }
}

/* ================================================================================
   ROUND 3 — HOMEPAGE CINEMATIC ELEVATION (GEMINI-REVIEW-R3-HOME.md + Fable triage)
   Scope: homepage; shared components (badges/buttons) improve site-wide. Every motion
   is gated behind prefers-reduced-motion: no-preference; every hidden-until-revealed
   state is gated behind the JS-added `.ss-js` root class, so no-JS + reduced-motion
   render fully visible. Payload: CSS + 1 SVG + ~1KB JS.
   ================================================================================ */

/* D1 · Hero anamorphic haze + vignette — static lens overlay over the photo (no motion). */
.elementor-section:has(.ss-mark.ss-hero) > .elementor-container { z-index: 2; }
.elementor-section:has(.ss-mark.ss-hero)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(18,18,18,0) 0%, rgba(12,12,13,0.55) 72%, rgba(11,11,12,0.92) 100%),
    linear-gradient(180deg, rgba(255,210,0,0) 49.5%, rgba(255,210,0,0.05) 50%, rgba(255,210,0,0) 50.5%);
  mix-blend-mode: multiply;
}

/* D2 · Slow-bleed Ken Burns push — imperceptible drone-creep on the hero photo.
   The push drifts POSITION, never SIZE (D-064). The original `auto 104%→116%` scaled the photo by
   HEIGHT, so any photograph flatter than its box stopped covering horizontally and letterboxed —
   17 of 20 pages at 1440, worst 490px of bare section fill on smart-communities. The requirement
   depends on the BOX (1.80:1 core heroes / 2.06:1 family heroes), so no per-image aspect rule can
   hold it and re-cropping cannot fix it. `background-size: cover` above is left untouched and
   covers by definition at every box and image aspect, so drifting the POSITION cannot uncover the
   box by construction: whichever axis cover leaves slack in drifts, the other clamps silently.
   Still one animation on one element, so the reduced-motion guard here and D-061's motioncheck
   sweep govern it exactly as before. Gated by scripts/screenshots/herofit.js.

   D-069 · the push drifts BOTH AXES, and that is what makes the sentence above true. D-065 wrote
   `50% 44%` → `50% 56%`: vertical only. Under `cover` a percentage position resolves to
   (box - painted) x pct, so an axis with NO slack resolves every percentage to the same 0px —
   and `cover` leaves slack on exactly ONE axis. An image proportionally WIDER than its box has
   all its slack horizontally, so a vertical-only drift displaced nothing: measured at 44 of 60
   page/width combinations, including every hero at 390 and 768 (where the box is portrait, so
   every photograph is "wider"), and confirmed by photographing both keyframes — 43 byte-identical
   pairs. Drifting X and Y together costs nothing and cannot letterbox (position never changes the
   painted SIZE), so whichever axis actually carries the overflow is the one that moves.
   Gated by scripts/screenshots/panfit.js, which reports displacement in PIXELS. */
@media (prefers-reduced-motion: no-preference) {
  .elementor-section:has(.ss-mark.ss-herobg) {
    animation: ss-kenburns 75s ease-in-out infinite alternate;
    will-change: background-position;
  }
}
@keyframes ss-kenburns {
  from { background-position: 44% 44%; }
  to   { background-position: 56% 56%; }
}

/* D3 · Tactical telemetry frames — stats drop the ribbon for thin lines + amber brackets. */
.ss-grid--stats { gap: 14px; margin-top: 40px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.ss-grid--stats .ss-gcard {
  position: relative; text-align: center;
  background: rgba(18,18,18,0.40); border: 1px solid rgba(255,255,255,0.06); border-radius: 0;
  padding: 30px 20px;
}
.ss-grid--stats .ss-gcard:first-child { border-left: 1px solid rgba(255,255,255,0.06); }
.ss-grid--stats .ss-gcard::before,
.ss-grid--stats .ss-gcard::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border-color: var(--ss-accent); border-style: solid;
}
.ss-grid--stats .ss-gcard::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.ss-grid--stats .ss-gcard::after  { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }

/* D4 · Scanline hover pulse — glassmorphism + CRT sweep on the Three Pillars cards. */
.ss-grid--pillars .ss-gcard { position: relative; overflow: hidden; }
.ss-grid--pillars .ss-gcard:hover { background: rgba(18,18,18,0.60); box-shadow: 0 0 30px rgba(255,210,0,0.06); }
@media (prefers-reduced-motion: no-preference) {
  .ss-grid--pillars .ss-gcard:hover::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(255,210,0,0.35), transparent);
    animation: ss-scan 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
}
@keyframes ss-scan {
  0%   { top: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* D5 · Staggered reticle reveal — industries sweep in; JS-gated, fails visible. */
@media (prefers-reduced-motion: no-preference) {
  .ss-js .ss-grid--micro.ss-reveal .ss-gcard {
    opacity: 0; transform: translateY(16px); animation: none;
    transition: opacity .7s cubic-bezier(0.25, 1, 0.5, 1), transform .7s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard { opacity: 1; transform: none; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(1)  { transition-delay: .000s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(2)  { transition-delay: .045s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(3)  { transition-delay: .090s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(4)  { transition-delay: .135s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(5)  { transition-delay: .180s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(6)  { transition-delay: .225s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(7)  { transition-delay: .270s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(8)  { transition-delay: .315s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(9)  { transition-delay: .360s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(10) { transition-delay: .405s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(11) { transition-delay: .450s; }
  .ss-js .ss-grid--micro.ss-reveal.ss-in .ss-gcard:nth-child(12) { transition-delay: .495s; }
}

/* D6 · Numeric contrast anchors — outcome index digits as huge low-opacity structure. */
.ss-grid--matrix .ss-gcard { position: relative; overflow: hidden; padding-top: 44px; border-color: rgba(255,255,255,0.05); background: rgba(30,31,36,0.5); }
.ss-grid--matrix .ss-gcard-num {
  position: absolute; top: 8px; right: 14px; margin: 0;
  font-family: var(--ss-font-head); font-size: 3.4rem; font-weight: 900; line-height: 1;
  color: rgba(255,210,0,0.05); letter-spacing: 0;
  transition: color .4s cubic-bezier(0.16, 1, 0.3, 1), transform .4s ease;
}
.ss-grid--matrix .ss-gcard:hover .ss-gcard-num { color: rgba(255,210,0,0.14); transform: scale(1.05); }

/* D7 · Tactical world map + transceiver pulses — Global Offices command footprint. */
.elementor-section:has(.ss-mark.ss-office) { position: relative; overflow: hidden; }
.elementor-section:has(.ss-mark.ss-office) > .elementor-container { position: relative; z-index: 1; }
.elementor-section:has(.ss-mark.ss-office)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/world-grid.svg") center center / cover no-repeat;
  opacity: 0.14;
}
.ss-grid--office .ss-gcard-ico { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ss-grid--office .ss-gcard-ico::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px;
    border: 1px solid var(--ss-accent); border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%);
    animation: ss-ping 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  }
}
@keyframes ss-ping {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* D8 · Monolithic steel-plate badges — decorative plate darkens; text stays AA at rest. */
.ss-grid--badges .ss-gcard {
  position: relative; overflow: hidden;
  background: #17181B; border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.8);
  transition: transform .5s cubic-bezier(0.25, 1, 0.5, 1), border-color .5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow .5s cubic-bezier(0.25, 1, 0.5, 1);
}
.ss-grid--badges .ss-gcard-t { color: #E7E7EA; } /* AA floor — compliance text never dimmed */
.ss-grid--badges .ss-gcard::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ss-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ss-grid--badges .ss-gcard:hover {
  transform: translateY(-2px); border-color: rgba(255,210,0,0.35);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.4), 0 6px 22px rgba(255,210,0,0.05);
}
.ss-grid--badges .ss-gcard:hover::after { transform: scaleX(1); }

/* D9 · Deep shadow-fall CTA + tracking reveal — a beat of darkness before the final shot. */
.elementor-section:has(.ss-mark.ss-cta-final) {
  background: linear-gradient(to bottom, #000 0%, #0d0d0d 38%, #17181C 100%) !important;
  padding-top: 140px !important;
}
.ss-cta-heading .elementor-heading-title {
  letter-spacing: 0.02em;
  transition: letter-spacing 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .ss-js .ss-cta-heading.ss-reveal .elementor-heading-title { letter-spacing: 0.02em; }
  .ss-js .ss-cta-heading.ss-reveal.ss-in .elementor-heading-title { letter-spacing: 0.09em; }
}

/* REMOVAL 3 · De-spring buttons — no bounce/lift; slow glow with the cinematic ease. */
.elementor-button, .ss-btn-el .elementor-button, .ss-cta-btn {
  transition: background-color .45s cubic-bezier(0.16, 1, 0.3, 1), color .45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .45s cubic-bezier(0.16, 1, 0.3, 1), border-color .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.elementor-button:hover, .ss-btn-el .elementor-button:hover,
.ss-cta-btn--primary:hover { transform: none; box-shadow: 0 0 28px rgba(255,210,0,0.16); }
.ss-cta-btn--ghost:hover, .ss-btn-ghost .elementor-button:hover { transform: none; }

/* R3 reduced-motion / no-JS fail-safes: every hidden-until-revealed state renders visible. */
@media (prefers-reduced-motion: reduce) {
  .ss-grid--micro.ss-reveal .ss-gcard { opacity: 1 !important; transform: none !important; }
  .ss-cta-heading .elementor-heading-title { letter-spacing: 0.02em !important; }
}

/* R3 mobile: shrink the outcome index anchors so they never crowd the card title. */
@media (max-width: 767px) {
  .ss-grid--matrix .ss-gcard-num { font-size: 2.4rem; top: 6px; right: 10px; }
  .ss-grid--stats .ss-gcard { padding: 22px 14px; }
}

/* R4 nit-2 · Seam-free CTA handoff: the preceding section fades to black behind its content
   so the D9 shadow-fall (#000 start) takes over without a visible step. */
.elementor-section:has(+ .elementor-section .ss-mark.ss-cta-final) { position: relative; }
.elementor-section:has(+ .elementor-section .ss-mark.ss-cta-final) > .elementor-container { position: relative; z-index: 1; }
.elementor-section:has(+ .elementor-section .ss-mark.ss-cta-final)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
  pointer-events: none; z-index: 0;
}

/* ================================================================================
   ROUND 5 — INDUSTRIES SECTION ELEVATION (GEMINI-REVIEW-R5-INDUSTRIES.md + Fable triage)
   Scope: homepage "Industries We Serve" only. Copy locked. Motion inherits the R3 reveal
   (behind prefers-reduced-motion + .ss-js). Payload: CSS only (+ 12 self-drawn inline glyphs
   shipped in the builder, D-018). Card anatomy is a CSS grid so the badge (top-left), index
   (top-right) and label (bottom) anchor cleanly regardless of the num->icon->title source order.
   ================================================================================ */

/* D5 · Split section header: eyebrow+headline left, factual [ 12 SECTORS ] tag right. */
.ss-sechead {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px 28px; flex-wrap: wrap; margin-bottom: 44px;
}
.ss-sechead-l { min-width: 0; }
.ss-sechead-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; }
.ss-sechead-eyebrow::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto;
  background: var(--ss-accent); display: inline-block;
}
.ss-sechead-title {
  font-family: var(--ss-font-head); font-weight: 700;
  font-size: 2.375rem; line-height: 1.16; color: var(--ss-accent);
  margin: .5rem 0 0;
}
.ss-sechead-tag {
  flex: 0 0 auto; align-self: flex-end;
  font-family: var(--ss-font-body); font-size: 10px; letter-spacing: 0.15em;
  color: #A8B3C4; border: 1px solid rgba(255,210,0,0.25);
  padding: 6px 14px; border-radius: 2px; white-space: nowrap; text-transform: uppercase;
}

/* D6 · Band depth: near-black fill, gold hairline top/bottom dividers, centred radial wash.
   Dot matrix is the reused ss-dots utility (its ::before); the wash is a separate ::after so
   both coexist. Section classes are stripped on this build, so we key off the builder's marker
   widget (.ss-mark.ss-ind), matching the site-wide :has() pattern. */
.elementor-section:has(.ss-mark.ss-ind) {
  position: relative; overflow: hidden; background: #0F1012;
  border-top: 1px solid rgba(255,210,0,0.12);
  border-bottom: 1px solid rgba(255,210,0,0.12);
}
.elementor-section:has(.ss-mark.ss-ind) > .elementor-container { position: relative; z-index: 1; }
.elementor-section:has(.ss-mark.ss-ind)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255,210,0,0.035) 0%, transparent 100%);
}

/* D2 · Grid restructuring — 4x3 INSIDE the existing 1200px container (triage: do not touch the
   site-wide container width). Container-edge gold hairlines ground the wide margins. Desktop 4 /
   tablet 3 / mobile 2 (the 767px + 479px rules above already drop .ss-grid to 2). */
.ss-grid--sectors {
  border-left: 1px solid rgba(255,210,0,0.08);
  border-right: 1px solid rgba(255,210,0,0.08);
  padding: 6px 22px; gap: 16px;
}
@media (min-width: 1025px) { .ss-grid--sectors { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 768px) and (max-width: 1024px) { .ss-grid--sectors { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* D3+D4 · Micro-card anatomy + faceted surface + corner notches.
   Grid: row 1 = badge (left) / index (right); row 2 = label (bottom). */
.ss-grid--sectors .ss-gcard {
  position: relative; min-height: 136px; padding: 20px; overflow: visible;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr;
  background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(25,26,29,0.6) 100%);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
}
.ss-grid--sectors .ss-gcard-ico {
  grid-column: 1; grid-row: 1; margin: 0;
  width: 40px; height: 40px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,210,0,0.04); border: 1px solid rgba(255,210,0,0.2);
  color: var(--ss-accent);
}
.ss-grid--sectors .ss-gcard-ico .ss-ico { width: 20px; height: 20px; stroke-width: 1.75px; }
.ss-grid--sectors .ss-gcard-num {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin: 0;
  font-family: var(--ss-font-head); font-size: 11px; font-weight: 700;
  /* D-039: was rgba(255,210,0,0.35) = a MEASURED 2.54:1 on this card's own gradient —
     visible 11px text, well under the 4.5:1 floor, and invisible to a token-pair check
     because no pair ever modelled gold-at-alpha. 0.65 measures 5.5-6.0:1 on every
     surface the system puts it on, and stays subordinate to the 12px label below it. */
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,210,0,0.65);
}
.ss-grid--sectors .ss-gcard-t {
  grid-column: 1 / -1; grid-row: 2; align-self: end; margin: 0;
  font-family: var(--ss-font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; line-height: 1.35; text-transform: uppercase; color: #D6DCE5;
}
.ss-grid--sectors .ss-gcard::before,
.ss-grid--sectors .ss-gcard::after {
  content: ""; position: absolute; width: 4px; height: 4px;
  border-color: var(--ss-accent); border-style: solid; opacity: 0.3; pointer-events: none;
  transition: opacity .3s var(--ss-ease);
}
.ss-grid--sectors .ss-gcard::before { top: 6px;    left: 6px;  border-width: 1px 0 0 1px; }
.ss-grid--sectors .ss-gcard::after  { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.ss-grid--sectors .ss-gcard:hover { border-color: rgba(255,210,0,0.35); }
.ss-grid--sectors .ss-gcard:hover::before,
.ss-grid--sectors .ss-gcard:hover::after { opacity: 0.7; }

/* R5 mobile: split header stacks; tag drops under the headline; cards relax the min-height. */
@media (max-width: 767px) {
  .ss-sechead { align-items: flex-start; margin-bottom: 30px; }
  .ss-sechead-tag { align-self: flex-start; }
  .ss-sechead-title { font-size: 1.7rem; }
  .ss-grid--sectors { padding: 4px 12px; grid-auto-rows: 1fr; }
  /* R5-fix (Gemini F2): equal row tracks so a 3-line label (e.g. 10 Residential &
     Smart Communities) stretches every card in its row alike, keeping row rhythm uniform. */
  .ss-grid--sectors .ss-gcard { min-height: 120px; padding: 16px; }
}

/* ================================================================================
   ROUND 6 — GRAPHITE-GREY SYSTEM (BOARD-R6-GRAPHITE.md, D-019)
   Canvas/surfaces/type retuned in place above (ramp #131417→#1B1C20, surfaces #1E1F24,
   body #D6DCE5, secondary #A8B3C4). This block adds board directive 5: ~3% monochrome
   film grain on the gold radial washes + hero vignette. The grain is a self-generated
   SVG feTurbulence tile (data-URI below — authored in-repo, no external asset, license-
   free; logged in DECISIONS D-019). It is STATIC (never animated), so it renders
   identically under prefers-reduced-motion.
   ================================================================================ */
:root {
  /* 140px tiling fractal-noise tile, white, alpha baked to ~4% peak (~3% perceived). */
  --ss-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Grain layer 1 · section gold glow washes (ss-glow ::after). The grain + a FLAT gold
   tint are shaped together by a radial mask replicating the original 62% falloff — the
   grain must never tile to the 640px box edge or the box reads as a hard-edged column
   on the lifted graphite canvas (caught in the R6 review pass). */
.elementor-section:has(.ss-mark.ss-glow)::after {
  background:
    var(--ss-grain) left top / 140px 140px repeat,
    linear-gradient(rgba(255,210,0,0.10), rgba(255,210,0,0.10));
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
          mask-image: radial-gradient(circle, #000 0%, transparent 62%);
}

/* Grain layer 2 · hero anamorphic vignette (R3 D1 ::after — grain rides the lens overlay).
   The bottom ~90px of this multiply overlay is masked out so the hero can seat onto the
   lifted graphite canvas (seam fix, D-017 precedent); side/top vignette edges still floor
   near-black per board directive 2. */
.elementor-section:has(.ss-mark.ss-hero)::after {
  background:
    var(--ss-grain) left top / 140px 140px repeat,
    radial-gradient(circle at center, rgba(18,18,18,0) 0%, rgba(12,12,13,0.55) 72%, rgba(11,11,12,0.92) 100%),
    linear-gradient(180deg, rgba(255,210,0,0) 49.5%, rgba(255,210,0,0.05) 50%, rgba(255,210,0,0) 50.5%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
}

/* Hero photo scrim: bottom stop eases into graphite so the hero's floor hands off to the
   lifted canvas without a crisp tonal step (flagged on About/Contact in the R6 review). */
.elementor-section:has(.ss-mark.ss-herobg)::before {
  background: linear-gradient(180deg, rgba(11,11,12,0.86) 0%, rgba(11,11,12,0.70) 52%, rgba(11,11,12,0.92) 86%, rgba(19,20,23,0.97) 100%);
}

/* Grain layer 3 · Industries band radial wash (R5 D6 ::after). */
.elementor-section:has(.ss-mark.ss-ind)::after {
  background-image:
    var(--ss-grain),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255,210,0,0.035) 0%, transparent 100%);
  background-size: 140px 140px, auto;
  background-repeat: repeat, no-repeat;
}

/* ================================================================================
   ROUND 7 — SOLUTIONS SPLIT: PUBLIC / PRIVATE SECTOR (DIRECTIVES-R7-SOLUTIONS-SPLIT.md)
   New primitives, all reusing the R5/R6 system: hub split panels (ss-hubpanel), the
   dual-anchor card head on family cards (ss-cardkick), and full-bleed atmosphere bands
   (ss-band). New imagery is attribution-free (PD/CC0 — see imagery-manifest R7 block),
   duotone-treated, and shipped inside this theme. No JS; hover motion dies under the
   global prefers-reduced-motion rule; everything renders fully visible without CSS.
   ================================================================================ */

/* R7 imagery bindings (theme-relative; files ship in assets/img/). */
.elementor-section:has(.ss-mark.ss-herobg--civic-gov)  { background-image: url("../img/civic-gov.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--enterprise) { background-image: url("../img/enterprise.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--unmanned)   { background-image: url("../img/unmanned.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--guarding)   { background-image: url("../img/guarding.jpg"); }
.ss-img--civic-gov  { background-image: url("../img/civic-gov.jpg"); }
.ss-img--enterprise { background-image: url("../img/enterprise.jpg"); }

/* Atmosphere band: a short full-bleed image section with no copy, used as a breather
   between family card rows ("pictures aid scanning", R7 §2). The default herobg scrim is
   built for headline legibility and would bury the photo — the band carries no text, so
   it runs a lighter center with graphite-seated edges (no hard tonal seam, D-017/D-019). */
.elementor-section:has(.ss-mark.ss-band)::before {
  background: linear-gradient(180deg, rgba(19,20,23,0.92) 0%, rgba(11,11,12,0.38) 38%, rgba(11,11,12,0.38) 62%, rgba(19,20,23,0.92) 100%);
}
/* The R3 Ken Burns push keyframes background-size as `auto 104%→116%` — sized against a
   tall hero that always overfills the width. On a short 32vh band the same math yields a
   ~550px letterboxed image (caught in the R7 screenshot pass), so bands opt out of the
   push and keep the generic herobg cover. */
.elementor-section:has(.ss-mark.ss-band) { animation: none; will-change: auto; }

/* The hidden ss-mark marker is display:none, but its Elementor WIDGET WRAPPER still
   carried the default widget bottom margin — nudging the first column of every
   multi-column section ~20px below its siblings (visible on the R7 hub panels; latent on
   earlier card rows). Hide the wrapper itself; :has() section styling matches regardless
   of display, so every marker-driven treatment is unaffected. */
.elementor-widget:has(> .elementor-widget-container > .ss-mark),
.elementor-widget:has(> .ss-mark) { display: none; }

/* Dual-anchor card head (R5 sectors anatomy carried onto the Solutions family cards):
   faceted glyph chip left — corner-notched like the Industries grid — gold index right. */
.ss-cardkick { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ss-cardkick-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--ss-accent);
  background: #17181B; border: 1px solid var(--ss-border); border-radius: 4px;
}
.ss-cardkick-chip .ss-ico { width: 22px; height: 22px; }
.ss-cardkick-chip::before, .ss-cardkick-chip::after {
  content: ""; position: absolute; width: 4px; height: 4px;
  border-color: var(--ss-accent); border-style: solid; opacity: 0.35; pointer-events: none;
}
.ss-cardkick-chip::before { top: 3px;    left: 3px;  border-width: 1px 0 0 1px; }
.ss-cardkick-chip::after  { bottom: 3px; right: 3px; border-width: 0 1px 1px 0; }
.ss-cardkick-num {
  /* Gemini R7 · F5: 0.82rem (measured 13.12px) → 0.8125rem (13px), the accepted target, so
     the top-right index sits below the card head in hierarchy. ALPHA STAYS 0.65 (the D-039
     measured-AA fix is non-negotiable — Fable triage): size-only change. */
  font-family: var(--ss-font-head); font-size: 0.8125rem; font-weight: 700;
  /* D-039: was 0.45 = a MEASURED 3.35:1 on --ss-surface, across all 39 index numerals on
     the two R7 Solutions children. Same gold-at-alpha blind spot as the sector index. */
  letter-spacing: 0.1em; color: rgba(255,210,0,0.65);
}
.ss-card:hover .ss-cardkick-num { color: var(--ss-accent); }

/* Hub split panel: one anchor per sector; treated photo painted from the theme via the
   ss-img-- layer, graphite scrim keeps the verbatim intro copy at AA, gold frame + arrow
   answer on hover. Fail-visible: no hidden states, works with no JS and no motion. */
.ss-hubpanel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; padding: 32px 28px; overflow: hidden;
  border: 1px solid var(--ss-border); border-radius: 8px; background: #17181B;
  text-decoration: none; transition: border-color .3s var(--ss-ease), transform .3s var(--ss-ease), box-shadow .3s var(--ss-ease);
}
.ss-hubpanel-img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  transition: transform .6s var(--ss-ease);
}
.ss-hubpanel-img::before {
  content: ""; position: absolute; inset: 0;
  /* D-039: the 46% stop was 0.62. r6-contrast.py models this scrim's output as a flat
     "#303033 worst-case composite"; MEASURED, the eyebrow at 390 lands on #5d5e61 over a
     photo highlight — 4.47:1, a hair under the 4.5 floor. The modelled worst case was
     simply wrong, which is the whole argument for measuring. 0.72 puts the same pixel
     near 5.5:1 with the panel's photographic read intact. */
  background: linear-gradient(180deg, rgba(11,11,12,0.30) 0%, rgba(11,11,12,0.72) 46%, rgba(13,13,15,0.94) 100%);
}
.ss-hubpanel-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.ss-hubpanel-eye { margin-bottom: 0; }
.ss-hubpanel-t {
  font-family: var(--ss-font-head); font-size: 1.55rem; font-weight: 700; line-height: 1.2;
  color: #FFFFFF;
}
.ss-hubpanel-x { font-size: 0.95rem; line-height: 1.6; color: #D6DCE5; max-width: 46ch; }
.ss-hubpanel-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
  font-family: var(--ss-font-head); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ss-accent);
}
.ss-hubpanel-arrow { transition: transform .3s var(--ss-ease); }
.ss-hubpanel-tag {
  position: absolute; top: 20px; right: 20px; z-index: 1;
  font-family: var(--ss-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-accent);
  /* Full-opacity gold on a deep chip: ≥8:1 even over the brightest duotone highlight
     (the R5-style faded-gold treatment fell to ~1.9:1 there — AA re-verify, R7 §5). */
  background: rgba(11,11,12,0.78); padding: 6px 10px; border-radius: 3px;
}
.ss-hubpanel:hover { border-color: var(--ss-accent); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,210,0,0.25); }
.ss-hubpanel:hover .ss-hubpanel-img { transform: scale(1.04); }
.ss-hubpanel:hover .ss-hubpanel-arrow { transform: translateX(4px); }
.ss-hubpanel:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 3px; border-color: var(--ss-accent); }

/* R7 · Solutions submenu. Hello Elementor renders nested menu ULs but ships NO sub-menu
   CSS (verified against hello-elementor 3.4.9 header-footer.css), so without this the
   child items print inline in the header bar. Graphite glass panel matching the sticky
   header; opens on hover AND :focus-within so keyboard users can reach the children
   (WCAG 2.1.1); the global prefers-reduced-motion rule makes the reveal instant. */
.site-navigation .menu > li.menu-item-has-children { position: relative; }
.site-navigation .menu .sub-menu {
  position: absolute; top: 100%; left: -18px; z-index: 1000; min-width: 230px;
  visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .22s var(--ss-ease), transform .22s var(--ss-ease), visibility .22s;
  margin: 0; padding: 10px 0; list-style: none;
  background: rgba(19,20,23,0.96); border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--ss-accent); border-radius: 0 0 6px 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.site-navigation .menu li:hover > .sub-menu,
.site-navigation .menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; }
.site-navigation .menu .sub-menu li { display: block; margin: 0; }
.site-navigation .menu .sub-menu a { display: block; padding: 9px 18px; font-size: .8rem; }
.site-navigation .menu .sub-menu a::after { display: none; } /* gold underline stays a top-level affordance */
.site-navigation .menu .sub-menu a:hover,
.site-navigation .menu .sub-menu a:focus-visible { color: var(--ss-accent); background: rgba(255,210,0,0.06); }
/* Hello mobile dropdown nav: children stay in flow, quietly indented under Solutions. */
.site-navigation-dropdown .sub-menu { list-style: none; margin: 0; padding-left: 18px; }

/* R7 mobile: hub panels stack with a shorter stage; bands compress; chip row tightens. */
@media (max-width: 767px) {
  .ss-hubpanel { min-height: 360px; padding: 24px 18px; }
  .ss-hubpanel-t { font-size: 1.3rem; }
  .ss-hubpanel-tag { top: 14px; right: 14px; }
  .elementor-section:has(.ss-mark.ss-band) { min-height: 180px !important; }
}

/* ================================================================================
   GEMINI R7 AUDIT FIXES (GEMINI-AUDIT-R7.md — Grade A-, SHIP AFTER FIXES; all 5
   ACCEPTED by the Fable meta-triage). F4 (CTA min-width) + F5 (numeral size) live in
   place above; F1/F2/F3 below. All CSS-only in this theme — no page JSON changes, so
   the kit ZIP stays byte-identical and only the child theme re-exports. Scoping is
   MEASURED, not guessed: the numbers came from a live puppeteer read of :8091.
   ================================================================================ */

/* F1 · family-card title wrap. MEASURED: the family-card <h3> renders at 39.056px
   (2.441rem) on 3-col desktop, and only the longest — "Operations, Maintenance &
   Logistics" — spills to 3 lines (all others 1-2). Gemini's illustrative "1.5→1.35rem"
   under-read the true size, and letter-spacing alone (already -0.01em) does NOT drop the
   line count. So on desktop, scope ONLY the Solutions family cards (a column carrying a
   .ss-cardkick) to a tighter head that locks the longest title to 2 lines; the short
   titles stay single-line. text-wrap:balance evens the two lines. */
@media (min-width: 1025px) {
  .elementor-column:has(.ss-cardkick) .elementor-heading-title {
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
}

/* F2 · mobile Guarding panel sub-section spacing. On <=640px the "Guarding Capabilities"
   sub-heading stacks tight under the "Sectors We Protect" checklist, making one dense
   block. It is the only h4 heading widget that immediately FOLLOWS an iconlist
   (.ss-check) inside a family card, so the adjacency targets it precisely — "Sectors We
   Protect" (which follows the card title, not a list) is untouched. */
@media (max-width: 640px) {
  .elementor-column:has(.ss-cardkick) .elementor-widget:has(.ss-check) + .elementor-widget:has(h4) {
    margin-top: 2rem;
  }
}

/* F3 · active-parent nav highlight, no JS. WordPress already stamps the top-level <li>
   with .current-menu-parent / .current-menu-ancestor on /solutions/* child routes (and
   .current-menu-item on the page itself) — verified live on :8091. Surface it with the
   same gold affordance the hover state uses: gold label + the persistent 2px underline
   (::after forced to full width). Direct-child (> li >) scoping keeps this to the top bar;
   sub-menu items already suppress ::after, so children are unaffected. */
.site-header nav > .menu > li.current-menu-item > a,
.site-header nav > .menu > li.current-menu-parent > a,
.site-header nav > .menu > li.current-menu-ancestor > a,
.site-header .menu > li.current-menu-item > a,
.site-header .menu > li.current-menu-parent > a,
.site-header .menu > li.current-menu-ancestor > a,
#site-navigation .menu > li.current-menu-item > a,
#site-navigation .menu > li.current-menu-parent > a,
#site-navigation .menu > li.current-menu-ancestor > a { color: var(--ss-accent); }
.site-header .menu > li.current-menu-item > a::after,
.site-header .menu > li.current-menu-parent > a::after,
.site-header .menu > li.current-menu-ancestor > a::after,
#site-navigation .menu > li.current-menu-item > a::after,
#site-navigation .menu > li.current-menu-parent > a::after,
#site-navigation .menu > li.current-menu-ancestor > a::after { width: 100%; }

/* R9 · Breathing room (client request): the header brand sat 10px off the glass edge below
   1025px and tablet content hugged at ~17px. Header gets 20px side padding; the tablet range
   gets 24px container side padding (mobile columns/cards raised 16->24 in the M1 block). */
@media (max-width: 1024px) {
  .site-header .header-inner { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-section-boxed > .elementor-container { padding-left: 24px; padding-right: 24px; }
}

/* R9b: hub panel eyebrow AA — the 24px mobile padding rewrap moved ~7% of the eyebrow ink
   onto a brighter patch of the panel imagery (measured 3.96:1). A tight dark text-shadow
   plate restores AA against the real backdrop without re-grading the panel images. */
.ss-hubpanel-eye, .ss-eyebrow.ss-hubpanel-eye {
  text-shadow: 0 1px 10px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,0.9), 0 0 18px rgba(0,0,0,0.85);
}

/* R10 G1: the R9b solid chip read as a heavy plate against the cinematic panel imagery.
   Replace it with a translucent floating pill (frosted-glass language) — the blur keeps the
   backdrop ink-dark enough for AA while letting the photo breathe through. The text-shadow
   plate above stays as a second AA guarantor. HARD GATE: measured contrastcheck must be
   0 FAIL on every page using this class; if the pill ever fails AA, darken the alpha until
   it passes (do not ship a failing pill). */
.ss-eyebrow.ss-hubpanel-eye {
  display: inline-block;
  /* D-070: `inline-block` alone is INERT here and shipped that way through the R10 audit.
     `.ss-hubpanel-body` is a column flex container, so this span is a flex item: `display`
     is blockified to `block`, and the default `align-items: stretch` sizes it to the full
     panel width — a full-width bar wearing pill CSS, which is exactly what the Gemini R10
     auditor saw at 390. `align-self` opts this item out of that stretch so the flex
     algorithm sizes it by its content instead. MEASURED by pillfit.js: 6/6 STRETCHED
     before (box == container at all three widths, 359px of dead plate at 1440), 6/6
     SHRINKWRAPPED after, slack 0px. `display: inline-block` is kept, not replaced: it is
     what makes the pill hug its text if this element is ever moved out of a flex parent. */
  align-self: flex-start;
  background: rgba(16, 20, 26, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 3px;
}

/* ================================================================================
   D-057 — MISSING HERO BINDINGS (R8 `advisory` + the whole R10 §C batch)
   ================================================================================
   `import-pages.php` discards the author's `bg.url` on purpose (Elementor's kit export
   swaps raw-URL backgrounds for placeholder.png on a clean machine) and emits only a
   `.ss-mark.ss-herobg--<slug>` marker widget; the photograph is layered from here. That
   third line is hand-written, in this file, and for seven slugs it was never written —
   six of them the entire R10 §C batch (sourced, licence-verified, duotone-treated,
   shipped, and painted by nothing) plus `advisory`, dark since R8. Those sections
   rendered as the flat #0B0B0C fallback fill.
   Same idiom as the R7 bindings at lines 785-789. `imagery-binding-audit.py` (D-057)
   now FAILs if a declared photograph ever loses its rule again. */
.elementor-section:has(.ss-mark.ss-herobg--land-systems)        { background-image: url("../img/land-systems.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--law-enforcement)     { background-image: url("../img/law-enforcement.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--digital-gov)         { background-image: url("../img/digital-gov.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--smart-communities)   { background-image: url("../img/smart-communities.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--enterprise-security) { background-image: url("../img/enterprise-security.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--guarding-services)   { background-image: url("../img/guarding-services.jpg"); }
.elementor-section:has(.ss-mark.ss-herobg--advisory)            { background-image: url("../img/advisory.jpg"); }

/* D-055 height compensation — REQUIRED alongside the functions.php <main> wrapper.
   The parent theme holds short pages open with `.site-header + .elementor { min-height:
   calc(100vh - 320px) }`. Wrapping Elementor's content in <main id="content"> makes <main>, not
   `.elementor`, the header's adjacent sibling, so that rule stops matching and a short page would
   collapse — changing its rendered height and failing shotcheck [E] for the wrong reason.
   Re-anchor the same value through the new wrapper. All 38 child combinators in this file are
   anchored to `.elementor-*` classes and none descends from `body`, so nothing else here is
   affected by the extra element (checked, not assumed). */
.site-header + #content > .elementor { min-height: calc(100vh - 320px); }

/* R11 · related-card breathing room (client request 2026-08-02): every related-family box
   gets comfortable inner side padding, pinned to the pillar-card norm instead of whatever
   the column carried. Mobile (<=767) keeps the R9 24px rule via the existing column rule. */
@media (min-width: 768px) {
  .elementor-column:has(.ss-cardkick) { padding: 28px 36px !important; }
}

/* R11b · every-box extension (client screenshot #2, sector family card): ALL .ss-card boxes
   get the 36px side norm at >=768 — the 24px instances gain breathing room, the 36px
   instances are unchanged. Vertical padding stays per-card (varies by design). */
@media (min-width: 768px) {
  .ss-card { padding-left: 36px !important; padding-right: 36px !important; }
}

/* R12 · padding inside the bordered box (client screenshot 2026-08-02; measured with
   boxfit). The card border+background paint on .elementor-widget-wrap; R11/R11b put the
   padding on the COLUMN outside it, so text sat 1px from the outline. The padding belongs
   on the wrap. The column-level padding is zeroed so the cards regain their width. */
@media (min-width: 768px) {
  .elementor-column:has(.ss-cardkick) { padding: 0 !important; }
  .elementor-column:has(.ss-cardkick) > .elementor-widget-wrap { padding: 28px 36px !important; }
}
@media (max-width: 767px) {
  .elementor-column:has(.ss-cardkick) { padding: 0 !important; }
  .elementor-column:has(.ss-cardkick) > .elementor-widget-wrap { padding: 20px 24px !important; }
}

/* R12b · badge wall tablet columns (boxfit catch: UN Peacekeeping chip at 8px insets @768).
   Six tracks at tablet width leave the longest label ~8px from its outline; three tracks
   give every chip real room. Desktop and mobile keep their proven layouts. */
@media (min-width: 768px) and (max-width: 1024px) {
  .ss-grid--badges { grid-template-columns: repeat(3, 1fr); }
}

/* R13 · header logo (B-3 discharged 2026-08-11): the official badge, extracted as vector from
   the client's own guidelines PDF p.3 (gold mark on graphite — their sanctioned configuration).
   Hello renders it via .custom-logo once WP's custom_logo is set; the portrait badge holds
   presence at 52px in the glass header. The .site-title rules stay for logo-less installs. */
.site-header .custom-logo,
.site-header .site-logo img {
  max-height: 52px; width: auto; display: block;
}
@media (max-width: 767px) {
  .site-header .custom-logo,
  .site-header .site-logo img { max-height: 44px; }
}

/* R14 · transparent mark (D-097): the badge shipped with its graphite print tile,
   which read as a sticker edge on the near-black header. The mark now sits directly
   on the header ground (brand book's own gold-on-dark configuration), so it needs no
   tile allowance — just a clean cap and optical centring. */
.site-header .custom-logo, .site-header .site-logo img { max-height: 46px !important; width: auto; }
@media (max-width: 767px) {
  .site-header .custom-logo, .site-header .site-logo img { max-height: 38px !important; }
}