/* =============================================================
   Eldridge Defense & Security — brand override
   Loaded AFTER style.css so the values below win.

   Brand teal: #0D5C75   (extracted from EDS pitch deck — the
                          dominant accent color used 285x across slides)
   Companion: #E8F4F8   (soft teal-tint for highlights)

   This single override flips the DSN theme's --theme-color
   variable to brand teal everywhere it's used (buttons,
   custom cursor, accent dots, hover-fills, service icons).
   ============================================================= */

:root,
:root .v-light,
:root .v-light-head,
:root .v-dark,
:root .v-dark-head {
    --theme-color: #0D5C75;
    --theme-color-font: #ffffff;
}

@media only screen and (max-width: 991px) {
    .v-dark-head-mobile {
        --theme-color: #0D5C75;
    }
}

/* The home-page service grid uses a separate icon-tint scope.
   Match it to the brand teal too so the Defense / Space /
   Critical Materials / Energy icons read as part of the family. */
:root .dsn-icon-theme-color {
    --theme-color: #0D5C75;
}

/* When .background-theme is used as a SECTION fill (e.g. the contact
   addresses panel on contact.html), the teal is now the bg — not the
   cream this rule originally assumed. Force light foreground colors
   so headings, body text, and icons stay legible on the teal field. */
:root .v-dark .background-theme,
:root .v-dark.background-theme,
:root .v-dark-head .background-theme,
:root .v-dark-head.background-theme,
:root .background-theme {
    --font-color: rgba(255, 255, 255, 0.92);
    --heading-color: #ffffff;
}
.background-theme,
.background-theme p,
.background-theme h1, .background-theme h2, .background-theme h3,
.background-theme h4, .background-theme h5, .background-theme h6,
.background-theme .sm-title-block,
.background-theme .service_title,
.background-theme .heading-color {
    color: #ffffff !important;
}
.background-theme .dsn-icon,
.background-theme .dsn-icon i,
.background-theme .dsn-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Custom shorthand variables — available if you ever want to
   author additional teal touches without re-typing the hex. */
:root {
    --eds-teal: #0D5C75;
    --eds-teal-soft: #E8F4F8;
    --eds-teal-deep: #094355;
}

/* The "Get connected" pill button on the hero footer / contact CTA
   inherits --theme-color via the theme's .dsn-bg-before fill rule.
   Above already covers it. The lines below add a touch of polish
   so the icon glyph stays bright white when the teal fills the
   button on hover, regardless of which color theme is active. */
.dsn-def-btn .dsn-btn:hover .dsn-icon i,
.dsn-def-btn .dsn-btn:hover .dsn-icon svg {
    color: #ffffff;
    fill: #ffffff;
}

/* Slight border accent on the hero CTA buttons in the dark theme,
   so the button silhouette is visible before hover. */
.v-dark .dsn-btn.dsn-border.border-color-default,
.v-dark-head .dsn-btn.dsn-border.border-color-default {
    border-color: rgba(13, 92, 117, 0.6);
}
.v-dark .dsn-btn.dsn-border.border-color-default:hover,
.v-dark-head .dsn-btn.dsn-border.border-color-default:hover {
    border-color: var(--eds-teal);
}

/* The "REACH OUT TO US" button (and any other .dsn-def-btn pill on the
   site) animates a circular :before from the icon-size to full button
   width on hover. Override its color to brand teal — wins over the
   theme's default which paints it the parent's bg-color (dark grey). */
.dsn-def-btn .dsn-btn .dsn-icon.dsn-bg-before:before,
.dsn-def-btn .dsn-icon.dsn-bg-before:before {
    background-color: var(--eds-teal) !important;
}
/* Make sure the icon glyph stays bright white whether the pill is at
   rest (icon sitting in a teal circle) or fully filled (white on teal). */
.dsn-def-btn .dsn-btn .dsn-icon i,
.dsn-def-btn .dsn-btn .dsn-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* And lift the title-btn text to white when the pill fills with teal,
   so contrast against the expanding teal field stays clean. */
.dsn-def-btn .dsn-btn:hover .title-btn {
    color: #ffffff !important;
}

/* ============================================================
   AJAX-validated form field (contact form email)
   Shows a small ✓ / ✗ inside the input and a status line below.
   ============================================================ */
.eds-validated-field {
    position: relative;
}
.eds-validated-field input {
    padding-right: 38px !important;
}
.eds-validate-status {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.2s ease;
    opacity: 0;
}
.eds-validate-status.is-checking {
    opacity: 0.6;
    color: rgba(255,255,255,0.6);
}
.eds-validate-status.is-valid {
    opacity: 1;
    background: var(--eds-teal);
    color: #fff;
}
.eds-validate-status.is-invalid {
    opacity: 1;
    background: #c62828;
    color: #fff;
}
.eds-validate-msg {
    font-size: 11px;
    margin-top: 4px;
    min-height: 14px;
    color: rgba(255,255,255,0.6);
    transition: color 0.2s ease;
}
.eds-validate-msg.is-valid { color: var(--eds-teal); }
.eds-validate-msg.is-invalid { color: #ef5350; }

/* ============================================================
   CAPTCHA — revealed after email validates (event-driven)
   ============================================================ */
.eds-captcha-wrap {
    margin-top: 12px;
}
.eds-captcha-fadein {
    animation: eds-captcha-fade 0.45s ease-out;
}
@keyframes eds-captcha-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.eds-captcha-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(13, 92, 117, 0.08);
    border: 1px solid rgba(13, 92, 117, 0.35);
    border-radius: 6px;
}
.eds-captcha-img {
    height: 44px;
    width: auto;
    background: #fff;
    border-radius: 4px;
    flex: 0 0 auto;
}
.eds-captcha-reload {
    background: transparent;
    color: var(--eds-teal);
    border: 1px solid rgba(13, 92, 117, 0.5);
    border-radius: 4px;
    width: 32px; height: 32px;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    flex: 0 0 auto;
    transition: background 0.15s ease, color 0.15s ease;
}
.eds-captcha-reload:hover { background: var(--eds-teal); color: #fff; }
.eds-captcha-row input[type="text"] {
    flex: 1 1 180px;
    min-width: 140px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 10px 12px;
    border-radius: 4px;
    font-family: Menlo, Consolas, monospace;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}
@media print { .eds-captcha-wrap { display: none !important; } }

/* ============================================================
   Vouch humanity badge — replaces the CAPTCHA. This client runs
   in hidden mode (invisible badge), so the wrap must contribute
   ZERO layout: no reserved height, no jump when the async check
   resolves. eds-contact-form.js toggles .eds-vouch-collapsed via
   a MutationObserver — collapsed whenever the mount is empty or
   the widget reports hidden, expanded only when a real visible
   badge (or a failure message) renders.
   ============================================================ */
.eds-vouch-wrap { margin: 0; }
.eds-vouch-wrap.eds-vouch-collapsed { display: none !important; margin: 0; }
.eds-vouch-wrap:not(.eds-vouch-collapsed) { margin-top: 12px; }
/* Neutralize the widget's default 280x58 min-box inside the drawer so an
   empty pre-resolution mount reserves nothing and a visible badge hugs its
   own content. */
.eds-vouch-mount.vouch-widget { min-width: 0; min-height: 0; }
@media print { .eds-vouch-wrap { display: none !important; } }

/* ============================================================
   Pin the site-header visible at all times.
   The DSN theme uses a scroll-driven GSAP tween that translates the
   site-header off-screen while the page is at scrollY=0 (originally
   relying on a hero behind it). That made the header "draw last" on
   every navigation, even though the HTML is rendered server-side via
   the include/eds-head.php partial. Neutralizing the GSAP transform
   keeps the brand lockup, "Get in Touch" CTA, and hamburger toggle
   visible from the very first paint.
   ============================================================ */
body.eds-pin-header .site-header {
    transform: none !important;
    translate: none !important;
    /* Defeat the GSAP intro tween (gsap.set(menu, {yPercent: -100,
       autoAlpha: 0})) that hides the header on every navigation until
       custom.js + GSAP load and animate it in. CSS !important beats
       GSAP's plain inline styles, so the header is visible from the
       very first paint regardless of JS readiness. */
    opacity: 1 !important;
    visibility: visible !important;
    background-color: rgba(14, 26, 35, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* Suppress the DSN menu open/close cover-and-uncover overlay. Both
   .bg-load layers (the SVG sweep AND the dark backgroundMain fade)
   are decorative; the menu itself slides in via .dsn-open class
   transitions just fine without them. Hiding them avoids the
   overlay drawing over the header instead of the body content. */
#site_menu_header .bg-load { display: none !important; }
/* Belt-and-suspenders: even if a stale cache still serves the old
   include with the d-none class on the header, force it visible. */
body.eds-pin-header #site_menu_header.d-none { display: flex !important; }
/* Clearance below the now-always-visible 115 px-tall fixed bar:
   - Pages WITHOUT a hero (the home page) — first child of #page_wrapper
     gets a top-pad so it doesn't slip under the header.
   - Pages WITH a hero — bump the hero's own top-pad so its title clears
     the bar (default header-normal padding-top was 90 px, not enough). */
body.eds-pin-header #page_wrapper > *:first-child:not(#dsn_header) {
    padding-top: 110px;
}
body.eds-pin-header #dsn_header.header-normal {
    padding-top: 130px;
}

/* ============================================================
   Get-in-Touch trigger button (lives next to the hamburger toggle)
   ============================================================ */
.eds-cta-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    /* Site header is `flex; justify-content: space-between`. Logo sits at
       the far-left, hamburger at the far-right; this trigger is a third
       flex item that — without help — would land in the middle. Push it
       to the right edge so it pairs visually with the hamburger. */
    margin-left: auto;
    margin-right: 14px;
    background: var(--eds-teal);
    border: 1px solid var(--eds-teal);
    color: #fff;
    font: 600 11px/1 var(--body-font, "Helvetica Neue", Arial, sans-serif);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    z-index: 10;
}
.eds-cta-trigger:hover,
.eds-cta-trigger:focus-visible {
    background: transparent;
    color: var(--eds-teal);
    outline: none;
    box-shadow: 0 0 0 1px var(--eds-teal);
    transform: translateY(-1px);
}
.eds-cta-trigger .eds-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 575px) {
    /* Tight space on mobile — keep both icon + text but tighten padding. */
    .eds-cta-trigger { padding: 0 12px; gap: 6px; font-size: 10px; height: 32px; margin-right: 10px; }
}

/* ============================================================
   Contact drawer — slides in from the right edge
   Width: 420 px on desktop, full width on mobile/tablet (<992 px).
   Backdrop fades in alongside the slide. ESC, backdrop click, and
   close-button each dismiss.
   ============================================================ */
.eds-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 12, 18, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10000;
}
.eds-drawer-backdrop.is-open { opacity: 1; }

.eds-contact-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 420px;
    background: #0e1a23;
    color: #fff;
    box-shadow: -24px 0 60px -10px rgba(0,0,0,0.55);
    /* !important here defends against the page-transition CSS that sets
       transform:none on slide-targets; the drawer is a separate widget
       and must keep its own slide animation. */
    transform: translateX(100%) !important;
    transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    z-index: 10001;
    border-left: 3px solid var(--eds-teal);
    display: flex;
    flex-direction: column;
}
@media only screen and (max-width: 575px) {
    .eds-contact-drawer { max-width: 100%; border-left: none; }
}
.eds-contact-drawer.is-open { transform: translateX(0) !important; }

.eds-drawer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(13, 92, 117, 0.15);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.eds-drawer-close:hover,
.eds-drawer-close:focus-visible {
    background: var(--eds-teal);
    border-color: var(--eds-teal);
    color: #fff;
    outline: none;
    transform: rotate(90deg);
}

.eds-drawer-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 36px 28px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--eds-teal) transparent;
}
.eds-drawer-scroll::-webkit-scrollbar { width: 6px; }
.eds-drawer-scroll::-webkit-scrollbar-thumb { background: var(--eds-teal); border-radius: 3px; }

.eds-drawer-header {
    margin-bottom: 22px;
    padding-right: 38px;   /* keep clear of the X */
}
.eds-drawer-eyebrow {
    color: var(--eds-teal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.eds-drawer-title {
    font-size: 30px;
    font-weight: 700;
    margin: 6px 0 12px;
    line-height: 1.1;
    color: #fff;
}
.eds-drawer-intro {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    margin: 0;
}

/* Form layout inside the drawer — single column, tighter spacing
   than the page-mounted version. */
.eds-drawer-form .form-group { margin-bottom: 14px; }
.eds-drawer-form .entry-box input,
.eds-drawer-form .entry-box textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 13px;
    width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.eds-drawer-form .entry-box input::placeholder,
.eds-drawer-form .entry-box textarea::placeholder {
    color: rgba(255,255,255,0.45);
}
.eds-drawer-form .entry-box input:focus,
.eds-drawer-form .entry-box textarea:focus {
    border-color: var(--eds-teal);
    background: rgba(13, 92, 117, 0.10);
    outline: none;
}
.eds-drawer-form .eds-validate-msg { font-size: 11px; }

.eds-drawer-submit-row {
    margin-top: 18px;
}
.eds-drawer-submit {
    width: 100%;
    padding: 14px 18px;
    background: var(--eds-teal);
    color: #fff;
    border: 1px solid var(--eds-teal);
    border-radius: 4px;
    font: 700 12px/1 var(--body-font, "Helvetica Neue", Arial, sans-serif);
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.eds-drawer-submit:hover:not(:disabled),
.eds-drawer-submit:focus-visible {
    background: transparent;
    color: var(--eds-teal);
    outline: none;
    transform: translateY(-1px);
}
.eds-drawer-submit:disabled { opacity: 0.6; cursor: wait; }

.eds-drawer-footer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(13, 92, 117, 0.45);
}
.eds-drawer-footer-title {
    color: var(--eds-teal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.eds-drawer-offices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
}
@media only screen and (min-width: 480px) {
    .eds-drawer-offices { grid-template-columns: repeat(3, 1fr); }
}
.eds-drawer-office { padding-left: 10px; border-left: 2px solid var(--eds-teal); }
.eds-drawer-office-label {
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* Make the in-drawer attach uploader visually consistent with the rest
   of the form (the global .eds-attach-* rules handle the look already;
   this just tightens spacing for the narrower drawer). */
.eds-drawer-form .eds-attach-dropzone { padding: 14px; }
.eds-drawer-form .eds-attach-prompt   { font-size: 13px; }

/* ============================================================
   "Reach Out To Us" CTA — hover spacing fix
   At hover the chevron icon slides 25 px right inside its 50 px
   circle, ending up near the circle's right edge. Combined with the
   default 10 px gap between the icon container and the title, the
   chevron tip sits ~17 px from the "R" — too tight, and the off-
   centeredness vs. the static state reads as visually unbalanced.
   Add gap when the button is hovered (and a touch always) to keep
   the icon and label clearly separated.
   ============================================================ */
.dsn-def-btn:not(.dsn-hover-icon) .dsn-btn .btn-icon-left {
    margin-right: 14px;
}
.dsn-def-btn:not(.dsn-hover-icon) .dsn-btn:hover .btn-icon-left {
    margin-right: 22px;
}
/* Tame the chevron's hover-shift slightly so it doesn't jam against
   the right edge of its circle — gives a more balanced feel. */
.dsn-def-btn:not(.dsn-hover-icon) .dsn-btn:hover.has-icon-left .dsn-icon i,
.dsn-def-btn:not(.dsn-hover-icon) .dsn-btn:hover.has-icon-left .dsn-icon svg {
    margin-left: 16px;
}

/* ============================================================
   Tighter section spacing
   The DSN starter sets a generous 120px (desktop) / 80px (mobile)
   token used by .pb-section, .pt-section, .section-padding,
   .section-margin, .mt-section, .mb-section. That created visible
   dead space between the page hero and the first headline of every
   page. Halving it pulls content up everywhere without breaking
   the rhythm.
   ============================================================ */
@media only screen and (min-width: 992px) {
    :root      { --margin-padding: 30px; }
    /* #dsn_header redeclares the var locally with a higher value
       (80px in style.css line 1995). Override it so descendants of
       the page hero (which include the .pb-section pad below the
       title) inherit our smaller value. */
    #dsn_header { --margin-padding: 30px; }
    /* DSN ships a hardcoded 180px top pad on header-normal. Drop it
       so the page-hero title sits much closer to the menu bar. */
    #dsn_header.header-normal { padding-top: 90px; }
}
@media only screen and (max-width: 991px) {
    :root      { --margin-padding: 20px; }
    #dsn_header { --margin-padding: 20px; }
    #dsn_header.header-normal { padding-top: 60px; }
}

/* ============================================================
   Portfolio metro layout
   The DSN metro-2 layout rotates .post-content (writing-mode:
   vertical-lr + transform:rotate(540deg) ≡ 180deg) so the BIG
   project title (AUSENCO, ANCHOR PLATFORM, IN STEALTH, …) reads
   sideways — that vertical headline is intentional and stays.
   The small category chip and the bio paragraph also got rotated
   by inheritance, which makes them unreadable. Pop both back to
   horizontal upright by neutralizing the writing-mode and
   counter-rotating each one a single level. (Don't double-rotate
   .dsn-category; it's a child of .post-meta and inherits its
   transform.)
   ============================================================ */
.dsn-style-metro.dsn-metro-2 .dsn-posts .dsn-item-post .post-content .post-meta,
.dsn-style-metro.dsn-metro-2 .dsn-posts .dsn-item-post .post-content .post-title-info > p {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: block;
    text-align: left;
    white-space: normal;
}
.dsn-style-metro.dsn-metro-2 .dsn-posts .dsn-item-post .post-content .post-meta {
    margin: 0 0 16px;
}
.dsn-style-metro.dsn-metro-2 .dsn-posts .dsn-item-post .post-content .post-title-info > p {
    margin: 18px 0 0;
    max-width: none !important;
    font-size: 0.85em;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}
/* Title stays vertical/sideways via the parent's writing-mode. */

/* ============================================================
   Team page cards — photo-less boxes, brand-teal accents
   Each card: thick teal left edge, faint teal corner bracket on the
   top-right, slight stagger across the row so the layout feels like
   loosely-aligned org units rather than a rigid grid.
   ============================================================ */
.eds-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px 28px;
}
.eds-team-card {
    position: relative;
    background: linear-gradient(180deg, rgba(13,92,117,0.10) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(13, 92, 117, 0.45);
    border-left: 4px solid var(--eds-teal);
    border-radius: 4px;
    padding: 26px 22px 24px 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    will-change: transform;
}
.eds-team-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(13,92,117,0.6);
    border-color: rgba(13, 92, 117, 0.75);
}
/* Asymmetric vertical offset (every-other card lifted) so the row feels
   composed rather than gridded. Skip on small screens where it'd cut off. */
@media (min-width: 992px) {
    .eds-team-grid > .eds-team-card:nth-child(even) {
        transform: translateY(20px);
    }
    .eds-team-grid > .eds-team-card:nth-child(even):hover {
        transform: translateY(17px);
    }
}
/* Top-right corner bracket — small, decorative, evokes a tactical motif */
.eds-team-corner {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--eds-teal);
    border-right: 2px solid var(--eds-teal);
    opacity: 0.7;
    pointer-events: none;
}
.eds-team-name {
    font-size: 18px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 4px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.eds-team-title {
    color: var(--eds-teal);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(13, 92, 117, 0.30);
}
.eds-team-bio {
    color: rgba(255,255,255,0.80);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}
/* "Coming soon" / placeholder cards — softer treatment */
.eds-team-card--ghost {
    border-style: dashed;
    background: linear-gradient(180deg, rgba(13,92,117,0.05) 0%, rgba(255,255,255,0.01) 100%);
}
.eds-team-card--ghost .eds-team-name { color: rgba(255,255,255,0.85); }
.eds-team-card--ghost .eds-team-bio  { color: rgba(255,255,255,0.65); }

/* Print: drop the asymmetric stagger and decorative gradient. */
@media print {
    .eds-team-grid > .eds-team-card:nth-child(even) { transform: none; }
    .eds-team-card {
        background: #fff !important;
        border: 1px solid #0D5C75 !important;
        border-left: 4px solid #0D5C75 !important;
        page-break-inside: avoid;
    }
    .eds-team-card:hover { transform: none !important; box-shadow: none !important; }
    .eds-team-name, .eds-team-bio { color: #0e1a23 !important; }
}

/* ============================================================
   Attachment uploader — dashed-teal drop zone with previews
   ============================================================ */
.eds-attach-wrap {
    margin-top: 12px;
}
.eds-attach-dropzone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    border: 2px dashed rgba(13, 92, 117, 0.55);
    border-radius: 8px;
    background: rgba(13, 92, 117, 0.05);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    color: rgba(255,255,255,0.85);
    user-select: none;
}
.eds-attach-dropzone:hover,
.eds-attach-dropzone:focus-visible {
    background: rgba(13, 92, 117, 0.12);
    border-color: var(--eds-teal);
    outline: none;
}
.eds-attach-dropzone.is-dragging {
    background: rgba(13, 92, 117, 0.22);
    border-color: var(--eds-teal);
    transform: scale(1.005);
}
.eds-attach-icon {
    color: var(--eds-teal);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(13, 92, 117, 0.18);
}
.eds-attach-prompt {
    font-size: 14px;
    line-height: 1.4;
}
.eds-attach-prompt strong { color: #fff; font-weight: 600; }
.eds-attach-browse { color: var(--eds-teal); text-decoration: underline; cursor: pointer; }
.eds-attach-hint {
    font-size: 11px;
    margin-top: 2px;
    color: rgba(255,255,255,0.55);
}

.eds-attach-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}
.eds-attach-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(13, 92, 117, 0.35);
    animation: eds-attach-in 0.25s ease-out;
}
@keyframes eds-attach-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.eds-attach-fileicon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13, 92, 117, 0.2);
    border-radius: 50%;
    font-size: 14px;
    color: var(--eds-teal);
}
.eds-attach-info {
    flex: 1 1 auto;
    min-width: 0;
}
.eds-attach-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eds-attach-meta {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    font-family: Menlo, Consolas, monospace;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eds-attach-remove {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.eds-attach-remove:hover {
    background: #c62828;
    color: #fff;
    border-color: #c62828;
}
.eds-attach-meter {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    font-family: Menlo, Consolas, monospace;
}
.eds-attach-meter.is-near { color: #f9a825; }
.eds-attach-meter.is-over { color: #ef5350; font-weight: 600; }
@media print { .eds-attach-wrap { display: none !important; } }

/* Form submit success / error banner */
.messages.eds-form-success,
.messages.eds-form-error {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-size: 14px;
}
.messages.eds-form-success {
    background: rgba(13, 92, 117, 0.15);
    border-left: 3px solid var(--eds-teal);
    color: #d6eaf0;
}
.messages.eds-form-error {
    background: rgba(198, 40, 40, 0.15);
    border-left: 3px solid #c62828;
    color: #ffcdd2;
}

/* ============================================================
   Page-transition tweaks
   The DSN ajax engine appends a .dsn-ajax-loader.dsn-ajax-normal
   element that contains a top SVG separator, an <h6> title with a
   .square-before bullet, and a bottom SVG separator. By default it
   slides in/out via GSAP's transform: translate3d(...).
   We:
     1. Strip the bullet (.square-before:before) from the interstitial
     2. Disable the slide; replace it with an opacity-only fade so the
        underlying page swap happens behind a stationary cover.
   ============================================================ */

/* Strip default UA bullets from the hamburger nav so they don't show
   as "• Home", "• Team", etc., either while the menu is open OR when a
   nav item is cloned into the transition cover. */
.site-header ul.primary-nav,
.site-header ul.primary-nav ul,
.site-header ul.primary-nav li,
.site-header ul.primary-nav ol li {
    list-style: none !important;
}
.site-header ul.primary-nav li::marker,
.site-header ul.primary-nav li::before {
    content: none !important;
}

/* Kill the .square-before bullet inside the ajax loader header. */
.dsn-ajax-loader .square-before,
.dsn-ajax-loader .square-after,
.dsn-ajax-loader .circle-before,
.dsn-ajax-loader .circle-after {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.dsn-ajax-loader .square-before::before,
.dsn-ajax-loader .square-after::after,
.dsn-ajax-loader .circle-before::before,
.dsn-ajax-loader .circle-after::after {
    content: none !important;
    display: none !important;
}

/* Strip any list bullets that might land inside the cover. */
.dsn-ajax-loader,
.dsn-ajax-loader ul,
.dsn-ajax-loader ol,
.dsn-ajax-loader li {
    list-style: none !important;
}
.dsn-ajax-loader li::marker,
.dsn-ajax-loader li::before {
    content: none !important;
    display: none !important;
}

/* Override the slide-in/out transform with a stationary cover that we
   fade via opacity. The !important here beats GSAP's inline transform.
   The companion JS toggles `.eds-show` to drive the fade. */
.dsn-ajax-loader.dsn-ajax-normal {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 9999;
    pointer-events: none;
    will-change: opacity;
}
.dsn-ajax-loader.dsn-ajax-normal.eds-show {
    opacity: 1;
    pointer-events: auto;
}

/* While a transition cover is active (body.eds-loading), force the
   destination page's intro animation targets to their final state so
   the user only sees a fade reveal — no residual slide-in once the
   cover starts to clear. JS adds .eds-loading on cover appearance and
   removes it after the fade-out completes. */
body.eds-loading #page_wrapper .dsn-up,
body.eds-loading #page_wrapper [data-dsn-animate],
body.eds-loading #page_wrapper .form-group,
body.eds-loading #page_wrapper .dsn-animate-up,
body.eds-loading #page_wrapper .dsn-animate-down,
body.eds-loading #page_wrapper [data-splitting] {
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
}

/* ============================================================
   Footer / address-block alignment
   The 3 office cards (New York / Miami / Beverly Hills) live in
   .box-info on the contact page and in .nav__info inside the
   hamburger menu. By default both centered vertically; top-align
   so the addresses line up with the top of their containers and
   start from the same baseline.
   ============================================================ */
.box-info .align-items-center,
.box-info .icon-left.d-flex,
.box-info .dsn-service {
    align-items: flex-start !important;
}
.box-info .icon-left.d-flex {
    align-items: flex-start !important;
}
.box-info .dsn-service > .service-item,
.box-info .dsn-service > .service-item .service-item-inner {
    align-self: flex-start !important;
    height: 100%;
}
/* If the grid renders side-by-side, ensure equal-height cards. */
.box-info .dsn-service {
    align-content: stretch;
}
.box-info .dsn-service > .service-item {
    display: flex;
    flex-direction: column;
}

/* Hamburger nav address column — top-align the three offices. */
.site-header .nav__info {
    align-items: flex-start;
}
.site-header .nav__info .nav-content {
    align-self: flex-start;
}

/* Office labels (New York / Miami / Beverly Hills) in the open menu use the
   stock theme's orange accent (#F3724E). Override with brand teal so they
   match the rest of the site. */
.site-header.dsn-hamburger .container-content .sm-title-block {
    color: var(--eds-teal) !important;
}

/* When the hamburger menu is open, give the slide-down panel a dark, near-
   opaque background so menu items remain legible against whatever page
   content sits behind it. The DSN theme's separate .bg-load animation can
   be unreliable across our overrides; this is a guaranteed backdrop. */
.site-header.dsn-hamburger.dsn-open .main-navigation {
    background-color: rgba(7, 12, 18, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 18px 48px -8px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   Inline SVG charts — brand-teal lines, prints color-faithfully
   ============================================================ */
.eds-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px 32px;
    margin: 0 auto;
}
.eds-chart {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(13, 92, 117, 0.35);
    border-radius: 6px;
    padding: 18px 18px 14px;
    color: inherit;
    /* Force colors to render in print (otherwise browsers strip backgrounds) */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.v-light .eds-chart, .v-light-head .eds-chart {
    background: #fafdff;
    border-color: rgba(13, 92, 117, 0.25);
}
.eds-chart h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 0 0 4px;
    color: var(--eds-teal);
}
.eds-chart .eds-chart-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 10px;
}
.v-light .eds-chart .eds-chart-meta, .v-light-head .eds-chart .eds-chart-meta {
    color: rgba(0, 0, 0, 0.45);
}
.eds-chart .eds-chart-source {
    font-size: 9px;
    margin-top: 8px;
    opacity: 0.55;
}
.eds-chart svg {
    width: 100%;
    height: auto;
    display: block;
}
.eds-chart svg .eds-axis-line { stroke: currentColor; stroke-opacity: 0.12; stroke-width: 1; }
.eds-chart svg .eds-axis-text { font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: currentColor; opacity: 0.6; }
.eds-chart svg .eds-line { fill: none; stroke: var(--eds-teal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.eds-chart svg .eds-line-secondary { fill: none; stroke: var(--eds-teal); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-opacity: 0.7; }
.eds-chart svg .eds-area { fill: var(--eds-teal); fill-opacity: 0.10; stroke: none; }
.eds-chart svg .eds-bar { fill: var(--eds-teal); }
.eds-chart svg .eds-bar-soft { fill: var(--eds-teal); fill-opacity: 0.35; }
.eds-chart svg .eds-bar-label { font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: currentColor; opacity: 0.85; }
.eds-chart svg .eds-point { fill: var(--eds-teal); }
.eds-chart svg .eds-point-label { font: 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; fill: currentColor; }

/* ============================================================
   Print stylesheet — clean, trustable, prints to ~Letter
   well. Hides interactive chrome and forces light theme so
   ink usage is reasonable.
   ============================================================ */
@media print {
    /* Page setup */
    @page {
        size: Letter;
        margin: 0.6in 0.55in 0.7in 0.55in;
    }

    /* Force light backgrounds + dark text. Override the v-dark theme. */
    html, body, .v-dark, .v-dark-head, .background-section, .background-main {
        background: #ffffff !important;
        color: #1a1a1a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body {
        font: 11pt/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    }

    /* Headings: black text, brand teal accents only on rules and chart strokes */
    h1, h2, h3, h4, h5, h6,
    .title-h2, .title-h3, .title-block, .heading-color {
        color: #000 !important;
    }
    h1, .title { font-size: 22pt !important; line-height: 1.15 !important; margin: 0 0 6pt; }
    h2, .title-h2 { font-size: 16pt !important; margin: 14pt 0 6pt; }
    h3, .title-h3 { font-size: 13pt !important; margin: 10pt 0 4pt; }
    h4, .title-block, .text-name { font-size: 11pt !important; margin: 8pt 0 4pt; text-transform: uppercase; letter-spacing: 0.4px; }
    p { font-size: 10.5pt !important; orphans: 3; widows: 3; }

    /* Hide the things that don't make sense on paper */
    #site_menu_header,
    #navbar_toggle,
    .site-header.dsn-hamburger nav,
    #dsn_cursor, #dsn_cursor_inner,
    .dsn-scroll-bottom,
    .bg-load,
    #line_head,
    .dsn-svg-transition,
    .dsn-bg-mask,
    .dsn-separator,
    .background-overlay,
    .item-bg.cover-bg,
    .img-box-parallax,
    .dsn-hero-parallax-img,
    iframe,
    .ball,
    /* Hide only the decorative DSN footer wave; the footer text below still prints. */
    .footer-animate svg.dsn-separator,
    /* Hide bg-dots backgrounds (heavy ink, no info) */
    .bg-dots,
    .bg-pattern {
        display: none !important;
    }

    /* Hero: hide the cover image, keep the title text */
    #hero_image, .cover-bg-img {
        display: none !important;
    }
    #dsn_header.dsn-header-animation {
        padding: 0 !important;
        margin: 0 0 18pt !important;
        min-height: 0 !important;
    }
    #hero_content, .entry-header {
        position: relative !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Inline a small print header at the top of every page */
    body::before {
        content: "Eldridge Defense & Security  ·  eldridgedefense.com";
        display: block;
        font-size: 9pt;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: #0D5C75 !important;
        border-bottom: 1px solid #0D5C75;
        padding: 0 0 6pt;
        margin: 0 0 18pt;
    }

    /* Print URL after links (selective — text links only, not navigation menus) */
    a[href]:not(.main-brand):not(.dsn-btn):not(.menu-item *):not([href^="#"])::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555 !important;
        word-break: break-all;
    }
    /* Don't decorate same-domain anchor links or javascript-only buttons */
    a[href^="#"]::after, a[href=""]::after, a[href*="javascript:"]::after { content: ""; }

    /* Strip animations and transforms — preserve final layout */
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
        filter: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    /* Buttons: print as a labelled outlined box, not a link */
    .dsn-btn {
        display: inline-block !important;
        border: 1.5px solid #0D5C75 !important;
        color: #0D5C75 !important;
        padding: 4pt 10pt !important;
        text-decoration: none !important;
        background: #ffffff !important;
    }
    .dsn-btn .dsn-icon { display: none !important; }

    /* Page-break hygiene */
    section, .about-section, .service-item, .team-item, .dsn-item-post, .award-item, .grid-item, .eds-chart, footer {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
    img, svg { max-width: 100% !important; height: auto !important; page-break-inside: avoid; break-inside: avoid; }

    /* Service / Pillars / Verticals grid: collapse to a single column for print */
    .d-grid, .dsn-service, .dsn-team, .dsn-posts {
        display: block !important;
    }
    .grid-item, .service-item, .team-item, .dsn-item-post {
        margin-bottom: 14pt;
    }

    /* Service-item icon backgrounds (data-dsn-bg) — the theme renders these
       via JS with inline styles. Hide them for print. */
    .service-item .item-bg, [data-dsn-bg] { display: none !important; }
    .service-item, .service-item-inner {
        background: transparent !important;
    }

    /* Footer: keep the company info / contact block, drop the giant CTA */
    .footer-content > .text-center.container {
        display: none !important;
    }
    #dsn_footer .footer-bottom {
        border-top: 1px solid #0D5C75 !important;
        padding-top: 10pt !important;
        margin-top: 14pt !important;
        font-size: 9pt;
    }

    /* Charts in print — keep brand teal, force solid fills */
    .eds-chart {
        background: #ffffff !important;
        border-color: #0D5C75 !important;
        page-break-inside: avoid;
        margin: 8pt 0;
    }
    .eds-chart svg .eds-area {
        fill: #0D5C75 !important;
        fill-opacity: 0.18 !important;
    }
    .eds-chart svg .eds-line, .eds-chart svg .eds-line-secondary, .eds-chart svg .eds-bar, .eds-chart svg .eds-bar-soft, .eds-chart svg .eds-point {
        stroke: #0D5C75 !important;
        fill: #0D5C75 !important;
    }
    .eds-chart svg .eds-bar-soft { fill-opacity: 0.4 !important; }
    .eds-chart h4 { color: #0D5C75 !important; }

    /* Box-under-img CTA banner — drop, it has no value on paper */
    .box-under-img { display: none !important; }
}

/* =============================================================
   Header sizing — bigger logo, same overall header height.
   Default style.css has logo width 120px (≈33px tall) and the
   header uses 22px top/bottom padding for ~77px total. To grow
   the logo without changing header height, we trade padding for
   logo size: 210px wide (≈57px tall) + 10px top/bottom padding.
   ============================================================= */
#site_menu_header.site-header,
.site-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.site-header .main-brand img,
.site-header .dsnload__img img {
    width: 210px !important;
}
@media (max-width: 575px) {
    .site-header .main-brand img,
    .site-header .dsnload__img img {
        width: 168px !important;
    }
}