html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333333;
}

.font-display {
    font-family: 'Fraunces', serif;
}

.font-mono {
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: .06em;
}

/* Molecular / hexagon watermark used sparingly as a signature texture */
.molecule-bg {
    background-image: radial-gradient(circle at 1px 1px, rgba(196, 154, 44, 0.18) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
}

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 500;
    color: #C49A2C;
    text-transform: uppercase;
}

.eyebrow::before {
    content: '§ ';
    opacity: .7;
}

/* EKG / heartbeat divider - signature motif */
.pulse-divider {
    width: 100%;
    height: 34px;
    overflow: hidden;
}

.pulse-divider svg {
    width: 200%;
    height: 100%;
    animation: pulse-scroll 9s linear infinite;
}

@keyframes pulse-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-divider svg {
        animation: none;
    }
}

/* Nav dropdown */
.has-dropdown:hover .dropdown-panel,
.has-dropdown.open .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .22s ease;
}

/* Carousel */
.slide {
    transition: opacity 1s ease;
}

.carousel-dot.active {
    background: #C49A2C;
    width: 26px;
}

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: all .8s cubic-bezier(.2, .7, .3, 1);
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* Product card image zoom */
.prod-card img {
    transition: transform .6s ease;
}

.prod-card:hover img {
    transform: scale(1.06);
}

/* fallback image styling if a remote photo fails to load */
.img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0F4D3A 0%, #0D1B3D 100%);
}

::selection {
    background: #C49A2C;
    color: #fff;
}

/* Custom scrollbar accent */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background: #0F4D3A;
    border-radius: 8px;
}

.btn-gold {
    background: #C49A2C;
    color: #0D1B3D;
    font-weight: 700;
    transition: all .25s ease;
}

.btn-gold:hover {
    background: #A17F22;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(196, 154, 44, .55);
}

.btn-outline {
    border: 1.5px solid #F5F5F5;
    color: #F5F5F5;
    transition: all .25s ease;
}

.btn-outline:hover {
    background: #F5F5F5;
    color: #0D1B3D;
}

.tag-rx {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .65rem;
    letter-spacing: .08em;
    color: #0F4D3A;
    background: #E8F0EC;
    border: 1px solid #CFE2D8;
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #0F4D3A;
    outline-offset: 2px;
}

.modal-overlay {
    background: rgba(13, 27, 61, .72);
    backdrop-filter: blur(3px);
}

/* ===================== ANIMATION LAYER ===================== */

/* ambient drifting molecule texture */
.molecule-bg {
    animation: drift 14s ease-in-out infinite alternate;
}

@keyframes drift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 14px 18px;
    }
}

/* staggered reveal — children of .stagger fade in one after another */
.stagger>* {
    transition-delay: calc(var(--i, 0) * 90ms);
}

/* logo mark: slow continuous rotation on the outer ring, subtle */
#site-header a[href="#home"] svg circle:first-child {
    transform-origin: 21px 21px;
    animation: spin-slow 22s linear infinite;
}

@keyframes spin-slow {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #site-header a[href="#home"] svg circle:first-child {
        animation: none;
    }
}

/* nav underline sweep */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    background: #C49A2C;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

/* hero eyebrow pulse dot */
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C49A2C;
    margin-right: 6px;
    animation: dot-pulse 1.8s ease-in-out infinite;
}

@keyframes dot-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(1.4);
    }
}

/* count-up numerals get a tiny lift-in the moment they start */
.counter.counting {
    animation: count-pop .5s ease;
}

@keyframes count-pop {
    from {
        transform: scale(.85);
        opacity: .4;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* generic lift-on-hover for grid cards */
.lift-card {
    transition: transform .35s ease, box-shadow .35s ease;
}

.lift-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px -12px rgba(13, 27, 61, .22);
}

/* ---- Leadership: cinematic reveal cards ---- */
.leader-card {
    perspective: 1200px;
}

.leader-card .leader-img {
    filter: grayscale(85%) brightness(.92);
    transition: filter .7s ease, transform .7s ease;
}

.leader-card:hover .leader-img {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.07);
}

.leader-card .leader-caption {
    transform: translateY(58%);
    transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}

.leader-card:hover .leader-caption {
    transform: translateY(0);
}

.leader-card .leader-quote {
    opacity: 0;
    transition: opacity .5s ease .1s;
}

.leader-card:hover .leader-quote {
    opacity: 1;
}

.leader-card .leader-mark {
    transition: color .5s ease, transform .5s ease;
}

.leader-card:hover .leader-mark {
    color: rgba(196, 154, 44, .35);
    transform: scale(1.15) rotate(-4deg);
}

.leader-card .leader-ring {
    transition: box-shadow .5s ease;
}

.leader-card:hover .leader-ring {
    box-shadow: inset 0 0 0 2px #C49A2C;
}

/* ---- Certifications: 3D flip badges ---- */
.cert-flip {
    perspective: 1000px;
    height: 150px;
}

.cert-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .7s cubic-bezier(.3, .7, .3, 1);
    transform-style: preserve-3d;
}

.cert-flip:hover .cert-inner {
    transform: rotateY(180deg);
}

.cert-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    text-align: center;
    padding: 1rem;
}

.cert-back {
    transform: rotateY(180deg);
}

/* ---- Lab process: animated connecting line ---- */
.lab-steps {
    position: relative;
}

.lab-steps::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(196, 154, 44, .05), rgba(196, 154, 44, .6), rgba(196, 154, 44, .05));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.4s ease;
}

.lab-steps.in::before {
    transform: scaleY(1);
}

.lab-step-num {
    transition: transform .4s ease, background .4s ease, color .4s ease;
}

.lab-step:hover .lab-step-num {
    background: #C49A2C;
    color: #0D1B3D;
    transform: scale(1.15);
}

/* ---- Contact icon micro-bounce ---- */
.contact-icon {
    transition: transform .35s ease, background .35s ease;
}

.contact-row:hover .contact-icon {
    transform: translateY(-3px) rotate(-6deg);
    background: #0F4D3A;
}

.contact-row:hover .contact-icon svg path,
.contact-row:hover .contact-icon svg circle {
    stroke: #fff;
}

/* ---- Footer social icons ---- */
.social-icon {
    transition: all .3s ease;
}

.social-icon:hover {
    transform: translateY(-3px) rotate(6deg);
}

/* ---- Back to top pulse ring ---- */
#toTop {
    position: fixed;
}

#toTop::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 1.5px solid #0F4D3A;
    opacity: 0;
}

#toTop.show-ring::before {
    animation: ring-pulse 1.8s ease-out;
}

@keyframes ring-pulse {
    0% {
        opacity: .6;
        transform: scale(.9);
    }

    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

/* Agency & product card icon nudge */
.arrow-nudge {
    transition: transform .3s ease;
}

.view-more:hover .arrow-nudge {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {

    .leader-card .leader-img,
    .leader-card .leader-caption,
    .leader-card .leader-quote,
    .cert-inner,
    .lift-card,
    .molecule-bg {
        transition: none !important;
        animation: none !important;
    }
}