/*==================================================
PAD PRINTS & DESIGNS
STYLE.CSS
==================================================*/

/* Keep the Product Finder showcase animated even when the browser reports
   reduced motion. This banner is an intentional interactive presentation. */
.product-finder-ad:before{animation:productAdSweep 5.5s infinite!important}
.product-finder-ad__glow{animation:productAdGlow 4s infinite alternate!important}
.product-finder-ad__queries b{animation:productAdQuery 9s infinite!important}
.product-finder-ad__queries b:nth-child(2){animation-delay:3s!important}
.product-finder-ad__queries b:nth-child(3){animation-delay:6s!important}
.product-finder-ad__photos img{animation:productAdFloat 3.8s ease-in-out infinite!important}
.product-finder-ad__photos img:nth-child(2){animation-delay:-1.2s!important}
.product-finder-ad__photos img:nth-child(3){animation-delay:-2.4s!important}
.product-finder-ad__match{animation:productAdBadge 2.6s infinite!important}

/*==============================
ROOT VARIABLES
==============================*/

:root{

    /* Primary */
    --primary:#007DFF;
    --primary-dark:#0069D9;

    /* Secondary */
    --secondary:#1F2937;

    /* Background */
    --dark:#0F172A;
    --light:#F5F9FF;
    --white:#FFFFFF;

    /* Text */
    --gray:#6B7280;

    /* Borders */
    --border:#E5EEF9;

    /* Effects */
    --shadow:0 15px 45px rgba(0,125,255,.12);

    /* Layout */
    --radius:18px;
    --transition:.35s ease;
    --container:1280px;
}
/*==============================
RESET
==============================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    color:var(--secondary);

    background:var(--white);

    overflow-x:hidden;

    line-height:1.7;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    font-family:inherit;

}

section{

    padding:50px 0;

}

/*==============================
CONTAINER
==============================*/

.container{

    width:min(92%,var(--container));

    margin:auto;

}

/*==============================
TYPOGRAPHY
==============================*/

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header span{

    display:inline-block;

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-header h2{

    font-size:clamp(2rem,5vw,3.4rem);

    line-height:1.2;

    font-weight:700;

    margin-bottom:18px;

}

.section-header p{

    max-width:720px;

    margin:auto;

    color:var(--gray);

}

/*==============================
BUTTONS
==============================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:999px;

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.btn-light{

    background:#fff;

    color:var(--secondary);

}

.btn-light:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

/*==============================
UTILITY
==============================*/

.text-center{

    text-align:center;

}

.bg-light{

    background:var(--light);

}




.lalagyan {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --posisyon: 50%;
}

.lalagyan-ng-larawan {
  max-width: 800px;
  aspect-ratio: 1/1;
}

.larawan-slider {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.larawan-bago {
  position: absolute;
  inset: 0;
  width: var(--posisyon);
  filter: grayscale(100%);
}

.pang-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.guhit-ng-slider {
  position: absolute;
  width: .2rem;
  height: 100%;
  background: #fff;
  left: var(--posisyon);
  transform: translateX(-50%);
}

.pindutan-ng-slider {
  position: absolute;
  top: 50%;
  left: var(--posisyon);
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  padding: .5rem;
}


html,
body{
    overflow-x:hidden;
}



.page-scroll-nav{
    position: fixed;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 99999;
}



@media (max-width: 768px){
    .page-scroll-nav{
        display:none;
    }
}


/* Itago ang browser scrollbar */
body::-webkit-scrollbar {
    width: 0;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom dots */
.scroll-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6FBEFB; /* B100 */
    opacity: .7;
    transition: all .3s ease;
}

.scroll-dot:hover {
    background: #0091FF; /* B200 */
    opacity: 1;
}

.scroll-dot.active {
    width: 10px;
    height: 45px;
    border-radius: 20px;
    background: #0033B8; /* B500 */
    opacity: 1;
}



/*==================================================
PAD FLOATING CHAT
==================================================*/

.pad-floating-chat{

    position:fixed;

    right:25px;

    bottom:110px;

    z-index:999999;

    pointer-events:none;

}

.pad-floating-chat__button{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border-radius:50%;

    box-shadow:0 12px 30px rgba(0,0,0,.20);

    text-decoration:none;

    pointer-events:auto;

    transition:.3s ease;

}

.pad-floating-chat__button:hover{

    transform:translateY(-6px);

}

.pad-floating-chat__button img{

    width:40px;

    height:40px;

    object-fit:contain;

    display:block;

    max-width:none;

    border:0;

}

@media (max-width:768px){

    .pad-floating-chat{

        right:18px;

        bottom:18px;

    }

    .pad-floating-chat__button{

        width:58px;

        height:58px;

    }

    .pad-floating-chat__button img{

        width:34px;

        height:34px;

    }

}

.quote-panel{

    display:none;

}

.quote-panel.active{

    display:block;

}





/* ==========================================
QUOTE MODAL SELECT
========================================== */

.quote-modal select{
    width:100%;
    height:56px;
    padding:0 18px;
    border:1px solid #dcdcdc;
    border-radius:12px;
    background:#fff;
    color:#222;
    font-size:15px;
    font-family:'Poppins',sans-serif;
    outline:none;
    transition:.3s;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
    background-size:14px;
    cursor:pointer;
}

.quote-modal select:focus{
    border-color:#0057ff;
    box-shadow:0 0 0 4px rgba(0,87,255,.12);
}



/*==========================================
CAREERS MODAL
==========================================*/
.careers-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
    z-index:99999;
}

.careers-modal.show{
    display:flex;
    justify-content:center;
    align-items:center;
}

.careers-content{
    width:90%;
    max-width:1200px;
    height:90vh;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    position:relative;
}

.careers-content iframe{
    width:100%;
    height:100%;
    border:0;
}

.careers-close{
    position:absolute;
    top:15px;
    right:20px;
    z-index:2;
    font-size:35px;
    cursor:pointer;
    background:none;
    border:none;
}
/*==========================================
MESSENGER MODAL
==========================================*/

.messenger-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(5,18,45,.58);
    backdrop-filter:blur(8px);
    z-index:999998;
    align-items:flex-end;
    justify-content:flex-end;
    padding:24px;
}

.messenger-modal.show{
    display:flex;
}

.messenger-modal__content{
    position:relative;
    width:min(390px,100%);
    background:#fff;
    border-radius:22px;
    padding:26px;
    box-shadow:0 24px 70px rgba(8,28,70,.28);
    animation:messengerModalIn .25s ease;
}

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

.messenger-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:#eef4ff;
    color:#0B2757;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.messenger-modal__header{
    display:flex;
    align-items:center;
    gap:14px;
    padding-right:38px;
}

.messenger-modal__icon{
    width:58px;
    height:58px;
    border-radius:18px;
    object-fit:cover;
    background:#eaf2ff;
    padding:8px;
}

.messenger-modal__header p{
    margin:0 0 4px;
    color:#1972F9;
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
}

.messenger-modal__header h2{
    margin:0;
    color:#0B2757;
    font-size:26px;
    line-height:1.15;
}

.messenger-modal__text{
    margin:20px 0;
    color:#475569;
    line-height:1.65;
}

.messenger-modal__actions{
    display:grid;
    gap:10px;
}

.messenger-modal__primary,
.messenger-modal__secondary{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    border-radius:14px;
    font-weight:700;
    text-decoration:none;
    transition:.2s ease;
}

.messenger-modal__primary{
    background:#1972F9;
    color:#fff;
    box-shadow:0 12px 26px rgba(25,114,249,.28);
}

.messenger-modal__primary:hover{
    background:#0B5FE8;
    transform:translateY(-2px);
}

.messenger-modal__secondary{
    background:#f3f7ff;
    color:#0B2757;
}

.messenger-modal__secondary:hover{
    background:#e8f0ff;
}

.messenger-modal__note{
    margin:16px 0 0;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
}

@media(max-width:600px){
    .messenger-modal{
        align-items:flex-end;
        padding:14px;
    }

    .messenger-modal__content{
        border-radius:20px;
        padding:22px;
    }
}

/*==========================================
EMPLOYEE PORTAL GATE
==========================================*/

.employee-portal-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(5,18,45,.62);
    backdrop-filter:blur(8px);
    z-index:999998;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.employee-portal-modal.show{
    display:flex;
}

.employee-portal-modal__content{
    position:relative;
    width:min(460px,100%);
    background:#fff;
    border-radius:22px;
    padding:30px;
    box-shadow:0 24px 70px rgba(8,28,70,.3);
    text-align:left;
    animation:employeePortalIn .25s ease;
}

@keyframes employeePortalIn{
    from{
        opacity:0;
        transform:translateY(14px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.employee-portal-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:#eef4ff;
    color:#0B2757;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.employee-portal-modal__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border-radius:999px;
    background:#fff3cd;
    color:#856404;
    font-weight:800;
    font-size:13px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.employee-portal-modal h2{
    color:#0B2757;
    font-size:30px;
    margin:0 42px 14px 0;
}

.employee-portal-modal p{
    color:#475569;
    line-height:1.65;
    margin:0 0 20px;
}

.employee-portal-modal__actions{
    display:grid;
    gap:10px;
    margin-top:24px;
}

.employee-portal-modal__primary,
.employee-portal-modal__secondary{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    border-radius:14px;
    font-weight:800;
    text-decoration:none;
    transition:.2s ease;
}

.employee-portal-modal__primary{
    border:0;
    background:#1972F9;
    color:#fff;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(25,114,249,.26);
}

.employee-portal-modal__primary:hover{
    background:#0B5FE8;
    transform:translateY(-2px);
}

.employee-portal-modal__secondary{
    background:#f3f7ff;
    color:#0B2757;
}

.employee-portal-modal__secondary:hover{
    background:#e8f0ff;
}

.employee-portal-modal__note{
    margin:16px 0 0 !important;
    color:#64748b !important;
    font-size:13px;
}

/*==========================================
BLOGPOST SECTION AND PAGE
==========================================*/

.blog-section{
    padding:110px 0;
    background:#f5f8ff;
}

.latest-blog-card{
    background:#fff;
    border-radius:8px;
    padding:34px;
    box-shadow:0 18px 45px rgba(11,39,87,.10);
    border-left:6px solid #1972F9;
    max-width:900px;
    margin:0 auto;
}

.latest-blog-card__meta{
    color:#1972F9;
    font-weight:800;
    text-transform:uppercase;
    font-size:13px;
    margin-bottom:12px;
}

.latest-blog-card h3{
    color:#0B2757;
    font-size:34px;
    margin:0 0 14px;
}

.latest-blog-card p{
    color:#475569;
    line-height:1.8;
    margin-bottom:24px;
}
.latest-blog-card__image{
    display:none;
    margin:-34px -34px 26px;
    max-height:360px;
    overflow:hidden;
    background:#eaf4ff;
}

.latest-blog-card__image img{
    width:100%;
    height:100%;
    max-height:360px;
    object-fit:cover;
}

.latest-blog-card:not(.latest-blog-card--empty) .latest-blog-card__image:not(:empty){
    display:block;
}

.latest-blog-card__content{
    position:relative;
}


.blog-page-body{
    background:#f5f8ff;
    font-family:'Poppins',sans-serif;
    color:#0f172a;
}

.blog-page-header{
    background:#fff;
    box-shadow:0 10px 30px rgba(11,39,87,.08);
    position:sticky;
    top:0;
    z-index:20;
}

.blog-page-nav{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.blog-page-hero{
    padding:90px 0 60px;
    background:linear-gradient(135deg,#0B2757,#1972F9);
    color:#fff;
}

.blog-page-hero span,
.blog-panel-heading span{
    display:inline-block;
    font-weight:800;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.08em;
}

.blog-page-hero h1{
    font-size:52px;
    line-height:1.1;
    margin:14px 0;
}

.blog-page-hero p{
    max-width:720px;
    color:#dbeafe;
    line-height:1.7;
}

.blog-dashboard,
.blog-posts-section{
    padding:70px 0;
}

.blog-dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.blog-side-panel,
.blog-feature-post,
.blog-post-list__item{
    background:#fff;
    border-radius:8px;
    box-shadow:0 18px 45px rgba(11,39,87,.09);
}

.blog-side-panel{
    padding:28px;
}

.blog-panel-heading{
    margin-bottom:20px;
}

.blog-panel-heading span{
    color:#1972F9;
}

.blog-panel-heading h2{
    margin:8px 0 0;
    color:#0B2757;
}

.blog-person-list{
    display:grid;
    gap:12px;
}

.blog-person-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid #e2e8f0;
}

.blog-person-item strong{
    color:#0B2757;
}

.blog-person-item span,
.blog-empty-text{
    color:#64748b;
    font-size:14px;
}

.blog-feature-post{
    padding:34px;
    margin-bottom:24px;
}

.blog-feature-post__date,
.blog-post-list__item span{
    color:#1972F9;
    font-weight:800;
    font-size:13px;
    text-transform:uppercase;
}

.blog-feature-post h3{
    color:#0B2757;
    font-size:36px;
    margin:10px 0 16px;
}

.blog-feature-post p,
.blog-post-list__item p{
    color:#475569;
    line-height:1.8;
}

.blog-post-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.blog-post-list__item{
    padding:24px;
}

.blog-post-list__item h3{
    color:#0B2757;
    margin:8px 0 10px;
}

@media(max-width:800px){
    .blog-dashboard-grid,
    .blog-post-list{
        grid-template-columns:1fr;
    }

    .blog-page-hero h1{
        font-size:38px;
    }

    .latest-blog-card,
    .blog-feature-post{
        padding:26px;
    }
}


/*==========================================
PRODUCT DETAILS MODAL
==========================================*/
.product-card-button{
    border:0;
    padding:0;
    font:inherit;
    text-align:left;
    cursor:pointer;
    width:100%;
}

.product-card-button:focus-visible{
    outline:4px solid rgba(25,114,249,.35);
    outline-offset:4px;
}

.product-overlay small{
    display:inline-flex;
    margin-top:10px;
    color:#fff;
    font-weight:800;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.product-info-modal{
    position:fixed;
    inset:0;
    z-index:999997;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(5,18,45,.62);
    backdrop-filter:blur(8px);
}

.product-info-modal.show{
    display:flex;
}

.product-info-modal__box{
    width:min(920px,100%);
    max-height:92vh;
    overflow:auto;
    background:#fff;
    border-radius:10px;
    box-shadow:0 30px 80px rgba(5,18,45,.35);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,420px);
    position:relative;
}

.product-info-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#eef4ff;
    color:#0B2757;
    font-size:26px;
    line-height:1;
    cursor:pointer;
    z-index:2;
}

.product-info-modal__media{
    min-height:420px;
    background:#eaf4ff;
    display:flex;
    flex-direction:column;
}

.product-info-modal__main-image{
    width:100%;
    height:340px;
    object-fit:cover;
    display:block;
    background:#dcecff;
}

.product-info-modal__thumbs{
    display:flex;
    gap:10px;
    padding:14px;
    overflow-x:auto;
    background:#f7fbff;
}

.product-info-modal__thumb{
    flex:0 0 72px;
    width:72px;
    height:58px;
    padding:0;
    border:2px solid transparent;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
}

.product-info-modal__thumb.active{
    border-color:#1972F9;
}

.product-info-modal__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.product-info-modal__body{
    padding:34px;
}

.product-info-modal__body span{
    color:#1972F9;
    font-weight:800;
    font-size:13px;
    text-transform:uppercase;
}

.product-info-modal__body h2{
    color:#0B2757;
    font-size:34px;
    line-height:1.15;
    margin:10px 0 14px;
}

.product-info-modal__body p{
    color:#475569;
    line-height:1.75;
    margin:0 0 20px;
}

.product-info-modal__list{
    display:grid;
    gap:10px;
    margin-bottom:24px;
}

.product-info-modal__list div{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#26364B;
    font-weight:600;
}

.product-info-modal__list i{
    color:#1972F9;
    margin-top:4px;
}

@media(max-width:760px){
    .product-info-modal__box{
        grid-template-columns:1fr;
    }

    .product-info-modal__media{
        min-height:280px;
    }

    .product-info-modal__main-image{
        height:240px;
    }

    .product-info-modal__body{
        padding:24px;
    }

    .product-info-modal__body h2{
        font-size:28px;
    }
}

/*==========================================
AUTO QUOTATION BLOG AD
==========================================*/
.quote-perspective-ad{
    max-width:900px;
    margin:28px auto 0;
}

.quote-perspective-ad__link{
    position:relative;
    display:grid;
    grid-template-columns:210px minmax(0,1fr) auto;
    align-items:center;
    gap:22px;
    overflow:hidden;
    padding:20px 22px;
    border-radius:8px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(135deg,#0B2757 0%,#1972F9 58%,#00A6FF 100%);
    box-shadow:0 18px 45px rgba(11,39,87,.14);
}

.quote-perspective-ad__link::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
    transform:translateX(-120%);
    animation:quoteAdShine 3.8s ease-in-out infinite;
    pointer-events:none;
}

.quote-perspective-ad__visual{
    position:relative;
    height:132px;
    border-radius:8px;
    background:linear-gradient(180deg,#EAF5FF,#B9DBFF);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
    overflow:hidden;
}

.quote-perspective-ad__storefront{
    position:absolute;
    left:22px;
    right:22px;
    bottom:18px;
    height:74px;
    border-radius:6px 6px 3px 3px;
    background:#fff;
    box-shadow:0 12px 22px rgba(11,39,87,.18);
}

.quote-perspective-ad__storefront::before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    top:34px;
    height:24px;
    background:repeating-linear-gradient(90deg,#D9ECFF 0 18px,#FFFFFF 18px 24px);
}

.quote-perspective-ad__storefront::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:24px;
    background:#1972F9;
}

.quote-perspective-ad__sign{
    position:absolute;
    display:grid;
    place-items:center;
    color:#0B2757;
    background:#fff;
    border:2px solid #F5B400;
    font-size:12px;
    font-weight:900;
    box-shadow:0 8px 18px rgba(11,39,87,.18);
    animation:quoteAdMap 3.8s ease-in-out infinite;
}

.quote-perspective-ad__sign--one{
    left:62px;
    top:34px;
    width:82px;
    height:28px;
    transform:skew(-8deg) rotate(-1deg);
}

.quote-perspective-ad__sign--two{
    left:78px;
    top:72px;
    width:54px;
    height:54px;
    border-radius:50%;
    animation-delay:.25s;
}

.quote-perspective-ad__pin{
    position:absolute;
    width:10px;
    height:10px;
    border:2px solid #fff;
    border-radius:50%;
    background:#F5B400;
    box-shadow:0 3px 8px rgba(11,39,87,.2);
    animation:quoteAdPin 3.8s ease-in-out infinite;
}

.quote-perspective-ad__pin--tl{left:58px;top:30px}
.quote-perspective-ad__pin--tr{left:144px;top:31px}
.quote-perspective-ad__pin--br{left:138px;top:65px}
.quote-perspective-ad__pin--bl{left:60px;top:63px}

.quote-perspective-ad__content{
    position:relative;
    z-index:1;
}

.quote-perspective-ad__content span{
    display:block;
    color:#DFF0FF;
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:6px;
}

.quote-perspective-ad__content h3{
    margin:0 0 8px;
    color:#fff;
    font-size:28px;
    line-height:1.16;
}

.quote-perspective-ad__content p{
    margin:0;
    color:#EAF5FF;
    line-height:1.65;
}

.quote-perspective-ad__cta{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:130px;
    padding:12px 16px;
    border-radius:999px;
    background:#fff;
    color:#075BB8;
    font-size:14px;
    box-shadow:0 10px 24px rgba(11,39,87,.16);
}

@keyframes quoteAdShine{
    0%,48%{transform:translateX(-120%)}
    72%,100%{transform:translateX(120%)}
}

@keyframes quoteAdMap{
    0%,100%{transform:translateY(0) skew(-8deg) rotate(-1deg);border-color:#F5B400}
    45%{transform:translateY(-4px) skew(-13deg) rotate(1deg);border-color:#00A6FF}
}

@keyframes quoteAdPin{
    0%,100%{transform:scale(1)}
    45%{transform:scale(1.28)}
}

@media(max-width:800px){
    .quote-perspective-ad__link{
        grid-template-columns:1fr;
        padding:18px;
    }

    .quote-perspective-ad__visual{
        height:150px;
    }

    .quote-perspective-ad__content h3{
        font-size:23px;
    }

    .quote-perspective-ad__cta{
        width:100%;
    }
}

/* Banner version override */
.quote-perspective-ad{
    max-width:1100px;
    margin:24px auto 0;
}

.quote-perspective-ad__link{
    grid-template-columns:148px minmax(0,1fr) 118px;
    gap:18px;
    min-height:132px;
    padding:16px 18px;
    border-radius:8px;
    background:linear-gradient(100deg,#082C5D 0%,#1972F9 54%,#06A6FF 100%);
    box-shadow:0 14px 34px rgba(11,39,87,.13);
}

.quote-perspective-ad__visual{
    height:96px;
    border-radius:7px;
}

.quote-perspective-ad__storefront{
    left:15px;
    right:15px;
    bottom:12px;
    height:54px;
}

.quote-perspective-ad__storefront::before{
    top:25px;
    height:18px;
    background:repeating-linear-gradient(90deg,#D9ECFF 0 13px,#FFFFFF 13px 18px);
}

.quote-perspective-ad__storefront::after{
    height:18px;
}

.quote-perspective-ad__sign{
    font-size:9px;
    border-width:2px;
}

.quote-perspective-ad__sign--one{
    left:42px;
    top:25px;
    width:62px;
    height:22px;
}

.quote-perspective-ad__sign--two{
    left:56px;
    top:53px;
    width:38px;
    height:38px;
}

.quote-perspective-ad__pin{
    width:8px;
    height:8px;
    border-width:2px;
}

.quote-perspective-ad__pin--tl{left:39px;top:22px}
.quote-perspective-ad__pin--tr{left:106px;top:23px}
.quote-perspective-ad__pin--br{left:100px;top:51px}
.quote-perspective-ad__pin--bl{left:40px;top:50px}

.quote-perspective-ad__content span{
    font-size:10px;
    margin-bottom:4px;
}

.quote-perspective-ad__content h3{
    font-size:22px;
    margin:0 0 5px;
}

.quote-perspective-ad__content p{
    font-size:13px;
    line-height:1.45;
}

.quote-perspective-ad__cta{
    min-width:0;
    padding:10px 14px;
    font-size:13px;
    align-self:center;
}

@media(max-width:800px){
    .quote-perspective-ad__link{
        grid-template-columns:92px minmax(0,1fr);
        min-height:112px;
        gap:12px;
        padding:13px;
    }

    .quote-perspective-ad__visual{
        height:78px;
    }

    .quote-perspective-ad__content h3{
        font-size:17px;
    }

    .quote-perspective-ad__content p{
        font-size:11px;
    }

    .quote-perspective-ad__cta{
        grid-column:1 / -1;
        width:100%;
        padding:9px 12px;
    }
}

.products-finder-cta{
    margin-top:40px;
    text-align:center;
}

.product-info-modal__stage{position:relative}
.product-info-modal__arrow{position:absolute;top:50%;z-index:1;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(11,39,87,.72);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center}
.product-info-modal__arrow.prev{left:14px}.product-info-modal__arrow.next{right:14px}
.product-info-modal__arrow:hover{background:#1972F9}
/* Animated Product Finder ad */
.product-finder-ad{position:relative;isolation:isolate;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;min-height:280px;padding:44px 52px;overflow:hidden;border-radius:26px;color:#fff;text-decoration:none;background:radial-gradient(circle at 88% 15%,rgba(84,184,255,.42),transparent 32%),linear-gradient(120deg,#071b43,#0b3b91 52%,#0879f9);box-shadow:0 24px 60px rgba(5,38,96,.24);transition:.3s}.product-finder-ad:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(5,38,96,.32);color:#fff}.product-finder-ad:before{content:"";position:absolute;z-index:-1;inset:-70%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.18) 49%,transparent 56%);animation:productAdSweep 5.5s infinite}.product-finder-ad__glow{position:absolute;z-index:-1;width:180px;height:180px;left:42%;top:-110px;border-radius:50%;background:#18b9ff;filter:blur(70px);opacity:.5;animation:productAdGlow 4s infinite alternate}.product-finder-ad__content{display:flex;align-items:flex-start;flex-direction:column;z-index:2}.product-finder-ad__eyebrow{display:inline-flex;gap:9px;align-items:center;margin-bottom:14px;padding:8px 13px;border:1px solid #ffffff42;border-radius:999px;background:#ffffff1a;font-size:.76rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.product-finder-ad__content strong{max-width:580px;font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.1;letter-spacing:-.04em}.product-finder-ad__copy{max-width:590px;margin-top:14px;color:#ffffffd1;font-size:.98rem;line-height:1.65}.product-finder-ad__button{display:inline-flex;gap:11px;align-items:center;margin-top:23px;padding:13px 18px;border-radius:12px;background:#fff;color:#075ccc;font-size:.9rem;font-weight:800;box-shadow:0 12px 28px #02194538}.product-finder-ad__visual{position:relative;height:205px;margin-left:36px;perspective:900px}.product-finder-ad__search{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;top:2px;left:2%;width:94%;height:52px;padding:0 17px;border-radius:14px;background:#fffffff0;box-shadow:0 18px 35px #0118463d;color:#64748b}.product-finder-ad__queries{position:relative;height:22px;overflow:hidden;flex:1;color:#172b4d}.product-finder-ad__queries b{position:absolute;inset:0;opacity:0;font-size:.88rem;line-height:22px;animation:productAdQuery 9s infinite}.product-finder-ad__queries b:nth-child(2){animation-delay:3s}.product-finder-ad__queries b:nth-child(3){animation-delay:6s}.product-finder-ad__photos{position:absolute;inset:67px 10px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:rotateY(-7deg)}.product-finder-ad__photos img{width:100%;height:130px;object-fit:cover;border:3px solid #fff;border-radius:14px;box-shadow:0 18px 28px #02184247;animation:productAdFloat 3.8s ease-in-out infinite}.product-finder-ad__photos img:nth-child(2){animation-delay:-1.2s}.product-finder-ad__photos img:nth-child(3){animation-delay:-2.4s}.product-finder-ad__match{position:absolute;z-index:6;right:-5px;bottom:-8px;padding:9px 12px;border-radius:10px;background:#fff;color:#0b6b51;font-size:.72rem;font-weight:800;box-shadow:0 12px 28px #0218423d;animation:productAdBadge 2.6s infinite}@keyframes productAdSweep{0%,38%{transform:translateX(-28%)}70%,100%{transform:translateX(28%)}}@keyframes productAdGlow{to{transform:translate(50px,30px) scale(1.2)}}@keyframes productAdQuery{0%,6%{opacity:0;transform:translateY(12px)}12%,28%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-12px)}}@keyframes productAdFloat{50%{transform:translateY(-9px)}}@keyframes productAdBadge{50%{transform:scale(1.045)}}@media(max-width:820px){.product-finder-ad{grid-template-columns:1fr;padding:34px 28px 28px}.product-finder-ad__visual{width:min(100%,470px);height:190px;margin:30px auto 0}}@media(max-width:520px){.product-finder-ad{padding:28px 20px 22px;border-radius:20px}.product-finder-ad__content strong{font-size:1.65rem}.product-finder-ad__button{width:100%;justify-content:center}.product-finder-ad__visual{height:164px;margin-top:25px}.product-finder-ad__search{height:46px}.product-finder-ad__photos{inset:60px 4px 0;gap:6px}.product-finder-ad__photos img{height:99px;border-width:2px}.product-finder-ad__match{right:0;bottom:-5px;font-size:.64rem}}@media(prefers-reduced-motion:reduce){.product-finder-ad:before,.product-finder-ad__glow,.product-finder-ad__queries b,.product-finder-ad__photos img,.product-finder-ad__match{animation:none}.product-finder-ad__queries b:first-child{opacity:1}}
/* Product Finder coming-soon reveal */
.product-coming-soon{position:fixed;z-index:10050;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,16,44,.78);backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.product-coming-soon.show{opacity:1;visibility:visible}.product-coming-soon__card{position:relative;width:min(570px,100%);padding:54px 42px 38px;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:30px;text-align:center;color:#fff;background:radial-gradient(circle at 50% -10%,#2baaff 0,transparent 42%),linear-gradient(145deg,#06183c,#0b46a4 58%,#087cf5);box-shadow:0 35px 100px rgba(0,15,50,.5);transform:translateY(35px) scale(.88);transition:transform .55s cubic-bezier(.2,1.35,.35,1)}.product-coming-soon.show .product-coming-soon__card{transform:none}.product-coming-soon__close{position:absolute;z-index:5;right:18px;top:16px;width:38px;height:38px;border:1px solid #ffffff42;border-radius:50%;background:#ffffff17;color:#fff;font-size:25px;cursor:pointer}.product-coming-soon__icon{position:relative;z-index:2;display:grid;place-items:center;width:94px;height:94px;margin:0 auto 20px;border-radius:27px;background:linear-gradient(145deg,#fff,#d9efff);color:#0874ed;font-size:40px;box-shadow:0 20px 45px #001a4f66;transform:rotate(-8deg)}.product-coming-soon.show .product-coming-soon__icon{animation:comingRocket 1s .25s cubic-bezier(.2,1.4,.4,1) both,comingFloat 2.8s 1.25s ease-in-out infinite}.product-coming-soon__tag{display:inline-flex;gap:7px;align-items:center;padding:7px 12px;border-radius:99px;background:#ffffff17;color:#bfe6ff;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.product-coming-soon h2{margin:16px 0 13px;color:#fff;font-size:clamp(2rem,6vw,3rem);line-height:1.03;letter-spacing:-.05em}.product-coming-soon h2 em{color:#69d5ff;font-style:normal}.product-coming-soon p{max-width:455px;margin:0 auto;color:#ffffffc9;line-height:1.65}.product-coming-soon__features{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:24px 0}.product-coming-soon__features span{padding:8px 11px;border:1px solid #ffffff2e;border-radius:10px;background:#ffffff12;font-size:.72rem;font-weight:700}.product-coming-soon__features i{margin-right:5px;color:#72dcff}.product-coming-soon__okay{padding:13px 20px;border:0;border-radius:12px;background:#fff;color:#0867d9;font:inherit;font-size:.88rem;font-weight:800;cursor:pointer;box-shadow:0 13px 28px #001c5552}.product-coming-soon__burst{position:absolute;inset:0;pointer-events:none}.product-coming-soon__burst i{position:absolute;width:7px;height:18px;border-radius:4px;background:#72dcff;opacity:0}.product-coming-soon.show .product-coming-soon__burst i{animation:comingConfetti 1.4s .3s ease-out both}.product-coming-soon__burst i:nth-child(1){left:12%;top:20%;transform:rotate(30deg)}.product-coming-soon__burst i:nth-child(2){left:23%;top:9%;background:#fff;animation-delay:.45s}.product-coming-soon__burst i:nth-child(3){right:15%;top:18%;background:#ffd45d;transform:rotate(-35deg)}.product-coming-soon__burst i:nth-child(4){right:26%;top:7%;transform:rotate(50deg);animation-delay:.55s}.product-coming-soon__burst i:nth-child(5){left:9%;top:55%;background:#ffd45d;animation-delay:.65s}.product-coming-soon__burst i:nth-child(6){right:8%;top:51%;background:#fff;animation-delay:.75s}@keyframes comingRocket{0%{opacity:0;transform:translateY(80px) rotate(-20deg) scale(.5)}70%{opacity:1;transform:translateY(-10px) rotate(5deg) scale(1.08)}100%{transform:rotate(-8deg)}}@keyframes comingFloat{50%{transform:translateY(-8px) rotate(-3deg)}}@keyframes comingConfetti{0%{opacity:0;translate:0 -25px;scale:.3}35%{opacity:1}100%{opacity:0;translate:0 70px;rotate:160deg}}@media(max-width:520px){.product-coming-soon__card{padding:48px 20px 28px;border-radius:23px}.product-coming-soon__icon{width:78px;height:78px;font-size:32px}.product-coming-soon__features{gap:6px}.product-coming-soon__features span{font-size:.63rem}}@media(prefers-reduced-motion:reduce){.product-coming-soon__card,.product-coming-soon__icon,.product-coming-soon__burst i{animation:none!important;transition:none}}
