/* ============================================================
   Stonewall Security — Premium Depth & Stone Enhancement Layer
   Loaded AFTER each page's CSS, BEFORE mobile.css.
   Upgrades EXISTING components (by their current class names)
   with: dark neumorphic depth, edge highlights, recessed inputs,
   pressable buttons, chiselled tabs, stone-textured accents, a
   pointer/scroll spotlight, and a carved footer foundation.
   Pure additive styling — no markup, content, or SEO changes.
   Desktop structure preserved; mobile.css still overrides last.
   ============================================================ */

:root {
    /* — Surface system (layered charcoal) — */
    --sur-raised:   linear-gradient(180deg, #17171d 0%, #101015 100%);
    --sur-soft:     linear-gradient(180deg, #15151b 0%, #0e0e12 100%);
    --sur-inset:    linear-gradient(180deg, #0b0b0e 0%, #101015 100%);
    --sur-edge:     rgba(255,255,255,0.07);

    /* — Shadow / depth tokens — */
    --edge-hi:      inset 0 1px 0 rgba(255,255,255,0.06);
    --edge-hi-2:    inset 0 1px 0 rgba(255,255,255,0.10);
    --sh-soft:      0 18px 40px -24px rgba(0,0,0,0.92);
    --sh-raised:    0 1px 0 rgba(255,255,255,0.05), 0 24px 54px -28px rgba(0,0,0,0.95);
    --sh-lift:      0 1px 0 rgba(255,255,255,0.08), 0 40px 80px -34px rgba(0,0,0,1);
    --sh-inset:     inset 0 2px 6px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.03);

    /* — Motion — */
    --ease-spring:  cubic-bezier(0.34, 1.4, 0.5, 1);

    /* — Stone grain (tiny grayscale fractal-noise; revealed by light) — */
    --stone-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.07 0 0 0 0 0.07 0 0 0 0 0.08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
    /* — Coarser slate blotches for larger accent surfaces — */
    --slate-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.16' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0 0.10 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* ============================================================
   1 · REUSABLE SURFACE UTILITIES
   ============================================================ */
.surface-raised {
    background: var(--sur-raised);
    border: 1px solid var(--sur-edge);
    border-radius: 6px;
    box-shadow: var(--edge-hi), var(--sh-raised);
}
.surface-soft {
    background: var(--sur-soft);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    box-shadow: var(--edge-hi), var(--sh-soft);
}
.surface-inset {
    background: var(--sur-inset);
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 4px;
    box-shadow: var(--sh-inset);
}
.panel-neumorphic {
    box-shadow: var(--edge-hi), var(--sh-raised);
}
/* Stone texture overlay (applied to .stone-accent / .surface-stone) */
.stone-accent, .surface-stone { position: relative; }
.stone-accent::after, .surface-stone::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: var(--slate-tex);
    background-size: 320px 320px;
    opacity: 0.5;
    mix-blend-mode: soft-light;
}
/* Carved panel: recessed stone with chiselled inner edge */
.panel-carved {
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(0,0,0,0.5),
        var(--sh-soft);
}

/* ============================================================
   2 · CARD DEPTH — molded panels (upgrades existing cards)
   ============================================================ */
.trust-card, .service-card, .audience-card, .standard-card, .insight-card,
.threat-card, .dossier-card, .brief-card, .career-card, .cap-item,
.contact-card, .perk-card, .team-standard, .finder-panel, .quote-card,
.intake-card, .apply-card, .profile-panel, .flow-panel, .quote-form {
    box-shadow: var(--edge-hi), var(--sh-soft);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
}
/* Lift cards a touch more dimensional on hover (keeps existing transforms) */
.trust-card:hover, .service-card:hover, .audience-card:hover, .insight-card:hover,
.dossier-card:hover, .brief-card:hover, .career-card:hover, .cap-item:hover,
.contact-card:hover, .perk-card:hover, .team-standard:hover, .standard-card:hover,
.threat-card:hover {
    box-shadow: var(--edge-hi-2), var(--sh-lift);
}

/* Expandable "files" — reinforced panel feel + chiselled open edge */
.dossier-file, .role-file, .sol-file {
    box-shadow: var(--edge-hi), var(--sh-soft);
}
.dossier-file.is-open, .role-file.is-open, .sol-file.is-open {
    box-shadow: var(--edge-hi-2), var(--sh-raised);
}

/* Recessed-to-raised: cards begin pressed into the wall, rise on reveal */
[data-anim="card"] { box-shadow: var(--sh-inset); }
[data-anim="card"].is-in {
    box-shadow: var(--edge-hi), var(--sh-soft);
    transition: box-shadow var(--dur-card) var(--ease-premium),
                opacity var(--dur-card) var(--ease-premium),
                transform var(--dur-card) var(--ease-premium);
}

/* ============================================================
   3 · CHISELLED METAL TABS (dossier / brief / career / group)
   ============================================================ */
.folder-tab, .dossier-tab, .brief-tab, .career-tab, .flow-tab,
.profile-tab, .form-group-tab {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 3px 8px -3px rgba(0,0,0,0.7);
}

/* Stone side-rail on the dossier/brief/career file cards */
.dossier-card, .brief-card, .career-card { position: relative; }
.dossier-card::after, .brief-card::after, .career-card::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
    background: linear-gradient(180deg, var(--c-chrome), var(--c-silver-dark));
    opacity: 0.5;
    transition: opacity 320ms var(--ease-soft);
}
.dossier-card:hover::after, .brief-card:hover::after, .career-card:hover::after { opacity: 0.95; }

/* ============================================================
   4 · PRESSABLE BUTTONS (raised → hover → pressed)
   ============================================================ */
.btn-primary {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 -2px 4px rgba(0,0,0,0.12),
        0 10px 26px -10px rgba(0,0,0,0.85);
}
.btn-primary:active {
    transform: translateY(1px) scale(0.992);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3), 0 4px 12px -8px rgba(0,0,0,0.8);
}
.btn-ghost, .btn-outline { box-shadow: var(--edge-hi); }
.btn-ghost:active, .btn-outline:active { transform: translateY(1px); }

/* ============================================================
   5 · RECESSED INPUTS (inset command-panel fields)
   ============================================================ */
.form-row input, .form-row textarea {
    background: var(--sur-inset);
    box-shadow: var(--sh-inset);
}
.form-row select {
    background-color: #0c0c0f;   /* keep the custom chevron background-image intact */
    box-shadow: var(--sh-inset);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    box-shadow: var(--sh-inset), 0 0 0 3px rgba(216,217,221,0.14);
}
.seg-option label, .check-box, .file-drop {
    box-shadow: var(--edge-hi);
}

/* ============================================================
   6 · SECTION SEPARATION — subtle chiselled top edge
   ============================================================ */
section[data-section] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.035); }

/* Stone divider utility (carved slab between sections, opt-in) */
.stone-divider {
    height: 26px;
    background: var(--slate-tex), linear-gradient(180deg, #0a0a0d, #0e0e12);
    background-size: 320px 320px, auto;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.6);
}
.stone-backplate {
    display: inline-block;
    padding: 6px 16px;
    background: var(--sur-raised);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    box-shadow: var(--edge-hi), var(--sh-soft);
}

/* ============================================================
   7 · SPOTLIGHT + STONE TEXTURE LAYER (injected by enhance.js)
   on heroes, CTA/command panels, and the mission statement.
   ============================================================ */
.spotlight-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        radial-gradient(520px circle at var(--mx, 50%) var(--my, 22%),
            rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 26%, transparent 60%),
        var(--slate-tex);
    background-size: auto, 320px 320px;
    mix-blend-mode: soft-light;
    opacity: calc(0.42 + (var(--on, 0) * 0.5));
    transition: opacity 420ms var(--ease-soft);
}
/* Keep section content above the light layer */
.hero-inner, .contact-hero-inner, .about-hero-inner,
.services-hero-inner, .careers-hero-inner, .solutions-hero-inner { z-index: 6; }
.quote > .container, .svc-cta > .container, .about-cta > .container,
.careers-cta > .container, .sol-cta > .container { position: relative; z-index: 6; }
.quote, .svc-cta, .about-cta, .careers-cta, .sol-cta, .mission-block { position: relative; }
.mission-block > * { position: relative; z-index: 6; }

/* Carved feel for CTA / command panels */
.svc-cta, .about-cta, .careers-cta, .sol-cta, .quote {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -40px 80px -60px rgba(0,0,0,0.9);
}

/* ============================================================
   8 · FOOTER — stone foundation slab
   ============================================================ */
.footer { position: relative; }
.footer::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background-image: var(--slate-tex);
    background-size: 320px 320px;
    opacity: 0.4;
    mix-blend-mode: soft-light;
}
.footer .container { position: relative; z-index: 1; }

/* ============================================================
   9 · MAGNETIC CARD TILT (class added by enhance.js, desktop only)
   ============================================================ */
.magnetic { transform-style: preserve-3d; will-change: transform; }

/* ============================================================
   10 · ANIMATED EDGE (used sparingly: matcher result, matched briefs)
   ============================================================ */
@keyframes edge-drift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.brief-card.is-match {
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
        linear-gradient(90deg, rgba(216,217,221,0.0), rgba(216,217,221,0.35), rgba(216,217,221,0.0));
    background-size: auto, 200% 1px;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
    background-clip: padding-box;
}

/* ============================================================
   11 · MOBILE — lighten texture & depth (perf), keep the mood
   ============================================================ */
@media (max-width: 640px) {
    :root { --sh-soft: 0 12px 26px -18px rgba(0,0,0,0.9); --sh-lift: 0 18px 40px -24px rgba(0,0,0,0.95); }
    .stone-accent::after, .surface-stone::after { opacity: 0.32; }
    .footer::after { opacity: 0.28; }
    .spotlight-layer { opacity: 0.32; background-image: var(--slate-tex); background-size: 320px 320px; }
    .dossier-card::after, .brief-card::after, .career-card::after { opacity: 0.7; }
    .magnetic { transform: none !important; }
}

/* ============================================================
   12 · REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .spotlight-layer { opacity: 0.3; }
    .brief-card.is-match { animation: none; }
    .magnetic { transform: none !important; }
}