/* ============================================================
   Stonewall Security — Home Page Section Styles
   Chrome / silver / monochrome aesthetic
   ============================================================ */

/* ──────────────────────────────────────────────
   01 · HERO — center-aligned, chrome wordmark
   Locked to 100vh × 100vw
   Layers (back → front):
     [0] Hero Section Stone Wall photo + heavy dark filter (background-image stack)
     [1] Subtle ambient highlight (::before)
     [2] Stone logo, darkened to blend like the wall (.hero-bg)
     [3] Top/bottom vignette (::after)
     [4] .hero-inner content
   ────────────────────────────────────────────── */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 640px;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Layer 0 — the Oklahoma City skyline lives in .hero-photo below. */
    background-color: #060606;
    background-image: none;
}

/* The gold accent tokens now live in base.css (site-wide). Home-specific:
   the About marker numbers use the gold gradient (titles stay chrome). */
.about-marker-num { background: var(--grad-gold); }

/* Hero photo — Oklahoma City skyline, graded dark tan/gold to match the brand,
   and pinned (background-attachment: fixed) so the page scrolls up and covers
   it (the scroll-reveal). It's confined to the hero box, so it hides the
   animated network only inside the hero. */
.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #070605;
    background-image:
        linear-gradient(180deg, rgba(14,11,7,0.40) 0%, rgba(10,9,7,0.58) 50%, rgba(5,5,6,0.96) 100%),
        radial-gradient(ellipse 132% 98% at 50% 32%, rgba(58,45,23,0.10) 0%, rgba(5,5,7,0.86) 76%),
        url('../assets/Home%20Photos/Hero%20Section%20Photo.webp');
    background-size: cover;
    background-position: center 46%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Mobile: fixed backgrounds cause repaint jank + high battery cost on phones. */
@media (max-width: 768px) {
    .hero-photo { background-attachment: scroll; }
}
/* Grade to a dark tan/gold hue: desaturate the skyline, then warm-multiply. */
.hero-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #8b8985;
    mix-blend-mode: saturation;
    opacity: 0.68;
}
.hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(86,64,32,0.30) 0%, rgba(44,33,17,0.44) 100%);
    mix-blend-mode: multiply;
}

/* — Subtle ambient highlights — light source from upper right + faint left fill — */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 72% 18%, rgba(255, 255, 255, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 45% 38% at 28% 26%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
        /* faint horizontal bloom just under the wordmark (mirrors the soft glow in the mockup) */
        radial-gradient(ellipse 36% 6% at 50% 60%, rgba(255, 255, 255, 0.10) 0%, transparent 80%);
}

/* — Stone logo — pops more (brighter / sharper) while still embossed into the wall — */
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;                 /* above the OKC photo (0) and the logo rig canvas (1) */
    background-image: url('../assets/Logo/Final Stone Logo with good texture.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto min(82.5vh, 82.5vw);
    filter:
        brightness(0.68)
        contrast(1.18)
        saturate(0.9)
        drop-shadow(0 12px 32px rgba(0, 0, 0, 0.8));
    opacity: 1;
}

/* — STRONG radial vignette so the edges are pure black, plus subtle top/bottom dim — */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: none;
}

/* — Inner content — */
.hero-inner {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(90px, 11vh, 130px) var(--container-pad) clamp(24px, 4vh, 40px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: clamp(14px, 1.8vh, 22px);
}

/* Kicker with flanking lines */
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 500;
    letter-spacing: 0.40em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin: 0;
}
.hero-kicker::before,
.hero-kicker::after {
    content: '';
    width: clamp(40px, 8vw, 90px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(205,173,110,0.65) 50%, transparent);
}

/* Coordinates readout — top-right of the hero (matches the mockup). */
.hero-coords {
    position: absolute;
    top: 50%;
    right: clamp(18px, 4.5vw, 70px);
    transform: translateY(-50%);
    z-index: 6;
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.85vw, 12px);
    letter-spacing: 0.22em;
    line-height: 2;
    text-align: right;
    color: var(--c-gold);
    opacity: 0.9;
    pointer-events: none;
}
@media (max-width: 820px) { .hero-coords { display: none; } }

/* Locale line — pinned to the bottom of the hero viewport, centered. */
.hero-locale {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 3.4vh, 40px);
    transform: translateX(-50%);
    z-index: 6;
    font-family: var(--font-mono);
    font-size: clamp(10px, 0.82vw, 12px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--c-gold);
    opacity: 0.85;
    pointer-events: none;
}
@media (max-width: 560px) {
    .hero-locale { font-size: 8.5px; letter-spacing: 0.14em; bottom: 16px; }
}

/* Wordmark — STONEWALL with metallic chrome treatment */
.hero-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(56px, min(11vw, 16vh), 180px);
    line-height: 0.88;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0;

    background: linear-gradient(180deg,
        #f4f5f7 0%,
        #d6d8dd 18%,
        #ffffff 36%,
        #8a8d94 52%,
        #c2c4ca 68%,
        #6a6d75 86%,
        #aaacb3 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(255,255,255,0.05));
    position: relative;
}

.hero-wordmark .line { display: block; }

.hero-wordmark .line-sub {
    font-size: clamp(16px, min(2.8vw, 4vh), 48px);
    letter-spacing: 0.45em;
    margin-top: clamp(4px, 0.6vh, 12px);
    font-weight: 600;
    background: linear-gradient(180deg,
        #d8d9dd 0%,
        #b2b4bb 40%,
        #6c6f78 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Slogan */
.hero-sub {
    margin: 0;
    font-size: clamp(16px, min(1.7vw, 2.5vh), 26px);
    font-weight: 500;
    letter-spacing: 0.015em;
    color: var(--c-pure-white);
    max-width: 640px;
    line-height: 1.5;
}

/* CTAs */
.hero-ctas {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-ctas .btn {
    padding: clamp(10px, 1.3vh, 14px) clamp(20px, 2vw, 28px);
    font-size: clamp(10px, 0.9vw, 12px);
}

/* Service icon row */
.hero-services {
    margin-top: clamp(24px, 5vh, 56px);
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
    backdrop-filter: blur(6px);
}

.hero-service {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: clamp(12px, 1.8vh, 18px) clamp(14px, 1.6vw, 22px);
    border-right: 1px solid rgba(255,255,255,0.06);
    transition: background 320ms var(--ease-soft);
}
.hero-service:last-child { border-right: 0; }
.hero-service:hover { background: rgba(255,255,255,0.03); }

.hero-service-icon {
    width: clamp(22px, 2.2vw, 28px);
    height: clamp(22px, 2.2vw, 28px);
    color: var(--c-chrome);
    flex-shrink: 0;
}
.hero-service-icon svg { width: 100%; height: 100%; }

.hero-service-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.hero-service-title {
    font-size: clamp(10px, 0.85vw, 11px);
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--c-white);
    line-height: 1.25;
}
.hero-service-sub {
    font-size: clamp(9px, 0.7vw, 10px);
    color: var(--c-grey-light);
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-top: 2px;
}

/* Stats row */
.hero-stats {
    margin: 0;
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
    backdrop-filter: blur(6px);
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: clamp(12px, 1.8vh, 18px) clamp(14px, 1.6vw, 22px);
    border-right: 1px solid rgba(255,255,255,0.06);
}
.hero-stat:last-child { border-right: 0; }

.hero-stat-icon {
    width: clamp(20px, 2vw, 26px);
    height: clamp(20px, 2vw, 26px);
    color: var(--c-chrome);
    flex-shrink: 0;
}
.hero-stat-icon svg { width: 100%; height: 100%; }

.hero-stat-text { text-align: left; }
.hero-stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 1.8vw, 24px);
    color: var(--c-white);
    letter-spacing: 0.02em;
    line-height: 1;
}
.hero-stat-label {
    margin-top: 3px;
    font-size: clamp(8px, 0.65vw, 9px);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-grey-light);
    line-height: 1.3;
}

@media (max-width: 900px) {
    .hero-services, .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-service, .hero-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .hero-service:nth-child(odd), .hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.06); }
    .hero-service:nth-last-child(-n+2), .hero-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
    .hero-services, .hero-stats { grid-template-columns: 1fr; }
    .hero-service, .hero-stat { border-right: 0; }
}

/* ──────────────────────────────────────────────
   02 · TRUST STRIP — Trusted Locally
   ────────────────────────────────────────────── */
.trust {
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.trust .section-head { margin-bottom: var(--s-7); max-width: none; }
.trust .section-title { white-space: nowrap; }

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 1.8vw, 30px);
}

.trust-card {
    position: relative;
    z-index: 0;                        /* stacking context for the layered stone / icon / scrim */
    overflow: hidden;                  /* clip the icon bleed + stone flush to the card */
    display: flex;                     /* center the copy symmetrically */
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 2.6vw, 42px);
    min-height: 224px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    will-change: transform;
    /* transform is driven by js/trust-tilt.js on hover; kept out of this
       transition so the tilt stays snappy (JS sets its own transition). */
    transition: border-color 320ms var(--ease-soft), box-shadow 320ms var(--ease-soft);
}

.trust-card:hover {
    border-color: rgba(216,217,221,0.42);
    box-shadow: 0 30px 70px -24px rgba(0,0,0,0.85);
}

/* Textured slate face with a very subtle frosted-matte treatment. The texture
   lives on ::after so it can be softly blurred (frost) + matte-filmed without
   touching the text. inset:-8px bleeds the blur past the clip so edges stay clean. */
.trust-card::after {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -3;
    background-color: #0c0d10;
    background-image:
        linear-gradient(rgba(24,25,29,0.10), rgba(24,25,29,0.10)),
        url('../assets/Stone%20Pieces/Stone%20Card%20Background%20Texture.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(1.1px) saturate(0.9) brightness(0.98);
}
.trust-grid .trust-card:nth-child(1)::after { background-position: 0% 0%; }
.trust-grid .trust-card:nth-child(2)::after { background-position: 100% 0%; }
.trust-grid .trust-card:nth-child(3)::after { background-position: 50% 100%; }
.trust-grid .trust-card:nth-child(4)::after { background-position: 0% 100%; }
.trust-grid .trust-card:nth-child(5)::after { background-position: 100% 50%; }
.trust-grid .trust-card:nth-child(6)::after { background-position: 50% 20%; }

/* Symmetric contrast scrim behind the centered copy. */
.trust-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(ellipse 82% 74% at 50% 50%,
        rgba(6,7,10,0.52) 0%, rgba(6,7,10,0.34) 52%, rgba(6,7,10,0.12) 100%);
}

/* Oversized icon watermark — card-height, centred on the left edge (half off),
   at 50% opacity, sitting behind the text. */
.trust-icon-bg {
    position: absolute;
    left: 0;
    top: 50%;
    height: 116%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    z-index: -1;
    color: var(--c-chrome);
    opacity: 0.5;
    pointer-events: none;
}
.trust-icon-bg svg { width: 100%; height: 100%; stroke-width: 0.85; }
/* The Business • Event • Private group icon reads smaller inside its viewBox —
   scale card 6's watermark up so it spans the full card height. */
.trust-card:nth-child(6) .trust-icon-bg { height: 188%; }
.trust-card:nth-child(6) .trust-icon-bg svg { stroke-width: 0.55; }

/* Card copy — no numbers, centred / symmetric. */
.trust-card-body {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 30ch;
}
.trust-card h3 {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--c-white);
    margin-bottom: 10px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}
.trust-card p {
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--c-bone);
    text-shadow: 0 1px 5px rgba(0,0,0,0.75);
}

/* Stone piece — flat side flush to the RIGHT border, floating above the card
   AND over the text (z-index) with a cast shadow; jagged edge overlaps the copy.
   Flat-left stones (1,3,5) are mirrored so every flat side faces right. */
/* Stone piece — a transform wrapper (JS drives the rotating parallax on hover),
   with the image + flat-side flip on ::before so the flip never fights the
   parallax transform. Flat side flush RIGHT; flat-left stones (1,3,5) mirrored.
   Floats above and over the text (z-index) with a cast shadow. */
.trust-stone {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
    /* entrance: settle in with a slight spring overshoot (staggered below) */
    opacity: 0;
    transform: scale(0.92) translateY(16px);
    transition: opacity 700ms var(--ease-soft), transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.trust-card.is-in .trust-stone { opacity: 1; transform: none; }
.trust-card:nth-child(1) .trust-stone { transition-delay: 120ms; }
.trust-card:nth-child(2) .trust-stone { transition-delay: 200ms; }
.trust-card:nth-child(3) .trust-stone { transition-delay: 280ms; }
.trust-card:nth-child(4) .trust-stone { transition-delay: 200ms; }
.trust-card:nth-child(5) .trust-stone { transition-delay: 280ms; }
.trust-card:nth-child(6) .trust-stone { transition-delay: 360ms; }

.trust-stone::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    opacity: 0.8;                      /* 20% transparency so the text reads through */
    filter: drop-shadow(-12px 9px 15px rgba(0,0,0,0.62));
}
.trust-card:nth-child(1) .trust-stone::before { background-image: url('../assets/Stone%20Pieces/1t.webp'); transform: scaleX(-1); background-position: left center; }
.trust-card:nth-child(2) .trust-stone::before { background-image: url('../assets/Stone%20Pieces/2t.webp'); background-position: right center; }
.trust-card:nth-child(3) .trust-stone::before { background-image: url('../assets/Stone%20Pieces/3t.webp'); transform: scaleX(-1); background-position: left center; }
.trust-card:nth-child(4) .trust-stone::before { background-image: url('../assets/Stone%20Pieces/4t.webp'); background-position: right center; }
.trust-card:nth-child(5) .trust-stone::before { background-image: url('../assets/Stone%20Pieces/5t.webp'); transform: scaleX(-1); background-position: left center; }
.trust-card:nth-child(6) .trust-stone::before { background-image: url('../assets/Stone%20Pieces/6t.webp'); background-position: right center; }

/* ── Section 2 · Ambitious interaction layer ──────────────────────────────
   .trust-fx hosts three effects, all below the text so legibility holds:
     • element  — cursor SPOTLIGHT revealing the slate + gold veins
     • ::before — a slow gold SHIMMER glint that periodically sweeps across
     • ::after  — a cursor-reactive chrome/gold EDGE highlight on the border */
.trust-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 400ms var(--ease-soft);
    background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%),
        rgba(216, 198, 150, 0.16) 0%,
        rgba(200, 206, 214, 0.07) 36%,
        transparent 70%);
}
.trust-card:hover .trust-fx { opacity: 1; }

.trust-fx::before,
.trust-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
/* gold shimmer sweep — always-on, staggered per card */
.trust-fx::before {
    background: linear-gradient(115deg,
        transparent 34%,
        rgba(224, 206, 150, 0.10) 47%,
        rgba(255, 246, 214, 0.18) 50%,
        rgba(224, 206, 150, 0.10) 53%,
        transparent 66%);
    background-size: 260% 100%;
    background-position: 160% 0;
    animation: trustShimmer 7.5s var(--ease-soft) infinite;
}
.trust-card:nth-child(2) .trust-fx::before { animation-delay: 1.2s; }
.trust-card:nth-child(3) .trust-fx::before { animation-delay: 2.4s; }
.trust-card:nth-child(4) .trust-fx::before { animation-delay: 3.6s; }
.trust-card:nth-child(5) .trust-fx::before { animation-delay: 4.8s; }
.trust-card:nth-child(6) .trust-fx::before { animation-delay: 6.0s; }
@keyframes trustShimmer {
    0%   { background-position: 160% 0; opacity: 0; }
    8%   { opacity: 1; }
    26%  { background-position: -60% 0; opacity: 0; }
    100% { background-position: -60% 0; opacity: 0; }
}

/* cursor-reactive edge highlight (border-only via mask) */
.trust-fx::after {
    padding: 1.5px;
    background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
        rgba(220, 205, 160, 0.60),
        rgba(200, 206, 214, 0.20) 45%,
        transparent 76%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 380ms var(--ease-soft);
}
.trust-card:hover .trust-fx::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .trust-stone { transition: none; opacity: 1; transform: none; }
    .trust-fx::before { animation: none; }
}

@media (max-width: 1100px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .trust .section-title { font-size: 5vw; } }
@media (max-width: 640px)  {
    .trust-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────
   03 · REAL THREATS
   ────────────────────────────────────────────── */
.approach { background: transparent; }

.approach-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 5vw, 84px);
    align-items: center;
}

.approach-main { min-width: 0; }

.approach-title { margin-top: var(--s-4); }
.approach-accent {
    -webkit-text-fill-color: var(--c-white);
    color: var(--c-white);
}

.approach-copy {
    margin-top: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    max-width: 54ch;
    color: var(--c-grey-light);
    line-height: 1.7;
}

/* — Approach steps — 4 across with hairline dividers — */
.approach-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(32px, 4vw, 52px);
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: var(--s-5);
}
.approach-step { padding-right: var(--s-4); }
.approach-step + .approach-step {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
    border-left: 1px solid rgba(255,255,255,0.08);
}
.approach-step-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    color: var(--c-chrome);
    margin-bottom: var(--s-4);
}
.approach-step-icon svg { width: 100%; height: 100%; }
.approach-step h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 9px;
}
.approach-step p {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--c-grey-light);
}

/* — Figure — photo with an overlapping quote card — */
.approach-figure { position: relative; }
.approach-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.10);
    background-image:
        linear-gradient(180deg, rgba(6,7,9,0.08) 0%, rgba(6,7,9,0.30) 62%, rgba(6,7,9,0.66) 100%),
        url('../assets/Stonewall%20Main%20Photos/b6373998-be78-448e-bcda-eac55eb563ea.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.approach-quote {
    position: absolute;
    left: clamp(16px, 2vw, 28px);
    right: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 26px);
    padding: clamp(20px, 2.4vw, 30px);
    background: rgba(10,10,13,0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
}
.approach-quote-mark {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 0.5;
    color: var(--c-chrome);
    margin-bottom: 12px;
}
.approach-quote-lead {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(17px, 1.5vw, 22px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 6px;
}
.approach-quote-sub {
    font-size: 13px;
    color: var(--c-grey-light);
}

/* — Bottom stat bar — full-width row with dividers — */
.approach-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(40px, 5vw, 72px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    background: rgba(255,255,255,0.015);
}
.approach-stat {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2vw, 30px);
}
.approach-stat + .approach-stat { border-left: 1px solid rgba(255,255,255,0.08); }
.approach-stat-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: none;
    color: var(--c-chrome);
    margin-top: 4px;
}
.approach-stat-icon svg { width: 100%; height: 100%; }
.approach-stat-text { display: flex; flex-direction: column; }
.approach-stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
    letter-spacing: 0.01em;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--c-white);
    margin-bottom: 9px;
}
.approach-stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 6px;
}
.approach-stat-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-grey-light);
}

@media (max-width: 980px) {
    .approach-grid { grid-template-columns: 1fr; }
    .approach-figure { order: -1; }
    .approach-photo { aspect-ratio: 16 / 10; }
    .approach-stats { grid-template-columns: repeat(2, 1fr); }
    .approach-stat:nth-child(3) { border-left: 0; }
    .approach-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.08); }
}
@media (max-width: 620px) {
    .approach-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-6); }
    .approach-step:nth-child(3) { border-left: 0; }
    .approach-stats { grid-template-columns: 1fr; }
    .approach-stat + .approach-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
    .approach-quote {
        position: static;
        margin: -10px 12px 0;
    }
}

/* ──────────────────────────────────────────────
   04 · CORE SERVICES
   ────────────────────────────────────────────── */
.services {
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: var(--s-4);
}

.service-card {
    position: relative;
    padding: 32px 28px;
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 320ms var(--ease-soft), transform 320ms var(--ease-soft), box-shadow 320ms var(--ease-soft);
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 4px,
            rgba(255,255,255,0.012) 4px,
            rgba(255,255,255,0.012) 5px
        );
    pointer-events: none;
}

.service-lg { grid-column: span 3; min-height: 360px; }
.service-md { grid-column: span 3; min-height: 280px; }
.service-sm { grid-column: span 2; min-height: 240px; }

.service-card:hover {
    border-color: rgba(216,217,221,0.5);
    transform: translateY(-3px);
    box-shadow: 0 32px 80px -30px rgba(0,0,0,0.9);
}

.folder-tab {
    position: absolute;
    top: 0; left: 28px;
    padding: 6px 14px;
    background: var(--grad-silver-btn);
    color: #14141a;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.service-card-body {
    position: relative;
    z-index: 2;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-card-body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 2.4vw, 36px);
    color: var(--c-white);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--s-3);
}

.service-card-body p {
    color: var(--c-grey-light);
    font-size: 14px;
    line-height: 1.6;
    max-width: 420px;
}

.service-card-body .card-link { margin-top: auto; }

.micro-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--s-4);
}

.micro-tags li {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-grey-light);
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 2px;
}

.service-photo-strip {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 38%;
    background:
        linear-gradient(90deg, var(--c-graphite) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 50%, rgba(216,217,221,0.10), transparent 70%),
        linear-gradient(180deg, #1c1d23 0%, #0a0a0d 100%);
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 480ms var(--ease-soft), transform 580ms var(--ease-premium);
    pointer-events: none;
}
.service-card:hover .service-photo-strip { opacity: 1; transform: translateX(0); }

/* Real photography behind each service card's hover strip. A left-to-right
   graphite fade keeps the photo blending into the card body while the right
   edge reveals the image. */
.service-card[data-photo] .service-photo-strip {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.service-card[data-photo="officers"] .service-photo-strip {
    background-image:
        linear-gradient(90deg, var(--c-graphite) 0%, rgba(20,20,24,0.35) 46%, transparent 100%),
        url('../assets/Stonewall%20Main%20Photos/0843b7f3-b7c2-4684-bc40-c155371efb66.webp');
}
.service-card[data-photo="patrol"] .service-photo-strip {
    background-image:
        linear-gradient(90deg, var(--c-graphite) 0%, rgba(20,20,24,0.35) 46%, transparent 100%),
        url('../assets/Stonewall%20Main%20Photos/23016c55-0332-4954-acb1-f331b7f09b7b.webp');
}
.service-card[data-photo="investigations"] .service-photo-strip {
    background-image:
        linear-gradient(90deg, var(--c-graphite) 0%, rgba(20,20,24,0.35) 46%, transparent 100%),
        url('../assets/Stonewall%20Main%20Photos/15c21db0-0a2b-44de-b059-f2805e0cc9db.webp');
}
.service-card[data-photo="executive"] .service-photo-strip {
    background-image:
        linear-gradient(90deg, var(--c-graphite) 0%, rgba(20,20,24,0.35) 46%, transparent 100%),
        url('../assets/Stonewall%20Main%20Photos/cd4a7bd3-2e73-46a0-803b-b6d214c1f132.webp');
}

@media (max-width: 1100px) {
    .service-lg, .service-md { grid-column: span 6; }
    .service-sm { grid-column: span 2; }
}
@media (max-width: 800px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .service-lg, .service-md, .service-sm { grid-column: span 2; min-height: 240px; }
}
@media (max-width: 540px) {
    .service-grid { grid-template-columns: 1fr; }
    .service-lg, .service-md, .service-sm { grid-column: span 1; }
}

/* ──────────────────────────────────────────────
   05 · FIND COVERAGE
   ────────────────────────────────────────────── */
.finder {
    background: transparent;
}

.finder-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: flex-start;
}

.finder-question {
    margin-top: var(--s-7);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 2.4vw, 32px);
    color: var(--c-white);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.finder-panel {
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    padding: clamp(28px, 4vw, 48px);
}

.finder-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.finder-options li button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 18px 20px;
    text-align: left;
    color: var(--c-bone);
    font-size: 15px;
    border: 1px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 240ms var(--ease-soft), color 240ms var(--ease-soft), padding-left 320ms var(--ease-soft), border-color 240ms var(--ease-soft);
    position: relative;
    border-radius: 2px;
}

.finder-options li button:hover {
    background: rgba(255,255,255,0.025);
    color: var(--c-white);
    padding-left: 28px;
}

.finder-options li button.is-selected {
    background: rgba(216,217,221,0.06);
    color: var(--c-white);
    border-color: rgba(216,217,221,0.35);
    padding-left: 28px;
}

.opt-num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--c-chrome);
    width: 22px;
}

.finder-result {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
}

.finder-result::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--c-chrome);
    transition: width 600ms var(--ease-premium);
}
.finder-result.is-active::before { width: 80px; }

.finder-result-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-chrome);
    display: block;
    margin-bottom: var(--s-3);
}

.finder-result-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--c-white);
    margin-bottom: var(--s-3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.finder-result-body {
    color: var(--c-grey-light);
    margin-bottom: var(--s-5);
}

.finder-result-link {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 320ms var(--ease-soft), transform 320ms var(--ease-soft);
}
.finder-result.is-active .finder-result-link {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

@media (max-width: 900px) {
    .finder-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────
   06 · ABOUT STONEWALL
   ────────────────────────────────────────────── */
.about { background: transparent; }

.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(36px, 5vw, 84px);
    align-items: center;
}

/* — Media panel — a framed operational photo with a dossier tab, founder
   caption, and a wipe reveal that matches the Protection Focus panels. — */
.about-figure {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px;
    background: var(--c-near-black);
    isolation: isolate;
}

.about-figure-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(180deg, rgba(6,7,9,0.28) 0%, rgba(6,7,9,0.74) 100%),
        url('../assets/Stonewall%20Main%20Photos/8927f2e4-10d9-4c02-8b52-164020a48383.webp');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    filter: grayscale(0.35) contrast(1.05);
    transform: scale(1.02);
    transition: transform 1400ms var(--ease-premium), filter 800ms var(--ease-soft);
}
.about-figure:hover .about-figure-photo {
    transform: scale(1.06);
    filter: grayscale(0.12) contrast(1.08);
}

.about-figure-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--c-graphite);
    transform-origin: top center;
    transform: scaleY(1);
    transition: transform 1100ms var(--ease-premium);
}
.about.is-in-view .about-figure-mask { transform: scaleY(0); }

.about-figure-tab {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-grey-light);
    background: rgba(8,8,11,0.60);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 2px;
}

.about-figure-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 18px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--c-white);
    background: linear-gradient(180deg, transparent, rgba(4,5,6,0.88));
}
.about-figure-cap-k {
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-chrome);
}

/* — Text side — a tight teaser, not the full story. — */
.about-statement {
    margin-top: var(--s-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.3vw, 32px);
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: var(--c-white);
}

.about-sub {
    margin-top: var(--s-4);
    max-width: 520px;
    line-height: 1.7;
    color: var(--c-grey-light);
}

.about-markers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: var(--s-6) 0 var(--s-7);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.about-markers li {
    padding: var(--s-5) var(--s-4) var(--s-5) 0;
}
.about-markers li + li {
    padding-left: var(--s-4);
    border-left: 1px solid rgba(255,255,255,0.08);
}
.about-marker-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: 0.02em;
    background: var(--grad-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--c-white);
}
.about-marker-label {
    display: block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--c-grey-light);
}

@media (max-width: 900px) {
    .about-layout { grid-template-columns: 1fr; }
    .about-figure { max-width: 560px; }
}
@media (max-width: 560px) {
    .about-markers { grid-template-columns: 1fr; }
    .about-markers li { padding: var(--s-4) 0; border-top: 1px solid rgba(255,255,255,0.06); }
    .about-markers li:first-child { border-top: 0; }
    .about-markers li + li { padding-left: 0; border-left: 0; }
}

/* ──────────────────────────────────────────────
   07 · AUDIENCE
   ────────────────────────────────────────────── */
.audience { background: transparent; }

.audience-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
}

.audience-card {
    padding: 28px 24px;
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    transition: border-color 320ms var(--ease-soft), background 320ms var(--ease-soft), transform 320ms var(--ease-soft);
}

.audience-card:hover {
    border-color: rgba(216,217,221,0.45);
    background: var(--c-stone);
    transform: translateY(-3px);
}

.audience-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-chrome);
    margin-bottom: var(--s-5);
}

.audience-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--c-white);
    margin-bottom: var(--s-4);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.audience-card p {
    font-size: 13px;
    color: var(--c-grey-light);
    margin-bottom: var(--s-2);
    line-height: 1.5;
}

.audience-row {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--c-silver-dark);
    margin-right: 6px;
}

.audience-card .card-link { margin-top: auto; }

@media (max-width: 1100px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .audience-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────
   08 · OUR PROCESS
   ────────────────────────────────────────────── */
.process { background: transparent; }

.process-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: flex-start;
}

.process-sticky {
    position: sticky;
    top: 120px;
}

.process-sticky .lede { margin-top: var(--s-5); }

.process-list {
    position: relative;
    padding-left: 32px;
}

.process-list::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 1px;
    height: calc(100% - 28px);
    background: linear-gradient(180deg, var(--c-chrome) 0%, rgba(216,217,221,0.10) 100%);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1600ms var(--ease-premium) 200ms;
}
.process.is-in-view .process-list::before { transform: scaleY(1); }

.process-step {
    position: relative;
    display: flex;
    gap: var(--s-5);
    padding: 28px 0 28px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.process-step:last-child { border-bottom: 0; }

.process-step::before {
    content: '';
    position: absolute;
    left: -36px; top: 38px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--c-graphite);
    border: 1px solid var(--c-chrome);
    transition: background 320ms var(--ease-soft), transform 320ms var(--ease-soft);
}
.process-step.is-active::before {
    background: var(--c-chrome);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(216,217,221,0.15);
}

.step-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--c-chrome);
    padding-top: 6px;
    min-width: 36px;
}

.step-body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.2vw, 32px);
    color: var(--c-white);
    margin-bottom: var(--s-3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.step-body p {
    color: var(--c-grey-light);
    margin-bottom: var(--s-3);
    max-width: 480px;
}

.step-status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-silver-dark);
}

.process-step-last .step-body {
    padding: 18px;
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
}

@media (max-width: 900px) {
    .process-grid { grid-template-columns: 1fr; }
    .process-sticky { position: static; }
}

/* ──────────────────────────────────────────────
   09 · PROFESSIONAL STANDARDS
   ────────────────────────────────────────────── */
.standards {
    background: radial-gradient(ellipse at 50% 0%, rgba(216,217,221,0.05), transparent 60%);
    position: relative;
}

.standards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    max-width: 1100px;
    margin: 0 auto;
}

.standard-card {
    padding: 36px 28px;
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    transition: background 320ms var(--ease-soft), border-color 320ms var(--ease-soft);
}

.standard-card:hover {
    border-color: rgba(216,217,221,0.45);
    background: var(--c-stone);
}

.standard-num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    color: var(--c-chrome);
    margin-bottom: var(--s-4);
}

.standard-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--c-white);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 320ms var(--ease-soft);
}

.standard-reveal {
    margin-top: var(--s-4);
    font-size: 13px;
    color: var(--c-grey-light);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 420ms var(--ease-premium), opacity 320ms var(--ease-soft), margin-top 420ms var(--ease-premium);
}

.standard-card:hover .standard-reveal {
    max-height: 120px;
    opacity: 1;
}

.standards-rule {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--c-chrome) 50%, transparent 100%);
    margin: var(--s-9) auto 0;
    transition: width 1400ms var(--ease-premium) 200ms;
}
.standards.is-in-view .standards-rule { width: 80%; }

@media (max-width: 800px) {
    .standards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .standards-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────
   10 · PROTECTION FOCUS
   ────────────────────────────────────────────── */
/* overflow:hidden clips the columns while they sit / travel off-screen so the
   directional slide never spawns a horizontal scrollbar. */
.protection { background: transparent; overflow: hidden; }

.focus-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    padding: clamp(48px, 7vw, 96px) 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.focus-panel:last-child { border-bottom: 0; }

.focus-right .focus-visual { order: 2; }

.focus-visual {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(216,217,221,0.14), transparent 60%),
        linear-gradient(180deg, #1a1a20 0%, #0a0a0d 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
}

.focus-mask { display: none; }

/* ── Directional slide reveal (intro + outro) ──────────────────────────────
   Each column slides in from the page edge on the side it sits on, and slides
   back off when scrolled away. animations.js toggles .focus-panel.is-in in
   BOTH directions. The photo enters from its column's side; the text column
   enters from the opposite (its own) side. The `calc(-50vw - 100%)` start
   guarantees the column clears the viewport edge at any width (its own width
   plus half a viewport); .protection's overflow:hidden clips the travel. */
.focus-visual,
.focus-text {
    opacity: 0;
    will-change: transform, opacity;
    transition:
        transform 1050ms var(--ease-premium),
        opacity 700ms var(--ease-soft);
}

.focus-left  .focus-visual { transform: translateX(calc(-50vw - 100%)); }
.focus-left  .focus-text   { transform: translateX(calc(50vw + 100%)); }
.focus-right .focus-visual { transform: translateX(calc(50vw + 100%)); }
.focus-right .focus-text   { transform: translateX(calc(-50vw - 100%)); }

/* Text column trails the photo slightly, both on the way in and out. */
.focus-text { transition-delay: 120ms; }

.focus-panel.is-in .focus-visual,
.focus-panel.is-in .focus-text {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .focus-visual,
    .focus-text {
        transition: none;
        transform: none;
        opacity: 1;
    }
}

/* Real photography inside each Protection Focus panel. Sits under the wipe
   mask (revealed on scroll-in) with a soft dark overlay for the monochrome
   look and consistent contrast. */
.focus-panel[data-focus] .focus-visual {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.focus-panel[data-focus="onsite"] .focus-visual {
    background-image:
        linear-gradient(180deg, rgba(8,8,11,0.30) 0%, rgba(8,8,11,0.55) 100%),
        url('../assets/Stonewall%20Main%20Photos/0e5e5076-c5ba-4335-af7c-9e448f98885b.webp');
}
.focus-panel[data-focus="patrol"] .focus-visual {
    background-image:
        linear-gradient(180deg, rgba(8,8,11,0.30) 0%, rgba(8,8,11,0.55) 100%),
        url('../assets/Stonewall%20Main%20Photos/6b3bac6e-9f9f-419d-adf1-1c23349caeab.webp');
}
.focus-panel[data-focus="investigations"] .focus-visual {
    background-image:
        linear-gradient(180deg, rgba(8,8,11,0.30) 0%, rgba(8,8,11,0.55) 100%),
        url('../assets/Stonewall%20Main%20Photos/5ae7bdac-c883-4479-932f-d8ca055f2a21.webp');
}

.focus-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--c-chrome);
    display: block;
    margin-bottom: var(--s-4);
}

.focus-text h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 64px);
    color: var(--c-white);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
    background: var(--grad-chrome);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.focus-text p {
    color: var(--c-grey-light);
    margin-bottom: var(--s-5);
    max-width: 480px;
}

.focus-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--s-6);
}

.focus-tags li {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-grey-light);
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 2px;
}

@media (max-width: 800px) {
    .focus-panel { grid-template-columns: 1fr; }
    .focus-right .focus-visual { order: 0; }
}

/* ──────────────────────────────────────────────
   11 · CLIENT TRUST (Testimonial)
   ────────────────────────────────────────────── */
.testimonial {
    background: transparent;
    padding-top: clamp(var(--s-10), 14vw, var(--s-11));
    padding-bottom: clamp(var(--s-10), 14vw, var(--s-11));
}

.testimonial-center {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.testimonial-title { margin-bottom: var(--s-8); }

.quote-card {
    position: relative;
    padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 72px);
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    text-align: left;
}

.quote-mark {
    position: absolute;
    top: 16px; left: 28px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 120px;
    line-height: 1;
    color: var(--c-chrome);
    opacity: 0.3;
}

.quote-card p {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 300;
    line-height: 1.5;
    color: var(--c-white);
    letter-spacing: 0.005em;
    margin-bottom: var(--s-6);
    max-width: 720px;
}

.quote-card footer {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-grey-light);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.quote-card cite { color: var(--c-chrome); font-style: normal; }

.trust-tags {
    margin-top: var(--s-7);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
}

.trust-tags li {
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-grey-light);
}

/* ──────────────────────────────────────────────
   12 · SECURITY INSIGHTS
   ────────────────────────────────────────────── */
.insights { background: transparent; }

.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}

.insight-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px;
    position: relative;
    min-height: 300px;
    transition: border-color 320ms var(--ease-soft), transform 320ms var(--ease-soft), box-shadow 320ms var(--ease-soft);
}

.insight-card:hover {
    border-color: rgba(216,217,221,0.45);
    transform: translateY(-3px);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8);
}

.insight-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-chrome);
    margin-bottom: var(--s-5);
}
.insight-meta span:nth-child(3) { color: var(--c-grey-light); }

.insight-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--c-white);
    margin-bottom: var(--s-4);
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
}

.insight-card p {
    color: var(--c-grey-light);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--s-5);
}

.insight-card .card-link { margin-top: auto; }

.insight-link {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid rgba(255,255,255,0.06);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-silver-dark);
}

@media (max-width: 900px) { .insights-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────
   13 · REQUEST QUOTE
   ────────────────────────────────────────────── */
.quote {
    background: radial-gradient(ellipse at 50% 100%, rgba(216,217,221,0.06), transparent 55%);
}

.quote-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.quote-text .lede { margin-top: var(--s-5); margin-bottom: var(--s-7); }

.quote-contact {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.quote-contact li {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    padding: 10px 0;
}

.qc-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-chrome);
    min-width: 70px;
}

.quote-contact a { color: var(--c-white); transition: color 200ms var(--ease-soft); }
.quote-contact a:hover { color: var(--c-chrome); }

.quote-trust {
    margin-top: var(--s-6);
    font-size: 12px;
    color: var(--c-silver-dark);
    line-height: 1.6;
}

/* — Form — */
.quote-form {
    padding: clamp(28px, 4vw, 48px);
    background: var(--c-graphite);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    position: relative;
}

.form-row { margin-bottom: var(--s-5); }

.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

.form-row label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-chrome);
    margin-bottom: var(--s-2);
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--c-white);
    font-size: 15px;
    font-family: var(--font-sans);
    border-radius: 2px;
    transition: border-color 240ms var(--ease-soft), background 240ms var(--ease-soft);
}

.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--c-silver-dark); }

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--c-chrome);
    background: rgba(255,255,255,0.04);
}

.form-row select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-chrome) 50%), linear-gradient(135deg, var(--c-chrome) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.form-row select option { background: var(--c-graphite); color: var(--c-white); }

.form-row textarea { resize: vertical; min-height: 100px; }

.quote-form .btn-block { margin-top: var(--s-6); }

/* Form-level alert (submit failures) */
.form-alert {
    display: none; margin: var(--s-5) 0 0;
    padding: 12px 14px; border: 1px solid rgba(165,18,38,0.5); border-radius: 2px;
    background: var(--c-red-soft);
    font-size: 13px; line-height: 1.6; color: var(--c-bone);
}
.form-alert.is-shown { display: block; }

/* Submit loading state */
.btn.is-loading { pointer-events: none; opacity: 0.8; }
.btn-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(20,20,26,0.3);
    border-top-color: #14141a;
    border-radius: 50%;
    animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* — Form confirmation — */
.form-confirmation {
    position: absolute;
    inset: 0;
    background: var(--c-graphite);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    padding: 40px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 520ms var(--ease-premium), transform 520ms var(--ease-premium);
    border-radius: 4px;
}

.form-confirmation.is-shown {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.form-confirm-mark {
    width: 64px; height: 64px;
    border: 1px solid var(--c-chrome);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-chrome);
}
.form-confirm-mark svg { width: 28px; height: 28px; }

.form-confirmation p {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    color: var(--c-white);
    max-width: 360px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .quote-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .form-row-split { grid-template-columns: 1fr; }
}