/* ============================================================
   Jovial Constructions — Public Site Theme
   Palette: glossy light-purple → pink gradient (VS-logo inspired),
   with the logo's green kept as a minimal accent only.
   ============================================================ */

:root {
    /* "navy" tokens now carry a deep purple-ink instead of navy —
       kept the names to avoid touching every consumer, only the values moved. */
    --jv-navy-900: #1E0B36;
    --jv-navy-800: #2B1150;
    --jv-navy-700: #3E1F73;
    --jv-navy-600: #55349A;
    --jv-navy-500: #6D28D9;

    --jv-purple-900: #2E1065;
    --jv-purple-700: #6D28D9;
    --jv-purple-600: #8B5CF6;
    --jv-purple-500: #A78BFA;
    --jv-purple-400: #C4B5FD;
    --jv-purple-300: #EDE9FE;

    --jv-green-700: #0d5c30;
    --jv-green-600: #16A34A;
    --jv-green-500: #22C55E;
    --jv-green-400: #4ADE80;
    --jv-green-300: #86EFAC;

    --jv-pink-700: #86198F;
    --jv-pink-600: #C026D3;
    --jv-pink-500: #E048B0;
    --jv-pink-400: #F472B6;
    --jv-pink-300: #FBCFE8;

    --jv-ink: #1E1233;
    --jv-slate: #524868;
    --jv-slate-light: #8b81a0;
    --jv-fog: #FAF7FF;
    --jv-fog-dim: #F3ECFB;
    --jv-white: #ffffff;
    --jv-line: #e9e1f7;

    --jv-grad-purple: linear-gradient(135deg, #4C1D95 0%, #8B5CF6 45%, #E048B0 100%);
    --jv-grad-purple-radial: radial-gradient(120% 140% at 15% 0%, #7C3AED 0%, #4C1D95 55%, #2E1065 100%);
    --jv-grad-purple-btn: linear-gradient(180deg, #C4B5FD 0%, #A855F7 45%, #8B2FC9 100%);
    --jv-grad-green: linear-gradient(135deg, #0d5c30 0%, #16A34A 55%, #86EFAC 100%);
    --jv-grad-green-btn: linear-gradient(180deg, #4ADE80 0%, #16A34A 55%, #0d5c30 100%);
    --jv-grad-pink: linear-gradient(135deg, #86198F 0%, #C026D3 55%, #F472B6 100%);
    --jv-grad-pink-btn: linear-gradient(180deg, #F9A8D4 0%, #E048B0 45%, #A21CAF 100%);
    --jv-grad-hero-overlay: linear-gradient(115deg, rgba(30,11,54,.92) 0%, rgba(76,29,149,.82) 40%, rgba(139,44,167,.7) 78%, rgba(224,72,176,.5) 100%);
    --jv-grad-brand-line: linear-gradient(90deg, var(--jv-purple-500), var(--jv-pink-400));
    --jv-grad-card-sheen: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 40%);

    /* legacy alias kept so any remaining var(--jv-grad-navy*) reference still resolves to the new purple look */
    --jv-grad-navy: var(--jv-grad-purple);
    --jv-grad-navy-radial: var(--jv-grad-purple-radial);

    --jv-shadow-sm: 0 2px 10px rgba(46, 16, 101, .08);
    --jv-shadow-md: 0 10px 30px -8px rgba(46, 16, 101, .16);
    --jv-shadow-lg: 0 24px 60px -16px rgba(30, 11, 54, .3);
    --jv-shadow-glow-purple: 0 10px 28px -8px rgba(139, 92, 246, .55);
    --jv-shadow-glow-green: 0 10px 28px -8px rgba(22, 163, 74, .5);
    --jv-shadow-glow-pink: 0 10px 28px -8px rgba(192, 38, 211, .5);

    --jv-radius-sm: .5rem;
    --jv-radius-md: 1rem;
    --jv-radius-lg: 1.5rem;
    --jv-radius-pill: 999px;

    --jv-container: 1200px;
}

/* ---------- Base ---------- */
.jv-site {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: var(--jv-ink);
    background: var(--jv-white);
    overflow-x: hidden;
}

.jv-site h1, .jv-site h2, .jv-site h3, .jv-site h4 {
    font-family: 'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--jv-navy-800);
}

.jv-site p {
    color: var(--jv-slate);
    line-height: 1.7;
}

.jv-container {
    width: 100%;
    max-width: var(--jv-container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.jv-section {
    padding: clamp(3rem, 6vw, 6rem) 0;
}

.jv-section-tight {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.jv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--jv-purple-600);
    background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(224,72,176,.12));
    border: 1px solid rgba(139,92,246,.25);
    padding: .4rem .9rem;
    border-radius: var(--jv-radius-pill);
    margin-bottom: 1rem;
}

.jv-eyebrow::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--jv-grad-pink);
    flex-shrink: 0;
}

.jv-title {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    margin-bottom: 1rem;
}

.jv-title-lg {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.08;
}

.jv-lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--jv-slate);
    max-width: 62ch;
}

.jv-grad-text {
    background: var(--jv-grad-purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jv-divider {
    width: 64px;
    height: 4px;
    border-radius: var(--jv-radius-pill);
    background: var(--jv-grad-brand-line);
    margin: 0 0 1.25rem;
}

.jv-divider-center {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Buttons ---------- */
.jv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.7rem;
    border-radius: var(--jv-radius-pill);
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    white-space: nowrap;
}

.jv-btn:hover { transform: translateY(-2px); text-decoration: none; }

.jv-btn-primary {
    color: #fff;
    background: var(--jv-grad-purple-btn);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--jv-shadow-glow-purple);
}
.jv-btn-primary:hover { filter: brightness(1.08); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px -8px rgba(139,92,246,.65); }

.jv-btn-accent {
    color: #fff;
    background: var(--jv-grad-pink-btn);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--jv-shadow-glow-pink);
}
.jv-btn-accent:hover { filter: brightness(1.08); color: #fff; }

.jv-btn-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.4);
    backdrop-filter: blur(6px);
}
.jv-btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }

.jv-btn-outline-dark {
    color: var(--jv-navy-700);
    background: #fff;
    border: 1px solid var(--jv-line);
    box-shadow: var(--jv-shadow-sm);
}
.jv-btn-outline-dark:hover { color: var(--jv-navy-700); border-color: var(--jv-purple-500); }

.jv-btn-sm { padding: .55rem 1.15rem; font-size: .85rem; }

/* ---------- WhatsApp ---------- */
.jv-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #35e072 0%, #25d366 55%, #12a850 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px -2px rgba(18,168,80,.6);
    margin-left: .5rem;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

.jv-whatsapp svg { width: 14px; height: 14px; }

.jv-whatsapp:hover {
    transform: scale(1.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 5px 14px -2px rgba(18,168,80,.75);
    color: #fff;
}

.jv-whatsapp-lg {
    width: 30px;
    height: 30px;
}
.jv-whatsapp-lg svg { width: 17px; height: 17px; }

/* ---------- Navbar ---------- */
.jv-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--jv-grad-navy);
    box-shadow: 0 4px 24px rgba(6,12,20,.35);
}

.jv-navbar .jv-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 1rem;
}

.jv-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.jv-brand img {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.jv-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.jv-brand-text strong {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.jv-brand-text span {
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--jv-pink-300);
}

.jv-nav-links {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.jv-nav-links a {
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: .6rem .9rem;
    border-radius: var(--jv-radius-pill);
    transition: all .2s ease;
    position: relative;
}

.jv-nav-links a:hover, .jv-nav-links a.active {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.jv-navbar .jv-btn-primary { margin-left: .5rem; }

.jv-nav-toggle {
    display: none;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .5rem;
    width: 42px;
    height: 42px;
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- Hero ---------- */
.jv-hero {
    position: relative;
    color: #fff;
    background-size: cover;
    background-position: center;
    min-height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--jv-grad-hero-overlay);
}

.jv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 85% 15%, rgba(244,114,182,.3) 0%, rgba(244,114,182,0) 60%);
}

.jv-hero-inner {
    position: relative;
    z-index: 2;
    padding: clamp(5rem, 12vw, 8rem) 0 0;
}

.jv-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.jv-hero-logo-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
}

.jv-hero-logo-glow {
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(45% 45% at 32% 28%, rgba(196,181,253,.6) 0%, rgba(196,181,253,0) 70%),
        radial-gradient(45% 45% at 72% 72%, rgba(244,114,182,.45) 0%, rgba(244,114,182,0) 70%),
        radial-gradient(35% 35% at 50% 50%, rgba(139,92,246,.3) 0%, rgba(139,92,246,0) 70%);
    filter: blur(16px);
    pointer-events: none;
}

.jv-hero-logo-spotlight {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,247,255,.28) 38%, rgba(244,114,182,.14) 62%, rgba(255,255,255,0) 78%);
    filter: blur(4px);
    transform: translate(-50%, -50%) scale(1);
    animation: jv-hero-spotlight-pulse 3.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes jv-hero-spotlight-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; }
    50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.jv-hero-logo-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84%;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 0deg, #C4B5FD, #F472B6, #8B5CF6, #C4B5FD);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .55;
    filter: blur(.5px);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: jv-hero-ring-spin 12s linear infinite;
    pointer-events: none;
}

@keyframes jv-hero-ring-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.jv-hero-logo-card {
    position: relative;
    z-index: 2;
    width: clamp(300px, 32vw, 500px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.5rem, 1vw, 1rem);
    animation: jv-hero-logo-float 5s ease-in-out infinite;
}

.jv-hero-logo-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.75))
        drop-shadow(0 0 22px rgba(255,255,255,.5))
        drop-shadow(0 0 46px rgba(244,114,182,.4))
        drop-shadow(0 26px 46px rgba(46,16,101,.5))
        brightness(1.07) saturate(1.15);
}

@keyframes jv-hero-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.jv-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(6px);
    padding: .5rem 1rem;
    border-radius: var(--jv-radius-pill);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.jv-hero-tag .dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--jv-grad-green);
    box-shadow: 0 0 12px var(--jv-green-400);
}

.jv-hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 5.6vw, 4.2rem);
    line-height: 1.06;
    max-width: 16ch;
    margin-bottom: 1.25rem;
}

.jv-hero p.jv-lead {
    color: rgba(255,255,255,.85);
    max-width: 52ch;
    margin-bottom: 2rem;
}

.jv-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.jv-hero-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-top: clamp(1.75rem, 3vw, 2.25rem);
    padding-bottom: clamp(3rem, 8vw, 5rem);
    border-top: 1px solid rgba(255,255,255,.16);
}

.jv-hero-stat {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding: .85rem 1rem;
    border-radius: var(--jv-radius-md);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(8px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.jv-hero-stat:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.24);
}

.jv-hero-stat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--jv-grad-purple-btn);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px -4px rgba(139,92,246,.55);
}

.jv-hero-stat:nth-child(2) .jv-hero-stat-icon { background: var(--jv-grad-pink-btn); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px -4px rgba(192,38,211,.5); }
.jv-hero-stat:nth-child(4) .jv-hero-stat-icon { background: var(--jv-grad-green-btn); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px -4px rgba(22,163,74,.45); }

.jv-hero-stat-text { min-width: 0; }

.jv-hero-stat strong {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jv-hero-stat span {
    display: block;
    font-size: .7rem;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Stat strip (glossy cards) ---------- */
.jv-stat-strip {
    margin-top: -4.5rem;
    position: relative;
    z-index: 3;
}

.jv-stat-card {
    background: var(--jv-grad-navy-radial);
    border-radius: var(--jv-radius-lg);
    box-shadow: var(--jv-shadow-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}

.jv-stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--jv-grad-card-sheen);
    opacity: .5;
    pointer-events: none;
}

.jv-stat-item {
    text-align: center;
    color: #fff;
    position: relative;
}

.jv-stat-item + .jv-stat-item {
    border-left: 1px solid rgba(255,255,255,.12);
}

.jv-stat-item strong {
    display: block;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 800;
    background: linear-gradient(135deg, #fff, var(--jv-pink-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jv-stat-item span {
    font-size: .78rem;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------- Cards: services / expertise ---------- */
.jv-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.jv-service-card {
    background: var(--jv-white);
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-lg);
    padding: 1.9rem 1.6rem;
    box-shadow: var(--jv-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}

.jv-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--jv-shadow-md);
    border-color: rgba(139,92,246,.35);
}

.jv-service-icon {
    width: 58px;
    height: 58px;
    border-radius: var(--jv-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jv-grad-purple);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--jv-shadow-glow-purple);
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}

.jv-service-card:nth-child(3n+2) .jv-service-icon { background: var(--jv-grad-pink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--jv-shadow-glow-pink); }
.jv-service-card:nth-child(3n) .jv-service-icon { background: var(--jv-grad-green); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--jv-shadow-glow-green); }

.jv-service-card h3 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

.jv-service-card p {
    font-size: .92rem;
    margin-bottom: 0;
}

/* ---------- About split ---------- */
.jv-about-media {
    position: relative;
    border-radius: var(--jv-radius-lg);
    overflow: hidden;
    box-shadow: var(--jv-shadow-lg);
}

.jv-about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 320px;
}

.jv-quote-float {
    position: absolute;
    left: -1.25rem;
    bottom: -1.25rem;
    max-width: 280px;
    background: var(--jv-grad-navy);
    color: #fff;
    padding: 1.25rem 1.4rem;
    border-radius: var(--jv-radius-md);
    box-shadow: var(--jv-shadow-lg);
    border: 1px solid rgba(255,255,255,.1);
}

.jv-quote-float p {
    color: rgba(255,255,255,.92);
    font-size: .9rem;
    font-style: italic;
    margin: 0;
}

.jv-quote-float .jv-quote-mark {
    font-size: 1.8rem;
    line-height: 1;
    background: var(--jv-grad-purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    display: block;
    margin-bottom: .25rem;
}

.jv-check-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.jv-check-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem 0;
    color: var(--jv-navy-700);
    font-weight: 600;
}
.jv-check-list li .jv-check-ico {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--jv-grad-green);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    box-shadow: var(--jv-shadow-glow-green);
}

/* ---------- Approach / steps ---------- */
.jv-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    counter-reset: step;
}

.jv-step {
    background: #fff;
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-lg);
    padding: 1.75rem 1.4rem;
    position: relative;
    box-shadow: var(--jv-shadow-sm);
}

.jv-step-num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    background: var(--jv-grad-purple);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--jv-shadow-glow-purple);
    margin-bottom: 1rem;
}

.jv-step:nth-child(2) .jv-step-num { background: var(--jv-grad-pink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--jv-shadow-glow-pink); }
.jv-step:nth-child(4) .jv-step-num { background: var(--jv-grad-pink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--jv-shadow-glow-pink); }

.jv-step h4 { font-size: 1.02rem; margin-bottom: .4rem; }
.jv-step p { font-size: .88rem; margin: 0; }

/* ---------- Gallery / portfolio ---------- */
.jv-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 190px;
    gap: 1rem;
}

.jv-gallery-item {
    position: relative;
    border-radius: var(--jv-radius-md);
    overflow: hidden;
    box-shadow: var(--jv-shadow-sm);
    grid-column: span 2;
}

.jv-gallery-item.jv-span-3 { grid-column: span 3; }
.jv-gallery-item.jv-row-2 { grid-row: span 2; }

.jv-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.jv-gallery-item:hover img { transform: scale(1.08); }

.jv-gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem 1.1rem .9rem;
    background: linear-gradient(0deg, rgba(6,12,20,.92) 0%, rgba(6,12,20,0) 100%);
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: all .3s ease;
}

.jv-gallery-item:hover .jv-gallery-caption { opacity: 1; transform: translateY(0); }

.jv-gallery-caption strong { display: block; font-size: .95rem; }
.jv-gallery-caption span { font-size: .75rem; color: var(--jv-pink-300); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Commitment / why us band ---------- */
.jv-band {
    background: var(--jv-grad-navy-radial);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.jv-band::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -20%;
    width: 60%;
    height: 140%;
    background: var(--jv-grad-pink);
    opacity: .12;
    filter: blur(60px);
    border-radius: 50%;
    pointer-events: none;
}

.jv-band h2 { color: #fff; }
.jv-band .jv-lead { color: rgba(255,255,255,.75); }

.jv-glass-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.jv-glass-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    border-radius: var(--jv-radius-lg);
    padding: 1.9rem 1.6rem;
    position: relative;
}

.jv-glass-card .jv-service-icon { margin-bottom: 1.2rem; }

.jv-glass-card h4 { color: #fff; font-size: 1.08rem; margin-bottom: .5rem; }
.jv-glass-card p { color: rgba(255,255,255,.72); font-size: .9rem; margin: 0; }

/* ---------- Team ---------- */
.jv-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.jv-team-card {
    background: #fff;
    border-radius: var(--jv-radius-lg);
    border: 1px solid var(--jv-line);
    box-shadow: var(--jv-shadow-sm);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.jv-team-card:hover { transform: translateY(-6px); box-shadow: var(--jv-shadow-md); }

.jv-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    background: var(--jv-grad-navy);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.15), var(--jv-shadow-md);
    border: 3px solid rgba(255,255,255,.6);
    outline: 3px solid var(--jv-purple-400);
}

.jv-team-card:nth-child(2) .jv-avatar { outline-color: var(--jv-pink-400); }
.jv-team-card:nth-child(3) .jv-avatar { outline-color: var(--jv-green-400); }

.jv-team-card h4 { font-size: 1.1rem; margin-bottom: .15rem; }
.jv-team-role {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--jv-purple-600);
    background: rgba(139,92,246,.1);
    padding: .25rem .7rem;
    border-radius: var(--jv-radius-pill);
    margin-bottom: 1rem;
}

.jv-team-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .85rem;
    color: var(--jv-slate);
}

.jv-team-contact a { color: var(--jv-slate); text-decoration: none; }
.jv-team-contact a:hover { color: var(--jv-purple-600); }

/* ---------- Testimonial / quote banner ---------- */
.jv-quote-banner {
    background: var(--jv-grad-purple);
    border-radius: var(--jv-radius-lg);
    padding: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--jv-shadow-lg);
}

.jv-quote-banner::before {
    content: "\201C";
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    font-size: 9rem;
    font-family: Georgia, serif;
    color: rgba(255,255,255,.15);
    line-height: 1;
}

.jv-quote-banner p {
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 600;
    color: #fff;
    max-width: 42ch;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---------- CTA banner ---------- */
.jv-cta {
    background: var(--jv-grad-navy);
    border-radius: var(--jv-radius-lg);
    padding: clamp(2.5rem, 5vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--jv-shadow-lg);
}

.jv-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(45% 90% at 85% 50%, rgba(224,72,176,.25), rgba(224,72,176,0) 70%);
}

.jv-cta h3 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .4rem; position: relative; }
.jv-cta p { color: rgba(255,255,255,.72); margin: 0; position: relative; }
.jv-cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; position: relative; }

/* ---------- Contact page ---------- */
.jv-contact-card {
    background: #fff;
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--jv-shadow-sm);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    height: 100%;
}

.jv-contact-card .jv-service-icon { flex-shrink: 0; margin-bottom: 0; }
.jv-contact-card h4 { font-size: 1rem; margin-bottom: .3rem; }
.jv-contact-card p, .jv-contact-card a { font-size: .9rem; margin: 0; color: var(--jv-slate); text-decoration: none; }
.jv-contact-card a:hover { color: var(--jv-purple-600); }

.jv-map-frame {
    border-radius: var(--jv-radius-lg);
    overflow: hidden;
    box-shadow: var(--jv-shadow-md);
    border: 1px solid var(--jv-line);
    line-height: 0;
}

.jv-form {
    background: #fff;
    border: 1px solid var(--jv-line);
    border-radius: var(--jv-radius-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--jv-shadow-md);
}

.jv-form label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--jv-navy-700);
    margin-bottom: .35rem;
}

.jv-form .form-control, .jv-form .form-select {
    border-radius: .65rem;
    border: 1px solid var(--jv-line);
    padding: .7rem .9rem;
}

.jv-form .form-control:focus, .jv-form .form-select:focus {
    border-color: var(--jv-purple-500);
    box-shadow: 0 0 0 .2rem rgba(139,92,246,.15);
}

/* ---------- Page hero (inner pages) ---------- */
.jv-page-hero {
    background: var(--jv-grad-navy-radial);
    color: #fff;
    padding: clamp(4rem, 9vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
    position: relative;
    overflow: hidden;
}

.jv-page-hero::after {
    content: "";
    position: absolute;
    right: -15%;
    top: -30%;
    width: 55%;
    height: 160%;
    background: var(--jv-grad-pink);
    opacity: .18;
    filter: blur(70px);
    border-radius: 50%;
}

.jv-page-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: .75rem; position: relative; }
.jv-page-hero p { color: rgba(255,255,255,.75); max-width: 60ch; position: relative; }
.jv-breadcrumb-pill {
    display: inline-flex; gap: .4rem; align-items: center;
    font-size: .8rem; color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    padding: .35rem .9rem; border-radius: var(--jv-radius-pill);
    margin-bottom: 1.25rem; position: relative;
}
.jv-breadcrumb-pill a { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 600; }

/* ---------- Footer ---------- */
.jv-footer {
    background: var(--jv-grad-navy);
    color: rgba(255,255,255,.75);
    position: relative;
    overflow: hidden;
}

.jv-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(139,92,246,.06), transparent 40%, rgba(192,38,211,.06));
    pointer-events: none;
}

.jv-footer-top {
    padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    position: relative;
}

.jv-footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.jv-footer-brand img { height: 40px; }
.jv-footer-brand strong { color: #fff; font-size: 1.05rem; }

.jv-footer h5 {
    color: #fff;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1.1rem;
    font-weight: 700;
}

.jv-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.jv-footer a { color: rgba(255,255,255,.68); text-decoration: none; font-size: .9rem; transition: color .2s ease; }
.jv-footer a:hover { color: var(--jv-pink-300); }

.jv-footer-contact-item { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; }
.jv-footer-contact-item .ico {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--jv-pink-300);
}

.jv-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 1.25rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .82rem;
    position: relative;
}

.jv-social {
    display: flex;
    gap: .6rem;
}

.jv-social a {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: all .2s ease;
}
.jv-social a:hover { background: var(--jv-grad-purple); border-color: transparent; transform: translateY(-2px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
    .jv-nav-links { display: none; }
    .jv-nav-toggle { display: flex; }
    .jv-navbar .jv-btn-primary.jv-desktop-only { display: none; }

    .jv-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .jv-hero-logo-panel { min-height: 340px; order: -1; }
    .jv-hero-logo-card { width: clamp(240px, 48vw, 340px); }

    .jv-hero-stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
    .jv-stat-card { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
    .jv-stat-item:nth-child(3) { border-left: none; }
    .jv-stat-item + .jv-stat-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.12); }

    .jv-steps { grid-template-columns: repeat(2, 1fr); }
    .jv-glass-grid { grid-template-columns: repeat(2, 1fr); }
    .jv-team-grid { grid-template-columns: repeat(2, 1fr); }

    .jv-footer-top { grid-template-columns: 1fr 1fr; }

    .jv-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; }
    .jv-gallery-item { grid-column: span 2; }
    .jv-gallery-item.jv-span-3 { grid-column: span 4; }
}

@media (max-width: 767px) {
    .jv-navbar .jv-container { min-height: 64px; }
    .jv-brand img { height: 36px; }
    .jv-brand-text strong { font-size: .95rem; }

    .jv-hero { min-height: auto; }
    .jv-hero-inner { padding: 3.5rem 0 2.5rem; }
    .jv-hero h1 { max-width: none; }
    .jv-hero-logo-panel { min-height: 260px; margin-bottom: -.5rem; }
    .jv-hero-logo-card { width: 250px; padding: .75rem; }
    .jv-hero-cta { flex-direction: column; align-items: stretch; }
    .jv-hero-cta .jv-btn { width: 100%; }
    .jv-hero-stats { grid-template-columns: repeat(2, 1fr); }

    .jv-stat-strip { margin-top: 1.5rem; }
    .jv-stat-card { grid-template-columns: repeat(2, 1fr); padding: 1.5rem; }

    .jv-about-media img { min-height: 220px; }
    .jv-quote-float { position: static; margin-top: 1rem; max-width: none; }

    .jv-steps { grid-template-columns: 1fr; }
    .jv-glass-grid { grid-template-columns: 1fr; }
    .jv-team-grid { grid-template-columns: 1fr; }
    .jv-card-grid { grid-template-columns: 1fr 1fr; }

    .jv-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .jv-gallery-item, .jv-gallery-item.jv-span-3 { grid-column: span 2; }
    .jv-gallery-item.jv-row-2 { grid-row: span 1; }

    .jv-cta { flex-direction: column; align-items: flex-start; text-align: left; }
    .jv-cta-actions { width: 100%; }
    .jv-cta-actions .jv-btn { flex: 1; }

    .jv-footer-top { grid-template-columns: 1fr; gap: 2rem; }
    .jv-footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .jv-card-grid { grid-template-columns: 1fr; }
    .jv-hero-stats { grid-template-columns: 1fr; }
    .jv-eyebrow { font-size: .7rem; }
}