/* ==========================================================
   CH NET GUARD — Base styles
   Loaded after tokens.css.
   ========================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .font-display {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: var(--lh-snug);
}

.font-mono {
    font-family: 'JetBrains Mono', Consolas, monospace;
}

/* ---------- Layout container ---------- */
.container-x {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 24px;
}
@media (min-width: 768px) {
    .container-x { padding-inline: 48px; }
}

/* ---------- Section rhythm ---------- */
.section {
    padding-block: var(--space-7);
}
@media (min-width: 768px) {
    .section { padding-block: var(--space-8); }
}

/* ---------- Brand gradients ---------- */
.text-gradient-gold {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-gradient-teal {
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-teal-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Dividers ---------- */
.divider-gold {
    height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--accent-gold), transparent);
}

/* ==========================================================
   HERO SECTION
   ========================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.hero-inner {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 140px 80px;   /* room for fixed nav + scroll indicator */
}

/* Eyebrow above the headline */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 28px;
}
.hero-eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-gold);
}
.hero-eyebrow .bar {
    width: 28px;
    height: 1px;
    background: linear-gradient(to right,
        var(--accent-gold),
        transparent);
}

/* Headline */
.hero-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin: 0 0 28px;
    max-width: 900px;
}

/* Subtitle */
.hero-sub {
    max-width: 580px;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 40px;
}

/* CTA cluster */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 56px;
}

/* Service chip cluster under CTAs */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================
   HERO — MAP BACKDROP MODE  +  PERSISTENT FIXED MAP STAGE
   ----------------------------------------------------------
   The Italy 3D map lives in a fixed-position stage at body
   root so it persists in the viewport as the user scrolls.
   The hero overlays it; subsequent sections (about, services,
   why, contact) sit on top of it with semi-transparent
   backgrounds + backdrop blur so the map stays faintly
   visible behind them (the "depth illusion" effect).

   Stack from back to front (z-index):
     0  .map-stage-fixed   (the Three.js canvas + tooltip)
     1  .hero              (the hero, with overlay + text)
     2  .section-about     (semi-transparent over the map)
     2  .section-services  (opaque — map fully behind here)
     2  .section-why
     2  .section-contact
     2  footer
     4  .telemetry pills inside hero
     5  .hero-inner content
     5  .map3d-hud pills
   100  .site-nav (kept on top always)

   - .hero-map-canvas    : the Three.js canvas div, fills the
                           fixed stage so the canvas auto-sizes
                           to the viewport.
   - .hero-map-overlay   : the left-side dark gradient that
                           keeps the headline readable.
   - .hero-inner--map    : narrows the content column to the
                           left so it doesn't overlap the map's
                           visible right two-thirds.
   ========================================================== */

/* The persistent map stage. Fixed to the viewport — does not
   scroll with the page. pointer-events:none on the wrapper but
   the canvas inside re-enables them so raycasting still works
   when the cursor is over the visible map area. */
.map-stage-fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* The map gets faded by JS via this CSS variable as the
       user scrolls — opacity 1 at top, fading to 0 around
       the end of the about section. */
    opacity: var(--map-stage-opacity, 1);
    transition: opacity 100ms linear;
    /* Subtle filter applied as you scroll for that
       "looking down through depth" feel — JS overrides this
       inline with current scroll progress. */
    filter: blur(var(--map-stage-blur, 0px));
}

.hero {
    /* Sits above the fixed map stage */
    position: relative;
    z-index: 1;
}

.hero--map {
    /* Re-establish a stacking context so absolute children layer correctly */
    isolation: isolate;
    cursor: crosshair;       /* the whole hero is one big "map" */
}

/* The canvas mount fills the FIXED STAGE now (not the hero).
   pointer-events:none so clicks pass through to the page
   elements above the map. The map3d.js raycaster reads
   cursor coords from window/document events instead. */
.hero-map-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/*
   Left-side darkening gradient. Heavier on the left where
   the text sits, fading to fully transparent on the right
   where the map should breathe. Pointer-events: none so it
   doesn't block raycasting through it.
*/
.hero-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /*
       Heavier on the far left where the text starts, but
       fades out faster so the map is clearly visible from
       around the 35% mark onward. Previously this gradient
       killed too much of the map on its way out.
    */
    background:
        linear-gradient(
            90deg,
            rgba(3, 4, 10, 0.88) 0%,
            rgba(3, 4, 10, 0.70) 18%,
            rgba(3, 4, 10, 0.35) 32%,
            rgba(3, 4, 10, 0.10) 48%,
            rgba(3, 4, 10, 0.00) 62%
        );
}

/*
   Constrain the hero copy to the left side. On wide
   screens the map gets the right ~45% to show off; on
   tablet/mobile the copy can use the full width and the
   overlay becomes a softer top-to-bottom gradient.
*/
.hero-inner--map {
    max-width: 100%;
    align-items: flex-start;  /* keep children left-aligned, not stretched */
}
.hero-inner--map .hero-headline,
.hero-inner--map .hero-sub,
.hero-inner--map .hero-ctas,
.hero-inner--map .hero-chips,
.hero-inner--map .hero-eyebrow {
    max-width: min(620px, 100%);
}

@media (min-width: 1024px) {
    /* On desktop, constrain text to the left ~55% of the viewport */
    .hero-inner--map .hero-headline,
    .hero-inner--map .hero-sub,
    .hero-inner--map .hero-ctas,
    .hero-inner--map .hero-chips,
    .hero-inner--map .hero-eyebrow {
        max-width: 620px;
    }
}

/* On narrow viewports the side-gradient pattern doesn't
   work as well — switch to a top-to-bottom darkening so
   the map sits behind the text more uniformly. */
@media (max-width: 1023px) {
    .hero-map-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 4, 10, 0.92) 0%,
                rgba(3, 4, 10, 0.82) 20%,
                rgba(3, 4, 10, 0.55) 45%,
                rgba(3, 4, 10, 0.40) 70%,
                rgba(3, 4, 10, 0.55) 100%
            );
    }
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
    --btn-pad-y: 14px;
    --btn-pad-x: 26px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--r-full);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    border: 1px solid transparent;
    transition: background var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out),
                border-color var(--d-base) var(--ease-out),
                color var(--d-base) var(--ease-out);
    white-space: nowrap;
}
.btn--sm { --btn-pad-y: 9px; --btn-pad-x: 18px; font-size: 13px; }

/* Primary — gold filled */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-2));
    color: var(--bg-deep);
    box-shadow: 0 6px 20px -8px rgba(201, 162, 39, 0.7);
}
.btn-primary:hover {
    box-shadow: var(--shadow-glow-gold), 0 6px 20px -8px rgba(201, 162, 39, 0.9);
}

/* Ghost — teal outlined */
.btn-ghost {
    background: rgba(15, 181, 164, 0.04);
    border-color: rgba(15, 181, 164, 0.35);
    color: var(--accent-teal-2);
}
.btn-ghost:hover {
    background: rgba(15, 181, 164, 0.1);
    border-color: var(--accent-teal);
    box-shadow: var(--shadow-glow-teal);
}

/* ==========================================================
   NAVIGATION
   ========================================================== */
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 18px;
    transition: padding-block var(--d-base) var(--ease-out);
}
.nav.is-scrolled .nav-inner {
    padding-block: 12px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.02em;
}
.nav-brand .brand-name {
    line-height: 1;
}
.nav-brand .brand-tag {
    display: block;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    margin-top: 3px;
    text-transform: uppercase;
}

.nav-links {
    display: none;
    gap: 36px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 1024px) {
    .nav-links { display: flex; }
}
.nav-links a {
    position: relative;
    font-size: 13.5px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    transition: color var(--d-base) var(--ease-out);
    padding-block: 4px;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-teal);
    transition: width var(--d-base) var(--ease-out);
}
.nav-links a:hover::after { width: 100%; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-flags {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.7;
    filter: grayscale(20%);
}
@media (min-width: 768px) {
    .nav-flags { display: inline-flex; }
}

/* ==========================================================
   SECTION COMMON
   ========================================================== */
.section {
    position: relative;
    z-index: 5;
}
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 32px;
}
.section-eyebrow .dot {
    width: 6px; height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-gold);
}
.section-eyebrow .bar {
    width: 28px; height: 1px;
    background: linear-gradient(to right, var(--accent-gold), transparent);
}
.section-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    max-width: 960px;
}
.section-sub {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 640px;
    margin: 0;
}

/* ==========================================================
   ABOUT
   ========================================================== */
.section-about {
    overflow: hidden;
    position: relative;
    z-index: 2;
    /*
       Semi-transparent background lets the fixed map stage
       show through underneath. Gradient is darker at the
       bottom so by the time you scroll to the end of about,
       the map is essentially hidden.
       Per user tuning: lightened the top so more map shows
       through during the headline area.
    */
    background: linear-gradient(to bottom,
        rgba(3, 4, 10, 0.40) 0%,
        rgba(3, 4, 10, 0.65) 30%,
        rgba(3, 4, 10, 0.85) 70%,
        var(--bg-deep) 100%);
    /*
       Very light backdrop blur — just enough to keep the
       about text readable over the busy map without the
       frosted-glass look the previous 2px gave.
    */
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
}

/* Mobile + browsers without backdrop-filter: opt for a more
   opaque background instead so text contrast stays good. */
@supports not (backdrop-filter: blur(0.5px)) {
    .section-about {
        background: linear-gradient(to bottom,
            rgba(3, 4, 10, 0.75) 0%,
            var(--bg-deep) 60%);
    }
}
.section-about .grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(15, 181, 164, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 181, 164, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events: none;
}
.section-about > .container-x {
    position: relative;
    z-index: 1;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 72px;
}
@media (min-width: 1024px) {
    .about-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 80px;
    }
}

.about-text { min-width: 0; }
.about-body p {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 18px;
    max-width: 60ch;
}
.about-body em {
    color: var(--accent-teal-2);
    font-style: normal;
    font-weight: 500;
}

.about-emblem {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12px;
}
.emblem-stage {
    position: relative;
    width: 280px;
    height: 280px;
    max-width: 100%;
    filter: drop-shadow(0 0 32px rgba(15, 181, 164, 0.22));
}
.emblem-svg { width: 100%; height: 100%; display: block; }

/* Stat row */
.stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 32px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    background:
        linear-gradient(135deg,
            rgba(8, 10, 18, 0.6),
            rgba(3, 4, 10, 0.4));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 56px;
}
@media (min-width: 768px) {
    .stat-row { grid-template-columns: repeat(4, 1fr); }
}
.stat { text-align: left; min-width: 0; }
.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-gold-2), var(--accent-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
}
.stat-value .unit {
    font-size: 0.55em;
    color: var(--accent-gold);
    -webkit-background-clip: initial;
    background-clip: initial;
    background: none;
    margin-left: 2px;
}
.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Offices strip */
.offices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
@media (min-width: 768px) { .offices { grid-template-columns: repeat(4, 1fr); } }

.office {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: rgba(8, 10, 18, 0.4);
    transition: border-color var(--d-base) var(--ease-out),
                background var(--d-base) var(--ease-out);
}
.office:hover {
    border-color: rgba(15, 181, 164, 0.4);
    background: rgba(8, 10, 18, 0.6);
}
.office-flag { font-size: 22px; line-height: 1; }
.office-city {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.2;
}
.office-country { color: var(--text-muted); font-weight: 400; }
.office-coords {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: rgba(15, 181, 164, 0.7);
    margin-top: 3px;
}

/* ==========================================================
   SERVICES (2x2 tilt cards)
   ========================================================== */
.section-services {
    padding-top: var(--space-7);
    /* Sit above the fixed map stage. From this section onward
       the map is fully hidden; the JS opacity-fade should have
       brought map-stage-opacity to ~0 well before this point,
       but a solid background here is the safety net. */
    position: relative;
    z-index: 2;
    background: var(--bg-deep);
}
.services-head {
    max-width: 880px;
    margin-bottom: 56px;
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    perspective: 1500px;
}
@media (min-width: 880px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

.service-card {
    position: relative;
    padding: 36px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    background:
        linear-gradient(135deg,
            rgba(8, 10, 18, 0.85),
            rgba(3, 4, 10, 0.7));
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: border-color var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out);
    will-change: transform;
}
.service-card:hover {
    border-color: rgba(15, 181, 164, 0.4);
    box-shadow: var(--shadow-glow-teal),
                0 18px 40px -16px rgba(0, 0, 0, 0.55);
}

/* Cursor-following glow — driven by services.js with --mx, --my */
.card-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
    background: radial-gradient(
        420px circle at var(--mx, 50%) var(--my, 50%),
        rgba(15, 181, 164, 0.16),
        transparent 55%);
}
.service-card:hover .card-glow { opacity: 1; }

.card-index {
    position: absolute;
    top: 22px;
    right: 28px;
    z-index: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.18);
    transform: translateZ(20px);
}

.card-inner {
    position: relative;
    z-index: 1;
    transform: translateZ(40px);   /* lifts content above the glow plane for the 3D tilt */
    transform-style: preserve-3d;
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: linear-gradient(135deg,
        rgba(15, 181, 164, 0.15),
        rgba(20, 215, 195, 0.05));
    border: 1px solid rgba(15, 181, 164, 0.3);
    color: var(--accent-teal-2);
    font-size: 22px;
    margin-bottom: 22px;
    transition: transform var(--d-base) var(--ease-out),
                background var(--d-base) var(--ease-out);
}
.service-card:hover .card-icon {
    transform: scale(1.05) translateZ(60px);
    background: linear-gradient(135deg,
        rgba(15, 181, 164, 0.28),
        rgba(20, 215, 195, 0.10));
}

.card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.card-tagline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-teal-2);
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}
.card-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 22px;
    font-size: 0.95rem;
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: grid;
    gap: 8px;
}
.card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.card-features i {
    color: var(--accent-teal);
    font-size: 0.85em;
    flex-shrink: 0;
    margin-top: 4px;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-gold-2);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.card-cta i {
    transition: transform var(--d-base) var(--ease-out);
}
.card-cta:hover i { transform: translateX(4px); }

/* ==========================================================
   WHY CHOOSE US  (Phase 4)
   ========================================================== */
.section-why {
    position: relative;
    overflow: hidden;
    z-index: 2;
    background: var(--bg-deep);
}
.section-why::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(201, 162, 39, 0.05), transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(15, 181, 164, 0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.section-why > .container-x { position: relative; z-index: 1; }

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 56px;
}
@media (min-width: 720px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

.why-card {
    position: relative;
    padding: 28px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: rgba(8, 10, 18, 0.5);
    overflow: hidden;
    transition: border-color var(--d-base) var(--ease-out),
                background var(--d-base) var(--ease-out),
                transform var(--d-base) var(--ease-out);
}
.why-card::before {
    content: '';
    position: absolute;
    left: 0; top: 24px; bottom: 24px;
    width: 2px;
    background: linear-gradient(to bottom,
        transparent,
        var(--accent-teal),
        transparent);
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
}
.why-card:hover {
    border-color: rgba(15, 181, 164, 0.35);
    background: rgba(8, 10, 18, 0.75);
    transform: translateY(-3px);
}
.why-card:hover::before { opacity: 1; }

.why-card-num {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.18);
}

.why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 50%;
    border: 1px solid rgba(15, 181, 164, 0.35);
    background: rgba(15, 181, 164, 0.08);
    color: var(--accent-teal-2);
    font-size: 16px;
    transition: transform var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out);
}
.why-card:hover .why-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 24px rgba(15, 181, 164, 0.25);
}

.why-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px;
}
.why-body {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.6;
}

/* ==========================================================
   CONTACT
   ========================================================== */
.section-contact {
    position: relative;
    overflow: hidden;
    z-index: 2;
    background: linear-gradient(to bottom,
        var(--bg-deep),
        rgba(8, 10, 18, 0.35),
        var(--bg-deep));
}
.section-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 181, 164, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 181, 164, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}
.section-contact > .container-x { position: relative; z-index: 1; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 48px;
}
@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 80px;
    }
}

.contact-info { min-width: 0; }

.contact-channels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 36px;
    max-width: 440px;
}
@media (min-width: 540px) { .contact-channels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact-channels { grid-template-columns: 1fr; max-width: 360px; } }
@media (min-width: 1280px) { .contact-channels { grid-template-columns: 1fr 1fr; max-width: 520px; } }

.channel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: rgba(8, 10, 18, 0.4);
    color: inherit;
    transition: border-color var(--d-base) var(--ease-out),
                background var(--d-base) var(--ease-out);
}
a.channel:hover {
    border-color: rgba(15, 181, 164, 0.4);
    background: rgba(8, 10, 18, 0.7);
}
.channel-icon {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, rgba(15,181,164,0.15), rgba(15,181,164,0.04));
    border: 1px solid rgba(15, 181, 164, 0.25);
    color: var(--accent-teal-2);
    flex-shrink: 0;
    font-size: 16px;
}
.channel-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.channel-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

/* ==========================================================
   CONTACT FORM
   ========================================================== */
.contact-form-wrap {
    position: relative;
}
.contact-form {
    position: relative;
    padding: 36px;
    background:
        linear-gradient(135deg,
            rgba(8, 10, 18, 0.85),
            rgba(3, 4, 10, 0.7));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}
.form-head h3 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}
.form-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(15, 181, 164, 0.1);
    border: 1px solid rgba(15, 181, 164, 0.3);
    border-radius: var(--r-full);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--accent-teal-2);
    text-transform: uppercase;
}

/* Honeypot — visually hidden, accessibility-clear for bots */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Form rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* Floating-label field */
.field {
    position: relative;
}
.field input,
.field textarea {
    width: 100%;
    padding: 22px 16px 8px;
    background: rgba(3, 4, 10, 0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 200ms var(--ease-out),
                background    200ms var(--ease-out),
                box-shadow    200ms var(--ease-out);
    resize: vertical;
}
.field textarea {
    min-height: 130px;
    padding-top: 26px;
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent-teal);
    background: rgba(3, 4, 10, 0.7);
    box-shadow: 0 0 0 3px rgba(15, 181, 164, 0.12);
}
.field label {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 0.95rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: top 180ms var(--ease-out),
                font-size 180ms var(--ease-out),
                color 180ms var(--ease-out),
                letter-spacing 180ms var(--ease-out);
    background: transparent;
}
.field label .opt {
    color: var(--text-muted);
    opacity: 0.7;
    font-size: 0.85em;
    margin-left: 4px;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    top: 7px;
    font-size: 0.65rem;
    color: var(--accent-teal-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Response banner */
.form-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    margin: 18px 0 4px;
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid;
}
.form-banner i { font-size: 1.05rem; margin-top: 1px; flex-shrink: 0; }
.banner-success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}
.banner-info {
    background: rgba(15, 181, 164, 0.08);
    border-color: rgba(15, 181, 164, 0.35);
    color: var(--accent-teal-2);
}

/* Actions */
.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.form-actions .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.form-fineprint {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.5;
}

/* Alpine x-cloak — hides x-show elements until Alpine inits */
[x-cloak] { display: none !important; }

/* ==========================================================
   FOOTER (Phase 4 full)
   ========================================================== */
.site-footer-full {
    position: relative;
    z-index: 5;
    background:
        linear-gradient(to bottom,
            rgba(3, 4, 10, 0.6),
            rgba(3, 4, 10, 0.95));
    border-top: 1px solid var(--border-soft);
    margin-top: var(--space-7);
}

/* Top CTA strip */
.footer-cta {
    border-bottom: 1px solid var(--border-soft);
    background:
        radial-gradient(ellipse 80% 100% at 50% 0%, rgba(15, 181, 164, 0.08), transparent 70%);
}
.footer-cta-inner {
    padding-block: 56px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 880px) {
    .footer-cta-inner { grid-template-columns: 1.4fr 1fr; gap: 56px; }
}
.footer-cta-eyebrow {
    margin: 0 0 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-gold);
}
.footer-cta-heading {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 640px;
}
.footer-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
@media (min-width: 880px) { .footer-cta-actions { justify-content: flex-end; } }

/* Main 4-column footer */
.footer-main {
    padding-block: 56px;
}
.footer-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 56px; } }

.footer-col-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 20px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.footer-brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.footer-brand-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 3px;
}
.footer-blurb {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
    max-width: 320px;
}
.footer-flags {
    display: inline-flex;
    gap: 10px;
    font-size: 18px;
    padding: 8px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-full);
    background: rgba(8, 10, 18, 0.4);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.footer-links a {
    color: var(--text-secondary);
    font-size: 0.92rem;
    transition: color 180ms var(--ease-out),
                padding-left 180ms var(--ease-out);
    display: inline-block;
}
.footer-links a:hover {
    color: var(--accent-teal-2);
    padding-left: 8px;
}

.footer-offices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}
.footer-offices li {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-offices a,
.footer-offices > li > span:not(.footer-off-flag) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: color 180ms var(--ease-out);
}
.footer-offices a:hover .footer-off-num { color: var(--accent-teal-2); }
.footer-off-flag { font-size: 18px; flex-shrink: 0; }
.footer-off-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.footer-off-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    transition: color 180ms var(--ease-out);
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid var(--border-soft);
    padding-block: 20px;
}
.footer-bottom-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}
@media (min-width: 768px) {
    .footer-bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ==========================================================
   QUOTE MODAL  (Phase 5)
   ========================================================== */
html.modal-open,
html.modal-open body {
    overflow: hidden;
}

.quote-modal-root {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.quote-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 22, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.quote-card-wrap {
    position: relative;
    width: 100%;
    max-width: 820px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

.quote-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            rgba(13, 16, 25, 0.96),
            rgba(3, 4, 10, 0.96));
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    box-shadow:
        0 32px 64px -16px rgba(0, 0, 0, 0.6),
        0 0 60px -10px rgba(15, 181, 164, 0.25);
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

/* Corner brackets — cyber HUD detail */
.qc-bracket {
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid var(--accent-teal);
    pointer-events: none;
    z-index: 2;
}
.qc-bracket--tl { top: 14px;    left: 14px;    border-right: 0; border-bottom: 0; }
.qc-bracket--tr { top: 14px;    right: 14px;   border-left: 0;  border-bottom: 0; }
.qc-bracket--bl { bottom: 14px; left: 14px;    border-right: 0; border-top: 0; }
.qc-bracket--br { bottom: 14px; right: 14px;   border-left: 0;  border-top: 0; }

/* Close button */
.quote-close {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 3;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 16px;
    transition: background 180ms var(--ease-out),
                border-color 180ms var(--ease-out),
                color 180ms var(--ease-out),
                transform 180ms var(--ease-out);
}
.quote-close:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    transform: rotate(90deg);
}

/* Scrollable inner */
.quote-card-inner {
    overflow-y: auto;
    padding: 44px 44px 36px;
    flex: 1;
    scrollbar-color: rgba(15,181,164,0.4) transparent;
    scrollbar-width: thin;
}
.quote-card-inner::-webkit-scrollbar { width: 8px; }
.quote-card-inner::-webkit-scrollbar-thumb {
    background: rgba(15,181,164,0.3);
    border-radius: 4px;
}
.quote-card-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(15,181,164,0.5);
}
@media (max-width: 640px) {
    .quote-card-inner { padding: 32px 22px 28px; }
}

/* Header */
.qm-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
}
.qm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-teal-2);
    margin: 0 0 14px;
}
.qm-eyebrow .dot {
    width: 6px; height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-gold);
}
.qm-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.qm-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 540px;
}

/* Sections (fieldsets) */
.qm-section {
    border: 0;
    padding: 0;
    margin: 0 0 28px;
}
.qm-legend {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 16px;
    width: 100%;
}
.qm-legend .num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--accent-gold);
    padding: 3px 8px;
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--r-sm);
    font-weight: 700;
}
.qm-legend-hint {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--accent-teal-2);
    letter-spacing: 0.05em;
    text-transform: none;
}

/* Rows reuse the .form-row + .field styles from Contact (Phase 4) */
.qm-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (min-width: 640px) { .qm-row { grid-template-columns: 1fr 1fr; } }

/* Select fields — custom Alpine dropdown
   (replaces native <select> which can't be styled when open) */
.select-custom {
    position: relative;
    width: 100%;
}

.select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px;
    background: rgba(3, 4, 10, 0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 200ms var(--ease-out),
                background    200ms var(--ease-out),
                box-shadow    200ms var(--ease-out);
}
.select-trigger:hover {
    border-color: rgba(15, 181, 164, 0.4);
    background: rgba(3, 4, 10, 0.7);
}
.select-custom.is-open .select-trigger {
    border-color: var(--accent-teal);
    background: rgba(3, 4, 10, 0.8);
    box-shadow: 0 0 0 3px rgba(15, 181, 164, 0.12);
}

.select-trigger-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-trigger-value.is-placeholder { color: var(--text-muted); }
.select-trigger-value.has-value     { color: var(--text-primary); }

.select-trigger-arrow {
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 250ms var(--ease-out),
                color 200ms var(--ease-out);
    flex-shrink: 0;
}
.select-custom.is-open .select-trigger-arrow {
    transform: rotate(180deg);
    color: var(--accent-teal-2);
}

/* Dropdown menu panel */
.select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    background:
        linear-gradient(180deg,
            rgba(13, 16, 25, 0.98),
            rgba(8, 10, 18, 0.98));
    border: 1px solid rgba(15, 181, 164, 0.3);
    border-radius: var(--r-md);
    box-shadow:
        0 20px 40px -10px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(15, 181, 164, 0.06),
        0 0 24px -8px rgba(15, 181, 164, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scrollbar-color: rgba(15, 181, 164, 0.4) transparent;
    scrollbar-width: thin;
}
.select-menu::-webkit-scrollbar { width: 6px; }
.select-menu::-webkit-scrollbar-thumb {
    background: rgba(15, 181, 164, 0.3);
    border-radius: 3px;
}

.select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    font-size: 0.93rem;
    cursor: pointer;
    transition: background 120ms var(--ease-out),
                color 120ms var(--ease-out),
                padding-left 200ms var(--ease-out);
}
.select-option:hover {
    background: rgba(15, 181, 164, 0.12);
    color: var(--text-primary);
    padding-left: 16px;
}
.select-option.is-placeholder {
    color: var(--text-muted);
    font-style: italic;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
    border-radius: 0;
}
.select-option.is-placeholder:hover { padding-left: 12px; }
.select-option.is-selected {
    color: var(--accent-teal-2);
    background: rgba(15, 181, 164, 0.08);
}
.select-option-tick {
    font-size: 11px;
    color: var(--accent-teal);
    flex-shrink: 0;
}

/* Dropdown menu transitions (Alpine x-transition classes) */
.select-menu-enter,
.select-menu-leave {
    transition: opacity 180ms var(--ease-out),
                transform 220ms var(--ease-out);
}
.select-menu-enter-start,
.select-menu-leave-end {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
}
.select-menu-enter-end,
.select-menu-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Legacy native-select styling — kept for any future <select> elements */
.field-select {
    position: relative;
}
.field-select select {
    width: 100%;
    padding: 18px 44px 18px 16px;
    background: rgba(3, 4, 10, 0.5);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 200ms var(--ease-out),
                background    200ms var(--ease-out),
                box-shadow    200ms var(--ease-out);
}
.field-select select:focus {
    outline: none;
    border-color: var(--accent-teal);
    background: rgba(3, 4, 10, 0.7);
    box-shadow: 0 0 0 3px rgba(15, 181, 164, 0.12);
}
.field-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 11px;
}

/* Service checkboxes */
.qm-services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) { .qm-services { grid-template-columns: 1fr 1fr; } }

.svc-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(3, 4, 10, 0.4);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 200ms var(--ease-out),
                background 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
}
.svc-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.svc-check:hover {
    border-color: rgba(15, 181, 164, 0.35);
    background: rgba(8, 10, 18, 0.6);
}
.svc-check.is-checked {
    border-color: var(--accent-teal);
    background: rgba(15, 181, 164, 0.08);
    box-shadow: inset 0 0 0 1px rgba(15, 181, 164, 0.3);
}

.svc-check-icon {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: rgba(15, 181, 164, 0.1);
    border: 1px solid rgba(15, 181, 164, 0.25);
    color: var(--accent-teal-2);
    font-size: 15px;
    flex-shrink: 0;
    transition: background 200ms, transform 200ms;
}
.svc-check.is-checked .svc-check-icon {
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-teal-2));
    border-color: var(--accent-teal);
    color: var(--bg-deep);
    transform: scale(1.05);
}

.svc-check-text { flex: 1; min-width: 0; }
.svc-check-name {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.2;
}
.svc-check-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

.svc-check-tick {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-teal);
    color: var(--bg-deep);
    font-size: 10px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 180ms var(--ease-out),
                transform 180ms var(--ease-out);
    flex-shrink: 0;
}
.svc-check.is-checked .svc-check-tick {
    opacity: 1;
    transform: scale(1);
}

/* Actions */
.qm-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-soft);
}
.btn-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 180ms var(--ease-out);
    padding: 8px 4px;
}
.btn-link:hover { color: var(--text-primary); }

/* ==========================================================
   QUOTE MODAL — transition classes for Alpine x-transition
   ========================================================== */
.qm-fade-enter,
.qm-fade-leave {
    transition: opacity 280ms var(--ease-out);
}
.qm-fade-enter-start,
.qm-fade-leave-end { opacity: 0; }
.qm-fade-enter-end,
.qm-fade-leave-start { opacity: 1; }

.qm-card-enter {
    transition: opacity 380ms var(--ease-out),
                transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qm-card-leave {
    transition: opacity 220ms var(--ease-out),
                transform 280ms var(--ease-in-out);
}
.qm-card-enter-start {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
}
.qm-card-enter-end {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.qm-card-leave-start {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.qm-card-leave-end {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
}

/* ==========================================================
   LEGACY FOOTER  (Phase 2 minimal — kept for back-compat)
   ========================================================== */
.site-footer {
    position: relative;
    z-index: 5;
    border-top: 1px solid var(--border-soft);
    padding-block: 28px;
    background: rgba(3, 4, 10, 0.6);
    backdrop-filter: blur(8px);
}
.site-footer .row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
@media (min-width: 768px) {
    .site-footer .row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ==========================================================
   Accessibility helpers
   ========================================================== */
:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

::selection {
    background: rgba(15, 181, 164, 0.35);
    color: var(--text-primary);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================
   Logo image — nav / footer / mobile menu / boot overlay
   ========================================================== */
.nav-logo-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.footer-logo-img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    margin-bottom: 4px;
}

.mobile-menu-logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.boot-logo-img {
    display: block;
    height: 50px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: brightness(1.1);
}

/* Ensure nav-brand flex still works with logo + text */
.nav-brand {
    gap: 10px;
}