/* ============================================================
   DRONES — HOME SECTION OVERRIDES
   ─────────────────────────────────────────────────────────
   Template-local styling for the drones homepage section
   overrides. Loaded by head-css.php AFTER the shared hero layer
   so it styles the drones-namespaced markup without touching
   shared CSS.

   Colours use --mt-* tokens only. Cyan instrument lines use
   currentColor (= --mt-accent) with per-element opacity. Blue
   structure uses --mt-brand-primary(-rgb). Neutral white/black
   translucency uses rgba() per the opacity allowance. No
   hardcoded brand hex values.

   Scope: .drn-hero* — the "Aerial Operations Deck" hero.
   Visual hierarchy: ops scope = primary · HUD + scan = secondary
   · ground grid = supporting (never dominant).
============================================================ */


/* ============================================================
   §1  ROOT + BACKDROP + ATMOSPHERE
============================================================ */
.drn-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Desktop hero height. Raised floor + tightened vh (2026-06-01): the prior
       clamp(580px, 80vh, 780px) collapsed to the 580px floor in normal (non-
       maximized) desktop windows because 80vh tracks viewport HEIGHT — only
       maximized/fullscreen reached toward 780px. clamp(660px, 74vh, 780px) keeps
       a strong, consistent presence in windowed desktops while staying mildly
       adaptive (no forced 100vh). Tablet/mobile unaffected — §8 sets min-height:auto. */
    min-height: clamp(660px, 74vh, 780px);
    padding: var(--mt-section-py) 0;
    isolation: isolate;
    color: var(--mt-neutral-0);
    /* Deep navy → drone-blue sky field (present even with no media) */
    background:
        var(--mt-gradient-glow) 115% -15% / 65% 95% no-repeat,
        linear-gradient(140deg,
            var(--mt-neutral-950) 0%,
            var(--mt-neutral-900) 52%,
            var(--mt-brand-primary-active) 155%);
}

/* Backdrop media (image / video) */
.drn-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.drn-hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }

.drn-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(140deg, var(--mt-neutral-950), var(--mt-neutral-900));
    opacity: var(--drn-scrim, 0.82);
}

/* Supporting survey ground-plane (perspective grid, lower band, masked).
   Replaces the old flat blueprint grid so the grid no longer dominates. */
.drn-hero__ground {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -2px;
    height: 46%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 47px, rgba(var(--mt-brand-primary-rgb), 0.16) 47px 48px),
        repeating-linear-gradient(0deg,  transparent 0 47px, rgba(var(--mt-brand-primary-rgb), 0.16) 47px 48px);
    transform: perspective(460px) rotateX(70deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 92%);
            mask-image: linear-gradient(to top, #000 5%, transparent 92%);
}

/* HUD corner frame (cyan) */
.drn-hero__hud {
    position: absolute;
    inset: clamp(16px, 3vw, 40px);
    z-index: 2;
    pointer-events: none;
    color: var(--mt-accent);
}
.drn-hero__hud-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    opacity: 0.5;
}
.drn-hero__hud-corner--tl { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.drn-hero__hud-corner--tr { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.drn-hero__hud-corner--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0;    }
.drn-hero__hud-corner--br { bottom: 0; right: 0; border-left: 0;  border-top: 0;    }

/* Scan sweep */
.drn-hero__scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 150px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    background: linear-gradient(180deg, transparent, var(--mt-accent), transparent);
    animation: drn-hero-scan 8s var(--mt-ease-default) infinite;
}
@keyframes drn-hero-scan {
    0%   { transform: translateY(-150px); }
    100% { transform: translateY(120vh); }
}


/* ============================================================
   §2  TWO-ZONE LAYOUT (primary identity for every mode)
============================================================ */
.drn-hero__inner { position: relative; z-index: 3; width: 100%; }

.drn-hero__layout {
    display: grid;
    /* Content column widened ~10% and the gap tightened so the headline
       breaks naturally — strengthening the text column rather than
       shrinking the surveying scope. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: clamp(var(--mt-space-8), 4.5vw, var(--mt-space-16));
    width: 100%;
}

.drn-hero__panel { display: flex; flex-direction: column; min-width: 0; }
.drn-hero--align-left   .drn-hero__panel { align-items: flex-start; text-align: left; }
.drn-hero--align-center .drn-hero__panel { align-items: center;     text-align: center; }
.drn-hero--align-right  .drn-hero__panel { align-items: flex-end;   text-align: right; }

.drn-hero__aside { min-width: 0; display: flex; justify-content: center; }


/* ============================================================
   §3  CONTENT
============================================================ */
.drn-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    margin-bottom: var(--mt-space-5);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    color: var(--mt-accent);
}
.drn-hero__locator-dot {
    position: relative;
    width: 9px; height: 9px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-accent);
    flex: none;
}
.drn-hero__locator-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: var(--mt-radius-full);
    border: 1px solid var(--mt-accent);
    animation: drn-hero-ping 2.4s var(--mt-ease-out) infinite;
}
@keyframes drn-hero-ping {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.7); opacity: 0; }
}

.drn-hero__title {
    margin: 0 0 var(--mt-space-4);
    font-family: var(--mt-font-sans);
    font-weight: var(--mt-weight-black);
    line-height: 1.1;
    letter-spacing: var(--mt-tracking-tight);
    color: var(--mt-neutral-0);
    /* Smaller top end + wider measure + balanced wrapping keep the
       headline to ~2 lines so it reads as the primary focal point. */
    font-size: clamp(1.95rem, 3.9vw, 3rem);
    /* Wider measure (was 22ch) so the headline breaks more naturally in
       the widened content column. */
    max-width: 27ch;
    text-wrap: balance;
}
.drn-hero--align-center .drn-hero__title { max-width: 30ch; }

.drn-hero__subtitle {
    margin: 0 0 var(--mt-space-3);
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    font-weight: var(--mt-weight-medium);
    line-height: var(--mt-leading-snug);
    color: var(--mt-neutral-100);
    max-width: 46ch;
    text-wrap: balance;
}
.drn-hero__desc {
    /* Tertiary in the hierarchy — lighter + more muted so the
       title/subtitle carry the message, not the body copy. */
    margin: 0 0 var(--mt-space-6);
    font-size: var(--mt-text-base);
    line-height: var(--mt-leading-normal);
    color: var(--mt-neutral-400);
    max-width: 46ch;
}


/* ============================================================
   §4  MISSION CAPABILITIES (reworked from generic chips)
   ─────────────────────────────────────────────────────────
   Renders the admin highlights[] as credential / capability
   tags (cyan icon tile + uppercase label) — reads as mission
   capabilities, not simple badges. Text is admin-owned.
============================================================ */
.drn-hero__caps {
    list-style: none;
    margin: 0 0 var(--mt-space-8);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-3);
}
.drn-hero--align-center .drn-hero__caps { justify-content: center; }
.drn-hero--align-right  .drn-hero__caps { justify-content: flex-end; }

.drn-hero__cap {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    padding: 7px 16px 7px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--mt-radius-md);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
}
.drn-hero__cap-mark {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: var(--mt-radius-sm);
    background: rgba(var(--mt-brand-primary-rgb), 0.20);
    color: var(--mt-accent);
    font-size: 0.82rem;
}
.drn-hero__cap-label {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
    color: var(--mt-neutral-100);
    white-space: nowrap;
}


/* ============================================================
   §5  ACTIONS
============================================================ */
.drn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-4);
    align-items: center;
}
.drn-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt-space-2);
    padding: 14px 30px;
    font-size: 0.98rem;
    font-weight: var(--mt-weight-bold);
    line-height: 1.1;
    border: 2px solid transparent;
    border-radius: var(--mt-radius-full);
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--mt-duration-fast) ease,
        color var(--mt-duration-fast) ease,
        border-color var(--mt-duration-fast) ease,
        transform var(--mt-duration-fast) var(--mt-ease-default),
        box-shadow var(--mt-duration-fast) ease;
}
.drn-hero__btn:hover { transform: translateY(-2px); }
.drn-hero__btn-ico { font-size: 0.8em; }

.drn-hero__btn--primary {
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    box-shadow: 0 6px 20px rgba(var(--mt-brand-primary-rgb), 0.35);
}
.drn-hero__btn--primary:hover {
    background: var(--mt-brand-primary-hover);
    color: var(--mt-neutral-0);
    box-shadow: 0 10px 28px rgba(var(--mt-brand-primary-rgb), 0.45);
}
.drn-hero__btn--ghost {
    background: transparent;
    color: var(--mt-accent);
    border-color: var(--mt-accent);
}
.drn-hero__btn--ghost:hover {
    background: var(--mt-accent);
    color: var(--mt-neutral-950);
}


/* ============================================================
   §6  AERIAL OPS SCOPE (primary right-zone visual)
============================================================ */
.drn-hero__scope {
    position: relative;
    /* Slightly larger so the surveying scope balances the dense left column. */
    width: min(440px, 100%);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    color: var(--mt-accent);
}
.drn-hero__scope::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: var(--mt-radius-full);
    background: var(--mt-gradient-glow);
    z-index: -1;
}
.drn-scope { width: 100%; height: 100%; display: block; overflow: visible; }

.drn-scope__sweep {
    transform-origin: 160px 160px;
    animation: drn-scope-rotate 6s linear infinite;
}
@keyframes drn-scope-rotate {
    to { transform: rotate(360deg); }
}

.drn-scope__drone {
    transform-origin: 160px 160px;
    animation: drn-scope-float 5.5s var(--mt-ease-default) infinite;
}
@keyframes drn-scope-float {
    0%, 100% { transform: translateY(-3px); }
    50%      { transform: translateY(3px); }
}

/* Tone the scope down when it overlays a backdrop photo/video */
.drn-hero.has-media .drn-hero__scope { opacity: 0.7; }


/* ============================================================
   §7  SPLIT FEED FRAME (right zone when admin supplies media)
============================================================ */
.drn-hero__feed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--mt-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--mt-shadow-2xl);
    background: var(--mt-neutral-900);
}
.drn-hero__feed-frame::before,
.drn-hero__feed-frame::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid var(--mt-accent);
    z-index: 2;
    pointer-events: none;
}
.drn-hero__feed-frame::before { top: 10px;    left: 10px;  border-right: 0; border-bottom: 0; }
.drn-hero__feed-frame::after  { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }
.drn-hero__feed-frame iframe,
.drn-hero__feed-frame video,
.drn-hero__feed-frame img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
}


/* ============================================================
   §8  RESPONSIVE
============================================================ */
@media (max-width: 991px) {
    .drn-hero {
        min-height: auto;
        padding: var(--mt-section-py) 0 var(--mt-section-py-sm);
    }
    .drn-hero__layout {
        grid-template-columns: 1fr;
        gap: var(--mt-space-10);
    }
    .drn-hero__panel { order: 1; }
    .drn-hero__aside { order: 2; }
    .drn-hero__scope { width: min(360px, 76%); }
}

@media (max-width: 767px) {
    .drn-hero__ground { opacity: 0.4; }
    .drn-hero__hud-corner { width: 18px; height: 18px; }
    .drn-hero__hud-corner--tr,
    .drn-hero__hud-corner--bl { display: none; }
    .drn-hero__title { max-width: 100%; }
    .drn-hero__scope { width: min(270px, 70%); }
    .drn-hero__cap-label { white-space: normal; }
    .drn-hero__actions { width: 100%; }
    .drn-hero__btn { flex: 1 1 auto; }
}

@media (max-width: 575px) {
    /* Stack the two hero buttons full-width instead of cramming them side-by-side. */
    .drn-hero__actions { flex-direction: column; align-items: stretch; }
    .drn-hero__btn { width: 100%; }
    .drn-hero__scope { width: min(250px, 70%); }
}


/* ============================================================
   §10  SERVICES PREVIEW — "MISSION CATALOG"
   ─────────────────────────────────────────────────────────
   Light section (follows the dark hero). Each service is an
   operation dossier card: status strip (domain + slot number),
   HUD-bracketed icon tile, title, desc, capability ticks
   (bullets[], optional), and a "View Operation →" link.
   Blue = primary accent on the light surface; cyan = secondary
   line accent (node, HUD brackets). Robust 1→many via auto-fit.
============================================================ */
.drn-services {
    /* Tightened ~24% from full section-py to reduce homepage height. */
    padding: clamp(var(--mt-space-12), 5.5vw, 76px) 0;
    background: var(--mt-surface-page);
    color: var(--mt-text-body);
}
/* Give the Mission Manifest ~10% more room on large screens so it feels
   less constrained inside the page (large screens only — smaller
   breakpoints keep the standard container). */
@media (min-width: 1200px) {
    .drn-services .container { max-width: 1260px; }
}

/* ── Header ───────────────────────────────────────────────── */
.drn-services__head { margin-bottom: clamp(var(--mt-space-6), 3.5vw, var(--mt-space-10)); }
.drn-services__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--mt-space-4);
    margin-bottom: var(--mt-space-3);
}
.drn-services__eyebrow {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--mt-brand-primary);
}
.drn-services__eyebrow::before { content: "//"; margin-right: 0.5ch; opacity: 0.55; }
.drn-services__readout {
    font-family: var(--mt-font-mono);
    font-size: var(--mt-text-sm);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
    color: var(--mt-text-muted);
}
.drn-services__readout-num { color: var(--mt-brand-primary); font-weight: var(--mt-weight-bold); }
.drn-services__title {
    margin: 0 0 var(--mt-space-3);
    font-family: var(--mt-font-sans);
    font-weight: var(--mt-weight-black);
    line-height: var(--mt-leading-tight);
    color: var(--mt-text-heading);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    max-width: 24ch;
}
.drn-services__subtitle {
    margin: 0;
    font-size: var(--mt-text-md);
    line-height: var(--mt-leading-normal);
    color: var(--mt-text-muted);
    max-width: 58ch;
}

/* ── Catalog (vertical mission manifest — NOT a card grid) ── */
.drn-services__catalog { border-top: 1px solid var(--mt-border-default); }

/* ── Mission dossier row ──────────────────────────────────── */
.drn-mission {
    position: relative;
    display: grid;
    grid-template-columns: minmax(84px, auto) auto minmax(0, 1fr) auto;
    grid-template-areas: "index icon body action";
    align-items: center;
    gap: clamp(var(--mt-space-5), 3vw, var(--mt-space-10));
    padding: clamp(var(--mt-space-6), 3.2vw, var(--mt-space-12)) var(--mt-space-5);
    border-bottom: 1px solid var(--mt-border-default);
    transition:
        background var(--mt-duration-normal) var(--mt-ease-default),
        box-shadow var(--mt-duration-normal) var(--mt-ease-default);
}
/* Left "armed mission" accent rail (structural; the lead row stays faintly armed) */
.drn-mission::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--mt-gradient-primary);
    opacity: 0;
    transition: opacity var(--mt-duration-normal) var(--mt-ease-default);
}
.drn-mission:first-child::before { opacity: 0.4; }

/* "Mission selected" activation — pointer AND keyboard */
.drn-mission:hover,
.drn-mission:focus-within {
    background: var(--mt-surface-sunken);
    box-shadow: var(--mt-shadow-md);
}
.drn-mission:hover::before,
.drn-mission:focus-within::before { opacity: 1; }
.drn-mission:hover .drn-mission__body,
.drn-mission:focus-within .drn-mission__body { transform: translateX(5px); }

/* Operational mission identifier — oversized number + cyan command tick */
.drn-mission__index { grid-area: index; display: flex; flex-direction: column; gap: var(--mt-space-2); }
.drn-mission__index-label {
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    color: var(--mt-accent);
}
.drn-mission__num {
    display: block;
    font-family: var(--mt-font-sans);
    font-weight: var(--mt-weight-black);
    font-size: clamp(3rem, 5vw, 4.6rem);
    line-height: 0.9;
    letter-spacing: var(--mt-tracking-tight);
    color: var(--mt-brand-primary);
}
.drn-mission__num::after {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    margin-top: var(--mt-space-3);
    border-radius: 2px;
    background: var(--mt-accent);
    transition: width var(--mt-duration-normal) var(--mt-ease-default);
}
.drn-mission:hover .drn-mission__num::after,
.drn-mission:focus-within .drn-mission__num::after { width: 54px; }

/* Mission-control marker — large icon block with a reticle ring */
.drn-mission__icon {
    position: relative;
    grid-area: icon;
    display: grid;
    place-items: center;
    width: clamp(84px, 8.5vw, 116px);
    height: clamp(84px, 8.5vw, 116px);
    border-radius: var(--mt-radius-lg);
    background: linear-gradient(150deg, rgba(var(--mt-brand-primary-rgb), 0.14), rgba(var(--mt-brand-primary-rgb), 0.04));
    border: 1px solid var(--mt-border-default);
    border-top: 2px solid var(--mt-accent);
    color: var(--mt-brand-primary);
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    transition:
        background var(--mt-duration-normal) var(--mt-ease-default),
        color var(--mt-duration-normal) var(--mt-ease-default),
        box-shadow var(--mt-duration-normal) var(--mt-ease-default);
}
.drn-mission__icon::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: calc(var(--mt-radius-lg) + 5px);
    border: 1px solid rgba(var(--mt-brand-primary-rgb), 0.16);
    opacity: 0;
    transition: opacity var(--mt-duration-normal) var(--mt-ease-default);
}
.drn-mission:hover .drn-mission__icon,
.drn-mission:focus-within .drn-mission__icon {
    background: var(--mt-gradient-primary);
    color: var(--mt-neutral-0);
    box-shadow: 0 10px 26px rgba(var(--mt-brand-primary-rgb), 0.30);
}
.drn-mission:hover .drn-mission__icon::before,
.drn-mission:focus-within .drn-mission__icon::before { opacity: 1; }

/* Content column */
.drn-mission__body {
    grid-area: body;
    min-width: 0;
    transition: transform var(--mt-duration-normal) var(--mt-ease-default);
}
/* Operation classification line (diamond marker + bold class + rule line) */
.drn-mission__meta {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3);
    margin-bottom: var(--mt-space-3);
}
.drn-mission__node {
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--mt-accent);
    transform: rotate(45deg);
    flex: none;
}
.drn-mission__domain {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--mt-brand-primary);
    white-space: nowrap;
}
.drn-mission__meta::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mt-border-default);
}
.drn-mission__title {
    margin: 0 0 var(--mt-space-2);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: var(--mt-weight-bold);
    line-height: var(--mt-leading-snug);
    color: var(--mt-text-heading);
}
.drn-mission__desc {
    margin: 0;
    font-size: var(--mt-text-base);
    line-height: var(--mt-leading-normal);
    color: var(--mt-text-body);
    max-width: 64ch;
}
.drn-mission__caps {
    list-style: none;
    margin: var(--mt-space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2) var(--mt-space-5);
}
.drn-mission__cap {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    font-size: var(--mt-text-sm);
    color: var(--mt-text-body);
}
.drn-mission__cap-tick { color: var(--mt-brand-primary); font-size: 0.8em; flex: none; }

/* Right-side action */
.drn-mission__action { grid-area: action; display: flex; align-items: center; }
.drn-mission__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-3);
    padding: 11px 14px 11px 22px;
    border: 1.5px solid var(--mt-brand-primary);
    border-radius: var(--mt-radius-full);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
    color: var(--mt-brand-primary);
    background: rgba(var(--mt-brand-primary-rgb), 0.06);
    white-space: nowrap;
    text-decoration: none;
    transition:
        background var(--mt-duration-normal) var(--mt-ease-default),
        color var(--mt-duration-normal) var(--mt-ease-default),
        box-shadow var(--mt-duration-normal) var(--mt-ease-default);
}
/* Arrow rides in its own filled marker so the action reads at rest */
.drn-mission__cta i {
    display: inline-grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    font-size: 0.72em;
    transition:
        background var(--mt-duration-normal) var(--mt-ease-default),
        color var(--mt-duration-normal) var(--mt-ease-default),
        transform var(--mt-duration-normal) var(--mt-ease-default);
}
.drn-mission:hover .drn-mission__cta,
.drn-mission:focus-within .drn-mission__cta {
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    box-shadow: 0 8px 22px rgba(var(--mt-brand-primary-rgb), 0.28);
}
.drn-mission:hover .drn-mission__cta i,
.drn-mission:focus-within .drn-mission__cta i {
    background: var(--mt-neutral-0);
    color: var(--mt-brand-primary);
    transform: translateX(3px);
}

/* Responsive: action drops below (tablet), then full stack (mobile) */
@media (max-width: 991px) {
    .drn-mission {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "index icon body"
            "action action action";
    }
    .drn-mission__action { justify-self: start; margin-top: var(--mt-space-4); }
}
@media (max-width: 640px) {
    .drn-mission {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "index icon"
            "body  body"
            "action action";
        gap: var(--mt-space-4);
        align-items: center;
    }
    .drn-mission__num { font-size: 2.4rem; }
    .drn-mission__icon { width: 64px; height: 64px; font-size: 1.6rem; }
    .drn-mission__action { justify-self: stretch; margin-top: var(--mt-space-3); }
    .drn-mission__cta { width: 100%; justify-content: center; }
}

/* ── Section CTA (View All Services →) ────────────────────── */
.drn-services__cta {
    margin-top: clamp(var(--mt-space-8), 4vw, var(--mt-space-12));
    display: flex;
    justify-content: center;
}
.drn-services__cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: 13px 30px;
    border: 2px solid var(--mt-brand-primary);
    border-radius: var(--mt-radius-full);
    font-size: 0.98rem;
    font-weight: var(--mt-weight-bold);
    color: var(--mt-brand-primary);
    background: transparent;
    text-decoration: none;
    transition:
        background var(--mt-duration-fast) ease,
        color var(--mt-duration-fast) ease,
        transform var(--mt-duration-fast) var(--mt-ease-default);
}
.drn-services__cta-link:hover {
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    transform: translateY(-2px);
}
.drn-services__cta-link i { transition: transform var(--mt-duration-fast) ease; }
.drn-services__cta-link:hover i { transform: translateX(4px); }

/* ============================================================
   §11  PROJECTS PREVIEW — "MISSION ARCHIVE"  (Commercial Polish Sprint 1)
   ─────────────────────────────────────────────────────────
   Light section. Mission-card grid for web_projects: //eyebrow,
   %02d mission index, category = operation classification badge,
   whole card is the link, "View Operation Record →". Tokens only.
============================================================ */
.drn-archive { padding: clamp(var(--mt-space-12), 5.5vw, 76px) 0; background: var(--mt-surface-page); color: var(--mt-text-body); }
.drn-archive__head { text-align: center; margin-bottom: clamp(var(--mt-space-6), 3.5vw, var(--mt-space-10)); }
.drn-archive__eyebrow { font-family: var(--mt-font-mono); color: var(--mt-brand-primary); font-size: var(--mt-text-sm); font-weight: var(--mt-weight-semibold); letter-spacing: var(--mt-tracking-wider); text-transform: uppercase; }
.drn-archive__title { margin: var(--mt-space-2) 0 0; font-family: var(--mt-font-sans); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: var(--mt-weight-black); color: var(--mt-text-heading); }
.drn-archive__subtitle { margin: var(--mt-space-3) auto 0; max-width: 58ch; color: var(--mt-text-muted); }
.drn-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mt-space-5); }
.drn-archive__card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--mt-border-default); border-radius: var(--mt-radius-lg); background: var(--mt-surface-card); overflow: hidden; text-decoration: none; transition: border-color var(--mt-duration-fast) ease, transform var(--mt-duration-fast) var(--mt-ease-default), box-shadow var(--mt-duration-fast) ease; }
.drn-archive__card:hover { border-color: var(--mt-brand-primary); transform: translateY(-4px); box-shadow: 0 10px 26px rgba(var(--mt-brand-primary-rgb), 0.18); }
.drn-archive__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mt-surface-sunken); }
.drn-archive__thumb img { width: 100%; height: 100%; object-fit: cover; }
.drn-archive__index { position: absolute; top: var(--mt-space-3); left: var(--mt-space-3); font-family: var(--mt-font-mono); font-size: var(--mt-text-lg); font-weight: var(--mt-weight-black); color: var(--mt-neutral-0); background: rgba(var(--mt-neutral-950-rgb, 0,0,0), 0.45); padding: 0 var(--mt-space-2); border-radius: var(--mt-radius-sm); }
.drn-archive__class { position: absolute; top: var(--mt-space-3); right: var(--mt-space-3); font-family: var(--mt-font-mono); font-size: var(--mt-text-xs); letter-spacing: var(--mt-tracking-wide); text-transform: uppercase; color: var(--mt-neutral-0); background: var(--mt-brand-primary); padding: var(--mt-space-1) var(--mt-space-2); border-radius: var(--mt-radius-sm); }
.drn-archive__body { display: flex; flex-direction: column; gap: var(--mt-space-2); padding: var(--mt-space-5) var(--mt-space-6); flex: 1; }
.drn-archive__card-title { font-weight: var(--mt-weight-bold); color: var(--mt-text-heading); }
.drn-archive__card-desc { color: var(--mt-text-muted); font-size: var(--mt-text-sm); line-height: var(--mt-leading-normal); }
.drn-archive__arrow { margin-top: auto; padding-top: var(--mt-space-2); color: var(--mt-brand-primary); font-family: var(--mt-font-mono); font-size: var(--mt-text-sm); font-weight: var(--mt-weight-bold); text-transform: uppercase; letter-spacing: var(--mt-tracking-wide); }
.drn-archive__card:hover .drn-archive__arrow { color: var(--mt-accent); }
.drn-archive__cta { margin-top: clamp(var(--mt-space-8), 4vw, var(--mt-space-12)); text-align: center; }
@media (max-width: 991px) { .drn-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .drn-archive__grid { grid-template-columns: 1fr; } }
/* Adaptive by mission count (0/1/2/3+) — layout only. 1 = centered feature
   card, 2 = balanced pair, 3+ = full manifest grid. Double-class wins over the
   base/responsive rules above. */
.drn-archive__grid.drn-archive__grid--n1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.drn-archive__grid.drn-archive__grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin-inline: auto; }
@media (max-width: 767px) { .drn-archive__grid.drn-archive__grid--n2 { grid-template-columns: 1fr; } }

/* ============================================================
   §11b  GALLERY — "VISUAL SHOWCASE"  (drones-native identity)
   ─────────────────────────────────────────────────────────
   Replaces the former dark Engineering copy. Light section in the
   drones vocabulary (mono "//" eyebrow, deep-blue structure, cyan
   accent), matching the Mission Archive family. Renderer:
   templates/drones/partials/gallery.php (drn-gallery-* classes).
   Tokens only — no hardcoded hex. Lightbox hooks are class-agnostic
   (data-gallery-lightbox / data-glb / data-glb-video).

   Gallery Type (gallery_purpose): Photo Gallery = default decorative
   grid; Work Showcase = Readability > Decoration (fewer, larger,
   16/10 tiles so website screenshots + project samples read clearly).
============================================================ */
.drn-gallery { padding: clamp(var(--mt-space-12), 5.5vw, 76px) 0; background: var(--mt-surface-page); color: var(--mt-text-body); }
.drn-gallery__head { text-align: center; margin-bottom: clamp(var(--mt-space-6), 3.5vw, var(--mt-space-10)); }
.drn-gallery__eyebrow { display: inline-block; font-family: var(--mt-font-mono); color: var(--mt-brand-primary); font-size: var(--mt-text-sm); font-weight: var(--mt-weight-semibold); letter-spacing: var(--mt-tracking-wider); text-transform: uppercase; }
.drn-gallery__eyebrow::before { content: "// "; opacity: 0.55; }
.drn-gallery__title { margin: var(--mt-space-2) 0 0; font-family: var(--mt-font-sans); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: var(--mt-weight-black); color: var(--mt-text-heading); }
.drn-gallery__lead { margin: var(--mt-space-3) auto 0; max-width: 58ch; color: var(--mt-text-muted); }

.drn-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--mt-space-4); }
.drn-gallery__grid .drn-gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 575px) { .drn-gallery__grid .drn-gallery-item:first-child { grid-column: span 1; grid-row: span 1; } }

.drn-gallery-item { position: relative; display: block; border: 1px solid var(--mt-border-default); border-radius: var(--mt-radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--mt-surface-sunken); cursor: pointer; transition: border-color var(--mt-duration-fast) ease, transform var(--mt-duration-fast) var(--mt-ease-default), box-shadow var(--mt-duration-fast) ease; }
.drn-gallery-item:hover { border-color: var(--mt-brand-primary); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(var(--mt-brand-primary-rgb), 0.18); }
.drn-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drn-gallery-item[data-fit="contain"] { background: var(--mt-surface-sunken); }
.drn-gallery-item[data-fit="contain"] img { object-fit: contain; }

.drn-gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--mt-text-subtle); font-size: 2.2rem; }

.drn-gallery-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mt-space-2); opacity: 0; color: var(--mt-neutral-0); background: linear-gradient(160deg, rgba(var(--mt-brand-primary-rgb), 0.74), rgba(2, 6, 23, 0.55)); transition: opacity var(--mt-duration-normal) ease; }
.drn-gallery-item:hover .drn-gallery-overlay { opacity: 1; }
.drn-gallery-overlay i { font-size: 1.6rem; }
.drn-gallery-overlay span { font-size: var(--mt-text-sm); font-weight: var(--mt-weight-semibold); text-align: center; padding: 0 var(--mt-space-4); }

.drn-gallery-video-badge { position: absolute; top: var(--mt-space-3); right: var(--mt-space-3); width: 34px; height: 34px; border-radius: var(--mt-radius-full); display: flex; align-items: center; justify-content: center; color: var(--mt-neutral-0); background: var(--mt-brand-primary); font-size: var(--mt-text-xs); }

/* ────────────────────────────────────────────────────────────
   GALLERY PRESETS — Gallery Preset System v1 (drones)
   Internal keys: photo | showcase | signature. Drones default = signature.
   ONE renderer + one markup; the resolved preset class drives the experience.
   The base .drn-gallery rules above already supply the SIGNATURE look (feature
   cell + HUD overlay + glow). New per-item elements are hidden by default and
   revealed per preset.
   ──────────────────────────────────────────────────────────── */
.drn-gallery-index   { display: none; }
.drn-gallery-caption { display: none; }

/* ============================================================
   PHOTO — Editorial / Magazine. Image-first, borderless, airy;
   positional mosaic rhythm (NOT count-aware), rich hover caption,
   soft zoom, no index / icon-overlay clutter.
   ============================================================ */
.drn-gallery.gallery--preset-photo .drn-gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--mt-space-6);
    grid-auto-flow: dense;
}
.drn-gallery.gallery--preset-photo .drn-gallery-item { border: 0; aspect-ratio: 4 / 3; }
/* Editorial rhythm — a wide lead image + a periodic wide accent (positional only). */
.drn-gallery.gallery--preset-photo .drn-gallery__grid .drn-gallery-item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
.drn-gallery.gallery--preset-photo .drn-gallery__grid .drn-gallery-item:nth-child(7n+5) { grid-column: span 2; aspect-ratio: 3 / 2; }
@media (max-width: 575px) {
    .drn-gallery.gallery--preset-photo .drn-gallery__grid .drn-gallery-item:first-child,
    .drn-gallery.gallery--preset-photo .drn-gallery__grid .drn-gallery-item:nth-child(7n+5) { grid-column: span 1; aspect-ratio: 4 / 3; }
}
/* Soft hover — image zoom only (no border / lift / glow). */
.drn-gallery.gallery--preset-photo .drn-gallery-item:hover { transform: none; box-shadow: none; border-color: transparent; }
.drn-gallery.gallery--preset-photo .drn-gallery-item img { transition: transform 0.5s var(--mt-ease-default); }
.drn-gallery.gallery--preset-photo .drn-gallery-item:hover img { transform: scale(1.04); }
/* Clutter removal — no icon overlay, no mission number; the caption carries it. */
.drn-gallery.gallery--preset-photo .drn-gallery-overlay { display: none; }
.drn-gallery.gallery--preset-photo .drn-gallery-index { display: none; }
/* Rich editorial caption — readable lower-third gradient, reveals on hover. */
.drn-gallery.gallery--preset-photo .drn-gallery-caption {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: var(--mt-space-10) var(--mt-space-4) var(--mt-space-4);
    color: var(--mt-neutral-0); font-family: var(--mt-font-sans);
    font-size: var(--mt-text-sm); font-weight: var(--mt-weight-semibold);
    letter-spacing: 0.01em; line-height: 1.4;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.30) 45%, rgba(2, 6, 23, 0) 100%);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.drn-gallery.gallery--preset-photo .drn-gallery-item:hover .drn-gallery-caption { opacity: 1; transform: none; }

/* ============================================================
   SHOWCASE — Professional Portfolio. Uniform case cards; the
   image stays uncovered (no scrim); information lives in a
   persistent SOLID band beneath the image; restrained hover.
   ============================================================ */
.drn-gallery.gallery--preset-showcase .drn-gallery__grid { grid-template-columns: repeat(1, 1fr); gap: var(--mt-space-5); }
@media (min-width: 768px) { .drn-gallery.gallery--preset-showcase .drn-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
.drn-gallery.gallery--preset-showcase .drn-gallery__grid .drn-gallery-item:first-child { grid-column: auto; grid-row: auto; }
.drn-gallery.gallery--preset-showcase .drn-gallery-item {
    aspect-ratio: auto; overflow: hidden; display: flex; flex-direction: column;
    border: 1px solid var(--mt-border-default); background: var(--mt-surface-sunken);
}
.drn-gallery.gallery--preset-showcase .drn-gallery-item img,
.drn-gallery.gallery--preset-showcase .drn-gallery-placeholder { width: 100%; aspect-ratio: 16 / 10; height: auto; }
.drn-gallery.gallery--preset-showcase .drn-gallery-item[data-fit="contain"] img { object-fit: contain; }
/* Remove the image-obscuring hover overlay — the work is the hero. */
.drn-gallery.gallery--preset-showcase .drn-gallery-overlay { display: none; }
/* Persistent solid information band, separated from the image. */
.drn-gallery.gallery--preset-showcase .drn-gallery-caption {
    display: block; position: static; background: var(--mt-surface-sunken);
    color: var(--mt-text-body); padding: var(--mt-space-3) var(--mt-space-4);
    font-size: var(--mt-text-sm); font-weight: var(--mt-weight-semibold);
    border-top: 1px solid var(--mt-border-default);
}
.drn-gallery.gallery--preset-showcase .drn-gallery-caption::before {
    content: "PROJECT"; display: block; font-family: var(--mt-font-mono);
    font-size: var(--mt-text-xs); font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wider); color: var(--mt-brand-primary);
    text-transform: uppercase; margin-bottom: 2px;
}
/* Restrained hover — accent border + a small image zoom, no scrim, no lift. */
.drn-gallery.gallery--preset-showcase .drn-gallery-item:hover { transform: none; box-shadow: 0 6px 18px rgba(2, 6, 23, 0.10); border-color: var(--mt-brand-primary); }
.drn-gallery.gallery--preset-showcase .drn-gallery-item img { transition: transform 0.4s var(--mt-ease-default); }
.drn-gallery.gallery--preset-showcase .drn-gallery-item:hover img { transform: scale(1.03); }

/* ============================================================
   SIGNATURE — Operations Archive (Mission Archive). Full-width
   featured LEAD OPERATION + a grid of dossier records with
   persistent metadata footers, mission numbering, HUD brackets
   and a CTA. Strong top-down hierarchy. (Drones default preset.)
   Static labels (LEAD OPERATION / OPERATION RECORD / CTA) are
   CSS ::before/::after content — no markup, no new fields.
   ============================================================ */
.drn-gallery.gallery--preset-signature .drn-gallery__grid { gap: var(--mt-space-4); }
/* HUD corner brackets on every card (ignite on hover). */
.drn-gallery.gallery--preset-signature .drn-gallery-item::before,
.drn-gallery.gallery--preset-signature .drn-gallery-item::after {
    content: ""; position: absolute; width: 14px; height: 14px; z-index: 4; pointer-events: none;
    border-color: rgba(var(--mt-brand-primary-rgb), 0.9); border-style: solid;
    opacity: 0; transition: opacity var(--mt-duration-fast) ease;
}
.drn-gallery.gallery--preset-signature .drn-gallery-item::before { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.drn-gallery.gallery--preset-signature .drn-gallery-item::after  { bottom: 8px; left: 8px;  border-width: 0 0 2px 2px; }
.drn-gallery.gallery--preset-signature .drn-gallery-item:hover::before,
.drn-gallery.gallery--preset-signature .drn-gallery-item:hover::after { opacity: 0.95; }
/* Suppress the generic hover scrim — dossier metadata is persistent. */
.drn-gallery.gallery--preset-signature .drn-gallery-overlay { display: none; }
/* Mission numbering — prominent mono corner tab. */
.drn-gallery.gallery--preset-signature .drn-gallery-index {
    display: inline-flex; position: absolute; top: 0; left: 0; z-index: 3;
    font-family: var(--mt-font-mono); font-size: var(--mt-text-xs); font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wider); color: var(--mt-neutral-0);
    background: var(--mt-brand-primary); padding: var(--mt-space-2) var(--mt-space-3);
    border-bottom-right-radius: var(--mt-radius-md);
}
/* Record cards — persistent dossier footer (classification + name). */
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child) { aspect-ratio: 4 / 3; }
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child) .drn-gallery-caption {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: var(--mt-space-6) var(--mt-space-3) var(--mt-space-3);
    color: var(--mt-neutral-0); font-family: var(--mt-font-sans);
    font-size: var(--mt-text-sm); font-weight: var(--mt-weight-semibold); line-height: 1.3;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.90), rgba(2, 6, 23, 0));
}
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child) .drn-gallery-caption::before {
    content: "OPERATION RECORD"; display: block; font-family: var(--mt-font-mono);
    font-size: 0.62rem; font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wider); color: var(--mt-brand-primary); margin-bottom: 2px;
}
/* FEATURED HERO — full-width lead operation + dossier panel + CTA. */
.drn-gallery.gallery--preset-signature .drn-gallery__grid .drn-gallery-item:first-child {
    grid-column: 1 / -1; grid-row: auto; aspect-ratio: 21 / 9;
}
@media (max-width: 767px) { .drn-gallery.gallery--preset-signature .drn-gallery__grid .drn-gallery-item:first-child { aspect-ratio: 16 / 10; } }
.drn-gallery.gallery--preset-signature .drn-gallery-item:first-child .drn-gallery-index { font-size: var(--mt-text-sm); padding: var(--mt-space-3) var(--mt-space-4); }
.drn-gallery.gallery--preset-signature .drn-gallery-item:first-child .drn-gallery-caption {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: clamp(var(--mt-space-6), 5vw, var(--mt-space-12)) var(--mt-space-6) var(--mt-space-6);
    color: var(--mt-neutral-0); font-family: var(--mt-font-sans);
    font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: var(--mt-weight-black); line-height: 1.2;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.55) 50%, rgba(2, 6, 23, 0) 100%);
}
.drn-gallery.gallery--preset-signature .drn-gallery-item:first-child .drn-gallery-caption::before {
    content: "LEAD OPERATION"; display: block; font-family: var(--mt-font-mono);
    font-size: var(--mt-text-xs); font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wider); color: var(--mt-brand-primary); margin-bottom: var(--mt-space-2);
}
.drn-gallery.gallery--preset-signature .drn-gallery-item:first-child .drn-gallery-caption::after {
    content: "View Operation Record →";
    /* Closeout: CTA drops to its OWN line beneath the title (no longer inline
       beside it) → the project title becomes the primary element; the CTA is a
       clearly separated, content-width secondary action. */
    display: block; width: fit-content; margin-top: var(--mt-space-5);
    font-family: var(--mt-font-mono); font-size: var(--mt-text-sm); font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wider); color: var(--mt-neutral-0);
    border: 1px solid rgba(var(--mt-brand-primary-rgb), 0.9); padding: var(--mt-space-2) var(--mt-space-4);
    border-radius: var(--mt-radius-md); background: rgba(var(--mt-brand-primary-rgb), 0.22);
}

/* ────────────────────────────────────────────────────────────
   MISSION ARCHIVE — FINAL CERTIFICATION POLISH (records only)
   A subtle 3-step accent cycle + status pip + restrained resting
   depth so record cards read as "different records from one
   system." Hero (:first-child), layout, markup and contracts are
   unchanged. Single driver per card: --rec-accent (in-family Drones
   tokens only — cyan / deep blue / deeper blue, no hardcoded hex)
   + a paired --rec-a intensity for glow + depth.
   ──────────────────────────────────────────────────────────── */
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child) {
    --rec-accent: var(--mt-accent);                /* aviation cyan (also 3n+2) */
    --rec-a: 0.16;
    box-shadow: 0 2px 10px rgba(var(--mt-brand-primary-rgb), calc(var(--rec-a) * 0.5));
}
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child):nth-child(3n) {
    --rec-accent: var(--mt-brand-primary);         /* deep drone blue (3,6,9…) */
    --rec-a: 0.14;
}
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child):nth-child(3n+1) {
    --rec-accent: var(--mt-brand-primary-active);  /* deeper blue (4,7,10…) */
    --rec-a: 0.12;
}
/* The cycle drives: index tab · HUD brackets · hover glow + border · status pip. */
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child) .drn-gallery-index { background: var(--rec-accent); }
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child)::before,
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child)::after { border-color: var(--rec-accent); }
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child):hover {
    border-color: var(--rec-accent);
    box-shadow: 0 10px 26px rgba(var(--mt-brand-primary-rgb), var(--rec-a));
}
/* Status pip — a small system indicator in the footer (records only). */
.drn-gallery.gallery--preset-signature .drn-gallery-item:not(:first-child) .drn-gallery-caption::after {
    content: ""; position: absolute; top: var(--mt-space-6); right: var(--mt-space-3);
    width: 7px; height: 7px; border-radius: var(--mt-radius-full);
    background: var(--rec-accent); box-shadow: 0 0 0 3px rgba(var(--mt-brand-primary-rgb), 0.16);
}

/* ============================================================
   §12  ABOUT — "COMPLIANCE DOSSIER"
   ─────────────────────────────────────────────────────────
   Light section · dark operator card + verified credential
   ledger (features[]) + operational-record readout (stats[]).
   Certification text comes only from feature data; the seal is
   an icon only (no "VERIFIED" word). Every region is graceful.
============================================================ */
.drn-about {
    /* Tightened ~24% from full section-py to reduce homepage height.
       Top edge further reduced modestly to tighten the hero→about
       transition; bottom (about→services) preserved. */
    padding: clamp(var(--mt-space-10), 4.5vw, 60px) 0 clamp(var(--mt-space-12), 5.5vw, 76px);
    background: var(--mt-surface-page);
    color: var(--mt-text-body);
}

/* ── Header ───────────────────────────────────────────────── */
.drn-about__head { margin-bottom: clamp(var(--mt-space-6), 3.5vw, var(--mt-space-10)); max-width: 1040px; }
.drn-about__eyebrow {
    display: inline-block;
    margin-bottom: var(--mt-space-3);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wider);
    text-transform: uppercase;
    color: var(--mt-brand-primary);
}
.drn-about__eyebrow::before { content: "//"; margin-right: 0.5ch; opacity: 0.55; }
.drn-about__title {
    margin: 0 0 var(--mt-space-4);
    font-family: var(--mt-font-sans);
    font-weight: var(--mt-weight-black);
    line-height: var(--mt-leading-tight);
    color: var(--mt-text-heading);
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    text-wrap: balance; /* R2 (2026-06-01): even out line breaks → no orphaned last word */
}
.drn-about__lead {
    margin: 0;
    font-size: var(--mt-text-md);
    line-height: var(--mt-leading-normal);
    color: var(--mt-text-muted);
    max-width: 70ch;
}

/* ── Dossier grid ─────────────────────────────────────────── */
.drn-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(var(--mt-space-6), 3vw, var(--mt-space-12));
}
.drn-about__grid--single { grid-template-columns: 1fr; }
.drn-about__grid--single .drn-about__operator { max-width: 560px; }

/* ── Operator card (dark, HUD-framed) ─────────────────────── */
.drn-about__frame {
    position: relative;
    padding: var(--mt-space-3);
    border-radius: var(--mt-radius-lg);
    border: 1px solid var(--mt-neutral-800);
    background: var(--mt-gradient-dark);
    overflow: hidden;
}
.drn-about__frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mt-radius-md);
}
.drn-about__corner {
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid var(--mt-accent);
    opacity: 0.6;
    z-index: 2;
}
.drn-about__corner--tl { top: 10px;    left: 10px;  border-right: 0; border-bottom: 0; }
.drn-about__corner--tr { top: 10px;    right: 10px; border-left: 0;  border-bottom: 0; }
.drn-about__corner--bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0; }
.drn-about__corner--br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }
.drn-about__seal {
    position: absolute;
    right: var(--mt-space-5);
    bottom: var(--mt-space-5);
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary);
    border: 1px solid var(--mt-accent);
    color: var(--mt-neutral-0);
    font-size: 1.2rem;
    box-shadow: 0 6px 18px rgba(var(--mt-brand-primary-rgb), 0.40);
    z-index: 2;
}

/* Operator card = framed image + integrated CTA (fills the space below
   the image and balances the column against the dossier — Option B) */
.drn-about__operator { display: flex; flex-direction: column; gap: var(--mt-space-4); }
.drn-about__operator-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt-space-2);
    width: 100%;
    padding: 14px 26px;
    border-radius: var(--mt-radius-md);
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    font-size: 0.98rem;
    font-weight: var(--mt-weight-bold);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(var(--mt-brand-primary-rgb), 0.30);
    transition:
        background var(--mt-duration-fast) ease,
        box-shadow var(--mt-duration-fast) ease,
        transform var(--mt-duration-fast) var(--mt-ease-default);
}
.drn-about__operator-cta:hover {
    background: var(--mt-brand-primary-hover);
    box-shadow: 0 10px 28px rgba(var(--mt-brand-primary-rgb), 0.42);
    transform: translateY(-2px);
}
.drn-about__operator-cta i { transition: transform var(--mt-duration-fast) ease; }
.drn-about__operator-cta:hover i { transform: translateX(4px); }

/* ── Dossier panel ────────────────────────────────────────── */
.drn-about__dossier {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--mt-space-6), 2.5vw, var(--mt-space-8));
}

/* Mission / Vision briefing rows */
.drn-about__brief { display: flex; flex-direction: column; gap: var(--mt-space-5); }
/* Briefing row (2026-06-01): a drones icon tile — same vocabulary as
   .drn-about__cred-icon in the certs ledger below — beside the label + text. */
.drn-about__brief-item { display: flex; align-items: flex-start; gap: var(--mt-space-4); }
.drn-about__brief-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--mt-radius-sm);
    background: rgba(var(--mt-brand-primary-rgb), 0.10);
    color: var(--mt-brand-primary);
    font-size: 1rem;
}
.drn-about__brief-body { min-width: 0; }
.drn-about__brief-label {
    /* Promoted span → h3 (2026-06-01): visual unchanged — only the h3 default
       top margin is zeroed so the label looks exactly as before. */
    margin: 0 0 var(--mt-space-2);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
    color: var(--mt-brand-primary);
}
.drn-about__brief-label::before { content: "\25B8"; margin-right: 0.5ch; color: var(--mt-accent); }
.drn-about__brief-text {
    margin: 0;
    font-size: var(--mt-text-base);
    line-height: var(--mt-leading-relaxed); /* relaxed for the M/V briefing paragraphs */
    color: var(--mt-text-body);
    max-width: 62ch;
}

/* Verified credential ledger (features[]) */
.drn-about__certs-head {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3);
    margin-bottom: var(--mt-space-4);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    color: var(--mt-text-muted);
}
.drn-about__certs-head::after { content: ""; flex: 1; height: 1px; background: var(--mt-border-default); }
/* R1 (2026-06-01): 2-column card grid instead of a single-column bordered list
   — uses the dossier's horizontal space and roughly halves the vertical length
   (6 rows → 3×2). Each credential is now its own bordered card; the shared
   container border + per-row dividers are dropped. Collapses to one column at
   ≤991px (see §12 responsive) to preserve the prior mobile/tablet appearance. */
.drn-about__ledger {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mt-space-3);
}
.drn-about__cred {
    display: flex;
    align-items: center;
    gap: var(--mt-space-4);
    padding: var(--mt-space-4) var(--mt-space-5);
    background: var(--mt-surface-card);
    border: 1px solid var(--mt-border-default);
    border-radius: var(--mt-radius-md);
    transition: background var(--mt-duration-fast) ease,
                border-color var(--mt-duration-fast) ease;
}
.drn-about__cred:hover {
    background: var(--mt-surface-sunken);
    border-color: rgba(var(--mt-brand-primary-rgb), 0.35);
}
.drn-about__cred-icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: var(--mt-radius-sm);
    background: rgba(var(--mt-brand-primary-rgb), 0.10);
    color: var(--mt-brand-primary);
    font-size: 1rem;
}
.drn-about__cred-text {
    flex: 1;
    min-width: 0;
    font-size: var(--mt-text-base);
    font-weight: var(--mt-weight-medium);
    color: var(--mt-text-heading);
}
/* Credential confirmation marker — drone-blue (matches the Services
   capability ticks). Confirmation, not a success/alert state. */
.drn-about__cred-seal {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    color: var(--mt-brand-primary);
    font-size: 1.1rem;
}

/* ── Operational record readout (stats[]) ─────────────────── */
.drn-about__record {
    margin-top: clamp(var(--mt-space-8), 3vw, var(--mt-space-12));
    padding: clamp(var(--mt-space-6), 3vw, var(--mt-space-8));
    background: var(--mt-surface-sunken);
    border: 1px solid var(--mt-border-default);
    border-radius: var(--mt-radius-lg);
}
.drn-about__record-head {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3);
    margin-bottom: var(--mt-space-5);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    color: var(--mt-text-muted);
}
.drn-about__record-head::before {
    content: "";
    width: 8px; height: 8px;
    flex: none;
    border-radius: 2px;
    background: var(--mt-accent);
    transform: rotate(45deg);
}
.drn-about__record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--mt-space-6);
}
.drn-about__stat {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-1);
    padding-left: var(--mt-space-4);
    border-left: 2px solid rgba(var(--mt-brand-primary-rgb), 0.25);
}
.drn-about__stat-value {
    font-family: var(--mt-font-sans);
    font-weight: var(--mt-weight-black);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    color: var(--mt-brand-primary);
}
.drn-about__stat-label {
    font-size: var(--mt-text-sm);
    letter-spacing: var(--mt-tracking-wide);
    text-transform: uppercase;
    color: var(--mt-text-muted);
}

/* ── CTA ──────────────────────────────────────────────────── */
.drn-about__cta { margin-top: clamp(var(--mt-space-6), 3vw, var(--mt-space-8)); }
.drn-about__cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: 14px 30px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-brand-primary);
    color: var(--mt-neutral-0);
    font-size: 0.98rem;
    font-weight: var(--mt-weight-bold);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(var(--mt-brand-primary-rgb), 0.30);
    transition:
        background var(--mt-duration-fast) ease,
        box-shadow var(--mt-duration-fast) ease,
        transform var(--mt-duration-fast) var(--mt-ease-default);
}
.drn-about__cta-link:hover {
    background: var(--mt-brand-primary-hover);
    box-shadow: 0 10px 28px rgba(var(--mt-brand-primary-rgb), 0.42);
    transform: translateY(-2px);
}
.drn-about__cta-link i { transition: transform var(--mt-duration-fast) ease; }
.drn-about__cta-link:hover i { transform: translateX(4px); }

@media (max-width: 991px) {
    .drn-about__grid { grid-template-columns: 1fr; gap: var(--mt-space-8); }
    .drn-about__operator { max-width: 560px; }
    .drn-about__ledger { grid-template-columns: 1fr; } /* R1: certs back to one column on tablet/mobile */
}
@media (max-width: 575px) {
    .drn-about__cred { gap: var(--mt-space-3); padding: var(--mt-space-3) var(--mt-space-4); }
    .drn-about__cred-icon { width: 34px; height: 34px; }
    .drn-about__record-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   §13  CTA — "LAUNCH CONSOLE"
   ─────────────────────────────────────────────────────────
   Dark navy band reframed as a mission launch console: HUD
   corner frame, faint perspective ground-grid + scan, cyan //
   status eyebrow, and a launch-controls action cluster
   (control-rule + clear primary/secondary). Closes the journey
   (Operations Deck → Mission Manifest → Compliance Dossier →
   Launch Console). Background image + overlay opacity supported.
============================================================ */
.drn-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Only a slight trim (~9% off the top, 128→116) — keep the cinematic
       CTA height. */
    padding: clamp(var(--mt-space-12), 6.5vw, 116px) 0;
    color: var(--mt-neutral-0);
    background:
        var(--mt-gradient-glow) 110% -20% / 60% 100% no-repeat,
        linear-gradient(140deg,
            var(--mt-neutral-950) 0%,
            var(--mt-neutral-900) 55%,
            var(--mt-brand-primary-active) 155%);
}
.drn-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.drn-cta__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(140deg, var(--mt-neutral-950), var(--mt-neutral-900));
    opacity: var(--drn-cta-scrim, 0.7);
}
.drn-cta__grid {
    position: absolute;
    left: -10%; right: -10%; bottom: -2px;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 47px, rgba(var(--mt-brand-primary-rgb), 0.16) 47px 48px),
        repeating-linear-gradient(0deg,  transparent 0 47px, rgba(var(--mt-brand-primary-rgb), 0.16) 47px 48px);
    transform: perspective(460px) rotateX(70deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 92%);
            mask-image: linear-gradient(to top, #000 5%, transparent 92%);
}
.drn-cta__scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 150px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background: linear-gradient(180deg, transparent, var(--mt-accent), transparent);
    animation: drn-hero-scan 8s var(--mt-ease-default) infinite;
}

/* Console */
.drn-cta__console {
    position: relative;
    z-index: 3;
    max-width: 820px;
    padding: clamp(var(--mt-space-6), 3vw, var(--mt-space-10));
}
.drn-cta--center .drn-cta__console { margin-inline: auto; text-align: center; }
.drn-cta--left   .drn-cta__console { margin-inline: 0;    text-align: left; }
.drn-cta--right  .drn-cta__console { margin-left: auto;   text-align: right; }

.drn-cta__corner {
    position: absolute;
    width: 24px; height: 24px;
    border: 2px solid var(--mt-accent);
    opacity: 0.55;
}
.drn-cta__corner--tl { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.drn-cta__corner--tr { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.drn-cta__corner--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.drn-cta__corner--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.drn-cta__eyebrow {
    display: inline-block;
    margin-bottom: var(--mt-space-4);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    color: var(--mt-accent);
}
.drn-cta__eyebrow::before { content: "//"; margin-right: 0.5ch; opacity: 0.6; }
.drn-cta__title {
    margin: 0 0 var(--mt-space-4);
    font-family: var(--mt-font-sans);
    font-weight: var(--mt-weight-black);
    line-height: var(--mt-leading-tight);
    color: var(--mt-neutral-0);
    font-size: clamp(1.9rem, 4vw, 3rem);
}
.drn-cta__subtitle {
    margin: 0;
    font-size: var(--mt-text-md);
    line-height: var(--mt-leading-normal);
    color: var(--mt-neutral-300);
    max-width: 60ch;
}
.drn-cta--center .drn-cta__subtitle { margin-inline: auto; }
.drn-cta--right  .drn-cta__subtitle { margin-left: auto; }

/* Launch-controls action cluster (control-rule + clear actions) */
.drn-cta__actions {
    position: relative;
    margin-top: var(--mt-space-8);
    padding-top: var(--mt-space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-4);
}
.drn-cta__actions::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 2px;
    background: var(--mt-accent);
}
.drn-cta--center .drn-cta__actions { justify-content: center; }
.drn-cta--left   .drn-cta__actions { justify-content: flex-start; }
.drn-cta--left   .drn-cta__actions::before { left: 0; transform: none; }
.drn-cta--right  .drn-cta__actions { justify-content: flex-end; }
.drn-cta--right  .drn-cta__actions::before { left: auto; right: 0; transform: none; }

.drn-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2);
    padding: 14px 30px;
    border: 2px solid transparent;
    border-radius: var(--mt-radius-full);
    font-size: 0.98rem;
    font-weight: var(--mt-weight-bold);
    text-decoration: none;
    transition:
        background var(--mt-duration-fast) ease,
        color var(--mt-duration-fast) ease,
        border-color var(--mt-duration-fast) ease,
        transform var(--mt-duration-fast) var(--mt-ease-default),
        box-shadow var(--mt-duration-fast) ease;
}
.drn-cta__btn:hover { transform: translateY(-2px); }
.drn-cta__cmd { font-size: 0.85em; opacity: 0.9; }

/* Primary (solid = filled cyan deploy command; outline = cyan outline) */
.drn-cta__btn--primary { background: var(--mt-accent); color: var(--mt-neutral-950); }
.drn-cta__btn--primary:hover {
    background: var(--mt-accent-hover);
    color: var(--mt-neutral-950);
    box-shadow: 0 10px 26px rgba(255, 255, 255, 0.12);
}
.drn-cta__btn--primary.drn-cta__btn--outline {
    background: transparent;
    color: var(--mt-accent);
    border-color: var(--mt-accent);
}
.drn-cta__btn--primary.drn-cta__btn--outline:hover {
    background: var(--mt-accent);
    color: var(--mt-neutral-950);
}

/* Secondary (outline ghost = default; solid = white fill) */
.drn-cta__btn--secondary {
    background: transparent;
    color: var(--mt-neutral-0);
    border-color: rgba(255, 255, 255, 0.40);
}
.drn-cta__btn--secondary:hover { border-color: var(--mt-accent); color: var(--mt-accent); }
.drn-cta__btn--secondary.drn-cta__btn--filled {
    background: var(--mt-neutral-0);
    color: var(--mt-neutral-950);
    border-color: var(--mt-neutral-0);
}
.drn-cta__btn--secondary.drn-cta__btn--filled:hover {
    background: var(--mt-neutral-100);
    color: var(--mt-neutral-950);
}

.drn-cta__note {
    margin: var(--mt-space-6) 0 0;
    font-family: var(--mt-font-mono);
    font-size: var(--mt-text-sm);
    letter-spacing: var(--mt-tracking-wide);
    color: var(--mt-neutral-400);
}

@media (max-width: 575px) {
    .drn-cta__corner--tr,
    .drn-cta__corner--bl { display: none; }
    .drn-cta__actions { flex-direction: column; align-items: stretch; }
    .drn-cta__btn { width: 100%; justify-content: center; }
}


/* ============================================================
   §14  REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .drn-hero__scan,
    .drn-scope__sweep,
    .drn-scope__drone,
    .drn-hero__locator-dot::after,
    .drn-cta__scan { animation: none; }
    .drn-hero__locator-dot::after { opacity: 0; }
    .drn-hero__scan { opacity: 0.04; }
    .drn-hero__btn:hover,
    .drn-services__cta-link:hover,
    .drn-about__cta-link:hover,
    .drn-about__operator-cta:hover,
    .drn-cta__btn:hover { transform: none; }
    .drn-mission:hover .drn-mission__body,
    .drn-mission:focus-within .drn-mission__body,
    .drn-mission:hover .drn-mission__cta i,
    .drn-mission:focus-within .drn-mission__cta i,
    .drn-services__cta-link:hover i,
    .drn-about__cta-link:hover i,
    .drn-about__operator-cta:hover i { transform: none; }
    .drn-mission__num::after { transition: none; }
}


/* ============================================================
   §15  HEADER — "MISSION CONTROL BAR" (structural override)
   ─────────────────────────────────────────────────────────
   Styles the drones structural header override
   (templates/drones/partials/site_header.php). Loads after the
   shared 02-layout.css header layer, so these rules win by source
   order. Every selector is scoped to .drn-mcb (the override root)
   EXCEPT the two base .site-header rules below, which are safe on
   any drones page. Presentation only — no markup/data dependency
   beyond the decorative hooks the override file adds. Tokens only;
   cyan instrument lines use currentColor (= --mt-accent); no
   animation (a fixed bar stays calm). Identity: locator dot +
   mono "//" marker (Zone A) · HUD corner brackets (Zone B) ·
   filled-cyan "▸" command CTA (bookends the Launch Console) ·
   cyan scan-line edge (Zone C handoff into the hero).
============================================================ */
/* Soft separation between the white navbar and the dark hero. */
.site-header { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
/* Accent line → blue → aviation-cyan scan edge, tying header to hero.
   Cyan made more dominant + a soft blue glow bleeds below the edge so the
   white-bar → dark-hero seam reads as an instrumented boundary, not an
   abrupt tonal cut (refinement #4). Height unchanged → spacer unaffected. */
.site-header .header-divider {
    height: 3px;
    background: linear-gradient(90deg,
        rgba(var(--mt-brand-primary-rgb), 0.15),
        var(--mt-brand-primary) 38%,
        var(--mt-accent) 88%);
    box-shadow: 0 3px 10px rgba(var(--mt-brand-primary-rgb), 0.25);
}

/* ── Zone A: locator dot (cyan signal + static ring) ───────── */
.drn-mcb .top-links .drn-mcb__dot {
    position: relative;
    display: inline-block;
    width: 9px; height: 9px;
    margin-right: 0.6ch;
    vertical-align: middle;
    border-radius: var(--mt-radius-full);
    color: var(--mt-accent);
    background: currentColor;
    flex: none;
}
/* Crisper "signal acquired" ring — higher contrast at small size (#5). */
.drn-mcb .top-links .drn-mcb__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: var(--mt-radius-full);
    border: 1px solid currentColor;
    opacity: 0.6;
}
/* Mono "//" marker before the brand — the journey's eyebrow vocabulary. */
.drn-mcb .top-links .fw-semibold::before {
    content: "// ";
    font-family: var(--mt-font-mono);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wide);
    color: var(--mt-accent);
    opacity: 0.9;
}

/* ── Zone B: HUD corner brackets framing the command row ───── */
.drn-mcb__row { position: relative; }
.drn-mcb__corner {
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid var(--mt-accent);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}
/* Tighter inset so the brackets hug the logo↔nav content row rather than
   floating at the container padding edge (refinement #2). */
.drn-mcb__corner--tl { top: 12px;    left: var(--mt-space-2);  border-right: 0; border-bottom: 0; }
.drn-mcb__corner--tr { top: 12px;    right: var(--mt-space-2); border-left: 0;  border-bottom: 0; }
.drn-mcb__corner--bl { bottom: 12px; left: var(--mt-space-2);  border-right: 0; border-top: 0; }
.drn-mcb__corner--br { bottom: 12px; right: var(--mt-space-2); border-left: 0;  border-top: 0; }

/* ── Zone B: command CTA — restyle the admin's is_cta nav button
   (rendered by the shared engine as .btn.btn-primary) into a
   filled-cyan "▸" command action. Bookends the Launch Console.
   Scoped to the in-header nav only; non-CTA links untouched. ── */
.drn-mcb .navbar-nav .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    background: var(--mt-accent);
    border-color: var(--mt-accent);
    color: var(--mt-neutral-950);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wide);
}
.drn-mcb .navbar-nav .btn-primary::before {
    content: "\25B8";
    font-size: 0.85em;
    opacity: 0.9;
}
.drn-mcb .navbar-nav .btn-primary:hover,
.drn-mcb .navbar-nav .btn-primary:focus {
    background: var(--mt-accent-hover);
    border-color: var(--mt-accent-hover);
    color: var(--mt-neutral-950);
}

/* ── Mobile: drop the HUD brackets so the collapsed bar stays
   clean and uncluttered (the dot + scan edge carry identity). ── */
@media (max-width: 991px) {
    .drn-mcb__corner { display: none; }
}


/* ============================================================
   §16  FOOTER — "GROUND STATION" (drones footer identity · A2)
   ─────────────────────────────────────────────────────────
   The mission's home base — the persistent ground terminal that
   CLOSES the drones journey and bookends the Mission Control Bar
   (Mission Control Bar -> Operations Deck -> Mission Manifest ->
   Compliance Dossier -> Mission Archive -> Launch Console ->
   GROUND STATION).

   Overrides shared 02-layout.css footer bits for the drones
   template ONLY (this file is template-local, scoped to
   .site-footer). PRESENTATION ONLY — no markup / data / nav /
   renderer / module change. Reuses ONLY existing drones vocabulary;
   no new visual concepts:
     • Bookend signature — the Mission Control Bar Zone-A locator
       dot + mono "//" eyebrow, reproduced once on the Company line
       (CSS-only via h4 pseudo-elements; no footer markup touched).
     • Instrument boundary — the shared .site-footer::before top
       glow is repurposed into the cyan scan-line edge that RECEIVES
       the Launch Console, mirroring the header→hero seam (§15).
     • Telemetry close — the bottom copyright row is restyled onto
       the deep-blue status band (--mt-surface-utility, the same
       band that opens the header Status Strip) with a mono "//"
       marker, turning the page's full-stop into the bookend.
   Tokens only; a fixed footer stays calm (no animation), matching
   the Mission Control Bar discipline.
============================================================ */
/* Tighten the CTA → Footer gap (Task 1). */
.site-footer { padding-top: clamp(48px, 5vw, 56px); }

/* ── Instrument boundary: repurpose the shared centred top glow
   (.site-footer::before, 02-layout.css) into the full-width cyan
   scan-line edge that receives the Launch Console — the header→hero
   seam (§15) run in reverse. Overrides left/width/transform/opacity
   from the shared rule (this layer loads later → wins). ── */
.site-footer::before {
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    transform: none;
    opacity: 1;
    background: linear-gradient(90deg,
        rgba(var(--mt-brand-primary-rgb), 0.15),
        var(--mt-brand-primary) 38%,
        var(--mt-accent) 88%);
    box-shadow: 0 3px 12px rgba(var(--mt-brand-primary-rgb), 0.25);
}

/* ── Bookend signature: the Mission Control Bar Zone-A locator dot
   + mono "//" eyebrow, on the Company Information line (the footer's
   brand-acquired line). CSS-only — no footer markup change. The two
   absolutely-positioned pseudos stack to the left of the company
   name: "● // {brand}", matching the header's opening grammar. ── */
.site-footer .col-lg-4 h4.fw-bold {
    position: relative;
    padding-left: 2.7ch;
}
/* locator dot (cyan signal + soft ring), centred on the title line */
.site-footer .col-lg-4 h4.fw-bold::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px; height: 9px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-accent);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.18); /* cyan ring = --mt-accent @ low alpha */
}
/* mono "//" eyebrow — the journey's eyebrow vocabulary */
.site-footer .col-lg-4 h4.fw-bold::after {
    content: "//";
    position: absolute;
    left: 1.4ch;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mt-font-mono);
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wide);
    color: var(--mt-accent);
    opacity: 0.9;
}

/* Section titles → operational identity (uppercase + cyan diamond tick). */
.site-footer .footer-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6ch;
    font-size: var(--mt-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--mt-tracking-wide);
    color: var(--mt-neutral-0);
}
.site-footer .footer-title::before {
    content: "";
    width: 8px; height: 8px;
    flex: none;
    border-radius: 2px;
    background: var(--mt-accent);
    transform: rotate(45deg);
}

/* Links → cyan hover for drone consistency. */
.site-footer .footer-link:hover { color: var(--mt-accent); }

/* Social icons → bordered tiles, cyan on hover. */
.site-footer .footer-social { display: flex; gap: var(--mt-space-2); }
.site-footer .footer-social-link {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--mt-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--mt-neutral-300);
    transition:
        background var(--mt-duration-fast) ease,
        border-color var(--mt-duration-fast) ease,
        color var(--mt-duration-fast) ease;
}
.site-footer .footer-social-link:hover {
    background: rgba(var(--mt-brand-primary-rgb), 0.20);
    border-color: var(--mt-accent);
    color: var(--mt-accent);
    transform: none;
}

/* Map frame + divider → echo the drone HUD frame language. */
.site-footer .footer-map { border: 1px solid rgba(var(--mt-brand-primary-rgb), 0.22); }
.site-footer .footer-line {
    background: linear-gradient(to right,
        transparent,
        rgba(var(--mt-brand-primary-rgb), 0.55),
        var(--mt-accent),
        transparent);
}

/* ── Telemetry close: the bottom copyright row (the .row that
   follows the .footer-line divider) restyled as a low-opacity blue
   wash in the brand-primary hue — a calm echo of the header Status
   Strip band (kept quiet so it doesn't dominate the dark footer's
   end). The page still opens and closes on the same blue → the
   Ground Station ↔ Mission Control Bar bookend, just softer.
   Content unchanged; the footer-line above is its scan-line lead-in. ── */
.site-footer hr.footer-line + .row {
    position: relative;
    background: rgba(var(--mt-brand-primary-rgb), 0.12); /* low-opacity wash — calm close, not a saturated billboard */
    border: 1px solid rgba(var(--mt-brand-primary-rgb), 0.45);
    border-radius: var(--mt-radius-sm);
    padding: var(--mt-space-3) var(--mt-space-4);
    color: rgba(255, 255, 255, 0.82); /* lift muted copyright onto the blue band */
}
/* mono "//" telemetry marker before the copyright line */
.site-footer hr.footer-line + .row .col-md-6:first-child::before {
    content: "// ";
    font-family: var(--mt-font-mono);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wide);
    color: var(--mt-accent);
    opacity: 0.9;
}

/* ── Mobile (≤767): shared CSS centres the footer. Drop the "//"
   eyebrow and inline the locator dot before the centred company
   name so identity survives without misaligning (mirrors the header
   dropping its HUD brackets ≤991 — the dot carries identity). ── */
@media (max-width: 767px) {
    .site-footer .col-lg-4 h4.fw-bold { padding-left: 0; }
    .site-footer .col-lg-4 h4.fw-bold::after { display: none; }
    .site-footer .col-lg-4 h4.fw-bold::before {
        position: static;
        transform: none;
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.6ch;
    }
}


/* ============================================================
   §17  JOURNEY TRANSITIONS — A4 housekeeping consistency pass
   ─────────────────────────────────────────────────────────
   The inter-section seams reuse <div class="header-divider"> at the
   bottom of the hero / services / about / cta partials. The refined
   cyan "instrument boundary" previously lived ONLY on the bookends
   (.site-header .header-divider §15 + .site-footer::before §16);
   the internal seams fell back to the shared 4px all-blue bar
   (02-layout.css), so the journey's transitions spoke two dialects
   (QA F-1). Unify them to the same cyan boundary as the header→hero
   seam. Drones-local (this file loads only on drones); the header
   rule (.site-header .header-divider) is more specific, so the
   header keeps its own copy; the footer uses ::before, separate.
   PRESENTATION ONLY — no markup / data / module change.
============================================================ */
.header-divider {
    height: 3px;
    background: linear-gradient(90deg,
        rgba(var(--mt-brand-primary-rgb), 0.15),
        var(--mt-brand-primary) 38%,
        var(--mt-accent) 88%);
    box-shadow: 0 3px 10px rgba(var(--mt-brand-primary-rgb), 0.25);
}

/* Drop the section divider that lands immediately above the footer:
   the Ground Station already draws its own cyan instrument boundary
   (.site-footer::before §16), so the trailing section seam would
   double it (QA F-2). The render loop emits each section then the
   footer with no wrapper between them (web/index.php), so the last
   divider is a direct previous sibling of .site-footer. Content-
   independent — matches whichever section ends the flow, and is
   inert on pages with no adjacent divider. Degrades gracefully where
   :has() is unsupported (falls back to the prior minor doubling). ── */
.header-divider:has(+ .site-footer) { display: none; }


/* ============================================================
   §18  PROCESS FLOW — drones reskin (LIGHT "Mission Sequence")
   ─────────────────────────────────────────────────────────
   Template-local reskin of the universal process_flow.php classes
   (.process-flow-*). Drones identity kept on a LIGHT surface to
   preserve homepage rhythm. CSS-ONLY — no markup, no JS, no editor,
   no schema/field change. Loads after 03-sections-home-process-flow
   -v4.css; selectors are prefixed with .process-flow-section for
   specificity safety, so only the declared properties change (mobile
   reposition/hide rules from the shared file still apply).
   Vocabulary: "//" mono eyebrow · mono step numerals · squared HUD
   icon tiles · aviation-cyan flight-path connectors · cyan hover
   framing · sharper corners. (Cyan literals = --mt-accent #06B6D4 at
   alpha — the token has no -rgb companion.)
============================================================ */

/* Eyebrow → mono "//" marker (replaces the shared dash bar). */
.process-flow-section .pf-eyebrow { padding-left: 0; }
.process-flow-section .pf-eyebrow::before {
    content: "//";
    position: static;
    width: auto; height: auto;
    margin-right: 0.5ch;
    background: none;
    transform: none;
    font-family: var(--mt-font-mono);
    font-weight: var(--mt-weight-semibold);
    color: var(--mt-accent);
    opacity: 0.85;
}

/* Cards → sharper "console panel" corners + blue→cyan scan accent +
   cyan hover border (light surface kept). */
.process-flow-section .process-flow-step { border-radius: var(--mt-radius-md); }
.process-flow-section .process-flow-step::before {
    background: linear-gradient(90deg, var(--mt-brand-primary), var(--mt-accent));
}
.process-flow-section .process-flow-step:hover {
    border-color: rgba(6, 182, 212, 0.45); /* aviation cyan */
}

/* Stronger step numbering → squared mono telemetry chip (was a faint
   circle); fills brand on hover. */
.process-flow-section .pf-step-number {
    width: auto; height: auto;
    min-width: 34px;
    padding: 4px 8px;
    border-radius: var(--mt-radius-sm);
    background: rgba(var(--mt-brand-primary-rgb), 0.10);
    color: var(--mt-brand-primary);
    font-family: var(--mt-font-mono);
    font-size: 0.95rem;
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-wide);
}
.process-flow-section .process-flow-step:hover .pf-step-number {
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
}

/* Icon → squared HUD tile with a cyan instrument ring; calm fill on
   hover (drops the spring-scale). */
.process-flow-section .process-flow-icon {
    border-radius: var(--mt-radius-md);
    background: rgba(var(--mt-brand-primary-rgb), 0.08);
    color: var(--mt-brand-primary);
    box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.25); /* cyan ring */
}
.process-flow-section .process-flow-step:hover .process-flow-icon {
    background: var(--mt-brand-primary);
    color: var(--mt-text-inverse);
    transform: none;
    box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.45);
}

/* Connector → visible aviation-cyan dashed flight-path (echoes the
   hero survey route). Mobile/tablet keep the shared display:none.
   NOTE: superseded by the grid layout in §18.1 (hidden there). */
.process-flow-section .process-flow-step.has-connector::after {
    height: 0;
    background: none;
    border-top: 2px dashed var(--mt-accent);
    opacity: 0.7;
}


/* ============================================================
   §18.1  PROCESS FLOW — full-workflow grid (CSS-only, ≥768px)
   ─────────────────────────────────────────────────────────
   Converts the single-row horizontal-scroll track into a wrapping
   responsive grid so ALL 4–8 steps are visible at once (no scroll).
   Desktop (≥992) = 3 per row → the 6-step workflow renders 3 + 3
   (balanced rows); tablet (768–991) = 2 per row. Mobile (≤767) is intentionally NOT touched
   — the shared vertical stack still applies (rules below are either
   ≥768-media-scoped or no-ops at ≤767). Drones-local; no markup, JS,
   editor, schema, or field change. The scroll JS self-disables (no
   overflow → updateFades() flags at-start+at-end) and its arrows /
   fades are hidden below. The §18 icon tiles, number chips and card
   styling are preserved (untouched here).
============================================================ */
.process-flow-section .process-flow-scroll {
    overflow-x: visible;   /* stop the scroll viewport → grid lays out fully */
    scroll-snap-type: none;
    cursor: default;       /* no drag-scroll in grid mode */
}
@media (min-width: 768px) {
    .process-flow-section .process-flow-steps {
        display: grid;
        grid-auto-flow: row;                          /* wrap to rows, not one scroll row */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    .process-flow-section .process-flow-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Scroll-only chrome — unnecessary in grid mode. */
.process-flow-section .pf-nav,
.process-flow-section .pf-fade { display: none; }
/* Horizontal connector is meaningless across wrapped rows — disable it
   in grid mode (icon tiles / number chips / card styling are kept). */
.process-flow-section .process-flow-step.has-connector::after { display: none; }


/* ============================================================
   HERO PURPOSE — Internal "Mission Briefing Header"
   (.drn-hero--internal)
   ------------------------------------------------------------
   A lighter, shorter, page-oriented variant of the flagship
   "Operations Deck". HOMEPAGE (no modifier) is UNCHANGED.

   APPEARANCE MODE (template-owned, per the WEB360 Internal Hero
   standard): on an internal page the drones decorative ATMOSPHERE
   is switched OFF and the two-zone deck reflows to a single column,
   so the band reads as a page header — not the homepage deck.
   Structural behaviour (compact height, type scale, hidden
   Description / Highlights / Secondary CTA) is inherited from the
   universal layer; this block changes drones APPEARANCE only.

   KEEPS : background image/video, overlay, eyebrow text, title,
           subtitle, primary CTA, drones token/type identity.
   HIDES : ground grid, HUD corners, scan sweep, radar ops scope,
           locator pulse, feed-frame HUD brackets.
   Hiding is display-only — content/data are preserved. Alignment
   system untouched. All rules scoped to .drn-hero--internal, so
   the homepage hero is byte-for-byte unaffected.
============================================================ */
.drn-hero--internal {
    /* Compact briefing band — well below the homepage 660–780px stage. */
    min-height: clamp(300px, 42vh, 420px);
    padding: var(--mt-section-py-sm, 2.5rem) 0;
}

/* Briefing-scale headline (focal, but not a marketing statement) */
.drn-hero--internal .drn-hero__title {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    margin-bottom: var(--mt-space-3);
}
.drn-hero--internal .drn-hero__subtitle {
    margin-bottom: var(--mt-space-4);
}

/* Hidden on an internal header (content preserved in the DB; display only) */
.drn-hero--internal .drn-hero__desc,
.drn-hero--internal .drn-hero__caps,
.drn-hero--internal .drn-hero__btn--ghost {
    display: none;
}

/* ATMOSPHERE OFF — these decorative layers belong to the homepage
   Operations Deck only; they must not render on an internal header. */
.drn-hero--internal .drn-hero__ground,
.drn-hero--internal .drn-hero__hud,
.drn-hero--internal .drn-hero__scan,
.drn-hero--internal .drn-hero__scope,
.drn-hero--internal .drn-hero__locator-dot,
.drn-hero--internal .drn-hero__feed-frame::before,
.drn-hero--internal .drn-hero__feed-frame::after {
    display: none;
}

/* With the decorative scope removed, the two-zone deck reflows to a
   single-column header band — no reserved aside space / empty gap. */
.drn-hero--internal .drn-hero__layout {
    grid-template-columns: 1fr;
}