/* ==========================================================
   PRODUCTS PAGE — tabbed categories, feature lists, why-us
   grid, and closing CTA. Markup: products.html
   Modernized pass — same class hooks as before, so this drops
   in with no changes to products.html or products-tabs.js.
   ========================================================== */

.wrap{
    max-width:var(--maxw, 1240px);
    margin:0 auto;
    padding-left:32px;
    padding-right:32px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--crimson);
    margin-bottom:14px;
}

.eyebrow::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--crimson);
    box-shadow:0 0 0 3px var(--crimson-tint);
}

.eyebrow.small{
    margin-bottom:10px;
}

/* ==========================================
   INTRO
========================================== */

.products-intro{
    padding:72px 0 0;
}

.intro-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:48px;
    align-items:center;
}

.hero-visual{
    position:relative;
    aspect-ratio:4/3;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:linear-gradient(160deg, var(--bg-alt), var(--crimson-tint));
    border:1px solid var(--gray-150);
}

.hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, var(--white) 0%, rgba(255,255,255,0) 40%);
    pointer-events:none;
}

@media (max-width:980px){
    .intro-grid{
        grid-template-columns:1fr;
    }
    .hero-visual{
        aspect-ratio:16/9;
    }
}

.back-home{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
    color:var(--gray-500);
    text-decoration:none;
    margin-bottom:20px;
    transition:color .2s ease;
}

.back-home:hover{
    color:var(--crimson);
}

.arrow-left{
    transition:transform .2s ease;
}

.back-home:hover .arrow-left{
    transform:translateX(-3px);
}

.products-intro h1{
    font-size:clamp(30px,4vw,44px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.08;
    color:var(--ink);
    max-width:740px;
    margin-bottom:16px;
}

.products-intro .lead{
    font-size:16.5px;
    line-height:1.6;
    color:var(--gray-700);
    max-width:640px;
    margin-bottom:0;
}

/* ==========================================
   PRODUCT SLIDER
========================================== */

.slider-heading{
    font-size:clamp(26px,3vw,35px);
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--ink);
    margin-top:4px;
}

.slider-sub{
    font-size:15px;
    color:var(--gray-500);
    margin-top:6px;
    margin-bottom:30px;
}

.product-slider{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
}

.slider-viewport{
    flex:1;
    overflow:hidden;
}

.slider-track{
    display:flex;
    gap:28px;
    transition:transform .5s cubic-bezier(.16,1,.3,1);
    will-change:transform;
}

.slide{
    flex:0 0 calc((100% - 56px) / 3);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    text-align:left;

    padding:42px 30px;
    min-height:220px;

    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-lg);

    cursor:pointer;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.slide:hover,
.slide:focus-visible{
    transform:translateY(-6px);
    border-color:var(--crimson);
    box-shadow:
        0 18px 36px rgba(15,23,42,.08),
        0 28px 60px rgba(15,23,42,.06);
    outline:none;
}

/* Real product photos instead of emoji/line-icon avatars */
.slide-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:160px;
    height:120px;
    border-radius:14px;
    background:var(--crimson-tint);
    color:var(--crimson);
    flex-shrink:0;
    overflow:hidden;
    transition:transform .3s ease, background .3s ease;
}

.slide-icon svg{
    width:30px;
    height:30px;
}

.slide-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:inherit;
}

.slide:hover .slide-icon{
    transform:scale(1.08) rotate(-3deg);
    background:var(--crimson);
    color:var(--white);
}

.slide-title{
    font-size:18px;
    font-weight:800;
    color:var(--ink);
}

.slide-teaser{
    font-size:14px;
    line-height:1.6;
    color:var(--gray-500);
}

.slider-arrow{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--gray-150);
    background:var(--white);
    font-size:20px;
    color:var(--ink);
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
}

.slider-arrow:hover{
    border-color:var(--crimson);
    color:var(--crimson);
    background:var(--crimson-tint);
}

.slider-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:24px;
}

.slider-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:none;
    background:var(--gray-150);
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}

.slider-dot.active{
    background:var(--crimson);
    transform:scale(1.3);
}

/* Tablet */
@media (max-width:980px){
    .slide{
        flex:0 0 calc((100% - 28px) / 2);
        min-height:200px;
    }
}

/* Mobile */
@media (max-width:620px){
    .slide{
        flex:0 0 100%;
        padding:30px 24px;
        min-height:auto;
    }
    .slider-arrow{
        width:36px;
        height:36px;
        font-size:17px;
    }
    .slide-icon{
        width:48px;
        height:48px;
        border-radius:13px;
    }
    .slide-icon svg{
        width:24px;
        height:24px;
    }
}

/* ==========================================
   PRODUCT FULLSCREEN VIEW
========================================== */

.product-fullscreen{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;

    background:rgba(10,10,16,.6);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);

    z-index:1000;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    overflow-y:auto;

    animation:fs-fade-in .25s ease;
}

.product-fullscreen[hidden]{
    display:none;
}

@keyframes fs-fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

.fullscreen-inner{
    position:relative;
    width:100%;
    min-height:100%;
    background:var(--ink);
    overflow:hidden;

    animation:fs-slide-up .35s cubic-bezier(.16,1,.3,1);
}

@keyframes fs-slide-up{
    from{ transform:translateY(24px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
    .product-fullscreen,
    .fullscreen-inner{
        animation:none;
    }
}

.fullscreen-content{
    position:relative;
    z-index:1;
    padding:96px 0 96px;
}

.fullscreen-content .panel-grid{
    align-items:center;
}

.fullscreen-close{
    position:fixed;
    top:24px;
    right:24px;
    z-index:1001;

    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(21,17,26,.55);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);

    font-size:18px;
    color:var(--white);
    cursor:pointer;

    transition:border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}

.fullscreen-close:hover{
    border-color:var(--crimson);
    color:var(--white);
    background:var(--crimson);
    transform:rotate(90deg);
}

/* Mobile */
@media (max-width:620px){
    .fullscreen-content{
        padding:80px 0 64px;
    }
    .fullscreen-close{
        top:16px;
        right:16px;
    }
}

.panel-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:64px;
    align-items:start;
}

.panel-copy h2{
    font-size:clamp(24px,2.6vw,32px);
    font-weight:800;
    letter-spacing:-.015em;
    line-height:1.18;
    color:var(--ink);
    margin-bottom:16px;
}

.panel-copy > p{
    font-size:16px;
    line-height:1.7;
    color:var(--gray-700);
    margin-bottom:32px;
    max-width:560px;
}

.list-heading{
    font-size:11.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gray-500);
    margin-bottom:16px;
}

.checklist{
    list-style:none;
    margin:0 0 32px;
    padding:0;
    display:grid;
    gap:14px;
}

.checklist li{
    position:relative;
    padding-left:32px;
    font-size:15px;
    color:var(--ink);
    line-height:1.5;
}

.checklist li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:-1px;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    color:var(--crimson);
    font-weight:800;
    background:var(--crimson-tint);
    border-radius:50%;
}

.tag-row{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:32px;
}

.tag{
    display:inline-block;
    padding:7px 14px;
    border-radius:var(--radius-pill);
    background:var(--bg-alt);
    border:1px solid var(--gray-150);
    color:var(--gray-700);
    font-size:13px;
    font-weight:600;
    transition:border-color .2s ease, color .2s ease;
}

.tag:hover{
    border-color:var(--crimson);
    color:var(--crimson-dark);
}

.panel-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.panel-visual{
    position:sticky;
    top:100px;
}

.visual-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1.1;
    border-radius:var(--radius-lg);
    background:
        radial-gradient(circle at 30% 22%, var(--crimson-tint), transparent 60%),
        var(--bg-alt);
    border:1px solid var(--gray-150);
    color:var(--crimson);
    font-size:88px;
    line-height:1;
    position:relative;
    overflow:hidden;
    box-shadow:0 24px 48px -20px rgba(15,23,42,.35);
}

.visual-icon svg{
    width:96px;
    height:96px;
    position:relative;
    z-index:1;
}

.visual-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
    display:block;
}

.visual-icon::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 0 rgba(203,41,82,.18);
    animation:ping 2.8s ease-out infinite;
}

@keyframes ping{
    0%{ box-shadow:0 0 0 0 rgba(203,41,82,.16); }
    70%{ box-shadow:0 0 0 22px rgba(203,41,82,0); }
    100%{ box-shadow:0 0 0 0 rgba(203,41,82,0); }
}

@media (prefers-reduced-motion: reduce){
    .visual-icon::after{ animation:none; }
}

/* ==========================================================
   PANEL BACKGROUND SLIDESHOW — fullscreen product view.
   Replaces the plain white/backdrop with a slow-crossfading
   photo slideshow behind a dark brand-tinted overlay. Add
   real photos at assets/images/backgrounds/<product>-1.jpg,
   -2.jpg, -3.jpg — the paths are already wired up in the HTML.
   ========================================================== */

.panel{
    position:relative;
}

.panel-bg-slideshow{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:var(--ink);
}

.bg-slide-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    animation:bgSlideCycle 18s infinite;
}

.bg-slide-img:nth-of-type(1){ animation-delay:0s; }
.bg-slide-img:nth-of-type(2){ animation-delay:-6s; }
.bg-slide-img:nth-of-type(3){ animation-delay:-12s; }

@keyframes bgSlideCycle{
    0%{ opacity:0; transform:scale(1.04); }
    6%{ opacity:1; }
    28%{ opacity:1; transform:scale(1); }
    36%{ opacity:0; }
    100%{ opacity:0; }
}

.panel-bg-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg, rgba(21,17,26,.92) 0%, rgba(21,17,26,.72) 45%, rgba(203,41,82,.35) 100%);
}

@media (prefers-reduced-motion: reduce){
    .bg-slide-img{
        animation:none;
        opacity:0;
    }
    .bg-slide-img:first-of-type{
        opacity:1;
    }
}

/* Frosted glass card so copy stays readable over any photo */
.panel-copy-card{
    position:relative;
    z-index:1;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-radius:var(--radius-lg);
    padding:40px 40px 36px;
    box-shadow:0 30px 60px -24px rgba(0,0,0,.45);
}

@media (max-width:620px){
    .panel-copy-card{
        padding:26px 22px 24px;
    }
}

/* ==========================================================
   COMPLIANCE BADGES — per-product, narrow auto-sliding
   ticker. Only a couple of logos are ever visible at once,
   travelling right to left, instead of a full-width wall of
   repeated logos. The track still repeats the logo pair once
   (4 images total) so the loop is seamless with no gaps.
   ========================================================== */

.compliance-badges{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid var(--gray-150);
}

.compliance-label{
    display:block;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gray-500);
    margin-bottom:14px;
}

.badges-track-wrap{
    overflow:hidden;
    width:180px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.badges-track{
    display:flex;
    align-items:center;
    gap:36px;
    width:max-content;
    padding:0 14px;
    animation:badgeScroll 9s linear infinite;
}

.compliance-badges:hover .badges-track{
    animation-play-state:paused;
}

.badge-logo{
    height:32px;
    width:auto;
    max-width:120px;
    flex-shrink:0;
    object-fit:contain;
    opacity:.85;
    filter:grayscale(15%);
    transition:opacity .2s ease;
}

.badge-logo:hover{
    opacity:1;
}

@keyframes badgeScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

@media (max-width:620px){
    .badges-track-wrap{
        width:150px;
        -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
        mask-image:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    }
    .badges-track{
        gap:28px;
        padding:0 10px;
        animation-duration:7s;
    }
    .badge-logo{
        height:26px;
        max-width:96px;
    }
}

@media (prefers-reduced-motion: reduce){
    .badges-track{
        animation:none;
        flex-wrap:wrap;
        width:auto;
        padding:0;
    }
    .badges-track-wrap{
        width:auto;
        -webkit-mask-image:none;
        mask-image:none;
    }
}

/* ==========================================================
   VIDEO BUTTON — "Watch on YouTube"
   ========================================================== */

.btn-video{
    background:var(--white);
    border:1px solid var(--gray-300);
    color:var(--ink);
}

.btn-video svg{
    width:18px;
    height:18px;
    flex-shrink:0;
}

.btn-video:hover{
    border-color:#FF0000;
    color:#cc0000;
}

/* ==========================================================
   VIDEO MODAL — opens a closable player for the YouTube link
   ========================================================== */

.video-modal{
    position:fixed;
    inset:0;
    z-index:1200;

    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;

    background:rgba(10,10,16,.86);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);

    animation:fs-fade-in .2s ease;
}

.video-modal[hidden]{
    display:none;
}

.video-modal-inner{
    width:100%;
    max-width:960px;
    animation:fs-slide-up .3s cubic-bezier(.16,1,.3,1);
}

.video-modal-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:#000;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
}

.video-modal-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.video-modal-close{
    position:fixed;
    top:24px;
    right:24px;
    z-index:1201;

    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(21,17,26,.55);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);

    font-size:18px;
    color:var(--white);
    cursor:pointer;

    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.video-modal-close:hover{
    border-color:var(--crimson);
    background:var(--crimson);
    transform:rotate(90deg);
}

@media (max-width:620px){
    .video-modal{
        padding:12px;
    }
    .video-modal-close{
        top:16px;
        right:16px;
    }
}

@media (prefers-reduced-motion: reduce){
    .video-modal,
    .video-modal-inner{
        animation:none;
    }
}

/* ==========================================
   WHY CHOOSE US
========================================== */

.why-section{
    padding:88px 0;
    background:var(--bg-alt);
}

.why-section h2{
    font-size:clamp(26px,3vw,34px);
    font-weight:800;
    letter-spacing:-.015em;
    color:var(--ink);
    margin-bottom:44px;
    max-width:600px;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.why-card{
    background:var(--white);
    border:1px solid var(--gray-150);
    border-top:3px solid var(--gray-150);
    border-radius:var(--radius-md);
    padding:26px 24px;
    transition:transform .2s ease, box-shadow .2s ease, border-top-color .2s ease;
}

.why-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px -20px rgba(21,17,26,.25);
    border-top-color:var(--crimson);
}

.why-card:nth-child(odd){
    border-top-color:var(--crimson-tint);
}

.why-card:nth-child(odd):hover{
    border-top-color:var(--crimson);
}

.why-card h3{
    font-size:16px;
    font-weight:800;
    color:var(--ink);
    margin-bottom:8px;
    letter-spacing:-.005em;
}

.why-card p{
    font-size:14.5px;
    line-height:1.6;
    color:var(--gray-700);
}

/* ==========================================
   CTA BANNER
========================================== */

.cta-banner{
    background:var(--ink);
    padding:72px 0;
    position:relative;
    overflow:hidden;
}

.cta-banner::before{
    content:"";
    position:absolute;
    top:-60%;
    right:-8%;
    width:480px;
    height:480px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(203,41,82,.28), transparent 70%);
    pointer-events:none;
}

.cta-banner-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    position:relative;
}

.cta-banner h2{
    font-size:clamp(24px,2.8vw,32px);
    font-weight:800;
    letter-spacing:-.015em;
    color:var(--white);
    margin-bottom:12px;
    max-width:520px;
}

.cta-banner p{
    font-size:15.5px;
    color:rgba(255,255,255,.7);
    max-width:520px;
    line-height:1.65;
}

.cta-banner-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.btn-outline-light{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.3);
    color:var(--white);
    background:transparent;
    border-radius:var(--radius-pill);
    font-weight:700;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.btn-outline-light:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.55);
    transform:translateY(-1px);
}

.btn-lg{
    padding:14px 26px;
    font-size:150px;
}

/* ==========================================
   FOOTER
========================================== */

.site-footer{
    background:var(--ink);
    border-top:1px solid rgba(255,255,255,.08);
    padding:64px 0 0;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
    padding-bottom:48px;
}

.footer-brand .brand{
    margin-bottom:14px;
}

.footer-brand .brand .word{
    color:var(--white);
}

.footer-brand p{
    font-size:14px;
    line-height:1.6;
    color:rgba(255,255,255,.60);
    max-width:280px;
}

.footer-col h3{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:rgba(255,255,255,.50);
    margin-bottom:16px;
}

.footer-col{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-col a{
    font-size:14.5px;
    color:rgba(255,255,255,.80);
    text-decoration:none;
    transition:color .2s ease;
}

.footer-col a:hover{
    color:var(--crimson);
}

.footer-address{
    font-size:14.5px;
    color:rgba(255,255,255,.60);
}

.footer-cta{
    margin-top:6px;
    align-self:flex-start;
}

.footer-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:22px 0;
    border-top:1px solid rgba(255,255,255,.10);
    font-size:13px;
    color:rgba(255,255,255,.45);
}

.footer-bottom a{
    color:rgba(255,255,255,.45);
    text-decoration:none;
    transition:color .2s ease;
}

.footer-bottom a:hover{
    color:var(--crimson);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:980px){

    .panel-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    .panel-visual{
        position:static;
        order:-1;
    }

    .visual-icon{
        aspect-ratio:2.4;
        font-size:64px;
    }

    .visual-icon svg{
        width:72px;
        height:72px;
    }

    .why-grid{
        grid-template-columns:1fr 1fr;
    }

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

}

@media (max-width:620px){

    .wrap{
        padding-left:18px;
        padding-right:18px;
    }

    .products-intro{
        padding:48px 0 0;
    }

    .tablist{
        gap:4px;
        overflow-x:auto;
        flex-wrap:nowrap;
        -webkit-overflow-scrolling:touch;
        border-bottom-width:2px;
    }

    .tab-btn{
        white-space:nowrap;
        padding:8px 12px 14px;
    }

    .why-grid{
        grid-template-columns:1fr;
    }

    .cta-banner-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

}

/* ==========================================================
   NAV DROPDOWN — Products submenu.
   Desktop: hover/focus reveals menu below the trigger.
   Mobile (inside the existing hamburger panel): the caret
   toggles an inline expand/collapse instead of a hover menu.
   ========================================================== */

.nav-dropdown{
    position:relative;
}

.nav-dropdown-trigger{
    display:flex;
    align-items:center;
    gap:5px;
}

.nav-caret{
    transition:transform .2s ease;
}

.nav-dropdown-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%) translateY(6px);
    min-width:220px;
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-md);
    box-shadow:0 16px 32px -12px rgba(21,17,26,.18);
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:2px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:1100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret{
    transform:rotate(180deg);
}

.nav-dropdown-menu a{
    padding:9px 12px;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible{
    background:var(--bg-alt);
    color:var(--crimson);
}

/* Inside the mobile hamburger panel, the dropdown becomes a
   simple static stacked list — no hover menu on touch devices. */
@media (max-width:980px){

    .nav-dropdown-menu{
        position:static;
        transform:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        box-shadow:none;
        border:none;
        padding:0 0 4px 16px;
        display:none;
    }

    .nav-dropdown.open .nav-dropdown-menu{
        display:flex;
    }

    .nav-dropdown.open .nav-caret{
        transform:rotate(180deg);
    }

    .nav-dropdown-trigger{
        justify-content:space-between;
    }

}

/* ==========================================================
   PRODUCTS HERO — full-bleed background image + brand
   gradient overlay. Padding trimmed down so the product
   slider sits higher on the page and is visible sooner.
   ========================================================== */

.products-hero{
    position:relative;
    overflow:hidden;
    padding:88px 0 44px;
    background:
        linear-gradient(
            120deg,
            rgba(21,17,26,.94) 0%,
            rgba(21,17,26,.72) 45%,
            rgba(203,41,82,.42) 100%
        ),
        /* TEMP placeholder — reusing an existing branded product photo until a
           dedicated products-hero-bg.jpg is supplied (see chat notes) */
        url("../assets/products/Truck.jpg") center/cover no-repeat,
        var(--ink);
}

.products-hero-inner{
    position:relative;
    z-index:1;
}

.back-home-light{
    color:rgba(255,255,255,.68);
}

.back-home-light:hover{
    color:var(--white);
}

.eyebrow-light{
    color:#ff9fb4;
}

.eyebrow-light::before{
    background:#ff9fb4;
    box-shadow:0 0 0 3px rgba(203,41,82,.35);
}

.products-hero h1{
    color:var(--white);
    font-size:clamp(30px,4vw,44px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.08;
    max-width:760px;
    margin-bottom:16px;
}

.lead-light{
    color:rgba(255,255,255,.82);
    max-width:640px;
    margin-bottom:0;
}

@media (max-width:980px){
    .products-hero{
        padding:76px 0 36px;
    }
}

@media (max-width:620px){
    .products-hero{
        padding:64px 0 30px;
    }
}

/* Tabs now sit in a plain light strip directly under the hero.
   Bottom padding added since the standalone compliance strip
   that used to separate this from "Why Choose Us" was removed
   (each product card now carries its own compliance badges). */
.products-intro{
    padding:24px 0 64px;
}

@media (max-width:620px){
    .products-intro{
        padding-bottom:44px;
    }
}

/* ==========================================================
   PANEL TRANSITIONS — crossfade + slide instead of an
   instant swap. Pairs with the .leaving class toggled by
   products.js during tab switches.
   ========================================================== */

.panel.leaving{
    animation:panel-out .18s ease forwards;
}

@keyframes panel-out{
    from{ opacity:1; transform:none; }
    to{ opacity:0; transform:translateY(-8px) scale(.98); }
}

.panel.active{
    animation:panel-in .42s cubic-bezier(.16,1,.3,1);
}

@keyframes panel-in{
    from{ opacity:0; transform:translateY(18px) scale(.98); }
    to{ opacity:1; transform:none; }
}

.panel.active .visual-icon{
    animation:icon-pop .5s cubic-bezier(.34,1.56,.64,1) .08s backwards;
}

@keyframes icon-pop{
    from{ opacity:0; transform:scale(.85) rotate(-4deg); }
    to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
    .panel.leaving,
    .panel.active,
    .panel.active .visual-icon{
        animation:none;
    }
}

/* ==========================================================
   BUTTONS — base styles. Added here since no separate
   buttons.css exists in this project; every product panel's
   "Get Free Consultation" / "Request a Demo" pair, plus the
   CTA banner buttons, depend on these.
   ========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 20px;
    border-radius:var(--radius-pill);
    font-size:14px;
    font-weight:700;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    white-space:nowrap;
    transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-crimson{
    background:var(--crimson);
    color:var(--white);
    box-shadow:0 8px 20px -8px rgba(203,41,82,.55);
}

.btn-crimson:hover{
    background:var(--crimson-dark);
    box-shadow:0 10px 24px -8px rgba(203,41,82,.6);
}

.btn-outline{
    border-color:var(--gray-300);
    color:var(--ink);
}

.btn-outline:hover{
    border-color:var(--crimson);
    color:var(--crimson);
}

.btn-sm{
    padding:7px 14px;
    font-size:13px;
}