@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin-regular.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v20-latin-500.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v20-latin-600.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v20-latin-700.woff2') format('woff2')
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/poppins-v20-latin-800.woff2') format('woff2')
}
:root {
    --gd-navy: #40516f;
    --gd-deep: #182231;
    --gd-dark: #0f1722;
    --gd-orange: #f4a01e;
    --gd-gold: #ffc65b;
    --gd-white: #ffffff;
    --gd-mist: #eef0f2;
    --gd-muted: #9da8b5;
    --gd-line:
        rgba(255, 255, 255, .13);
    --gd-ease:
        cubic-bezier(.22, 1, .36, 1);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    overflow-x: hidden;
    background:
        var(--gd-dark);
 
}
a {
    color: inherit;
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
}
/* =========================================================
           HEADER
        ========================================================= */
.gd2-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding-top: 22px;
}
.gd2-nav-layout {
    position: relative;
    min-height: 86px;
}
/* =========================================================
           LOGO — SEPARATE FROM MENU
        ========================================================= */
.gd2-logo-card {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding:
        10px 16px 10px 10px;
    color:
        var(--gd-white);
}
.gd2-logo-mark {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    clip-path:
        polygon(0 0,
            82% 0,
            100% 18%,
            100% 100%,
            18% 100%,
            0 82%);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .26);
    transition:
        .45s var(--gd-ease);
}
.gd2-logo-mark::after {
    content: "";
    position: absolute;
    inset: 7px;
    border:
        1px solid rgba(15, 23, 34, .28);
    clip-path:
        polygon(0 0,
            82% 0,
            100% 18%,
            100% 100%,
            18% 100%,
            0 82%);
}
.gd2-logo-mark svg {
    position: relative;
    z-index: 2;
    width: 31px;
}
.gd2-logo-card:hover .gd2-logo-mark {
    transform:
        rotate(-6deg) scale(1.07);
}
.gd2-logo-text {
    line-height: 1;
}
.gd2-logo-text strong {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-orange);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.2px;
}
.gd2-logo-text b {
    display: block;
    color:
        var(--gd-white);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .5px;
}
.gd2-logo-text small {
    display: block;
    margin-top: 7px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
/* =========================================================
           MENU — COMPLETELY SEPARATE
        ========================================================= */
.gd2-menu-shell {
    position: absolute;
    right: 0;
    top: 7px;
    min-height: 64px;
    display: flex;
    align-items: stretch;
    background:
        rgba(24, 34, 49, .86);
    border:
        1px solid rgba(255, 255, 255, .12);
    backdrop-filter:
        blur(18px);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, .2);
}
.gd2-menu-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    width: 90px;
    height: 3px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--gd-orange),
            transparent);
}
.gd2-menu {
    height: 100%;
    display: flex;
    align-items: stretch;
    list-style: none;
}
.gd2-menu>li {
    position: relative;
}
.gd2-menu>li>a {
    min-height: 64px;
    padding:
        0 clamp(15px, 1.5vw, 24px);
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color:
        rgba(255, 255, 255, .7);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        .3s var(--gd-ease);
}
.gd2-menu>li>a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background:
        var(--gd-orange);
    transform:
        translateX(-50%);
    transition:
        .35s var(--gd-ease);
}
.gd2-menu>li:hover>a {
    color:
        var(--gd-white);
}
.gd2-menu>li:hover>a::before {
    width: 60%;
}
.gd2-menu>li>a span {
    color:
        var(--gd-orange);
    font-size: 13px;
    transition:
        .3s var(--gd-ease);
}
.gd2-menu>li:hover>a span {
    transform:
        rotate(45deg);
}
/* =========================================================
           DROPDOWN
        ========================================================= */
.gd2-drop {
    position: absolute;
    top: 64px;
    left: 0;
    width: 265px;
    padding: 9px;
    list-style: none;
    background:
        var(--gd-white);
    color:
        var(--gd-deep);
    border-top:
        4px solid var(--gd-orange);
    box-shadow:
        0 28px 55px rgba(0, 0, 0, .26);
    opacity: 0;
    visibility: hidden;
    transform:
        translateY(14px);
    transition:
        .3s var(--gd-ease);
}
.gd2-has-drop:hover .gd2-drop,
.gd2-has-drop:focus-within .gd2-drop {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.gd2-drop a {
    display: block;
    position: relative;
    padding:
        12px 14px 12px 17px;
    border-bottom:
        1px solid rgba(24, 34, 49, .09);
    font-size: 11px;
    font-weight: 800;
    transition:
        .25s;
}
.gd2-drop a::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background:
        var(--gd-orange);
    transform:
        translateY(-50%) scale(0);
    transition:
        .25s;
}
.gd2-drop a:hover {
    padding-left: 24px;
    color:
        var(--gd-orange);
    background:
        #fff8ea;
}
.gd2-drop a:hover::before {
    transform:
        translateY(-50%) scale(1);
}
/* =========================================================
           MENU ACTIONS
        ========================================================= */
.gd2-menu-actions {
    display: flex;
    align-items: stretch;
}
.gd2-call {
    min-width: 110px;
    padding:
        0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color:
        var(--gd-white);
    border-left:
        1px solid rgba(255, 255, 255, .1);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    transition: .3s;
}
.gd2-call i {
    color:
        var(--gd-orange);
}
.gd2-call:hover {
    background:
        rgba(255, 255, 255, .06);
}
.gd2-estimate {
    min-width: 158px;
    padding:
        0 17px;
    display: flex;
    align-items: center;
    justify-content:
        space-between;
    gap: 14px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
    transition:
        .35s var(--gd-ease);
}
.gd2-estimate:hover {
    color:
        var(--gd-dark);
    background:
        var(--gd-white);
}
/* =========================================================
           MOBILE MENU
        ========================================================= */
#gd2-menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gd2-menu-toggle {
    display: none;
}
/* =========================================================
           HERO
        ========================================================= */
.gd2-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color:
        var(--gd-white);
    background:
        radial-gradient(circle at 13% 32%,
            rgba(64, 81, 111, .28),
            transparent 37%),
        radial-gradient(circle at 88% 20%,
            rgba(244, 160, 30, .05),
            transparent 31%),
        linear-gradient(115deg,
            #0f1722 0%,
            #182231 62%,
            #111a27 100%);
}
/* GRID */
.gd2-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .024) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .024) 1px,
            transparent 1px);
    background-size:
        48px 48px;
}
.gd2-hero::before {
    content:
        "OVERHEAD";
    position: absolute;
    left: -40px;
    bottom: -40px;
    color:
        rgba(255, 255, 255, .025);
    font-size:
        clamp(100px, 17vw, 270px);
    font-weight: 900;
    letter-spacing:
        -12px;
    line-height: 1;
}
.gd2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48%;
    height: 5px;
    background:
        linear-gradient(90deg,
            var(--gd-orange),
            transparent);
}
.gd2-hero-row {
    min-height: 100vh;
    padding-top: 130px;
    padding-bottom: 35px;
    align-items: center;
}
/* =========================================================
           HERO COPY
        ========================================================= */
.gd2-copy {
    position: relative;
    z-index: 10;
    max-width: 780px;
    padding-left:
        clamp(0px, 3vw, 42px);
    animation:
        gd2-copy-in .9s var(--gd-ease) both;
}
.gd2-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    color:
        var(--gd-gold);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.gd2-kicker span {
    width: 43px;
    height: 2px;
    background:
        var(--gd-orange);
}
.gd2-number {
    position: absolute;
    left: -12px;
    top: 60px;
    writing-mode:
        vertical-rl;
    transform:
        rotate(180deg);
    color:
        rgba(255, 255, 255, .22);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2.5px;
}
.gd2-title {
    margin:
        0 0 26px;
  
    font-size:
        clamp(62px, 7vw, 118px);
    font-weight: 700;
    line-height: .75;
    letter-spacing:
        -6px;
}
.gd2-title>span {
    display: block;
    margin-left:
        clamp(22px, 4vw, 60px);
    color:
        var(--gd-orange);
}
.gd2-title>strong {
    display: block;
    margin-left:
        clamp(55px, 8vw, 120px);
    font-weight: 700;
    color:
        transparent;
    -webkit-text-stroke:
        1px rgba(255, 255, 255, .78);
}
.gd2-text {
    max-width: 650px;
    margin: 0;
    color:
        rgba(255, 255, 255, .62);
    font-size: 13px;
    line-height: 1.8;
}
.gd2-text strong {
    color:
        var(--gd-white);
}
/* =========================================================
           BUTTONS
        ========================================================= */
.gd2-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 27px;
}
.gd2-primary-btn {
    min-height: 56px;
    padding:
        0 22px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        .35s var(--gd-ease);
}
.gd2-primary-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--gd-white);
    transform:
        translateX(-101%);
    transition:
        .45s var(--gd-ease);
}
.gd2-primary-btn span,
.gd2-primary-btn i {
    position: relative;
    z-index: 2;
}
.gd2-primary-btn:hover {
    color:
        var(--gd-dark);
    transform:
        translateY(-4px);
}
.gd2-primary-btn:hover::before {
    transform: none;
}
.gd2-secondary-btn {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color:
        var(--gd-white);
    font-size: 27px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.gd2-play {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color:
        var(--gd-orange);
    transition:
        .3s;
}
.gd2-secondary-btn:hover .gd2-play {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border-color:
        var(--gd-orange);
}
/* =========================================================
           INFO ROW
        ========================================================= */
.gd2-info-row {
    max-width: 680px;
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    margin-top: 34px;
    border-top:
        1px solid rgba(255, 255, 255, .12);
    border-bottom:
        1px solid rgba(255, 255, 255, .12);
}
.gd2-info-item {
    padding:
        14px 17px;
    border-right:
        1px solid rgba(255, 255, 255, .12);
}
.gd2-info-item:last-child {
    border-right: 0;
}
.gd2-info-item small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.gd2-info-item strong {
    font-size: 10px;
    letter-spacing: .3px;
}
/* =========================================================
           RIGHT VISUAL
        ========================================================= */
.gd2-visual {
    position: relative;
    min-height:
        700px;
    margin-left:
        clamp(10px, 3vw, 50px);
    animation:
        gd2-visual-in 1s .15s var(--gd-ease) both;
}
.gd2-visual-number {
    position: absolute;
    right: -5px;
    top: -20px;
    z-index: 1;
    color:
        rgba(255, 255, 255, .04);
 
    font-size:
        clamp(150px, 15vw, 240px);
    font-weight: 700;
    line-height: 1;
}
/* =========================================================
           ORANGE BACK PANEL
        ========================================================= */
.gd2-orange-panel {
    position: absolute;
    left: 10%;
    right: -15px;
    top: 60px;
    bottom: 30px;
    background:
        var(--gd-orange);
    clip-path:
        polygon(14% 0,
            100% 0,
            100% 100%,
            0 100%,
            0 17%);
}
/* =========================================================
           IMAGE
        ========================================================= */
.gd2-image-wrap {
    position: absolute;
    left: 0;
    right: 35px;
    top: 25px;
    bottom: 85px;
    overflow: hidden;
    background:
        #68717a;
    clip-path:
        polygon(12% 0,
            100% 0,
            100% 90%,
            91% 100%,
            0 100%,
            0 15%);
    box-shadow:
        0 35px 75px rgba(0, 0, 0, .38);
}
.gd2-image-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(15, 23, 34, .25),
            transparent 50%),
        linear-gradient(0deg,
            rgba(15, 23, 34, .5),
            transparent 55%);
}
.gd2-image-wrap::after {
    content: "";
    position: absolute;
    inset: 22px;
    z-index: 4;
    pointer-events: none;
    border:
        1px solid rgba(255, 255, 255, .16);
    clip-path:
        polygon(11% 0,
            100% 0,
            100% 90%,
            90% 100%,
            0 100%,
            0 15%);
}
.gd2-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position:
        center center;
    transition:
        transform 1.2s var(--gd-ease);
}
.gd2-visual:hover .gd2-image-wrap img {
    transform:
        scale(1.045);
}
/* =========================================================
           IMAGE LABEL
        ========================================================= */
.gd2-image-label {
    position: absolute;
    right: 10px;
    top: 67px;
    z-index: 15;
    min-width: 130px;
    padding:
        12px 15px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
}
.gd2-image-label::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background:
        #42b879;
    box-shadow:
        0 0 0 4px rgba(66, 184, 121, .22);
}
.gd2-image-label span {
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.gd2-image-label strong {
    display: block;
    margin-top: 3px;
    font-size: 12px;
}
/* =========================================================
           MECHANICAL PARTS RAIL
        ========================================================= */
.gd2-side-rail {
    position: absolute;
    left: -65px;
    top: 126px;
    bottom: 160px;
    z-index: 16;
    width: 165px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.gd2-rail-line {
    position: absolute;
    left: 23px;
    top: -15px;
    bottom: -15px;
    width: 2px;
    background:
        linear-gradient(to bottom,
            transparent,
            rgba(255, 255, 255, .24) 12%,
            rgba(255, 255, 255, .24) 88%,
            transparent);
}
.gd2-rail-line::before,
.gd2-rail-line::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    border:
        2px solid var(--gd-orange);
    border-radius: 50%;
    background:
        var(--gd-dark);
    transform:
        translateX(-50%);
}
.gd2-rail-line::before {
    top: 0;
}
.gd2-rail-line::after {
    bottom: 0;
}
.gd2-rail-item {
    position: relative;
    min-height: 59px;
    display: flex;
    align-items: center;
    gap: 11px;
    transition:
        .4s var(--gd-ease);
}
.gd2-rail-item::after {
    content: "";
    position: absolute;
    left: 44px;
    top: 50%;
    width: 13px;
    height: 1px;
    background:
        var(--gd-orange);
    opacity: .6;
}
/* ICON */
.gd2-part-icon {
    position: relative;
    z-index: 3;
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: grid;
    place-items: center;
    color:
        var(--gd-orange);
    background:
        var(--gd-deep);
    border:
        1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, .25);
    transition:
        .4s var(--gd-ease);
}
.gd2-part-icon i {
    position: relative;
    z-index: 3;
    font-size: 15px;
}
.gd2-part-icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    border:
        1px solid rgba(244, 160, 30, .22);
    border-radius: 50%;
}
.gd2-part-info {
    min-width: 100px;
    padding:
        8px 10px;
    background:
        rgba(15, 23, 34, .76);
    border:
        1px solid rgba(255, 255, 255, .08);
    backdrop-filter:
        blur(10px);
    transition:
        .4s var(--gd-ease);
}
.gd2-part-info small {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.gd2-part-info strong {
    display: block;
    color:
        var(--gd-white);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.gd2-rail-item:hover {
    transform:
        translateX(7px);
}
.gd2-rail-item:hover .gd2-part-icon {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border-color:
        var(--gd-orange);
    transform:
        rotate(-7deg) scale(1.08);
    box-shadow:
        0 12px 30px rgba(244, 160, 30, .25);
}
.gd2-rail-item:hover .gd2-part-info {
    background:
        var(--gd-deep);
    border-color:
        rgba(244, 160, 30, .3);
}
/* =========================================================
           FLOATING CARD
        ========================================================= */
.gd2-floating-card {
    position: absolute;
    left: -15px;
    bottom: 95px;
    z-index: 18;
    min-width: 250px;
    padding:
        12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    color:
        var(--gd-white);
    background:
        rgba(24, 34, 49, .94);
    border:
        1px solid rgba(255, 255, 255, .12);
    box-shadow:
        0 20px 45px rgba(0, 0, 0, .3);
    backdrop-filter:
        blur(12px);
    transition:
        .4s var(--gd-ease);
}
.gd2-floating-card:hover {
    transform:
        translateY(-7px);
}
.gd2-floating-icon {
    position: relative;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
}
.gd2-floating-icon>i {
    font-size: 17px;
}
.gd2-tool-badge {
    position: absolute;
    right: -7px;
    bottom: -6px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    background:
        var(--gd-deep);
    border:
        2px solid var(--gd-orange);
    border-radius: 50%;
}
.gd2-tool-badge i {
    font-size: 7px;
}
.gd2-floating-card small {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.gd2-floating-card strong {
    font-size: 11px;
}
/* =========================================================
           IMAGE FOOTER
        ========================================================= */
.gd2-image-footer {
    position: absolute;
    left: 12%;
    right: 1px;
    bottom: 25px;
    z-index: 17;
    min-height: 76px;
    padding:
        13px 18px;
    display: flex;
    align-items: center;
    justify-content:
        space-between;
    color:
        var(--gd-white);
    background:
        var(--gd-deep);
}
.gd2-image-footer small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.gd2-image-footer strong {
    font-size: 11px;
}
.gd2-image-footer>span {
    color:
        rgba(255, 255, 255, .45);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
/* =========================================================
           ANIMATION
        ========================================================= */
@keyframes gd2-copy-in {
    from {
        opacity: 0;
        transform:
            translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes gd2-visual-in {
    from {
        opacity: 0;
        transform:
            translateX(55px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* =========================================================
           TABLET
        ========================================================= */
@media(max-width:1199.98px) {
    .gd2-header {
        padding-top: 10px;
    }
    .gd2-logo-card {
        top: 0;
    }
    .gd2-menu-toggle {
        position: absolute;
        right: 0;
        top: 7px;
        z-index: 40;
        width: 57px;
        height: 57px;
        display: grid;
        place-items: center;
        background:
            var(--gd-orange);
        cursor: pointer;
    }
    .gd2-menu-toggle span {
        position: absolute;
        width: 22px;
        height: 2px;
        background:
            var(--gd-dark);
        transition: .3s;
    }
    .gd2-menu-toggle span:first-child {
        transform:
            translateY(-5px);
    }
    .gd2-menu-toggle span:last-child {
        transform:
            translateY(5px);
    }
    #gd2-menu-toggle:checked+.gd2-menu-toggle span:first-child {
        transform:
            rotate(45deg);
    }
    #gd2-menu-toggle:checked+.gd2-menu-toggle span:last-child {
        transform:
            rotate(-45deg);
    }
    .gd2-menu-shell {
        top: 72px;
        left: 0;
        right: 0;
        display: block;
        max-height: 0;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transition:
            .45s var(--gd-ease);
    }
    #gd2-menu-toggle:checked~.gd2-menu-shell {
        max-height: 80vh;
        opacity: 1;
        visibility: visible;
    }
    .gd2-menu {
        display: block;
        padding:
            10px 15px;
    }
    .gd2-menu>li>a {
        min-height: 52px;
        justify-content:
            space-between;
        border-bottom:
            1px solid rgba(255, 255, 255, .08);
    }
    .gd2-drop {
        position: static;
        width: 100%;
        max-height: 0;
        padding: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        background:
            rgba(255, 255, 255, .05);
        border: 0;
        box-shadow: none;
    }
    .gd2-has-drop:hover .gd2-drop,
    .gd2-has-drop:focus-within .gd2-drop {
        max-height: 320px;
        padding: 6px;
    }
    .gd2-drop a {
        color:
            rgba(255, 255, 255, .72);
        border-color:
            rgba(255, 255, 255, .07);
    }
    .gd2-menu-actions {
        display: grid;
        grid-template-columns:
            1fr 1fr;
    }
    .gd2-call,
    .gd2-estimate {
        min-height: 58px;
    }
    .gd2-hero-row {
        padding-top: 105px;
    }
    .gd2-title {
        font-size:
            clamp(68px, 11vw, 105px);
    }
    .gd2-visual {
        max-width: 850px;
        min-height: 670px;
        margin:
            45px auto 20px;
    }
    .gd2-side-rail {
        left: -15px;
    }
}
/* =========================================================
           MOBILE
        ========================================================= */
@media(max-width:767.98px) {
    .gd2-logo-mark {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
    }
    .gd2-logo-text b {
        font-size: 10px;
    }
    .gd2-logo-text small {
        display: none;
    }
    .gd2-hero-row {
        padding-top: 90px;
        padding-bottom: 20px;
    }
    .gd2-copy {
        padding-left: 0;
    }
    .gd2-number {
        display: none;
    }
    .gd2-title {
        font-size:
            clamp(58px, 17vw, 86px);
        letter-spacing:
            -4px;
    }
    .gd2-title>span {
        margin-left: 13px;
    }
    .gd2-title>strong {
        margin-left: 30px;
    }
    .gd2-actions {
        display: grid;
    }
    .gd2-primary-btn {
        width: 100%;
        justify-content:
            space-between;
    }
    .gd2-info-row {
        grid-template-columns:
            1fr;
    }
    .gd2-info-item {
        border-right: 0;
        border-bottom:
            1px solid rgba(255, 255, 255, .1);
    }
    .gd2-info-item:last-child {
        border-bottom: 0;
    }
    .gd2-visual {
        min-height: 535px;
        margin:
            30px 0 10px;
    }
    .gd2-image-wrap {
        left: 17px;
        right: 7px;
        top: 20px;
        bottom: 82px;
    }
    .gd2-orange-panel {
        left: 10%;
        right: -5px;
        top: 47px;
        bottom: 22px;
    }
    .gd2-side-rail {
        display: none;
    }
    .gd2-image-label {
        right: 0;
        top: 50px;
    }
    .gd2-floating-card {
        left: 0;
        bottom: 80px;
        min-width: 205px;
    }
    .gd2-image-footer {
        left: 18px;
        right: 0;
        bottom: 11px;
    }
}
/* =========================================================
           SMALL MOBILE
        ========================================================= */
@media(max-width:430px) {
    .gd2-logo-text strong {
        font-size: 7px;
    }
    .gd2-logo-text b {
        font-size: 9px;
    }
    .gd2-menu-actions {
        grid-template-columns:
            1fr;
    }
    .gd2-call {
        display: none;
    }
    .gd2-visual {
        min-height: 490px;
    }
    .gd2-floating-card {
        min-width: 180px;
    }
    .gd2-image-footer>span {
        display: none;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;
        transition-duration:
            .01ms !important;
    }
}
/* =========================================================
   GARAGE DOOR SERVICES
========================================================= */
.gd-services {
    position: relative;
    padding:
        120px 0;
    overflow: hidden;
    background:
        var(--gd-mist);
    color:
        var(--gd-dark);
}
/* TEXTURE */
.gd-services::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(24, 34, 49, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(24, 34, 49, .035) 1px,
            transparent 1px);
    background-size:
        42px 42px;
}
/* HUGE BACK NUMBER */
.gd-services::after {
    content: "SERVICES";
    position: absolute;
    left: -35px;
    bottom: -25px;
    color:
        rgba(24, 34, 49, .035);
    font-size:
        clamp(90px, 14vw, 230px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -10px;
    pointer-events: none;
}
/* =========================================================
   INTRO
========================================================= */
.gd-services-intro {
    position: sticky;
    top: 35px;
    z-index: 5;
    max-width: 470px;
    padding-right:
        30px;
}
.gd-services-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    color:
        var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.gd-services-kicker span {
    width: 38px;
    height: 2px;
    background:
        var(--gd-orange);
}
.gd-services-intro h2 {
    margin:
        0 0 24px;
  
    font-size:
        clamp(58px, 5.3vw, 94px);
    line-height: .83;
    letter-spacing: -5px;
}
.gd-services-intro h2 span {
    display: block;
    color:
        var(--gd-orange);
}
.gd-services-intro p {
    max-width: 420px;
    margin: 0;
    color:
        #61707c;
    font-size: 13px;
    line-height: 1.85;
}
.gd-services-btn {
    min-height: 55px;
    margin-top: 28px;
    padding:
        0 21px;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        .35s var(--gd-ease);
}
.gd-services-btn:hover {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    transform:
        translateY(-4px);
}
/* =========================================================
   CENTER VISUAL
========================================================= */
.gd-services-visual {
    position: relative;
    min-height: 760px;
    margin:
        0 15px;
}
.gd-services-orange-shape {
    position: absolute;
    left: 35px;
    right: 0;
    top: 55px;
    bottom: 45px;
    background:
        var(--gd-orange);
    clip-path:
        polygon(15% 0,
            100% 0,
            100% 88%,
            88% 100%,
            0 100%,
            0 14%);
}
.gd-services-image {
    position: absolute;
    left: 0;
    right: 35px;
    top: 0;
    bottom: 95px;
    overflow: hidden;
    background:
        var(--gd-deep);
    clip-path:
        polygon(12% 0,
            100% 0,
            100% 90%,
            90% 100%,
            0 100%,
            0 14%);
    box-shadow:
        0 30px 60px rgba(24, 34, 49, .22);
}
.gd-services-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,
            rgba(15, 23, 34, .42),
            transparent 60%);
}
.gd-services-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition:
        transform 1s var(--gd-ease);
}
.gd-services-visual:hover .gd-services-image img {
    transform:
        scale(1.045);
}
/* CENTER BADGE */
.gd-services-center-badge {
    position: absolute;
    left: -15px;
    bottom: 65px;
    z-index: 6;
    min-width: 270px;
    padding:
        13px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    color:
        var(--gd-white);
    background:
        var(--gd-deep);
    box-shadow:
        0 18px 40px rgba(24, 34, 49, .3);
}
.gd-services-center-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
}
.gd-services-center-badge small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.gd-services-center-badge strong {
    font-size: 11px;
}
/* VERTICAL TEXT */
.gd-services-vertical-text {
    position: absolute;
    right: -18px;
    top: 150px;
    z-index: 8;
    writing-mode:
        vertical-rl;
    color:
        rgba(24, 34, 49, .38);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2.2px;
}
/* =========================================================
   SERVICE LIST
========================================================= */
.gd-services-list {
    position: relative;
    z-index: 5;
    border-top:
        1px solid rgba(24, 34, 49, .13);
}
.gd-service-item {
    position: relative;
    display: grid;
    grid-template-columns:
        34px 48px 1fr 30px;
    align-items: center;
    gap: 13px;
    min-height: 118px;
    padding:
        16px 8px;
    color:
        var(--gd-dark);
    border-bottom:
        1px solid rgba(24, 34, 49, .13);
    transition:
        .4s var(--gd-ease);
}
.gd-service-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--gd-deep);
    transform:
        scaleX(0);
    transform-origin:
        right;
    transition:
        .45s var(--gd-ease);
}
.gd-service-item:hover::before {
    transform:
        scaleX(1);
    transform-origin:
        left;
}
.gd-service-number,
.gd-service-icon,
.gd-service-content,
.gd-service-arrow {
    position: relative;
    z-index: 2;
}
.gd-service-number {
    color:
        #98a1aa;
 
    font-size: 16px;
    font-weight: 700;
}
.gd-service-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    color:
        var(--gd-orange);
    border:
        1px solid rgba(24, 34, 49, .15);
    border-radius: 50%;
    transition:
        .35s var(--gd-ease);
}
.gd-service-icon i {
    font-size: 14px;
}
.gd-service-content {
    display: block;
}
.gd-service-content small {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.gd-service-content strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 900;
}
.gd-service-content>span {
    display: block;
    max-width: 370px;
    color:
        #6e7880;
    font-size: 10px;
    line-height: 1.55;
}
.gd-service-arrow {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(24, 34, 49, .13);
    border-radius: 50%;
    font-size: 9px;
    transition:
        .35s var(--gd-ease);
}
/* HOVER */
.gd-service-item:hover {
    padding-left: 15px;
    color:
        var(--gd-white);
}
.gd-service-item:hover .gd-service-number {
    color:
        rgba(255, 255, 255, .42);
}
.gd-service-item:hover .gd-service-icon {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border-color:
        var(--gd-orange);
    transform:
        rotate(-8deg);
}
.gd-service-item:hover .gd-service-content>span {
    color:
        rgba(255, 255, 255, .58);
}
.gd-service-item:hover .gd-service-arrow {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border-color:
        var(--gd-orange);
    transform:
        translateX(4px);
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1199.98px) {
    .gd-services {
        padding:
            90px 0;
    }
    .gd-services-intro {
        position: relative;
        top: auto;
        max-width: 720px;
        margin-bottom:
            45px;
    }
    .gd-services-visual {
        min-height: 650px;
        max-width: 650px;
        margin:
            0 auto 50px;
    }
    .gd-services-list {
        max-width: 820px;
        margin:
            0 auto;
    }
}
@media(max-width:767.98px) {
    .gd-services {
        padding:
            70px 0;
    }
    .gd-services-intro h2 {
        font-size:
            clamp(52px, 15vw, 76px);
        letter-spacing:
            -4px;
    }
    .gd-services-visual {
        min-height:
            520px;
        margin-bottom:
            35px;
    }
    .gd-services-orange-shape {
        left: 25px;
        top: 35px;
        bottom: 35px;
    }
    .gd-services-image {
        right: 20px;
        bottom: 75px;
    }
    .gd-services-center-badge {
        left: 0;
        bottom: 48px;
        min-width: 220px;
    }
    .gd-services-vertical-text {
        display: none;
    }
    .gd-service-item {
        grid-template-columns:
            29px 42px 1fr;
        gap: 10px;
        min-height: 105px;
    }
    .gd-service-arrow {
        display: none;
    }
    .gd-service-content>span {
        font-size: 9px;
    }
}
@media(max-width:430px) {
    .gd-services-visual {
        min-height:
            450px;
    }
    .gd-services-center-badge {
        min-width:
            195px;
    }
    .gd-services-center-badge strong {
        font-size:
            9px;
    }
    .gd-service-item {
        grid-template-columns:
            23px 39px 1fr;
        padding:
            13px 2px;
    }
    .gd-service-icon {
        width: 39px;
        height: 39px;
    }
    .gd-service-content strong {
        font-size:
            11px;
    }
}
/* =========================================================
   COMPLETE GARAGE DOOR SERVICES
   CONTROL BOARD STYLE
========================================================= */
:root {
    --gd-navy: #40516f;
    --gd-deep: #182231;
    --gd-dark: #0f1722;
    --gd-orange: #f4a01e;
    --gd-gold: #ffc65b;
    --gd-white: #ffffff;
    --gd-mist: #eef0f2;
    --gd-muted: #9da8b5;
    --gd-line: rgba(255, 255, 255, .13);
    --gd-ease: cubic-bezier(.22, 1, .36, 1);
}
/* ========================================================= */
.fds-services {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: var(--gd-white);
    background:
        radial-gradient(circle at 10% 10%,
            rgba(64, 81, 111, .28),
            transparent 32%),
        radial-gradient(circle at 85% 70%,
            rgba(244, 160, 30, .07),
            transparent 28%),
        var(--gd-dark);
}
/* GRID */
.fds-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px);
    background-size: 48px 48px;
}
/* HUGE TEXT */
.fds-services::before {
    content: "SERVICE";
    position: absolute;
    right: -35px;
    top: 30px;
    color: rgba(255, 255, 255, .018);
    font-size: clamp(120px, 18vw, 320px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -14px;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.fds-head {
    position: relative;
    z-index: 4;
    margin-bottom: 55px;
}
.fds-kicker {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fds-kicker span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--gd-dark);
    background: var(--gd-orange);
    font-size: 10px;
    clip-path:
        polygon(12% 0,
            100% 0,
            100% 88%,
            88% 100%,
            0 100%,
            0 12%);
}
.fds-title {
    max-width: 950px;
    margin: 0;
 
 
    font-size:
        clamp(58px, 6.8vw, 115px);
    line-height: .83;
    letter-spacing: -6px;
    color: var(--gd-white);
}
.fds-title strong {
    display: block;
    margin-left:
        clamp(25px, 5vw, 90px);
    color: var(--gd-orange);
    font-weight: 700;
}
.fds-intro {
    max-width: 560px;
    margin: 0 0 10px auto;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    line-height: 1.85;
}
/* =========================================================
   MAIN BOARD
========================================================= */
.fds-board {
    position: relative;
    z-index: 5;
    border:
        1px solid rgba(255, 255, 255, .12);
    background:
        rgba(24, 34, 49, .52);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, .28);
    backdrop-filter:
        blur(10px);
}
/* =========================================================
   BOARD TOP
========================================================= */
.fds-board-top {
    min-height: 85px;
    padding:
        15px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom:
        1px solid rgba(255, 255, 255, .1);
}
.fds-board-title {
    display: flex;
    align-items: center;
    gap: 13px;
}
.fds-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:
        var(--gd-orange);
    box-shadow:
        0 0 0 7px rgba(244, 160, 30, .12);
}
.fds-board-title small {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-muted);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.fds-board-title strong {
    display: block;
    color:
        var(--gd-white);
    font-size: 12px;
}
.fds-board-status {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.fds-board-status span {
    padding:
        8px 12px;
    border:
        1px solid rgba(255, 255, 255, .11);
    color:
        rgba(255, 255, 255, .55);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.1px;
}
/* =========================================================
   PHOTO BAND
========================================================= */
.fds-photo-band {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border-bottom:
        1px solid rgba(255, 255, 255, .1);
}
.fds-photo {
    position: absolute;
    inset: 0;
}
.fds-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(15, 23, 34, .97) 0%,
            rgba(15, 23, 34, .7) 25%,
            rgba(15, 23, 34, .08) 62%,
            rgba(15, 23, 34, .35) 100%),
        linear-gradient(0deg,
            rgba(15, 23, 34, .35),
            transparent 50%);
}
.fds-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 43%;
    transition:
        transform 1.2s var(--gd-ease);
}
.fds-photo-band:hover .fds-photo img {
    transform:
        scale(1.035);
}
/* =========================================================
   PHOTO OVERLAY
========================================================= */
.fds-photo-overlay {
    position: absolute;
    left: 35px;
    top: 50%;
    z-index: 6;
    transform:
        translateY(-50%);
    display: flex;
    align-items: center;
    gap: 30px;
}
.fds-photo-number {
    width: 145px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);

        
    font-size: 70px;
    font-weight: 700;
    line-height: .8;
    clip-path:
        polygon(15% 0,
            100% 0,
            100% 85%,
            85% 100%,
            0 100%,
            0 15%);
}
.fds-photo-number span {
    margin-top: 13px;

    
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.fds-photo-message small {
    display: block;
    margin-bottom: 10px;
    color:
        var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.fds-photo-message strong {
    display: block;
    max-width: 430px;

    
    color:
        var(--gd-white);
    font-size:
        clamp(30px, 3vw, 55px);
    line-height: .95;
}
/* =========================================================
   PHOTO SIDE
========================================================= */
.fds-photo-side {
    position: absolute;
    right: 24px;
    top: 50%;
    z-index: 7;
    transform:
        translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fds-photo-side span {
    min-width: 100px;
    padding:
        9px 12px;
    color:
        var(--gd-white);
    background:
        rgba(15, 23, 34, .72);
    border-right:
        3px solid var(--gd-orange);
    text-align: right;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.4px;
    backdrop-filter:
        blur(8px);
}
/* =========================================================
   SERVICE MATRIX
========================================================= */
.fds-service-matrix {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
}
.fds-service {
    position: relative;
    min-height: 94px;
    padding:
        15px 18px;
    display: grid;
    grid-template-columns:
        40px 48px 1fr 28px;
    align-items: center;
    gap: 12px;
    color:
        var(--gd-white);
    border-bottom:
        1px solid rgba(255, 255, 255, .08);
    border-right:
        1px solid rgba(255, 255, 255, .08);
    transition:
        .4s var(--gd-ease);
}
.fds-service:nth-child(even) {
    border-right: 0;
}
.fds-service::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--gd-orange);
    transform:
        scaleX(0);
    transform-origin:
        right;
    transition:
        .4s var(--gd-ease);
}
.fds-service:hover::before {
    transform:
        scaleX(1);
    transform-origin:
        left;
}
.fds-service>* {
    position: relative;
    z-index: 2;
}
.fds-no {
    color:
        rgba(255, 255, 255, .3);

        
    font-size: 15px;
}
.fds-symbol {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color:
        var(--gd-orange);
    border:
        1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    transition:
        .35s var(--gd-ease);
}
.fds-symbol i {
    font-size: 13px;
}
.fds-service strong {
    font-size: 12px;
    font-weight: 800;
}
.fds-arrow {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    color:
        var(--gd-orange);
    font-size: 11px;
    transition:
        .35s var(--gd-ease);
}
/* HOVER */
.fds-service:hover {
    color:
        var(--gd-dark);
    padding-left:
        25px;
}
.fds-service:hover .fds-no {
    color:
        rgba(15, 23, 34, .45);
}
.fds-service:hover .fds-symbol {
    color:
        var(--gd-dark);
    border-color:
        rgba(15, 23, 34, .25);
    background:
        rgba(255, 255, 255, .18);
}
.fds-service:hover .fds-arrow {
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    border-color:
        var(--gd-dark);
    transform:
        rotate(45deg);
}
/* EMERGENCY ITEM */
.fds-service-hot::after {
    content: "URGENT";
    position: absolute;
    right: 52px;
    top: 10px;
    color:
        var(--gd-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
/* =========================================================
   INSPECTION STRIP
========================================================= */
.fds-inspection {
    min-height: 110px;
    padding:
        17px 22px;
    display: grid;
    grid-template-columns:
        62px 1fr auto;
    align-items: center;
    gap: 18px;
    background:
        var(--gd-navy);
    border-top:
        4px solid var(--gd-orange);
}
.fds-inspection-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    clip-path:
        polygon(14% 0,
            100% 0,
            100% 86%,
            86% 100%,
            0 100%,
            0 14%);
}
.fds-inspection-icon i {
    font-size: 17px;
}
.fds-inspection-copy small {
    display: block;
    margin-bottom: 5px;
    color:
        var(--gd-gold);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.fds-inspection-copy p {
    margin: 0;
    max-width: 750px;
    color:
        var(--gd-white);
    font-size: 13px;
    line-height: 1.6;
}
.fds-inspection-btn {
    min-height: 54px;
    padding:
        0 20px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        .35s var(--gd-ease);
}
.fds-inspection-btn:hover {
    color:
        var(--gd-dark);
    background:
        var(--gd-white);
    transform:
        translateY(-3px);
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1199.98px) {
    .fds-services {
        padding:
            85px 0;
    }
    .fds-intro {
        margin-left: 0;
    }
    .fds-photo-band {
        min-height:
            400px;
    }
}
@media(max-width:767.98px) {
    .fds-services {
        padding:
            65px 0;
    }
    .fds-head {
        margin-bottom:
            35px;
    }
    .fds-title {
        font-size:
            clamp(50px, 14vw, 78px);
        letter-spacing:
            -4px;
    }
    .fds-title strong {
        margin-left:
            15px;
    }
    .fds-board-top {
        align-items:
            flex-start;
        flex-direction:
            column;
    }
    .fds-photo-band {
        min-height:
            460px;
    }
    .fds-photo-overlay {
        left:
            18px;
        right:
            18px;
        bottom:
            30px;
        top:
            auto;
        transform:
            none;
        align-items:
            flex-end;
    }
    .fds-photo-number {
        width:
            95px;
        height:
            95px;
        flex:
            0 0 95px;
        font-size:
            47px;
    }
    .fds-photo-message strong {
        font-size:
            28px;
    }
    .fds-photo-side {
        right:
            10px;
        top:
            18px;
        transform:
            none;
    }
    .fds-photo-side span {
        min-width:
            75px;
        padding:
            6px 8px;
        font-size:
            5px;
    }
    .fds-service-matrix {
        grid-template-columns:
            1fr;
    }
    .fds-service {
        border-right:
            0;
    }
    .fds-inspection {
        grid-template-columns:
            50px 1fr;
    }
    .fds-inspection-icon {
        width:
            48px;
        height:
            48px;
    }
    .fds-inspection-btn {
        grid-column:
            1 / -1;
        width:
            100%;
        justify-content:
            space-between;
    }
}
@media(max-width:430px) {
    .fds-service {
        grid-template-columns:
            30px 40px 1fr;
        min-height:
            82px;
        padding:
            12px 10px;
    }
    .fds-arrow {
        display: none;
    }
    .fds-symbol {
        width:
            38px;
        height:
            38px;
    }
    .fds-service strong {
        font-size:
            10px;
    }
}
/* =========================================================
   SIMPLE RESIDENTIAL SECTION
========================================================= */
.rsm-section {
    position: relative;
    padding: 105px 0;
    background: #f5f6f6;
    color: var(--gd-dark);
    overflow: hidden;
}
/* subtle background detail */
.rsm-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 8%;
    width: 1px;
    height: 100%;
    background: rgba(24, 34, 49, .07);
}
/* =========================================================
   LEFT
========================================================= */
.rsm-heading {
    max-width: 520px;
}
.rsm-label {
    display: block;
    margin-bottom: 18px;
    color: var(--gd-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.rsm-heading h2 {
    margin: 0;
    color: var(--gd-dark);
    font-size: clamp(46px, 5vw, 82px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -3px;
}
.rsm-heading h2 strong {
    display: block;
    color: var(--gd-orange);
}
.rsm-line {
    width: 70px;
    height: 4px;
    margin: 28px 0 24px;
    background: var(--gd-orange);
}
.rsm-heading>p {
    max-width: 430px;
    margin: 0;
    color: #68737c;
    font-size: 16px;
    line-height: 1.75;
}
/* =========================================================
   RIGHT CONTENT
========================================================= */
.rsm-content {
    border-top: 1px solid rgba(24, 34, 49, .15);
}
.rsm-text {
    position: relative;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 20px;
    padding: 32px 0;
    border-bottom: 1px solid rgba(24, 34, 49, .15);
}
.rsm-text>span {
    color: var(--gd-orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}
.rsm-text p {
    max-width: 720px;
    margin: 0;
    color: #66727a;
    font-size: 14px;
    line-height: 1.85;
}
.rsm-text p strong {
    color: var(--gd-dark);
}
/* last statement */
.rsm-text-main {
    padding-right: 25px;
    border-left: 4px solid var(--gd-orange);
    padding-left: 22px;
}
.rsm-text-main>span {
    color: var(--gd-navy);
}
/* =========================================================
   HOVER
========================================================= */
.rsm-text {
    transition:
        padding-left .35s ease,
        background .35s ease;
}
.rsm-text:hover {
    padding-left: 12px;
    background:
        rgba(255, 255, 255, .55);
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
    .rsm-section {
        padding: 80px 0;
    }
    .rsm-heading {
        max-width: 650px;
    }
}
@media (max-width: 575.98px) {
    .rsm-section {
        padding: 60px 0;
    }
    .rsm-heading h2 {
        font-size: clamp(42px, 13vw, 62px);
    }
    .rsm-text {
        grid-template-columns: 45px 1fr;
        gap: 12px;
        padding: 25px 0;
    }
    .rsm-text-main {
        padding-left: 16px;
    }
}
/* =========================================================
   WHY FRESNO GARAGE DOOR PRO
   DIAGONAL SPLIT
========================================================= */
.wfx-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    background: #f2f3f4;
    color: var(--gd-dark);
}
/* =========================================================
   WRAP
========================================================= */
.wfx-wrap {
    position: relative;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    min-height: 620px;
}
/* =========================================================
   LEFT
========================================================= */
.wfx-left {
    position: relative;
    z-index: 4;
    padding:
        70px 90px 70px 55px;
    color: var(--gd-white);
    background:
        linear-gradient(145deg,
            var(--gd-dark),
            var(--gd-deep));
    clip-path:
        polygon(0 0,
            92% 0,
            100% 50%,
            88% 100%,
            0 100%);
}
.wfx-left::before {
    content: "";
    position: absolute;
    right: 10%;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--gd-orange);
    transform: skewX(-8deg);
}
.wfx-code {
    display: block;
    margin-bottom: 25px;
    color: var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
.wfx-left h2 {
    max-width: 560px;
    margin: 0;
  
    
    font-size:
        clamp(52px, 5.5vw, 90px);
    line-height: .86;
    letter-spacing: -4px;
}
.wfx-left h2 strong {
    display: block;
    color: var(--gd-orange);
}
.wfx-left p {
    max-width: 470px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    line-height: 1.8;
}
/* BUTTON */
.wfx-btn {
    min-height: 54px;
    margin-top: 30px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 25px;
    color: var(--gd-dark);
    background: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: .35s ease;
}
.wfx-btn:hover {
    color: var(--gd-dark);
    background: var(--gd-white);
    transform: translateY(-4px);
}
/* =========================================================
   RIGHT
========================================================= */
.wfx-right {
    position: relative;
    padding: 45px 0 40px 70px;
}
.wfx-right::before {
    content: "";
    position: absolute;
    left: 77px;
    top: 110px;
    bottom: 95px;
    width: 1px;
    background:
        linear-gradient(var(--gd-orange),
            rgba(24, 34, 49, .13));
}
.wfx-right-label {
    margin-bottom: 35px;
    color: #879097;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   STATS
========================================================= */
.wfx-stat {
    position: relative;
    min-height: 105px;
    display: grid;
    grid-template-columns:
        50px 180px 1fr;
    align-items: center;
    gap: 20px;
    border-bottom:
        1px solid rgba(24, 34, 49, .12);
    transition:
        .35s var(--gd-ease);
}
.wfx-stat-no {
    position: relative;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--gd-dark);
    background: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
}
.wfx-stat>strong {
    color: var(--gd-dark);
  
    
    font-size:
        clamp(48px, 5vw, 82px);
    line-height: 1;
    letter-spacing: -3px;
}
.wfx-stat>strong span {
    color: var(--gd-orange);
    font-size: .42em;
}
.wfx-stat small {
    display: block;
    margin-bottom: 5px;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.wfx-stat p {
    margin: 0;
    color: #6f7981;
    font-size: 11px;
}
/* ASYMMETRY */
.wfx-stat-2 {
    margin-left: 45px;
}
.wfx-stat-3 {
    margin-left: 15px;
}
.wfx-stat-4 {
    margin-left: 75px;
}
/* HOVER */
.wfx-stat:hover {
    padding-left: 12px;
    background: rgba(255, 255, 255, .55);
}
.wfx-stat:hover>strong {
    color: var(--gd-orange);
}
/* =========================================================
   BOTTOM NOTE
========================================================= */
.wfx-bottom-note {
    max-width: 620px;
    margin-top: 35px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.wfx-bottom-note span {
    width: 55px;
    height: 3px;
    margin-top: 7px;
    flex: 0 0 55px;
    background: var(--gd-orange);
}
.wfx-bottom-note p {
    margin: 0;
    color: #647079;
    font-size: 11px;
    line-height: 1.7;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width: 991.98px) {
    .wfx-section {
        padding: 80px 0;
    }
    .wfx-wrap {
        grid-template-columns: 1fr;
    }
    .wfx-left {
        clip-path: none;
        padding:
            55px 40px;
    }
    .wfx-left::before {
        right: 0;
        width: 6px;
        transform: none;
    }
    .wfx-right {
        padding:
            50px 15px 20px;
    }
    .wfx-right::before {
        left: 34px;
    }
    .wfx-stat {
        grid-template-columns:
            40px 150px 1fr;
    }
    .wfx-stat-2,
    .wfx-stat-3,
    .wfx-stat-4 {
        margin-left: 0;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width: 575.98px) {
    .wfx-section {
        padding: 60px 0;
    }
    .wfx-left {
        padding:
            45px 25px;
    }
    .wfx-left h2 {
        font-size:
            clamp(46px, 14vw, 64px);
    }
    .wfx-right {
        padding:
            40px 0 10px;
    }
    .wfx-right::before {
        display: none;
    }
    .wfx-stat {
        min-height: 125px;
        grid-template-columns:
            35px 1fr;
        gap: 10px;
        padding:
            18px 0;
    }
    .wfx-stat>strong {
        font-size: 58px;
    }
    .wfx-stat>div {
        grid-column: 2;
    }
}
/* =========================================================
   MECHANICAL SYSTEM SECTION
========================================================= */
.mech-section {
    position: relative;
    overflow: hidden;
    background: #f6f6f3;
    color: var(--gd-dark);
}
.mech-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 980px;
}
/* =========================================================
   SHARED PANEL
========================================================= */
.mech-panel {
    position: relative;
    overflow: hidden;
}
/* =========================================================
   LEFT PANEL
========================================================= */
.mech-panel-left {
    min-height: 980px;
    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #f7f7f4 100%);
    clip-path:
        polygon(0 0,
            100% 0,
            88% 100%,
            0 100%);
    z-index: 3;
}
/* BIG NUMBER */
.mech-big-number {
    position: absolute;
    left: 22px;
    top: 0;
    color:
        rgba(24, 34, 49, .055);

        
    font-size:
        clamp(150px, 16vw, 280px);
    font-weight: 700;
    line-height: .85;
    z-index: 1;
}
/* CONTENT */
.mech-left-content {
    position: relative;
    z-index: 5;
    max-width: 650px;
    padding:
        85px 55px 40px 15%;
}
.mech-kicker {
    margin-bottom: 26px;
    color:
        var(--gd-navy);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
}
/* TITLE */
.mech-title {
    max-width: 700px;
    margin: 0;
    color:
        var(--gd-deep);
 
        
    font-size:
        clamp(50px, 5vw, 84px);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -4px;
}
.mech-title span {
    display: block;
    color: var(--gd-orange);
}
/* LEAD */
.mech-lead {
    max-width: 570px;
    margin:
        28px 0 0;
    color:
        #394959;
    font-size: 17px;
    line-height: 1.65;
}
.mech-orange-line {
    display: block;
    width: 78px;
    height: 2px;
    margin:
        22px 0;
    background:
        var(--gd-orange);
}
/* BODY */
.mech-copy {
    max-width: 620px;
    margin:
        0 0 10px;
    color:
        #455465;
    font-size: 13px;
    line-height: 1.65;
}
/* IMPORTANT TEXT */
.mech-highlight {
    position: relative;
    max-width: 610px;
    margin-top: 27px;
    padding-left: 31px;
    color:
        #26374a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.65;
}
.mech-highlight::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background:
        var(--gd-orange);
}
/* =========================================================
   SPRING IMAGE
========================================================= */
.mech-spring-photo {
    position: absolute;
    left: -7%;
    right: 11%;
    bottom: -109px;
    height: 380px;
    z-index: 4;
}
.mech-spring-photo img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left bottom;
    filter:
        drop-shadow(0 22px 20px rgba(15, 23, 34, .16));
    transition:
        transform .8s var(--gd-ease);
}
.mech-panel-left:hover .mech-spring-photo img {
    transform:
        translateX(15px);
}
/* ORANGE DISC */
.mech-orange-disc {
    position: absolute;
    width: 260px;
    height: 260px;
    right: 8%;
    bottom: 15px;
    border-radius: 50%;
    background:
        linear-gradient(145deg,
            var(--gd-gold),
            var(--gd-orange));
    opacity: .85;
}
/* =========================================================
   BOTTOM LEFT NOTE
========================================================= */
.mech-bottom-note {
    position: absolute;
    left: 48px;
    bottom: 34px;
    z-index: 7;
    display: grid;
    gap: 8px;
    padding-left: 25px;
    border-left:
        2px solid var(--gd-orange);
}
.mech-bottom-note span {
    color:
        var(--gd-navy);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}
/* BALANCE LINE */
.mech-balance-line {
    position: absolute;
    right: 13%;
    bottom: 350px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 17px;
}
.mech-balance-line span {
    color:
        var(--gd-navy);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.mech-balance-line i {
    width: 190px;
    height: 1px;
    background:
        rgba(64, 81, 111, .65);
}
/* =========================================================
   RIGHT PANEL
========================================================= */
.mech-panel-right {
    position: relative;
    min-height: 980px;
    margin-left: -12%;
    padding-left: 12%;
    background:
        linear-gradient(155deg,
            #ffffff 0%,
            #f5f6f5 100%);
    z-index: 2;
}
/* =========================================================
   TOP ROLLER PHOTO
========================================================= */
.mech-top-photo {
    position: relative;
    height: 410px;
    overflow: visible;
    background:
        transparent;
}
.mech-top-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path:
        polygon(16% 0,
            100% 0,
            100% 100%,
            0 68%);
    background:
        var(--gd-deep);
}
.mech-top-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path:
        polygon(16% 0,
            100% 0,
            100% 100%,
            0 68%);
    background:
        linear-gradient(90deg,
            transparent 50%,
            rgba(15, 23, 34, .13));
}
.mech-top-photo img {
    position: absolute;
    top: -48px;
    right: -52px;
    z-index: 1;
    width:
        min(88%, 670px);
    height: 430px;
    display: block;
    object-fit: cover;
    object-position: center;
    box-shadow:
        0 28px 42px rgba(15, 23, 34, .24);
    transition:
        transform 1s var(--gd-ease);
}
.mech-panel-right:hover .mech-top-photo img {
    transform:
        translateY(-8px) scale(1.035);
}
/* PHOTO LABEL */
.mech-photo-label {
    position: absolute;
    right: 40px;
    top: 55px;
    z-index: 5;
    display: grid;
    gap: 8px;
    padding-right: 20px;
    border-right:
        2px solid var(--gd-orange);
    text-align: right;
}
.mech-photo-label span {
    color:
        var(--gd-white);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}
/* =========================================================
   RIGHT BODY
========================================================= */
.mech-right-body {
    position: relative;
    min-height: 570px;
    padding:
        25px 50px 65px 16%;
}
.mech-number-two {
    left: 0;
    top: -42px;
    font-size:
        clamp(135px, 14vw, 230px);
}
.mech-right-content {
    position: relative;
    z-index: 4;
    max-width: 680px;
    margin-left: auto;
}
/* SECOND TITLE */
.mech-right-title {
    font-size:
        clamp(46px, 4.8vw, 78px);
}
.mech-right-lead {
    font-size: 15px;
}
/* =========================================================
   BOTTOM LINE
========================================================= */
.mech-bottom-line {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 45px;
}
.mech-bottom-line i {
    flex: 1;
    height: 1px;
    background:
        var(--gd-navy);
}
.mech-bottom-line i:last-child {
    background:
        var(--gd-orange);
}
.mech-bottom-line span {
    white-space: nowrap;
    color:
        var(--gd-navy);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}
/* =========================================================
   DIAGONAL ORANGE DIVIDER
========================================================= */
.mech-layout::after {
    content: "";
    position: absolute;
    left: 49.1%;
    top: 0;
    width: 2px;
    height: 100%;
    z-index: 8;
    background:
        var(--gd-orange);
    transform:
        rotate(13deg);
    transform-origin:
        top center;
    pointer-events: none;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1199.98px) {
    .mech-layout {
        grid-template-columns: 1fr;
    }
    .mech-panel-left,
    .mech-panel-right {
        min-height: 850px;
    }
    .mech-panel-left {
        clip-path: none;
    }
    .mech-panel-right {
        margin-left: 0;
        padding-left: 0;
    }
    .mech-layout::after {
        display: none;
    }
    .mech-left-content {
        padding:
            75px 45px 40px;
    }
    .mech-top-photo::before,
    .mech-top-photo::after {
        clip-path:
            polygon(0 0,
                100% 0,
                100% 90%,
                0 100%);
    }
    .mech-right-body {
        padding:
            55px 45px 70px;
    }
    .mech-number-two {
        left: 15px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767.98px) {
    .mech-panel-left {
        min-height: 880px;
    }
    .mech-left-content {
        padding:
            60px 22px 30px;
    }
    .mech-title {
        font-size:
            clamp(45px, 13vw, 65px);
        letter-spacing:
            -3px;
    }
    .mech-lead {
        font-size: 15px;
    }
    .mech-copy,
    .mech-highlight {
        font-size: 12px;
    }
    .mech-big-number {
        left: 5px;
        font-size: 130px;
    }
    .mech-spring-photo {
        left: -15%;
        right: 0;
        height: 300px;
    }
    .mech-orange-disc {
        width: 190px;
        height: 190px;
        right: 5%;
    }
    .mech-balance-line {
        display: none;
    }
    .mech-bottom-note {
        left: 20px;
        bottom: 22px;
    }
    .mech-top-photo {
        height: 310px;
    }
    .mech-top-photo img {
        top: -28px;
        right: 16px;
        width:
            calc(100% - 32px);
        height: 315px;
    }
    .mech-photo-label {
        right: 18px;
        top: 30px;
    }
    .mech-right-body {
        padding:
            45px 22px 55px;
    }
    .mech-right-title {
        font-size:
            clamp(43px, 12vw, 62px);
    }
    .mech-bottom-line span {
        white-space: normal;
        text-align: center;
    }
}
/* =========================================================
   GARAGE DOOR OPENER SERVICE
========================================================= */
.gdo-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: var(--gd-white);
    background:
        radial-gradient(circle at 80% 30%,
            rgba(244, 160, 30, .08),
            transparent 30%),
        var(--gd-dark);
}
.gdo-content {
    max-width: 620px;
}
.gdo-index {
    display: block;
    margin-bottom: 20px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.gdo-title {
    margin: 0 0 28px;

    
    font-size: clamp(52px, 5.5vw, 90px);
    line-height: .88;
    letter-spacing: -4px;
}
.gdo-title strong {
    display: block;
    color: var(--gd-orange);
}
.gdo-lead {
    color: var(--gd-white);
    font-size: 17px;
    line-height: 1.6;
}
.gdo-text {
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    line-height: 1.8;
}
.gdo-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.gdo-strip span {
    padding: 14px 10px;
    color: rgba(255, 255, 255, .65);
    border-right: 1px solid rgba(255, 255, 255, .1);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
}
.gdo-strip span:last-child {
    border-right: 0;
}
/* VISUAL */
.gdo-visual {
    position: relative;
    min-height: 620px;
}
.gdo-orange-shape {
    position: absolute;
    right: 0;
    top: 40px;
    width: 70%;
    height: 85%;
    background: var(--gd-orange);
    clip-path:
        polygon(20% 0,
            100% 0,
            100% 100%,
            0 100%);
}
.gdo-photo {
    position: absolute;
    left: 26px;
    top: 0;
    width: 94%;
    height: 540px;
    overflow: hidden;
    clip-path: polygon(8% 0px, 100% 0px, 100% 99.45%, 16px 100.04%);
    box-shadow: 0 35px 70px rgba(0, 0, 0, .32);
}
.gdo-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .8s ease;
}
.gdo-visual:hover .gdo-photo img {
    transform: scale(1.04);
}
.gdo-float-card {
    position: absolute;
    right: 0;
    bottom: 20px;
    padding: 18px 25px;
    color: var(--gd-white);
    background: var(--gd-deep);
    border-left: 4px solid var(--gd-orange);
}
.gdo-float-card small {
    display: block;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.gdo-float-card strong {
    display: block;
    margin-top: 4px;

    
    font-size: 20px;
}
/* =========================================================
   COMMERCIAL SECTION
========================================================= */
.gdc-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            #f7f8f8,
            #eef0f2);
    color: var(--gd-dark);
}
.gdc-content {
    max-width: 620px;
}
.gdc-index {
    display: block;
    margin-bottom: 20px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.gdc-title {
    margin: 0 0 28px;

    font-size: clamp(50px, 5.2vw, 86px);
    line-height: .9;
    letter-spacing: -4px;
}
.gdc-title strong {
    display: block;
    color: var(--gd-orange);
}
.gdc-lead {
    color: var(--gd-dark);
    font-size: 17px;
    line-height: 1.6;
}
.gdc-text {
    color: #68737b;
    font-size: 13px;
    line-height: 1.8;
}
.gdc-highlight {
    margin-top: 25px;
    padding-left: 20px;
    color: #56626b;
    border-left: 4px solid var(--gd-orange);
    font-size: 13px;
    line-height: 1.75;
}
.gdc-highlight strong {
    color: var(--gd-dark);
}
.gdc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.gdc-tags span {
    padding: 9px 13px;
    color: var(--gd-white);
    background: var(--gd-navy);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* VISUAL */
.gdc-visual {
    position: relative;
    min-height: 600px;
}
.gdc-photo {
    position: absolute;
    inset: 0 40px 0 0;
    overflow: hidden;
    clip-path:
        polygon(0 0,
            88% 0,
            100% 50%,
            88% 100%,
            0 100%);
    box-shadow:
        0 35px 65px rgba(24, 34, 49, .18);
}
.gdc-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .8s ease;
}
.gdc-visual:hover .gdc-photo img {
    transform: scale(1.035);
}
.gdc-side-label {
    position: absolute;
    left: 0;
    top: 40px;
    width: 165px;
    padding: 20px;
    color: var(--gd-dark);
    background: var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.gdc-side-label strong {
    display: block;
    margin-top: 5px;
    font-size: 13px;
}
.gdc-stat {
    position: absolute;
    right: 0;
    bottom: 30px;
    width: 155px;
    padding: 20px;
    color: var(--gd-white);
    background: var(--gd-dark);
    text-align: center;
}
.gdc-stat span,
.gdc-stat small {
    display: block;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.gdc-stat strong {
    display: block;
    margin: 5px 0;
    
    font-size: 28px;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width: 991.98px) {
    .gdo-section,
    .gdc-section {
        padding: 80px 0;
    }
    .gdo-visual,
    .gdc-visual {
        min-height: 520px;
    }
}
@media(max-width: 575.98px) {
    .gdo-section,
    .gdc-section {
        padding: 60px 0;
    }
    .gdo-title,
    .gdc-title {
        font-size: clamp(44px, 13vw, 62px);
    }
    .gdo-strip {
        grid-template-columns: 1fr 1fr;
    }
    .gdo-visual,
    .gdc-visual {
        min-height: 430px;
    }
    .gdo-photo {
        width: 95%;
        height: 380px;
    }
    .gdc-photo {
        right: 0;
    }
    .gdc-side-label {
        width: 125px;
    }
    .gdc-stat {
        width: 120px;
    }
}
/* =========================================================
   HOW WE WORK
========================================================= */
.hww-section {
    position: relative;
    padding: 105px 0;
    overflow: hidden;
    color: var(--gd-white);
    background:
        radial-gradient(circle at 80% 20%,
            rgba(244, 160, 30, .08),
            transparent 27%),
        linear-gradient(135deg,
            var(--gd-dark),
            var(--gd-deep));
}
/* background word */
.hww-section::before {
    content: "PROCESS";
    position: absolute;
    right: -35px;
    bottom: -55px;
    color: rgba(255, 255, 255, .025);
    font-size: clamp(100px, 16vw, 270px);
    font-weight: 900;
    letter-spacing: -11px;
    line-height: 1;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.hww-head {
    position: relative;
    z-index: 4;
    max-width: 780px;
    margin-bottom: 70px;
}
.hww-kicker {
    display: block;
    margin-bottom: 18px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.hww-head h2 {
    margin: 0;
    
    font-size: clamp(50px, 5.5vw, 88px);
    line-height: .9;
    letter-spacing: -4px;
}
.hww-head h2 strong {
    display: block;
    color: var(--gd-orange);
}
.hww-head p {
    max-width: 640px;
    margin: 25px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   PROCESS
========================================================= */
.hww-process {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}
/* main rail */
.hww-track {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 49px;
    height: 2px;
    background:
        rgba(255, 255, 255, .14);
}
.hww-track::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20%;
    height: 100%;
    background: var(--gd-orange);
    box-shadow:
        180px 0 0 var(--gd-orange),
        360px 0 0 var(--gd-orange),
        540px 0 0 var(--gd-orange);
}
/* =========================================================
   STEP
========================================================= */
.hww-step {
    position: relative;
    min-height: 320px;
    padding:
        0 22px 28px;
    text-align: center;
    border-right:
        1px solid rgba(255, 255, 255, .08);
    transition:
        .4s var(--gd-ease);
}
.hww-step:last-child {
    border-right: 0;
}
/* number */
.hww-no {
    position: absolute;
    left: 18px;
    top: -15px;
    color: rgba(255, 255, 255, .18);
    
    font-size: 13px;
}
/* icon */
.hww-icon {
    position: relative;
    z-index: 3;
    width: 74px;
    height: 74px;
    margin: 12px auto 30px;
    display: grid;
    place-items: center;
    color: var(--gd-orange);
    background: var(--gd-dark);
    border:
        2px solid var(--gd-orange);
    transform: rotate(45deg);
    transition:
        .4s var(--gd-ease);
}
.hww-icon i {
    transform: rotate(-45deg);
    font-size: 18px;
}
/* title */
.hww-step h3 {
    margin: 0 0 13px;
    color: var(--gd-white);
    
    font-size: 26px;
}
/* copy */
.hww-step p {
    max-width: 220px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .52);
    font-size: 10px;
    line-height: 1.7;
}
/* =========================================================
   HOVER
========================================================= */
.hww-step:hover {
    transform: translateY(-9px);
}
.hww-step:hover .hww-icon {
    color: var(--gd-dark);
    background: var(--gd-orange);
    box-shadow:
        0 15px 35px rgba(244, 160, 30, .22);
}
.hww-step:hover h3 {
    color: var(--gd-orange);
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width: 991.98px) {
    .hww-section {
        padding: 85px 0;
    }
    .hww-process {
        grid-template-columns:
            repeat(2, 1fr);
        gap: 1px;
        background:
            rgba(255, 255, 255, .07);
    }
    .hww-track {
        display: none;
    }
    .hww-step {
        min-height: 285px;
        padding:
            32px 24px;
        background:
            rgba(15, 23, 34, .5);
        border-right: 0;
    }
}
@media(max-width: 575.98px) {
    .hww-section {
        padding: 65px 0;
    }
    .hww-head h2 {
        font-size:
            clamp(44px, 13vw, 62px);
    }
    .hww-process {
        grid-template-columns: 1fr;
    }
    .hww-step {
        min-height: auto;
        display: grid;
        grid-template-columns:
            70px 1fr;
        gap: 18px;
        text-align: left;
    }
    .hww-icon {
        width: 56px;
        height: 56px;
        margin: 5px 0;
        grid-row:
            1 / span 3;
    }
    .hww-step h3,
    .hww-step p {
        max-width: none;
        margin-left: 0;
    }
    .hww-no {
        right: 15px;
        left: auto;
        top: 12px;
    }
}
/* =========================================================
   FRESNO LIGHT GALLERY
========================================================= */
.fg-gallery {
    position: relative;
    padding: 110px 0 90px;
    overflow: hidden;
    color: var(--gd-dark);
    background:
        linear-gradient(rgba(64, 81, 111, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(64, 81, 111, .025) 1px,
            transparent 1px),
        #f5f6f4;
    background-size:
        50px 50px;
}
/* orange decorative corner */
.fg-gallery::before {
    content: "";
    position: absolute;
    right: -70px;
    top: 70px;
    width: 180px;
    height: 180px;
    border: 35px solid rgba(244, 160, 30, .12);
    transform: rotate(45deg);
}
/* =========================================================
   HEADER
========================================================= */
.fg-gallery-head {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        1.25fr .75fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 55px;
}
.fg-gallery-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 17px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.3px;
    text-transform: uppercase;
}
.fg-gallery-kicker::before {
    content: "";
    width: 45px;
    height: 2px;
    background: var(--gd-orange);
}
.fg-gallery-head h2 {
    margin: 0;
    color: var(--gd-deep);
    
    font-size:
        clamp(52px, 6vw, 92px);
    line-height: .88;
    letter-spacing: -5px;
}
.fg-gallery-head h2 strong {
    display: block;
    color: var(--gd-orange);
}
.fg-gallery-head>p {
    max-width: 440px;
    margin:
        0 0 5px;
    padding-left: 22px;
    color: #6b7680;
    border-left:
        3px solid var(--gd-orange);
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   ASYMMETRICAL GRID
========================================================= */
.fg-gallery-grid {
    position: relative;
    display: grid;
    grid-template-columns:
        1.25fr .75fr 1fr;
    grid-template-rows:
        250px 190px 260px;
    gap: 14px;
}
/* =========================================================
   ITEM
========================================================= */
.fg-gallery-item {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--gd-deep);
}
.fg-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform .8s var(--gd-ease),
        filter .5s ease;
}
/* dark bottom fade */
.fg-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(0deg,
            rgba(15, 23, 34, .82),
            transparent 48%);
    pointer-events: none;
}
/* =========================================================
   DIFFERENT POSITIONS
========================================================= */
/* BIG */
.fg-gallery-main {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
/* spring */
.fg-gallery-spring {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
/* opener */
.fg-gallery-opener {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
/* commercial */
.fg-gallery-commercial {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}
/* track */
.fg-gallery-track {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}
/* installation */
.fg-gallery-install {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
/* =========================================================
   CAPTION
========================================================= */
.fg-gallery-item figcaption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 4;
}
.fg-gallery-item figcaption span {
    display: block;
    margin-bottom: 5px;
    color: var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.fg-gallery-item figcaption strong {
    color: var(--gd-white);
    
    font-size: 19px;
    font-weight: 700;
}
/* =========================================================
   BIG FADED NUMBERS
========================================================= */
.fg-gallery-number {
    position: absolute;
    right: 14px;
    top: 8px;
    z-index: 3;
    color:
        rgba(255, 255, 255, .22);
    
    font-size: 55px;
    font-weight: 400;
    line-height: 1;
}
/* =========================================================
   ORANGE CORNER
========================================================= */
.fg-gallery-item::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    width: 0;
    height: 0;
    border-top:
        35px solid var(--gd-orange);
    border-left:
        35px solid transparent;
    opacity: 0;
    transition:
        .4s var(--gd-ease);
}
/* =========================================================
   HOVER
========================================================= */
.fg-gallery-item:hover img {
    transform: scale(1.06);
}
.fg-gallery-item:hover::before {
    opacity: 1;
}
.fg-gallery-item:hover .fg-gallery-number {
    color:
        rgba(244, 160, 30, .65);
}
/* =========================================================
   BOTTOM RAIL
========================================================= */
.fg-gallery-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 35px;
}
.fg-gallery-bottom span {
    color: var(--gd-navy);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.fg-gallery-bottom i {
    width: 40px;
    height: 1px;
    background:
        rgba(64, 81, 111, .25);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .fg-gallery {
        padding:
            85px 0;
    }
    .fg-gallery-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .fg-gallery-grid {
        grid-template-columns:
            1fr 1fr;
        grid-template-rows:
            380px 240px 240px 300px;
    }
    .fg-gallery-main {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .fg-gallery-spring {
        grid-column: 1;
        grid-row: 2;
    }
    .fg-gallery-opener {
        grid-column: 2;
        grid-row: 2;
    }
    .fg-gallery-commercial {
        grid-column: 1 / 3;
        grid-row: 3;
    }
    .fg-gallery-track {
        grid-column: 1;
        grid-row: 4;
    }
    .fg-gallery-install {
        grid-column: 2;
        grid-row: 4;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .fg-gallery {
        padding:
            65px 0;
    }
    .fg-gallery-head h2 {
        font-size:
            clamp(45px, 13vw, 64px);
        letter-spacing: -3px;
    }
    .fg-gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 10px;
    }
    .fg-gallery-main,
    .fg-gallery-spring,
    .fg-gallery-opener,
    .fg-gallery-commercial,
    .fg-gallery-track,
    .fg-gallery-install {
        grid-column: auto;
        grid-row: auto;
        height: 280px;
    }
    .fg-gallery-main,
    .fg-gallery-commercial {
        height: 340px;
    }
    .fg-gallery-bottom {
        flex-wrap: wrap;
        gap: 10px 15px;
    }
    .fg-gallery-bottom i {
        width: 20px;
    }
}
/* =========================================================
   BEFORE & AFTER
========================================================= */
.fba-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: var(--gd-dark);
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f5f6f6 55%,
            #eef0f2 100%);
}
/* large faded word */
.fba-section::before {
    content: "RESULT";
    position: absolute;
    right: -25px;
    top: 35px;
    color: rgba(24, 34, 49, .035);
    font-size: clamp(100px, 16vw, 260px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -10px;
    pointer-events: none;
}
/* orange vertical detail */
.fba-section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 110px;
    width: 6px;
    height: 170px;
    background: var(--gd-orange);
}
/* =========================================================
   HEADER
========================================================= */
.fba-header {
    position: relative;
    z-index: 3;
    margin-bottom: 50px;
}
.fba-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 17px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.fba-kicker::before {
    content: "";
    width: 45px;
    height: 2px;
    background: var(--gd-orange);
}
.fba-title {
    margin: 0;
    color: var(--gd-deep);
    
    font-size: clamp(58px, 7vw, 108px);
    line-height: .82;
    letter-spacing: -6px;
}
.fba-title span {
    color: var(--gd-navy);
    font-size: .55em;
    font-style: italic;
}
.fba-title strong {
    color: var(--gd-orange);
    font-weight: 700;
}
.fba-intro {
    max-width: 420px;
    margin: 0 0 5px;
    padding-left: 22px;
    color: #69747d;
    border-left:
        3px solid var(--gd-orange);
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   MAIN STAGE
========================================================= */
.fba-stage {
    position: relative;
    z-index: 3;
    height: 610px;
    overflow: hidden;
    background: var(--gd-dark);
    box-shadow:
        0 35px 75px rgba(24, 34, 49, .16);
}
/* =========================================================
   PHOTOS
========================================================= */
.fba-photo {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.fba-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform 1s var(--gd-ease),
        filter .6s ease;
}
/* =========================================================
   BEFORE
========================================================= */
.fba-before {
    left: 0;
    width: 56%;
    z-index: 2;
    clip-path:
        polygon(0 0,
            100% 0,
            82% 100%,
            0 100%);
}
.fba-before img {
    filter:
        saturate(.72) brightness(.82);
}
/* subtle overlay */
.fba-before::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(15, 23, 34, .34),
            transparent 65%);
    pointer-events: none;
}
/* =========================================================
   AFTER
========================================================= */
.fba-after {
    right: 0;
    width: 56%;
    z-index: 1;
}
.fba-after img {
    filter:
        saturate(1.05) brightness(1.04);
}
.fba-after::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(270deg,
            rgba(15, 23, 34, .15),
            transparent 60%);
    pointer-events: none;
}
/* =========================================================
   LABELS
========================================================= */
.fba-label {
    position: absolute;
    z-index: 7;
    bottom: 35px;
    min-width: 150px;
    padding: 16px 20px;
}
.fba-label small {
    display: block;
    margin-bottom: 4px;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.fba-label strong {
    display: block;
    
    font-size: 29px;
    line-height: 1;
}
/* BEFORE LABEL */
.fba-label-before {
    left: 30px;
    color: var(--gd-white);
    background:
        rgba(15, 23, 34, .90);
    border-left:
        4px solid var(--gd-orange);
}
.fba-label-before small {
    color: var(--gd-orange);
}
/* AFTER LABEL */
.fba-label-after {
    right: 30px;
    color: var(--gd-dark);
    background: var(--gd-orange);
}
.fba-label-after small {
    color:
        rgba(15, 23, 34, .65);
}
/* =========================================================
   DIAGONAL DIVIDER
========================================================= */
.fba-divider {
    position: absolute;
    left: 50%;
    top: -8%;
    z-index: 8;
    width: 4px;
    height: 116%;
    background: var(--gd-orange);
    transform:
        rotate(7deg);
    box-shadow:
        0 0 0 5px rgba(244, 160, 30, .13);
}
.fba-divider span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--gd-dark);
    background: var(--gd-orange);
    border:
        6px solid var(--gd-white);
    border-radius: 50%;
    box-shadow:
        0 15px 35px rgba(15, 23, 34, .25);
    transform:
        translate(-50%, -50%) rotate(-7deg);
}
.fba-divider span i {
    font-size: 10px;
}
/* =========================================================
   CORNER CODE
========================================================= */
.fba-corner-code {
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: 8;
    padding:
        8px 12px;
    color: var(--gd-white);
    background:
        rgba(15, 23, 34, .82);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   IMAGE HOVER
========================================================= */
.fba-stage:hover .fba-photo img {
    transform: scale(1.025);
}
.fba-stage:hover .fba-after img {
    filter:
        saturate(1.12) brightness(1.07);
}
/* =========================================================
   BOTTOM
========================================================= */
.fba-bottom {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        .8fr 1.3fr .35fr;
    gap: 45px;
    align-items: center;
    padding:
        35px 38px;
    background: var(--gd-white);
    border:
        1px solid rgba(24, 34, 49, .10);
    border-top: 0;
    box-shadow:
        0 20px 45px rgba(24, 34, 49, .06);
}
/* bottom heading */
.fba-bottom-title span {
    display: block;
    color: #8a939a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.fba-bottom-title strong {
    display: block;
    margin-top: 5px;
    color: var(--gd-deep);
    
    font-size: 22px;
}
/* bottom copy */
.fba-bottom-copy {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.fba-orange-line {
    width: 45px;
    height: 3px;
    margin-top: 8px;
    flex: 0 0 45px;
    background: var(--gd-orange);
}
.fba-bottom-copy p {
    margin: 0;
    color: #6b7680;
    font-size: 11px;
    line-height: 1.75;
}
/* brand */
.fba-bottom-brand {
    padding-left: 20px;
    border-left:
        1px solid rgba(24, 34, 49, .12);
}
.fba-bottom-brand small {
    display: block;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.fba-bottom-brand strong {
    display: block;
    margin-top: 4px;
    color: var(--gd-navy);
    font-size: 11px;
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .fba-section {
        padding: 85px 0;
    }
    .fba-stage {
        height: 520px;
    }
    .fba-bottom {
        grid-template-columns:
            1fr 1fr;
    }
    .fba-bottom-brand {
        grid-column:
            1 / -1;
        padding:
            18px 0 0;
        border-left: 0;
        border-top:
            1px solid rgba(24, 34, 49, .1);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .fba-section {
        padding: 65px 0;
    }
    .fba-title {
        font-size:
            clamp(52px, 16vw, 72px);
        letter-spacing: -4px;
    }
    .fba-stage {
        height: auto;
        display: grid;
        gap: 4px;
        background:
            var(--gd-orange);
        box-shadow:
            0 20px 45px rgba(24, 34, 49, .12);
    }
    .fba-photo,
    .fba-before,
    .fba-after {
        position: relative;
        inset: auto;
        width: 100%;
        height: 320px;
        clip-path: none;
    }
    .fba-divider {
        display: none;
    }
    .fba-label {
        bottom: 18px;
        min-width: 125px;
    }
    .fba-label-before {
        left: 18px;
    }
    .fba-label-after {
        right: 18px;
    }
    .fba-corner-code {
        display: none;
    }
    .fba-bottom {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 22px;
    }
    .fba-bottom-brand {
        grid-column: auto;
    }
}
/* =========================================================
   BEFORE & AFTER
   FULL WIDTH TAB STYLE
========================================================= */
.bat-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        var(--gd-dark);
}
/* =========================================================
   STAGE
========================================================= */
.bat-stage {
    position: relative;
    min-height: 800px;
    overflow: hidden;
}
/* =========================================================
   AFTER BACKGROUND
========================================================= */
.bat-after {
    position: absolute;
    inset: 0;
}
.bat-after img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition:
        transform 1.1s var(--gd-ease);
}
.bat-stage:hover .bat-after img {
    transform:
        scale(1.025);
}
.bat-after-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(15, 23, 34, .88) 0%,
            rgba(15, 23, 34, .62) 25%,
            rgba(15, 23, 34, .20) 55%,
            rgba(15, 23, 34, .10) 100%),
        linear-gradient(0deg,
            rgba(15, 23, 34, .38),
            transparent 55%);
}
/* =========================================================
   HEADING
========================================================= */
.bat-heading {
    position: absolute;
    left: 5%;
    top: 55px;
    z-index: 10;
    max-width: 600px;
}
.bat-kicker {
    display: block;
    margin-bottom: 14px;
    color:
        var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.bat-heading h2 {
    margin: 0;
    color:
        var(--gd-white);
    
    font-size:
        clamp(56px, 6.7vw, 105px);
    line-height: .83;
    letter-spacing: -5px;
}
.bat-heading h2 strong {
    color:
        var(--gd-orange);
}
/* =========================================================
   BEFORE TAB
========================================================= */
.bat-before-tab {
    position: absolute;
    left: 4%;
    top: 308px;
    z-index: 12;
    width: min(620px, 45vw);
    background:
        var(--gd-white);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .32);
    clip-path:
        polygon(0 0,
            92% 0,
            100% 13%,
            100% 100%,
            8% 100%,
            0 87%);
    transition:
        transform .5s var(--gd-ease);
}
.bat-before-tab:hover {
    transform:
        translateX(18px);
}
/* =========================================================
   BEFORE PHOTO
========================================================= */
.bat-before-photo {
    position: relative;
    height: 365px;
    overflow: hidden;
}
.bat-before-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter:
        saturate(.65) brightness(.78);
    transition:
        transform .8s var(--gd-ease);
}
.bat-before-tab:hover .bat-before-photo img {
    transform:
        scale(1.035);
}
.bat-before-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(15, 23, 34, .18),
            rgba(15, 23, 34, .42));
}
/* =========================================================
   BEFORE LABEL
========================================================= */
.bat-before-label {
    position: relative;
    padding:
        20px 30px 25px;
    border-top:
        5px solid var(--gd-orange);
}
.bat-before-label small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.bat-before-label strong {
    color:
        var(--gd-deep);
    
    font-size: 30px;
}
/* =========================================================
   SLIDER
========================================================= */
.bat-slider {
    position: absolute;
    left: 48%;
    top: 225px;
    bottom: 80px;
    z-index: 15;
    width: 70px;
}
.bat-slider-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background:
        var(--gd-orange);
    transform:
        translateX(-50%);
    box-shadow:
        0 0 0 5px rgba(244, 160, 30, .10);
}
.bat-slider-handle {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border:
        7px solid rgba(255, 255, 255, .96);
    border-radius: 50%;
    transform:
        translate(-50%, -50%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .26);
}
.bat-slider-handle i {
    font-size: 10px;
}
/* =========================================================
   AFTER LABEL
========================================================= */
.bat-after-label {
    position: absolute;
    right: 5%;
    top: 60px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 13px;
    padding:
        12px 17px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
}
.bat-after-label>span {
    
    font-size: 30px;
}
.bat-after-label small {
    display: block;
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.bat-after-label strong {
    display: block;
    margin-top: 2px;
    
    font-size: 19px;
}
/* =========================================================
   RESULT COPY
========================================================= */
.bat-result {
    position: absolute;
    right: 5%;
    bottom: 65px;
    z-index: 10;
    width: min(500px, 38vw);
    padding:
        34px 36px;
    color:
        var(--gd-white);
    background:
        rgba(24, 34, 49, .90);
    border:
        1px solid rgba(255, 255, 255, .12);
    backdrop-filter:
        blur(14px);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, .23);
}
.bat-result::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 5px;
    background:
        var(--gd-orange);
}
.bat-result small {
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.bat-result h3 {
    margin:
        12px 0 17px;
    
    font-size:
        clamp(36px, 3.8vw, 58px);
    line-height: .93;
    letter-spacing: -3px;
}
.bat-result h3 span {
    display: block;
    color:
        var(--gd-orange);
}
.bat-result p {
    max-width: 430px;
    margin: 0;
    color:
        rgba(255, 255, 255, .60);
    font-size: 12px;
    line-height: 1.8;
}
/* =========================================================
   SMALL CORNER CODE
========================================================= */
.bat-code {
    position: absolute;
    right: 5%;
    bottom: 25px;
    z-index: 10;
    color:
        rgba(255, 255, 255, .48);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .bat-stage {
        min-height: 760px;
    }
    .bat-before-tab {
        width: 48%;
    }
    .bat-slider {
        left: 47%;
    }
    .bat-result {
        width: 42%;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .bat-stage {
        min-height: auto;
        display: flex;
        flex-direction: column;
        background:
            var(--gd-dark);
    }
    .bat-heading {
        position: relative;
        inset: auto;
        order: 1;
        padding:
            50px 20px 35px;
        background:
            var(--gd-dark);
    }
    .bat-heading h2 {
        font-size:
            clamp(50px, 15vw, 70px);
        letter-spacing: -4px;
    }
    .bat-after {
        position: relative;
        order: 2;
        height: 500px;
    }
    .bat-before-tab {
        position: relative;
        inset: auto;
        order: 3;
        width:
            calc(100% - 36px);
        margin:
            -85px 18px 0;
        clip-path:
            polygon(0 0,
                94% 0,
                100% 8%,
                100% 100%,
                6% 100%,
                0 92%);
    }
    .bat-before-photo {
        height: 285px;
    }
    .bat-after-label {
        top: 20px;
        right: 18px;
    }
    .bat-result {
        left: 18px;
        right: 18px;
        bottom: 22px;
        width: auto;
        padding:
            28px 24px;
    }
    .bat-slider,
    .bat-code {
        display: none;
    }
}
/* =========================================================
   INSTALLATION / REPLACEMENT / MAINTENANCE
========================================================= */
.irm-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: var(--gd-dark);
    background:
        linear-gradient(rgba(64, 81, 111, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(64, 81, 111, .035) 1px,
            transparent 1px),
        #f5f6f4;
    background-size: 54px 54px;
}
/* background decoration */
.irm-section::before {
    content: "";
    position: absolute;
    right: -100px;
    top: 60px;
    width: 280px;
    height: 280px;
    border: 55px solid rgba(244, 160, 30, .08);
    transform: rotate(45deg);
}
/* =========================================================
   HEADER
========================================================= */
.irm-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 65px;
}
.irm-kicker {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.3px;
    text-transform: uppercase;
}
.irm-kicker::before {
    content: "";
    width: 46px;
    height: 2px;
    background: var(--gd-orange);
}
.irm-head h2 {
    margin: 0;
    color: var(--gd-deep);
    
    font-size: clamp(58px, 7vw, 108px);
    line-height: .82;
    letter-spacing: -6px;
}
.irm-head h2 span {
    display: block;
    color: var(--gd-orange);
}
/* right header */
.irm-head-side {
    position: relative;
    padding-left: 28px;
    border-left: 3px solid var(--gd-orange);
}
.irm-head-no {
    position: absolute;
    right: 0;
    bottom: 0;
    color: rgba(24, 34, 49, .055);
    
    font-size: 110px;
    line-height: .7;
}
.irm-head-side p {
    position: relative;
    z-index: 2;
    max-width: 410px;
    margin: 0;
    color: #69747d;
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   SERVICES
========================================================= */
.irm-services {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(24, 34, 49, .14);
    border-bottom: 1px solid rgba(24, 34, 49, .14);
}
/* =========================================================
   SERVICE
========================================================= */
.irm-service {
    position: relative;
    min-height: 410px;
    padding: 42px 35px 35px;
    overflow: hidden;
    border-right: 1px solid rgba(24, 34, 49, .12);
    transition:
        background .4s var(--gd-ease),
        transform .4s var(--gd-ease);
}
.irm-service:last-child {
    border-right: 0;
}
/* subtle alternate block */
.irm-service-middle {
    background: rgba(64, 81, 111, .045);
}
/* large number */
.irm-big-no {
    position: absolute;
    right: -5px;
    top: 5px;
    color: rgba(64, 81, 111, .055);
    
    font-size: 145px;
    line-height: 1;
    transition:
        color .4s var(--gd-ease),
        transform .4s var(--gd-ease);
}
/* top */
.irm-service-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 45px;
}
.irm-mini {
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    white-space: nowrap;
}
.irm-line {
    flex: 1;
    height: 1px;
    background: rgba(24, 34, 49, .16);
}
.irm-service-top i {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 43px;
    color: var(--gd-orange);
    border: 1px solid rgba(24, 34, 49, .16);
    font-size: 14px;
    transform: rotate(45deg);
    transition: .4s var(--gd-ease);
}
.irm-service-top i::before {
    transform: rotate(-45deg);
}
/* title */
.irm-service h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 20px;
    color: var(--gd-deep);
    
    font-size: clamp(30px, 3vw, 45px);
    letter-spacing: -2px;
}
/* text */
.irm-service p {
    position: relative;
    z-index: 2;
    max-width: 390px;
    margin: 0;
    color: #68747d;
    font-size: 12px;
    line-height: 1.85;
}
/* detail labels */
.irm-detail {
    position: absolute;
    left: 35px;
    right: 35px;
    bottom: 30px;
    z-index: 2;
    display: flex;
    gap: 8px;
}
.irm-detail span {
    padding: 7px 10px;
    color: var(--gd-navy);
    border: 1px solid rgba(64, 81, 111, .16);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
/* =========================================================
   SERVICE HOVER
========================================================= */
.irm-service:hover {
    z-index: 4;
    background: var(--gd-deep);
    transform: translateY(-8px);
    box-shadow:
        0 25px 50px rgba(24, 34, 49, .14);
}
.irm-service:hover .irm-big-no {
    color: rgba(244, 160, 30, .09);
    transform: translateX(-10px);
}
.irm-service:hover h3 {
    color: var(--gd-white);
}
.irm-service:hover p {
    color: rgba(255, 255, 255, .6);
}
.irm-service:hover .irm-line {
    background: rgba(255, 255, 255, .15);
}
.irm-service:hover .irm-service-top i {
    color: var(--gd-dark);
    background: var(--gd-orange);
    border-color: var(--gd-orange);
}
.irm-service:hover .irm-detail span {
    color: var(--gd-gold);
    border-color: rgba(255, 255, 255, .13);
}
/* =========================================================
   CONTACT / WARNING RAIL
========================================================= */
.irm-contact {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        80px 1fr 2fr;
    align-items: stretch;
    margin-top: 45px;
    background: var(--gd-deep);
    box-shadow:
        0 25px 55px rgba(24, 34, 49, .13);
}
/* exclamation */
.irm-contact-mark {
    display: grid;
    place-items: center;
    background: var(--gd-orange);
}
.irm-contact-mark span {
    color: var(--gd-dark);
    
    font-size: 45px;
    font-weight: 700;
}
/* title */
.irm-contact-title {
    padding: 23px 28px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}
.irm-contact-title small {
    display: block;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
.irm-contact-title strong {
    display: block;
    margin-top: 5px;
    color: var(--gd-white);
    
    font-size: 18px;
}
/* symptoms */
.irm-symptoms {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.irm-symptoms span {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, .66);
    border-right: 1px solid rgba(255, 255, 255, .08);
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
    transition: .3s;
}
.irm-symptoms span:last-child {
    border-right: 0;
}
.irm-symptoms i {
    color: var(--gd-orange);
    font-size: 15px;
}
.irm-symptoms span:hover {
    color: var(--gd-dark);
    background: var(--gd-orange);
}
.irm-symptoms span:hover i {
    color: var(--gd-dark);
}
/* =========================================================
   FINAL CTA
========================================================= */
.irm-final {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        60px 1fr auto;
    gap: 25px;
    align-items: center;
    padding: 32px 0 0;
}
.irm-final-line {
    height: 3px;
    background: var(--gd-orange);
}
.irm-final p {
    max-width: 750px;
    margin: 0;
    color: #68747d;
    font-size: 12px;
    line-height: 1.75;
}
.irm-final p strong {
    color: var(--gd-deep);
}
/* button */
.irm-btn {
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--gd-white);
    background: var(--gd-navy);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: .35s var(--gd-ease);
}
.irm-btn span {
    color: var(--gd-orange);
    font-size: 16px;
}
.irm-btn:hover {
    color: var(--gd-dark);
    background: var(--gd-orange);
    transform: translateY(-3px);
}
.irm-btn:hover span {
    color: var(--gd-dark);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .irm-section {
        padding: 85px 0;
    }
    .irm-head {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .irm-services {
        grid-template-columns: 1fr;
    }
    .irm-service {
        min-height: 330px;
        border-right: 0;
        border-bottom:
            1px solid rgba(24, 34, 49, .12);
    }
    .irm-contact {
        grid-template-columns:
            70px 1fr;
    }
    .irm-symptoms {
        grid-column: 1 / -1;
        grid-template-columns:
            repeat(3, 1fr);
    }
    .irm-final {
        grid-template-columns:
            40px 1fr;
    }
    .irm-btn {
        grid-column: 2;
        justify-self: start;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .irm-section {
        padding: 65px 0;
    }
    .irm-head h2 {
        font-size:
            clamp(48px, 15vw, 68px);
        letter-spacing: -4px;
    }
    .irm-head-side {
        padding-left: 20px;
    }
    .irm-service {
        min-height: auto;
        padding:
            35px 22px 30px;
    }
    .irm-service-top {
        margin-bottom: 30px;
    }
    .irm-service p {
        margin-bottom: 28px;
    }
    .irm-detail {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        flex-wrap: wrap;
    }
    .irm-big-no {
        font-size: 110px;
    }
    /* warning */
    .irm-contact {
        grid-template-columns:
            55px 1fr;
    }
    .irm-contact-title {
        padding:
            20px 17px;
    }
    .irm-symptoms {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .irm-symptoms span {
        min-height: 80px;
    }
    /* final */
    .irm-final {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .irm-final-line {
        width: 55px;
    }
    .irm-btn {
        grid-column: auto;
        width: 100%;
    }
}
/* =========================================================
   STAIR STEP CONCEPT
========================================================= */
.stp-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: var(--gd-dark);
    background:
        linear-gradient(rgba(64, 81, 111, .03) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(64, 81, 111, .03) 1px,
            transparent 1px),
        #f4f5f3;
    background-size:
        56px 56px;
}
/* =========================================================
   BACKGROUND NUMBER
========================================================= */
.stp-section::before {
    content: "03";
    position: absolute;
    right: -20px;
    top: 40px;
    color:
        rgba(24, 34, 49, .025);
    
    font-size:
        clamp(180px, 24vw, 420px);
    line-height: .8;
}
/* =========================================================
   HEADER
========================================================= */
.stp-head {
    position: relative;
    z-index: 5;
    max-width: 900px;
    margin-bottom: 85px;
}
.stp-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color:
        var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.stp-kicker::before {
    content: "";
    width: 45px;
    height: 2px;
    background:
        var(--gd-orange);
}
.stp-head h2 {
    margin: 0;
    color:
        var(--gd-deep);
    
    font-size:
        clamp(54px, 6.2vw, 100px);
    line-height: .86;
    letter-spacing: -5px;
}
.stp-head h2 strong {
    display: block;
    color:
        var(--gd-orange);
}
.stp-head p {
    max-width: 650px;
    margin: 27px 0 0;
    color:
        #68747c;
    font-size: 13px;
    line-height: 1.8;
}
/* =========================================================
   LAYOUT
========================================================= */
.stp-layout {
    position: relative;
    z-index: 4;
    min-height: 640px;
}
/* =========================================================
   ORANGE CONNECTING RAIL
========================================================= */
.stp-rail {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 48%;
    height: 5px;
    background:
        var(--gd-orange);
    transform:
        rotate(-7deg);
    transform-origin:
        center;
    box-shadow:
        0 0 0 7px rgba(244, 160, 30, .08);
}
/* =========================================================
   CARD
========================================================= */
.stp-card {
    position: absolute;
    width: 31%;
    min-height: 330px;
    padding:
        38px 32px 30px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .94);
    border:
        1px solid rgba(24, 34, 49, .10);
    box-shadow:
        0 25px 55px rgba(24, 34, 49, .09);
    transition:
        .45s var(--gd-ease);
}
/* ORANGE TOP */
.stp-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 6px;
    background:
        var(--gd-orange);
    transition:
        width .4s var(--gd-ease);
}
.stp-card:hover::before {
    width: 100%;
}
/* =========================================================
   STAIR POSITIONS
========================================================= */
.stp-card-one {
    left: 0;
    bottom: 15px;
}
.stp-card-two {
    left: 34.5%;
    top: 145px;
    color:
        var(--gd-white);
    background:
        var(--gd-deep);
    transform:
        translateY(-40px);
}
.stp-card-three {
    right: 0;
    top: 15px;
    transform:
        translateY(-5px);
}
/* =========================================================
   NUMBER
========================================================= */
.stp-no {
    position: absolute;
    right: 15px;
    top: 12px;
    color:
        rgba(24, 34, 49, .06);
    
    font-size:
        88px;
    line-height: 1;
}
.stp-card-two .stp-no {
    color:
        rgba(255, 255, 255, .05);
}
/* =========================================================
   CONTENT
========================================================= */
.stp-card-head {
    position: relative;
    z-index: 2;
    margin-bottom: 23px;
}
.stp-card-head small {
    display: block;
    margin-bottom: 8px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
.stp-card-head h3 {
    margin: 0;
    color:
        var(--gd-deep);
    
    font-size:
        clamp(31px, 3vw, 46px);
    letter-spacing: -2px;
}
.stp-card-two .stp-card-head h3 {
    color:
        var(--gd-white);
}
.stp-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color:
        #68747d;
    font-size: 11px;
    line-height: 1.85;
}
.stp-card-two p {
    color:
        rgba(255, 255, 255, .62);
}
/* =========================================================
   CODE
========================================================= */
.stp-code {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 25px;
    padding-top: 13px;
    border-top:
        1px solid rgba(24, 34, 49, .12);
    color:
        var(--gd-navy);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.stp-card-two .stp-code {
    color:
        var(--gd-gold);
    border-color:
        rgba(255, 255, 255, .12);
}
/* =========================================================
   HOVER
========================================================= */
.stp-card:hover {
    transform:
        translateY(-10px);
    box-shadow:
        0 35px 75px rgba(24, 34, 49, .15);
}
.stp-card-two:hover {
    transform:
        translateY(-50px) scale(1.015);
}
/* =========================================================
   WARNING BAR
========================================================= */
.stp-warning {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns:
        300px 1fr;
    margin-top: 55px;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
}
.stp-warning-title {
    padding:
        25px 30px;
    background:
        var(--gd-navy);
    border-left:
        6px solid var(--gd-orange);
}
.stp-warning-title small {
    display: block;
    margin-bottom: 6px;
    color:
        var(--gd-gold);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.stp-warning-title strong {
    
    font-size: 20px;
}
.stp-warning-list {
    display: grid;
    grid-template-columns:
        repeat(6, 1fr);
}
.stp-warning-list span {
    min-height: 90px;
    display: grid;
    place-items: center;
    color:
        rgba(255, 255, 255, .63);
    border-right:
        1px solid rgba(255, 255, 255, .08);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:
        .3s;
}
.stp-warning-list span:hover {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
}
/* =========================================================
   CTA
========================================================= */
.stp-cta {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;
    gap: 35px;
    margin-top: 30px;
    padding-top: 28px;
    border-top:
        1px solid rgba(24, 34, 49, .12);
}
.stp-cta p {
    max-width: 760px;
    margin: 0;
    color:
        #68747d;
    font-size: 12px;
    line-height: 1.75;
}
.stp-cta p strong {
    color:
        var(--gd-deep);
}
.stp-cta a {
    min-height: 52px;
    padding:
        0 22px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color:
        var(--gd-white);
    background:
        var(--gd-deep);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    transition:
        .35s var(--gd-ease);
}
.stp-cta a span {
    color:
        var(--gd-orange);
}
.stp-cta a:hover {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    transform:
        translateY(-3px);
}
.stp-cta a:hover span {
    color:
        var(--gd-dark);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .stp-section {
        padding:
            85px 0;
    }
    .stp-layout {
        min-height: auto;
        display: grid;
        grid-template-columns:
            1fr 1fr;
        gap: 18px;
    }
    .stp-rail {
        display: none;
    }
    .stp-card,
    .stp-card-one,
    .stp-card-two,
    .stp-card-three {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 310px;
        transform: none;
    }
    .stp-card-three {
        grid-column:
            1 / -1;
        max-width: 520px;
        justify-self: center;
    }
    .stp-card-two:hover,
    .stp-card:hover {
        transform:
            translateY(-7px);
    }
    .stp-warning {
        grid-template-columns: 1fr;
    }
    .stp-warning-list {
        grid-template-columns:
            repeat(3, 1fr);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .stp-section {
        padding:
            65px 0;
    }
    .stp-head h2 {
        font-size:
            clamp(46px, 14vw, 65px);
        letter-spacing: -4px;
    }
    .stp-layout {
        grid-template-columns: 1fr;
    }
    .stp-card-three {
        grid-column: auto;
        max-width: none;
    }
    .stp-card {
        min-height: 300px;
        padding:
            30px 22px;
    }
    .stp-code {
        left: 22px;
        right: 22px;
    }
    .stp-warning-list {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .stp-cta {
        grid-template-columns: 1fr;
    }
    .stp-cta a {
        width: 100%;
        justify-content:
            space-between;
    }
}
/* =========================================================
   DARK FAQ - STACKED SLABS
========================================================= */
.dfq-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: var(--gd-white);
    background:
        radial-gradient(circle at 85% 15%,
            rgba(244, 160, 30, .08),
            transparent 28%),
        linear-gradient(135deg,
            var(--gd-dark),
            var(--gd-deep));
}
/* giant background text */
.dfq-section::before {
    content: "FAQ";
    position: absolute;
    left: -35px;
    bottom: -55px;
    color: rgba(255, 255, 255, .025);
    
    font-size: clamp(170px, 24vw, 380px);
    line-height: .75;
    pointer-events: none;
}
/* =========================================================
   LEFT
========================================================= */
.dfq-intro {
    position: sticky;
    top: 40px;
    max-width: 430px;
}
.dfq-kicker {
    display: block;
    margin-bottom: 18px;
    color: var(--gd-orange);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.dfq-intro h2 {
    margin: 0;
    
    font-size: clamp(52px, 5.5vw, 86px);
    line-height: .87;
    letter-spacing: -4px;
}
.dfq-intro h2 strong {
    display: block;
    color: var(--gd-orange);
}
.dfq-intro p {
    max-width: 390px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: 13px;
    line-height: 1.8;
}
.dfq-intro-line {
    width: 70px;
    height: 3px;
    margin-top: 30px;
    background: var(--gd-orange);
}
.dfq-count {
    display: block;
    margin-top: 14px;
    color: rgba(255, 255, 255, .42);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
/* =========================================================
   STACK
========================================================= */
.dfq-stack {
    position: relative;
    z-index: 4;
}
/* =========================================================
   ITEM
========================================================= */
.dfq-item {
    position: relative;
    min-height: 180px;
    margin-bottom: 16px;
    padding:
        30px 35px 30px 100px;
    overflow: hidden;
    background:
        rgba(255, 255, 255, .035);
    border:
        1px solid rgba(255, 255, 255, .10);
    backdrop-filter:
        blur(8px);
    transition:
        transform .4s var(--gd-ease),
        background .4s var(--gd-ease),
        border-color .4s var(--gd-ease);
}
.dfq-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gd-orange);
}
/* offset style */
.dfq-item-offset {
    margin-left: 45px;
}
/* orange highlight */
.dfq-item-accent {
    background:
        linear-gradient(135deg,
            rgba(244, 160, 30, .96),
            rgba(255, 198, 91, .88));
    border-color: transparent;
}
.dfq-item-accent::before {
    background: var(--gd-dark);
}
/* =========================================================
   NUMBER
========================================================= */
.dfq-number {
    position: absolute;
    left: 24px;
    top: 22px;
    color:
        rgba(255, 255, 255, .14);
    
    font-size: 48px;
    line-height: 1;
}
.dfq-item-accent .dfq-number {
    color:
        rgba(15, 23, 34, .18);
}
/* =========================================================
   CONTENT
========================================================= */
.dfq-content small {
    display: block;
    margin-bottom: 8px;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
.dfq-item-accent .dfq-content small {
    color:
        rgba(15, 23, 34, .65);
}
.dfq-content h3 {
    margin: 0 0 14px;
    color: var(--gd-white);
    
    font-size:
        clamp(20px, 2vw, 30px);
    line-height: 1.3;
}
.dfq-item-accent .dfq-content h3 {
    color: var(--gd-dark);
}
.dfq-content p {
    max-width: 680px;
    margin: 0;
    color:
        rgba(255, 255, 255, .58);
    font-size: 12px;
    line-height: 1.8;
}
.dfq-content p strong {
    color: var(--gd-white);
}
.dfq-item-accent .dfq-content p,
.dfq-item-accent .dfq-content p strong {
    color: var(--gd-dark);
}
/* =========================================================
   HOVER
========================================================= */
.dfq-item:hover {
    transform:
        translateX(-8px);
    background:
        rgba(255, 255, 255, .065);
    border-color:
        rgba(244, 160, 30, .35);
}
.dfq-item-offset:hover {
    transform:
        translateX(-12px);
}
.dfq-item-accent:hover {
    background:
        var(--gd-orange);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .dfq-section {
        padding: 85px 0;
    }
    .dfq-intro {
        position: relative;
        top: auto;
        max-width: 700px;
        margin-bottom: 20px;
    }
    .dfq-item-offset {
        margin-left: 0;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .dfq-section {
        padding: 65px 0;
    }
    .dfq-intro h2 {
        font-size:
            clamp(46px, 14vw, 65px);
        letter-spacing: -4px;
    }
    .dfq-item {
        min-height: auto;
        padding:
            28px 18px 28px 62px;
    }
    .dfq-number {
        left: 16px;
        top: 22px;
        font-size: 34px;
    }
    .dfq-content h3 {
        font-size: 18px;
    }
    .dfq-content p {
        font-size: 12px;
    }
}
/* =========================================================
   FAQ MECHANICAL GARAGE DOOR VISUAL
========================================================= */
.dfq-mechanic {
    position: relative;
    width: 100%;
    max-width: 390px;
    margin-top: 38px;
}
/* =========================================================
   TOP DATA
========================================================= */
.dfq-mech-top {
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dfq-mech-top span,
.dfq-mech-top small {
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.dfq-mech-top span {
    color:
        rgba(255, 255, 255, .45);
}
.dfq-mech-top small {
    color:
        var(--gd-orange);
}
.dfq-mech-top>i {
    height: 1px;
    background:
        rgba(255, 255, 255, .1);
}
/* =========================================================
   MACHINE
========================================================= */
.dfq-mech-machine {
    position: relative;
    height: 230px;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        rgba(255, 255, 255, .025);
    background-size:
        28px 28px;
    border:
        1px solid rgba(255, 255, 255, .09);
}
/* orange corner */
.dfq-mech-machine::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 55px;
    height: 4px;
    background:
        var(--gd-orange);
}
/* little technical corner */
.dfq-mech-machine::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: 13px;
    width: 8px;
    height: 8px;
    border-right:
        2px solid var(--gd-orange);
    border-bottom:
        2px solid var(--gd-orange);
}
/* =========================================================
   SPRING
========================================================= */
.dfq-mech-spring {
    position: absolute;
    left: 50%;
    top: 26px;
    width: 58%;
    height: 20px;
    transform:
        translateX(-50%);
}
.dfq-mech-spring::before,
.dfq-mech-spring::after {
    content: "";
    position: absolute;
    top: 9px;
    width: 15px;
    height: 2px;
    background:
        rgba(255, 255, 255, .25);
}
.dfq-mech-spring::before {
    left: -15px;
}
.dfq-mech-spring::after {
    right: -15px;
}
.dfq-mech-spring span {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(115deg,
            transparent 0 5px,
            var(--gd-orange) 5px 7px,
            transparent 7px 12px);
    opacity: .8;
    animation:
        dfqSpring 3.8s ease-in-out infinite;
}
@keyframes dfqSpring {
    0%,
    100% {
        transform:
            scaleX(.94);
        opacity: .55;
    }
    50% {
        transform:
            scaleX(1);
        opacity: 1;
    }
}
/* =========================================================
   TRACKS
========================================================= */
.dfq-mech-track {
    position: absolute;
    top: 57px;
    bottom: 20px;
    width: 7px;
    border:
        1px solid rgba(255, 255, 255, .18);
}
.dfq-mech-track-left {
    left: 18%;
}
.dfq-mech-track-right {
    right: 18%;
}
.dfq-mech-track i {
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    background:
        var(--gd-dark);
    border:
        2px solid var(--gd-orange);
    border-radius: 50%;
    transform:
        translate(-50%, -50%);
    animation:
        dfqRoller 4.5s ease-in-out infinite;
}
.dfq-mech-track i:nth-child(1) {
    top: 20%;
}
.dfq-mech-track i:nth-child(2) {
    top: 50%;
    animation-delay: .15s;
}
.dfq-mech-track i:nth-child(3) {
    top: 80%;
    animation-delay: .3s;
}
@keyframes dfqRoller {
    0%,
    100% {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }
    50% {
        transform:
            translate(-50%, -50%) rotate(180deg);
    }
}
/* =========================================================
   DOOR
========================================================= */
.dfq-mech-door {
    position: absolute;
    left: calc(18% + 13px);
    right: calc(18% + 13px);
    bottom: 20px;
    height: 142px;
    display: grid;
    grid-template-rows:
        repeat(4, 1fr);
    border:
        1px solid rgba(255, 255, 255, .18);
    background:
        rgba(64, 81, 111, .18);
    animation:
        dfqDoorMove 6s var(--gd-ease) infinite;
}
.dfq-mech-door span {
    position: relative;
    border-bottom:
        1px solid rgba(255, 255, 255, .12);
}
.dfq-mech-door span:last-child {
    border-bottom: 0;
}
/* panel detail */
.dfq-mech-door span::before {
    content: "";
    position: absolute;
    inset: 7px 10px;
    border:
        1px solid rgba(255, 255, 255, .055);
}
@keyframes dfqDoorMove {
    0%,
    20%,
    100% {
        transform:
            translateY(0);
    }
    45%,
    65% {
        transform:
            translateY(-38px);
    }
}
/* =========================================================
   FLOOR
========================================================= */
.dfq-mech-floor {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 19px;
    height: 1px;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent);
}
/* =========================================================
   SCANNER
========================================================= */
.dfq-mech-scan {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 62px;
    height: 1px;
    background:
        var(--gd-orange);
    box-shadow:
        0 0 12px rgba(244, 160, 30, .8);
    opacity: 0;
    animation:
        dfqScan 4s ease-in-out infinite;
}
@keyframes dfqScan {
    0% {
        top: 62px;
        opacity: 0;
    }
    15% {
        opacity: .9;
    }
    75% {
        opacity: .5;
    }
    90%,
    100% {
        top: 198px;
        opacity: 0;
    }
}
/* =========================================================
   BOTTOM STATUS
========================================================= */
.dfq-mech-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.dfq-mech-bottom span {
    display: flex;
    align-items: center;
    gap: 8px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.dfq-mech-bottom span i {
    width: 6px;
    height: 6px;
    background:
        var(--gd-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgba(244, 160, 30, .08);
    animation:
        dfqPulse 1.8s ease infinite;
}
@keyframes dfqPulse {
    50% {
        box-shadow:
            0 0 0 9px rgba(244, 160, 30, 0);
    }
}
.dfq-mech-bottom b {
    color:
        var(--gd-orange);
    
    font-size: 11px;
    letter-spacing: 2px;
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:991.98px) {
    .dfq-mechanic {
        max-width: 520px;
        margin-top: 30px;
    }
}
@media(max-width:575.98px) {
    .dfq-mech-machine {
        height: 205px;
    }
    .dfq-mech-door {
        height: 125px;
    }
    .dfq-mech-scan {
        animation: none;
        opacity: .35;
    }
}
@media(prefers-reduced-motion:reduce) {
    .dfq-mech-door,
    .dfq-mech-spring span,
    .dfq-mech-track i,
    .dfq-mech-scan,
    .dfq-mech-bottom span i {
        animation: none;
    }
}
/* =========================================================
   SERVICE DISPATCH CTA
========================================================= */
.fcta-section {
    position: relative;
    padding: 95px 0;
    overflow: hidden;
    color: var(--gd-deep);
    background:
        linear-gradient(rgba(64, 81, 111, .035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(64, 81, 111, .035) 1px,
            transparent 1px),
        #f4f5f3;
    background-size:
        46px 46px;
}
/* background typography */
.fcta-section::before {
    content: "SERVICE";
    position: absolute;
    right: -30px;
    top: -25px;
    color: rgba(24, 34, 49, .025);
    font-size:
        clamp(120px, 18vw, 290px);
    font-weight: 900;
    letter-spacing: -12px;
    line-height: 1;
    pointer-events: none;
}
/* =========================================================
   MAIN SHELL
========================================================= */
.fcta-shell {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        125px minmax(0, 1fr) 330px;
    min-height: 420px;
    overflow: hidden;
    background: var(--gd-white);
    border:
        1px solid rgba(24, 34, 49, .1);
    box-shadow:
        0 30px 70px rgba(24, 34, 49, .09);
}
/* orange top line */
.fcta-shell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 36%;
    height: 6px;
    background: var(--gd-orange);
}
/* =========================================================
   INDEX
========================================================= */
.fcta-index {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--gd-white);
    background: var(--gd-navy);
}
.fcta-index::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    border:
        1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    transform:
        translate(-50%, -50%);
}
.fcta-index span,
.fcta-index small {
    position: relative;
    z-index: 2;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.fcta-index span {
    color: var(--gd-gold);
}
.fcta-index strong {
    position: relative;
    z-index: 2;
    margin: 5px 0;
    color: var(--gd-white);
    
    font-size: 64px;
    line-height: 1;
}
.fcta-index small {
    color:
        rgba(255, 255, 255, .42);
}
/* =========================================================
   COPY
========================================================= */
.fcta-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        55px clamp(35px, 5vw, 75px);
}
.fcta-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.fcta-kicker span {
    width: 42px;
    height: 2px;
    background: var(--gd-orange);
}
.fcta-copy h2 {
    max-width: 700px;
    margin: 0;
    color: var(--gd-deep);
    
    font-size:
        clamp(48px, 5.4vw, 84px);
    line-height: .88;
    letter-spacing: -4px;
}
.fcta-copy h2 strong {
    display: block;
    color: var(--gd-orange);
}
.fcta-copy p {
    max-width: 650px;
    margin: 27px 0 0;
    color: #68747d;
    font-size: 12px;
    line-height: 1.85;
}
.fcta-copy p strong {
    color: var(--gd-deep);
}
/* =========================================================
   ACTION SIDE
========================================================= */
.fcta-action {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 25px;
    color: var(--gd-white);
    background:
        linear-gradient(145deg,
            var(--gd-deep),
            var(--gd-dark));
}
/* decorative orange square */
.fcta-action::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 55px;
    height: 55px;
    border-top:
        5px solid var(--gd-orange);
    border-right:
        5px solid var(--gd-orange);
}
/* =========================================================
   STATUS
========================================================= */
.fcta-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding:
        15px 0 25px;
    border-bottom:
        1px solid rgba(255, 255, 255, .1);
}
.fcta-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    background: var(--gd-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 7px rgba(244, 160, 30, .09);
    animation:
        fctaPulse 2s ease-in-out infinite;
}
@keyframes fctaPulse {
    50% {
        box-shadow:
            0 0 0 13px rgba(244, 160, 30, 0);
    }
}
.fcta-status small {
    display: block;
    margin-bottom: 3px;
    color:
        rgba(255, 255, 255, .35);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.fcta-status strong {
    font-size: 11px;
    letter-spacing: .4px;
}
/* =========================================================
   PRIMARY ACTION
========================================================= */
.fcta-primary {
    position: relative;
    min-height: 145px;
    margin-top: auto;
    padding: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    color: var(--gd-dark);
    background: var(--gd-orange);
    transition:
        .4s var(--gd-ease);
}
.fcta-primary::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -65px;
    top: -65px;
    border:
        1px solid rgba(15, 23, 34, .15);
    border-radius: 50%;
    transition:
        .5s var(--gd-ease);
}
.fcta-primary:hover::before {
    width: 240px;
    height: 240px;
    right: -100px;
    top: -100px;
}
.fcta-primary>span {
    position: relative;
    z-index: 2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fcta-primary>span strong {
    display: block;
    margin-top: 4px;
    
    font-size: 22px;
    letter-spacing: -1px;
    text-transform: none;
}
.fcta-primary i {
    position: relative;
    z-index: 2;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--gd-white);
    background: var(--gd-dark);
    border-radius: 50%;
    font-style: normal;
    font-size: 18px;
    transition:
        .35s var(--gd-ease);
}
.fcta-primary:hover {
    color: var(--gd-dark);
    background: var(--gd-gold);
}
.fcta-primary:hover i {
    transform:
        rotate(-35deg);
}
/* =========================================================
   PHONE
========================================================= */
.fcta-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding:
        15px 4px;
    color: var(--gd-white);
    border-top:
        1px solid rgba(255, 255, 255, .08);
}
.fcta-phone-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--gd-orange);
    border:
        1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    transition: .3s;
}
.fcta-phone:hover .fcta-phone-icon {
    color: var(--gd-dark);
    background: var(--gd-orange);
    border-color: var(--gd-orange);
    transform: rotate(-8deg);
}
.fcta-phone small {
    display: block;
    margin-bottom: 3px;
    color:
        rgba(255, 255, 255, .35);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.fcta-phone strong {
    font-size: 9px;
}
/* =========================================================
   SERVICE RAIL
========================================================= */
.fcta-rail {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        repeat(6, 1fr);
    color: var(--gd-white);
    background: var(--gd-navy);
}
.fcta-rail span {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-right:
        1px solid rgba(255, 255, 255, .08);
    color:
        rgba(255, 255, 255, .55);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    transition:
        .3s var(--gd-ease);
}
.fcta-rail span:last-child {
    border-right: 0;
}
.fcta-rail span i {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    background: var(--gd-orange);
    border-radius: 50%;
}
.fcta-rail span:hover {
    color: var(--gd-dark);
    background: var(--gd-orange);
}
.fcta-rail span:hover i {
    background: var(--gd-dark);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .fcta-section {
        padding: 75px 0;
    }
    .fcta-shell {
        grid-template-columns:
            85px 1fr;
    }
    .fcta-action {
        grid-column:
            1 / -1;
        display: grid;
        grid-template-columns:
            1fr 1fr;
        gap: 15px;
    }
    .fcta-status {
        grid-column:
            1 / -1;
    }
    .fcta-primary {
        min-height: 125px;
    }
    .fcta-phone {
        margin: 0;
        padding: 20px;
        border:
            1px solid rgba(255, 255, 255, .1);
    }
    .fcta-rail {
        grid-template-columns:
            repeat(3, 1fr);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .fcta-section {
        padding: 55px 0;
    }
    .fcta-shell {
        display: block;
    }
    .fcta-index {
        min-height: 70px;
        flex-direction: row;
        gap: 10px;
        justify-content: flex-start;
        padding: 0 22px;
    }
    .fcta-index strong {
        font-size: 35px;
    }
    .fcta-copy {
        padding:
            38px 22px;
    }
    .fcta-copy h2 {
        font-size:
            clamp(43px, 13vw, 62px);
        letter-spacing: -3px;
    }
    .fcta-action {
        display: block;
        padding: 20px;
    }
    .fcta-primary {
        min-height: 120px;
        margin-top: 18px;
    }
    .fcta-phone {
        margin-top: 12px;
        padding:
            16px 4px;
        border:
            0;
        border-top:
            1px solid rgba(255, 255, 255, .08);
    }
    .fcta-rail {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .fcta-rail span {
        min-height: 58px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .fcta-status-dot {
        animation: none;
    }
}
/* =========================================================
   BRANDS / MANUFACTURER RAIL
========================================================= */
.gbrand-section {
    position: relative;
    padding: 100px 0 85px;
    overflow: hidden;
    color: var(--gd-white);
    background:
        radial-gradient(circle at 85% 15%,
            rgba(244, 160, 30, .08),
            transparent 28%),
        linear-gradient(135deg,
            var(--gd-deep),
            var(--gd-dark));
}
/* technical grid */
.gbrand-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);
    background-size:
        42px 42px;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.gbrand-head {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        1fr 430px;
    align-items: end;
    gap: 60px;
    margin-bottom: 70px;
}
.gbrand-kicker {
    display: block;
    margin-bottom: 15px;
    color: var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.gbrand-title h2 {
    margin: 0;
    color: var(--gd-white);
    
    font-size:
        clamp(52px, 6vw, 92px);
    line-height: .86;
    letter-spacing: -5px;
}
.gbrand-title h2 strong {
    color: var(--gd-orange);
}
/* copy */
.gbrand-copy {
    position: relative;
    padding-left: 30px;
}
.gbrand-copy-line {
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 2px;
    background:
        var(--gd-orange);
}
.gbrand-copy p {
    margin: 0;
    color:
        rgba(255, 255, 255, .53);
    font-size: 12px;
    line-height: 1.8;
}
/* =========================================================
   BRAND RAIL
========================================================= */
.gbrand-rail {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    border-top:
        1px solid rgba(255, 255, 255, .1);
    border-left:
        1px solid rgba(255, 255, 255, .1);
}
/* orange mechanical track */
.gbrand-track-line {
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 3px;
    background:
        linear-gradient(90deg,
            var(--gd-orange) 0 22%,
            rgba(244, 160, 30, .08) 22% 100%);
}
/* =========================================================
   BRAND
========================================================= */
.gbrand-item {
    position: relative;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:
        28px 24px;
    overflow: hidden;
    border-right:
        1px solid rgba(255, 255, 255, .1);
    border-bottom:
        1px solid rgba(255, 255, 255, .1);
    transition:
        .4s var(--gd-ease);
}
/* huge background number */
.gbrand-item::before {
    content: attr(data-brand);
    position: absolute;
    right: 8px;
    top: 3px;
    color:
        rgba(255, 255, 255, .02);
    
    font-size: 70px;
}
/* track roller */
.gbrand-dot {
    position: absolute;
    left: 22px;
    top: -7px;
    width: 13px;
    height: 13px;
    background:
        var(--gd-dark);
    border:
        3px solid var(--gd-orange);
    border-radius: 50%;
    transition:
        .5s var(--gd-ease);
}
.gbrand-item small {
    display: block;
    margin-bottom: 7px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.gbrand-item strong {
    position: relative;
    z-index: 2;
    color:
        rgba(255, 255, 255, .82);
    
    font-size:
        clamp(19px, 2vw, 27px);
    line-height: 1.1;
    transition:
        .3s;
}
/* =========================================================
   HOVER
========================================================= */
.gbrand-item:hover {
    background:
        var(--gd-orange);
    transform:
        translateY(-7px);
}
.gbrand-item:hover .gbrand-dot {
    top: 13px;
    background:
        var(--gd-white);
    border-color:
        var(--gd-dark);
    transform:
        rotate(180deg);
}
.gbrand-item:hover small {
    color:
        rgba(15, 23, 34, .55);
}
.gbrand-item:hover strong {
    color:
        var(--gd-dark);
}
/* =========================================================
   SPECIAL LAST ROW
========================================================= */
.gbrand-item:nth-last-child(-n+3) {
    min-height: 125px;
}
/* =========================================================
   BOTTOM RAIL
========================================================= */
.gbrand-bottom {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 28px;
}
.gbrand-bottom span {
    display: flex;
    align-items: center;
    gap: 8px;
    color:
        rgba(255, 255, 255, .35);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.gbrand-bottom i {
    width: 5px;
    height: 5px;
    background:
        var(--gd-orange);
    border-radius: 50%;
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .gbrand-section {
        padding:
            80px 0 70px;
    }
    .gbrand-head {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 50px;
    }
    .gbrand-copy {
        max-width: 600px;
    }
    .gbrand-rail {
        grid-template-columns:
            repeat(3, 1fr);
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .gbrand-section {
        padding:
            65px 0 55px;
    }
    .gbrand-title h2 {
        font-size:
            clamp(47px, 14vw, 65px);
        letter-spacing: -4px;
    }
    .gbrand-rail {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .gbrand-item {
        min-height: 115px;
        padding:
            23px 15px;
    }
    .gbrand-item strong {
        font-size: 17px;
    }
    .gbrand-dot {
        left: 15px;
    }
    .gbrand-bottom {
        gap:
            15px 22px;
    }
}
/* =========================================================
   FRESNO CONTACT + MAP
   FLOATING DISPATCH BOARD
========================================================= */
.fdc-section {
    position: relative;
    padding:
        110px 0 130px;
    overflow: hidden;
    color:
        var(--gd-dark);
    background:
        linear-gradient(rgba(64, 81, 111, .03) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(64, 81, 111, .03) 1px,
            transparent 1px),
        #f3f4f2;
    background-size:
        54px 54px;
}
/* giant word */
.fdc-section::before {
    content: "CONTACT";
    position: absolute;
    right: -35px;
    top: -20px;
    color:
        rgba(24, 34, 49, .025);
    font-size:
        clamp(120px, 18vw, 300px);
    font-weight: 900;
    letter-spacing: -12px;
    line-height: 1;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.fdc-head {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        1.25fr .65fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 55px;
}
.fdc-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    color:
        var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fdc-kicker::before {
    content: "";
    width: 44px;
    height: 2px;
    background:
        var(--gd-orange);
}
.fdc-head h2 {
    margin: 0;
    color:
        var(--gd-deep);
    
    font-size:
        clamp(54px, 6.4vw, 100px);
    line-height: .85;
    letter-spacing: -5px;
}
.fdc-head h2 strong {
    display: block;
    color:
        var(--gd-orange);
}
.fdc-head-copy {
    position: relative;
    padding:
        20px 0 5px 30px;
    border-left:
        2px solid var(--gd-orange);
}
.fdc-head-index {
    position: absolute;
    right: 0;
    bottom: -10px;
    color:
        rgba(24, 34, 49, .06);
    
    font-size: 90px;
    line-height: 1;
}
.fdc-head-copy p {
    position: relative;
    z-index: 2;
    max-width: 420px;
    margin: 0;
    color: #68747c;
    font-size: 12px;
    line-height: 1.8;
}
/* =========================================================
   BOARD
========================================================= */
.fdc-board {
    position: relative;
    z-index: 5;
    min-height: 980px;
    overflow: visible;
    background:
        var(--gd-deep);
    box-shadow:
        0 35px 80px rgba(24, 34, 49, .16);
}
/* =========================================================
   MAP
========================================================= */
.fdc-map {
    position: absolute;
    inset:
        0 0 0 0;
    overflow: hidden;
    background:
        #d9dcdf;
}
.fdc-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter:
        grayscale(.85) contrast(.9) brightness(.72);
    transition:
        filter .6s ease,
        transform .8s var(--gd-ease);
}
.fdc-board:hover .fdc-map iframe {
    filter:
        grayscale(.25) contrast(.95) brightness(.84);
    transform:
        scale(1.015);
}
.fdc-map-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(15, 23, 34, .2),
            rgba(15, 23, 34, .65) 72%,
            rgba(15, 23, 34, .86)),
        linear-gradient(0deg,
            rgba(15, 23, 34, .55),
            transparent 65%);
    pointer-events: none;
}
/* =========================================================
   LOCATION TICKET
========================================================= */
.fdc-location {
    position: absolute;
    left: 35px;
    bottom: 40px;
    z-index: 7;
    width:
        min(360px, 30%);
    color:
        var(--gd-white);
    background:
        rgba(15, 23, 34, .94);
    border:
        1px solid rgba(255, 255, 255, .12);
    box-shadow:
        0 24px 55px rgba(0, 0, 0, .3);
    backdrop-filter:
        blur(12px);
}
.fdc-location::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 75px;
    height: 5px;
    background:
        var(--gd-orange);
}
/* location heading */
.fdc-location-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding:
        28px 25px 22px;
}
.fdc-location-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    font-size: 17px;
}
.fdc-location-top small {
    display: block;
    margin-bottom: 4px;
    color:
        var(--gd-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.fdc-location-top strong {
    
    font-size: 22px;
}
/* code */
.fdc-location-code {
    padding:
        10px 25px;
    color:
        rgba(255, 255, 255, .32);
    border-top:
        1px solid rgba(255, 255, 255, .08);
    border-bottom:
        1px solid rgba(255, 255, 255, .08);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 2px;
}
/* data */
.fdc-location-data {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
}
.fdc-location-data>div {
    min-height: 75px;
    padding:
        15px 20px;
    border-right:
        1px solid rgba(255, 255, 255, .08);
    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}
.fdc-location-data small {
    display: block;
    margin-bottom: 4px;
    color:
        rgba(255, 255, 255, .3);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.fdc-location-data strong {
    color:
        rgba(255, 255, 255, .76);
    font-size: 9px;
}
/* bottom */
.fdc-location-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:
        16px 20px;
    color:
        rgba(255, 255, 255, .42);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.fdc-location-bottom span {
    width: 38px;
    height: 2px;
    background:
        var(--gd-orange);
}
/* =========================================================
   FORM PANEL
========================================================= */
.fdc-form-panel {
    position: absolute;
    right: 35px;
    top: 50%;
    z-index: 10;
    width:
        min(720px, 58%);
    max-height:
        calc(100% - 70px);
    padding:
        30px;
    overflow-y: auto;
    color:
        var(--gd-dark);
    background:
        rgba(255, 255, 255, .97);
    border:
        1px solid rgba(255, 255, 255, .7);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, .32);
    transform:
        translateY(-50%);
    scrollbar-width:
        thin;
    scrollbar-color:
        var(--gd-orange) #e5e6e6;
}
/* orange corner */
.fdc-form-panel::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 55px;
    height: 55px;
    border-top:
        5px solid var(--gd-orange);
    border-right:
        5px solid var(--gd-orange);
    pointer-events: none;
}
/* =========================================================
   FORM HEADER
========================================================= */
.fdc-form-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom:
        1px solid rgba(24, 34, 49, .1);
}
.fdc-form-head>div:first-child>span {
    display: block;
    margin-bottom: 5px;
    color:
        var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.5px;
}
.fdc-form-head h3 {
    margin: 0;
    color:
        var(--gd-deep);
    
    font-size:
        clamp(25px, 2.5vw, 38px);
    letter-spacing: -1.5px;
}
.fdc-form-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color:
        #899197;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fdc-form-status i {
    width: 7px;
    height: 7px;
    background:
        var(--gd-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgba(244, 160, 30, .1);
}
.fdc-form-status strong {
    color:
        var(--gd-deep);
}
/* =========================================================
   FORM RESET
========================================================= */
.cc-fcf-form,
.cc-fcf-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
.cc-fcf-form input,
.cc-fcf-form select,
.cc-fcf-form textarea,
.cc-fcf-form button {
    font: inherit;
}
/* =========================================================
   FIELDS
========================================================= */
.fdc-fields {
    display: grid;
    grid-template-columns:
        repeat(6, 1fr);
    gap: 10px;
}
.fdc-field {
    grid-column:
        span 3;
    min-height: 72px;
    display: grid;
    grid-template-columns:
        42px 1fr;
    align-items: center;
    gap: 10px;
    padding:
        9px 12px;
    background:
        #f3f4f2;
    border:
        1px solid rgba(24, 34, 49, .09);
    transition:
        .3s var(--gd-ease);
}
.fdc-field-wide {
    grid-column:
        1 / -1;
}
.fdc-field:nth-child(4),
.fdc-field:nth-child(5),
.fdc-field:nth-child(6) {
    grid-column:
        span 2;
}
.fdc-field-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color:
        var(--gd-orange);
    border:
        1px solid rgba(24, 34, 49, .1);
    transition:
        .3s;
}
.fdc-field label {
    min-width: 0;
}
.fdc-field small {
    display: block;
    margin-bottom: 2px;
    color:
        var(--gd-navy);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1px;
}
.fdc-field input {
    width: 100%;
    padding:
        5px 0;
    color:
        var(--gd-deep);
    background:
        transparent;
    border: 0;
    outline: 0;
    font-size: 11px;
}
.fdc-field input::placeholder {
    color:
        #8d959b;
}
.fdc-field:focus-within {
    background:
        var(--gd-white);
    border-color:
        var(--gd-orange);
    transform:
        translateY(-2px);
    box-shadow:
        0 12px 26px rgba(24, 34, 49, .06);
}
.fdc-field:focus-within .fdc-field-icon {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border-color:
        var(--gd-orange);
}
/* =========================================================
   MESSAGE
========================================================= */
.fdc-message {
    margin-top: 10px;
    padding: 15px;
    background:
        #f3f4f2;
    border:
        1px solid rgba(24, 34, 49, .09);
    transition:
        .3s;
}
.fdc-message:focus-within {
    background:
        var(--gd-white);
    border-color:
        var(--gd-orange);
}
.fdc-message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}
.fdc-message-head>span {
    display: flex;
    align-items: center;
    gap: 8px;
    color:
        var(--gd-deep);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fdc-message-head i {
    color:
        var(--gd-orange);
}
.fdc-message-head small {
    color:
        #999fa3;
    font-size: 5px;
    font-weight: 900;
}
.fdc-message textarea {
    width: 100%;
    min-height: 95px;
    padding:
        8px 0;
    resize: vertical;
    color:
        var(--gd-deep);
    background:
        transparent;
    border: 0;
    outline: 0;
    font-size: 11px;
    line-height: 1.6;
}
/* =========================================================
   SCHEDULE
========================================================= */
.fdc-schedule {
    display: grid;
    grid-template-columns:
        1.3fr .7fr;
    gap: 10px;
    margin-top: 10px;
}
.fdc-schedule-part {
    padding:
        14px;
    background:
        var(--gd-deep);
}
.fdc-schedule-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.fdc-schedule-title>span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
}
.fdc-schedule-title small {
    display: block;
    margin-bottom: 2px;
    color:
        var(--gd-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.2px;
}
.fdc-schedule-title strong {
    color:
        var(--gd-white);
    font-size: 9px;
}
/* date grid */
.fdc-date-grid {
    display: grid;
    grid-template-columns:
        1.3fr .65fr .75fr;
    gap: 6px;
}
.fdc-schedule select,
.fdc-schedule input {
    width: 100%;
    height: 42px;
    padding:
        0 8px;
    color:
        var(--gd-white);
    background:
        rgba(255, 255, 255, .07);
    border:
        1px solid rgba(255, 255, 255, .12);
    outline: 0;
    font-size: 8px;
}
.fdc-schedule option {
    color:
        var(--gd-dark);
    background:
        var(--gd-white);
}
.fdc-schedule select:focus,
.fdc-schedule input:focus {
    border-color:
        var(--gd-orange);
}
/* =========================================================
   SUBMIT
========================================================= */
.fdc-submit {
    width: 100%;
    min-height: 76px;
    margin-top: 10px;
    padding: 0;
    display: grid;
    grid-template-columns:
        1fr 75px;
    overflow: hidden;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border: 0;
    cursor: pointer;
    text-align: left;
    transition:
        .35s var(--gd-ease);
}
.fdc-submit>span {
    padding:
        16px 20px;
}
.fdc-submit small {
    display: block;
    margin-bottom: 3px;
    color:
        rgba(15, 23, 34, .55);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.fdc-submit strong {
    display: block;
    
    font-size: 19px;
}
.fdc-submit>i {
    height: 100%;
    display: grid;
    place-items: center;
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    font-size: 17px;
    transition:
        .35s var(--gd-ease);
}
.fdc-submit:hover {
    background:
        var(--gd-gold);
}
.fdc-submit:hover>i {
    background:
        var(--gd-navy);
    transform:
        translateX(4px);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:1199.98px) {
    .fdc-form-panel {
        width: 62%;
    }
    .fdc-fields {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .fdc-field,
    .fdc-field:nth-child(4),
    .fdc-field:nth-child(5),
    .fdc-field:nth-child(6) {
        grid-column:
            span 1;
    }
    .fdc-field-wide {
        grid-column:
            1 / -1;
    }
}
@media(max-width:991.98px) {
    .fdc-section {
        padding:
            85px 0;
    }
    .fdc-head {
        grid-template-columns:
            1fr;
        gap: 25px;
    }
    .fdc-board {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }
    .fdc-map {
        position: relative;
        height: 430px;
    }
    .fdc-location {
        position: absolute;
        left: 25px;
        bottom: auto;
        top: 315px;
        width: 330px;
    }
    .fdc-form-panel {
        position: relative;
        inset: auto;
        width: calc(100% - 40px);
        max-height: none;
        margin:
            -35px 20px 20px auto;
        transform: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .fdc-section {
        padding:
            65px 0;
    }
    .fdc-head h2 {
        font-size:
            clamp(46px, 14vw, 65px);
        letter-spacing: -4px;
    }
    .fdc-map {
        height: 380px;
    }
    .fdc-location {
        left: 15px;
        right: 15px;
        top: 265px;
        width: auto;
    }
    .fdc-form-panel {
        width:
            calc(100% - 24px);
        margin:
            90px 12px 12px;
        padding:
            22px 15px;
    }
    .fdc-form-head {
        align-items:
            flex-start;
        flex-direction:
            column;
    }
    .fdc-fields {
        grid-template-columns:
            1fr;
    }
    .fdc-field,
    .fdc-field-wide,
    .fdc-field:nth-child(4),
    .fdc-field:nth-child(5),
    .fdc-field:nth-child(6) {
        grid-column:
            auto;
    }
    .fdc-schedule {
        grid-template-columns:
            1fr;
    }
    .fdc-date-grid {
        grid-template-columns:
            1fr 70px;
    }
    .fdc-date-grid #service_year {
        grid-column:
            1 / -1;
    }
    .fdc-submit {
        grid-template-columns:
            1fr 62px;
    }
    .fdc-submit strong {
        font-size: 16px;
    }
}
/* =========================================================
   FRESNO DATA SECTION
========================================================= */
.fdata-section {
    position: relative;
    padding: 95px 0;
    overflow: hidden;
    color: var(--gd-dark);
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f2f3f2 100%);
}
/* background detail */
.fdata-section::before {
    content: "INFO";
    position: absolute;
    right: -20px;
    top: -20px;
    color: rgba(24, 34, 49, .025);
    font-size:
        clamp(120px, 18vw, 290px);
    font-weight: 900;
    letter-spacing: -12px;
    line-height: 1;
    pointer-events: none;
}
/* =========================================================
   HEADER
========================================================= */
.fdata-head {
    position: relative;
    z-index: 3;
    max-width: 850px;
    margin-bottom: 55px;
}
.fdata-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fdata-kicker::before {
    content: "";
    width: 42px;
    height: 2px;
    background: var(--gd-orange);
}
.fdata-head h2 {
    margin: 0;
    color: var(--gd-deep);
    
    font-size:
        clamp(52px, 6vw, 92px);
    line-height: .86;
    letter-spacing: -5px;
}
.fdata-head h2 strong {
    display: block;
    color: var(--gd-orange);
}
/* =========================================================
   LAYOUT
========================================================= */
.fdata-layout {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        repeat(12, 1fr);
    gap: 12px;
}
/* =========================================================
   ITEM
========================================================= */
.fdata-item {
    position: relative;
    min-height: 180px;
    display: grid;
    grid-template-columns:
        55px 1fr;
    align-items: center;
    gap: 15px;
    padding: 28px;
    overflow: hidden;
    background: var(--gd-white);
    border:
        1px solid rgba(24, 34, 49, .09);
    box-shadow:
        0 18px 45px rgba(24, 34, 49, .06);
    transition:
        .4s var(--gd-ease);
}
/* asymmetrical widths */
.fdata-phone {
    grid-column: span 5;
}
.fdata-email {
    grid-column: span 7;
    background:
        var(--gd-deep);
    color:
        var(--gd-white);
}
.fdata-location {
    grid-column: span 4;
}
.fdata-hours {
    grid-column: span 4;
    background:
        var(--gd-navy);
    color:
        var(--gd-white);
}
.fdata-zip {
    grid-column: span 4;
}
/* =========================================================
   LARGE NUMBER
========================================================= */
.fdata-no {
    position: absolute;
    right: 12px;
    top: 6px;
    color:
        rgba(24, 34, 49, .055);
    
    font-size: 80px;
    line-height: 1;
}
.fdata-email .fdata-no,
.fdata-hours .fdata-no {
    color:
        rgba(255, 255, 255, .05);
}
/* =========================================================
   ICON
========================================================= */
.fdata-icon {
    position: relative;
    z-index: 3;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--gd-orange);
    border:
        1px solid rgba(24, 34, 49, .12);
    font-size: 16px;
    transform:
        rotate(45deg);
    transition:
        .4s var(--gd-ease);
}
.fdata-icon i {
    transform:
        rotate(-45deg);
}
.fdata-email .fdata-icon,
.fdata-hours .fdata-icon {
    border-color:
        rgba(255, 255, 255, .15);
}
/* =========================================================
   COPY
========================================================= */
.fdata-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
}
.fdata-copy small {
    display: block;
    margin-bottom: 6px;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
.fdata-copy strong {
    display: block;
    margin-bottom: 7px;
    color: var(--gd-deep);
    
    font-size:
        clamp(20px, 2vw, 28px);
    line-height: 1.1;
}
.fdata-email .fdata-copy strong,
.fdata-hours .fdata-copy strong {
    color: var(--gd-white);
}
.fdata-copy a,
.fdata-copy>span {
    display: block;
    color: #727d85;
    font-size: 17px;
    line-height: 1.5;
    word-break: break-word;
}
.fdata-email .fdata-copy a,
.fdata-hours .fdata-copy>span {
    color:
        rgba(255, 255, 255, .55);
}
/* =========================================================
   ORANGE EDGE
========================================================= */
.fdata-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55px;
    height: 4px;
    background: var(--gd-orange);
    transition:
        width .4s var(--gd-ease);
}
/* =========================================================
   HOVER
========================================================= */
.fdata-item:hover {
    transform:
        translateY(-8px);
    box-shadow:
        0 28px 60px rgba(24, 34, 49, .11);
}
.fdata-item:hover::after {
    width: 100%;
}
.fdata-item:hover .fdata-icon {
    color: var(--gd-dark);
    background: var(--gd-orange);
    border-color: var(--gd-orange);
    transform:
        rotate(0deg);
}
.fdata-item:hover .fdata-icon i {
    transform:
        rotate(0deg);
}
/* =========================================================
   BOTTOM STRIP
========================================================= */
.fdata-bottom {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;
    gap: 30px;
    margin-top: 16px;
    padding:
        20px 25px;
    color: var(--gd-white);
    background: var(--gd-dark);
}
.fdata-bottom-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
.fdata-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    background: var(--gd-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 7px rgba(244, 160, 30, .08);
    animation:
        fdataPulse 2s ease-in-out infinite;
}
@keyframes fdataPulse {
    50% {
        box-shadow:
            0 0 0 13px rgba(244, 160, 30, 0);
    }
}
.fdata-bottom-title small {
    display: block;
    margin-bottom: 3px;
    color:
        var(--gd-orange);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.4px;
}
.fdata-bottom-title strong {
    
    font-size: 15px;
}
/* services */
.fdata-bottom-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.fdata-bottom-services span {
    padding:
        8px 11px;
    color:
        rgba(255, 255, 255, .55);
    border:
        1px solid rgba(255, 255, 255, .1);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: .3s;
}
.fdata-bottom-services span:hover {
    color: var(--gd-dark);
    background: var(--gd-orange);
    border-color: var(--gd-orange);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .fdata-section {
        padding: 80px 0;
    }
    .fdata-layout {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .fdata-phone,
    .fdata-email,
    .fdata-location,
    .fdata-hours {
        grid-column: span 1;
    }
    .fdata-zip {
        grid-column:
            1 / -1;
    }
    .fdata-bottom {
        grid-template-columns: 1fr;
    }
    .fdata-bottom-services {
        justify-content: flex-start;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .fdata-section {
        padding: 65px 0;
    }
    .fdata-head h2 {
        font-size:
            clamp(46px, 14vw, 64px);
        letter-spacing: -4px;
    }
    .fdata-layout {
        grid-template-columns: 1fr;
    }
    .fdata-phone,
    .fdata-email,
    .fdata-location,
    .fdata-hours,
    .fdata-zip {
        grid-column: auto;
    }
    .fdata-item {
        min-height: 145px;
        padding:
            24px 20px;
    }
    .fdata-no {
        font-size: 64px;
    }
    .fdata-bottom {
        padding:
            20px;
    }
    .fdata-bottom-services {
        display: grid;
        grid-template-columns:
            1fr 1fr;
        width: 100%;
    }
    .fdata-bottom-services span {
        text-align: center;
    }
}
@media(prefers-reduced-motion:reduce) {
    .fdata-status-dot {
        animation: none;
    }
}
/* =========================================================
   FRESNO SITE DIRECTORY
========================================================= */
.fsd-section {
    position: relative;
    padding: 90px 0 25px;
    overflow: hidden;
    color: var(--gd-white);
    background:
        radial-gradient(circle at 10% 10%,
            rgba(64, 81, 111, .32),
            transparent 27%),
        linear-gradient(135deg,
            var(--gd-dark),
            #0a1018);
}
/* technical background */
.fsd-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);
    background-size:
        48px 48px;
    pointer-events: none;
}
/* =========================================================
   SHELL
========================================================= */
.fsd-shell {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        34% 66%;
    border:
        1px solid rgba(255, 255, 255, .1);
}
/* =========================================================
   BRAND SIDE
========================================================= */
.fsd-brand {
    position: relative;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    padding:
        28px 32px 32px;
    overflow: hidden;
    background:
        linear-gradient(145deg,
            var(--gd-navy),
            var(--gd-deep));
    border-right:
        1px solid rgba(255, 255, 255, .1);
}
/* giant number */
.fsd-brand::before {
    content: "01";
    position: absolute;
    right: -15px;
    bottom: 50px;
    color:
        rgba(255, 255, 255, .025);
    
    font-size: 230px;
    line-height: 1;
    pointer-events: none;
}
/* orange corner */
.fsd-brand::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 5px;
    background:
        var(--gd-orange);
}
/* =========================================================
   BRAND TOP
========================================================= */
.fsd-brand-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.fsd-code {
    color:
        rgba(255, 255, 255, .35);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.fsd-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color:
        rgba(255, 255, 255, .5);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fsd-status i {
    width: 7px;
    height: 7px;
    background:
        var(--gd-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgba(244, 160, 30, .08);
}
/* =========================================================
   BRAND CONTENT
========================================================= */
.fsd-brand-content {
    position: relative;
    z-index: 3;
    margin: auto 0;
}
.fsd-kicker {
    display: block;
    margin-bottom: 16px;
    color:
        var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fsd-brand h2 {
    max-width: 390px;
    margin: 0;
    color:
        var(--gd-white);
    
    font-size:
        clamp(48px, 4.5vw, 73px);
    line-height: .86;
    letter-spacing: -4px;
}
.fsd-brand h2 strong {
    display: block;
    color:
        var(--gd-orange);
}
.fsd-brand-content p {
    max-width: 370px;
    margin:
        25px 0 0;
    color:
        rgba(255, 255, 255, .48);
    font-size: 11px;
    line-height: 1.8;
}
.fsd-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}
.fsd-socials a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--gd-white);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px;
    transition: .3s var(--gd-ease);
}
.fsd-socials a:hover,
.fsd-socials a:focus-visible {
    color: var(--gd-dark);
    background: var(--gd-orange);
    border-color: var(--gd-orange);
    transform: translateY(-3px);
}
/* =========================================================
   CALL
========================================================= */
.fsd-call {
    position: relative;
    z-index: 3;
    min-height: 75px;
    display: grid;
    grid-template-columns:
        43px 1fr auto;
    align-items: center;
    gap: 12px;
    padding:
        12px 15px;
    color:
        var(--gd-white);
    background:
        rgba(255, 255, 255, .045);
    border:
        1px solid rgba(255, 255, 255, .1);
    transition:
        .35s var(--gd-ease);
}
.fsd-call-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
}
.fsd-call small {
    display: block;
    margin-bottom: 3px;
    color:
        rgba(255, 255, 255, .35);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1px;
}
.fsd-call strong {
    display: block;
    font-size: 9px;
}
.fsd-call>i {
    color:
        var(--gd-orange);
    font-size: 13px;
    transition: .3s;
}
.fsd-call:hover {
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    border-color:
        var(--gd-orange);
}
.fsd-call:hover .fsd-call-icon {
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
}
.fsd-call:hover small,
.fsd-call:hover>i {
    color:
        var(--gd-dark);
}
.fsd-call:hover>i {
    transform:
        translateX(5px);
}
/* =========================================================
   DIRECTORY
========================================================= */
.fsd-directory {
    display: grid;
    grid-template-columns:
        .8fr 1.2fr 1fr;
    min-width: 0;
}
.fsd-column {
    position: relative;
    min-width: 0;
    padding:
        32px 24px;
    border-right:
        1px solid rgba(255, 255, 255, .08);
}
.fsd-column:last-child {
    border-right: 0;
}
/* =========================================================
   COLUMN HEADING
========================================================= */
.fsd-column-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom:
        1px solid rgba(255, 255, 255, .09);
}
.fsd-column-head>span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    
    font-size: 13px;
}
.fsd-column-head small {
    display: block;
    margin-bottom: 3px;
    color:
        rgba(255, 255, 255, .3);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.3px;
}
.fsd-column-head h3 {
    margin: 0;
    color:
        var(--gd-white);
    
    font-size: 21px;
}
/* =========================================================
   LINKS
========================================================= */
.fsd-links {
    display: flex;
    flex-direction: column;
}
.fsd-links a {
    position: relative;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding:
        0 5px;
    color:
        rgba(255, 255, 255, .52);
    border-bottom:
        1px solid rgba(255, 255, 255, .065);
    font-size: 9px;
    font-weight: 700;
    transition:
        .3s var(--gd-ease);
}
.fsd-links a::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 0;
    height: 2px;
    background:
        var(--gd-orange);
    transition:
        width .3s var(--gd-ease);
}
.fsd-links a i {
    color:
        rgba(255, 255, 255, .18);
    font-size: 8px;
    transition:
        .3s;
}
.fsd-links a:hover {
    padding-left: 14px;
    color:
        var(--gd-white);
}
.fsd-links a:hover::before {
    width: 26px;
}
.fsd-links a:hover i {
    color:
        var(--gd-orange);
    transform:
        translateX(3px);
}
/* =========================================================
   LOCATIONS
========================================================= */
.fsd-location-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fsd-location-list a {
    min-height: 62px;
    display: grid;
    grid-template-columns:
        36px 1fr;
    align-items: center;
    gap: 10px;
    padding:
        8px 10px;
    color:
        var(--gd-white);
    background:
        rgba(255, 255, 255, .025);
    border:
        1px solid rgba(255, 255, 255, .07);
    transition:
        .3s var(--gd-ease);
}
.fsd-location-list>a>i {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    color:
        var(--gd-orange);
    border:
        1px solid rgba(255, 255, 255, .1);
    font-size: 11px;
    transition: .3s;
}
.fsd-location-list strong {
    display: block;
    margin-bottom: 2px;
    
    font-size: 13px;
}
.fsd-location-list span {
    color:
        rgba(255, 255, 255, .35);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fsd-location-list a:hover {
    background:
        var(--gd-orange);
    transform:
        translateX(5px);
    border-color:
        var(--gd-orange);
}
.fsd-location-list a:hover>i {
    color:
        var(--gd-white);
    background:
        var(--gd-dark);
    border-color:
        var(--gd-dark);
}
.fsd-location-list a:hover span {
    color:
        rgba(15, 23, 34, .6);
}
.fsd-location-list a:hover strong {
    color:
        var(--gd-dark);
}
/* =========================================================
   BOTTOM
========================================================= */
.fsd-bottom {
    position: relative;
    z-index: 3;
    min-height: 80px;
    display: grid;
    grid-template-columns:
        1fr auto auto;
    align-items: center;
    gap: 35px;
    border-bottom:
        1px solid rgba(255, 255, 255, .08);
}
.fsd-bottom-brand {
    color:
        rgba(255, 255, 255, .28);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.7px;
}
.fsd-bottom-brand span {
    color:
        var(--gd-orange);
}
/* tags */
.fsd-bottom-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    color:
        rgba(255, 255, 255, .32);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fsd-bottom-tags i {
    width: 4px;
    height: 4px;
    background:
        var(--gd-orange);
    border-radius: 50%;
}
/* top */
.fsd-top {
    display: flex;
    align-items: center;
    gap: 10px;
    color:
        rgba(255, 255, 255, .45);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: .3s;
}
.fsd-top i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color:
        var(--gd-dark);
    background:
        var(--gd-orange);
    transition: .3s;
}
.fsd-top:hover {
    color:
        var(--gd-white);
}
.fsd-top:hover i {
    transform:
        translateY(-4px);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:1199.98px) {
    .fsd-shell {
        grid-template-columns:
            1fr;
    }
    .fsd-brand {
        min-height: 430px;
        border-right: 0;
        border-bottom:
            1px solid rgba(255, 255, 255, .1);
    }
    .fsd-directory {
        grid-template-columns:
            repeat(3, 1fr);
    }
}
@media(max-width:991.98px) {
    .fsd-directory {
        grid-template-columns:
            repeat(2, 1fr);
    }
    .fsd-locations {
        grid-column:
            1 / -1;
    }
    .fsd-location-list {
        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
    }
    .fsd-bottom {
        grid-template-columns:
            1fr auto;
    }
    .fsd-bottom-tags {
        display: none;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .fsd-section {
        padding:
            60px 0 20px;
    }
    .fsd-brand {
        min-height: 470px;
        padding:
            25px 20px;
    }
    .fsd-brand h2 {
        font-size:
            clamp(45px, 14vw, 61px);
    }
    .fsd-directory {
        grid-template-columns:
            1fr;
    }
    .fsd-column {
        padding:
            28px 20px;
        border-right: 0;
        border-bottom:
            1px solid rgba(255, 255, 255, .08);
    }
    .fsd-locations {
        grid-column: auto;
    }
    .fsd-location-list {
        grid-template-columns:
            1fr;
    }
    .fsd-bottom {
        min-height: 100px;
        grid-template-columns:
            1fr auto;
        gap: 15px;
    }
}
/* =========================================================
   FRESNO GARAGE DOOR PRO
   LIGHT OFFER SECTION
========================================================= */
.fso-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: var(--gd-deep);
    background:
        linear-gradient(
            rgba(64,81,111,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(64,81,111,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5f6f5 55%,
            #eef0f2 100%
        );
    background-size:
        50px 50px,
        50px 50px,
        auto;
}
/* BIG DECORATIVE $ */
.fso-section::before {
    content: "$";
    position: absolute;
    right: -50px;
    top: -115px;
    color: rgba(24,34,49,.025);
    
    font-size:
        clamp(300px,36vw,620px);
    line-height: 1;
    pointer-events: none;
}
/* ORANGE TOP LINE */
.fso-section::after {
    content: "";
    position: absolute;
    left: 4%;
    top: 0;
    width: 155px;
    height: 5px;
    background: var(--gd-orange);
}
/* =========================================================
   HEADER
========================================================= */
.fso-head {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        390px;
    align-items: end;
    gap: 60px;
    margin-bottom: 65px;
}
.fso-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    color: var(--gd-orange);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.fso-kicker::before {
    content: "";
    width: 42px;
    height: 2px;
    background: var(--gd-orange);
}
.fso-head h2 {
    margin: 0;
    color: var(--gd-deep);
    
    font-size:
        clamp(54px,6.3vw,98px);
    line-height: .85;
    letter-spacing: -5px;
}
.fso-head h2 strong {
    display: block;
    color: var(--gd-orange);
}
.fso-head-text {
    margin: 0;
    padding-left: 23px;
    color: #6c7780;
    border-left:
        2px solid var(--gd-orange);
    font-size: 12px;
    line-height: 1.8;
}
/* =========================================================
   OFFERS WRAPPER
========================================================= */
.fso-offers {
    position: relative;
    z-index: 5;
}
/* =========================================================
   OFFER
========================================================= */
.fso-offer {
    position: relative;
    min-height: 195px;
    display: grid;
    grid-template-columns:
        220px
        76px
        minmax(280px,1fr)
        155px;
    align-items: center;
    margin-bottom: 15px;
    overflow: hidden;
    color: var(--gd-deep);
    text-decoration: none;
    background:
        rgba(255,255,255,.96);
    border:
        1px solid rgba(24,34,49,.10);
    box-shadow:
        0 18px 45px rgba(24,34,49,.06);
    transition:
        transform .4s var(--gd-ease),
        box-shadow .4s var(--gd-ease),
        border-color .4s var(--gd-ease);
}
/* ORANGE LEFT EDGE */
.fso-offer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gd-orange);
    transition:
        width .35s var(--gd-ease);
}
/* =========================================================
   ASYMMETRICAL WIDTHS
========================================================= */
.fso-offer-one {
    width: 92%;
}
.fso-offer-featured {
    width: 96%;
    margin-left: 4%;
    color: var(--gd-dark);
    background:
        linear-gradient(
            105deg,
            var(--gd-orange),
            var(--gd-gold)
        );
    border: 0;
    box-shadow:
        0 28px 65px rgba(24,34,49,.17);
}
.fso-offer-featured::before {
    display: none;
}
.fso-offer-three {
    width: 89%;
    margin-left: 7%;
}
/* =========================================================
   PRICE
========================================================= */
.fso-price {
    position: relative;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        20px 28px;
    overflow: hidden;
    background:
        rgba(64,81,111,.025);
    border-right:
        1px solid rgba(24,34,49,.09);
}
/* decorative circles */
.fso-price::before {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -80px;
    width: 180px;
    height: 180px;
    border:
        1px solid rgba(244,160,30,.22);
    border-radius: 50%;
}
.fso-price::after {
    content: "";
    position: absolute;
    left: -25px;
    bottom: -45px;
    width: 105px;
    height: 105px;
    border:
        1px solid rgba(64,81,111,.10);
    border-radius: 50%;
}
.fso-price small {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 4px;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 2px;
}
.fso-price strong {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--gd-deep);
    
    font-size:
        clamp(76px,7vw,108px);
    line-height: .75;
    letter-spacing: -6px;
}
.fso-price strong sup {
    position: relative;
    top: -.75em;
    margin-right: 3px;
    color: var(--gd-orange);
    font-size: .32em;
    letter-spacing: 0;
}
.fso-price > span {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    color: var(--gd-navy);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 5px;
}
/* =========================================================
   DIVIDER
========================================================= */
.fso-divider {
    min-height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.fso-divider span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--gd-orange);
    background: var(--gd-white);
    border:
        1px solid rgba(24,34,49,.13);
    
    font-size: 11px;
    box-shadow:
        0 8px 18px rgba(24,34,49,.05);
}
.fso-divider i {
    width: 1px;
    height: 55px;
    background:
        linear-gradient(
            var(--gd-orange),
            rgba(24,34,49,.08)
        );
}
/* =========================================================
   CONTENT
========================================================= */
.fso-content {
    padding:
        25px 35px;
    border-left:
        1px solid rgba(24,34,49,.07);
}
.fso-content > small {
    display: block;
    margin-bottom: 8px;
    color: var(--gd-orange);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.6px;
}
.fso-content h3 {
    margin: 0;
    color: var(--gd-deep);
    
    font-size:
        clamp(30px,3.5vw,52px);
    line-height: .95;
    letter-spacing: -2px;
}
.fso-content h3 span {
    color: var(--gd-orange);
}
.fso-content p {
    max-width: 500px;
    margin: 13px 0 0;
    color: #707b83;
    font-size: 10px;
    line-height: 1.6;
}
/* =========================================================
   ACTION
========================================================= */
.fso-action {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--gd-navy);
    border-left:
        1px solid rgba(24,34,49,.09);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    transition:
        .35s var(--gd-ease);
}
.fso-action i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--gd-white);
    background: var(--gd-deep);
    border-radius: 50%;
    font-size: 12px;
    transition:
        .35s var(--gd-ease);
}
.fso-action:hover {
    color: var(--gd-dark);
    background:
        rgba(244,160,30,.10);
}
.fso-action:hover i {
    color: var(--gd-dark);
    background: var(--gd-orange);
    transform:
        translateX(5px);
}
/* =========================================================
   FEATURED OFFER
========================================================= */
.fso-featured-label {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 7px;
    padding:
        9px 14px;
    color: var(--gd-white);
    background: var(--gd-deep);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.fso-offer-featured
.fso-price {
    background:
        rgba(255,255,255,.12);
    border-right-color:
        rgba(15,23,34,.12);
}
.fso-offer-featured
.fso-price::before {
    border-color:
        rgba(15,23,34,.14);
}
.fso-offer-featured
.fso-price::after {
    border-color:
        rgba(15,23,34,.08);
}
.fso-offer-featured
.fso-price small,
.fso-offer-featured
.fso-price strong,
.fso-offer-featured
.fso-price strong sup,
.fso-offer-featured
.fso-price > span {
    color: var(--gd-dark);
}
.fso-offer-featured
.fso-price > span {
    opacity: .58;
}
.fso-offer-featured
.fso-divider span {
    color: var(--gd-dark);
    background:
        rgba(255,255,255,.44);
    border-color:
        rgba(15,23,34,.17);
    box-shadow: none;
}
.fso-offer-featured
.fso-divider i {
    background:
        linear-gradient(
            var(--gd-dark),
            rgba(15,23,34,.08)
        );
}
.fso-offer-featured
.fso-content {
    border-color:
        rgba(15,23,34,.12);
}
.fso-offer-featured
.fso-content > small {
    color:
        rgba(15,23,34,.58);
}
.fso-offer-featured
.fso-content h3,
.fso-offer-featured
.fso-content h3 span {
    color: var(--gd-dark);
}
.fso-offer-featured
.fso-content p {
    color:
        rgba(15,23,34,.67);
}
.fso-offer-featured
.fso-action {
    color:
        rgba(15,23,34,.67);
    border-color:
        rgba(15,23,34,.13);
}
.fso-offer-featured
.fso-action i {
    color: var(--gd-white);
    background: var(--gd-deep);
}
.fso-offer-featured
.fso-action:hover {
    color: var(--gd-dark);
    background:
        rgba(255,255,255,.30);
}
.fso-offer-featured
.fso-action:hover i {
    color: var(--gd-dark);
    background: var(--gd-white);
}
/* =========================================================
   HOVER
========================================================= */
.fso-offer:not(.fso-offer-featured):hover {
    border-color:
        rgba(244,160,30,.42);
    box-shadow:
        0 30px 65px rgba(24,34,49,.11);
}
.fso-offer:not(.fso-offer-featured):hover::before {
    width: 7px;
}
.fso-offer-one:hover {
    transform:
        translateX(9px);
}
.fso-offer-featured:hover {
    transform:
        translateX(-9px);
    box-shadow:
        0 34px 75px rgba(24,34,49,.20);
}
.fso-offer-three:hover {
    transform:
        translateX(9px);
}
/* =========================================================
   BOTTOM
========================================================= */
.fso-bottom {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin-top: 38px;
}
.fso-bottom-code {
    color:
        rgba(24,34,49,.40);
    font-size: 5px;
    font-weight: 900;
    letter-spacing: 1.8px;
}
.fso-bottom-line {
    height: 1px;
    background:
        rgba(24,34,49,.10);
}
.fso-bottom-note {
    display: flex;
    align-items: center;
    gap: 9px;
    color:
        rgba(24,34,49,.52);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fso-bottom-note i {
    width: 6px;
    height: 6px;
    background: var(--gd-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 5px
        rgba(244,160,30,.10);
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width:991.98px) {
    .fso-section {
        padding: 85px 0;
    }
    .fso-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .fso-head-text {
        max-width: 550px;
    }
    .fso-offer,
    .fso-offer-one,
    .fso-offer-featured,
    .fso-offer-three {
        width: 100%;
        margin-left: 0;
        grid-template-columns:
            180px
            60px
            1fr
            125px;
    }
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:575.98px) {
    .fso-section {
        padding: 65px 0;
    }
    .fso-head h2 {
        font-size:
            clamp(46px,14vw,64px);
        letter-spacing: -4px;
    }
    .fso-offer {
        width: 100%;
        display: grid;
        grid-template-columns:
            110px 1fr;
        min-height: auto;
        margin-left: 0;
    }
    .fso-price {
        min-height: 170px;
        padding:
            22px 15px;
    }
    .fso-price strong {
        font-size: 62px;
        letter-spacing: -4px;
    }
    .fso-divider {
        display: none;
    }
    .fso-content {
        padding:
            25px 18px;
        border-left:
            1px solid rgba(24,34,49,.08);
    }
    .fso-content h3 {
        font-size: 28px;
    }
    .fso-content p {
        font-size: 9px;
    }
    .fso-action {
        grid-column:
            1 / -1;
        min-height: 58px;
        flex-direction: row;
        justify-content: space-between;
        padding:
            0 18px;
        border-left: 0;
        border-top:
            1px solid rgba(24,34,49,.09);
    }
    .fso-action i {
        width: 34px;
        height: 34px;
    }
    .fso-offer-featured
    .fso-action {
        border-top-color:
            rgba(15,23,34,.12);
    }
    .fso-featured-label {
        font-size: 4px;
    }
    .fso-bottom {
        grid-template-columns:
            1fr;
        gap: 12px;
    }
    .fso-bottom-line {
        display: none;
    }
}


/* =========================================================
   FRESNO ABOUT US
========================================================= */

.fab-section {
    position: relative;

    padding:
        110px 0;

    overflow: hidden;

    color:
        var(--gd-deep);

    background:
        linear-gradient(
            rgba(64,81,111,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(64,81,111,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f1f3f4
        );

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


/* BIG BACKGROUND WORD */

.fab-section::before {
    content: "ABOUT";

    position: absolute;

    left: -30px;
    bottom: -45px;

    color:
        rgba(24,34,49,.025);

    font-size:
        clamp(130px,19vw,320px);

    font-weight: 900;

    letter-spacing:
        -13px;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   LAYOUT
========================================================= */

.fab-layout {
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:
        clamp(45px,6vw,90px);

    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.fab-content {
    position: relative;

    padding:
        15px 0 20px;
}


/* KICKER */

.fab-kicker {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color:
        var(--gd-orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.fab-kicker::before {
    content: "";

    width: 44px;
    height: 2px;

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


/* TITLE */

.fab-content h2 {
    max-width: 720px;

    margin: 0;

    color:
        var(--gd-deep);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px,5.5vw,88px);

    line-height:
        .86;

    letter-spacing:
        -5px;
}


.fab-content h2 strong {
    display: block;

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


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

.fab-intro {
    display: grid;

    grid-template-columns:
        52px 1fr;

    gap: 18px;

    margin-top: 32px;

    padding-bottom: 27px;

    border-bottom:
        1px solid rgba(24,34,49,.10);
}


.fab-intro-no {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    color:
        var(--gd-white);

    background:
        var(--gd-navy);

    font-family:
        Georgia,
        serif;

    font-size: 14px;
}


.fab-intro p {
    max-width: 630px;

    margin: 0;

    color: #65727b;

    font-size: 12px;

    line-height: 1.85;
}


/* =========================================================
   TEXT
========================================================= */

.fab-text {
    max-width: 650px;

    margin:
        26px 0 0;

    color: #6a757d;

    font-size: 12px;

    line-height: 1.85;
}


.fab-text strong {
    color:
        var(--gd-deep);
}


/* =========================================================
   PRINCIPLES
========================================================= */

.fab-principles {
    display: grid;

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

    margin-top: 30px;

    border-top:
        1px solid rgba(24,34,49,.10);

    border-bottom:
        1px solid rgba(24,34,49,.10);
}


.fab-principle {
    min-height: 86px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        13px 12px;

    border-right:
        1px solid rgba(24,34,49,.10);

    transition:
        .35s var(--gd-ease);
}


.fab-principle:last-child {
    border-right: 0;
}


.fab-principle > span {
    color:
        var(--gd-orange);

    font-family:
        Georgia,
        serif;

    font-size: 18px;
}


.fab-principle small {
    display: block;

    margin-bottom: 3px;

    color:
        #91999e;

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1.2px;
}


.fab-principle strong {
    color:
        var(--gd-deep);

    font-family:
        Georgia,
        serif;

    font-size: 15px;
}


.fab-principle:hover {
    background:
        var(--gd-deep);
}


.fab-principle:hover strong {
    color:
        var(--gd-white);
}


.fab-principle:hover small {
    color:
        rgba(255,255,255,.4);
}


/* =========================================================
   ACTIONS
========================================================= */

.fab-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    margin-top: 30px;
}


/* BUTTON */

.fab-btn {
    min-height: 54px;

    padding:
        0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    color:
        var(--gd-dark);

    background:
        var(--gd-orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition:
        .35s var(--gd-ease);
}


.fab-btn i {
    transition:
        .3s;
}


.fab-btn:hover {
    color:
        var(--gd-white);

    background:
        var(--gd-deep);

    transform:
        translateY(-3px);
}


.fab-btn:hover i {
    color:
        var(--gd-orange);

    transform:
        translateX(4px);
}


/* CALL */

.fab-call {
    min-height: 54px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        0 15px;

    color:
        var(--gd-deep);

    border:
        1px solid rgba(24,34,49,.12);
}


.fab-call > i {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    color:
        var(--gd-orange);

    border:
        1px solid rgba(24,34,49,.10);

    border-radius: 50%;
}


.fab-call small {
    display: block;

    color:
        #939b9f;

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1px;
}


.fab-call strong {
    display: block;

    margin-top: 2px;

    font-size: 8px;
}


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

.fab-visual {
    position: relative;

    min-height: 660px;

    padding:
        0 0 45px 55px;
}


/* orange block behind image */

.fab-visual::before {
    content: "";

    position: absolute;

    right: -30px;
    top: 52px;

    width: 70%;
    height: 82%;

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


/* IMAGE */

.fab-image {
    position: absolute;

    left: 55px;
    right: 0;
    top: 0;
    bottom: 45px;

    z-index: 2;

    overflow: hidden;

    background:
        #c9ced1;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 87%,
            89% 100%,
            0 100%
        );

    box-shadow:
        0 30px 70px rgba(24,34,49,.16);
}


.fab-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(15,23,34,.40),
            transparent 45%
        ),
        linear-gradient(
            90deg,
            rgba(15,23,34,.16),
            transparent 50%
        );

    pointer-events: none;
}


.fab-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center;

    transition:
        transform 1s var(--gd-ease);
}


.fab-visual:hover
.fab-image img {
    transform:
        scale(1.035);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.fab-image-label {
    position: absolute;

    right: -4px;
    top: 33px;

    z-index: 5;

    width: 92px;
    height: 92px;

    display: flex;

    flex-direction: column;

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

    color:
        var(--gd-dark);

    background:
        var(--gd-orange);

    box-shadow:
        0 15px 35px rgba(24,34,49,.15);
}


.fab-image-label span {
    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.fab-image-label strong {
    margin-top: 2px;

    font-family:
        Georgia,
        serif;

    font-size: 31px;
}


/* =========================================================
   FLOATING SYSTEM CARD
========================================================= */

.fab-system-card {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 6;

    width:
        min(430px,70%);

    padding:
        25px 26px;

    color:
        var(--gd-white);

    background:
        rgba(24,34,49,.95);

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 24px 55px rgba(24,34,49,.23);

    backdrop-filter:
        blur(12px);
}


/* orange edge */

.fab-system-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 75px;
    height: 5px;

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


/* HEADER */

.fab-system-head {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;
}


.fab-system-head span,
.fab-system-head small {
    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.fab-system-head span {
    color:
        rgba(255,255,255,.38);
}


.fab-system-head small {
    color:
        var(--gd-orange);
}


.fab-system-head i {
    height: 1px;

    background:
        rgba(255,255,255,.10);
}


/* TITLE */

.fab-system-title {
    display: block;

    color:
        var(--gd-white);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(25px,2.4vw,36px);

    line-height: .95;

    letter-spacing:
        -1.5px;
}


.fab-system-title span {
    display: block;

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


/* SYSTEM LIST */

.fab-system-list {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 20px;
}


.fab-system-list span {
    padding:
        7px 9px;

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

    border:
        1px solid rgba(255,255,255,.10);

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   SIDE WORD
========================================================= */

.fab-side-word {
    position: absolute;

    left: 4px;
    top: 100px;

    z-index: 7;

    color:
        var(--gd-navy);

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 4px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);
}


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

.fab-bottom {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        55px auto 1fr auto;

    align-items: center;

    gap: 18px;

    margin-top: 55px;

    padding:
        22px 0;

    border-top:
        1px solid rgba(24,34,49,.11);

    border-bottom:
        1px solid rgba(24,34,49,.11);
}


.fab-bottom-number {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    color:
        var(--gd-dark);

    background:
        var(--gd-orange);

    font-family:
        Georgia,
        serif;

    font-size: 13px;
}


.fab-bottom-copy small {
    display: block;

    margin-bottom: 3px;

    color:
        var(--gd-orange);

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.fab-bottom-copy strong {
    color:
        var(--gd-deep);

    font-family:
        Georgia,
        serif;

    font-size: 16px;
}


.fab-bottom-line {
    height: 1px;

    background:
        rgba(24,34,49,.12);
}


.fab-bottom-code {
    color:
        rgba(24,34,49,.42);

    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1.6px;
}


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

@media(max-width:991.98px) {

    .fab-section {
        padding:
            85px 0;
    }


    .fab-layout {
        grid-template-columns:
            1fr;
    }


    .fab-content {
        max-width:
            760px;
    }


    .fab-visual {
        min-height:
            600px;

        max-width:
            760px;

        width: 100%;

        margin:
            15px auto 0;
    }

}


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

@media(max-width:575.98px) {

    .fab-section {
        padding:
            65px 0;
    }


    .fab-content h2 {
        font-size:
            clamp(45px,14vw,64px);

        letter-spacing:
            -4px;
    }


    .fab-intro {
        grid-template-columns:
            42px 1fr;

        gap: 12px;
    }


    .fab-principles {
        grid-template-columns:
            1fr;
    }


    .fab-principle {
        border-right: 0;

        border-bottom:
            1px solid rgba(24,34,49,.10);
    }


    .fab-actions {
        display: grid;

        grid-template-columns:
            1fr;
    }


    .fab-btn,
    .fab-call {
        width: 100%;
    }


    .fab-visual {
        min-height:
            500px;

        padding:
            0 0 65px 18px;
    }


    .fab-visual::before {
        right: -10px;

        top: 30px;

        width: 74%;

        height: 77%;
    }


    .fab-image {
        left: 18px;

        bottom: 65px;

        clip-path:
            polygon(
                0 0,
                100% 0,
                100% 92%,
                91% 100%,
                0 100%
            );
    }


    .fab-image-label {
        right: 0;
        top: 20px;

        width: 70px;
        height: 70px;
    }


    .fab-image-label strong {
        font-size: 24px;
    }


    .fab-system-card {
        width:
            calc(100% - 20px);

        padding:
            21px 18px;
    }


    .fab-side-word {
        display: none;
    }


    .fab-bottom {
        grid-template-columns:
            42px 1fr;

        gap: 12px;
    }


    .fab-bottom-line,
    .fab-bottom-code {
        display: none;
    }

}

/* =========================================================
   FRESNO GARAGE DOOR PRO
   FAQ / DARK MECHANICAL INDEX
========================================================= */

.ffq-section {
    position: relative;

    padding: 110px 0;

    overflow: hidden;

    color: var(--gd-white);

    background:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            var(--gd-dark),
            #0a1018
        );

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


/* BIG BACKGROUND WORD */

.ffq-section::before {
    content: "FAQ";

    position: absolute;

    right: -20px;
    top: 15px;

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

    font-size: clamp(180px,27vw,440px);

    font-weight: 900;

    letter-spacing: -20px;

    line-height: .8;

    pointer-events: none;
}


/* ORANGE TOP RAIL */

.ffq-section::after {
    content: "";

    position: absolute;

    left: 4%;
    top: 0;

    width: 150px;
    height: 5px;

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


/* =========================================================
   HEADER
========================================================= */

.ffq-head {
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        390px;

    align-items: end;

    gap: 70px;

    margin-bottom: 65px;
}


.ffq-kicker {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: var(--gd-orange);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.ffq-kicker::before {
    content: "";

    width: 43px;
    height: 2px;

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


.ffq-title-wrap h2 {
    margin: 0;

    color: var(--gd-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(55px,6.5vw,100px);

    line-height: .84;

    letter-spacing: -5px;
}


.ffq-title-wrap h2 strong {
    display: block;

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


/* RIGHT HEADER */

.ffq-head-side {
    position: relative;

    padding:
        0 0 5px 25px;

    border-left:
        1px solid rgba(255,255,255,.12);
}


.ffq-head-number {
    display: block;

    margin-bottom: 14px;

    color: var(--gd-orange);

    font-family: Georgia, serif;

    font-size: 26px;
}


.ffq-head-side p {
    margin: 0;

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

    font-size: 11px;

    line-height: 1.8;
}


/* =========================================================
   BOARD
========================================================= */

.ffq-board {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        34% 66%;

    min-height: 620px;

    border:
        1px solid rgba(255,255,255,.10);

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

    box-shadow:
        0 35px 80px rgba(0,0,0,.20);
}


/* =========================================================
   LEFT PANEL
========================================================= */

.ffq-board-intro {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        28px 30px 34px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--gd-navy),
            var(--gd-deep)
        );

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


/* ORANGE CORNER */

.ffq-board-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 75px;
    height: 5px;

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


/* CODE */

.ffq-board-code {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;
}


.ffq-board-code span,
.ffq-board-code small {
    font-size: 5px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.ffq-board-code span {
    color: rgba(255,255,255,.35);
}


.ffq-board-code small {
    color: var(--gd-orange);
}


.ffq-board-code i {
    height: 1px;

    background: rgba(255,255,255,.10);
}


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

.ffq-big-mark {
    position: relative;

    z-index: 2;

    margin:
        25px 0 -20px;

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

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(170px,17vw,260px);

    line-height: .8;

    text-align: center;
}


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

.ffq-intro-copy {
    position: relative;

    z-index: 3;

    margin-top: auto;
}


.ffq-intro-copy > small {
    display: block;

    margin-bottom: 10px;

    color: var(--gd-orange);

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.ffq-intro-copy h3 {
    margin: 0;

    color: var(--gd-white);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(31px,3.3vw,49px);

    line-height: .92;

    letter-spacing: -2px;
}


.ffq-intro-copy h3 span {
    display: block;

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


.ffq-intro-copy p {
    max-width: 360px;

    margin:
        18px 0 0;

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

    font-size: 10px;

    line-height: 1.75;
}


/* =========================================================
   MOTION DECORATION
========================================================= */

.ffq-motion {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr 1.5fr .65fr;

    gap: 7px;

    align-items: center;

    margin-top: 30px;
}


.ffq-motion span {
    display: block;

    height: 4px;

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

    overflow: hidden;
}


.ffq-motion span::before {
    content: "";

    display: block;

    width: 45%;
    height: 100%;

    background:
        var(--gd-orange);

    animation:
        ffqSlide 3.2s ease-in-out infinite alternate;
}


.ffq-motion span:nth-child(2)::before {
    animation-delay: .5s;
}


.ffq-motion span:nth-child(3)::before {
    animation-delay: 1s;
}


.ffq-motion > i {
    position: absolute;

    right: 0;
    top: -7px;

    width: 18px;
    height: 18px;

    border:
        1px solid rgba(244,160,30,.30);

    border-radius: 50%;

    animation:
        ffqSpin 8s linear infinite;
}


.ffq-motion > i::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -3px;

    width: 4px;
    height: 4px;

    background:
        var(--gd-orange);

    border-radius: 50%;
}


@keyframes ffqSlide {

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

    to {
        transform: translateX(170%);
    }

}


@keyframes ffqSpin {

    to {
        transform: rotate(360deg);
    }

}


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

.ffq-list {
    min-width: 0;
}


/* =========================================================
   ITEM
========================================================= */

.ffq-item {
    position: relative;

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

    transition:
        background .35s var(--gd-ease);
}


.ffq-item:last-child {
    border-bottom: 0;
}


.ffq-item summary {
    position: relative;

    min-height: 105px;

    display: grid;

    grid-template-columns:
        65px 1fr 50px;

    align-items: center;

    gap: 18px;

    padding:
        15px 25px;

    cursor: pointer;

    list-style: none;

    transition:
        .35s var(--gd-ease);
}


.ffq-item summary::-webkit-details-marker {
    display: none;
}


/* NUMBER */

.ffq-number {
    color:
        rgba(255,255,255,.22);

    font-family:
        Georgia,
        serif;

    font-size: 22px;

    transition:
        .3s;
}


/* QUESTION */

.ffq-item summary h3 {
    margin: 0;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(17px,1.7vw,24px);

    font-weight: 400;

    line-height: 1.25;

    transition:
        .3s;
}


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

.ffq-toggle {
    position: relative;

    width: 42px;
    height: 42px;

    display: block;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius: 50%;

    transition:
        .35s var(--gd-ease);
}


.ffq-toggle::before,
.ffq-toggle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 12px;
    height: 1px;

    background:
        var(--gd-orange);

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

    transition:
        .3s;
}


.ffq-toggle::after {
    transform:
        translate(-50%,-50%)
        rotate(90deg);
}


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

.ffq-item[open] {
    background:
        rgba(255,255,255,.035);
}


.ffq-item[open]::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

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


.ffq-item[open]
.ffq-number {
    color:
        var(--gd-orange);
}


.ffq-item[open]
summary h3 {
    color:
        var(--gd-white);
}


.ffq-item[open]
.ffq-toggle {
    background:
        var(--gd-orange);

    border-color:
        var(--gd-orange);

    transform:
        rotate(180deg);
}


.ffq-item[open]
.ffq-toggle::before {
    background:
        var(--gd-dark);
}


.ffq-item[open]
.ffq-toggle::after {
    opacity: 0;
}


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

.ffq-answer {
    display: grid;

    grid-template-columns:
        65px 1fr;

    gap: 18px;

    padding:
        0 75px 28px 25px;
}


.ffq-answer-line {
    position: relative;

    width: 35px;
    height: 1px;

    margin:
        10px auto 0;

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


.ffq-answer-line::before {
    content: "";

    position: absolute;

    right: -3px;
    top: -2px;

    width: 5px;
    height: 5px;

    background:
        var(--gd-orange);

    border-radius: 50%;
}


.ffq-answer p {
    max-width: 690px;

    margin: 0;

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

    font-size: 11px;

    line-height: 1.8;
}


/* =========================================================
   HOVER
========================================================= */

.ffq-item:not([open]):hover {
    background:
        rgba(255,255,255,.025);
}


.ffq-item:not([open]):hover
summary {
    padding-left: 32px;
}


.ffq-item:not([open]):hover
.ffq-number {
    color:
        var(--gd-orange);
}


.ffq-item:not([open]):hover
summary h3 {
    color:
        var(--gd-white);
}


.ffq-item:not([open]):hover
.ffq-toggle {
    border-color:
        var(--gd-orange);
}


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

.ffq-bottom {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 25px;

    margin-top: 35px;
}


.ffq-bottom-label {
    display: flex;

    align-items: center;

    gap: 10px;

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

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.ffq-bottom-label > i {
    width: 7px;
    height: 7px;

    background:
        var(--gd-orange);

    border-radius: 50%;

    box-shadow:
        0 0 0 5px
        rgba(244,160,30,.08);
}


.ffq-bottom-line {
    height: 1px;

    background:
        rgba(255,255,255,.09);
}


.ffq-bottom > a {
    display: flex;

    align-items: center;

    gap: 14px;

    color:
        var(--gd-white);

    font-size: 6px;

    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.ffq-bottom > a > span {
    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    color:
        var(--gd-dark);

    background:
        var(--gd-orange);

    border-radius: 50%;

    transition:
        .3s var(--gd-ease);
}


.ffq-bottom > a:hover > span {
    transform:
        translateX(5px);

    background:
        var(--gd-white);
}


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

@media(max-width:991.98px) {

    .ffq-section {
        padding:
            85px 0;
    }


    .ffq-head {
        grid-template-columns:
            1fr;

        gap: 28px;
    }


    .ffq-head-side {
        max-width: 600px;
    }


    .ffq-board {
        grid-template-columns:
            1fr;
    }


    .ffq-board-intro {
        min-height: 390px;

        border-right: 0;

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


    .ffq-big-mark {
        position: absolute;

        right: 50px;
        top: 75px;

        margin: 0;
    }


    .ffq-intro-copy {
        max-width: 480px;

        margin-top: auto;
    }

}


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

@media(max-width:575.98px) {

    .ffq-section {
        padding:
            65px 0;
    }


    .ffq-title-wrap h2 {
        font-size:
            clamp(45px,14vw,64px);

        letter-spacing:
            -4px;
    }


    .ffq-board-intro {
        min-height: 420px;

        padding:
            25px 20px;
    }


    .ffq-big-mark {
        right: 20px;
        top: 80px;

        font-size: 180px;
    }


    .ffq-item summary {
        min-height: 95px;

        grid-template-columns:
            35px 1fr 38px;

        gap: 10px;

        padding:
            15px 15px;
    }


    .ffq-number {
        font-size: 16px;
    }


    .ffq-item summary h3 {
        font-size: 16px;
    }


    .ffq-toggle {
        width: 34px;
        height: 34px;
    }


    .ffq-answer {
        grid-template-columns:
            35px 1fr;

        gap: 10px;

        padding:
            0 18px 24px 15px;
    }


    .ffq-answer-line {
        width: 22px;
    }


    .ffq-bottom {
        grid-template-columns:
            1fr;

        gap: 15px;
    }


    .ffq-bottom-line {
        display: none;
    }


    .ffq-bottom > a {
        justify-content:
            space-between;
    }

}