/* Dark + white AV theme: sound-reactive EQ, lighting washes, warm peak accents */
:root {
    --primary: #030303;
    --text-color: #ffffff;
    --text-color-2: rgba(255, 255, 255, 0.68);
    --accent-color: #f5f5f5;
    --accent-color-2: #1e5983;
    --accent-color-3: #0a0a0a;
    --accent-color-4: #141414;
    --accent-color-5: #1a1a1a;
    --accent-color-6: linear-gradient(90deg, #ffffff 0%, rgba(30, 89, 131, 0.95) 50%, #ffffff 100%);
    --accent-color-7: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.35) 0%, rgba(30, 89, 131, 0.2) 55%, transparent 100%);
    --sound-bar-low: rgba(255, 255, 255, 0.25);
    --sound-bar-mid: rgba(255, 255, 255, 0.75);
    --sound-bar-peak: #1e5983;
    --light-glow: rgba(255, 255, 255, 0.12);
    --light-warm: rgba(30, 89, 131, 0.15);
}

body {
    background-color: var(--primary);
    color: var(--text-color);
    color-scheme: dark;
    /* Bootstrap 5 still ships light-theme tokens on :root — map them for dark UI */
    --bs-body-color: #f5f5f5;
    --bs-body-bg: #030303;
    --bs-heading-color: #ffffff;
    --bs-secondary-color: rgba(255, 255, 255, 0.68);
    --bs-tertiary-color: rgba(255, 255, 255, 0.5);
    --bs-emphasis-color: #ffffff;
    --bs-border-color: rgba(255, 255, 255, 0.12);
}

/* Utility text classes that used purple/dark tones — with AV vars they became near-black on black */
.accent-color-3,
.accent-color-4,
.accent-color-5 {
    color: rgba(255, 255, 255, 0.72) !important;
}

.text-404.accent-color-3,
.text-404.accent-color-4,
.text-404.accent-color-5 {
    color: rgba(255, 255, 255, 0.11) !important;
}

.accent-color-primary {
    color: var(--text-color) !important;
}

.p-banner {
    color: var(--text-color) !important;
}

.sub-heading.footer {
    color: rgba(255, 255, 255, 0.78) !important;
}

.text-secondary,
.text-body-secondary {
    color: var(--text-color-2) !important;
}

.text-muted {
    color: rgba(255, 255, 255, 0.52) !important;
}

.card {
    --bs-card-color: rgba(255, 255, 255, 0.92);
    color: var(--bs-card-color);
}

.list.text-black i {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Ambient “stage lighting” behind content */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, var(--light-warm), transparent 55%),
        radial-gradient(ellipse 40% 35% at 100% 40%, var(--light-glow), transparent),
        radial-gradient(ellipse 35% 30% at 0% 70%, var(--light-glow), transparent);
    opacity: 0.9;
}

/* ════════════════════════════════════════════
   NAVBAR — stage lighting concept
   Warm amber footlights, spotlight cones on
   active/hover links, slow beam scan on pill
════════════════════════════════════════════ */
#header,
#header.fixed-top {
    z-index: 1030;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    isolation: isolate;
}

/* Downward amber wash — PAR cans spilling below the truss */
#header::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: 5%;
    right: 5%;
    height: 60px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        ellipse 80% 100% at 50% 0%,
        rgba(30, 89, 131, 0.18) 0%,
        rgba(74, 138, 184, 0.06) 55%,
        transparent 100%
    );
    animation: navbar-wash 6s ease-in-out infinite alternate;
}

@keyframes navbar-wash {
    0%   { opacity: 0.7;  transform: scaleX(0.92); }
    100% { opacity: 1;    transform: scaleX(1.04); }
}

/* Navbar pill */
#header .navbar {
    padding-block: 0.65rem !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none !important;
}

#header .navbar .container-fluid {
    position: relative;
    overflow: hidden;
    background: rgba(6, 6, 8, 0.88) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(30, 89, 131, 0.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(100, 165, 200, 0.12),
        0 0 0 1px rgba(30, 89, 131, 0.14),
        0 6px 32px rgba(30, 89, 131, 0.14),
        0 12px 48px rgba(0, 0, 0, 0.6) !important;
    animation: navbar-pill-glow 7s ease-in-out infinite alternate;
}

/* Slow moving scan beam across the pill — follow-spot sweeping the truss */
#header .navbar .container-fluid::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(110, 172, 208, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 60%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: navbar-scan 9s ease-in-out infinite;
}

@keyframes navbar-pill-glow {
    0% {
        box-shadow:
            inset 0 1px 0 rgba(100, 165, 200, 0.10),
            0 0 0 1px rgba(30, 89, 131, 0.10),
            0 6px 24px rgba(30, 89, 131, 0.10),
            0 12px 48px rgba(0, 0, 0, 0.6);
    }
    100% {
        box-shadow:
            inset 0 1px 0 rgba(100, 165, 200, 0.18),
            0 0 0 1px rgba(52, 118, 162, 0.26),
            0 6px 36px rgba(30, 89, 131, 0.22),
            0 12px 56px rgba(0, 0, 0, 0.55);
    }
}

@keyframes navbar-scan {
    0%   { transform: translateX(-110%); opacity: 0;   }
    8%   { opacity: 1; }
    55%  { transform: translateX(110%);  opacity: 1;   }
    56%  { opacity: 0; }
    100% { transform: translateX(110%);  opacity: 0;   }
}

/* Nav links */
.navbar-nav .nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.88rem !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.5rem 0.9rem !important;
    border-radius: 8px;
    z-index: 1;
    transition: color 0.22s ease, background 0.22s ease, text-shadow 0.22s ease !important;
}

/* Hover — parcan brightens the link */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.show {
    color: #ffffff !important;
    background: rgba(30, 89, 131, 0.09) !important;
    text-shadow: 0 0 16px rgba(80, 145, 188, 0.55) !important;
}

/* Active — full spotlight: bright text + warm glow + downward cone */
.navbar-nav .nav-link.active {
    color: #ffffff !important;
    background: rgba(30, 89, 131, 0.13) !important;
    text-shadow:
        0 0 12px rgba(105, 168, 205, 0.9),
        0 0 28px rgba(30, 89, 131, 0.55) !important;
    font-weight: 600;
}

/* Spotlight cone spreading below the active link */
.navbar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 160%;
    height: 52px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        ellipse 80% 100% at 50% 0%,
        rgba(45, 105, 148, 0.32) 0%,
        rgba(30, 89, 131, 0.10) 48%,
        transparent 76%
    );
    animation: spotlight-cone 4s ease-in-out infinite alternate;
}

/* Orange bar — the lamp source at the base of the active link */
.navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(95, 160, 198, 0.95),
        transparent
    );
    box-shadow: 0 0 12px 3px rgba(30, 89, 131, 0.6);
    animation: spotlight-bar 4s ease-in-out infinite alternate;
}

@keyframes spotlight-cone {
    0%   { opacity: 0.6;  transform: translateX(-50%) scaleX(0.88); }
    100% { opacity: 1;    transform: translateX(-50%) scaleX(1.1);  }
}

@keyframes spotlight-bar {
    0%   { opacity: 0.6;  box-shadow: 0 0 8px 2px rgba(30,89,131,0.45);  }
    100% { opacity: 1;    box-shadow: 0 0 16px 4px rgba(30,89,131,0.75); }
}

/* Logo */
#header .logo-container {
    max-width: 130px;
    flex-shrink: 0;
}

/* Mobile toggler */
#header .navbar-toggler {
    border: 1px solid rgba(30, 89, 131, 0.28) !important;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: rgba(30, 89, 131, 0.1);
}

#header .navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(30, 89, 131, 0.35);
}

/* Dropdown */
.dropdown-menu {
    background: rgba(6, 6, 8, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-top-color: rgba(30, 89, 131, 0.28) !important;
    border-radius: 14px !important;
    box-shadow:
        0 0 0 1px rgba(30, 89, 131, 0.1),
        0 16px 48px rgba(0, 0, 0, 0.65),
        0 0 28px rgba(30, 89, 131, 0.08) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.86rem;
    border-radius: 7px;
    margin-inline: 4px;
    padding: 0.45rem 0.75rem !important;
    width: calc(100% - 8px) !important;
    transition: background 0.18s ease, text-shadow 0.18s ease !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(30, 89, 131, 0.12) !important;
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(52, 118, 162, 0.45) !important;
}

/* Mega menu scroll */
@media (min-width: 1200px) {
    .mega-menu {
        max-height: min(72vh, 640px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #header::after,
    #header .navbar .container-fluid,
    #header .navbar .container-fluid::after,
    .navbar-nav .nav-link.active::before,
    .navbar-nav .nav-link.active::after {
        animation: none !important;
    }
}

.text-accent {
    background: linear-gradient(
        110deg,
        #ffffff 0%,
        #ffffff 40%,
        #1e5983 52%,
        #ffffff 65%,
        #e8e8e8 100%
    );
    background-size: 180% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sound-light-sweep 6s ease-in-out infinite alternate;
}

@keyframes sound-light-sweep {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.btn-accent {
    background-color: #ffffff !important;
    color: #030303 !important;
    border: 4px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-accent:hover {
    box-shadow: 0 0 32px rgba(30, 89, 131, 0.45), 0 4px 24px rgba(255, 255, 255, 0.15) !important;
    color: #030303 !important;
}

.btn-accent.line {
    background: transparent !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

.btn-accent.line:hover {
    border-color: #1e5983 !important;
    color: #ffffff !important;
    background: rgba(30, 89, 131, 0.12) !important;
}

/* Icons: base theme set hover i → white, which vanishes on white fill — keep contrast */
.btn-accent:not(.line) i,
.btn-accent:not(.line) .rtmicon,
.btn-accent:not(.line) svg {
    color: #030303 !important;
    fill: currentColor !important;
}

.btn-accent:not(.line):hover,
.btn-accent:not(.line):focus-visible {
    color: #030303 !important;
}

.btn-accent:not(.line):hover i,
.btn-accent:not(.line):hover .rtmicon,
.btn-accent:not(.line):focus-visible i,
.btn-accent:not(.line):focus-visible .rtmicon,
.btn-accent:not(.line):hover svg,
.btn-accent:not(.line):focus-visible svg {
    color: #030303 !important;
    fill: currentColor !important;
}

.btn-accent.line i,
.btn-accent.line .rtmicon,
.btn-accent.line svg {
    color: #ffffff !important;
    fill: currentColor !important;
}

.btn-accent.line:hover i,
.btn-accent.line:hover .rtmicon,
.btn-accent.line:focus-visible i,
.btn-accent.line:focus-visible .rtmicon,
.btn-accent.line:hover svg {
    color: #ffffff !important;
    fill: currentColor !important;
}

.btn-accent > i,
.btn-accent > .rtmicon,
.btn-accent > span {
    position: relative;
    z-index: 2;
}

.btn-accent:hover span,
.btn-accent:hover i {
    animation: none !important;
}

/* Replace purple animated washes with dark + white “spots” + warm fill */
.animated-gradient {
    background-color: #040404 !important;
    background-image:
        radial-gradient(at 78% 12%, rgba(255, 255, 255, 0.14) 0px, transparent 45%),
        radial-gradient(at 18% 88%, rgba(30, 89, 131, 0.12) 0px, transparent 48%),
        radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.04) 0px, transparent 70%) !important;
    background-size: 160% 160%;
    animation: lighting-shift 8s ease-in-out infinite alternate !important;
}

/* CTAs use .btn-accent + .animated-gradient; section wash must not replace button fill */
.btn.btn-accent.animated-gradient,
a.btn.btn-accent.animated-gradient,
button.btn.btn-accent.animated-gradient {
    background-color: #ffffff !important;
    background-image: linear-gradient(
        125deg,
        #ffffff 0%,
        #f5f5f5 45%,
        #f3f8fc 60%,
        #ffffff 100%
    ) !important;
    background-size: 220% 220%;
    animation: btn-accent-sheen 6s ease-in-out infinite alternate !important;
    color: #030303 !important;
}

.btn.btn-accent.animated-gradient:hover,
a.btn.btn-accent.animated-gradient:hover,
button.btn.btn-accent.animated-gradient:hover {
    color: #030303 !important;
    border-color: rgba(30, 89, 131, 0.5) !important;
    box-shadow:
        0 0 28px rgba(30, 89, 131, 0.35),
        0 6px 20px rgba(0, 0, 0, 0.12) !important;
    filter: brightness(0.98);
}

.btn.btn-accent.animated-gradient:hover i,
a.btn.btn-accent.animated-gradient:hover i,
button.btn.btn-accent.animated-gradient:hover i,
.btn.btn-accent.animated-gradient:hover .rtmicon,
a.btn.btn-accent.animated-gradient:hover .rtmicon {
    color: #030303 !important;
}

.btn.btn-accent.line.animated-gradient,
a.btn.btn-accent.line.animated-gradient,
button.btn.btn-accent.line.animated-gradient {
    background: transparent !important;
    background-image: none !important;
    animation: none !important;
    color: #ffffff !important;
}

.btn.btn-accent.line.animated-gradient:hover,
a.btn.btn-accent.line.animated-gradient:hover,
button.btn.btn-accent.line.animated-gradient:hover {
    color: #ffffff !important;
}

.btn.btn-accent.line.animated-gradient:hover i,
a.btn.btn-accent.line.animated-gradient:hover i,
button.btn.btn-accent.line.animated-gradient:hover i {
    color: #ffffff !important;
}

@keyframes btn-accent-sheen {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.animated-gradient.heroheader {
    background-color: #010101 !important;
    background-image:
        radial-gradient(ellipse 45% 55% at 100% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 0% 15%, rgba(30, 89, 131, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 55% 50% at 90% 95%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 30% 100%, rgba(30, 89, 131, 0.08) 0%, transparent 50%) !important;
    background-size: 140% 140%;
    animation: lighting-shift 12s ease-in-out infinite alternate !important;
    position: relative;
    overflow: hidden;
}

.animated-gradient.heroheader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 22%,
        transparent 78%,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
}

@keyframes lighting-shift {
    0% {
        background-position: 0% 0%, 100% 80%, 20% 100%, 60% 0%;
    }
    100% {
        background-position: 100% 40%, 0% 20%, 80% 0%, 30% 100%;
    }
}

.animated-gradient.card-image-single,
.animated-gradient.card-service,
.animated-gradient.cta,
.animated-gradient.middle,
.animated-gradient.team,
.animated-gradient.footer {
    background-color: #050505 !important;
    background-image:
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(30, 89, 131, 0.1) 0%, transparent 55%) !important;
    animation: lighting-shift 10s ease-in-out infinite alternate !important;
}

/* —— Audio frequency display —— */
.audio-showcase {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 2rem 1rem;
    z-index: 1;
}

.audio-visual {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem 2rem;
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 0 60px rgba(30, 89, 131, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.audio-visual__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin: 0;
}

.audio-visual__wave-wrap {
    width: 100%;
    height: 72px;
    opacity: 0.85;
}

.audio-visual__wave {
    width: 100%;
    height: 100%;
    display: block;
}

.audio-visual__wave path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14 10;
    animation: waveform-flow 2.8s linear infinite;
}

.audio-visual__wave path:nth-child(1) {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
}

.audio-visual__wave path:nth-child(2) {
    stroke: rgba(30, 89, 131, 0.75);
    stroke-width: 1.75;
    animation-duration: 2s;
    animation-direction: reverse;
}

.audio-visual__wave path:nth-child(3) {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.1;
    animation-duration: 3.5s;
}

@keyframes waveform-flow {
    to {
        stroke-dashoffset: -120;
    }
}

.audio-visual__eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 140px;
    padding: 0 0.25rem;
}

.audio-visual__bar {
    flex: 0 0 6px;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(
        180deg,
        var(--sound-bar-peak) 0%,
        var(--sound-bar-mid) 35%,
        var(--sound-bar-low) 85%,
        rgba(255, 255, 255, 0.08) 100%
    );
    transform-origin: bottom center;
    transform: scaleY(0.35);
    box-shadow: 0 0 14px rgba(30, 89, 131, 0.15);
    animation: eq-frequency 0.85s ease-in-out infinite alternate;
}

.audio-visual__bar:nth-child(1) {
    animation-duration: 0.52s;
    animation-delay: 0s;
}

.audio-visual__bar:nth-child(2) {
    animation-duration: 0.68s;
    animation-delay: 0.07s;
}

.audio-visual__bar:nth-child(3) {
    animation-duration: 0.45s;
    animation-delay: 0.14s;
}

.audio-visual__bar:nth-child(4) {
    animation-duration: 0.76s;
    animation-delay: 0.05s;
}

.audio-visual__bar:nth-child(5) {
    animation-duration: 0.58s;
    animation-delay: 0.11s;
}

.audio-visual__bar:nth-child(6) {
    animation-duration: 0.72s;
    animation-delay: 0.18s;
}

.audio-visual__bar:nth-child(7) {
    animation-duration: 0.5s;
    animation-delay: 0.02s;
}

.audio-visual__bar:nth-child(8) {
    animation-duration: 0.65s;
    animation-delay: 0.2s;
}

.audio-visual__bar:nth-child(9) {
    animation-duration: 0.55s;
    animation-delay: 0.09s;
}

.audio-visual__bar:nth-child(10) {
    animation-duration: 0.78s;
    animation-delay: 0.16s;
}

.audio-visual__bar:nth-child(11) {
    animation-duration: 0.48s;
    animation-delay: 0.12s;
}

.audio-visual__bar:nth-child(12) {
    animation-duration: 0.7s;
    animation-delay: 0.04s;
}

.audio-visual__bar:nth-child(13) {
    animation-duration: 0.6s;
    animation-delay: 0.19s;
}

.audio-visual__bar:nth-child(14) {
    animation-duration: 0.74s;
    animation-delay: 0.08s;
}

.audio-visual__bar:nth-child(15) {
    animation-duration: 0.54s;
    animation-delay: 0.15s;
}

.audio-visual__bar:nth-child(16) {
    animation-duration: 0.66s;
    animation-delay: 0.1s;
}

.audio-visual__bar:nth-child(17) {
    animation-duration: 0.5s;
    animation-delay: 0.03s;
}

.audio-visual__bar:nth-child(18) {
    animation-duration: 0.62s;
    animation-delay: 0.17s;
}

.audio-visual__bar:nth-child(19) {
    animation-duration: 0.56s;
    animation-delay: 0.06s;
}

.audio-visual__bar:nth-child(20) {
    animation-duration: 0.8s;
    animation-delay: 0.13s;
}

@keyframes eq-frequency {
    0% {
        transform: scaleY(0.2);
        filter: brightness(0.85);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.12);
    }
    45% {
        filter: brightness(1.08);
        box-shadow: 0 0 18px rgba(30, 89, 131, 0.35);
    }
    100% {
        transform: scaleY(1);
        filter: brightness(1.15);
        box-shadow: 0 0 22px rgba(255, 255, 255, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .text-accent {
        animation: none;
        background: none;
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
    }

    .animated-gradient,
    .animated-gradient.heroheader,
    .animated-gradient.card-image-single,
    .animated-gradient.card-service,
    .animated-gradient.cta,
    .animated-gradient.middle,
    .animated-gradient.team,
    .animated-gradient.footer {
        animation: none !important;
    }

    .btn.btn-accent.animated-gradient,
    a.btn.btn-accent.animated-gradient,
    button.btn.btn-accent.animated-gradient {
        animation: none !important;
    }

    .audio-visual__bar {
        animation: none;
        transform: scaleY(0.55);
    }

    .audio-visual__wave path {
        animation: none;
    }

    body::after {
        display: none;
    }
}

/* ════════════════════════════════════════════
   Footer nav links
════════════════════════════════════════════ */
.footer-nav__link {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}

.footer-nav__link:hover,
.footer-nav__link:focus-visible {
    color: #1e5983;
    background: rgba(30, 89, 131, 0.09);
    outline: none;
}

/* ════════════════════════════════════════════
   CTA background icon-boxes — FA icons + orange glow
════════════════════════════════════════════ */
.icon-box.cta {
    background: rgba(8, 8, 10, 0.72) !important;
    box-shadow:
        inset 0 0 32px rgba(30, 89, 131, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important;
}

.icon-box.cta i {
    font-size: 1.9rem;
    color: rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 1;
    transition: color 0.4s ease;
}

/* pseudo overlay (same approach as :has(svg) but for all boxes) */
.icon-box.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(30, 89, 131, 0.28) 0%,
        rgba(30, 89, 131, 0.08) 55%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.icon-box.cta.active::before {
    opacity: 1;
}

.icon-box.cta.active i {
    color: rgba(100, 165, 200, 0.92);
    filter: drop-shadow(0 0 8px rgba(30, 89, 131, 0.6));
}

/* ════════════════════════════════════════════
   Global: button size & body text scale
════════════════════════════════════════════ */

/* Smaller buttons — base theme uses 18px / 14px 24px which is too large */
.btn {
    font-size: 0.82rem !important;
    padding: 0.6rem 1.4rem !important;
    letter-spacing: 0.03em;
}

/* Keep pill variant tidy */
.btn.rounded-pill,
.btn.rounded-4 {
    padding: 0.58rem 1.3rem !important;
}

/* Hero/section CTAs — slightly larger than inline buttons */
.hero-copy__ctas .btn,
.hero-bar .btn {
    font-size: 0.86rem !important;
    padding: 0.65rem 1.55rem !important;
}

/* Body text — base 16px reads small at 1440px; bump to 17px */
body,
p {
    font-size: 1.0625rem;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 3.2rem); }
h3 { font-size: clamp(1.35rem, 2.8vw, 2.4rem); }
h4 { font-size: clamp(1.15rem, 2vw, 1.85rem); }
h5 { font-size: clamp(1rem, 1.5vw, 1.4rem); }
h6 { font-size: clamp(0.9rem, 1.2vw, 1.15rem); }

/* Tighten mobile text that the base theme already scales down */
@media (max-width: 1023px) {
    body, p { font-size: 0.97rem; }
    .btn { font-size: 0.8rem !important; padding: 0.55rem 1.2rem !important; }
}

/* ════════════════════════════════════════════
   CONTACT CARDS — stage fixture / PAR face icons
   Same treatment for phone, address, email (replaces
   glossy --accent-color-6 bar on generic .icon-box)
════════════════════════════════════════════ */
.card-contact .icon-box {
    position: relative;
    isolation: isolate;
    overflow: visible;
    width: 4.25rem;
    height: 4.25rem;
    min-width: 4.25rem;
    min-height: 4.25rem;
    padding: 0;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.98);
    background:
        radial-gradient(circle at 32% 26%, rgba(195, 218, 235, 0.2) 0%, transparent 38%),
        radial-gradient(circle at 50% 112%, rgba(35, 95, 140, 0.18) 0%, transparent 42%),
        linear-gradient(168deg, #161616 0%, #0a0a0a 48%, #030303 100%);
    border: 1px solid rgba(30, 89, 131, 0.42);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(30, 89, 131, 0.2),
        0 0 40px rgba(30, 89, 131, 0.07),
        inset 0 1px 0 rgba(198, 220, 238, 0.14),
        inset 0 -14px 32px rgba(0, 0, 0, 0.55);
    transition: box-shadow 0.45s ease, border-color 0.45s ease, transform 0.45s ease;
}

/* Inner “lens” ring */
.card-contact .icon-box::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(30, 89, 131, 0.14);
    pointer-events: none;
    opacity: 0.9;
}

.card-contact .icon-box i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 12px rgba(45, 105, 148, 0.4));
}

a:has(.card-contact):hover .card-contact .icon-box {
    border-color: rgba(72, 132, 178, 0.72);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.65),
        0 0 28px rgba(30, 89, 131, 0.42),
        0 0 56px rgba(30, 89, 131, 0.14),
        inset 0 1px 0 rgba(198, 220, 238, 0.22),
        inset 0 -14px 32px rgba(0, 0, 0, 0.48);
    transform: translateY(-2px);
}

/* ════════════════════════════════════════════
   SERVICE CARDS — real production photos (not purple stock PNGs)
════════════════════════════════════════════ */
.card-service figure {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
}

.card-service figure img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Base theme .circle-glass used purple tints — warm “gel + glass” */
.icon-box.circle-glass {
    background: radial-gradient(
            55% 55% at 42% 36%,
            rgba(208, 228, 242, 0.3) 0%,
            rgba(48, 112, 158, 0.22) 48%,
            rgba(32, 90, 136, 0.1) 100%
        )
        !important;
    border: 1px solid rgba(80, 145, 188, 0.32) !important;
    box-shadow: 0 0 28px rgba(30, 89, 131, 0.14);
    backdrop-filter: blur(10px);
}

/* “Why choose” feature tiles — drop template purple wash */
.card-feature:hover.animated-gradient,
.card-feature.active.animated-gradient {
    background-color: #0c0c0c !important;
    background-image:
        radial-gradient(at 100% 40%, rgba(30, 89, 131, 0.22) 0px, transparent 52%),
        radial-gradient(at 12% 88%, rgba(255, 255, 255, 0.08) 0px, transparent 48%) !important;
    box-shadow: inset 0 0 40px rgba(30, 89, 131, 0.1) !important;
}

/* FAQ section — Q&A help panel (replaces decorative stage photo column) */
.faq-aside-visual {
    min-height: 280px;
    border-radius: 16px;
    border: 1px solid rgba(80, 145, 188, 0.28);
    background:
        radial-gradient(80% 70% at 50% 0%, rgba(30, 89, 131, 0.14) 0%, transparent 55%),
        linear-gradient(165deg, rgba(20, 20, 20, 0.98) 0%, rgba(8, 8, 8, 0.99) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 20px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(198, 220, 238, 0.12);
}

.faq-aside-visual__figure {
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.faq-aside-visual__svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(30, 89, 131, 0.12));
}