/* Danix Signs - Custom Styles */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #ef4444, #eab308); border-radius: 4px; }

/* Inner-page hero mesh (about/services/contact/faqs) */
.hero-mesh {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(239, 68, 68, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(234, 179, 8, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(220, 38, 38, 0.06) 0%, transparent 50%),
        linear-gradient(135deg, #fef2f2 0%, #fff7ed 50%, #fefce8 100%);
}

/* Hero ? full-bleed portfolio stage */
.hero-stage {
    --hero-ink: #f8fafc;
    --hero-muted: rgba(248, 250, 252, 0.82);
    --hero-ocean: #ef4444;
    --hero-brand: #facc15;
    --hero-signal: #fb923c;
    --hero-scrim-deep: rgba(8, 10, 16, 0.72);
    --hero-scrim-mid: rgba(8, 10, 16, 0.42);
    --hero-scrim-edge: rgba(8, 10, 16, 0.18);
    background: #0b0f18;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 70% 60% at 50% 48%,
            var(--hero-scrim-deep) 0%,
            var(--hero-scrim-mid) 45%,
            var(--hero-scrim-edge) 72%,
            rgba(8, 10, 16, 0.22) 100%
        ),
        linear-gradient(to top, rgba(8, 10, 16, 0.55) 0%, transparent 38%);
}

.hero-copy .hero-headline__underline {
    margin-left: auto;
    margin-right: auto;
    transform-origin: center;
}

.hero-headline--on-media .hero-headline__underline {
    margin-left: auto;
    margin-right: auto;
}

.hero-tw-heading {
    color: #f8fafc;
    font-size: clamp(1.85rem, 4.8vw + 0.6rem, 3.75rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
    min-height: 1.3em;
}

.hero-tw {
    background: linear-gradient(
        105deg,
        #f8fafc 0%,
        #fef9c3 28%,
        #fdba74 52%,
        #fca5a5 78%,
        #f8fafc 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-tw-shimmer 7s ease-in-out infinite;
}

.hero-tw-cursor {
    color: #facc15;
    -webkit-text-fill-color: #facc15;
    font-weight: 300;
    margin-left: 0.12em;
    text-shadow: 0 0 18px rgba(250, 204, 21, 0.55);
}

@keyframes hero-tw-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

.hero-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    margin: 0 0 1rem;
    line-height: 0.95;
    letter-spacing: -0.04em;
}
.hero-brand__name {
    font-size: clamp(3.25rem, 8vw + 1rem, 6.5rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
.hero-brand__suffix {
    font-size: clamp(1.35rem, 2.4vw + 0.6rem, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hero-brand);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

.hero-lead {
    --lead-ink: rgba(255, 255, 255, 0.92);
    --lead-gold: #fdc010;
    --lead-red: #ff6b70;
    --lead-soft: rgba(255, 248, 230, 0.95);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 40rem;
    width: 100%;
    margin-inline: auto;
    text-align: left;
    color: var(--lead-ink);
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}

.hero-lead__services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.45rem 0.5rem;
    width: 100%;
}

.hero-lead__chip {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.42rem 0.78rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(8, 10, 16, 0.42);
    color: var(--lead-soft);
    font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.hero-lead__chip--gold {
    color: var(--lead-gold);
    border-color: rgba(253, 192, 16, 0.55);
    background: rgba(253, 192, 16, 0.14);
    text-shadow:
        0 1px 12px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(253, 192, 16, 0.25);
}

.hero-lead__chip--red {
    color: var(--lead-red);
    border-color: rgba(230, 30, 38, 0.5);
    background: rgba(230, 30, 38, 0.16);
    text-shadow:
        0 1px 12px rgba(0, 0, 0, 0.45),
        0 0 16px rgba(230, 30, 38, 0.25);
}

.hero-lead__chip--warm {
    border-color: rgba(253, 192, 16, 0.4);
    background:
        linear-gradient(135deg, rgba(253, 192, 16, 0.18), rgba(230, 30, 38, 0.14));
    background-size: 180% auto;
    color: #fff4c2;
    animation: hero-lead-warm-shift 8s ease-in-out infinite;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero-lead__coverage {
    margin: 0.15rem 0 0;
    max-width: 36rem;
    color: #fff;
    font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-wrap: pretty;
}

.hero-lead__close {
    margin: 0;
    max-width: 36rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1rem, 0.92rem + 0.3vw, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.55;
    text-wrap: pretty;
}

.hero-lead__place {
    font-weight: 700;
    color: var(--lead-gold);
    letter-spacing: 0.04em;
    border-bottom: 1.5px solid rgba(253, 192, 16, 0.5);
    padding-bottom: 0.04em;
    text-shadow:
        0 1px 14px rgba(0, 0, 0, 0.45),
        0 0 18px rgba(253, 192, 16, 0.3);
}

@keyframes hero-lead-warm-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (max-width: 640px) {
    .hero-lead {
        max-width: 100%;
        gap: 0.65rem;
    }

    .hero-lead__services {
        gap: 0.4rem;
    }

    .hero-lead__chip {
        white-space: normal;
        padding: 0.38rem 0.68rem;
        font-size: 0.95rem;
    }

    .hero-lead__coverage {
        font-size: 1.06rem;
    }

    .hero-lead__close {
        font-size: 0.98rem;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-lead__chip--warm {
        animation: none;
        background: rgba(253, 192, 16, 0.16);
        color: var(--lead-gold);
    }
}

.hero-cta {
    border-radius: 0.85rem;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}
.hero-cta--primary {
    color: #fff;
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 55%, #ca8a04 100%);
    box-shadow: 0 10px 28px -12px rgba(220, 38, 38, 0.55);
}
.hero-cta--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -12px rgba(234, 88, 12, 0.55);
}
.hero-cta--ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(8px);
}
.hero-cta--ghost:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(250, 204, 21, 0.75);
    color: #fef9c3;
}

.hero-dots {
    padding: 0.35rem 0.5rem;
}

/* Glass card */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #dc2626 0%, #ca8a04 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Service card hover */
.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(239, 68, 68, 0.15);
}

/* ============================================
   Service media cards ? image-led modern grid
   ============================================ */
.svc-media-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
}
@media (min-width: 640px) {
    .svc-media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}
@media (min-width: 1024px) {
    .svc-media-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.35rem;
    }
}
@media (min-width: 1280px) {
    .svc-media-grid:not(.svc-media-grid--page) {
        grid-template-columns: repeat(4, 1fr);
    }
}
.svc-media-grid--page {
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .svc-media-grid--page {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.65rem;
    }
}

.svc-media-card {
    --svc-accent: #ef4444;
    --svc-accent-soft: rgba(239, 68, 68, 0.14);
    --svc-accent-glow: rgba(239, 68, 68, 0.3);
    --svc-title: #b91c1c;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 32px -18px rgba(15, 23, 42, 0.2);
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-media-card--ocean {
    --svc-accent: #ef4444;
    --svc-accent-soft: rgba(239, 68, 68, 0.14);
    --svc-accent-glow: rgba(239, 68, 68, 0.32);
    --svc-title: #b91c1c;
}
.svc-media-card--brand {
    --svc-accent: #eab308;
    --svc-accent-soft: rgba(234, 179, 8, 0.16);
    --svc-accent-glow: rgba(234, 179, 8, 0.35);
    --svc-title: #a16207;
}
.svc-media-card--signal {
    --svc-accent: #f97316;
    --svc-accent-soft: rgba(249, 115, 22, 0.14);
    --svc-accent-glow: rgba(249, 115, 22, 0.32);
    --svc-title: #c2410c;
}
a.svc-media-card:hover,
.svc-media-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--svc-accent) 35%, transparent);
    box-shadow:
        0 18px 40px -16px var(--svc-accent-glow),
        0 8px 20px -12px rgba(15, 23, 42, 0.18);
}

.svc-media-card__hit {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-height: 0;
}

.svc-media-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(145deg, #0f172a, #1e293b);
}
.svc-media-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-media-card:hover .svc-media-card__img {
    transform: scale(1.06);
}
.svc-media-card__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 42%, rgba(15, 23, 42, 0.55) 100%),
        linear-gradient(135deg, color-mix(in srgb, var(--svc-accent) 18%, transparent), transparent 55%);
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.svc-media-card:hover .svc-media-card__veil {
    opacity: 0.85;
}
.svc-media-card__num {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.55rem;
    padding: 0.28rem 0.55rem;
}

.svc-media-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.1rem 1.15rem;
    flex: 1;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--svc-accent-soft) 35%, #fff), #fff 60%);
}
.svc-media-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #0f172a;
    transition: color 0.25s ease;
}
.svc-media-card:hover .svc-media-card__title {
    color: var(--svc-title);
}
.svc-media-card__desc {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.svc-media-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--svc-title);
}
.svc-media-card__cta svg {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.28s ease;
}
.svc-media-card:hover .svc-media-card__cta svg {
    transform: translateX(3px);
}

.svc-media-card--page .svc-media-card__body {
    padding: 1.15rem 1.2rem 0.85rem;
}
.svc-media-card--page .svc-media-card__title {
    font-size: 1.05rem;
}
.svc-media-card--page .svc-media-card__desc {
    font-size: 0.84rem;
    -webkit-line-clamp: 3;
}
.svc-media-card__actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.2rem 1.15rem;
}
.svc-media-card__action {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0.55rem 0.75rem;
    border-radius: 0.7rem;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.svc-media-card__action--quote {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}
.svc-media-card__action--quote:hover {
    background: rgba(239, 68, 68, 0.18);
}
.svc-media-card__action--wa {
    background: rgba(234, 179, 8, 0.12);
    color: #a16207;
}
.svc-media-card__action--wa:hover {
    background: rgba(234, 179, 8, 0.2);
}

/* Individual service detail hero image */
.svc-detail-hero {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.svc-detail-hero__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    border-radius: 1.5rem;
    overflow: hidden;
    cursor: zoom-in;
    background: #0f172a;
    box-shadow:
        0 20px 48px -20px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(15, 23, 42, 0.06);
}
.svc-detail-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-detail-hero__media:hover .svc-detail-hero__img {
    transform: scale(1.04);
}
.svc-detail-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.35));
    pointer-events: none;
}
.svc-detail-hero__cue {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.svc-detail-hero__cue svg {
    width: 1.1rem;
    height: 1.1rem;
}
.svc-detail-hero__media:hover .svc-detail-hero__cue,
.svc-detail-hero__media:focus-visible .svc-detail-hero__cue {
    opacity: 1;
    transform: none;
}
.svc-detail-hero__media:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 3px;
}
.svc-detail-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}
.svc-detail-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.75rem 0.5rem;
    border-radius: 1rem;
    text-align: center;
    color: #fff;
}
.svc-detail-hero__stat--ocean {
    background: linear-gradient(145deg, #ef4444, #b91c1c);
}
.svc-detail-hero__stat--brand {
    background: linear-gradient(145deg, #eab308, #a16207);
}
.svc-detail-hero__stat--signal {
    background: linear-gradient(145deg, #f97316, #c2410c);
}
.svc-detail-hero__stat-val {
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.svc-detail-hero__stat-label {
    font-size: 0.65rem;
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .svc-media-card,
    .svc-media-card__img,
    .svc-detail-hero__img {
        transition: none;
    }
    .svc-media-card:hover,
    a.svc-media-card:hover {
        transform: none;
    }
    .svc-media-card:hover .svc-media-card__img,
    .svc-detail-hero__media:hover .svc-detail-hero__img {
        transform: none;
    }
}

/* What We Do — classic header + typewriter */
.wwd-header {
    --wwd-red: #dc2626;
    --wwd-gold: #ca8a04;
    --wwd-signal: #ea580c;
    --wwd-ink: #0f172a;
}
.wwd-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wwd-gold);
}
.wwd-header__eyebrow-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--wwd-red), var(--wwd-gold));
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.wwd-header__title {
    margin: 0.85rem 0 0;
    font-size: clamp(2rem, 4.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--wwd-ink);
    min-height: 1.2em;
}
.wwd-header__tw {
    color: var(--wwd-ink);
    -webkit-text-fill-color: currentColor;
}
.wwd-header__ink {
    color: #0f172a;
    -webkit-text-fill-color: #0f172a;
}
.wwd-header__accent {
    color: var(--wwd-red);
    -webkit-text-fill-color: var(--wwd-red);
    background-image: linear-gradient(105deg, #dc2626 0%, #ca8a04 55%, #ea580c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wwd-header__tw.is-typing {
    color: var(--wwd-ink);
    -webkit-text-fill-color: var(--wwd-ink);
}
.wwd-header__cursor {
    color: var(--wwd-red);
    font-weight: 300;
    margin-left: 0.04em;
}
.wwd-header__rule {
    display: block;
    width: 4.5rem;
    height: 2px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wwd-red), var(--wwd-gold), var(--wwd-signal));
    transform: scaleX(0.35);
    transform-origin: center;
    opacity: 0.55;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.wwd-header.reveal.visible .wwd-header__rule {
    transform: scaleX(1);
    opacity: 1;
}
.wwd-header__sub {
    margin: 1.1rem auto 0;
    max-width: 40rem;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #475569;
}
.wwd-header__sub::first-line {
    color: #334155;
    font-weight: 500;
}
.wwd-header__caps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0.15rem;
    margin: 1rem auto 0;
    max-width: 36rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.wwd-header__caps-sep {
    margin: 0 0.45rem;
    color: #cbd5e1;
    font-weight: 500;
    letter-spacing: 0;
}
.wwd-header__cap--ocean { color: #dc2626; }
.wwd-header__cap--brand { color: #a16207; }
.wwd-header__cap--signal { color: #c2410c; }
@media (prefers-reduced-motion: reduce) {
    .wwd-header.reveal.visible .wwd-header__rule {
        transform: scaleX(1);
        opacity: 1;
        transition: none;
    }
}

/* What We Do — modern service lifecycle cards */
.service-lifecycle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.35rem;
    max-width: 72rem;
    margin-inline: auto;
}
@media (min-width: 640px) {
    .service-lifecycle-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .service-lifecycle-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

.service-lifecycle-card {
    --slc-accent: #ef4444;
    --slc-accent-deep: #dc2626;
    --slc-accent-soft: rgba(239, 68, 68, 0.14);
    --slc-accent-glow: rgba(239, 68, 68, 0.28);
    --slc-title: #dc2626;
    --slc-body-tint: rgba(254, 242, 242, 0.55);
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1.35rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 36px -18px rgba(15, 23, 42, 0.22);
    isolation: isolate;
    opacity: 0;
    transform: translateY(20px);
    animation: serviceLifecycleIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--slc-delay, 0s);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease,
        border-color 0.35s ease;
}
.service-lifecycle-card--ocean {
    --slc-accent: #ef4444;
    --slc-accent-deep: #dc2626;
    --slc-accent-soft: rgba(239, 68, 68, 0.16);
    --slc-accent-glow: rgba(239, 68, 68, 0.32);
    --slc-title: #dc2626;
    --slc-body-tint: rgba(254, 242, 242, 0.65);
}
.service-lifecycle-card--brand {
    --slc-accent: #eab308;
    --slc-accent-deep: #ca8a04;
    --slc-accent-soft: rgba(234, 179, 8, 0.2);
    --slc-accent-glow: rgba(234, 179, 8, 0.36);
    --slc-title: #a16207;
    --slc-body-tint: rgba(254, 252, 232, 0.7);
}
.service-lifecycle-card--signal {
    --slc-accent: #f97316;
    --slc-accent-deep: #ea580c;
    --slc-accent-soft: rgba(249, 115, 22, 0.18);
    --slc-accent-glow: rgba(249, 115, 22, 0.34);
    --slc-title: #c2410c;
    --slc-body-tint: rgba(255, 247, 237, 0.7);
}

/* Colored top accent rail */
.service-lifecycle-card__rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 3;
    background: linear-gradient(
        90deg,
        var(--slc-accent-deep) 0%,
        var(--slc-accent) 55%,
        color-mix(in srgb, var(--slc-accent) 40%, #0f172a) 100%
    );
    box-shadow: 0 0 18px -2px var(--slc-accent-glow);
    pointer-events: none;
}

.service-lifecycle-card:hover {
    transform: translateY(-10px);
    border-color: color-mix(in srgb, var(--slc-accent) 42%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--slc-accent) 22%, transparent),
        0 22px 48px -16px var(--slc-accent-glow),
        0 10px 28px -14px rgba(15, 23, 42, 0.22);
}
.service-lifecycle-card:hover .service-lifecycle-card__rail {
    height: 5px;
    box-shadow: 0 0 24px 0 var(--slc-accent-glow);
}

.service-lifecycle-card--led {
    border-color: rgba(234, 179, 8, 0.32);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(234, 179, 8, 0.1),
        0 16px 36px -16px rgba(234, 179, 8, 0.38),
        0 0 30px -10px rgba(239, 68, 68, 0.2);
}
.service-lifecycle-card--led .service-lifecycle-card__rail {
    background: linear-gradient(90deg, #ca8a04 0%, #facc15 40%, #ef4444 100%);
}
.service-lifecycle-card--led:hover {
    box-shadow:
        0 0 0 1px rgba(234, 179, 8, 0.35),
        0 24px 50px -14px rgba(234, 179, 8, 0.5),
        0 0 40px -8px rgba(239, 68, 68, 0.28);
}

@keyframes serviceLifecycleIn {
    to { opacity: 1; transform: translateY(0); }
}

.service-lifecycle-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0;
    margin: 0;
    cursor: zoom-in;
    overflow: hidden;
    background: #0f172a;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.service-lifecycle-card__media:focus-visible {
    outline: 2px solid var(--slc-accent);
    outline-offset: -2px;
}
.service-lifecycle-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-lifecycle-card:hover .service-lifecycle-card__img {
    transform: scale(1.1);
}
.service-lifecycle-card__media-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 42%, rgba(15, 23, 42, 0.62) 100%),
        linear-gradient(135deg, var(--slc-accent-soft), transparent 58%);
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.service-lifecycle-card:hover .service-lifecycle-card__media-veil {
    opacity: 0.92;
}
.service-lifecycle-card--led .service-lifecycle-card__media-veil {
    background:
        linear-gradient(180deg, transparent 32%, rgba(15, 23, 42, 0.55) 100%),
        radial-gradient(ellipse at 72% 18%, rgba(234, 179, 8, 0.4), transparent 52%),
        radial-gradient(ellipse at 18% 82%, rgba(239, 68, 68, 0.24), transparent 46%);
}
.service-lifecycle-card__badge {
    position: absolute;
    top: 0.95rem;
    left: 0.95rem;
    z-index: 2;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(145deg, var(--slc-accent), var(--slc-accent-deep));
    box-shadow:
        0 8px 20px -8px var(--slc-accent-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.service-lifecycle-card--brand .service-lifecycle-card__badge {
    color: #1c1917;
    background: linear-gradient(145deg, #fde047, #eab308 55%, #ca8a04);
}
.service-lifecycle-card__label {
    position: absolute;
    left: 0.95rem;
    bottom: 0.9rem;
    z-index: 2;
    padding: 0.3rem 0.75rem;
    border-radius: 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.service-lifecycle-card__zoom {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    z-index: 2;
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    color: #fff;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(5px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.service-lifecycle-card__zoom svg {
    width: 1rem;
    height: 1rem;
}
.service-lifecycle-card:hover .service-lifecycle-card__zoom,
.service-lifecycle-card__media:focus-visible .service-lifecycle-card__zoom {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.service-lifecycle-card:hover .service-lifecycle-card__zoom {
    background: color-mix(in srgb, var(--slc-accent-deep) 78%, #0f172a);
}
.service-lifecycle-card__led-pulse {
    position: absolute;
    inset: auto 12% 18% auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #facc15;
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55);
    animation: ledPulse 1.8s ease-in-out infinite;
    z-index: 2;
}
@keyframes ledPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55); opacity: 1; }
    50% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); opacity: 0.85; }
}

.service-lifecycle-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.2rem 1.3rem 1.4rem;
    background:
        linear-gradient(180deg, #ffffff 0%, var(--slc-body-tint) 100%);
    border-top: 1px solid color-mix(in srgb, var(--slc-accent) 28%, #e2e8f0);
}
.service-lifecycle-card__title {
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--slc-title);
    margin: 0 0 0.5rem;
    -webkit-text-fill-color: var(--slc-title);
}
.service-lifecycle-card--ocean .service-lifecycle-card__title {
    color: #dc2626;
    -webkit-text-fill-color: #dc2626;
}
.service-lifecycle-card--brand .service-lifecycle-card__title {
    color: #a16207;
    -webkit-text-fill-color: #a16207;
}
.service-lifecycle-card--signal .service-lifecycle-card__title {
    color: #c2410c;
    -webkit-text-fill-color: #c2410c;
}
.service-lifecycle-card--led .service-lifecycle-card__title {
    background: linear-gradient(92deg, #a16207 0%, #ca8a04 38%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.service-lifecycle-card__desc {
    margin: 0 0 1.05rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #334155; /* slate-700 ? high readability */
    flex: 1;
}
.service-lifecycle-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 2px solid color-mix(in srgb, var(--slc-accent) 45%, transparent);
    transition: color 0.25s ease, gap 0.25s ease, border-color 0.25s ease;
}
.service-lifecycle-card__link svg {
    width: 0.95rem;
    height: 0.95rem;
    transition: transform 0.25s ease;
}
.service-lifecycle-card__link:hover {
    color: var(--slc-title);
    border-bottom-color: var(--slc-accent);
    gap: 0.55rem;
}
.service-lifecycle-card--brand .service-lifecycle-card__link:hover {
    color: #a16207;
}
.service-lifecycle-card__link:hover svg {
    transform: translateX(3px);
}

@media (max-width: 639px) {
    .service-lifecycle-card {
        border-radius: 1.2rem;
    }
    .service-lifecycle-card__body {
        padding: 1.1rem 1.15rem 1.25rem;
    }
    .service-lifecycle-card__title {
        font-size: 1.05rem;
    }
    .service-lifecycle-card__desc {
        font-size: 0.875rem;
        color: #1e293b; /* slightly darker on mobile for glare/readability */
    }
    .service-lifecycle-card__zoom {
        opacity: 1;
        transform: none;
        background: color-mix(in srgb, var(--slc-accent-deep) 72%, #0f172a);
    }
}
@media (prefers-reduced-motion: reduce) {
    .service-lifecycle-card,
    .service-lifecycle-card__img,
    .service-lifecycle-card__led-pulse,
    .service-lifecycle-card__zoom,
    .service-lifecycle-card__rail {
        animation: none !important;
        transition: none !important;
    }
    .service-lifecycle-card {
        opacity: 1;
        transform: none;
    }
    .service-lifecycle-card:hover {
        transform: none;
    }
    .service-lifecycle-card:hover .service-lifecycle-card__img {
        transform: none;
    }
}

/* Full-image lightbox */
.danix-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.danix-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.danix-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: zoom-out;
}
.danix-lightbox__dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    transform: scale(0.94) translateY(12px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.danix-lightbox.is-open .danix-lightbox__dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.danix-lightbox__frame {
    position: relative;
    width: 100%;
    max-height: min(78vh, 780px);
    padding: 0.65rem;
    border-radius: 1.35rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 0 0 1px rgba(234, 179, 8, 0.08),
        0 28px 80px -24px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}
.danix-lightbox__img {
    display: block;
    width: 100%;
    max-height: min(74vh, 740px);
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 1rem;
    background: #0b1220;
}
.danix-lightbox__caption {
    margin: 0;
    text-align: center;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.danix-lightbox__counter {
    color: #facc15;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.danix-lightbox__close,
.danix-lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    z-index: 2;
}
.danix-lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: rgba(250, 204, 21, 0.35);
    box-shadow: 0 10px 24px -10px rgba(239, 68, 68, 0.7);
}
.danix-lightbox__close:hover {
    transform: scale(1.06);
    background: linear-gradient(135deg, #f87171, #ef4444);
}
.danix-lightbox__close:focus-visible,
.danix-lightbox__nav:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: 2px;
}
.danix-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
}
.danix-lightbox__nav--prev { left: 0.75rem; }
.danix-lightbox__nav--next { right: 0.75rem; }
.danix-lightbox__nav:hover {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(250, 204, 21, 0.4);
}
.danix-lightbox__nav svg,
.danix-lightbox__close svg {
    width: 1.25rem;
    height: 1.25rem;
}
.danix-lightbox__nav[hidden] {
    display: none !important;
}
body.danix-lightbox-open {
    overflow: hidden;
}
@media (max-width: 639px) {
    .danix-lightbox {
        padding: 0.65rem;
    }
    .danix-lightbox__close {
        top: 0.65rem;
        right: 0.65rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    .danix-lightbox__nav {
        width: 2.4rem;
        height: 2.4rem;
    }
    .danix-lightbox__nav--prev { left: 0.35rem; }
    .danix-lightbox__nav--next { right: 0.35rem; }
    .danix-lightbox__caption {
        font-size: 0.85rem;
        padding-inline: 0.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .danix-lightbox,
    .danix-lightbox__dialog {
        transition: none !important;
    }
}

/* Process heading ? staggered reveal + shimmer + underline */
.process-heading {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.process-heading__words {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.28em 0.32em;
    perspective: 520px;
}
.process-heading__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.55em) rotateX(16deg);
    transform-origin: 50% 100%;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--w, 0) * 0.1s + 0.05s);
    will-change: transform, opacity;
}
.process-heading-wrap.reveal.visible .process-heading__word {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}
/* Non-accent words: brand gold ? visible on dark process bg (not white) */
.process-heading__word:not(.process-heading__word--accent) {
    color: #eab308;
    text-shadow:
        0 1px 0 rgba(15, 23, 42, 0.45),
        0 0 18px rgba(234, 179, 8, 0.25);
}
.process-heading-wrap.reveal.visible .process-heading__word:hover {
    transform: translateY(-0.14em);
    transition-delay: 0s;
    color: #facc15;
}

/* Accent word: ocean ? brand ? signal gradient with soft shimmer sweep */
.process-heading__word--accent {
    background-image: linear-gradient(
        105deg,
        #dc2626 0%,
        #eab308 22%,
        #f97316 42%,
        #dc2626 62%,
        #fde68a 82%,
        #eab308 100%
    );
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(220, 38, 38, 0.28));
}
.process-heading-wrap.reveal.visible .process-heading__word--accent {
    filter: drop-shadow(0 0 18px rgba(234, 179, 8, 0.3));
    animation: processHeadingShimmer 4.2s ease-in-out infinite;
    animation-delay: 0.9s;
}
.process-heading-wrap.reveal.visible .process-heading__word--accent:hover {
    transform: translateY(-0.14em) scale(1.02);
    filter: drop-shadow(0 0 22px rgba(234, 179, 8, 0.4));
}
@keyframes processHeadingShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Soft brand underline draws in on reveal */
.process-heading__underline {
    display: block;
    margin: 0.7rem auto 0;
    width: min(11rem, 72%);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #dc2626 0%,
        #eab308 48%,
        #f97316 100%
    );
    box-shadow:
        0 0 16px rgba(234, 179, 8, 0.35),
        0 0 8px rgba(220, 38, 38, 0.25);
    transform-origin: center center;
    transform: scaleX(0);
    opacity: 0;
    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s,
        opacity 0.5s ease 0.45s,
        width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-heading-wrap.reveal.visible .process-heading__underline {
    transform: scaleX(1);
    opacity: 1;
}
.process-heading:hover .process-heading__underline {
    width: min(14rem, 88%);
}

@media (prefers-reduced-motion: reduce) {
    .process-heading__word {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
    .process-heading-wrap.reveal.visible .process-heading__word:hover,
    .process-heading-wrap.reveal.visible .process-heading__word--accent:hover {
        transform: none;
    }
    .process-heading__word--accent,
    .process-heading-wrap.reveal.visible .process-heading__word--accent {
        animation: none !important;
        background-position: 35% 50%;
        filter: none;
    }
    .process-heading__underline {
        transform: scaleX(1);
        opacity: 1;
        transition: none;
    }
    .process-heading:hover .process-heading__underline {
        width: min(11rem, 72%);
    }
}

/* Services section heading ? stagger + shimmer (light bg twin of process-heading) */
.services-eyebrow {
    display: inline-flex;
    align-items: baseline;
    min-height: 1.25em;
}
.services-eyebrow__cursor {
    color: #ca8a04;
    margin-left: 1px;
}
.services-heading {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.services-heading__words {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.28em 0.32em;
    perspective: 520px;
}
.services-heading__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em) rotateX(14deg);
    transform-origin: 50% 100%;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--w, 0) * 0.1s + 0.08s);
    will-change: transform, opacity;
}
.services-heading-wrap.reveal.visible .services-heading__word {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}
.services-heading__word:not(.services-heading__word--accent) {
    color: #0f172a;
}
.services-heading-wrap.reveal.visible .services-heading__word:hover {
    transform: translateY(-0.12em);
    transition-delay: 0s;
}

/* Accent: Solutions ? ocean / brand / signal shimmer */
.services-heading__word--accent {
    background-image: linear-gradient(
        105deg,
        #dc2626 0%,
        #eab308 24%,
        #f97316 46%,
        #ef4444 64%,
        #facc15 82%,
        #fb923c 100%
    );
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.14));
}
.services-heading-wrap.reveal.visible .services-heading__word--accent {
    filter: drop-shadow(0 0 16px rgba(234, 179, 8, 0.2));
    animation: servicesHeadingShimmer 4.2s ease-in-out infinite;
    animation-delay: 0.85s;
}
.services-heading-wrap.reveal.visible .services-heading__word--accent:hover {
    transform: translateY(-0.12em) scale(1.02);
    filter: drop-shadow(0 0 20px rgba(234, 179, 8, 0.32));
}
@keyframes servicesHeadingShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.services-heading__underline {
    display: block;
    margin: 0.65rem auto 0;
    width: min(10.5rem, 68%);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #ef4444 0%,
        #eab308 48%,
        #f97316 100%
    );
    box-shadow:
        0 0 14px rgba(234, 179, 8, 0.28),
        0 0 8px rgba(239, 68, 68, 0.16);
    transform-origin: center;
    transform: scaleX(0);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.42s,
        opacity 0.45s ease 0.42s,
        width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.services-heading-wrap.reveal.visible .services-heading__underline {
    transform: scaleX(1);
    opacity: 1;
}
.services-heading:hover .services-heading__underline {
    width: min(13.5rem, 86%);
}

@media (max-width: 639px) {
    .services-heading__underline {
        width: min(8.5rem, 62%);
        margin-top: 0.55rem;
    }
    .services-heading:hover .services-heading__underline {
        width: min(11rem, 78%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-heading__word {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
    .services-heading-wrap.reveal.visible .services-heading__word:hover,
    .services-heading-wrap.reveal.visible .services-heading__word--accent:hover {
        transform: none;
    }
    .services-heading__word--accent,
    .services-heading-wrap.reveal.visible .services-heading__word--accent {
        animation: none !important;
        background-position: 35% 50%;
        filter: none;
    }
    .services-heading__underline {
        transform: scaleX(1);
        opacity: 1;
        transition: none;
    }
    .services-heading:hover .services-heading__underline {
        width: min(10.5rem, 68%);
    }
}

/* Process timeline ? plays when .reveal becomes .visible */
.process-step-item {
    opacity: 0;
    transform: translateY(28px);
}
.process-track.reveal.visible .process-step-item {
    animation: processStepIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--step-delay, 0s);
}
@keyframes processStepIn {
    to { opacity: 1; transform: translateY(0); }
}

.process-badge {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step-item:hover .process-badge {
    transform: scale(1.06);
}
.process-track.reveal.visible .process-badge {
    animation: processBadgePop 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: var(--step-delay, 0s);
}
@keyframes processBadgePop {
    0% { transform: scale(0.72); }
    70% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.process-path-line,
.process-path-line-v {
    transform-origin: left center;
    transform: scaleX(0);
}
.process-path-line-v {
    transform-origin: top center;
    transform: scaleY(0);
}
.process-track.reveal.visible .process-path-line {
    animation: processPathDraw 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.process-track.reveal.visible .process-path-line-v {
    animation: processPathDrawV 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}
@keyframes processPathDraw {
    to { transform: scaleX(1); }
}
@keyframes processPathDrawV {
    to { transform: scaleY(1); }
}

.process-pulse-dot {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
    animation: processDotPulse 2.2s ease-in-out infinite;
}
@keyframes processDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
    50% { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .process-step-item,
    .process-path-line,
    .process-path-line-v,
    .process-pulse-dot,
    .process-badge {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .process-step-item:hover .process-badge {
        transform: none;
    }
}

/* ==========================================================================
   Testimonials — maroon theme + modern motion
   ========================================================================== */
.testimonials-section {
    --tm-maroon: #6b1024;
    --tm-maroon-deep: #3f0a16;
    --tm-maroon-mid: #8b1a32;
    --tm-rose: #c45a6c;
    --tm-gold: #f5c84c;
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
    background:
        radial-gradient(120% 80% at 10% 0%, rgba(196, 90, 108, 0.28) 0%, transparent 55%),
        radial-gradient(90% 70% at 90% 100%, rgba(245, 200, 76, 0.12) 0%, transparent 50%),
        linear-gradient(145deg, var(--tm-maroon-deep) 0%, var(--tm-maroon) 48%, #5a0e1f 100%);
    color: #fff;
}
@media (min-width: 1024px) {
    .testimonials-section { padding: 7rem 0; }
}

.testimonials-section__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.testimonials-section__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.45;
    will-change: transform;
}
.testimonials-section__orb--a {
    width: min(42vw, 420px);
    height: min(42vw, 420px);
    top: -12%;
    left: -8%;
    background: radial-gradient(circle, rgba(196, 90, 108, 0.65) 0%, transparent 70%);
    animation: tmOrbDriftA 16s ease-in-out infinite alternate;
}
.testimonials-section__orb--b {
    width: min(36vw, 360px);
    height: min(36vw, 360px);
    right: -6%;
    bottom: -10%;
    background: radial-gradient(circle, rgba(245, 200, 76, 0.28) 0%, transparent 70%);
    animation: tmOrbDriftB 18s ease-in-out infinite alternate;
}
.testimonials-section__shine {
    position: absolute;
    inset: -20% -40%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.06) 48%,
        transparent 62%
    );
    animation: tmShineSweep 12s ease-in-out infinite;
}

.testimonials-section__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f5c84c;
}
.testimonials-section__highlight {
    background: linear-gradient(120deg, #fde68a 0%, #f5c84c 40%, #fca5a5 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: tmHighlightShift 8s ease-in-out infinite;
}
.testimonials-section__stars {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.testimonials-section__star {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--tm-gold);
    animation: tmStarPulse 2.4s ease-in-out infinite;
    animation-delay: calc(var(--star-i, 0) * 0.12s);
}
.testimonials-section__rating {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 245, 245, 0.78);
}
.testimonials-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}
.testimonials-nav-btn:hover {
    background: rgba(245, 200, 76, 0.18);
    border-color: rgba(245, 200, 76, 0.55);
    transform: translateY(-2px);
}
.testimonials-nav-btn:active { transform: translateY(0); }

.testimonials-carousel {
    mask-image: linear-gradient(90deg, transparent 0%, #000 2%, #000 98%, transparent 100%);
}

.testimonial-card {
    --card-i: 0;
    scroll-snap-align: start;
    position: relative;
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, #fff8f8 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 18px 40px -24px rgba(20, 4, 8, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
    animation: tmCardFloat 5.5s ease-in-out infinite;
    animation-delay: calc(var(--card-i) * 0.35s);
}
.testimonial-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #8b1a32, #f5c84c);
    opacity: 0.9;
}
.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 28px 48px -22px rgba(20, 4, 8, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation-play-state: paused;
}
.testimonial-card__quote {
    position: absolute;
    top: 0.35rem;
    right: 1rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(107, 16, 36, 0.1);
    pointer-events: none;
    user-select: none;
}
.testimonial-card__text {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.testimonial-card__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(107, 16, 36, 0.1);
}
.testimonial-card__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(145deg, #8b1a32 0%, #6b1024 55%, #a16207 100%);
    box-shadow: 0 6px 14px -6px rgba(107, 16, 36, 0.55);
}
.testimonial-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}
.testimonial-card__meta {
    font-size: 0.7rem;
    color: #94a3b8;
}

@keyframes tmOrbDriftA {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(8%, 10%) scale(1.08); }
}
@keyframes tmOrbDriftB {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-10%, -8%) scale(1.12); }
}
@keyframes tmShineSweep {
    0%, 100% { transform: translateX(-8%) rotate(0.001deg); opacity: 0.35; }
    50% { transform: translateX(8%) rotate(0.001deg); opacity: 0.7; }
}
@keyframes tmHighlightShift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}
@keyframes tmStarPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.12); opacity: 1; }
}
@keyframes tmCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials-section__orb,
    .testimonials-section__shine,
    .testimonials-section__highlight,
    .testimonials-section__star,
    .testimonial-card {
        animation: none !important;
    }
    .testimonial-card:hover,
    .testimonials-nav-btn:hover {
        transform: none;
    }
}

/* Navbar shadow on scroll */
#navbar.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* ============================================
   Nav links ? neon rounded pills (logo colors)
   Stronger glow when navbar is scrolled
   ============================================ */
.nav-link {
    --nav-accent: #ef4444;
    --nav-soft: rgba(239, 68, 68, 0.12);
    --nav-glow: rgba(239, 68, 68, 0.45);
    --nav-text: #b91c1c;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    isolation: isolate;
    transition:
        color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    background: transparent;
}
.nav-link--ocean {
    --nav-accent: #ef4444;
    --nav-soft: rgba(239, 68, 68, 0.14);
    --nav-glow: rgba(239, 68, 68, 0.5);
    --nav-text: #b91c1c;
}
.nav-link--brand {
    --nav-accent: #eab308;
    --nav-soft: rgba(234, 179, 8, 0.16);
    --nav-glow: rgba(234, 179, 8, 0.55);
    --nav-text: #a16207;
}
.nav-link--signal {
    --nav-accent: #f97316;
    --nav-soft: rgba(249, 115, 22, 0.14);
    --nav-glow: rgba(249, 115, 22, 0.5);
    --nav-text: #c2410c;
}

.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--nav-soft);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--nav-accent) 55%, transparent),
        0 0 18px -2px var(--nav-glow),
        0 0 32px -6px var(--nav-glow);
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--nav-text);
    border-color: color-mix(in srgb, var(--nav-accent) 40%, transparent);
    background: var(--nav-soft);
    transform: translateY(-1px);
}
.nav-link:hover::before,
.nav-link:focus-visible::before,
.nav-link:hover::after,
.nav-link:focus-visible::after {
    opacity: 1;
}
.nav-link:focus-visible {
    outline: 2px solid var(--nav-accent);
    outline-offset: 2px;
}

.nav-link.is-active {
    color: var(--nav-text);
    background: var(--nav-soft);
    border-color: color-mix(in srgb, var(--nav-accent) 35%, transparent);
}
.nav-link.is-active::before {
    opacity: 1;
}

/* Scrolled: neon rounded rectangle hover intensifies */
#navbar.scrolled .nav-link:hover,
#navbar.scrolled .nav-link:focus-visible {
    color: var(--nav-text);
    background: var(--nav-soft);
    border-color: color-mix(in srgb, var(--nav-accent) 65%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--nav-accent) 35%, transparent),
        0 8px 22px -8px var(--nav-glow),
        0 0 28px -4px var(--nav-glow);
    transform: translateY(-2px);
}
#navbar.scrolled .nav-link:hover::after,
#navbar.scrolled .nav-link:focus-visible::after {
    opacity: 1;
    box-shadow:
        0 0 0 1.5px var(--nav-accent),
        0 0 22px 0 var(--nav-glow),
        0 0 40px -4px var(--nav-glow);
}
#navbar.scrolled .nav-link.is-active {
    box-shadow: 0 0 16px -4px var(--nav-glow);
}

.nav-link--mobile {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .nav-link {
        transition: color 0.15s ease, background 0.15s ease;
    }
    .nav-link:hover,
    .nav-link:focus-visible,
    #navbar.scrolled .nav-link:hover,
    #navbar.scrolled .nav-link:focus-visible {
        transform: none;
    }
}

/* ============================================
   Danix AI Chat Widget ? classic + modern
   ============================================ */
#whatsapp-float::before,
#email-float::before,
#call-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: floatBtnPulse 2s ease-in-out infinite;
    z-index: -1;
}
#whatsapp-float::before {
    background: #25D366;
}
#email-float::before {
    background: #EA4335;
    animation-delay: 0.35s;
}
#call-float::before {
    background: #2563eb;
    animation-delay: 0.7s;
}

.call-float-panel {
    position: absolute;
    right: calc(100% + 0.85rem);
    top: 50%;
    transform: translateY(-50%) translateX(12px) scale(0.92);
    min-width: 13.5rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(37, 99, 235, 0.2);
    box-shadow:
        0 18px 40px -16px rgba(37, 99, 235, 0.35),
        0 8px 20px -12px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.22s;
    z-index: 60;
}
.call-float-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) scale(1);
}
.call-float-panel__label {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
}
.call-float-panel__number {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.call-float-panel__number:hover {
    color: #2563eb;
}
.call-float-panel__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    background: #2563eb;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
    box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
}
.call-float-panel__action:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}
#call-float[aria-expanded="true"] .call-float__hint {
    opacity: 0 !important;
}

@keyframes floatBtnPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0; }
}
@keyframes whatsappPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0; }
}

/* Stats counter */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* Form focus states */
.form-input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* CTA button shine effect */
.btn-shine {
    position: relative;
    overflow: hidden;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}
.btn-shine:hover::after {
    transform: translateX(100%);
}

/* FAQ accordion */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
    max-height: 500px;
}
.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

/* ============================================
   Signature "lit signage" elements
   ============================================ */

/* Small glowing LED-style marker used before eyebrow labels */
.glow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249,115,22, 0.18);
    animation: glowPulse 2.4s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% {     box-shadow: 0 0 0 3px rgba(249,115,22, 0.18); opacity: 1; }
    50% { box-shadow: 0 0 0 6px rgba(249,115,22, 0.08); opacity: 0.75; }
}

/* ============================================
   Site Footer ? modern rounded link pills
   Accents: ocean (red) ? brand (yellow) ? signal (orange) ? dark (slate-black)
   ============================================ */

.site-footer {
    --ft-ocean: #ef4444;
    --ft-ocean-soft: rgba(239, 68, 68, 0.18);
    --ft-ocean-glow: rgba(239, 68, 68, 0.35);
    --ft-brand: #eab308;
    --ft-brand-soft: rgba(234, 179, 8, 0.18);
    --ft-brand-glow: rgba(234, 179, 8, 0.35);
    --ft-signal: #f97316;
    --ft-signal-soft: rgba(249, 115, 22, 0.18);
    --ft-signal-glow: rgba(249, 115, 22, 0.35);
    --ft-dark: #94a3b8;
    --ft-dark-soft: rgba(148, 163, 184, 0.14);
    --ft-dark-glow: rgba(15, 23, 42, 0.55);
    --ft-ease: cubic-bezier(0.4, 0, 0.2, 1);
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(239, 68, 68, 0.12), transparent 55%),
        radial-gradient(ellipse 70% 45% at 90% 20%, rgba(234, 179, 8, 0.1), transparent 50%),
        linear-gradient(145deg, #0f172a 0%, #1a0a0a 42%, #1c1408 72%, #0b1220 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__glow {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    pointer-events: none;
    overflow: hidden;
}
.site-footer__orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(72px);
}
.site-footer__orb--ocean {
    top: -6rem;
    left: 18%;
    width: 22rem;
    height: 22rem;
    background: var(--ft-ocean);
}
.site-footer__orb--brand {
    bottom: -4rem;
    right: 18%;
    width: 22rem;
    height: 22rem;
    background: var(--ft-brand);
}
.site-footer__orb--signal {
    top: 42%;
    right: 4%;
    width: 14rem;
    height: 14rem;
    background: var(--ft-signal);
    opacity: 0.55;
}

.site-footer__grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
}

.site-footer__logo {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.08),
        0 10px 28px rgba(0, 0, 0, 0.35);
}
.site-footer__brand-tag {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.45);
}
.site-footer__blurb {
    color: #94a3b8;
    font-size: 0.875rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    max-width: 20rem;
}
.site-footer__availability {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.22);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fdba74;
}

.site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.site-footer__social-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    transition: transform 0.3s var(--ft-ease), background 0.3s var(--ft-ease), border-color 0.3s var(--ft-ease), box-shadow 0.3s var(--ft-ease), color 0.3s var(--ft-ease);
}
.site-footer__social-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}
.site-footer__social-btn--brand:hover {
    background: rgba(234, 179, 8, 0.85);
    border-color: rgba(250, 204, 21, 0.9);
    box-shadow: 0 10px 24px -8px var(--ft-brand-glow);
    color: #0f172a;
}
.site-footer__social-btn--ocean:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: rgba(248, 113, 113, 0.95);
    box-shadow: 0 10px 24px -8px var(--ft-ocean-glow);
}
.site-footer__social-btn--signal:hover {
    background: rgba(249, 115, 22, 0.9);
    border-color: rgba(251, 146, 60, 0.95);
    box-shadow: 0 10px 24px -8px var(--ft-signal-glow);
}

.site-footer__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.site-footer__pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Stagger idle accent borders so the column feels alive */
.site-footer__pill-list > li:nth-child(4n + 1) .footer-link-pill { border-left-color: rgba(239, 68, 68, 0.35); }
.site-footer__pill-list > li:nth-child(4n + 2) .footer-link-pill { border-left-color: rgba(234, 179, 8, 0.35); }
.site-footer__pill-list > li:nth-child(4n + 3) .footer-link-pill { border-left-color: rgba(249, 115, 22, 0.35); }
.site-footer__pill-list > li:nth-child(4n + 4) .footer-link-pill { border-left-color: rgba(148, 163, 184, 0.4); }

.footer-link-pill {
    --pill-accent: var(--ft-ocean);
    --pill-soft: var(--ft-ocean-soft);
    --pill-glow: var(--ft-ocean-glow);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-width: 3px;
    font-size: 0.875rem;
    color: #cbd5e1;
    text-decoration: none;
    transition:
        transform 0.3s var(--ft-ease),
        background 0.3s var(--ft-ease),
        border-color 0.3s var(--ft-ease),
        color 0.3s var(--ft-ease),
        box-shadow 0.3s var(--ft-ease);
}
.footer-link-pill::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 22px -2px var(--pill-glow);
    transition: opacity 0.3s var(--ft-ease);
}
.footer-link-pill:hover {
    transform: translateY(-3px);
    color: #fff;
    background: var(--pill-soft);
    border-color: color-mix(in srgb, var(--pill-accent) 55%, transparent);
    border-left-color: var(--pill-accent);
    box-shadow: 0 12px 28px -10px var(--pill-glow);
}
.footer-link-pill:hover::after {
    opacity: 1;
}
.footer-link-pill:focus-visible {
    outline: 2px solid var(--pill-accent);
    outline-offset: 2px;
}

.footer-link-pill__icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: var(--pill-accent);
    transition: transform 0.3s var(--ft-ease), color 0.3s var(--ft-ease), filter 0.3s var(--ft-ease);
}
.footer-link-pill__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: var(--pill-accent);
    box-shadow: 0 0 0 3px var(--pill-soft);
    transition: transform 0.3s var(--ft-ease), box-shadow 0.3s var(--ft-ease);
}
.footer-link-pill:hover .footer-link-pill__icon {
    transform: scale(1.2);
    color: #fff;
    filter: drop-shadow(0 0 6px var(--pill-glow));
}
.footer-link-pill:hover .footer-link-pill__dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px var(--pill-soft), 0 0 10px var(--pill-glow);
}

.footer-link-pill--ocean {
    --pill-accent: var(--ft-ocean);
    --pill-soft: var(--ft-ocean-soft);
    --pill-glow: var(--ft-ocean-glow);
}
.footer-link-pill--brand {
    --pill-accent: var(--ft-brand);
    --pill-soft: var(--ft-brand-soft);
    --pill-glow: var(--ft-brand-glow);
}
.footer-link-pill--signal {
    --pill-accent: var(--ft-signal);
    --pill-soft: var(--ft-signal-soft);
    --pill-glow: var(--ft-signal-glow);
}
.footer-link-pill--dark {
    --pill-accent: #e2e8f0;
    --pill-soft: rgba(30, 41, 59, 0.85);
    --pill-glow: rgba(148, 163, 184, 0.4);
}
.footer-link-pill--dark:hover {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(226, 232, 240, 0.35);
    border-left-color: #f8fafc;
}
.footer-link-pill--dark .footer-link-pill__icon,
.footer-link-pill--dark .footer-link-pill__dot {
    color: #94a3b8;
    background: #94a3b8;
}
.footer-link-pill--dark:hover .footer-link-pill__icon {
    color: #fff;
}
.footer-link-pill--dark:hover .footer-link-pill__dot {
    background: #f8fafc;
}

.footer-link-pill--compact {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.site-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.site-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.site-footer__contact-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s var(--ft-ease), background 0.3s var(--ft-ease), border-color 0.3s var(--ft-ease), box-shadow 0.3s var(--ft-ease);
}
.site-footer__contact-icon svg {
    width: 1rem;
    height: 1rem;
}
.site-footer__contact-icon--brand { color: var(--ft-brand); }
.site-footer__contact-icon--signal { color: var(--ft-signal); }
.site-footer__contact-icon--ocean { color: var(--ft-ocean); }
.site-footer__contact-row:hover .site-footer__contact-icon {
    transform: translateY(-2px);
}
.site-footer__contact-row:hover .site-footer__contact-icon--brand {
    background: var(--ft-brand-soft);
    border-color: rgba(234, 179, 8, 0.45);
    box-shadow: 0 8px 18px -8px var(--ft-brand-glow);
}
.site-footer__contact-row:hover .site-footer__contact-icon--signal {
    background: var(--ft-signal-soft);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 8px 18px -8px var(--ft-signal-glow);
}
.site-footer__contact-row:hover .site-footer__contact-icon--ocean {
    background: var(--ft-ocean-soft);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 8px 18px -8px var(--ft-ocean-glow);
}
.site-footer__contact-text {
    padding-top: 0.45rem;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.5;
}

.site-footer__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__city {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.25s var(--ft-ease), background 0.25s var(--ft-ease), border-color 0.25s var(--ft-ease), color 0.25s var(--ft-ease), box-shadow 0.25s var(--ft-ease);
}
.site-footer__city:hover {
    transform: translateY(-2px);
    color: #fff;
}
.site-footer__city--ocean:hover {
    background: var(--ft-ocean-soft);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: 0 8px 18px -10px var(--ft-ocean-glow);
}
.site-footer__city--brand:hover {
    background: var(--ft-brand-soft);
    border-color: rgba(234, 179, 8, 0.45);
    box-shadow: 0 8px 18px -10px var(--ft-brand-glow);
    color: #fef08a;
}
.site-footer__city--signal:hover {
    background: var(--ft-signal-soft);
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 8px 18px -10px var(--ft-signal-glow);
}
.site-footer__city--dark:hover {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(226, 232, 240, 0.3);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.45);
}

.site-footer__bottom {
    width: 100%;
    margin-top: 1.75rem;
    padding-top: 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #64748b;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}
.site-footer__bottom p {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
}
.site-footer__powered {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.site-footer__love {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    color: #f97316;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-footer__love svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
}
.site-footer__love:hover,
.site-footer__love:focus-visible {
    color: #fb923c;
    background: rgba(249, 115, 22, 0.12);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
    transform: scale(1.12);
    outline: none;
}
.site-footer__love:focus-visible {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85), 0 0 0 4px rgba(249, 115, 22, 0.55);
}
@media (prefers-reduced-motion: reduce) {
    .site-footer__love {
        transition: none;
    }
    .site-footer__love:hover,
    .site-footer__love:focus-visible {
        transform: none;
    }
}
@media (min-width: 768px) {
    .site-footer__bottom {
        flex-direction: row;
        text-align: left;
    }
}
@media (max-width: 640px) {
    .footer-link-pill {
        padding: 0.5rem 0.8rem;
        font-size: 0.8125rem;
    }
    .site-footer__blurb {
        max-width: none;
    }
}

/* Illuminated stat card (About section) */
.glow-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.glow-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(239,68,68,0.35), rgba(234,179,8,0.35), rgba(249,115,22,0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.glow-card:hover::before {
    opacity: 1;
}

/* About section ? modern panel + in-section quote */
.about-section {
    position: relative;
}

/* ========== About page hero — modern brand typography ========== */
.about-page-hero {
    --aph-red: #f87171;
    --aph-red-deep: #ef4444;
    --aph-gold: #facc15;
    --aph-gold-soft: #fde68a;
    --aph-signal: #fb923c;
    --aph-ink: #f8fafc;
    --aph-muted: #94a3b8;
}
.about-page-hero__bg {
    background:
        radial-gradient(ellipse 70% 55% at 18% 20%, rgba(239, 68, 68, 0.28), transparent 58%),
        radial-gradient(ellipse 60% 50% at 88% 78%, rgba(234, 179, 8, 0.22), transparent 55%),
        radial-gradient(ellipse 45% 40% at 52% 48%, rgba(249, 115, 22, 0.12), transparent 60%),
        linear-gradient(145deg, #0b1220 0%, #1a1214 42%, #17140a 100%);
}
.about-page-hero__orb--ocean { background: rgba(239, 68, 68, 0.28); }
.about-page-hero__orb--brand { background: rgba(234, 179, 8, 0.22); }
.about-page-hero__orb--signal { background: rgba(249, 115, 22, 0.14); }

.about-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(253, 230, 138, 0.28);
    color: var(--aph-gold-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.about-page-hero__eyebrow-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--aph-red-deep), var(--aph-gold));
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.about-page-hero__eyebrow-brand {
    color: #fff;
    background-image: linear-gradient(105deg, #fff 0%, var(--aph-gold) 45%, var(--aph-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-page-hero__title {
    margin: 0;
    font-size: clamp(2.15rem, 5vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}
.about-page-hero__title-ink {
    color: var(--aph-ink);
    -webkit-text-fill-color: var(--aph-ink);
}
.about-page-hero__title-accent {
    margin-left: 0.28em;
    background-image: linear-gradient(105deg, var(--aph-red) 0%, var(--aph-gold) 48%, var(--aph-signal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--aph-red);
}

.about-page-hero__lead {
    margin: 1.1rem auto 0;
    max-width: 38rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.75;
    color: var(--aph-muted);
}
.about-page-hero__lead-accent {
    font-weight: 600;
}
.about-page-hero__lead-accent--red { color: #fca5a5; }
.about-page-hero__lead-accent--gold { color: var(--aph-gold); }
.about-page-hero__lead-accent--signal { color: var(--aph-signal); }

.about-page-toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}
.about-page-toc__link {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.about-page-toc__link:hover,
.about-page-toc__link:focus-visible {
    transform: translateY(-2px);
    outline: none;
}
.about-page-toc__link--ocean {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.28);
    background: rgba(239, 68, 68, 0.1);
}
.about-page-toc__link--ocean:hover,
.about-page-toc__link--ocean:focus-visible {
    color: #fff;
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow: 0 8px 22px -12px rgba(239, 68, 68, 0.55);
}
.about-page-toc__link--brand {
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.28);
    background: rgba(234, 179, 8, 0.1);
}
.about-page-toc__link--brand:hover,
.about-page-toc__link--brand:focus-visible {
    color: #fff;
    background: rgba(234, 179, 8, 0.22);
    border-color: rgba(250, 204, 21, 0.55);
    box-shadow: 0 8px 22px -12px rgba(234, 179, 8, 0.5);
}
.about-page-toc__link--signal {
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.28);
    background: rgba(249, 115, 22, 0.1);
}
.about-page-toc__link--signal:hover,
.about-page-toc__link--signal:focus-visible {
    color: #fff;
    background: rgba(249, 115, 22, 0.22);
    border-color: rgba(251, 146, 60, 0.55);
    box-shadow: 0 8px 22px -12px rgba(249, 115, 22, 0.5);
}
.about-page-toc__link--crimson {
    color: #fda4af;
    border-color: rgba(244, 63, 94, 0.28);
    background: rgba(225, 29, 72, 0.1);
}
.about-page-toc__link--crimson:hover,
.about-page-toc__link--crimson:focus-visible {
    color: #fff;
    background: rgba(225, 29, 72, 0.22);
    border-color: rgba(244, 63, 94, 0.55);
    box-shadow: 0 8px 22px -12px rgba(225, 29, 72, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .about-page-toc__link {
        transition: none;
    }
    .about-page-toc__link:hover,
    .about-page-toc__link:focus-visible {
        transform: none;
    }
}

/* Desktop: denser about-to-panel rhythm without crushing mobile touch space */
@media (min-width: 1024px) {
    .about-section .about-panel {
        padding-block: 1.65rem;
    }
}

.about-panel {
    position: relative;
    isolation: isolate;
}
.about-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(239,68,68,0.45), rgba(234,179,8,0.35), rgba(249,115,22,0.4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.35s ease;
}
.about-panel:hover::before {
    opacity: 1;
}
.about-chip {
    user-select: none;
}
.about-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.25);
}

/* What We Do ? service include chips */
.about-services {
    --svc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.about-services__label {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}
.about-services__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.about-svc-chip {
    --svc-accent: #ef4444;
    --svc-soft: rgba(239, 68, 68, 0.12);
    --svc-glow: rgba(239, 68, 68, 0.32);
    --svc-ink: #334155;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.78) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 6px 16px -12px rgba(15, 23, 42, 0.18);
    color: var(--svc-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: default;
    user-select: none;
    transition:
        transform 0.28s var(--svc-ease),
        background 0.28s var(--svc-ease),
        border-color 0.28s var(--svc-ease),
        color 0.28s var(--svc-ease),
        box-shadow 0.28s var(--svc-ease);
}
a.about-svc-chip {
    cursor: pointer;
}
.about-svc-chip::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 22px -4px var(--svc-glow);
    transition: opacity 0.28s var(--svc-ease);
}
.about-svc-chip__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: var(--svc-accent);
    box-shadow: 0 0 0 3px var(--svc-soft);
    transition: transform 0.28s var(--svc-ease), box-shadow 0.28s var(--svc-ease);
}
.about-svc-chip__text {
    min-width: 0;
}
.about-svc-chip:hover,
.about-svc-chip:focus-visible {
    transform: translateY(-3px) scale(1.02);
    color: #fff;
    background: var(--svc-accent);
    border-color: transparent;
    box-shadow:
        0 14px 28px -12px var(--svc-glow),
        0 4px 10px -6px rgba(15, 23, 42, 0.2);
}
.about-svc-chip:hover::after,
.about-svc-chip:focus-visible::after {
    opacity: 1;
}
.about-svc-chip:hover .about-svc-chip__dot,
.about-svc-chip:focus-visible .about-svc-chip__dot {
    background: #fff;
    transform: scale(1.25);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.about-svc-chip:focus-visible {
    outline: 2px solid var(--svc-accent);
    outline-offset: 2px;
}

.about-svc-chip--ocean {
    --svc-accent: #ef4444;
    --svc-soft: rgba(239, 68, 68, 0.14);
    --svc-glow: rgba(239, 68, 68, 0.38);
}
.about-svc-chip--brand {
    --svc-accent: #ca8a04;
    --svc-soft: rgba(234, 179, 8, 0.16);
    --svc-glow: rgba(234, 179, 8, 0.42);
}
.about-svc-chip--brand:hover,
.about-svc-chip--brand:focus-visible {
    color: #1c1917;
}
.about-svc-chip--brand:hover .about-svc-chip__dot,
.about-svc-chip--brand:focus-visible .about-svc-chip__dot {
    background: #1c1917;
    box-shadow: 0 0 0 4px rgba(28, 25, 23, 0.12);
}
.about-svc-chip--signal {
    --svc-accent: #ea580c;
    --svc-soft: rgba(249, 115, 22, 0.14);
    --svc-glow: rgba(249, 115, 22, 0.38);
}
.about-svc-chip--crimson {
    --svc-accent: #b91c1c;
    --svc-soft: rgba(185, 28, 28, 0.12);
    --svc-glow: rgba(185, 28, 28, 0.36);
}
.about-svc-chip--amber {
    --svc-accent: #d97706;
    --svc-soft: rgba(217, 119, 6, 0.14);
    --svc-glow: rgba(217, 119, 6, 0.4);
}
.about-svc-chip--amber:hover,
.about-svc-chip--amber:focus-visible {
    color: #1c1917;
}
.about-svc-chip--amber:hover .about-svc-chip__dot,
.about-svc-chip--amber:focus-visible .about-svc-chip__dot {
    background: #1c1917;
    box-shadow: 0 0 0 4px rgba(28, 25, 23, 0.12);
}
.about-svc-chip--copper {
    --svc-accent: #c2410c;
    --svc-soft: rgba(194, 65, 12, 0.12);
    --svc-glow: rgba(194, 65, 12, 0.36);
}

@media (max-width: 640px) {
    .about-services__grid {
        gap: 0.4rem;
    }
    .about-svc-chip {
        padding: 0.45rem 0.7rem;
        font-size: 0.75rem;
        border-radius: 0.75rem;
    }
}

.about-feature {
    backdrop-filter: blur(8px);
}

.about-quote-col {
    scroll-margin-top: 6.5rem;
}
.about-quote {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 1.35rem;
    padding: 0.95rem;
    background:
        linear-gradient(165deg, rgba(15, 23, 42, 0.72) 0%, rgba(12, 25, 41, 0.78) 42%, rgba(30, 10, 12, 0.74) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 22px 48px -28px rgba(15, 23, 42, 0.5),
        0 12px 28px -20px rgba(239, 68, 68, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.about-quote--compact {
    display: grid;
    gap: 0.85rem;
}
@media (min-width: 640px) {
    .about-quote {
        padding: 1.05rem 1.1rem;
    }
}
@media (min-width: 1024px) {
    .about-quote--compact {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 1rem 1.15rem;
        align-items: stretch;
        padding: 1.05rem 1.1rem;
    }
}
.about-quote::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.45), rgba(234, 179, 8, 0.24), rgba(249, 115, 22, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
}
.about-quote__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
.about-quote__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(42px);
    opacity: 0.45;
}
.about-quote__orb--brand {
    width: 10rem;
    height: 10rem;
    top: -3rem;
    right: -2rem;
    background: rgba(234, 179, 8, 0.32);
}
.about-quote__orb--ocean {
    width: 11rem;
    height: 11rem;
    bottom: -3.5rem;
    left: -3rem;
    background: rgba(239, 68, 68, 0.26);
}
.about-quote__orb--signal {
    width: 7.5rem;
    height: 7.5rem;
    top: 42%;
    left: 38%;
    background: rgba(249, 115, 22, 0.18);
}
.about-quote__intro {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-quote__lead {
    margin-bottom: 0.65rem !important;
    max-width: 28rem;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    color: rgba(226, 232, 240, 0.86);
}
.about-quote__perks {
    margin-top: 0.55rem !important;
    margin-bottom: 0 !important;
    gap: 0.45rem 0.85rem !important;
}
.about-quote .quote-chips {
    margin-top: 0.55rem;
    margin-bottom: 0;
    gap: 0.45rem;
}
.about-quote .quote-form-shell {
    position: relative;
    z-index: 1;
    margin-top: 0;
}
.about-quote .quote-form-card {
    padding: 0.95rem 0.95rem 1rem;
    border-radius: 1.1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 251, 235, 0.92) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 14px 32px -22px rgba(15, 23, 42, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@media (min-width: 640px) {
    .about-quote .quote-form-card {
        padding: 1.05rem 1.15rem 1.1rem;
    }
}
.about-quote .quote-form-head {
    margin-bottom: 0.55rem;
}
.about-quote .quote-progress {
    margin-bottom: 0.7rem;
    padding: 0.45rem 0.65rem;
}
.about-quote .quote-submit {
    margin-top: 0.75rem;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
}
.about-quote .quote-form-footer {
    margin-top: 0.65rem;
    gap: 0.45rem 0.85rem;
}
.about-quote .quote-perk {
    font-size: 0.78rem;
}
.about-quote .quote-perk__icon {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.45rem;
}
.about-quote .quote-chip__link {
    padding: 0.35rem 0.2rem 0.35rem 0.4rem;
    font-size: 0.78rem;
    gap: 0.45rem;
}
.about-quote .quote-chip__icon {
    width: 1.55rem;
    height: 1.55rem;
}
.about-quote .quote-chip__copy {
    width: 1.85rem;
    margin: 0.15rem 0.18rem 0.15rem 0;
}
.about-quote .field-input {
    height: 2.85rem;
    padding: 1.05rem 0.85rem 0.35rem 2.45rem;
}
.about-quote .field-icon {
    left: 0.75rem;
}
.about-quote .field-label {
    left: 2.45rem;
    font-size: 0.8rem;
}
.about-quote .quote-textarea {
    min-height: 3.25rem;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}

@media (min-width: 1024px) {
    .about-copy {
        position: sticky;
        top: 6.5rem;
    }
}
.about-feature:hover {
    backdrop-filter: blur(12px);
}
@media (prefers-reduced-motion: reduce) {
    .about-chip,
    .about-svc-chip,
    .about-feature,
    .about-feature .w-11 {
        transition: none !important;
        transform: none !important;
    }
}

/* Floating-label form fields */
.field-group {
    position: relative;
}
.field-input {
    height: 3.25rem;
    padding: 1.25rem 1rem 0.4rem 2.75rem;
}
.field-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #94a3b8;
    transition: color 0.25s ease, transform 0.25s ease;
}
.field-label {
    position: absolute;
    left: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    line-height: 1.25;
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}
.field-input:focus ~ .field-label,
.field-input:not(:placeholder-shown) ~ .field-label {
    top: 0.55rem;
    transform: translateY(0);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #dc2626;
}
.field-input:focus ~ .field-icon,
.field-group:has(.field-input:not(:placeholder-shown)) .field-icon {
    color: #dc2626;
}
.field-group:hover .field-input:not(:focus) {
    border-color: #fdba74;
    background-color: #fff;
}
.field-group:hover .field-icon {
    color: #f97316;
}

/* ============================================
   Quote section ? premium request form
   ============================================ */
.quote-section {
    isolation: isolate;
}
.quote-section--compact {
    scroll-margin-top: 5.5rem;
}
.quote-heading {
    margin: 0.45rem 0 0.5rem;
    font-size: clamp(1.35rem, 1.6vw + 0.85rem, 1.85rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: #f8fafc;
}
.quote-mesh {
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(239, 68, 68, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 85% 15%, rgba(234, 179, 8, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 45% 40% at 70% 85%, rgba(249, 115, 22, 0.16) 0%, transparent 50%),
        linear-gradient(160deg, #0f172a 0%, #1c1917 45%, #450a0a 100%);
    opacity: 1;
}
.quote-grid-lines {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.quote-orb--brand {
    background: rgba(234, 179, 8, 0.18);
    animation: quoteOrbFloat 12s ease-in-out infinite;
}
.quote-orb--ocean {
    background: rgba(239, 68, 68, 0.2);
    animation: quoteOrbFloat 14s ease-in-out infinite reverse;
}
.quote-orb--signal {
    background: rgba(249, 115, 22, 0.14);
    animation: quoteOrbFloat 10s ease-in-out infinite;
    animation-delay: -4s;
}
@keyframes quoteOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(12px, -18px) scale(1.06); }
}

.quote-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.quote-heading-accent {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.quote-lead {
    color: #cbd5e1;
    line-height: 1.55;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    max-width: 28rem;
}

/* Contact chips + copy */
.quote-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.quote-chip {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quote-chip__link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.35rem 0.55rem 0.55rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f8fafc;
    text-decoration: none;
}
.quote-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.quote-chip--signal .quote-chip__icon {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
}
.quote-chip--ocean .quote-chip__icon {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
.quote-chip__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    margin: 0.2rem 0.25rem 0.2rem 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.quote-chip__copy:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.quote-chip__copy:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}
.quote-chip__copy.is-copied {
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
}
.quote-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.45);
}
.quote-chip--signal:hover {
    border-color: rgba(249, 115, 22, 0.55);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(234, 179, 8, 0.18));
}
.quote-chip--ocean:hover {
    border-color: rgba(239, 68, 68, 0.55);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(249, 115, 22, 0.16));
}
.quote-chip:hover .quote-chip__icon {
    transform: scale(1.08);
}
.quote-chip--signal:hover .quote-chip__icon {
    background: #f97316;
    color: #fff;
}
.quote-chip--ocean:hover .quote-chip__icon {
    background: #ef4444;
    color: #fff;
}
.quote-chip__link:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: -2px;
}

.quote-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.quote-perk {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    color: #94a3b8;
}
.quote-perk__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.55rem;
    flex-shrink: 0;
}
.quote-perk__icon--brand {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
}
.quote-perk__icon--signal {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
}

/* Form glass shell */
.quote-form-shell {
    position: relative;
    border-radius: 1.2rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.55), rgba(234, 179, 8, 0.42), rgba(249, 115, 22, 0.4));
    box-shadow:
        0 18px 40px -22px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.quote-form-shell:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 46px -18px rgba(239, 68, 68, 0.28),
        0 0 28px -12px rgba(234, 179, 8, 0.16);
}
.quote-form-card {
    position: relative;
    border-radius: calc(1.2rem - 1px);
    padding: 1.15rem 1.05rem 1.2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, #fff 42%, #fffbeb 100%);
    backdrop-filter: blur(14px);
    overflow: hidden;
}
@media (min-width: 640px) {
    .quote-form-card {
        padding: 1.25rem 1.35rem 1.3rem;
    }
}

.quote-form-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.quote-form-head__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.quote-form-hint {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}
.quote-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c2410c;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid #fed7aa;
    padding: 0.3rem 0.65rem;
    border-radius: 0.55rem;
}

/* Progress */
.quote-progress {
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.55), rgba(255, 247, 237, 0.7));
    border: 1px solid rgba(253, 186, 116, 0.35);
}
.quote-progress__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}
.quote-progress__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #78716c;
}
.quote-progress__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b45309;
    font-variant-numeric: tabular-nums;
}
.quote-progress__track {
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}
.quote-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #dc2626, #ea580c, #ca8a04);
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.45);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.quote-progress.is-complete .quote-progress__count {
    color: #15803d;
}
.quote-progress.is-complete .quote-progress__fill {
    background: linear-gradient(90deg, #16a34a, #ca8a04);
}

.quote-field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}
.quote-field-label__accent {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #eab308);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.quote-field-label__accent--signal {
    background: linear-gradient(135deg, #f97316, #eab308);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* Field validation states */
.quote-field {
    position: relative;
}
.quote-field__error {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: #dc2626;
    min-height: 0;
}
.quote-field__status {
    position: absolute;
    right: 0.85rem;
    top: 1.05rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    background-size: 0.65rem;
    background-repeat: no-repeat;
    background-position: center;
}
.quote-field__status--select {
    top: 2.4rem;
    right: 2.6rem;
    z-index: 2;
}
.quote-field.is-valid .quote-field__status {
    opacity: 1;
    transform: scale(1);
    background-color: #dcfce7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.quote-field.is-invalid .quote-field__status {
    opacity: 1;
    transform: scale(1);
    background-color: #fee2e2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23dc2626'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E");
}
.quote-field.is-invalid .field-input,
.quote-field.is-invalid .quote-combo__trigger {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.quote-field.is-valid .field-input,
.quote-field.is-valid .quote-combo__trigger {
    border-color: #86efac !important;
}
.quote-field.is-valid .field-input:focus,
.quote-field.is-valid .quote-combo__trigger:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}
.quote-form-card .field-input {
    padding-right: 2.5rem;
}
.quote-form-card .field-input:focus,
.quote-form-card .form-input:focus,
.quote-textarea:focus {
    border-color: #dc2626;
    background-color: #fff;
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.14),
        0 0 24px -6px rgba(234, 179, 8, 0.35);
}

/* Searchable custom select */
.quote-combo {
    position: relative;
}
.quote-combo .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.quote-combo__trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.85rem 2.75rem 0.85rem 2.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: rgba(248, 250, 252, 0.6);
    font-size: 0.875rem;
    color: #1e293b;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.quote-combo__trigger:hover {
    border-color: #fdba74;
    background: #fff;
}
.quote-combo__trigger:focus {
    outline: none;
    border-color: #dc2626;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.14),
        0 0 24px -6px rgba(234, 179, 8, 0.35);
}
.quote-combo__lead,
.quote-combo__chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #94a3b8;
    transition: color 0.25s ease, transform 0.25s ease;
}
.quote-combo__lead { left: 0.9rem; }
.quote-combo__chevron { right: 0.9rem; }
.quote-combo.is-open .quote-combo__chevron {
    transform: translateY(-50%) rotate(180deg);
    color: #dc2626;
}
.quote-combo.is-open .quote-combo__lead,
.quote-combo__trigger:hover .quote-combo__lead {
    color: #f97316;
}
.quote-combo.is-open .quote-combo__trigger {
    border-color: #dc2626;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.quote-combo__value {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quote-combo__value.is-placeholder {
    color: #94a3b8;
}
.quote-combo__panel {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    border-radius: 0.9rem;
    border: 1px solid #fed7aa;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    animation: quoteComboIn 0.2s ease;
}
@keyframes quoteComboIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.quote-combo__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    color: #94a3b8;
}
.quote-combo__search-input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: #1e293b;
}
.quote-combo__list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    max-height: 12.5rem;
    overflow-y: auto;
}
.quote-combo__option {
    padding: 0.65rem 0.75rem;
    border-radius: 0.55rem;
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.quote-combo__option:hover,
.quote-combo__option.is-active {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    color: #9a3412;
}
.quote-combo__option[aria-selected="true"] {
    background: linear-gradient(135deg, #fee2e2, #ffedd5);
    color: #b91c1c;
    font-weight: 600;
}
.quote-combo__empty {
    padding: 0.85rem;
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
}

.quote-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}
.quote-info-head .quote-field-label {
    margin-bottom: 0;
}
.quote-char-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.quote-char-count.is-near {
    color: #ea580c;
}
.quote-char-count.is-max {
    color: #dc2626;
}

.quote-textarea {
    min-height: 6.5rem;
}
.quote-textarea:hover {
    border-color: #fdba74;
    background-color: #fff;
}
.quote-textarea:focus {
    background-color: #fff;
}

.quote-submit {
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #ca8a04 100%);
    background-size: 200% 200%;
    box-shadow: 0 12px 28px -10px rgba(220, 38, 38, 0.45);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.quote-submit:hover:not(:disabled) {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(234, 179, 8, 0.45), 0 10px 24px -10px rgba(220, 38, 38, 0.4);
}
.quote-submit:active:not(:disabled) {
    transform: translateY(0);
}
.quote-submit .btn-icon {
    transition: transform 0.3s ease;
}
.quote-submit:hover:not(:disabled) .btn-icon {
    transform: translateX(4px);
}
.quote-submit .btn-spinner {
    display: none;
}
.quote-submit.is-loading .btn-icon {
    display: none;
}
.quote-submit.is-loading .btn-spinner {
    display: inline-block;
}

.quote-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.15rem;
}
.quote-form-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

#quote-message:not(.hidden) {
    animation: quoteMsgIn 0.35s ease;
}
#quote-message.quote-msg--error {
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
#quote-message.quote-msg--ok {
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
@keyframes quoteMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Success overlay */
.quote-success {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fffbeb);
    border-radius: inherit;
    animation: quoteMsgIn 0.4s ease;
}
.quote-success[hidden] {
    display: none !important;
}
.quote-success__check {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
}
.quote-success__check svg {
    width: 100%;
    height: 100%;
}
.quote-success__circle {
    stroke: #16a34a;
    stroke-width: 2.5;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: quoteCircle 0.6s ease forwards;
}
.quote-success__tick {
    stroke: #16a34a;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: quoteTick 0.35s 0.45s ease forwards;
}
@keyframes quoteCircle {
    to { stroke-dashoffset: 0; }
}
@keyframes quoteTick {
    to { stroke-dashoffset: 0; }
}
.quote-success__title {
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    color: #14532d;
    margin: 0 0 0.4rem;
}
.quote-success__body {
    margin: 0 0 1.25rem;
    max-width: 18rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #57534e;
}
.quote-success__again {
    border: 1px solid #fed7aa;
    background: #fff;
    color: #c2410c;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.quote-success__again:hover {
    background: #fff7ed;
    transform: translateY(-1px);
}
.quote-success__confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.quote-success__confetti span {
    position: absolute;
    top: -8%;
    width: 0.45rem;
    height: 0.7rem;
    border-radius: 2px;
    opacity: 0;
    animation: quoteConfetti 1.4s ease-out forwards;
}
.quote-success__confetti span:nth-child(1) { left: 12%; background: #ef4444; animation-delay: 0.05s; }
.quote-success__confetti span:nth-child(2) { left: 24%; background: #eab308; animation-delay: 0.12s; width: 0.35rem; height: 0.55rem; }
.quote-success__confetti span:nth-child(3) { left: 38%; background: #f97316; animation-delay: 0.08s; }
.quote-success__confetti span:nth-child(4) { left: 50%; background: #dc2626; animation-delay: 0.18s; width: 0.4rem; }
.quote-success__confetti span:nth-child(5) { left: 62%; background: #ca8a04; animation-delay: 0.1s; }
.quote-success__confetti span:nth-child(6) { left: 74%; background: #fb923c; animation-delay: 0.22s; width: 0.3rem; height: 0.5rem; }
.quote-success__confetti span:nth-child(7) { left: 84%; background: #fbbf24; animation-delay: 0.15s; }
.quote-success__confetti span:nth-child(8) { left: 92%; background: #ef4444; animation-delay: 0.28s; width: 0.35rem; }
@keyframes quoteConfetti {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translateY(120%) rotate(220deg); }
}

.quote-form-card.is-success .quote-form-head,
.quote-form-card.is-success .quote-progress,
.quote-form-card.is-success .quote-fields,
.quote-form-card.is-success .quote-submit,
.quote-form-card.is-success .quote-form-footer,
.quote-form-card.is-success #quote-message {
    visibility: hidden;
    pointer-events: none;
}

/* Copy toast */
.quote-copy-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 80;
    transform: translateX(-50%) translateY(0.5rem);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #1c1917;
    border: 1px solid rgba(234, 179, 8, 0.45);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.quote-copy-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.quote-copy-toast[hidden] {
    display: block !important;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .quote-orb--brand,
    .quote-orb--ocean,
    .quote-orb--signal,
    .quote-form-shell,
    .quote-chip,
    .quote-progress__fill,
    .quote-combo__panel,
    #quote-message:not(.hidden),
    .quote-success,
    .quote-success__circle,
    .quote-success__tick,
    .quote-success__confetti span,
    .quote-copy-toast {
        animation: none !important;
        transition: none !important;
    }
    .quote-success__circle,
    .quote-success__tick {
        stroke-dashoffset: 0;
    }
    .quote-success__confetti span {
        opacity: 0;
    }
    .quote-form-shell:hover,
    .quote-chip:hover {
        transform: none;
    }
}

/* Process step icon connector line (mobile-safe, direction-agnostic) */
.step-line {
    background: repeating-linear-gradient(to bottom, rgba(249,115,22,0.5) 0 6px, transparent 6px 14px);
}

/* Preloader ? modern logo loader (red / yellow / black) */
.preloader,
#preloader.preloader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050507;
    overflow: hidden;
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease;
}
.preloader.is-hidden,
#preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.04);
    filter: blur(8px);
}

.preloader__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(220, 38, 38, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(234, 179, 8, 0.12) 0%, transparent 50%),
        #050507;
}
.preloader__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.5;
    animation: preloaderOrb 6.5s ease-in-out infinite;
}
.preloader__orb--red {
    width: 20rem;
    height: 20rem;
    top: -5rem;
    left: -3rem;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.7) 0%, transparent 68%);
}
.preloader__orb--yellow {
    width: 18rem;
    height: 18rem;
    right: -4rem;
    top: 40%;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.55) 0%, transparent 68%);
    animation-delay: -2s;
}
.preloader__orb--black {
    width: 16rem;
    height: 16rem;
    bottom: -4rem;
    left: 35%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, transparent 70%);
    opacity: 0.85;
    animation-delay: -3.5s;
}
.preloader__scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(234, 179, 8, 0.06) 48%,
        rgba(220, 38, 38, 0.08) 52%,
        transparent 100%
    );
    background-size: 100% 220%;
    animation: preloaderScan 2.8s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

.preloader__stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    text-align: center;
}

.preloader__loader {
    position: relative;
    width: 9.25rem;
    height: 9.25rem;
    display: grid;
    place-items: center;
}
.preloader__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.preloader__track {
    stroke: rgba(255, 255, 255, 0.08);
}
.preloader__progress {
    transition: stroke-dashoffset 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.preloader__dash {
    stroke: rgba(234, 179, 8, 0.35);
    stroke-dasharray: 3 7;
    animation: preloaderSpin 8s linear infinite;
    transform-origin: 60px 60px;
}

.preloader__core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 5.75rem;
    height: 5.75rem;
}
.preloader__logo {
    box-shadow:
        0 0 0 2px rgba(234, 179, 8, 0.35),
        0 0 0 5px rgba(220, 38, 38, 0.18),
        0 10px 32px rgba(0, 0, 0, 0.55);
    animation: preloaderBreath 2.2s ease-in-out infinite;
}
.preloader__pct {
    position: absolute;
    bottom: -0.15rem;
    right: -0.35rem;
    min-width: 2.1rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #050507;
    background: linear-gradient(135deg, #eab308 0%, #facc15 50%, #dc2626 100%);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.preloader__pct::after {
    content: '%';
    font-size: 0.55rem;
    margin-left: 1px;
    font-weight: 700;
}

.preloader__brand {
    margin: 0.15rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    line-height: 1;
}
.preloader__word {
    display: inline-flex;
}
.preloader__word span {
    display: inline-block;
    font-weight: 800;
    opacity: 0;
    transform: translateY(0.55em) scale(0.92);
    animation: preloaderLetter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.preloader__word--danix span {
    font-size: clamp(2rem, 5.5vw, 2.85rem);
    letter-spacing: -0.045em;
    color: #dc2626;
    text-shadow:
        0 0 24px rgba(220, 38, 38, 0.45),
        0 2px 0 #7f1d1d;
}
.preloader__word--danix span:nth-child(even) {
    color: #ef4444;
}
.preloader__word--signs span {
    font-size: clamp(2rem, 5.5vw, 2.85rem);
    letter-spacing: -0.04em;
    color: #eab308;
    text-shadow:
        0 0 24px rgba(234, 179, 8, 0.4),
        0 2px 0 #854d0e;
}
.preloader__word--signs span:nth-child(odd) {
    color: #facc15;
}
.preloader__word--limited {
    flex-basis: 100%;
    width: auto;
    justify-content: center;
    margin-top: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #eab308;
    box-shadow:
        0 0 0 2px #000,
        0 0 0 4px #dc2626,
        0 8px 22px rgba(220, 38, 38, 0.25);
}
.preloader__word--limited span {
    font-size: clamp(0.68rem, 1.5vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #000;
    -webkit-text-fill-color: #000;
    background: none;
    filter: none;
    -webkit-text-stroke: 0;
}
.preloader__word--danix span:nth-child(1) { animation-delay: 0.05s; }
.preloader__word--danix span:nth-child(2) { animation-delay: 0.09s; }
.preloader__word--danix span:nth-child(3) { animation-delay: 0.13s; }
.preloader__word--danix span:nth-child(4) { animation-delay: 0.17s; }
.preloader__word--danix span:nth-child(5) { animation-delay: 0.21s; }
.preloader__word--signs span:nth-child(1) { animation-delay: 0.28s; }
.preloader__word--signs span:nth-child(2) { animation-delay: 0.32s; }
.preloader__word--signs span:nth-child(3) { animation-delay: 0.36s; }
.preloader__word--signs span:nth-child(4) { animation-delay: 0.4s; }
.preloader__word--signs span:nth-child(5) { animation-delay: 0.44s; }
.preloader__word--limited span:nth-child(1) { animation-delay: 0.52s; }
.preloader__word--limited span:nth-child(2) { animation-delay: 0.56s; }
.preloader__word--limited span:nth-child(3) { animation-delay: 0.6s; }
.preloader__word--limited span:nth-child(4) { animation-delay: 0.64s; }
.preloader__word--limited span:nth-child(5) { animation-delay: 0.68s; }
.preloader__word--limited span:nth-child(6) { animation-delay: 0.72s; }
.preloader__word--limited span:nth-child(7) { animation-delay: 0.76s; }

.preloader__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.15rem;
}
.preloader__status {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250, 204, 21, 0.75);
    min-width: 11ch;
    text-align: left;
}
.preloader__pulse {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
    animation: preloaderPulseDot 1.4s ease-out infinite;
}

@keyframes preloaderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes preloaderOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(14px, -12px) scale(1.08); }
}
@keyframes preloaderScan {
    from { background-position: 0 -100%; }
    to { background-position: 0 200%; }
}
@keyframes preloaderBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
@keyframes preloaderLetter {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes preloaderPulseDot {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .preloader__orb,
    .preloader__scan,
    .preloader__dash,
    .preloader__logo,
    .preloader__pulse,
    .preloader__word span {
        animation: none !important;
    }
    .preloader__word span {
        opacity: 1;
        transform: none;
    }
    .preloader__word--limited span {
        -webkit-text-fill-color: #000;
        color: #000;
        background: none;
    }
}

/* Hero SEO H1 ? colored phrases, stagger, shimmer, underline */
.hero-headline {
    position: relative;
    display: block;
    max-width: 100%;
    font-size: clamp(1.7rem, 2.2vw + 1rem, 3.75rem);
    line-height: 1.15;
    text-wrap: balance;
}
.hero-headline__phrase,
.hero-headline__sep {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.25s ease,
        filter 0.25s ease;
    transition-delay: calc(var(--w, 0) * 0.08s + 0.12s);
    will-change: transform, opacity;
}
.reveal.visible .hero-headline__phrase,
.reveal.visible .hero-headline__sep {
    opacity: 1;
    transform: translateY(0);
}
.reveal.visible .hero-headline__phrase:hover {
    transform: translateY(-0.12em);
    transition-delay: 0s;
}

/* Phrase palette ? ocean / brand / signal / slate */
.hero-headline__phrase--ocean {
    color: #dc2626;
}
.reveal.visible .hero-headline__phrase--ocean:hover {
    color: #ef4444;
    filter: drop-shadow(0 6px 14px rgba(239, 68, 68, 0.28));
}
.hero-headline__phrase--brand {
    color: #ca8a04;
}
.reveal.visible .hero-headline__phrase--brand:hover {
    color: #eab308;
    filter: drop-shadow(0 6px 14px rgba(234, 179, 8, 0.32));
}
.hero-headline__phrase--slate {
    color: #1e293b;
}
.reveal.visible .hero-headline__phrase--slate:hover {
    color: #0f172a;
}
.hero-headline__phrase--signal {
    color: #ea580c;
}
.reveal.visible .hero-headline__phrase--signal:hover {
    color: #f97316;
    filter: drop-shadow(0 6px 14px rgba(249, 115, 22, 0.28));
}
.hero-headline__sep {
    color: #94a3b8;
    font-weight: 500;
    margin-inline: 0.12em;
    user-select: none;
}

/* Key phrase: 3D LED ? signal gradient + soft shimmer */
.hero-headline__phrase--shimmer {
    background-image: linear-gradient(
        105deg,
        #ea580c 0%,
        #f97316 18%,
        #eab308 40%,
        #ef4444 58%,
        #fb923c 78%,
        #facc15 100%
    );
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.16));
}
.reveal.visible .hero-headline__phrase--shimmer {
    animation: heroHeadlineShimmer 4s ease-in-out infinite;
    animation-delay: 1s;
}
.reveal.visible .hero-headline__phrase--shimmer:hover {
    transform: translateY(-0.12em) scale(1.03);
    filter: drop-shadow(0 0 20px rgba(234, 179, 8, 0.35));
    transition-delay: 0s;
}
@keyframes heroHeadlineShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Soft centered underline accent */
.hero-headline__underline {
    display: block;
    margin: 0.85rem 0 0;
    width: min(10.5rem, 48%);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #ef4444 0%,
        #eab308 50%,
        #f97316 100%
    );
    box-shadow:
        0 0 14px rgba(234, 179, 8, 0.3),
        0 0 8px rgba(239, 68, 68, 0.18);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
        opacity 0.45s ease 0.55s,
        width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible .hero-headline__underline {
    transform: scaleX(1);
    opacity: 1;
}
.hero-headline:hover .hero-headline__underline {
    width: min(14rem, 62%);
}

/* Hero copy on photo backgrounds */
.hero-headline--on-media {
    color: #fff;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.hero-headline--on-media .hero-headline__phrase--light {
    color: #f8fafc;
}
.hero-headline--on-media .hero-headline__phrase--brand {
    color: #facc15;
}
.reveal.visible .hero-headline--on-media .hero-headline__phrase--brand:hover {
    color: #fde047;
    filter: drop-shadow(0 6px 14px rgba(250, 204, 21, 0.4));
}
.hero-headline--on-media .hero-headline__sep {
    color: rgba(248, 250, 252, 0.45);
}

@media (max-width: 639px) {
    .hero-headline {
        letter-spacing: -0.02em;
    }
    .hero-headline__underline {
        width: min(8rem, 56%);
        margin-top: 0.7rem;
    }
    .hero-headline:hover .hero-headline__underline {
        width: min(10rem, 68%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-headline__phrase,
    .hero-headline__sep {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
        animation: none !important;
    }
    .reveal.visible .hero-headline__phrase:hover,
    .reveal.visible .hero-headline__phrase--shimmer:hover {
        transform: none;
        filter: none;
    }
    .hero-headline__phrase--shimmer,
    .reveal.visible .hero-headline__phrase--shimmer {
        animation: none !important;
        background-position: 40% 50%;
        filter: none;
    }
    .hero-headline__underline {
        transform: scaleX(1);
        opacity: 1;
        transition: none;
    }
    .hero-headline:hover .hero-headline__underline {
        width: min(10.5rem, 48%);
    }
}

/* Hero Image Slider + Ken Burns */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.35s ease-in-out;
    z-index: 0;
    overflow: hidden;
}
.hero-slide.active {
    opacity: 1;
    z-index: 1;
}
.hero-slide__media {
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
    will-change: transform;
}
.hero-slide.active .hero-slide__media {
    animation: heroKenBurns 8s ease-out forwards;
}
@keyframes heroKenBurns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to { transform: scale(1.12) translate3d(-1.2%, -0.6%, 0); }
}

/* Hero slider dots */
.hero-dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: width 0.35s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.hero-dot.active {
    width: 1.75rem;
    background: linear-gradient(135deg, #ef4444, #eab308);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}
.hero-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.65);
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide.active .hero-slide__media {
        animation: none;
        transform: scale(1.04);
    }
    .hero-cta--primary:hover,
    .hero-cta--ghost:hover {
        transform: none;
    }
}

/* ============================================
   Danix AI Chat Widget ? classic + modern
   ============================================ */

.ai-assistant {
    --ai-ocean: #ef4444;
    --ai-brand: #eab308;
    --ai-signal: #f97316;
    --ai-ink: #0b1220;
    --ai-panel: rgba(11, 18, 32, 0.94);
    --ai-panel-mid: rgba(28, 14, 16, 0.96);
    --ai-border: rgba(255, 255, 255, 0.1);
    --ai-muted: rgba(255, 255, 255, 0.48);
    --ai-soft: rgba(255, 255, 255, 0.06);
    font-family: inherit;
}

/* ---- Toggle button ---- */
.ai-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    background: transparent;
    color: #fff;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}
.ai-toggle-btn:hover {
    transform: scale(1.06);
}
.ai-toggle-btn:active {
    transform: scale(0.96);
}
.ai-toggle-btn__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(145deg, var(--ai-ocean), var(--ai-signal) 45%, var(--ai-brand));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.95;
    box-shadow:
        0 12px 32px -8px rgba(239, 68, 68, 0.45),
        0 4px 12px rgba(15, 23, 42, 0.35);
    pointer-events: none;
}
.ai-toggle-btn__face {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: inherit;
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 55%, #1a0f12 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ai-toggle-btn:hover .ai-toggle-btn__face {
    background: linear-gradient(160deg, #243044 0%, #111827 55%, #221016 100%);
}
.ai-toggle-btn__pulse {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    z-index: 2;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    background: #4ade80;
    border: 2px solid #0f172a;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
    animation: aiOnlinePulse 2.4s ease-out infinite;
}
.site-logo--toggle {
    width: 2.55rem;
    height: 2.55rem;
    padding: 0.28rem;
    border: none;
    box-shadow: none;
    background: #fff;
}

@keyframes aiOnlinePulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ---- Panel shell ---- */
.ai-panel {
    position: fixed;
    bottom: 5.75rem;
    right: 1.25rem;
    left: 1.25rem;
    width: auto;
    max-width: 26.25rem;
    height: min(70vh, 36rem);
    max-height: calc(100dvh - 7.5rem);
    margin-left: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid var(--ai-border);
    background:
        linear-gradient(165deg, var(--ai-panel) 0%, var(--ai-panel-mid) 48%, var(--ai-panel) 100%);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    color: #fff;
    transform-origin: bottom right;
    animation: aiPanelIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ai-panel.hidden {
    display: none;
    animation: none;
}
.ai-panel-glass {
    box-shadow:
        0 28px 64px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 72px -28px rgba(239, 68, 68, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (min-width: 640px) {
    .ai-panel {
        position: absolute;
        left: auto;
        right: 0;
        bottom: 5rem;
        width: 26.25rem;
        max-width: calc(100vw - 3rem);
        height: min(72vh, 38rem);
    }
}

@keyframes aiPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-panel__glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.ai-panel__orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(48px);
    opacity: 0.55;
}
.ai-panel__orb--ocean {
    top: -4rem;
    right: -3rem;
    width: 10rem;
    height: 10rem;
    background: rgba(239, 68, 68, 0.18);
}
.ai-panel__orb--brand {
    bottom: -3rem;
    left: -2.5rem;
    width: 9rem;
    height: 9rem;
    background: rgba(234, 179, 8, 0.12);
}
.ai-panel__orb--signal {
    top: 42%;
    left: 50%;
    width: 12rem;
    height: 12rem;
    transform: translate(-50%, -50%);
    background: rgba(249, 115, 22, 0.07);
}

/* ---- Header ---- */
.ai-panel__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
    flex-shrink: 0;
}
.ai-panel__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.ai-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.ai-logo {
    box-shadow: 0 6px 18px -6px rgba(239, 68, 68, 0.35);
    border-color: rgba(255, 255, 255, 0.55);
}
.ai-status-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    background: #4ade80;
    border: 2px solid #0f172a;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
    animation: aiOnlinePulse 2.4s ease-out infinite;
}
.ai-panel__titles {
    min-width: 0;
}
.ai-panel__name {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.2;
}
.ai-panel__status {
    margin: 0.15rem 0 0;
    font-size: 0.6875rem;
    color: var(--ai-muted);
    letter-spacing: 0.01em;
}
.ai-online-label {
    color: #86efac;
    font-weight: 600;
}
.ai-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.ai-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* ---- Messages ---- */
.ai-messages {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    scroll-behavior: smooth;
}
.ai-messages::-webkit-scrollbar { width: 4px; }
.ai-messages::-webkit-scrollbar-track { background: transparent; }
.ai-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
}
.ai-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

.ai-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    animation: aiMsgIn 0.3s ease-out both;
}
.ai-msg--user {
    justify-content: flex-end;
}
.ai-msg-avatar {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.site-logo--msg {
    width: 2rem;
    height: 2rem;
    padding: 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ai-bubble {
    max-width: 85%;
    padding: 0.8rem 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    border-radius: 1.05rem;
}
.ai-bubble--bot {
    border-radius: 1.05rem 1.05rem 1.05rem 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.4);
}
.ai-bubble--bot a {
    color: #fbbf24;
    font-weight: 600;
    text-decoration: none;
}
.ai-bubble--bot a:hover {
    text-decoration: underline;
}
.ai-bubble--bot strong {
    color: #fff;
    font-weight: 650;
}
.ai-bubble--user {
    border-radius: 1.05rem 1.05rem 0.35rem 1.05rem;
    background: linear-gradient(135deg, #dc2626 0%, #c2410c 48%, #ca8a04 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 22px -10px rgba(239, 68, 68, 0.45);
}
.ai-bubble__sub {
    margin: 0.45rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.48);
}
.ai-bubble p {
    margin: 0;
}

@keyframes aiMsgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typing */
.typing-dot {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.35);
    animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.ai-typing-bubble {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 1.05rem;
}

/* ---- Suggestions ---- */
.ai-suggestions {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 0.75rem 1.15rem 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), transparent);
}
.ai-suggestions__label {
    margin: 0 0 0.55rem;
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
}
.ai-suggestions__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ai-quick-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.ai-quick-btn--ocean {
    background: rgba(239, 68, 68, 0.1);
    color: rgba(252, 165, 165, 0.95);
    border-color: rgba(239, 68, 68, 0.22);
}
.ai-quick-btn--brand {
    background: rgba(234, 179, 8, 0.1);
    color: rgba(253, 224, 71, 0.95);
    border-color: rgba(234, 179, 8, 0.22);
}
.ai-quick-btn--signal {
    background: rgba(249, 115, 22, 0.1);
    color: rgba(253, 186, 116, 0.95);
    border-color: rgba(249, 115, 22, 0.22);
}
.ai-quick-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45);
}
.ai-quick-btn--ocean:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}
.ai-quick-btn--brand:hover {
    background: rgba(234, 179, 8, 0.18);
    border-color: rgba(234, 179, 8, 0.35);
}
.ai-quick-btn--signal:hover {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.35);
}
.ai-quick-btn:active {
    transform: scale(0.97);
}

/* ---- Composer ---- */
.ai-composer {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 0.65rem 1.15rem 1rem;
}
.ai-form {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.ai-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.85rem;
    padding: 0 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ai-input::placeholder {
    color: rgba(255, 255, 255, 0.28);
}
.ai-input:focus {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.ai-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    flex-shrink: 0;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(145deg, #ef4444 0%, #ea580c 50%, #ca8a04 100%);
    box-shadow: 0 8px 20px -8px rgba(239, 68, 68, 0.55);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.ai-send-btn:hover {
    transform: translateY(-1px) scale(1.04);
    filter: brightness(1.05);
    box-shadow: 0 12px 26px -10px rgba(239, 68, 68, 0.65);
}
.ai-send-btn:active {
    transform: scale(0.96);
}
.ai-composer__footnote {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.18);
}

/* Safe area / small phones */
@media (max-width: 380px) {
    .ai-assistant {
        right: 0.85rem;
        bottom: 0.85rem;
    }
    .ai-panel {
        left: 0.85rem;
        right: 0.85rem;
        bottom: 5.25rem;
        height: min(68vh, 32rem);
        border-radius: 1.25rem;
    }
    .ai-toggle-btn {
        width: 3.4rem;
        height: 3.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-panel,
    .ai-msg,
    .ai-toggle-btn__pulse,
    .ai-status-dot,
    .typing-dot {
        animation: none !important;
    }
    .ai-toggle-btn,
    .ai-send-btn,
    .ai-quick-btn {
        transition: none;
    }
}

/* ============================================
   Social Sidebar ? left rail, glass + neon hover
   Aligned with right float stack (bottom: 6rem / bottom-24)
   ============================================ */
.social-sidebar {
    --ss-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ss-ocean: #ef4444;
    --ss-brand: #eab308;
    --ss-signal: #f97316;
    position: fixed;
    left: 0;
    right: auto;
    top: auto;
    bottom: 6rem; /* match right contact floats: bottom-24 */
    transform: none;
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* match right float gap-3 */
    padding: 0.85rem 0.65rem;
    border-radius: 0 1.35rem 1.35rem 0;
    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.22) 45%,
            rgba(254, 242, 242, 0.28) 100%
        );
    backdrop-filter: blur(22px) saturate(1.45);
    -webkit-backdrop-filter: blur(22px) saturate(1.45);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 0;
    box-shadow:
        10px 18px 42px -20px rgba(15, 23, 42, 0.28),
        4px 8px 20px -12px rgba(239, 68, 68, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    isolation: isolate;
    overflow: visible;
    animation: socialSlideIn 0.7s var(--ss-ease) both;
    animation-delay: 0.85s;
}
@media (min-width: 768px) {
    .social-sidebar {
        display: flex;
    }
}

.social-sidebar__aura {
    position: absolute;
    inset: -20% -32% -20% -42%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 72% 18%, rgba(239, 68, 68, 0.18), transparent 48%),
        radial-gradient(circle at 38% 82%, rgba(234, 179, 8, 0.14), transparent 52%),
        radial-gradient(circle at 88% 52%, rgba(249, 115, 22, 0.12), transparent 46%);
    filter: blur(12px);
    opacity: 0.85;
    animation: socialAuraPulse 3.6s ease-in-out infinite;
}
.social-sidebar__edge {
    position: absolute;
    top: 14%;
    bottom: 14%;
    right: 0;
    left: auto;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ss-ocean), var(--ss-brand) 50%, var(--ss-signal));
    box-shadow:
        0 0 10px rgba(239, 68, 68, 0.45),
        0 0 18px rgba(234, 179, 8, 0.28);
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}
.social-sidebar__glitter,
.social-sidebar__sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.social-sidebar__glitter {
    background-image:
        radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.95) 0 1.1px, transparent 1.8px),
        radial-gradient(circle at 78% 30%, rgba(234, 179, 8, 0.7) 0 0.9px, transparent 1.5px),
        radial-gradient(circle at 34% 68%, rgba(239, 68, 68, 0.55) 0 1px, transparent 1.6px),
        radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.8) 0 0.75px, transparent 1.3px);
    animation: socialGlitterTwinkle 2.8s ease-in-out infinite;
    opacity: 0.55;
}
.social-sidebar__sheen::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -130%;
    width: 58%;
    height: 190%;
    background: linear-gradient(
        108deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 42%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.12) 58%,
        transparent 72%
    );
    transform: skewX(-18deg);
    animation: socialSheenSweep 4.2s ease-in-out infinite;
}
.social-sidebar__spark {
    position: relative;
    z-index: 1;
    width: 0.35rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ss-ocean), var(--ss-brand) 52%, var(--ss-signal));
    box-shadow:
        0 0 10px rgba(239, 68, 68, 0.5),
        0 0 18px rgba(234, 179, 8, 0.32);
    animation: socialSparkPulse 2s ease-in-out infinite;
}

@keyframes socialSlideIn {
    from { opacity: 0; transform: translateX(-26px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes socialAuraPulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.03); }
}
@keyframes socialGlitterTwinkle {
    0%, 100% { opacity: 0.35; filter: brightness(1) saturate(1); }
    40% { opacity: 0.7; filter: brightness(1.25) saturate(1.1); }
    70% { opacity: 0.45; filter: brightness(1.08) saturate(1.05); }
}
@keyframes socialSheenSweep {
    0%, 18% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    28% { opacity: 0.85; }
    55% { transform: translateX(340%) skewX(-18deg); opacity: 0.7; }
    72%, 100% { transform: translateX(380%) skewX(-18deg); opacity: 0; }
}
@keyframes socialSparkPulse {
    0%, 100% {
        opacity: 0.75;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.4), 0 0 14px rgba(234, 179, 8, 0.25);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.65), 0 0 22px rgba(234, 179, 8, 0.42);
    }
}

.social-link {
    --link-accent: #64748b;
    --link-fill: #64748b;
    --link-glow: rgba(100, 116, 139, 0.35);
    --link-neon: rgba(100, 116, 139, 0.55);
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    color: #475569;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.22) 100%
        );
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 6px 18px -8px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(148, 163, 184, 0.12);
    text-decoration: none;
    overflow: visible;
    transition:
        transform 0.32s var(--ss-ease),
        background 0.32s var(--ss-ease),
        border-color 0.32s var(--ss-ease),
        box-shadow 0.32s var(--ss-ease),
        color 0.32s var(--ss-ease),
        filter 0.32s var(--ss-ease);
}

/* Platform brand colors ? revealed on hover with neon glow */
.social-link--facebook {
    --link-accent: #1877F2;
    --link-fill: #1877F2;
    --link-glow: rgba(24, 119, 242, 0.55);
    --link-neon: rgba(24, 119, 242, 0.85);
}
.social-link--instagram {
    --link-accent: #E1306C;
    --link-fill: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --link-glow: rgba(225, 48, 108, 0.55);
    --link-neon: rgba(225, 48, 108, 0.9);
}
.social-link--tiktok {
    --link-accent: #FE2C55;
    --link-fill: #010101;
    --link-glow: rgba(254, 44, 85, 0.55);
    --link-neon: rgba(37, 244, 238, 0.75);
}
.social-link--linkedin {
    --link-accent: #0A66C2;
    --link-fill: #0A66C2;
    --link-glow: rgba(10, 102, 194, 0.55);
    --link-neon: rgba(10, 102, 194, 0.85);
}
.social-link--youtube {
    --link-accent: #FF0000;
    --link-fill: #FF0000;
    --link-glow: rgba(255, 0, 0, 0.55);
    --link-neon: rgba(255, 0, 0, 0.9);
}

.social-link__glow {
    position: absolute;
    inset: -38%;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, var(--link-neon), transparent 70%);
    opacity: 0;
    transition: opacity 0.32s var(--ss-ease), transform 0.32s var(--ss-ease);
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
}
.social-link__icon {
    position: relative;
    z-index: 1;
    width: 1.2rem;
    height: 1.2rem;
    transition: transform 0.32s var(--ss-ease), filter 0.32s var(--ss-ease);
}
.social-link:hover,
.social-link:focus-visible {
    transform: translateX(7px) translateY(-2px) scale(1.1);
    color: #fff;
    background: var(--link-fill);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        0 14px 28px -10px var(--link-glow),
        0 0 18px 0 var(--link-neon),
        0 0 36px -4px var(--link-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.social-link--facebook:hover,
.social-link--facebook:focus-visible {
    background: #1877F2;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 14px 28px -10px rgba(24, 119, 242, 0.65),
        0 0 16px 1px rgba(24, 119, 242, 0.75),
        0 0 34px 2px rgba(24, 119, 242, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.social-link--instagram:hover,
.social-link--instagram:focus-visible {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 14px 28px -10px rgba(225, 48, 108, 0.65),
        0 0 16px 1px rgba(225, 48, 108, 0.7),
        0 0 32px 2px rgba(188, 24, 136, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.social-link--tiktok:hover,
.social-link--tiktok:focus-visible {
    color: #fff;
    background: #010101;
    border-color: rgba(37, 244, 238, 0.55);
    box-shadow:
        0 14px 28px -10px rgba(254, 44, 85, 0.55),
        0 0 14px 1px rgba(254, 44, 85, 0.7),
        0 0 28px 2px rgba(37, 244, 238, 0.55),
        0 0 0 1px rgba(37, 244, 238, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.social-link--linkedin:hover,
.social-link--linkedin:focus-visible {
    background: #0A66C2;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 14px 28px -10px rgba(10, 102, 194, 0.65),
        0 0 16px 1px rgba(10, 102, 194, 0.75),
        0 0 34px 2px rgba(10, 102, 194, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.social-link--youtube:hover,
.social-link--youtube:focus-visible {
    background: #FF0000;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 14px 28px -10px rgba(255, 0, 0, 0.65),
        0 0 16px 1px rgba(255, 0, 0, 0.8),
        0 0 34px 2px rgba(255, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.social-link:hover .social-link__glow,
.social-link:focus-visible .social-link__glow {
    opacity: 1;
    transform: scale(1.08);
}
.social-link:hover .social-link__icon,
.social-link:focus-visible .social-link__icon {
    transform: scale(1.14);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85));
}
.social-link:focus-visible {
    outline: 2px solid var(--link-accent);
    outline-offset: 3px;
}

.social-tooltip {
    position: absolute;
    left: calc(100% + 0.8rem);
    right: auto;
    top: 50%;
    transform: translate(-4px, -50%);
    padding: 0.42rem 0.75rem;
    border-radius: 0.7rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: #0f172a;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--link-accent) 35%, rgba(255, 255, 255, 0.5));
    box-shadow:
        0 10px 24px -12px var(--link-glow),
        0 0 18px -8px var(--link-neon),
        0 4px 12px -8px rgba(15, 23, 42, 0.12);
    transition: opacity 0.22s var(--ss-ease), transform 0.22s var(--ss-ease);
    z-index: 2;
}
.social-link:hover .social-tooltip,
.social-link:focus-visible .social-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
}

@media (prefers-reduced-motion: reduce) {
    .social-sidebar,
    .social-sidebar__aura,
    .social-sidebar__glitter,
    .social-sidebar__sheen::before,
    .social-sidebar__spark,
    .social-link,
    .social-link__icon,
    .social-tooltip {
        animation: none !important;
        transition: none !important;
    }
    .social-link:hover,
    .social-link:focus-visible {
        transform: none;
    }
}

/* Typewriter cursor */
.tw-cursor {
    display: inline-block;
    margin-left: 2px;
    font-weight: 300;
    transition: opacity 0.15s ease;
    vertical-align: baseline;
}
.tw-cursor--dim {
    opacity: 0;
}
.tw-cursor--done {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Site logo ? rounded, fully visible, no crop */
.site-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    aspect-ratio: 1 / 1;
}
.site-logo__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.site-logo--xs {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.25rem;
}
.site-logo--sm {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.35rem;
}
.site-logo--nav {
    width: 4.5rem;
    height: 4.5rem;
    padding: 0.4rem;
}
@media (min-width: 1024px) {
    .site-logo--nav {
        width: 5.5rem;
        height: 5.5rem;
        padding: 0.5rem;
    }
}
.site-logo--footer {
    width: 4.5rem;
    height: 4.5rem;
    padding: 0.4rem;
}
.site-logo--lg {
    width: 5.5rem;
    height: 5.5rem;
    padding: 0.5rem;
}
.site-logo--xl {
    width: 7rem;
    height: 7rem;
    padding: 0.65rem;
}

/* ============================================
   Featured 3D Signs ? Signature Service
   ============================================ */

.featured-3d {
    --f3d-ocean: #ef4444;
    --f3d-brand: #eab308;
    --f3d-signal: #f97316;
    --f3d-ink: #0f172a;
    position: relative;
}

.featured-3d__shell {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 1.75rem;
    padding: 1px;
    background: linear-gradient(
        120deg,
        rgba(239, 68, 68, 0.85),
        rgba(249, 115, 22, 0.55),
        rgba(234, 179, 8, 0.85),
        rgba(239, 68, 68, 0.65)
    );
    background-size: 300% 300%;
    animation: featured3dBorder 8s ease infinite;
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.35),
        0 0 40px -10px rgba(239, 68, 68, 0.25);
}

.featured-3d__shell::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: calc(1.75rem - 1px);
    background:
        radial-gradient(ellipse at 85% 15%, rgba(234, 179, 8, 0.14) 0%, transparent 45%),
        radial-gradient(ellipse at 10% 90%, rgba(239, 68, 68, 0.18) 0%, transparent 50%),
        linear-gradient(145deg, #0f172a 0%, #1c0a0a 48%, #1a1408 100%);
    z-index: 0;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .featured-3d__shell {
        grid-template-columns: 1.05fr 0.95fr;
        min-height: 420px;
    }
}

@keyframes featured3dBorder {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.featured-3d__media {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 280px;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    cursor: zoom-in;
    outline: none;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    border-radius: calc(1.75rem - 1px) calc(1.75rem - 1px) 0 0;
    -webkit-tap-highlight-color: transparent;
}
.featured-3d__media:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: -2px;
}

@media (min-width: 640px) {
    .featured-3d__media { min-height: 340px; }
}

@media (min-width: 1024px) {
    .featured-3d__media {
        min-height: 100%;
        height: 100%;
        border-radius: calc(1.75rem - 1px) 0 0 calc(1.75rem - 1px);
    }
}

.featured-3d__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% 36%;
    transform: scale(1.04) translate3d(0, 0, 0);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.featured-3d__media:hover .featured-3d__img,
.featured-3d__media:focus-visible .featured-3d__img {
    transform: scale(1.1) translate3d(0, 0, 0);
}

.featured-3d__media.is-tilting .featured-3d__img {
    transition: transform 0.12s ease-out;
}

.featured-3d__media-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.14) 48%,
        rgba(234, 179, 8, 0.12) 52%,
        transparent 60%
    );
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 2;
}

.featured-3d__media:hover .featured-3d__media-shine,
.featured-3d__media:focus-visible .featured-3d__media-shine {
    animation: featured3dShine 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes featured3dShine {
    to { transform: translateX(120%); }
}

.featured-3d__media-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 45%),
        linear-gradient(to right, transparent 55%, rgba(15, 23, 42, 0.35) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@media (min-width: 1024px) {
    .featured-3d__media-veil {
        background: linear-gradient(to right, transparent 40%, rgba(15, 23, 42, 0.45) 100%);
    }
}

.featured-3d__media:hover .featured-3d__media-veil {
    opacity: 0.75;
}

.featured-3d__media-cue {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-3d__media:hover .featured-3d__media-cue,
.featured-3d__media:focus-visible .featured-3d__media-cue {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    .featured-3d__media-cue {
        opacity: 0.9;
        transform: none;
    }
}

.featured-3d__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem 1.75rem 2.5rem;
}

@media (min-width: 1024px) {
    .featured-3d__body {
        padding: 3rem 3rem 3.25rem 2.75rem;
    }
}

.featured-3d__accent-bar {
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(239, 68, 68, 0.35), transparent 60%),
        linear-gradient(225deg, rgba(234, 179, 8, 0.3), transparent 55%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
    opacity: 0.7;
}

.featured-3d__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.featured-3d__title {
    position: relative;
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.featured-3d__title-text {
    background: linear-gradient(105deg, #ffffff 0%, #fecaca 45%, #fde68a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.featured-3d__title-underline {
    display: block;
    margin-top: 0.65rem;
    width: 3.5rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--f3d-ocean), var(--f3d-signal), var(--f3d-brand));
    transform-origin: left center;
    transform: scaleX(0.35);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-3d.reveal.visible .featured-3d__title-underline,
.featured-3d:hover .featured-3d__title-underline {
    transform: scaleX(1);
}

.featured-3d__copy {
    margin: 0 0 1.25rem;
    max-width: 28rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.65;
}

.featured-3d__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.featured-3d__tags li {
    padding: 0.35rem 0.75rem;
    border-radius: 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.featured-3d__tags li:nth-child(1) {
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.featured-3d__tags li:nth-child(2) {
    border-color: rgba(234, 179, 8, 0.35);
    color: #fde68a;
}
.featured-3d__tags li:nth-child(3) {
    border-color: rgba(249, 115, 22, 0.35);
    color: #fdba74;
}

.featured-3d__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.featured-3d__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.4rem;
    border-radius: 0.9rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
}

.featured-3d__btn-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.featured-3d__btn--primary {
    color: #fff;
    background: linear-gradient(115deg, #dc2626 0%, #ea580c 50%, #ca8a04 100%);
    background-size: 180% 180%;
    box-shadow: 0 12px 28px -8px rgba(239, 68, 68, 0.45);
}

.featured-3d__btn--primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 16px 36px -8px rgba(234, 179, 8, 0.4);
    transform: translateY(-3px);
}

.featured-3d__btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
}

.featured-3d__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(234, 179, 8, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -12px rgba(234, 179, 8, 0.35);
}

.featured-3d__btn:focus-visible {
    outline: 2px solid var(--f3d-brand);
    outline-offset: 3px;
}

/* Staggered reveal when parent .reveal becomes .visible */
.featured-3d.reveal .featured-3d__eyebrow,
.featured-3d.reveal .featured-3d__title,
.featured-3d.reveal .featured-3d__copy,
.featured-3d.reveal .featured-3d__tags,
.featured-3d.reveal .featured-3d__actions {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-3d.reveal.visible .featured-3d__eyebrow,
.featured-3d.reveal.visible .featured-3d__title,
.featured-3d.reveal.visible .featured-3d__copy,
.featured-3d.reveal.visible .featured-3d__tags,
.featured-3d.reveal.visible .featured-3d__actions {
    opacity: 1;
    transform: translateY(0);
}

.featured-3d.reveal.visible .featured-3d__eyebrow { transition-delay: 0.08s; }
.featured-3d.reveal.visible .featured-3d__title { transition-delay: 0.16s; }
.featured-3d.reveal.visible .featured-3d__copy { transition-delay: 0.24s; }
.featured-3d.reveal.visible .featured-3d__tags { transition-delay: 0.32s; }
.featured-3d.reveal.visible .featured-3d__actions { transition-delay: 0.4s; }

.featured-3d.reveal .featured-3d__media {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-3d.reveal.visible .featured-3d__media {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 639px) {
    .featured-3d__body {
        padding: 1.75rem 1.35rem 2rem;
    }
    .featured-3d__accent-bar {
        width: 2.5rem;
        height: 2.5rem;
        top: 1.25rem;
        right: 1.25rem;
    }
    .featured-3d__copy {
        font-size: 0.98rem;
    }
    .featured-3d__btn {
        flex: 1 1 auto;
        min-width: calc(50% - 0.5rem);
        justify-content: center;
        padding: 0.8rem 1.1rem;
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-3d__shell,
    .featured-3d__media-shine,
    .featured-3d__img,
    .featured-3d__btn,
    .featured-3d__media-cue,
    .featured-3d__title-underline {
        animation: none !important;
        transition: none !important;
    }
    .featured-3d__img {
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none !important;
    }
    .featured-3d.reveal .featured-3d__eyebrow,
    .featured-3d.reveal .featured-3d__title,
    .featured-3d.reveal .featured-3d__copy,
    .featured-3d.reveal .featured-3d__tags,
    .featured-3d.reveal .featured-3d__actions,
    .featured-3d.reveal .featured-3d__media {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========== Portfolio showcase ========== */
.portfolio-section {
    isolation: isolate;
}
.portfolio-orb--ocean {
    background: rgba(239, 68, 68, 0.22);
}
.portfolio-orb--brand {
    background: rgba(234, 179, 8, 0.18);
}
.portfolio-orb--signal {
    background: rgba(249, 115, 22, 0.14);
}

/* ----- Portfolio section header ----- */
.portfolio-header {
    --pf-red: #ef4444;
    --pf-red-deep: #dc2626;
    --pf-gold: #eab308;
    --pf-gold-bright: #facc15;
    --pf-gold-soft: #fde68a;
    --pf-black: #0a0a0a;
    --pf-ink: #f8fafc;
    margin-bottom: 3.25rem;
}

@media (min-width: 1024px) {
    .portfolio-header {
        margin-bottom: 4.5rem;
    }
}

.portfolio-header__frame {
    display: grid;
    gap: 2rem;
    align-items: end;
    padding: 0.25rem 0 0.5rem;
    border-bottom: 1px solid rgba(234, 179, 8, 0.18);
    position: relative;
}

.portfolio-header__frame::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 4.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--pf-red) 0%, var(--pf-gold) 100%);
    border-radius: 999px;
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition:
        opacity 0.55s ease 0.35s,
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
        width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-header.reveal.visible .portfolio-header__frame::before {
    opacity: 1;
    transform: scaleX(1);
}

.portfolio-header:hover .portfolio-header__frame::before {
    width: 7.5rem;
}

@media (min-width: 1024px) {
    .portfolio-header__frame {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 3rem 4.5rem;
        padding: 0.5rem 0 1.75rem;
    }
}

.portfolio-header__lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

.portfolio-header__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
    min-width: 0;
    max-width: 28rem;
}

@media (min-width: 1024px) {
    .portfolio-header__aside {
        max-width: none;
        padding-bottom: 0.15rem;
        border-left: 1px solid rgba(234, 179, 8, 0.16);
        padding-left: 2.75rem;
    }
}

.portfolio-header__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 1rem 0.42rem 0.72rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pf-gold-soft);
    background:
        linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(234, 179, 8, 0.1) 55%, transparent),
        var(--pf-black);
    border: 1px solid rgba(234, 179, 8, 0.42);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 10px 28px -14px rgba(239, 68, 68, 0.45),
        inset 0 1px 0 rgba(253, 230, 138, 0.12);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.portfolio-header.reveal.visible .portfolio-header__pill {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.portfolio-header__pill:hover {
    border-color: rgba(250, 204, 21, 0.55);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 12px 32px -12px rgba(234, 179, 8, 0.4),
        inset 0 1px 0 rgba(253, 230, 138, 0.16);
}

.portfolio-header__pill-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pf-red), var(--pf-gold));
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.22),
        0 0 12px rgba(234, 179, 8, 0.55);
    animation: portfolioPillPulse 2.4s ease-in-out infinite;
}

@keyframes portfolioPillPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22), 0 0 10px rgba(239, 68, 68, 0.45);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 6px rgba(234, 179, 8, 0.14), 0 0 14px rgba(234, 179, 8, 0.4);
        opacity: 0.88;
    }
}

.portfolio-header__title {
    margin: 1.35rem 0 0;
    font-size: clamp(1.95rem, 4.4vw, 3.15rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    min-height: 1.25em;
    max-width: 16ch;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.portfolio-header.reveal.visible .portfolio-header__title {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-header__tw {
    background-image: linear-gradient(
        105deg,
        #f87171 0%,
        #ef4444 18%,
        #facc15 48%,
        #eab308 72%,
        #fde68a 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #facc15; /* fallback if clip unsupported */
    filter: drop-shadow(0 2px 18px rgba(234, 179, 8, 0.35));
}

.portfolio-header.reveal.visible .portfolio-header__tw {
    animation: portfolioTitleShimmer 5s ease-in-out infinite;
    animation-delay: 1.2s;
}

@keyframes portfolioTitleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.portfolio-header__cursor {
    color: var(--pf-gold-bright);
    font-weight: 300;
    margin-left: 0.05em;
    text-shadow: 0 0 12px rgba(234, 179, 8, 0.55);
}

.portfolio-header__divider {
    display: block;
    margin-top: 1.25rem;
    width: min(10.5rem, 48%);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pf-red) 0%, var(--pf-gold) 55%, #111 100%);
    box-shadow:
        0 0 18px rgba(234, 179, 8, 0.45),
        0 0 8px rgba(239, 68, 68, 0.3);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.28s,
        opacity 0.45s ease 0.28s,
        width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-header.reveal.visible .portfolio-header__divider {
    transform: scaleX(1);
    opacity: 1;
}

.portfolio-header:hover .portfolio-header__divider {
    width: min(13.5rem, 62%);
}

.portfolio-header__sub {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(203, 213, 225, 0.92);
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}

@media (min-width: 1024px) {
    .portfolio-header__sub {
        font-size: 1.1rem;
        line-height: 1.75;
    }
}

.portfolio-header.reveal.visible .portfolio-header__sub {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-header__kw-line {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.12em;
    letter-spacing: 0.01em;
}

.portfolio-header__sub-rest {
    display: inline;
    color: rgba(148, 163, 184, 0.95);
}

.portfolio-header__kw {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.portfolio-header__kw--ocean {
    color: #f87171;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.35);
}

.portfolio-header__kw--brand {
    color: #facc15;
    text-shadow: 0 0 20px rgba(234, 179, 8, 0.4);
}

.portfolio-header__kw--signal {
    color: #fb923c;
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.35);
}

.portfolio-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0;
    padding: 0.9rem 1.55rem;
    border-radius: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--pf-red-deep) 0%, #ea580c 42%, var(--pf-gold) 100%);
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow:
        0 14px 32px -12px rgba(239, 68, 68, 0.5),
        0 0 0 1px rgba(253, 230, 138, 0.12) inset;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.34s,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.34s;
}

.portfolio-header.reveal.visible .portfolio-header__cta {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.34s,
        transform 0.25s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease,
        border-color 0.3s ease;
}

.portfolio-header__cta:hover {
    filter: brightness(1.07);
    border-color: rgba(250, 204, 21, 0.35);
    box-shadow:
        0 18px 36px -12px rgba(234, 179, 8, 0.45),
        0 0 0 1px rgba(253, 230, 138, 0.18) inset;
    transform: translateY(-2px);
}

.portfolio-header__cta:focus-visible {
    outline: 2px solid var(--pf-gold-bright);
    outline-offset: 3px;
}

@media (max-width: 639px) {
    .portfolio-header__title {
        max-width: none;
    }

    .portfolio-header__aside {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-header__pill,
    .portfolio-header__title,
    .portfolio-header__sub,
    .portfolio-header__cta,
    .portfolio-header__divider,
    .portfolio-header__frame::before {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .portfolio-header__pill-dot,
    .portfolio-header.reveal.visible .portfolio-header__tw {
        animation: none;
    }
    .portfolio-header.reveal.visible .portfolio-header__divider {
        transform: none;
        opacity: 1;
    }
}

.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.15rem;
    }
}
@media (min-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.portfolio-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.35rem;
    overflow: hidden;
    cursor: zoom-in;
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.65);
    opacity: 0;
    transform: translateY(22px);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}
.portfolio-section .reveal.visible .portfolio-item {
    animation: portfolioItemIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--pf-delay, 0s);
}
@keyframes portfolioItemIn {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

.portfolio-item:hover,
.portfolio-item:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(250, 204, 21, 0.35);
    box-shadow:
        0 28px 60px -28px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(234, 179, 8, 0.12);
}
.portfolio-item:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: 3px;
}

.portfolio-item--ocean:hover {
    box-shadow:
        0 28px 60px -28px rgba(239, 68, 68, 0.45),
        0 0 0 1px rgba(239, 68, 68, 0.2);
}
.portfolio-item--brand:hover {
    box-shadow:
        0 28px 60px -28px rgba(234, 179, 8, 0.4),
        0 0 0 1px rgba(234, 179, 8, 0.22);
}
.portfolio-item--signal:hover {
    box-shadow:
        0 28px 60px -28px rgba(249, 115, 22, 0.42),
        0 0 0 1px rgba(249, 115, 22, 0.22);
}

.portfolio-item__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-item:hover .portfolio-item__img,
.portfolio-item:focus-visible .portfolio-item__img {
    transform: scale(1.08);
}

.portfolio-item__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.88) 100%),
        linear-gradient(135deg, rgba(239, 68, 68, 0.12), transparent 45%);
    opacity: 0.55;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.portfolio-item:hover .portfolio-item__veil,
.portfolio-item:focus-visible .portfolio-item__veil {
    opacity: 1;
}

.portfolio-item__label {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.35s ease;
}
.portfolio-item--ocean .portfolio-item__label {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.72);
    border-color: rgba(248, 113, 113, 0.35);
}
.portfolio-item--brand .portfolio-item__label {
    color: #fef08a;
    background: rgba(113, 63, 18, 0.72);
    border-color: rgba(250, 204, 21, 0.4);
}
.portfolio-item--signal .portfolio-item__label {
    color: #fed7aa;
    background: rgba(124, 45, 18, 0.72);
    border-color: rgba(251, 146, 60, 0.4);
}
.portfolio-item:hover .portfolio-item__label {
    transform: translateY(-2px);
}

.portfolio-item__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1.15rem 1.15rem 1.25rem;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    pointer-events: none;
}
.portfolio-item:hover .portfolio-item__overlay,
.portfolio-item:focus-visible .portfolio-item__overlay {
    transform: translateY(0);
    opacity: 1;
}
@media (hover: none) {
    .portfolio-item__overlay {
        opacity: 1;
        transform: none;
    }
    .portfolio-item__veil {
        opacity: 0.85;
    }
}

.portfolio-item__title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.portfolio-item__cue {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #0f172a;
    background: linear-gradient(135deg, #facc15, #f97316);
    box-shadow: 0 8px 20px -10px rgba(249, 115, 22, 0.7);
}
.portfolio-item__cue svg {
    width: 0.85rem;
    height: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-item,
    .portfolio-item__img,
    .portfolio-item__veil,
    .portfolio-item__overlay,
    .portfolio-item__label {
        animation: none !important;
        transition: none !important;
    }
    .portfolio-section .reveal.visible .portfolio-item {
        opacity: 1;
        transform: none;
    }
    .portfolio-item:hover .portfolio-item__img,
    .portfolio-item:focus-visible .portfolio-item__img {
        transform: none;
    }
}

/* ===== Site-wide search ===== */
.site-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid #fecaca;
    background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
    color: #b91c1c;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.site-search-trigger:hover {
    border-color: #f87171;
    background: #fff;
    color: #991b1b;
    box-shadow: 0 8px 20px -12px rgba(220, 38, 38, 0.45);
}
.site-search-trigger:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}
.site-search-trigger--icon {
    padding: 0.5rem;
    border-color: transparent;
    background: transparent;
    color: #475569;
}
.site-search-trigger--icon:hover {
    background: #f1f5f9;
    color: #b91c1c;
    box-shadow: none;
}
.site-search-trigger__hint {
    display: none;
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: inherit;
}
@media (min-width: 1280px) {
    .site-search-trigger__hint { display: inline-block; }
}

.site-search-mobile-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0.25rem 0.35rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 1px dashed #fecaca;
    background: linear-gradient(135deg, #fef2f2, #fff7ed);
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    width: calc(100% - 0.5rem);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.site-search-mobile-row:hover {
    border-style: solid;
    border-color: #f87171;
    color: #b91c1c;
}
.site-search-mobile-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.site-search-mobile-row__hint {
    padding: 0.15rem 0.4rem;
    border-radius: 0.35rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
}

.site-search {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 2rem;
    visibility: hidden;
    pointer-events: none;
}
.site-search.is-open {
    visibility: visible;
    pointer-events: auto;
}
.site-search__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.22s ease;
    cursor: pointer;
}
.site-search.is-open .site-search__backdrop {
    opacity: 1;
}
.site-search__panel {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: min(72vh, 640px);
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    border: 1px solid rgba(254, 202, 202, 0.7);
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(254, 242, 242, 0.95), transparent 50%),
        radial-gradient(100% 70% at 100% 0%, rgba(255, 247, 237, 0.9), transparent 45%),
        #ffffff;
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.site-search.is-open .site-search__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.site-search__header {
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #fee2e2;
}
.site-search__field {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.95rem;
    border: 1.5px solid #fecaca;
    background: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 24px -18px rgba(220, 38, 38, 0.45);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-search__field:focus-within {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18), 0 8px 24px -18px rgba(220, 38, 38, 0.45);
}
.site-search__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #dc2626;
    flex-shrink: 0;
}
.site-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
}
.site-search__input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}
.site-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.site-search__esc {
    display: none;
    padding: 0.15rem 0.4rem;
    border-radius: 0.35rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: inherit;
}
@media (min-width: 640px) {
    .site-search__esc { display: inline-block; }
}
.site-search__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    border: 0;
    background: #f1f5f9;
    color: #64748b;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-search__close:hover {
    background: #fee2e2;
    color: #b91c1c;
}
.site-search__close:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

.site-search__status {
    min-height: 1.25rem;
    padding: 0.45rem 1.15rem 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #94a3b8;
}

.site-search__results {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: #fecaca transparent;
}

.site-search__result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.site-search__result.has-thumb {
    align-items: center;
}
.site-search__result:hover,
.site-search__result.is-active {
    background: linear-gradient(135deg, #fef2f2, #fff7ed);
    border-color: #fecaca;
}
.site-search__result.is-active {
    transform: translateX(2px);
}
.site-search__result:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 1px;
}
.site-search__thumb {
    position: relative;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.35);
}
.site-search__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.site-search__result:hover .site-search__thumb img,
.site-search__result.is-active .site-search__thumb img {
    transform: scale(1.06);
}
.site-search__badge {
    flex-shrink: 0;
    margin-top: 0.1rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.3;
}
.site-search__badge--overlay {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 0 0.15rem;
    width: fit-content;
}
.site-search__badge.is-service {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.site-search__badge.is-faq {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.site-search__badge.is-page {
    background: #fefce8;
    color: #a16207;
    border: 1px solid #fde047;
}
.site-search__result-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.site-search__result-title {
    font-size: 0.95rem;
    font-weight: 650;
    color: #0f172a;
    line-height: 1.3;
}
.site-search__result-snippet {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.site-search__result-arrow {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: #f97316;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.site-search__result:hover .site-search__result-arrow,
.site-search__result.is-active .site-search__result-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.site-search__empty,
.site-search__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2.25rem 1.25rem;
    text-align: center;
}
.site-search__empty-title {
    font-size: 0.95rem;
    font-weight: 650;
    color: #0f172a;
}
.site-search__empty-text {
    font-size: 0.82rem;
    color: #64748b;
    max-width: 28ch;
}
.site-search__loading {
    flex-direction: row;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}
.site-search__spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid #fecaca;
    border-top-color: #dc2626;
    animation: site-search-spin 0.7s linear infinite;
}
@keyframes site-search-spin {
    to { transform: rotate(360deg); }
}

.site-search__footer {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid #fee2e2;
    background: rgba(255, 255, 255, 0.7);
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 500;
}
.site-search__footer kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    margin: 0 0.1rem;
    border-radius: 0.3rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: inherit;
}
@media (min-width: 640px) {
    .site-search__footer { display: flex; }
}

body.site-search-open {
    overflow: hidden;
}

@media (max-width: 639px) {
    .site-search {
        padding: 0;
        align-items: stretch;
    }
    .site-search__panel {
        width: 100%;
        max-height: none;
        height: 100%;
        border-radius: 0;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-search__backdrop,
    .site-search__panel,
    .site-search__result,
    .site-search__result-arrow,
    .site-search__spinner {
        transition: none !important;
        animation: none !important;
    }
    .site-search.is-open .site-search__panel {
        transform: none;
    }
}

/* ============================================
   Why Danix Signs - first impression section
   Accents: ocean (red) / brand (yellow-gold) / signal (orange)
   ============================================ */
.why-section {
    --why-ocean: #ef4444;
    --why-ocean-deep: #dc2626;
    --why-brand: #eab308;
    --why-brand-deep: #ca8a04;
    --why-signal: #f97316;
    --why-ink: #0f172a;
    --why-muted: #64748b;
    --why-ease: cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
    background: #ffffff;
}

.why-section__mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 8% 20%, rgba(239, 68, 68, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 45% 40% at 92% 12%, rgba(234, 179, 8, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 40% 35% at 78% 88%, rgba(249, 115, 22, 0.07) 0%, transparent 50%),
        linear-gradient(165deg, #fff 0%, #fef2f2 42%, #fffbeb 72%, #fff 100%);
}

.why-section__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.why-section__orb--ocean {
    width: 18rem;
    height: 18rem;
    top: -4rem;
    left: -6rem;
    background: rgba(239, 68, 68, 0.18);
    animation: whyOrbFloat 14s ease-in-out infinite;
}
.why-section__orb--brand {
    width: 14rem;
    height: 14rem;
    top: 30%;
    right: -4rem;
    background: rgba(234, 179, 8, 0.16);
    animation: whyOrbFloat 16s ease-in-out infinite reverse;
}
.why-section__orb--signal {
    width: 12rem;
    height: 12rem;
    bottom: -3rem;
    left: 40%;
    background: rgba(249, 115, 22, 0.14);
    animation: whyOrbFloat 12s ease-in-out infinite 1.5s;
}
@keyframes whyOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(12px, -18px) scale(1.06); }
}

.why-section__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.75rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .why-section__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 3.5rem 4rem;
    }
}

.why-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--why-brand-deep);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.why-section__title {
    position: relative;
    display: inline-block;
    margin: 0.9rem 0 0;
    font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--why-ink);
    padding-bottom: 0.65rem;
}
.why-section__title-accent {
    background: linear-gradient(135deg, var(--why-ocean-deep) 0%, var(--why-brand-deep) 55%, var(--why-signal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.why-section__title-underline {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--why-ocean), var(--why-brand), var(--why-signal));
    transition: width 0.7s var(--why-ease) 0.2s;
}
.why-section__copy.reveal.visible .why-section__title-underline {
    width: min(11rem, 55%);
}
.why-section__copy:hover .why-section__title-underline {
    width: min(14rem, 70%);
}

.why-section__lead {
    margin: 1.15rem 0 0;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #334155;
    font-weight: 500;
}

.why-section__body {
    margin-top: 1.15rem;
    max-width: 36rem;
    display: grid;
    gap: 0.85rem;
}
.why-section__body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--why-muted);
}

.why-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.why-section__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.35rem;
    border-radius: 0.9rem;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.3s var(--why-ease), box-shadow 0.3s var(--why-ease), background 0.3s var(--why-ease), border-color 0.3s var(--why-ease), color 0.3s var(--why-ease);
}
.why-section__btn:focus-visible {
    outline: 2px solid var(--why-ocean);
    outline-offset: 3px;
}
.why-section__btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #dc2626 0%, #b45309 55%, #ca8a04 100%);
    box-shadow: 0 12px 28px -12px rgba(220, 38, 38, 0.45);
}
.why-section__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgba(220, 38, 38, 0.55);
}
.why-section__btn-icon {
    width: 1.05rem;
    height: 1.05rem;
    transition: transform 0.3s var(--why-ease);
}
.why-section__btn--primary:hover .why-section__btn-icon {
    transform: translateX(3px);
}
.why-section__btn--whatsapp {
    color: #b45309;
    background: #fff;
    border: 2px solid #fde68a;
}
.why-section__btn--whatsapp:hover {
    transform: translateY(-2px);
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
    box-shadow: 0 10px 24px -14px rgba(202, 138, 4, 0.4);
}
.why-section__wa-icon {
    width: 1.15rem;
    height: 1.15rem;
    color: #16a34a;
}

/* Feature checklist strip (not card clutter) */
.why-section__strip {
    position: relative;
    padding: 0.25rem 0 0.25rem 0.15rem;
}
.why-section__strip-rail {
    position: absolute;
    left: 1.35rem;
    top: 3.1rem;
    bottom: 1.1rem;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.55), rgba(234, 179, 8, 0.5), rgba(249, 115, 22, 0.55));
    opacity: 0.55;
}
.why-section__strip-label {
    margin: 0 0 1rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #94a3b8;
}

.why-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.why-point {
    --why-accent: var(--why-ocean);
    --why-accent-soft: rgba(239, 68, 68, 0.12);
    --why-accent-glow: rgba(239, 68, 68, 0.28);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.95rem 1rem 0.95rem 0.65rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.35s var(--why-ease), border-color 0.35s var(--why-ease), transform 0.35s var(--why-ease), box-shadow 0.35s var(--why-ease);
}
.why-point--ocean {
    --why-accent: var(--why-ocean);
    --why-accent-soft: rgba(239, 68, 68, 0.12);
    --why-accent-glow: rgba(239, 68, 68, 0.28);
}
.why-point--brand {
    --why-accent: var(--why-brand);
    --why-accent-soft: rgba(234, 179, 8, 0.14);
    --why-accent-glow: rgba(234, 179, 8, 0.3);
}
.why-point--signal {
    --why-accent: var(--why-signal);
    --why-accent-soft: rgba(249, 115, 22, 0.12);
    --why-accent-glow: rgba(249, 115, 22, 0.28);
}
.why-point:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 28px -18px var(--why-accent-glow);
    transform: translateX(4px);
}
.why-point--ocean:hover { border-color: rgba(239, 68, 68, 0.28); }
.why-point--brand:hover { border-color: rgba(234, 179, 8, 0.35); }
.why-point--signal:hover { border-color: rgba(249, 115, 22, 0.3); }

.why-point__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.85rem;
    color: #fff;
    background: var(--why-accent);
    box-shadow: 0 8px 18px -10px var(--why-accent-glow);
    transition: transform 0.35s var(--why-ease), box-shadow 0.35s var(--why-ease);
}
.why-point--ocean .why-point__marker {
    background: linear-gradient(145deg, #f87171, #dc2626);
}
.why-point--brand .why-point__marker {
    background: linear-gradient(145deg, #facc15, #ca8a04);
}
.why-point--signal .why-point__marker {
    background: linear-gradient(145deg, #fb923c, #ea580c);
}
.why-point:hover .why-point__marker {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 12px 22px -10px var(--why-accent-glow);
}
.why-point__icon {
    width: 1.15rem;
    height: 1.15rem;
}

.why-point__content {
    min-width: 0;
    padding-top: 0.1rem;
}
.why-point__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.why-point__title {
    margin: 0;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--why-ink);
}
.why-point__metric {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--why-accent);
    background: var(--why-accent-soft);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.why-point__text {
    margin: 0.28rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--why-muted);
}

/* Staggered reveal (works with existing .reveal) */
.why-section__copy.reveal .why-section__eyebrow,
.why-section__copy.reveal .why-section__title,
.why-section__copy.reveal .why-section__lead,
.why-section__copy.reveal .why-section__body,
.why-section__copy.reveal .why-section__actions {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s var(--why-ease), transform 0.55s var(--why-ease);
}
.why-section__copy.reveal.visible .why-section__eyebrow,
.why-section__copy.reveal.visible .why-section__title,
.why-section__copy.reveal.visible .why-section__lead,
.why-section__copy.reveal.visible .why-section__body,
.why-section__copy.reveal.visible .why-section__actions {
    opacity: 1;
    transform: none;
}
.why-section__copy.reveal.visible .why-section__eyebrow { transition-delay: 0.05s; }
.why-section__copy.reveal.visible .why-section__title { transition-delay: 0.12s; }
.why-section__copy.reveal.visible .why-section__lead { transition-delay: 0.2s; }
.why-section__copy.reveal.visible .why-section__body { transition-delay: 0.28s; }
.why-section__copy.reveal.visible .why-section__actions { transition-delay: 0.36s; }

.why-section__strip.reveal .why-point {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.5s var(--why-ease), transform 0.5s var(--why-ease), background 0.35s var(--why-ease), border-color 0.35s var(--why-ease), box-shadow 0.35s var(--why-ease);
}
.why-section__strip.reveal.visible .why-point {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.08s + (var(--why-i, 0) * 0.08s));
}
.why-section__strip.reveal.visible .why-point:hover {
    transition-delay: 0s;
    transform: translateX(4px);
}
.why-section__strip.reveal .why-section__strip-label {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s var(--why-ease), transform 0.45s var(--why-ease);
}
.why-section__strip.reveal.visible .why-section__strip-label {
    opacity: 1;
    transform: none;
}

@media (max-width: 639px) {
    .why-section__strip-rail {
        left: 1.2rem;
    }
    .why-point {
        padding-left: 0.45rem;
        padding-right: 0.7rem;
    }
    .why-point__row {
        flex-wrap: wrap;
        gap: 0.35rem 0.6rem;
    }
    .why-section__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-section__orb,
    .why-section__title-underline,
    .why-section__btn,
    .why-section__btn-icon,
    .why-point,
    .why-point__marker,
    .why-section__copy.reveal .why-section__eyebrow,
    .why-section__copy.reveal .why-section__title,
    .why-section__copy.reveal .why-section__lead,
    .why-section__copy.reveal .why-section__body,
    .why-section__copy.reveal .why-section__actions,
    .why-section__strip.reveal .why-point,
    .why-section__strip.reveal .why-section__strip-label {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .why-section__copy.reveal .why-section__eyebrow,
    .why-section__copy.reveal .why-section__title,
    .why-section__copy.reveal .why-section__lead,
    .why-section__copy.reveal .why-section__body,
    .why-section__copy.reveal .why-section__actions,
    .why-section__strip.reveal .why-point,
    .why-section__strip.reveal .why-section__strip-label,
    .why-section__copy.reveal.visible .why-section__title-underline {
        opacity: 1;
        width: min(11rem, 55%);
    }
}

/* ============================================
   Contact page ? cohesive light composition
   ============================================ */
.contact-page {
    --cc-ocean: #ef4444;
    --cc-brand: #eab308;
    --cc-signal: #f97316;
    --cc-ink: #0f172a;
    --cc-muted: #64748b;
    --cc-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 4.5rem 0 5.5rem;
    background: linear-gradient(165deg, #fff7ed 0%, #fef2f2 38%, #fffbeb 72%, #ffffff 100%);
}

.contact-page__mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 12% 18%, rgba(239, 68, 68, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 45% 40% at 88% 12%, rgba(234, 179, 8, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse 40% 35% at 70% 88%, rgba(249, 115, 22, 0.12) 0%, transparent 50%);
}

.contact-page__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

.contact-page__orb--ocean {
    width: 18rem;
    height: 18rem;
    top: 8%;
    left: -4%;
    background: rgba(239, 68, 68, 0.22);
    animation: contactOrbFloat 14s ease-in-out infinite;
}

.contact-page__orb--brand {
    width: 14rem;
    height: 14rem;
    top: 4%;
    right: 6%;
    background: rgba(234, 179, 8, 0.2);
    animation: contactOrbFloat 11s ease-in-out infinite reverse;
}

.contact-page__orb--signal {
    width: 16rem;
    height: 16rem;
    bottom: 10%;
    right: -3%;
    background: rgba(249, 115, 22, 0.16);
    animation: contactOrbFloat 13s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes contactOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(14px, -16px) scale(1.05); }
}

.contact-page__intro {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto 2.75rem;
}

.contact-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cc-ocean);
}

.contact-page__eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-ocean), var(--cc-brand));
}

.contact-page__title {
    margin: 0.85rem 0 0.85rem;
    font-size: clamp(2.15rem, 4.5vw, 3.15rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cc-ink);
}

.contact-page__title-rest {
    color: #1e293b;
}

.contact-page__subtitle {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--cc-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.contact-page__underline {
    display: block;
    width: 0;
    height: 3px;
    margin: 1.25rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-ocean), var(--cc-brand) 48%, var(--cc-signal));
    transform-origin: center;
    transition: width 0.7s var(--cc-ease) 0.25s;
}

.contact-page__intro.reveal.visible .contact-page__underline {
    width: min(9rem, 40%);
}

/* Stage: rail + form as one composition */
.contact-stage {
    display: grid;
    gap: 1.25rem;
    align-items: stretch;
    border-radius: 1.75rem;
    padding: 0.85rem;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(234, 179, 8, 0.4), rgba(249, 115, 22, 0.35)) border-box;
    border: 1px solid transparent;
    box-shadow:
        0 24px 60px -28px rgba(185, 28, 28, 0.28),
        0 8px 24px -12px rgba(15, 23, 42, 0.08);
}

@media (min-width: 1024px) {
    .contact-stage {
        grid-template-columns: minmax(17.5rem, 0.95fr) 1.55fr;
        gap: 0;
        padding: 0.65rem;
    }
}

.contact-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    border-radius: 1.35rem;
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(239, 68, 68, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #fffaf5 0%, #fff7ed 100%);
    overflow: hidden;
}

.contact-rail__glow {
    position: absolute;
    inset: auto -20% -30% -20%;
    height: 55%;
    background: radial-gradient(ellipse at center, rgba(234, 179, 8, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.contact-channel {
    --cc-accent: var(--cc-ocean);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    overflow: hidden;
    transition:
        transform 0.35s var(--cc-ease),
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
    opacity: 0;
    transform: translateX(-14px);
}

.contact-stage.reveal.visible .contact-channel {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.08s + (var(--cc-i, 0) * 0.07s));
}

.contact-channel--ocean { --cc-accent: var(--cc-ocean); }
.contact-channel--brand { --cc-accent: var(--cc-brand); }
.contact-channel--signal { --cc-accent: var(--cc-signal); }

.contact-channel__sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
    transform: translateX(-120%);
    pointer-events: none;
}

.contact-channel:not(.contact-channel--static):hover {
    transform: translateY(-3px) translateX(2px);
    border-color: color-mix(in srgb, var(--cc-accent) 45%, #e2e8f0);
    background: #fff;
    box-shadow:
        0 14px 28px -16px color-mix(in srgb, var(--cc-accent) 45%, transparent),
        0 2px 0 rgba(255, 255, 255, 0.9) inset;
    transition-delay: 0s;
}

.contact-channel:not(.contact-channel--static):hover .contact-channel__sheen {
    animation: contactSheen 0.75s var(--cc-ease);
}

.contact-channel:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

@keyframes contactSheen {
    to { transform: translateX(120%); }
}

.contact-channel__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.95rem;
    color: #fff;
    background: linear-gradient(145deg, var(--cc-accent), color-mix(in srgb, var(--cc-accent) 72%, #7c2d12));
    box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--cc-accent) 65%, transparent);
    transition: transform 0.4s var(--cc-ease);
}

.contact-channel--brand .contact-channel__icon {
    background: linear-gradient(145deg, #facc15, #ca8a04);
    color: #422006;
}

.contact-channel--signal .contact-channel__icon {
    background: linear-gradient(145deg, #fb923c, #ea580c);
}

.contact-channel__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.contact-channel:hover .contact-channel__icon {
    transform: scale(1.08) rotate(-4deg);
}

.contact-channel__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.contact-channel__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.contact-channel__value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
    word-break: break-word;
}

.contact-channel__value--wrap {
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
}

.contact-channel:hover .contact-channel__value {
    color: color-mix(in srgb, var(--cc-accent) 75%, #0f172a);
}

.contact-channel--brand:hover .contact-channel__value {
    color: #a16207;
}

.contact-channel__arrow {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    color: #cbd5e1;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s var(--cc-ease), color 0.3s ease;
}

.contact-channel__arrow svg {
    width: 100%;
    height: 100%;
}

.contact-channel:not(.contact-channel--static):hover .contact-channel__arrow {
    opacity: 1;
    transform: none;
    color: var(--cc-accent);
}

.contact-channel--static {
    cursor: default;
    margin-top: auto;
}

.contact-channel--static:hover .contact-channel__icon {
    transform: none;
}

/* Form panel */
.contact-panel {
    position: relative;
    border-radius: 1.35rem;
    background: #fff;
    overflow: hidden;
}

.contact-panel__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cc-ocean), var(--cc-brand), var(--cc-signal));
}

.contact-form {
    padding: 1.5rem 1.35rem 1.65rem;
}

@media (min-width: 640px) {
    .contact-form {
        padding: 2rem 2rem 2.15rem;
    }
}

.contact-form__head {
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--cc-ease), transform 0.5s var(--cc-ease);
}

.contact-stage.reveal.visible .contact-form__head {
    opacity: 1;
    transform: none;
    transition-delay: 0.18s;
}

.contact-form__title {
    margin: 0 0 0.4rem;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cc-ink);
}

.contact-form__lead {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.925rem;
    line-height: 1.55;
}

.contact-form__grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .contact-form__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 1rem;
    }
    .contact-field--full {
        grid-column: 1 / -1;
    }
}

.contact-field {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s var(--cc-ease), transform 0.45s var(--cc-ease);
}

.contact-stage.reveal.visible .contact-field:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.22s; }
.contact-stage.reveal.visible .contact-field:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.28s; }
.contact-stage.reveal.visible .contact-field:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.34s; }
.contact-stage.reveal.visible .contact-field:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.4s; }

.contact-field__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.contact-field__wrap {
    position: relative;
}

.contact-field__icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.25s ease, transform 0.3s var(--cc-ease);
}

.contact-field__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.contact-field__icon--brand { color: #ca8a04; }
.contact-field__icon--signal { color: #ea580c; }

.contact-field__wrap--textarea .contact-field__icon {
    top: 1.05rem;
    transform: none;
}

.contact-field__input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.65rem;
    border-radius: 0.95rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.9rem;
    color: #0f172a;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.contact-field__textarea {
    resize: none;
    min-height: 8.5rem;
    line-height: 1.55;
}

.contact-field__input:hover {
    border-color: #fdba74;
    background: #fff;
}

.contact-field__input:focus {
    border-color: var(--cc-ocean);
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.12),
        0 8px 20px -12px rgba(234, 179, 8, 0.35);
}

.contact-field__wrap:focus-within .contact-field__icon {
    color: var(--cc-ocean);
    transform: translateY(-50%) scale(1.08);
}

.contact-field__wrap--textarea:focus-within .contact-field__icon {
    transform: scale(1.08);
}

.contact-form__actions {
    margin-top: 1.35rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s var(--cc-ease), transform 0.45s var(--cc-ease);
}

.contact-stage.reveal.visible .contact-form__actions {
    opacity: 1;
    transform: none;
    transition-delay: 0.46s;
}

.contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.65rem;
    border: 0;
    border-radius: 0.95rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 52%, #eab308 100%);
    background-size: 160% 160%;
    box-shadow: 0 12px 28px -12px rgba(239, 68, 68, 0.55);
    transition: transform 0.3s var(--cc-ease), box-shadow 0.3s ease, background-position 0.4s ease;
}

.contact-form__submit:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 16px 32px -12px rgba(249, 115, 22, 0.55);
}

.contact-form__submit:focus-visible {
    outline: 2px solid var(--cc-brand);
    outline-offset: 3px;
}

.contact-form__submit-icon {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.3s var(--cc-ease);
}

.contact-form__submit:hover .contact-form__submit-icon {
    transform: translate(2px, -2px);
}

@media (max-width: 639px) {
    .contact-page {
        padding: 3.25rem 0 4rem;
    }
    .contact-channel__arrow {
        display: none;
    }
    .contact-form__submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page__orb,
    .contact-channel__sheen,
    .contact-page__underline,
    .contact-channel,
    .contact-form__head,
    .contact-field,
    .contact-form__actions,
    .contact-channel__icon,
    .contact-form__submit,
    .contact-form__submit-icon {
        animation: none !important;
        transition: none !important;
    }
    .contact-page__intro.reveal.visible .contact-page__underline {
        width: min(9rem, 40%);
    }
    .contact-stage.reveal.visible .contact-channel,
    .contact-stage.reveal.visible .contact-form__head,
    .contact-stage.reveal.visible .contact-field,
    .contact-stage.reveal.visible .contact-form__actions {
        opacity: 1;
        transform: none;
    }
    .contact-channel:not(.contact-channel--static):hover {
        transform: none;
    }
}

/* ??? Blog ??? */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
}

.blog-card {
    --blog-accent: #E61E26;
    --blog-accent-soft: rgba(230, 30, 38, 0.12);
    position: relative;
    border-radius: 1.35rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.blog-card--brand { --blog-accent: #ca8a04; --blog-accent-soft: rgba(202, 138, 4, 0.14); }
.blog-card--signal { --blog-accent: #ea580c; --blog-accent-soft: rgba(234, 88, 12, 0.14); }
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -22px rgba(15, 23, 42, 0.45);
}
.blog-card__hit {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0f172a;
}
.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.05); }
.blog-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 23, 42, 0.35) 100%);
    opacity: 0.85;
    pointer-events: none;
}
.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.25rem 1.35rem 1.4rem;
    flex: 1;
}
.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    text-transform: uppercase;
}
.blog-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    transition: color 0.25s ease;
}
.blog-card:hover .blog-card__title { color: var(--blog-accent); }
.blog-card__excerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blog-accent);
}
.blog-card__cta svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.25s ease;
}
.blog-card:hover .blog-card__cta svg { transform: translateX(3px); }

/* ==========================================================================
   Blog article — layout + typography
   ========================================================================== */
.blog-article {
    --ba-ink: #1e293b;
    --ba-muted: #64748b;
    --ba-soft: #f8fafc;
    --ba-line: rgba(15, 23, 42, 0.08);
    --ba-accent: #c41820;
    --ba-gold: #ca8a04;
    background:
        radial-gradient(80% 40% at 50% 0%, rgba(254, 242, 242, 0.85) 0%, transparent 60%),
        linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.blog-article__hero {
    padding: 4rem 0 1.5rem;
}
@media (min-width: 1024px) {
    .blog-article__hero { padding: 5.5rem 0 2rem; }
}
.blog-article__hero-inner,
.blog-article__measure,
.blog-article__cover-wrap {
    width: 100%;
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .blog-article__hero-inner,
    .blog-article__measure,
    .blog-article__cover-wrap {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
.blog-article__cover-wrap {
    max-width: 56rem;
    margin-bottom: 2.5rem;
}
.blog-article__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #b91c1c;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}
.blog-article__back svg {
    width: 1rem;
    height: 1rem;
}
.blog-article__back:hover {
    color: #7f1d1d;
    transform: translateX(-2px);
}
.blog-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ba-muted);
}
.blog-article__meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f5c84c;
}
.blog-article__title {
    margin: 0;
    font-size: clamp(1.85rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.blog-article__dek {
    margin: 1.25rem 0 0;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--ba-muted);
    max-width: 40rem;
}
.blog-article__body {
    padding-bottom: 5rem;
}
@media (min-width: 1024px) {
    .blog-article__body { padding-bottom: 6.5rem; }
}

.blog-post-cover {
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 28px 60px -30px rgba(15, 23, 42, 0.5);
    background: #0f172a;
}
.blog-post-cover__img {
    display: block;
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
}

.blog-prose {
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--ba-ink);
    letter-spacing: 0.01em;
}
.blog-prose > * + * { margin-top: 1.35rem; }
.blog-prose > h2 + *,
.blog-prose > h3 + * { margin-top: 0.85rem; }
.blog-prose p {
    margin: 0;
    text-wrap: pretty;
}
.blog-prose > p:first-of-type {
    font-size: 1.22rem;
    line-height: 1.8;
    color: #334155;
}
.blog-prose > p:first-of-type::first-letter {
    float: left;
    margin: 0.12em 0.12em 0 0;
    padding: 0.05em 0.08em 0;
    font-family: Syne, Poppins, ui-sans-serif, sans-serif;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 0.85;
    color: var(--ba-accent);
}
.blog-prose h2,
.blog-prose h3 {
    font-family: Syne, Poppins, ui-sans-serif, sans-serif;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.blog-prose h2 {
    font-size: clamp(1.45rem, 2.5vw, 1.75rem);
    margin-top: 2.75rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #c41820 0%, #f5c84c 45%, transparent 100%) 1;
}
.blog-prose h3 {
    font-size: clamp(1.2rem, 2vw, 1.35rem);
    margin-top: 2.15rem;
    color: #1e293b;
}
.blog-prose a {
    color: var(--ba-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.blog-prose a:hover { color: #7f1d1d; }
.blog-prose ul,
.blog-prose ol {
    margin: 1.5rem 0;
    padding: 1.1rem 1.1rem 1.1rem 1.35rem;
    background: linear-gradient(180deg, #fff 0%, #fef9f9 100%);
    border: 1px solid var(--ba-line);
    border-radius: 1rem;
    box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.35);
}
.blog-prose ul { list-style: none; padding-left: 1.1rem; }
.blog-prose ul li {
    position: relative;
    padding-left: 1.35rem;
}
.blog-prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    background: linear-gradient(145deg, #c41820, #ca8a04);
    transform: rotate(45deg);
}
.blog-prose ol {
    list-style: none;
    counter-reset: blog-ol;
    padding-left: 1.1rem;
}
.blog-prose ol li {
    position: relative;
    padding-left: 2.1rem;
    counter-increment: blog-ol;
}
.blog-prose ol li::before {
    content: counter(blog-ol);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, #b91c1c, #991b1b);
}
.blog-prose li + li { margin-top: 0.65rem; }
.blog-prose li {
    color: #334155;
    line-height: 1.7;
}
.blog-prose blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.35rem 1.25rem 1.5rem;
    border-left: 4px solid #f5c84c;
    background:
        linear-gradient(135deg, rgba(253, 192, 16, 0.12) 0%, rgba(254, 242, 242, 0.65) 100%);
    border-radius: 0 1rem 1rem 0;
    color: #334155;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.7;
    position: relative;
}
.blog-prose blockquote p { margin: 0; }
.blog-prose blockquote p + p { margin-top: 0.75rem; }
.blog-prose strong,
.blog-prose b {
    color: #0f172a;
    font-weight: 700;
}
.blog-prose em,
.blog-prose i {
    color: #475569;
}
.blog-prose hr {
    border: 0;
    height: 1px;
    margin: 2.5rem 0;
    background: linear-gradient(90deg, transparent, rgba(196, 24, 32, 0.35), rgba(245, 200, 76, 0.55), transparent);
}

.blog-article__cta {
    margin-top: 3.5rem;
    padding: 1.75rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(127, 29, 29, 0.12);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(245, 200, 76, 0.18) 0%, transparent 50%),
        linear-gradient(145deg, #6b1024 0%, #4a0b18 100%);
    color: #fff;
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .blog-article__cta {
        padding: 2rem 2.25rem;
        grid-template-columns: 1.4fr auto;
        align-items: center;
    }
}
.blog-article__cta-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f5c84c;
}
.blog-article__cta-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
.blog-article__cta-text {
    margin: 0.55rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 245, 245, 0.78);
    max-width: 32rem;
}
.blog-article__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.blog-article__cta-primary,
.blog-article__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.15rem;
    border-radius: 0.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.blog-article__cta-primary {
    background: #fff;
    color: #7f1d1d;
}
.blog-article__cta-primary:hover {
    transform: translateY(-2px);
    background: #fff7ed;
}
.blog-article__cta-secondary {
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.blog-article__cta-secondary:hover {
    border-color: rgba(245, 200, 76, 0.55);
    background: rgba(245, 200, 76, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card__img,
    .blog-card__cta svg,
    .blog-article__back,
    .blog-article__cta-primary {
        transition: none !important;
    }
    .blog-card:hover { transform: none; }
    .blog-card:hover .blog-card__img { transform: none; }
    .blog-article__back:hover,
    .blog-article__cta-primary:hover { transform: none; }
}

/* ==========================================================================
   Brand chapter: Mission & Vision ? Why Choose ? Commitment
   Shared ocean(red) / brand(yellow) / signal(orange) language
   ========================================================================== */

.brand-chapter {
    --dx-ocean: #ef4444;
    --dx-ocean-deep: #dc2626;
    --dx-ocean-soft: rgba(239, 68, 68, 0.12);
    --dx-brand: #eab308;
    --dx-brand-deep: #ca8a04;
    --dx-brand-soft: rgba(234, 179, 8, 0.14);
    --dx-signal: #f97316;
    --dx-signal-deep: #ea580c;
    --dx-signal-soft: rgba(249, 115, 22, 0.12);
    --dx-ink: #0f172a;
    --dx-muted: #64748b;
    --dx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    isolation: isolate;
}

/* Shared denser intro rhythm across Mission / Why Choose / Commitment */
.brand-chapter .mv-section__eyebrow,
.brand-chapter .wc-section__eyebrow {
    margin-bottom: 0.65rem;
}

.brand-chapter .mv-section__title-underline {
    margin-top: 0.65rem;
}

.brand-chapter .wc-section__title-underline {
    margin-top: 0.55rem;
}

.brand-chapter .mv-section__subtitle,
.brand-chapter .wc-section__subtitle {
    margin-top: 0.75rem;
}

@keyframes brandChapterOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(12px, -18px) scale(1.06); }
}

@keyframes brandChapterSheen {
    0% { transform: translateX(-130%) skewX(-16deg); opacity: 0; }
    12% { opacity: 0.55; }
    45%, 100% { transform: translateX(220%) skewX(-16deg); opacity: 0; }
}

@keyframes brandAccentPulse {
    0%, 100% { opacity: 0.7; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.25); }
    50% { opacity: 1; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* --------------------------------------------------------------------------
   Mission & Vision
   -------------------------------------------------------------------------- */
.mv-section {
    --mv-ocean: var(--dx-ocean);
    --mv-brand: var(--dx-brand-deep);
    --mv-signal: var(--dx-signal-deep);
    background: transparent;
}

.mv-section__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 8% 12%, rgba(239, 68, 68, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 48% 42% at 92% 18%, rgba(234, 179, 8, 0.13) 0%, transparent 52%),
        radial-gradient(ellipse 42% 38% at 68% 92%, rgba(249, 115, 22, 0.1) 0%, transparent 55%),
        linear-gradient(168deg, #fff7f5 0%, #fef2f2 28%, #fffbeb 62%, #fff7ed 100%);
}

.mv-section__orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.mv-section__orb--ocean {
    width: 22rem;
    height: 22rem;
    top: -6rem;
    left: -4rem;
    background: rgba(239, 68, 68, 0.22);
    animation: brandChapterOrb 15s ease-in-out infinite;
}

.mv-section__orb--brand {
    width: 26rem;
    height: 26rem;
    top: 35%;
    right: -8rem;
    background: rgba(234, 179, 8, 0.18);
    animation: brandChapterOrb 17s ease-in-out infinite reverse;
}

.mv-section__orb--signal {
    width: 18rem;
    height: 18rem;
    bottom: -4rem;
    left: 40%;
    background: rgba(249, 115, 22, 0.14);
    animation: brandChapterOrb 13s ease-in-out infinite 1.2s;
}

.mv-section__grid-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.9) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.mv-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(239, 68, 68, 0.18);
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px -18px rgba(185, 28, 28, 0.35);
}

.mv-section__title {
    position: relative;
    display: inline-block;
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--dx-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.mv-section__amp {
    display: inline-block;
    margin: 0 0.2em;
    color: var(--dx-brand-deep);
    font-weight: 600;
    transform: translateY(-0.05em);
}

.mv-section__title-underline {
    display: block;
    height: 3px;
    width: 0;
    margin: 0.85rem auto 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--dx-ocean), var(--dx-brand), var(--dx-signal));
    transition: width 0.85s var(--dx-ease) 0.2s;
}

.mv-section__intro.reveal.visible .mv-section__title-underline {
    width: min(12rem, 55%);
}

.mv-section__subtitle {
    margin-top: 1rem;
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.65;
}

/* Mobile segmented toggle */
.mv-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.3rem;
    margin: 0 auto 1.15rem;
    max-width: 22rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(239, 68, 68, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px -24px rgba(15, 23, 42, 0.35);
}

.mv-toggle__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 650;
    cursor: pointer;
    transition: color 0.25s ease;
}

.mv-toggle__btn.is-active {
    color: var(--dx-ink);
}

.mv-toggle__icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
}

.mv-toggle__icon svg {
    width: 100%;
    height: 100%;
}

.mv-toggle__icon--ocean { color: var(--dx-ocean-deep); }
.mv-toggle__icon--brand { color: var(--dx-brand-deep); }

.mv-toggle__glider {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: calc(50% - 0.3rem);
    height: calc(100% - 0.6rem);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(254, 242, 242, 0.95));
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.1),
        0 0 0 1px rgba(239, 68, 68, 0.08);
    transition: transform 0.35s var(--dx-ease);
    pointer-events: none;
}

.mv-toggle[data-active="vision"] .mv-toggle__glider {
    transform: translateX(100%);
}

/* Panels ? chromatic glass (distinct Mission / Vision fills) */
.mv-panels {
    display: grid;
    gap: 1.25rem;
}

.mv-panel {
    position: relative;
    display: none;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.2rem 1.2rem 1.2rem 1.35rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    transition: transform 0.35s var(--dx-ease), box-shadow 0.35s var(--dx-ease), border-color 0.35s ease;
}

.mv-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0.9;
    transition: opacity 0.35s ease;
}

.mv-panel:hover::before {
    opacity: 1;
}

.mv-panel.is-active {
    display: flex;
}

.mv-panel:hover {
    transform: translateY(-4px);
}

/* Mission: ocean red / signal orange glass */
.mv-panel--mission {
    background:
        radial-gradient(ellipse 70% 55% at 100% 0%, rgba(249, 115, 22, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(239, 68, 68, 0.22) 0%, transparent 50%),
        linear-gradient(155deg,
            rgba(254, 226, 226, 0.92) 0%,
            rgba(255, 237, 213, 0.78) 42%,
            rgba(254, 242, 242, 0.88) 100%);
    border: 1px solid rgba(239, 68, 68, 0.38);
    box-shadow:
        0 22px 48px -26px rgba(185, 28, 28, 0.42),
        0 10px 28px -20px rgba(249, 115, 22, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        inset 0 -1px 0 rgba(239, 68, 68, 0.06);
}

.mv-panel--mission::before {
    background: linear-gradient(145deg,
        rgba(239, 68, 68, 0.85),
        rgba(249, 115, 22, 0.55),
        rgba(220, 38, 38, 0.45));
}

.mv-panel--mission:hover {
    border-color: rgba(220, 38, 38, 0.55);
    box-shadow:
        0 28px 56px -24px rgba(185, 28, 28, 0.5),
        0 14px 32px -16px rgba(249, 115, 22, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

/* Vision: brand yellow / amber glass */
.mv-panel--vision {
    background:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(234, 179, 8, 0.32) 0%, transparent 55%),
        radial-gradient(ellipse 55% 48% at 100% 100%, rgba(249, 115, 22, 0.18) 0%, transparent 52%),
        linear-gradient(155deg,
            rgba(254, 249, 195, 0.92) 0%,
            rgba(255, 247, 237, 0.8) 45%,
            rgba(254, 252, 232, 0.9) 100%);
    border: 1px solid rgba(202, 138, 4, 0.42);
    box-shadow:
        0 22px 48px -26px rgba(161, 98, 7, 0.38),
        0 10px 28px -20px rgba(234, 179, 8, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        inset 0 -1px 0 rgba(202, 138, 4, 0.08);
}

.mv-panel--vision::before {
    background: linear-gradient(145deg,
        rgba(234, 179, 8, 0.9),
        rgba(245, 158, 11, 0.55),
        rgba(249, 115, 22, 0.5));
}

.mv-panel--vision:hover {
    border-color: rgba(202, 138, 4, 0.6);
    box-shadow:
        0 28px 56px -24px rgba(161, 98, 7, 0.45),
        0 14px 32px -16px rgba(234, 179, 8, 0.38),
        0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.mv-panel__rail {
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 4px;
    border-radius: 9999px;
    z-index: 1;
    animation: brandAccentPulse 3.2s ease-in-out infinite;
}

.mv-panel--mission .mv-panel__rail {
    background: linear-gradient(180deg, #ef4444 0%, #f97316 55%, #dc2626 100%);
    box-shadow:
        0 0 12px rgba(239, 68, 68, 0.55),
        0 0 0 1px rgba(239, 68, 68, 0.25);
}

.mv-panel--vision .mv-panel__rail {
    background: linear-gradient(180deg, #eab308 0%, #f59e0b 50%, #ea580c 100%);
    box-shadow:
        0 0 12px rgba(234, 179, 8, 0.5),
        0 0 0 1px rgba(202, 138, 4, 0.28);
}

.mv-panel__glow {
    position: absolute;
    width: 14rem;
    height: 14rem;
    border-radius: 9999px;
    filter: blur(42px);
    pointer-events: none;
    opacity: 0.72;
    transition: opacity 0.35s ease;
    z-index: 0;
}

.mv-panel--mission .mv-panel__glow {
    top: -4rem;
    right: -2.5rem;
    background: rgba(239, 68, 68, 0.42);
}

.mv-panel--vision .mv-panel__glow {
    bottom: -4rem;
    right: -1.5rem;
    background: rgba(234, 179, 8, 0.4);
}

.mv-panel:hover .mv-panel__glow {
    opacity: 1;
}

.mv-panel__sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.mv-panel:hover .mv-panel__sheen {
    animation: brandChapterSheen 1.15s var(--dx-ease) 1;
}

.mv-panel__head,
.mv-panel__body {
    position: relative;
    z-index: 2;
}

.mv-panel__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.mv-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.35s var(--dx-ease);
}

.mv-panel:hover .mv-panel__icon {
    transform: scale(1.08) rotate(3deg);
}

.mv-panel__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mv-panel--mission .mv-panel__icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 10px 22px -10px rgba(239, 68, 68, 0.7);
}

.mv-panel--vision .mv-panel__icon {
    background: linear-gradient(135deg, #eab308, #ea580c);
    box-shadow: 0 10px 22px -10px rgba(202, 138, 4, 0.65);
}

.mv-panel__kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.mv-panel--mission .mv-panel__kicker { color: var(--dx-ocean-deep); }
.mv-panel--vision .mv-panel__kicker { color: var(--dx-brand-deep); }

.mv-panel__label {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dx-ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mv-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mv-panel__body p {
    margin: 0;
    color: #475569;
    font-size: 0.975rem;
    line-height: 1.65;
}

@media (min-width: 768px) {
    .mv-panels {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        align-items: stretch;
    }

    .mv-panel,
    .mv-panel.is-active {
        display: flex;
    }

    .mv-panel--vision {
        transition-delay: 0.06s;
    }

    .mv-panel {
        padding: 1.35rem 1.3rem 1.35rem 1.4rem;
        min-height: 100%;
    }

    .mv-panel__label {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .mv-panels { gap: 1.35rem; }
    .mv-panel { padding: 1.45rem 1.4rem 1.45rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mv-section__orb,
    .mv-panel,
    .mv-panel__icon,
    .mv-panel__rail,
    .mv-panel__sheen,
    .mv-toggle__glider,
    .mv-section__title-underline {
        animation: none !important;
        transition: none !important;
    }

    .mv-panel:hover {
        transform: none;
    }

    .mv-section__intro.reveal .mv-section__title-underline,
    .mv-section__intro.reveal.visible .mv-section__title-underline {
        width: min(12rem, 55%);
    }
}

/* --------------------------------------------------------------------------
   Why Choose / Serving Nairobi
   -------------------------------------------------------------------------- */
.wc-section {
    --wc-ocean: var(--dx-ocean);
    --wc-ocean-deep: var(--dx-ocean-deep);
    --wc-brand: var(--dx-brand);
    --wc-brand-deep: var(--dx-brand-deep);
    --wc-signal: var(--dx-signal);
    --wc-ink: var(--dx-ink);
    --wc-muted: var(--dx-muted);
    --wc-ease: var(--dx-ease);
    background: transparent;
}

.wc-section__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 42% at 12% 16%, rgba(239, 68, 68, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 46% 40% at 88% 20%, rgba(234, 179, 8, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 40% 36% at 70% 90%, rgba(249, 115, 22, 0.1) 0%, transparent 50%),
        linear-gradient(172deg, #fffbeb 0%, #fef2f2 36%, #fff7ed 68%, #fff8f1 100%);
}

.wc-section__orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.58;
}

.wc-section__orb--ocean {
    width: 20rem;
    height: 20rem;
    top: -5rem;
    left: -5rem;
    background: rgba(239, 68, 68, 0.2);
    animation: brandChapterOrb 15s ease-in-out infinite;
}

.wc-section__orb--brand {
    width: 16rem;
    height: 16rem;
    top: 28%;
    right: -4rem;
    background: rgba(234, 179, 8, 0.18);
    animation: brandChapterOrb 17s ease-in-out infinite reverse;
}

.wc-section__orb--signal {
    width: 14rem;
    height: 14rem;
    bottom: -3rem;
    left: 42%;
    background: rgba(249, 115, 22, 0.15);
    animation: brandChapterOrb 13s ease-in-out infinite 1.2s;
}

.wc-section__grid-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.035;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.9) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.wc-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(239, 68, 68, 0.18);
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px -18px rgba(185, 28, 28, 0.35);
}

.wc-section__title {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    color: var(--wc-ink);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.65rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.wc-section__title-underline {
    display: block;
    height: 3px;
    width: 0;
    margin: 0.55rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wc-ocean), var(--wc-brand), var(--wc-signal));
    transition: width 0.7s var(--wc-ease);
}

.wc-section__intro.reveal.visible .wc-section__title-underline {
    width: min(14rem, 60%);
}

.wc-section__subtitle {
    margin: 0.7rem auto 0;
    max-width: 36rem;
    color: var(--wc-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.wc-cards {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
}

.wc-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.35rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 1.2rem 1.15rem 1.15rem;
    transition: transform 0.35s var(--wc-ease), box-shadow 0.35s var(--wc-ease), border-color 0.35s var(--wc-ease);
}

.wc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0.9;
    transition: opacity 0.35s ease;
}

.wc-card:hover::before {
    opacity: 1;
}

.wc-card:hover {
    transform: translateY(-4px);
}

/* Why Choose: ocean-red / signal-orange tinted glass */
.wc-card--why {
    background:
        radial-gradient(ellipse 70% 55% at 100% 0%, rgba(249, 115, 22, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(239, 68, 68, 0.22) 0%, transparent 50%),
        linear-gradient(155deg,
            rgba(254, 226, 226, 0.92) 0%,
            rgba(255, 237, 213, 0.78) 42%,
            rgba(254, 242, 242, 0.88) 100%);
    border: 1px solid rgba(239, 68, 68, 0.38);
    box-shadow:
        0 22px 48px -26px rgba(185, 28, 28, 0.42),
        0 10px 28px -20px rgba(249, 115, 22, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        inset 0 -1px 0 rgba(239, 68, 68, 0.06);
}

.wc-card--why::before {
    background: linear-gradient(145deg,
        rgba(239, 68, 68, 0.85),
        rgba(249, 115, 22, 0.55),
        rgba(220, 38, 38, 0.45));
}

.wc-card--why:hover {
    border-color: rgba(220, 38, 38, 0.55);
    box-shadow:
        0 28px 56px -24px rgba(185, 28, 28, 0.5),
        0 14px 32px -16px rgba(249, 115, 22, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

/* Serving: brand-yellow / amber tinted glass */
.wc-card--serving {
    padding: 0.9rem 0.9rem 0.85rem;
    background:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(234, 179, 8, 0.32) 0%, transparent 55%),
        radial-gradient(ellipse 55% 48% at 100% 100%, rgba(249, 115, 22, 0.18) 0%, transparent 52%),
        linear-gradient(155deg,
            rgba(254, 249, 195, 0.92) 0%,
            rgba(255, 247, 237, 0.8) 45%,
            rgba(254, 252, 232, 0.9) 100%);
    border: 1px solid rgba(202, 138, 4, 0.42);
    box-shadow:
        0 22px 48px -26px rgba(161, 98, 7, 0.38),
        0 10px 28px -20px rgba(234, 179, 8, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        inset 0 -1px 0 rgba(202, 138, 4, 0.08);
}

.wc-card--serving .wc-card__head {
    gap: 0.55rem;
    margin-bottom: 0.4rem;
}

.wc-card--serving .wc-card__icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.65rem;
}

.wc-card--serving .wc-card__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.wc-card--serving .wc-card__kicker {
    margin-bottom: 0.1rem;
}

.wc-card--serving .wc-card__label {
    font-size: 1.1rem;
    line-height: 1.2;
}

.wc-card--serving .wc-card__body {
    gap: 0.35rem;
}

.wc-card--serving .wc-card__body p {
    font-size: 0.88rem;
    line-height: 1.45;
}

.wc-card--serving::before {
    background: linear-gradient(145deg,
        rgba(234, 179, 8, 0.9),
        rgba(245, 158, 11, 0.55),
        rgba(249, 115, 22, 0.5));
}

.wc-card--serving:hover {
    border-color: rgba(202, 138, 4, 0.6);
    box-shadow:
        0 28px 56px -24px rgba(161, 98, 7, 0.45),
        0 14px 32px -16px rgba(234, 179, 8, 0.38),
        0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.wc-card__rail {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    z-index: 1;
    animation: brandAccentPulse 3.4s ease-in-out infinite;
}

.wc-card--why .wc-card__rail {
    background: linear-gradient(180deg, #ef4444 0%, #f97316 55%, #dc2626 100%);
    box-shadow:
        0 0 12px rgba(239, 68, 68, 0.55),
        0 0 0 1px rgba(239, 68, 68, 0.25);
}

.wc-card--serving .wc-card__rail {
    background: linear-gradient(180deg, #eab308 0%, #f59e0b 50%, #ea580c 100%);
    box-shadow:
        0 0 12px rgba(234, 179, 8, 0.5),
        0 0 0 1px rgba(202, 138, 4, 0.28);
}

.wc-card__glow {
    position: absolute;
    width: 14rem;
    height: 14rem;
    border-radius: 9999px;
    filter: blur(42px);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.4s var(--wc-ease);
    z-index: 0;
}

.wc-card--why .wc-card__glow {
    top: -3rem;
    right: -2rem;
    background: rgba(239, 68, 68, 0.32);
}

.wc-card--serving .wc-card__glow {
    top: -3rem;
    right: -2rem;
    background: rgba(234, 179, 8, 0.34);
}

.wc-card:hover .wc-card__glow {
    opacity: 1;
}

.wc-card__sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.wc-card:hover .wc-card__sheen {
    animation: brandChapterSheen 1.15s var(--wc-ease) 1;
}

.wc-card__head,
.wc-card__body,
.wc-process {
    position: relative;
    z-index: 2;
}

.wc-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}

.wc-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.8rem;
    transition: transform 0.35s var(--wc-ease);
}

.wc-card:hover .wc-card__icon {
    transform: scale(1.08) rotate(-3deg);
}

.wc-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.wc-card--why .wc-card__icon {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(239, 68, 68, 0.55);
}

.wc-card--serving .wc-card__icon {
    background: linear-gradient(135deg, #eab308, #f97316);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(234, 179, 8, 0.55);
}

.wc-card__kicker {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wc-card--why .wc-card__kicker { color: var(--wc-ocean-deep); }
.wc-card--serving .wc-card__kicker { color: var(--wc-brand-deep); }

.wc-card__label {
    margin: 0;
    color: var(--wc-ink);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.wc-card__body {
    display: grid;
    gap: 0.65rem;
}

.wc-card__body p {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

.wc-focus {
    list-style: none;
    margin: 0.05rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.wc-focus__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: default;
    outline: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        transform 0.28s var(--wc-ease),
        background 0.28s var(--wc-ease),
        color 0.28s var(--wc-ease),
        border-color 0.28s var(--wc-ease),
        box-shadow 0.28s var(--wc-ease);
    opacity: 0;
    transform: translateY(8px);
}

.wc-cards.reveal.visible .wc-focus__chip {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.08s + var(--wc-i, 0) * 0.06s);
}

.wc-focus__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.7;
    transition: transform 0.28s var(--wc-ease), box-shadow 0.28s var(--wc-ease);
}

.wc-focus__text { position: relative; z-index: 1; }

.wc-focus__hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.4rem);
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
    border-radius: 0.5rem;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--wc-ease), transform 0.25s var(--wc-ease);
    z-index: 3;
}

.wc-focus__hint::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: #0f172a;
}

.wc-focus__chip--ocean {
    background:
        linear-gradient(145deg, rgba(254, 226, 226, 0.92) 0%, rgba(255, 237, 213, 0.75) 100%);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow:
        0 6px 16px -12px rgba(185, 28, 28, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.wc-focus__chip--brand {
    background:
        linear-gradient(145deg, rgba(254, 249, 195, 0.95) 0%, rgba(255, 247, 237, 0.78) 100%);
    color: #a16207;
    border-color: rgba(202, 138, 4, 0.4);
    box-shadow:
        0 6px 16px -12px rgba(161, 98, 7, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.wc-focus__chip--signal {
    background:
        linear-gradient(145deg, rgba(255, 237, 213, 0.95) 0%, rgba(254, 242, 242, 0.78) 100%);
    color: #c2410c;
    border-color: rgba(249, 115, 22, 0.38);
    box-shadow:
        0 6px 16px -12px rgba(194, 65, 12, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.wc-focus__chip:hover,
.wc-focus__chip:focus-visible,
.wc-focus__chip.is-lit {
    color: #fff;
    transform: translateY(-2px) scale(1.04);
}

.wc-focus__chip--ocean:hover,
.wc-focus__chip--ocean:focus-visible,
.wc-focus__chip--ocean.is-lit {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626;
    box-shadow: 0 10px 24px -10px rgba(239, 68, 68, 0.65);
}

.wc-focus__chip--brand:hover,
.wc-focus__chip--brand:focus-visible,
.wc-focus__chip--brand.is-lit {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    border-color: #ca8a04;
    box-shadow: 0 10px 24px -10px rgba(234, 179, 8, 0.65);
    color: #1c1917;
}

.wc-focus__chip--signal:hover,
.wc-focus__chip--signal:focus-visible,
.wc-focus__chip--signal.is-lit {
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-color: #ea580c;
    box-shadow: 0 10px 24px -10px rgba(249, 115, 22, 0.65);
}

.wc-focus__chip:hover .wc-focus__dot,
.wc-focus__chip:focus-visible .wc-focus__dot,
.wc-focus__chip.is-lit .wc-focus__dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.wc-focus__chip:hover .wc-focus__hint,
.wc-focus__chip:focus-visible .wc-focus__hint,
.wc-focus__chip.is-lit .wc-focus__hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.wc-process {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0.4rem 0 0;
    border-top: 1px solid rgba(202, 138, 4, 0.22);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.wc-process__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    transition: transform 0.25s var(--wc-ease), background 0.25s var(--wc-ease), border-color 0.25s var(--wc-ease), color 0.25s var(--wc-ease), box-shadow 0.25s var(--wc-ease);
    opacity: 0;
    transform: translateY(6px);
}

.wc-cards.reveal.visible .wc-process__chip {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.18s + var(--wc-i, 0) * 0.05s);
}

.wc-process__num {
    font-variant-numeric: tabular-nums;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.wc-process__chip--ocean {
    background:
        linear-gradient(145deg, rgba(254, 226, 226, 0.9) 0%, rgba(255, 237, 213, 0.72) 100%);
    border-color: rgba(239, 68, 68, 0.32);
    color: #b91c1c;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.wc-process__chip--brand {
    background:
        linear-gradient(145deg, rgba(254, 249, 195, 0.92) 0%, rgba(255, 247, 237, 0.75) 100%);
    border-color: rgba(202, 138, 4, 0.38);
    color: #a16207;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.wc-process__chip--signal {
    background:
        linear-gradient(145deg, rgba(255, 237, 213, 0.92) 0%, rgba(254, 242, 242, 0.75) 100%);
    border-color: rgba(249, 115, 22, 0.35);
    color: #c2410c;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.wc-process__chip--ocean:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(239, 68, 68, 0.55);
}

.wc-process__chip--brand:hover {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    border-color: #ca8a04;
    color: #1c1917;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(234, 179, 8, 0.55);
}

.wc-process__chip--signal:hover {
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-color: #ea580c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(249, 115, 22, 0.55);
}

@media (min-width: 768px) {
    .wc-card { padding: 1.25rem 1.2rem 1.15rem; }
    .wc-card__label { font-size: 1.25rem; }
    .wc-card__head { margin-bottom: 0.7rem; }
    .wc-card__body { gap: 0.6rem; }
    .wc-card--serving { padding: 1rem 0.95rem 0.9rem; }
    .wc-card--serving .wc-card__head { margin-bottom: 0.4rem; }
    .wc-card--serving .wc-card__label { font-size: 1.15rem; }
    .wc-card--serving .wc-card__body { gap: 0.4rem; }
}

@media (min-width: 1024px) {
    .wc-cards {
        grid-template-columns: 1fr 1fr;
        gap: 1.15rem;
        align-items: stretch;
    }
    .wc-card {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding: 1.25rem 1.2rem 1.15rem;
    }
    .wc-card__body { flex: 1; }
    .wc-card--serving {
        padding: 1.05rem 1rem 0.95rem;
        justify-content: flex-start;
    }
    /* Keep Serving content packed ? avoid empty air between copy and steps */
    .wc-card--serving .wc-card__body {
        flex: 0 0 auto;
        gap: 0.35rem;
    }
    .wc-card--serving .wc-process {
        margin-top: 0.4rem;
        padding-top: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wc-section__orb,
    .wc-section__title-underline,
    .wc-card,
    .wc-card__icon,
    .wc-card__glow,
    .wc-card__rail,
    .wc-card__sheen,
    .wc-focus__chip,
    .wc-focus__dot,
    .wc-focus__hint,
    .wc-process__chip {
        animation: none !important;
        transition: none !important;
    }
    .wc-card:hover,
    .wc-focus__chip:hover,
    .wc-focus__chip:focus-visible,
    .wc-focus__chip.is-lit,
    .wc-process__chip:hover {
        transform: none;
    }
    .wc-cards.reveal .wc-focus__chip,
    .wc-cards.reveal.visible .wc-focus__chip,
    .wc-cards.reveal .wc-process__chip,
    .wc-cards.reveal.visible .wc-process__chip {
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }
    .wc-section__intro.reveal .wc-section__title-underline,
    .wc-section__intro.reveal.visible .wc-section__title-underline {
        width: min(14rem, 60%);
    }
    .wc-focus__hint { display: none; }
}

/* --------------------------------------------------------------------------
   Our Commitment ? wide colored glass panel
   -------------------------------------------------------------------------- */
.commit-section {
    background: transparent;
}

.commit-section__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 48% at 10% 16%, rgba(239, 68, 68, 0.18) 0%, transparent 58%),
        radial-gradient(ellipse 52% 44% at 92% 72%, rgba(234, 179, 8, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 42% 38% at 52% 6%, rgba(249, 115, 22, 0.14) 0%, transparent 52%),
        radial-gradient(ellipse 36% 30% at 48% 95%, rgba(239, 68, 68, 0.08) 0%, transparent 60%),
        linear-gradient(175deg, #fff7ed 0%, #fef2f2 36%, #fffbeb 68%, #fff7ed 100%);
}

.commit-section__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.72;
}

.commit-section__orb--ocean {
    width: 24rem;
    height: 24rem;
    top: -6rem;
    left: -5rem;
    background: rgba(239, 68, 68, 0.28);
    animation: brandChapterOrb 14s ease-in-out infinite;
}

.commit-section__orb--brand {
    width: 28rem;
    height: 28rem;
    right: -7rem;
    bottom: -8rem;
    background: rgba(234, 179, 8, 0.22);
    animation: brandChapterOrb 16s ease-in-out infinite reverse;
}

.commit-section__orb--signal {
    width: 18rem;
    height: 18rem;
    top: 38%;
    left: 58%;
    background: rgba(249, 115, 22, 0.18);
    animation: brandChapterOrb 12s ease-in-out infinite 1s;
}

.commit-section__grid-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.9) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 72% 62% at 50% 48%, #000 18%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 48%, #000 18%, transparent 78%);
}

.commit-section__rule {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(16rem, 48%);
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.55), rgba(234, 179, 8, 0.6), rgba(249, 115, 22, 0.5), transparent);
    z-index: 1;
}

.commit-section__frame {
    width: min(100% - 2rem, 58rem);
    margin-inline: auto;
    padding-inline: 0;
}

@media (min-width: 640px) {
    .commit-section__frame {
        width: min(100% - 3rem, 60rem);
    }
}

@media (min-width: 1024px) {
    .commit-section__frame {
        width: min(100% - 4rem, 64rem);
    }
}

.commit-section__glass {
    position: relative;
    z-index: 2;
    padding: 2rem 1.35rem 2.1rem;
    border-radius: 1.75rem;
    background:
        radial-gradient(ellipse 70% 55% at 12% 8%, rgba(239, 68, 68, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 92% 88%, rgba(234, 179, 8, 0.14) 0%, transparent 52%),
        radial-gradient(ellipse 45% 40% at 70% 18%, rgba(249, 115, 22, 0.12) 0%, transparent 50%),
        linear-gradient(160deg, rgba(255, 247, 237, 0.72) 0%, rgba(254, 242, 242, 0.58) 42%, rgba(255, 251, 235, 0.65) 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 40px 80px -36px rgba(185, 28, 28, 0.28),
        0 24px 48px -32px rgba(15, 23, 42, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        inset 0 -1px 0 rgba(249, 115, 22, 0.08);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    overflow: hidden;
}

.commit-section__glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        140deg,
        rgba(239, 68, 68, 0.65) 0%,
        rgba(234, 179, 8, 0.45) 38%,
        rgba(249, 115, 22, 0.5) 68%,
        rgba(239, 68, 68, 0.35) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0.9;
}

.commit-section__glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
    filter: blur(40px);
    opacity: 0.55;
}

.commit-section__glow--tl {
    width: 14rem;
    height: 14rem;
    top: -4rem;
    left: -3rem;
    background: rgba(239, 68, 68, 0.35);
}

.commit-section__glow--br {
    width: 16rem;
    height: 16rem;
    right: -4rem;
    bottom: -5rem;
    background: rgba(234, 179, 8, 0.3);
}

.commit-section__sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    pointer-events: none;
    z-index: 1;
    animation: brandChapterSheen 8s var(--dx-ease) infinite;
    animation-delay: 1.1s;
}

.commit-section__inner {
    position: relative;
    z-index: 3;
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: 0.25rem;
}

@media (min-width: 640px) {
    .commit-section__glass {
        padding: 2.5rem 2.35rem 2.55rem;
    }

    .commit-section__inner {
        max-width: 48rem;
        padding-inline: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .commit-section__glass {
        padding: 2.85rem 3rem 2.95rem;
        border-radius: 2rem;
    }

    .commit-section__inner {
        max-width: 50rem;
    }
}

.commit-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.92), rgba(255, 247, 237, 0.88));
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #b91c1c;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow:
        0 10px 28px -18px rgba(185, 28, 28, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.commit-section__title {
    margin: 1rem 0 0;
    font-size: clamp(2rem, 4.4vw, 3.15rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.12;
    color: var(--dx-ink);
    position: relative;
    display: inline-block;
}

.commit-section__title-underline {
    display: block;
    margin: 0.7rem auto 0;
    width: 0;
    height: 3.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ef4444, #eab308 55%, #f97316);
    transition: width 0.9s var(--dx-ease) 0.2s;
}

.commit-section__glass.reveal.visible .commit-section__title-underline {
    width: min(12rem, 52%);
}

.commit-section__body {
    margin-top: 1.5rem;
    display: grid;
    gap: 1.1rem;
}

.commit-section__para {
    margin: 0;
    color: #475569;
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    line-height: 1.7;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s var(--dx-ease) calc(0.2s + var(--commit-i, 0) * 0.12s),
        transform 0.7s var(--dx-ease) calc(0.2s + var(--commit-i, 0) * 0.12s);
}

.commit-section__glass.reveal.visible .commit-section__para {
    opacity: 1;
    transform: translateY(0);
}

.commit-section__para--accented {
    color: #334155;
    font-size: clamp(1.08rem, 1.8vw, 1.25rem);
    line-height: 1.72;
}

.commit-accent {
    font-weight: 700;
    white-space: nowrap;
    padding: 0.05em 0.18em;
    margin: 0 -0.06em;
    border-radius: 0.35em;
    background-image: linear-gradient(transparent 62%, currentColor 62%, currentColor 94%, transparent 94%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition:
        color 0.3s ease,
        background-size 0.6s var(--dx-ease),
        filter 0.3s ease,
        box-shadow 0.3s ease;
}

.commit-section__glass.reveal.visible .commit-accent {
    background-size: 100% 100%;
    transition-delay: 0.5s;
}

.commit-accent--ocean {
    color: #dc2626;
    background-image: linear-gradient(transparent 58%, rgba(239, 68, 68, 0.22) 58%, rgba(239, 68, 68, 0.22) 100%);
    box-shadow: inset 0 -0.08em 0 rgba(239, 68, 68, 0.12);
}

.commit-accent--brand {
    color: #a16207;
    background-image: linear-gradient(transparent 58%, rgba(234, 179, 8, 0.28) 58%, rgba(234, 179, 8, 0.28) 100%);
    box-shadow: inset 0 -0.08em 0 rgba(234, 179, 8, 0.14);
}

.commit-accent--signal {
    color: #c2410c;
    background-image: linear-gradient(transparent 58%, rgba(249, 115, 22, 0.24) 58%, rgba(249, 115, 22, 0.24) 100%);
    box-shadow: inset 0 -0.08em 0 rgba(249, 115, 22, 0.12);
}

.commit-accent:hover,
.commit-accent:focus-visible {
    filter: brightness(1.06);
}

.commit-tagline {
    position: relative;
    margin: 1.85rem auto 0;
    padding: 1.35rem 1.35rem 1.25rem;
    max-width: 40rem;
    border-radius: 1.35rem;
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(239, 68, 68, 0.12) 0%, transparent 55%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.78) 0%, rgba(254, 242, 242, 0.62) 48%, rgba(255, 251, 235, 0.7) 100%);
    border: 1px solid rgba(239, 68, 68, 0.18);
    box-shadow:
        0 24px 52px -30px rgba(185, 28, 28, 0.35),
        0 12px 28px -20px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    transition:
        opacity 0.75s var(--dx-ease) 0.48s,
        transform 0.75s var(--dx-ease) 0.48s,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.commit-section__glass.reveal.visible .commit-tagline {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.commit-tagline:hover {
    border-color: rgba(239, 68, 68, 0.36);
    box-shadow:
        0 28px 56px -28px rgba(239, 68, 68, 0.32),
        0 14px 32px -22px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.commit-tagline__mark {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4.25rem;
    height: 3.5px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(90deg, #ef4444, #eab308, #f97316);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}

.commit-tagline__text {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.4;
    color: var(--dx-ink);
}

.commit-tagline__brand {
    background: linear-gradient(105deg, #dc2626 0%, #ea580c 42%, #ca8a04 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.commit-tagline__sep {
    display: inline-block;
    margin: 0 0.45em;
    color: #94a3b8;
    font-weight: 500;
}

.commit-tagline__rest {
    color: #1e293b;
    font-style: italic;
    font-weight: 600;
}

@media (max-width: 640px) {
    .commit-accent { white-space: normal; }

    .commit-section__frame {
        width: min(100% - 1.5rem, 58rem);
    }

    .commit-tagline {
        padding: 1.2rem 1.1rem 1.1rem;
        margin-top: 1.65rem;
        border-radius: 1.2rem;
    }

    .commit-section__orb--ocean,
    .commit-section__orb--brand,
    .commit-section__orb--signal {
        opacity: 0.45;
    }

    .commit-section__glass {
        padding: 1.85rem 1.2rem 1.95rem;
        border-radius: 1.5rem;
    }

    .commit-section__body {
        margin-top: 1.35rem;
        gap: 1rem;
    }

    .commit-section__glow--tl,
    .commit-section__glow--br {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commit-section__orb,
    .commit-section__sheen,
    .commit-section__para,
    .commit-tagline,
    .commit-section__title-underline,
    .commit-accent {
        animation: none !important;
        transition: none !important;
    }

    .commit-section__glass.reveal .commit-section__para,
    .commit-section__glass.reveal.visible .commit-section__para,
    .commit-section__glass.reveal .commit-tagline,
    .commit-section__glass.reveal.visible .commit-tagline {
        opacity: 1;
        transform: none;
    }

    .commit-section__glass.reveal .commit-section__title-underline,
    .commit-section__glass.reveal.visible .commit-section__title-underline {
        width: min(12rem, 52%);
    }

    .commit-accent {
        background-size: 100% 100%;
    }
}

/* ==========================================================================
   About teaser (homepage Who We Are)
   ========================================================================== */

.about-teaser {
    --at-ocean: var(--dx-ocean, #ef4444);
    --at-brand: var(--dx-brand, #eab308);
    --at-signal: var(--dx-signal, #f97316);
    --at-ink: var(--dx-ink, #0f172a);
    --at-muted: var(--dx-muted, #64748b);
    --at-ease: var(--dx-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.about-teaser__wash {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 48% at 6% 18%, rgba(239, 68, 68, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 50% 44% at 94% 12%, rgba(234, 179, 8, 0.15) 0%, transparent 54%),
        radial-gradient(ellipse 46% 40% at 72% 92%, rgba(249, 115, 22, 0.12) 0%, transparent 56%),
        linear-gradient(165deg, #fff8f5 0%, #fef2f2 32%, #fffbeb 64%, #fff7ed 100%);
}

.about-teaser__orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(68px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.72;
}

.about-teaser__orb--ocean {
    width: 20rem;
    height: 20rem;
    top: -5rem;
    left: -3rem;
    background: rgba(239, 68, 68, 0.24);
    animation: brandChapterOrb 14s ease-in-out infinite;
}

.about-teaser__orb--brand {
    width: 24rem;
    height: 24rem;
    top: 28%;
    right: -7rem;
    background: rgba(234, 179, 8, 0.2);
    animation: brandChapterOrb 16s ease-in-out infinite reverse;
}

.about-teaser__orb--signal {
    width: 16rem;
    height: 16rem;
    bottom: -3rem;
    left: 42%;
    background: rgba(249, 115, 22, 0.16);
    animation: brandChapterOrb 12s ease-in-out infinite 0.8s;
}

.about-teaser__grid-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.035;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.9) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

.about-teaser__glass {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 48%, rgba(255, 247, 237, 0.72) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 60px -28px rgba(15, 23, 42, 0.28),
        0 10px 28px -18px rgba(239, 68, 68, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 1.35rem 1.25rem 1.45rem;
}

@media (min-width: 640px) {
    .about-teaser__glass {
        padding: 1.75rem 1.75rem 1.85rem;
    }
}

@media (min-width: 1024px) {
    .about-teaser__glass {
        padding: 2.1rem 2.15rem 2.2rem;
    }
}

.about-teaser__sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.45) 48%, transparent 100%);
    opacity: 0;
}

.about-teaser__glass.reveal.visible .about-teaser__sheen {
    animation: brandChapterSheen 1.2s var(--at-ease) 1;
}

.about-teaser__rail {
    position: absolute;
    left: 0;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 4px;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--at-ocean), var(--at-brand), var(--at-signal));
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
}

.about-teaser__grid {
    display: grid;
    gap: 1.65rem;
}

@media (min-width: 1024px) {
    .about-teaser__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
        gap: 2rem 2.25rem;
        align-items: stretch;
    }
}

.about-teaser__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--at-ocean);
}

.about-teaser__title {
    position: relative;
    margin: 0;
    color: var(--at-ink);
    font-size: clamp(1.65rem, 2.4vw + 0.85rem, 2.55rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 18ch;
}

.about-teaser__title-underline {
    display: block;
    width: 0;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--at-ocean), var(--at-brand), var(--at-signal));
    transition: width 0.85s var(--at-ease) 0.15s;
}

.about-teaser__glass.reveal.visible .about-teaser__title-underline {
    width: min(11rem, 48%);
}

.about-teaser__lead,
.about-teaser__body {
    margin: 0.95rem 0 0;
    max-width: 42rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.65;
}

.about-teaser__lead {
    color: #334155;
    font-weight: 500;
}

.about-teaser__body {
    margin-top: 0.7rem;
}

.about-teaser__flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    list-style: none;
    margin: 1.15rem 0 0;
    padding: 0;
}

.about-teaser__flow-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem 0.55rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 22px -16px rgba(15, 23, 42, 0.35);
    transition: transform 0.35s var(--at-ease), box-shadow 0.35s var(--at-ease), border-color 0.3s ease;
    animation: aboutTeaserRise 0.7s var(--at-ease) both;
    animation-delay: calc(0.08s * var(--at-i, 0));
}

.about-teaser__flow-step:hover {
    transform: translateY(-2px);
}

.about-teaser__flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
}

.about-teaser__flow-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--at-ink);
}

.about-teaser__flow-step--ocean {
    border-color: rgba(239, 68, 68, 0.22);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 255, 255, 0.8));
}
.about-teaser__flow-step--ocean .about-teaser__flow-num {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 6px 14px -6px rgba(239, 68, 68, 0.65);
}
.about-teaser__flow-step--ocean:hover {
    box-shadow: 0 12px 26px -14px rgba(239, 68, 68, 0.45);
}

.about-teaser__flow-step--brand {
    border-color: rgba(234, 179, 8, 0.28);
    background: linear-gradient(135deg, rgba(254, 249, 195, 0.95), rgba(255, 255, 255, 0.8));
}
.about-teaser__flow-step--brand .about-teaser__flow-num {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    box-shadow: 0 6px 14px -6px rgba(234, 179, 8, 0.65);
}
.about-teaser__flow-step--brand:hover {
    box-shadow: 0 12px 26px -14px rgba(234, 179, 8, 0.45);
}

.about-teaser__flow-step--signal {
    border-color: rgba(249, 115, 22, 0.24);
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.8));
}
.about-teaser__flow-step--signal .about-teaser__flow-num {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 6px 14px -6px rgba(249, 115, 22, 0.65);
}
.about-teaser__flow-step--signal:hover {
    box-shadow: 0 12px 26px -14px rgba(249, 115, 22, 0.45);
}

.about-teaser__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    margin-top: 1.25rem;
}

.about-teaser__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.78rem 1.2rem;
    border-radius: 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    transition: transform 0.3s var(--at-ease), box-shadow 0.3s var(--at-ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.about-teaser__btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 42%, #ea580c 100%);
    box-shadow: 0 14px 30px -14px rgba(239, 68, 68, 0.7);
}

.about-teaser__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(239, 68, 68, 0.75);
}

.about-teaser__btn--ghost {
    color: var(--at-ink);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(234, 179, 8, 0.45);
    box-shadow: 0 10px 22px -16px rgba(202, 138, 4, 0.45);
}

.about-teaser__btn--ghost:hover {
    border-color: rgba(234, 179, 8, 0.8);
    background: rgba(254, 249, 195, 0.55);
    transform: translateY(-2px);
}

.about-teaser__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.15rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: #c2410c;
    transition: color 0.25s ease, gap 0.25s ease;
}

.about-teaser__link:hover {
    color: #9a3412;
    gap: 0.45rem;
}

.about-teaser__trust {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background:
        linear-gradient(160deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.92) 48%, rgba(69, 10, 10, 0.88) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 22px 48px -24px rgba(15, 23, 42, 0.55);
    overflow: hidden;
}

.about-teaser__trust::before {
    content: "";
    position: absolute;
    inset: auto -20% -30% auto;
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    background: rgba(234, 179, 8, 0.18);
    filter: blur(28px);
    pointer-events: none;
}

.about-teaser__trust-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
}

.about-teaser__trust-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: var(--at-brand);
    box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.18);
    animation: brandAccentPulse 2.4s ease-in-out infinite;
}

.about-teaser__trust-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(254, 243, 199, 0.88);
}

.about-teaser__stats {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.about-teaser__stat {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.65rem 0.7rem;
    padding: 0.7rem 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.35s var(--at-ease), background 0.3s ease, border-color 0.3s ease;
    animation: aboutTeaserRise 0.75s var(--at-ease) both;
    animation-delay: calc(0.1s + 0.07s * var(--at-i, 0));
}

.about-teaser__stat:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
}

.about-teaser__stat-glow {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 9999px;
}

.about-teaser__stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.about-teaser__stat-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.about-teaser__stat-value {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    min-width: 2.6rem;
}

.about-teaser__stat-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.about-teaser__stat-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.25;
}

.about-teaser__stat-desc {
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.72);
}

.about-teaser__stat--ocean .about-teaser__stat-glow { background: linear-gradient(180deg, #f87171, #ef4444); }
.about-teaser__stat--ocean .about-teaser__stat-icon {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(248, 113, 113, 0.28);
}
.about-teaser__stat--ocean .about-teaser__stat-value { color: #fca5a5; }
.about-teaser__stat--ocean:hover { border-color: rgba(248, 113, 113, 0.35); }

.about-teaser__stat--brand .about-teaser__stat-glow { background: linear-gradient(180deg, #fde047, #eab308); }
.about-teaser__stat--brand .about-teaser__stat-icon {
    color: #fef08a;
    background: rgba(234, 179, 8, 0.16);
    border: 1px solid rgba(250, 204, 21, 0.28);
}
.about-teaser__stat--brand .about-teaser__stat-value { color: #fde047; }
.about-teaser__stat--brand:hover { border-color: rgba(250, 204, 21, 0.35); }

.about-teaser__stat--signal .about-teaser__stat-glow { background: linear-gradient(180deg, #fdba74, #f97316); }
.about-teaser__stat--signal .about-teaser__stat-icon {
    color: #fdba74;
    background: rgba(249, 115, 22, 0.16);
    border: 1px solid rgba(251, 146, 60, 0.28);
}
.about-teaser__stat--signal .about-teaser__stat-value { color: #fdba74; }
.about-teaser__stat--signal:hover { border-color: rgba(251, 146, 60, 0.35); }

@keyframes aboutTeaserRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .about-teaser__stat {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon value"
            "icon meta";
        column-gap: 0.65rem;
        row-gap: 0.15rem;
    }

    .about-teaser__stat-icon { grid-area: icon; align-self: start; }
    .about-teaser__stat-value { grid-area: value; }
    .about-teaser__stat-meta { grid-area: meta; }
}

@media (prefers-reduced-motion: reduce) {
    .about-teaser__orb,
    .about-teaser__sheen,
    .about-teaser__flow-step,
    .about-teaser__stat,
    .about-teaser__trust-dot,
    .about-teaser__title-underline {
        animation: none !important;
        transition: none !important;
    }

    .about-teaser__glass.reveal .about-teaser__title-underline,
    .about-teaser__glass.reveal.visible .about-teaser__title-underline {
        width: min(11rem, 48%);
    }

    .about-teaser__flow-step,
    .about-teaser__stat {
        opacity: 1;
        transform: none;
    }
}