/* ============================================================
   Vanguard Multimedia Limited — Custom CSS
   Supplements Tailwind CDN with classes that require
   non-utility CSS: glassmorphism, clip-paths, animations,
   scrollbar styling, and typography polish.
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* accounts for sticky navbar */
}

/* ------------------------------------------------------------------
   Custom scrollbar (Webkit browsers)
   ------------------------------------------------------------------ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0A0F1E;
}
::-webkit-scrollbar-thumb {
    background: #D4A017;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #F0C040;
}

/* ------------------------------------------------------------------
   Glassmorphism card
   ------------------------------------------------------------------ */
.glass-card {
    background: rgba(17, 24, 39, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ------------------------------------------------------------------
   Hero grid pattern background
   ------------------------------------------------------------------ */
.hero-grid {
    background-image:
        linear-gradient(rgba(212, 160, 23, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 160, 23, 0.15) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ------------------------------------------------------------------
   Section diagonal cut (bottom of hero)
   ------------------------------------------------------------------ */
.section-divider-bottom {
    background: #111827;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ------------------------------------------------------------------
   Shimmer overlay for countdown boxes
   ------------------------------------------------------------------ */
.shimmer-overlay {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 160, 23, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* ------------------------------------------------------------------
   Countdown digit flip animation
   ------------------------------------------------------------------ */
.countdown-digit {
    display: inline-block;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.digit-flip {
    animation: digitFlip 0.3s ease;
}

@keyframes digitFlip {
    0%   { transform: translateY(0);    opacity: 1; }
    40%  { transform: translateY(-6px); opacity: 0; }
    60%  { transform: translateY(6px);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* ------------------------------------------------------------------
   Gold shimmer text effect (applied via inline style gradient)
   ------------------------------------------------------------------ */
.text-shimmer {
    background: linear-gradient(
        90deg,
        #D4A017 0%,
        #F0C040 30%,
        #E05C00 60%,
        #D4A017 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 3s linear infinite;
}

@keyframes textShimmer {
    0%   { background-position: 0% center;    }
    100% { background-position: 200% center;  }
}

/* ------------------------------------------------------------------
   Scroll-triggered fade-in-up animation
   (Tailwind defines the keyframes; this fine-tunes timing)
   ------------------------------------------------------------------ */
[data-animate] {
    opacity: 0;
    /* Initial state; JS adds animate-fade-in-up class */
}

/* ------------------------------------------------------------------
   Form select arrow — custom styling
   ------------------------------------------------------------------ */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px !important;
}

/* ------------------------------------------------------------------
   Focus-visible outline — gold ring for keyboard navigation
   ------------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid #D4A017;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ------------------------------------------------------------------
   Smooth input focus transitions
   ------------------------------------------------------------------ */
input, textarea, select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: rgba(212, 160, 23, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

/* ------------------------------------------------------------------
   Typography polish
   ------------------------------------------------------------------ */
h1, h2, h3, .font-display {
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p, li {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------
   Navbar height utility (used for scroll offset calculations in JS)
   ------------------------------------------------------------------ */
#navbar {
    min-height: 72px;
}

/* ------------------------------------------------------------------
   Navbar liquid background
   ------------------------------------------------------------------ */
.navbar-liquid-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

.liquid-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(38px);
    will-change: transform;
}

.liquid-blob--gold {
    width: 320px;
    height: 90px;
    top: -15px;
    left: 8%;
    background: radial-gradient(ellipse, rgba(212, 160, 23, 0.09) 0%, transparent 68%);
    animation: liquidBlob1 8s ease-in-out infinite;
}

.liquid-blob--orange {
    width: 240px;
    height: 70px;
    top: -8px;
    right: 12%;
    background: radial-gradient(ellipse, rgba(224, 92, 0, 0.07) 0%, transparent 68%);
    animation: liquidBlob2 11s ease-in-out infinite;
}

@keyframes liquidBlob1 {
    0%, 100% { transform: translateX(0%)    scaleX(1)    scaleY(1);    }
    25%       { transform: translateX(6%)   scaleX(1.12) scaleY(0.88); }
    50%       { transform: translateX(12%)  scaleX(0.94) scaleY(1.12); }
    75%       { transform: translateX(4%)   scaleX(1.06) scaleY(0.94); }
}

@keyframes liquidBlob2 {
    0%, 100% { transform: translateX(0%)    scaleX(1)    scaleY(1);    }
    30%       { transform: translateX(-8%)  scaleX(1.10) scaleY(0.90); }
    65%       { transform: translateX(-4%)  scaleX(0.92) scaleY(1.10); }
}

/* ------------------------------------------------------------------
   Brands section — floating diamonds + scan line
   ------------------------------------------------------------------ */
.brands-diamond {
    position: absolute;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(212, 160, 23, 0.18);
    transform: rotate(45deg);
    pointer-events: none;
    animation: diamondFloat 9s ease-in-out infinite;
}

.brands-diamond--sm {
    width: 20px;
    height: 20px;
    border-color: rgba(224, 92, 0, 0.14);
    animation-duration: 12s;
    animation-delay: -4s;
}

.brands-diamond--lg {
    width: 58px;
    height: 58px;
    border-color: rgba(212, 160, 23, 0.10);
    animation-duration: 15s;
    animation-delay: -8s;
}

.brands-diamond--outline {
    width: 28px;
    height: 28px;
    border-color: rgba(224, 92, 0, 0.11);
    animation-duration: 11s;
    animation-delay: -2s;
}

@keyframes diamondFloat {
    0%, 100% { transform: rotate(45deg) translateY(0px);    opacity: 0.5; }
    50%       { transform: rotate(45deg) translateY(-18px);  opacity: 1;   }
}

.brands-scanline {
    position: absolute;
    width: 55%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.25), transparent);
    pointer-events: none;
    animation: scanLine 10s linear infinite;
}

@keyframes scanLine {
    0%   { top: -2%;   left: -60%; opacity: 0;   }
    10%  { opacity: 1; }
    90%  { opacity: 0.8; }
    100% { top: 102%;  left: 160%; opacity: 0;   }
}

/* ------------------------------------------------------------------
   Coming Soon section — pulse rings + rising particles
   ------------------------------------------------------------------ */
.cs-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(212, 160, 23, 0.14);
    pointer-events: none;
    animation: ringPulse 7s ease-out infinite;
}

.cs-ring--1 { width: 280px;  height: 280px;  animation-delay: 0s;   }
.cs-ring--2 { width: 520px;  height: 520px;  animation-delay: 2.3s; }
.cs-ring--3 { width: 760px;  height: 760px;  animation-delay: 4.6s; }
.cs-ring--4 { width: 1000px; height: 1000px; animation-delay: 6.9s; border-color: rgba(212, 160, 23, 0.06); }

@keyframes ringPulse {
    0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(0.75); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.15); }
}

.cs-particle {
    position: absolute;
    bottom: -4px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(212, 160, 23, 0.5);
    pointer-events: none;
    animation: particleRise 6s ease-in infinite;
}

.cs-particle:nth-child(odd)  { background: rgba(224, 92, 0, 0.4); }
.cs-particle:nth-child(3n)   { width: 3px; height: 3px; }

@keyframes particleRise {
    0%   { transform: translateX(0)     scale(0.6); opacity: 0;   }
    15%  { opacity: 0.7; }
    80%  { opacity: 0.3; }
    100% { transform: translateX(30px)  scale(1.4); opacity: 0; bottom: 105%; }
}

/* ==================================================================
   VML UNIVERSE — Showcase / Bento Grid
   ================================================================== */

/* ── Grid layout ───────────────────────────────────────────────── */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 390px 310px 240px;
    gap: 1.125rem;
}

.sc-card--wide   { grid-column: span 2; }
.sc-card--full   { grid-column: span 3; }

/* ── Card shell ─────────────────────────────────────────────────── */
.sc-card {
    position: relative;
    border-radius: 1.125rem;
    overflow: hidden;
    cursor: pointer;
    /* Slanted left-lean clip */
    clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0% 100%);
    transition: clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease;
    will-change: transform, clip-path;
    transform-style: preserve-3d;
}

/* Alternate cards lean the other way */
.sc-card--alt {
    clip-path: polygon(0 0%, 100% 4%, 100% 100%, 0% 96%);
}

/* Full-width card: no slant (too wide looks odd) */
.sc-card--full {
    clip-path: polygon(0 3%, 100% 0%, 100% 97%, 0 100%);
}

/* Hover: straighten + deepen shadow */
.sc-card:hover,
.sc-card--alt:hover,
.sc-card--full:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(212, 160, 23, 0.12);
    z-index: 10;
}

/* ── Brand backgrounds ──────────────────────────────────────────── */
.sc-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: transform 0.5s ease;
}

.sc-card:hover .sc-card__bg { transform: scale(1.05); }

.sc-bg--radio    { background: linear-gradient(145deg, #0d1008 0%, #1c1800 45%, #251d00 100%); }
.sc-bg--tv       { background: linear-gradient(145deg, #050d18 0%, #091525 50%, #0a1a30 100%); }
.sc-bg--zosimli  { background: linear-gradient(145deg, #180a00 0%, #271200 50%, #1c0e00 100%); }
.sc-bg--jata     { background: linear-gradient(145deg, #1e0800 0%, #2c0e00 55%, #190700 100%); }
.sc-bg--training { background: linear-gradient(145deg, #060c1e 0%, #0a1230 50%, #060a1c 100%); }
.sc-bg--studio   { background: linear-gradient(145deg, #0b0618 0%, #120c26 55%, #070514 100%); }

/* Vignette so text is always readable */
.sc-card__vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.5)  40%,
        rgba(0, 0, 0, 0.15) 70%,
        transparent         100%
    );
}

/* ── Watermark icon ─────────────────────────────────────────────── */
.sc-watermark {
    position: absolute;
    bottom: -12%;
    right: -4%;
    z-index: 1;
    opacity: 0.06;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.sc-watermark svg,
.sc-watermark i {
    width: 190px;
    height: 190px;
    color: #fff;
    display: block;
}

.sc-card--wide .sc-watermark svg,
.sc-card--wide .sc-watermark i  { width: 250px; height: 250px; }
.sc-card--full .sc-watermark svg,
.sc-card--full .sc-watermark i  { width: 170px; height: 170px; right: 8%; bottom: -8%; }

.sc-card:hover .sc-watermark { opacity: 0.13; transform: scale(1.1) rotate(-6deg); }

/* ── Gloss sheen ────────────────────────────────────────────────── */
.sc-card__gloss {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        transparent 55%
    );
}

/* ── Animated scan line ─────────────────────────────────────────── */
.sc-card__scanline {
    position: absolute;
    top: -4%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, 0.7) 50%, transparent 100%);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sc-card:hover .sc-card__scanline {
    opacity: 1;
    animation: scShowcaseScan 1.8s linear infinite;
}

@keyframes scShowcaseScan {
    0%   { top: -4%;   }
    100% { top: 104%;  }
}

/* ── Card content layout ────────────────────────────────────────── */
.sc-card__body {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.125rem 1.25rem 1.25rem;
}

/* Badges row (top) */
.sc-card__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(6px);
}

/* Bottom content */
.sc-card__bottom {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.5)  60%,
        transparent         100%);
    margin: -1.25rem;
    padding: 2.5rem 1.25rem 1.25rem;
}

.sc-card__accent-bar {
    width: 2.25rem;
    height: 2px;
    border-radius: 1px;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

/* Reveal content (hidden → visible on hover) */
.sc-card__reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease 0.05s;
}

.sc-card:hover .sc-card__reveal {
    max-height: 220px;
    opacity: 1;
}

/* CTA button inside card */
.sc-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.sc-cta--gold   { color: #D4A017; border-color: rgba(212, 160, 23, 0.35); }
.sc-cta--orange { color: #E05C00; border-color: rgba(224,  92,  0, 0.35); }
.sc-cta--gold:hover   { background: #D4A017; color: #0A0F1E; }
.sc-cta--orange:hover { background: #E05C00; color: #0A0F1E; }

/* ── EQ Bars (Radio, Zosimli) ───────────────────────────────────── */
.sc-eq-bars {
    position: absolute;
    inset: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 0.5rem;
    opacity: 0.22;
    z-index: 1;
}

.sc-eq-bar {
    flex: 1;
    background: linear-gradient(to top, #D4A017, rgba(212, 160, 23, 0.2));
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
    animation: scEqPulse 1.3s ease-in-out infinite alternate;
}

@keyframes scEqPulse {
    0%   { transform: scaleY(0.25); }
    100% { transform: scaleY(1);    }
}

/* ── TV Scanlines ───────────────────────────────────────────────── */
.sc-scanlines {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.10;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.04) 3px,
        rgba(255, 255, 255, 0.04) 4px
    );
    animation: scTvFlicker 9s linear infinite;
}

@keyframes scTvFlicker {
    0%, 92%, 100% { opacity: 0.10; }
    93%  { opacity: 0.20; }
    94%  { opacity: 0.06; }
    95%  { opacity: 0.18; }
}

.sc-tv-beam {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.06) 50%,
        transparent 100%
    );
    animation: scTvBeam 12s ease-in-out infinite;
}

@keyframes scTvBeam {
    0%   { left: -60%; }
    100% { left: 160%; }
}

/* ── Signal arcs (Jata FM) ──────────────────────────────────────── */
.sc-signal-arcs {
    position: absolute;
    bottom: -30%;
    left: 10%;
    z-index: 1;
}

.sc-arc {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(224, 92, 0, 0.35);
    transform-origin: center;
    animation: scArcPulse 5s ease-out infinite;
}

.sc-arc--1 { width:  80px; height:  80px; animation-delay: 0s;    }
.sc-arc--2 { width: 160px; height: 160px; animation-delay: 1.25s; }
.sc-arc--3 { width: 240px; height: 240px; animation-delay: 2.5s;  }
.sc-arc--4 { width: 320px; height: 320px; animation-delay: 3.75s; border-color: rgba(224,92,0,0.15); }

@keyframes scArcPulse {
    0%   { opacity: 0.7; transform: scale(0.6); }
    100% { opacity: 0;   transform: scale(1.2); }
}

/* ── Training dot grid + chalk lines ────────────────────────────── */
.sc-chalk-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.12;
    background-image: radial-gradient(circle, rgba(212, 160, 23, 0.7) 1px, transparent 1px);
    background-size: 22px 22px;
    animation: scGridShift 18s linear infinite;
}

@keyframes scGridShift {
    0%   { background-position: 0 0;       }
    100% { background-position: 22px 22px; }
}

.sc-chalk-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.15), transparent);
    z-index: 2;
    pointer-events: none;
}

.sc-chalk-line--1 { width: 80%; top: 35%; left: -5%; transform: rotate(-8deg); }
.sc-chalk-line--2 { width: 60%; top: 65%; left: 20%; transform: rotate(-8deg); opacity: 0.6; }

/* ── Waveform bars (Music Studio) ───────────────────────────────── */
.sc-waveform {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 1rem;
    opacity: 0.2;
    z-index: 1;
}

.sc-wf-bar {
    flex: 1;
    background: linear-gradient(to top, rgba(160, 100, 240, 0.9), rgba(210, 160, 255, 0.3));
    border-radius: 2px;
    transform-origin: center;
    animation: scWfPulse 2s ease-in-out infinite alternate;
}

@keyframes scWfPulse {
    0%   { transform: scaleY(0.15); opacity: 0.35; }
    100% { transform: scaleY(1);    opacity: 1;    }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 1rem;
    }
    .sc-card--wide,
    .sc-card--full  { grid-column: span 1; }

    .sc-card,
    .sc-card--alt,
    .sc-card--full  {
        clip-path: none;
        height: 280px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 340px 300px 240px 240px;
    }
    .sc-card--wide { grid-column: span 2; }
    .sc-card--full { grid-column: span 2; }
}

/* ------------------------------------------------------------------
   Brand card hover glow effect
   ------------------------------------------------------------------ */
.group:hover .card-glow-gold {
    box-shadow: 0 20px 60px rgba(212, 160, 23, 0.12),
                0 4px 20px rgba(212, 160, 23, 0.08);
}

.group:hover .card-glow-orange {
    box-shadow: 0 20px 60px rgba(224, 92, 0, 0.12),
                0 4px 20px rgba(224, 92, 0, 0.08);
}

/* ------------------------------------------------------------------
   Section transition: ensure no layout shift between sections
   ------------------------------------------------------------------ */
section {
    position: relative;
}

/* ------------------------------------------------------------------
   Print styles — hide decorative elements
   ------------------------------------------------------------------ */
/* ==================================================================
   Services Fan — Slanted parallelogram cards, accordion on hover
   ================================================================== */

/* ── Container ─────────────────────────────────────────────────── */
.svc-fan {
    display: flex;
    height: 500px;
    position: relative;
    overflow: hidden;    /* clips slant edges; prevents layout bleed */
    border-radius: 10px;
}

/* ── Card shell ─────────────────────────────────────────────────── */
.svc-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    background: var(--svc-bg, #0d1525);
    /* Parallelogram slant */
    clip-path: polygon(22px 0%, 100% 0%, calc(100% - 22px) 100%, 0% 100%);
    margin-right: -22px;
    filter: brightness(0.65) saturate(0.75);
    will-change: flex, filter;   /* promote to compositor layer */
    transition:
        flex       0.5s  cubic-bezier(0.16, 1, 0.3, 1),
        filter     0.35s ease,
        box-shadow 0.35s ease;
    outline: none;
}

/* First card — flat left edge */
.svc-card--first {
    clip-path: polygon(0 0%, 100% 0%, calc(100% - 22px) 100%, 0% 100%);
}

/* Last card — flat right edge, no overlap margin */
.svc-card--last {
    clip-path: polygon(22px 0%, 100% 0%, 100% 100%, 0% 100%);
    margin-right: 0;
}

/* JS adds .svc-fan--active; compress all siblings */
.svc-fan--active .svc-card {
    flex: 0 0 52px;
    filter: brightness(0.38) saturate(0.5);
}

/* JS adds .svc-card--open on the active card */
.svc-card--open {
    flex: 0 0 360px !important;
    filter: brightness(1) saturate(1.15) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    z-index: 10;
    min-width: 80%;
}

/* ── CSS art container ──────────────────────────────────────────── */
.svc-card__art {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ── Gradient vignette (bottom fade for text legibility) ─────────── */
.svc-card__vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent  0%,
        rgba(0,0,0,0.15) 40%,
        rgba(0,0,0,0.75) 80%,
        rgba(0,0,0,0.92) 100%
    );
    pointer-events: none;
}

/* ── Collapsed label ──────────────────────────────────────────────
   Visible when card is narrow. Icon + rotated text, pinned to bottom.
   ─────────────────────────────────────────────────────────────── */
.svc-card__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.svc-card--open .svc-card__label {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.svc-label-icon {
    width: 18px;
    height: 18px;
    color: var(--svc-accent, #D4A017);
    flex-shrink: 0;
}

.svc-label-text {
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
}

/* ── Expanded detail panel ────────────────────────────────────────
   Fades in from below when card expands.
   ─────────────────────────────────────────────────────────────── */
.svc-card__detail {
    position: absolute;
    inset: 0;
    padding: 28px 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.32s ease 0.18s, transform 0.32s ease 0.18s;
    pointer-events: none;
    min-width: 280px; /* prevent text wrapping too early */
}

.svc-card--open .svc-card__detail {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Accent bar */
.svc-detail-bar {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--svc-accent, #D4A017);
    margin-bottom: 14px;
    flex-shrink: 0;
}

.svc-detail-title {
    font-family: "Fira Sans Condensed", sans-serif;
    font-size: 1.55rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.svc-detail-tagline {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--svc-accent, #D4A017);
    text-transform: uppercase;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.svc-detail-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.65;
    flex-shrink: 0;
}

/* Large watermark icon in top-right of detail */
.svc-detail-watermark {
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 0.07;
    pointer-events: none;
}

.svc-detail-watermark svg,
.svc-detail-watermark i {
    width: 80px;
    height: 80px;
    color: var(--svc-accent, #D4A017);
}

/* ==================================================================
   CSS Art Patterns — one per service category
   ================================================================== */

/* ── Broadcast rings (News) ──────────────────────────────────────── */
.svc-art-broadcast {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-broadcast-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--svc-accent, #4a9eda);
    width:  calc(var(--r) * 58px);
    height: calc(var(--r) * 58px);
    opacity: calc(0.55 / var(--r));
    animation: svcRingPulse 3.5s ease-in-out infinite;
    animation-delay: calc(var(--r) * 0.45s);
}

@keyframes svcRingPulse {
    0%, 100% { transform: scale(1);    opacity: calc(0.55 / var(--r)); }
    50%       { transform: scale(1.04); opacity: calc(0.75 / var(--r)); }
}

/* ── EQ bars (Music) ────────────────────────────────────────────── */
.svc-art-eq {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0 10px;
}

.svc-eq-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, var(--svc-accent, #9b59b6), transparent);
    opacity: 0.4;
    transform-origin: bottom;
    animation: svcEqBounce 1.3s ease-in-out infinite alternate;
}

@keyframes svcEqBounce {
    0%   { transform: scaleY(0.25); }
    100% { transform: scaleY(1); }
}

/* ── Architectural pillars (Politics) ──────────────────────────── */
.svc-art-columns {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 0 16px;
}

.svc-pillar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to bottom, var(--svc-accent, #e74c3c), transparent);
    opacity: 0.3;
    animation: svcPillarBreath 4.5s ease-in-out infinite;
    animation-delay: calc(var(--ci) * 0.55s);
}

.svc-pillar:nth-child(1) { height: 68%; }
.svc-pillar:nth-child(2) { height: 100%; }
.svc-pillar:nth-child(3) { height: 82%; }
.svc-pillar:nth-child(4) { height: 100%; }
.svc-pillar:nth-child(5) { height: 82%; }
.svc-pillar:nth-child(6) { height: 68%; }

@keyframes svcPillarBreath {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.5; }
}

/* ── Rising line chart (Business) ──────────────────────────────── */
.svc-art-chart {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
}

.svc-chart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Animated dot that travels the line */
.svc-chart-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--svc-accent, #27ae60);
    box-shadow: 0 0 8px var(--svc-accent, #27ae60);
    top: 8%;
    right: 4%;
    animation: svcDotGlow 2s ease-in-out infinite;
}

@keyframes svcDotGlow {
    0%, 100% { transform: scale(1);   opacity: 0.8; }
    50%       { transform: scale(1.5); opacity: 1; }
}

/* ── Globe (International) ─────────────────────────────────────── */
.svc-art-globe {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-globe-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--svc-accent, #3498db);
    width:  calc(var(--gi) * 52px);
    height: calc(var(--gi) * 52px);
    opacity: calc(0.4 / var(--gi));
    animation: svcGlobeRotate 20s linear infinite;
    animation-delay: calc(var(--gi) * -4s);
}

@keyframes svcGlobeRotate {
    from { transform: rotate(0deg) scaleX(0.7); }
    to   { transform: rotate(360deg) scaleX(0.7); }
}

/* Latitude / longitude axis lines */
.svc-globe-axis {
    position: absolute;
    background: var(--svc-accent, #3498db);
    opacity: 0.15;
}

.svc-globe-axis--h { width: 100%; height: 1px; top: 50%; }
.svc-globe-axis--v { width: 1px; height: 100%; left: 50%; }
.svc-globe-axis--d1 {
    width: 141%;
    height: 1px;
    top: 50%;
    left: -20%;
    transform: rotate(45deg);
}
.svc-globe-axis--d2 {
    width: 141%;
    height: 1px;
    top: 50%;
    left: -20%;
    transform: rotate(-45deg);
}

/* ── Chalkboard (Media Training) ────────────────────────────────── */
.svc-art-chalk {
    position: absolute;
    inset: 0;
}

.svc-chalk-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
}

.svc-chalk-stroke {
    position: absolute;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 1px;
    animation: svcChalkAppear 5s ease-in-out infinite;
    animation-delay: calc(var(--li) * 1.5s);
}

.svc-chalk-stroke:nth-child(2) { width: 55%; top: 35%; left: 12%; }
.svc-chalk-stroke:nth-child(3) { width: 38%; top: 54%; left: 22%; }
.svc-chalk-stroke:nth-child(4) { width: 62%; top: 70%; left: 8%;  }

@keyframes svcChalkAppear {
    0%  { transform: scaleX(0); transform-origin: left; opacity: 0; }
    20% { transform: scaleX(1); opacity: 0.8; }
    75% { opacity: 0.6; }
    100%{ opacity: 0.15; transform: scaleX(1); }
}

/* Chalk dots */
.svc-chalk-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    animation: svcDotBlink 3s ease-in-out infinite;
}

.svc-chalk-dot--1 { top: 30%; left: 10%;  animation-delay: 0s;   }
.svc-chalk-dot--2 { top: 52%; left: 65%;  animation-delay: 0.8s; }
.svc-chalk-dot--3 { top: 68%; left: 30%;  animation-delay: 1.6s; }

@keyframes svcDotBlink {
    0%, 100% { opacity: 0.35; transform: scale(1);   }
    50%       { opacity: 0.8;  transform: scale(1.4); }
}

/* ── Network nodes (Community) ─────────────────────────────────── */
.svc-art-network {
    position: absolute;
    inset: 0;
}

/* Node positions via nth-child */
.svc-node {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--svc-accent, #1abc9c);
    box-shadow: 0 0 12px var(--svc-accent, #1abc9c);
    animation: svcNodePulse 2.8s ease-in-out infinite;
    animation-delay: calc(var(--ni) * 0.45s);
}

.svc-node:nth-child(1) { top: 22%; left: 28%; }
.svc-node:nth-child(2) { top: 52%; left: 14%; }
.svc-node:nth-child(3) { top: 32%; left: 65%; }
.svc-node:nth-child(4) { top: 70%; left: 52%; }
.svc-node:nth-child(5) { top: 58%; left: 80%; }
.svc-node:nth-child(6) { top: 42%; left: 46%; }

/* Connection mesh via the art container's pseudo-element */
.svc-art-network::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            35deg,
            transparent 45%,
            rgba(var(--svc-accent, 26 188 156) / 0.08) 45.5%,
            transparent 46%
        ),
        linear-gradient(
            -55deg,
            transparent 45%,
            rgba(var(--svc-accent, 26 188 156) / 0.06) 45.5%,
            transparent 46%
        );
    background-size: 55px 55px;
}

@keyframes svcNodePulse {
    0%, 100% { transform: scale(1);   opacity: 0.65; }
    50%       { transform: scale(1.6); opacity: 1;    }
}

/* ==================================================================
   Responsive — mobile: vertical stack, no clip-path slant
   ================================================================== */
@media (max-width: 768px) {
    .svc-fan {
        flex-direction: column;
        height: auto;
        gap: 3px;
    }

    .svc-card,
    .svc-card--first,
    .svc-card--last {
        flex: 0 0 auto;
        min-height: 72px;
        clip-path: none !important;
        border-radius: 8px !important;
        margin-right: 0;
        filter: brightness(0.85) saturate(0.9);
    }

    .svc-fan--active .svc-card {
        flex: 0 0 auto;
        filter: brightness(0.85) saturate(0.9);
    }

    .svc-card--open {
        flex: 0 0 auto !important;
        min-height: 240px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    }

    /* Horizontal label on mobile */
    .svc-card__label {
        flex-direction: row;
        justify-content: flex-start;
        padding: 22px 20px;
        gap: 12px;
    }

    .svc-label-text {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 0.8rem;
    }

    .svc-card__detail {
        min-width: 0;
        padding: 20px 20px 24px;
    }
}

@media print {
    #navbar,
    #countdown-block,
    .hero-grid,
    .section-divider-bottom {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}

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