@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')
}
/* =========================================================
   GARAGE DOOR MISSION BEND TX
   FULL HERO + NAV CSS
========================================================= */
:root {
    --mbx-orange: #e95c00;
    --mbx-orange-dark: #c94e00;
    --mbx-green: #073d3b;
    --mbx-green-dark: #042e2d;
    --mbx-gray: #777176;
    --mbx-gray-dark: #656166;
    --mbx-light: #f5f6f6;
    --mbx-white: #ffffff;
    --mbx-text: #737b7b;
    --mbx-line: #a9adad;
}
/* =========================================================
   RESET
========================================================= */
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--mbx-light);
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}
a {
    text-decoration: none;
}
img {
    display: block;
    max-width: 100%;
}
.mbx-header svg,
.mbx-hero svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* =========================================================
   HEADER
========================================================= */
.mbx-header {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 86px;
}
/* =========================================================
   HEADER LEFT
========================================================= */
.mbx-header-left {
    position: relative;
    height: 86px;
    background: var(--mbx-gray);
}
/* =========================================================
   LOGO
========================================================= */
.mbx-logo {
    position: absolute;
    z-index: 10;
    top: 17px;
    left: 7%;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--mbx-white);
    animation:
        mbxLogoIn .8s ease both;
}
.mbx-logo:hover {
    color: var(--mbx-white);
}
.mbx-logo-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mbx-white);
    background: var(--mbx-orange);
    border-radius:
        50% 50% 50% 15%;
    transition:
        transform .35s ease,
        border-radius .35s ease,
        background .35s ease;
}
.mbx-logo-icon svg {
    width: 29px;
    height: 29px;
}
.mbx-logo:hover .mbx-logo-icon {
    background: var(--mbx-green);
    border-radius: 50%;
    transform:
        rotate(-8deg) scale(1.06);
}
.mbx-logo-text {
    display: flex;
    flex-direction: column;
}
.mbx-logo-text strong {
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1.6px;
}
.mbx-logo-text small {
    margin-top: 6px;
    color: rgba(255, 255, 255, .65);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
/* =========================================================
   HEADER RIGHT
========================================================= */
.mbx-header-right {
    position: relative;
    height: 86px;
    background: rgba(245, 246, 246, .97);
}
/* =========================================================
   NAV
========================================================= */
.mbx-nav {
    height: 86px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding:
        0 70px 0 4%;
}
.mbx-nav-item {
    position: relative;
    height: 86px;
    display: flex;
    align-items: center;
    animation:
        mbxNavIn .65s ease both;
}
.mbx-nav-item:nth-of-type(1) {
    animation-delay: .08s;
}
.mbx-nav-item:nth-of-type(2) {
    animation-delay: .14s;
}
.mbx-nav-item:nth-of-type(3) {
    animation-delay: .20s;
}
.mbx-nav-item:nth-of-type(4) {
    animation-delay: .26s;
}
.mbx-nav-item:nth-of-type(5) {
    animation-delay: .32s;
}
/* =========================================================
   NAV LINKS
========================================================= */
.mbx-nav-link {
    position: relative;
    height: 86px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding:
        0 10px;
    color: #686868;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
    transition:
        color .3s ease;
}
.mbx-nav-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 18px;
    height: 2px;
    background: var(--mbx-orange);
    transform:
        scaleX(0);
    transform-origin: left;
    transition:
        transform .3s ease;
}
.mbx-nav-item:hover .mbx-nav-link {
    color: var(--mbx-orange);
}
.mbx-nav-item:hover .mbx-nav-link::after {
    transform:
        scaleX(1);
}
/* ACTIVE */
.mbx-nav-link.active {
    min-width: 105px;
    justify-content: center;
    padding:
        0 16px;
    color: var(--mbx-white);
    background: var(--mbx-orange);
}
.mbx-nav-link.active::after {
    display: none;
}
.mbx-nav-link.active:hover {
    color: var(--mbx-white);
}
.mbx-nav-home {
    width: 15px;
    height: 15px;
}
/* =========================================================
   NAV DOT
========================================================= */
.mbx-nav-dot {
    width: 4px;
    height: 4px;
    flex:
        0 0 4px;
    display: block;
    background: var(--mbx-orange);
    border-radius: 50%;
}
/* =========================================================
   CHEVRON
========================================================= */
.mbx-chevron {
    width: 11px;
    height: 11px;
    transition:
        transform .3s ease;
}
.mbx-has-dropdown:hover .mbx-chevron {
    transform:
        rotate(180deg);
}
/* =========================================================
   DROPDOWN
========================================================= */
.mbx-dropdown {
    position: absolute;
    z-index: 800;
    top: 74px;
    left: 0;
    width: 300px;
    padding: 9px;
    background:
        rgba(255, 255, 255, .99);
    border-top:
        3px solid var(--mbx-orange);
    box-shadow:
        0 24px 55px rgba(7, 61, 59, .17);
    opacity: 0;
    visibility: hidden;
    transform:
        translateY(17px);
    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}
.mbx-has-dropdown:hover .mbx-dropdown,
.mbx-has-dropdown:focus-within .mbx-dropdown {
    opacity: 1;
    visibility: visible;
    transform:
        translateY(0);
}
/* =========================================================
   DROPDOWN ITEMS
========================================================= */
.mbx-dropdown>a {
    position: relative;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding:
        8px 10px;
    overflow: hidden;
    color: var(--mbx-green);
    border-bottom:
        1px solid rgba(7, 61, 59, .08);
    transition:
        color .3s ease,
        background .3s ease,
        padding .3s ease;
}
.mbx-dropdown>a:last-child {
    border-bottom: 0;
}
.mbx-dropdown>a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background:
        var(--mbx-orange);
    transform:
        scaleY(0);
    transform-origin:
        bottom;
    transition:
        transform .3s ease;
}
.mbx-dropdown>a:hover {
    padding-left: 15px;
    color: var(--mbx-white);
    background: var(--mbx-green);
}
.mbx-dropdown>a:hover::before {
    transform:
        scaleY(1);
}
/* =========================================================
   DROPDOWN ICON
========================================================= */
.mbx-drop-icon {
    width: 44px;
    height: 44px;
    flex:
        0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mbx-green);
    background:
        rgba(7, 61, 59, .07);
    border-radius: 50%;
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}
.mbx-drop-icon svg {
    width: 24px;
    height: 24px;
}
.mbx-dropdown>a:hover .mbx-drop-icon {
    color: var(--mbx-white);
    background:
        var(--mbx-orange);
    transform:
        rotate(-7deg) scale(1.07);
}
.mbx-drop-copy {
    display: flex;
    flex-direction: column;
}
.mbx-drop-copy strong {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
}
.mbx-drop-copy small {
    margin-top: 4px;
    color: #999;
    font-size: 8px;
    transition:
        color .3s ease;
}
.mbx-dropdown>a:hover .mbx-drop-copy small {
    color:
        rgba(255, 255, 255, .65);
}
/* =========================================================
   MENU BUTTON
========================================================= */
.mbx-menu-check {
    display: none;
}
.mbx-menu-button {
    position: absolute;
    z-index: 900;
    top: 29px;
    right: 4%;
    width: 28px;
    height: 24px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.mbx-menu-button span {
    width: 26px;
    height: 2px;
    display: block;
    background:
        var(--mbx-orange);
    transition:
        width .3s ease,
        transform .3s ease,
        opacity .3s ease;
}
.mbx-menu-button span:nth-child(2) {
    width: 18px;
    margin-left: auto;
}
.mbx-menu-button:hover span:nth-child(2) {
    width: 26px;
}
/* =========================================================
   HERO
========================================================= */
.mbx-hero {
    position: relative;
    width: 100%;
    min-height: 900px;
    overflow: hidden;
    background:
        var(--mbx-light);
}
.mbx-hero-row {
    min-height: 900px;
}
/* =========================================================
   LEFT SIDE
========================================================= */
.mbx-hero-left {
    position: relative;
    z-index: 2;
    min-height: 900px;
    background:
        var(--mbx-gray);
}
.mbx-hero-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 35%,
            rgba(255, 255, 255, .07),
            transparent 25%);
    pointer-events: none;
}
.mbx-left-line {
    position: absolute;
    top: 125px;
    left: 6%;
    width: 1px;
    height: 650px;
    background:
        rgba(255, 255, 255, .11);
}
/* =========================================================
   MAIN IMAGE
========================================================= */
.mbx-photo {
    position: absolute;
    z-index: 5;
    top: 70px;
    left: 7%;
    width: 91%;
    height: 760px;
    overflow: hidden;
    background: #ccc;
    box-shadow:
        0 30px 65px rgba(0, 0, 0, .10);
    animation:
        mbxPhotoIn 1s cubic-bezier(.2, .7, .2, 1) both;
}
.mbx-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(4, 46, 45, .25),
            transparent 45%);
    pointer-events: none;
}
.mbx-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        transform 1.2s ease;
}
.mbx-photo:hover img {
    transform:
        scale(1.045);
}
/* =========================================================
   FLOATING GARAGE ICON
========================================================= */
.mbx-floating-icon {
    position: absolute;
    z-index: 20;
    top: 415px;
    left: 3.5%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mbx-white);
    background:
        var(--mbx-orange);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, .15);
    animation:
        mbxIconFloat 4s ease-in-out infinite;
}
.mbx-floating-icon svg {
    width: 34px;
    height: 34px;
}
.mbx-floating-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border:
        1px solid rgba(233, 92, 0, .34);
    animation:
        mbxPulse 2.4s ease-out infinite;
}
/* =========================================================
   SAME DAY
========================================================= */
.mbx-same-day {
    position: absolute;
    z-index: 30;
    right: -10px;
    bottom: 98px;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding:
        12px 15px;
    color:
        var(--mbx-white);
    background:
        rgba(7, 61, 59, .95);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, .16);
    animation:
        mbxSameDay .9s .8s ease both;
}
.mbx-same-day-icon {
    width: 40px;
    height: 40px;
    flex:
        0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mbx-white);
    background:
        var(--mbx-orange);
    border-radius: 50%;
}
.mbx-same-day-icon svg {
    width: 21px;
    height: 21px;
}
.mbx-same-day>span:last-child {
    display: flex;
    flex-direction: column;
}
.mbx-same-day small {
    color:
        rgba(255, 255, 255, .58);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.mbx-same-day strong {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.1px;
}
/* =========================================================
   PHOTO BOTTOM BAR
========================================================= */
.mbx-photo-bar {
    position: absolute;
    z-index: 25;
    left: 0;
    bottom: 38px;
    width: 104%;
    height: 36px;
    display: flex;
    align-items: center;
    background:
        var(--mbx-green);
    animation:
        mbxBarIn .8s .55s ease both;
}
.mbx-slider-ui {
    margin-left: 12%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mbx-slider-arrow {
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mbx-green);
    background:
        var(--mbx-white);
    border-radius: 50%;
}
.mbx-slider-arrow svg {
    width: 11px;
    height: 11px;
}
.mbx-slider-mini {
    width: 4px;
    height: 4px;
    display: block;
    background:
        rgba(255, 255, 255, .5);
    border-radius: 50%;
}
.mbx-slider-mini.active {
    background:
        var(--mbx-orange);
}
/* =========================================================
   RIGHT SIDE
========================================================= */
.mbx-hero-right {
    position: relative;
    z-index: 1;
    min-height: 900px;
    overflow: hidden;
    isolation: isolate;
    background:
        var(--mbx-light);
}
/* =========================================================
   RIGHT BACKGROUND IMAGE
========================================================= */
.mbx-right-bg {
    position: absolute;
    z-index: -3;
    inset: 0;
    background-image:
        linear-gradient(90deg,
            rgba(245, 246, 246, .99) 0%,
            rgba(245, 246, 246, .95) 40%,
            rgba(245, 246, 246, .78) 72%,
            rgba(245, 246, 246, .65) 100%),
        url("../garage-door/garage-door-bg.webp");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    transform:
        scale(1.04);
    animation:
        mbxBgMove 15s ease-in-out infinite alternate;
}
/* =========================================================
   SOFT OVERLAY
========================================================= */
.mbx-hero-right::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(circle at 78% 35%,
            rgba(255, 255, 255, .15),
            transparent 30%);
    pointer-events: none;
}
/* =========================================================
   SMALL ORANGE LINE
========================================================= */
.mbx-hero-right::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 135px;
    right: 10%;
    width: 75px;
    height: 3px;
    background:
        var(--mbx-orange);
    opacity: .65;
    animation:
        mbxLineGrow 1.2s .9s ease both;
}
/* =========================================================
   RIGHT GARAGE LINE ART
========================================================= */
.mbx-right-garage-art {
    position: absolute;
    z-index: 0;
    right: 8%;
    bottom: 95px;
    width: 265px;
    color:
        var(--mbx-green);
    opacity: .055;
    pointer-events: none;
    animation:
        mbxArtFloat 7s ease-in-out infinite;
}
.mbx-right-garage-art svg {
    width: 100%;
}
/* =========================================================
   DECORATIVE CIRCLES
========================================================= */
.mbx-deco-circle {
    position: absolute;
    z-index: 0;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}
.mbx-deco-circle-one {
    top: 165px;
    right: 13%;
    width: 135px;
    height: 135px;
    border:
        1px solid rgba(233, 92, 0, .16);
    animation:
        mbxCircleFloat 6s ease-in-out infinite;
}
.mbx-deco-circle-two {
    top: 200px;
    right: 16%;
    width: 62px;
    height: 62px;
    background:
        rgba(7, 61, 59, .035);
    animation:
        mbxCircleFloatTwo 5s ease-in-out infinite;
}
/* =========================================================
   DOT PATTERN
========================================================= */
.mbx-dot-pattern {
    position: absolute;
    z-index: 0;
    top: 185px;
    right: 5%;
    width: 60px;
    display: grid;
    grid-template-columns:
        repeat(5, 4px);
    gap: 8px;
    opacity: .35;
    pointer-events: none;
    animation:
        mbxDotsFloat 6s ease-in-out infinite;
}
.mbx-dot-pattern span {
    width: 4px;
    height: 4px;
    display: block;
    background:
        var(--mbx-orange);
    border-radius: 50%;
}
/* =========================================================
   ORANGE BLOCK
   NOW BEHIND THE CONTENT
========================================================= */
.mbx-orange-block {
    position: absolute;
    /*
        البلوك دلوقتي ورا الكلام
        ومش فوق الـ content
    */
    z-index: 1;
    top: 345px;
    /*
        جزء منه يدخل ناحية الصورة
        وجزء يظهر في اليمين
    */
    left: -50px;
    width: 88px;
    height: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        rgba(255, 255, 255, .22);
    background:
        var(--mbx-orange);
    box-shadow:
        12px 18px 35px rgba(233, 92, 0, .10);
    pointer-events: none;
    animation:
        mbxOrangeIn .85s .25s ease both;
}
/* SECOND ORANGE LAYER BEHIND */
.mbx-orange-block::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 22px;
    left: -20px;
    width: 100%;
    height: 100%;
    background:
        rgba(233, 92, 0, .16);
}
/* small decorative line */
.mbx-orange-block::after {
    content: "";
    position: absolute;
    top: 20px;
    right: -25px;
    width: 42px;
    height: 2px;
    background:
        rgba(233, 92, 0, .45);
}
/* ICON INSIDE ORANGE BLOCK */
.mbx-orange-block svg {
    width: 47px;
    height: 47px;
    opacity: .38;
    animation:
        mbxGarageIconMove 4s ease-in-out infinite;
}
/* =========================================================
   RIGHT CONTENT
   IMPORTANT: ABOVE ORANGE BLOCK
========================================================= */
.mbx-content {
    position: absolute;
    z-index: 10;
    top: 285px;
    left: 8%;
    width: 77%;
    max-width: 760px;
}
/* =========================================================
   KICKER
========================================================= */
.mbx-content-kicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color:
        var(--mbx-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 4.5px;
    animation:
        mbxContentIn .75s .25s ease both;
}
.mbx-content-kicker::before {
    content: "";
    width: 31px;
    height: 3px;
    display: block;
    background:
        var(--mbx-orange);
}
/* =========================================================
   H1
========================================================= */
.mbx-content h1 {
    position: relative;
    margin: 0;
    color:
        var(--mbx-green);
    font-size:
        clamp(62px, 5.5vw, 88px);
    font-weight: 900;
    line-height: .94;
    letter-spacing: 8px;
    text-shadow:
        0 5px 25px rgba(255, 255, 255, .55);
    animation:
        mbxContentIn .8s .35s ease both;
}
/* =========================================================
   LOCATION TITLE
========================================================= */
.mbx-location-title {
    margin-top: 22px;
    color:
        var(--mbx-orange);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 12px;
    white-space: nowrap;
    animation:
        mbxContentIn .8s .45s ease both;
}
/* =========================================================
   PARAGRAPH
========================================================= */
.mbx-content p {
    width: 100%;
    max-width: 590px;
    margin:
        42px 0 0;
    color:
        var(--mbx-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    animation:
        mbxContentIn .8s .55s ease both;
}
.mbx-content p strong {
    color:
        var(--mbx-green);
    font-weight: 900;
}
/* =========================================================
   ACTIONS
========================================================= */
.mbx-hero-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    animation:
        mbxContentIn .8s .65s ease both;
}
/* =========================================================
   EXPLORE BUTTON
========================================================= */
.mbx-explore-btn {
   min-width: 155px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  color: var(--mbx-white);
  background: var(--mbx-green);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 3px;
  box-shadow: 0 12px 25px rgba(7, 61, 59, .12);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mbx-explore-btn svg {
    width: 17px;
    height: 17px;
    transition:
        transform .3s ease;
}
.mbx-explore-btn:hover {
    color:
        var(--mbx-white);
    background:
        var(--mbx-orange);
    transform:
        translateX(5px);
    box-shadow:
        0 15px 30px rgba(233, 92, 0, .18);
}
.mbx-explore-btn:hover svg {
    transform:
        translateX(5px);
}
/* =========================================================
   FREE ESTIMATE
========================================================= */
.mbx-estimate-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color:
        var(--mbx-green);
}
.mbx-estimate-link:hover {
    color:
        var(--mbx-green);
}
.mbx-estimate-icon {
    width: 46px;
    height: 46px;
    flex:
        0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mbx-white);
    background:
        var(--mbx-orange);
    border-radius: 50%;
    transition:
        transform .3s ease,
        background .3s ease;
}
.mbx-estimate-icon svg {
    width: 24px;
    height: 24px;
}
.mbx-estimate-link:hover .mbx-estimate-icon {
    background:
        var(--mbx-green);
    transform:
        rotate(-8deg) scale(1.05);
}
.mbx-estimate-link>span:last-child {
    display: flex;
    flex-direction: column;
}
.mbx-estimate-link small {
    color: #999;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.mbx-estimate-link strong {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
/* =========================================================
   SIDE PAGINATION
========================================================= */
.mbx-side-pagination {
    position: absolute;
    z-index: 20;
    top: 115px;
    right: 3.5%;
    width: 30px;
    height: 610px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}
.mbx-side-line {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background:
        #a7a7a7;
    transform:
        translateX(-50%);
}
.mbx-side-dot {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    background:
        rgba(245, 246, 246, .9);
    border:
        1px solid #999;
    border-radius: 50%;
    font-size: 0;
}
.mbx-side-dot.active {
    width: 20px;
    height: 20px;
    color:
        var(--mbx-white);
    background:
        var(--mbx-orange);
    border-color:
        var(--mbx-orange);
    font-size: 8px;
    font-weight: 900;
    box-shadow:
        0 0 0 6px rgba(233, 92, 0, .10);
}
/* =========================================================
   BOTTOM LINKS
========================================================= */
.mbx-bottom-links {
    position: absolute;
    z-index: 25;
    left: 8%;
    bottom: 48px;
    display: flex;
    align-items: center;
    gap: 27px;
}
.mbx-bottom-links a {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    transition:
        color .3s ease,
        transform .3s ease;
}
.mbx-bottom-links a:hover {
    color:
        var(--mbx-orange);
    transform:
        translateY(-4px);
}
.mbx-bottom-links svg {
    width: 19px;
    height: 19px;
}
/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes mbxLogoIn {
    from {
        opacity: 0;
        transform:
            translateX(-25px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}
@keyframes mbxNavIn {
    from {
        opacity: 0;
        transform:
            translateY(-14px);
    }
    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}
@keyframes mbxPhotoIn {
    from {
        opacity: 0;
        transform:
            translateX(-30px) scale(1.03);
    }
    to {
        opacity: 1;
        transform:
            translateX(0) scale(1);
    }
}
@keyframes mbxOrangeIn {
    from {
        opacity: 0;
        transform:
            translateY(60px);
    }
    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}
@keyframes mbxContentIn {
    from {
        opacity: 0;
        transform:
            translateY(25px);
    }
    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}
@keyframes mbxBarIn {
    from {
        opacity: 0;
        transform:
            translateX(-80px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}
@keyframes mbxIconFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-10px);
    }
}
@keyframes mbxPulse {
    0% {
        opacity: .6;
        transform:
            scale(.85);
    }
    70%,
    100% {
        opacity: 0;
        transform:
            scale(1.35);
    }
}
@keyframes mbxSameDay {
    from {
        opacity: 0;
        transform:
            translateX(35px);
    }
    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}
@keyframes mbxBgMove {
    from {
        transform:
            scale(1.04) translateX(0);
    }
    to {
        transform:
            scale(1.09) translateX(-12px);
    }
}
@keyframes mbxLineGrow {
    from {
        transform:
            scaleX(0);
        transform-origin:
            right;
    }
    to {
        transform:
            scaleX(1);
        transform-origin:
            right;
    }
}
@keyframes mbxArtFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-13px);
    }
}
@keyframes mbxCircleFloat {
    0%,
    100% {
        transform:
            translate(0, 0);
    }
    50% {
        transform:
            translate(-12px, 10px);
    }
}
@keyframes mbxCircleFloatTwo {
    0%,
    100% {
        transform:
            translate(0, 0);
    }
    50% {
        transform:
            translate(10px, -12px);
    }
}
@keyframes mbxDotsFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(12px);
    }
}
@keyframes mbxGarageIconMove {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-8px);
    }
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
    .mbx-photo {
        left: 6%;
        width: 92%;
    }
    .mbx-content {
        left: 9%;
        max-width: 790px;
    }
    .mbx-content h1 {
        font-size: 84px;
    }
    .mbx-content p {
        max-width: 620px;
        font-size: 16px;
    }
}
/* =========================================================
   1200 - 1399
========================================================= */
@media (max-width: 1399.98px) {
    .mbx-content h1 {
        font-size: 68px;
        letter-spacing: 7px;
    }
    .mbx-location-title {
        font-size: 12px;
        letter-spacing: 9px;
    }
    .mbx-content p {
        max-width: 530px;
        font-size: 14px;
    }
}
/* =========================================================
   992 - 1199
========================================================= */
@media (max-width: 1199.98px) {
    .mbx-nav {
        gap: 4px;
        padding:
            0 60px 0 2%;
    }
    .mbx-nav-link {
        padding:
            0 6px;
        font-size: 8px;
        letter-spacing: .8px;
    }
    .mbx-nav-link.active {
        min-width: 78px;
    }
    .mbx-nav-dot {
        width: 3px;
        height: 3px;
        flex-basis: 3px;
    }
    .mbx-dropdown {
        width: 270px;
    }
    /* HERO */
    .mbx-hero,
    .mbx-hero-row,
    .mbx-hero-left,
    .mbx-hero-right {
        min-height: 850px;
    }
    .mbx-photo {
        top: 72px;
        left: 6%;
        width: 92%;
        height: 700px;
    }
    .mbx-floating-icon {
        top: 390px;
        width: 62px;
        height: 62px;
    }
    .mbx-content {
        top: 275px;
        left: 9%;
        width: 76%;
    }
    .mbx-content-kicker {
        font-size: 8px;
        letter-spacing: 3px;
    }
    .mbx-content h1 {
        font-size: 58px;
        letter-spacing: 5px;
    }
    .mbx-location-title {
        font-size: 11px;
        letter-spacing: 7px;
    }
    .mbx-content p {
        margin-top: 34px;
        font-size: 13px;
    }
    /* orange block still behind */
    .mbx-orange-block {
        left: -38px;
        width: 72px;
        height: 195px;
    }
}
/* =========================================================
   TABLET
   TEXT FIRST
   IMAGE SECOND
========================================================= */
@media (max-width: 991.98px) {
    /* =====================================================
       HEADER
    ===================================================== */
    .mbx-header {
        position: relative;
        height: 72px;
        background:
            var(--mbx-green);
    }
    .mbx-header-left {
        height: 72px;
        background:
            var(--mbx-green);
    }
    .mbx-logo {
        top: 11px;
        left: 22px;
    }
    .mbx-logo-icon {
        width: 48px;
        height: 48px;
    }
    .mbx-header-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 72px;
        background: transparent;
    }
    .mbx-menu-button {
        top: 24px;
        right: 23px;
    }
    /* =====================================================
       MOBILE NAV
    ===================================================== */
    .mbx-nav {
        position: absolute;
        z-index: 850;
        top: 72px;
        left: 0;
        width: 100%;
        height: auto;
        display: block;
        padding:
            12px 20px 22px;
        background:
            var(--mbx-white);
        box-shadow:
            0 25px 50px rgba(7, 61, 59, .18);
        opacity: 0;
        visibility: hidden;
        transform:
            translateY(-14px);
        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease;
    }
    .mbx-menu-check:checked~.mbx-nav {
        opacity: 1;
        visibility: visible;
        transform:
            translateY(0);
    }
    /* X */
    .mbx-menu-check:checked+.mbx-menu-button span:nth-child(1) {
        transform:
            translateY(7px) rotate(45deg);
    }
    .mbx-menu-check:checked+.mbx-menu-button span:nth-child(2) {
        opacity: 0;
    }
    .mbx-menu-check:checked+.mbx-menu-button span:nth-child(3) {
        transform:
            translateY(-7px) rotate(-45deg);
    }
    .mbx-nav-item {
        width: 100%;
        height: auto;
        display: block;
        animation: none;
    }
    .mbx-nav-link {
        width: 100%;
        height: 50px;
        padding:
            0 10px;
        font-size: 11px;
        border-bottom:
            1px solid rgba(7, 61, 59, .08);
    }
    .mbx-nav-link::after {
        display: none;
    }
    .mbx-nav-link.active {
        min-width: 0;
        justify-content:
            flex-start;
        padding:
            0 13px;
    }
    .mbx-nav-dot {
        display: none;
    }
    /* =====================================================
       MOBILE DROPDOWN
    ===================================================== */
    .mbx-dropdown {
        position: static;
        width: 100%;
        display: none;
        padding:
            5px 0 6px 15px;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .mbx-has-dropdown:hover .mbx-dropdown,
    .mbx-has-dropdown:focus-within .mbx-dropdown {
        display: block;
    }
    /* =====================================================
       HERO RESET
    ===================================================== */
    .mbx-hero,
    .mbx-hero-row {
        min-height: 0;
    }
    /* =====================================================
       RIGHT CONTENT FIRST
    ===================================================== */
    .mbx-hero-right {
        min-height: 700px;
    }
    .mbx-right-bg {
        background-image:
            linear-gradient(90deg,
                rgba(245, 246, 246, .97),
                rgba(245, 246, 246, .80)),
            url("../images/garage-door-right-bg.webp");
        background-position:
            center;
    }
    .mbx-content {
        position: relative;
        z-index: 10;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 760px;
        padding:
            105px 12% 135px;
    }
    .mbx-content-kicker {
        font-size: 9px;
    }
    .mbx-content h1 {
        font-size:
            clamp(55px, 9vw, 76px);
        letter-spacing: 6px;
    }
    .mbx-location-title {
        font-size: 13px;
        letter-spacing: 8px;
    }
    .mbx-content p {
        max-width: 590px;
        margin-top: 35px;
        font-size: 15px;
    }
    /* =====================================================
       ORANGE BLOCK BEHIND CONTENT
    ===================================================== */
    .mbx-orange-block {
        z-index: 1;
        top: 180px;
        left: auto;
        right: -25px;
        bottom: auto;
        width: 90px;
        height: 190px;
        opacity: .9;
    }
    .mbx-orange-block::before {
        top: 18px;
        left: -16px;
        display: block;
    }
    .mbx-orange-block::after {
        right: auto;
        left: -30px;
    }
    /* =====================================================
       OTHER DECORATIONS
    ===================================================== */
    .mbx-side-pagination {
        display: none;
    }
    .mbx-bottom-links {
        left: 12%;
        bottom: 36px;
    }
    .mbx-right-garage-art {
        right: 7%;
        bottom: 60px;
        width: 210px;
    }
    .mbx-deco-circle-one {
        top: 90px;
    }
    .mbx-deco-circle-two {
        top: 120px;
    }
    .mbx-dot-pattern {
        top: 105px;
    }
    /* =====================================================
       LEFT IMAGE SECOND
    ===================================================== */
    .mbx-hero-left {
        min-height: 790px;
    }
    .mbx-photo {
        top: 35px;
        left: 5%;
        width: 90%;
        height: 700px;
    }
    .mbx-floating-icon {
        top: 365px;
        left: 2.5%;
    }
    .mbx-photo-bar {
        bottom: 18px;
        width: 96%;
    }
    .mbx-same-day {
        right: 3%;
        bottom: 75px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    /* HEADER */
    .mbx-logo {
        left: 15px;
    }
    .mbx-logo-icon {
        width: 44px;
        height: 44px;
    }
    .mbx-logo-text strong {
        font-size: 10px;
    }
    .mbx-logo-text small {
        font-size: 5px;
    }
    .mbx-menu-button {
        right: 17px;
    }
    .mbx-nav {
        padding:
            12px 15px 20px;
    }
    .mbx-dropdown {
        padding-left: 8px;
    }
    /* =====================================================
       RIGHT / TEXT FIRST
    ===================================================== */
    .mbx-hero-right {
        min-height: 660px;
    }
    .mbx-content {
        padding:
            82px 24px 130px;
    }
    .mbx-content-kicker {
        margin-bottom: 14px;
        font-size: 7px;
        letter-spacing: 2.3px;
    }
    .mbx-content-kicker::before {
        width: 21px;
    }
    .mbx-content h1 {
        font-size:
            clamp(42px, 12.5vw, 58px);
        line-height: .98;
        letter-spacing: 4px;
    }
    .mbx-location-title {
        margin-top: 16px;
        font-size: 10px;
        line-height: 1.5;
        letter-spacing: 4px;
        white-space: normal;
    }
    .mbx-content p {
        max-width: 100%;
        margin-top: 29px;
        font-size: 13px;
        line-height: 1.75;
    }
    /* =====================================================
       BUTTONS
    ===================================================== */
    .mbx-hero-actions {
        margin-top: 27px;
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
    .mbx-explore-btn {
        min-width: 150px;
        min-height: 46px;
    }
    .mbx-estimate-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }
    /* =====================================================
       BACKGROUND
    ===================================================== */
    .mbx-right-bg {
        background-image:
            linear-gradient(rgba(245, 246, 246, .93),
                rgba(245, 246, 246, .87)),
            url("../images/garage-door-right-bg.webp");
    }
    /* =====================================================
       DECORATIONS
    ===================================================== */
    .mbx-right-garage-art {
        right: -20px;
        bottom: 45px;
        width: 155px;
        opacity: .045;
    }
    .mbx-deco-circle-one {
        top: 62px;
        right: -35px;
        width: 105px;
        height: 105px;
    }
    .mbx-deco-circle-two {
        top: 90px;
        right: 5px;
    }
    .mbx-dot-pattern {
        top: 75px;
        right: 18px;
    }
    /* =====================================================
       ORANGE BLOCK
       BEHIND TEXT ON MOBILE TOO
    ===================================================== */
    .mbx-orange-block {
        z-index: 1;
        top: 135px;
        right: -30px;
        left: auto;
        width: 76px;
        height: 165px;
        opacity: .75;
    }
    .mbx-orange-block::before {
        top: 15px;
        left: -13px;
        width: 100%;
        height: 100%;
    }
    .mbx-orange-block::after {
        display: none;
    }
    .mbx-orange-block svg {
        width: 34px;
        height: 34px;
        opacity: .30;
    }
    /* =====================================================
       BOTTOM LINKS
    ===================================================== */
    .mbx-bottom-links {
        left: 24px;
        bottom: 27px;
    }
    /* =====================================================
       LEFT IMAGE SECOND
    ===================================================== */
    .mbx-hero-left {
        min-height: 625px;
    }
    .mbx-photo {
        top: 30px;
        left: 4%;
        width: 92%;
        height: 545px;
    }
    .mbx-photo img {
        object-position: center;
    }
    .mbx-floating-icon {
        top: 290px;
        left: 1%;
        width: 56px;
        height: 56px;
    }
    .mbx-floating-icon svg {
        width: 27px;
        height: 27px;
    }
    .mbx-photo-bar {
        bottom: 9px;
        width: 97%;
        height: 30px;
    }
    .mbx-same-day {
        right: 2%;
        bottom: 60px;
        min-width: 180px;
        padding:
            9px 11px;
    }
    .mbx-same-day-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
    .mbx-content {
        padding-left: 19px;
        padding-right: 19px;
    }
    .mbx-content h1 {
        font-size: 40px;
        letter-spacing: 3px;
    }
    .mbx-location-title {
        font-size: 9px;
        letter-spacing: 3px;
    }
    .mbx-content p {
        font-size: 12.5px;
    }
    .mbx-orange-block {
        top: 125px;
        right: -35px;
        width: 72px;
        height: 150px;
    }
    .mbx-hero-left {
        min-height: 570px;
    }
    .mbx-photo {
        top: 27px;
        height: 495px;
    }
    .mbx-floating-icon {
        top: 265px;
    }
    .mbx-same-day {
        min-width: 165px;
    }
}
/* =========================================================
   VERY SMALL MOBILE
========================================================= */
@media (max-width: 340px) {
    .mbx-content h1 {
        font-size: 35px;
        letter-spacing: 2px;
    }
    .mbx-content-kicker {
        letter-spacing: 1.5px;
    }
    .mbx-location-title {
        letter-spacing: 2px;
    }
    .mbx-content p {
        font-size: 12px;
    }
    .mbx-orange-block {
        opacity: .55;
    }
    .mbx-hero-left {
        min-height: 520px;
    }
    .mbx-photo {
        height: 450px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   CREATIVE GARAGE DOOR SERVICES
========================================================= */
.gds-services {
    position: relative;
    padding:
        130px 0 115px;
    overflow: hidden;
    background:
        #073d3b;
}
/* =========================================================
   BACKGROUND WORD
========================================================= */
.gds-bg-word {
    position: absolute;
    top: 70px;
    left: 50%;
    color:
        rgba(255, 255, 255, .025);
    font-size:
        clamp(130px, 17vw, 270px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -12px;
    white-space: nowrap;
    transform:
        translateX(-50%);
    pointer-events: none;
}
/* =========================================================
   DECORATIVE LINES
========================================================= */
.gds-line {
    position: absolute;
    display: block;
    background:
        rgba(255, 255, 255, .08);
}
.gds-line-one {
    top: 0;
    left: 8%;
    width: 1px;
    height: 100%;
}
.gds-line-two {
    top: 0;
    right: 8%;
    width: 1px;
    height: 100%;
}
/* =========================================================
   HEADING
========================================================= */
.gds-heading {
    position: relative;
    z-index: 10;
    margin-bottom: 75px;
}
/* KICKER */
.gds-kicker {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    color:
        #e95c00;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 4px;
}
.gds-kicker span {
    width: 42px;
    height: 3px;
    display: block;
    background:
        #e95c00;
}
/* TITLE */
.gds-heading h2 {
    margin: 0;
    color:
        #ffffff;
    font-size:
        clamp(58px, 6vw, 94px);
    font-weight: 900;
    line-height: .87;
    letter-spacing: 3px;
}
.gds-heading h2 span {
    display: block;
    margin-left: 8%;
    color:
        #e95c00;
}
/* PARAGRAPH */
.gds-heading p {
    max-width: 390px;
    margin:
        0 0 5px auto;
    color:
        rgba(255, 255, 255, .58);
    font-size: 13px;
    line-height: 1.85;
}
/* =========================================================
   GRID
========================================================= */
.gds-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns:
        1.05fr 1.35fr 1fr;
    grid-template-rows:
        285px 285px 245px;
    gap: 14px;
}
/* =========================================================
   CARD BASE
========================================================= */
.gds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:
        32px;
    overflow: hidden;
    color:
        #073d3b;
    transition:
        transform .4s cubic-bezier(.2, .7, .2, 1),
        box-shadow .4s ease;
}
/* TOP LINE */
.gds-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background:
        #e95c00;
    transition:
        width .45s ease;
}
/* CIRCLE */
.gds-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -90px;
    right: -90px;
    width: 190px;
    height: 190px;
    border:
        1px solid rgba(7, 61, 59, .09);
    border-radius: 50%;
    transition:
        transform .6s ease;
}
.gds-card:hover {
    z-index: 20;
    transform:
        translateY(-9px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, .18);
}
.gds-card:hover::before {
    width: 100%;
}
.gds-card:hover::after {
    transform:
        scale(1.25);
}
/* =========================================================
   CARD POSITIONS
========================================================= */
.gds-card-main {
    grid-column: 1;
    grid-row: 1 / span 2;
    color:
        #ffffff;
    background:
        #e95c00;
}
.gds-card-light {
    grid-column: 2;
    grid-row: 1;
    background:
        #ffffff;
}
.gds-card-outline {
    grid-column: 3;
    grid-row: 1;
    color:
        #ffffff;
    background:
        rgba(255, 255, 255, .055);
    border:
        1px solid rgba(255, 255, 255, .15);
}
/* PHOTO */
.gds-photo {
    grid-column: 2;
    grid-row: 2 / span 2;
}
.gds-card-gray {
    grid-column: 3;
    grid-row: 2;
    background:
        #d9d9d7;
}
.gds-card-dark {
    grid-column: 1;
    grid-row: 3;
    color:
        #ffffff;
    background:
        #042e2d;
    border:
        1px solid rgba(255, 255, 255, .08);
}
.gds-card-parts {
    grid-column: 3;
    grid-row: 3;
    background:
        #ffffff;
}
/* =========================================================
   MAIN ORANGE CARD
========================================================= */
.gds-card-main::before {
    background:
        #ffffff;
}
.gds-card-main::after {
    width: 270px;
    height: 270px;
    top: -120px;
    right: -130px;
    border-color:
        rgba(255, 255, 255, .17);
}
/* SECOND CIRCLE */
.gds-card-main .gds-number::after {
    content: "";
    position: absolute;
    top: 55px;
    right: -35px;
    width: 150px;
    height: 150px;
    border:
        30px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
    pointer-events: none;
}
/* =========================================================
   NUMBER
========================================================= */
.gds-number {
    position: absolute;
    z-index: 2;
    top: 23px;
    left: 27px;
    color:
        rgba(7, 61, 59, .40);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
.gds-card-main .gds-number,
.gds-card-outline .gds-number,
.gds-card-dark .gds-number {
    color:
        rgba(255, 255, 255, .50);
}
/* =========================================================
   ICON
========================================================= */
.gds-icon {
    position: absolute;
    z-index: 3;
    top: 25px;
    right: 25px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        #073d3b;
    background:
        rgba(7, 61, 59, .07);
    border-radius: 50%;
    transition:
        color .35s ease,
        background .35s ease,
        transform .35s ease;
}
.gds-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke:
        currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* WHITE ICONS */
.gds-card-main .gds-icon,
.gds-card-outline .gds-icon,
.gds-card-dark .gds-icon {
    color:
        #ffffff;
    background:
        rgba(255, 255, 255, .10);
}
.gds-card:hover .gds-icon {
    transform:
        rotate(-8deg) scale(1.08);
}
.gds-card-light:hover .gds-icon,
.gds-card-gray:hover .gds-icon,
.gds-card-parts:hover .gds-icon {
    color:
        #ffffff;
    background:
        #e95c00;
}
.gds-card-main:hover .gds-icon {
    color:
        #e95c00;
    background:
        #ffffff;
}
/* =========================================================
   COPY
========================================================= */
.gds-copy {
    position: relative;
    z-index: 3;
}
.gds-copy small {
    display: block;
    margin-bottom: 9px;
    color:
        #9a9f9f;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.gds-card-main .gds-copy small,
.gds-card-outline .gds-copy small,
.gds-card-dark .gds-copy small {
    color:
        rgba(255, 255, 255, .55);
}
.gds-copy h3 {
    max-width: 280px;
    margin: 0;
    color:
        inherit;
    font-size:
        clamp(23px, 2.1vw, 34px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.7px;
}
.gds-copy h3 span {
    display: block;
    color:
        #e95c00;
}
.gds-card-main .gds-copy h3 span {
    color:
        #ffffff;
}
.gds-copy p {
    max-width: 280px;
    margin:
        22px 0 0;
    color:
        rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.75;
}
/* =========================================================
   ARROW
========================================================= */
.gds-arrow {
    position: absolute;
    z-index: 5;
    right: 25px;
    bottom: 25px;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        #073d3b;
    border:
        1px solid rgba(7, 61, 59, .17);
    border-radius: 50%;
    transition:
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}
.gds-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke:
        currentColor;
    stroke-width: 2;
}
.gds-card-main .gds-arrow,
.gds-card-outline .gds-arrow,
.gds-card-dark .gds-arrow {
    color:
        #ffffff;
    border-color:
        rgba(255, 255, 255, .25);
}
.gds-card:hover .gds-arrow {
    color:
        #ffffff;
    background:
        #e95c00;
    border-color:
        #e95c00;
    transform:
        rotate(-35deg);
}
.gds-card-main:hover .gds-arrow {
    color:
        #e95c00;
    background:
        #ffffff;
    border-color:
        #ffffff;
}
/* =========================================================
   PHOTO
========================================================= */
.gds-photo {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background:
        #777176;
}
.gds-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1.1s ease;
}
.gds-photo:hover img {
    transform:
        scale(1.055);
}
.gds-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(4, 46, 45, .72),
            transparent 58%);
    pointer-events: none;
}
/* =========================================================
   PHOTO TAG
========================================================= */
.gds-photo-tag {
    position: absolute;
    z-index: 5;
    left: 0;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding:
        14px 20px;
    color:
        #ffffff;
    background:
        #e95c00;
    box-shadow:
        15px 15px 35px rgba(0, 0, 0, .17);
}
.gds-photo-tag-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:
        1px solid rgba(255, 255, 255, .35);
}
.gds-photo-tag-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke:
        currentColor;
    stroke-width: 2.5;
}
.gds-photo-tag>span:last-child {
    display: flex;
    flex-direction: column;
}
.gds-photo-tag small {
    color:
        rgba(255, 255, 255, .65);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gds-photo-tag strong {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
/* =========================================================
   VERTICAL TEXT
========================================================= */
.gds-photo-vertical {
    position: absolute;
    z-index: 5;
    top: 25px;
    right: 18px;
    color:
        rgba(255, 255, 255, .70);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 4px;
    writing-mode:
        vertical-rl;
}
/* =========================================================
   BOTTOM
========================================================= */
.gds-bottom {
    position: relative;
    z-index: 10;
    min-height: 80px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 45px;
    color:
        rgba(255, 255, 255, .45);
}
.gds-bottom-line {
    width: 45px;
    height: 2px;
    background:
        #e95c00;
}
.gds-bottom>span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gds-bottom>i {
    width: 4px;
    height: 4px;
    display: block;
    background:
        #e95c00;
    border-radius: 50%;
}
.gds-bottom>a {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding:
        15px 20px;
    color:
        #073d3b;
    background:
        #ffffff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}
.gds-bottom>a svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke:
        currentColor;
    stroke-width: 2;
}
.gds-bottom>a:hover {
    color:
        #ffffff;
    background:
        #e95c00;
    transform:
        translateX(5px);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .gds-services {
        padding:
            90px 0;
    }
    .gds-heading {
        margin-bottom: 50px;
    }
    .gds-heading h2 span {
        margin-left: 0;
    }
    .gds-heading p {
        max-width: 600px;
        margin:
            30px 0 0;
    }
    /* GRID */
    .gds-grid {
        grid-template-columns:
            1fr 1fr;
        grid-template-rows:
            auto;
    }
    .gds-card-main,
    .gds-card-light,
    .gds-card-outline,
    .gds-photo,
    .gds-card-gray,
    .gds-card-dark,
    .gds-card-parts {
        grid-column: auto;
        grid-row: auto;
    }
    .gds-card {
        min-height: 280px;
    }
    .gds-card-main {
        min-height: 410px;
        grid-row:
            span 2;
    }
    .gds-photo {
        min-height: 500px;
        grid-column:
            span 2;
    }
    .gds-bottom {
        flex-wrap: wrap;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .gds-services {
        padding:
            70px 0;
    }
    .gds-bg-word {
        top: 40px;
        font-size: 100px;
        letter-spacing: -5px;
    }
    /* HEADING */
    .gds-kicker {
        font-size: 7px;
        letter-spacing: 2.5px;
    }
    .gds-heading h2 {
        font-size:
            clamp(43px, 13vw, 60px);
        letter-spacing: 1px;
    }
    .gds-heading p {
        margin-top: 25px;
        font-size: 12px;
    }
    /* GRID */
    .gds-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .gds-card,
    .gds-card-main {
        min-height: 255px;
        padding:
            25px;
    }
    .gds-card-main {
        min-height: 380px;
    }
    .gds-copy h3 {
        font-size: 26px;
    }
    .gds-arrow {
        right: 20px;
        bottom: 20px;
    }
    /* PHOTO */
    .gds-photo {
        min-height: 440px;
        order: 3;
    }
    .gds-card-main {
        order: 1;
    }
    .gds-card-light {
        order: 2;
    }
    .gds-card-outline {
        order: 4;
    }
    .gds-card-gray {
        order: 5;
    }
    .gds-card-dark {
        order: 6;
    }
    .gds-card-parts {
        order: 7;
    }
    /* BOTTOM */
    .gds-bottom {
        gap: 10px;
        margin-top: 30px;
    }
    .gds-bottom>span {
        font-size: 6px;
    }
    .gds-bottom>a {
        width: 100%;
        margin:
            15px 0 0;
        justify-content: center;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .gds-services *,
    .gds-services *::before,
    .gds-services *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   GARAGE DOOR MOTION SECTION
========================================================= */
.gdm-repair {
    position: relative;
    padding: 130px 0 110px;
    overflow: hidden;
    background: #f4f4f1;
}
/* =========================================================
   HUGE BACKGROUND WORD
========================================================= */
.gdm-bg-word {
    position: absolute;
    top: 260px;
    left: 50%;
    color: rgba(7, 61, 59, .028);
    font-size: clamp(140px, 18vw, 290px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -14px;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    animation:
        gdmBgMove 10s ease-in-out infinite;
}
@keyframes gdmBgMove {
    0%,
    100% {
        transform:
            translateX(-50%);
    }
    50% {
        transform:
            translateX(-47%);
    }
}
/* =========================================================
   ORBITS
========================================================= */
.gdm-orbit {
    position: absolute;
    border:
        1px solid rgba(7, 61, 59, .07);
    border-radius: 50%;
    pointer-events: none;
}
.gdm-orbit-one {
    top: 150px;
    right: -180px;
    width: 470px;
    height: 470px;
    animation:
        gdmOrbit 13s linear infinite;
}
.gdm-orbit-two {
    left: -170px;
    bottom: 130px;
    width: 340px;
    height: 340px;
    border-color:
        rgba(233, 92, 0, .11);
    animation:
        gdmOrbit 18s linear infinite reverse;
}
.gdm-orbit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    background: #e95c00;
    border-radius: 50%;
}
@keyframes gdmOrbit {
    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   HEADING
========================================================= */
.gdm-heading {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin-bottom: 80px;
}
.gdm-kicker {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #e95c00;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 4px;
}
.gdm-kicker span {
    position: relative;
    width: 48px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .20);
}
.gdm-kicker span::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #e95c00;
    animation:
        gdmLine 2.3s ease-in-out infinite;
}
@keyframes gdmLine {
    0% {
        left: -100%;
    }
    50%,
    100% {
        left: 100%;
    }
}
/* TITLE */
.gdm-heading h2 {
    margin: 0;
    color: #073d3b;
    font-size:
        clamp(47px, 5.3vw, 69px);
    font-weight: 900;
    line-height: .94;
    letter-spacing: -3px;
}
.gdm-heading h2 span {
    display: block;
    margin-top: 8px;
    color: #777176;
}
/* =========================================================
   STAGE
========================================================= */
.gdm-stage {
    position: relative;
    min-height: 790px;
    margin-top: 20px;
}
/* =========================================================
   PHOTO WRAPPER
========================================================= */
.gdm-photo-wrap {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 12%;
    width: 72%;
    height: 570px;
}
/* OFFSET BORDER */
.gdm-photo-border {
    position: absolute;
    z-index: 1;
    top: -22px;
    left: 25px;
    width: 100%;
    height: 100%;
    border:
        1px solid rgba(7, 61, 59, .20);
    pointer-events: none;
    animation:
        gdmBorderFloat 5s ease-in-out infinite;
}
@keyframes gdmBorderFloat {
    0%,
    100% {
        transform:
            translate(0, 0);
    }
    50% {
        transform:
            translate(8px, -7px);
    }
}
/* PHOTO */
.gdm-photo {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    background: #777176;
    clip-path:
        polygon(4% 0,
            100% 0,
            96% 100%,
            0 100%);
}
.gdm-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition:
        transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.gdm-stage:hover .gdm-photo img {
    transform:
        scale(1.09);
}
.gdm-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg,
            rgba(7, 61, 59, .28),
            transparent 55%,
            rgba(7, 61, 59, .10));
}
/* =========================================================
   MOVING GARAGE ICON
========================================================= */
.gdm-floating-garage {
    position: absolute;
    z-index: 15;
    top: -45px;
    right: 65px;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #073d3b;
    box-shadow:
        0 20px 45px rgba(7, 61, 59, .22);
    animation:
        gdmGarageFloat 4s ease-in-out infinite;
}
.gdm-floating-garage::before {
    content: "";
    position: absolute;
    inset: 9px;
    border:
        1px solid rgba(255, 255, 255, .17);
}
.gdm-floating-garage svg {
    position: relative;
    z-index: 2;
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@keyframes gdmGarageFloat {
    0%,
    100% {
        transform:
            translateY(0) rotate(0);
    }
    50% {
        transform:
            translateY(13px) rotate(3deg);
    }
}
/* =========================================================
   MOVING ORANGE LINE
========================================================= */
.gdm-moving-line {
    position: absolute;
    z-index: 20;
    left: -45px;
    bottom: 65px;
    width: 130px;
    height: 5px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .20);
}
.gdm-moving-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #e95c00;
    animation:
        gdmScanLine 2.8s ease-in-out infinite;
}
@keyframes gdmScanLine {
    0% {
        left: -100%;
    }
    60%,
    100% {
        left: 100%;
    }
}
/* =========================================================
   CORNER DECORATION
========================================================= */
.gdm-corner {
    position: absolute;
    z-index: 15;
    right: -18px;
    bottom: -18px;
    width: 70px;
    height: 70px;
}
.gdm-corner span:first-child {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 4px;
    background: #e95c00;
}
.gdm-corner span:last-child {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 4px;
    height: 70px;
    background: #e95c00;
}
/* =========================================================
   LEFT SIDE LABEL
========================================================= */
.gdm-side-label {
    position: absolute;
    z-index: 12;
    top: 110px;
    left: 2%;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #073d3b;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
    transform:
        rotate(180deg);
}
.gdm-side-label span {
    width: 3px;
    height: 55px;
    background: #e95c00;
}
/* =========================================================
   CONTENT CARD
========================================================= */
.gdm-content-card {
    position: absolute;
    z-index: 30;
    left: 3%;
    bottom: 0;
    width: 59%;
    max-width: 720px;
    padding:
        38px 42px;
    background: #ffffff;
    box-shadow:
        0 30px 75px rgba(7, 61, 59, .12);
    animation:
        gdmCardFloat 6s ease-in-out infinite;
}
@keyframes gdmCardFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-7px);
    }
}
/* CARD TOP */
.gdm-card-top {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}
.gdm-card-mark {
    width: 32px;
    height: 3px;
    background: #e95c00;
}
.gdm-card-top small {
    color: #073d3b;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
/* PARAGRAPH */
.gdm-content-card p {
    margin:
        0 0 17px;
    color: #737b7b;
    font-size: 13px;
    line-height: 1.82;
}
.gdm-content-card p:last-of-type {
    margin-bottom: 0;
}
/* =========================================================
   FEATURES
========================================================= */
.gdm-mini-features {
    display: flex;
    gap: 35px;
    margin-top: 27px;
    padding-top: 22px;
    border-top:
        1px solid rgba(7, 61, 59, .10);
}
.gdm-mini-features>div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gdm-check {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #e95c00;
    border-radius: 50%;
    transition:
        transform .35s ease;
}
.gdm-mini-features>div:hover .gdm-check {
    transform:
        rotate(360deg);
}
.gdm-check svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}
.gdm-mini-features>div>span:last-child {
    display: flex;
    flex-direction: column;
}
.gdm-mini-features small {
    color: #a0a4a4;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.gdm-mini-features strong {
    margin-top: 3px;
    color: #073d3b;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   ORANGE MESSAGE
========================================================= */
.gdm-orange-message {
    position: absolute;
    z-index: 35;
    right: 1%;
    bottom: 85px;
    width: 260px;
    padding:
        28px 25px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    background: #e95c00;
    box-shadow:
        0 25px 55px rgba(233, 92, 0, .20);
    animation:
        gdmOrangeMove 4.5s ease-in-out infinite;
}
@keyframes gdmOrangeMove {
    0%,
    100% {
        transform:
            translateX(0);
    }
    50% {
        transform:
            translateX(-10px);
    }
}
/* ICON */
.gdm-orange-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:
        1px solid rgba(255, 255, 255, .38);
    transition:
        transform .5s ease;
}
.gdm-orange-message:hover .gdm-orange-icon {
    transform:
        rotate(-12deg) scale(1.08);
}
.gdm-orange-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gdm-orange-message>span:last-child {
    display: flex;
    flex-direction: column;
}
.gdm-orange-message small {
    color:
        rgba(255, 255, 255, .60);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gdm-orange-message strong {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 1px;
}
/* =========================================================
   DOTS
========================================================= */
.gdm-dots {
    position: absolute;
    z-index: 2;
    right: 4%;
    top: 90px;
    display: grid;
    grid-template-columns:
        repeat(4, 5px);
    gap: 9px;
    animation:
        gdmDots 4s ease-in-out infinite;
}
.gdm-dots span {
    width: 5px;
    height: 5px;
    background: #e95c00;
    border-radius: 50%;
}
@keyframes gdmDots {
    0%,
    100% {
        transform:
            translateY(0);
        opacity: .55;
    }
    50% {
        transform:
            translateY(10px);
        opacity: 1;
    }
}
/* =========================================================
   SYSTEM FLOW
========================================================= */
.gdm-system-flow {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 70px;
    padding:
        28px 32px;
    color: #fff;
    background: #073d3b;
}
/* FLOW TITLE */
.gdm-flow-title {
    min-width: 230px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.gdm-flow-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #e95c00;
}
.gdm-flow-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.gdm-flow-title>span:last-child {
    display: flex;
    flex-direction: column;
}
.gdm-flow-title small {
    color:
        rgba(255, 255, 255, .40);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gdm-flow-title strong {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   FLOW ITEMS
========================================================= */
.gdm-flow {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}
.gdm-flow>span {
    color:
        rgba(255, 255, 255, .70);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.8px;
    transition:
        color .3s ease,
        transform .3s ease;
}
.gdm-flow>span:hover {
    color: #fff;
    transform:
        translateY(-4px);
}
/* MOVING CONNECTION */
.gdm-flow i {
    position: relative;
    flex: 1;
    height: 1px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .14);
}
.gdm-flow i b {
    position: absolute;
    top: -2px;
    left: -5px;
    width: 5px;
    height: 5px;
    background: #e95c00;
    border-radius: 50%;
    animation:
        gdmFlowDot 2.8s linear infinite;
}
.gdm-flow i:nth-of-type(2) b {
    animation-delay: .4s;
}
.gdm-flow i:nth-of-type(3) b {
    animation-delay: .8s;
}
.gdm-flow i:nth-of-type(4) b {
    animation-delay: 1.2s;
}
@keyframes gdmFlowDot {
    from {
        left: -5px;
    }
    to {
        left: 100%;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .gdm-repair {
        padding:
            90px 0;
    }
    .gdm-heading {
        margin-bottom: 60px;
    }
    .gdm-stage {
        min-height: 930px;
    }
    .gdm-photo-wrap {
        left: 7%;
        width: 86%;
        height: 550px;
    }
    .gdm-content-card {
        left: 0;
        bottom: 40px;
        width: 70%;
    }
    .gdm-orange-message {
        right: 0;
        bottom: 130px;
        width: 240px;
    }
    .gdm-side-label {
        left: 0;
    }
    .gdm-system-flow {
        flex-direction: column;
        align-items: stretch;
    }
    .gdm-flow-title {
        min-width: 0;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 575.98px) {
    .gdm-repair {
        padding:
            70px 0;
    }
    .gdm-bg-word {
        top: 310px;
        font-size: 100px;
        letter-spacing: -5px;
    }
    /* TITLE */
    .gdm-heading {
        margin-bottom: 45px;
    }
    .gdm-kicker {
        font-size: 7px;
        letter-spacing: 2px;
    }
    .gdm-heading h2 {
        font-size:
            clamp(38px, 11vw, 50px);
        letter-spacing: -1.5px;
    }
    /* STAGE */
    .gdm-stage {
        min-height: auto;
        padding-bottom: 0;
    }
    .gdm-side-label {
        display: none;
    }
    /* IMAGE */
    .gdm-photo-wrap {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 18px);
        height: 430px;
        margin-left: 18px;
    }
    .gdm-photo-border {
        top: -12px;
        left: 12px;
    }
    .gdm-photo {
        clip-path:
            polygon(3% 0,
                100% 0,
                96% 100%,
                0 100%);
    }
    /* FLOAT ICON */
    .gdm-floating-garage {
        top: -25px;
        right: 20px;
        width: 65px;
        height: 65px;
    }
    .gdm-floating-garage svg {
        width: 31px;
        height: 31px;
    }
    /* CONTENT */
    .gdm-content-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 25px);
        margin:
            -45px 25px 0 0;
        padding:
            28px 22px;
    }
    .gdm-content-card p {
        font-size: 13px;
        line-height: 1.8;
    }
    .gdm-mini-features {
        flex-direction: column;
        gap: 15px;
    }
    /* ORANGE */
    .gdm-orange-message {
        position: relative;
        right: auto;
        bottom: auto;
        width: 235px;
        margin:
            -10px 0 0 auto;
        padding:
            20px;
        animation:
            gdmOrangeMove 4.5s ease-in-out infinite;
    }
    /* DOTS */
    .gdm-dots {
        display: none;
    }
    /* FLOW */
    .gdm-system-flow {
        margin-top: 50px;
        padding:
            25px 20px;
    }
    .gdm-flow {
        display: grid;
        grid-template-columns:
            repeat(2, 1fr);
        gap: 20px;
    }
    .gdm-flow i {
        display: none;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
    .gdm-photo-wrap {
        height: 385px;
    }
    .gdm-content-card {
        width: calc(100% - 15px);
        margin-right: 15px;
    }
    .gdm-orange-message {
        width: 215px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .gdm-repair *,
    .gdm-repair *::before,
    .gdm-repair *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   WHY CHOOSE US - CENTER TECHNICIAN CONCEPT
========================================================= */
.wcr-why {
    position: relative;
    padding:
        120px 0 105px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 45%,
            #0b4946 0%,
            #073d3b 43%,
            #042e2d 100%);
}
/* =========================================================
   BACKGROUND TYPOGRAPHY
========================================================= */
.wcr-bg-type {
    position: absolute;
    z-index: 0;
    top: 240px;
    left: 50%;
    width: 100%;
    text-align: center;
    transform:
        translateX(-50%);
    pointer-events: none;
}
.wcr-bg-type span {
    display: block;
    color:
        rgba(255, 255, 255, .018);
    font-size:
        clamp(150px, 22vw, 340px);
    font-weight: 900;
    line-height: .55;
    letter-spacing: -16px;
}
.wcr-bg-type strong {
    display: block;
    color: transparent;
    font-size:
        clamp(120px, 18vw, 270px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -10px;
    -webkit-text-stroke:
        1px rgba(255, 255, 255, .035);
    animation:
        wcrBackgroundText 8s ease-in-out infinite;
}
@keyframes wcrBackgroundText {
    0%,
    100% {
        transform:
            translateX(-18px);
    }
    50% {
        transform:
            translateX(18px);
    }
}
/* =========================================================
   ORBITS
========================================================= */
.wcr-orbit {
    position: absolute;
    border:
        1px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
    pointer-events: none;
}
.wcr-orbit-one {
    top: -170px;
    right: -130px;
    width: 440px;
    height: 440px;
    animation:
        wcrOrbit 20s linear infinite;
}
.wcr-orbit-two {
    left: -190px;
    bottom: -150px;
    width: 390px;
    height: 390px;
    border-color:
        rgba(233, 92, 0, .13);
    animation:
        wcrOrbit 16s linear infinite reverse;
}
.wcr-orbit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    background: #e95c00;
    border-radius: 50%;
}
@keyframes wcrOrbit {
    to {
        transform:
            rotate(360deg);
    }
}
/* =========================================================
   HEADING
========================================================= */
.wcr-heading {
    position: relative;
    z-index: 10;
    max-width: 850px;
    margin:
        0 auto 65px;
    text-align: center;
}
/* KICKER */
.wcr-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    color: #e95c00;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 4px;
}
.wcr-kicker>span {
    position: relative;
    width: 45px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .25);
}
.wcr-kicker>span::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #e95c00;
    animation:
        wcrScan 2.4s ease-in-out infinite;
}
@keyframes wcrScan {
    0% {
        left: -100%;
    }
    60%,
    100% {
        left: 100%;
    }
}
/* TITLE */
.wcr-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size:
        clamp(48px, 5vw, 76px);
    font-weight: 900;
    line-height: .93;
    letter-spacing: -3px;
}
.wcr-heading h2 span {
    display: block;
    color: #e95c00;
}
.wcr-heading p {
    max-width: 650px;
    margin:
        23px auto 0;
    color:
        rgba(255, 255, 255, .52);
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   MAIN STAGE
========================================================= */
.wcr-stage {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns:
        1fr 380px 1fr;
    align-items: center;
    min-height: 650px;
}
/* =========================================================
   CENTER TECHNICIAN AREA
========================================================= */
.wcr-technician-area {
    position: relative;
    align-self: stretch;
    min-height: 650px;
}
/* =========================================================
   ORANGE ARCH
========================================================= */
.wcr-orange-arch {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0;
    width: 320px;
    height: 520px;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            #f06a0d,
            #e95c00);
    border-radius:
        170px 170px 0 0;
    transform:
        translateX(-50%);
    animation:
        wcrArchFloat 5s ease-in-out infinite;
}
.wcr-orange-arch::before {
    content: "";
    position: absolute;
    inset: 17px;
    border:
        1px solid rgba(255, 255, 255, .22);
    border-radius:
        150px 150px 0 0;
}
.wcr-arch-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .15);
}
.wcr-arch-line::after {
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    width: 1px;
    height: 100px;
    background:
        rgba(255, 255, 255, .85);
    animation:
        wcrArchScan 3s linear infinite;
}
@keyframes wcrArchFloat {
    0%,
    100% {
        transform:
            translateX(-50%) translateY(0);
    }
    50% {
        transform:
            translateX(-50%) translateY(-8px);
    }
}
@keyframes wcrArchScan {
    to {
        top: 100%;
    }
}
/* =========================================================
   TECHNICIAN
========================================================= */
.wcr-technician {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: -105px;
    width: 490px;
    height: 720px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform:
        translateX(-50%);
    pointer-events: none;
}
.wcr-technician img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter:
        drop-shadow(0 30px 30px rgba(0, 0, 0, .28));
    animation:
        wcrTechFloat 5s ease-in-out infinite;
}
@keyframes wcrTechFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(-9px);
    }
}
/* =========================================================
   ROTATING BADGE
========================================================= */
.wcr-round-badge {
    position: absolute;
    z-index: 15;
    top: 40px;
    right: -20px;
    width: 105px;
    height: 105px;
    color: #ffffff;
}
.wcr-round-badge>svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation:
        wcrBadgeRotate 14s linear infinite;
}
.wcr-round-badge text {
    fill:
        rgba(255, 255, 255, .70);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2.2px;
}
@keyframes wcrBadgeRotate {
    to {
        transform:
            rotate(360deg);
    }
}
.wcr-round-badge>span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #073d3b;
    border:
        1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    transform:
        translate(-50%, -50%);
}
.wcr-round-badge>span svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
/* =========================================================
   TECH LABEL
========================================================= */
.wcr-tech-label {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: 18px;
    min-width: 230px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding:
        13px 18px;
    background:
        rgba(4, 46, 45, .88);
    border:
        1px solid rgba(255, 255, 255, .10);
    backdrop-filter:
        blur(8px);
    transform:
        translateX(-50%);
}
.wcr-tech-label>span {
    width: 4px;
    height: 35px;
    background: #e95c00;
}
.wcr-tech-label div {
    display: flex;
    flex-direction: column;
}
.wcr-tech-label small {
    color:
        rgba(255, 255, 255, .40);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.wcr-tech-label strong {
    margin-top: 4px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
/* =========================================================
   FEATURE SIDES
========================================================= */
.wcr-left-features,
.wcr-right-features {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 105px;
}
/* =========================================================
   FEATURE
========================================================= */
.wcr-feature {
    position: relative;
    min-height: 110px;
    display: flex;
    align-items: center;
    gap: 17px;
    padding:
        19px 0;
    transition:
        transform .4s ease;
}
/* horizontal rule */
.wcr-feature::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background:
        rgba(255, 255, 255, .14);
}
/* animated part of rule */
.wcr-feature::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 3px;
    background: #e95c00;
    transition:
        width .5s ease;
}
.wcr-feature-left::after {
    right: 0;
}
.wcr-feature-right::after {
    left: 0;
}
.wcr-feature:hover::after {
    width: 100%;
}
/* LEFT ALIGNMENT */
.wcr-feature-left {
    justify-content: flex-end;
    text-align: right;
}
/* RIGHT */
.wcr-feature-right {
    justify-content: flex-start;
    text-align: left;
}
/* DIFFERENT POSITIONING */
.wcr-f-one {
    transform:
        translateX(25px);
}
.wcr-f-two {
    transform:
        translateX(-20px);
}
.wcr-f-three {
    transform:
        translateX(-25px);
}
.wcr-f-four {
    transform:
        translateX(20px);
}
.wcr-f-one:hover,
.wcr-f-two:hover {
    transform:
        translateX(-7px);
}
.wcr-f-three:hover,
.wcr-f-four:hover {
    transform:
        translateX(7px);
}
/* =========================================================
   FEATURE COPY
========================================================= */
.wcr-feature-copy {
    display: flex;
    flex-direction: column;
}
.wcr-feature-copy small {
    color:
        rgba(255, 255, 255, .38);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.wcr-feature-copy strong {
    margin-top: 7px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
    line-height: .95;
    letter-spacing: -1px;
}
.wcr-feature-copy strong span {
    color: #e95c00;
}
/* =========================================================
   ICON
========================================================= */
.wcr-icon {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e95c00;
    background:
        rgba(255, 255, 255, .035);
    border:
        1px solid rgba(233, 92, 0, .35);
    border-radius: 50%;
    transition:
        color .4s ease,
        background .4s ease,
        transform .5s ease,
        box-shadow .4s ease;
}
.wcr-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wcr-feature:hover .wcr-icon {
    color: #ffffff;
    background: #e95c00;
    box-shadow:
        0 0 0 8px rgba(233, 92, 0, .10);
    transform:
        rotate(10deg) scale(1.07);
}
/* =========================================================
   CONNECTOR
========================================================= */
.wcr-connector {
    position: absolute;
    top: 50%;
    width: 75px;
    height: 1px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .12);
}
.wcr-feature-left .wcr-connector {
    right: -75px;
}
.wcr-feature-right .wcr-connector {
    left: -75px;
}
.wcr-connector::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -5px;
    width: 5px;
    height: 5px;
    background: #e95c00;
    border-radius: 50%;
    animation:
        wcrConnectorDot 2.5s linear infinite;
}
.wcr-feature-right .wcr-connector::after {
    animation-direction: reverse;
}
@keyframes wcrConnectorDot {
    from {
        left: -5px;
    }
    to {
        left: 100%;
    }
}
/* =========================================================
   DOT PATTERN
========================================================= */
.wcr-dots {
    position: absolute;
    z-index: 1;
    right: 29%;
    bottom: 60px;
    display: grid;
    grid-template-columns:
        repeat(4, 5px);
    gap: 9px;
    animation:
        wcrDotsFloat 4s ease-in-out infinite;
}
.wcr-dots span {
    width: 5px;
    height: 5px;
    background: #e95c00;
    border-radius: 50%;
}
@keyframes wcrDotsFloat {
    0%,
    100% {
        transform:
            translateY(0);
        opacity: .4;
    }
    50% {
        transform:
            translateY(-12px);
        opacity: 1;
    }
}
/* =========================================================
   BOTTOM RAIL
========================================================= */
.wcr-bottom-rail {
    position: relative;
    z-index: 40;
    width: 100%;
    height: 52px;
    margin-top: 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #e95c00;
    transform:
        rotate(-1deg) scale(1.02);
}
.wcr-rail-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 30px;
    white-space: nowrap;
    animation:
        wcrRailMove 28s linear infinite;
}
.wcr-rail-track span {
    color: #ffffff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 3px;
}
.wcr-rail-track i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background:
        rgba(255, 255, 255, .55);
    border-radius: 50%;
}
@keyframes wcrRailMove {
    from {
        transform:
            translateX(0);
    }
    to {
        transform:
            translateX(-50%);
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wcr-why {
        padding:
            90px 0 90px;
    }
    .wcr-stage {
        grid-template-columns:
            1fr 300px 1fr;
        min-height: 570px;
    }
    .wcr-technician-area {
        min-height: 570px;
    }
    .wcr-orange-arch {
        width: 260px;
        height: 450px;
    }
    .wcr-technician {
        width: 390px;
        height: 620px;
    }
    .wcr-left-features,
    .wcr-right-features {
        gap: 70px;
    }
    .wcr-feature-copy strong {
        font-size: 19px;
    }
    .wcr-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }
    .wcr-connector {
        width: 40px;
    }
    .wcr-feature-left .wcr-connector {
        right: -40px;
    }
    .wcr-feature-right .wcr-connector {
        left: -40px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .wcr-why {
        padding:
            70px 0 80px;
    }
    /* HEADING */
    .wcr-heading {
        margin-bottom: 40px;
        text-align: left;
    }
    .wcr-kicker {
        justify-content: flex-start;
        font-size: 7px;
        letter-spacing: 2.5px;
    }
    .wcr-heading h2 {
        font-size:
            clamp(40px, 12vw, 55px);
        letter-spacing: -2px;
    }
    .wcr-heading p {
        margin-left: 0;
    }
    /* STAGE */
    .wcr-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    /* TECHNICIAN FIRST */
    .wcr-technician-area {
        order: 1;
        width: 100%;
        min-height: 520px;
        margin-bottom: 30px;
    }
    .wcr-orange-arch {
        width: 260px;
        height: 420px;
    }
    .wcr-technician {
        bottom: -30px;
        width: 380px;
        height: 540px;
    }
    .wcr-round-badge {
        top: 35px;
        right: 8%;
        width: 90px;
        height: 90px;
    }
    /* FEATURES AFTER IMAGE */
    .wcr-left-features {
        order: 2;
    }
    .wcr-right-features {
        order: 3;
    }
    .wcr-left-features,
    .wcr-right-features {
        width: 100%;
        gap: 0;
    }
    .wcr-feature {
        width: 100%;
        min-height: 95px;
        transform: none !important;
    }
    .wcr-feature-left,
    .wcr-feature-right {
        justify-content: flex-start;
        text-align: left;
    }
    /* Put icon first on mobile */
    .wcr-feature-left .wcr-icon {
        order: 1;
    }
    .wcr-feature-left .wcr-feature-copy {
        order: 2;
    }
    .wcr-connector {
        display: none;
    }
    .wcr-feature-copy strong {
        font-size: 20px;
    }
    .wcr-dots {
        display: none;
    }
    .wcr-bottom-rail {
        margin-top: 55px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
    .wcr-technician-area {
        min-height: 470px;
    }
    .wcr-orange-arch {
        width: 230px;
        height: 380px;
    }
    .wcr-technician {
        width: 335px;
        height: 495px;
    }
    .wcr-round-badge {
        right: 2%;
    }
    .wcr-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }
    .wcr-icon svg {
        width: 25px;
        height: 25px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .wcr-why *,
    .wcr-why *::before,
    .wcr-why *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   GARAGE DOOR COMPONENTS
========================================================= */
.gvt-components {
    position: relative;
    padding: 120px 0 110px;
    overflow: hidden;
    background: #f5f6f6;
}
/* =========================================================
   BACKGROUND WORD
========================================================= */
.gvt-bg-text {
    position: absolute;
    z-index: 0;
    top: 35px;
    right: -35px;
    color:
        rgba(7, 61, 59, .035);
    font-size:
        clamp(100px, 14vw, 210px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -10px;
    white-space: nowrap;
    pointer-events: none;
    animation:
        gvtBgMove 9s ease-in-out infinite;
}
@keyframes gvtBgMove {
    0%,
    100% {
        transform:
            translateX(0);
    }
    50% {
        transform:
            translateX(-25px);
    }
}
/* =========================================================
   SIDE TEXT
========================================================= */
.gvt-side-word {
    position: absolute;
    z-index: 5;
    left: 20px;
    bottom: 180px;
    color:
        rgba(7, 61, 59, .27);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 4px;
    writing-mode:
        vertical-rl;
    transform:
        rotate(180deg);
}
/* =========================================================
   LEFT INTRO
========================================================= */
.gvt-intro {
    position: relative;
    z-index: 10;
    min-height: 860px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        70px 60px 70px 0;
}
/* =========================================================
   KICKER
========================================================= */
.gvt-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: #e95c00;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 3.5px;
}
.gvt-kicker>span {
    position: relative;
    width: 46px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .18);
}
.gvt-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #e95c00;
    animation:
        gvtKickerMove 2.5s ease-in-out infinite;
}
@keyframes gvtKickerMove {
    0% {
        transform:
            translateX(-110%);
    }
    60%,
    100% {
        transform:
            translateX(110%);
    }
}
/* =========================================================
   TITLE
========================================================= */
.gvt-intro h2 {
    margin: 0;
    color: #073d3b;
    font-size:
        clamp(46px, 4.6vw, 72px);
    font-weight: 900;
    line-height: .94;
    letter-spacing: -2.5px;
}
.gvt-intro h2>span {
    display: block;
    margin-top: 9px;
    color: #777176;
}
/* =========================================================
   INTRO TEXT
========================================================= */
.gvt-intro>p {
    max-width: 480px;
    margin:
        28px 0 0;
    color: #737b7b;
    font-size: 14px;
    line-height: 1.9;
}
/* =========================================================
   STATEMENT
========================================================= */
.gvt-statement {
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
    padding-top: 28px;
    border-top:
        1px solid rgba(7, 61, 59, .14);
}
.gvt-statement-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #073d3b;
    transform:
        rotate(45deg);
    transition:
        background .4s ease,
        transform .5s ease;
}
.gvt-statement:hover .gvt-statement-icon {
    background: #e95c00;
    transform:
        rotate(0deg);
}
.gvt-statement-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform:
        rotate(-45deg);
    transition:
        transform .5s ease;
}
.gvt-statement:hover .gvt-statement-icon svg {
    transform:
        rotate(0deg);
}
.gvt-statement>div:last-child {
    display: flex;
    flex-direction: column;
}
.gvt-statement small {
    color: #a0a4a4;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gvt-statement strong {
    margin-top: 6px;
    color: #073d3b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}
/* =========================================================
   MINI PROCESS
========================================================= */
.gvt-mini-flow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 45px;
}
.gvt-mini-flow span {
    color: #073d3b;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gvt-mini-flow i {
    position: relative;
    width: 35px;
    height: 1px;
    overflow: hidden;
    background:
        rgba(7, 61, 59, .15);
}
.gvt-mini-flow i::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -5px;
    width: 5px;
    height: 5px;
    background: #e95c00;
    border-radius: 50%;
    animation:
        gvtMiniDot 2s linear infinite;
}
@keyframes gvtMiniDot {
    from {
        left: -5px;
    }
    to {
        left: 100%;
    }
}
/* =========================================================
   RIGHT VISUAL
========================================================= */
.gvt-visual {
    position: relative;
    z-index: 10;
    min-height: 860px;
    overflow: hidden;
    background: #073d3b;
    box-shadow:
        0 35px 70px rgba(7, 61, 59, .15);
}
/* =========================================================
   BACKGROUND IMAGE - IMAGE IS IN HTML
========================================================= */
.gvt-rail-bg {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform:
        scale(1.04);
    animation:
        gvtImageZoom 14s ease-in-out infinite alternate;
}
@keyframes gvtImageZoom {
    from {
        transform:
            scale(1.04);
    }
    to {
        transform:
            scale(1.11);
    }
}
/* =========================================================
   IMAGE OVERLAY
========================================================= */
.gvt-image-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(245, 246, 246, .94) 0%,
            rgba(245, 246, 246, .86) 35%,
            rgba(245, 246, 246, .76) 67%,
            rgba(245, 246, 246, .88) 100%);
}
.gvt-image-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(7, 61, 59, .04),
            transparent 35%,
            rgba(7, 61, 59, .08));
}
/* =========================================================
   ORANGE SIDE BLOCK
========================================================= */
.gvt-orange-block {
    position: absolute;
    z-index: 20;
    top: 55px;
    right: 0;
    width: 115px;
    min-height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: #ffffff;
    background: #e95c00;
    box-shadow:
        -15px 18px 35px rgba(0, 0, 0, .12);
    animation:
        gvtOrangeFloat 5s ease-in-out infinite;
}
@keyframes gvtOrangeFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }
    50% {
        transform:
            translateY(10px);
    }
}
.gvt-orange-block span {
    margin-bottom: 5px;
    color:
        rgba(255, 255, 255, .62);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gvt-orange-block strong {
    font-size: 16px;
    font-weight: 900;
    line-height: .95;
}
/* =========================================================
   CORNER DECORATION
========================================================= */
.gvt-corner {
    position: absolute;
    z-index: 15;
    left: 28px;
    top: 28px;
    width: 70px;
    height: 70px;
    border-top:
        2px solid #e95c00;
    border-left:
        2px solid #e95c00;
}
.gvt-corner span:first-child {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 7px;
    height: 7px;
    background: #e95c00;
    border-radius: 50%;
}
.gvt-corner span:last-child {
    position: absolute;
    left: -4px;
    bottom: -4px;
    width: 7px;
    height: 7px;
    background: #e95c00;
    border-radius: 50%;
}
/* =========================================================
   RAIL SYSTEM
========================================================= */
.gvt-rail-system {
    position: relative;
    z-index: 10;
    min-height: 860px;
    padding:
        70px 45px;
}
/* =========================================================
   MAIN RAIL
========================================================= */
.gvt-main-rail {
    position: absolute;
    z-index: 1;
    top: 60px;
    bottom: 60px;
    left: 50%;
    width: 2px;
    overflow: hidden;
    background:
        rgba(7, 61, 59, .20);
    transform:
        translateX(-50%);
}
.gvt-main-rail::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: 120px;
    background:
        linear-gradient(180deg,
            transparent,
            #e95c00,
            transparent);
    animation:
        gvtRailScan 4.5s linear infinite;
}
@keyframes gvtRailScan {
    to {
        top: 100%;
    }
}
/* =========================================================
   MOVING DOT
========================================================= */
.gvt-moving-dot {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
    background: #e95c00;
    border:
        4px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow:
        0 0 0 6px rgba(233, 92, 0, .10);
    transform:
        translateX(-50%);
    animation:
        gvtRailDot 7s ease-in-out infinite;
}
@keyframes gvtRailDot {
    0%,
    100% {
        top: 1%;
    }
    50% {
        top: 96%;
    }
}
/* =========================================================
   COMPONENT ITEM
========================================================= */
.gvt-item {
    position: relative;
    z-index: 5;
    min-height: 145px;
    display: grid;
    grid-template-columns:
        1fr 82px 1fr;
    align-items: center;
}
/* =========================================================
   LEFT ITEMS
========================================================= */
.gvt-item-left .gvt-item-content {
    grid-column: 1;
    text-align: right;
}
.gvt-item-left .gvt-node {
    grid-column: 2;
}
/* =========================================================
   RIGHT ITEMS
========================================================= */
.gvt-item-right .gvt-node {
    grid-column: 2;
}
.gvt-item-right .gvt-item-content {
    grid-column: 3;
    text-align: left;
}
/* =========================================================
   NODE
========================================================= */
.gvt-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gvt-node::before,
.gvt-node::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1px;
    background:
        rgba(7, 61, 59, .25);
}
.gvt-node::before {
    left: -3px;
}
.gvt-node::after {
    right: -3px;
}
/* =========================================================
   NODE ICON
========================================================= */
.gvt-node-icon {
    position: relative;
    z-index: 5;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e95c00;
    background:
        rgba(255, 255, 255, .93);
    border:
        1px solid rgba(233, 92, 0, .45);
    border-radius: 50%;
    box-shadow:
        0 0 0 7px rgba(255, 255, 255, .50);
    backdrop-filter:
        blur(6px);
    transition:
        color .4s ease,
        background .4s ease,
        transform .45s ease,
        box-shadow .4s ease;
}
.gvt-node-icon::before {
    content: "";
    position: absolute;
    inset: 6px;
    border:
        1px dashed rgba(233, 92, 0, .25);
    border-radius: 50%;
    animation:
        gvtNodeRotate 10s linear infinite;
}
@keyframes gvtNodeRotate {
    to {
        transform:
            rotate(360deg);
    }
}
.gvt-node-icon svg {
    position: relative;
    z-index: 3;
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gvt-item:hover .gvt-node-icon {
    color: #ffffff;
    background: #e95c00;
    box-shadow:
        0 0 0 9px rgba(233, 92, 0, .14);
    transform:
        scale(1.1) rotate(8deg);
}
/* =========================================================
   COMPONENT TEXT
========================================================= */
.gvt-item-content {
    position: relative;
    padding:
        18px 20px;
    background:
        rgba(255, 255, 255, .80);
    backdrop-filter:
        blur(7px);
    border:
        1px solid rgba(255, 255, 255, .65);
    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}
.gvt-item:hover .gvt-item-content {
    background:
        rgba(255, 255, 255, .95);
    box-shadow:
        0 14px 30px rgba(7, 61, 59, .10);
}
.gvt-item-left:hover .gvt-item-content {
    transform:
        translateX(-6px);
}
.gvt-item-right:hover .gvt-item-content {
    transform:
        translateX(6px);
}
/* LABEL */
.gvt-label {
    display: block;
    margin-bottom: 5px;
    color: #e95c00;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
/* TITLE */
.gvt-item h3 {
    margin: 0;
    color: #073d3b;
    font-size: 24px;
    font-weight: 900;
    line-height: .95;
    letter-spacing: -1px;
}
.gvt-item h3 span {
    color: #e95c00;
}
/* TEXT */
.gvt-item p {
    max-width: 235px;
    margin:
        8px 0 0;
    color: #737b7b;
    font-size: 9px;
    line-height: 1.55;
}
.gvt-item-left p {
    margin-left: auto;
}
/* =========================================================
   ORANGE HOVER LINE
========================================================= */
.gvt-item-content::after {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 0;
    height: 3px;
    background: #e95c00;
    transition:
        width .4s ease;
}
.gvt-item-left .gvt-item-content::after {
    right: 20px;
}
.gvt-item-right .gvt-item-content::after {
    left: 20px;
}
.gvt-item:hover .gvt-item-content::after {
    width: 55px;
}
/* =========================================================
   IMAGE LABEL
========================================================= */
.gvt-image-label {
    position: absolute;
    z-index: 25;
    right: 30px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding:
        12px 17px;
    color: #ffffff;
    background: #073d3b;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .16);
}
.gvt-image-label>span {
    width: 4px;
    height: 34px;
    background: #e95c00;
}
.gvt-image-label>div {
    display: flex;
    flex-direction: column;
}
.gvt-image-label small {
    color:
        rgba(255, 255, 255, .40);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gvt-image-label strong {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   SUPPORTING HARDWARE
========================================================= */
.gvt-hardware {
    position: relative;
    z-index: 30;
    margin-top: 65px;
    display: grid;
    grid-template-columns:
        235px 1fr;
    gap:
        20px 45px;
    padding:
        30px 35px;
    color: #ffffff;
    background: #073d3b;
    box-shadow:
        14px 14px 0 #e95c00;
}
/* =========================================================
   HARDWARE HEADING
========================================================= */
.gvt-hardware-heading {
    grid-row:
        1 / span 2;
    display: flex;
    align-items: center;
    gap: 15px;
}
.gvt-hardware-line {
    position: relative;
    width: 5px;
    height: 58px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .12);
}
.gvt-hardware-line::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e95c00;
    animation:
        gvtHardwareScan 2.8s ease-in-out infinite;
}
@keyframes gvtHardwareScan {
    0% {
        top: -100%;
    }
    60%,
    100% {
        top: 100%;
    }
}
.gvt-hardware-heading>div {
    display: flex;
    flex-direction: column;
}
.gvt-hardware-heading small {
    color:
        rgba(255, 255, 255, .38);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gvt-hardware-heading strong {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 900;
}
/* =========================================================
   HARDWARE LIST
========================================================= */
.gvt-hardware-list {
    display: flex;
    align-items: center;
    gap: 14px;
}
.gvt-hardware-list span {
    color:
        rgba(255, 255, 255, .72);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.8px;
    transition:
        color .3s ease,
        transform .3s ease;
}
.gvt-hardware-list span:hover {
    color: #e95c00;
    transform:
        translateY(-4px);
}
.gvt-hardware-list i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    background: #e95c00;
    border-radius: 50%;
}
.gvt-hardware>p {
    margin: 0;
    color:
        rgba(255, 255, 255, .48);
    font-size: 11px;
    line-height: 1.6;
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .gvt-components {
        padding:
            90px 0;
    }
    .gvt-intro {
        min-height: auto;
        padding:
            20px 0 70px;
    }
    .gvt-visual {
        min-height: 820px;
    }
    .gvt-rail-system {
        min-height: 820px;
        padding:
            65px 50px;
    }
    .gvt-hardware {
        margin-top: 55px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .gvt-components {
        padding:
            70px 0;
    }
    .gvt-bg-text {
        top: 230px;
        font-size: 80px;
        letter-spacing: -4px;
    }
    .gvt-side-word {
        display: none;
    }
    /* INTRO */
    .gvt-intro {
        padding:
            0 0 55px;
    }
    .gvt-intro h2 {
        font-size:
            clamp(39px, 11vw, 52px);
        letter-spacing: -1.5px;
    }
    /* VISUAL */
    .gvt-visual {
        min-height: auto;
        overflow: hidden;
    }
    .gvt-rail-bg {
        height: 100%;
        object-position: center;
        animation: none;
    }
    .gvt-image-overlay {
        background:
            rgba(245, 246, 246, .84);
    }
    .gvt-orange-block {
        top: 0;
        width: 95px;
        min-height: 120px;
        padding: 15px;
    }
    .gvt-corner {
        left: 18px;
        top: 18px;
        width: 50px;
        height: 50px;
    }
    /* RAIL SYSTEM */
    .gvt-rail-system {
        min-height: 0;
        padding:
            145px 20px 90px;
    }
    .gvt-main-rail {
        top: 135px;
        bottom: 70px;
        left: 48px;
    }
    /* ITEMS */
    .gvt-item {
        min-height: 0;
        display: grid;
        grid-template-columns:
            58px 1fr;
        gap: 15px;
        margin-bottom: 22px;
    }
    .gvt-item-left .gvt-node,
    .gvt-item-right .gvt-node {
        grid-column: 1;
        grid-row: 1;
    }
    .gvt-item-left .gvt-item-content,
    .gvt-item-right .gvt-item-content {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
    }
    .gvt-item-left p {
        margin-left: 0;
    }
    .gvt-node::before,
    .gvt-node::after {
        display: none;
    }
    .gvt-node-icon {
        width: 55px;
        height: 55px;
        box-shadow:
            0 0 0 5px rgba(255, 255, 255, .55);
    }
    .gvt-node-icon svg {
        width: 25px;
        height: 25px;
    }
    .gvt-item-content {
        padding:
            15px;
    }
    .gvt-item h3 {
        font-size: 22px;
    }
    .gvt-item p {
        max-width: none;
        font-size: 10px;
    }
    .gvt-item-left .gvt-item-content::after,
    .gvt-item-right .gvt-item-content::after {
        left: 15px;
        right: auto;
    }
    /* IMAGE LABEL */
    .gvt-image-label {
        right: auto;
        left: 20px;
        bottom: 20px;
    }
    /* HARDWARE */
    .gvt-hardware {
        display: block;
        margin:
            50px 8px 0 0;
        padding:
            25px 20px;
        box-shadow:
            8px 8px 0 #e95c00;
    }
    .gvt-hardware-heading {
        margin-bottom: 25px;
    }
    .gvt-hardware-list {
        display: grid;
        grid-template-columns:
            repeat(2, 1fr);
        gap: 18px;
        margin-bottom: 22px;
    }
    .gvt-hardware-list i {
        display: none;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 390px) {
    .gvt-kicker {
        font-size: 7px;
        letter-spacing: 2px;
    }
    .gvt-statement {
        align-items: flex-start;
    }
    .gvt-statement-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }
    .gvt-rail-system {
        padding-left: 14px;
        padding-right: 14px;
    }
    .gvt-main-rail {
        left: 42px;
    }
    .gvt-item {
        grid-template-columns:
            54px 1fr;
        gap: 11px;
    }
    .gvt-node-icon {
        width: 50px;
        height: 50px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .gvt-components *,
    .gvt-components *::before,
    .gvt-components *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   MISSION BEND MECHANICAL DIAGNOSIS
========================================================= */
.mfx-section {
    --mfx-green: #073d3b;
    --mfx-green-dark: #042e2d;
    --mfx-orange: #e95c00;
    --mfx-light: #f5f6f6;
    --mfx-white: #ffffff;
    --mfx-text: #737b7b;
    position: relative;
    padding: 120px 0 110px;
    overflow: hidden;
    background: var(--mfx-light);
}
/* =========================================================
   BACKGROUND WORD
========================================================= */
.mfx-bg-word {
    position: absolute;
    z-index: 0;
    top: 40px;
    right: -70px;
    color: rgba(7, 61, 59, .027);
    font-size: clamp(110px, 16vw, 245px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -12px;
    white-space: nowrap;
    pointer-events: none;
    animation:
        mfxBackgroundWord 10s ease-in-out infinite;
}
@keyframes mfxBackgroundWord {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-35px);
    }
}
/* =========================================================
   HEADER
========================================================= */
.mfx-header {
    position: relative;
    z-index: 10;
    margin-bottom: 65px;
}
/* =========================================================
   KICKER
========================================================= */
.mfx-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.mfx-kicker-line {
    position: relative;
    width: 52px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .17);
}
.mfx-kicker-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--mfx-orange);
    animation:
        mfxKickerMove 2.4s ease-in-out infinite;
}
@keyframes mfxKickerMove {
    0% {
        transform:
            translateX(-110%);
    }
    65%,
    100% {
        transform:
            translateX(110%);
    }
}
.mfx-kicker-text {
    color:
        var(--mfx-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 3.5px;
}
/* =========================================================
   TITLE
========================================================= */
.mfx-title-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 235px;
    align-items: end;
    gap: 60px;
}
.mfx-title-grid h2 {
    max-width: 960px;
    margin: 0;
    color:
        var(--mfx-green);
    font-size:
        clamp(50px, 5.3vw, 62px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}
.mfx-title-grid h2 span {
    color:
        var(--mfx-orange);
}
/* =========================================================
   HEADER SIDE
========================================================= */
.mfx-header-side {
    position: relative;
    padding:
        0 0 12px 22px;
    border-left:
        1px solid rgba(7, 61, 59, .17);
}
.mfx-header-dot {
    position: absolute;
    top: 0;
    left: -4px;
    width: 7px;
    height: 7px;
    background:
        var(--mfx-orange);
    border-radius: 50%;
    animation:
        mfxHeaderPulse 2s ease-in-out infinite;
}
@keyframes mfxHeaderPulse {
    50% {
        box-shadow:
            0 0 0 10px rgba(233, 92, 0, .10);
    }
}
.mfx-header-side small {
    display: block;
    color: #a0a5a5;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.mfx-header-side strong {
    display: block;
    margin-top: 7px;
    color:
        var(--mfx-green);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}
/* =========================================================
   STORY
========================================================= */
.mfx-story {
    position: relative;
    z-index: 10;
    min-height: 790px;
    padding-top: 75px;
    /*
       IMPORTANT:
       space at bottom is intentional.
       Symptoms no longer overlap the text.
    */
    margin-bottom: 90px;
}
/* =========================================================
   PHOTO
========================================================= */
.mfx-photo {
    position: relative;
    z-index: 5;
    width: 77%;
    height: 610px;
    margin-left: auto;
    overflow: hidden;
    background:
        var(--mfx-green);
    clip-path:
        polygon(6% 0,
            100% 0,
            100% 91%,
            94% 100%,
            0 100%,
            0 9%);
    box-shadow:
        0 35px 80px rgba(7, 61, 59, .15);
}
.mfx-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform:
        scale(1.03);
    animation:
        mfxImageZoom 14s ease-in-out infinite alternate;
}
@keyframes mfxImageZoom {
    from {
        transform:
            scale(1.03);
    }
    to {
        transform:
            scale(1.10);
    }
}
/* =========================================================
   PHOTO OVERLAY
========================================================= */
.mfx-photo-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(4, 46, 45, .50) 0%,
            rgba(4, 46, 45, .08) 45%,
            rgba(4, 46, 45, .15) 100%);
}
/* =========================================================
   SCAN LINE
========================================================= */
.mfx-scan-line {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 10%;
    width: 3px;
    height: 100%;
    background:
        linear-gradient(180deg,
            transparent,
            var(--mfx-orange),
            transparent);
    box-shadow:
        0 0 20px rgba(233, 92, 0, .55);
    animation:
        mfxScanMove 6s ease-in-out infinite;
}
@keyframes mfxScanMove {
    0%,
    100% {
        left: 9%;
        opacity: .35;
    }
    50% {
        left: 91%;
        opacity: 1;
    }
}
/* =========================================================
   PHOTO LABEL
========================================================= */
.mfx-photo-label {
    position: absolute;
    z-index: 5;
    top: 30px;
    right: 35px;
    color:
        rgba(255, 255, 255, .70);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
}
/* =========================================================
   PHOTO CORNERS
========================================================= */
.mfx-corner {
    position: absolute;
    z-index: 5;
    width: 65px;
    height: 65px;
}
.mfx-corner-top {
    top: 35px;
    left: 50px;
    border-top:
        2px solid var(--mfx-orange);
    border-left:
        2px solid var(--mfx-orange);
}
.mfx-corner-bottom {
    right: 35px;
    bottom: 155px;
    border-right:
        2px solid rgba(255, 255, 255, .75);
    border-bottom:
        2px solid rgba(255, 255, 255, .75);
}
/* =========================================================
   ORANGE BOX
========================================================= */
.mfx-orange-box {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    width: 185px;
    height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    overflow: hidden;
    color:
        var(--mfx-white);
    background:
        var(--mfx-orange);
}
.mfx-orange-box::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -50%;
    width: 30%;
    height: 170%;
    background:
        rgba(255, 255, 255, .16);
    transform:
        skewX(-20deg);
    animation:
        mfxOrangeSweep 4s ease-in-out infinite;
}
@keyframes mfxOrangeSweep {
    0%,
    45% {
        left: -50%;
    }
    80%,
    100% {
        left: 140%;
    }
}
.mfx-orange-box small {
    position: relative;
    z-index: 2;
    margin-bottom: 7px;
    color:
        rgba(255, 255, 255, .65);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.mfx-orange-box strong {
    position: relative;
    z-index: 2;
    font-size: 17px;
    font-weight: 900;
    line-height: .95;
}
/* =========================================================
   COMMON COPY
========================================================= */
.mfx-copy {
    background:
        var(--mfx-white);
    box-shadow:
        0 25px 60px rgba(7, 61, 59, .10);
}
.mfx-copy p {
    margin: 0;
    color:
        var(--mfx-text);
    font-size: 12px;
    line-height: 1.85;
}
/* =========================================================
   FIRST COPY
========================================================= */
.mfx-copy-one {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 40%;
    padding:
        32px 38px 32px 32px;
}
/* creates visual connection into image */
.mfx-copy-one::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -55px;
    bottom: 0;
    width: 55px;
    height: 48%;
    background:
        var(--mfx-white);
}
/* =========================================================
   COPY HEADING
========================================================= */
.mfx-copy-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}
.mfx-copy-heading>span {
    width: 5px;
    height: 43px;
    background:
        var(--mfx-orange);
}
.mfx-copy-heading>div {
    display: flex;
    flex-direction: column;
}
.mfx-copy-heading small {
    color:
        var(--mfx-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.mfx-copy-heading strong {
    margin-top: 4px;
    color:
        var(--mfx-green);
    font-size: 14px;
    font-weight: 900;
}
/* =========================================================
   COPY FLOW
========================================================= */
.mfx-copy-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.mfx-copy-flow>span {
    color:
        var(--mfx-green);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.mfx-copy-flow>i {
    position: relative;
    width: 65px;
    height: 1px;
    overflow: hidden;
    background:
        rgba(7, 61, 59, .16);
}
.mfx-copy-flow>i b {
    position: absolute;
    top: -2px;
    left: -5px;
    width: 5px;
    height: 5px;
    background:
        var(--mfx-orange);
    border-radius: 50%;
    animation:
        mfxCopyDot 2.3s linear infinite;
}
@keyframes mfxCopyDot {
    to {
        left: 100%;
    }
}
/* =========================================================
   SECOND COPY
========================================================= */
.mfx-copy-two {
    position: absolute;
    z-index: 25;
    right: 35px;
    bottom: 0;
    width: 44%;
    padding:
        30px 34px 34px;
    border-top:
        5px solid var(--mfx-orange);
}
/* =========================================================
   SECOND COPY HEADER
========================================================= */
.mfx-copy-two-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.mfx-search-icon {
    width: 48px;
    height: 48px;
    flex:
        0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mfx-white);
    background:
        var(--mfx-green);
    border-radius: 50%;
    transition:
        background .35s ease,
        transform .35s ease;
}
.mfx-copy-two:hover .mfx-search-icon {
    background:
        var(--mfx-orange);
    transform:
        rotate(-8deg) scale(1.05);
}
.mfx-search-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mfx-copy-two-top>div {
    display: flex;
    flex-direction: column;
}
.mfx-copy-two-top small {
    color:
        var(--mfx-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.mfx-copy-two-top strong {
    margin-top: 4px;
    color:
        var(--mfx-green);
    font-size: 14px;
    font-weight: 900;
}
/* =========================================================
   BADGE
========================================================= */
.mfx-badge {
    position: absolute;
    z-index: 30;
    left: 34%;
    bottom: 45px;
    width: 125px;
    height: 125px;
    background:
        var(--mfx-light);
    border-radius: 50%;
    box-shadow:
        0 18px 40px rgba(7, 61, 59, .15);
}
.mfx-badge>svg {
    position: absolute;
    inset: 7px;
    width:
        calc(100% - 14px);
    height:
        calc(100% - 14px);
    animation:
        mfxBadgeRotate 16s linear infinite;
}
@keyframes mfxBadgeRotate {
    to {
        transform:
            rotate(360deg);
    }
}
.mfx-badge text {
    fill:
        var(--mfx-green);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.mfx-badge>span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mfx-white);
    background:
        var(--mfx-orange);
    border-radius: 50%;
    transform:
        translate(-50%, -50%);
}
.mfx-badge>span svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* =========================================================
   SYMPTOM SECTION
========================================================= */
.mfx-symptom-section {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns:
        280px minmax(0, 1fr);
    gap: 65px;
    /*
       NO negative margin here.
       Completely separated from text.
    */
    margin-top: 0;
    padding-top: 55px;
    border-top:
        1px solid rgba(7, 61, 59, .13);
}
/* =========================================================
   SYMPTOM INTRO
========================================================= */
.mfx-symptom-intro {
    padding-top: 10px;
}
.mfx-symptom-intro>small {
    color:
        var(--mfx-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.mfx-symptom-intro h3 {
    margin:
        10px 0 17px;
    color:
        var(--mfx-green);
    font-size:
        clamp(30px, 3vw, 44px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -1.8px;
}
.mfx-symptom-intro h3 span {
    display: block;
    color:
        var(--mfx-orange);
}
.mfx-symptom-intro p {
    max-width: 250px;
    margin: 0;
    color:
        var(--mfx-text);
    font-size: 10px;
    line-height: 1.75;
}
/* =========================================================
   SYMPTOM LIST
========================================================= */
.mfx-symptom-list {
    position: relative;
    border-top:
        1px solid rgba(7, 61, 59, .13);
}
/* =========================================================
   SYMPTOM ITEM
========================================================= */
.mfx-symptom-item {
    position: relative;
    display: grid;
    grid-template-columns:
        35px 55px minmax(140px, .9fr) minmax(80px, .7fr) minmax(150px, 1fr) 30px;
    align-items: center;
    gap: 15px;
    min-height: 112px;
    padding:
        15px 15px 15px 0;
    overflow: hidden;
    border-bottom:
        1px solid rgba(7, 61, 59, .13);
    transition:
        padding .4s ease,
        background .4s ease;
}
.mfx-symptom-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        var(--mfx-green);
    transform:
        translateX(-102%);
    transition:
        transform .45s cubic-bezier(.7, 0, .2, 1);
}
.mfx-symptom-item:hover {
    padding-left: 18px;
}
.mfx-symptom-item:hover::before {
    transform:
        translateX(0);
}
/* =========================================================
   NUMBER
========================================================= */
.mfx-symptom-number {
    color:
        rgba(7, 61, 59, .30);
    font-size: 8px;
    font-weight: 900;
    transition:
        color .35s ease;
}
.mfx-symptom-item:hover .mfx-symptom-number {
    color:
        var(--mfx-orange);
}
/* =========================================================
   ICON
========================================================= */
.mfx-symptom-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mfx-orange);
    border:
        1px solid rgba(233, 92, 0, .30);
    border-radius: 50%;
    transition:
        color .35s ease,
        background .35s ease,
        transform .35s ease;
}
.mfx-symptom-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mfx-symptom-item:hover .mfx-symptom-icon {
    color:
        var(--mfx-white);
    background:
        var(--mfx-orange);
    transform:
        rotate(-10deg) scale(1.06);
}
/* =========================================================
   SYMPTOM NAME
========================================================= */
.mfx-symptom-name {
    display: flex;
    flex-direction: column;
}
.mfx-symptom-name small,
.mfx-symptom-cause small {
    color: #9da2a2;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.8px;
    transition:
        color .35s ease;
}
.mfx-symptom-name strong {
    margin-top: 5px;
    color:
        var(--mfx-green);
    font-size: 14px;
    font-weight: 900;
    transition:
        color .35s ease;
}
.mfx-symptom-item:hover .mfx-symptom-name strong {
    color:
        var(--mfx-white);
}
.mfx-symptom-item:hover .mfx-symptom-name small,
.mfx-symptom-item:hover .mfx-symptom-cause small {
    color:
        rgba(255, 255, 255, .40);
}
/* =========================================================
   CONNECTOR
========================================================= */
.mfx-symptom-connector {
    position: relative;
    width: 100%;
    height: 1px;
    overflow: hidden;
    background:
        rgba(7, 61, 59, .15);
}
.mfx-symptom-connector i {
    position: absolute;
    top: -2px;
    left: -6px;
    width: 6px;
    height: 6px;
    background:
        var(--mfx-orange);
    border-radius: 50%;
    transition:
        left .8s ease;
}
.mfx-symptom-item:hover .mfx-symptom-connector {
    background:
        rgba(255, 255, 255, .15);
}
.mfx-symptom-item:hover .mfx-symptom-connector i {
    left:
        calc(100% - 6px);
}
/* =========================================================
   CAUSE
========================================================= */
.mfx-symptom-cause {
    display: flex;
    flex-direction: column;
}
.mfx-symptom-cause strong {
    margin-top: 5px;
    color:
        var(--mfx-text);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.45;
    transition:
        color .35s ease;
}
.mfx-symptom-item:hover .mfx-symptom-cause strong {
    color:
        rgba(255, 255, 255, .72);
}
/* =========================================================
   ARROW
========================================================= */
.mfx-symptom-arrow {
    color:
        var(--mfx-green);
    font-size: 20px;
    transition:
        color .35s ease,
        transform .35s ease;
}
.mfx-symptom-item:hover .mfx-symptom-arrow {
    color:
        var(--mfx-orange);
    transform:
        rotate(45deg);
}
/* =========================================================
   FEATURED SYMPTOM
========================================================= */
.mfx-symptom-featured {
    background:
        rgba(233, 92, 0, .055);
}
.mfx-symptom-featured::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background:
        var(--mfx-orange);
}
/* =========================================================
   FINAL BAR
========================================================= */
.mfx-final {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns:
        60px minmax(300px, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin:
        70px 12px 0 0;
    padding:
        30px 35px;
    color:
        var(--mfx-white);
    background:
        var(--mfx-green);
    box-shadow:
        12px 12px 0 var(--mfx-orange);
}
/* =========================================================
   FINAL ICON
========================================================= */
.mfx-final-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--mfx-white);
    background:
        var(--mfx-orange);
    border-radius: 50%;
}
.mfx-final-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* =========================================================
   FINAL COPY
========================================================= */
.mfx-final-copy {
    display: flex;
    flex-direction: column;
}
.mfx-final-copy small {
    color:
        rgba(255, 255, 255, .40);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.mfx-final-copy strong {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 900;
}
.mfx-final-copy strong span {
    color:
        var(--mfx-orange);
}
/* =========================================================
   FINAL PROCESS
========================================================= */
.mfx-final-process {
    display: flex;
    align-items: center;
    gap: 9px;
}
.mfx-final-process>span {
    color:
        rgba(255, 255, 255, .60);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.mfx-final-process>i {
    position: relative;
    width: 38px;
    height: 1px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .17);
}
.mfx-final-process>i b {
    position: absolute;
    top: -2px;
    left: -5px;
    width: 5px;
    height: 5px;
    background:
        var(--mfx-orange);
    border-radius: 50%;
    animation:
        mfxFinalDot 2.3s linear infinite;
}
@keyframes mfxFinalDot {
    to {
        left: 100%;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .mfx-section {
        padding:
            90px 0;
    }
    .mfx-title-grid {
        grid-template-columns:
            1fr;
        gap: 30px;
    }
    .mfx-header-side {
        max-width: 280px;
    }
    /* STORY */
    .mfx-story {
        min-height: 820px;
        margin-bottom: 80px;
    }
    .mfx-photo {
        width: 83%;
        height: 570px;
    }
    .mfx-copy-one {
        width: 46%;
    }
    .mfx-copy-two {
        width: 50%;
    }
    .mfx-badge {
        left: 27%;
    }
    /* SYMPTOMS */
    .mfx-symptom-section {
        grid-template-columns:
            220px 1fr;
        gap: 35px;
    }
    .mfx-symptom-item {
        grid-template-columns:
            30px 48px 1fr 70px 1fr 25px;
        gap: 10px;
    }
    /* FINAL */
    .mfx-final {
        grid-template-columns:
            60px 1fr;
    }
    .mfx-final-process {
        grid-column:
            1 / -1;
        justify-content: flex-start;
        margin-top: 8px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .mfx-section {
        padding:
            70px 0;
    }
    .mfx-bg-word {
        display: none;
    }
    .mfx-header {
        margin-bottom: 45px;
    }
    .mfx-title-grid h2 {
        font-size:
            clamp(41px, 11vw, 56px);
        line-height: .92;
        letter-spacing: -2.3px;
    }
    /* =====================================================
       STORY BECOMES NATURAL FLOW
    ====================================================== */
    .mfx-story {
        min-height: 0;
        padding-top: 0;
        margin-bottom: 65px;
    }
    /* FIRST TEXT */
    .mfx-copy-one {
        position: relative;
        top: auto;
        left: auto;
        width: 93%;
        padding:
            27px 24px;
        margin:
            0 0 -22px 0;
    }
    .mfx-copy-one::after {
        display: none;
    }
    /* IMAGE */
    .mfx-photo {
        width: 100%;
        height: 500px;
        margin: 0;
    }
    .mfx-photo img {
        animation: none;
    }
    .mfx-photo-label {
        top: 35px;
        right: 22px;
    }
    .mfx-orange-box {
        width: 145px;
        height: 115px;
        padding: 18px;
    }
    /* SECOND TEXT */
    .mfx-copy-two {
        position: relative;
        right: auto;
        bottom: auto;
        width: 92%;
        margin:
            -45px 0 0 auto;
        padding:
            27px 23px;
    }
    /* BADGE */
    .mfx-badge {
        left: 18px;
        bottom: 115px;
        width: 100px;
        height: 100px;
    }
    .mfx-badge>span {
        width: 40px;
        height: 40px;
    }
    /* =====================================================
       SYMPTOM SECTION
    ====================================================== */
    .mfx-symptom-section {
        display: block;
        padding-top: 40px;
    }
    .mfx-symptom-intro {
        max-width: 480px;
        margin-bottom: 35px;
    }
    .mfx-symptom-intro p {
        max-width: 420px;
    }
    .mfx-symptom-item {
        grid-template-columns:
            28px 45px 1fr 25px;
        min-height: 95px;
        padding:
            14px 5px 14px 0;
    }
    .mfx-symptom-connector {
        display: none;
    }
    .mfx-symptom-cause {
        grid-column:
            3 / 4;
        margin-top: -20px;
        padding-top: 30px;
    }
    .mfx-symptom-arrow {
        grid-column: 4;
        grid-row:
            1 / 3;
    }
    /* FINAL */
    .mfx-final {
        display: flex;
        flex-wrap: wrap;
        margin:
            55px 8px 0 0;
        padding:
            25px 20px;
        box-shadow:
            8px 8px 0 var(--mfx-orange);
    }
    .mfx-final-process {
        width: 100%;
        flex-wrap: wrap;
        margin-top: 10px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .mfx-photo {
        height: 430px;
    }
    .mfx-copy-one,
    .mfx-copy-two {
        width: 95%;
    }
    .mfx-badge {
        bottom: 135px;
        width: 90px;
        height: 90px;
    }
    .mfx-symptom-item {
        grid-template-columns:
            26px 42px 1fr 20px;
        gap: 8px;
    }
    .mfx-symptom-icon {
        width: 38px;
        height: 38px;
    }
    .mfx-symptom-name strong {
        font-size: 12px;
    }
    .mfx-final-process>i {
        width: 20px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .mfx-section *,
    .mfx-section *::before,
    .mfx-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   WIDE BEFORE & AFTER
========================================================= */
.wba-section {
    --wba-green: #073d3b;
    --wba-dark: #042e2d;
    --wba-orange: #e95c00;
    --wba-gray: #777176;
    --wba-light: #f5f6f6;
    --wba-white: #ffffff;
    --wba-text: #737b7b;
    position: relative;
    padding: 115px 0 0;
    overflow: hidden;
    background: var(--wba-light);
}
/* =========================================================
   HEADER
========================================================= */
.wba-header {
    position: relative;
    z-index: 10;
    margin-bottom: 55px;
}
/* KICKER */
.wba-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--wba-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 3.5px;
}
.wba-kicker>span {
    position: relative;
    width: 55px;
    height: 3px;
    overflow: hidden;
    background: rgba(233, 92, 0, .16);
}
.wba-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wba-orange);
    animation: wbaKicker 2.5s ease-in-out infinite;
}
@keyframes wbaKicker {
    0% {
        transform: translateX(-110%);
    }
    65%,
    100% {
        transform: translateX(110%);
    }
}
/* =========================================================
   HEADING
========================================================= */
.wba-heading-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr) minmax(280px, .55fr);
    align-items: end;
    gap: 80px;
}
.wba-heading-row h2 {
    max-width: 900px;
    margin: 0;
    color: var(--wba-green);
    font-size: clamp(50px, 5.4vw, 71px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}
.wba-heading-row h2 span {
    display: block;
    color: var(--wba-orange);
}
.wba-heading-row>p {
    max-width: 420px;
    margin: 0 0 6px;
    padding-left: 25px;
    color: var(--wba-text);
    font-size: 11px;
    line-height: 1.8;
    border-left:
        1px solid rgba(7, 61, 59, .16);
}
/* =========================================================
   WIDE VISUAL
========================================================= */
.wba-visual {
    position: relative;
    width: 100%;
    height: 780px;
    overflow: hidden;
    background: var(--wba-green);
}
/* =========================================================
   BEFORE
========================================================= */
.wba-before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 63%;
    height: 100%;
    overflow: hidden;
    background: var(--wba-gray);
}
.wba-before img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter:
        grayscale(55%) saturate(.65) brightness(.82);
    transform: scale(1.03);
    transition:
        transform 1.2s ease,
        filter .8s ease;
}
.wba-before:hover img {
    transform: scale(1.07);
    filter:
        grayscale(30%) saturate(.80) brightness(.87);
}
.wba-before-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(4, 46, 45, .55),
            rgba(4, 46, 45, .08) 70%,
            rgba(4, 46, 45, .25));
}
/* =========================================================
   BEFORE HUGE WORD
========================================================= */
.wba-before-title {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 4vw;
    display: flex;
    flex-direction: column;
    transform:
        translateY(-50%);
}
.wba-before-title small {
    margin: 0 0 12px 7px;
    color:
        rgba(255, 255, 255, .55);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
}
.wba-before-title strong {
    color:
        rgba(255, 255, 255, .32);
    font-size:
        clamp(75px, 10vw, 180px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
/* =========================================================
   BEFORE CAPTION
========================================================= */
.wba-before-caption {
    position: absolute;
    z-index: 5;
    left: 5vw;
    bottom: 55px;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    max-width: 380px;
}
.wba-before-caption>span {
    width: 5px;
    height: 70px;
    flex: 0 0 5px;
    background:
        rgba(255, 255, 255, .40);
}
.wba-before-caption small {
    display: block;
    margin-bottom: 7px;
    color:
        rgba(255, 255, 255, .50);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.wba-before-caption strong {
    display: block;
    color: var(--wba-white);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}
/* =========================================================
   AFTER
========================================================= */
.wba-after {
    position: absolute;
    z-index: 10;
    top: 75px;
    right: 0;
    width: 58%;
    height: 630px;
    overflow: hidden;
    background: var(--wba-dark);
    box-shadow:
        -35px 30px 80px rgba(4, 46, 45, .28);
    clip-path:
        polygon(7% 0,
            100% 0,
            100% 100%,
            0 100%,
            0 10%);
}
.wba-after img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.03);
    animation:
        wbaAfterZoom 13s ease-in-out infinite alternate;
}
@keyframes wbaAfterZoom {
    to {
        transform: scale(1.09);
    }
}
.wba-after-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(4, 46, 45, .10),
            rgba(4, 46, 45, .03) 45%,
            rgba(4, 46, 45, .60));
}
/* =========================================================
   AFTER HUGE WORD
========================================================= */
.wba-after-title {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 3vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transform:
        translateY(-50%);
}
.wba-after-title small {
    margin: 0 8px 12px 0;
    color:
        rgba(255, 255, 255, .65);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
}
.wba-after-title strong {
    color: var(--wba-orange);
    font-size:
        clamp(75px, 9vw, 165px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -7px;
    writing-mode: vertical-rl;
    text-shadow:
        0 12px 35px rgba(0, 0, 0, .16);
}
/* =========================================================
   AFTER CAPTION
========================================================= */
.wba-after-caption {
    position: absolute;
    z-index: 6;
    left: 80px;
    bottom: 55px;
    display: flex;
    flex-direction: column;
}
.wba-after-caption small {
    margin-bottom: 8px;
    color:
        rgba(255, 255, 255, .55);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.wba-after-caption strong {
    color: var(--wba-white);
    font-size: clamp(25px, 2.6vw, 40px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -1px;
}
.wba-after-caption strong span {
    color: var(--wba-orange);
}
/* =========================================================
   CENTER CHANGE BUTTON
========================================================= */
.wba-change {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 47%;
    width: 145px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--wba-green);
    background: var(--wba-white);
    border-radius: 50%;
    box-shadow:
        0 25px 55px rgba(4, 46, 45, .25);
    transform:
        translate(-50%, -50%);
}
.wba-change-ring {
    position: absolute;
    inset: 10px;
    border:
        1px dashed rgba(7, 61, 59, .25);
    border-radius: 50%;
    animation:
        wbaRotate 12s linear infinite;
}
@keyframes wbaRotate {
    to {
        transform: rotate(360deg);
    }
}
.wba-change svg {
    position: relative;
    z-index: 2;
    width: 55px;
    fill: none;
    stroke: var(--wba-orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation:
        wbaArrow 1.7s ease-in-out infinite;
}
@keyframes wbaArrow {
    50% {
        transform: translateX(7px);
    }
}
.wba-change small {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   ORANGE BLOCK
========================================================= */
.wba-orange {
    position: absolute;
    z-index: 35;
    top: 0;
    left: calc(47% + 58px);
    width: 175px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 23px;
    overflow: hidden;
    color: var(--wba-white);
    background: var(--wba-orange);
}
.wba-orange::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -50%;
    width: 35%;
    height: 190%;
    background:
        rgba(255, 255, 255, .15);
    transform: skewX(-20deg);
    animation:
        wbaSweep 4.5s ease-in-out infinite;
}
@keyframes wbaSweep {
    0%,
    45% {
        left: -50%;
    }
    80%,
    100% {
        left: 140%;
    }
}
.wba-orange small {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    color:
        rgba(255, 255, 255, .60);
    font-size: 5px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 1.5px;
}
.wba-orange strong {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 900;
    line-height: .95;
}
.wba-orange>span {
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 18px;
    font-size: 23px;
}
/* =========================================================
   BOTTOM
========================================================= */
.wba-bottom {
    position: relative;
    z-index: 20;
    padding: 40px 0;
    color: var(--wba-white);
    background: var(--wba-green);
}
.wba-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
    height: 4px;
    background: var(--wba-orange);
}
/* =========================================================
   BOTTOM GRID
========================================================= */
.wba-bottom-grid {
    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;
    gap: 70px;
}
/* =========================================================
   BOTTOM HEADING
========================================================= */
.wba-bottom-heading {
    display: flex;
    flex-direction: column;
}
.wba-bottom-heading small {
    color:
        rgba(255, 255, 255, .42);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2.3px;
}
.wba-bottom-heading strong {
    margin-top: 7px;
    font-size: 17px;
    font-weight: 900;
}
.wba-bottom-heading strong span {
    color: var(--wba-orange);
}
/* =========================================================
   PROCESS
========================================================= */
.wba-process {
    display: flex;
    align-items: center;
    gap: 13px;
}
.wba-process>div {
    display: flex;
    flex-direction: column;
}
.wba-process>div span {
    color: var(--wba-orange);
    font-size: 5px;
    font-weight: 900;
}
.wba-process>div strong {
    margin-top: 3px;
    color: var(--wba-white);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.wba-process>i {
    position: relative;
    width: 55px;
    height: 1px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .18);
}
.wba-process>i b {
    position: absolute;
    top: -2px;
    left: -5px;
    width: 5px;
    height: 5px;
    background: var(--wba-orange);
    border-radius: 50%;
    animation:
        wbaFlow 2.2s linear infinite;
}
@keyframes wbaFlow {
    to {
        left: 100%;
    }
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
    .wba-visual {
        height: 850px;
    }
    .wba-after {
        top: 80px;
        height: 690px;
    }
    .wba-after-caption {
        left: 100px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wba-section {
        padding-top: 90px;
    }
    .wba-heading-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .wba-heading-row>p {
        max-width: 550px;
    }
    .wba-visual {
        height: 700px;
    }
    .wba-before {
        width: 67%;
    }
    .wba-after {
        width: 62%;
        height: 560px;
    }
    .wba-change {
        left: 45%;
        width: 120px;
        height: 120px;
    }
    .wba-orange {
        left: calc(45% + 45px);
        width: 150px;
        height: 130px;
    }
    .wba-bottom-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .wba-process {
        justify-content: flex-start;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .wba-section {
        padding-top: 70px;
    }
    .wba-header {
        margin-bottom: 40px;
    }
    .wba-heading-row h2 {
        font-size:
            clamp(40px, 11vw, 55px);
        line-height: .92;
        letter-spacing: -2.3px;
    }
    .wba-heading-row>p {
        padding-left: 18px;
        font-size: 10px;
    }
    /* =============================================
       VISUAL
    ============================================== */
    .wba-visual {
        height: 850px;
        overflow: hidden;
    }
    /* BEFORE */
    .wba-before {
        top: 0;
        left: 0;
        width: 94%;
        height: 430px;
    }
    .wba-before-title {
        left: 18px;
    }
    .wba-before-title strong {
        font-size: 65px;
        letter-spacing: -3px;
    }
    .wba-before-caption {
        left: 80px;
        bottom: 28px;
        max-width: 240px;
    }
    /* AFTER */
    .wba-after {
        top: 350px;
        right: 0;
        width: 94%;
        height: 450px;
        clip-path:
            polygon(8% 0,
                100% 0,
                100% 100%,
                0 100%,
                0 10%);
    }
    .wba-after img {
        animation: none;
    }
    .wba-after-title {
        right: 15px;
    }
    .wba-after-title strong {
        font-size: 68px;
        letter-spacing: -3px;
    }
    .wba-after-caption {
        left: 45px;
        bottom: 35px;
    }
    /* CHANGE */
    .wba-change {
        top: 405px;
        left: 50%;
        width: 100px;
        height: 100px;
    }
    .wba-change svg {
        width: 42px;
    }
    /* ORANGE */
    .wba-orange {
        top: 320px;
        left: auto;
        right: 20px;
        width: 135px;
        height: 110px;
        padding: 17px;
    }
    .wba-orange strong {
        font-size: 13px;
    }
    /* BOTTOM */
    .wba-bottom {
        padding: 32px 0;
    }
    .wba-process {
        flex-wrap: wrap;
    }
    .wba-process>i {
        width: 30px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .wba-visual {
        height: 760px;
    }
    .wba-before {
        height: 380px;
    }
    .wba-after {
        top: 310px;
        height: 410px;
    }
    .wba-change {
        top: 360px;
        width: 88px;
        height: 88px;
    }
    .wba-orange {
        top: 285px;
        width: 120px;
        height: 100px;
    }
    .wba-before-title strong,
    .wba-after-title strong {
        font-size: 55px;
    }
    .wba-after-caption strong {
        font-size: 24px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .wba-section *,
    .wba-section *::before,
    .wba-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   WIDE BEFORE & AFTER
========================================================= */
.wba-section {
    --wba-green: #073d3b;
    --wba-dark: #042e2d;
    --wba-orange: #e95c00;
    --wba-gray: #777176;
    --wba-light: #f5f6f6;
    --wba-white: #ffffff;
    --wba-text: #737b7b;
    position: relative;
    padding-top: 115px;
    overflow: hidden;
    background:
        var(--wba-light);
}
/* =========================================================
   BACKGROUND WORD
========================================================= */
.wba-bg-word {
    position: absolute;
    z-index: 0;
    top: 45px;
    right: -70px;
    color:
        rgba(7, 61, 59, .025);
    font-size:
        clamp(120px, 17vw, 270px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -12px;
    white-space: nowrap;
    pointer-events: none;
    animation:
        wbaBgWord 10s ease-in-out infinite;
}
@keyframes wbaBgWord {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-35px);
    }
}
/* =========================================================
   HEADER
========================================================= */
.wba-header {
    position: relative;
    z-index: 10;
    margin-bottom: 60px;
}
/* =========================================================
   KICKER
========================================================= */
.wba-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color:
        var(--wba-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 3.5px;
}
.wba-kicker>span {
    position: relative;
    width: 55px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .16);
}
.wba-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--wba-orange);
    animation:
        wbaKickerMove 2.5s ease-in-out infinite;
}
@keyframes wbaKickerMove {
    0% {
        transform: translateX(-110%);
    }
    65%,
    100% {
        transform: translateX(110%);
    }
}
/* =========================================================
   HEADING
========================================================= */
.wba-heading-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr) minmax(280px, .55fr);
    align-items: end;
    gap: 80px;
}
.wba-heading-row h2 {
    max-width: 930px;
    margin: 0;
    color:
        var(--wba-green);
    font-size:
        clamp(50px, 5.4vw, 71px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -4px;
}
.wba-heading-row h2 span {
    display: block;
    color:
        var(--wba-orange);
}
/* =========================================================
   HEADER COPY
========================================================= */
.wba-header-copy {
    display: grid;
    grid-template-columns:
        4px 1fr;
    gap: 20px;
    align-items: stretch;
    padding-bottom: 5px;
}
.wba-header-line {
    position: relative;
    width: 4px;
    min-height: 80px;
    overflow: hidden;
    background:
        rgba(7, 61, 59, .12);
}
.wba-header-line::after {
    content: "";
    position: absolute;
    top: -40%;
    left: 0;
    width: 100%;
    height: 40%;
    background:
        var(--wba-orange);
    animation:
        wbaHeaderLine 3s ease-in-out infinite;
}
@keyframes wbaHeaderLine {
    0% {
        top: -40%;
    }
    65%,
    100% {
        top: 110%;
    }
}
.wba-header-copy p {
    max-width: 420px;
    margin: 0;
    color:
        var(--wba-text);
    font-size: 11px;
    line-height: 1.85;
}
/* =========================================================
   FULL WIDTH VISUAL
========================================================= */
.wba-visual {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 780px;
    overflow: hidden;
    background:
        var(--wba-green);
}
/* =========================================================
   BEFORE
========================================================= */
.wba-before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 63%;
    height: 100%;
    overflow: hidden;
    background:
        var(--wba-gray);
}
/* =========================================================
   BEFORE IMAGE
========================================================= */
.wba-before img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter:
        grayscale(52%) saturate(.68) brightness(.84);
    transform:
        scale(1.03);
    transition:
        transform 1.2s ease,
        filter .8s ease;
}
.wba-before:hover img {
    filter:
        grayscale(30%) saturate(.82) brightness(.90);
    transform:
        scale(1.07);
}
/* =========================================================
   BEFORE OVERLAY
========================================================= */
.wba-before-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(4, 46, 45, .55) 0%,
            rgba(4, 46, 45, .08) 70%,
            rgba(4, 46, 45, .20) 100%);
}
/* =========================================================
   BEFORE TITLE
========================================================= */
.wba-before-title {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 4vw;
    display: flex;
    flex-direction: column;
    transform:
        translateY(-50%);
}
.wba-before-title small {
    margin:
        0 0 13px 7px;
    color:
        rgba(255, 255, 255, .55);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
}
.wba-before-title strong {
    color:
        rgba(255, 255, 255, .32);
    font-size:
        clamp(78px, 10vw, 180px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -8px;
    writing-mode:
        vertical-rl;
    transform:
        rotate(180deg);
}
/* =========================================================
   BEFORE CAPTION
========================================================= */
.wba-before-caption {
    position: absolute;
    z-index: 6;
    left: 5vw;
    bottom: 55px;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    max-width: 390px;
}
.wba-before-caption>span {
    width: 5px;
    height: 70px;
    flex:
        0 0 5px;
    background:
        rgba(255, 255, 255, .42);
}
.wba-before-caption small {
    display: block;
    margin-bottom: 7px;
    color:
        rgba(255, 255, 255, .50);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.wba-before-caption strong {
    display: block;
    color:
        var(--wba-white);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}
/* =========================================================
   CORNERS
========================================================= */
.wba-corner {
    position: absolute;
    z-index: 6;
    width: 65px;
    height: 65px;
}
.wba-before-corner {
    top: 35px;
    left: 35px;
    border-top:
        2px solid rgba(255, 255, 255, .50);
    border-left:
        2px solid rgba(255, 255, 255, .50);
}
/* =========================================================
   AFTER STROKES
   IMPORTANT:
   AFTER itself remains:
   top:75px;
   right:0;
   width:58%;
   height:630px;
   Strokes are separate layers behind it.
========================================================= */
/* =========================================================
   ORANGE OUTER STROKE
========================================================= */
.wba-after-orange-stroke {
    position: absolute;
    z-index: 8;
    top: 65px;
    right: 0;
    width:
        calc(58% + 10px);
    height:
        650px;
    background:
        var(--wba-orange);
    clip-path:
        polygon(7% 0,
            100% 0,
            100% 100%,
            0 100%,
            0 10%);
    pointer-events: none;
}
/* =========================================================
   WHITE INNER STROKE
========================================================= */
.wba-after-white-stroke {
    position: absolute;
    z-index: 9;
    top: 69px;
    right: 0;
    width:
        calc(58% + 6px);
    height:
        642px;
    background:
        var(--wba-white);
    clip-path:
        polygon(7% 0,
            100% 0,
            100% 100%,
            0 100%,
            0 10%);
    pointer-events: none;
}
/* =========================================================
   AFTER
   EXACT ORIGINAL SIZE
========================================================= */
.wba-after {
    position: absolute;
    z-index: 10;
    top: 75px;
    right: 0;
    width: 58%;
    height: 630px;
    overflow: hidden;
    background:
        var(--wba-dark);
    box-shadow:
        -35px 30px 80px rgba(4, 46, 45, .28);
    clip-path:
        polygon(7% 0,
            100% 0,
            100% 100%,
            0 100%,
            0 10%);
}
/* =========================================================
   AFTER IMAGE
========================================================= */
.wba-after img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform:
        scale(1.03);
    animation:
        wbaAfterZoom 13s ease-in-out infinite alternate;
}
@keyframes wbaAfterZoom {
    from {
        transform: scale(1.03);
    }
    to {
        transform: scale(1.09);
    }
}
/* =========================================================
   AFTER OVERLAY
========================================================= */
.wba-after-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(4, 46, 45, .08) 0%,
            rgba(4, 46, 45, .03) 45%,
            rgba(4, 46, 45, .62) 100%);
}
/* =========================================================
   AFTER LABEL
========================================================= */
.wba-after-label {
    position: absolute;
    z-index: 6;
    top: 30px;
    left: 80px;
    color:
        rgba(255, 255, 255, .65);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2.7px;
}
/* =========================================================
   AFTER TITLE
========================================================= */
.wba-after-title {
    position: absolute;
    z-index: 6;
    top: 50%;
    right: 3vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transform:
        translateY(-50%);
}
.wba-after-title small {
    margin:
        0 8px 13px 0;
    color:
        rgba(255, 255, 255, .65);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
}
.wba-after-title strong {
    color:
        var(--wba-orange);
    font-size:
        clamp(78px, 9vw, 165px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -7px;
    writing-mode:
        vertical-rl;
    text-shadow:
        0 12px 35px rgba(0, 0, 0, .16);
}
/* =========================================================
   AFTER CAPTION
========================================================= */
.wba-after-caption {
    position: absolute;
    z-index: 6;
    left: 80px;
    bottom: 55px;
    display: flex;
    flex-direction: column;
}
.wba-after-caption small {
    margin-bottom: 8px;
    color:
        rgba(255, 255, 255, .55);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.wba-after-caption strong {
    color:
        var(--wba-white);
    font-size:
        clamp(25px, 2.6vw, 40px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -1px;
}
.wba-after-caption strong span {
    color:
        var(--wba-orange);
}
/* =========================================================
   AFTER CORNER
========================================================= */
.wba-after-corner {
    top: 30px;
    right: 30px;
    border-top:
        2px solid var(--wba-orange);
    border-right:
        2px solid var(--wba-orange);
}
/* =========================================================
   TRANSFORMATION CIRCLE
========================================================= */
.wba-change {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 47%;
    width: 145px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:
        var(--wba-green);
    background:
        var(--wba-white);
    border-radius: 50%;
    box-shadow:
        0 25px 55px rgba(4, 46, 45, .25);
    transform:
        translate(-50%, -50%);
}
/* ROTATING RING */
.wba-change-ring {
    position: absolute;
    inset: 10px;
    border:
        1px dashed rgba(7, 61, 59, .25);
    border-radius: 50%;
    animation:
        wbaChangeRotate 12s linear infinite;
}
@keyframes wbaChangeRotate {
    to {
        transform: rotate(360deg);
    }
}
/* CHANGE ARROW */
.wba-change svg {
    position: relative;
    z-index: 2;
    width: 55px;
    fill: none;
    stroke:
        var(--wba-orange);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation:
        wbaChangeArrow 1.7s ease-in-out infinite;
}
@keyframes wbaChangeArrow {
    50% {
        transform: translateX(7px);
    }
}
.wba-change small {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    color:
        var(--wba-green);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   ORANGE FLOATING BLOCK
========================================================= */
.wba-orange {
    position: absolute;
    z-index: 35;
    top: 0;
    left:
        calc(47% + 58px);
    width: 175px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 23px;
    overflow: hidden;
    color:
        var(--wba-white);
    background:
        var(--wba-orange);
}
.wba-orange::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -50%;
    width: 35%;
    height: 190%;
    background:
        rgba(255, 255, 255, .15);
    transform:
        skewX(-20deg);
    animation:
        wbaOrangeSweep 4.5s ease-in-out infinite;
}
@keyframes wbaOrangeSweep {
    0%,
    45% {
        left: -50%;
    }
    80%,
    100% {
        left: 140%;
    }
}
.wba-orange small {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    color:
        rgba(255, 255, 255, .62);
    font-size: 5px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 1.5px;
}
.wba-orange strong {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 900;
    line-height: .95;
}
.wba-orange>span {
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 18px;
    font-size: 23px;
}
/* =========================================================
   BOTTOM STRIP
========================================================= */
.wba-bottom {
    position: relative;
    z-index: 20;
    padding:
        40px 0;
    color:
        var(--wba-white);
    background:
        var(--wba-green);
}
.wba-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
    height: 4px;
    background:
        var(--wba-orange);
}
/* =========================================================
   BOTTOM GRID
========================================================= */
.wba-bottom-grid {
    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;
    gap: 70px;
}
/* =========================================================
   BOTTOM HEADING
========================================================= */
.wba-bottom-heading {
    display: flex;
    flex-direction: column;
}
.wba-bottom-heading small {
    color:
        rgba(255, 255, 255, .42);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2.3px;
}
.wba-bottom-heading strong {
    margin-top: 7px;
    color:
        var(--wba-white);
    font-size: 17px;
    font-weight: 900;
}
.wba-bottom-heading strong span {
    color:
        var(--wba-orange);
}
/* =========================================================
   PROCESS
========================================================= */
.wba-process {
    display: flex;
    align-items: center;
    gap: 13px;
}
.wba-process>div {
    display: flex;
    flex-direction: column;
}
.wba-process>div span {
    color:
        var(--wba-orange);
    font-size: 5px;
    font-weight: 900;
}
.wba-process>div strong {
    margin-top: 3px;
    color:
        var(--wba-white);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.wba-process>i {
    position: relative;
    width: 55px;
    height: 1px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .18);
}
.wba-process>i b {
    position: absolute;
    top: -2px;
    left: -5px;
    width: 5px;
    height: 5px;
    background:
        var(--wba-orange);
    border-radius: 50%;
    animation:
        wbaProcessDot 2.2s linear infinite;
}
@keyframes wbaProcessDot {
    to {
        left: 100%;
    }
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
    .wba-visual {
        height: 850px;
    }
    /*
       Original AFTER:
       top 80px
       width remains 58%
       height 690px
    */
    .wba-after {
        top: 80px;
        height: 690px;
    }
    /* STROKES ONLY GROW OUTWARD */
    .wba-after-orange-stroke {
        top: 70px;
        width:
            calc(58% + 10px);
        height: 710px;
    }
    .wba-after-white-stroke {
        top: 74px;
        width:
            calc(58% + 6px);
        height: 702px;
    }
    .wba-after-caption {
        left: 100px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .wba-section {
        padding-top: 90px;
    }
    .wba-heading-row {
        grid-template-columns:
            1fr;
        gap: 30px;
    }
    .wba-header-copy {
        max-width: 570px;
    }
    /* VISUAL */
    .wba-visual {
        height: 700px;
    }
    .wba-before {
        width: 67%;
    }
    /*
       AFTER original tablet dimensions
    */
    .wba-after {
        width: 62%;
        height: 560px;
    }
    /* STROKES OUTSIDE */
    .wba-after-orange-stroke {
        top: 65px;
        width:
            calc(62% + 10px);
        height: 580px;
    }
    .wba-after-white-stroke {
        top: 69px;
        width:
            calc(62% + 6px);
        height: 572px;
    }
    /* CHANGE */
    .wba-change {
        left: 45%;
        width: 120px;
        height: 120px;
    }
    /* ORANGE */
    .wba-orange {
        left:
            calc(45% + 45px);
        width: 150px;
        height: 130px;
    }
    /* BOTTOM */
    .wba-bottom-grid {
        grid-template-columns:
            1fr;
        gap: 25px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .wba-section {
        padding-top: 70px;
    }
    .wba-bg-word {
        display: none;
    }
    .wba-header {
        margin-bottom: 42px;
    }
    .wba-heading-row h2 {
        font-size:
            clamp(40px, 11vw, 55px);
        line-height: .92;
        letter-spacing: -2.3px;
    }
    .wba-header-copy p {
        font-size: 10px;
    }
    /* =====================================================
       VISUAL
    ====================================================== */
    .wba-visual {
        height: 850px;
    }
    /* =====================================================
       BEFORE
    ====================================================== */
    .wba-before {
        top: 0;
        left: 0;
        width: 94%;
        height: 430px;
    }
    .wba-before-title {
        left: 18px;
    }
    .wba-before-title strong {
        font-size: 65px;
        letter-spacing: -3px;
    }
    .wba-before-caption {
        left: 80px;
        bottom: 28px;
        max-width: 240px;
    }
    .wba-before-caption strong {
        font-size: 12px;
    }
    /* =====================================================
       AFTER - ORIGINAL MOBILE SIZE
    ====================================================== */
    .wba-after {
        top: 350px;
        right: 0;
        width: 94%;
        height: 450px;
        clip-path:
            polygon(8% 0,
                100% 0,
                100% 100%,
                0 100%,
                0 10%);
    }
    /*
       Strokes remain OUTSIDE the image.
       Image does not get smaller.
    */
    .wba-after-orange-stroke {
        top: 338px;
        right: 0;
        width:
            calc(94% + 10px);
        height: 474px;
        clip-path:
            polygon(8% 0,
                100% 0,
                100% 100%,
                0 100%,
                0 10%);
    }
    .wba-after-white-stroke {
        top: 343px;
        right: 0;
        width:
            calc(94% + 6px);
        height: 464px;
        clip-path:
            polygon(8% 0,
                100% 0,
                100% 100%,
                0 100%,
                0 10%);
    }
    .wba-after img {
        animation: none;
    }
    .wba-after-label {
        left: 45px;
    }
    .wba-after-title {
        right: 15px;
    }
    .wba-after-title strong {
        font-size: 68px;
        letter-spacing: -3px;
    }
    .wba-after-caption {
        left: 45px;
        bottom: 35px;
    }
    /* =====================================================
       CHANGE
    ====================================================== */
    .wba-change {
        top: 405px;
        left: 50%;
        width: 100px;
        height: 100px;
    }
    .wba-change svg {
        width: 42px;
    }
    /* =====================================================
       ORANGE BLOCK
    ====================================================== */
    .wba-orange {
        top: 320px;
        left: auto;
        right: 20px;
        width: 135px;
        height: 110px;
        padding: 17px;
    }
    .wba-orange strong {
        font-size: 13px;
    }
    /* =====================================================
       BOTTOM
    ====================================================== */
    .wba-bottom {
        padding:
            32px 0;
    }
    .wba-process {
        flex-wrap: wrap;
    }
    .wba-process>i {
        width: 30px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .wba-visual {
        height: 760px;
    }
    /* BEFORE */
    .wba-before {
        height: 380px;
    }
    .wba-before-title strong {
        font-size: 54px;
    }
    .wba-before-caption {
        left: 62px;
    }
    /* =====================================================
       AFTER - SAME ORIGINAL SIZE
    ====================================================== */
    .wba-after {
        top: 310px;
        height: 410px;
    }
    /* STROKES */
    .wba-after-orange-stroke {
        top: 298px;
        height: 434px;
    }
    .wba-after-white-stroke {
        top: 303px;
        height: 424px;
    }
    .wba-after-title strong {
        font-size: 55px;
    }
    .wba-after-caption strong {
        font-size: 23px;
    }
    /* CHANGE */
    .wba-change {
        top: 360px;
        width: 88px;
        height: 88px;
    }
    /* ORANGE */
    .wba-orange {
        top: 285px;
        width: 120px;
        height: 100px;
    }
    .wba-orange small {
        font-size: 4px;
    }
    .wba-orange strong {
        font-size: 12px;
    }
    /* PROCESS */
    .wba-process>i {
        width: 20px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .wba-section *,
    .wba-section *::before,
    .wba-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   INTEGRATED HARDWARE SYSTEMS
   EDITORIAL SPLIT
========================================================= */
.ims-section {
    --ims-orange: #e95c00;
    --ims-orange-dark: #c94e00;
    --ims-green: #073d3b;
    --ims-dark: #042e2d;
    --ims-gray: #777176;
    --ims-light: #f5f6f6;
    --ims-white: #ffffff;
    --ims-text: #737b7b;
    position: relative;
    padding: 120px 0 0;
    overflow: hidden;
    background:
        var(--ims-light);
}
/* =========================================================
   BACKGROUND NUMBER
========================================================= */
.ims-bg-number {
    position: absolute;
    z-index: 0;
    top: 25px;
    right: 2vw;
    color:
        rgba(7, 61, 59, .025);
    font-size:
        clamp(220px, 32vw, 520px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -30px;
    pointer-events: none;
}
/* =========================================================
   SIDE TEXT
========================================================= */
.ims-side-text {
    position: absolute;
    z-index: 5;
    top: 300px;
    right: 17px;
    color:
        rgba(7, 61, 59, .28);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 3px;
    writing-mode:
        vertical-rl;
    pointer-events: none;
}
/* =========================================================
   MAIN LAYOUT
========================================================= */
.ims-layout {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns:
        minmax(0, .88fr) 120px minmax(0, 1.12fr);
    min-height: 900px;
}
/* =========================================================
   LEFT
========================================================= */
.ims-left {
    position: relative;
    min-height: 900px;
    padding:
        60px 70px 65px;
    overflow: hidden;
    color:
        var(--ims-white);
    background:
        var(--ims-green);
}
/* =========================================================
   LEFT GRID
========================================================= */
.ims-left-grid {
    position: absolute;
    inset: 0;
    opacity: .17;
    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:
        65px 65px;
    pointer-events: none;
}
/* =========================================================
   LEFT TOP
========================================================= */
.ims-left-top {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* =========================================================
   KICKER
========================================================= */
.ims-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    color:
        var(--ims-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2.7px;
}
.ims-kicker>span {
    position: relative;
    width: 45px;
    height: 2px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .20);
}
.ims-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--ims-orange);
    animation:
        imsKickerMove 2.4s ease-in-out infinite;
}
@keyframes imsKickerMove {
    0% {
        transform: translateX(-110%);
    }
    65%,
    100% {
        transform: translateX(110%);
    }
}
.ims-index {
    color:
        rgba(255, 255, 255, .35);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   MAIN LEFT HEADING
========================================================= */
.ims-heading {
    position: relative;
    z-index: 5;
    margin-top: 130px;
}
.ims-heading>small {
    display: block;
    margin-bottom: 18px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2.6px;
}
.ims-heading h2 {
    max-width: 530px;
    margin: 0;
    color:
        var(--ims-white);
    font-size:
        clamp(58px, 6vw, 80px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -6px;
}
.ims-heading h2 span {
    display: block;
    margin:
        10px 0;
    color:
        var(--ims-orange);
}
/* =========================================================
   VERTICAL MOVEMENT WORD
========================================================= */
.ims-vertical-word {
    position: absolute;
    z-index: 2;
    top: 235px;
    right: 18px;
    color:
        rgba(255, 255, 255, .035);
    font-size: 88px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -5px;
    writing-mode:
        vertical-rl;
    pointer-events: none;
}
/* =========================================================
   LEFT MESSAGE
========================================================= */
.ims-left-message {
    position: absolute;
    z-index: 5;
    left: 70px;
    right: 70px;
    bottom: 65px;
    display: grid;
    grid-template-columns:
        5px 1fr;
    gap: 22px;
}
.ims-message-line {
    position: relative;
    width: 5px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .15);
}
.ims-message-line::after {
    content: "";
    position: absolute;
    top: -40%;
    left: 0;
    width: 100%;
    height: 40%;
    background:
        var(--ims-orange);
    animation:
        imsVerticalScan 3.2s ease-in-out infinite;
}
@keyframes imsVerticalScan {
    0% {
        top: -40%;
    }
    65%,
    100% {
        top: 110%;
    }
}
.ims-left-message small {
    display: block;
    margin-bottom: 8px;
    color:
        rgba(255, 255, 255, .40);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ims-left-message strong {
    display: block;
    max-width: 400px;
    color:
        var(--ims-white);
    font-size:
        clamp(18px, 1.8vw, 25px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
}
.ims-left-message strong span {
    display: block;
    color:
        var(--ims-orange);
}
/* =========================================================
   CORNERS
========================================================= */
.ims-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
}
.ims-corner-one {
    top: 28px;
    left: 28px;
    border-top:
        1px solid rgba(255, 255, 255, .25);
    border-left:
        1px solid rgba(255, 255, 255, .25);
}
.ims-corner-two {
    right: 28px;
    bottom: 28px;
    border-right:
        1px solid var(--ims-orange);
    border-bottom:
        1px solid var(--ims-orange);
}
/* =========================================================
   ORANGE BRIDGE
========================================================= */
.ims-bridge {
    position: relative;
    z-index: 20;
    min-height: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:
        45px 15px 35px;
    color:
        var(--ims-white);
    background:
        var(--ims-orange);
    box-shadow:
        20px 0 45px rgba(4, 46, 45, .07),
        -20px 0 45px rgba(4, 46, 45, .07);
}
.ims-bridge::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -50%;
    width: 80%;
    height: 220%;
    background:
        rgba(255, 255, 255, .09);
    transform:
        rotate(15deg);
    animation:
        imsBridgeSweep 7s ease-in-out infinite;
}
@keyframes imsBridgeSweep {
    0%,
    35% {
        left: -100%;
    }
    75%,
    100% {
        left: 170%;
    }
}
/* =========================================================
   BRIDGE CONTENT
========================================================= */
.ims-bridge-top {
    position: relative;
    z-index: 2;
    color:
        rgba(255, 255, 255, .55);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 3px;
    writing-mode:
        vertical-rl;
}
.ims-bridge-arrow {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    margin:
        40px 0;
}
.ims-bridge-arrow>span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--ims-white);
    box-shadow:
        0 0 0 7px rgba(255, 255, 255, .12);
    animation:
        imsBridgePulse 1.8s ease-in-out infinite;
}
@keyframes imsBridgePulse {
    50% {
        box-shadow:
            0 0 0 14px rgba(255, 255, 255, 0);
    }
}
.ims-bridge-arrow svg {
    width: 24px;
    height: 60px;
    fill: none;
    stroke:
        rgba(255, 255, 255, .65);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation:
        imsArrowMove 1.8s ease-in-out infinite;
}
@keyframes imsArrowMove {
    50% {
        transform:
            translateY(8px);
    }
}
.ims-bridge>strong {
    position: relative;
    z-index: 2;
    margin: auto 0;
    color:
        var(--ims-white);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1px;
    writing-mode:
        vertical-rl;
    transform:
        rotate(180deg);
}
.ims-bridge>small {
    position: relative;
    z-index: 2;
    color:
        rgba(255, 255, 255, .55);
    font-size: 4px;
    font-weight: 900;
    letter-spacing: 2px;
    writing-mode:
        vertical-rl;
}
/* =========================================================
   RIGHT
========================================================= */
.ims-right {
    position: relative;
    min-height: 900px;
    padding:
        48px 60px 55px;
    background:
        rgba(255, 255, 255, .72);
    border-top:
        1px solid rgba(7, 61, 59, .10);
    border-right:
        1px solid rgba(7, 61, 59, .10);
    border-bottom:
        1px solid rgba(7, 61, 59, .10);
}
/* =========================================================
   RIGHT TOP
========================================================= */
.ims-right-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom:
        1px solid rgba(7, 61, 59, .12);
}
.ims-right-top>div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ims-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background:
        var(--ims-orange);
    box-shadow:
        0 0 0 6px rgba(233, 92, 0, .10);
    animation:
        imsStatus 1.8s ease-in-out infinite;
}
@keyframes imsStatus {
    50% {
        box-shadow:
            0 0 0 12px rgba(233, 92, 0, 0);
    }
}
.ims-right-top small,
.ims-right-top>span {
    color:
        var(--ims-text);
    font-size: 4px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
/* =========================================================
   RIGHT HEADING
========================================================= */
.ims-right-heading {
    display: grid;
    grid-template-columns:
        80px 1fr;
    gap: 25px;
    align-items: start;
    padding:
        55px 0 45px;
}
.ims-right-number {
    color:
        rgba(7, 61, 59, .09);
    font-size: 68px;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -5px;
}
.ims-right-heading small {
    display: block;
    margin-bottom: 9px;
    color:
        var(--ims-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ims-right-heading strong {
    display: block;
    max-width: 540px;
    color:
        var(--ims-green);
    font-size:
        clamp(24px, 2.4vw, 36px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.7px;
}
.ims-right-heading strong span {
    display: block;
    color:
        var(--ims-orange);
}
/* =========================================================
   COPY
========================================================= */
.ims-copy {
    display: grid;
    grid-template-columns:
        115px 1fr;
    gap: 30px;
    padding:
        32px 0;
    border-top:
        1px solid rgba(7, 61, 59, .12);
}
/* =========================================================
   COPY META
========================================================= */
.ims-copy-meta {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}
.ims-copy-meta>span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex:
        0 0 34px;
    color:
        var(--ims-white);
    background:
        var(--ims-green);
    font-size: 9px;
    font-weight: 900;
}
.ims-copy-meta small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--ims-text);
    font-size: 4px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.ims-copy-meta strong {
    color:
        var(--ims-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.ims-copy p {
    margin: 0;
    color:
        var(--ims-text);
    font-size: 11px;
    line-height: 1.9;
}
/* =========================================================
   PULL QUOTE
========================================================= */
.ims-pullquote {
    position: relative;
    margin:
        15px 0;
    padding:
        35px 40px 35px 70px;
    overflow: hidden;
    background:
        var(--ims-green);
}
.ims-pullquote::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background:
        var(--ims-orange);
}
.ims-pullquote>span {
    position: absolute;
    top: 0;
    left: 20px;
    color:
        rgba(255, 255, 255, .09);
    font-family:
        Georgia, serif;
    font-size: 100px;
    line-height: 1;
}
.ims-pullquote strong {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 500px;
    color:
        var(--ims-white);
    font-size:
        clamp(19px, 1.9vw, 27px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1px;
}
.ims-pullquote strong em {
    color:
        var(--ims-orange);
    font-style: normal;
}
/* =========================================================
   RESULT
========================================================= */
.ims-result {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    padding-top: 30px;
    border-top:
        1px solid rgba(7, 61, 59, .12);
}
.ims-result-title small {
    display: block;
    margin-bottom: 6px;
    color:
        var(--ims-text);
    font-size: 4px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.ims-result-title strong {
    display: block;
    color:
        var(--ims-green);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
}
.ims-result-title strong span {
    color:
        var(--ims-orange);
}
/* =========================================================
   RESULT WORDS
========================================================= */
.ims-result-words {
    display: flex;
    align-items: center;
    gap: 9px;
}
.ims-result-words span {
    color:
        var(--ims-green);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1px;
}
.ims-result-words i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ims-orange);
}
/* =========================================================
   BOTTOM MARQUEE
========================================================= */
.ims-bottom {
    position: relative;
    z-index: 20;
    width: 100%;
    overflow: hidden;
    padding:
        23px 0;
    background:
        var(--ims-dark);
}
.ims-track {
    width: 100%;
    overflow: hidden;
}
.ims-track>div {
    display: inline-flex;
    align-items: center;
    gap: 35px;
    min-width: max-content;
    color:
        rgba(255, 255, 255, .60);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    animation:
        imsTrackMove 30s linear infinite;
}
.ims-track span {
    color:
        var(--ims-orange);
    font-size: 13px;
}
@keyframes imsTrackMove {
    from {
        transform:
            translateX(0);
    }
    to {
        transform:
            translateX(-50%);
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1199.98px) {
    .ims-layout {
        grid-template-columns:
            minmax(0, .85fr) 90px minmax(0, 1.15fr);
    }
    .ims-left {
        padding:
            50px 45px;
    }
    .ims-left-message {
        left: 45px;
        right: 45px;
    }
    .ims-right {
        padding:
            45px 40px;
    }
    .ims-copy {
        grid-template-columns:
            95px 1fr;
        gap: 20px;
    }
}
/* =========================================================
   TABLET STACK
========================================================= */
@media (max-width: 991.98px) {
    .ims-section {
        padding-top: 90px;
    }
    .ims-layout {
        grid-template-columns:
            1fr 90px;
    }
    .ims-left {
        min-height: 720px;
    }
    .ims-bridge {
        min-height: 720px;
    }
    .ims-right {
        grid-column:
            1 / -1;
        min-height: auto;
        border-left:
            1px solid rgba(7, 61, 59, .10);
        border-top: 0;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .ims-section {
        padding-top: 65px;
    }
    .ims-bg-number,
    .ims-side-text {
        display: none;
    }
    .ims-layout {
        display: block;
    }
    /* LEFT */
    .ims-left {
        min-height: 650px;
        padding:
            40px 28px;
    }
    .ims-heading {
        margin-top: 100px;
    }
    .ims-heading h2 {
        font-size:
            clamp(54px, 16vw, 75px);
        letter-spacing: -4px;
    }
    .ims-left-message {
        left: 28px;
        right: 28px;
        bottom: 40px;
    }
    /* BRIDGE */
    .ims-bridge {
        min-height: 0;
        width: 100%;
        display: grid;
        grid-template-columns:
            auto 1fr auto;
        align-items: center;
        gap: 20px;
        padding:
            22px 25px;
    }
    .ims-bridge-top,
    .ims-bridge>small {
        writing-mode:
            initial;
    }
    .ims-bridge-arrow {
        display: none;
    }
    .ims-bridge>strong {
        margin: 0;
        font-size: 13px;
        line-height: 1.1;
        writing-mode:
            initial;
        transform: none;
    }
    /* RIGHT */
    .ims-right {
        padding:
            35px 24px 45px;
    }
    .ims-right-top {
        gap: 15px;
    }
    .ims-right-top>span {
        display: none;
    }
    .ims-right-heading {
        grid-template-columns:
            55px 1fr;
        gap: 15px;
        padding:
            40px 0 30px;
    }
    .ims-right-number {
        font-size: 48px;
    }
    .ims-right-heading strong {
        font-size:
            clamp(23px, 7vw, 31px);
    }
    /* COPY */
    .ims-copy {
        grid-template-columns:
            1fr;
        gap: 18px;
        padding:
            28px 0;
    }
    .ims-copy-meta {
        align-items: center;
    }
    .ims-copy p {
        font-size: 10px;
    }
    /* QUOTE */
    .ims-pullquote {
        padding:
            32px 25px 32px 50px;
    }
    .ims-pullquote>span {
        left: 10px;
        font-size: 75px;
    }
    /* RESULT */
    .ims-result {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .ims-left {
        min-height: 600px;
    }
    .ims-heading h2 {
        font-size: 52px;
    }
    .ims-vertical-word {
        font-size: 62px;
    }
    .ims-bridge {
        grid-template-columns:
            1fr auto;
    }
    .ims-bridge-top {
        display: none;
    }
    .ims-result-words {
        flex-wrap: wrap;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ims-section *,
    .ims-section *::before,
    .ims-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   GARAGE DOOR OFFERS
   CUT & SAVE COUPON DESIGN
========================================================= */
.cut-offers {
    --co-orange: #e95c00;
    --co-orange-dark: #c94e00;
    --co-green: #073d3b;
    --co-dark: #042e2d;
    --co-gray: #777176;
    --co-light: #f5f6f6;
    --co-white: #ffffff;
    --co-text: #737b7b;
    position: relative;
    padding: 120px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%,
            rgba(233, 92, 0, .07),
            transparent 22%),
        radial-gradient(circle at 94% 68%,
            rgba(7, 61, 59, .07),
            transparent 24%),
        linear-gradient(135deg,
            #f5f6f6 0%,
            #ffffff 48%,
            #eef1f0 100%);
}
/* CONTENT ABOVE BACKGROUND */
.cut-offers>.container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   BACKGROUND DECORATION
========================================================= */
.cut-bg-decor {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
/* GRID TEXTURE */
.cut-bg-decor::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(rgba(7, 61, 59, .027) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(7, 61, 59, .018) 1px,
            transparent 1px);
    background-size:
        70px 70px;
}
/* =========================================================
   HUGE SAVE
========================================================= */
.cut-bg-save {
    position: absolute;
    top: 245px;
    left: 15px;
    color:
        rgba(7, 61, 59, .035);
    font-size:
        clamp(160px, 20vw, 320px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -18px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}
/* =========================================================
   HUGE OFF
========================================================= */
.cut-bg-off {
    position: absolute;
    right: -35px;
    bottom: 145px;
    color:
        rgba(233, 92, 0, .055);
    font-size:
        clamp(170px, 24vw, 380px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -20px;
    white-space: nowrap;
}
/* =========================================================
   BACKGROUND COUPON OUTLINES
========================================================= */
.cut-bg-ticket {
    position: absolute;
    display: block;
    width: 340px;
    height: 180px;
    border:
        2px dashed rgba(7, 61, 59, .09);
}
/* COUPON SIDE CUTS */
.cut-bg-ticket::before,
.cut-bg-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f6f6;
    border:
        1px solid rgba(7, 61, 59, .06);
    transform:
        translateY(-50%);
}
.cut-bg-ticket::before {
    left: -20px;
}
.cut-bg-ticket::after {
    right: -20px;
}
/* TOP RIGHT TICKET */
.cut-bg-ticket-one {
    top: 80px;
    right: -90px;
    transform:
        rotate(11deg);
    animation:
        cutTicketOne 9s ease-in-out infinite alternate;
}
/* BOTTOM LEFT TICKET */
.cut-bg-ticket-two {
    bottom: 90px;
    left: -130px;
    width: 400px;
    height: 210px;
    border-color:
        rgba(233, 92, 0, .11);
    transform:
        rotate(-10deg);
    animation:
        cutTicketTwo 10s ease-in-out infinite alternate;
}
@keyframes cutTicketOne {
    from {
        transform:
            rotate(11deg) translateY(0);
    }
    to {
        transform:
            rotate(8deg) translateY(18px);
    }
}
@keyframes cutTicketTwo {
    from {
        transform:
            rotate(-10deg) translateY(0);
    }
    to {
        transform:
            rotate(-7deg) translateY(-18px);
    }
}
/* =========================================================
   BACKGROUND CUTTING PATHS
========================================================= */
.cut-bg-cut {
    position: absolute;
    height: 1px;
    border-top:
        2px dashed rgba(7, 61, 59, .12);
}
.cut-bg-cut span {
    position: absolute;
    top: 50%;
    color:
        rgba(233, 92, 0, .42);
    font-size: 25px;
}
/* LEFT CUT */
.cut-bg-cut-one {
    top: 590px;
    left: -30px;
    width: 340px;
    transform:
        rotate(-8deg);
}
.cut-bg-cut-one span {
    left: 20px;
    transform:
        translateY(-52%);
    animation:
        cutScissorBgOne 8s ease-in-out infinite;
}
@keyframes cutScissorBgOne {
    0%,
    15% {
        left: 20px;
    }
    70%,
    100% {
        left:
            calc(100% - 35px);
    }
}
/* RIGHT CUT */
.cut-bg-cut-two {
    right: -30px;
    bottom: 470px;
    width: 390px;
    transform:
        rotate(7deg);
}
.cut-bg-cut-two span {
    right: 20px;
    transform:
        translateY(-52%) scaleX(-1);
    animation:
        cutScissorBgTwo 9s ease-in-out infinite;
}
@keyframes cutScissorBgTwo {
    0%,
    15% {
        right: 20px;
    }
    70%,
    100% {
        right:
            calc(100% - 35px);
    }
}
/* =========================================================
   BACKGROUND DOTS
========================================================= */
.cut-bg-dots {
    position: absolute;
    width: 160px;
    height: 160px;
    opacity: .16;
    background-image:
        radial-gradient(circle,
            var(--co-green) 2px,
            transparent 2.5px);
    background-size:
        17px 17px;
}
.cut-bg-dots-one {
    top: 65px;
    left: 4%;
}
.cut-bg-dots-two {
    right: 3%;
    bottom: 270px;
    width: 200px;
    height: 130px;
    background-image:
        radial-gradient(circle,
            var(--co-orange) 2px,
            transparent 2.5px);
}
/* =========================================================
   ORANGE BACKGROUND DETAILS
========================================================= */
.cut-bg-orange {
    position: absolute;
    display: block;
    background:
        var(--co-orange);
}
.cut-bg-orange-one {
    top: 175px;
    left: 2%;
    width: 10px;
    height: 75px;
    opacity: .65;
    animation:
        cutOrangeOne 4s ease-in-out infinite alternate;
}
.cut-bg-orange-two {
    right: 4%;
    bottom: 85px;
    width: 70px;
    height: 10px;
    opacity: .55;
    animation:
        cutOrangeTwo 4.5s ease-in-out infinite alternate;
}
@keyframes cutOrangeOne {
    to {
        transform:
            translateY(18px);
    }
}
@keyframes cutOrangeTwo {
    to {
        transform:
            translateX(-20px);
    }
}
/* =========================================================
   HEADER
========================================================= */
.cut-offers-head {
    position: relative;
    z-index: 5;
    max-width: 950px;
    margin-bottom: 65px;
}
/* KICKER */
.cut-offers-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color:
        var(--co-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 3px;
}
.cut-offers-kicker>span {
    position: relative;
    width: 55px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .18);
}
.cut-offers-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--co-orange);
    animation:
        cutKickerMove 2.5s ease-in-out infinite;
}
@keyframes cutKickerMove {
    0% {
        transform:
            translateX(-110%);
    }
    65%,
    100% {
        transform:
            translateX(110%);
    }
}
/* TITLE */
.cut-offers-head h2 {
    margin:
        0 0 25px;
    color:
        var(--co-green);
    font-size:
        clamp(55px, 6.5vw, 95px);
    font-weight: 900;
    line-height: .84;
    letter-spacing: -5px;
}
.cut-offers-head h2 span {
    display: block;
    color:
        var(--co-orange);
}
.cut-offers-head>p {
    max-width: 500px;
    margin: 0;
    color:
        var(--co-text);
    font-size: 11px;
    line-height: 1.8;
}
/* =========================================================
   GRID BACKGROUND
========================================================= */
.cut-offers-grid {
    position: relative;
    z-index: 2;
}
/* LARGE DECORATIVE COUPON BEHIND CARDS */
.cut-offers-grid::before {
    content: "SPECIAL OFFERS";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 108%;
    height: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        rgba(7, 61, 59, .018);
    border:
        2px dashed rgba(7, 61, 59, .06);
    font-size:
        clamp(70px, 10vw, 160px);
    font-weight: 900;
    letter-spacing: -7px;
    transform:
        translate(-50%, -50%) rotate(-3deg);
    pointer-events: none;
}
/* =========================================================
   COUPON
========================================================= */
.cut-coupon {
    position: relative;
    min-height: 455px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color:
        var(--co-green);
    background:
        var(--co-white);
    border:
        1px solid rgba(7, 61, 59, .11);
    box-shadow:
        0 20px 50px rgba(7, 61, 59, .07);
    text-decoration: none;
    transition:
        transform .4s cubic-bezier(.2, .8, .2, 1),
        box-shadow .4s ease;
}
/* LEFT CUT */
.cut-coupon::before {
    content: "";
    position: absolute;
    z-index: 10;
    left: -15px;
    bottom: 71px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        var(--co-light);
    box-shadow:
        inset -1px 0 rgba(7, 61, 59, .10);
}
/* RIGHT CUT */
.cut-coupon::after {
    content: "";
    position: absolute;
    z-index: 10;
    right: -15px;
    bottom: 71px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        var(--co-light);
    box-shadow:
        inset 1px 0 rgba(7, 61, 59, .10);
}
.cut-coupon:hover {
    transform:
        translateY(-10px) rotate(-.5deg);
    box-shadow:
        0 32px 70px rgba(7, 61, 59, .14);
}
/* =========================================================
   COUPON MAIN
========================================================= */
.cut-coupon-main {
    position: relative;
    flex: 1;
    padding:
        30px 30px 27px;
    overflow: hidden;
}
/* HUGE % */
.cut-coupon-main::before {
    content: "%";
    position: absolute;
    right: -12px;
    bottom: -25px;
    color:
        rgba(7, 61, 59, .035);
    font-size: 160px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}
/* SMALL CORNER */
.cut-coupon-main::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    border-top:
        3px solid var(--co-orange);
    border-right:
        3px solid var(--co-orange);
    opacity: .45;
}
/* =========================================================
   COUPON TOP
========================================================= */
.cut-coupon-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 42px;
}
.cut-coupon-top>span {
    color:
        rgba(7, 61, 59, .25);
    font-size: 8px;
    font-weight: 900;
}
.cut-coupon-top small {
    color:
        var(--co-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
/* =========================================================
   PRICE
========================================================= */
.cut-coupon-price {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    color:
        var(--co-orange);
}
.cut-coupon-price sup {
    margin:
        9px 3px 0 0;
    font-size: 19px;
    font-weight: 900;
}
.cut-coupon-price strong {
    font-size:
        clamp(75px, 6.5vw, 100px);
    font-weight: 900;
    line-height: .68;
    letter-spacing: -7px;
}
.cut-coupon-price>span {
    margin:
        7px 0 0 12px;
    padding:
        6px 8px;
    color:
        var(--co-white);
    background:
        var(--co-green);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   COUPON TITLE
========================================================= */
.cut-coupon h3 {
    position: relative;
    z-index: 2;
    margin:
        0 0 12px;
    color:
        var(--co-green);
    font-size:
        clamp(25px, 2.4vw, 34px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -1.5px;
}
.cut-coupon h3 span {
    display: block;
    color:
        var(--co-orange);
}
.cut-coupon-main>p {
    position: relative;
    z-index: 2;
    max-width: 280px;
    margin: 0;
    color:
        var(--co-text);
    font-size: 8px;
    line-height: 1.6;
}
/* =========================================================
   CUT LINE
========================================================= */
.cut-line {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 1px;
    border-top:
        2px dashed rgba(7, 61, 59, .25);
}
/* =========================================================
   SCISSOR
========================================================= */
.cut-scissor {
    position: absolute;
    top: 50%;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color:
        var(--co-orange);
    background:
        var(--co-white);
    font-size: 22px;
    line-height: 1;
    transform:
        translateY(-52%);
    transition:
        left .65s cubic-bezier(.2, .7, .2, 1),
        transform .65s ease;
}
/* MOVE SCISSOR */
.cut-coupon:hover .cut-scissor {
    left:
        calc(100% - 54px);
    transform:
        translateY(-52%) rotate(-10deg);
}
/* =========================================================
   COUPON STUB
========================================================= */
.cut-coupon-stub {
    position: relative;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding:
        20px 30px;
    background:
        rgba(7, 61, 59, .025);
}
.cut-coupon-stub small {
    display: block;
    margin-bottom: 3px;
    color:
        var(--co-text);
    font-size: 4px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
.cut-coupon-stub strong {
    color:
        var(--co-green);
    font-size: 13px;
    font-weight: 900;
}
/* =========================================================
   ARROW
========================================================= */
.cut-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color:
        var(--co-white);
    background:
        var(--co-green);
    font-size: 17px;
    transition:
        background .3s ease,
        transform .3s ease;
}
.cut-coupon:hover .cut-arrow {
    background:
        var(--co-orange);
    transform:
        rotate(45deg);
}
/* =========================================================
   DARK COUPON
========================================================= */
.cut-coupon-dark {
    color:
        var(--co-white);
    background:
        var(--co-green);
    border-color:
        var(--co-green);
}
.cut-coupon-dark .cut-coupon-main::before {
    color:
        rgba(255, 255, 255, .035);
}
.cut-coupon-dark .cut-coupon-top>span {
    color:
        rgba(255, 255, 255, .25);
}
.cut-coupon-dark h3 {
    color:
        var(--co-white);
}
.cut-coupon-dark .cut-coupon-main>p {
    color:
        rgba(255, 255, 255, .58);
}
.cut-coupon-dark .cut-coupon-price>span {
    color:
        var(--co-orange);
    background:
        var(--co-white);
}
.cut-coupon-dark .cut-line {
    border-color:
        rgba(255, 255, 255, .25);
}
.cut-coupon-dark .cut-scissor {
    background:
        var(--co-green);
}
.cut-coupon-dark .cut-coupon-stub {
    background:
        rgba(0, 0, 0, .09);
}
.cut-coupon-dark .cut-coupon-stub small {
    color:
        rgba(255, 255, 255, .45);
}
.cut-coupon-dark .cut-coupon-stub strong {
    color:
        var(--co-white);
}
.cut-coupon-dark .cut-arrow {
    color:
        var(--co-orange);
    background:
        var(--co-white);
}
/* =========================================================
   ORANGE COUPON
========================================================= */
.cut-coupon-orange {
    color:
        var(--co-white);
    background:
        var(--co-orange);
    border-color:
        var(--co-orange);
}
.cut-coupon-orange .cut-coupon-main::before {
    color:
        rgba(255, 255, 255, .05);
}
.cut-coupon-orange .cut-coupon-top>span,
.cut-coupon-orange .cut-coupon-top small {
    color:
        rgba(255, 255, 255, .68);
}
.cut-coupon-orange .cut-coupon-price {
    color:
        var(--co-white);
}
.cut-coupon-orange .cut-coupon-price>span {
    color:
        var(--co-orange);
    background:
        var(--co-white);
}
.cut-coupon-orange h3 {
    color:
        var(--co-white);
}
.cut-coupon-orange h3 span {
    color:
        var(--co-dark);
}
.cut-coupon-orange .cut-coupon-main>p {
    color:
        rgba(255, 255, 255, .70);
}
.cut-coupon-orange .cut-line {
    border-color:
        rgba(255, 255, 255, .32);
}
.cut-coupon-orange .cut-scissor {
    color:
        var(--co-white);
    background:
        var(--co-orange);
}
.cut-coupon-orange .cut-coupon-stub {
    background:
        rgba(0, 0, 0, .07);
}
.cut-coupon-orange .cut-coupon-stub small {
    color:
        rgba(255, 255, 255, .55);
}
.cut-coupon-orange .cut-coupon-stub strong {
    color:
        var(--co-white);
}
.cut-coupon-orange .cut-arrow {
    color:
        var(--co-orange);
    background:
        var(--co-white);
}
/* =========================================================
   FEATURED DARK COUPON
========================================================= */
.cut-coupon-featured {
    color:
        var(--co-white);
    background:
        var(--co-dark);
    border-color:
        var(--co-dark);
}
.cut-featured-label {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 25px;
    padding:
        10px 9px 15px;
    color:
        var(--co-white);
    background:
        var(--co-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.5px;
    writing-mode:
        vertical-rl;
}
.cut-coupon-featured .cut-coupon-main::before {
    color:
        rgba(255, 255, 255, .04);
}
.cut-coupon-featured .cut-coupon-top>span {
    color:
        rgba(255, 255, 255, .25);
}
.cut-coupon-featured h3 {
    color:
        var(--co-white);
}
.cut-coupon-featured .cut-coupon-main>p {
    color:
        rgba(255, 255, 255, .58);
}
.cut-coupon-featured .cut-coupon-price>span {
    color:
        var(--co-orange);
    background:
        var(--co-white);
}
.cut-coupon-featured .cut-line {
    border-color:
        rgba(255, 255, 255, .25);
}
.cut-coupon-featured .cut-scissor {
    background:
        var(--co-dark);
}
.cut-coupon-featured .cut-coupon-stub {
    background:
        rgba(255, 255, 255, .04);
}
.cut-coupon-featured .cut-coupon-stub small {
    color:
        rgba(255, 255, 255, .45);
}
.cut-coupon-featured .cut-coupon-stub strong {
    color:
        var(--co-white);
}
.cut-coupon-featured .cut-arrow {
    color:
        var(--co-orange);
    background:
        var(--co-white);
}
/* =========================================================
   BOTTOM AREA
========================================================= */
.cut-offers-bottom {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        auto 1fr minmax(280px, auto) 1fr auto;
    align-items: center;
    gap: 22px;
    margin-top: 65px;
}
.cut-bottom-scissor {
    color:
        var(--co-orange);
    font-size: 25px;
}
.cut-bottom-line {
    height: 1px;
    border-top:
        1px dashed rgba(7, 61, 59, .22);
}
.cut-offers-bottom p {
    max-width: 370px;
    margin: 0;
    color:
        var(--co-text);
    font-size: 8px;
    line-height: 1.6;
    text-align: center;
}
.cut-offers-bottom>a {
    display: flex;
    align-items: center;
    gap: 18px;
    padding:
        15px 18px;
    color:
        var(--co-white);
    background:
        var(--co-green);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-decoration: none;
    transition:
        background .3s ease,
        transform .3s ease;
}
.cut-offers-bottom>a span {
    color:
        var(--co-orange);
    font-size: 17px;
}
.cut-offers-bottom>a:hover {
    color:
        var(--co-white);
    background:
        var(--co-orange);
    transform:
        translateY(-3px);
}
.cut-offers-bottom>a:hover span {
    color:
        var(--co-white);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .cut-offers {
        padding:
            90px 0 80px;
    }
    .cut-coupon {
        min-height:
            430px;
    }
    .cut-offers-grid::before {
        display:
            none;
    }
    .cut-bg-save {
        left:
            -20px;
        opacity:
            .65;
    }
    .cut-bg-off {
        right:
            -70px;
    }
    .cut-offers-bottom {
        grid-template-columns:
            auto 1fr;
    }
    .cut-offers-bottom p {
        grid-column:
            1 / -1;
        max-width:
            100%;
        text-align:
            left;
    }
    .cut-offers-bottom .cut-bottom-line:last-of-type {
        display:
            none;
    }
    .cut-offers-bottom>a {
        grid-column:
            1 / -1;
        width:
            max-content;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .cut-offers {
        padding:
            70px 0;
    }
    /* HEADER */
    .cut-offers-head {
        margin-bottom:
            45px;
    }
    .cut-offers-head h2 {
        font-size:
            clamp(43px, 12vw, 60px);
        line-height:
            .9;
        letter-spacing:
            -3px;
    }
    /* COUPONS */
    .cut-coupon {
        min-height:
            410px;
    }
    .cut-coupon-main {
        padding:
            27px 24px;
    }
    .cut-coupon-price strong {
        font-size:
            78px;
    }
    .cut-coupon-stub {
        padding:
            18px 24px;
    }
    /* BACKGROUND */
    .cut-bg-save {
        top:
            330px;
        left:
            -30px;
        font-size:
            160px;
        opacity:
            .55;
    }
    .cut-bg-off {
        right:
            -50px;
        bottom:
            300px;
        font-size:
            180px;
        opacity:
            .6;
    }
    .cut-bg-ticket {
        opacity:
            .55;
    }
    .cut-bg-ticket-one {
        top:
            170px;
        right:
            -220px;
    }
    .cut-bg-ticket-two {
        left:
            -280px;
        bottom:
            200px;
    }
    .cut-bg-dots {
        opacity:
            .08;
    }
    .cut-bg-cut-one,
    .cut-bg-cut-two {
        opacity:
            .55;
    }
    .cut-bg-orange-one {
        left:
            10px;
    }
    .cut-bg-orange-two {
        right:
            15px;
    }
    /* BOTTOM */
    .cut-offers-bottom {
        margin-top:
            45px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .cut-offers-kicker {
        font-size:
            6px;
        letter-spacing:
            2px;
    }
    .cut-offers-kicker>span {
        width:
            35px;
    }
    .cut-coupon {
        min-height:
            395px;
    }
    .cut-coupon-price strong {
        font-size:
            68px;
        letter-spacing:
            -5px;
    }
    .cut-coupon h3 {
        font-size:
            25px;
    }
    .cut-coupon-main::before {
        font-size:
            130px;
    }
    .cut-offers-bottom {
        grid-template-columns:
            auto 1fr;
        gap:
            15px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .cut-offers *,
    .cut-offers *::before,
    .cut-offers *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
/* =========================================================
   DARK GARAGE DOOR BRANDS
========================================================= */
.gb-brands {
    --gb-orange: #e95c00;
    --gb-orange-dark: #c94e00;
    --gb-green: #073d3b;
    --gb-dark: #042e2d;
    --gb-white: #ffffff;
    --gb-light: #f5f6f6;
    position: relative;
    padding: 115px 0 75px;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 10%,
            rgba(233, 92, 0, .11),
            transparent 26%),
        radial-gradient(circle at 8% 90%,
            rgba(255, 255, 255, .035),
            transparent 25%),
        var(--gb-dark);
}
/* =========================================================
   BACKGROUND
========================================================= */
.gb-brands-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
/* TECHNICAL GRID */
.gb-brands-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);
    background-size:
        75px 75px;
}
/* GIANT WORD */
.gb-bg-word {
    position: absolute;
    top: 145px;
    left: 50%;
    color:
        rgba(255, 255, 255, .018);
    font-size:
        clamp(180px, 27vw, 430px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -25px;
    transform:
        translateX(-50%);
    white-space: nowrap;
}
/* ORANGE LINES */
.gb-bg-line {
    position: absolute;
    display: block;
    background:
        var(--gb-orange);
}
.gb-bg-line-1 {
    top: 0;
    left: 8%;
    width: 8px;
    height: 90px;
}
.gb-bg-line-2 {
    right: 6%;
    bottom: 0;
    width: 8px;
    height: 130px;
}
/* DOTS */
.gb-bg-dots {
    position: absolute;
    top: 65px;
    right: 6%;
    width: 150px;
    height: 110px;
    opacity: .17;
    background-image:
        radial-gradient(circle,
            var(--gb-orange) 2px,
            transparent 2.5px);
    background-size:
        17px 17px;
}
/* =========================================================
   CONTENT
========================================================= */
.gb-brands>.container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   HEADER
========================================================= */
.gb-brands-head {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr) minmax(280px, .6fr);
    align-items: end;
    gap: 80px;
    margin-bottom: 75px;
}
/* KICKER */
.gb-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color:
        var(--gb-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 3px;
}
.gb-kicker>span {
    position: relative;
    width: 55px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .25);
}
.gb-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--gb-orange);
    animation:
        gbKicker 2.6s ease-in-out infinite;
}
@keyframes gbKicker {
    0% {
        transform:
            translateX(-110%);
    }
    65%,
    100% {
        transform:
            translateX(110%);
    }
}
/* HEADING */
.gb-brands-head h2 {
    max-width: 800px;
    margin: 0;
    color:
        var(--gb-white);
    font-size:
        clamp(55px, 6.2vw, 94px);
    font-weight: 900;
    line-height: .84;
    letter-spacing: -5px;
}
.gb-brands-head h2 span {
    display: block;
    color:
        var(--gb-orange);
}
/* =========================================================
   HEADER NOTE
========================================================= */
.gb-brands-note {
    display: grid;
    grid-template-columns:
        auto 1fr;
    align-items: start;
    gap: 22px;
    padding-top: 20px;
    border-top:
        1px solid rgba(255, 255, 255, .13);
}
.gb-brands-count {
    color:
        var(--gb-orange);
    font-size: 58px;
    font-weight: 900;
    line-height: .75;
    letter-spacing: -4px;
}
.gb-brands-note small {
    display: block;
    margin-bottom: 9px;
    color:
        rgba(255, 255, 255, .45);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
.gb-brands-note p {
    margin: 0;
    color:
        rgba(255, 255, 255, .62);
    font-size: 9px;
    line-height: 1.7;
}
/* =========================================================
   BRAND STAGE
========================================================= */
.gb-brand-stage {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 20px 0;
}
/* SIDE FADES */
.gb-brand-stage::before,
.gb-brand-stage::after {
    content: "";
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    width: 9%;
    pointer-events: none;
}
.gb-brand-stage::before {
    left: 0;
    background:
        linear-gradient(90deg,
            var(--gb-dark),
            transparent);
}
.gb-brand-stage::after {
    right: 0;
    background:
        linear-gradient(-90deg,
            var(--gb-dark),
            transparent);
}
/* =========================================================
   ROW
========================================================= */
.gb-brand-row {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-top:
        1px solid rgba(255, 255, 255, .08);
}
.gb-brand-row:last-child {
    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}
/* =========================================================
   TRACK
========================================================= */
.gb-brand-track {
    display: flex;
    width: max-content;
    will-change: transform;
}
/* FIRST ROW */
.gb-track-left {
    animation:
        gbMoveLeft 35s linear infinite;
}
@keyframes gbMoveLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* SECOND ROW */
.gb-track-right {
    transform: translateX(-50%);
    animation:
        gbMoveRight 38s linear infinite;
}
@keyframes gbMoveRight {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}
/* PAUSE */
.gb-brand-row:hover .gb-brand-track {
    animation-play-state: paused;
}
/* =========================================================
   INDIVIDUAL BRAND
========================================================= */
.gb-brand {
    position: relative;
    min-width: 245px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        30px 35px;
    border-right:
        1px solid rgba(255, 255, 255, .08);
    transition:
        background .35s ease;
}
/* SMALL NUMBER */
.gb-brand>span {
    position: absolute;
    top: 18px;
    left: 18px;
    color:
        rgba(255, 255, 255, .20);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* BRAND NAME */
.gb-brand strong {
    position: relative;
    color:
        rgba(255, 255, 255, .72);
    font-size:
        clamp(17px, 1.5vw, 23px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.7px;
    white-space: nowrap;
    transition:
        color .35s ease,
        transform .35s ease;
}
/* ORANGE LINE */
.gb-brand strong::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -13px;
    left: 0;
    height: 3px;
    background:
        var(--gb-orange);
    transform:
        scaleX(0);
    transform-origin:
        left;
    transition:
        transform .35s ease;
}
/* HOVER */
.gb-brand:hover {
    background:
        rgba(255, 255, 255, .045);
}
.gb-brand:hover strong {
    color:
        var(--gb-white);
    transform:
        translateY(-3px);
}
.gb-brand:hover strong::after {
    transform:
        scaleX(1);
}
/* =========================================================
   SPECIAL ORANGE BRAND BLOCK
========================================================= */
.gb-brand-orange {
    background:
        var(--gb-orange);
}
.gb-brand-orange>span {
    color:
        rgba(255, 255, 255, .45);
}
.gb-brand-orange strong {
    color:
        var(--gb-white);
}
.gb-brand-orange strong::after {
    background:
        var(--gb-white);
}
/* =========================================================
   BOTTOM
========================================================= */
.gb-brands-bottom {
    display: grid;
    grid-template-columns:
        1fr auto 1fr;
    align-items: center;
    gap: 30px;
    margin-top: 55px;
}
/* LINES */
.gb-bottom-line {
    position: relative;
    height: 1px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .11);
}
.gb-bottom-line span {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 1px;
    background:
        var(--gb-orange);
    animation:
        gbLineMove 4s linear infinite;
}
.gb-bottom-line-right span {
    animation-direction:
        reverse;
}
@keyframes gbLineMove {
    from {
        transform:
            translateX(-100%);
    }
    to {
        transform:
            translateX(900%);
    }
}
/* TEXT */
.gb-brands-bottom p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    color:
        rgba(255, 255, 255, .45);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.8px;
    white-space: nowrap;
}
.gb-brands-bottom p i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--gb-orange);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .gb-brands {
        padding:
            90px 0 65px;
    }
    .gb-brands-head {
        grid-template-columns:
            1fr;
        gap:
            35px;
        margin-bottom:
            55px;
    }
    .gb-brands-note {
        max-width:
            430px;
    }
    .gb-brand {
        min-width:
            220px;
        height:
            130px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .gb-brands {
        padding:
            70px 0 55px;
    }
    .gb-bg-word {
        top:
            280px;
        font-size:
            170px;
        letter-spacing:
            -12px;
    }
    .gb-bg-dots {
        right:
            -50px;
    }
    .gb-brands-head h2 {
        font-size:
            clamp(45px, 12vw, 62px);
        line-height:
            .88;
        letter-spacing:
            -3px;
    }
    .gb-brands-count {
        font-size:
            48px;
    }
    .gb-brand {
        min-width:
            190px;
        height:
            115px;
        padding:
            25px;
    }
    .gb-brand strong {
        font-size:
            17px;
    }
    .gb-brands-bottom {
        grid-template-columns:
            1fr;
        gap:
            20px;
        margin-top:
            40px;
    }
    .gb-brands-bottom p {
        flex-wrap:
            wrap;
        white-space:
            normal;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .gb-brand {
        min-width:
            170px;
        height:
            105px;
    }
    .gb-brand strong {
        font-size:
            15px;
    }
    .gb-kicker {
        font-size:
            6px;
        letter-spacing:
            2px;
    }
    .gb-kicker>span {
        width:
            35px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .gb-brands *,
    .gb-brands *::before,
    .gb-brands *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
/* =========================================================
   RAPID EMERGENCY ASSISTANCE
   UPDATED VERSION - BIGGER TYPOGRAPHY
========================================================= */
.era-emergency {
    --era-orange: #e95c00;
    --era-orange-dark: #c94e00;
    --era-green: #073d3b;
    --era-dark: #042e2d;
    --era-white: #ffffff;
    --era-light: #f5f6f6;
    --era-gray: #777176;
    position: relative;
    padding: 130px 0 0;
    overflow: hidden;
    color: var(--era-white);
    background:
        radial-gradient(circle at 85% 15%,
            rgba(233, 92, 0, .14),
            transparent 28%),
        radial-gradient(circle at 12% 70%,
            rgba(255, 255, 255, .025),
            transparent 25%),
        linear-gradient(135deg,
            #042e2d 0%,
            #073d3b 52%,
            #042e2d 100%);
}
/* =========================================================
   BACKGROUND
========================================================= */
.era-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.era-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);
    background-size: 75px 75px;
}
/* HUGE BACKGROUND WORD */
.era-bg-word {
    position: absolute;
    top: 350px;
    left: 50%;
    color: rgba(255, 255, 255, .018);
    font-size: clamp(180px, 22vw, 380px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -24px;
    white-space: nowrap;
    transform: translateX(-50%);
}
/* =========================================================
   BACKGROUND CROSS
========================================================= */
.era-cross {
    position: absolute;
    width: 70px;
    height: 70px;
    opacity: .18;
}
.era-cross::before,
.era-cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--era-orange);
    transform: translate(-50%, -50%);
}
.era-cross::before {
    width: 100%;
    height: 6px;
}
.era-cross::after {
    width: 6px;
    height: 100%;
}
.era-cross-one {
    top: 110px;
    right: 7%;
    animation:
        eraCross 6s ease-in-out infinite alternate;
}
.era-cross-two {
    left: 5%;
    bottom: 200px;
    width: 45px;
    height: 45px;
    animation:
        eraCross 7s ease-in-out infinite alternate-reverse;
}
@keyframes eraCross {
    to {
        transform:
            rotate(90deg) scale(.82);
    }
}
/* =========================================================
   DOT PATTERN
========================================================= */
.era-bg-dots {
    position: absolute;
    right: 3%;
    bottom: 310px;
    width: 190px;
    height: 150px;
    opacity: .14;
    background-image:
        radial-gradient(circle,
            var(--era-orange) 2.5px,
            transparent 3px);
    background-size: 19px 19px;
}
/* =========================================================
   CONTENT
========================================================= */
.era-emergency>.container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   TOP STATUS
========================================================= */
.era-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 65px;
    padding-bottom: 24px;
    border-bottom:
        1px solid rgba(255, 255, 255, .13);
}
/* ALERT */
.era-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--era-orange);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.7px;
}
.era-alert-dot {
    position: relative;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--era-orange);
}
.era-alert-dot::after {
    content: "";
    position: absolute;
    inset: -8px;
    border:
        1px solid var(--era-orange);
    border-radius: 50%;
    animation:
        eraAlertPulse 1.6s ease-out infinite;
}
@keyframes eraAlertPulse {
    from {
        opacity: 1;
        transform: scale(.5);
    }
    to {
        opacity: 0;
        transform: scale(1.6);
    }
}
/* TOP RIGHT CODE */
.era-code {
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
.era-code span {
    margin: 0 9px;
    color: var(--era-orange);
}
/* =========================================================
   MAIN HEADING
========================================================= */
.era-heading {
    position: relative;
    max-width: 1250px;
    margin-bottom: 95px;
}
.era-heading-index {
    display: block;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .38);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4px;
}
.era-heading h2 {
    margin: 0;
    color: var(--era-white);
    font-size: clamp(64px, 7vw, 85px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -6px;
}
.era-heading h2>span {
    display: block;
    color: var(--era-orange);
}
.era-heading h2>em {
    display: block;
    margin-top: 22px;
    color: rgba(255, 255, 255, .55);
    font-size: clamp(18px, 1.6vw, 25px);
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .5px;
}
/* =========================================================
   ORANGE EMERGENCY STRIP
========================================================= */
.era-response-line {
    position: relative;
    z-index: 10;
    width: calc(100% + 120px);
    margin:
        0 0 105px -60px;
    overflow: hidden;
    background: var(--era-orange);
    transform: rotate(-2deg);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, .18);
}
.era-response-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    min-height: 72px;
    padding: 18px 40px;
    color: var(--era-white);
}
.era-response-track span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.2px;
    white-space: nowrap;
}
.era-response-track i {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--era-dark);
}
/* =========================================================
   STORY
========================================================= */
.era-story {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 300px minmax(0, 1fr);
    align-items: center;
    gap: 65px;
    margin-bottom: 125px;
}
.era-story-one,
.era-story-two {
    position: relative;
}
.era-story-two {
    margin-top: 115px;
}
/* =========================================================
   STORY LABEL
========================================================= */
.era-story-label {
    display: grid;
    grid-template-columns:
        55px 1fr;
    gap: 18px;
    margin-bottom: 30px;
    padding-bottom: 22px;
    border-bottom:
        1px solid rgba(255, 255, 255, .14);
}
.era-story-label>span {
    color: var(--era-orange);
    font-size: 13px;
    font-weight: 900;
}
.era-story-label small {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}
.era-story-label strong {
    color: var(--era-white);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}
/* =========================================================
   MAIN PARAGRAPHS
========================================================= */
.era-story p {
    margin: 0;
    color: rgba(255, 255, 255, .73);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: .05px;
}
/* FIRST LETTER DETAIL */
.era-story p::first-letter {
    color: var(--era-orange);
    font-size: 28px;
    font-weight: 900;
}
/* =========================================================
   CENTER EMERGENCY VISUAL
========================================================= */
.era-center {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.era-center::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background:
        linear-gradient(transparent,
            rgba(233, 92, 0, .65),
            transparent);
}
/* =========================================================
   ACT FAST FRAME
========================================================= */
.era-center-frame {
    position: relative;
    z-index: 5;
    width: 265px;
    height: 355px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        rgba(255, 255, 255, .04);
    border:
        1px solid rgba(255, 255, 255, .15);
    backdrop-filter:
        blur(5px);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, .17);
    transform: rotate(3deg);
    animation:
        eraFrameFloat 5s ease-in-out infinite alternate;
}
@keyframes eraFrameFloat {
    from {
        transform:
            rotate(3deg) translateY(0);
    }
    to {
        transform:
            rotate(1deg) translateY(-12px);
    }
}
/* ORANGE CORNER */
.era-center-frame::before {
    content: "";
    position: absolute;
    top: -12px;
    right: -12px;
    width: 80px;
    height: 80px;
    border-top:
        5px solid var(--era-orange);
    border-right:
        5px solid var(--era-orange);
}
.era-center-small {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .50);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
/* ACT FAST */
.era-center-frame>strong {
    color: var(--era-white);
    font-size: 65px;
    font-weight: 900;
    line-height: .76;
    letter-spacing: -5px;
}
.era-center-frame>strong span {
    display: block;
    color: var(--era-orange);
}
/* =========================================================
   CENTER PULSE
========================================================= */
.era-pulse {
    position: relative;
    width: 68px;
    height: 68px;
    margin: 30px 0;
    border:
        1px solid rgba(233, 92, 0, .40);
    border-radius: 50%;
}
.era-pulse::before,
.era-pulse::after {
    content: "";
    position: absolute;
    border:
        1px solid rgba(233, 92, 0, .25);
    border-radius: 50%;
    animation:
        eraCenterPulse 2s ease-out infinite;
}
.era-pulse::before {
    inset: 10px;
}
.era-pulse::after {
    inset: -11px;
    animation-delay: .6s;
}
.era-pulse i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--era-orange);
    transform: translate(-50%, -50%);
}
@keyframes eraCenterPulse {
    50% {
        opacity: .18;
        transform: scale(1.18);
    }
}
/* CENTER BOTTOM TEXT */
.era-center-frame>small {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .48);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.era-center-frame>small b {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--era-orange);
}
/* =========================================================
   FLOW
========================================================= */
.era-flow {
    display: grid;
    grid-template-columns:
        minmax(300px, .72fr) minmax(0, 1.28fr);
    align-items: end;
    gap: 90px;
    padding:
        65px 0 75px;
    border-top:
        1px solid rgba(255, 255, 255, .13);
}
/* FLOW TITLE */
.era-flow-title small {
    display: block;
    margin-bottom: 12px;
    color: var(--era-orange);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.3px;
}
.era-flow-title strong {
    display: block;
    color: var(--era-white);
    font-size: clamp(31px, 3vw, 41px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -2px;
}
.era-flow-title strong span {
    display: block;
    color: var(--era-orange);
}
/* =========================================================
   FLOW STEPS
========================================================= */
.era-flow-steps {
    position: relative;
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
}
.era-flow-steps::before {
    content: "";
    position: absolute;
    top: 11px;
    right: 10%;
    left: 10%;
    height: 1px;
    background:
        rgba(255, 255, 255, .18);
}
.era-step {
    position: relative;
    z-index: 2;
    text-align: center;
}
.era-step>span {
    display: block;
    width: 22px;
    height: 22px;
    margin:
        0 auto 17px;
    border:
        6px solid var(--era-dark);
    border-radius: 50%;
    background: var(--era-orange);
    box-shadow:
        0 0 0 1px rgba(233, 92, 0, .50);
}
.era-step small {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .35);
    font-size: 8px;
    font-weight: 900;
}
.era-step strong {
    color: var(--era-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
/* =========================================================
   BOTTOM STRIP
========================================================= */
.era-bottom-strip {
    position: relative;
    z-index: 10;
    min-height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    padding: 24px 35px;
    color: rgba(255, 255, 255, .68);
    background: var(--era-orange);
}
.era-bottom-strip span,
.era-bottom-strip strong {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
.era-bottom-strip strong {
    color: var(--era-white);
}
.era-bottom-strip i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--era-dark);
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
    .era-story {
        grid-template-columns:
            minmax(0, 1fr) 320px minmax(0, 1fr);
        gap: 80px;
    }
    .era-story p {
        font-size: 18px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .era-emergency {
        padding-top: 95px;
    }
    .era-heading h2 {
        font-size:
            clamp(58px, 8vw, 78px);
    }
    .era-story {
        grid-template-columns:
            1fr 210px 1fr;
        gap: 32px;
    }
    .era-story p {
        font-size: 15px;
        line-height: 1.8;
    }
    .era-story-label {
        grid-template-columns:
            42px 1fr;
    }
    .era-story-label strong {
        font-size: 17px;
    }
    .era-center-frame {
        width: 200px;
        height: 310px;
    }
    .era-center-frame>strong {
        font-size: 48px;
    }
    .era-flow {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .era-emergency {
        padding-top: 75px;
    }
    /* TOP */
    .era-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 45px;
    }
    .era-alert {
        font-size: 9px;
        line-height: 1.5;
    }
    .era-code {
        font-size: 8px;
        line-height: 1.6;
    }
    /* HEADING */
    .era-heading {
        margin-bottom: 65px;
    }
    .era-heading-index {
        font-size: 9px;
    }
    .era-heading h2 {
        font-size:
            clamp(46px, 13vw, 64px);
        line-height: .9;
        letter-spacing: -3.5px;
    }
    .era-heading h2>em {
        margin-top: 18px;
        font-size: 17px;
        line-height: 1.4;
    }
    /* ORANGE STRIP */
    .era-response-line {
        width:
            calc(100% + 50px);
        margin:
            0 0 70px -25px;
    }
    .era-response-track {
        justify-content: flex-start;
        min-height: 65px;
        gap: 24px;
        overflow: hidden;
    }
    .era-response-track span {
        font-size: 9px;
    }
    /* STORY */
    .era-story {
        display: flex;
        flex-direction: column;
        gap: 55px;
        margin-bottom: 80px;
    }
    .era-story-one {
        order: 1;
    }
    .era-center {
        order: 2;
        width: 100%;
        min-height: 350px;
    }
    .era-story-two {
        order: 3;
        margin-top: 0;
    }
    .era-story-label {
        grid-template-columns:
            45px 1fr;
        margin-bottom: 23px;
    }
    .era-story-label>span {
        font-size: 12px;
    }
    .era-story-label small {
        font-size: 8px;
    }
    .era-story-label strong {
        font-size: 19px;
    }
    .era-story p {
        font-size: 16px;
        line-height: 1.8;
    }
    /* CENTER */
    .era-center-frame {
        width: 250px;
        height: 320px;
    }
    .era-center-frame>strong {
        font-size: 58px;
    }
    /* FLOW */
    .era-flow {
        padding:
            55px 0 60px;
    }
    .era-flow-title small {
        font-size: 8px;
    }
    .era-flow-title strong {
        font-size: 34px;
    }
    .era-step strong {
        font-size: 9px;
    }
    /* BACKGROUND */
    .era-bg-word {
        top: 720px;
        font-size: 170px;
        letter-spacing: -12px;
        transform:
            translateX(-50%) rotate(-90deg);
    }
    /* BOTTOM */
    .era-bottom-strip {
        gap: 17px;
        min-height: 100px;
    }
    .era-bottom-strip span,
    .era-bottom-strip strong {
        font-size: 8px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .era-heading h2 {
        font-size:
            43px;
    }
    .era-heading h2>em {
        font-size:
            15px;
    }
    .era-story p {
        font-size:
            15px;
    }
    .era-story-label {
        grid-template-columns:
            35px 1fr;
    }
    .era-center-frame {
        width: 230px;
        height: 300px;
    }
    .era-center-frame>strong {
        font-size: 52px;
    }
    .era-flow-steps {
        grid-template-columns:
            repeat(2, 1fr);
        gap:
            35px 10px;
    }
    .era-flow-steps::before {
        display: none;
    }
    .era-step strong {
        font-size: 9px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .era-emergency *,
    .era-emergency *::before,
    .era-emergency *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   CUSTOM FIT SYSTEM
========================================================= */
.cfs-system {
    --cfs-orange: #e95c00;
    --cfs-green: #073d3b;
    --cfs-dark: #042e2d;
    --cfs-white: #ffffff;
    --cfs-light: #f5f6f6;
    --cfs-gray: #777176;
    --cfs-text: #737b7b;
    position: relative;
    padding: 125px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 15%,
            rgba(233, 92, 0, .09),
            transparent 23%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f5f6f6 55%,
            #edf0ef 100%);
}
/* =========================================================
   BACKGROUND
========================================================= */
.cfs-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.cfs-bg-grid {
    position: absolute;
    inset: 0;
    opacity: .65;
    background-image:
        linear-gradient(rgba(7, 61, 59, .028) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(7, 61, 59, .02) 1px,
            transparent 1px);
    background-size:
        75px 75px;
}
/* HUGE CUSTOM */
.cfs-bg-word {
    position: absolute;
    top: 380px;
    left: 50%;
    color:
        rgba(7, 61, 59, .025);
    font-size:
        clamp(180px, 24vw, 390px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -25px;
    white-space: nowrap;
    transform:
        translateX(-50%);
}
/* DOTS */
.cfs-dots {
    position: absolute;
    top: 85px;
    right: 5%;
    width: 170px;
    height: 130px;
    opacity: .16;
    background-image:
        radial-gradient(circle,
            var(--cfs-orange) 2px,
            transparent 2.5px);
    background-size:
        18px 18px;
}
/* CORNERS */
.cfs-corner {
    position: absolute;
    width: 90px;
    height: 90px;
    opacity: .25;
}
.cfs-corner::before,
.cfs-corner::after {
    content: "";
    position: absolute;
    background:
        var(--cfs-orange);
}
.cfs-corner::before {
    width: 100%;
    height: 4px;
}
.cfs-corner::after {
    width: 4px;
    height: 100%;
}
.cfs-corner-one {
    top: 45px;
    left: 3%;
}
.cfs-corner-two {
    right: 3%;
    bottom: 180px;
    transform:
        rotate(180deg);
}
/* =========================================================
   CONTENT
========================================================= */
.cfs-system>.container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   TOP
========================================================= */
.cfs-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 65px;
    padding-bottom: 22px;
    border-bottom:
        1px solid rgba(7, 61, 59, .13);
}
/* KICKER */
.cfs-kicker {
    display: flex;
    align-items: center;
    gap: 15px;
    color:
        var(--cfs-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.7px;
}
.cfs-kicker>span {
    position: relative;
    width: 60px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .18);
}
.cfs-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--cfs-orange);
    animation:
        cfsKicker 2.5s ease-in-out infinite;
}
@keyframes cfsKicker {
    0% {
        transform:
            translateX(-110%);
    }
    70%,
    100% {
        transform:
            translateX(110%);
    }
}
/* CODE */
.cfs-top-code {
    display: flex;
    align-items: center;
    gap: 12px;
    color:
        rgba(7, 61, 59, .48);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.cfs-top-code i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background:
        var(--cfs-orange);
}
/* =========================================================
   HEADING
========================================================= */
.cfs-heading {
    position: relative;
    max-width: 1250px;
    margin-bottom: 105px;
}
.cfs-heading-side {
    display: block;
    margin-bottom: 18px;
    color:
        rgba(7, 61, 59, .35);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 4px;
}
.cfs-heading h2 {
    margin: 0;
    color:
        var(--cfs-green);
    font-size:
        clamp(60px, 6.6vw, 102px);
    font-weight: 900;
    line-height: .86;
    letter-spacing: -6px;
}
.cfs-heading h2>span {
    display: block;
    color:
        var(--cfs-orange);
}
.cfs-heading h2>strong {
    display: block;
    margin-top: 16px;
    color:
        var(--cfs-dark);
    font-size: .47em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
}
/* =========================================================
   MAIN LAYOUT
========================================================= */
.cfs-layout {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 340px minmax(0, 1fr);
    align-items: center;
    gap: 65px;
    margin-bottom: 120px;
}
/* =========================================================
   COPY
========================================================= */
.cfs-copy {
    position: relative;
}
.cfs-copy-two {
    margin-top: 125px;
}
/* COPY HEAD */
.cfs-copy-head {
    display: grid;
    grid-template-columns:
        50px 1fr;
    gap: 17px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom:
        1px solid rgba(7, 61, 59, .14);
}
.cfs-copy-head>span {
    color:
        var(--cfs-orange);
    font-size: 13px;
    font-weight: 900;
}
.cfs-copy-head small {
    display: block;
    margin-bottom: 7px;
    color:
        rgba(7, 61, 59, .45);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.cfs-copy-head strong {
    display: block;
    color:
        var(--cfs-green);
    font-size: 21px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.5px;
}
/* MAIN TEXT */
.cfs-copy p {
    margin: 0;
    color:
        var(--cfs-text);
    font-size: 17px;
    line-height: 1.85;
}
.cfs-copy p::first-letter {
    color:
        var(--cfs-orange);
    font-size: 29px;
    font-weight: 900;
}
/* =========================================================
   CONFIGURATOR
========================================================= */
.cfs-configurator {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================================================
   TOP MEASUREMENT
========================================================= */
.cfs-measure-top {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 290px;
    display: grid;
    grid-template-columns:
        1fr auto 1fr;
    align-items: center;
    gap: 10px;
    transform:
        translateX(-50%);
}
.cfs-measure-top>span {
    position: relative;
    height: 1px;
    background:
        rgba(7, 61, 59, .25);
}
.cfs-measure-top>span::before {
    content: "";
    position: absolute;
    top: -5px;
    width: 1px;
    height: 11px;
    background:
        var(--cfs-orange);
}
.cfs-measure-top>span:first-child::before {
    left: 0;
}
.cfs-measure-top>span:last-child::before {
    right: 0;
}
.cfs-measure-top small {
    color:
        var(--cfs-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   SIDE MEASURE
========================================================= */
.cfs-measure-side {
    position: absolute;
    top: 50%;
    left: -15px;
    height: 330px;
    display: grid;
    grid-template-rows:
        1fr auto 1fr;
    align-items: center;
    gap: 10px;
    transform:
        translateY(-50%);
}
.cfs-measure-side>span {
    position: relative;
    width: 1px;
    height: 100%;
    margin: auto;
    background:
        rgba(7, 61, 59, .22);
}
.cfs-measure-side small {
    color:
        rgba(7, 61, 59, .45);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    writing-mode:
        vertical-rl;
    transform:
        rotate(180deg);
}
/* =========================================================
   MACHINE
========================================================= */
.cfs-machine {
    position: relative;
    z-index: 5;
    width: 290px;
    min-height: 450px;
    background:
        var(--cfs-green);
    box-shadow:
        25px 35px 70px rgba(7, 61, 59, .17);
    animation:
        cfsMachineFloat 5s ease-in-out infinite alternate;
}
@keyframes cfsMachineFloat {
    from {
        transform:
            translateY(0) rotate(-1deg);
    }
    to {
        transform:
            translateY(-12px) rotate(1deg);
    }
}
/* ORANGE OFFSET */
.cfs-machine::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 16px;
    left: 16px;
    width: 100%;
    height: 100%;
    border:
        3px solid var(--cfs-orange);
}
/* =========================================================
   MACHINE TOP
========================================================= */
.cfs-machine-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:
        18px 20px;
    border-bottom:
        1px solid rgba(255, 255, 255, .12);
}
.cfs-machine-top small,
.cfs-machine-top span {
    color:
        rgba(255, 255, 255, .48);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
/* =========================================================
   MACHINE CENTER
========================================================= */
.cfs-machine-center {
    position: relative;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:
        30px 20px;
    overflow: hidden;
}
/* MOVING SCAN */
.cfs-machine-center::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--cfs-orange),
            transparent);
    box-shadow:
        0 0 20px rgba(233, 92, 0, .6);
    animation:
        cfsScan 4s ease-in-out infinite;
}
@keyframes cfsScan {
    0% {
        top: 8%;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 92%;
        opacity: 0;
    }
}
.cfs-small-title {
    position: relative;
    z-index: 2;
    margin-bottom: 13px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
.cfs-machine-center>strong {
    position: relative;
    z-index: 2;
    color:
        var(--cfs-white);
    font-size: 72px;
    font-weight: 900;
    line-height: .7;
    letter-spacing: -6px;
    text-align: center;
}
.cfs-machine-center>strong em {
    display: block;
    margin-top: 13px;
    color:
        var(--cfs-orange);
    font-size: 22px;
    font-style: normal;
    letter-spacing: 2px;
}
/* =========================================================
   TARGET
========================================================= */
.cfs-target {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    margin:
        30px 0 25px;
    border:
        1px solid rgba(255, 255, 255, .20);
    border-radius: 50%;
    animation:
        cfsTargetRotate 8s linear infinite;
}
.cfs-target::before {
    content: "";
    position: absolute;
    inset: 10px;
    border:
        1px dashed rgba(233, 92, 0, .55);
    border-radius: 50%;
}
.cfs-target::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    width: calc(100% + 28px);
    height: 1px;
    background:
        rgba(255, 255, 255, .14);
}
.cfs-target span {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 1px;
    height: calc(100% + 28px);
    background:
        rgba(255, 255, 255, .14);
    transform:
        translateX(-50%);
}
.cfs-target i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:
        var(--cfs-orange);
    transform:
        translate(-50%, -50%);
}
@keyframes cfsTargetRotate {
    to {
        transform:
            rotate(360deg);
    }
}
/* =========================================================
   SYSTEM VALUES
========================================================= */
.cfs-system-values {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
}
.cfs-system-values span {
    color:
        rgba(255, 255, 255, .55);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .7px;
}
.cfs-system-values small {
    margin-right: 3px;
    color:
        var(--cfs-orange);
    font-size: 6px;
}
/* =========================================================
   MACHINE BOTTOM
========================================================= */
.cfs-machine-bottom {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    border-top:
        1px solid rgba(255, 255, 255, .12);
}
.cfs-machine-bottom span {
    color:
        rgba(255, 255, 255, .55);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.cfs-machine-bottom i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--cfs-orange);
}
/* =========================================================
   FLOATING ORANGE LABEL
========================================================= */
.cfs-fit-label {
    position: absolute;
    z-index: 10;
    right: -5px;
    bottom: 35px;
    min-width: 135px;
    padding:
        18px 20px;
    color:
        var(--cfs-white);
    background:
        var(--cfs-orange);
    box-shadow:
        0 18px 35px rgba(233, 92, 0, .20);
    animation:
        cfsLabelMove 4s ease-in-out infinite alternate;
}
.cfs-fit-label small {
    display: block;
    margin-bottom: 3px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
    opacity: .7;
}
.cfs-fit-label strong {
    font-size: 14px;
    font-weight: 900;
}
@keyframes cfsLabelMove {
    to {
        transform:
            translateY(-12px);
    }
}
/* =========================================================
   FLOW
========================================================= */
.cfs-flow {
    display: grid;
    grid-template-columns:
        minmax(280px, .65fr) minmax(0, 1.35fr);
    align-items: end;
    gap: 80px;
    padding:
        65px 0 75px;
    border-top:
        1px solid rgba(7, 61, 59, .14);
}
.cfs-flow-intro small {
    display: block;
    margin-bottom: 11px;
    color:
        var(--cfs-orange);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}
.cfs-flow-intro strong {
    display: block;
    color:
        var(--cfs-green);
    font-size:
        clamp(30px, 3vw, 43px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -2px;
}
.cfs-flow-intro strong span {
    color:
        var(--cfs-orange);
}
/* =========================================================
   FLOW TRACK
========================================================= */
.cfs-flow-track {
    position: relative;
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
}
.cfs-flow-track::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10%;
    left: 10%;
    height: 1px;
    background:
        rgba(7, 61, 59, .18);
}
.cfs-flow-item {
    position: relative;
    z-index: 2;
    text-align: center;
}
.cfs-flow-dot {
    display: block;
    width: 20px;
    height: 20px;
    margin:
        0 auto 15px;
    border:
        5px solid var(--cfs-light);
    border-radius: 50%;
    background:
        var(--cfs-orange);
    box-shadow:
        0 0 0 1px rgba(233, 92, 0, .35);
    animation:
        cfsFlowPulse 2.5s ease-in-out infinite;
}
.cfs-flow-item:nth-child(2) .cfs-flow-dot {
    animation-delay: .3s;
}
.cfs-flow-item:nth-child(3) .cfs-flow-dot {
    animation-delay: .6s;
}
.cfs-flow-item:nth-child(4) .cfs-flow-dot {
    animation-delay: .9s;
}
@keyframes cfsFlowPulse {
    50% {
        box-shadow:
            0 0 0 9px rgba(233, 92, 0, .08);
    }
}
.cfs-flow-item small {
    display: block;
    margin-bottom: 5px;
    color:
        rgba(7, 61, 59, .35);
    font-size: 8px;
    font-weight: 900;
}
.cfs-flow-item strong {
    color:
        var(--cfs-green);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   BOTTOM
========================================================= */
.cfs-bottom {
    position: relative;
    z-index: 10;
    overflow: hidden;
    background:
        var(--cfs-dark);
    border-top:
        5px solid var(--cfs-orange);
}
.cfs-bottom-track {
    min-height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
    padding:
        22px 35px;
}
.cfs-bottom-track span,
.cfs-bottom-track strong {
    color:
        rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
.cfs-bottom-track strong {
    color:
        var(--cfs-orange);
}
.cfs-bottom-track i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--cfs-orange);
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
    .cfs-layout {
        grid-template-columns:
            minmax(0, 1fr) 380px minmax(0, 1fr);
        gap: 80px;
    }
    .cfs-copy p {
        font-size: 18px;
    }
    .cfs-machine {
        width: 320px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .cfs-system {
        padding-top: 95px;
    }
    .cfs-layout {
        grid-template-columns:
            1fr 260px 1fr;
        gap: 30px;
    }
    .cfs-copy p {
        font-size: 15px;
    }
    .cfs-copy-head {
        grid-template-columns:
            40px 1fr;
    }
    .cfs-copy-head strong {
        font-size: 17px;
    }
    .cfs-configurator {
        min-height: 520px;
    }
    .cfs-machine {
        width: 230px;
    }
    .cfs-machine-center>strong {
        font-size: 58px;
    }
    .cfs-fit-label {
        right: -10px;
    }
    .cfs-flow {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .cfs-system {
        padding-top: 75px;
    }
    .cfs-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 17px;
        margin-bottom: 45px;
    }
    .cfs-kicker {
        font-size: 8px;
    }
    .cfs-top-code {
        font-size: 7px;
        line-height: 1.5;
    }
    /* HEADING */
    .cfs-heading {
        margin-bottom: 70px;
    }
    .cfs-heading h2 {
        font-size:
            clamp(45px, 12vw, 62px);
        line-height: .9;
        letter-spacing: -3px;
    }
    .cfs-heading h2>strong {
        margin-top: 16px;
        font-size: .52em;
        line-height: 1.05;
    }
    /* CONTENT */
    .cfs-layout {
        display: flex;
        flex-direction: column;
        gap: 55px;
        margin-bottom: 80px;
    }
    .cfs-copy-one {
        order: 1;
    }
    .cfs-configurator {
        order: 2;
        width: 100%;
        min-height: 560px;
    }
    .cfs-copy-two {
        order: 3;
        margin-top: 0;
    }
    .cfs-copy p {
        font-size: 16px;
        line-height: 1.8;
    }
    .cfs-copy-head {
        grid-template-columns:
            42px 1fr;
    }
    .cfs-copy-head strong {
        font-size: 19px;
    }
    /* MACHINE */
    .cfs-machine {
        width: 270px;
    }
    .cfs-machine-center>strong {
        font-size: 65px;
    }
    .cfs-measure-side {
        left: calc(50% - 175px);
    }
    .cfs-fit-label {
        right: calc(50% - 165px);
    }
    /* FLOW */
    .cfs-flow {
        padding:
            55px 0 60px;
    }
    .cfs-flow-intro strong {
        font-size: 34px;
    }
    .cfs-flow-item strong {
        font-size: 8px;
    }
    /* BACKGROUND */
    .cfs-bg-word {
        top: 720px;
        font-size: 170px;
        letter-spacing: -12px;
        transform:
            translateX(-50%) rotate(-90deg);
    }
    .cfs-dots {
        right: -50px;
    }
    /* BOTTOM */
    .cfs-bottom-track {
        gap: 17px;
    }
    .cfs-bottom-track span,
    .cfs-bottom-track strong {
        font-size: 8px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .cfs-heading h2 {
        font-size: 42px;
    }
    .cfs-heading h2>strong {
        font-size: 23px;
    }
    .cfs-copy p {
        font-size: 15px;
    }
    .cfs-configurator {
        min-height: 520px;
    }
    .cfs-machine {
        width: 240px;
    }
    .cfs-machine-center>strong {
        font-size: 58px;
    }
    .cfs-measure-top {
        width: 245px;
    }
    .cfs-measure-side {
        display: none;
    }
    .cfs-fit-label {
        right: 0;
    }
    .cfs-flow-track {
        grid-template-columns:
            repeat(2, 1fr);
        gap: 35px 10px;
    }
    .cfs-flow-track::before {
        display: none;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .cfs-system *,
    .cfs-system *::before,
    .cfs-system *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   AUTO MOVING FULL WIDTH GALLERY
========================================================= */
.ags-gallery {
    --ags-orange: #e95c00;
    --ags-orange-dark: #c94e00;
    --ags-green: #073d3b;
    --ags-dark: #042e2d;
    --ags-white: #ffffff;
    --ags-light: #f5f6f6;
    --ags-gray: #777176;
    --ags-text: #737b7b;
    position: relative;
    padding: 125px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 8%,
            rgba(233, 92, 0, .08),
            transparent 23%),
        linear-gradient(135deg,
            #ffffff 0%,
            #f5f6f6 58%,
            #edf0ef 100%);
}
/* =========================================================
   PAGE BACKGROUND
========================================================= */
.ags-page-decor {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ags-page-decor::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(rgba(7, 61, 59, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(7, 61, 59, .018) 1px,
            transparent 1px);
    background-size:
        80px 80px;
}
.ags-page-word {
    position: absolute;
    top: 210px;
    left: 50%;
    color:
        rgba(7, 61, 59, .025);
    font-size:
        clamp(190px, 26vw, 410px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -28px;
    white-space: nowrap;
    transform:
        translateX(-50%);
}
.ags-page-dots {
    position: absolute;
    top: 60px;
    right: 4%;
    width: 180px;
    height: 140px;
    opacity: .15;
    background-image:
        radial-gradient(circle,
            var(--ags-orange) 2px,
            transparent 2.5px);
    background-size:
        18px 18px;
}
.ags-page-orange {
    position: absolute;
    top: 0;
    left: 7%;
    width: 9px;
    height: 95px;
    background:
        var(--ags-orange);
}
/* =========================================================
   CONTAINER
========================================================= */
.ags-gallery>.container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   HEADER
========================================================= */
.ags-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr) minmax(300px, .55fr);
    align-items: end;
    gap: 80px;
    margin-bottom: 75px;
}
/* KICKER */
.ags-kicker {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color:
        var(--ags-orange);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.7px;
}
.ags-kicker>span {
    position: relative;
    width: 60px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .20);
}
.ags-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--ags-orange);
    animation:
        agsKickerMove 2.6s ease-in-out infinite;
}
@keyframes agsKickerMove {
    0% {
        transform: translateX(-110%);
    }
    70%,
    100% {
        transform: translateX(110%);
    }
}
/* MAIN TITLE */
.ags-heading h2 {
    margin: 0;
    color:
        var(--ags-green);
    font-size:
        clamp(62px, 6.7vw, 104px);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -6px;
}
.ags-heading h2 span {
    display: block;
    color:
        var(--ags-orange);
}
/* =========================================================
   HEADER INFO
========================================================= */
.ags-header-info {
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 22px;
    padding-top: 22px;
    border-top:
        1px solid rgba(7, 61, 59, .15);
}
.ags-header-number {
    color:
        var(--ags-orange);
    font-size: 66px;
    font-weight: 900;
    line-height: .75;
    letter-spacing: -5px;
}
.ags-header-info small {
    display: block;
    margin-bottom: 9px;
    color:
        var(--ags-green);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ags-header-info p {
    margin: 0;
    color:
        var(--ags-text);
    font-size: 15px;
    line-height: 1.7;
}
/* =========================================================
   FULL WIDTH DARK STAGE
========================================================= */
.ags-stage {
    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    padding:
        34px 0 38px;
    background:
        radial-gradient(circle at 50% 40%,
            rgba(255, 255, 255, .025),
            transparent 35%),
        linear-gradient(135deg,
            #042e2d,
            #073d3b 55%,
            #042e2d);
    border-top:
        5px solid var(--ags-orange);
}
/* GRID OVER STAGE */
.ags-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .45;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);
    background-size:
        80px 80px;
}
/* HUGE STAGE WORD */
.ags-stage-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ags-stage-bg span {
    position: absolute;
    top: 290px;
    left: 50%;
    color:
        rgba(255, 255, 255, .025);
    font-size:
        clamp(150px, 19vw, 330px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -20px;
    white-space: nowrap;
    transform:
        translateX(-50%);
}
/* =========================================================
   STAGE TOP
========================================================= */
.ags-stage-top {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding:
        0 4% 30px;
}
.ags-stage-label {
    display: flex;
    align-items: center;
    gap: 13px;
    color:
        rgba(255, 255, 255, .46);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ags-stage-label>span {
    width: 38px;
    height: 3px;
    background:
        var(--ags-orange);
}
.ags-stage-label i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ags-orange);
}
/* AUTO MOTION */
.ags-stage-motion {
    display: flex;
    align-items: center;
    gap: 12px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}
.ags-motion-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background:
        var(--ags-orange);
}
.ags-motion-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border:
        1px solid var(--ags-orange);
    border-radius: 50%;
    animation:
        agsMotionPulse 1.6s ease-out infinite;
}
@keyframes agsMotionPulse {
    from {
        opacity: 1;
        transform: scale(.5);
    }
    to {
        opacity: 0;
        transform: scale(1.7);
    }
}
.ags-stage-motion strong {
    color:
        var(--ags-orange);
    font-size: 22px;
    animation:
        agsArrowMove 1.3s ease-in-out infinite alternate;
}
@keyframes agsArrowMove {
    to {
        transform: translateX(8px);
    }
}
/* =========================================================
   SLIDER VIEWPORT
========================================================= */
.ags-slider {
    position: relative;
    z-index: 5;
    width: 100%;
    overflow: hidden;
    padding:
        75px 0 65px;
}
/* =========================================================
   EDGE FADES
========================================================= */
.ags-edge {
    position: absolute;
    z-index: 50;
    top: 0;
    bottom: 0;
    width: 7%;
    pointer-events: none;
}
.ags-edge-left {
    left: 0;
    background:
        linear-gradient(90deg,
            var(--ags-dark),
            transparent);
}
.ags-edge-right {
    right: 0;
    background:
        linear-gradient(270deg,
            var(--ags-dark),
            transparent);
}
/* =========================================================
   AUTO MOVING TRACK
========================================================= */
.ags-track {
    --ags-gap: 28px;
    display: flex;
    width: max-content;
    will-change: transform;
    animation:
        agsAutoSlider 58s linear infinite;
}
/*
   Two identical groups are placed next to each other.
   Move exactly one group width.
*/
@keyframes agsAutoSlider {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* PAUSE ON HOVER */
.ags-slider:hover .ags-track {
    animation-play-state:
        paused;
}
/* =========================================================
   GROUP
========================================================= */
.ags-group {
    display: flex;
    align-items: flex-start;
    gap:
        var(--ags-gap);
    flex-shrink: 0;
    padding-right:
        var(--ags-gap);
}
/* =========================================================
   PROJECT
========================================================= */
.ags-project {
    position: relative;
    flex:
        0 0 clamp(285px, 21vw, 365px);
    display: block;
    color:
        var(--ags-white);
    text-decoration:
        none;
}
/* STAGGER */
.ags-project:nth-child(2n) {
    margin-top:
        70px;
}
.ags-project:nth-child(3n) {
    margin-top:
        25px;
}
/* =========================================================
   NUMBER
========================================================= */
.ags-number {
    position: absolute;
    z-index: -1;
    top: -68px;
    left: -7px;
    color:
        rgba(255, 255, 255, .07);
    font-size:
        102px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -8px;
    transition:
        color .4s ease,
        transform .4s ease;
}
.ags-project:hover .ags-number {
    color:
        rgba(233, 92, 0, .24);
    transform:
        translateY(-8px);
}
/* =========================================================
   PHOTO
========================================================= */
.ags-photo {
    position: relative;
    width: 100%;
    height: 475px;
    overflow: hidden;
    background:
        #102f2e;
    box-shadow:
        0 30px 65px rgba(0, 0, 0, .20);
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1);
}
/* DIFFERENT HEIGHTS */
.ags-tall .ags-photo {
    height: 570px;
}
.ags-short .ags-photo {
    height: 390px;
}
.ags-medium .ags-photo {
    height: 475px;
}
.ags-featured {
    flex-basis:
        clamp(320px, 24vw, 420px);
}
.ags-featured .ags-photo {
    height: 620px;
    outline:
        3px solid var(--ags-orange);
    outline-offset:
        7px;
}
/* IMAGE */
.ags-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform .8s cubic-bezier(.2, .8, .2, 1),
        filter .5s ease;
}
/* OVERLAY */
.ags-image-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(4, 46, 45, .02) 15%,
            rgba(4, 46, 45, .08) 55%,
            rgba(4, 46, 45, .67) 100%);
    transition:
        background .4s ease;
}
/* HOVER */
.ags-project:hover .ags-photo {
    transform:
        translateY(-10px);
}
.ags-project:hover .ags-photo img {
    transform:
        scale(1.08);
}
.ags-project:hover .ags-image-overlay {
    background:
        linear-gradient(180deg,
            transparent 15%,
            rgba(4, 46, 45, .03) 45%,
            rgba(4, 46, 45, .78) 100%);
}
/* =========================================================
   CATEGORY
========================================================= */
.ags-category {
    position: absolute;
    z-index: 6;
    bottom: 18px;
    left: 18px;
    padding:
        9px 13px;
    color:
        var(--ags-white);
    background:
        var(--ags-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
    transition:
        transform .4s ease;
}
.ags-project:hover .ags-category {
    transform:
        translateY(-6px);
}
/* =========================================================
   SCAN
========================================================= */
.ags-scan {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    opacity: 0;
    background:
        linear-gradient(90deg,
            transparent,
            var(--ags-orange),
            transparent);
    box-shadow:
        0 0 16px rgba(233, 92, 0, .55);
}
.ags-project:hover .ags-scan {
    opacity: 1;
    animation:
        agsScanMove 1.25s ease-in-out;
}
@keyframes agsScanMove {
    from {
        top: 0;
    }
    to {
        top: 100%;
    }
}
/* =========================================================
   INFO
========================================================= */
.ags-info {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding:
        25px 4px 0;
    border-top:
        1px solid rgba(255, 255, 255, .10);
}
.ags-info small {
    display: block;
    margin-bottom: 9px;
    color:
        var(--ags-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
.ags-info h3 {
    margin: 0;
    color:
        var(--ags-white);
    font-size: 23px;
    font-weight: 900;
    line-height: .94;
    letter-spacing: -1px;
}
.ags-info h3 span {
    display: block;
}
/* =========================================================
   ARROW
========================================================= */
.ags-arrow {
    width: 43px;
    height: 43px;
    flex:
        0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--ags-dark);
    background:
        var(--ags-white);
    font-size: 20px;
    transition:
        color .35s ease,
        background .35s ease,
        transform .35s ease;
}
.ags-project:hover .ags-arrow {
    color:
        var(--ags-white);
    background:
        var(--ags-orange);
    transform:
        rotate(45deg);
}
/* =========================================================
   FEATURED
========================================================= */
.ags-featured-label {
    position: absolute;
    z-index: 20;
    top: 22px;
    right: -10px;
    padding:
        13px 10px;
    color:
        var(--ags-white);
    background:
        var(--ags-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
    writing-mode:
        vertical-rl;
    box-shadow:
        0 15px 30px rgba(0, 0, 0, .20);
}
/* =========================================================
   STAGE BOTTOM
========================================================= */
.ags-stage-bottom {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding:
        25px 4% 0;
}
.ags-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.ags-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--ags-orange);
    animation:
        agsStatusBlink 1.5s ease-in-out infinite;
}
@keyframes agsStatusBlink {
    50% {
        opacity: .25;
    }
}
/* LINE */
.ags-stage-line {
    position: relative;
    height: 1px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .12);
}
.ags-stage-line span {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 1px;
    background:
        var(--ags-orange);
    animation:
        agsStageLine 5s linear infinite;
}
@keyframes agsStageLine {
    from {
        transform: translateX(-120px);
    }
    to {
        transform: translateX(700px);
    }
}
/* META */
.ags-stage-meta {
    display: flex;
    align-items: center;
    gap: 11px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}
.ags-stage-meta i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ags-orange);
}
/* =========================================================
   FINAL BOTTOM
========================================================= */
.ags-bottom {
    display: grid;
    grid-template-columns:
        auto auto 1fr auto;
    align-items: center;
    gap: 25px;
    padding-top:
        65px;
}
.ags-bottom-block {
    width: 55px;
    height: 55px;
    background:
        var(--ags-orange);
    transform:
        rotate(45deg);
    animation:
        agsBottomBlock 5s ease-in-out infinite alternate;
}
@keyframes agsBottomBlock {
    to {
        transform: rotate(135deg);
    }
}
.ags-bottom-copy small {
    display: block;
    margin-bottom: 7px;
    color:
        var(--ags-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.ags-bottom-copy strong {
    display: block;
    color:
        var(--ags-green);
    font-size: 25px;
    font-weight: 900;
    line-height: .95;
}
.ags-bottom-copy strong span {
    display: block;
    color:
        var(--ags-orange);
}
/* BOTTOM RULE */
.ags-bottom-rule {
    position: relative;
    height: 1px;
    overflow: hidden;
    background:
        rgba(7, 61, 59, .15);
}
.ags-bottom-rule span {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 1px;
    background:
        var(--ags-orange);
    animation:
        agsBottomRule 4s linear infinite;
}
@keyframes agsBottomRule {
    from {
        transform: translateX(-100px);
    }
    to {
        transform: translateX(800px);
    }
}
.ags-bottom-right {
    display: flex;
    align-items: center;
    gap: 10px;
    color:
        var(--ags-green);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.ags-bottom-right i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--ags-orange);
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1500px) {
    .ags-project {
        flex-basis:
            390px;
    }
    .ags-featured {
        flex-basis:
            445px;
    }
    .ags-tall .ags-photo {
        height:
            610px;
    }
    .ags-featured .ags-photo {
        height:
            660px;
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .ags-gallery {
        padding:
            95px 0 80px;
    }
    .ags-header {
        grid-template-columns:
            1fr;
        gap:
            35px;
        margin-bottom:
            60px;
    }
    .ags-header-info {
        max-width:
            520px;
    }
    .ags-project {
        flex-basis:
            320px;
    }
    .ags-featured {
        flex-basis:
            360px;
    }
    .ags-stage-bottom {
        grid-template-columns:
            1fr;
    }
    .ags-stage-line {
        width:
            100%;
    }
    .ags-bottom {
        grid-template-columns:
            auto 1fr;
        gap:
            25px;
    }
    .ags-bottom-rule {
        grid-column:
            1 / -1;
    }
    .ags-bottom-right {
        grid-column:
            1 / -1;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .ags-gallery {
        padding:
            75px 0 65px;
    }
    .ags-heading h2 {
        font-size:
            clamp(46px, 12vw, 64px);
        line-height:
            .89;
        letter-spacing:
            -3px;
    }
    .ags-header-info {
        grid-template-columns:
            55px 1fr;
    }
    .ags-header-number {
        font-size:
            52px;
    }
    .ags-header-info p {
        font-size:
            14px;
    }
    /* TOP */
    .ags-stage-top {
        align-items:
            flex-start;
        flex-direction:
            column;
        padding:
            0 20px 25px;
    }
    .ags-stage-label {
        flex-wrap:
            wrap;
        font-size:
            7px;
    }
    /* SLIDER */
    .ags-slider {
        padding:
            65px 0 50px;
    }
    .ags-track {
        --ags-gap:
            18px;
        animation-duration:
            48s;
    }
    .ags-project {
        flex-basis:
            280px;
        margin-top:
            0 !important;
    }
    .ags-featured {
        flex-basis:
            315px;
    }
    .ags-tall .ags-photo {
        height:
            470px;
    }
    .ags-short .ags-photo {
        height:
            350px;
    }
    .ags-medium .ags-photo {
        height:
            410px;
    }
    .ags-featured .ags-photo {
        height:
            510px;
    }
    .ags-number {
        top:
            -50px;
        font-size:
            76px;
    }
    .ags-info h3 {
        font-size:
            21px;
    }
    .ags-edge {
        width:
            25px;
    }
    /* STAGE BOTTOM */
    .ags-stage-bottom {
        padding-right:
            20px;
        padding-left:
            20px;
    }
    .ags-stage-meta {
        flex-wrap:
            wrap;
    }
    /* FINAL */
    .ags-bottom {
        padding-top:
            50px;
    }
    .ags-bottom-block {
        width:
            42px;
        height:
            42px;
    }
    .ags-bottom-copy strong {
        font-size:
            22px;
    }
    .ags-bottom-right {
        flex-wrap:
            wrap;
    }
    .ags-page-word {
        top:
            550px;
        font-size:
            170px;
        letter-spacing:
            -12px;
        transform:
            translateX(-50%) rotate(-90deg);
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .ags-kicker {
        font-size:
            8px;
    }
    .ags-kicker>span {
        width:
            40px;
    }
    .ags-project {
        flex-basis:
            250px;
    }
    .ags-featured {
        flex-basis:
            280px;
    }
    .ags-tall .ags-photo {
        height:
            420px;
    }
    .ags-short .ags-photo {
        height:
            320px;
    }
    .ags-medium .ags-photo {
        height:
            370px;
    }
    .ags-featured .ags-photo {
        height:
            455px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .ags-track,
    .ags-gallery *,
    .ags-gallery *::before,
    .ags-gallery *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
/* =========================================================
   QUESTION BOARD FAQ
========================================================= */
.qbx-faq {
    --qbx-orange: #e95c00;
    --qbx-orange-dark: #c94e00;
    --qbx-green: #073d3b;
    --qbx-dark: #042e2d;
    --qbx-gray: #777176;
    --qbx-light: #f5f6f6;
    --qbx-white: #ffffff;
    --qbx-text: #737b7b;
    position: relative;
    padding: 125px 0 110px;
    overflow: hidden;
    background:
        linear-gradient(105deg,
            #ffffff 0%,
            #f5f6f6 62%,
            #eef1ef 100%);
}
/* =========================================================
   BACKGROUND
========================================================= */
.qbx-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.qbx-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(rgba(7, 61, 59, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(7, 61, 59, .018) 1px,
            transparent 1px);
    background-size:
        80px 80px;
}
/* GIANT FAQ */
.qbx-bg-word {
    position: absolute;
    right: -35px;
    top: 140px;
    color:
        rgba(7, 61, 59, .035);
    font-size:
        clamp(260px, 38vw, 600px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -40px;
}
/* DOTS */
.qbx-dots {
    position: absolute;
    top: 55px;
    left: 3%;
    width: 160px;
    height: 130px;
    opacity: .15;
    background-image:
        radial-gradient(circle,
            var(--qbx-orange) 2px,
            transparent 2.5px);
    background-size:
        18px 18px;
}
/* CORNERS */
.qbx-corner {
    position: absolute;
    width: 70px;
    height: 70px;
}
.qbx-corner-one {
    top: 0;
    right: 7%;
    border-top:
        8px solid var(--qbx-orange);
    border-right:
        8px solid var(--qbx-orange);
}
.qbx-corner-two {
    bottom: 0;
    left: 7%;
    border-bottom:
        8px solid var(--qbx-orange);
    border-left:
        8px solid var(--qbx-orange);
}
/* =========================================================
   CONTAINER
========================================================= */
.qbx-faq .container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   HEADER
========================================================= */
.qbx-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr) minmax(280px, .5fr);
    align-items: end;
    gap: 70px;
    margin-bottom: 75px;
}
/* KICKER */
.qbx-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color:
        var(--qbx-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.qbx-kicker>span {
    position: relative;
    width: 58px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233, 92, 0, .20);
}
.qbx-kicker>span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--qbx-orange);
    animation:
        qbxKicker 2.6s ease-in-out infinite;
}
@keyframes qbxKicker {
    0% {
        transform: translateX(-110%);
    }
    70%,
    100% {
        transform: translateX(110%);
    }
}
/* HEADING */
.qbx-heading h2 {
    max-width: 850px;
    margin: 0;
    color:
        var(--qbx-green);
    font-size:
        clamp(58px, 6.2vw, 96px);
    font-weight: 900;
    line-height: .87;
    letter-spacing: -6px;
}
.qbx-heading h2 span {
    display: block;
    color:
        var(--qbx-orange);
}
/* =========================================================
   HEADER NOTE
========================================================= */
.qbx-header-note {
    display: grid;
    grid-template-columns:
        auto 1fr;
    gap: 20px;
    padding-top: 20px;
    border-top:
        1px solid rgba(7, 61, 59, .16);
}
.qbx-header-note>strong {
    color:
        var(--qbx-orange);
    font-size: 64px;
    font-weight: 900;
    line-height: .75;
    letter-spacing: -5px;
}
.qbx-header-note small {
    display: block;
    margin-bottom: 7px;
    color:
        var(--qbx-green);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.qbx-header-note p {
    margin: 0;
    color:
        var(--qbx-text);
    font-size: 14px;
    line-height: 1.7;
}
/* =========================================================
   BOARD
========================================================= */
.qbx-board {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(390px, .85fr) minmax(0, 1.15fr);
    min-height: 690px;
    background:
        var(--qbx-white);
    box-shadow:
        0 35px 80px rgba(7, 61, 59, .10);
}
/* HIDE RADIO */
.qbx-board>input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* =========================================================
   QUESTION INDEX
========================================================= */
.qbx-index {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding:
        32px 0 25px;
    color:
        var(--qbx-white);
    overflow: hidden;
    background:
        linear-gradient(145deg,
            var(--qbx-dark),
            var(--qbx-green));
}
/* GRID */
.qbx-index::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px);
    background-size:
        55px 55px;
}
/* TOP */
.qbx-index-top {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding:
        0 32px 25px;
    color:
        rgba(255, 255, 255, .45);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.qbx-index-top small {
    color:
        var(--qbx-orange);
    font-size: 8px;
}
/* =========================================================
   QUESTION
========================================================= */
.qbx-question {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        45px 1fr 38px;
    align-items: center;
    gap: 15px;
    min-height: 125px;
    padding:
        22px 28px 22px 32px;
    border-top:
        1px solid rgba(255, 255, 255, .10);
    cursor: pointer;
    overflow: hidden;
    transition:
        background .35s ease,
        padding .35s ease;
}
.qbx-question::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background:
        var(--qbx-orange);
    transform:
        scaleY(0);
    transform-origin:
        bottom;
    transition:
        transform .35s ease;
}
.qbx-question::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--qbx-orange);
    transform:
        translateX(-102%);
    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1);
}
/* NUMBER */
.qbx-question-number {
    color:
        rgba(255, 255, 255, .30);
    font-size: 12px;
    font-weight: 900;
}
/* TEXT */
.qbx-question strong {
    color:
        var(--qbx-white);
    font-size:
        18px;
    font-weight: 800;
    line-height: 1.2;
    transition:
        transform .35s ease;
}
/* ARROW */
.qbx-question-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border:
        1px solid rgba(255, 255, 255, .18);
    color:
        var(--qbx-white);
    transition:
        color .35s ease,
        background .35s ease,
        transform .35s ease;
}
/* HOVER */
.qbx-question:hover {
    background:
        rgba(255, 255, 255, .04);
}
.qbx-question:hover strong {
    transform:
        translateX(5px);
}
.qbx-question:hover .qbx-question-arrow {
    color:
        var(--qbx-green);
    background:
        var(--qbx-white);
    transform:
        translateX(4px);
}
/* =========================================================
   ACTIVE QUESTION
========================================================= */
#qbx-faq-1:checked~.qbx-index .qbx-question-1::after,
#qbx-faq-2:checked~.qbx-index .qbx-question-2::after,
#qbx-faq-3:checked~.qbx-index .qbx-question-3::after,
#qbx-faq-4:checked~.qbx-index .qbx-question-4::after {
    transform:
        translateX(0);
}
#qbx-faq-1:checked~.qbx-index .qbx-question-1::before,
#qbx-faq-2:checked~.qbx-index .qbx-question-2::before,
#qbx-faq-3:checked~.qbx-index .qbx-question-3::before,
#qbx-faq-4:checked~.qbx-index .qbx-question-4::before {
    transform:
        scaleY(1);
}
#qbx-faq-1:checked~.qbx-index .qbx-question-1 .qbx-question-number,
#qbx-faq-2:checked~.qbx-index .qbx-question-2 .qbx-question-number,
#qbx-faq-3:checked~.qbx-index .qbx-question-3 .qbx-question-number,
#qbx-faq-4:checked~.qbx-index .qbx-question-4 .qbx-question-number {
    color:
        rgba(255, 255, 255, .75);
}
#qbx-faq-1:checked~.qbx-index .qbx-question-1 .qbx-question-arrow,
#qbx-faq-2:checked~.qbx-index .qbx-question-2 .qbx-question-arrow,
#qbx-faq-3:checked~.qbx-index .qbx-question-3 .qbx-question-arrow,
#qbx-faq-4:checked~.qbx-index .qbx-question-4 .qbx-question-arrow {
    color:
        var(--qbx-orange);
    background:
        var(--qbx-white);
    border-color:
        var(--qbx-white);
    transform:
        rotate(-35deg);
}
/* =========================================================
   INDEX BOTTOM
========================================================= */
.qbx-index-bottom {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding:
        24px 32px 0;
    color:
        rgba(255, 255, 255, .40);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.qbx-index-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background:
        var(--qbx-orange);
}
.qbx-index-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border:
        1px solid var(--qbx-orange);
    border-radius: 50%;
    animation:
        qbxPulse 1.8s ease-out infinite;
}
@keyframes qbxPulse {
    from {
        opacity: 1;
        transform: scale(.5);
    }
    to {
        opacity: 0;
        transform: scale(1.7);
    }
}
/* =========================================================
   ANSWER AREA
========================================================= */
.qbx-answer-area {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            #ffffff,
            #f5f6f6);
}
/* VERTICAL ANSWERS */
.qbx-answer-vertical {
    position: absolute;
    z-index: 2;
    right: 18px;
    top: 50%;
    color:
        rgba(7, 61, 59, .055);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 7px;
    writing-mode:
        vertical-rl;
    transform:
        translateY(-50%);
}
/* SCAN */
.qbx-answer-scan {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background:
        linear-gradient(transparent,
            var(--qbx-orange),
            transparent);
    animation:
        qbxAnswerScan 5s ease-in-out infinite;
}
@keyframes qbxAnswerScan {
    0%,
    100% {
        opacity: .2;
        transform: translateY(-60%);
    }
    50% {
        opacity: .8;
        transform: translateY(60%);
    }
}
/* =========================================================
   ANSWERS
========================================================= */
.qbx-answer {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding:
        38px 65px 35px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform:
        translateX(35px);
    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease;
}
/* ACTIVE ANSWER */
#qbx-faq-1:checked~.qbx-answer-area .qbx-answer-1,
#qbx-faq-2:checked~.qbx-answer-area .qbx-answer-2,
#qbx-faq-3:checked~.qbx-answer-area .qbx-answer-3,
#qbx-faq-4:checked~.qbx-answer-area .qbx-answer-4 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform:
        translateX(0);
}
/* =========================================================
   ANSWER TOP
========================================================= */
.qbx-answer-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom:
        1px solid rgba(7, 61, 59, .12);
}
.qbx-answer-id {
    color:
        var(--qbx-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
.qbx-answer-status {
    display: flex;
    align-items: center;
    gap: 9px;
    color:
        var(--qbx-green);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.qbx-answer-status i {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        var(--qbx-orange);
}
.qbx-answer-status i::after {
    content: "";
    position: absolute;
    inset: -5px;
    border:
        1px solid var(--qbx-orange);
    border-radius: 50%;
    animation:
        qbxPulse 1.8s ease-out infinite;
}
/* =========================================================
   HUGE NUMBER
========================================================= */
.qbx-answer-number {
    position: absolute;
    z-index: 0;
    right: 50px;
    top: 90px;
    color:
        rgba(7, 61, 59, .035);
    font-size:
        clamp(210px, 21vw, 330px);
    font-weight: 900;
    line-height: .75;
    letter-spacing: -20px;
}
/* =========================================================
   ANSWER CONTENT
========================================================= */
.qbx-answer-content {
    position: relative;
    z-index: 3;
    max-width: 720px;
    margin: auto 0;
}
.qbx-answer-content>small {
    display: block;
    margin-bottom: 15px;
    color:
        var(--qbx-orange);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}
.qbx-answer-content h3 {
    max-width: 650px;
    margin:
        0 0 28px;
    color:
        var(--qbx-green);
    font-size:
        clamp(38px, 4vw, 60px);
    font-weight: 900;
    line-height: .89;
    letter-spacing: -3px;
}
.qbx-answer-content h3 span {
    display: block;
    color:
        var(--qbx-orange);
}
.qbx-answer-content p {
    max-width: 680px;
    margin: 0;
    color:
        var(--qbx-text);
    font-size: 17px;
    line-height: 1.85;
}
/* =========================================================
   ANSWER FOOTER
========================================================= */
.qbx-answer-footer {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 25px;
    border-top:
        1px solid rgba(7, 61, 59, .12);
    color:
        var(--qbx-green);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.qbx-answer-footer i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background:
        var(--qbx-orange);
}
/* =========================================================
   BOTTOM CTA
========================================================= */
.qbx-bottom {
    display: grid;
    grid-template-columns:
        auto auto 1fr auto;
    align-items: center;
    gap: 24px;
    margin-top: 45px;
}
.qbx-bottom-mark {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:
        var(--qbx-white);
    background:
        var(--qbx-orange);
    font-size: 30px;
    font-weight: 900;
    transform:
        rotate(-6deg);
    transition:
        transform .35s ease;
}
.qbx-bottom:hover .qbx-bottom-mark {
    transform:
        rotate(6deg);
}
.qbx-bottom-copy small {
    display: block;
    margin-bottom: 6px;
    color:
        var(--qbx-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.qbx-bottom-copy strong {
    color:
        var(--qbx-green);
    font-size: 20px;
    font-weight: 900;
}
/* LINE */
.qbx-bottom-line {
    position: relative;
    height: 1px;
    overflow: hidden;
    background:
        rgba(7, 61, 59, .15);
}
.qbx-bottom-line span {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 1px;
    background:
        var(--qbx-orange);
    animation:
        qbxLineMove 4s linear infinite;
}
@keyframes qbxLineMove {
    from {
        transform: translateX(-100px);
    }
    to {
        transform: translateX(700px);
    }
}
/* BUTTON */
.qbx-contact {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 52px;
    padding:
        0 20px;
    color:
        var(--qbx-white);
    background:
        var(--qbx-green);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition:
        background .35s ease,
        transform .35s ease;
}
.qbx-contact span {
    color:
        var(--qbx-orange);
    font-size: 20px;
    transition:
        color .35s ease,
        transform .35s ease;
}
.qbx-contact:hover {
    background:
        var(--qbx-orange);
    transform:
        translateY(-4px);
}
.qbx-contact:hover span {
    color:
        var(--qbx-white);
    transform:
        translateX(5px);
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .qbx-faq {
        padding:
            95px 0 85px;
    }
    .qbx-header {
        grid-template-columns:
            1fr;
        gap:
            35px;
        margin-bottom:
            55px;
    }
    .qbx-header-note {
        max-width:
            520px;
    }
    .qbx-board {
        grid-template-columns:
            360px 1fr;
        min-height:
            720px;
    }
    .qbx-question {
        grid-template-columns:
            35px 1fr 34px;
        gap:
            10px;
        padding:
            20px;
    }
    .qbx-question strong {
        font-size:
            16px;
    }
    .qbx-answer {
        padding:
            35px 40px;
    }
    .qbx-answer-content p {
        font-size:
            16px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .qbx-faq {
        padding:
            75px 0 65px;
    }
    .qbx-heading h2 {
        font-size:
            clamp(45px, 12vw, 62px);
        line-height:
            .89;
        letter-spacing:
            -3px;
    }
    /* BOARD */
    .qbx-board {
        display: block;
        min-height: 0;
        background:
            transparent;
        box-shadow:
            none;
    }
    /* INDEX */
    .qbx-index {
        padding-bottom: 20px;
    }
    .qbx-question {
        min-height:
            105px;
        grid-template-columns:
            34px 1fr 36px;
        padding:
            18px 16px;
    }
    .qbx-question strong {
        font-size:
            16px;
    }
    .qbx-index-bottom {
        padding:
            22px 20px 0;
    }
    /* ANSWER AREA */
    .qbx-answer-area {
        min-height:
            570px;
        margin-top:
            15px;
    }
    .qbx-answer {
        padding:
            30px 25px;
    }
    .qbx-answer-content {
        margin:
            45px 0;
    }
    .qbx-answer-content h3 {
        font-size:
            clamp(34px, 9vw, 48px);
        letter-spacing:
            -2px;
    }
    .qbx-answer-content p {
        font-size:
            16px;
        line-height:
            1.75;
    }
    .qbx-answer-number {
        right:
            20px;
        top:
            120px;
        font-size:
            210px;
    }
    /* BOTTOM */
    .qbx-bottom {
        grid-template-columns:
            auto 1fr;
        gap:
            18px;
        margin-top:
            35px;
    }
    .qbx-bottom-line {
        grid-column:
            1 / -1;
    }
    .qbx-contact {
        grid-column:
            1 / -1;
        justify-content:
            space-between;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .qbx-kicker {
        font-size:
            8px;
        letter-spacing:
            1.7px;
    }
    .qbx-kicker>span {
        width:
            38px;
    }
    .qbx-header-note>strong {
        font-size:
            52px;
    }
    .qbx-question {
        grid-template-columns:
            28px 1fr 34px;
    }
    .qbx-question strong {
        font-size:
            15px;
    }
    .qbx-answer-area {
        min-height:
            620px;
    }
    .qbx-answer {
        padding:
            26px 20px;
    }
    .qbx-answer-top {
        align-items:
            flex-start;
        flex-direction:
            column;
        gap:
            10px;
    }
    .qbx-answer-content {
        margin:
            35px 0;
    }
    .qbx-answer-content p {
        font-size:
            15px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .qbx-faq *,
    .qbx-faq *::before,
    .qbx-faq *::after {
        animation:
            none !important;
        transition:
            none !important;
    }
}
/* =========================================================
   MISSION BEND CTA
========================================================= */
.mbcta-section {
    --cta-orange: #e95c00;
    --cta-orange-dark: #c94e00;
    --cta-green: #073d3b;
    --cta-dark: #042e2d;
    --cta-white: #ffffff;
    --cta-light: #f5f6f6;
    position: relative;
    padding: 125px 0 0;
    overflow: hidden;
    color: var(--cta-white);
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(233,92,0,.14),
            transparent 24%
        ),
        linear-gradient(
            120deg,
            #042e2d 0%,
            #073d3b 60%,
            #042e2d 100%
        );
}
/* =========================================================
   TECHNICAL BACKGROUND
========================================================= */
.mbcta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );
    background-size: 75px 75px;
}
/* =========================================================
   DECOR
========================================================= */
.mbcta-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.mbcta-bg-word {
    position: absolute;
    left: -25px;
    bottom: 45px;
    color: rgba(255,255,255,.025);
    font-size: clamp(180px,25vw,390px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -25px;
    white-space: nowrap;
}
/* RINGS */
.mbcta-ring {
    position: absolute;
    border-radius: 50%;
    border:
        1px solid rgba(255,255,255,.07);
}
.mbcta-ring-one {
    width: 470px;
    height: 470px;
    top: -210px;
    right: 9%;
    animation:
        mbctaRing 12s linear infinite;
}
.mbcta-ring-two {
    width: 350px;
    height: 350px;
    top: -150px;
    right: 13%;
    border-style: dashed;
    border-color:
        rgba(233,92,0,.22);
    animation:
        mbctaRing 18s linear infinite reverse;
}
@keyframes mbctaRing {
    to {
        transform: rotate(360deg);
    }
}
/* DOTS */
.mbcta-dots {
    position: absolute;
    left: 3%;
    top: 70px;
    width: 150px;
    height: 110px;
    opacity: .13;
    background-image:
        radial-gradient(
            circle,
            var(--cta-orange) 2px,
            transparent 2.5px
        );
    background-size: 18px 18px;
}
/* =========================================================
   ORANGE SIDE WORD
========================================================= */
.mbcta-orange-side {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 54px;
    height: calc(100% - 55px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        var(--cta-orange);
}
.mbcta-orange-side span {
    color: var(--cta-white);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    animation:
        mbctaSideMove 8s ease-in-out infinite alternate;
}
@keyframes mbctaSideMove {
    to {
        transform: translateY(40px);
    }
}
/* =========================================================
   CONTAINER
========================================================= */
.mbcta-section .container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   LAYOUT
========================================================= */
.mbcta-layout {
    display: grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(350px,.75fr);
    align-items: center;
    gap: 100px;
    min-height: 560px;
    padding-bottom: 110px;
}
/* =========================================================
   KICKER
========================================================= */
.mbcta-kicker {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    color: var(--cta-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.mbcta-kicker > span {
    position: relative;
    width: 60px;
    height: 3px;
    overflow: hidden;
    background:
        rgba(233,92,0,.25);
}
.mbcta-kicker > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--cta-orange);
    animation:
        mbctaKicker 2.4s ease-in-out infinite;
}
@keyframes mbctaKicker {
    0% {
        transform: translateX(-110%);
    }
    70%,
    100% {
        transform: translateX(110%);
    }
}
/* =========================================================
   TITLE
========================================================= */
.mbcta-main h2 {
    max-width: 850px;
    margin: 0 0 28px;
    color: var(--cta-white);
    font-size: clamp(65px,7vw,108px);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -7px;
}
.mbcta-main h2 span {
    display: block;
    color: var(--cta-orange);
}
/* =========================================================
   TEXT
========================================================= */
.mbcta-main > p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: 17px;
    line-height: 1.8;
}
/* =========================================================
   ACTIONS
========================================================= */
.mbcta-actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 42px;
}
/* CALL */
.mbcta-call {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding:
        10px 26px 10px 10px;
    color: var(--cta-dark);
    background: var(--cta-white);
    text-decoration: none;
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}
.mbcta-call-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cta-white);
    background: var(--cta-orange);
    transition:
        transform .4s ease;
}
.mbcta-call small {
    display: block;
    margin-bottom: 2px;
    color: #777;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.mbcta-call strong {
    display: block;
    color: var(--cta-green);
    font-size: 17px;
    font-weight: 900;
}
.mbcta-call:hover {
    transform: translateY(-5px);
}
.mbcta-call:hover .mbcta-call-icon {
    transform: rotate(-8deg) scale(1.05);
}
/* ESTIMATE */
.mbcta-estimate {
    position: relative;
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 0 27px;
    overflow: hidden;
    color: var(--cta-white);
    background: var(--cta-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition:
        transform .35s ease;
}
.mbcta-estimate::before {
    content: "";
    position: absolute;
    inset: 0;
    
    transform: translateX(-102%);
    transition:
        transform .4s ease;
}
.mbcta-estimate > * {
    position: relative;
    z-index: 2;
}
.mbcta-estimate:hover {
    color: var(--cta-green);
    transform: translateY(-5px);
}
.mbcta-estimate:hover::before {
    transform: translateX(0);
}
.mbcta-estimate svg {
    transition:
        transform .35s ease;
}
.mbcta-estimate:hover svg {
    transform: translateX(6px);
}
/* =========================================================
   RIGHT STATUS
========================================================= */
.mbcta-status {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* FRAME */
.mbcta-status-frame {
    position: relative;
    width: 350px;
    min-height: 410px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    overflow: hidden;
    border:
        1px solid rgba(255,255,255,.16);
    background:
        rgba(255,255,255,.035);
    backdrop-filter: blur(4px);
    transform: rotate(3deg);
    animation:
        mbctaFrameFloat 4s ease-in-out infinite alternate;
}
@keyframes mbctaFrameFloat {
    to {
        transform:
            rotate(1deg)
            translateY(-10px);
    }
}
/* OFFSET ORANGE BORDER */
.mbcta-status-frame::before {
    content: "";
    position: absolute;
    inset: 12px -12px -12px 12px;
    z-index: -1;
    border:
        3px solid var(--cta-orange);
    pointer-events: none;
}
/* TOP */
.mbcta-status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color:
        rgba(255,255,255,.45);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.mbcta-live {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mbcta-live i {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cta-orange);
}
.mbcta-live i::after {
    content: "";
    position: absolute;
    inset: -6px;
    border:
        1px solid var(--cta-orange);
    border-radius: 50%;
    animation:
        mbctaPulse 1.6s ease-out infinite;
}
@keyframes mbctaPulse {
    from {
        opacity: 1;
        transform: scale(.5);
    }
    to {
        opacity: 0;
        transform: scale(1.7);
    }
}
/* CENTER */
.mbcta-status-center {
    position: relative;
    z-index: 4;
    margin: auto 0;
    text-align: center;
}
.mbcta-small {
    display: block;
    margin-bottom: 10px;
    color:
        rgba(255,255,255,.42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 4px;
}
.mbcta-status-center strong {
    display: block;
    color: var(--cta-white);
    font-size: 72px;
    font-weight: 900;
    line-height: .72;
    letter-spacing: -5px;
}
.mbcta-status-center strong span {
    display: block;
    color: var(--cta-orange);
}
.mbcta-status-center em {
    display: block;
    margin-top: 17px;
    color:
        rgba(255,255,255,.55);
    font-size: 13px;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 7px;
}
/* BOTTOM */
.mbcta-status-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    color:
        rgba(255,255,255,.45);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.mbcta-status-bottom i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cta-orange);
}
/* SCAN */
.mbcta-scan {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cta-orange),
            transparent
        );
    box-shadow:
        0 0 15px rgba(233,92,0,.45);
    animation:
        mbctaScan 4s ease-in-out infinite;
}
@keyframes mbctaScan {
    0% {
        top: 0;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}
/* =========================================================
   FLOATING LABEL
========================================================= */
.mbcta-float-label {
    position: absolute;
    z-index: 20;
    right: -10px;
    bottom: 45px;
    min-width: 205px;
    padding: 18px 22px;
    color: var(--cta-dark);
    background: var(--cta-orange);
    transform: rotate(-3deg);
    box-shadow:
        0 20px 45px rgba(0,0,0,.20);
    animation:
        mbctaLabelMove 3s ease-in-out infinite alternate;
}
@keyframes mbctaLabelMove {
    to {
        transform:
            rotate(-1deg)
            translateY(-8px);
    }
}
.mbcta-float-label small {
    display: block;
    margin-bottom: 5px;
    color:
        rgba(4,46,45,.60);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.mbcta-float-label strong {
    display: block;
    color: var(--cta-dark);
    font-size: 15px;
    font-weight: 900;
}
/* =========================================================
   MARQUEE
========================================================= */
.mbcta-marquee {
    position: relative;
    z-index: 20;
    width: 100%;
    overflow: hidden;
    padding: 19px 0;
    background: var(--cta-orange);
}
.mbcta-marquee-track {
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    white-space: nowrap;
    animation:
        mbctaMarquee 22s linear infinite;
}
.mbcta-marquee-track span {
    color: var(--cta-white);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}
.mbcta-marquee-track i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--cta-dark);
}
@keyframes mbctaMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {
    .mbcta-section {
        padding-top: 95px;
    }
    .mbcta-layout {
        grid-template-columns: 1fr;
        gap: 65px;
        padding-bottom: 90px;
    }
    .mbcta-main {
        max-width: 800px;
    }
    .mbcta-status {
        min-height: 440px;
    }
    .mbcta-status-frame {
        width: 380px;
    }
    .mbcta-float-label {
        right: calc(50% - 230px);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .mbcta-section {
        padding-top: 75px;
    }
    .mbcta-layout {
        gap: 55px;
        padding-right: 22px;
        padding-bottom: 75px;
    }
    .mbcta-main h2 {
        font-size:
            clamp(48px,13vw,66px);
        line-height: .86;
        letter-spacing: -4px;
    }
    .mbcta-main > p {
        font-size: 16px;
    }
    /* BUTTONS */
    .mbcta-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .mbcta-call,
    .mbcta-estimate {
        width: 100%;
    }
    .mbcta-estimate {
        justify-content: space-between;
    }
    /* STATUS */
    .mbcta-status {
        min-height: 400px;
    }
    .mbcta-status-frame {
        width: min(310px,88%);
        min-height: 370px;
        padding: 23px;
    }
    .mbcta-status-center strong {
        font-size: 62px;
    }
    .mbcta-float-label {
        right: 5px;
        bottom: 30px;
        min-width: 180px;
    }
    /* SIDE */
    .mbcta-orange-side {
        width: 38px;
    }
    .mbcta-orange-side span {
        font-size: 7px;
    }
    .mbcta-bg-word {
        bottom: 170px;
        font-size: 180px;
        letter-spacing: -13px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .mbcta-kicker {
        font-size: 8px;
        letter-spacing: 1.7px;
    }
    .mbcta-kicker > span {
        width: 40px;
    }
    .mbcta-main h2 {
        font-size: 47px;
    }
    .mbcta-status-frame {
        width: 275px;
        min-height: 350px;
    }
    .mbcta-status-center strong {
        font-size: 55px;
    }
    .mbcta-float-label {
        min-width: 165px;
        padding: 15px 17px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .mbcta-section *,
    .mbcta-section *::before,
    .mbcta-section *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   SERVICE DISPATCH FORM + MAP
========================================================= */
.sdf-contact {
    --sdf-orange: #e95c00;
    --sdf-orange-dark: #c94e00;
    --sdf-green: #073d3b;
    --sdf-dark: #042e2d;
    --sdf-gray: #777176;
    --sdf-light: #f5f6f6;
    --sdf-white: #ffffff;
    --sdf-text: #737b7b;
    position: relative;
    padding: 125px 0 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(233,92,0,.08),
            transparent 20%
        ),
        linear-gradient(
            120deg,
            #ffffff,
            #f5f6f6 70%,
            #eef0ef
        );
}
/* =========================================================
   BACKGROUND
========================================================= */
.sdf-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.sdf-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(
            rgba(7,61,59,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7,61,59,.018) 1px,
            transparent 1px
        );
    background-size: 80px 80px;
}
.sdf-bg-word {
    position: absolute;
    top: 270px;
    left: -30px;
    color: rgba(7,61,59,.025);
    font-size: clamp(180px,26vw,410px);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -27px;
    white-space: nowrap;
}
.sdf-bg-number {
    position: absolute;
    right: 3%;
    top: 35px;
    color: rgba(233,92,0,.05);
    font-size: 190px;
    font-weight: 900;
    line-height: 1;
}
.sdf-bg-dots {
    position: absolute;
    left: 3%;
    top: 50px;
    width: 150px;
    height: 110px;
    opacity: .14;
    background-image:
        radial-gradient(
            circle,
            var(--sdf-orange) 2px,
            transparent 2.5px
        );
    background-size: 18px 18px;
}
/* =========================================================
   CONTAINER
========================================================= */
.sdf-contact .container {
    position: relative;
    z-index: 5;
}
/* =========================================================
   HEADER
========================================================= */
.sdf-header {
    display: grid;
    grid-template-columns:
        minmax(0,1.4fr)
        minmax(300px,.6fr);
    align-items: end;
    gap: 80px;
    margin-bottom: 70px;
}
/* KICKER */
.sdf-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--sdf-orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.sdf-kicker > span {
    position: relative;
    width: 60px;
    height: 3px;
    overflow: hidden;
    background: rgba(233,92,0,.2);
}
.sdf-kicker > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sdf-orange);
    animation: sdfKicker 2.5s ease-in-out infinite;
}
@keyframes sdfKicker {
    0% {
        transform: translateX(-110%);
    }
    70%,
    100% {
        transform: translateX(110%);
    }
}
/* TITLE */
.sdf-header h2 {
    max-width: 850px;
    margin: 0;
    color: var(--sdf-green);
    font-size: clamp(60px,6.5vw,102px);
    font-weight: 900;
    line-height: .83;
    letter-spacing: -7px;
}
.sdf-header h2 span {
    display: block;
    color: var(--sdf-orange);
}
/* HEADER RIGHT */
.sdf-header-right {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    padding-top: 22px;
    border-top:
        1px solid rgba(7,61,59,.16);
}
.sdf-live-dot {
    position: relative;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--sdf-orange);
}
.sdf-live-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border:
        1px solid var(--sdf-orange);
    border-radius: 50%;
    animation: sdfPulse 1.6s ease-out infinite;
}
@keyframes sdfPulse {
    from {
        opacity: 1;
        transform: scale(.5);
    }
    to {
        opacity: 0;
        transform: scale(1.8);
    }
}
.sdf-header-right small {
    display: block;
    margin-bottom: 8px;
    color: var(--sdf-green);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
.sdf-header-right p {
    margin: 0;
    color: var(--sdf-text);
    font-size: 15px;
    line-height: 1.7;
}
/* =========================================================
   FULL WIDTH MAP
========================================================= */
.sdf-map-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #d9dcda;
    border-top:
        5px solid var(--sdf-orange);
}
.sdf-map-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    filter:
        grayscale(1)
        contrast(.93);
    transform: scale(1.015);
    transition:
        filter .6s ease,
        transform 1s ease;
}
.sdf-map-wrap:hover iframe {
    filter:
        grayscale(.15)
        contrast(1);
    transform: scale(1.04);
}
/* =========================================================
   MAP OVERLAY
========================================================= */
.sdf-map-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(4,46,45,.16),
            transparent 35%,
            rgba(4,46,45,.28)
        );
}
/* =========================================================
   MAP LOCATION
========================================================= */
.sdf-map-location {
    position: absolute;
    z-index: 10;
    left: max(4%, calc((100% - 1320px) / 2));
    top: 55px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 22px;
    color: var(--sdf-white);
    background: var(--sdf-green);
    box-shadow:
        0 25px 55px rgba(4,46,45,.28);
}
.sdf-location-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sdf-white);
    background: var(--sdf-orange);
}
.sdf-map-location small {
    display: block;
    margin-bottom: 4px;
    color: var(--sdf-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.sdf-map-location strong {
    display: block;
    font-size: 18px;
    font-weight: 900;
}
/* =========================================================
   MAP CODE
========================================================= */
.sdf-map-code {
    position: absolute;
    z-index: 10;
    top: 55px;
    right: max(4%, calc((100% - 1320px) / 2));
    padding: 18px 20px;
    color: var(--sdf-green);
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(5px);
}
.sdf-map-code small {
    display: block;
    color: var(--sdf-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.sdf-map-code strong {
    display: block;
    margin: 3px 0;
    font-size: 21px;
    font-weight: 900;
}
.sdf-map-code > span {
    color: var(--sdf-gray);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* =========================================================
   MAP SCAN
========================================================= */
.sdf-map-scan {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background:
        linear-gradient(
            transparent,
            var(--sdf-orange),
            transparent
        );
    box-shadow:
        0 0 18px rgba(233,92,0,.45);
    animation: sdfMapScan 8s ease-in-out infinite;
}
@keyframes sdfMapScan {
    0% {
        left: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}
/* =========================================================
   FORM CONTAINER
========================================================= */
.sdf-form-container {
    z-index: 20 !important;
    margin-top: -265px;
    padding-bottom: 110px;
}
/* =========================================================
   FORM CARD
========================================================= */
.sdf-form-card {
    position: relative;
    display: grid;
    grid-template-columns:
        190px minmax(0,1fr);
    max-width: 1120px;
    margin-left: auto;
    background: var(--sdf-white);
    box-shadow:
        0 40px 100px rgba(4,46,45,.25);
}
/* =========================================================
   DARK RAIL
========================================================= */
.sdf-form-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 900px;
    padding: 28px 24px;
    overflow: hidden;
    color: var(--sdf-white);
    background:
        linear-gradient(
            180deg,
            var(--sdf-dark),
            var(--sdf-green)
        );
}
.sdf-form-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .45;
    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size: 45px 45px;
}
.sdf-form-rail::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: var(--sdf-orange);
}
/* RAIL TOP */
.sdf-rail-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sdf-rail-top > span {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sdf-dark);
    background: var(--sdf-orange);
    font-size: 13px;
    font-weight: 900;
}
.sdf-rail-top small {
    color: rgba(255,255,255,.35);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
/* RAIL MIDDLE */
.sdf-rail-middle {
    position: relative;
    z-index: 2;
    margin: auto 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.sdf-rail-middle small {
    display: block;
    color: var(--sdf-orange);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 3px;
}
.sdf-rail-middle strong {
    display: block;
    margin: 10px 0;
    color: var(--sdf-white);
    font-size: 44px;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -2px;
}
.sdf-rail-middle > span {
    color: rgba(255,255,255,.35);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   RAIL STEPS
========================================================= */
.sdf-rail-steps {
    position: relative;
    z-index: 2;
    margin-bottom: 45px;
}
.sdf-rail-steps > div {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
}
.sdf-rail-steps div > span {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sdf-white);
    border:
        1px solid rgba(255,255,255,.18);
    font-size: 8px;
    font-weight: 900;
}
.sdf-rail-steps p {
    margin: 0;
    color: rgba(255,255,255,.45);
    font-size: 7px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 1px;
}
.sdf-rail-steps > i {
    display: block;
    width: 1px;
    height: 28px;
    margin-left: 15px;
    background:
        rgba(255,255,255,.13);
}
/* RAIL BOTTOM */
.sdf-rail-bottom {
    position: relative;
    z-index: 2;
    padding-top: 20px;
    border-top:
        1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.35);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.sdf-rail-bottom strong {
    display: block;
    margin-top: 3px;
    color: var(--sdf-white);
    font-size: 11px;
}
.sdf-rail-pulse {
    position: absolute;
    top: 24px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sdf-orange);
}
/* =========================================================
   FORM CONTENT
========================================================= */
.sdf-form-content {
    position: relative;
    min-width: 0;
    padding: 50px 55px 45px;
    overflow: hidden;
}
.sdf-form-content::before {
    content: "FORM";
    position: absolute;
    right: -15px;
    top: 135px;
    color: rgba(7,61,59,.025);
    font-size: 180px;
    font-weight: 900;
    line-height: 1;
    transform: rotate(90deg);
}
/* =========================================================
   FORM HEADING
========================================================= */
.sdf-form-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 35px;
    border-bottom:
        1px solid rgba(7,61,59,.14);
}
.sdf-form-heading small {
    display: block;
    margin-bottom: 10px;
    color: var(--sdf-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}
.sdf-form-heading h3 {
    max-width: 650px;
    margin: 0;
    color: var(--sdf-green);
    font-size: clamp(43px,4vw,63px);
    font-weight: 900;
    line-height: .86;
    letter-spacing: -4px;
}
.sdf-form-heading h3 span {
    display: block;
    color: var(--sdf-orange);
}
.sdf-form-mark {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sdf-white);
    background: var(--sdf-orange);
    font-size: 33px;
    font-weight: 300;
    animation: sdfMark 5s ease-in-out infinite alternate;
}
@keyframes sdfMark {
    to {
        transform: rotate(90deg);
    }
}
/* =========================================================
   FORM RESET
========================================================= */
.sdf-form {
    position: relative;
    z-index: 3;
}
.sdf-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
/* =========================================================
   GROUP
========================================================= */
.sdf-form-group {
    margin-top: 34px;
}
.sdf-form-group:first-child {
    margin-top: 0;
}
/* GROUP TITLE */
.sdf-group-heading {
    display: grid;
    grid-template-columns:
        42px auto 1fr;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}
.sdf-group-heading > span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sdf-white);
    background: var(--sdf-green);
    font-size: 9px;
    font-weight: 900;
}
.sdf-group-heading small {
    display: block;
    color: var(--sdf-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.sdf-group-heading strong {
    display: block;
    margin-top: 2px;
    color: var(--sdf-green);
    font-size: 15px;
    font-weight: 900;
}
.sdf-group-heading > i {
    height: 1px;
    background:
        rgba(7,61,59,.13);
}
/* =========================================================
   FIELDS
========================================================= */
.sdf-fields {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap: 16px;
}
.sdf-full {
    grid-column: 1 / -1;
}
.sdf-field {
    position: relative;
}
.sdf-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--sdf-gray);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
/* =========================================================
   INPUT
========================================================= */
.sdf-field input,
.sdf-field textarea,
.sdf-field select {
    width: 100%;
    min-height: 55px;
    padding: 0 16px;
    border:
        1px solid #dce2df;
    border-radius: 0;
    outline: none;
    color: var(--sdf-green);
    background: #f7f8f8;
    font-family: inherit;
    font-size: 13px;
    transition:
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}
.sdf-field textarea {
    min-height: 115px;
    padding-top: 16px;
    resize: vertical;
}
.sdf-field input::placeholder,
.sdf-field textarea::placeholder {
    color: #949b99;
}
/* FOCUS */
.sdf-field input:focus,
.sdf-field textarea:focus,
.sdf-field select:focus {
    border-color: var(--sdf-orange);
    background: var(--sdf-white);
    box-shadow:
        inset 4px 0 0 var(--sdf-orange);
}
/* SELECT */
.sdf-select select {
    appearance: none;
    cursor: pointer;
    padding-right: 42px;
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--sdf-orange) 50%
        ),
        linear-gradient(
            135deg,
            var(--sdf-orange) 50%,
            transparent 50%
        );
    background-position:
        calc(100% - 18px) 24px,
        calc(100% - 13px) 24px;
    background-size:
        5px 5px;
    background-repeat:
        no-repeat;
}
/* =========================================================
   SCHEDULE
========================================================= */
.sdf-schedule-grid {
    display: grid;
    grid-template-columns:
        1.1fr .65fr .75fr 1.4fr;
    gap: 12px;
}
/* =========================================================
   HONEYPOT
========================================================= */
.sdf-form .subject {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================================
   SUBMIT ROW
========================================================= */
.sdf-submit-row {
    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
    padding-top: 30px;
    border-top:
        1px solid rgba(7,61,59,.14);
}
/* NOTE */
.sdf-submit-note {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sdf-submit-note > span {
    position: relative;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--sdf-orange);
}
.sdf-submit-note > span::after {
    content: "";
    position: absolute;
    inset: -6px;
    border:
        1px solid var(--sdf-orange);
    border-radius: 50%;
    animation: sdfPulse 1.6s ease-out infinite;
}
.sdf-submit-note p {
    margin: 0;
    color: var(--sdf-gray);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.sdf-submit-note strong {
    display: block;
    margin-top: 2px;
    color: var(--sdf-green);
    font-size: 11px;
}
/* =========================================================
   SUBMIT BUTTON
========================================================= */
.sdf-submit {
    position: relative;
    min-width: 230px;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding:
        0 8px 0 24px;
    overflow: hidden;
    border: 0;
    color: var(--sdf-white);
    background: var(--sdf-orange);
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition:
        transform .35s ease;
}
.sdf-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sdf-green);
    transform: translateX(-102%);
    transition:
        transform .4s ease;
}
.sdf-submit > * {
    position: relative;
    z-index: 2;
}
.sdf-submit-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sdf-green);
    background: var(--sdf-white);
    transition:
        transform .35s ease;
}
.sdf-submit:hover {
    transform: translateY(-4px);
}
.sdf-submit:hover::before {
    transform: translateX(0);
}
.sdf-submit:hover .sdf-submit-icon {
    transform: translateX(3px);
}
/* =========================================================
   BOTTOM MOVING STRIP
========================================================= */
.sdf-bottom-strip {
    position: relative;
    z-index: 30;
    width: 100%;
    overflow: hidden;
    padding: 19px 0;
    background: var(--sdf-orange);
}
.sdf-bottom-track {
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    white-space: nowrap;
    animation:
        sdfBottomMove 24s linear infinite;
}
.sdf-bottom-track span {
    color: var(--sdf-white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}
.sdf-bottom-track i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--sdf-dark);
}
@keyframes sdfBottomMove {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1199.98px) {
    .sdf-form-card {
        grid-template-columns:
            160px 1fr;
    }
    .sdf-form-content {
        padding:
            45px 40px;
    }
    .sdf-schedule-grid {
        grid-template-columns:
            1fr 1fr;
    }
    .sdf-time {
        grid-column:
            span 1;
    }
}
/* =========================================================
   TABLET PORTRAIT
========================================================= */
@media (max-width: 991.98px) {
    .sdf-contact {
        padding-top: 95px;
    }
    .sdf-header {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 55px;
    }
    .sdf-header-right {
        max-width: 560px;
    }
    .sdf-map-wrap {
        height: 540px;
    }
    .sdf-form-container {
        margin-top: -170px;
        padding-bottom: 85px;
    }
    .sdf-form-card {
        grid-template-columns:
            125px 1fr;
    }
    .sdf-form-rail {
        min-height: 850px;
        padding:
            24px 16px;
    }
    .sdf-rail-middle strong {
        font-size: 37px;
    }
    .sdf-form-content {
        padding:
            40px 35px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .sdf-contact {
        padding-top: 75px;
    }
    .sdf-header h2 {
        font-size:
            clamp(47px,13vw,64px);
        line-height: .86;
        letter-spacing: -4px;
    }
    /* MAP */
    .sdf-map-wrap {
        height: 480px;
    }
    .sdf-map-location {
        top: 25px;
        left: 18px;
    }
    .sdf-map-code {
        display: none;
    }
    /* FORM */
    .sdf-form-container {
        margin-top: -100px;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 70px;
    }
    .sdf-form-card {
        display: block;
    }
    /* RAIL BECOMES HORIZONTAL */
    .sdf-form-rail {
        min-height: 0;
        display: grid;
        grid-template-columns:
            auto 1fr auto;
        align-items: center;
        gap: 20px;
        padding:
            20px;
    }
    .sdf-form-rail::after {
        top: auto;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 5px;
    }
    .sdf-rail-middle {
        margin: 0;
        writing-mode: horizontal-tb;
        transform: none;
    }
    .sdf-rail-middle small {
        font-size: 7px;
    }
    .sdf-rail-middle strong {
        margin: 2px 0;
        font-size: 24px;
    }
    .sdf-rail-middle > span {
        font-size: 6px;
    }
    .sdf-rail-steps {
        display: none;
    }
    .sdf-rail-bottom {
        padding: 0;
        border: 0;
        text-align: right;
    }
    .sdf-rail-pulse {
        display: none;
    }
    /* CONTENT */
    .sdf-form-content {
        padding:
            35px 22px;
    }
    .sdf-form-heading {
        gap: 15px;
    }
    .sdf-form-heading h3 {
        font-size:
            clamp(40px,10vw,52px);
        letter-spacing: -3px;
    }
    .sdf-form-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
    /* FIELDS */
    .sdf-fields {
        grid-template-columns: 1fr;
    }
    .sdf-full {
        grid-column: auto;
    }
    .sdf-schedule-grid {
        grid-template-columns:
            1fr 1fr;
    }
    /* SUBMIT */
    .sdf-submit-row {
        grid-template-columns: 1fr;
    }
    .sdf-submit {
        width: 100%;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
    .sdf-kicker {
        font-size: 8px;
        letter-spacing: 1.6px;
    }
    .sdf-kicker > span {
        width: 40px;
    }
    .sdf-map-wrap {
        height: 430px;
    }
    .sdf-map-location {
        right: 18px;
        padding:
            14px 16px;
    }
    .sdf-location-icon {
        width: 42px;
        height: 42px;
    }
    .sdf-map-location strong {
        font-size: 15px;
    }
    .sdf-form-container {
        margin-top: -70px;
    }
    .sdf-form-rail {
        grid-template-columns:
            auto 1fr;
        gap: 12px;
    }
    .sdf-rail-bottom {
        display: none;
    }
    .sdf-form-content {
        padding:
            30px 16px;
    }
    .sdf-form-mark {
        display: none;
    }
    .sdf-schedule-grid {
        grid-template-columns: 1fr;
    }
    .sdf-group-heading {
        grid-template-columns:
            38px auto 1fr;
    }
    .sdf-group-heading > span {
        width: 38px;
        height: 38px;
    }
}
/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .sdf-contact *,
    .sdf-contact *::before,
    .sdf-contact *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* =========================================================
   CONTACT DATA
========================================================= */
.mb-contact-data {
    position: relative;
    overflow: hidden;
    padding: 120px 0 90px;
    background: #f5f6f6;
    color: #073d3b;
}
/* large background word */
.mb-contact-data::before {
    content: "CONTACT";
    position: absolute;
    top: 20px;
    right: -40px;
    font-size: clamp(120px, 18vw, 300px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    color: rgba(7, 61, 59, .035);
    pointer-events: none;
}
/* orange detail */
.mb-contact-data::after {
    content: "";
    position: absolute;
    left: 0;
    top: 145px;
    width: 7px;
    height: 190px;
    background: #e95c00;
}
/* ================= HEADER ================= */
.mb-contact-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 70px;
}
.mb-contact-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    color: #e95c00;
}
.mb-contact-kicker::before {
    content: "";
    width: 42px;
    height: 2px;
    background: #e95c00;
}
.mb-contact-head h2 {
    margin: 0;
    font-size: clamp(48px, 6vw, 86px);
    line-height: .9;
    letter-spacing: -.055em;
    font-weight: 900;
    color: #073d3b;
}
.mb-contact-head h2 span {
    color: #e95c00;
}
.mb-contact-head > p {
    max-width: 430px;
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: #737b7b;
}
/* ================= GRID ================= */
.mb-contact-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(7, 61, 59, .2);
    border-left: 1px solid rgba(7, 61, 59, .2);
}
/* ================= ITEM ================= */
.mb-contact-item {
    position: relative;
    min-height: 190px;
    padding: 34px 38px;
    display: grid;
    grid-template-columns: 42px 58px minmax(0, 1fr) 35px;
    align-items: center;
    gap: 22px;
    text-decoration: none;
    background: rgba(255,255,255,.55);
    border-right: 1px solid rgba(7, 61, 59, .2);
    border-bottom: 1px solid rgba(7, 61, 59, .2);
    overflow: hidden;
    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}
.mb-contact-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    background: #e95c00;
    transition: width .4s ease;
}
.mb-contact-item:hover {
    background: #073d3b;
    color: #fff;
    transform: translateY(-4px);
}
.mb-contact-item:hover::before {
    width: 100%;
}
/* number */
.mb-contact-number {
    align-self: start;
    padding-top: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: #e95c00;
}
/* icon */
.mb-contact-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e95c00;
    color: #fff;
    transition:
        transform .4s ease,
        background .35s ease;
}
.mb-contact-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mb-contact-item:hover .mb-contact-icon {
    transform: rotate(-8deg) scale(1.08);
    background: #fff;
    color: #073d3b;
}
/* information */
.mb-contact-info {
    min-width: 0;
}
.mb-contact-info span {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    color: #777176;
}
.mb-contact-info strong {
    display: block;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: #073d3b;
    overflow-wrap: anywhere;
}
.mb-contact-info small {
    display: block;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.5;
    color: #777176;
}
.mb-contact-item:hover .mb-contact-info span,
.mb-contact-item:hover .mb-contact-info small {
    color: rgba(255,255,255,.55);
}
.mb-contact-item:hover .mb-contact-info strong {
    color: #fff;
}
/* arrow */
.mb-contact-arrow {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(7,61,59,.2);
    font-size: 18px;
    color: #073d3b;
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}
.mb-contact-item:hover .mb-contact-arrow {
    transform: translate(4px,-4px);
    background: #e95c00;
    border-color: #e95c00;
    color: #fff;
}
/* status */
.mb-contact-status {
    align-self: start;
    justify-self: end;
    padding: 6px 9px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    color: #073d3b;
    background: rgba(233,92,0,.13);
}
/* ================= BOTTOM ================= */
.mb-contact-bottom {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    padding-top: 45px;
}
.mb-contact-bottom > div:first-child span {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;
    color: #777176;
}
.mb-contact-bottom > div:first-child strong {
    font-size: 15px;
    letter-spacing: .08em;
    color: #073d3b;
}
.mb-contact-line {
    height: 1px;
    background: rgba(7,61,59,.2);
}
.mb-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 17px 22px;
    background: #e95c00;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-decoration: none;
    transition:
        background .3s ease,
        transform .3s ease;
}
.mb-contact-button span {
    font-size: 19px;
    line-height: 1;
}
.mb-contact-button:hover {
    background: #073d3b;
    color: #fff;
    transform: translateY(-3px);
}
/* ================= TABLET ================= */
@media (max-width: 991.98px) {
    .mb-contact-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .mb-contact-grid {
        grid-template-columns: 1fr;
    }
    .mb-contact-item {
        min-height: 165px;
    }
}
/* ================= MOBILE ================= */
@media (max-width: 767.98px) {
    .mb-contact-data {
        padding: 85px 0 60px;
    }
    .mb-contact-data::after {
        top: 105px;
        height: 130px;
        width: 5px;
    }
    .mb-contact-head {
        margin-bottom: 45px;
    }
    .mb-contact-head h2 {
        font-size: clamp(43px, 13vw, 65px);
    }
    .mb-contact-head > p {
        font-size: 15px;
        line-height: 1.75;
    }
    .mb-contact-item {
        grid-template-columns: 30px 50px minmax(0,1fr) 30px;
        gap: 13px;
        min-height: 145px;
        padding: 25px 18px;
    }
    .mb-contact-icon {
        width: 50px;
        height: 50px;
    }
    .mb-contact-icon svg {
        width: 21px;
        height: 21px;
    }
    .mb-contact-info strong {
        font-size: 18px;
    }
    .mb-contact-info small {
        font-size: 11px;
    }
    .mb-contact-number {
        font-size: 10px;
    }
    .mb-contact-bottom {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .mb-contact-line {
        display: none;
    }
    .mb-contact-button {
        justify-content: space-between;
        width: 100%;
    }
}
/* ================= SMALL MOBILE ================= */
@media (max-width: 480px) {
    .mb-contact-item {
        grid-template-columns: 26px 45px minmax(0,1fr);
    }
    .mb-contact-arrow,
    .mb-contact-status {
        display: none;
    }
    .mb-contact-info strong {
        font-size: 16px;
    }
}

/* =========================================================
   MISSION BEND — EDITORIAL FOOTER
========================================================= */

.mb-footer {
    position: relative;
    overflow: hidden;

    background: #073d3b;
    color: #fff;

    padding: 95px 0 25px;
}


/* giant background typography */

.mb-footer-bg-word {
    position: absolute;

    left: -30px;
    bottom: 20px;

    font-size: clamp(130px, 19vw, 310px);
    line-height: .75;

    font-weight: 900;
    letter-spacing: -.09em;
    white-space: nowrap;

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

    pointer-events: none;
}


/* orange vertical accent */

.mb-footer::before {
    content: "";

    position: absolute;
    top: 0;
    right: 12%;

    width: 1px;
    height: 230px;

    background: linear-gradient(
        to bottom,
        #e95c00,
        transparent
    );
}


/* =========================================================
   TOP
========================================================= */

.mb-footer-top {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.5fr .8fr .95fr 1fr;

    gap: 55px;

    padding-bottom: 75px;
}


/* =========================================================
   BRAND
========================================================= */

.mb-footer-brand {
    max-width: 410px;
}

.mb-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: #fff;
    text-decoration: none;

    margin-bottom: 25px;
}

.mb-logo-mark {
    width: 52px;
    height: 52px;

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

    background: #e95c00;
}

.mb-logo-mark svg {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
}

.mb-footer-logo strong {
    display: block;

    font-size: 18px;
    line-height: 1;

    letter-spacing: .06em;
}

.mb-footer-logo small {
    display: block;

    margin-top: 7px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .24em;

    color: #e95c00;
}

.mb-footer-brand > p {
    max-width: 390px;

    margin: 0 0 30px;

    font-size: 14px;
    line-height: 1.9;

    color: rgba(255,255,255,.58);
}


/* phone */

.mb-footer-phone {
    position: relative;

    display: inline-grid;
    grid-template-columns: auto auto 35px;
    align-items: center;
    gap: 16px;

    padding: 14px 0;

    color: #fff;
    text-decoration: none;

    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.mb-footer-phone span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;

    color: #e95c00;
}

.mb-footer-phone strong {
    font-size: 18px;
    letter-spacing: .02em;
}

.mb-footer-phone i {
    width: 32px;
    height: 32px;

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

    background: #e95c00;

    font-style: normal;

    transition: transform .3s ease;
}

.mb-footer-phone:hover {
    color: #fff;
}

.mb-footer-phone:hover i {
    transform: translate(4px,-4px);
}


/* =========================================================
   COLUMNS
========================================================= */

.mb-footer-column {
    position: relative;
}

.mb-footer-label {
    display: block;

    margin-bottom: 25px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2em;

    color: #e95c00;
}

.mb-footer-column ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.mb-footer-column li {
    margin: 0;
    padding: 0;
}

.mb-footer-column li a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 0;

    color: rgba(255,255,255,.72);
    text-decoration: none;

    font-size: 13px;

    border-bottom: 1px solid rgba(255,255,255,.07);

    transition:
        color .3s ease,
        padding .3s ease;
}

.mb-footer-column li a span {
    color: #e95c00;

    opacity: 0;

    transform: translateX(-8px);

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

.mb-footer-column li a:hover {
    color: #fff;
    padding-left: 8px;
}

.mb-footer-column li a:hover span {
    opacity: 1;
    transform: translateX(0);
}


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

.mb-footer-contact-row {
    padding: 0 0 18px;
    margin-bottom: 18px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.mb-footer-contact-row small {
    display: block;

    margin-bottom: 7px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;

    color: rgba(255,255,255,.4);
}

.mb-footer-contact-row a,
.mb-footer-contact-row strong {
    display: block;

    color: #fff;
    text-decoration: none;

    font-size: 12px;
    line-height: 1.6;

    overflow-wrap: anywhere;
}

.mb-footer-contact-row a:hover {
    color: #e95c00;
}


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

.mb-footer-cta {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 65px 1fr auto;
    align-items: center;

    min-height: 190px;

    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);

    margin-bottom: 28px;
}

.mb-footer-cta-index {
    height: 100%;

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

    border-right: 1px solid rgba(255,255,255,.15);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;

    color: #e95c00;
}

.mb-footer-cta-text {
    padding-left: 40px;
}

.mb-footer-cta-text span {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;

    color: #e95c00;
}

.mb-footer-cta-text strong {
    display: block;

    font-size: clamp(30px, 4vw, 55px);
    line-height: .95;
    letter-spacing: -.045em;
}

.mb-footer-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 25px;

    margin-right: 30px;
    padding: 18px 22px;

    background: #e95c00;

    color: #fff;
    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;

    transition:
        background .3s ease,
        transform .3s ease;
}

.mb-footer-cta-button span {
    font-size: 20px;
}

.mb-footer-cta-button:hover {
    background: #fff;
    color: #073d3b;

    transform: translateY(-3px);
}


/* =========================================================
   BOTTOM
========================================================= */

.mb-footer-bottom {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 35px;

    font-size: 10px;
    color: rgba(255,255,255,.4);
}

.mb-footer-legal {
    display: flex;
    gap: 22px;
}

.mb-footer-legal a {
    color: rgba(255,255,255,.5);
    text-decoration: none;
}

.mb-footer-legal a:hover {
    color: #e95c00;
}

.mb-footer-location {
    text-align: right;
}

.mb-footer-location span {
    display: block;

    margin-bottom: 4px;

    font-size: 8px;
    letter-spacing: .18em;
}

.mb-footer-location strong {
    color: rgba(255,255,255,.75);

    font-size: 10px;
    letter-spacing: .12em;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

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

    .mb-footer-contact {
        grid-column: 2 / 4;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .mb-footer {
        padding: 75px 0 25px;
    }

    .mb-footer-top {
        grid-template-columns: 1fr;
        gap: 45px;

        padding-bottom: 55px;
    }

    .mb-footer-brand {
        max-width: none;
    }

    .mb-footer-brand > p {
        font-size: 13px;
    }

    .mb-footer-contact {
        grid-column: auto;
    }

    .mb-footer-cta {
        grid-template-columns: 45px 1fr;

        min-height: auto;
    }

    .mb-footer-cta-index {
        min-height: 170px;
    }

    .mb-footer-cta-text {
        padding: 30px 20px;
    }

    .mb-footer-cta-button {
        grid-column: 1 / -1;

        width: 100%;
        justify-content: space-between;

        margin: 0;

        padding: 19px 22px;
    }

    .mb-footer-bottom {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mb-footer-location {
        text-align: left;
    }

    .mb-footer-bg-word {
        font-size: 30vw;
        bottom: 80px;
    }

}


/* =====================================
   ABOUT US - EDITORIAL STYLE
===================================== */

.mbx-story {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: var(--mbx-light);
}

/* Introduction */

.mbx-story-intro {
  margin-bottom: 60px;
}

.mbx-story-heading {
  position: relative;
}

.mbx-story-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  color: var(--mbx-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.mbx-story-label-dot {
  width: 9px;
  height: 9px;
  background: var(--mbx-orange);
  transform: rotate(45deg);
}

.mbx-story-heading h2 {
  margin: 0;
  color: var(--mbx-green);
  font-size: clamp(45px, 5.5vw, 82px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -3px;
}

.mbx-story-heading h2 span {
  display: block;
  color: var(--mbx-orange);
}

.mbx-story-heading-decoration {
  display: flex;
  gap: 8px;
  margin-top: 35px;
}

.mbx-story-heading-decoration span {
  height: 5px;
  background: var(--mbx-orange);
}

.mbx-story-heading-decoration span:nth-child(1) {
  width: 75px;
}

.mbx-story-heading-decoration span:nth-child(2) {
  width: 22px;
  opacity: .5;
}

.mbx-story-heading-decoration span:nth-child(3) {
  width: 9px;
  opacity: .25;
}

/* Copy */

.mbx-story-copy {
  max-width: 580px;
  padding-left: 35px;
  border-left: 1px solid var(--mbx-line);
}

.mbx-story-copy-index {
  display: block;
  margin-bottom: 25px;
  color: var(--mbx-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.mbx-story-copy p {
  margin-bottom: 20px;
  color: var(--mbx-text);
  font-size: 15px;
  line-height: 1.9;
}

.mbx-story-copy .mbx-story-lead {
  color: var(--mbx-green);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.7;
}

.mbx-story-text-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mbx-orange);
  color: var(--mbx-green);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: color .3s ease, gap .3s ease;
}

.mbx-story-text-link:hover {
  gap: 22px;
  color: var(--mbx-orange);
}

/* Service Cards */

.mbx-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  height: 100%;
  padding: 30px;
  overflow: hidden;
  background: var(--mbx-white);
  border: 1px solid rgba(7, 61, 59, .1);
  transition:
    background .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}

.mbx-story-card:hover {
  background: var(--mbx-green);
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(7, 61, 59, .12);
}

.mbx-story-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 55px;
}

.mbx-story-card-number {
  color: var(--mbx-line);
  font-size: 45px;
  font-weight: 800;
  line-height: 1;
  transition: color .3s ease;
}

.mbx-story-card-top i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(233, 92, 0, .25);
  color: var(--mbx-orange);
  font-size: 23px;
  transition: background .3s ease, color .3s ease;
}

.mbx-story-card-content {
  margin-top: auto;
}

.mbx-story-card h3 {
  margin-bottom: 12px;
  color: var(--mbx-green);
  font-size: 21px;
  font-weight: 800;
  transition: color .3s ease;
}

.mbx-story-card p {
  margin: 0;
  color: var(--mbx-text);
  font-size: 14px;
  line-height: 1.8;
  transition: color .3s ease;
}

.mbx-story-card-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--mbx-orange);
  transition: width .4s ease;
}

.mbx-story-card:hover .mbx-story-card-line {
  width: 100%;
}

.mbx-story-card:hover .mbx-story-card-number {
  color: rgba(255, 255, 255, .2);
}

.mbx-story-card:hover h3 {
  color: var(--mbx-white);
}

.mbx-story-card:hover p {
  color: #c9d7d5;
}

.mbx-story-card:hover .mbx-story-card-top i {
  background: var(--mbx-orange);
  color: var(--mbx-white);
}

/* Contact Strip */

.mbx-story-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 35px 45px;
  background: var(--mbx-green);
  border-left: 5px solid var(--mbx-orange);
}

.mbx-story-contact-content > span {
  display: block;
  margin-bottom: 10px;
  color: #ff9c61;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.mbx-story-contact h3 {
  margin-bottom: 8px;
  color: var(--mbx-white);
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 800;
}

.mbx-story-contact p {
  margin: 0;
  color: #c5d4d2;
  font-size: 14px;
  line-height: 1.7;
}

.mbx-story-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 18px 28px;
  background: var(--mbx-orange);
  border: 1px solid var(--mbx-orange);
  color: var(--mbx-white);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}

.mbx-story-contact-btn:hover {
  background: transparent;
  color: var(--mbx-white);
}

/* Responsive */

@media (max-width: 991.98px) {
  .mbx-story {
    padding: 75px 0;
  }

  .mbx-story-heading h2 {
    font-size: clamp(43px, 7vw, 65px);
  }

  .mbx-story-copy {
    max-width: 100%;
    padding-left: 25px;
  }

  .mbx-story-card {
    min-height: 270px;
  }

  .mbx-story-contact {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .mbx-story {
    padding: 60px 0;
  }

  .mbx-story-intro {
    margin-bottom: 35px;
  }

  .mbx-story-heading h2 {
    font-size: clamp(38px, 10vw, 48px);
    letter-spacing: -1.5px;
  }

  .mbx-story-copy {
    padding-left: 18px;
  }

  .mbx-story-copy .mbx-story-lead {
    font-size: 17px;
  }

  .mbx-story-card {
    min-height: 245px;
    padding: 25px;
  }

  .mbx-story-card-top {
    margin-bottom: 35px;
  }

  .mbx-story-contact {
    padding: 28px 24px;
  }

  .mbx-story-contact-btn {
    width: 100%;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mbx-story *,
  .mbx-story *::before,
  .mbx-story *::after {
    transition-duration: .01ms !important;
  }
}


/* =====================================
   MISSION BEND - FAQ SECTION
===================================== */

.mbx-faq {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: var(--mbx-white);
}

/* Left Side */

.mbx-faq-intro {
  position: sticky;
  top: 110px;
  padding-right: 25px;
}

.mbx-faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  color: var(--mbx-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}

.mbx-faq-eyebrow > span {
  width: 30px;
  height: 2px;
  background: var(--mbx-orange);
}

.mbx-faq-intro h2 {
  margin-bottom: 25px;
  color: var(--mbx-green);
  font-size: clamp(38px, 4vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.mbx-faq-intro h2 span {
  display: block;
  color: var(--mbx-orange);
}

.mbx-faq-intro > p {
  margin-bottom: 35px;
  color: var(--mbx-text);
  font-size: 15px;
  line-height: 1.9;
}

/* Help Card */

.mbx-faq-help {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 25px;
  background: var(--mbx-green);
  border-left: 4px solid var(--mbx-orange);
}

.mbx-faq-help-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--mbx-orange);
  font-size: 23px;
}

.mbx-faq-help-content span,
.mbx-faq-help-content strong,
.mbx-faq-help-content a {
  display: block;
}

.mbx-faq-help-content span {
  margin-bottom: 5px;
  color: #b7c9c6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.mbx-faq-help-content strong {
  margin-bottom: 6px;
  color: var(--mbx-white);
  font-size: 17px;
  font-weight: 800;
}

.mbx-faq-help-content a {
  color: var(--mbx-white);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: color .3s ease;
}

.mbx-faq-help-content a:hover {
  color: #ff9860;
}

/* Decorative Elements */

.mbx-faq-decoration {
  position: relative;
  height: 110px;
  margin-top: 30px;
}

.mbx-faq-deco-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 90%;
  border-top: 1px dashed var(--mbx-line);
}

.mbx-faq-deco-circle {
  position: absolute;
  top: 10px;
  right: 10%;
  width: 78px;
  height: 78px;
  border: 2px dashed var(--mbx-orange);
  border-radius: 50%;
  opacity: .45;
}

/* Accordion */

.mbx-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mbx-faq-accordion .accordion-item {
  overflow: hidden;
  border: 1px solid rgba(7, 61, 59, .12);
  border-radius: 0;
  background: var(--mbx-light);
  transition:
    border-color .3s ease,
    background .3s ease;
}

.mbx-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--mbx-orange);
  background: var(--mbx-white);
}

.mbx-faq-accordion .accordion-header {
  margin: 0;
}

.mbx-faq-accordion .accordion-button {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 82px;
  padding: 20px 25px;
  background: transparent;
  color: var(--mbx-green);
  box-shadow: none;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  transition: background .3s ease, color .3s ease;
}

.mbx-faq-accordion .accordion-button:focus-visible {
  outline: 2px solid var(--mbx-orange);
  outline-offset: -2px;
  box-shadow: none;
}

.mbx-faq-accordion .accordion-button:not(.collapsed) {
  background: var(--mbx-green);
  color: var(--mbx-white);
}

.mbx-faq-accordion .accordion-button.collapsed:hover {
  background: #edf1f0;
}

/* Question Number */

.mbx-faq-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  background: rgba(233, 92, 0, .1);
  color: var(--mbx-orange);
  font-size: 14px;
  font-weight: 800;
  transition: background .3s ease, color .3s ease;
}

.mbx-faq-accordion .accordion-button:not(.collapsed) .mbx-faq-number {
  background: var(--mbx-orange);
  color: var(--mbx-white);
}

.mbx-faq-question {
  flex: 1;
}

/* Custom Plus / Minus */

.mbx-faq-accordion .accordion-button::after {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-left: auto;
  background-image: none;
  transform: none;
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mbx-orange);
  font-size: 25px;
  font-weight: 400;
  transition: color .3s ease;
}

.mbx-faq-accordion .accordion-button:not(.collapsed)::after {
  content: "−";
  color: var(--mbx-white);
}

/* Answer */

.mbx-faq-accordion .accordion-body {
  padding: 25px 30px 27px 87px;
  border-top: 1px solid rgba(7, 61, 59, .1);
  color: var(--mbx-text);
  font-size: 15px;
  line-height: 1.9;
}

/* Responsive */

@media (max-width: 991.98px) {
  .mbx-faq {
    padding: 75px 0;
  }

  .mbx-faq-intro {
    position: static;
    padding-right: 0;
  }

  .mbx-faq-decoration {
    display: none;
  }

  .mbx-faq-intro h2 {
    font-size: clamp(38px, 6vw, 52px);
  }

  .mbx-faq-help {
    max-width: 450px;
  }
}

@media (max-width: 575.98px) {
  .mbx-faq {
    padding: 60px 0;
  }

  .mbx-faq-intro h2 {
    font-size: 38px;
  }

  .mbx-faq-accordion .accordion-button {
    gap: 12px;
    min-height: 70px;
    padding: 15px;
    font-size: 14px;
  }

  .mbx-faq-number {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .mbx-faq-accordion .accordion-button::after {
    flex-basis: 24px;
    width: 24px;
    font-size: 23px;
  }

  .mbx-faq-accordion .accordion-body {
    padding: 20px;
    font-size: 14px;
  }

  .mbx-faq-help {
    padding: 20px;
  }

  .mbx-faq-help-content a {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mbx-faq *,
  .mbx-faq *::before,
  .mbx-faq *::after {
    transition-duration: .01ms !important;
  }
}