@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 {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--petrol);
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ivory)
}

a {
    text-decoration: none
}

button,
a,
summary {
    -webkit-tap-highlight-color: transparent
}

svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.site-shell {
    overflow: hidden
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(125deg, #254859 0%, #497c80 57%, #bbd2ca 100%);
    overflow: hidden
}

.hero-photo {
    position: absolute;
    z-index: -3;
    inset: 0 0 0 44%;
    background: url('../garage-door/bg-door.webp') center center/cover no-repeat;
    animation: photo-arrive 1.9s ease-out both;
    transform-origin: center
}

.hero-wash {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 39, 54, .89) 0%, rgba(12, 45, 57, .65) 43%, rgba(5, 24, 35, .08) 80%), linear-gradient(0deg, rgba(6, 28, 40, .52), transparent 48%)
}

.hero-grain {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .34;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .32) .65px, transparent .8px), repeating-linear-gradient(140deg, transparent 0 34px, rgba(255, 255, 255, .035) 35px, transparent 36px);
    background-size: 6px 6px, 180px 180px;
    mask-image: linear-gradient(90deg, #000, transparent 78%)
}

.site-header {
    position: relative;
    z-index: 30;
    min-height: 104px
}

.logo {
    height: 106px;
    min-width: 235px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 42px 18px 26px;
    background: var(--ivory);
    color: var(--ink);
    clip-path: polygon(0 0, 100% 0, 85% 75%, 66% 100%, 0 100%);
    transition: background .3s
}

.logo:hover {
    background: var(--lime);
    color: var(--ink)
}

.logo svg {
    width: 42px;
    height: 42px;
    color: #0b3240;
    stroke-width: 1.25
}

.logo span {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.8px
}

.logo small {
    display: block;
    font-size: 9px;
    letter-spacing: 2px;
    margin-top: 5px
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(9px, 1.2vw, 20px);
    padding: 0 clamp(16px, 2.2vw, 35px) 0 10px
}

.nav-content>a,
.nav-drop>summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    color: white;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 2.7px;
    text-transform: uppercase;
    padding: 21px 2px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap
}

.nav-drop>summary::-webkit-details-marker {
    display: none
}

.nav-content>a::after,
.nav-drop>summary::after {
    content: "";
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--lime);
    transition: width .3s
}

.nav-content>a:hover::after,
.nav-content>a.current::after,
.nav-drop[open]>summary::after,
.nav-drop>summary:hover::after {
    width: 100%
}

.nav-content a:hover,
.nav-drop summary:hover {
    color: var(--lime)
}

.chev {
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s
}

.nav-drop[open] .chev {
    transform: rotate(225deg)
}

.nav-drop {
    position: relative
}

.drop-panel {
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 240px;
    background: rgba(11, 31, 39, .97);
    border-top: 2px solid var(--lime);
    padding: 10px;
    box-shadow: 0 20px 35px #0004;
    animation: menu-in .25s ease both
}

.drop-panel a {
    display: block;
    color: var(--ivory);
    font-size: 12px;
    padding: 13px 14px;
    transition: background .25s, color .25s
}

.drop-panel a:hover {
    color: var(--petrol);
    background: var(--lime)
}

.nav-state,
.nav-trigger {
    display: none
}

.hero-main {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 135px;
    padding-bottom: 64px
}

.hero-main>.row {
    flex: 1;
    align-items: center !important
}

.hero-main>.row>.col-12 {
    position: relative
}

.hero-overline {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 800;
    color: var(--ivory);
    margin: 0 0 44px 9%;
    animation: fade-down .9s both
}

.overline-rule {
    width: 68px;
    height: 1px;
    background: #ffffff82
}

.pulse {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 7px #d8ed8026;
    animation: glow 2s infinite
}

.outline-word {
    position: absolute;
    top: -12px;
    left: -2%;
    width: 100%;
    font-size: clamp(115px, 20.3vw, 330px);
    line-height: .85;
    font-weight: 900;
    letter-spacing: -.09em;
    white-space: nowrap;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .69);
    color: transparent;
    user-select: none;
    z-index: 0;
    animation: outline-in 1.5s both
}

.hero-copy {
    position: relative;
    z-index: 1;
    margin-top: 128px;
    margin-left: 9%;
    max-width: 920px;
    animation: copy-in 1.1s .3s both
}

.hero-kicker {
    font-size: 12px;
    letter-spacing: 5px;
    font-weight: 700;
    color: var(--lime);
    margin-bottom: 11px
}

.hero-copy h1 {
    margin: 0;
    text-transform: uppercase;
    line-height: .91;
    font-size: clamp(56px, 7.6vw, 128px);
    font-weight: 900;
    letter-spacing: -.055em;
    text-wrap: balance;
    text-shadow: 0 3px 18px #0003
}

.hero-copy h1 span,
.hero-copy h1 strong {
    display: block;
    font-weight: 900
}

.hero-copy h1 strong {
    color: var(--lime);
    font-size: .60em;
    letter-spacing: -.05em;
    white-space: normal
}

.hero-copy h1 em {
    font-style: normal;
    color: var(--ivory)
}

.hero-copy p {
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.65;
    max-width: 650px;
    margin: 22px 0 26px;
    text-wrap: pretty;
    color: #f3f5f3
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap
}

.btn-primary-custom,
.btn-text-custom {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: transform .3s, background .3s, color .3s, border-color .3s
}

.btn-primary-custom {
    color: var(--ink);
    border: 1px solid var(--lime);
    background: var(--lime);
    padding: 17px 20px
}

.btn-primary-custom:hover {
    transform: translateY(-4px);
    background: transparent;
    color: var(--lime)
}

.btn-text-custom {
    color: var(--ivory);
    border-bottom: 1px solid #fff8;
    padding: 15px 0
}

.btn-text-custom:hover {
    transform: translateX(4px);
    color: var(--lime);
    border-color: var(--lime)
}

.btn-primary-custom svg,
.btn-text-custom svg {
    width: 19px;
    height: 19px;
    transition: transform .3s
}

.btn-primary-custom:hover svg,
.btn-text-custom:hover svg {
    transform: translateX(6px)
}
 

.social-rail {
    position: absolute;
    top: 41%;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: #0c384d;
    box-shadow: 8px 8px 40px #0001
}

.social-rail a {
    width: 46px;
    height: 52px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 900;
    color: white;
    border-bottom: 1px solid #ffffff25;
    transition: background .25s, color .25s, transform .25s
}

.social-rail a svg {
    width: 19px;
    height: 19px;
    transition: transform .25s
}

.social-rail a:hover svg {
    transform: scale(1.13)
}

.social-rail a:hover {
    background: var(--lime);
    color: var(--petrol);
    transform: translateX(4px)
}

.hero-bottom {
    position: relative;
    z-index: 6;
    padding: 31px 0 34px;
    background: var(--ink);
    clip-path: polygon(0 15%, 25% 0, 72% 0, 100% 13%, 100% 100%, 0 100%);
    box-shadow: 0 -10px 50px #0002
}

.hero-bottom::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 29%;
    background: linear-gradient(125deg, rgba(134, 188, 176, .18), transparent);
    pointer-events: none
}

.feature {
    display: flex;
    align-items: center;
    gap: 17px;
    color: var(--ivory);
    border-right: 1px solid #ffffff32;
    padding-right: 15px;
    min-height: 62px
}

.feature:hover {
    color: var(--lime)
}

.feature-icon {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    color: var(--lime);
    border: 1px solid #d8ed8060;
    transform: rotate(-8deg);
    transition: transform .4s, background .4s
}

.feature-icon svg {
    width: 28px;
    height: 28px;
    transform: rotate(8deg)
}

.feature:hover .feature-icon {
    transform: rotate(0) translateY(-4px);
    background: #d8ed801b
}

.feature b {
    display: block;
    font-size: 14px;
    letter-spacing: 1.4px
}

.feature small {
    display: block;
    color: #c1cfd0;
    font-size: 11px;
    margin-top: 6px;
    letter-spacing: .25px
}

.bottom-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px
}

.bottom-cta>span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #c1cfd0;
    font-size: 10px;
    letter-spacing: 2px
}

.bottom-cta>span svg {
    width: 13px;
    height: 13px
}

.bottom-cta>a {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    border-radius: 35px;
    border: 1px solid var(--lime);
    color: var(--lime);
    padding: 13px 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    transition: background .3s, color .3s, transform .3s
}

.bottom-cta>a:hover {
    color: var(--petrol);
    background: var(--lime);
    transform: translateY(-3px)
}

.bottom-cta>a svg {
    width: 16px;
    height: 16px
}

.nav-content>.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex-shrink: 0;
    padding: 13px 16px;
    border: 1px solid var(--lime);
    background: var(--lime);
    color: var(--ink);
    letter-spacing: 1.1px;
    font-size: 10px;
    transition: background .3s, color .3s, transform .3s
}

.nav-content>.nav-cta svg {
    width: 16px;
    height: 16px
}

.nav-content>.nav-cta:hover {
    color: var(--lime);
    background: transparent;
    transform: translateY(-2px)
}

.nav-content>.nav-cta::after {
    display: none
}

@keyframes photo-arrive {
    from {
        opacity: 0;
        transform: scale(1.08)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes outline-in {
    from {
        opacity: 0;
        transform: translateY(-45px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes copy-in {
    from {
        opacity: 0;
        transform: translateY(35px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes glow {
    50% {
        box-shadow: 0 0 0 12px #d8ed8000
    }
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(min-width:1550px) {
    .hero-main {
        padding-top: 130px
    }

    .hero-copy {
        margin-top: 180px
    }

    .hero-bottom {
        padding-top: 42px;
        padding-bottom: 42px
    }
}

@media(max-width:1199px) {
    .logo {
        min-width: 215px;
        padding-right: 35px
    }

    .nav-content {
        gap: 9px;
        padding-right: 16px
    }

    .nav-content>.nav-cta {
        padding: 11px 12px;
        font-size: 9px
    }

    .nav-content>a,
    .nav-drop>summary {
        font-size: 10px;
        letter-spacing: 1.6px
    }

    .hero-copy {
        margin-top: 110px
    }

    .hero-bottom {
        clip-path: polygon(0 6%, 28% 0, 70% 0, 100% 6%, 100% 100%, 0 100%)
    }

    .bottom-cta {
        align-items: flex-start
    }

    .feature {
        border-right: none
    }

    .outline-word {
        top: 14px
    }
}

@media(max-width:991px) {
    .site-header {
        min-height: 82px
    }

    .logo {
        height: 82px;
        min-width: 220px
    }

    .nav-trigger {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-right: 24px;
        height: 82px;
        color: white;
        font-size: 12px;
        letter-spacing: 2px;
        font-weight: 800;
        cursor: pointer
    }

    .nav-trigger svg {
        width: 26px;
        height: 26px
    }

    .nav-content {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 82px;
        padding: 16px 5%;
        background: #0c2733;
        box-shadow: 0 25px 30px #0003;
        max-height: calc(100svh - 82px);
        overflow: auto
    }

    .nav-state:checked~.nav-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .nav-content>a,
    .nav-drop>summary {
        padding: 15px 10px;
        font-size: 12px;
        letter-spacing: 2px;
        border-bottom: 1px solid #ffffff20
    }

    .nav-content>.nav-cta {
        margin: 14px 10px 6px;
        align-self: flex-start;
        padding: 14px 20px;
        border: 1px solid var(--lime)
    }

    .nav-content>a::after,
    .nav-drop>summary::after {
        bottom: 0
    }

    .nav-drop {
        width: 100%
    }

    .drop-panel {
        position: static;
        box-shadow: none;
        padding: 4px 0 8px 16px;
        border-top: 0
    }

    .hero-photo {
        left: 27%
    }

    .hero-wash {
        background: linear-gradient(90deg, #082837ed, rgba(8, 40, 55, .68) 65%, #0a273456), linear-gradient(0deg, #092b3a8c, transparent 70%)
    }

    .hero-main {
        padding-top: 90px
    }

    .hero-copy {
        margin-top: 120px;
        margin-left: 4%
    }

    .hero-overline {
        margin-left: 4%
    }

    .outline-word {
        top: 35px;
        left: 0;
        font-size: 21.8vw
    }

    .social-rail {
        top: auto;
        bottom: 235px
    }

    .hero-bottom {
        clip-path: none
    }

    .hero-bottom .row {
        row-gap: 22px
    }

     
}

@media(max-width:767px) {
    .hero {
        min-height: 100svh
    }

    .hero-photo {
        left: 14%;
        background-position: 60% center
    }

    .hero-wash {
        background: linear-gradient(90deg, #082635e8, #08263577), linear-gradient(0deg, #082635c9, transparent)
    }

    .hero-main {
        padding: 100px 0 55px
    }

    .hero-overline {
        margin: 0 0 46px;
        gap: 9px;
        font-size: 8px;
        letter-spacing: 1.2px
    }

    .overline-rule {
        width: 20px
    }

    .outline-word {
        top: 35px;
        left: 0;
        font-size: 22vw;
        -webkit-text-stroke: 1.4px #ffffff80
    }

    .hero-copy {
        margin: 90px 0 0
    }

    .hero-copy h1 {
        font-size: clamp(48px, 10vw, 85px)
    }

    .hero-copy h1 strong {
        font-size: .65em
    }

    .hero-copy p {
        font-size: 14px;
        max-width: 560px
    }

    .hero-kicker {
        font-size: 9px;
        letter-spacing: 2.5px
    }

    .social-rail {
        display: none
    }

    .hero-bottom {
        padding: 28px 0
    }

    .feature {
        min-height: 52px
    }

    

    .bottom-cta {
        align-items: flex-start
    }

    .hero-main>.row {
        align-items: end !important
    }
}

@media(max-width:430px) {
    .logo {
        min-width: 186px;
        padding-left: 14px;
        padding-right: 27px;
        gap: 6px
    }

    .logo svg {
        width: 32px
    }

    .logo span {
        font-size: 13px
    }

    .logo small {
        font-size: 8px;
        letter-spacing: 1.3px
    }

    .nav-trigger {
        margin-right: 12px;
        font-size: 10px
    }

    .hero-main {
        padding-top: 95px
    }

    .hero-overline {
        letter-spacing: 0;
        font-size: 7px
    }

    .outline-word {
        top: 47px
    }

    .hero-copy {
        margin-top: 75px
    }

    .hero-copy h1 {
        font-size: 48px
    }

    .hero-copy h1 strong {
        font-size: .66em
    }

    .hero-actions {
        gap: 17px
    }

    .btn-primary-custom {
        padding: 14px 15px
    }

    .btn-primary-custom,
    .btn-text-custom {
        font-size: 10px;
        gap: 10px
    }

    .feature b {
        font-size: 12px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}



:root {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;
}

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

.rxc-why {
    position: relative;
    overflow: hidden;
    padding: 55px 0 25px;
    color: var(--ink);
    background: var(--ivory);
}

.rxc-why .container {
    position: relative;
    z-index: 1;
}

/* TOP BAR */

.rxc-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(9, 35, 51, .18);
}

.rxc-brand {
    color: var(--petrol);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.6px;
    text-decoration: none;
}

.rxc-brand span {
    margin-left: 3px;
    color: #71843b;
    font-size: 10px;
    vertical-align: top;
}

.rxc-top-label {
    color: var(--slate);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: right;
}

/* HEADING */

.rxc-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    padding: 52px 0 35px;
}

.rxc-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: var(--slate);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rxc-eyebrow span {
    width: 9px;
    height: 9px;
    background: var(--lime);
    border: 1px solid var(--ink);
    transform: rotate(45deg);
}

.rxc-heading-main {
    min-width: 0;
}

.rxc-heading h2 {
    margin: 0;
    color: var(--petrol);
    font-size: clamp(43px, 6vw, 75px);
    font-weight: 900;
    line-height: .99;
    letter-spacing: -3.5px;
}

.rxc-heading h2 span {
    display: block;
    margin-top: 9px;
    color: var(--ink);
}

.rxc-heading-side {
    flex: 0 0 235px;
    padding-bottom: 5px;
}

.rxc-side-number {
    display: inline-block;
    margin-bottom: 13px;
    padding: 7px 10px;
    color: var(--ink);
    background: var(--lime);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.rxc-heading-side p {
    margin: 0;
    padding-left: 14px;
    color: #526168;
    border-left: 2px solid var(--mint);
    font-size: 12px;
    line-height: 1.9;
}

/* ========================================
   CANVAS
======================================== */

.rxc-canvas {
    position: relative;
    min-height: 660px;
    isolation: isolate;
}

/* Blueprint backdrop */

.rxc-blueprint {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    background-color: #f0ead9;
    background-image:
        linear-gradient(rgba(9, 35, 51, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(9, 35, 51, .055) 1px, transparent 1px);
    background-size: 28px 28px;
}

.rxc-blueprint-v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(9, 35, 51, .12);
}

.rxc-blueprint-h {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(9, 35, 51, .12);
}

.rxc-blueprint-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(9, 35, 51, .15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.rxc-blueprint-cross {
    position: absolute;
    width: 20px;
    height: 20px;
}

.rxc-blueprint-cross::before,
.rxc-blueprint-cross::after {
    position: absolute;
    content: "";
    background: var(--ink);
}

.rxc-blueprint-cross::before {
    top: 9px;
    width: 20px;
    height: 1px;
}

.rxc-blueprint-cross::after {
    left: 9px;
    width: 1px;
    height: 20px;
}

.rxc-cross-one {
    top: 24px;
    left: 24px;
}

.rxc-cross-two {
    right: 24px;
    bottom: 24px;
}

/* Main image */

.rxc-main-photo {
    position: absolute;
    top: 75px;
    left: 50%;
    width: 43%;
    height: 500px;
    overflow: hidden;
    background: var(--slate);
    border: 8px solid var(--ivory);
    outline: 1px solid rgba(9, 35, 51, .25);
    transform: translateX(-50%);
}

.rxc-main-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}

.rxc-main-photo:hover > img {
    transform: scale(1.045);
}

.rxc-photo-caption {
    position: absolute;
    right: 12px;
    bottom: 15px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    color: var(--ivory);
    background: rgba(9, 35, 51, .91);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.rxc-caption-line {
    flex: 0 0 19px;
    height: 2px;
    background: var(--lime);
}

.rxc-photo-index {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--ink);
    background: var(--lime);
    font-size: 21px;
    font-weight: 900;
}

.rxc-photo-index span {
    color: var(--ink);
}

/* ========================================
   FOUR FEATURE POINTS
======================================== */

.rxc-point {
    position: absolute;
    z-index: 2;
    width: 29%;
    padding: 22px 22px 25px;
    background: var(--ivory);
    border: 1px solid rgba(9, 35, 51, .17);
    box-shadow: 7px 7px 0 rgba(16, 30, 39, .055);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.rxc-point:hover {
    border-color: var(--mint);
    box-shadow: 9px 9px 0 rgba(134, 188, 176, .24);
    transform: translateY(-4px);
}

.rxc-point-one {
    top: 35px;
    left: 3%;
}

.rxc-point-two {
    top: 35px;
    right: 3%;
}

.rxc-point-three {
    bottom: 35px;
    left: 3%;
}

.rxc-point-four {
    right: 3%;
    bottom: 35px;
}

.rxc-point-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 17px;
    color: var(--ink);
    background: var(--lime);
    font-size: 10px;
    font-weight: 900;
}

.rxc-point h3 {
    margin: 0 0 9px;
    color: var(--petrol);
    font-size: 19px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: -.4px;
}

.rxc-point p {
    margin: 0;
    color: #536168;
    font-size: 11px;
    line-height: 1.85;
}

.rxc-point-decoration {
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 18px;
    background: var(--mint);
    transition: width .3s ease, background .3s ease;
}

.rxc-point:hover .rxc-point-decoration {
    width: 65px;
    background: #71843b;
}

/* Circular number markers */

.rxc-orbit {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    color: var(--ink);
    background: var(--lime);
    border: 5px solid var(--ivory);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
}

.rxc-orbit-one {
    top: 125px;
    left: 31%;
}

.rxc-orbit-two {
    top: 125px;
    right: 31%;
}

.rxc-orbit-three {
    bottom: 125px;
    left: 31%;
}

.rxc-orbit-four {
    right: 31%;
    bottom: 125px;
}

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

.rxc-bottom-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 0 0;
}

.rxc-bottom-marker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.rxc-bottom-marker > span {
    width: 8px;
    height: 8px;
    background: var(--mint);
    border-radius: 50%;
}

.rxc-bottom-bar p {
    flex: 1;
    margin: 0;
    color: #536168;
    font-size: 11px;
    text-align: center;
}

.rxc-bottom-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
    color: var(--ivory);
    background: var(--petrol);
    border: 1px solid var(--petrol);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color .25s ease, background .25s ease;
}

.rxc-bottom-link:hover {
    color: var(--ink);
    background: var(--lime);
    border-color: var(--lime);
}

.rxc-bottom-link span {
    font-size: 17px;
}

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

@media (max-width: 991.98px) {
    .rxc-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .rxc-heading-side {
        flex-basis: auto;
        max-width: 420px;
    }

    .rxc-canvas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        min-height: auto;
        padding: 24px;
        background-color: #f0ead9;
        background-image:
            linear-gradient(rgba(9, 35, 51, .055) 1px, transparent 1px),
            linear-gradient(90deg, rgba(9, 35, 51, .055) 1px, transparent 1px);
        background-size: 28px 28px;
    }

    .rxc-blueprint {
        display: none;
    }

    .rxc-main-photo {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1 / -1;
        width: 100%;
        height: 420px;
        transform: none;
    }

    .rxc-point {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 195px;
        padding: 20px;
    }

    .rxc-orbit {
        display: none;
    }

    .rxc-bottom-bar {
        flex-wrap: wrap;
    }

    .rxc-bottom-marker {
        flex: 1;
    }

    .rxc-bottom-bar p {
        order: 3;
        flex-basis: 100%;
        text-align: left;
    }
}

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

@media (max-width: 575.98px) {
    .rxc-why {
        padding-top: 38px;
    }

    .rxc-top-label {
        max-width: 120px;
        font-size: 8px;
        letter-spacing: .8px;
        line-height: 1.6;
    }

    .rxc-heading {
        gap: 18px;
        padding: 35px 0 25px;
    }

    .rxc-heading h2 {
        font-size: clamp(37px, 10vw, 49px);
        letter-spacing: -2px;
        line-height: 1.05;
    }

    .rxc-heading h2 span {
        margin-top: 6px;
    }

    .rxc-heading-side p {
        font-size: 11px;
    }

    .rxc-canvas {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
        padding: 13px;
    }

    .rxc-main-photo {
        grid-column: auto;
        height: 330px;
        border-width: 5px;
    }

    .rxc-photo-caption {
        right: 8px;
        bottom: 8px;
        left: 8px;
        padding: 10px;
        font-size: 7px;
        letter-spacing: .6px;
    }

    .rxc-photo-index {
        width: 33px;
        height: 33px;
        font-size: 17px;
    }

    .rxc-point {
        min-height: auto;
        padding: 19px;
    }

    .rxc-point-number {
        width: 30px;
        height: 30px;
        margin-bottom: 12px;
    }

    .rxc-point h3 {
        font-size: 18px;
    }

    .rxc-point p {
        font-size: 12px;
    }

    .rxc-point-decoration {
        margin-top: 14px;
    }

    .rxc-bottom-bar {
        gap: 13px;
        padding-top: 17px;
    }

    .rxc-bottom-marker {
        font-size: 8px;
        letter-spacing: .5px;
    }

    .rxc-bottom-link {
        justify-content: space-between;
        width: 100%;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    .rxc-why *,
    .rxc-why *::before,
    .rxc-why *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================
   ROCKLIN GARAGE DOOR REPAIR
   WIDE IMAGE + GEOMETRIC PETROL PANEL
========================================= */

.rcl-wide-hero {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    position: relative;
    isolation: isolate;
    min-height: 790px;
    overflow: hidden;
    background: var(--petrol);
    color: var(--ivory);
    font-family: Arial, Helvetica, sans-serif;
}

.rcl-wide-hero *,
.rcl-wide-hero *::before,
.rcl-wide-hero *::after {
    box-sizing: border-box;
}

/* =========================================
   FULL-WIDTH BACKGROUND IMAGE
========================================= */

.rcl-wide-background {
    position: absolute;
    z-index: -3;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
}

.rcl-wide-overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: rgba(9, 35, 51, 0.22);
    pointer-events: none;
}

/* =========================================
   MAIN WRAPPER
========================================= */

.rcl-wide-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 790px;
    padding: 0 6.2%;
}

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

.rcl-wide-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 94px;
    border-bottom: 1px solid rgba(246, 241, 227, 0.5);
}

.rcl-wide-top a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ivory);
    text-decoration: none;
}

.rcl-brand-symbol {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border: 2px solid var(--lime);
    color: var(--lime);
    font-size: 26px;
    font-weight: 900;
    transform: rotate(-5deg);
}

.rcl-brand-name {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rcl-brand-name small {
    color: var(--mint);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.rcl-top-location {
    color: var(--ivory);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

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

.rcl-wide-content {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 45px 0 55px;
}

/* =========================================
   GEOMETRIC PETROL PANEL
========================================= */

.rcl-geometric-panel {
    position: relative;
    width: min(650px, 65%);
    padding: clamp(35px, 5vw, 65px);
    background:#12313f;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 91%,
        91% 100%,
        0 100%
    );
}

/* Lime geometric corner */

.rcl-panel-decoration {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 7px;
    padding: 0 24px 24px;
    background: var(--lime);
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        18% 100%
    );
}

.rcl-panel-decoration span {
    display: block;
    width: 3px;
    height: 27px;
    background: var(--ink);
}

/* =========================================
   EYEBROW
========================================= */

.rcl-wide-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 23px;
    padding-right: 65px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.7;
}

.rcl-wide-eyebrow > span {
    display: block;
    width: 27px;
    height: 3px;
    flex-shrink: 0;
    background: var(--lime);
}

/* =========================================
   HEADING
========================================= */

.rcl-geometric-panel h1 {
    margin: 0;
    color: var(--ivory);
    font-size: clamp(39px, 5vw, 68px);
    font-weight: 900;
    line-height: 0.99;
    letter-spacing: -2.7px;
    overflow-wrap: break-word;
}

.rcl-geometric-panel h1 strong {
    display: block;
    color: var(--ivory);
    font-weight: 900;
}

.rcl-geometric-panel h1 strong:last-child {
    color: var(--lime);
}

.rcl-heading-rule {
    width: 85px;
    height: 4px;
    margin: 28px 0 21px;
    background: var(--mint);
}

/* =========================================
   ORIGINAL FULL PARAGRAPH
========================================= */

.rcl-wide-description {
    max-width: 440px;
    margin: 0;
    color: var(--ivory);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.85;
    overflow-wrap: break-word;
}

/* =========================================
   SERVICE DETAILS
========================================= */

.rcl-wide-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--slate);
}

.rcl-wide-details > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ivory);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.rcl-detail-number {
    color: var(--mint);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

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

.rcl-panel-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: var(--mint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.7;
}

.rcl-panel-bottom-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: var(--lime);
}

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

.rcl-wide-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 65px;
    border-top: 1px solid rgba(246, 241, 227, 0.5);
    color: var(--ivory);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.7;
}

.rcl-bottom-divider {
    width: 35px;
    height: 2px;
    flex-shrink: 0;
    background: var(--lime);
}

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

@media (max-width: 991px) {
    .rcl-wide-hero,
    .rcl-wide-inner {
        min-height: 730px;
    }

    .rcl-wide-inner {
        padding-right: 4%;
        padding-left: 4%;
    }

    .rcl-wide-background {
        object-position: 60% center;
    }

    .rcl-geometric-panel {
        width: 76%;
        padding: 38px;
    }

    .rcl-geometric-panel h1 {
        font-size: clamp(42px, 6vw, 58px);
        letter-spacing: -1.8px;
    }

    .rcl-wide-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .rcl-wide-details {
        gap: 12px;
    }
}

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

@media (max-width: 767px) {
    .rcl-wide-hero,
    .rcl-wide-inner {
        min-height: 0;
    }

    .rcl-wide-hero {
        background: var(--petrol);
    }

    .rcl-wide-background {
        height: 100%;
        min-height: 100%;
        object-position: 64% center;
    }

    .rcl-wide-overlay {
        background: rgba(9, 35, 51, 0.38);
    }

    .rcl-wide-inner {
        padding: 0 15px;
    }

    .rcl-wide-top {
        min-height: 76px;
        gap: 10px;
    }

    .rcl-brand-symbol {
        width: 36px;
        height: 36px;
        font-size: 21px;
    }

    .rcl-wide-top a {
        gap: 9px;
    }

    .rcl-brand-name {
        font-size: 13px;
        letter-spacing: 1.4px;
    }

    .rcl-brand-name small {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .rcl-top-location {
        max-width: 95px;
        font-size: 8px;
        line-height: 1.6;
        text-align: right;
        letter-spacing: 1px;
    }

    .rcl-wide-content {
        padding: 45px 0 50px;
    }

    .rcl-geometric-panel {
        width: 100%;
        padding: 35px 23px 30px;
        clip-path: polygon(
            0 0,
            100% 0,
            100% 96%,
            94% 100%,
            0 100%
        );
    }

    .rcl-panel-decoration {
        padding: 0 15px 15px;
    }

    .rcl-panel-decoration span {
        height: 19px;
    }

    .rcl-wide-eyebrow {
        max-width: 100%;
        margin-bottom: 20px;
        padding-right: 55px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .rcl-geometric-panel h1 {
        font-size: clamp(35px, 9vw, 48px);
        letter-spacing: -1.5px;
        line-height: 1.04;
    }

    .rcl-heading-rule {
        margin: 22px 0 17px;
    }

    .rcl-wide-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .rcl-wide-details {
        gap: 10px;
        margin-top: 24px;
        padding-top: 18px;
    }

    .rcl-wide-details > div {
        gap: 8px;
        font-size: 9px;
    }

    .rcl-detail-number {
        font-size: 10px;
    }

    .rcl-panel-bottom {
        align-items: flex-start;
        margin-top: 24px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .rcl-panel-bottom-dot {
        margin-top: 3px;
    }

    .rcl-wide-bottom {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        min-height: 60px;
        padding: 12px 0;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .rcl-bottom-divider {
        width: 18px;
    }
}

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

@media (max-width: 380px) {
    .rcl-wide-details {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .rcl-wide-details > div {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .rcl-wide-bottom {
        font-size: 6px;
        letter-spacing: 0.7px;
    }

    .rcl-geometric-panel {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
    .rcl-wide-hero *,
    .rcl-wide-hero *::before,
    .rcl-wide-hero *::after {
        scroll-behavior: auto;
        animation: none;
        transition: none;
    }
}


/* =========================================
   ROCKLIN GARAGE DOOR OFFERS
   Three coupons per row on desktop
========================================= */

.rcl-ticket-section {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    padding: 100px 0 80px;
    overflow: hidden;
    background: var(--ivory);
    color: var(--petrol);
}

.rcl-ticket-section *,
.rcl-ticket-section *::before,
.rcl-ticket-section *::after {
    box-sizing: border-box;
}

/* Section heading */
.rcl-ticket-intro {
    max-width: 800px;
    margin: 0 auto 52px;
    text-align: center;
}

.rcl-ticket-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #50665f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.rcl-ticket-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--mint);
}

.rcl-ticket-intro h2 {
    margin: 0 0 20px;
    color: var(--petrol);
    font-size: clamp(38px, 5.4vw, 68px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -3px;
}

.rcl-ticket-intro h2 span {
    color: #668d80;
}

.rcl-ticket-intro > p {
    max-width: 560px;
    margin: 0 auto;
    color: #5c696d;
    font-size: 15px;
    line-height: 1.9;
}

/* Three-column coupon layout */
.rcl-ticket-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* Individual coupon */
.rcl-ticket {
    --ticket-bg: #fffdf7;
    --ticket-text: var(--petrol);

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 340px;
    overflow: hidden;
    background: var(--ticket-bg);
    color: var(--ticket-text);
    border: 1px solid rgba(16, 30, 39, .12);
    box-shadow: 0 8px 22px rgba(9, 35, 51, .045);
    text-decoration: none;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.rcl-ticket:hover,
.rcl-ticket:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(9, 35, 51, .12);
}

.rcl-ticket:focus-visible {
    outline: 3px solid var(--petrol);
    outline-offset: 3px;
}

.rcl-ticket-highlight {
    --ticket-bg: var(--petrol);
    --ticket-text: var(--ivory);

    border-color: var(--petrol);
}

/* Coupon amount area */
.rcl-ticket-number {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 155px;
    padding: 22px 12px;
    background: var(--lime);
    color: var(--petrol);
    text-align: center;
}

.rcl-ticket-number::after {
    position: absolute;
    right: 14px;
    bottom: -1px;
    left: 14px;
    content: "";
    border-bottom: 2px dashed rgba(16, 30, 39, .4);
}

.rcl-ticket-label {
    display: block;
    margin-bottom: 8px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rcl-ticket-number > div {
    font-size: 58px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    white-space: nowrap;
}

.rcl-ticket-number sup {
    position: relative;
    top: -2px;
    margin-right: 2px;
    font-size: 20px;
    vertical-align: top;
    letter-spacing: 0;
}

.rcl-ticket-off {
    display: inline-block;
    margin-top: 9px;
    padding: 4px 13px;
    border: 1px solid rgba(16, 30, 39, .35);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

/* Coupon text */
.rcl-ticket-info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 22px 22px 12px;
}

.rcl-ticket-category {
    display: block;
    margin-bottom: 12px;
    color: #668d80;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 1.4px;
}

.rcl-ticket-highlight .rcl-ticket-category {
    color: var(--lime);
}

.rcl-ticket-info h3 {
    margin: 0 0 10px;
    color: inherit;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -.4px;
    overflow-wrap: anywhere;
}

.rcl-ticket-info p {
    margin: 0;
    color: inherit;
    font-size: 12px;
    line-height: 1.8;
    opacity: .76;
}

/* Bottom icon */
.rcl-ticket-stamp {
    display: grid;
    place-items: center;
    align-self: flex-end;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin: 0 20px 18px 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    opacity: .75;
}

.rcl-ticket-stamp i {
    font-size: 14px;
}

/* $200 offer */
.rcl-ticket-large {
    --ticket-bg: var(--mint);
    --ticket-text: var(--petrol);

    background: var(--ticket-bg);
    color: var(--ticket-text);
    border-color: var(--mint);
}

.rcl-ticket-large .rcl-ticket-number {
    background: var(--petrol);
    color: var(--lime);
}

.rcl-ticket-large .rcl-ticket-number::after {
    border-color: rgba(246, 241, 227, .5);
}

.rcl-ticket-large .rcl-ticket-category {
    color: var(--petrol);
}

.rcl-ticket-large .rcl-ticket-info p {
    opacity: .85;
}

/* Disclaimer/footer */
.rcl-ticket-disclaimer {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid rgba(16, 30, 39, .2);
}

.rcl-ticket-brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: var(--petrol);
    color: var(--lime);
    font-size: 15px;
    font-weight: 900;
}

.rcl-ticket-disclaimer p {
    flex: 1;
    margin: 0;
    color: #5c696d;
    font-size: 12px;
    line-height: 1.8;
}

.rcl-ticket-disclaimer strong {
    color: var(--petrol);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* =========================================
   TABLET: TWO COUPONS PER ROW
========================================= */

@media (max-width: 991.98px) {
    .rcl-ticket-section {
        padding: 75px 0 60px;
    }

    .rcl-ticket-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .rcl-ticket {
        min-height: 325px;
    }

    .rcl-ticket-number {
        min-height: 145px;
    }

    .rcl-ticket-number > div {
        font-size: 52px;
    }

    .rcl-ticket-info {
        padding: 20px 18px 12px;
    }

    .rcl-ticket-info h3 {
        font-size: 18px;
    }
}

/* =========================================
   MOBILE: ONE COUPON PER ROW
========================================= */

@media (max-width: 575.98px) {
    .rcl-ticket-section {
        padding: 58px 0 40px;
    }

    .rcl-ticket-intro {
        margin-bottom: 32px;
        text-align: left;
    }

    .rcl-ticket-eyebrow {
        justify-content: flex-start;
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    .rcl-ticket-intro h2 {
        font-size: clamp(36px, 10vw, 48px);
        letter-spacing: -1.8px;
    }

    .rcl-ticket-intro > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .rcl-ticket-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .rcl-ticket {
        display: grid;
        grid-template-columns: 105px minmax(0, 1fr);
        min-height: 165px;
    }

    .rcl-ticket-number {
        min-height: 100%;
        padding: 15px 4px;
    }

    .rcl-ticket-number::after {
        top: 12px;
        right: -1px;
        bottom: 12px;
        left: auto;
        border-right: 2px dashed rgba(16, 30, 39, .4);
        border-bottom: 0;
    }

    .rcl-ticket-highlight .rcl-ticket-number::after {
        border-right-color: rgba(16, 30, 39, .4);
    }

    .rcl-ticket-number > div {
        font-size: 39px;
        letter-spacing: -2px;
    }

    .rcl-ticket-number sup {
        font-size: 15px;
    }

    .rcl-ticket-label {
        font-size: 8px;
    }

    .rcl-ticket-off {
        padding: 4px 9px;
        font-size: 8px;
    }

    .rcl-ticket-info {
        padding: 18px 15px;
    }

    .rcl-ticket-category {
        margin-bottom: 9px;
        font-size: 8px;
        letter-spacing: .9px;
    }

    .rcl-ticket-info h3 {
        font-size: 16px;
        line-height: 1.35;
    }

    .rcl-ticket-info p {
        font-size: 11px;
        line-height: 1.7;
    }

    .rcl-ticket-stamp {
        display: none;
    }

    .rcl-ticket-disclaimer {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 25px;
    }

    .rcl-ticket-disclaimer p {
        flex-basis: calc(100% - 46px);
        font-size: 11px;
    }

    .rcl-ticket-disclaimer strong {
        margin-left: 46px;
        white-space: normal;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .rcl-ticket,
    .rcl-ticket:hover {
        transition: none;
        transform: none;
    }
}


/* =========================================
   ROCKLIN TECHNICAL BLUEPRINT SECTION
========================================= */

.rcl-blueprint {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    position: relative;
    overflow: hidden;
    padding: 95px 0 75px;
    background: #12313f;
    color: var(--ivory);
}

.rcl-blueprint *,
.rcl-blueprint *::before,
.rcl-blueprint *::after {
    box-sizing: border-box;
}

/* Subtle technical background grid */
.rcl-blueprint::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .13;
    background-image:
        linear-gradient(rgba(134, 188, 176, .15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 188, 176, .15) 1px, transparent 1px);
    background-size: 42px 42px;
}

.rcl-blueprint > .container {
    position: relative;
    z-index: 1;
}

/* Heading */
.rcl-blueprint-heading {
    margin-bottom: 42px;
}

.rcl-blueprint-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 2.3px;
}

.rcl-blueprint-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--lime);
    border-radius: 50%;
}

.rcl-blueprint-heading h2 {
    max-width: 900px;
    margin: 0;
    color: var(--ivory);
    font-size: clamp(36px, 5vw, 65px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -2.7px;
}

.rcl-blueprint-heading h2 span {
    display: block;
    color: var(--mint);
}

/* Main two-column panel */
.rcl-blueprint-main {
    border: 1px solid rgba(134, 188, 176, .3);
    background: var(--ink);
}

/* Photo */
.rcl-blueprint-photo {
    position: relative;
    height: 100%;
    min-height: 510px;
    overflow: hidden;
    background: var(--slate);
}

.rcl-blueprint-photo::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(9, 35, 51, .02) 45%,
        rgba(9, 35, 51, .8) 100%
    );
}

.rcl-blueprint-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 510px;
    object-fit: cover;
    object-position: center;
}

.rcl-blueprint-photo-label {
    position: absolute;
    z-index: 2;
    right: 25px;
    bottom: 25px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--ivory);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.rcl-blueprint-photo-number {
    padding: 7px 9px;
    background: var(--lime);
    color: var(--petrol);
}

.rcl-blueprint-photo-corner {
    position: absolute;
    z-index: 2;
    top: 22px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid var(--mint);
    color: var(--lime);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* Main text */
.rcl-blueprint-copy {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 34px;
}

.rcl-blueprint-copy-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 27px;
    color: var(--mint);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.6px;
}

.rcl-blueprint-cross {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(134, 188, 176, .5);
    color: var(--lime);
    font-size: 21px;
}

.rcl-blueprint-lead {
    margin: 0;
    color: var(--ivory);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.8;
}

.rcl-blueprint-rule {
    width: 100%;
    height: 1px;
    margin: 25px 0;
    background: rgba(134, 188, 176, .3);
}

.rcl-blueprint-body {
    margin: 0 0 28px;
    color: #c1ccc9;
    font-size: 13px;
    line-height: 1.95;
}

.rcl-blueprint-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--lime);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.4px;
}

.rcl-blueprint-location i {
    font-size: 14px;
}

.rcl-blueprint-location-line {
    height: 1px;
    flex: 1;
    background: rgba(134, 188, 176, .35);
}

/* Component index */
.rcl-blueprint-components {
    margin-top: 28px;
    border: 1px solid rgba(134, 188, 176, .3);
    background: rgba(9, 35, 51, .75);
}

.rcl-blueprint-components-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(134, 188, 176, .3);
    color: var(--mint);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.7px;
}

.rcl-blueprint-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 170px;
    padding: 24px 20px;
    border-right: 1px solid rgba(134, 188, 176, .25);
    transition: background .25s ease;
}

.rcl-blueprint-item:hover {
    background: rgba(134, 188, 176, .1);
}

.rcl-blueprint-item-number {
    align-self: flex-end;
    margin-bottom: 12px;
    color: rgba(134, 188, 176, .7);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.rcl-blueprint-item > i {
    margin-bottom: 19px;
    color: var(--lime);
    font-size: 23px;
}

.rcl-blueprint-item h3 {
    margin: 0 0 7px;
    color: var(--ivory);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.rcl-blueprint-item p {
    margin: 0;
    color: #aebdb9;
    font-size: 10px;
    line-height: 1.7;
}

.rcl-blueprint-item-last {
    border-right: 0;
}

/* Bottom note */
.rcl-blueprint-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
    padding: 22px 0 0;
    border-top: 1px solid rgba(134, 188, 176, .3);
}

.rcl-blueprint-bottom-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background: var(--lime);
    color: var(--petrol);
    font-size: 10px;
    font-weight: 900;
}

.rcl-blueprint-bottom p {
    flex: 1;
    margin: 0;
    color: #c1ccc9;
    font-size: 12px;
    line-height: 1.8;
}

.rcl-blueprint-bottom-caption {
    color: var(--mint);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1.2px;
    text-align: right;
}

/* Tablet */
@media (max-width: 991.98px) {
    .rcl-blueprint {
        padding: 75px 0 60px;
    }

    .rcl-blueprint-photo,
    .rcl-blueprint-photo img {
        min-height: 390px;
    }

    .rcl-blueprint-copy {
        padding: 27px;
    }

    .rcl-blueprint-lead {
        font-size: 17px;
    }

    .rcl-blueprint-item {
        min-height: 155px;
        padding: 19px 15px;
        border-bottom: 1px solid rgba(134, 188, 176, .25);
    }

    .rcl-blueprint-bottom {
        flex-wrap: wrap;
    }

    .rcl-blueprint-bottom-caption {
        width: 100%;
        padding-left: 60px;
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .rcl-blueprint {
        padding: 58px 0 42px;
    }

    .rcl-blueprint-heading {
        margin-bottom: 27px;
    }

    .rcl-blueprint-heading h2 {
        font-size: clamp(32px, 9vw, 43px);
        letter-spacing: -1.6px;
    }

    .rcl-blueprint-eyebrow {
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .rcl-blueprint-photo,
    .rcl-blueprint-photo img {
        min-height: 290px;
        height: 290px;
    }

    .rcl-blueprint-photo-label {
        right: 15px;
        bottom: 16px;
        left: 15px;
        gap: 8px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .rcl-blueprint-photo-corner {
        top: 15px;
        left: 15px;
        width: 38px;
        height: 38px;
    }

    .rcl-blueprint-copy {
        padding: 23px 20px;
    }

    .rcl-blueprint-copy-top {
        margin-bottom: 20px;
        font-size: 8px;
        letter-spacing: 1.1px;
    }

    .rcl-blueprint-lead {
        font-size: 16px;
        line-height: 1.75;
    }

    .rcl-blueprint-rule {
        margin: 20px 0;
    }

    .rcl-blueprint-body {
        font-size: 12px;
        line-height: 1.9;
    }

    .rcl-blueprint-components {
        margin-top: 20px;
    }

    .rcl-blueprint-components-heading {
        padding: 15px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .rcl-blueprint-item {
        min-height: 145px;
        padding: 15px 12px;
        border-right: 1px solid rgba(134, 188, 176, .25);
    }

    .rcl-blueprint-item:nth-child(2n) {
        border-right: 0;
    }

    .rcl-blueprint-item-number {
        margin-bottom: 10px;
    }

    .rcl-blueprint-item > i {
        margin-bottom: 14px;
        font-size: 20px;
    }

    .rcl-blueprint-item h3 {
        font-size: 12px;
    }

    .rcl-blueprint-item p {
        font-size: 9px;
    }

    .rcl-blueprint-bottom {
        align-items: flex-start;
        gap: 12px;
    }

    .rcl-blueprint-bottom-mark {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .rcl-blueprint-bottom p {
        font-size: 11px;
    }

    .rcl-blueprint-bottom-caption {
        padding-left: 48px;
        font-size: 8px;
        line-height: 1.8;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rcl-blueprint *,
    .rcl-blueprint *::before,
    .rcl-blueprint *::after {
        transition: none !important;
    }
}


/* ROCKLIN GARAGE DOOR BRANDS — SPLIT FEATURE DESIGN */

.rcl-brands-modern {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    padding: 95px 0;
    background: var(--ivory);
    color: var(--petrol);
    overflow: hidden;
}

.rcl-brands-modern .container {
    max-width: 1240px;
}

.rcl-brands-layout {
    box-shadow: 0 24px 65px rgba(16, 30, 39, 0.09);
}

/* FEATURE PANEL */

.rcl-brands-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    padding: 48px 38px;
    overflow: hidden;
    isolation: isolate;
    background: #12313f;
    color: var(--ivory);
}

.rcl-brands-feature::before {
    position: absolute;
    z-index: -1;
    right: -120px;
    bottom: 75px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(134, 188, 176, 0.22);
    border-radius: 50%;
    content: "";
}

.rcl-brands-feature::after {
    position: absolute;
    z-index: -1;
    right: -75px;
    bottom: 120px;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(216, 237, 128, 0.2);
    border-radius: 50%;
    content: "";
}

.rcl-brands-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rcl-kicker-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--lime);
    transform: rotate(45deg);
}

.rcl-brands-feature h2 {
    margin: 35px 0 23px;
    color: var(--ivory);
    font-size: clamp(35px, 3.4vw, 49px);
    font-weight: 800;
    letter-spacing: -1.8px;
    line-height: 1.12;
}

.rcl-brands-feature h2 span {
    color: var(--lime);
}

.rcl-brands-feature > p {
    max-width: 350px;
    margin: 0;
    color: #d1d9d5;
    font-size: 14px;
    line-height: 1.95;
}

.rcl-brands-feature-bottom {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: auto;
    padding-top: 50px;
}

.rcl-brands-feature-count {
    color: var(--lime);
    font-size: 72px;
    font-weight: 850;
    letter-spacing: -5px;
    line-height: 1;
}

.rcl-brands-feature-bottom div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rcl-brands-feature-bottom strong {
    color: var(--ivory);
    font-size: 12px;
    letter-spacing: 2px;
}

.rcl-brands-feature-bottom small {
    color: var(--mint);
    font-size: 12px;
}

.rcl-brands-decoration {
    position: absolute;
    right: 30px;
    bottom: 27px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 30px;
    opacity: 0.8;
}

.rcl-brands-decoration span {
    display: block;
    width: 5px;
    background: var(--mint);
}

.rcl-brands-decoration span:nth-child(1) {
    height: 13px;
}

.rcl-brands-decoration span:nth-child(2) {
    height: 22px;
    background: var(--lime);
}

.rcl-brands-decoration span:nth-child(3) {
    height: 30px;
}

/* BRAND DIRECTORY */

.rcl-brands-content {
    height: 100%;
    padding: 39px 38px 24px;
    background: #fffdf7;
}

.rcl-brands-content-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--petrol);
}

.rcl-brands-overline {
    color: #65877d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rcl-brands-content-heading h3 {
    margin: 8px 0 0;
    color: var(--petrol);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.rcl-brands-heading-mark {
    padding: 8px 10px;
    background: var(--lime);
    color: var(--petrol);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
}

.rcl-brands-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 25px;
}

.rcl-brand-entry {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 55px;
    padding: 10px 5px;
    border-bottom: 1px solid rgba(16, 30, 39, 0.12);
    transition: background-color 0.25s ease, padding 0.25s ease;
}

.rcl-brand-entry::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--mint);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.rcl-brand-entry:hover {
    padding-right: 9px;
    padding-left: 9px;
    background: #f1f5e9;
}

.rcl-brand-entry:hover::after {
    transform: scaleX(1);
}

.rcl-entry-number {
    flex: 0 0 22px;
    color: #80908a;
    font-size: 10px;
    font-weight: 800;
}

.rcl-entry-name {
    flex: 1;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.rcl-entry-symbol {
    flex: 0 0 auto;
    color: #4e7c71;
    font-size: 16px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.rcl-brand-entry:hover .rcl-entry-symbol {
    opacity: 1;
    transform: translate(0, 0);
}

.rcl-brand-entry-opener .rcl-entry-number {
    color: #587a70;
}

.rcl-brands-content-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 17px;
}

.rcl-footer-indicator {
    flex: 0 0 22px;
    height: 3px;
    background: var(--lime);
}

.rcl-brands-content-footer p {
    margin: 0;
    color: #687673;
    font-size: 11px;
    line-height: 1.7;
}

/* RESPONSIVE */

@media (max-width: 991.98px) {
    .rcl-brands-modern {
        padding: 70px 0;
    }

    .rcl-brands-feature {
        min-height: 430px;
        padding: 40px;
    }

    .rcl-brands-feature h2 {
        font-size: clamp(39px, 6vw, 54px);
    }

    .rcl-brands-feature-bottom {
        margin-top: 35px;
    }

    .rcl-brands-content {
        padding: 35px 30px 24px;
    }
}

@media (max-width: 575.98px) {
    .rcl-brands-modern {
        padding: 45px 0;
    }

    .rcl-brands-feature {
        min-height: 0;
        padding: 34px 25px;
    }

    .rcl-brands-feature h2 {
        margin-top: 27px;
        font-size: 39px;
    }

    .rcl-brands-feature > p {
        font-size: 13px;
    }

    .rcl-brands-feature-bottom {
        padding-top: 30px;
    }

    .rcl-brands-feature-count {
        font-size: 58px;
    }

    .rcl-brands-content {
        padding: 28px 20px 22px;
    }

    .rcl-brands-content-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .rcl-brands-content-heading h3 {
        font-size: 25px;
    }

    .rcl-brands-list {
        grid-template-columns: 1fr;
    }

    .rcl-brand-entry {
        min-height: 52px;
    }

    .rcl-entry-symbol {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcl-brand-entry,
    .rcl-brand-entry::after,
    .rcl-entry-symbol {
        transition: none;
    }
}


/* ROCKLIN — CREATIVE DARK MECHANICAL SECTION */

.rcl-tension-section {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 95px 0 75px;
    background: #12313f;
    color: var(--ivory);
}

.rcl-tension-section::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image:
        linear-gradient(rgba(134, 188, 176, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 188, 176, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    pointer-events: none;
}

.rcl-tension-section::after {
    position: absolute;
    z-index: -1;
    top: -200px;
    right: -180px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(134, 188, 176, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(134, 188, 176, 0.025),
        0 0 0 90px rgba(134, 188, 176, 0.025);
    content: "";
    pointer-events: none;
}

.rcl-tension-section .container {
    max-width: 1180px;
}

.rcl-tension-layout {
    position: relative;
}

/* TOP LABEL */

.rcl-tension-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(246, 241, 227, 0.17);
}

.rcl-tension-label {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rcl-tension-status {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--lime);
    box-shadow: 0 0 12px rgba(216, 237, 128, 0.3);
    transform: rotate(45deg);
}

.rcl-tension-index {
    color: rgba(246, 241, 227, 0.52);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* OVERSIZED CENTER HEADING */

.rcl-tension-heading {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 75px 0 50px;
    text-align: center;
}

.rcl-tension-ghost {
    position: absolute;
    top: 48px;
    left: 50%;
    color: rgba(134, 188, 176, 0.055);
    font-size: clamp(75px, 15vw, 175px);
    font-weight: 900;
    letter-spacing: -9px;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}

.rcl-tension-eyebrow {
    position: relative;
    display: block;
    margin-bottom: 23px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

.rcl-tension-heading h2 {
    position: relative;
    margin: 0;
    color: var(--ivory);
    font-size: clamp(39px, 6vw, 72px);
    font-weight: 850;
    letter-spacing: -2.8px;
    line-height: 1.1;
}

.rcl-tension-heading h2 > span {
    display: block;
    color: var(--lime);
}

.rcl-tension-period {
    color: var(--mint);
}

.rcl-tension-title-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 30px;
}

.rcl-tension-title-rule span {
    display: block;
    width: 27px;
    height: 3px;
    background: var(--mint);
}

.rcl-tension-title-rule span:nth-child(2) {
    width: 58px;
    background: var(--lime);
}

/* CENTERED COPY WITH SIDE INDEX */

.rcl-tension-main {
    display: grid;
    grid-template-columns: 100px minmax(0, 760px) 100px;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    padding: 35px 0 40px;
    border-top: 1px solid rgba(246, 241, 227, 0.15);
    border-bottom: 1px solid rgba(246, 241, 227, 0.15);
}

.rcl-tension-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-right: 1px solid rgba(134, 188, 176, 0.22);
}

.rcl-tension-side-number {
    color: var(--lime);
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -1px;
}

.rcl-tension-side-line {
    width: 24px;
    height: 2px;
    background: var(--mint);
}

.rcl-tension-side-caption {
    color: rgba(246, 241, 227, 0.58);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.8;
    text-align: center;
}

.rcl-tension-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 42px;
    text-align: center;
}

.rcl-tension-copy p {
    margin: 0;
    color: #d2dad7;
    font-size: 15px;
    line-height: 2.05;
}

.rcl-tension-main::after {
    align-self: stretch;
    width: 1px;
    background: rgba(134, 188, 176, 0.22);
    content: "";
}

/* TECHNICAL DETAIL PANELS */

.rcl-tension-system {
    padding-top: 40px;
}

.rcl-tension-system-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rcl-tension-system-line {
    flex: 1;
    height: 1px;
    background: rgba(134, 188, 176, 0.25);
}

.rcl-tension-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.rcl-tension-point {
    position: relative;
    min-height: 185px;
    padding: 23px 25px 25px;
    overflow: hidden;
    background: var(--slate);
    border: 1px solid rgba(134, 188, 176, 0.17);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.rcl-tension-point:hover {
    background: #1b333b;
    border-color: var(--mint);
    transform: translateY(-4px);
}

.rcl-tension-point-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.rcl-tension-point-number {
    color: var(--lime);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.rcl-tension-mini-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(134, 188, 176, 0.45);
    border-radius: 50%;
}

/* Abstract CSS spring symbol */
.rcl-mini-spring {
    flex-direction: column;
    gap: 2px;
}

.rcl-mini-spring span {
    width: 12px;
    height: 3px;
    background: var(--mint);
    transform: skewX(-30deg);
}

.rcl-mini-spring span:nth-child(even) {
    background: var(--lime);
    transform: skewX(30deg);
}

/* Abstract CSS cable symbol */
.rcl-mini-cable span {
    width: 2px;
    height: 20px;
    background: var(--mint);
    box-shadow: 4px 0 0 rgba(216, 237, 128, 0.7);
    transform: rotate(20deg);
}

/* Abstract CSS balance symbol */
.rcl-mini-balance span {
    position: absolute;
    width: 16px;
    height: 2px;
    background: var(--mint);
}

.rcl-mini-balance span:nth-child(1) {
    transform: rotate(-30deg) translateY(-5px);
}

.rcl-mini-balance span:nth-child(2) {
    transform: rotate(30deg) translateY(5px);
}

.rcl-mini-balance span:nth-child(3) {
    width: 5px;
    height: 5px;
    background: var(--lime);
    border-radius: 50%;
}

.rcl-tension-point h3 {
    margin: 0 0 9px;
    color: var(--ivory);
    font-size: 17px;
    font-weight: 800;
}

.rcl-tension-point p {
    margin: 0;
    color: rgba(246, 241, 227, 0.63);
    font-size: 12px;
    line-height: 1.7;
}

.rcl-tension-point-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--mint);
    transform: scaleX(0.18);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.rcl-tension-point:hover .rcl-tension-point-bar {
    background: var(--lime);
    transform: scaleX(1);
}

/* FOOTER */

.rcl-tension-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 36px;
}

.rcl-tension-footer-mark {
    color: var(--ivory);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -1.5px;
}

.rcl-tension-footer-mark span {
    color: var(--lime);
}

.rcl-tension-footer-text {
    color: rgba(246, 241, 227, 0.58);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.rcl-tension-footer-line {
    flex: 1;
    height: 1px;
    background: rgba(134, 188, 176, 0.25);
}

/* RESPONSIVE */

@media (max-width: 767.98px) {
    .rcl-tension-section {
        padding: 65px 0 50px;
    }

    .rcl-tension-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .rcl-tension-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .rcl-tension-heading {
        padding: 65px 0 35px;
    }

    .rcl-tension-ghost {
        top: 65px;
        font-size: 18vw;
        letter-spacing: -4px;
    }

    .rcl-tension-eyebrow {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .rcl-tension-heading h2 {
        font-size: clamp(36px, 8vw, 53px);
        letter-spacing: -1.6px;
    }

    .rcl-tension-main {
        grid-template-columns: 1fr;
        padding: 25px 0;
    }

    .rcl-tension-side {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        padding-bottom: 20px;
        border-right: 0;
    }

    .rcl-tension-side-number {
        font-size: 22px;
    }

    .rcl-tension-side-line {
        width: 20px;
    }

    .rcl-tension-side-caption br {
        display: none;
    }

    .rcl-tension-copy {
        padding: 10px 5px;
    }

    .rcl-tension-copy p {
        font-size: 14px;
        line-height: 1.9;
    }

    .rcl-tension-main::after {
        display: none;
    }

    .rcl-tension-system {
        padding-top: 30px;
    }

    .rcl-tension-points {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rcl-tension-point {
        min-height: 0;
        padding: 19px 20px 23px;
    }

    .rcl-tension-point-top {
        margin-bottom: 14px;
    }

    .rcl-tension-point h3 {
        font-size: 16px;
    }

    .rcl-tension-footer {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 27px;
    }

    .rcl-tension-footer-text {
        flex: 1;
        font-size: 8px;
        line-height: 1.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcl-tension-point,
    .rcl-tension-point-bar {
        transition: none;
    }
}


/* ==========================================
   ROCKLIN BEFORE & AFTER — LIGHT EDITORIAL
========================================== */

.rcl-transform {
    --rt-petrol: #101e27;
    --rt-ink: #092333;
    --rt-lime: #d8ed80;
    --rt-mint: #86bcb0;
    --rt-ivory: #f6f1e3;
    --rt-slate: #172c34;

    position: relative;
    overflow: hidden;
    padding: 100px 0 85px;
    color: var(--rt-ink);
    background: var(--rt-ivory);
}

.rcl-transform::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: linear-gradient(
        90deg,
        var(--rt-ink) 0%,
        var(--rt-ink) 58%,
        var(--rt-lime) 58%,
        var(--rt-lime) 100%
    );
}

.rcl-transform-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.rcl-transform-intro-left {
    max-width: 720px;
}

.rcl-transform-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--rt-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.rcl-transform-kicker-line {
    width: 34px;
    height: 3px;
    background: var(--rt-mint);
}

.rcl-transform-intro h2 {
    margin: 0;
    color: var(--rt-ink);
    font-size: clamp(40px, 5.7vw, 74px);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -3.5px;
}

.rcl-transform-intro h2 span {
    color: var(--rt-mint);
}

.rcl-transform-intro-right {
    max-width: 275px;
    flex-shrink: 0;
    padding: 0 0 8px 22px;
    border-left: 1px solid rgba(9, 35, 51, 0.2);
}

.rcl-transform-index {
    display: block;
    margin-bottom: 16px;
    color: var(--rt-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rcl-transform-intro-right p {
    margin: 0;
    color: rgba(9, 35, 51, 0.72);
    font-size: 14px;
    line-height: 1.9;
}

/* IMAGE COMPARISON */

.rcl-transform-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
}

.rcl-transform-item {
    min-width: 0;
}

.rcl-transform-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.18 / 1;
    background: #e4dfd1;
}

.rcl-transform-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s ease;
}

.rcl-transform-item:hover .rcl-transform-photo img {
    transform: scale(1.04);
}

.rcl-transform-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(9, 35, 51, 0.32) 0%,
        transparent 25%,
        transparent 60%,
        rgba(9, 35, 51, 0.65) 100%
    );
    pointer-events: none;
}

.rcl-transform-photo-top,
.rcl-transform-photo-bottom {
    position: absolute;
    z-index: 1;
    right: 22px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rcl-transform-photo-top {
    top: 22px;
}

.rcl-transform-photo-top > span:first-child {
    padding: 10px 15px;
    color: var(--rt-ink);
    background: var(--rt-ivory);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rcl-transform-item-after .rcl-transform-photo-top > span:first-child {
    background: var(--rt-lime);
}

.rcl-transform-photo-number {
    color: white;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -1px;
}

.rcl-transform-photo-bottom {
    bottom: 22px;
    color: white;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rcl-transform-corner-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--rt-ink);
    background: var(--rt-lime);
    font-size: 14px;
    transition: transform 0.3s ease;
}

.rcl-transform-item:hover .rcl-transform-corner-arrow {
    transform: rotate(-8deg);
}

.rcl-transform-description {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 2px 0;
}

.rcl-transform-mini-line {
    flex: 0 0 23px;
    height: 3px;
    margin-top: 9px;
    background: var(--rt-mint);
}

.rcl-transform-item-after .rcl-transform-mini-line {
    background: var(--rt-ink);
}

.rcl-transform-description p {
    margin: 0;
    color: rgba(9, 35, 51, 0.8);
    font-size: 14px;
    line-height: 1.8;
}

/* CENTER DIVIDER */

.rcl-transform-center {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    transform: translateX(-50%);
    pointer-events: none;
}

.rcl-transform-center-line {
    width: 2px;
    flex: 1;
    min-height: 25px;
    background: var(--rt-lime);
    box-shadow: 0 0 0 1px rgba(9, 35, 51, 0.07);
}

.rcl-transform-center-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 65px;
    height: 91px;
    color: var(--rt-ink);
    background: var(--rt-lime);
    border: 5px solid var(--rt-ivory);
    outline: 1px solid rgba(9, 35, 51, 0.12);
}

.rcl-transform-center-badge span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.rcl-transform-center-badge i {
    font-size: 17px;
}

/* BOTTOM STRIP */

.rcl-transform-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 42px;
    padding: 23px 27px;
    color: var(--rt-ivory);
    background: var(--rt-ink);
}

.rcl-transform-footer-label {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.rcl-transform-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    color: var(--rt-ink);
    background: var(--rt-lime);
    font-size: 18px;
}

.rcl-transform-footer-label div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rcl-transform-footer-small {
    color: var(--rt-mint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rcl-transform-footer-label strong {
    font-size: 14px;
    font-weight: 700;
}

.rcl-transform-footer > p {
    max-width: 260px;
    margin: 0;
    color: rgba(246, 241, 227, 0.75);
    font-size: 12px;
    line-height: 1.8;
}

.rcl-transform-footer > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 16px 18px;
    color: var(--rt-ink);
    background: var(--rt-lime);
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease;
}

.rcl-transform-footer > a:hover {
    color: var(--rt-ink);
    background: var(--rt-mint);
}

/* RESPONSIVE */

@media (max-width: 991.98px) {
    .rcl-transform {
        padding: 80px 0 65px;
    }

    .rcl-transform-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .rcl-transform-intro-right {
        max-width: 500px;
    }

    .rcl-transform-footer {
        flex-wrap: wrap;
    }

    .rcl-transform-footer > p {
        flex: 1;
        min-width: 180px;
    }
}

@media (max-width: 575.98px) {
    .rcl-transform {
        padding: 65px 0 50px;
    }

    .rcl-transform-intro {
        margin-bottom: 30px;
    }

    .rcl-transform-intro h2 {
        font-size: clamp(37px, 10vw, 52px);
        letter-spacing: -2px;
    }

    .rcl-transform-intro-right {
        padding-left: 15px;
    }

    .rcl-transform-stage {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rcl-transform-photo {
        aspect-ratio: 1.12 / 1;
    }

    .rcl-transform-center {
        display: none;
    }

    .rcl-transform-photo-top,
    .rcl-transform-photo-bottom {
        right: 14px;
        left: 14px;
    }

    .rcl-transform-photo-top {
        top: 14px;
    }

    .rcl-transform-photo-bottom {
        bottom: 14px;
    }

    .rcl-transform-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-top: 30px;
        padding: 22px 18px;
    }

    .rcl-transform-footer > p {
        min-width: 0;
    }

    .rcl-transform-footer > a {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcl-transform-photo img,
    .rcl-transform-corner-arrow,
    .rcl-transform-footer > a {
        transition: none;
    }
}


/* ROCKLIN OPENER SECTION — STYLE 02 */
.rcl-op2 {
    --op2-petrol: #101e27;
    --op2-ink: #092333;
    --op2-lime: #d8ed80;
    --op2-mint: #86bcb0;
    --op2-ivory: #f6f1e3;
    --op2-slate: #172c34;

    position: relative;
    overflow: hidden;
    padding: 100px 0;
    color: var(--op2-ink);
    background: var(--op2-ivory);
}

.rcl-op2::before {
    content: "CONTROL";
    position: absolute;
    top: 30px;
    right: -30px;
    color: rgba(9, 35, 51, 0.035);
    font-size: clamp(100px, 18vw, 230px);
    font-weight: 900;
    letter-spacing: -10px;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.rcl-op2 .container {
    position: relative;
    z-index: 1;
}

/* HEADER */

.rcl-op2-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.rcl-op2-header-main {
    max-width: 720px;
}

.rcl-op2-overline {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 24px;
    color: var(--op2-ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.rcl-op2-overline-mark {
    width: 28px;
    height: 4px;
    background: var(--op2-mint);
}

.rcl-op2-header h2 {
    margin: 0;
    color: var(--op2-ink);
    font-size: clamp(42px, 6vw, 77px);
    font-weight: 850;
    letter-spacing: -4px;
    line-height: 1.02;
}

.rcl-op2-header h2 span {
    color: #527f76;
}

.rcl-op2-header-side {
    flex: 0 0 230px;
    padding-bottom: 7px;
}

.rcl-op2-edition {
    color: var(--op2-ink);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rcl-op2-side-rule {
    width: 100%;
    height: 1px;
    margin: 15px 0;
    background: rgba(9, 35, 51, 0.25);
}

.rcl-op2-header-side p {
    margin: 0;
    color: rgba(9, 35, 51, 0.75);
    font-size: 13px;
    line-height: 1.9;
}

/* MAIN PANEL */

.rcl-op2-main {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    background: white;
    border: 1px solid rgba(9, 35, 51, 0.1);
}

/* TECHNICAL VISUAL */

.rcl-op2-visual {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    color: var(--op2-ivory);
    background: var(--op2-petrol);
}

.rcl-op2-visual-top,
.rcl-op2-visual-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.rcl-op2-visual-top {
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(134, 188, 176, 0.22);
    color: var(--op2-mint);
}

.rcl-op2-graphic {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 335px;
    margin: 15px 0;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(134, 188, 176, 0.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 188, 176, 0.065) 1px, transparent 1px);
    background-size: 22px 22px;
}

.rcl-op2-circuit {
    position: absolute;
    border: 1px solid rgba(134, 188, 176, 0.32);
    transform: rotate(45deg);
}

.rcl-op2-circuit-a {
    width: 220px;
    height: 220px;
}

.rcl-op2-circuit-b {
    width: 270px;
    height: 270px;
    border-style: dashed;
    border-color: rgba(216, 237, 128, 0.35);
}

.rcl-op2-circuit-c {
    width: 315px;
    height: 315px;
    border-color: rgba(134, 188, 176, 0.12);
}

.rcl-op2-graphic-cross {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 1px solid var(--op2-lime);
    transform: rotate(45deg);
}

.rcl-op2-graphic-cross.cross-a {
    top: 12%;
    left: 17%;
}

.rcl-op2-graphic-cross.cross-b {
    right: 14%;
    bottom: 17%;
    border-color: var(--op2-mint);
}

.rcl-op2-controller {
    position: relative;
    z-index: 2;
    width: 174px;
    padding: 15px;
    background: var(--op2-slate);
    border: 1px solid rgba(134, 188, 176, 0.6);
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.18);
}

.rcl-op2-controller-header,
.rcl-op2-controller-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--op2-mint);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.rcl-op2-controller-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--op2-lime);
    box-shadow: 0 0 12px rgba(216, 237, 128, 0.45);
}

.rcl-op2-controller-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100px;
    margin: 15px 0;
    color: var(--op2-ink);
    background: var(--op2-lime);
}

.rcl-op2-controller-display i {
    font-size: 30px;
}

.rcl-op2-controller-display span {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.rcl-op2-controller-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 23px;
    margin-bottom: 15px;
}

.rcl-op2-controller-bars span {
    flex: 1;
    height: 35%;
    background: var(--op2-mint);
}

.rcl-op2-controller-bars span:nth-child(2),
.rcl-op2-controller-bars span:nth-child(5) {
    height: 65%;
}

.rcl-op2-controller-bars span:nth-child(3),
.rcl-op2-controller-bars span:nth-child(6) {
    height: 100%;
    background: var(--op2-lime);
}

.rcl-op2-controller-footer {
    padding-top: 11px;
    border-top: 1px solid rgba(134, 188, 176, 0.25);
}

.rcl-op2-node {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: var(--op2-ink);
    background: var(--op2-mint);
    border: 4px solid var(--op2-petrol);
    outline: 1px solid rgba(134, 188, 176, 0.65);
    font-size: 14px;
}

.rcl-op2-node.node-a {
    top: 17%;
    right: 20%;
}

.rcl-op2-node.node-b {
    bottom: 19%;
    left: 17%;
    color: var(--op2-ink);
    background: var(--op2-lime);
}

.rcl-op2-node.node-c {
    right: 14%;
    bottom: 21%;
}

.rcl-op2-visual-bottom {
    padding-top: 17px;
    border-top: 1px solid rgba(134, 188, 176, 0.22);
    color: var(--op2-mint);
    font-size: 8px;
}

.rcl-op2-signal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rcl-op2-signal span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--op2-lime);
}

/* COPY PANEL */

.rcl-op2-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(25px, 4vw, 50px);
}

.rcl-op2-copy-label {
    display: block;
    margin-bottom: 22px;
    color: #527f76;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.8;
}

.rcl-op2-copy > p {
    margin: 0;
    color: rgba(9, 35, 51, 0.85);
    font-size: 14px;
    line-height: 2;
}

.rcl-op2-copy-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid rgba(9, 35, 51, 0.17);
}

.rcl-op2-copy-index {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 37px;
    width: 37px;
    height: 37px;
    color: var(--op2-ink);
    background: var(--op2-lime);
    font-size: 12px;
    font-weight: 900;
}

.rcl-op2-copy-footer-line {
    flex: 1;
    height: 1px;
    background: rgba(9, 35, 51, 0.2);
}

.rcl-op2-copy-footer-text {
    color: var(--op2-ink);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

/* SYSTEM INDEX */

.rcl-op2-index {
    margin-top: 38px;
}

.rcl-op2-index-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 17px;
    color: var(--op2-ink);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rcl-op2-index-heading i {
    color: #527f76;
}

.rcl-op2-index-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(9, 35, 51, 0.2);
    border-bottom: 1px solid rgba(9, 35, 51, 0.2);
}

.rcl-op2-index-item {
    position: relative;
    display: flex;
    gap: 16px;
    min-width: 0;
    padding: 23px 19px;
    transition: background 0.25s ease;
}

.rcl-op2-index-item + .rcl-op2-index-item {
    border-left: 1px solid rgba(9, 35, 51, 0.17);
}

.rcl-op2-index-item:hover {
    background: rgba(134, 188, 176, 0.15);
}

.rcl-op2-index-number {
    padding-top: 4px;
    color: #527f76;
    font-size: 10px;
    font-weight: 900;
}

.rcl-op2-index-item > div {
    min-width: 0;
}

.rcl-op2-index-item > div > i {
    margin-bottom: 13px;
    color: var(--op2-ink);
    font-size: 18px;
}

.rcl-op2-index-item h3 {
    margin: 0 0 7px;
    color: var(--op2-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

.rcl-op2-index-item p {
    margin: 0;
    color: rgba(9, 35, 51, 0.68);
    font-size: 11px;
    line-height: 1.7;
}

/* RESPONSIVE */

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

    .rcl-op2-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .rcl-op2-header-side {
        max-width: 440px;
        flex-basis: auto;
    }

    .rcl-op2-main {
        grid-template-columns: 1fr;
    }

    .rcl-op2-graphic {
        min-height: 320px;
    }

    .rcl-op2-copy {
        padding: 35px;
    }
}

@media (max-width: 575.98px) {
    .rcl-op2 {
        padding: 55px 0;
    }

    .rcl-op2-header {
        margin-bottom: 30px;
    }

    .rcl-op2-header h2 {
        font-size: clamp(37px, 10vw, 52px);
        letter-spacing: -2px;
    }

    .rcl-op2-visual {
        padding: 17px;
    }

    .rcl-op2-graphic {
        min-height: 280px;
    }

    .rcl-op2-circuit-a {
        width: 180px;
        height: 180px;
    }

    .rcl-op2-circuit-b {
        width: 220px;
        height: 220px;
    }

    .rcl-op2-circuit-c {
        width: 255px;
        height: 255px;
    }

    .rcl-op2-controller {
        width: 150px;
    }

    .rcl-op2-node {
        width: 37px;
        height: 37px;
        font-size: 12px;
    }

    .rcl-op2-copy {
        padding: 25px 20px;
    }

    .rcl-op2-copy > p {
        font-size: 13px;
        line-height: 1.9;
    }

    .rcl-op2-copy-footer-text {
        font-size: 8px;
    }

    .rcl-op2-index-items {
        grid-template-columns: 1fr;
    }

    .rcl-op2-index-item {
        padding: 19px 12px;
    }

    .rcl-op2-index-item + .rcl-op2-index-item {
        border-top: 1px solid rgba(9, 35, 51, 0.17);
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcl-op2-index-item {
        transition: none;
    }
}

:root {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;
}

.rocklin-parts-section {
    position: relative;
    overflow: hidden;
    padding: 88px 0 100px;
    background: #12313f;
    color: var(--ivory);
}

.rocklin-parts-section::after {
    content: "ROCKLIN";
    position: absolute;
    top: 190px;
    right: -75px;
    color: rgba(246, 241, 227, 0.025);
    font-size: clamp(90px, 17vw, 220px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -10px;
    pointer-events: none;
    writing-mode: vertical-rl;
}

.rocklin-parts-section .container {
    position: relative;
    z-index: 1;
}

.rocklin-parts-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(246, 241, 227, 0.18);
}

.rocklin-parts-label,
.rocklin-parts-edition {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-parts-label {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ivory);
}

.rocklin-parts-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 5px rgba(216, 237, 128, 0.1);
}

.rocklin-parts-edition {
    color: var(--mint);
    text-align: right;
}

.rocklin-parts-title {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 52px 0 42px;
}

.rocklin-parts-big-number {
    color: var(--lime);
    font-size: clamp(75px, 10vw, 125px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -8px;
}

.rocklin-parts-title-copy {
    padding-left: 28px;
    border-left: 1px solid rgba(134, 188, 176, 0.55);
}

.rocklin-parts-eyebrow {
    display: block;
    margin-bottom: 13px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

.rocklin-parts-title h2 {
    max-width: 850px;
    margin: 0;
    color: var(--ivory);
    font-size: clamp(32px, 4.7vw, 59px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.rocklin-parts-title h2 em {
    color: var(--lime);
    font-style: normal;
}

.rocklin-parts-image-frame {
    padding: 12px;
    border: 1px solid rgba(134, 188, 176, 0.42);
    background: var(--slate);
}

.rocklin-parts-image {
    height: clamp(260px, 42vw, 540px);
    overflow: hidden;
    background: var(--petrol);
}

.rocklin-parts-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s ease;
}

.rocklin-parts-image-frame:hover img {
    transform: scale(1.025);
}

.rocklin-parts-image-footer {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 17px 8px 5px;
    color: var(--ivory);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-parts-image-rule {
    flex: 1;
    height: 1px;
    background: rgba(246, 241, 227, 0.22);
}

.rocklin-parts-copy {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 45px;
    padding: 55px 0 60px;
}

.rocklin-parts-copy-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 8px;
    color: var(--lime);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-parts-copy-line {
    width: 28px;
    height: 2px;
    margin-top: 5px;
    background: var(--mint);
}

.rocklin-parts-copy p {
    margin: 0;
    color: rgba(246, 241, 227, 0.86);
    font-size: 16px;
    line-height: 2;
}

.rocklin-parts-index {
    border-top: 2px solid var(--lime);
}

.rocklin-parts-index-heading {
    display: flex;
    justify-content: space-between;
    padding: 17px 0;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-parts-index-row {
    display: grid;
    grid-template-columns: 65px minmax(190px, 1fr) minmax(170px, 0.8fr) 24px;
    align-items: center;
    gap: 18px;
    min-height: 76px;
    padding: 16px 18px;
    border-top: 1px solid rgba(246, 241, 227, 0.14);
    background: transparent;
    transition: background 0.25s ease, padding 0.25s ease;
}

.rocklin-parts-index-row:hover {
    padding-left: 25px;
    background: var(--slate);
}

.rocklin-parts-index-num {
    color: var(--lime);
    font-size: 12px;
    font-weight: 800;
}

.rocklin-parts-index-name {
    color: var(--ivory);
    font-size: 17px;
    font-weight: 700;
}

.rocklin-parts-index-desc {
    color: var(--mint);
    font-size: 12px;
    line-height: 1.6;
}

.rocklin-parts-index-symbol {
    color: var(--lime);
    font-size: 20px;
    text-align: right;
}

@media (max-width: 767.98px) {
    .rocklin-parts-section {
        padding: 60px 0 65px;
    }

    .rocklin-parts-top {
        align-items: flex-start;
    }

    .rocklin-parts-label,
    .rocklin-parts-edition {
        font-size: 8px;
        letter-spacing: 1.2px;
        line-height: 1.7;
    }

    .rocklin-parts-title {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 15px;
        padding: 40px 0 30px;
    }

    .rocklin-parts-big-number {
        font-size: 66px;
        letter-spacing: -4px;
    }

    .rocklin-parts-title-copy {
        padding-left: 17px;
    }

    .rocklin-parts-title h2 {
        font-size: clamp(27px, 6vw, 39px);
        letter-spacing: -0.8px;
    }

    .rocklin-parts-eyebrow {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .rocklin-parts-image-frame {
        padding: 7px;
    }

    .rocklin-parts-image {
        height: 300px;
    }

    .rocklin-parts-image-footer {
        gap: 8px;
        font-size: 7px;
        letter-spacing: 1px;
    }

    .rocklin-parts-copy {
        grid-template-columns: 1fr;
        gap: 17px;
        padding: 35px 0 40px;
    }

    .rocklin-parts-copy p {
        font-size: 15px;
        line-height: 1.9;
    }

    .rocklin-parts-index-row {
        grid-template-columns: 35px minmax(0, 1fr) 22px;
        gap: 12px;
        padding: 16px 7px;
    }

    .rocklin-parts-index-row:hover {
        padding-left: 12px;
    }

    .rocklin-parts-index-name {
        font-size: 14px;
    }

    .rocklin-parts-index-desc {
        display: none;
    }

    .rocklin-parts-index-symbol {
        font-size: 17px;
    }
}

@media (max-width: 420px) {
    .rocklin-parts-edition {
        max-width: 105px;
    }

    .rocklin-parts-image {
        height: 230px;
    }

    .rocklin-parts-image-footer {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rocklin-parts-image img,
    .rocklin-parts-index-row {
        transition: none;
    }
}

:root {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;
}

.rocklin-light-points {
    position: relative;
    overflow: hidden;
    padding: 90px 0 85px;
    color: var(--ink);
    background: var(--ivory);
}

.rocklin-light-points::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    background: var(--lime);
    content: "";
}

.rocklin-light-points .container {
    position: relative;
    z-index: 1;
}

.rlp-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 19px;
    border-bottom: 1px solid rgba(9, 35, 51, 0.2);
}

.rlp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rlp-dot {
    width: 9px;
    height: 9px;
    background: var(--petrol);
    transform: rotate(45deg);
}

.rlp-reference {
    color: #61716f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.rlp-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    padding: 55px 0 45px;
}

.rlp-heading-main {
    max-width: 850px;
}

.rlp-small-label {
    display: block;
    margin-bottom: 17px;
    color: #577b72;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.rlp-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(34px, 4.5vw, 59px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -1.9px;
}

.rlp-heading h2 span {
    color: #537c70;
}

.rlp-heading-index {
    display: flex;
    min-width: 105px;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-bottom: 5px;
}

.rlp-heading-index span:first-child {
    color: var(--ink);
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -5px;
}

.rlp-index-line {
    display: block;
    width: 55px;
    height: 4px;
    background: var(--lime);
}

.rlp-heading-index span:last-child {
    color: #61716f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    white-space: nowrap;
}

.rlp-intro {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 25px;
    align-items: center;
    padding: 30px 35px;
    background: var(--ink);
}

.rlp-intro-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.rlp-intro-mark span {
    display: block;
    width: 5px;
    height: 26px;
    background: var(--lime);
}

.rlp-intro-mark span:nth-child(2) {
    height: 38px;
    background: var(--mint);
}

.rlp-intro-mark span:nth-child(3) {
    height: 19px;
    background: var(--ivory);
}

.rlp-intro p {
    margin: 0;
    color: var(--ivory);
    font-size: clamp(17px, 2.2vw, 24px);
    font-weight: 600;
    line-height: 1.65;
}

.rlp-list {
    margin-top: 36px;
    border-top: 2px solid var(--ink);
}

.rlp-item {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr) 65px;
    gap: 25px;
    align-items: center;
    padding: 28px 20px;
    border-bottom: 1px solid rgba(9, 35, 51, 0.2);
    transition: background 0.25s ease, padding 0.25s ease;
}

.rlp-item:hover {
    padding-right: 28px;
    padding-left: 28px;
    background: rgba(134, 188, 176, 0.15);
}

.rlp-item-number {
    align-self: start;
    color: #64867b;
    font-size: 29px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -1px;
}

.rlp-item-body {
    max-width: 850px;
}

.rlp-item-label {
    display: block;
    margin-bottom: 10px;
    color: #52786e;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.rlp-item-body p {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.85;
}

.rlp-item-icon {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(9, 35, 51, 0.2);
    color: var(--ink);
    font-size: 19px;
    transition: color 0.25s ease, background 0.25s ease;
}

.rlp-item:hover .rlp-item-icon {
    border-color: var(--ink);
    color: var(--lime);
    background: var(--ink);
}

.rlp-item-safety {
    background: rgba(216, 237, 128, 0.19);
}

.rlp-item-safety .rlp-item-number,
.rlp-item-safety .rlp-item-label {
    color: #536d28;
}

.rlp-item-last {
    border-bottom: 2px solid var(--ink);
}

.rlp-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 25px;
}

.rlp-bottom-rule {
    width: 28px;
    height: 3px;
    background: #64867b;
}

.rlp-bottom-text {
    color: var(--ink);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.rlp-bottom-number {
    margin-left: auto;
    color: #61716f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

@media (max-width: 767.98px) {
    .rocklin-light-points {
        padding: 62px 0 60px;
    }

    .rocklin-light-points::before {
        width: 5px;
    }

    .rlp-eyebrow,
    .rlp-reference {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .rlp-heading {
        align-items: flex-start;
        gap: 12px;
        padding: 38px 0 30px;
    }

    .rlp-heading h2 {
        font-size: clamp(29px, 6.5vw, 42px);
        letter-spacing: -0.9px;
    }

    .rlp-small-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .rlp-heading-index {
        min-width: 54px;
        gap: 8px;
    }

    .rlp-heading-index span:first-child {
        font-size: 43px;
        letter-spacing: -3px;
    }

    .rlp-index-line {
        width: 38px;
    }

    .rlp-heading-index span:last-child {
        font-size: 7px;
        letter-spacing: 0.5px;
    }

    .rlp-intro {
        grid-template-columns: 35px minmax(0, 1fr);
        gap: 15px;
        padding: 23px 18px;
    }

    .rlp-intro p {
        font-size: 16px;
        line-height: 1.7;
    }

    .rlp-intro-mark span {
        width: 4px;
    }

    .rlp-item {
        grid-template-columns: 43px minmax(0, 1fr) 40px;
        gap: 12px;
        padding: 22px 5px;
    }

    .rlp-item:hover {
        padding-right: 9px;
        padding-left: 9px;
    }

    .rlp-item-number {
        font-size: 22px;
    }

    .rlp-item-label {
        font-size: 8px;
        letter-spacing: 1.2px;
    }

    .rlp-item-body p {
        font-size: 14px;
        line-height: 1.8;
    }

    .rlp-item-icon {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .rlp-bottom {
        flex-wrap: wrap;
        gap: 10px;
    }

    .rlp-bottom-text {
        max-width: 220px;
        font-size: 8px;
        line-height: 1.7;
    }
}

@media (max-width: 420px) {
    .rlp-reference {
        max-width: 100px;
        text-align: right;
        line-height: 1.7;
    }

    .rlp-heading {
        gap: 7px;
    }

    .rlp-heading-index {
        min-width: 43px;
    }

    .rlp-heading-index span:first-child {
        font-size: 36px;
    }

    .rlp-item {
        grid-template-columns: 33px minmax(0, 1fr) 32px;
        gap: 9px;
    }

    .rlp-item-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .rlp-bottom-number {
        width: 100%;
        margin-left: 43px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rlp-item,
    .rlp-item-icon {
        transition: none;
    }
}

/* ================================
   ROCKLIN LIGHT EDITORIAL GALLERY
   Uses the supplied Rocklin palette
================================ */

.rocklin-gallery-light {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    position: relative;
    overflow: hidden;
    padding: 105px 0 70px;
    background: var(--ivory);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

.rocklin-gallery-light *,
.rocklin-gallery-light *::before,
.rocklin-gallery-light *::after {
    box-sizing: border-box;
}

.rocklin-gallery-light .rg-header {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 55px;
    align-items: end;
    margin-bottom: 58px;
    padding-bottom: 38px;
    border-bottom: 1px solid rgba(9, 35, 51, .22);
}

.rocklin-gallery-light .rg-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: #526b70;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.7px;
}

.rocklin-gallery-light .rg-eyebrow-line {
    display: inline-block;
    width: 34px;
    height: 3px;
    background: var(--ink);
}

.rocklin-gallery-light .rg-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(43px, 6.5vw, 83px);
    font-weight: 800;
    line-height: .99;
    letter-spacing: -4px;
}

.rocklin-gallery-light .rg-heading h2 span {
    color: #71857b;
    font-weight: 400;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    letter-spacing: -3px;
}

.rocklin-gallery-light .rg-intro {
    max-width: 365px;
    justify-self: end;
}

.rocklin-gallery-light .rg-intro-mark {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 11px;
    border: 1px solid rgba(9, 35, 51, .3);
    color: #526b70;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-gallery-light .rg-intro p {
    margin: 0 0 22px;
    color: #4d6065;
    font-size: 15px;
    line-height: 1.9;
}

.rocklin-gallery-light .rg-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease;
}

.rocklin-gallery-light .rg-contact-link span {
    font-size: 20px;
    transition: transform .25s ease;
}

.rocklin-gallery-light .rg-contact-link:hover {
    color: #526f65;
    border-color: #526f65;
}

.rocklin-gallery-light .rg-contact-link:hover span {
    transform: translate(3px, -3px);
}

/* Asymmetrical magazine layout */
.rocklin-gallery-light .rg-gallery {
    display: grid;
    grid-template-columns: 1.1fr .8fr .9fr;
    grid-template-rows: 270px 225px 260px;
    gap: 28px;
    align-items: stretch;
}

.rocklin-gallery-light .rg-item {
    min-width: 0;
    margin: 0;
}

.rocklin-gallery-light .rg-feature {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.rocklin-gallery-light .rg-tall {
    grid-column: 3;
    grid-row: 1 / 3;
}

.rocklin-gallery-light .rg-opener {
    grid-column: 1;
    grid-row: 3;
}

.rocklin-gallery-light .rg-note {
    grid-column: 2;
    grid-row: 3;
}

.rocklin-gallery-light .rg-wide {
    grid-column: 3;
    grid-row: 3;
}

.rocklin-gallery-light .rg-bottom {
    grid-column: 1 / 4;
    grid-row: 4;
}

/* Image frames */
.rocklin-gallery-light .rg-image-wrap {
    position: relative;
    height: calc(100% - 64px);
    min-height: 150px;
    overflow: hidden;
    background: #d9ded5;
}

.rocklin-gallery-light .rg-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.rocklin-gallery-light .rg-item:hover img {
    transform: scale(1.045);
}

.rocklin-gallery-light .rg-feature .rg-image-wrap,
.rocklin-gallery-light .rg-tall .rg-image-wrap {
    height: calc(100% - 67px);
}

.rocklin-gallery-light .rg-image-number {
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    background: var(--ivory);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

/* Captions */
.rocklin-gallery-light .rg-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 64px;
    padding: 13px 0 0;
}

.rocklin-gallery-light .rg-category {
    display: block;
    margin-bottom: 6px;
    color: #718078;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.rocklin-gallery-light .rg-caption h3 {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.rocklin-gallery-light .rg-caption-arrow {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(9, 35, 51, .22);
    border-radius: 50%;
    color: var(--ink);
    font-size: 16px;
    transition: background .25s ease, color .25s ease;
}

.rocklin-gallery-light .rg-item:hover .rg-caption-arrow {
    background: var(--ink);
    color: var(--ivory);
}

/* Editorial text panel */
.rocklin-gallery-light .rg-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    background: #e7e8d9;
    border-top: 3px solid var(--mint);
}

.rocklin-gallery-light .rg-note-symbol {
    margin-bottom: 19px;
    color: #738b7d;
    font-size: 32px;
    line-height: 1;
}

.rocklin-gallery-light .rg-note p {
    margin: 6px 0 22px;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.55;
}

.rocklin-gallery-light .rg-note-bottom {
    margin-top: auto;
    color: #718078;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

/* Bottom image */
.rocklin-gallery-light .rg-bottom {
    display: grid;
    grid-template-columns: 1.5fr .5fr;
    align-items: center;
    gap: 28px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(9, 35, 51, .2);
}

.rocklin-gallery-light .rg-bottom .rg-image-wrap {
    height: 285px;
}

.rocklin-gallery-light .rg-bottom .rg-caption {
    align-self: center;
    padding: 20px 0;
}

.rocklin-gallery-light .rg-bottom .rg-caption h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 400;
}

/* Gallery footer */
.rocklin-gallery-light .rg-gallery-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 52px;
    color: #718078;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.rocklin-gallery-light .rg-footer-line {
    flex: 1;
    height: 1px;
    background: rgba(9, 35, 51, .2);
}

/* Tablet */
@media (max-width: 991.98px) {
    .rocklin-gallery-light {
        padding: 75px 0 55px;
    }

    .rocklin-gallery-light .rg-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .rocklin-gallery-light .rg-intro {
        justify-self: start;
        max-width: 550px;
    }

    .rocklin-gallery-light .rg-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 330px 290px 250px auto;
        gap: 24px;
    }

    .rocklin-gallery-light .rg-feature {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .rocklin-gallery-light .rg-tall {
        grid-column: 1;
        grid-row: 2;
    }

    .rocklin-gallery-light .rg-opener {
        grid-column: 2;
        grid-row: 2;
    }

    .rocklin-gallery-light .rg-note {
        grid-column: 1;
        grid-row: 3;
    }

    .rocklin-gallery-light .rg-wide {
        grid-column: 2;
        grid-row: 3;
    }

    .rocklin-gallery-light .rg-bottom {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    .rocklin-gallery-light .rg-bottom .rg-image-wrap {
        height: 240px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .rocklin-gallery-light {
        padding: 58px 0 40px;
    }

    .rocklin-gallery-light .rg-header {
        gap: 25px;
        margin-bottom: 35px;
        padding-bottom: 28px;
    }

    .rocklin-gallery-light .rg-eyebrow {
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .rocklin-gallery-light .rg-heading h2 {
        font-size: clamp(40px, 12vw, 58px);
        letter-spacing: -2.5px;
    }

    .rocklin-gallery-light .rg-heading h2 span {
        letter-spacing: -1.8px;
    }

    .rocklin-gallery-light .rg-intro p {
        font-size: 14px;
    }

    .rocklin-gallery-light .rg-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 28px;
    }

    .rocklin-gallery-light .rg-feature,
    .rocklin-gallery-light .rg-tall,
    .rocklin-gallery-light .rg-opener,
    .rocklin-gallery-light .rg-note,
    .rocklin-gallery-light .rg-wide,
    .rocklin-gallery-light .rg-bottom {
        grid-column: 1;
        grid-row: auto;
    }

    .rocklin-gallery-light .rg-image-wrap,
    .rocklin-gallery-light .rg-feature .rg-image-wrap,
    .rocklin-gallery-light .rg-tall .rg-image-wrap {
        height: 245px;
    }

    .rocklin-gallery-light .rg-feature .rg-image-wrap {
        height: 280px;
    }

    .rocklin-gallery-light .rg-tall .rg-image-wrap {
        height: 310px;
    }

    .rocklin-gallery-light .rg-note {
        min-height: 235px;
        padding: 25px;
    }

    .rocklin-gallery-light .rg-bottom {
        display: block;
        margin-top: 0;
    }

    .rocklin-gallery-light .rg-bottom .rg-image-wrap {
        height: 245px;
    }

    .rocklin-gallery-light .rg-bottom .rg-caption {
        padding-top: 14px;
    }

    .rocklin-gallery-light .rg-gallery-footer {
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 35px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .rocklin-gallery-light .rg-footer-line {
        min-width: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rocklin-gallery-light *,
    .rocklin-gallery-light *::before,
    .rocklin-gallery-light *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* ===================================
   ROCKLIN SERVICE FORM
   Original Rocklin color palette
=================================== */

.rocklin-service-request {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(ellipse at 10% 15%, rgba(134,188,176,.09), transparent 35%),
        radial-gradient(ellipse at 90% 85%, rgba(216,237,128,.06), transparent 32%),
        var(--petrol);
    color: var(--ivory);
    font-family: Arial, Helvetica, sans-serif;
}

.rocklin-service-request *,
.rocklin-service-request *::before,
.rocklin-service-request *::after {
    box-sizing: border-box;
}

.rocklin-service-request::before,
.rocklin-service-request::after {
    position: absolute;
    width: 180px;
    height: 1px;
    content: "";
    background: var(--lime);
    opacity: .75;
    pointer-events: none;
}

.rocklin-service-request::before {
    top: 20%;
    left: -45px;
    transform: rotate(-45deg);
}

.rocklin-service-request::after {
    right: -45px;
    bottom: 17%;
    transform: rotate(-45deg);
}

.rocklin-form-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 55px 48px 42px;
    border: 1px solid rgba(134,188,176,.23);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(23,44,52,.96), rgba(9,35,51,.98));
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
}

.rocklin-form-header {
    max-width: 650px;
    margin: 0 auto 38px;
    text-align: center;
}

.rocklin-form-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 20px;
    color: var(--mint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.8px;
}

.rocklin-form-eyebrow span {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--mint);
}

.rocklin-form-header h2 {
    margin: 0 0 17px;
    color: var(--ivory);
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.rocklin-form-header h2 em {
    color: var(--lime);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.rocklin-form-header p {
    max-width: 500px;
    margin: 0 auto;
    color: #b2c2c6;
    font-size: 15px;
    line-height: 1.8;
}

.rocklin-request-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rocklin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 23px 25px;
}

.rocklin-field {
    min-width: 0;
}

.rocklin-field-full {
    grid-column: 1 / -1;
}

.rocklin-field label {
    display: block;
    margin-bottom: 9px;
    color: var(--ivory);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .15px;
}

.rocklin-field input,
.rocklin-field select,
.rocklin-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 51px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid #425d6b;
    border-radius: 7px;
    outline: none;
    background: rgba(246,241,227,.055);
    color: var(--ivory);
    font: inherit;
    font-size: 14px;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.rocklin-field input::placeholder,
.rocklin-field textarea::placeholder {
    color: #9aafb8;
    opacity: 1;
}

.rocklin-field input:focus,
.rocklin-field select:focus,
.rocklin-field textarea:focus {
    border-color: var(--mint);
    background: rgba(246,241,227,.08);
    box-shadow: 0 0 0 3px rgba(134,188,176,.12);
}

.rocklin-field select {
    cursor: pointer;
    color-scheme: dark;
}

.rocklin-field select option {
    background: var(--slate);
    color: var(--ivory);
}

.rocklin-field textarea {
    min-height: 125px;
    resize: vertical;
    line-height: 1.65;
}

.rocklin-date-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr .75fr;
    gap: 12px;
}

.rocklin-date-grid input,
.rocklin-date-grid select {
    min-height: 50px;
    padding: 12px 10px;
}

.rocklin-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-height: 57px;
    margin-top: 32px;
    padding: 14px 22px;
    border: 1px solid var(--lime);
    border-radius: 8px;
    background: var(--lime);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.rocklin-submit:hover {
    transform: translateY(-2px);
    background: var(--mint);
    border-color: var(--mint);
}

.rocklin-submit-arrow {
    font-size: 21px;
    line-height: 1;
    transition: transform .25s ease;
}

.rocklin-submit:hover .rocklin-submit-arrow {
    transform: translate(3px, -3px);
}

.rocklin-form-note {
    margin: 19px 0 0;
    color: #a7b8bd;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

/* Tablet */
@media (max-width: 767.98px) {
    .rocklin-service-request {
        padding: 65px 0;
    }

    .rocklin-form-shell {
        padding: 40px 28px 30px;
    }

    .rocklin-form-header {
        margin-bottom: 30px;
    }

    .rocklin-form-grid {
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .rocklin-service-request {
        padding: 45px 0;
    }

    .rocklin-form-shell {
        padding: 32px 19px 25px;
        border-radius: 13px;
    }

    .rocklin-form-eyebrow {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 2px;
    }

    .rocklin-form-eyebrow span {
        width: 22px;
    }

    .rocklin-form-header h2 {
        font-size: 32px;
        letter-spacing: -.8px;
    }

    .rocklin-form-header p {
        font-size: 13px;
    }

    .rocklin-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .rocklin-field-full {
        grid-column: auto;
    }

    .rocklin-date-grid {
        grid-template-columns: 1fr 1fr;
    }

    .rocklin-date-grid input {
        grid-column: 1 / -1;
    }

    .rocklin-field input,
    .rocklin-field select,
    .rocklin-field textarea {
        font-size: 16px;
    }

    .rocklin-submit {
        min-height: 54px;
        margin-top: 25px;
    }
}

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

/* ==================================
   ROCKLIN LIGHT CTA SECTION
   Original Rocklin color palette
================================== */

.rocklin-light-cta {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    position: relative;
    overflow: hidden;
    padding: 95px 0 35px;
    background: var(--ivory);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

.rocklin-light-cta *,
.rocklin-light-cta *::before,
.rocklin-light-cta *::after {
    box-sizing: border-box;
}

.rocklin-light-cta .rlcta-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: stretch;
    gap: 55px;
}

/* Left side */
.rocklin-light-cta .rlcta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 15px 0 25px;
}

.rocklin-light-cta .rlcta-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    color: #65786e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.7;
}

.rocklin-light-cta .rlcta-kicker-line {
    flex: 0 0 34px;
    height: 3px;
    background: var(--mint);
}

.rocklin-light-cta .rlcta-content h2 {
    max-width: 650px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(42px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -3.5px;
}

.rocklin-light-cta .rlcta-content h2 span {
    display: block;
    color: #73877c;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: -2px;
}

.rocklin-light-cta .rlcta-description {
    max-width: 485px;
    margin: 25px 0 35px;
    color: #53656a;
    font-size: 15px;
    line-height: 1.9;
}

.rocklin-light-cta .rlcta-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 470px;
    padding-top: 19px;
    border-top: 1px solid rgba(9, 35, 51, .2);
}

.rocklin-light-cta .rlcta-index {
    color: #6d7d78;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.rocklin-light-cta .rlcta-index b {
    padding: 0 6px;
    color: #9aa79d;
}

.rocklin-light-cta .rlcta-decor {
    color: #72877b;
    font-size: 25px;
}

/* Right action panel */
.rocklin-light-cta .rlcta-action {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 420px;
    padding: 30px;
    overflow: hidden;
    background: var(--ink);
    color: var(--ivory);
}

.rocklin-light-cta .rlcta-action::after {
    position: absolute;
    right: -65px;
    bottom: 75px;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(134, 188, 176, .23);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.rocklin-light-cta .rlcta-action-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.rocklin-light-cta .rlcta-small-label {
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-light-cta .rlcta-star {
    color: var(--lime);
    font-size: 27px;
}

.rocklin-light-cta .rlcta-action-copy {
    position: relative;
    z-index: 1;
    padding: 35px 0;
}

.rocklin-light-cta .rlcta-number {
    display: inline-block;
    margin-bottom: 17px;
    color: var(--lime);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-light-cta .rlcta-action h3 {
    margin: 0 0 16px;
    color: var(--ivory);
    font-size: clamp(28px, 3vw, 39px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -1px;
}

.rocklin-light-cta .rlcta-action-copy p {
    max-width: 330px;
    margin: 0;
    color: #bdcbca;
    font-size: 14px;
    line-height: 1.8;
}

/* Action button */
.rocklin-light-cta .rlcta-button {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 58px;
    padding: 14px 17px 14px 21px;
    background: var(--lime);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

.rocklin-light-cta .rlcta-button:hover {
    background: var(--mint);
    color: var(--ink);
}

.rocklin-light-cta .rlcta-button-arrow {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(9, 35, 51, .25);
    border-radius: 50%;
    font-size: 18px;
    transition: transform .25s ease;
}

.rocklin-light-cta .rlcta-button:hover .rlcta-button-arrow {
    transform: translate(3px, -3px);
}

/* Panel footer */
.rocklin-light-cta .rlcta-action-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    color: #a9b9b8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.rocklin-light-cta .rlcta-footer-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mint);
}

/* Bottom line */
.rocklin-light-cta .rlcta-footer-line {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 55px;
    color: #73827b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.rocklin-light-cta .rlcta-long-line {
    flex: 1;
    height: 1px;
    background: rgba(9, 35, 51, .2);
}

/* Tablet */
@media (max-width: 991.98px) {
    .rocklin-light-cta {
        padding-top: 70px;
    }

    .rocklin-light-cta .rlcta-layout {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .rocklin-light-cta .rlcta-content h2 {
        font-size: clamp(39px, 5.5vw, 57px);
        letter-spacing: -2px;
    }

    .rocklin-light-cta .rlcta-action {
        min-height: 390px;
        padding: 25px;
    }

    .rocklin-light-cta .rlcta-footer-line {
        margin-top: 40px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .rocklin-light-cta {
        padding: 55px 0 28px;
    }

    .rocklin-light-cta .rlcta-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rocklin-light-cta .rlcta-content {
        padding: 0;
    }

    .rocklin-light-cta .rlcta-content h2 {
        font-size: clamp(42px, 10vw, 61px);
    }

    .rocklin-light-cta .rlcta-description {
        margin: 22px 0 27px;
        font-size: 14px;
    }

    .rocklin-light-cta .rlcta-action {
        min-height: 370px;
        padding: 25px;
    }

    .rocklin-light-cta .rlcta-action h3 {
        font-size: 34px;
    }

    .rocklin-light-cta .rlcta-footer-line {
        gap: 10px;
        margin-top: 32px;
        font-size: 8px;
        letter-spacing: 1px;
    }
}

@media (max-width: 380px) {
    .rocklin-light-cta .rlcta-content h2 {
        font-size: 39px;
        letter-spacing: -1.8px;
    }

    .rocklin-light-cta .rlcta-action {
        padding: 21px;
    }

    .rocklin-light-cta .rlcta-footer-line {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rocklin-light-cta *,
    .rocklin-light-cta *::before,
    .rocklin-light-cta *::after {
        transition-duration: .01ms !important;
    }
}
/* =========================================
   ROCKLIN CONTACT + MAP + FOOTER
   Palette: original Rocklin colors
========================================= */

.rocklin-contact-footer {
    --petrol: #101e27;
    --ink: #092333;
    --lime: #d8ed80;
    --mint: #86bcb0;
    --ivory: #f6f1e3;
    --slate: #172c34;

    overflow: hidden;
    padding: 85px 0 0;
    background: var(--petrol);
    color: var(--ivory);
    font-family: Arial, Helvetica, sans-serif;
}

.rocklin-contact-footer *,
.rocklin-contact-footer *::before,
.rocklin-contact-footer *::after {
    box-sizing: border-box;
}

.rocklin-contact-footer a {
    text-decoration: none;
}

.rocklin-contact-heading {
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 45px;
    align-items: end;
    margin-bottom: 42px;
}

.rocklin-contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.4px;
}

.rocklin-contact-eyebrow-line {
    width: 32px;
    height: 2px;
    background: var(--lime);
}

.rocklin-contact-heading h2 {
    margin: 0;
    color: var(--ivory);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2.5px;
}

.rocklin-contact-heading h2 em {
    color: var(--lime);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.rocklin-contact-heading > p {
    max-width: 420px;
    margin: 0 0 6px;
    color: #b6c4c5;
    font-size: 14px;
    line-height: 1.9;
}

/* Contact cards */
.rocklin-contact-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 55px;
}

.rocklin-contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 205px;
    padding: 23px 20px;
    border: 1px solid rgba(134,188,176,.2);
    background: var(--slate);
    color: var(--ivory);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.rocklin-contact-card[href]:hover {
    transform: translateY(-4px);
    border-color: var(--mint);
    background: #203941;
    color: var(--ivory);
}

.rocklin-contact-icon {
    display: grid;
    width: 43px;
    height: 43px;
    margin-bottom: 20px;
    place-items: center;
    border: 1px solid rgba(216,237,128,.4);
    color: var(--lime);
    font-size: 16px;
}

.rocklin-contact-card-label {
    margin-bottom: 9px;
    color: var(--mint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.rocklin-contact-card strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--ivory);
    font-size: 17px;
    line-height: 1.4;
}

.rocklin-contact-email {
    font-size: 14px !important;
}

.rocklin-contact-card-action,
.rocklin-contact-card-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    color: #b6c4c5;
    font-size: 11px;
    line-height: 1.6;
}

.rocklin-contact-card-action b {
    color: var(--lime);
    font-size: 16px;
}

/* Map + service areas */
.rocklin-location-layout {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 55px;
}

.rocklin-map-panel {
    min-width: 0;
    padding: 25px;
    background: var(--ivory);
    color: var(--ink);
}

.rocklin-map-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.rocklin-map-kicker {
    display: block;
    margin-bottom: 8px;
    color: #6a8176;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.rocklin-map-heading h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.3;
}

.rocklin-map-pin {
    display: grid;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    place-items: center;
    background: var(--lime);
    color: var(--ink);
    font-size: 17px;
}

.rocklin-map-frame {
    height: 320px;
    overflow: hidden;
    background: #d9dfd5;
}

.rocklin-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.rocklin-map-directions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 16px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(9,35,51,.2);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.rocklin-map-directions span:last-child {
    color: #6a8176;
    font-size: 19px;
}

.rocklin-map-directions:hover {
    color: #58766a;
}

/* Service areas panel */
.rocklin-area-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px;
    border: 1px solid rgba(134,188,176,.2);
    background: var(--slate);
}

.rocklin-area-number {
    margin-bottom: 18px;
    color: var(--lime);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rocklin-area-panel h3 {
    margin: 0 0 12px;
    color: var(--ivory);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.8px;
}

.rocklin-area-description {
    margin: 0 0 23px;
    color: #b6c4c5;
    font-size: 13px;
    line-height: 1.8;
}

.rocklin-area-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.rocklin-area-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 0;
    border-top: 1px solid rgba(246,241,227,.13);
    color: var(--ivory);
    font-size: 13px;
    transition: color .2s ease;
}

.rocklin-area-list a b {
    color: var(--mint);
    font-size: 15px;
}

.rocklin-area-list a:hover,
.rocklin-area-list a:hover b {
    color: var(--lime);
}

.rocklin-area-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding-top: 25px;
}

.rocklin-area-note-icon {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    background: var(--lime);
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
}

.rocklin-area-note p {
    margin: 0;
    color: #b6c4c5;
    font-size: 11px;
    line-height: 1.8;
}

/* Services strip */
.rocklin-services-strip {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 35px;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid rgba(134,188,176,.25);
    border-bottom: 1px solid rgba(134,188,176,.25);
}

.rocklin-services-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--mint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.rocklin-services-heading h3 {
    margin: 0;
    color: var(--ivory);
    font-size: 21px;
    font-weight: 700;
}

.rocklin-services-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rocklin-services-links a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(134,188,176,.22);
    color: #d8e0da;
    font-size: 11px;
    transition: background .2s ease, color .2s ease;
}

.rocklin-services-links a span {
    color: var(--lime);
}

.rocklin-services-links a:hover {
    background: var(--lime);
    color: var(--ink);
}

.rocklin-services-links a:hover span {
    color: var(--ink);
}

/* Main footer */
.rocklin-main-footer {
    padding-top: 48px;
}

.rocklin-footer-main {
    display: grid;
    grid-template-columns: 1.3fr .75fr .9fr 1.15fr;
    gap: 35px;
    padding-bottom: 42px;
}

.rocklin-footer-brand,
.rocklin-footer-column {
    min-width: 0;
}

.rocklin-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ivory);
}

.rocklin-footer-logo:hover {
    color: var(--ivory);
}

.rocklin-logo-mark {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    background: var(--lime);
    color: var(--ink);
    font-size: 19px;
}

.rocklin-footer-logo strong {
    display: block;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.rocklin-footer-logo small {
    display: block;
    margin-top: 3px;
    color: var(--mint);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.rocklin-footer-brand > p {
    max-width: 290px;
    margin: 20px 0 0;
    color: #aebfbe;
    font-size: 12px;
    line-height: 1.9;
}

.rocklin-footer-column h3 {
    margin: 3px 0 20px;
    color: var(--ivory);
    font-size: 14px;
    font-weight: 800;
}

.rocklin-footer-column > a,
.rocklin-footer-column > span {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 13px;
    color: #afc0bf;
    font-size: 12px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.rocklin-footer-column > a:hover {
    color: var(--lime);
}

.rocklin-footer-contact i {
    flex: 0 0 14px;
    margin-top: 4px;
    color: var(--mint);
    text-align: center;
}

/* Bottom footer bar */
.rocklin-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 0;
    border-top: 1px solid rgba(134,188,176,.22);
}

.rocklin-footer-bottom p {
    margin: 0;
    color: #9fb1b0;
    font-size: 11px;
    line-height: 1.8;
}

.rocklin-footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #718b86;
    font-size: 11px;
}

.rocklin-footer-legal a {
    color: #afc0bf;
}

.rocklin-footer-legal a:hover {
    color: var(--lime);
}

/* Tablet */
@media (max-width: 991.98px) {
    .rocklin-contact-footer {
        padding-top: 65px;
    }

    .rocklin-contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .rocklin-area-panel {
        min-height: 390px;
    }

    .rocklin-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 25px;
    }

    .rocklin-services-strip {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .rocklin-contact-footer {
        padding-top: 48px;
    }

    .rocklin-contact-heading {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }

    .rocklin-contact-heading h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .rocklin-contact-heading > p {
        font-size: 13px;
    }

    .rocklin-contact-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 35px;
    }

    .rocklin-contact-card {
        min-height: auto;
        padding: 19px;
    }

    .rocklin-contact-icon {
        margin-bottom: 14px;
    }

    .rocklin-contact-card-action,
    .rocklin-contact-card-detail {
        margin-top: 7px;
        padding-top: 7px;
    }

    .rocklin-map-panel {
        padding: 17px;
    }

    .rocklin-map-frame {
        height: 260px;
    }

    .rocklin-map-heading h3 {
        font-size: 19px;
    }

    .rocklin-area-panel {
        min-height: auto;
        padding: 23px 19px;
    }

    .rocklin-area-panel h3 {
        font-size: 27px;
    }

    .rocklin-area-list {
        grid-template-columns: 1fr;
    }

    .rocklin-services-links {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rocklin-services-links a {
        justify-content: space-between;
    }

    .rocklin-footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 28px;
    }

    .rocklin-footer-brand > p {
        max-width: 100%;
    }

    .rocklin-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}