@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin-regular.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v20-latin-500.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v20-latin-700.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/poppins-v20-latin-800.woff2') format('woff2')
}
/* =========================================================
           ROOT COLORS
        ========================================================= */
:root {
    --ad-navy: #0B2D46;
    --ad-navy-2: #123E5A;
    --ad-dark: #07263A;
    --ad-steel: #516F82;
    --ad-steel-2: #6D8797;
    --ad-soft: #DCE4E8;
    --ad-orange: #F36F21;
    --ad-orange-light: #FF8740;
    --ad-bg: #F7F7F5;
    --ad-white: #FFFFFF;
    --ad-text: #193B50;
    --ad-muted: #677C89;
    --ad-line: rgba(11, 45, 70, .14);
    --ad-shadow:
        0 30px 80px rgba(11, 45, 70, .18);
}
/* =========================================================
           BASIC RESET
        ========================================================= */
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    background:
        var(--ad-bg);
    color:
        var(--ad-text);
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
    display: block;
}
/* =========================================================
           HERO
        ========================================================= */
.ad-hero {
    position: relative;
    width: 100%;
    min-height: 950px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 42%,
            #FFFFFF 0%,
            #FBFBFA 42%,
            #F2F4F5 75%,
            #EDEFEE 100%);
}
/* =========================================================
           TEXTURE
        ========================================================= */
.ad-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .42;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(11, 45, 70, .075) .7px,
            transparent .7px),
        radial-gradient(rgba(243, 111, 33, .045) .65px,
            transparent .65px);
    background-size:
        9px 9px,
        14px 14px;
    background-position:
        0 0,
        4px 5px;
}
.ad-hero::after {
    content: "";
    position: absolute;
    width: 780px;
    height: 780px;
    left: 50%;
    top: 53%;
    z-index: -4;
    transform:
        translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .96),
            rgba(255, 255, 255, .5) 48%,
            transparent 72%);
}
/* =========================================================
           DECORATIVE BACKGROUND
        ========================================================= */
.ad-side-dark-shape {
    position: absolute;
    left: -175px;
    top: -85px;
    width: 280px;
    height: 510px;
    z-index: -3;
    border-radius:
        0 0 135px 0;
    background:
        linear-gradient(150deg,
            var(--ad-navy),
            var(--ad-dark));
}
.ad-top-ring {
    position: absolute;
    right: 14%;
    top: -128px;
    width: 215px;
    height: 215px;
    z-index: -2;
    border:
        43px solid var(--ad-steel);
    border-radius: 50%;
    opacity: .95;
    animation:
        adTopRing 7s ease-in-out infinite;
}
.ad-orange-block {
    position: absolute;
    right: -125px;
    bottom: -75px;
    width: 315px;
    height: 490px;
    z-index: -3;
    border-radius:
        170px 0 0 0;
    background:
        linear-gradient(145deg,
            var(--ad-orange-light),
            var(--ad-orange));
}
/* =========================================================
           HEADER
        ========================================================= */
.ad-header {
    position: relative;
    z-index: 100;
    padding:
        22px 0 8px;
}
.ad-header-row {
    position: relative;
    align-items: center;
}
/* =========================================================
           LOGO
        ========================================================= */
.ad-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color:
        var(--ad-navy);
}
.ad-logo-mark {
    position: relative;
    width: 67px;
    height: 67px;
    flex:
        0 0 67px;
    border-radius: 50%;
    animation:
        adLogoFloat 4s ease-in-out infinite;
}
.ad-logo-mark::before {
    content: "";
    position: absolute;
    inset: 4px;
    border:
        2px solid rgba(11, 45, 70, .15);
    border-radius: 50%;
}
.ad-logo-blade {
    position: absolute;
    width: 25px;
    height: 30px;
    left: 21px;
    top: 3px;
    border-radius:
        80% 30% 70% 20%;
    transform-origin:
        12px 30px;
    background:
        var(--ad-navy);
}
.ad-logo-blade:nth-child(1) {
    transform:
        rotate(0deg);
}
.ad-logo-blade:nth-child(2) {
    transform:
        rotate(90deg);
    background:
        var(--ad-steel);
}
.ad-logo-blade:nth-child(3) {
    transform:
        rotate(180deg);
}
.ad-logo-blade:nth-child(4) {
    transform:
        rotate(270deg);
    background:
        var(--ad-orange);
}
.ad-logo-center {
    position: absolute;
    left: 25px;
    top: 25px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    border:
        3px solid white;
    box-shadow:
        0 0 0 2px var(--ad-navy);
}
.ad-logo-copy {
    display: flex;
    flex-direction: column;
    line-height: .9;
}
.ad-logo-copy small {
    color:
        var(--ad-navy);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
}
.ad-logo-copy strong {
    margin-top: 5px;
    color:
        var(--ad-navy);
    font-size:
        clamp(21px, 2vw, 31px);
    font-weight: 900;
    letter-spacing: .3px;
}
.ad-logo-copy em {
    margin-top: 7px;
    color:
        var(--ad-orange);
    font-size: 15px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 4px;
}
/* =========================================================
           NAV DESKTOP
        ========================================================= */
.ad-nav-area {
    position: relative;
}
.ad-menu-check,
.ad-services-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ad-mobile-menu-btn {
    display: none;
}
.ad-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:
        clamp(25px, 3vw, 52px);
}
.ad-nav>a,
.ad-service-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding:
        16px 0;
    color:
        var(--ad-navy);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition:
        color .3s ease,
        transform .3s ease;
}
.ad-nav>a::after,
.ad-service-trigger::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 3px;
    border-radius: 10px;
    transform:
        translateX(-50%);
    background:
        var(--ad-orange);
    transition:
        width .3s ease;
}
.ad-nav>a:hover,
.ad-service-trigger:hover {
    color:
        var(--ad-steel);
    transform:
        translateY(-2px);
}
.ad-nav>a:hover::after,
.ad-service-trigger:hover::after {
    width: 26px;
}
/* =========================================================
           DROPDOWN
        ========================================================= */
.ad-services {
    position: relative;
}
.ad-chevron {
    width: 7px;
    height: 7px;
    border-right:
        2px solid currentColor;
    border-bottom:
        2px solid currentColor;
    transform:
        rotate(45deg) translateY(-2px);
    transition:
        transform .3s ease;
}
.ad-services:hover .ad-chevron {
    transform:
        rotate(225deg);
}
.ad-dropdown {
    position: absolute;
    top:
        calc(100% + 3px);
    left: 50%;
    width: 285px;
    padding: 11px;
    border:
        1px solid rgba(11, 45, 70, .1);
    border-radius: 18px;
    background:
        rgba(255, 255, 255, .97);
    box-shadow:
        0 25px 70px rgba(11, 45, 70, .17);
    backdrop-filter:
        blur(15px);
    opacity: 0;
    visibility: hidden;
    transform:
        translate(-50%, 15px);
    transition:
        .35s ease;
}
.ad-services:hover .ad-dropdown {
    opacity: 1;
    visibility: visible;
    transform:
        translate(-50%, 0);
}
.ad-dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding:
        11px 12px;
    margin:
        2px 0;
    border-radius: 11px;
    color:
        var(--ad-navy);
    font-size: 14px;
    font-weight: 750;
    transition:
        background .3s ease,
        color .3s ease,
        padding .3s ease;
}
.ad-dropdown a span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex:
        0 0 29px;
    border-radius: 50%;
    color:
        var(--ad-steel);
    background:
        rgba(81, 111, 130, .11);
    font-size: 10px;
    font-weight: 900;
    transition:
        .3s ease;
}
.ad-dropdown a:hover {
    padding-left: 17px;
    color:
        var(--ad-orange);
    background:
        #F5F7F8;
}
.ad-dropdown a:hover span {
    color: white;
    background:
        var(--ad-orange);
    transform:
        rotate(-8deg);
}
/* =========================================================
           HEADER CTA
        ========================================================= */
.ad-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding:
        0 20px;
    border-radius: 100px;
    color: white;
    font-size: 14px;
    font-weight: 900;
    background:
        linear-gradient(135deg,
            var(--ad-navy),
            var(--ad-navy-2));
    box-shadow:
        0 11px 30px rgba(11, 45, 70, .2);
    transition:
        .35s ease;
}
.ad-header-cta:hover {
    color: white;
    transform:
        translateY(-3px);
    background:
        linear-gradient(135deg,
            var(--ad-orange),
            var(--ad-orange-light));
    box-shadow:
        0 17px 35px rgba(243, 111, 33, .28);
}
.ad-phone {
    font-size: 18px;
}
/* =========================================================
           HERO GRID
        ========================================================= */
.ad-hero-body {
    position: relative;
    z-index: 10;
    padding:
        42px 0 100px;
}
.ad-main-row {
    min-height: 730px;
    align-items: center;
}
/* =========================================================
           IMAGE COLUMNS
        ========================================================= */
.ad-side-column {
    position: relative;
    padding: 0;
}
.ad-photo-card {
    position: relative;
    width:
        min(390px, 112%);
    height: 650px;
}
.ad-left-photo {
    margin-left: -20px;
    animation:
        adLeftIn 1.05s cubic-bezier(.2, .8, .2, 1) both;
}
.ad-right-photo {
    margin-left: auto;
    margin-right: 10px;
    animation:
        adRightIn 1.05s .12s cubic-bezier(.2, .8, .2, 1) both;
}
/* =========================================================
           IMAGE OUTLINE
        ========================================================= */
.ad-photo-outline {
    position: absolute;
    inset: -16px;
    z-index: -1;
    border:
        2px solid var(--ad-navy);
    border-radius:
        195px 195px 150px 150px;
}
.ad-photo-outline::after {
    content: "";
    position: absolute;
    inset: 7px;
    border:
        1px solid rgba(81, 111, 130, .35);
    border-radius: inherit;
}
/* =========================================================
           IMAGE FRAME
        ========================================================= */
.ad-photo-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border:
        15px solid white;
    border-radius:
        190px 190px 145px 145px;
    background:
        var(--ad-soft);
    box-shadow:
        var(--ad-shadow);
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}
.ad-photo-card:hover .ad-photo-frame {
    transform:
        translateY(-6px);
    box-shadow:
        0 38px 90px rgba(11, 45, 70, .25);
}
.ad-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        transform 1s cubic-bezier(.2, .75, .2, 1),
        filter .6s ease;
}
.ad-photo-card:hover .ad-photo-frame img {
    transform:
        scale(1.055);
    filter:
        contrast(1.03) saturate(1.04);
}
.ad-photo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 40%,
            rgba(7, 38, 58, .16) 100%);
}
/* =========================================================
           FLOATING FAN BADGE
        ========================================================= */
.ad-round-badge {
    position: absolute;
    z-index: 15;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:
        6px solid white;
    outline:
        2px solid var(--ad-navy);
    background:
        linear-gradient(145deg,
            #FFFFFF,
            #F1F4F5);
    box-shadow:
        0 15px 38px rgba(11, 45, 70, .22);
    animation:
        adFloat 4.6s ease-in-out infinite;
}
.ad-fan-badge {
    right: -55px;
    top: 150px;
}
.ad-mini-fan {
    position: relative;
    width: 58px;
    height: 58px;
    transition:
        transform .6s ease;
}
.ad-round-badge:hover .ad-mini-fan {
    transform:
        rotate(90deg);
}
.ad-mini-fan b {
    position: absolute;
    left: 21px;
    top: 2px;
    width: 17px;
    height: 27px;
    border-radius:
        80% 30% 70% 20%;
    background:
        var(--ad-navy);
    transform-origin:
        8px 27px;
}
.ad-mini-fan b:nth-child(1) {
    transform:
        rotate(0);
}
.ad-mini-fan b:nth-child(2) {
    transform:
        rotate(90deg);
    background:
        var(--ad-steel);
}
.ad-mini-fan b:nth-child(3) {
    transform:
        rotate(180deg);
}
.ad-mini-fan b:nth-child(4) {
    transform:
        rotate(270deg);
    background:
        var(--ad-steel);
}
.ad-mini-fan i {
    position: absolute;
    left: 23px;
    top: 23px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    box-shadow:
        0 0 0 3px white;
}
/* =========================================================
           VENT BADGE
        ========================================================= */
.ad-vent-badge {
    right: 18px;
    bottom: -35px;
    animation-delay: .5s;
}
.ad-vent {
    width: 55px;
}
.ad-vent span {
    display: block;
    width: 100%;
    height: 6px;
    margin:
        6px 0;
    border-radius: 3px;
    background:
        var(--ad-navy);
    transform:
        skewX(-13deg);
    transition:
        transform .3s ease;
}
.ad-vent-badge:hover .ad-vent span:nth-child(odd) {
    transform:
        skewX(-13deg) translateX(4px);
}
.ad-vent-badge:hover .ad-vent span:nth-child(even) {
    transform:
        skewX(-13deg) translateX(-4px);
}
/* =========================================================
           LEFT ORANGE RING
        ========================================================= */
.ad-orange-ring {
    position: absolute;
    right: 18px;
    bottom: -18px;
    z-index: 9;
    width: 105px;
    height: 105px;
    border:
        29px solid var(--ad-orange);
    border-left-color:
        transparent;
    border-radius: 50%;
    transform:
        rotate(25deg);
    animation:
        adOrangeRing 6s ease-in-out infinite;
}
/* =========================================================
           RIGHT AIR FLOW
        ========================================================= */
.ad-air-wave {
    position: absolute;
    left: -78px;
    top: 105px;
    z-index: 12;
    width: 160px;
}
.ad-air-wave span {
    display: block;
    width: 145px;
    height: 17px;
    margin-bottom: 2px;
    border-top:
        4px solid var(--ad-orange);
    border-radius: 50%;
    transform:
        rotate(5deg);
    animation:
        adWave 2.8s ease-in-out infinite;
}
.ad-air-wave span:nth-child(2) {
    width: 125px;
    animation-delay: .15s;
}
.ad-air-wave span:nth-child(3) {
    width: 105px;
    animation-delay: .3s;
}
/* =========================================================
           DOTS
        ========================================================= */
.ad-dot-grid {
    position: absolute;
    display: grid;
    grid-template-columns:
        repeat(3, 6px);
    gap: 11px;
}
.ad-dot-grid span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background:
        var(--ad-navy);
    animation:
        adDot 2s ease-in-out infinite;
}
.ad-dot-grid span:nth-child(2n) {
    animation-delay: .2s;
}
.ad-dot-grid span:nth-child(3n) {
    animation-delay: .35s;
}
.ad-dots-left {
    left: 0;
    bottom: 60px;
}
.ad-dots-right {
    right: 5px;
    bottom: 20px;
}
.ad-dots-right span {
    background:
        rgba(255, 255, 255, .95);
}
/* =========================================================
           CENTER COLUMN
        ========================================================= */
.ad-content-column {
    position: relative;
    z-index: 20;
    padding-left:
        clamp(22px, 4vw, 65px);
    padding-right:
        clamp(22px, 4vw, 65px);
}
.ad-content {
    max-width: 720px;
    margin:
        0 auto;
    text-align: center;
    animation:
        adContentIn .9s .18s ease both;
}
/* =========================================================
           CENTER TOP DOTS
        ========================================================= */
.ad-top-dots {
    display: grid;
    width: max-content;
    grid-template-columns:
        repeat(4, 7px);
    gap: 10px;
    margin:
        0 auto 55px;
}
.ad-top-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--ad-navy);
    animation:
        adDot 2s ease-in-out infinite;
}
.ad-top-dots span:nth-child(2n) {
    animation-delay: .2s;
}
/* =========================================================
           SMALL LABEL
        ========================================================= */
.ad-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    color:
        var(--ad-steel);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}
.ad-eyebrow::before,
.ad-eyebrow::after {
    content: "";
    width: 32px;
    height: 1px;
    background:
        var(--ad-orange);
}
/* =========================================================
           TITLE
        ========================================================= */
.ad-title {
    margin: 0;
    line-height: .84;
}
.ad-title-main {
    display: block;
    color:
        var(--ad-navy);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        69px;
    font-weight: 900;
    letter-spacing: -5px;
    text-shadow:
        0 8px 20px rgba(11, 45, 70, .06);
}
.ad-title-script {
    position: relative;
    display: block;
    width: max-content;
    margin:
        -4px auto 35px;
    color:
        var(--ad-orange);
    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;
    font-size:
        clamp(72px, 8vw, 120px);
    font-weight: 400;
    line-height: 1;
    transform:
        rotate(-3deg);
}
.ad-title-script::after {
    content: "";
    position: absolute;
    left: 5%;
    right: -2%;
    bottom: 0;
    height: 4px;
    border-radius: 50%;
    background:
        linear-gradient(90deg,
            transparent,
            var(--ad-orange),
            transparent);
}
/* =========================================================
           DESCRIPTION
        ========================================================= */
.ad-description {
    max-width: 650px;
    margin:
        0 auto 31px;
    color:
        var(--ad-text);
    font-size:
        clamp(14px, 1.25vw, 17px);
    font-weight: 550;
    line-height: 1.9;
}
/* =========================================================
           CTA BUTTONS
        ========================================================= */
.ad-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    flex-wrap: wrap;
}
.ad-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    overflow: hidden;
    min-width: 175px;
    height: 61px;
    padding:
        0 31px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 900;
    transition:
        .35s ease;
}
.ad-btn::before {
    content: "";
    position: absolute;
    left: -50px;
    top: -60px;
    width: 28px;
    height: 180px;
    transform:
        rotate(28deg);
    background:
        rgba(255, 255, 255, .25);
    transition:
        left .55s ease;
}
.ad-btn:hover::before {
    left: 120%;
}
.ad-btn-primary {
    color: white;
    background:
        linear-gradient(135deg,
            var(--ad-navy),
            var(--ad-navy-2));
    box-shadow:
        0 15px 38px rgba(11, 45, 70, .24);
}
.ad-btn-primary:hover {
    color: white;
    transform:
        translateY(-5px);
    box-shadow:
        0 20px 45px rgba(11, 45, 70, .3);
}
.ad-arrow {
    color:
        var(--ad-orange);
    font-size: 25px;
    transition:
        transform .3s ease;
}
.ad-btn-primary:hover .ad-arrow {
    transform:
        translateX(6px);
}
.ad-btn-light {
    color:
        var(--ad-navy);
    border:
        1px solid rgba(11, 45, 70, .18);
    background:
        rgba(255, 255, 255, .78);
    backdrop-filter:
        blur(9px);
}
.ad-btn-light:hover {
    color:
        var(--ad-orange);
    border-color:
        var(--ad-orange);
    transform:
        translateY(-5px);
    box-shadow:
        0 14px 32px rgba(11, 45, 70, .09);
}
.ad-play {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: white;
    background:
        var(--ad-orange);
    font-size: 9px;
}
/* =========================================================
           TRUST ITEMS
        ========================================================= */
.ad-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 26px;
}
.ad-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color:
        var(--ad-muted);
    font-size: 12px;
    font-weight: 800;
    transition:
        .3s ease;
}
.ad-check {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: white;
    background:
        var(--ad-steel);
    font-size: 11px;
    transition:
        .3s ease;
}
.ad-trust-item:hover {
    color:
        var(--ad-navy);
    transform:
        translateY(-3px);
}
.ad-trust-item:hover .ad-check {
    background:
        var(--ad-orange);
    transform:
        rotate(-10deg);
}
/* =========================================================
           BOTTOM AIRFLOW
        ========================================================= */
.ad-bottom-wave {
    position: absolute;
    left: 4%;
    bottom: -80px;
    width: 200px;
}
.ad-bottom-wave span {
    display: block;
    width: 150px;
    height: 22px;
    margin:
        -2px 0;
    border-top:
        5px solid rgba(81, 111, 130, .72);
    border-radius: 50%;
    transform:
        rotate(7deg);
    animation:
        adBottomWave 3.5s ease-in-out infinite;
}
.ad-bottom-wave span:nth-child(2) {
    margin-left: 9px;
}
.ad-bottom-wave span:nth-child(3) {
    margin-left: 18px;
}
/* =========================================================
           BOTTOM FAN
        ========================================================= */
.ad-bottom-fan {
    position: absolute;
    left: 50%;
    bottom: -215px;
    z-index: 2;
    transform:
        translateX(-50%);
}
.ad-bottom-fan-ring {
    display: grid;
    place-items: center;
    width: 330px;
    height: 330px;
    border:
        2px solid rgba(11, 45, 70, .45);
    border-radius: 50%;
    background:
        rgba(255, 255, 255, .75);
    box-shadow:
        0 0 0 13px rgba(255, 255, 255, .8),
        0 0 0 15px rgba(81, 111, 130, .27);
}
.ad-bottom-fan-core {
    position: relative;
    width: 245px;
    height: 245px;
    border-radius: 50%;
    background:
        #DEE5E9;
    animation:
        adSpin 25s linear infinite;
}
.ad-big-blade {
    position: absolute;
    left: 101px;
    top: 5px;
    width: 45px;
    height: 110px;
    border-radius:
        90% 30% 80% 20%;
    transform-origin:
        20px 118px;
    background:
        linear-gradient(180deg,
            var(--ad-navy),
            var(--ad-steel));
}
.ad-big-blade:nth-child(1) {
    transform:
        rotate(0);
}
.ad-big-blade:nth-child(2) {
    transform:
        rotate(60deg);
}
.ad-big-blade:nth-child(3) {
    transform:
        rotate(120deg);
}
.ad-big-blade:nth-child(4) {
    transform:
        rotate(180deg);
}
.ad-big-blade:nth-child(5) {
    transform:
        rotate(240deg);
}
.ad-big-blade:nth-child(6) {
    transform:
        rotate(300deg);
}
.ad-big-center {
    position: absolute;
    left: 97px;
    top: 97px;
    z-index: 10;
    width: 52px;
    height: 52px;
    border:
        11px solid white;
    border-radius: 50%;
    background:
        var(--ad-orange);
}
/* =========================================================
           ANIMATIONS
        ========================================================= */
@keyframes adContentIn {
    from {
        opacity: 0;
        transform:
            translateY(35px);
    }
    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}
@keyframes adLeftIn {
    from {
        opacity: 0;
        transform:
            translateX(-75px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}
@keyframes adRightIn {
    from {
        opacity: 0;
        transform:
            translateX(75px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}
@keyframes adFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-12px);
    }
}
@keyframes adWave {
    0%,
    100% {
        transform:
            translateX(0) rotate(5deg);
    }
    50% {
        transform:
            translateX(14px) rotate(5deg);
    }
}
@keyframes adBottomWave {
    0%,
    100% {
        opacity: .55;
        transform:
            translateX(0) rotate(7deg);
    }
    50% {
        opacity: 1;
        transform:
            translateX(14px) rotate(7deg);
    }
}
@keyframes adDot {
    0%,
    100% {
        opacity: .35;
        transform:
            scale(.75);
    }
    50% {
        opacity: 1;
        transform:
            scale(1);
    }
}
@keyframes adLogoFloat {
    0%,
    100% {
        transform:
            rotate(0deg);
    }
    50% {
        transform:
            rotate(5deg);
    }
}
@keyframes adOrangeRing {
    0%,
    100% {
        transform:
            rotate(25deg) translateY(0);
    }
    50% {
        transform:
            rotate(34deg) translateY(-8px);
    }
}
@keyframes adTopRing {
    0%,
    100% {
        transform:
            translateY(0) rotate(0);
    }
    50% {
        transform:
            translateY(12px) rotate(8deg);
    }
}
@keyframes adSpin {
    from {
        transform:
            rotate(0deg);
    }
    to {
        transform:
            rotate(360deg);
    }
}
/* =========================================================
           RESPONSIVE 1399
        ========================================================= */
@media (max-width: 1399.98px) {
    .ad-hero {
        min-height: 870px;
    }
    .ad-main-row {
        min-height: 665px;
    }
    .ad-photo-card {
        width: 335px;
        height: 585px;
    }
    .ad-title-main {
        letter-spacing: -4px;
    }
}
/* =========================================================
           RESPONSIVE 1199
        ========================================================= */
@media (max-width: 1199.98px) {
    .ad-photo-card {
        width: 300px;
        height: 545px;
    }
    .ad-fan-badge {
        right: -40px;
    }
    .ad-title-main {
        font-size:
            clamp(55px, 6.3vw, 79px);
    }
    .ad-title-script {
        font-size:
            clamp(70px, 7.8vw, 95px);
    }
}
/* =========================================================
           RESPONSIVE TABLET + MOBILE
           CONTENT FIRST
        ========================================================= */
@media (max-width: 991.98px) {
    .ad-hero {
        min-height: auto;
        padding-bottom: 95px;
    }
    .ad-header {
        padding:
            14px 0 8px;
    }
    .ad-hero-body {
        padding:
            25px 0 85px;
    }
    .ad-main-row {
        min-height: 0;
        align-items: stretch;
    }
    /*
                Important:
                content first
                left image second
                right image third
            */
    .ad-content-column {
        order: 1;
        width: 100%;
        padding:
            48px 24px 55px;
    }
    .ad-left-column {
        order: 2;
    }
    .ad-right-column {
        order: 3;
    }
    .ad-side-column {
        display: flex;
        align-items: center;
        justify-content: center;
        padding:
            20px;
    }
    .ad-left-photo,
    .ad-right-photo {
        margin:
            0 auto;
    }
    .ad-photo-card {
        width:
            min(350px, 91vw);
        height: 525px;
    }
    .ad-content {
        max-width: 750px;
    }
    .ad-top-dots {
        margin-bottom: 35px;
    }
    .ad-title-main {
        font-size:
            clamp(53px, 9vw, 76px);
    }
    .ad-title-script {
        font-size:
            clamp(72px, 11vw, 99px);
    }
    .ad-bottom-wave {
        display: none;
    }
    .ad-bottom-fan {
        opacity: .18;
        bottom: -260px;
    }
    /* =====================================================
               MOBILE NAV
            ===================================================== */
    .ad-nav-area {
        order: 3;
        flex:
            0 0 100%;
        width: 100%;
        max-width: 100%;
        padding:
            0 12px;
    }
    .ad-mobile-menu-btn {
        position: absolute;
        right: 18px;
        top: -48px;
        z-index: 120;
        display: flex;
        width: 44px;
        height: 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin: 0;
        border:
            1px solid rgba(11, 45, 70, .12);
        border-radius: 50%;
        background:
            rgba(255, 255, 255, .96);
        box-shadow:
            0 10px 25px rgba(11, 45, 70, .13);
        cursor: pointer;
    }
    .ad-mobile-menu-btn span {
        display: block;
        width: 19px;
        height: 2px;
        border-radius: 10px;
        background:
            var(--ad-navy);
        transition:
            .3s ease;
    }
    .ad-menu-check:checked+.ad-mobile-menu-btn span:nth-child(1) {
        transform:
            translateY(7px) rotate(45deg);
    }
    .ad-menu-check:checked+.ad-mobile-menu-btn span:nth-child(2) {
        opacity: 0;
    }
    .ad-menu-check:checked+.ad-mobile-menu-btn span:nth-child(3) {
        transform:
            translateY(-7px) rotate(-45deg);
    }
    .ad-nav {
        position: relative;
        display: flex;
        width: 100%;
        max-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        padding:
            0 12px;
        border:
            1px solid transparent;
        border-radius: 20px;
        background:
            rgba(255, 255, 255, 0);
        opacity: 0;
        transform:
            translateY(-10px);
        transition:
            max-height .5s ease,
            opacity .35s ease,
            transform .35s ease,
            padding .35s ease,
            background .35s ease,
            border-color .35s ease,
            box-shadow .35s ease;
    }
    .ad-menu-check:checked~.ad-nav {
        max-height: 720px;
        margin-top: 8px;
        padding:
            12px;
        border-color:
            rgba(11, 45, 70, .1);
        background:
            rgba(255, 255, 255, .98);
        box-shadow:
            0 22px 55px rgba(11, 45, 70, .14);
        opacity: 1;
        transform:
            translateY(0);
    }
    .ad-nav>a,
    .ad-service-trigger {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding:
            13px 14px;
        border-radius: 12px;
        font-size: 14px;
        transform: none;
    }
    .ad-nav>a::after,
    .ad-service-trigger::after {
        display: none;
    }
    .ad-nav>a:hover,
    .ad-service-trigger:hover {
        color:
            var(--ad-orange);
        background:
            #F4F6F7;
        transform: none;
    }
    .ad-services {
        width: 100%;
    }
    .ad-dropdown {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background:
            #F5F7F8;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            max-height .4s ease,
            padding .35s ease,
            margin .35s ease;
    }
    .ad-services:hover .ad-dropdown {
        transform: none;
    }
    .ad-services-check:checked~.ad-dropdown {
        max-height: 430px;
        margin:
            4px 0 8px;
        padding:
            7px;
    }
    .ad-services-check:checked+.ad-service-trigger .ad-chevron {
        transform:
            rotate(225deg);
    }
    .ad-dropdown a {
        padding:
            10px 11px;
        font-size: 13px;
    }
    /* decorative elements */
    .ad-side-dark-shape {
        left: -170px;
        width: 230px;
        height: 380px;
        opacity: .9;
    }
    .ad-top-ring {
        width: 145px;
        height: 145px;
        top: -90px;
        border-width: 29px;
        opacity: .4;
    }
    .ad-orange-block {
        width: 195px;
        height: 400px;
        right: -135px;
    }
}
/* =========================================================
           TABLET
           PHOTOS SIDE BY SIDE AFTER CONTENT
        ========================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ad-left-column,
    .ad-right-column {
        flex:
            0 0 50%;
        width: 50%;
        max-width: 50%;
    }
    .ad-photo-card {
        width:
            min(320px, 91%);
        height: 490px;
    }
    .ad-fan-badge {
        width: 78px;
        height: 78px;
        right: -17px;
        top: 120px;
    }
    .ad-vent-badge {
        width: 80px;
        height: 80px;
    }
    .ad-air-wave {
        left: -36px;
        transform:
            scale(.8);
        transform-origin:
            right center;
    }
}
/* =========================================================
           MOBILE
        ========================================================= */
@media (max-width: 767.98px) {
    .ad-header .container {
        padding-left: 17px;
        padding-right: 17px;
    }
    /* logo */
    .ad-logo-mark {
        width: 50px;
        height: 50px;
        flex:
            0 0 50px;
        transform:
            scale(.78);
        transform-origin:
            left center;
    }
    .ad-logo-copy small {
        font-size: 8px;
        letter-spacing: 2px;
    }
    .ad-logo-copy strong {
        font-size: 17px;
    }
    .ad-logo-copy em {
        font-size: 9px;
        letter-spacing: 2.7px;
    }
    /* header button */
    .ad-header-cta {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        border-radius: 50%;
    }
    .ad-header-cta-text {
        display: none;
    }
    /*
                hamburger next to call
            */
    .ad-mobile-menu-btn {
        right: 64px;
        top: -44px;
        width: 42px;
        height: 42px;
    }
    /* center content first */
    .ad-content-column {
        padding:
            48px 17px 45px;
    }
    .ad-top-dots {
        margin-bottom: 29px;
    }
    .ad-eyebrow {
        margin-bottom: 15px;
        font-size: 9px;
        letter-spacing: 2px;
    }
    .ad-eyebrow::before,
    .ad-eyebrow::after {
        width: 22px;
    }
    .ad-title-main {
        font-size:
            clamp(45px, 14.5vw, 67px);
        letter-spacing: -3px;
        line-height: .94;
    }
    .ad-title-script {
        margin:
            2px auto 25px;
        font-size:
            clamp(67px, 19vw, 93px);
    }
    .ad-description {
        max-width: 520px;
        margin-bottom: 27px;
        font-size: 14px;
        line-height: 1.75;
    }
    .ad-actions {
        flex-direction: column;
        width: 100%;
    }
    .ad-btn {
        width:
            min(310px, 100%);
        height: 56px;
    }
    .ad-trust {
        max-width: 350px;
        margin:
            24px auto 0;
        gap:
            11px 16px;
    }
    /* images */
    .ad-left-column,
    .ad-right-column {
        width: 100%;
        flex:
            0 0 100%;
        max-width: 100%;
    }
    .ad-left-column {
        margin-top: 5px;
    }
    .ad-right-column {
        margin-top: 55px;
    }
    .ad-side-column {
        padding:
            10px 25px;
    }
    .ad-photo-card {
        width:
            min(320px, 82vw);
        height: 465px;
    }
    .ad-photo-frame {
        border-width: 10px;
        border-radius:
            170px 170px 125px 125px;
    }
    .ad-photo-outline {
        inset: -10px;
        border-radius:
            178px 178px 132px 132px;
    }
    .ad-fan-badge {
        width: 72px;
        height: 72px;
        right: -18px;
        top: 118px;
    }
    .ad-mini-fan {
        transform:
            scale(.72);
    }
    .ad-round-badge:hover .ad-mini-fan {
        transform:
            scale(.72) rotate(90deg);
    }
    .ad-orange-ring {
        right: 10px;
        bottom: -18px;
        width: 78px;
        height: 78px;
        border-width: 21px;
    }
    .ad-air-wave {
        left: -28px;
        top: 87px;
        transform:
            scale(.72);
        transform-origin:
            right center;
    }
    .ad-vent-badge {
        width: 72px;
        height: 72px;
        right: 7px;
        bottom: -24px;
    }
    .ad-dot-grid {
        display: none;
    }
    .ad-side-dark-shape {
        left: -185px;
        top: 35px;
        width: 235px;
        height: 320px;
    }
    .ad-top-ring {
        right: -30px;
    }
    .ad-orange-block {
        width: 170px;
        height: 360px;
        right: -120px;
        bottom: 35px;
    }
    .ad-bottom-fan {
        bottom: -285px;
        opacity: .12;
    }
}
/* =========================================================
           SMALL MOBILE
        ========================================================= */
@media (max-width: 480px) {
    .ad-logo {
        gap: 3px;
    }
    .ad-logo-mark {
        width: 43px;
        height: 43px;
        flex:
            0 0 43px;
        margin-right: -5px;
        transform:
            scale(.67);
        transform-origin:
            left center;
    }
    .ad-logo-copy strong {
        font-size: 15px;
    }
    .ad-logo-copy em {
        margin-top: 5px;
        font-size: 8px;
        letter-spacing: 2px;
    }
    .ad-logo-copy small {
        font-size: 7px;
    }
    .ad-mobile-menu-btn {
        right: 61px;
    }
    .ad-content-column {
        padding:
            45px 13px 42px;
    }
    .ad-eyebrow {
        gap: 7px;
        font-size: 8px;
        letter-spacing: 1.6px;
    }
    .ad-title-main {
        font-size:
            clamp(39px, 14vw, 54px);
        letter-spacing: -2px;
    }
    .ad-title-script {
        font-size:
            clamp(60px, 20vw, 79px);
    }
    .ad-description {
        font-size: 13px;
    }
    .ad-photo-card {
        width:
            min(278px, 78vw);
        height: 405px;
    }
    .ad-fan-badge {
        width: 65px;
        height: 65px;
        right: -16px;
        top: 96px;
    }
    .ad-vent-badge {
        width: 66px;
        height: 66px;
    }
    .ad-air-wave {
        left: -34px;
        transform:
            scale(.63);
    }
}
/* =========================================================
           VERY SMALL
        ========================================================= */
@media (max-width: 370px) {
    .ad-logo-mark {
        display: none;
    }
    .ad-logo-copy strong {
        font-size: 15px;
    }
    .ad-header-cta {
        width: 38px;
        height: 38px;
    }
    .ad-mobile-menu-btn {
        right: 56px;
        top: -42px;
        width: 38px;
        height: 38px;
    }
    .ad-title-main {
        font-size:
            clamp(36px, 13.5vw, 48px);
    }
    .ad-title-script {
        font-size:
            clamp(55px, 19vw, 70px);
    }
    .ad-photo-card {
        width:
            min(250px, 75vw);
        height: 370px;
    }
}
/* =========================================================
           REDUCED MOTION
        ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ad-hero *,
    .ad-hero *::before,
    .ad-hero *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
/* =========================================================
   WHY CHOOSE US
========================================================= */
.ad-why {
    position: relative;
    overflow: hidden;
    padding:
        125px 0 110px;
    background:
        #F4F5F3;
    color:
        var(--ad-navy);
    isolation: isolate;
}
/* =========================================================
   TEXTURE
========================================================= */
.ad-why::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .48;
    background-image:
        radial-gradient(rgba(11, 45, 70, .08) .65px,
            transparent .65px),
        radial-gradient(rgba(243, 111, 33, .04) .6px,
            transparent .6px);
    background-size:
        10px 10px,
        17px 17px;
    background-position:
        0 0,
        5px 6px;
}
.ad-why::after {
    content: "";
    position: absolute;
    width: 570px;
    height: 570px;
    right: -320px;
    top: -300px;
    z-index: -4;
    border-radius: 50%;
    border:
        90px solid rgba(81, 111, 130, .09);
}
/* =========================================================
   BLUEPRINT GRID
========================================================= */
.ad-why-grid {
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .42;
    background-image:
        linear-gradient(rgba(11, 45, 70, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(11, 45, 70, .035) 1px,
            transparent 1px);
    background-size:
        48px 48px;
}
.ad-why-glow {
    position: absolute;
    z-index: -3;
    left: 50%;
    top: 55%;
    width: 750px;
    height: 750px;
    border-radius: 50%;
    transform:
        translate(-50%, -50%);
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .95),
            rgba(255, 255, 255, .35) 50%,
            transparent 72%);
}
/* =========================================================
   ENGINEERING MARKS
========================================================= */
.ad-why-measure {
    position: absolute;
    width: 130px;
    border-top:
        1px solid rgba(11, 45, 70, .2);
}
.ad-why-measure::before,
.ad-why-measure::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 1px;
    height: 10px;
    background:
        rgba(11, 45, 70, .3);
}
.ad-why-measure::before {
    left: 0;
}
.ad-why-measure::after {
    right: 0;
}
.ad-measure-one {
    top: 130px;
    left: 3%;
}
.ad-measure-two {
    right: 4%;
    bottom: 130px;
}
/* =========================================================
   HEADING
========================================================= */
.ad-why-heading-row {
    position: relative;
    z-index: 5;
    margin-bottom: 75px;
}
.ad-why-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    color:
        var(--ad-steel);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}
.ad-why-eyebrow-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ad-why-eyebrow-icon i {
    display: block;
    width: 28px;
    height: 2px;
    border-radius: 10px;
    background:
        var(--ad-orange);
}
.ad-why-eyebrow-icon i:nth-child(2) {
    width: 20px;
}
.ad-why-eyebrow-icon i:nth-child(3) {
    width: 12px;
}
.ad-why-title {
    max-width: 720px;
    margin: 0;
    color:
        var(--ad-navy);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(52px, 6vw, 92px);
    font-weight: 900;
    line-height: .91;
    letter-spacing: -5px;
}
.ad-why-title span {
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 5px;
    color:
        var(--ad-orange);
    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;
    font-size:
        1.08em;
    font-weight: 400;
    letter-spacing: -2px;
    transform:
        rotate(-2deg);
}
/* =========================================================
   INTRO
========================================================= */
.ad-why-intro {
    position: relative;
    max-width: 500px;
    margin-left: auto;
    padding:
        20px 0 20px 75px;
    border-left:
        1px solid rgba(11, 45, 70, .16);
}
.ad-intro-number {
    position: absolute;
    left: 18px;
    top: 18px;
    color:
        var(--ad-orange);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ad-why-intro p {
    margin: 0;
    color:
        var(--ad-muted);
    font-size: 15px;
    font-weight: 550;
    line-height: 1.85;
}
/* =========================================================
   AIR LAB
========================================================= */
.ad-air-lab {
    position: relative;
    min-height: 720px;
    margin-top: 20px;
}
/* =========================================================
   CENTER UNIT
========================================================= */
.ad-lab-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    width: 360px;
    text-align: center;
    transform:
        translate(-50%, -50%);
}
.ad-center-label {
    margin-bottom: 18px;
    color:
        var(--ad-steel);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 4px;
}
/* =========================================================
   HVAC UNIT
========================================================= */
.ad-hvac-unit {
    position: relative;
    display: grid;
    place-items: center;
    width: 330px;
    height: 330px;
    margin:
        0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            #FFFFFF 0%,
            #F5F7F8 57%,
            #DDE4E8 58%,
            #FFFFFF 70%);
    border:
        1px solid rgba(11, 45, 70, .2);
    box-shadow:
        0 35px 80px rgba(11, 45, 70, .16),
        inset 0 0 0 15px white,
        inset 0 0 0 17px rgba(81, 111, 130, .22);
}
.ad-hvac-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ad-hvac-ring-one {
    inset: -13px;
    border:
        1px dashed rgba(11, 45, 70, .35);
    animation:
        adLabSpin 28s linear infinite;
}
.ad-hvac-ring-two {
    inset: 35px;
    border:
        2px solid rgba(81, 111, 130, .13);
}
/* =========================================================
   TECH MARKS
========================================================= */
.ad-tech-mark {
    position: absolute;
    width: 17px;
    height: 3px;
    background:
        var(--ad-orange);
}
.ad-mark-1 {
    top: 20px;
    left: 50%;
}
.ad-mark-2 {
    right: 20px;
    top: 50%;
    transform:
        rotate(90deg);
}
.ad-mark-3 {
    bottom: 20px;
    left: 50%;
}
.ad-mark-4 {
    left: 20px;
    top: 50%;
    transform:
        rotate(90deg);
}
/* =========================================================
   MAIN FAN
========================================================= */
.ad-main-fan {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    animation:
        adFanSpin 18s linear infinite;
}
.ad-main-blade {
    position: absolute;
    left: 91px;
    top: 5px;
    width: 42px;
    height: 100px;
    border-radius:
        90% 25% 80% 20%;
    transform-origin:
        20px 106px;
    background:
        linear-gradient(180deg,
            var(--ad-navy),
            var(--ad-steel));
    box-shadow:
        inset 4px 0 8px rgba(255, 255, 255, .08);
}
.ad-main-blade-1 {
    transform: rotate(0);
}
.ad-main-blade-2 {
    transform: rotate(60deg);
}
.ad-main-blade-3 {
    transform: rotate(120deg);
}
.ad-main-blade-4 {
    transform: rotate(180deg);
}
.ad-main-blade-5 {
    transform: rotate(240deg);
}
.ad-main-blade-6 {
    transform: rotate(300deg);
}
.ad-main-fan i {
    position: absolute;
    z-index: 4;
    left: 85px;
    top: 85px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    border:
        10px solid white;
    box-shadow:
        0 5px 18px rgba(11, 45, 70, .18);
}
/* =========================================================
   STATUS
========================================================= */
.ad-center-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 23px;
    padding:
        8px 13px;
    border:
        1px solid rgba(11, 45, 70, .12);
    border-radius: 100px;
    color:
        var(--ad-navy);
    background:
        rgba(255, 255, 255, .8);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ad-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    box-shadow:
        0 0 0 5px rgba(243, 111, 33, .11);
    animation:
        adStatusPulse 1.8s ease-in-out infinite;
}
/* =========================================================
   CENTER AIRFLOW
========================================================= */
.ad-center-airflow {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 15px;
}
.ad-center-airflow span {
    display: block;
    width: 35px;
    height: 8px;
    border-top:
        2px solid var(--ad-steel);
    border-radius: 50%;
    animation:
        adAirFlow 2.2s ease-in-out infinite;
}
.ad-center-airflow span:nth-child(2) {
    animation-delay: .15s;
}
.ad-center-airflow span:nth-child(3) {
    animation-delay: .3s;
}
/* =========================================================
   FEATURE CARDS
========================================================= */
.ad-lab-feature {
    position: absolute;
    z-index: 8;
    width: 310px;
    padding:
        28px 28px 26px;
    border:
        1px solid rgba(11, 45, 70, .12);
    border-radius: 24px;
    background:
        rgba(255, 255, 255, .87);
    box-shadow:
        0 20px 50px rgba(11, 45, 70, .08);
    backdrop-filter:
        blur(10px);
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}
.ad-lab-feature:hover {
    transform:
        translateY(-8px);
    border-color:
        rgba(243, 111, 33, .4);
    box-shadow:
        0 30px 60px rgba(11, 45, 70, .14);
}
.ad-feature-one {
    left: 0;
    top: 35px;
}
.ad-feature-two {
    left: 30px;
    bottom: 30px;
}
.ad-feature-three {
    right: 0;
    top: 35px;
}
.ad-feature-four {
    right: 30px;
    bottom: 30px;
}
/* =========================================================
   FEATURE NUMBER
========================================================= */
.ad-feature-number {
    position: absolute;
    right: 22px;
    top: 19px;
    color:
        rgba(11, 45, 70, .16);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 28px;
    font-weight: 900;
}
/* =========================================================
   FEATURE ICON
========================================================= */
.ad-feature-icon {
    position: relative;
    display: flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 18px;
    background:
        var(--ad-navy);
    box-shadow:
        0 10px 25px rgba(11, 45, 70, .18);
    transition:
        background .35s ease,
        transform .35s ease;
}
.ad-lab-feature:hover .ad-feature-icon {
    background:
        var(--ad-orange);
    transform:
        rotate(-5deg) scale(1.05);
}
/* =========================================================
   WIND ICON
========================================================= */
.ad-wind-line {
    position: absolute;
    width: 31px;
    height: 10px;
    border-top:
        3px solid white;
    border-radius: 50%;
}
.ad-wind-line:nth-child(1) {
    top: 18px;
    left: 14px;
}
.ad-wind-line:nth-child(2) {
    top: 27px;
    left: 18px;
    width: 25px;
}
.ad-wind-line:nth-child(3) {
    top: 36px;
    left: 14px;
    width: 29px;
}
/* =========================================================
   DUCT ICON
========================================================= */
.ad-duct-icon {
    flex-direction: column;
    gap: 5px;
}
.ad-duct-icon span {
    display: block;
    width: 31px;
    height: 4px;
    border-radius: 10px;
    background:
        white;
    transform:
        skewX(-15deg);
}
.ad-duct-icon span:nth-child(2) {
    width: 25px;
}
.ad-duct-icon span:nth-child(3) {
    width: 31px;
}
.ad-duct-icon span:nth-child(4) {
    width: 22px;
}
/* =========================================================
   SHIELD
========================================================= */
.ad-shield {
    display: grid;
    place-items: center;
    width: 32px;
    height: 38px;
    color:
        var(--ad-navy);
    background:
        white;
    clip-path:
        polygon(50% 0,
            100% 18%,
            92% 72%,
            50% 100%,
            8% 72%,
            0 18%);
    font-size: 16px;
    font-weight: 900;
}
/* =========================================================
   GAUGE
========================================================= */
.ad-gauge {
    position: relative;
    width: 37px;
    height: 20px;
    overflow: hidden;
    border:
        4px solid white;
    border-bottom: 0;
    border-radius:
        40px 40px 0 0;
}
.ad-gauge i {
    position: absolute;
    left: 15px;
    bottom: -1px;
    width: 3px;
    height: 17px;
    border-radius: 4px;
    background:
        var(--ad-orange);
    transform-origin:
        bottom;
    transform:
        rotate(35deg);
    animation:
        adGaugeMove 2.8s ease-in-out infinite;
}
/* =========================================================
   FEATURE COPY
========================================================= */
.ad-feature-copy small {
    display: block;
    margin-bottom: 6px;
    color:
        var(--ad-orange);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.ad-feature-copy h3 {
    margin:
        0 0 11px;
    color:
        var(--ad-navy);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
}
.ad-feature-copy p {
    margin: 0;
    color:
        var(--ad-muted);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.75;
}
/* =========================================================
   CONNECTOR LINES
========================================================= */
.ad-connector {
    position: absolute;
    z-index: 3;
    height: 1px;
    border-top:
        1px dashed rgba(11, 45, 70, .32);
}
.ad-connector::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    box-shadow:
        0 0 0 5px rgba(243, 111, 33, .1);
}
.ad-connector-one {
    left: 300px;
    top: 165px;
    width: 160px;
    transform:
        rotate(20deg);
}
.ad-connector-one::after {
    right: 0;
}
.ad-connector-two {
    left: 320px;
    bottom: 165px;
    width: 145px;
    transform:
        rotate(-20deg);
}
.ad-connector-two::after {
    right: 0;
}
.ad-connector-three {
    right: 300px;
    top: 165px;
    width: 160px;
    transform:
        rotate(-20deg);
}
.ad-connector-three::after {
    left: 0;
}
.ad-connector-four {
    right: 320px;
    bottom: 165px;
    width: 145px;
    transform:
        rotate(20deg);
}
.ad-connector-four::after {
    left: 0;
}
/* =========================================================
   PIPE DETAILS
========================================================= */
.ad-lab-pipe {
    position: absolute;
    z-index: 1;
    width: 140px;
    height: 140px;
    border:
        16px solid rgba(81, 111, 130, .09);
    border-radius: 50%;
}
.ad-lab-pipe-top {
    left: 50%;
    top: -85px;
    transform:
        translateX(-50%);
}
.ad-lab-pipe-bottom {
    left: 50%;
    bottom: -90px;
    transform:
        translateX(-50%);
}
/* =========================================================
   BOTTOM READOUT
========================================================= */
.ad-why-bottom {
    position: relative;
    z-index: 10;
    margin-top: 45px;
    padding:
        22px 25px;
    border:
        1px solid rgba(11, 45, 70, .12);
    border-radius: 24px;
    background:
        rgba(255, 255, 255, .76);
    box-shadow:
        0 18px 45px rgba(11, 45, 70, .07);
    backdrop-filter:
        blur(10px);
}
.ad-system-readout {
    display: flex;
    align-items: center;
    gap: 25px;
}
.ad-readout-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ad-readout-item>span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    color:
        var(--ad-orange);
    border:
        1px solid rgba(243, 111, 33, .35);
    font-size: 10px;
    font-weight: 900;
}
.ad-readout-item div {
    display: flex;
    flex-direction: column;
}
.ad-readout-item small {
    color:
        var(--ad-muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ad-readout-item strong {
    margin-top: 3px;
    color:
        var(--ad-navy);
    font-size: 13px;
    font-weight: 900;
}
.ad-readout-line {
    width: 1px;
    height: 38px;
    background:
        rgba(11, 45, 70, .12);
}
/* =========================================================
   BUTTON
========================================================= */
.ad-why-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    overflow: hidden;
    min-height: 58px;
    padding:
        0 27px;
    border-radius: 100px;
    color:
        white;
    background:
        linear-gradient(135deg,
            var(--ad-navy),
            var(--ad-navy-2));
    box-shadow:
        0 14px 30px rgba(11, 45, 70, .2);
    font-size: 14px;
    font-weight: 900;
    transition:
        .35s ease;
}
.ad-why-button i {
    color:
        var(--ad-orange);
    font-size: 23px;
    font-style: normal;
    transition:
        transform .3s ease;
}
.ad-why-button:hover {
    color: white;
    transform:
        translateY(-4px);
    box-shadow:
        0 20px 38px rgba(11, 45, 70, .26);
}
.ad-why-button:hover i {
    transform:
        translateX(6px);
}
/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes adFanSpin {
    from {
        transform:
            rotate(0deg);
    }
    to {
        transform:
            rotate(360deg);
    }
}
@keyframes adLabSpin {
    from {
        transform:
            rotate(0deg);
    }
    to {
        transform:
            rotate(-360deg);
    }
}
@keyframes adStatusPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(243, 111, 33, .08);
    }
    50% {
        box-shadow:
            0 0 0 9px rgba(243, 111, 33, .02);
    }
}
@keyframes adAirFlow {
    0%,
    100% {
        opacity: .35;
        transform:
            translateX(-4px);
    }
    50% {
        opacity: 1;
        transform:
            translateX(4px);
    }
}
@keyframes adGaugeMove {
    0%,
    100% {
        transform:
            rotate(-30deg);
    }
    50% {
        transform:
            rotate(45deg);
    }
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1199.98px) {
    .ad-air-lab {
        min-height: 760px;
    }
    .ad-lab-feature {
        width: 270px;
    }
    .ad-feature-one {
        left: 0;
    }
    .ad-feature-two {
        left: 0;
    }
    .ad-feature-three {
        right: 0;
    }
    .ad-feature-four {
        right: 0;
    }
    .ad-connector-one,
    .ad-connector-two {
        left: 260px;
        width: 110px;
    }
    .ad-connector-three,
    .ad-connector-four {
        right: 260px;
        width: 110px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .ad-why {
        padding:
            90px 0;
    }
    .ad-why-heading-row {
        margin-bottom: 55px;
    }
    .ad-why-intro {
        max-width: none;
        margin:
            35px 0 0;
    }
    .ad-air-lab {
        display: grid;
        grid-template-columns:
            repeat(2, 1fr);
        gap: 22px;
        min-height: 0;
    }
    .ad-lab-center {
        position: relative;
        left: auto;
        top: auto;
        grid-column:
            1 / -1;
        grid-row: 1;
        width: 100%;
        margin-bottom: 35px;
        transform: none;
    }
    .ad-lab-feature {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100%;
    }
    .ad-feature-one {
        grid-column: 1;
    }
    .ad-feature-three {
        grid-column: 2;
    }
    .ad-feature-two {
        grid-column: 1;
    }
    .ad-feature-four {
        grid-column: 2;
    }
    .ad-connector,
    .ad-lab-pipe {
        display: none;
    }
    .ad-why-bottom {
        margin-top: 45px;
    }
    .ad-system-readout {
        margin-bottom: 20px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .ad-why {
        padding:
            75px 0 70px;
    }
    .ad-why-title {
        font-size:
            clamp(44px, 13vw, 67px);
        letter-spacing:
            -3px;
    }
    .ad-why-title span {
        font-size: 1.1em;
    }
    .ad-why-intro {
        padding:
            15px 0 15px 55px;
    }
    .ad-intro-number {
        left: 10px;
    }
    .ad-why-intro p {
        font-size: 14px;
    }
    .ad-air-lab {
        grid-template-columns:
            1fr;
        gap: 17px;
    }
    .ad-lab-center {
        grid-column: 1;
        margin-bottom: 25px;
    }
    .ad-hvac-unit {
        width: 280px;
        height: 280px;
    }
    .ad-main-fan {
        transform:
            scale(.82);
    }
    .ad-feature-one,
    .ad-feature-two,
    .ad-feature-three,
    .ad-feature-four {
        grid-column: 1;
    }
    .ad-lab-feature {
        padding:
            24px;
    }
    .ad-system-readout {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .ad-readout-line {
        width: 100%;
        height: 1px;
    }
    .ad-why-button {
        width: 100%;
        margin-top: 8px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
    .ad-hvac-unit {
        width: 245px;
        height: 245px;
    }
    .ad-main-fan {
        transform:
            scale(.7);
    }
    .ad-why-title {
        font-size: 41px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ad-why *,
    .ad-why *::before,
    .ad-why *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
/* =========================================================
   COLORS
========================================================= */
:root {
    --duct-navy: #102D43;
    --duct-dark: #173B57;
    --duct-steel: #3F708E;
    --duct-soft: #A9C7D8;
    --duct-orange: #F28C38;
    --duct-bg: #F7F9FA;
    --duct-white: #FFFFFF;
    --duct-text: #132934;
    --duct-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.duct-story-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
        radial-gradient(circle at 82% 50%,
            rgba(169, 199, 216, .20),
            transparent 32%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f7f9fa 55%,
            #f2f6f7 100%);
    isolation: isolate;
}
/* =========================================================
   VERY LIGHT SITE TEXTURE
========================================================= */
.duct-story-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .38;
    background-image:
        radial-gradient(rgba(16, 45, 67, .08) .55px,
            transparent .55px);
    background-size: 10px 10px;
}
/* =========================================================
   BLUEPRINT GRID - ONLY RIGHT SIDE
========================================================= */
.duct-story-grid {
    position: absolute;
    z-index: -3;
    right: 0;
    top: 0;
    width: 46%;
    height: 100%;
    opacity: .22;
    background-image:
        linear-gradient(rgba(63, 112, 142, .12) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(63, 112, 142, .12) 1px,
            transparent 1px);
    background-size: 44px 44px;
}
/* fade grid */
.duct-story-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            var(--duct-bg),
            transparent 35%);
}
/* =========================================================
   BACKGROUND GLOW
========================================================= */
.duct-story-glow {
    position: absolute;
    right: -200px;
    bottom: -250px;
    z-index: -2;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    border:
        100px solid rgba(63, 112, 142, .07);
}
/* =========================================================
   LEFT DARK SHAPE
========================================================= */
.duct-story-content {
    position: relative;
    z-index: 5;
    min-height: 660px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left:
        calc((100vw - 100%) / -2);
    padding:
        75px 95px 75px calc((100vw - 100%) / 2);
    color: white;
    overflow: hidden;
    border-radius:
        0 210px 210px 0;
    background:
        linear-gradient(140deg,
            #173B57 0%,
            #102D43 52%,
            #0B2537 100%);
    box-shadow:
        25px 35px 70px rgba(16, 45, 67, .16);
}
/* subtle dark texture */
.duct-story-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(rgba(255, 255, 255, .14) .6px,
            transparent .6px);
    background-size: 9px 9px;
}
/* large transparent ring */
.duct-story-content::after {
    content: "";
    position: absolute;
    right: -215px;
    top: 50%;
    width: 480px;
    height: 480px;
    transform:
        translateY(-50%);
    border:
        65px solid rgba(169, 199, 216, .07);
    border-radius: 50%;
}
/* =========================================================
   AIR MARK
========================================================= */
.duct-air-mark {
    position: relative;
    z-index: 3;
    width: 90px;
    margin-bottom: 25px;
}
.duct-air-mark span {
    display: block;
    height: 8px;
    margin: 4px 0;
    border-top:
        3px solid var(--duct-orange);
    border-radius: 50%;
    animation:
        ductAir 3s ease-in-out infinite;
}
.duct-air-mark span:nth-child(1) {
    width: 90px;
}
.duct-air-mark span:nth-child(2) {
    width: 68px;
    animation-delay: .15s;
}
.duct-air-mark span:nth-child(3) {
    width: 45px;
    animation-delay: .3s;
}
/* =========================================================
   TITLE
========================================================= */
.duct-story-content h2 {
    position: relative;
    z-index: 3;
    max-width: 670px;
    margin: 0;
    color: white;
    font-family:
        Arial Black,
        Arial,
        Helvetica,
        sans-serif;
    font-size:
        44px;
    font-weight: 900;
    line-height: .98;
    letter-spacing: -3.5px;
}
.duct-story-content h2 strong {
    display: block;
    margin-top: 9px;
    color:
        var(--duct-orange);
    font-weight: 900;
}
/* =========================================================
   TITLE DETAIL
========================================================= */
.duct-title-detail {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 530px;
    margin: 26px 0 25px;
}
.duct-title-detail i {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background:
        var(--duct-orange);
    box-shadow:
        0 0 0 4px rgba(242, 140, 56, .12);
}
.duct-title-detail span {
    width: 100%;
    height: 1px;
    margin-left: 10px;
    background:
        linear-gradient(90deg,
            var(--duct-orange),
            rgba(242, 140, 56, .08));
}
/* =========================================================
   TEXT
========================================================= */
.duct-story-copy {
    position: relative;
    z-index: 3;
    max-width: 610px;
}
.duct-story-copy p {
    margin: 0 0 23px;
    color:
        #DCE7ED;
    font-size:
        clamp(14px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.8;
}
.duct-story-copy p:last-child {
    margin-bottom: 0;
}
/* =========================================================
   CONTENT DOTS
========================================================= */
.duct-content-dots {
    position: absolute;
    right: 85px;
    bottom: 45px;
    z-index: 3;
    display: grid;
    grid-template-columns:
        repeat(5, 5px);
    gap: 8px;
}
.duct-content-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        rgba(255, 255, 255, .26);
}
/* =========================================================
   RIGHT VISUAL
========================================================= */
.duct-story-visual {
    position: relative;
    z-index: 10;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================================================
   IMAGE OUTLINE
========================================================= */
.duct-photo-border {
    position: relative;
    z-index: 5;
    width: min(385px, 88%);
    height: 625px;
    padding: 12px;
    border:
        2px solid var(--duct-navy);
    border-radius:
        195px 195px 140px 140px;
}
/* second line */
.duct-photo-border::before {
    content: "";
    position: absolute;
    inset: -15px;
    border:
        1px solid rgba(63, 112, 142, .48);
    border-radius:
        210px 210px 153px 153px;
}
/* little orange connector */
.duct-photo-border::after {
    content: "";
    position: absolute;
    right: -22px;
    top: 43%;
    width: 42px;
    height: 3px;
    background:
        var(--duct-orange);
}
/* =========================================================
   PHOTO
========================================================= */
.duct-photo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius:
        182px 182px 130px 130px;
    background:
        #D7E1E6;
    box-shadow:
        0 35px 75px rgba(16, 45, 67, .20);
}
.duct-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        transform .9s cubic-bezier(.2, .75, .2, 1),
        filter .6s ease;
}
.duct-photo-border:hover img {
    transform:
        scale(1.055);
    filter:
        contrast(1.04) saturate(1.05);
}
/* photo shade */
.duct-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 52%,
            rgba(16, 45, 67, .13));
}
/* =========================================================
   ORANGE RING
========================================================= */
.duct-orange-ring {
    position: absolute;
    z-index: 2;
    right: -20px;
    top: 25px;
    width: 145px;
    height: 145px;
    border:
        28px solid var(--duct-orange);
    border-radius: 50%;
}
/* =========================================================
   TECHNICAL RING
========================================================= */
.duct-tech-ring {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 25px;
    width: 200px;
    height: 200px;
    border:
        1px dashed rgba(63, 112, 142, .55);
    border-radius: 50%;
    animation:
        ductRotate 25s linear infinite;
}
.duct-tech-ring::before {
    content: "";
    position: absolute;
    inset: 20px;
    border:
        15px solid rgba(169, 199, 216, .25);
    border-radius: 50%;
}
/* =========================================================
   AIR FLOW ON PHOTO
========================================================= */
.duct-photo-air {
    position: absolute;
    z-index: 15;
    right: -5px;
    top: 29%;
    width: 115px;
    transform:
        rotate(-43deg);
}
.duct-photo-air span {
    display: block;
    width: 100%;
    height: 9px;
    margin-bottom: 7px;
    border-radius: 10px;
    background:
        var(--duct-steel);
    animation:
        ductAirBar 2.8s ease-in-out infinite;
}
.duct-photo-air span:nth-child(2) {
    width: 82%;
    animation-delay: .15s;
}
.duct-photo-air span:nth-child(3) {
    width: 64%;
    animation-delay: .3s;
}
.duct-photo-air span:nth-child(4) {
    width: 46%;
    animation-delay: .45s;
}
/* =========================================================
   FAN BADGE
========================================================= */
.duct-fan-circle {
    position: absolute;
    z-index: 20;
    left: 4%;
    bottom: 50px;
    display: grid;
    place-items: center;
    width: 105px;
    height: 105px;
    border:
        7px solid white;
    border-radius: 50%;
    outline:
        2px solid var(--duct-navy);
    background:
        linear-gradient(145deg,
            #F9FBFC,
            #CFDDE4);
    box-shadow:
        0 20px 50px rgba(16, 45, 67, .22);
    animation:
        ductFloat 4.5s ease-in-out infinite;
}
/* =========================================================
   CSS FAN
========================================================= */
.duct-fan {
    position: relative;
    width: 60px;
    height: 60px;
    transition:
        transform .6s ease;
}
.duct-fan-circle:hover .duct-fan {
    transform:
        rotate(90deg);
}
.duct-fan b {
    position: absolute;
    left: 22px;
    top: 2px;
    width: 17px;
    height: 28px;
    border-radius:
        80% 25% 70% 20%;
    background:
        var(--duct-navy);
    transform-origin:
        8px 29px;
}
.duct-fan b:nth-child(1) {
    transform: rotate(0);
}
.duct-fan b:nth-child(2) {
    transform: rotate(90deg);
    background:
        var(--duct-steel);
}
.duct-fan b:nth-child(3) {
    transform: rotate(180deg);
}
.duct-fan b:nth-child(4) {
    transform: rotate(270deg);
    background:
        var(--duct-steel);
}
.duct-fan i {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        var(--duct-orange);
    box-shadow:
        0 0 0 3px white;
}
/* =========================================================
   VERTICAL TEXT
========================================================= */
.duct-vertical {
    position: absolute;
    z-index: 12;
    right: -12px;
    top: 50%;
    color:
        var(--duct-navy);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    writing-mode:
        vertical-rl;
    transform:
        translateY(-50%) rotate(180deg);
}
/* =========================================================
   VISUAL DOTS
========================================================= */
.duct-visual-dots {
    position: absolute;
    z-index: 12;
    left: 8%;
    top: 10%;
    display: grid;
    grid-template-columns:
        repeat(3, 6px);
    gap: 9px;
}
.duct-visual-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background:
        var(--duct-orange);
    animation:
        ductDot 2s ease-in-out infinite;
}
/* =========================================================
   ANIMATION
========================================================= */
@keyframes ductAir {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(12px);
    }
}
@keyframes ductAirBar {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}
@keyframes ductFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}
@keyframes ductRotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes ductDot {
    0%,
    100% {
        opacity: .35;
        transform:
            scale(.7);
    }
    50% {
        opacity: 1;
        transform:
            scale(1);
    }
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
    .duct-story-content {
        min-height: 620px;
        padding-right: 70px;
        border-radius:
            0 180px 180px 0;
    }
    .duct-photo-border {
        width: 345px;
        height: 570px;
    }
    .duct-story-visual {
        min-height: 630px;
    }
}
/* =========================================================
   SMALL LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .duct-story-content {
        min-height: 580px;
        padding-right: 60px;
        border-radius:
            0 145px 145px 0;
    }
    .duct-story-content h2 {
        font-size:
            clamp(40px, 4.3vw, 57px);
    }
    .duct-photo-border {
        width: 310px;
        height: 520px;
    }
    .duct-story-visual {
        min-height: 580px;
    }
    .duct-fan-circle {
        width: 88px;
        height: 88px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .duct-story-section {
        padding: 80px 0;
    }
    .duct-story-grid {
        width: 100%;
    }
    .duct-story-content {
        min-height: auto;
        margin-left: 0;
        padding: 60px 48px;
        border-radius:
            45px 45px 135px 45px;
    }
    .duct-story-content h2 {
        max-width: 720px;
        font-size:
            clamp(46px, 7vw, 67px);
    }
    .duct-story-copy {
        max-width: 720px;
    }
    /*
        text comes first
        image comes underneath
    */
    .duct-story-visual {
        min-height: 650px;
        margin-top: 55px;
    }
    .duct-photo-border {
        width: 370px;
        height: 590px;
    }
    .duct-orange-ring {
        right: 10%;
    }
    .duct-tech-ring {
        left: 12%;
    }
    .duct-fan-circle {
        left: 14%;
    }
    .duct-vertical {
        right: 8%;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .duct-story-section {
        padding: 65px 0;
    }
    .duct-story-content {
        padding:
            45px 26px;
        border-radius:
            30px 30px 90px 30px;
    }
    .duct-story-content h2 {
        font-size:
            clamp(37px, 10vw, 53px);
        letter-spacing:
            -2.4px;
    }
    .duct-story-copy p {
        font-size: 14px;
        line-height: 1.75;
    }
    .duct-content-dots {
        right: 30px;
        bottom: 20px;
    }
    .duct-story-visual {
        min-height: 540px;
        margin-top: 40px;
    }
    .duct-photo-border {
        width:
            min(310px, 75vw);
        height: 490px;
        padding: 10px;
        border-radius:
            165px 165px 115px 115px;
    }
    .duct-photo-border::before {
        inset: -10px;
        border-radius:
            175px 175px 125px 125px;
    }
    .duct-photo {
        border-radius:
            155px 155px 105px 105px;
    }
    .duct-orange-ring {
        width: 90px;
        height: 90px;
        right: 5%;
        top: 20px;
        border-width: 18px;
    }
    .duct-tech-ring {
        width: 140px;
        height: 140px;
        left: 4%;
    }
    .duct-photo-air {
        width: 80px;
        right: 0;
    }
    .duct-fan-circle {
        left: 6%;
        width: 72px;
        height: 72px;
        border-width: 5px;
    }
    .duct-fan {
        transform:
            scale(.7);
    }
    .duct-fan-circle:hover .duct-fan {
        transform:
            scale(.7) rotate(90deg);
    }
    .duct-vertical {
        right: 0;
        font-size: 9px;
        letter-spacing: 2px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .duct-story-content {
        padding:
            38px 20px;
    }
    .duct-story-content h2 {
        font-size: 34px;
    }
    .duct-story-copy p {
        font-size: 13px;
    }
    .duct-story-visual {
        min-height: 450px;
    }
    .duct-photo-border {
        width: 260px;
        height: 410px;
    }
    .duct-vertical {
        display: none;
    }
    .duct-photo-air {
        width: 65px;
    }
    .duct-visual-dots {
        left: 2%;
    }
}
/* =========================================================
   ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .duct-story-section *,
    .duct-story-section *::before,
    .duct-story-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   ROOT
========================================================= */
:root {
    --deal-navy: #102D43;
    --deal-dark: #061D2B;
    --deal-dark-2: #091F2F;
    --deal-steel: #3F708E;
    --deal-soft: #A9C7D8;
    --deal-orange: #F28C38;
    --deal-orange-light: #FFA05C;
    --deal-white: #FFFFFF;
    --deal-muted: #AABDC7;
}
/* =========================================================
   SECTION
========================================================= */
.deal-section {
    position: relative;
    overflow: hidden;
    padding:
        125px 0 110px;
    color: white;
    background:
        radial-gradient(circle at 50% 20%,
            rgba(63, 112, 142, .24),
            transparent 32%),
        radial-gradient(circle at 10% 80%,
            rgba(242, 140, 56, .08),
            transparent 30%),
        linear-gradient(135deg,
            #102D43 0%,
            #081F30 55%,
            #051923 100%);
    isolation: isolate;
}
/* =========================================================
   BACKGROUND GRID
========================================================= */
.deal-grid {
    position: absolute;
    inset: 0;
    z-index: -6;
    opacity: .11;
    background-image:
        linear-gradient(rgba(255, 255, 255, .13) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .13) 1px,
            transparent 1px);
    background-size:
        52px 52px;
}
/* =========================================================
   NOISE
========================================================= */
.deal-noise {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .25;
    background-image:
        radial-gradient(rgba(255, 255, 255, .10) .6px,
            transparent .6px),
        radial-gradient(rgba(242, 140, 56, .06) .6px,
            transparent .6px);
    background-size:
        9px 9px,
        15px 15px;
    background-position:
        0 0,
        5px 5px;
}
/* =========================================================
   BACKGROUND %
========================================================= */
.deal-bg-percent {
    position: absolute;
    z-index: -4;
    color:
        rgba(255, 255, 255, .025);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}
.deal-bg-percent-one {
    left: -60px;
    top: 200px;
    font-size: 280px;
    transform:
        rotate(-10deg);
}
.deal-bg-percent-two {
    right: 4%;
    top: 50px;
    font-size: 180px;
    color:
        rgba(242, 140, 56, .035);
    transform:
        rotate(12deg);
}
.deal-bg-percent-three {
    right: -40px;
    bottom: -50px;
    font-size: 300px;
    transform:
        rotate(8deg);
}
/* =========================================================
   BACKGROUND TICKET WORDS
========================================================= */
.deal-bg-ticket {
    position: absolute;
    z-index: -4;
    padding:
        8px 18px;
    border:
        1px dashed rgba(169, 199, 216, .13);
    border-radius: 5px;
    color:
        rgba(169, 199, 216, .12);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 4px;
}
.deal-bg-ticket-one {
    left: 7%;
    bottom: 90px;
    transform:
        rotate(-13deg);
}
.deal-bg-ticket-two {
    right: 10%;
    top: 250px;
    transform:
        rotate(10deg);
}
/* =========================================================
   LARGE CUT LINES
========================================================= */
.deal-cut-line {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 360px;
    opacity: .45;
}
.deal-cut-line i {
    display: block;
    width: 100%;
    border-top:
        2px dashed rgba(169, 199, 216, .52);
}
.deal-scissors {
    flex:
        0 0 auto;
    margin-right: 8px;
    color:
        var(--deal-orange);
    font-size: 23px;
    transform:
        rotate(-12deg);
}
.deal-cut-line-top {
    right: -90px;
    top: 105px;
    transform:
        rotate(-15deg);
}
.deal-cut-line-bottom {
    left: -90px;
    bottom: 145px;
    transform:
        rotate(13deg);
}
/* =========================================================
   BACKGROUND AIRFLOW
========================================================= */
.deal-bg-air {
    position: absolute;
    z-index: -2;
    width: 180px;
    opacity: .16;
}
.deal-bg-air span {
    display: block;
    width: 160px;
    height: 18px;
    border-top:
        4px solid var(--deal-soft);
    border-radius: 50%;
}
.deal-bg-air span:nth-child(2) {
    width: 125px;
}
.deal-bg-air span:nth-child(3) {
    width: 90px;
}
.deal-bg-air-left {
    left: -10px;
    top: 48%;
}
.deal-bg-air-right {
    right: -25px;
    bottom: 25%;
    transform:
        rotate(180deg);
}
/* =========================================================
   BACKGROUND BARCODE
========================================================= */
.deal-bg-barcode {
    position: absolute;
    z-index: -3;
    right: 14%;
    bottom: 45px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    opacity: .10;
    transform:
        rotate(-4deg);
}
.deal-bg-barcode span {
    display: block;
    width: 3px;
    height: 60px;
    background:
        white;
}
.deal-bg-barcode span:nth-child(2n) {
    width: 7px;
    height: 76px;
}
.deal-bg-barcode span:nth-child(3n) {
    width: 2px;
    height: 45px;
}
/* =========================================================
   HEADING
========================================================= */
.deal-heading-row {
    position: relative;
    z-index: 10;
    margin-bottom:
        75px;
}
/* =========================================================
   KICKER
========================================================= */
.deal-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 17px;
    color:
        var(--deal-soft);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
}
.deal-kicker-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.deal-kicker-bars i {
    display: block;
    width: 30px;
    height: 2px;
    border-radius: 10px;
    background:
        var(--deal-orange);
}
.deal-kicker-bars i:nth-child(2) {
    width: 21px;
}
.deal-kicker-bars i:nth-child(3) {
    width: 13px;
}
/* =========================================================
   TITLE
========================================================= */
.deal-title {
    margin: 0;
    color:
        white;
    font-family:
        Arial Black,
        Arial,
        Helvetica,
        sans-serif;
    font-size: 65px;
    font-weight: 900;
    line-height: .89;
    letter-spacing: -5px;
}
.deal-title strong {
    display: block;
    margin-top: 7px;
    color:
        var(--deal-orange);
}
/* =========================================================
   INTRO
========================================================= */
.deal-intro {
    position: relative;
    max-width: 480px;
    margin-left: auto;
    padding-left: 80px;
}
.deal-intro::before {
    content: "";
    position: absolute;
    left: 56px;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background:
        rgba(255, 255, 255, .14);
}
.deal-intro-number {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border:
        1px solid rgba(242, 140, 56, .38);
    border-radius: 50%;
    color:
        var(--deal-orange);
    font-size: 11px;
    font-weight: 900;
}
.deal-intro p {
    margin: 0;
    color:
        #D5E1E6;
    font-size: 15px;
    line-height: 1.8;
}
/* =========================================================
   CARDS ROW
========================================================= */
.deal-cards-row {
    position: relative;
    z-index: 10;
    row-gap: 28px;
}
/* =========================================================
   OFFER CARD
========================================================= */
.deal-card {
    position: relative;
    overflow: visible;
    min-height: 530px;
    padding:
        35px;
    border:
        1px solid rgba(255, 255, 255, .13);
    border-radius:
        155px 155px 34px 34px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .115),
            rgba(255, 255, 255, .045));
    box-shadow:
        0 32px 75px rgba(0, 0, 0, .23);
    backdrop-filter:
        blur(13px);
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}
/* center main card */
.deal-card-main {
    min-height: 580px;
    transform:
        translateY(-22px);
    border-color:
        rgba(242, 140, 56, .35);
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .16),
            rgba(255, 255, 255, .055));
}
/* side cards */
.deal-card-side {
    margin-top: 50px;
}
/* hover */
.deal-card:hover {
    transform:
        translateY(-13px);
    border-color:
        rgba(242, 140, 56, .55);
    box-shadow:
        0 42px 90px rgba(0, 0, 0, .34);
}
.deal-card-main:hover {
    transform:
        translateY(-32px);
}
/* =========================================================
   INNER BORDER
========================================================= */
.deal-card::before {
    content: "";
    position: absolute;
    inset: 13px;
    border:
        1px solid rgba(169, 199, 216, .13);
    border-radius:
        142px 142px 24px 24px;
    pointer-events: none;
}
/* =========================================================
   HUGE FADED %
========================================================= */
.deal-card::after {
    content: "%";
    position: absolute;
    right: 12px;
    bottom: 15px;
    color:
        rgba(255, 255, 255, .035);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 140px;
    font-weight: 900;
    line-height: 1;
}
/* =========================================================
   CARD CUT LINE
========================================================= */
.deal-card-cut {
    position: absolute;
    z-index: 15;
    left: 50%;
    top: 26px;
    display: flex;
    align-items: center;
    width: 72%;
    transform:
        translateX(-50%);
}
.deal-card-cut i {
    width: 100%;
    border-top:
        1px dashed rgba(169, 199, 216, .38);
}
.deal-mini-scissor {
    margin-right: 7px;
    color:
        var(--deal-orange);
    font-size: 17px;
    transform:
        rotate(-10deg);
}
/* =========================================================
   TOP TICKET TAB
========================================================= */
.deal-ticket-tab {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: -21px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 42px;
    padding:
        7px 15px;
    border-radius:
        100px;
    transform:
        translateX(-50%);
    color:
        var(--deal-navy);
    background:
        var(--deal-orange);
    box-shadow:
        0 13px 28px rgba(0, 0, 0, .22);
}
.deal-ticket-tab span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
.deal-ticket-tab b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color:
        var(--deal-orange);
    background:
        var(--deal-navy);
    font-size: 8px;
}
/* =========================================================
   CARD INNER
========================================================= */
.deal-card-inner {
    position: relative;
    z-index: 5;
    padding-top: 35px;
}
/* =========================================================
   CARD HEADER
========================================================= */
.deal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 43px;
}
.deal-code {
    color:
        var(--deal-soft);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.3px;
}
.deal-save-pill {
    padding:
        6px 9px;
    border:
        1px solid rgba(242, 140, 56, .3);
    border-radius:
        100px;
    color:
        var(--deal-orange);
    background:
        rgba(242, 140, 56, .075);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
/* =========================================================
   PRICE
========================================================= */
.deal-price {
    display: flex;
    align-items: flex-start;
    line-height: .78;
}
.deal-price sup {
    margin-top: 10px;
    color:
        var(--deal-orange);
    font-size: 30px;
    font-weight: 900;
}
.deal-price strong {
    color: white;
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(90px, 8vw, 128px);
    font-weight: 900;
    letter-spacing: -9px;
}
.deal-card-side .deal-price strong {
    font-size:
        clamp(78px, 7vw, 108px);
}
.deal-price span {
    align-self: flex-end;
    margin:
        0 0 12px 9px;
    color:
        var(--deal-orange);
    font-size: 16px;
    font-weight: 900;
}
/* =========================================================
   TITLE
========================================================= */
.deal-card h3 {
    margin:
        23px 0 26px;
    color: white;
    font-size: 21px;
    font-weight: 900;
}
/* =========================================================
   AIRFLOW
========================================================= */
.deal-card-air {
    width: 105px;
    margin-bottom:
        28px;
}
.deal-card-air span {
    display: block;
    height: 12px;
    border-top:
        3px solid rgba(169, 199, 216, .52);
    border-radius: 50%;
    animation:
        dealAir 2.7s ease-in-out infinite;
}
.deal-card-air span:nth-child(2) {
    width: 78px;
    animation-delay: .15s;
}
.deal-card-air span:nth-child(3) {
    width: 52px;
    animation-delay: .3s;
}
/* =========================================================
   CARD BARCODE
========================================================= */
.deal-card-barcode {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 33px;
    margin-bottom: 25px;
    opacity: .5;
}
.deal-card-barcode i {
    display: block;
    width: 2px;
    height: 24px;
    background:
        var(--deal-soft);
}
.deal-card-barcode i:nth-child(2n) {
    width: 4px;
    height: 30px;
}
.deal-card-barcode i:nth-child(3n) {
    width: 1px;
    height: 18px;
}
/* =========================================================
   LINK
========================================================= */
.deal-card a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color:
        var(--deal-soft);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    transition:
        color .3s ease;
}
.deal-card a i {
    color:
        var(--deal-orange);
    font-size: 20px;
    font-style: normal;
    transition:
        transform .3s ease;
}
.deal-card a:hover {
    color: white;
}
.deal-card a:hover i {
    transform:
        translateX(6px);
}
/* =========================================================
   BOTTOM SLOT
========================================================= */
.deal-bottom-slot {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 78px;
    height: 14px;
    transform:
        translateX(-50%);
    background:
        var(--deal-orange);
    clip-path:
        polygon(15% 0,
            85% 0,
            100% 100%,
            0 100%);
}
/* =========================================================
   FOOTER
========================================================= */
.deal-footer {
    position: relative;
    z-index: 10;
    max-width: 720px;
    margin:
        65px auto 0;
}
/* footer cut */
.deal-footer-cut {
    display: flex;
    align-items: center;
    width: 100%;
}
.deal-footer-cut span {
    margin-right: 9px;
    color:
        var(--deal-orange);
    font-size: 20px;
    transform:
        rotate(-10deg);
}
.deal-footer-cut i {
    width: 100%;
    border-top:
        1px dashed rgba(169, 199, 216, .35);
}
/* footer label */
.deal-footer-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: max-content;
    margin:
        18px auto 0;
    padding:
        9px 16px;
    border:
        1px solid rgba(255, 255, 255, .10);
    border-radius:
        100px;
    color:
        var(--deal-soft);
    background:
        rgba(255, 255, 255, .04);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
.deal-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background:
        var(--deal-orange);
}
/* =========================================================
   ANIMATION
========================================================= */
@keyframes dealAir {
    0%,
    100% {
        transform:
            translateX(0);
        opacity: .4;
    }
    50% {
        transform:
            translateX(11px);
        opacity: 1;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .deal-section {
        padding:
            95px 0;
    }
    .deal-intro {
        max-width: 650px;
        margin:
            35px 0 0;
    }
    .deal-cards-row {
        justify-content:
            center;
        row-gap: 35px;
    }
    .deal-card,
    .deal-card-side,
    .deal-card-main {
        min-height: 500px;
        margin-top: 0;
        transform: none;
    }
    .deal-card-main:hover,
    .deal-card:hover {
        transform:
            translateY(-8px);
    }
    .deal-cut-line {
        opacity: .25;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .deal-section {
        padding:
            75px 0;
    }
    .deal-title {
        font-size:
            clamp(44px, 13vw, 65px);
        letter-spacing: -3px;
    }
    .deal-intro {
        padding-left: 62px;
    }
    .deal-intro::before {
        left: 47px;
    }
    .deal-intro-number {
        width: 35px;
        height: 35px;
    }
    .deal-intro p {
        font-size: 14px;
    }
    .deal-heading-row {
        margin-bottom: 65px;
    }
    .deal-card {
        min-height: 450px;
        padding:
            32px 26px;
        border-radius:
            125px 125px 28px 28px;
    }
    .deal-card::before {
        border-radius:
            113px 113px 20px 20px;
    }
    .deal-card-head {
        margin-bottom: 32px;
    }
    .deal-price strong,
    .deal-card-side .deal-price strong {
        font-size:
            clamp(75px, 22vw, 100px);
    }
    .deal-card h3 {
        font-size: 19px;
    }
    .deal-cut-line-top,
    .deal-cut-line-bottom {
        display: none;
    }
    .deal-bg-percent-one {
        font-size: 180px;
    }
    .deal-bg-percent-three {
        font-size: 200px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .deal-title {
        font-size: 39px;
    }
    .deal-card {
        min-height: 425px;
        padding:
            30px 22px;
    }
    .deal-price strong,
    .deal-card-side .deal-price strong {
        font-size: 72px;
    }
    .deal-price sup {
        font-size: 23px;
    }
    .deal-footer-label {
        gap: 7px;
        padding:
            8px 11px;
        font-size: 5px;
        letter-spacing: 1.3px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .deal-section *,
    .deal-section *::before,
    .deal-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-bg: #F7F9FA;
    --ad-white: #FFFFFF;
    --ad-text: #132934;
    --ad-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.split-commercial-section {
    position: relative;
    overflow: hidden;
    padding:
        90px 0;
    background-image:
        url("../airduct/air-flow.webp");
    background-size:
        cover;
    background-position:
        center;
    background-repeat:
        no-repeat;
    isolation: isolate;
}
/* =========================================================
   LIGHT PHOTO OVERLAY
========================================================= */
.split-commercial-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -5;
    background:
        linear-gradient(90deg,
            rgba(247, 249, 250, .97) 0%,
            rgba(247, 249, 250, .94) 35%,
            rgba(247, 249, 250, .89) 63%,
            rgba(247, 249, 250, .82) 100%);
}
/* =========================================================
   COLOR ATMOSPHERE
========================================================= */
.split-commercial-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 15%,
            rgba(169, 199, 216, .25),
            transparent 27%),
        radial-gradient(circle at 8% 84%,
            rgba(242, 140, 56, .08),
            transparent 23%);
}
/* =========================================================
   BACKGROUND GRID
========================================================= */
.split-bg-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .08;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(63, 112, 142, .13) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(63, 112, 142, .13) 1px,
            transparent 1px);
    background-size:
        50px 50px;
}
/* =========================================================
   TEXTURE
========================================================= */
.split-bg-texture {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .18;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(16, 45, 67, .11) .6px,
            transparent .6px);
    background-size:
        10px 10px;
}
/* =========================================================
   BACKGROUND WORDS
========================================================= */
.split-bg-word {
    position: absolute;
    z-index: -1;
    color:
        rgba(16, 45, 67, .035);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.split-bg-word-one {
    left: -60px;
    top: 30%;
    font-size:
        clamp(120px, 16vw, 270px);
    transform:
        rotate(-90deg);
}
.split-bg-word-two {
    right: -20px;
    bottom: 3%;
    font-size:
        clamp(120px, 15vw, 240px);
    color:
        rgba(242, 140, 56, .045);
}
/* =========================================================
   CONTAINER CONTENT
========================================================= */
.split-commercial-section .container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   HEADING
========================================================= */
.split-heading {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    margin-bottom:
        60px;
}
/* =========================================================
   KICKER
========================================================= */
.split-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom:
        17px;
    color:
        var(--ad-steel);
    font-size: 9px;
    font-weight: 900;
    letter-spacing:
        3px;
    text-transform:
        uppercase;
}
.split-kicker span {
    display: block;
    width: 40px;
    height: 2px;
    flex-shrink: 0;
    border-radius: 100px;
    background:
        var(--ad-orange);
}
/* =========================================================
   TITLE
========================================================= */
.split-heading h2 {
    max-width: 940px;
    margin: 0;
    color:
        var(--ad-navy);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(54px, 6vw, 92px);
    font-weight: 900;
    line-height: .88;
    letter-spacing:
        -5px;
}
.split-heading h2 strong {
    display: block;
    margin-top:
        7px;
    color:
        var(--ad-orange);
}
/* =========================================================
   ROWS
========================================================= */
.split-row {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
}
.split-row-left {
    justify-content:
        flex-start;
}
.split-row-right {
    justify-content:
        flex-end;
    margin-top:
        30px;
}
/* =========================================================
   BLOCK
========================================================= */
.split-block {
    position: relative;
    overflow: hidden;
    width: 82%;
    min-height:
        255px;
    padding:
        44px 65px;
    transition:
        transform .45s ease;
}
.split-block:hover {
    transform:
        translateY(-6px);
}
/* =========================================================
   BLOCK BACKGROUND
========================================================= */
.split-block-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border:
        1px solid rgba(16, 45, 67, .14);
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .96),
            rgba(169, 199, 216, .48));
    box-shadow:
        0 28px 65px rgba(16, 45, 67, .12);
    backdrop-filter:
        blur(10px);
    transition:
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}
/* =========================================================
   BLOCK 01 SHAPE
========================================================= */
.split-block-one .split-block-bg {
    clip-path:
        polygon(0 0,
            93% 0,
            100% 24%,
            100% 100%,
            8% 100%,
            0 80%);
}
/* =========================================================
   BLOCK 02 SHAPE
========================================================= */
.split-block-two .split-block-bg {
    clip-path:
        polygon(7% 0,
            100% 0,
            100% 80%,
            92% 100%,
            0 100%,
            0 24%);
    background:
        linear-gradient(145deg,
            rgba(169, 199, 216, .52),
            rgba(255, 255, 255, .96));
}
/* =========================================================
   BLOCK HOVER
========================================================= */
.split-block:hover .split-block-bg {
    border-color:
        rgba(242, 140, 56, .32);
    box-shadow:
        0 38px 78px rgba(16, 45, 67, .17);
}
/* =========================================================
   INNER OUTLINE
========================================================= */
.split-block-bg::before {
    content: "";
    position: absolute;
    inset:
        13px;
    border:
        1px solid rgba(16, 45, 67, .065);
    pointer-events:
        none;
}
/* =========================================================
   SOFT LIGHT INSIDE
========================================================= */
.split-block-bg::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    left: -100px;
    top: -110px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, .65),
            transparent 68%);
    pointer-events:
        none;
}
/* =========================================================
   TECH CODE
========================================================= */
.split-code {
    position: absolute;
    z-index: 20;
    right: 35px;
    top: 25px;
    color:
        rgba(63, 112, 142, .56);
    font-size: 6px;
    font-weight: 900;
    letter-spacing:
        1.8px;
    text-transform:
        uppercase;
}
.split-block-two .split-code {
    right: auto;
    left: 35px;
}
/* =========================================================
   NUMBER
========================================================= */
.split-number {
    position: relative;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    margin-bottom:
        20px;
    border-radius: 50%;
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 17px;
    font-weight: 900;
    box-shadow:
        0 14px 30px rgba(242, 140, 56, .20);
}
/* =========================================================
   NUMBER 02
========================================================= */
.split-block-two .split-number {
    margin-left:
        auto;
    color:
        var(--ad-white);
    background:
        var(--ad-navy);
    box-shadow:
        0 14px 30px rgba(16, 45, 67, .18);
}
/* =========================================================
   COPY
========================================================= */
.split-copy {
    position: relative;
    z-index: 10;
    max-width:
        850px;
}
.split-block-two .split-copy {
    margin-left:
        auto;
    text-align:
        right;
}
/* =========================================================
   COPY LINE
========================================================= */
.split-copy-line {
    display: block;
    width: 65px;
    height: 3px;
    margin-bottom:
        18px;
    background:
        linear-gradient(90deg,
            var(--ad-orange),
            transparent);
}
.split-block-two .split-copy-line {
    margin-left:
        auto;
    background:
        linear-gradient(90deg,
            transparent,
            var(--ad-orange));
}
/* =========================================================
   PARAGRAPHS
========================================================= */
.split-copy p {
    margin: 0;
    color:
        var(--ad-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.82;
}
/* =========================================================
   DECORATIVE WORD
========================================================= */
.split-deco-word {
    position: absolute;
    z-index: 2;
    right: 5%;
    bottom: -18px;
    color:
        rgba(16, 45, 67, .045);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        145px;
    font-weight: 900;
    line-height: .8;
    letter-spacing:
        -8px;
    pointer-events: none;
}
.split-block-two .split-deco-word {
    left: 5%;
    right: auto;
    color:
        rgba(242, 140, 56, .055);
}
/* =========================================================
   DOTS
========================================================= */
.split-dots {
    position: absolute;
    z-index: 5;
    right: 8%;
    top: 65px;
    display: grid;
    grid-template-columns:
        repeat(3, 6px);
    gap: 8px;
    opacity: .23;
}
.split-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background:
        var(--ad-steel);
    animation:
        splitDotPulse 2.4s ease-in-out infinite;
}
.split-dots i:nth-child(2) {
    animation-delay: .15s;
}
.split-dots i:nth-child(3) {
    animation-delay: .3s;
}
/* =========================================================
   VENT LINES
========================================================= */
.split-vent-lines {
    position: absolute;
    z-index: 5;
    left: 8%;
    top: 68px;
    width: 120px;
    padding:
        13px;
    border:
        1px solid rgba(16, 45, 67, .08);
    opacity: .18;
}
.split-vent-lines span {
    display: block;
    height: 5px;
    margin:
        7px 0;
    border-radius:
        3px;
    background:
        var(--ad-navy);
    transform:
        skewX(-12deg);
    transition:
        transform .35s ease;
}
.split-block-two:hover .split-vent-lines span:nth-child(odd) {
    transform:
        skewX(-12deg) translateX(5px);
}
.split-block-two:hover .split-vent-lines span:nth-child(even) {
    transform:
        skewX(-12deg) translateX(-5px);
}
/* =========================================================
   ORANGE SIDE MARK
========================================================= */
.split-orange-mark {
    position: absolute;
    z-index: 20;
    left: -8px;
    bottom: 45px;
    width: 18px;
    height: 68px;
    border-radius:
        20px 20px 4px 20px;
    background:
        var(--ad-orange);
    box-shadow:
        0 12px 24px rgba(242, 140, 56, .18);
}
.split-block-two .split-orange-mark {
    left: auto;
    right: -8px;
    border-radius:
        20px 4px 20px 20px;
}
/* =========================================================
   BOTTOM LABELS
========================================================= */
.split-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top:
        38px;
}
.split-bottom span {
    color:
        var(--ad-steel);
    font-size: 7px;
    font-weight: 900;
    letter-spacing:
        2px;
}
.split-bottom i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ad-orange);
}
/* =========================================================
   ANIMATION
========================================================= */
@keyframes splitDotPulse {
    0%,
    100% {
        opacity: .35;
        transform:
            scale(.75);
    }
    50% {
        opacity: 1;
        transform:
            scale(1);
    }
}
/* =========================================================
   LARGE LAPTOP
========================================================= */
@media (max-width: 1399.98px) {
    .split-block {
        width:
            84%;
    }
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .split-commercial-section {
        padding:
            85px 0;
    }
    .split-block {
        width:
            87%;
        padding:
            42px 52px;
    }
    .split-deco-word {
        font-size:
            120px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .split-commercial-section {
        padding:
            75px 0;
    }
    .split-heading {
        margin-bottom:
            45px;
    }
    .split-block {
        width:
            92%;
        padding:
            38px 40px;
    }
    .split-row-right {
        margin-top:
            24px;
    }
    .split-copy p {
        font-size:
            14px;
    }
    .split-deco-word {
        font-size:
            95px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .split-commercial-section {
        padding:
            65px 0;
        background-position:
            center center;
    }
    .split-commercial-section::before {
        background:
            rgba(247, 249, 250, .91);
    }
    .split-heading h2 {
        font-size:
            clamp(40px, 11vw, 58px);
        letter-spacing:
            -3px;
    }
    .split-heading {
        margin-bottom:
            40px;
    }
    .split-block {
        width:
            96%;
        min-height:
            auto;
        padding:
            32px 25px;
    }
    .split-block-one .split-block-bg {
        clip-path:
            polygon(0 0,
                91% 0,
                100% 12%,
                100% 100%,
                9% 100%,
                0 90%);
    }
    .split-block-two .split-block-bg {
        clip-path:
            polygon(9% 0,
                100% 0,
                100% 90%,
                91% 100%,
                0 100%,
                0 12%);
    }
    .split-number {
        width: 55px;
        height: 55px;
        margin-bottom:
            17px;
        font-size:
            14px;
    }
    .split-copy p {
        font-size:
            13px;
        line-height:
            1.75;
    }
    .split-deco-word {
        right: 5%;
        bottom: 4px;
        font-size:
            70px;
    }
    .split-block-two .split-deco-word {
        left: 5%;
    }
    .split-dots,
    .split-vent-lines {
        opacity:
            .09;
    }
    .split-code {
        right:
            20px;
        top:
            18px;
    }
    .split-block-two .split-code {
        left:
            20px;
    }
    .split-bottom {
        flex-wrap:
            wrap;
        gap:
            8px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .split-commercial-section {
        padding:
            58px 0;
    }
    .split-heading h2 {
        font-size:
            36px;
    }
    .split-kicker {
        font-size:
            7px;
        letter-spacing:
            2px;
    }
    .split-block {
        width:
            98%;
        padding:
            28px 20px;
    }
    .split-number {
        width:
            50px;
        height:
            50px;
        font-size:
            13px;
    }
    .split-copy p {
        font-size:
            13px;
    }
    .split-deco-word {
        font-size:
            58px;
    }
    .split-bottom span {
        font-size:
            5px;
        letter-spacing:
            1.2px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .split-commercial-section *,
    .split-commercial-section *::before,
    .split-commercial-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-bg: #F7F9FA;
    --ad-white: #FFFFFF;
    --ad-text: #132934;
    --ad-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.louvre-gallery-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 85px;
    background:
        radial-gradient(circle at 80% 18%,
            rgba(63, 112, 142, .28),
            transparent 28%),
        radial-gradient(circle at 7% 88%,
            rgba(242, 140, 56, .08),
            transparent 22%),
        linear-gradient(135deg,
            #173B57 0%,
            #102D43 58%,
            #081F30 100%);
    isolation: isolate;
}
/* =========================================================
   BACKGROUND GRID
========================================================= */
.louvre-bg-grid {
    position: absolute;
    inset: 0;
    z-index: -6;
    opacity: .08;
    background-image:
        linear-gradient(rgba(255, 255, 255, .12) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .12) 1px,
            transparent 1px);
    background-size: 52px 52px;
}
/* =========================================================
   TEXTURE
========================================================= */
.louvre-bg-texture {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .18;
    background-image:
        radial-gradient(rgba(255, 255, 255, .13) .6px,
            transparent .6px);
    background-size: 10px 10px;
}
/* =========================================================
   LARGE SOFT BACKGROUND DETAIL
========================================================= */
.louvre-gallery-section::before {
    content: "GALLERY";
    position: absolute;
    left: -35px;
    bottom: -25px;
    z-index: -4;
    color:
        rgba(255, 255, 255, .025);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(140px, 18vw, 300px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -14px;
    pointer-events: none;
}
/* =========================================================
   HEADING
========================================================= */
.louvre-heading {
    position: relative;
    z-index: 10;
    margin-bottom: 50px;
}
/* =========================================================
   KICKER
========================================================= */
.louvre-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color:
        var(--ad-soft);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
.louvre-kicker span {
    width: 40px;
    height: 2px;
    background:
        var(--ad-orange);
}
/* =========================================================
   TITLE
========================================================= */
.louvre-heading h2 {
    margin: 0;
    color:
        var(--ad-white);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(50px, 5.8vw, 86px);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -5px;
}
.louvre-heading h2 strong {
    display: block;
    margin-top: 7px;
    color:
        var(--ad-orange);
}
/* =========================================================
   SIDE COUNT
========================================================= */
.louvre-heading-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.louvre-count {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border:
        1px solid rgba(242, 140, 56, .45);
    border-radius: 50%;
    color:
        var(--ad-orange);
    background:
        rgba(242, 140, 56, .05);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 15px;
    font-weight: 900;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, .10);
}
.louvre-heading-side>div {
    display: flex;
    flex-direction: column;
}
.louvre-heading-side small {
    color:
        rgba(169, 199, 216, .60);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.louvre-heading-side strong {
    margin-top: 3px;
    color:
        var(--ad-white);
    font-size: 14px;
    font-weight: 900;
}
/* =========================================================
   GALLERY SHELL
========================================================= */
.louvre-gallery {
    position: relative;
    display: flex;
    gap: 7px;
    width: 100%;
    height: 500px;
    padding: 14px;
    overflow: hidden;
    border:
        1px solid rgba(169, 199, 216, .18);
    border-radius:
        38px 14px 38px 14px;
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .07),
            rgba(63, 112, 142, .10));
    box-shadow:
        0 35px 80px rgba(0, 0, 0, .22);
    backdrop-filter:
        blur(7px);
}
/* inner frame */
.louvre-gallery::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 0;
    border:
        1px solid rgba(255, 255, 255, .055);
    border-radius:
        31px 10px 31px 10px;
    pointer-events: none;
}
/* =========================================================
   GALLERY EDGE SHADOW
========================================================= */
.louvre-gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(8, 31, 48, .22),
            transparent 8%,
            transparent 92%,
            rgba(8, 31, 48, .22));
}
/* =========================================================
   ITEM
========================================================= */
.louvre-item {
    position: relative;
    z-index: 5;
    flex: 1 1 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    border:
        1px solid rgba(255, 255, 255, .08);
    transition:
        flex .65s cubic-bezier(.2, .75, .2, 1),
        transform .4s ease,
        border-color .4s ease;
}
.louvre-item:hover {
    z-index: 20;
    flex: 2.45 1 0;
    border-color:
        rgba(242, 140, 56, .40);
}
/* =========================================================
   VENT / LOUVRE SHAPES
========================================================= */
.louvre-item-01 {
    clip-path:
        polygon(0 0,
            100% 0,
            88% 100%,
            0 100%);
}
.louvre-item-02,
.louvre-item-03,
.louvre-item-04,
.louvre-item-05 {
    clip-path:
        polygon(12% 0,
            100% 0,
            88% 100%,
            0 100%);
}
.louvre-item-06 {
    clip-path:
        polygon(12% 0,
            100% 0,
            100% 100%,
            0 100%);
}
/* =========================================================
   PHOTO
========================================================= */
.louvre-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        #0B2638;
}
.louvre-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter:
        saturate(.76) brightness(.79) contrast(1.04);
    transform:
        scale(1.04);
    transition:
        transform .8s ease,
        filter .6s ease;
}
.louvre-item:hover .louvre-photo img {
    transform:
        scale(1.08);
    filter:
        saturate(1.04) brightness(.94) contrast(1.04);
}
/* =========================================================
   IMAGE OVERLAY
========================================================= */
.louvre-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(16, 45, 67, .03),
            transparent 35%,
            rgba(7, 30, 45, .78));
    pointer-events: none;
}
/* =========================================================
   ORANGE HOVER GLOW
========================================================= */
.louvre-item::after {
    content: "";
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background:
        var(--ad-orange);
    transform:
        scaleX(0);
    transform-origin:
        left center;
    transition:
        transform .5s ease;
}
.louvre-item:hover::after {
    transform:
        scaleX(1);
}
/* =========================================================
   INFO
========================================================= */
.louvre-info {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    transform:
        translateX(-50%);
    transition:
        left .5s ease,
        transform .5s ease;
}
.louvre-info span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border:
        1px solid rgba(255, 255, 255, .30);
    border-radius: 50%;
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    font-size: 8px;
    font-weight: 900;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, .22);
}
.louvre-info strong {
    color:
        rgba(255, 255, 255, .82);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.8px;
    writing-mode:
        vertical-rl;
    transform:
        rotate(180deg);
}
/* open state */
.louvre-item:hover .louvre-info {
    left: 25px;
    align-items:
        flex-start;
    transform:
        none;
}
.louvre-item:hover .louvre-info strong {
    padding:
        8px 12px;
    border:
        1px solid rgba(255, 255, 255, .12);
    border-radius:
        100px;
    color:
        white;
    background:
        rgba(16, 45, 67, .88);
    backdrop-filter:
        blur(8px);
    writing-mode:
        horizontal-tb;
    transform:
        none;
}
/* =========================================================
   ORANGE RAIL
========================================================= */
.louvre-orange-rail {
    position: absolute;
    z-index: 30;
    left: 10%;
    right: 10%;
    top: 0;
    height: 5px;
    border-radius:
        0 0 20px 20px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--ad-orange) 20%,
            var(--ad-orange) 80%,
            transparent);
    box-shadow:
        0 7px 20px rgba(242, 140, 56, .20);
}
/* =========================================================
   SIDE CODE
========================================================= */
.louvre-side-code {
    position: absolute;
    z-index: 30;
    left: 7px;
    top: 50%;
    color:
        rgba(169, 199, 216, .55);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
    writing-mode:
        vertical-rl;
    transform:
        translateY(-50%) rotate(180deg);
}
/* =========================================================
   BOTTOM
========================================================= */
.louvre-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}
.louvre-bottom span {
    color:
        rgba(169, 199, 216, .65);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
.louvre-bottom i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ad-orange);
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .louvre-gallery {
        height: 455px;
    }
    .louvre-item:hover {
        flex: 2.1 1 0;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .louvre-gallery-section {
        padding: 75px 0;
    }
    .louvre-heading-side {
        justify-content:
            flex-start;
        margin-top: 28px;
    }
    .louvre-gallery {
        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
        gap: 10px;
        height: auto;
        padding: 12px;
    }
    .louvre-item {
        height: 280px;
        clip-path:
            none !important;
        border-radius:
            30px 10px 30px 10px;
    }
    .louvre-item:hover {
        flex: none;
        transform:
            translateY(-5px);
    }
    .louvre-info {
        left: 16px;
        bottom: 16px;
        align-items:
            flex-start;
        transform: none;
    }
    .louvre-info strong {
        padding:
            7px 9px;
        border-radius:
            100px;
        background:
            rgba(16, 45, 67, .86);
        writing-mode:
            horizontal-tb;
        transform: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .louvre-gallery-section {
        padding: 65px 0;
    }
    .louvre-heading {
        margin-bottom: 38px;
    }
    .louvre-heading h2 {
        font-size:
            clamp(40px, 11vw, 58px);
        letter-spacing: -3px;
    }
    .louvre-gallery {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .louvre-item {
        height: 250px;
    }
    .louvre-orange-rail,
    .louvre-side-code {
        display: none;
    }
    .louvre-bottom {
        flex-wrap: wrap;
        gap: 8px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
    .louvre-heading h2 {
        font-size: 36px;
    }
    .louvre-gallery {
        grid-template-columns:
            1fr;
    }
    .louvre-item {
        height: 220px;
    }
    .louvre-bottom span {
        font-size: 5px;
        letter-spacing: 1.2px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .louvre-gallery-section *,
    .louvre-gallery-section *::before,
    .louvre-gallery-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   COLORS
========================================================= */
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-bg: #F7F9FA;
    --ad-white: #FFFFFF;
    --ad-text: #132934;
    --ad-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.ad-gallery-dark {
    position: relative;
    overflow: hidden;
    padding:
        90px 0 70px;
    background:
        radial-gradient(circle at 82% 15%,
            rgba(63, 112, 142, .30),
            transparent 27%),
        radial-gradient(circle at 8% 88%,
            rgba(242, 140, 56, .09),
            transparent 22%),
        linear-gradient(135deg,
            var(--ad-dark) 0%,
            var(--ad-navy) 58%,
            #081F30 100%);
    isolation: isolate;
}
/* =========================================================
   BACKGROUND GRID
========================================================= */
.ad-gallery-grid {
    position: absolute;
    inset: 0;
    z-index: -6;
    opacity: .07;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .12) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .12) 1px,
            transparent 1px);
    background-size:
        52px 52px;
}
/* =========================================================
   BACKGROUND TEXTURE
========================================================= */
.ad-gallery-texture {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .18;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(255, 255, 255, .13) .6px,
            transparent .6px);
    background-size:
        10px 10px;
}
/* =========================================================
   HUGE BACKGROUND WORD
========================================================= */
.ad-gallery-big-word {
    position: absolute;
    left: -40px;
    bottom: -25px;
    z-index: -4;
    color:
        rgba(255, 255, 255, .025);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(140px, 18vw, 300px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -14px;
    pointer-events: none;
}
/* =========================================================
   HEADING
========================================================= */
.ad-gallery-heading {
    position: relative;
    z-index: 20;
    margin-bottom:
        48px;
}
/* =========================================================
   KICKER
========================================================= */
.ad-gallery-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom:
        15px;
    color:
        var(--ad-soft);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
.ad-gallery-kicker span {
    display: block;
    width: 40px;
    height: 2px;
    border-radius: 100px;
    background:
        var(--ad-orange);
}
/* =========================================================
   TITLE
========================================================= */
.ad-gallery-heading h2 {
    max-width: 900px;
    margin: 0;
    color:
        var(--ad-white);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(50px, 5.8vw, 86px);
    font-weight: 900;
    line-height: .88;
    letter-spacing:
        -5px;
}
.ad-gallery-heading h2 strong {
    display: block;
    margin-top:
        7px;
    color:
        var(--ad-orange);
}
/* =========================================================
   COUNTER
========================================================= */
.ad-gallery-counter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.ad-gallery-counter>span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border:
        1px solid rgba(242, 140, 56, .45);
    border-radius: 50%;
    color:
        var(--ad-orange);
    background:
        rgba(242, 140, 56, .06);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 16px;
    font-weight: 900;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .10);
}
.ad-gallery-counter div {
    display: flex;
    flex-direction: column;
}
.ad-gallery-counter small {
    color:
        rgba(169, 199, 216, .58);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ad-gallery-counter strong {
    margin-top:
        3px;
    color:
        var(--ad-white);
    font-size: 14px;
    font-weight: 900;
}
/* =========================================================
   FULL WIDTH WRAPPER
========================================================= */
.ad-gallery-full {
    position: relative;
    width: 100%;
    padding:
        0 26px;
}
/* =========================================================
   GALLERY
========================================================= */
.ad-gallery-louvre {
    position: relative;
    display: flex;
    width: 100%;
    height: 620px;
    gap: 8px;
    padding:
        14px;
    overflow: hidden;
    border-top:
        1px solid rgba(169, 199, 216, .18);
    border-bottom:
        1px solid rgba(169, 199, 216, .18);
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .065),
            rgba(63, 112, 142, .11));
    box-shadow:
        0 38px 90px rgba(0, 0, 0, .24);
    backdrop-filter:
        blur(7px);
}
/* inner border */
.ad-gallery-louvre::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 1;
    pointer-events: none;
    border-top:
        1px solid rgba(255, 255, 255, .05);
    border-bottom:
        1px solid rgba(255, 255, 255, .05);
}
/* =========================================================
   ITEM
========================================================= */
.ad-gallery-item {
    position: relative;
    z-index: 5;
    flex:
        1 1 0;
    height: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    border:
        1px solid rgba(255, 255, 255, .07);
    transition:
        flex .65s cubic-bezier(.2, .75, .2, 1),
        border-color .4s ease;
}
/* =========================================================
   LARGE HOVER
========================================================= */
.ad-gallery-item:hover {
    z-index: 30;
    flex:
        3.15 1 0;
    border-color:
        rgba(242, 140, 56, .42);
}
/* =========================================================
   CUT SHAPES
========================================================= */
.ad-gallery-item-01 {
    clip-path:
        polygon(0 0,
            100% 0,
            89% 100%,
            0 100%);
}
.ad-gallery-item-02,
.ad-gallery-item-03,
.ad-gallery-item-04,
.ad-gallery-item-05 {
    clip-path:
        polygon(11% 0,
            100% 0,
            89% 100%,
            0 100%);
}
.ad-gallery-item-06 {
    clip-path:
        polygon(11% 0,
            100% 0,
            100% 100%,
            0 100%);
}
/* =========================================================
   PHOTO
========================================================= */
.ad-gallery-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        #081F30;
}
.ad-gallery-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform:
        scale(1.025);
    filter:
        saturate(.78) brightness(.83) contrast(1.04);
    transition:
        transform .8s ease,
        filter .6s ease;
}
/* hover */
.ad-gallery-item:hover .ad-gallery-photo img {
    transform:
        scale(1.07);
    filter:
        saturate(1.04) brightness(.98) contrast(1.04);
}
/* =========================================================
   PHOTO DARK OVERLAY
========================================================= */
.ad-gallery-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(16, 45, 67, .05),
            transparent 38%,
            rgba(7, 30, 45, .82));
}
/* =========================================================
   ORANGE BOTTOM HOVER LINE
========================================================= */
.ad-gallery-item::after {
    content: "";
    position: absolute;
    z-index: 25;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background:
        var(--ad-orange);
    transform:
        scaleX(0);
    transform-origin:
        left center;
    transition:
        transform .5s ease;
}
.ad-gallery-item:hover::after {
    transform:
        scaleX(1);
}
/* =========================================================
   INFO
========================================================= */
.ad-gallery-info {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    transform:
        translateX(-50%);
    transition:
        left .5s ease,
        transform .5s ease;
}
/* number */
.ad-gallery-info span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border:
        1px solid rgba(255, 255, 255, .30);
    border-radius: 50%;
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    font-size: 9px;
    font-weight: 900;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, .22);
}
/* label */
.ad-gallery-info strong {
    color:
        rgba(255, 255, 255, .88);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    writing-mode:
        vertical-rl;
    transform:
        rotate(180deg);
}
/* =========================================================
   HOVER INFO
========================================================= */
.ad-gallery-item:hover .ad-gallery-info {
    left: 34px;
    align-items:
        flex-start;
    transform:
        none;
}
.ad-gallery-item:hover .ad-gallery-info strong {
    padding:
        9px 14px;
    border:
        1px solid rgba(255, 255, 255, .13);
    border-radius: 100px;
    color:
        white;
    background:
        rgba(16, 45, 67, .90);
    backdrop-filter:
        blur(8px);
    writing-mode:
        horizontal-tb;
    transform:
        none;
}
/* =========================================================
   TOP ORANGE LINE
========================================================= */
.ad-gallery-orange-line {
    position: absolute;
    z-index: 35;
    left: 8%;
    right: 8%;
    top: 0;
    height: 5px;
    border-radius:
        0 0 30px 30px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            var(--ad-orange) 18%,
            var(--ad-orange) 82%,
            transparent 100%);
    box-shadow:
        0 7px 22px rgba(242, 140, 56, .22);
}
/* =========================================================
   SIDE TEXT
========================================================= */
.ad-gallery-side-text {
    position: absolute;
    z-index: 35;
    left: 6px;
    top: 50%;
    color:
        rgba(169, 199, 216, .55);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
    writing-mode:
        vertical-rl;
    transform:
        translateY(-50%) rotate(180deg);
}
/* =========================================================
   BOTTOM
========================================================= */
.ad-gallery-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top:
        28px;
}
.ad-gallery-bottom span {
    color:
        rgba(169, 199, 216, .67);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ad-gallery-bottom i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ad-orange);
}
/* =========================================================
   VERY LARGE SCREEN
========================================================= */
@media (min-width: 1600px) {
    .ad-gallery-full {
        padding:
            0 38px;
    }
    .ad-gallery-louvre {
        height:
            680px;
    }
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .ad-gallery-dark {
        padding:
            82px 0 68px;
    }
    .ad-gallery-full {
        padding:
            0 18px;
    }
    .ad-gallery-louvre {
        height:
            540px;
    }
    .ad-gallery-item:hover {
        flex:
            2.55 1 0;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .ad-gallery-dark {
        padding:
            75px 0 65px;
    }
    .ad-gallery-counter {
        justify-content:
            flex-start;
        margin-top:
            28px;
    }
    .ad-gallery-full {
        padding:
            0 16px;
    }
    .ad-gallery-louvre {
        display: grid;
        grid-template-columns:
            repeat(2, 1fr);
        gap: 12px;
        height:
            auto;
        padding:
            12px;
    }
    .ad-gallery-item {
        height:
            350px;
        clip-path:
            none !important;
        border-radius:
            30px 9px 30px 9px;
    }
    .ad-gallery-item:hover {
        flex:
            none;
        transform:
            translateY(-5px);
    }
    .ad-gallery-info,
    .ad-gallery-item:hover .ad-gallery-info {
        left: 20px;
        bottom: 20px;
        align-items:
            flex-start;
        transform: none;
    }
    .ad-gallery-info strong,
    .ad-gallery-item:hover .ad-gallery-info strong {
        padding:
            8px 11px;
        border-radius:
            100px;
        background:
            rgba(16, 45, 67, .88);
        writing-mode:
            horizontal-tb;
        transform:
            none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .ad-gallery-dark {
        padding:
            65px 0 58px;
    }
    .ad-gallery-heading {
        margin-bottom:
            38px;
    }
    .ad-gallery-heading h2 {
        font-size:
            clamp(40px, 11vw, 58px);
        letter-spacing:
            -3px;
    }
    .ad-gallery-full {
        padding:
            0 10px;
    }
    .ad-gallery-louvre {
        grid-template-columns:
            1fr;
        gap:
            11px;
        padding:
            9px;
    }
    .ad-gallery-item {
        height:
            330px;
    }
    .ad-gallery-orange-line,
    .ad-gallery-side-text {
        display:
            none;
    }
    .ad-gallery-bottom {
        flex-wrap:
            wrap;
        gap:
            8px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
    .ad-gallery-heading h2 {
        font-size:
            36px;
    }
    .ad-gallery-full {
        padding:
            0 7px;
    }
    .ad-gallery-louvre {
        padding:
            6px;
    }
    .ad-gallery-item {
        height:
            285px;
        border-radius:
            23px 7px 23px 7px;
    }
    .ad-gallery-info span {
        width:
            37px;
        height:
            37px;
    }
    .ad-gallery-bottom span {
        font-size:
            5px;
        letter-spacing:
            1.2px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ad-gallery-dark *,
    .ad-gallery-dark *::before,
    .ad-gallery-dark *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-bg: #F7F9FA;
    --ad-white: #FFFFFF;
    --ad-text: #132934;
    --ad-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.deep-disinfection-section {
    position: relative;
    overflow: hidden;
    padding:
        70px 0 55px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, .72)), url("../airduct/ac-bg.webp");
    background-size:
        cover;
    background-position:
        center;
    background-repeat:
        no-repeat;
}
/*
    CHANGE THIS:
    url("air-duct-blueprint-bg.webp")
    TO YOUR BACKGROUND IMAGE NAME
*/
/* =========================================================
   TOP
========================================================= */
.dds-top {
    position: relative;
    z-index: 5;
}
/* =========================================================
   BRAND LINE
========================================================= */
.dds-brand-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom:
        18px;
    color:
        var(--ad-orange);
    font-size: 15px;
    font-weight: 800;
}
.dds-brand-line span {
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 50px;
    background:
        var(--ad-orange);
}
/* =========================================================
   H2
========================================================= */
.dds-top h2 {
    margin: 0;
    color:
        var(--ad-navy);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        50px;
    font-weight: 900;
    line-height: .95;
    letter-spacing:
        -5px;
}
/* =========================================================
   H3
========================================================= */
.dds-top h3 {
    margin:
        8px 0 0;
    color:
        var(--ad-navy);
    font-family:
        Arial,
        sans-serif;
    font-size:
        clamp(31px, 3.2vw, 48px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing:
        -2px;
}
.dds-top h3 strong {
    color:
        var(--ad-orange);
}
/* =========================================================
   ORANGE LINE
========================================================= */
.dds-orange-line {
    width: 110px;
    height: 4px;
    margin:
        24px 0 20px;
    background:
        linear-gradient(90deg,
            var(--ad-orange),
            transparent);
}
/* =========================================================
   INTRO
========================================================= */
.dds-top>p {
    max-width: 690px;
    margin: 0;
    color:
        var(--ad-text);
    font-size: 15px;
    line-height: 1.75;
}
/* =========================================================
   MAIN PANEL
========================================================= */
.dds-main-panel {
    position: relative;
    z-index: 10;
    margin-top:
        18px;
    overflow: hidden;
    border-radius:
        30px;
    background:
        rgba(255, 255, 255, .94);
    box-shadow:
        0 22px 60px rgba(16, 45, 67, .16);
}
/* =========================================================
   LIST
========================================================= */
.dds-list {
    height: 100%;
    padding:
        24px 32px 24px 38px;
}
/* =========================================================
   LIST ITEM
========================================================= */
.dds-list-item {
    display: grid;
    grid-template-columns:
        105px 55px 1fr;
    align-items: center;
    gap:
        14px;
    min-height:
        86px;
    padding:
        12px 0;
    border-bottom:
        1px solid rgba(16, 45, 67, .08);
}
.dds-list-item:last-child {
    border-bottom:
        0;
}
/* =========================================================
   BIG NUMBER
========================================================= */
.dds-big-num {
    color:
        rgba(242, 140, 56, .14);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        68px;
    font-weight:
        900;
    line-height:
        1;
}
/* =========================================================
   ICON
========================================================= */
.dds-small-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color:
        var(--ad-navy);
    border-left:
        2px solid rgba(242, 140, 56, .55);
    font-size:
        28px;
}
/* =========================================================
   COPY
========================================================= */
.dds-item-copy strong {
    display: block;
    color:
        var(--ad-navy);
    font-size:
        14px;
    font-weight:
        900;
    line-height:
        1.35;
}
.dds-item-copy p {
    margin:
        4px 0 0;
    color:
        var(--ad-text);
    font-size:
        13px;
    line-height:
        1.55;
}
/* =========================================================
   PHOTO SIDE
========================================================= */
.dds-photo-side {
    position: relative;
    height: 100%;
    min-height:
        515px;
}
/* dark curved back */
.dds-photo-side::before {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 94%;
    height: 94%;
    background:
        var(--ad-navy);
    border-radius:
        120px 0 120px 0;
}
/* =========================================================
   PHOTO WRAP
========================================================= */
.dds-photo-wrap {
    position: absolute;
    inset:
        12px 14px 14px 0;
    overflow: hidden;
    border-radius:
        120px 0 120px 0;
    background:
        #d6e0e4;
}
/* =========================================================
   IMAGE
========================================================= */
.dds-photo-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position:
        center;
    transition:
        transform .8s ease;
}
.dds-photo-wrap:hover img {
    transform:
        scale(1.05);
}
/* =========================================================
   PHOTO LIGHT EDGE
========================================================= */
.dds-photo-wrap::after {
    content: "";
    position: absolute;
    inset:
        8px;
    pointer-events: none;
    border:
        1px solid rgba(255, 255, 255, .55);
    border-radius:
        110px 0 110px 0;
}
/* =========================================================
   BOTTOM BAR
========================================================= */
.dds-bottom-bar {
    position: relative;
    z-index: 12;
    margin-top:
        14px;
    padding:
        15px 28px;
    border-radius:
        18px;
    background:
        rgba(230, 239, 245, .88);
    box-shadow:
        0 12px 30px rgba(16, 45, 67, .08);
}
/* =========================================================
   MESSAGE
========================================================= */
.dds-bottom-message {
    display: flex;
    align-items: center;
    gap: 20px;
}
/* =========================================================
   SHIELD
========================================================= */
.dds-shield {
    display: grid;
    place-items: center;
    flex:
        0 0 68px;
    width: 68px;
    height: 68px;
    clip-path:
        polygon(50% 0,
            100% 18%,
            88% 76%,
            50% 100%,
            12% 76%,
            0 18%);
    color:
        var(--ad-orange);
    background:
        var(--ad-navy);
    font-size:
        31px;
    font-weight:
        900;
}
/* =========================================================
   DIVIDER
========================================================= */
.dds-divider {
    width: 2px;
    height: 50px;
    flex-shrink: 0;
    background:
        var(--ad-orange);
}
/* =========================================================
   MESSAGE TEXT
========================================================= */
.dds-bottom-message p {
    margin: 0;
    color:
        var(--ad-navy);
    font-size:
        16px;
    line-height:
        1.5;
}
.dds-bottom-message strong {
    font-weight:
        900;
}
.dds-bottom-message span {
    color:
        var(--ad-orange);
    font-weight:
        900;
}
/* =========================================================
   BOTTOM FEATURES
========================================================= */
.dds-bottom-features {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap:
        12px;
}
/* =========================================================
   FEATURE
========================================================= */
.dds-feature {
    flex: 1;
    text-align: center;
}
.dds-feature-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin:
        0 auto 5px;
    color:
        var(--ad-steel);
    font-size:
        30px;
    font-weight:
        900;
}
.dds-feature strong {
    color:
        var(--ad-navy);
    font-size:
        9px;
    font-weight:
        900;
}
/* =========================================================
   HOVER
========================================================= */
.dds-list-item {
    transition:
        transform .3s ease,
        background .3s ease;
}
.dds-list-item:hover {
    transform:
        translateX(5px);
    background:
        rgba(169, 199, 216, .08);
}
.dds-list-item:hover .dds-big-num {
    color:
        rgba(242, 140, 56, .24);
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .dds-list {
        padding:
            20px 24px;
    }
    .dds-list-item {
        grid-template-columns:
            85px 48px 1fr;
    }
    .dds-big-num {
        font-size:
            57px;
    }
    .dds-photo-side {
        min-height:
            500px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .deep-disinfection-section {
        padding:
            70px 0 50px;
    }
    .dds-main-panel {
        margin-top:
            35px;
    }
    .dds-list {
        padding:
            25px 28px;
    }
    .dds-photo-side {
        min-height:
            390px;
    }
    .dds-photo-side::before {
        width:
            calc(100% - 20px);
    }
    .dds-photo-wrap {
        inset:
            8px 12px 12px;
        border-radius:
            80px 15px 80px 15px;
    }
    .dds-bottom-features {
        margin-top:
            10px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .deep-disinfection-section {
        padding:
            58px 0 40px;
        background-position:
            center top;
    }
    .dds-brand-line {
        font-size:
            11px;
    }
    .dds-top h2 {
        font-size:
            clamp(38px, 11vw, 54px);
        letter-spacing:
            -3px;
    }
    .dds-top h3 {
        font-size:
            27px;
    }
    .dds-top>p {
        font-size:
            14px;
    }
    .dds-main-panel {
        border-radius:
            22px;
    }
    .dds-list {
        padding:
            20px;
    }
    .dds-list-item {
        grid-template-columns:
            60px 42px 1fr;
        gap:
            10px;
        min-height:
            90px;
    }
    .dds-big-num {
        font-size:
            42px;
    }
    .dds-small-icon {
        width:
            36px;
        height:
            36px;
        font-size:
            22px;
    }
    .dds-item-copy strong {
        font-size:
            13px;
    }
    .dds-item-copy p {
        font-size:
            12px;
    }
    .dds-photo-side {
        min-height:
            310px;
    }
    .dds-photo-wrap {
        border-radius:
            55px 10px 55px 10px;
    }
    .dds-photo-side::before {
        border-radius:
            65px 10px 65px 10px;
    }
    .dds-bottom-bar {
        padding:
            18px;
    }
    .dds-bottom-message {
        align-items:
            flex-start;
        gap:
            12px;
    }
    .dds-shield {
        flex-basis:
            54px;
        width:
            54px;
        height:
            54px;
        font-size:
            24px;
    }
    .dds-divider {
        height:
            46px;
    }
    .dds-bottom-message p {
        font-size:
            13px;
    }
    .dds-bottom-features {
        margin-top:
            15px;
        gap:
            5px;
    }
    .dds-feature strong {
        font-size:
            7px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .dds-top h2 {
        font-size:
            35px;
    }
    .dds-top h3 {
        font-size:
            23px;
    }
    .dds-list {
        padding:
            16px;
    }
    .dds-list-item {
        grid-template-columns:
            52px 36px 1fr;
        padding:
            10px 0;
    }
    .dds-big-num {
        font-size:
            36px;
    }
    .dds-photo-side {
        min-height:
            255px;
    }
    .dds-bottom-features {
        flex-wrap:
            wrap;
    }
    .dds-feature {
        min-width:
            30%;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .deep-disinfection-section *,
    .deep-disinfection-section *::before,
    .deep-disinfection-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   VARIABLES
========================================================= */
:root {
    --pc-navy: #102D43;
    --pc-dark: #071D2C;
    --pc-deep: #041521;
    --pc-steel: #3F708E;
    --pc-soft: #A9C7D8;
    --pc-orange: #F28C38;
    --pc-white: #FFFFFF;
    --pc-text:
        rgba(255, 255, 255, .84);
    --pc-muted:
        rgba(169, 199, 216, .62);
}
/* =========================================================
   SECTION
========================================================= */
.pcare-section {
    position: relative;
    overflow: hidden;
    padding:
        90px 0;
    background:
        radial-gradient(circle at 16% 38%,
            rgba(63, 112, 142, .22),
            transparent 25%),
        radial-gradient(circle at 86% 80%,
            rgba(242, 140, 56, .07),
            transparent 20%),
        linear-gradient(125deg,
            #061A28 0%,
            #102D43 55%,
            #071D2C 100%);
    isolation: isolate;
}
/* =========================================================
   GRID BACKGROUND
========================================================= */
.pcare-grid {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .045;
    background-image:
        linear-gradient(rgba(255, 255, 255, .12) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .12) 1px,
            transparent 1px);
    background-size:
        52px 52px;
}
/* =========================================================
   BACKGROUND GLOWS
========================================================= */
.pcare-glow {
    position: absolute;
    z-index: -4;
    border-radius: 50%;
    filter:
        blur(15px);
    pointer-events: none;
}
.pcare-glow-one {
    left: -150px;
    top: 100px;
    width: 360px;
    height: 360px;
    background:
        rgba(63, 112, 142, .10);
}
.pcare-glow-two {
    right: -160px;
    bottom: -180px;
    width: 400px;
    height: 400px;
    background:
        rgba(242, 140, 56, .05);
}
/* =========================================================
   BACKGROUND WORD
========================================================= */
.pcare-bg-word {
    position: absolute;
    z-index: -3;
    right: -25px;
    bottom: -30px;
    color:
        rgba(255, 255, 255, .018);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(150px, 22vw, 340px);
    font-weight: 900;
    line-height: .75;
    letter-spacing:
        -18px;
    pointer-events: none;
}
/* =========================================================
   VISUAL
========================================================= */
.pcare-visual {
    position: relative;
    width: 100%;
    max-width:
        520px;
    min-height:
        650px;
    margin:
        0 auto;
}
/* =========================================================
   TOP DECORATION
========================================================= */
.pcare-visual-top {
    position: absolute;
    left: 0;
    right: 5px;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 13px;
}
.pcare-visual-top>span {
    color:
        var(--pc-orange);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        12px;
    font-weight:
        900;
}
.pcare-visual-top>div {
    flex: 1;
    height: 1px;
    background:
        linear-gradient(90deg,
            var(--pc-orange),
            rgba(169, 199, 216, .15));
}
.pcare-visual-top small {
    color:
        var(--pc-soft);
    font-size:
        7px;
    font-weight:
        800;
    letter-spacing:
        2px;
}
/* =========================================================
   PHOTO SHELL
========================================================= */
.pcare-photo-shell {
    position: absolute;
    left: 20px;
    right: 42px;
    top: 48px;
    bottom: 25px;
}
/* =========================================================
   PHOTO
========================================================= */
.pcare-photo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*
        THIS CREATES THE LARGE ARCH SHAPE
        LIKE YOUR REFERENCE
    */
    border-radius:
        18px 18px 220px 220px;
    background:
        var(--pc-deep);
    box-shadow:
        0 35px 75px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(255, 255, 255, .06);
}
/* =========================================================
   IMAGE
========================================================= */
.pcare-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position:
        center;
    filter:
        brightness(.88) saturate(.90);
    transition:
        transform .9s ease,
        filter .5s ease;
}
.pcare-visual:hover .pcare-photo img {
    transform:
        scale(1.055);
    filter:
        brightness(.98) saturate(1);
}
/* =========================================================
   PHOTO OVERLAY
========================================================= */
.pcare-photo-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(4, 21, 33, .02) 40%,
            rgba(4, 21, 33, .15) 68%,
            rgba(4, 21, 33, .72) 100%);
}
/* =========================================================
   OUTER ARCH
   Separate line outside the photo, like the fashion design.
========================================================= */
.pcare-outer-arch {
    position: absolute;
    left: 5px;
    right: 25px;
    top: 65px;
    bottom: 4px;
    z-index: -1;
    border:
        2px solid rgba(242, 140, 56, .55);
    border-top:
        0;
    border-radius:
        0 0 245px 245px;
}
/* second thin line */
.pcare-outer-arch::after {
    content: "";
    position: absolute;
    left: 11px;
    right: -10px;
    top: 20px;
    bottom: 10px;
    border-right:
        1px solid rgba(169, 199, 216, .20);
    border-bottom:
        1px solid rgba(169, 199, 216, .20);
    border-radius:
        0 0 235px 0;
}
/* =========================================================
   DOT DECORATION
========================================================= */
.pcare-dots {
    position: absolute;
    z-index: 20;
    left: -12px;
    top: 120px;
    display: grid;
    grid-template-columns:
        repeat(4, 6px);
    gap:
        9px;
}
.pcare-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background:
        var(--pc-soft);
    opacity: .72;
}
/* =========================================================
   STRIPES
========================================================= */
.pcare-stripes {
    position: absolute;
    z-index: 20;
    right: 2px;
    top: 175px;
    display: flex;
    gap:
        5px;
    transform:
        rotate(-45deg);
}
.pcare-stripes i {
    display: block;
    width: 5px;
    height: 52px;
    background:
        var(--pc-orange);
}
.pcare-stripes i:nth-child(2) {
    opacity: .75;
}
.pcare-stripes i:nth-child(3) {
    opacity: .50;
}
.pcare-stripes i:nth-child(4) {
    opacity: .25;
}
/* =========================================================
   PHOTO LABEL
========================================================= */
.pcare-photo-label {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 54px;
    display: flex;
    align-items: center;
    gap:
        11px;
    min-width:
        155px;
    padding:
        9px 14px 9px 9px;
    border:
        1px solid rgba(255, 255, 255, .14);
    border-radius:
        100px;
    background:
        rgba(7, 29, 44, .84);
    backdrop-filter:
        blur(9px);
    transform:
        translateX(-50%);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);
}
/* check */
.pcare-photo-label>span {
    display: grid;
    place-items: center;
    flex:
        0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color:
        var(--pc-navy);
    background:
        var(--pc-orange);
    font-size:
        16px;
    font-weight:
        900;
}
.pcare-photo-label small {
    display: block;
    color:
        var(--pc-soft);
    font-size:
        6px;
    font-weight:
        800;
    letter-spacing:
        1.5px;
}
.pcare-photo-label strong {
    display: block;
    margin-top:
        2px;
    color:
        white;
    font-size:
        8px;
    font-weight:
        900;
    letter-spacing:
        1px;
}
/* =========================================================
   CONTENT
========================================================= */
.pcare-content {
    position: relative;
    z-index: 10;
    padding-left:
        10px;
}
/* =========================================================
   KICKER
========================================================= */
.pcare-kicker {
    display: flex;
    align-items: center;
    gap:
        13px;
    margin-bottom:
        20px;
}
.pcare-kicker>span {
    width: 45px;
    height: 3px;
    border-radius:
        20px;
    background:
        var(--pc-orange);
}
.pcare-kicker small {
    flex-shrink: 0;
    color:
        var(--pc-soft);
    font-size:
        9px;
    font-weight:
        900;
    letter-spacing:
        2.5px;
}
.pcare-kicker i {
    flex: 1;
    height: 1px;
    background:
        linear-gradient(90deg,
            rgba(242, 140, 56, .55),
            transparent);
}
/* =========================================================
   TITLE
========================================================= */
.pcare-content h2 {
    max-width:
        760px;
    margin: 0;
    color:
        var(--pc-white);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(54px, 5.5vw, 84px);
    font-weight:
        900;
    line-height:
        .88;
    letter-spacing:
        -5px;
}
.pcare-content h2>span {
    display: block;
}
.pcare-content h2 strong {
    display: block;
    max-width:
        650px;
    margin-top:
        14px;
    color:
        var(--pc-orange);
    font-size:
        .56em;
    line-height:
        1;
    letter-spacing:
        -2.5px;
}
/* =========================================================
   TITLE DETAIL
========================================================= */
.pcare-title-detail {
    display: flex;
    align-items: center;
    gap:
        8px;
    width:
        190px;
    margin:
        26px 0;
}
.pcare-title-detail span {
    height: 1px;
    flex: 1;
    background:
        rgba(169, 199, 216, .26);
}
.pcare-title-detail i {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background:
        var(--pc-orange);
    box-shadow:
        0 0 0 5px rgba(242, 140, 56, .08);
}
/* =========================================================
   INTRO
========================================================= */
.pcare-intro {
    max-width:
        760px;
    margin: 0;
    color:
        var(--pc-text);
    font-size:
        15px;
    line-height:
        1.8;
}
/* =========================================================
   POINTS
========================================================= */
.pcare-points {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    margin-top:
        35px;
    border-top:
        1px solid rgba(169, 199, 216, .14);
    border-bottom:
        1px solid rgba(169, 199, 216, .14);
}
/* =========================================================
   POINT
========================================================= */
.pcare-point {
    position: relative;
    display: grid;
    grid-template-columns:
        auto auto 1fr;
    align-items: center;
    gap:
        11px;
    min-height:
        105px;
    padding:
        18px 16px;
    border-right:
        1px solid rgba(169, 199, 216, .13);
    transition:
        background .35s ease;
}
.pcare-point:last-child {
    border-right: 0;
}
.pcare-point:hover {
    background:
        rgba(255, 255, 255, .035);
}
/* =========================================================
   NUMBER
========================================================= */
.pcare-point-number {
    position: absolute;
    right: 8px;
    top: 4px;
    color:
        rgba(242, 140, 56, .13);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        35px;
    font-weight:
        900;
}
/* =========================================================
   POINT ICON
========================================================= */
.pcare-point-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border:
        1px solid rgba(242, 140, 56, .42);
    border-radius: 50%;
    color:
        var(--pc-orange);
    background:
        rgba(255, 255, 255, .025);
    font-size:
        20px;
    transition:
        transform .35s ease,
        background .35s ease;
}
.pcare-point:hover .pcare-point-icon {
    transform:
        translateY(-4px);
    background:
        rgba(242, 140, 56, .08);
}
/* =========================================================
   POINT COPY
========================================================= */
.pcare-point-copy small {
    display: block;
    color:
        var(--pc-muted);
    font-size:
        6px;
    font-weight:
        900;
    letter-spacing:
        1.5px;
}
.pcare-point-copy strong {
    display: block;
    margin-top:
        4px;
    color:
        var(--pc-white);
    font-size:
        12px;
    font-weight:
        900;
}
/* =========================================================
   BOTTOM COPY
========================================================= */
.pcare-bottom-copy {
    position: relative;
    display: grid;
    grid-template-columns:
        42px 1fr;
    gap:
        20px;
    margin-top:
        30px;
    padding:
        22px 25px;
    border-left:
        2px solid var(--pc-orange);
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, .05),
            rgba(63, 112, 142, .035));
}
/* =========================================================
   BOTTOM MARK
========================================================= */
.pcare-bottom-mark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:
        6px;
}
.pcare-bottom-mark span {
    display: block;
    height: 3px;
    border-radius:
        20px;
    background:
        var(--pc-orange);
}
.pcare-bottom-mark span:nth-child(1) {
    width: 20px;
}
.pcare-bottom-mark span:nth-child(2) {
    width: 32px;
}
.pcare-bottom-mark span:nth-child(3) {
    width: 25px;
}
/* =========================================================
   SECOND ORIGINAL PARAGRAPH
========================================================= */
.pcare-bottom-copy p {
    margin: 0;
    color:
        var(--pc-text);
    font-size:
        14px;
    line-height:
        1.75;
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
    .pcare-section {
        padding:
            100px 0;
    }
    .pcare-visual {
        min-height:
            680px;
    }
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .pcare-visual {
        min-height:
            610px;
    }
    .pcare-photo-shell {
        right:
            30px;
    }
    .pcare-content h2 {
        font-size:
            62px;
    }
    .pcare-point {
        padding:
            16px 10px;
        gap:
            8px;
    }
    .pcare-point-icon {
        width:
            40px;
        height:
            40px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .pcare-section {
        padding:
            70px 0;
    }
    /*
        On responsive:
        PHOTO FIRST
        CONTENT SECOND
    */
    .pcare-visual {
        max-width:
            620px;
        min-height:
            620px;
        margin-bottom:
            30px;
    }
    .pcare-photo-shell {
        left:
            40px;
        right:
            40px;
    }
    .pcare-outer-arch {
        left:
            20px;
        right:
            20px;
    }
    .pcare-content {
        padding-left: 0;
    }
    .pcare-content h2 {
        max-width:
            760px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .pcare-section {
        padding:
            55px 0;
    }
    /* ================= PHOTO ================= */
    .pcare-visual {
        min-height:
            500px;
        margin-bottom:
            25px;
    }
    .pcare-photo-shell {
        left:
            18px;
        right:
            30px;
        top:
            45px;
        bottom:
            20px;
    }
    .pcare-photo {
        border-radius:
            14px 14px 165px 165px;
    }
    .pcare-outer-arch {
        left:
            3px;
        right:
            12px;
        top:
            60px;
        border-radius:
            0 0 185px 185px;
    }
    .pcare-dots {
        left:
            0;
        top:
            105px;
        gap:
            6px;
    }
    .pcare-dots i {
        width:
            5px;
        height:
            5px;
    }
    .pcare-stripes {
        right:
            5px;
        top:
            145px;
    }
    .pcare-stripes i {
        height:
            38px;
        width:
            4px;
    }
    /* ================= CONTENT ================= */
    .pcare-kicker small {
        font-size:
            7px;
        letter-spacing:
            1.5px;
    }
    .pcare-content h2 {
        font-size:
            clamp(42px, 12vw, 58px);
        letter-spacing:
            -3px;
    }
    .pcare-content h2 strong {
        font-size:
            .60em;
        letter-spacing:
            -1.5px;
    }
    .pcare-intro {
        font-size:
            14px;
    }
    /* ================= POINTS ================= */
    .pcare-points {
        grid-template-columns:
            1fr;
        margin-top:
            30px;
    }
    .pcare-point {
        min-height:
            85px;
        grid-template-columns:
            50px 1fr;
        padding:
            14px 10px;
        border-right: 0;
        border-bottom:
            1px solid rgba(169, 199, 216, .12);
    }
    .pcare-point:last-child {
        border-bottom: 0;
    }
    .pcare-point-icon {
        grid-column:
            1;
    }
    .pcare-point-copy {
        grid-column:
            2;
    }
    .pcare-point-number {
        right:
            10px;
        top:
            50%;
        font-size:
            48px;
        transform:
            translateY(-50%);
    }
    /* ================= BOTTOM ================= */
    .pcare-bottom-copy {
        grid-template-columns:
            30px 1fr;
        gap:
            12px;
        padding:
            18px;
    }
    .pcare-bottom-copy p {
        font-size:
            13px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .pcare-visual {
        min-height:
            420px;
    }
    .pcare-photo {
        border-radius:
            12px 12px 130px 130px;
    }
    .pcare-outer-arch {
        border-radius:
            0 0 150px 150px;
    }
    .pcare-photo-label {
        bottom:
            40px;
    }
    .pcare-content h2 {
        font-size:
            38px;
    }
    .pcare-content h2 strong {
        font-size:
            .62em;
    }
    .pcare-kicker i {
        display: none;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .pcare-section *,
    .pcare-section *::before,
    .pcare-section *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-bg: #F7F9FA;
    --ad-white: #FFFFFF;
    --ad-text: #132934;
    --ad-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.camfaq-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background:
        radial-gradient(circle at 50% 55%,
            rgba(169, 199, 216, .30),
            transparent 28%),
        radial-gradient(circle at 8% 15%,
            rgba(242, 140, 56, .06),
            transparent 20%),
        linear-gradient(180deg,
            #FFFFFF,
            #F7F9FA);
    isolation: isolate;
}
/* =========================================================
   GRID
========================================================= */
.camfaq-grid {
    position: absolute;
    inset: 0;
    z-index: -6;
    opacity: .065;
    background-image:
        linear-gradient(rgba(16, 45, 67, .10) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(16, 45, 67, .10) 1px,
            transparent 1px);
    background-size: 52px 52px;
}
/* =========================================================
   TEXTURE
========================================================= */
.camfaq-texture {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .18;
    background-image:
        radial-gradient(rgba(16, 45, 67, .08) .6px,
            transparent .6px);
    background-size: 10px 10px;
}
/* =========================================================
   HEADING
========================================================= */
.camfaq-heading {
    margin-bottom: 55px;
}
/* =========================================================
   KICKER
========================================================= */
.camfaq-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--ad-steel);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
.camfaq-kicker span {
    width: 42px;
    height: 2px;
    background: var(--ad-orange);
}
/* =========================================================
   TITLE
========================================================= */
.camfaq-heading h2 {
    margin: 0;
    color: var(--ad-navy);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
      58px;
    font-weight: 900;
    line-height: .88;
    letter-spacing: -5px;
}
.camfaq-heading h2 strong {
    display: block;
    margin-top: 7px;
    color: var(--ad-orange);
}
/* =========================================================
   COUNT
========================================================= */
.camfaq-count {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
}
.camfaq-count>span {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border:
        1px solid rgba(242, 140, 56, .42);
    border-radius: 50%;
    color: var(--ad-orange);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 16px;
}
.camfaq-count small {
    display: block;
    color: var(--ad-muted);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.camfaq-count strong {
    display: block;
    margin-top: 3px;
    color: var(--ad-navy);
    font-size: 12px;
}
/* =========================================================
   MAP
========================================================= */
.camfaq-map {
    position: relative;
    max-width: 1180px;
    height: 760px;
    margin: 0 auto;
}
/* =========================================================
   FAQ NOTE
========================================================= */
.camfaq-note {
    position: absolute;
    z-index: 10;
    width: 40%;
    min-height: 285px;
    padding: 30px 32px;
    border:
        1px solid rgba(16, 45, 67, .11);
    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .98),
            rgba(169, 199, 216, .22));
    box-shadow:
        0 22px 55px rgba(16, 45, 67, .08);
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}
.camfaq-note:hover {
    transform: translateY(-6px);
    border-color:
        rgba(242, 140, 56, .32);
    box-shadow:
        0 32px 72px rgba(16, 45, 67, .14);
}
/* =========================================================
   POSITIONS
========================================================= */
.camfaq-note-01 {
    left: 0;
    top: 0;
    border-radius:
        40px 8px 40px 40px;
}
.camfaq-note-02 {
    right: 0;
    top: 0;
    border-radius:
        8px 40px 40px 40px;
}
.camfaq-note-03 {
    left: 0;
    bottom: 0;
    border-radius:
        40px 40px 8px 40px;
}
.camfaq-note-04 {
    right: 0;
    bottom: 0;
    border-radius:
        40px 40px 40px 8px;
}
/* =========================================================
   NOTE TOP
========================================================= */
.camfaq-note-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
}
/* =========================================================
   NUMBER
========================================================= */
.camfaq-num {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--ad-navy);
    background: var(--ad-orange);
    font-size: 9px;
    font-weight: 900;
    box-shadow:
        0 8px 20px rgba(242, 140, 56, .18);
}
/* =========================================================
   TAG
========================================================= */
.camfaq-tag {
    color: var(--ad-steel);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
/* =========================================================
   QUESTION
========================================================= */
.camfaq-note h3 {
    margin:
        0 0 16px;
    color: var(--ad-navy);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.3;
}
/* =========================================================
   ANSWER
========================================================= */
.camfaq-note p {
    margin: 0;
    padding-left: 16px;
    border-left:
        2px solid var(--ad-orange);
    color: var(--ad-text);
    font-size: 13px;
    line-height: 1.72;
}
/* =========================================================
   CENTER
========================================================= */
.camfaq-core {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    width: 270px;
    height: 270px;
    transform:
        translate(-50%, -50%);
}
/* =========================================================
   RINGS
========================================================= */
.camfaq-core-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.camfaq-ring-1 {
    inset: 0;
    border:
        1px dashed rgba(63, 112, 142, .30);
    animation:
        camfaqRotate 24s linear infinite;
}
.camfaq-ring-2 {
    inset: 24px;
    border:
        1px solid rgba(242, 140, 56, .25);
}
/* =========================================================
   CENTER BOX
========================================================= */
.camfaq-core-box {
    position: absolute;
    inset: 48px;
    display: grid;
    place-items: center;
    border:
        7px solid var(--ad-white);
    border-radius: 50%;
    background:
        radial-gradient(circle,
            #173B57,
            #102D43);
    box-shadow:
        0 22px 55px rgba(16, 45, 67, .25);
}
/* =========================================================
   FAN
========================================================= */
.camfaq-fan {
    position: absolute;
    inset: 28px;
    opacity: .25;
    animation:
        camfaqFan 16s linear infinite;
}
.camfaq-fan span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 62px;
    border-radius:
        80% 20% 80% 20%;
    background: var(--ad-soft);
    transform-origin:
        50% 0;
}
.camfaq-fan span:nth-child(1) {
    transform: rotate(0deg) translate(-50%, 5px);
}
.camfaq-fan span:nth-child(2) {
    transform: rotate(90deg) translate(-50%, 5px);
}
.camfaq-fan span:nth-child(3) {
    transform: rotate(180deg) translate(-50%, 5px);
}
.camfaq-fan span:nth-child(4) {
    transform: rotate(270deg) translate(-50%, 5px);
}
/* =========================================================
   CORE COPY
========================================================= */
.camfaq-core-copy {
    position: relative;
    z-index: 5;
    text-align: center;
}
.camfaq-core-copy small {
    display: block;
    color: var(--ad-soft);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.camfaq-core-copy strong {
    display: block;
    color: white;
    font-size: 18px;
    font-weight: 900;
}
.camfaq-core-copy span {
    display: block;
    color: var(--ad-orange);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 32px;
    line-height: 1;
}
/* =========================================================
   CONNECTION LINES
========================================================= */
.camfaq-line {
    position: absolute;
    z-index: 5;
    width: 170px;
    height: 2px;
    background:
        linear-gradient(90deg,
            rgba(242, 140, 56, .15),
            var(--ad-orange));
}
/* top left */
.camfaq-line-1 {
    left: 36%;
    top: 31%;
    transform:
        rotate(28deg);
}
/* top right */
.camfaq-line-2 {
    right: 36%;
    top: 31%;
    transform:
        rotate(-28deg);
}
/* bottom left */
.camfaq-line-3 {
    left: 36%;
    bottom: 31%;
    transform:
        rotate(-28deg);
}
/* bottom right */
.camfaq-line-4 {
    right: 36%;
    bottom: 31%;
    transform:
        rotate(28deg);
}
/* =========================================================
   PULSE POINTS
========================================================= */
.camfaq-pulse {
    position: absolute;
    z-index: 12;
    width: 12px;
    height: 12px;
    border:
        3px solid var(--ad-bg);
    border-radius: 50%;
    background: var(--ad-orange);
    box-shadow:
        0 0 0 6px rgba(242, 140, 56, .10);
    animation:
        camfaqPulse 2.5s ease-in-out infinite;
}
.camfaq-pulse-1 {
    left: 42%;
    top: 37%;
}
.camfaq-pulse-2 {
    right: 42%;
    top: 37%;
    animation-delay: .3s;
}
.camfaq-pulse-3 {
    left: 42%;
    bottom: 37%;
    animation-delay: .6s;
}
.camfaq-pulse-4 {
    right: 42%;
    bottom: 37%;
    animation-delay: .9s;
}
/* =========================================================
   BOTTOM
========================================================= */
.camfaq-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 35px;
}
.camfaq-bottom span,
.camfaq-bottom strong {
    color: var(--ad-steel);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
.camfaq-bottom strong {
    color: var(--ad-orange);
}
.camfaq-bottom i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ad-orange);
}
/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes camfaqRotate {
    to {
        transform: rotate(360deg);
    }
}
@keyframes camfaqFan {
    to {
        transform: rotate(360deg);
    }
}
@keyframes camfaqPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(242, 140, 56, .08);
    }
    50% {
        box-shadow:
            0 0 0 11px rgba(242, 140, 56, .01);
    }
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .camfaq-map {
        height: 820px;
    }
    .camfaq-note {
        width: 41%;
        min-height: 315px;
        padding: 27px;
    }
    .camfaq-core {
        width: 230px;
        height: 230px;
    }
    .camfaq-core-box {
        inset: 40px;
    }
    .camfaq-line {
        width: 130px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .camfaq-section {
        padding: 75px 0;
    }
    .camfaq-count {
        justify-content: flex-start;
        margin-top: 25px;
    }
    .camfaq-map {
        display: grid;
        grid-template-columns:
            1fr 1fr;
        gap: 17px;
        height: auto;
    }
    .camfaq-note {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        min-height: 320px;
    }
    .camfaq-core,
    .camfaq-line,
    .camfaq-pulse {
        display: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .camfaq-section {
        padding: 60px 0;
    }
    .camfaq-heading {
        margin-bottom: 40px;
    }
    .camfaq-heading h2 {
        font-size:
            clamp(40px, 11vw, 58px);
        letter-spacing: -3px;
    }
    .camfaq-map {
        grid-template-columns:
            1fr;
        gap: 14px;
    }
    .camfaq-note {
        min-height: auto;
        padding: 25px 22px;
        border-radius:
            26px 8px 26px 8px !important;
    }
    .camfaq-note h3 {
        font-size: 17px;
    }
    .camfaq-note p {
        font-size: 13px;
    }
    .camfaq-bottom {
        flex-wrap: wrap;
        gap: 7px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .camfaq-heading h2 {
        font-size: 36px;
    }
    .camfaq-note {
        padding: 22px 18px;
    }
    .camfaq-note h3 {
        font-size: 16px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .camfaq-section *,
    .camfaq-section *::before,
    .camfaq-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-white: #FFFFFF;
}
/* =========================================================
   SECTION
========================================================= */
.mini-service-section {
    position: relative;
    overflow: hidden;
    padding: 38px 0;
    background:
        radial-gradient(circle at 82% 28%,
            rgba(63, 112, 142, .25),
            transparent 28%),
        radial-gradient(circle at 8% 85%,
            rgba(242, 140, 56, .08),
            transparent 20%),
        linear-gradient(135deg,
            #173B57 0%,
            #102D43 58%,
            #081F30 100%);
    isolation: isolate;
}
/* =========================================================
   GRID
========================================================= */
.mini-service-grid {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .055;
    background-image:
        linear-gradient(rgba(255, 255, 255, .10) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .10) 1px,
            transparent 1px);
    background-size:
        42px 42px;
}
/* =========================================================
   TEXTURE
========================================================= */
.mini-service-texture {
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .12;
    background-image:
        radial-gradient(rgba(255, 255, 255, .12) .6px,
            transparent .6px);
    background-size:
        10px 10px;
}
/* =========================================================
   HEADER
========================================================= */
.mini-service-head {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
/* =========================================================
   KICKER
========================================================= */
.mini-service-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    color:
        var(--ad-soft);
    font-size: 7px;
    font-weight: 900;
    letter-spacing:
        2px;
}
.mini-service-kicker span {
    width: 32px;
    height: 2px;
    background:
        var(--ad-orange);
}
/* =========================================================
   TITLE
========================================================= */
.mini-service-head h2 {
    margin: 0;
    color:
        var(--ad-white);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1;
    letter-spacing:
        -2px;
}
/* =========================================================
   COUNT
========================================================= */
.mini-service-count {
    flex-shrink: 0;
    padding:
        7px 12px;
    border:
        1px solid rgba(242, 140, 56, .38);
    border-radius:
        100px;
    color:
        var(--ad-orange);
    background:
        rgba(255, 255, 255, .025);
    font-size:
        6px;
    font-weight: 900;
    letter-spacing:
        1.5px;
}
/* =========================================================
   SERVICES ROW
========================================================= */
.mini-service-row {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
}
/* =========================================================
   SERVICE ITEM
========================================================= */
.mini-service-item {
    position: relative;
    flex:
        1 1 0;
    min-width: 0;
    height: 122px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding:
        15px 14px;
    overflow: hidden;
    border:
        1px solid rgba(169, 199, 216, .14);
    border-radius:
        18px 5px 18px 5px;
    background:
        rgba(255, 255, 255, .045);
    color:
        white;
    text-decoration:
        none;
    backdrop-filter:
        blur(6px);
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}
/* =========================================================
   HOVER
========================================================= */
.mini-service-item:hover {
    transform:
        translateY(-5px);
    border-color:
        rgba(242, 140, 56, .40);
    background:
        rgba(255, 255, 255, .075);
    box-shadow:
        0 18px 35px rgba(0, 0, 0, .15);
}
/* =========================================================
   ORANGE EDGE
========================================================= */
.mini-service-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 3px;
    height: 34px;
    border-radius:
        0 10px 10px 0;
    background:
        var(--ad-orange);
}
/* =========================================================
   BOTTOM HOVER LINE
========================================================= */
.mini-service-item::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 2px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--ad-orange),
            transparent);
    transform:
        scaleX(0);
    transition:
        transform .4s ease;
}
.mini-service-item:hover::after {
    transform:
        scaleX(1);
}
/* =========================================================
   ICON
========================================================= */
.mini-service-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border:
        1px solid rgba(242, 140, 56, .40);
    border-radius: 50%;
    color:
        var(--ad-orange);
    background:
        rgba(255, 255, 255, .025);
    font-size: 16px;
    transition:
        transform .35s ease,
        background .35s ease;
}
.mini-service-item:hover .mini-service-icon {
    transform:
        rotate(6deg) scale(1.08);
    background:
        rgba(242, 140, 56, .08);
}
/* =========================================================
   TITLE
========================================================= */
.mini-service-item strong {
    position: relative;
    z-index: 5;
    max-width:
        125px;
    color:
        white;
    font-size:
        11px;
    font-weight: 900;
    line-height:
        1.25;
}
/* =========================================================
   NUMBER
========================================================= */
.mini-service-item>i {
    position: absolute;
    right: 9px;
    bottom: -6px;
    color:
        rgba(242, 140, 56, .12);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        42px;
    font-style:
        normal;
    font-weight:
        900;
    line-height: 1;
    pointer-events:
        none;
}
/* =========================================================
   LARGE SCREEN
========================================================= */
@media (min-width: 1400px) {
    .mini-service-item {
        height:
            128px;
        padding:
            16px;
    }
    .mini-service-item strong {
        font-size:
            12px;
    }
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .mini-service-row {
        gap:
            8px;
    }
    .mini-service-item {
        height:
            118px;
        padding:
            14px 11px;
    }
    .mini-service-item strong {
        max-width:
            100px;
        font-size:
            10px;
    }
    .mini-service-icon {
        width:
            31px;
        height:
            31px;
        font-size:
            14px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .mini-service-section {
        padding:
            34px 0;
    }
    .mini-service-row {
        overflow-x:
            auto;
        overflow-y:
            hidden;
        padding-bottom:
            8px;
        scrollbar-width:
            thin;
        scroll-snap-type:
            x proximity;
    }
    .mini-service-item {
        flex:
            0 0 155px;
        width:
            155px;
        min-width:
            155px;
        scroll-snap-align:
            start;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .mini-service-section {
        padding:
            30px 0;
    }
    .mini-service-head {
        align-items:
            flex-start;
        flex-direction:
            column;
        gap:
            10px;
        margin-bottom:
            17px;
    }
    .mini-service-head h2 {
        font-size:
            29px;
    }
    .mini-service-row {
        gap:
            8px;
    }
    .mini-service-item {
        flex:
            0 0 142px;
        width:
            142px;
        min-width:
            142px;
        height:
            108px;
        padding:
            13px 11px;
    }
    .mini-service-item strong {
        max-width:
            100px;
        font-size:
            10px;
    }
    .mini-service-item>i {
        font-size:
            37px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .mini-service-section {
        padding:
            27px 0;
    }
    .mini-service-head h2 {
        font-size:
            26px;
    }
    .mini-service-item {
        flex-basis:
            135px;
        width:
            135px;
        min-width:
            135px;
        height:
            105px;
    }
    .mini-service-icon {
        width:
            29px;
        height:
            29px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .mini-service-section *,
    .mini-service-section *::before,
    .mini-service-section *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-bg: #F7F9FA;
    --ad-white: #FFFFFF;
    --ad-text: #132934;
    --ad-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.ad-cta {
    position: relative;
    overflow: hidden;
    padding: 55px 0;
    background:
        radial-gradient(circle at 8% 40%,
            rgba(169, 199, 216, .22),
            transparent 24%),
        var(--ad-bg);
    isolation: isolate;
}
/* =========================================================
   TEXTURE
========================================================= */
.ad-cta-texture {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .18;
    background-image:
        radial-gradient(rgba(16, 45, 67, .10) .7px,
            transparent .7px);
    background-size:
        10px 10px;
}
/* =========================================================
   BACKGROUND AIR LINES
========================================================= */
.ad-cta-air {
    position: absolute;
    z-index: -2;
    width: 430px;
    height: 150px;
    border-top:
        1px solid rgba(63, 112, 142, .13);
    border-radius: 50%;
}
.ad-cta-air-1 {
    left: -100px;
    top: 30px;
    transform:
        rotate(8deg);
}
.ad-cta-air-2 {
    left: -40px;
    top: 65px;
    transform:
        rotate(5deg);
}
/* =========================================================
   CTA SHELL
========================================================= */
.ad-cta-shell {
    position: relative;
    overflow: hidden;
    padding:
        42px 48px 30px;
    border:
        1px solid rgba(16, 45, 67, .10);
    border-radius:
        34px 8px 34px 8px;
    background:
        linear-gradient(110deg,
            #FFFFFF 0%,
            #FFFFFF 61%,
            #EEF4F7 100%);
    box-shadow:
        0 25px 70px rgba(16, 45, 67, .10);
}
/* =========================================================
   DARK SHAPE
========================================================= */
.ad-cta-dark-shape {
    position: absolute;
    z-index: 0;
    right: -100px;
    top: -170px;
    width: 540px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 25% 55%,
            var(--ad-dark),
            var(--ad-navy) 65%);
}
/* ORANGE EDGE */
.ad-cta-dark-shape::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 100px;
    width: 3px;
    height: 260px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    transform:
        rotate(7deg);
    opacity: .85;
}
/* =========================================================
   COPY
========================================================= */
.ad-cta-copy {
    position: relative;
    z-index: 5;
    max-width:
        660px;
}
/* =========================================================
   KICKER
========================================================= */
.ad-cta-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom:
        11px;
    color:
        var(--ad-steel);
    font-size:
        7px;
    font-weight: 900;
    letter-spacing:
        2.3px;
}
.ad-cta-kicker>span {
    width: 32px;
    height: 2px;
    background:
        var(--ad-orange);
}
/* =========================================================
   TITLE
========================================================= */
.ad-cta-copy h2 {
    margin:
        0 0 13px;
    color:
        var(--ad-navy);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(35px, 4.3vw, 61px);
    font-weight: 900;
    line-height: .94;
    letter-spacing:
        -3px;
}
.ad-cta-copy h2 span {
    display: block;
    color:
        var(--ad-orange);
}
/* =========================================================
   DESCRIPTION
========================================================= */
.ad-cta-copy p {
    max-width:
        570px;
    margin: 0;
    color:
        var(--ad-muted);
    font-size:
        13px;
    line-height:
        1.7;
}
/* =========================================================
   ACTION AREA
========================================================= */
.ad-cta-action {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    padding-left:
        50px;
}
/* =========================================================
   PHONE
========================================================= */
.ad-cta-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width:
        245px;
}
/* PHONE ICON */
.ad-cta-phone-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border:
        1px solid rgba(242, 140, 56, .55);
    border-radius: 50%;
    color:
        var(--ad-orange);
    background:
        rgba(255, 255, 255, .06);
    font-size:
        17px;
}
/* LABEL */
.ad-cta-phone small {
    display: block;
    margin-bottom:
        2px;
    color:
        var(--ad-soft);
    font-size:
        6px;
    font-weight: 900;
    letter-spacing:
        1.8px;
}
/* NUMBER */
.ad-cta-phone a {
    color:
        var(--ad-white);
    text-decoration:
        none;
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        19px;
    font-weight: 900;
}
/* =========================================================
   BUTTON
========================================================= */
.ad-cta-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:
        245px;
    padding:
        6px 6px 6px 20px;
    border-radius:
        100px;
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    text-decoration:
        none;
    font-size:
        10px;
    font-weight: 900;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}
.ad-cta-btn i {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    color:
        var(--ad-white);
    background:
        var(--ad-navy);
    font-size:
        16px;
    font-style: normal;
    transition:
        transform .35s ease;
}
.ad-cta-btn:hover {
    color:
        var(--ad-navy);
    transform:
        translateY(-3px);
    box-shadow:
        0 12px 25px rgba(242, 140, 56, .25);
}
.ad-cta-btn:hover i {
    transform:
        translateX(2px);
}
/* =========================================================
   FLOW BOTTOM
========================================================= */
.ad-cta-flow {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    width:
        42%;
    margin-top:
        26px;
}
.ad-cta-flow>span,
.ad-cta-flow>strong {
    flex-shrink: 0;
    color:
        var(--ad-steel);
    font-size:
        5px;
    font-weight: 900;
    letter-spacing:
        1.5px;
}
.ad-cta-flow>strong {
    color:
        var(--ad-orange);
}
/* =========================================================
   FLOW LINE
========================================================= */
.ad-cta-flow-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(90deg,
            var(--ad-soft),
            var(--ad-orange));
}
.ad-cta-flow-line i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    animation:
        adCtaPulse 2.3s ease-in-out infinite;
}
.ad-cta-flow-line i:nth-child(2) {
    animation-delay:
        .25s;
}
.ad-cta-flow-line i:nth-child(3) {
    animation-delay:
        .5s;
}
/* =========================================================
   ANIMATION
========================================================= */
@keyframes adCtaPulse {
    0%,
    100% {
        opacity: .35;
        transform:
            scale(.7);
    }
    50% {
        opacity: 1;
        transform:
            scale(1.25);
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .ad-cta-shell {
        padding:
            38px 35px;
    }
    .ad-cta-dark-shape {
        right: -180px;
        width: 500px;
    }
    .ad-cta-action {
        align-items:
            flex-start;
        margin-top:
            30px;
        padding-left:
            0;
    }
    .ad-cta-flow {
        width:
            65%;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .ad-cta {
        padding:
            38px 0;
    }
    .ad-cta-shell {
        padding:
            31px 24px 28px;
        border-radius:
            27px 7px 27px 7px;
    }
    .ad-cta-dark-shape {
        top: auto;
        right: -150px;
        bottom: -230px;
        width: 520px;
        height: 430px;
    }
    .ad-cta-copy h2 {
        font-size:
            38px;
        letter-spacing:
            -2px;
    }
    .ad-cta-copy p {
        max-width:
            100%;
    }
    .ad-cta-action {
        margin-top:
            55px;
    }
    .ad-cta-phone {
        min-width:
            0;
    }
    .ad-cta-btn {
        width:
            230px;
    }
    .ad-cta-flow {
        width:
            100%;
        margin-top:
            32px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .ad-cta-copy h2 {
        font-size:
            33px;
    }
    .ad-cta-shell {
        padding-left:
            19px;
        padding-right:
            19px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ad-cta *,
    .ad-cta *::before,
    .ad-cta *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-bg: #F7F9FA;
    --ad-white: #FFFFFF;
    --ad-text: #132934;
    --ad-muted: #607582;
}
/* =========================================================
   SECTION
========================================================= */
.ccf-section {
    position: relative;
    overflow: hidden;
    padding:
        90px 0;
    background:
        radial-gradient(circle at 84% 16%,
            rgba(169, 199, 216, .26),
            transparent 26%),
        radial-gradient(circle at 8% 88%,
            rgba(242, 140, 56, .07),
            transparent 20%),
        linear-gradient(180deg,
            #FFFFFF,
            var(--ad-bg));
    isolation: isolate;
}
/* =========================================================
   GRID
========================================================= */
.ccf-grid {
    position: absolute;
    inset: 0;
    z-index: -6;
    opacity: .07;
    background-image:
        linear-gradient(rgba(16, 45, 67, .10) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(16, 45, 67, .10) 1px,
            transparent 1px);
    background-size:
        50px 50px;
}
/* =========================================================
   TEXTURE
========================================================= */
.ccf-texture {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .20;
    background-image:
        radial-gradient(rgba(16, 45, 67, .08) .6px,
            transparent .6px);
    background-size:
        10px 10px;
}
/* =========================================================
   HEADING
========================================================= */
.ccf-heading {
    margin-bottom:
        55px;
}
/* =========================================================
   KICKER
========================================================= */
.ccf-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom:
        16px;
    color:
        var(--ad-steel);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
.ccf-kicker span {
    width: 42px;
    height: 2px;
    background:
        var(--ad-orange);
}
/* =========================================================
   TITLE
========================================================= */
.ccf-heading h2 {
    margin: 0;
    color:
        var(--ad-navy);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(52px, 6vw, 88px);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -5px;
}
.ccf-heading h2 strong {
    display: block;
    margin-top: 7px;
    color:
        var(--ad-orange);
}
/* =========================================================
   HEADING NOTE
========================================================= */
.ccf-heading-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
}
.ccf-heading-note>span {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border:
        1px solid rgba(242, 140, 56, .42);
    border-radius: 50%;
    color:
        var(--ad-orange);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size: 15px;
}
.ccf-heading-note small {
    display: block;
    color:
        var(--ad-muted);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ccf-heading-note strong {
    display: block;
    margin-top: 3px;
    color:
        var(--ad-navy);
    font-size: 12px;
}
/* =========================================================
   COMMAND CENTER
========================================================= */
.ccf-command {
    position: relative;
    display: grid;
    grid-template-columns:
        .78fr 1.05fr 1.35fr;
    align-items: center;
    gap:
        18px;
}
/* =========================================================
   DATA
========================================================= */
.ccf-data {
    position: relative;
    z-index: 5;
    min-height:
        560px;
    padding:
        28px 24px;
    overflow: hidden;
    border:
        1px solid rgba(169, 199, 216, .16);
    border-radius:
        36px 8px 36px 8px;
    background:
        linear-gradient(145deg,
            var(--ad-dark),
            var(--ad-navy));
    box-shadow:
        0 28px 65px rgba(16, 45, 67, .20);
}
/* =========================================================
   DATA TOP
========================================================= */
.ccf-data-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:
        30px;
}
.ccf-data-top span {
    color:
        var(--ad-orange);
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        28px;
}
.ccf-data-top small {
    color:
        var(--ad-soft);
    font-size:
        6px;
    font-weight: 900;
    letter-spacing:
        2px;
}
/* =========================================================
   DATA ITEM
========================================================= */
.ccf-data-item {
    display: flex;
    align-items: center;
    gap:
        12px;
    padding:
        17px 0;
    border-bottom:
        1px solid rgba(169, 199, 216, .12);
}
.ccf-data-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border:
        1px solid rgba(242, 140, 56, .40);
    border-radius: 50%;
    color:
        var(--ad-orange);
    font-size:
        16px;
}
.ccf-data-item small {
    display: block;
    margin-bottom:
        3px;
    color:
        rgba(169, 199, 216, .60);
    font-size:
        5px;
    font-weight: 900;
    letter-spacing:
        1.5px;
}
.ccf-data-item a,
.ccf-data-item strong {
    color:
        white;
    text-decoration:
        none;
    font-size:
        12px;
    font-weight: 900;
}
/* =========================================================
   DATA BOTTOM
========================================================= */
.ccf-data-bottom {
    display: flex;
    align-items: center;
    gap:
        8px;
    margin-top:
        28px;
}
.ccf-data-bottom span {
    color:
        var(--ad-soft);
    font-size:
        5px;
    font-weight: 900;
    letter-spacing:
        1.2px;
}
.ccf-data-bottom i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ad-orange);
}
/* =========================================================
   MAP
========================================================= */
.ccf-map {
    position: relative;
    z-index: 4;
    height:
        500px;
    overflow: hidden;
    border:
        1px solid rgba(16, 45, 67, .10);
    border-radius:
        90px 10px 90px 10px;
    background:
        #D9E5EA;
    box-shadow:
        0 25px 60px rgba(16, 45, 67, .13);
}
/* =========================================================
   MAP FRAME
========================================================= */
.ccf-map::before {
    content: "";
    position: absolute;
    inset:
        9px;
    z-index: 4;
    pointer-events: none;
    border:
        1px solid rgba(255, 255, 255, .60);
    border-radius:
        80px 8px 80px 8px;
}
/* =========================================================
   MAP IFRAME
========================================================= */
.ccf-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter:
        saturate(.75) contrast(.96);
}
/* =========================================================
   MAP LABEL
========================================================= */
.ccf-map-label {
    position: absolute;
    z-index: 10;
    left:
        20px;
    top:
        20px;
    display: flex;
    align-items: center;
    gap:
        10px;
    padding:
        9px 12px;
    border-radius:
        100px;
    background:
        rgba(16, 45, 67, .88);
    backdrop-filter:
        blur(8px);
}
.ccf-map-label>span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    font-size:
        7px;
    font-weight: 900;
}
.ccf-map-label small {
    display: block;
    color:
        var(--ad-soft);
    font-size:
        5px;
    font-weight: 900;
    letter-spacing:
        1.3px;
}
.ccf-map-label strong {
    display: block;
    color:
        white;
    font-size:
        9px;
}
/* =========================================================
   MAP PIN
========================================================= */
.ccf-map-pin {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:
        3px;
    transform:
        translate(-50%, -50%);
}
.ccf-map-pin span {
    color:
        var(--ad-orange);
    font-size:
        28px;
    text-shadow:
        0 5px 12px rgba(16, 45, 67, .25);
}
.ccf-map-pin strong {
    padding:
        5px 9px;
    border-radius:
        100px;
    color:
        white;
    background:
        var(--ad-navy);
    font-size:
        6px;
    letter-spacing:
        1px;
}
/* =========================================================
   FORM PANEL
========================================================= */
.ccf-form-panel {
    position: relative;
    z-index: 6;
    padding:
        24px;
    border:
        1px solid rgba(16, 45, 67, .10);
    border-radius:
        28px 8px 28px 8px;
    background:
        rgba(255, 255, 255, .96);
    box-shadow:
        0 30px 75px rgba(16, 45, 67, .14);
    transform:
        translateY(-18px);
}
/* =========================================================
   FORM HEADER
========================================================= */
.ccf-form-header {
    display: flex;
    align-items: center;
    gap:
        10px;
    margin-bottom:
        16px;
}
.ccf-form-header>span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    font-size:
        8px;
    font-weight: 900;
}
.ccf-form-header small {
    display: block;
    color:
        var(--ad-muted);
    font-size:
        5px;
    font-weight: 900;
    letter-spacing:
        1.5px;
}
.ccf-form-header strong {
    display: block;
    margin-top:
        2px;
    color:
        var(--ad-navy);
    font-size:
        15px;
}
/* =========================================================
   FORM
========================================================= */
.gd-service-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
.gd-service-form legend {
    display: none;
}
/* =========================================================
   RESPONSE
========================================================= */
.gd-form-response {
    display: flex;
    align-items: center;
    gap:
        8px;
    margin-bottom:
        12px;
    color:
        var(--ad-steel);
    font-size:
        7px;
    font-weight: 900;
    letter-spacing:
        1px;
}
.gd-form-response span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--ad-orange);
    box-shadow:
        0 0 0 5px rgba(242, 140, 56, .08);
}
/* =========================================================
   FIELD
========================================================= */
.gd-field {
    position: relative;
}
.gd-field label {
    display: block;
    margin-bottom:
        6px;
    color:
        var(--ad-steel);
    font-size:
        6px;
    font-weight: 900;
    letter-spacing:
        1.5px;
}
/* =========================================================
   INPUTS
========================================================= */
.gd-service-form .form-control {
    width: 100%;
    min-height:
        43px;
    padding:
        10px 12px;
    border:
        1px solid rgba(16, 45, 67, .11);
    border-radius:
        10px 4px 10px 4px;
    color:
        var(--ad-text);
    background:
        #F9FBFC;
    box-shadow:
        none;
    font-size:
        12px;
    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}
.gd-service-form textarea.form-control {
    min-height:
        85px;
    resize:
        vertical;
}
.gd-service-form .form-control:focus {
    outline: none;
    border-color:
        rgba(242, 140, 56, .55);
    background:
        white;
    box-shadow:
        0 0 0 3px rgba(242, 140, 56, .08);
}
/* =========================================================
   FORM DIVIDER
========================================================= */
.gd-form-divider {
    display: flex;
    align-items: center;
    gap:
        12px;
    margin:
        19px 0 13px;
}
.gd-form-divider span {
    flex-shrink: 0;
    color:
        var(--ad-steel);
    font-size:
        6px;
    font-weight: 900;
    letter-spacing:
        1.6px;
}
.gd-form-divider i {
    flex: 1;
    height: 1px;
    background:
        linear-gradient(90deg,
            rgba(242, 140, 56, .55),
            rgba(16, 45, 67, .06));
}
/* =========================================================
   SUBMIT
========================================================= */
.gd-submit-wrap {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
.btn-submit {
    width: 100%;
    min-height:
        43px;
    padding:
        10px 50px 10px 16px;
    border: 0;
    border-radius:
        100px;
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    font-size:
        10px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}
.gd-submit-wrap>span {
    position: absolute;
    right:
        6px;
    bottom:
        4px;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color:
        white;
    background:
        var(--ad-navy);
    pointer-events: none;
}
.gd-submit-wrap:hover .btn-submit {
    transform:
        translateY(-2px);
    box-shadow:
        0 10px 24px rgba(242, 140, 56, .20);
}
/* =========================================================
   HONEYPOT
========================================================= */
.subject {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================================
   LAPTOP
========================================================= */
@media (max-width: 1199.98px) {
    .ccf-command {
        grid-template-columns:
            .8fr 1fr 1.3fr;
        gap:
            14px;
    }
    .ccf-data {
        padding:
            24px 18px;
    }
    .ccf-form-panel {
        padding:
            20px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .ccf-section {
        padding:
            75px 0;
    }
    .ccf-heading-note {
        justify-content:
            flex-start;
        margin-top:
            25px;
    }
    .ccf-command {
        grid-template-columns:
            1fr 1fr;
        align-items:
            stretch;
    }
    .ccf-data {
        min-height:
            460px;
    }
    .ccf-map {
        height:
            460px;
    }
    .ccf-form-panel {
        grid-column:
            1 / -1;
        transform:
            none;
        margin-top:
            5px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .ccf-section {
        padding:
            60px 0;
    }
    .ccf-heading {
        margin-bottom:
            40px;
    }
    .ccf-heading h2 {
        font-size:
            clamp(40px, 11vw, 58px);
        letter-spacing:
            -3px;
    }
    .ccf-command {
        grid-template-columns:
            1fr;
        gap:
            14px;
    }
    .ccf-data {
        min-height:
            auto;
        padding:
            24px;
    }
    .ccf-map {
        height:
            340px;
        border-radius:
            55px 8px 55px 8px;
    }
    .ccf-form-panel {
        grid-column:
            auto;
        padding:
            20px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .ccf-heading h2 {
        font-size:
            36px;
    }
    .ccf-data-item a,
    .ccf-data-item strong {
        font-size:
            11px;
    }
    .ccf-map {
        height:
            290px;
    }
    .ccf-form-panel {
        padding:
            17px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ccf-section *,
    .ccf-section *::before,
    .ccf-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
:root {
    --ad-navy: #102D43;
    --ad-dark: #173B57;
    --ad-steel: #3F708E;
    --ad-soft: #A9C7D8;
    --ad-orange: #F28C38;
    --ad-white: #FFFFFF;
}
/* =========================================================
   FOOTER
========================================================= */
.ad-footer {
    position: relative;
    overflow: hidden;
    padding:
        70px 0 25px;
    background:
        radial-gradient(circle at 86% 18%,
            rgba(63, 112, 142, .24),
            transparent 28%),
        radial-gradient(circle at 8% 88%,
            rgba(242, 140, 56, .07),
            transparent 20%),
        linear-gradient(135deg,
            #173B57 0%,
            #102D43 58%,
            #081F30 100%);
    isolation: isolate;
}
/* =========================================================
   GRID
========================================================= */
.ad-footer-grid {
    position: absolute;
    inset: 0;
    z-index: -5;
    opacity: .055;
    background-image:
        linear-gradient(rgba(255, 255, 255, .10) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .10) 1px,
            transparent 1px);
    background-size:
        48px 48px;
}
/* =========================================================
   TEXTURE
========================================================= */
.ad-footer-texture {
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .12;
    background-image:
        radial-gradient(rgba(255, 255, 255, .12) .6px,
            transparent .6px);
    background-size:
        10px 10px;
}
/* =========================================================
   TOP
========================================================= */
.ad-footer-top {
    position: relative;
    z-index: 5;
}
/* =========================================================
   BRAND
========================================================= */
.ad-footer-brand {
    max-width:
        380px;
}
.ad-footer-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom:
        14px;
    color:
        var(--ad-soft);
    font-size:
        8px;
    font-weight: 900;
    letter-spacing:
        2px;
}
.ad-footer-kicker span {
    width: 34px;
    height: 2px;
    background:
        var(--ad-orange);
}
.ad-footer-brand h3 {
    margin:
        0 0 15px;
    color:
        white;
    font-family:
        Arial Black,
        Arial,
        sans-serif;
    font-size:
        clamp(30px, 3vw, 46px);
    font-weight:
        900;
    line-height:
        .95;
    letter-spacing:
        -2px;
}
.ad-footer-brand h3 strong {
    display: block;
    margin-top:
        5px;
    color:
        var(--ad-orange);
}
.ad-footer-brand p {
    max-width:
        330px;
    margin:
        0;
    color:
        rgba(255, 255, 255, .70);
    font-size:
        13px;
    line-height:
        1.7;
}
/* =========================================================
   SOCIAL
========================================================= */
.ad-footer-social {
    display: flex;
    gap:
        8px;
    margin-top:
        22px;
}
.ad-footer-social a {
    display: grid;
    place-items: center;
    width:
        38px;
    height:
        38px;
    border:
        1px solid rgba(169, 199, 216, .18);
    border-radius:
        50%;
    color:
        var(--ad-soft);
    background:
        rgba(255, 255, 255, .03);
    text-decoration:
        none;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}
.ad-footer-social a:hover {
    transform:
        translateY(-4px);
    color:
        var(--ad-navy);
    background:
        var(--ad-orange);
    border-color:
        var(--ad-orange);
}
/* =========================================================
   COLUMNS
========================================================= */
.ad-footer-column h4,
.ad-footer-contact h4 {
    margin:
        0 0 18px;
    color:
        white;
    font-size:
        14px;
    font-weight:
        900;
}
/* small orange line */
.ad-footer-column h4::after,
.ad-footer-contact h4::after {
    content: "";
    display: block;
    width:
        28px;
    height:
        2px;
    margin-top:
        7px;
    background:
        var(--ad-orange);
}
/* =========================================================
   LINKS
========================================================= */
.ad-footer-column ul {
    margin:
        0;
    padding:
        0;
    list-style:
        none;
}
.ad-footer-column li {
    margin-bottom:
        10px;
}
.ad-footer-column a {
    position: relative;
    color:
        rgba(255, 255, 255, .66);
    text-decoration:
        none;
    font-size:
        12px;
    transition:
        color .3s ease,
        padding-left .3s ease;
}
.ad-footer-column a::before {
    content:
        "";
    display:
        inline-block;
    width:
        0;
    height:
        1px;
    margin-right:
        0;
    vertical-align:
        middle;
    background:
        var(--ad-orange);
    transition:
        width .3s ease,
        margin-right .3s ease;
}
.ad-footer-column a:hover {
    color:
        white;
    padding-left:
        3px;
}
.ad-footer-column a:hover::before {
    width:
        15px;
    margin-right:
        7px;
}
/* =========================================================
   CONTACT
========================================================= */
.ad-footer-contact-item {
    display: flex;
    align-items: center;
    gap:
        11px;
    padding:
        12px 0;
    border-bottom:
        1px solid rgba(169, 199, 216, .10);
}
.ad-footer-contact-item>span {
    display: grid;
    place-items: center;
    width:
        38px;
    height:
        38px;
    flex-shrink:
        0;
    border:
        1px solid rgba(242, 140, 56, .35);
    border-radius:
        50%;
    color:
        var(--ad-orange);
}
.ad-footer-contact-item small {
    display: block;
    margin-bottom:
        2px;
    color:
        rgba(169, 199, 216, .56);
    font-size:
        5px;
    font-weight:
        900;
    letter-spacing:
        1.3px;
}
.ad-footer-contact-item a,
.ad-footer-contact-item strong {
    color:
        white;
    text-decoration:
        none;
    font-size:
        11px;
    font-weight:
        800;
}
/* =========================================================
   FLOW
========================================================= */
.ad-footer-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:
        14px;
    margin:
        45px 0 24px;
}
.ad-footer-flow>span,
.ad-footer-flow>strong {
    color:
        rgba(169, 199, 216, .55);
    font-size:
        6px;
    font-weight:
        900;
    letter-spacing:
        2px;
}
.ad-footer-flow>strong {
    color:
        var(--ad-orange);
}
.ad-footer-flow>div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width:
        220px;
    height:
        1px;
    background:
        linear-gradient(90deg,
            rgba(169, 199, 216, .20),
            var(--ad-orange),
            rgba(169, 199, 216, .20));
}
.ad-footer-flow i {
    display: block;
    width:
        6px;
    height:
        6px;
    border-radius:
        50%;
    background:
        var(--ad-orange);
}
/* =========================================================
   BOTTOM
========================================================= */
.ad-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:
        20px;
    padding-top:
        20px;
    border-top:
        1px solid rgba(169, 199, 216, .12);
}
.ad-footer-bottom p {
    margin:
        0;
    color:
        rgba(255, 255, 255, .52);
    font-size:
        11px;
}
.ad-footer-bottom>div {
    display: flex;
    align-items: center;
    gap:
        10px;
}
.ad-footer-bottom a {
    color:
        rgba(255, 255, 255, .56);
    text-decoration:
        none;
    font-size:
        10px;
}
.ad-footer-bottom a:hover {
    color:
        var(--ad-orange);
}
.ad-footer-bottom>div span {
    display: block;
    width:
        4px;
    height:
        4px;
    border-radius:
        50%;
    background:
        var(--ad-orange);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .ad-footer {
        padding:
            60px 0 25px;
    }
    .ad-footer-brand {
        margin-bottom:
            10px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .ad-footer {
        padding:
            50px 0 22px;
    }
    .ad-footer-brand h3 {
        font-size:
            34px;
    }
    .ad-footer-flow {
        flex-wrap:
            wrap;
        gap:
            8px;
        margin-top:
            35px;
    }
    .ad-footer-flow>div {
        width:
            120px;
    }
    .ad-footer-bottom {
        flex-direction:
            column;
        align-items:
            flex-start;
        gap:
            10px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .ad-footer-brand h3 {
        font-size:
            31px;
    }
    .ad-footer-column h4,
    .ad-footer-contact h4 {
        margin-bottom:
            14px;
    }
}

/* =========================================
   FOOTER AREAS - HORIZONTAL LINE
========================================= */

.cad-footer-areas{
    width:100%;
    padding:25px 0;
}

.cad-footer-title{
    margin:0 0 18px;

    color:var(--ad-white);
    font-size:18px;
    font-weight:800;
}

.cad-area-line{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:0;

    margin:0;
    padding:0;

    list-style:none;
}

.cad-area-line li{
    display:flex;
    align-items:center;
}

/* separator */

.cad-area-line li:not(:last-child)::after{
    content:"";
    
    width:1px;
    height:14px;

    margin:0 15px;

    background:rgba(169,199,216,.35);
}

.cad-area-line a{
    position:relative;

    display:inline-block;

    padding:5px 0;

    color:rgba(255,255,255,.78);

    font-size:13px;
    font-weight:600;

    transition:.3s ease;
}

.cad-area-line a::before{
    content:"";

    display:inline-block;

    width:5px;
    height:5px;

    margin-right:8px;

    vertical-align:middle;

    border-radius:50%;

    background:var(--ad-orange);
}

.cad-area-line a:hover{
    color:var(--ad-orange);
    transform:translateY(-2px);
}


/* MOBILE */

@media(max-width:767.98px){

    .cad-area-line{
        gap:7px 0;
    }

    .cad-area-line li:not(:last-child)::after{
        margin:0 10px;
    }

    .cad-area-line a{
        font-size:12px;
    }

}

/* =========================================================
   FAQ SECTION
========================================================= */

.cad-faq-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    padding:120px 0;

    background:
        radial-gradient(
            circle at 4% 70%,
            rgba(63,112,142,.13),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #f8fafb 0%,
            #ffffff 48%,
            #f2f6f8 100%
        );
}


/* TEXTURE */

.cad-faq-section::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-5;

    opacity:.32;

    background-image:
        radial-gradient(
            rgba(16,45,67,.07) 1px,
            transparent 1px
        ),
        repeating-linear-gradient(
            8deg,
            rgba(16,45,67,.018) 0,
            rgba(16,45,67,.018) 1px,
            transparent 1px,
            transparent 9px
        );

    background-size:
        25px 25px,
        auto;
}


/* DARK SIDE SHAPE */

.cad-faq-section::after{
    content:"";

    position:absolute;

    left:0;
    top:95px;

    width:7px;
    height:220px;

    background:var(--ad-navy);

    border-radius:0 20px 20px 0;
}


/* =========================================================
   DECOR
========================================================= */

.cad-faq-ring{
    position:absolute;

    right:-80px;
    top:-100px;

    width:240px;
    height:240px;

    border-radius:50%;

    border:
        34px solid
        rgba(63,112,142,.10);
}


.cad-faq-dots{
    position:absolute;

    left:2%;
    bottom:45px;

    width:105px;
    height:105px;

    opacity:.65;

    background-image:
        radial-gradient(
            var(--ad-steel) 2px,
            transparent 2px
        );

    background-size:
        15px 15px;
}


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

.cad-faq-intro{
    position:sticky;
    top:35px;

    padding-right:35px;
}


.cad-faq-kicker{
    display:inline-flex;
    align-items:center;

    gap:10px;

    margin-bottom:20px;

    color:var(--ad-orange);

    font-size:11px;
    font-weight:900;

    letter-spacing:2.5px;
}


.cad-faq-kicker::before{
    content:"";

    width:30px;
    height:2px;

    background:var(--ad-orange);
}


.cad-faq-intro h2{
    max-width:390px;

    margin:0;

    color:var(--ad-navy);

    font-size:clamp(42px,4.4vw,70px);

    line-height:.96;

    letter-spacing:-3px;

    font-weight:900;
}


.cad-faq-intro h2 span{
    display:block;

    color:var(--ad-orange);
}


.cad-faq-intro > p{
    max-width:380px;

    margin:25px 0 0;

    color:var(--ad-muted);

    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   FAN GRAPHIC
========================================================= */

.cad-faq-fan-wrap{
    position:relative;

    width:260px;
    height:170px;

    margin-top:34px;
}


.cad-faq-fan{
    position:absolute;

    left:0;
    top:5px;

    width:135px;
    height:135px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 20px 50px rgba(16,45,67,.10);
}


.cad-faq-fan::before{
    content:"";

    position:absolute;
    inset:-9px;

    border:
        1px solid
        rgba(63,112,142,.30);

    border-radius:50%;
}


.cad-faq-fan svg{
    width:100px;
    height:100px;
}


.cad-faq-fan-outline{
    fill:none;

    stroke:
        rgba(63,112,142,.32);

    stroke-width:1.5;
}


.cad-faq-fan-blades{
    fill:var(--ad-navy);

    transform-origin:50px 50px;

    animation:
        cadFaqFanSpin
        14s linear infinite;
}


.cad-faq-fan-center{
    fill:var(--ad-orange);
}


@keyframes cadFaqFanSpin{

    to{
        transform:rotate(360deg);
    }

}


/* AIR FLOW */

.cad-faq-air{
    position:absolute;

    left:112px;
    top:43px;

    width:145px;

    display:flex;
    flex-direction:column;

    gap:15px;
}


.cad-faq-air span{
    display:block;

    width:100%;
    height:12px;

    border-top:
        2px solid
        var(--ad-steel);

    border-radius:50%;

    animation:
        cadFaqAirMove
        3.5s ease-in-out infinite;
}


.cad-faq-air span:nth-child(2){
    width:80%;

    animation-delay:.25s;
}


.cad-faq-air span:nth-child(3){
    width:58%;

    animation-delay:.5s;
}


@keyframes cadFaqAirMove{

    50%{
        transform:translateX(12px);
    }

}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.cad-faq-contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:20px;

    min-height:50px;

    padding:0 25px;

    color:#fff;

    background:var(--ad-navy);

    border-radius:30px;

    font-size:12px;
    font-weight:900;

    transition:.3s ease;
}


.cad-faq-contact-btn span{
    color:var(--ad-orange);

    font-size:20px;

    transition:.3s ease;
}


.cad-faq-contact-btn:hover{
    color:var(--ad-navy);

    background:var(--ad-orange);

    transform:translateY(-4px);
}


.cad-faq-contact-btn:hover span{
    color:var(--ad-navy);

    transform:translateX(4px);
}


/* =========================================================
   FAQ LIST
========================================================= */

.cad-faq-list{
    display:flex;
    flex-direction:column;

    gap:13px;
}


.cad-faq-item{
    position:relative;

    overflow:hidden;

    background:
        rgba(255,255,255,.85);

    border:
        1px solid
        rgba(16,45,67,.10);

    border-radius:17px;

    box-shadow:
        0 12px 35px
        rgba(16,45,67,.045);

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


.cad-faq-item:hover{
    transform:translateX(-5px);

    border-color:
        rgba(242,140,56,.32);

    box-shadow:
        0 18px 45px
        rgba(16,45,67,.09);
}


.cad-faq-toggle{
    position:absolute;

    opacity:0;
    pointer-events:none;
}


/* =========================================================
   QUESTION
========================================================= */

.cad-faq-question{
    position:relative;

    display:grid;

    grid-template-columns:
        58px
        1fr
        46px;

    align-items:center;

    gap:20px;

    min-height:105px;

    margin:0;

    padding:
        18px
        23px;

    cursor:pointer;
}


/* NUMBER */

.cad-faq-number{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:var(--ad-navy);

    background:
        rgba(63,112,142,.09);

    font-size:12px;
    font-weight:900;

    transition:.3s ease;
}


/* COPY */

.cad-faq-question-copy{
    display:block;
}


.cad-faq-question-copy small{
    display:block;

    margin-bottom:7px;

    color:var(--ad-orange);

    font-size:9px;
    font-weight:900;

    letter-spacing:1.7px;
}


.cad-faq-question-copy strong{
    display:block;

    color:var(--ad-navy);

    font-size:17px;
    line-height:1.35;

    font-weight:800;
}


/* =========================================================
   PLUS
========================================================= */

.cad-faq-plus{
    position:relative;

    width:42px;
    height:42px;

    display:block;

    border-radius:50%;

    background:var(--ad-navy);

    transition:.35s ease;
}


.cad-faq-plus::before,
.cad-faq-plus::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    background:#fff;

    border-radius:5px;

    transform:
        translate(-50%,-50%);

    transition:.35s ease;
}


.cad-faq-plus::before{
    width:13px;
    height:2px;
}


.cad-faq-plus::after{
    width:2px;
    height:13px;
}


/* =========================================================
   ANSWER
========================================================= */

.cad-faq-answer{
    display:grid;

    grid-template-rows:0fr;

    transition:
        grid-template-rows .45s ease;
}


.cad-faq-answer > div{
    overflow:hidden;
}


.cad-faq-answer p{
    margin:0;

    padding:
        0 90px
        0 101px;

    color:var(--ad-muted);

    font-size:13px;
    line-height:1.8;

    opacity:0;

    transform:
        translateY(-8px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        padding .4s ease;
}


/* =========================================================
   OPEN STATE
========================================================= */

.cad-faq-toggle:checked
~ .cad-faq-answer{
    grid-template-rows:1fr;
}


.cad-faq-toggle:checked
~ .cad-faq-answer p{
    padding-bottom:28px;

    opacity:1;

    transform:translateY(0);
}


.cad-faq-toggle:checked
+ .cad-faq-question
.cad-faq-number{
    color:#fff;

    background:var(--ad-orange);
}


.cad-faq-toggle:checked
+ .cad-faq-question
.cad-faq-plus{
    background:var(--ad-orange);

    transform:rotate(180deg);
}


.cad-faq-toggle:checked
+ .cad-faq-question
.cad-faq-plus::after{
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}


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

@media(max-width:991.98px){

    .cad-faq-section{
        padding:90px 0;
    }

    .cad-faq-intro{
        position:relative;
        top:auto;

        padding-right:0;

        text-align:center;
    }

    .cad-faq-intro h2,
    .cad-faq-intro > p{
        margin-left:auto;
        margin-right:auto;
    }

    .cad-faq-kicker{
        justify-content:center;
    }

    .cad-faq-fan-wrap{
        margin:
            30px auto 0;
    }

    .cad-faq-contact-btn{
        margin-bottom:20px;
    }

}


@media(max-width:575.98px){

    .cad-faq-section{
        padding:70px 0;
    }

    .cad-faq-intro h2{
        font-size:43px;

        letter-spacing:-2px;
    }

    .cad-faq-question{
        grid-template-columns:
            42px
            1fr
            38px;

        gap:12px;

        min-height:94px;

        padding:
            15px 13px;
    }

    .cad-faq-number{
        width:40px;
        height:40px;

        font-size:10px;
    }

    .cad-faq-plus{
        width:36px;
        height:36px;
    }

    .cad-faq-question-copy small{
        font-size:7px;
        letter-spacing:1.1px;
    }

    .cad-faq-question-copy strong{
        font-size:14px;
    }

    .cad-faq-answer p{
        padding:
            0 20px
            0 67px;

        font-size:12px;
    }

    .cad-faq-toggle:checked
    ~ .cad-faq-answer p{
        padding-bottom:22px;
    }

    .cad-faq-fan-wrap{
        transform:scale(.88);

        transform-origin:center top;

        margin-bottom:-15px;
    }

}


/* =========================================================
   ABOUT US - AIRFLOW STORY
========================================================= */

.cad-about-story{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    padding:125px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(169,199,216,.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f9fa 54%,
            #eef4f6 100%
        );
}


/* TEXTURE */

.cad-about-story::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-5;

    opacity:.30;

    background-image:
        radial-gradient(
            rgba(16,45,67,.055) 1px,
            transparent 1px
        ),
        repeating-linear-gradient(
            8deg,
            rgba(16,45,67,.018) 0,
            rgba(16,45,67,.018) 1px,
            transparent 1px,
            transparent 9px
        );

    background-size:
        24px 24px,
        auto;
}


/* LEFT DARK EDGE */

.cad-about-story::after{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:7px;
    height:230px;

    transform:translateY(-50%);

    border-radius:
        0 20px 20px 0;

    background:var(--ad-navy);
}


/* =========================================================
   BACKGROUND DECOR
========================================================= */

.cad-about-circle{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


.cad-about-circle-one{
    width:270px;
    height:270px;

    left:-120px;
    bottom:-130px;

    border:
        35px solid
        rgba(63,112,142,.08);
}


.cad-about-circle-two{
    width:170px;
    height:170px;

    right:5%;
    top:-85px;

    border:
        24px solid
        rgba(242,140,56,.09);
}


.cad-about-dots{
    position:absolute;

    right:3%;
    bottom:10%;

    width:115px;
    height:115px;

    opacity:.45;

    background-image:
        radial-gradient(
            var(--ad-steel) 2px,
            transparent 2px
        );

    background-size:
        15px 15px;
}


/* =========================================================
   VISUAL
========================================================= */

.cad-about-visual{
    position:relative;

    width:100%;
    max-width:590px;

    height:660px;
}


/* MAIN PHOTO */

.cad-about-photo{
    position:absolute;

    left:10%;
    top:6%;

    width:72%;
    height:82%;

    overflow:hidden;

    border-radius:
        180px 180px
        55px 180px;

    border:
        2px solid
        var(--ad-navy);

    background:#fff;

    box-shadow:
        0 30px 70px
        rgba(16,45,67,.14);
}


.cad-about-photo::before{
    content:"";

    position:absolute;

    inset:11px;

    z-index:2;

    border:
        7px solid #fff;

    border-radius:
        168px 168px
        45px 168px;

    pointer-events:none;
}


.cad-about-photo img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s ease;
}


.cad-about-photo:hover img{
    transform:scale(1.045);
}


/* =========================================================
   FAN
========================================================= */

.cad-about-fan{
    position:absolute;

    z-index:7;

    right:3%;
    top:18%;

    width:115px;
    height:115px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 18px 45px
        rgba(16,45,67,.14);
}


.cad-about-fan::before{
    content:"";

    position:absolute;

    inset:-8px;

    border:
        2px solid
        var(--ad-steel);

    border-radius:50%;
}


.cad-about-fan svg{
    width:80px;
    height:80px;
}


.cad-about-fan-outline{
    fill:none;

    stroke:
        rgba(63,112,142,.28);

    stroke-width:1.5;
}


.cad-about-fan-blades{
    fill:var(--ad-navy);

    transform-origin:50px 50px;

    animation:
        cadAboutFanSpin
        12s linear infinite;
}


.cad-about-fan-center{
    fill:var(--ad-orange);
}


@keyframes cadAboutFanSpin{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   AIRFLOW
========================================================= */

.cad-about-airflow{
    position:absolute;

    z-index:6;

    left:0;
    bottom:12%;

    width:190px;
    height:110px;

    color:var(--ad-orange);

    animation:
        cadAboutAirMove
        5s ease-in-out infinite;
}


.cad-about-airflow svg{
    width:100%;
    height:100%;

    fill:none;

    stroke:currentColor;

    stroke-width:3;
}


@keyframes cadAboutAirMove{

    50%{
        transform:translateX(15px);
    }

}


/* =========================================================
   FLOATING BADGE
========================================================= */

.cad-about-badge{
    position:absolute;

    z-index:8;

    right:0;
    bottom:7%;

    width:145px;
    height:145px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    border-radius:50%;

    background:var(--ad-navy);

    box-shadow:
        0 20px 45px
        rgba(16,45,67,.20);
}


.cad-about-badge span{
    color:var(--ad-orange);

    font-size:9px;
    font-weight:900;

    letter-spacing:2px;
}


.cad-about-badge strong{
    display:block;

    margin-top:5px;

    color:#fff;

    font-size:25px;
    font-weight:900;
}


.cad-about-badge small{
    display:block;

    margin-top:4px;

    color:var(--ad-soft);

    font-size:7px;
    font-weight:900;

    letter-spacing:1.4px;
}


/* BIG NUMBER */

.cad-about-number{
    position:absolute;

    left:0;
    top:0;

    color:transparent;

    -webkit-text-stroke:
        1px rgba(16,45,67,.16);

    font-size:120px;
    font-weight:900;

    letter-spacing:-8px;
}


/* =========================================================
   COPY
========================================================= */

.cad-about-copy{
    position:relative;

    padding-left:10px;
}


.cad-about-kicker{
    display:inline-flex;
    align-items:center;

    gap:10px;

    margin-bottom:20px;

    color:var(--ad-orange);

    font-size:10px;
    font-weight:900;

    letter-spacing:2px;
}


.cad-about-kicker::before{
    content:"";

    width:35px;
    height:2px;

    background:var(--ad-orange);
}


.cad-about-copy h2{
    max-width:610px;

    margin:0;

    color:var(--ad-navy);

    font-size:
        clamp(
            48px,
            4.7vw,
            75px
        );

    line-height:.96;

    letter-spacing:-4px;

    font-weight:900;
}


.cad-about-copy h2 span{
    display:block;

    color:var(--ad-steel);
}


.cad-about-copy h2 em{
    color:var(--ad-orange);

    font-style:normal;
}


/* LEAD */

.cad-about-lead{
    max-width:590px;

    margin:
        26px 0 0;

    color:var(--ad-dark);

    font-size:15px;
    line-height:1.75;

    font-weight:600;
}


.cad-about-text{
    max-width:590px;

    margin:
        15px 0 0;

    color:var(--ad-muted);

    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   STATS
========================================================= */

.cad-about-stats{
    margin-top:32px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid
        rgba(16,45,67,.12);

    border-bottom:
        1px solid
        rgba(16,45,67,.12);
}


.cad-about-stat{
    position:relative;

    min-height:100px;

    padding:
        20px 18px;

    display:flex;
    align-items:center;

    gap:12px;
}


.cad-about-stat:not(:last-child)::after{
    content:"";

    position:absolute;

    right:0;
    top:20px;
    bottom:20px;

    width:1px;

    background:
        rgba(16,45,67,.10);
}


.cad-about-stat strong{
    color:var(--orange);

    color:var(--ad-orange);

    font-size:28px;
    font-weight:900;
}


.cad-about-stat span{
    color:var(--ad-navy);

    font-size:11px;
    line-height:1.4;

    font-weight:800;
}


/* =========================================================
   FEATURES
========================================================= */

.cad-about-features{
    margin-top:30px;

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:14px;
}


.cad-about-feature{
    display:flex;
    align-items:center;

    gap:12px;

    padding:
        15px 16px;

    border-radius:12px;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid
        rgba(16,45,67,.09);

    transition:.3s ease;
}


.cad-about-feature:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(242,140,56,.35);

    box-shadow:
        0 15px 35px
        rgba(16,45,67,.07);
}


.cad-about-feature-icon{
    width:35px;
    height:35px;

    flex:0 0 35px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;

    background:var(--ad-orange);

    font-size:14px;
    font-weight:900;
}


.cad-about-feature strong{
    display:block;

    color:var(--ad-navy);

    font-size:12px;
    font-weight:900;
}


.cad-about-feature small{
    display:block;

    margin-top:3px;

    color:var(--ad-muted);

    font-size:9px;
    line-height:1.35;
}


/* =========================================================
   BUTTON
========================================================= */

.cad-about-btn{
    min-height:52px;

    margin-top:30px;

    padding:
        0 26px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    border-radius:30px;

    color:#fff;

    background:var(--ad-navy);

    font-size:11px;
    font-weight:900;

    transition:.3s ease;
}


.cad-about-btn span{
    color:var(--ad-orange);

    font-size:20px;

    transition:.3s ease;
}


.cad-about-btn:hover{
    color:var(--ad-navy);

    background:var(--ad-orange);

    transform:translateY(-4px);
}


.cad-about-btn:hover span{
    color:var(--ad-navy);

    transform:translateX(5px);
}


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

@media(max-width:991.98px){

    .cad-about-story{
        padding:90px 0;
    }

    .cad-about-visual{
        max-width:570px;

        height:600px;

        margin:0 auto;
    }

    .cad-about-copy{
        padding-left:0;

        text-align:center;
    }

    .cad-about-copy h2,
    .cad-about-lead,
    .cad-about-text{
        margin-left:auto;
        margin-right:auto;
    }

    .cad-about-kicker{
        justify-content:center;
    }

}


@media(max-width:767.98px){

    .cad-about-visual{
        height:540px;
    }

    .cad-about-photo{
        left:8%;

        width:76%;
        height:80%;

        border-radius:
            130px 130px
            45px 130px;
    }

    .cad-about-photo::before{
        border-radius:
            120px 120px
            37px 120px;
    }

    .cad-about-copy h2{
        font-size:50px;

        letter-spacing:-3px;
    }

    .cad-about-stats{
        grid-template-columns:1fr;
    }

    .cad-about-stat{
        justify-content:center;

        min-height:75px;
    }

    .cad-about-stat:not(:last-child)::after{
        left:18%;
        right:18%;
        top:auto;
        bottom:0;

        width:auto;
        height:1px;
    }

    .cad-about-features{
        grid-template-columns:1fr;
    }

}


@media(max-width:575.98px){

    .cad-about-story{
        padding:70px 0;
    }

    .cad-about-visual{
        height:465px;
    }

    .cad-about-photo{
        left:7%;

        width:78%;
        height:77%;

        border-radius:
            100px 100px
            35px 100px;
    }

    .cad-about-photo::before{
        inset:7px;

        border-width:5px;

        border-radius:
            94px 94px
            30px 94px;
    }

    .cad-about-fan{
        width:82px;
        height:82px;

        right:0;
    }

    .cad-about-fan svg{
        width:58px;
        height:58px;
    }

    .cad-about-airflow{
        width:135px;
        height:80px;

        bottom:9%;
    }

    .cad-about-badge{
        width:105px;
        height:105px;
    }

    .cad-about-badge strong{
        font-size:19px;
    }

    .cad-about-number{
        font-size:85px;
    }

    .cad-about-copy h2{
        font-size:42px;

        letter-spacing:-2px;
    }

    .cad-about-lead{
        font-size:13px;
    }

    .cad-about-text{
        font-size:12px;
    }
    .ad-cta{display:none}

}