:root {
    --navy: #294766;
    --navy-deep: #102b46;
    --navy-dark: #071a2d;
    --orange: #f6a000;
    --orange-deep: #df8c00;
    --white: #ffffff;
    --off-white: #f7f8fa;
    --ink: #112132;
    --muted: #657281;
    --line: #e3e7eb;
    --shadow: 0 20px 60px rgba(10, 31, 50, .12);
    --radius: 18px;
    --font-body: 'Manrope', sans-serif;
    --font-display: 'Barlow Condensed', sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
}

body.menu-open {
    overflow: hidden;
}

/* Loader */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--white);
    transition: opacity .55s ease, visibility .55s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.page-loader__mark {
    width: 190px;
}

.page-loader__mark img {
    width: 100%;
}

.page-loader__mark span {
    display: block;
    height: 3px;
    width: 100%;
    margin-top: 18px;
    background: #e7ebef;
    overflow: hidden;
    position: relative;
}

.page-loader__mark span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--orange);
    transform: translateX(-100%);
    animation: loaderLine .95s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes loaderLine {
    to {
        transform: translateX(0);
    }
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 14px 20px 0;
    transition: padding .3s ease;
}

.site-header.is-scrolled {
    padding-top: 8px;
}

.header-shell {
    /* max-width: 1500px; */
    min-height: 106px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 225px 1fr;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(31, 63, 93, .10);
    box-shadow: var(--shadow);
    border-radius: 22px;
    overflow: hidden;
    backdrop-filter: blur(16px);
    transition: min-height .3s ease, border-radius .3s ease;
}

.site-header.is-scrolled .header-shell {
    min-height: 88px;
    border-radius: 17px;
}

.brand-panel {
    position: relative;
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 17px 32px 17px 24px;
    background: var(--navy);
    overflow: hidden;
}

.brand-panel::after {
    content: '';
    position: absolute;
    right: -24px;
    top: -20%;
    width: 65px;
    height: 140%;
    background: var(--white);
    transform: skewX(-14deg);
}

.brand-panel::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 58%;
    background: var(--orange);
}

.brand-panel img {
    position: relative;
    z-index: 1;
    width: 128px;
    max-height: 78px;
    object-fit: contain;
}

.brand-panel__angle {
    position: absolute;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    left: -24px;
    top: -20px;
}

.header-main {
    min-width: 0;
    display: grid;
    grid-template-rows: 34px 1fr;
}

.header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px 0 32px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.header-meta__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-meta__left strong {
    color: var(--navy-deep);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(246, 160, 0, .13);
}

.meta-divider {
    width: 1px;
    height: 12px;
    background: var(--line);
}

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    color: var(--navy-deep);
}

.header-phone svg {
    width: 14px;
    height: 14px;
    fill: var(--orange);
}

.header-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 0 18px 0 32px;
}

.desktop-nav {
    height: 100%;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
}

.desktop-nav a {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #344454;
    transition: color .2s ease;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 17px;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .28s ease;
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: var(--navy-deep);
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-call {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: .25s ease;
}

.icon-call:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.icon-call svg {
    width: 18px;
    height: 18px;
    fill: var(--navy-deep);
}

.quote-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 17px;
    padding: 0 18px 0 21px;
    border-radius: 999px;
    background: var(--orange);
    color: #172332;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: transform .25s ease, background .25s ease;
}

.quote-button:hover {
    background: #ffad09;
    transform: translateY(-2px);
}

.quote-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .25s ease;
}

.quote-button:hover svg {
    transform: translateX(3px);
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--navy-deep);
    cursor: pointer;
    position: relative;
}

.menu-toggle span {
    position: absolute;
    left: 13px;
    width: 20px;
    height: 2px;
    background: #fff;
}

.menu-toggle span:first-child {
    top: 18px;
}

.menu-toggle span:last-child {
    top: 26px;
    width: 14px;
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 24px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--navy-dark);
    color: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s cubic-bezier(.77, 0, .18, 1), visibility .45s;
}

.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-menu__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu__top img {
    width: 130px;
}

.mobile-menu__close {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    position: relative;
    cursor: pointer;
}

.mobile-menu__close span {
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    left: 13px;
    top: 22px;
}

.mobile-menu__close span:first-child {
    transform: rotate(45deg);
}

.mobile-menu__close span:last-child {
    transform: rotate(-45deg);
}

.mobile-menu__nav {
    align-self: center;
    display: grid;
}

.mobile-menu__nav a {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    padding: 12px 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 9vw, 56px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: .95;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mobile-menu__nav span {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--orange);
    letter-spacing: .12em;
}

.mobile-menu__bottom {
    display: grid;
    gap: 8px;
}

.mobile-menu__quote {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 20px;
    background: var(--orange);
    color: var(--navy-dark);
    font-weight: 800;
    border-radius: 12px;
}

.mobile-menu__phone {
    font-size: 20px;
    font-weight: 800;
    margin-top: 8px;
}

.mobile-menu__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

/* Demo hero */
.demo-hero {
    min-height: 720px;
    display: grid;
    align-items: center;
    padding: 100px 24px 110px;
    background:
        radial-gradient(circle at 80% 30%, rgba(246, 160, 0, .11), transparent 25%),
        linear-gradient(180deg, #fff 0%, #f8fafb 100%);
    overflow: hidden;
}

.demo-hero__inner {
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 70px;
    align-items: center;
}

.demo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 19px;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 800;
}

.demo-kicker::before {
    content: '';
    width: 38px;
    height: 3px;
    background: var(--orange);
}

.demo-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(62px, 7vw, 108px);
    line-height: .86;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: var(--navy-dark);
}

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

.demo-copy {
    max-width: 650px;
    margin: 28px 0 31px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.demo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 25px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.demo-btn--primary {
    background: var(--navy-deep);
    color: #fff;
}

.demo-btn--secondary {
    border: 1px solid var(--line);
    background: #fff;
}

.demo-trust {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #546474;
    font-size: 12px;
    font-weight: 700;
}

.demo-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.demo-trust span::before {
    content: '✓';
    color: var(--orange);
    font-weight: 900;
}

.demo-visual {
    position: relative;
    min-height: 460px;
    display: grid;
    place-items: center;
}

.demo-card {
    width: min(460px, 100%);
    aspect-ratio: 1/.88;
    background: var(--navy);
    border-radius: 36px 36px 120px 36px;
    position: relative;
    box-shadow: 0 35px 80px rgba(16, 43, 70, .24);
    overflow: hidden;
}

.demo-card::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    right: -90px;
    top: -70px;
}

.demo-card::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 8px;
    background: var(--orange);
    left: 42px;
    bottom: 44px;
    border-radius: 8px;
}

.demo-card__number {
    position: absolute;
    top: 34px;
    left: 40px;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.demo-card__main {
    position: absolute;
    left: 40px;
    right: 35px;
    top: 105px;
    color: #fff;
}

.demo-card__main strong {
    display: block;
    font-family: var(--font-display);
    font-size: 88px;
    line-height: .85;
    text-transform: uppercase;
}

.demo-card__main span {
    display: block;
    max-width: 220px;
    margin-top: 18px;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    line-height: 1.6;
}

.demo-float {
    position: absolute;
    right: -16px;
    bottom: 20px;
    width: 165px;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}

.demo-float strong {
    display: block;
    font-size: 20px;
    color: var(--navy-dark);
}

.demo-float span {
    font-size: 11px;
    color: var(--muted);
}

/* Footer */
.footer-cta {
    padding: 10px 24px 90px;
    background: var(--off-white);
}

.footer-cta__inner {
    max-width: 1320px;
    margin: 0 auto;
}

.eyebrow {
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: white !important;
}

.footer-cta__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: end;
}

.footer-cta h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(58px, 7vw, 104px);
    line-height: .86;
    text-transform: uppercase;
    color: var(--navy-dark);
}

.footer-cta__action p {
    max-width: 460px;
    color: var(--muted);
    line-height: 1.7;
}

.footer-arrow-link {
    margin-top: 24px;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccd3da;
    border-bottom: 1px solid #ccd3da;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.footer-arrow-link span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    font-size: 20px;
}

.site-footer {
    background: var(--navy-dark);
    color: #fff;
    padding: 74px 24px 22px;
}

.site-footer__grid {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr .7fr .85fr 1fr;
    gap: 55px;
}

.footer-brand img {
    width: 145px;
}

.footer-brand p {
    max-width: 340px;
    margin: 24px 0;
    color: rgba(255, 255, 255, .58);
    line-height: 1.7;
    font-size: 13px;
}

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-trust span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.footer-heading {
    margin: 0 0 20px !important;
    color: var(--orange) !important;
    font-size: 10px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    font-size: 13px;
}

.footer-col>a:not(.footer-phone) {
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease, transform .2s ease;
}

.footer-col>a:hover {
    color: #fff;
    transform: translateX(2px);
}

.footer-contact p {
    margin: 4px 0 3px;
    color: rgba(255, 255, 255, .58);
    line-height: 1.7;
    font-size: 12px;
}

.footer-phone {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.text-link {
    color: var(--orange) !important;
    font-weight: 700;
}

.footer-bottom {
    max-width: 1320px;
    margin: 60px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    color: rgba(255, 255, 255, .42);
    font-size: 14px;
    text-align: center;
}

.footer-bottom .footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.site-credit {
    text-align: right;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1180px) {
    .header-shell {
        grid-template-columns: 190px 1fr;
    }

    .desktop-nav {
        gap: 20px;
    }

    .desktop-nav a:nth-child(3),
    .desktop-nav a:nth-child(5) {
        display: none;
    }

    .header-meta {
        padding-left: 24px;
    }

    .header-nav-row {
        padding-left: 24px;
    }
}

@media (max-width: 900px) {
    .site-header {
        padding: 10px 12px 0;
    }

    .header-shell {
        min-height: 76px;
        grid-template-columns: 152px 1fr;
        border-radius: 17px;
    }

    .brand-panel {
        padding: 10px 23px 10px 15px;
    }

    .brand-panel img {
        width: 105px;
        max-height: 58px;
    }

    .header-main {
        display: block;
    }

    .header-meta,
    .desktop-nav,
    .quote-button {
        display: none;
    }

    .header-nav-row {
        height: 100%;
        justify-content: flex-end;
        padding: 0 13px;
    }

    .menu-toggle {
        display: block;
    }

    .icon-call {
        background: var(--off-white);
    }

    .demo-hero {
        min-height: auto;
        padding: 90px 22px 80px;
    }

    .demo-hero__inner {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .demo-visual {
        min-height: 400px;
    }

    .demo-card {
        width: min(430px, 90%);
    }

    .footer-cta__grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
    }

    .site-credit {
        text-align: left;
    }
}

@media (max-width: 580px) {
    .header-shell {
        grid-template-columns: 132px 1fr;
    }

    .brand-panel::after {
        right: -34px;
    }

    .brand-panel img {
        width: 92px;
    }

    .icon-call {
        width: 42px;
        height: 42px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }

    .menu-toggle span {
        left: 11px;
    }

    .mobile-menu {
        padding: 19px;
    }

    .demo-hero {
        padding-top: 70px;
    }

    .demo-copy {
        font-size: 15px;
    }

    .demo-buttons {
        display: grid;
    }

    .demo-btn {
        width: 100%;
    }

    .demo-card {
        border-radius: 28px 28px 90px 28px;
    }

    .demo-card__main strong {
        font-size: 65px;
    }

    .demo-float {
        right: -2px;
        width: 150px;
    }

    .footer-cta {
        padding: 76px 20px 68px;
    }

    .site-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-brand {
        grid-column: auto;
    }
}

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

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

:root {
    --navy: #294766;
    --navy-deep: #102b46;
    --navy-dark: #071a2d;
    --orange: #f6a000;
    --orange-deep: #df8c00;
    --white: #ffffff;
    --off-white: #f7f8fa;
    --ink: #112132;
    --muted: #657281;
    --line: #e3e7eb;
    --shadow: 0 20px 60px rgba(10, 31, 50, .12);
    --radius: 18px;
    --font-body: 'Manrope', sans-serif;
    --font-display: 'Barlow Condensed', sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
}

body.menu-open {
    overflow: hidden;
}

/* Loader */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--white);
    transition: opacity .55s ease, visibility .55s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.page-loader__mark {
    width: 190px;
}

.page-loader__mark img {
    width: 100%;
}

.page-loader__mark span {
    display: block;
    height: 3px;
    width: 100%;
    margin-top: 18px;
    background: #e7ebef;
    overflow: hidden;
    position: relative;
}

.page-loader__mark span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--orange);
    transform: translateX(-100%);
    animation: loaderLine .95s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes loaderLine {
    to {
        transform: translateX(0);
    }
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 14px 20px 0;
    transition: padding .3s ease;
}

.site-header.is-scrolled {
    padding-top: 8px;
}

.site-header.is-scrolled .header-shell {
    min-height: 88px;
    border-radius: 17px;
}

.brand-panel {
    position: relative;
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 17px 32px 17px 24px;
    background: var(--navy);
    overflow: hidden;
}

.brand-panel::after {
    content: '';
    position: absolute;
    right: -24px;
    top: -20%;
    width: 65px;
    height: 140%;
    background: var(--white);
    transform: skewX(-14deg);
}

.brand-panel::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 58%;
    background: var(--orange);
}

.brand-panel img {
    position: relative;
    z-index: 1;
    width: 128px;
    max-height: 78px;
    object-fit: contain;
}

.brand-panel__angle {
    position: absolute;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    left: -24px;
    top: -20px;
}

.header-main {
    min-width: 0;
    display: grid;
    grid-template-rows: 34px 1fr;
}

.header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px 0 32px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.header-meta__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-meta__left strong {
    color: var(--navy-deep);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(246, 160, 0, .13);
}

.meta-divider {
    width: 1px;
    height: 12px;
    background: var(--line);
}

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    color: var(--navy-deep);
}

.header-phone svg {
    width: 14px;
    height: 14px;
    fill: var(--orange);
}

.header-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 0 18px 0 32px;
}

.desktop-nav {
    height: 100%;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
}

.desktop-nav a {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #344454;
    transition: color .2s ease;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 17px;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .28s ease;
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: var(--navy-deep);
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-call {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: .25s ease;
}

.icon-call:hover {
    border-color: var(--orange);
    transform: translateY(-2px);
}

.icon-call svg {
    width: 18px;
    height: 18px;
    fill: var(--navy-deep);
}

.quote-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 17px;
    padding: 0 18px 0 21px;
    border-radius: 999px;
    background: var(--orange);
    color: #172332;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: transform .25s ease, background .25s ease;
}

.quote-button:hover {
    background: #ffad09;
    transform: translateY(-2px);
}

.quote-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .25s ease;
}

.quote-button:hover svg {
    transform: translateX(3px);
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--navy-deep);
    cursor: pointer;
    position: relative;
}

.menu-toggle span {
    position: absolute;
    left: 13px;
    width: 20px;
    height: 2px;
    background: #fff;
}

.menu-toggle span:first-child {
    top: 18px;
}

.menu-toggle span:last-child {
    top: 26px;
    width: 14px;
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 24px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--navy-dark);
    color: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s cubic-bezier(.77, 0, .18, 1), visibility .45s;
}

.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-menu__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu__top img {
    width: 130px;
}

.mobile-menu__close {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    position: relative;
    cursor: pointer;
}

.mobile-menu__close span {
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    left: 13px;
    top: 22px;
}

.mobile-menu__close span:first-child {
    transform: rotate(45deg);
}

.mobile-menu__close span:last-child {
    transform: rotate(-45deg);
}

.mobile-menu__nav {
    align-self: center;
    display: grid;
}

.mobile-menu__nav a {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    padding: 12px 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 9vw, 56px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: .95;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mobile-menu__nav span {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--orange);
    letter-spacing: .12em;
}

.mobile-menu__bottom {
    display: grid;
    gap: 8px;
}

.mobile-menu__quote {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 20px;
    background: var(--orange);
    color: var(--navy-dark);
    font-weight: 800;
    border-radius: 12px;
}

.mobile-menu__phone {
    font-size: 20px;
    font-weight: 800;
    margin-top: 8px;
}

.mobile-menu__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

/* Demo hero */
.demo-hero {
    min-height: 720px;
    display: grid;
    align-items: center;
    padding: 100px 24px 110px;
    background:
        radial-gradient(circle at 80% 30%, rgba(246, 160, 0, .11), transparent 25%),
        linear-gradient(180deg, #fff 0%, #f8fafb 100%);
    overflow: hidden;
}

.demo-hero__inner {
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 70px;
    align-items: center;
}

.demo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 19px;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 800;
}

.demo-kicker::before {
    content: '';
    width: 38px;
    height: 3px;
    background: var(--orange);
}

.demo-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(62px, 7vw, 108px);
    line-height: .86;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: var(--navy-dark);
}

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

.demo-copy {
    max-width: 650px;
    margin: 28px 0 31px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.demo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 25px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.demo-btn--primary {
    background: var(--navy-deep);
    color: #fff;
}

.demo-btn--secondary {
    border: 1px solid var(--line);
    background: #fff;
}

.demo-trust {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #546474;
    font-size: 12px;
    font-weight: 700;
}

.demo-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.demo-trust span::before {
    content: '✓';
    color: var(--orange);
    font-weight: 900;
}

.demo-visual {
    position: relative;
    min-height: 460px;
    display: grid;
    place-items: center;
}

.demo-card {
    width: min(460px, 100%);
    aspect-ratio: 1/.88;
    background: var(--navy);
    border-radius: 36px 36px 120px 36px;
    position: relative;
    box-shadow: 0 35px 80px rgba(16, 43, 70, .24);
    overflow: hidden;
}

.demo-card::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    right: -90px;
    top: -70px;
}

.demo-card::after {
    content: '';
    position: absolute;
    width: 140px;
    height: 8px;
    background: var(--orange);
    left: 42px;
    bottom: 44px;
    border-radius: 8px;
}

.demo-card__number {
    position: absolute;
    top: 34px;
    left: 40px;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.demo-card__main {
    position: absolute;
    left: 40px;
    right: 35px;
    top: 105px;
    color: #fff;
}

.demo-card__main strong {
    display: block;
    font-family: var(--font-display);
    font-size: 88px;
    line-height: .85;
    text-transform: uppercase;
}

.demo-card__main span {
    display: block;
    max-width: 220px;
    margin-top: 18px;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    line-height: 1.6;
}

.demo-float {
    position: absolute;
    right: -16px;
    bottom: 20px;
    width: 165px;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}

.demo-float strong {
    display: block;
    font-size: 20px;
    color: var(--navy-dark);
}

.demo-float span {
    font-size: 11px;
    color: var(--muted);
}

.footer-cta__inner {
    max-width: 1320px;
    margin: 0 auto;
}

.eyebrow {
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    font-weight: 800;
    color: var(--orange-deep);
}

.footer-cta__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: end;
}

.footer-cta h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(58px, 7vw, 104px);
    line-height: .86;
    text-transform: uppercase;
    color: var(--navy-dark);
}

.footer-cta__action p {
    max-width: 460px;
    color: var(--muted);
    line-height: 1.7;
}

.footer-arrow-link {
    margin-top: 24px;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccd3da;
    border-bottom: 1px solid #ccd3da;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.footer-arrow-link span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    font-size: 20px;
}

.site-footer {
    background: var(--navy-dark);
    color: #fff;
    padding: 74px 24px 22px;
}

.site-footer__grid {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr .7fr .85fr 1fr;
    gap: 55px;
}

.footer-brand img {
    width: 145px;
}

.footer-brand p {
    max-width: 340px;
    margin: 24px 0;
    color: rgba(255, 255, 255, .58);
    line-height: 1.7;
    font-size: 13px;
}

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-trust span {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.footer-heading {
    margin: 0 0 20px !important;
    color: var(--orange) !important;
    font-size: 10px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    font-size: 13px;
}

.footer-col>a:not(.footer-phone) {
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease, transform .2s ease;
}

.footer-col>a:hover {
    color: #fff;
    transform: translateX(2px);
}

.footer-contact p {
    margin: 4px 0 3px;
    color: rgba(255, 255, 255, .58);
    line-height: 1.7;
    font-size: 12px;
}

.footer-phone {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.text-link {
    color: var(--orange) !important;
    font-weight: 700;
}

.footer-bottom {
    max-width: 1320px;
    margin: 60px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    color: rgba(255, 255, 255, .42);
    font-size: 14px;
}

.footer-bottom div {
    gap: 18px;
}

.site-credit {
    text-align: right;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1180px) {
    /* .header-shell {
        grid-template-columns: 190px 1fr;
    } */

    .desktop-nav {
        gap: 20px;
    }

    .desktop-nav a:nth-child(3),
    .desktop-nav a:nth-child(5) {
        display: none;
    }

    .header-meta {
        padding-left: 24px;
    }

    .header-nav-row {
        padding-left: 24px;
    }
}

@media (max-width: 900px) {
    .site-header {
        padding: 10px 12px 0;
    }

    .header-shell {
        min-height: 76px;
        grid-template-columns: 152px 1fr;
        border-radius: 17px;
    }

    .brand-panel {
        padding: 10px 23px 10px 15px;
    }

    .brand-panel img {
        width: 105px;
        max-height: 58px;
    }

    .header-main {
        display: block;
    }

    .header-meta,
    .desktop-nav,
    .quote-button {
        display: none;
    }

    .header-nav-row {
        height: 100%;
        justify-content: flex-end;
        padding: 0 13px;
    }

    .menu-toggle {
        display: block;
    }

    .icon-call {
        background: var(--off-white);
    }

    .demo-hero {
        min-height: auto;
        padding: 90px 22px 80px;
    }

    .demo-hero__inner {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .demo-visual {
        min-height: 400px;
    }

    .demo-card {
        width: min(430px, 90%);
    }

    .footer-cta__grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        grid-template-columns: 1fr;
    }

    .site-credit {
        text-align: center;
    }
}

@media (max-width: 580px) {
    /* .header-shell {
        grid-template-columns: 132px 1fr;
    } */

    .brand-panel::after {
        right: -34px;
    }

    .brand-panel img {
        width: 92px;
    }

    .icon-call {
        width: 42px;
        height: 42px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }

    .menu-toggle span {
        left: 11px;
    }

    .mobile-menu {
        padding: 19px;
    }

    .demo-hero {
        padding-top: 70px;
    }

    .demo-copy {
        font-size: 15px;
    }

    .demo-buttons {
        display: grid;
    }

    .demo-btn {
        width: 100%;
    }

    .demo-card {
        border-radius: 28px 28px 90px 28px;
    }

    .demo-card__main strong {
        font-size: 65px;
    }

    .demo-float {
        right: -2px;
        width: 150px;
    }

    .footer-cta {
        padding: 76px 20px 68px;
    }

    .site-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-brand {
        grid-column: auto;
    }
}

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

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

/* =========================================================
   COOKIE CONSENT
========================================================== */
.cookie-consent[hidden] {
    display: none !important;
}

.cookie-consent {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 26, 45, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.cookie-consent.is-visible {
    opacity: 1;
    visibility: visible;
}

.cookie-consent__panel {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 24px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(16, 43, 70, .11);
    border-radius: 22px;
    box-shadow: 0 24px 80px rgba(7, 26, 45, .24);
    backdrop-filter: blur(18px);
    transform: translateY(24px) scale(.985);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.cookie-consent.is-visible .cookie-consent__panel {
    transform: translateY(0) scale(1);
}

.cookie-consent__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 17px;
    color: var(--navy-dark);
    background: var(--orange);
}

.cookie-consent__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.cookie-consent__content {
    min-width: 0;
}

.cookie-consent__eyebrow {
    margin: 0 0 5px;
    color: var(--orange-deep);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.cookie-consent h2 {
    margin: 0 0 5px;
    color: var(--navy-dark);
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
}

.cookie-consent__content>p:not(.cookie-consent__eyebrow) {
    max-width: 690px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.cookie-consent__policy {
    display: inline-block;
    margin-top: 8px;
    color: var(--navy-deep);
    font-size: 11px;
    font-weight: 800;
}

.cookie-consent__policy:hover {
    color: var(--orange-deep);
}

.cookie-consent__actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cookie-btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.cookie-btn:hover {
    transform: translateY(-1px);
}

.cookie-btn--accept {
    color: #fff;
    background: var(--navy-dark);
}

.cookie-btn--accept:hover {
    background: var(--navy);
}

.cookie-btn--decline {
    color: var(--navy-dark);
    background: #fff;
    border-color: var(--line);
}

.cookie-btn--decline:hover {
    border-color: #c8d0d8;
    background: var(--off-white);
}

.footer-cookie-settings {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.footer-cookie-settings:hover {
    color: #fff;
}

@media (max-width: 850px) {
    .cookie-consent {
        padding: 14px;
    }

    .cookie-consent__panel {
        grid-template-columns: auto 1fr;
        gap: 15px;
        padding: 18px;
        border-radius: 18px;
    }

    .cookie-consent__icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        align-self: start;
    }

    .cookie-consent__icon svg {
        width: 24px;
        height: 24px;
    }

    .cookie-consent__actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .cookie-btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .cookie-consent {
        align-items: flex-end;
        padding: 10px;
        background: rgba(7, 26, 45, .28);
    }

    .cookie-consent__panel {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 17px;
        border-radius: 18px;
    }

    .cookie-consent__icon {
        display: none;
    }

    .cookie-consent h2 {
        font-size: 25px;
    }

    .cookie-consent__actions {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}

/* =========================================
   ERROR PAGES
   403 / 404
========================================= */

.error-page {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 720px;
    padding: 190px 0 120px;
    background:
        radial-gradient(circle at 15% 20%,
            rgba(244, 145, 30, 0.08),
            transparent 28%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f7f9fc 100%);
    overflow: hidden;
}

.error-page .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.error-page__inner {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}


/* =========================================
   LARGE ERROR NUMBER
========================================= */

.error-page__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 25px;
    color: var(--navy, #07111f);
    font-size: clamp(6rem, 14vw, 10rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.08em;
}

.error-page__code>span {
    display: block;
}


/* =========================================
   KEY ICON - 404
========================================= */

.error-page__key {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(90px, 12vw, 135px);
    height: clamp(90px, 12vw, 135px);
    border-radius: 50%;
    background: var(--orange, #f4911e);
    box-shadow:
        0 20px 50px rgba(244, 145, 30, 0.22);
    transform: rotate(-8deg);
}

.error-page__key svg {
    width: 68%;
    height: 68%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================
   LOCK ICON - 403
========================================= */

.error-page__lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(90px, 12vw, 135px);
    height: clamp(90px, 12vw, 135px);
    border-radius: 50%;
    background: var(--orange, #f4911e);
    box-shadow:
        0 20px 50px rgba(244, 145, 30, 0.22);
}

.error-page__lock svg {
    width: 63%;
    height: 63%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.error-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--orange, #f4911e);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.error-page__eyebrow::before,
.error-page__eyebrow::after {
    content: "";
    display: block;
    width: 25px;
    height: 2px;
    background: currentColor;
}

.error-page h1 {
    margin: 0;
    color: var(--navy, #07111f);
    font-size: clamp(2.6rem, 6vw, 5.3rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.error-page h1 span {
    color: var(--orange, #f4911e);
}

.error-page__lead {
    max-width: 650px;
    margin: 27px auto 0;
    color: #667085;
    font-size: 1.08rem;
    line-height: 1.8;
}


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

.error-page__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 35px;
}

.error-page__actions .btn {
    min-width: 170px;
}

.error-page__actions .btn span {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.25s ease;
}

.error-page__actions .btn:hover span {
    transform: translateX(4px);
}


/* =========================================
   HELP CARD
========================================= */

.error-page__help {
    display: flex;
    align-items: center;
    gap: 17px;
    max-width: 590px;
    margin: 55px auto 0;
    padding: 19px 22px;
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 18px 50px rgba(7, 17, 31, 0.07);
    text-align: left;
    backdrop-filter: blur(10px);
}

.error-page__help-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(244, 145, 30, 0.12);
    color: var(--orange, #f4911e);
    font-size: 1.2rem;
    font-weight: 900;
}

.error-page__help strong {
    display: block;
    margin-bottom: 3px;
    color: var(--navy, #07111f);
    font-size: 0.95rem;
}

.error-page__help p {
    margin: 0;
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.55;
}


/* =========================================
   BACKGROUND DECORATION
========================================= */

.error-page__decor {
    position: absolute;
    border: 1px solid rgba(7, 17, 31, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.error-page__decor--one {
    top: 12%;
    left: -180px;
    width: 430px;
    height: 430px;
}

.error-page__decor--two {
    right: -250px;
    bottom: -220px;
    width: 600px;
    height: 600px;
}

.error-page__decor::after {
    content: "";
    position: absolute;
    inset: 35px;
    border: 1px solid rgba(244, 145, 30, 0.07);
    border-radius: inherit;
}


/* =========================================
   ENTRY ANIMATION
========================================= */

@keyframes errorReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.error-page__code,
.error-page__eyebrow,
.error-page h1,
.error-page__lead,
.error-page__actions,
.error-page__help {
    opacity: 0;
    animation: errorReveal 0.7s ease forwards;
}

.error-page__code {
    animation-delay: 0.05s;
}

.error-page__eyebrow {
    animation-delay: 0.14s;
}

.error-page h1 {
    animation-delay: 0.22s;
}

.error-page__lead {
    animation-delay: 0.3s;
}

.error-page__actions {
    animation-delay: 0.38s;
}

.error-page__help {
    animation-delay: 0.46s;
}


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

@media (max-width: 768px) {

    .error-page {
        min-height: auto;
        padding: 150px 0 85px;
    }

    .error-page__code {
        gap: 7px;
        margin-bottom: 25px;
        font-size: clamp(5rem, 26vw, 7rem);
    }

    .error-page__key,
    .error-page__lock {
        width: 82px;
        height: 82px;
    }

    .error-page h1 {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .error-page__lead {
        font-size: 1rem;
    }

    .error-page__actions {
        flex-direction: column;
    }

    .error-page__actions .btn {
        width: 100%;
        max-width: 340px;
    }

    .error-page__help {
        align-items: flex-start;
        margin-top: 40px;
        padding: 17px;
    }

}


@media (max-width: 480px) {

    .error-page {
        padding-top: 135px;
    }

    .error-page__code {
        font-size: 5.2rem;
    }

    .error-page__key,
    .error-page__lock {
        width: 68px;
        height: 68px;
    }

    .error-page__eyebrow {
        font-size: 0.7rem;
    }

    .error-page__eyebrow::before,
    .error-page__eyebrow::after {
        width: 16px;
    }

    .error-page__help-icon {
        width: 42px;
        height: 42px;
    }

}


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

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

    .error-page__code,
    .error-page__eyebrow,
    .error-page h1,
    .error-page__lead,
    .error-page__actions,
    .error-page__help {
        opacity: 1;
        animation: none;
    }

}

/* =========================================
   GOOGLE REVIEWS
========================================= */

.google-reviews-section {
    position: relative;
    padding: 110px 0 105px;
    background:
        radial-gradient(circle at 100% 0%,
            rgba(244, 145, 30, 0.07),
            transparent 30%),
        #f5f7fa;
    overflow: hidden;
}

.reviews-shell {
    width: min(1460px, calc(100% - 64px));
    margin: 0 auto;
}


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

.reviews-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 50px;
    margin-bottom: 55px;
}

.reviews-heading h2 {
    margin: 12px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(3rem, 5vw, 5.4rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.reviews-heading h2 span {
    color: var(--orange, #f4911e);
}


/* =========================================
   GOOGLE SUMMARY
========================================= */

.reviews-google-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 280px;
    padding: 19px 23px;
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(7, 17, 31, 0.06);
}

.reviews-google-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid #e8ebef;
    box-shadow: 0 5px 18px rgba(7, 17, 31, 0.08);
}

.google-g {
    font-size: 1.85rem;
    font-weight: 800;

    /*
     * Google-inspired multicolour effect.
     */
    background:
        conic-gradient(from -45deg,
            #4285f4 0deg 90deg,
            #34a853 90deg 180deg,
            #fbbc05 180deg 270deg,
            #ea4335 270deg);

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reviews-google-label {
    margin: 0 0 3px;
    color: #667085;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reviews-google-score {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviews-google-score strong {
    color: var(--navy, #07111f);
    font-size: 1.6rem;
    line-height: 1;
}

.reviews-summary-stars {
    display: flex;
    gap: 1px;
    color: var(--orange, #f4911e);
    font-size: 0.95rem;
}

.reviews-google-count {
    margin: 4px 0 0;
    color: #667085;
    font-size: 0.79rem;
}


/* =========================================
   SLIDER
========================================= */

.reviews-slider {
    position: relative;
}

.reviews-slider__viewport {
    overflow: hidden;
}

.reviews-slider__track {
    display: flex;
    gap: 22px;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}


/* =========================================
   REVIEW CARD
========================================= */

.review-card {
    position: relative;

    display: flex;
    flex: 0 0 calc((100% - 44px) / 3);
    flex-direction: column;

    min-width: 0;

    height: 390px;

    padding: 29px;

    border: 1px solid rgba(7, 17, 31, 0.075);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 17px 50px rgba(7, 17, 31, 0.055);

    transition:
        height 0.35s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


.review-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 30px;

    width: 55px;
    height: 3px;

    border-radius: 0 0 4px 4px;

    background: var(--orange, #f4911e);
}


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

.review-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    min-height: 50px;
}


.review-card__author {
    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 0;
}


.review-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: var(--navy, #07111f);

    color: #ffffff;

    font-size: 1rem;
    font-weight: 800;
}


.review-card__author h3 {
    margin: 0;

    color: var(--navy, #07111f);

    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}


.review-card__date {
    margin: 4px 0 0;

    color: #98a2b3;

    font-size: 0.78rem;
}


.review-card__google {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 33px;
    height: 33px;

    border: 1px solid #e8ebef;
    border-radius: 50%;

    background: #ffffff;

    color: #4285f4;

    font-size: 0.95rem;
    font-weight: 800;
}


/* =========================================
   STARS
========================================= */

.review-card__stars {
    display: flex;

    gap: 2px;

    margin-top: 22px;

    color: var(--orange, #f4911e);

    font-size: 1rem;

    line-height: 1;
}


/* =========================================
   REVIEW BODY
========================================= */

.review-card__body {
    position: relative;

    display: flex;
    flex-direction: column;

    margin-top: 18px;

    min-height: 155px;
}


.review-card__text {
    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    color: #475467;

    font-size: 0.94rem;
    line-height: 1.75;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;

    line-clamp: 5;
}


/* Expanded review */

.review-card.is-expanded {
    height: auto;
    min-height: 390px;

    box-shadow:
        0 22px 65px rgba(7, 17, 31, 0.09);
}


.review-card.is-expanded .review-card__body {
    min-height: 0;
}


.review-card.is-expanded .review-card__text {
    display: block;

    overflow: visible;

    -webkit-line-clamp: unset;
    line-clamp: unset;
}


/* =========================================
   READ MORE
========================================= */

.review-card__more {
    align-self: flex-start;

    margin-top: 10px;
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--navy, #07111f);

    font: inherit;

    font-size: 0.78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.review-card__more::after {
    content: " →";

    color: var(--orange, #f4911e);
}


.review-card__more:hover {
    color: var(--orange, #f4911e);
}


.review-card__more[hidden] {
    display: none;
}


/* =========================================
   CARD FOOTER
========================================= */

.review-card__footer {
    margin-top: auto;

    padding-top: 20px;
}


.review-card__footer span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #98a2b3;

    font-size: 0.7rem;
    font-weight: 600;
}


.review-card__footer span::before {
    content: "+";

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

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: rgba(52, 168, 83, 0.1);

    color: #34a853;

    font-size: 0.65rem;
    font-weight: 900;
}


/* =========================================
   CONTROLS
========================================= */

.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 33px;
}

.reviews-controls__buttons {
    display: flex;
    gap: 9px;
}

.reviews-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(7, 17, 31, 0.12);
    border-radius: 50%;
    background: #ffffff;
    color: var(--navy, #07111f);
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.reviews-arrow svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reviews-arrow:hover {
    border-color: var(--orange, #f4911e);
    background: var(--orange, #f4911e);
    color: #ffffff;
    transform: translateY(-2px);
}

.reviews-google-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy, #07111f);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.reviews-google-link span {
    transition: transform 0.25s ease;
}

.reviews-google-link:hover {
    color: var(--orange, #f4911e);
}

.reviews-google-link:hover span {
    transform: translate(3px, -3px);
}

.reviews-google-link--disabled {
    color: #98a2b3;
}


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

@media (max-width: 1050px) {

    .reviews-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .reviews-google-summary {
        width: fit-content;
    }

    .review-card {
        flex-basis: calc((100% - 22px) / 2);
    }

}


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

@media (max-width: 700px) {

    .google-reviews-section {
        padding: 75px 0;
    }

    .reviews-shell {
        width: min(100% - 32px, 1460px);
    }

    .reviews-heading {
        gap: 28px;
        margin-bottom: 38px;
    }

    .reviews-heading h2 {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .reviews-google-summary {
        width: 100%;
    }

    .review-card {
        flex-basis: 100%;
        min-height: 340px;
        padding: 24px;
    }

    .reviews-controls {
        align-items: flex-start;
        flex-direction: column;
    }

}


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

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

    .reviews-slider__track {
        transition: none;
    }

}

.reviews-google-summary {
    position: relative;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.reviews-google-summary:hover {
    transform: translateY(-3px);
    border-color: rgba(244, 145, 30, 0.35);
    box-shadow: 0 20px 55px rgba(7, 17, 31, 0.1);
}

.reviews-google-summary__arrow {
    margin-left: auto;
    color: var(--orange, #f4911e);
    font-size: 1.15rem;
    font-weight: 800;
    transition: transform 0.25s ease;
}

.reviews-google-summary:hover .reviews-google-summary__arrow {
    transform: translate(3px, -3px);
}

/* =========================================
   MR KEYS LTD
   CONTACT / QUOTE PAGE
========================================= */


/* =========================================
   SHARED CONTACT WRAPPER
========================================= */

.contact-shell {
    width: min(1460px, calc(100% - 64px));
    margin: 0 auto;
}


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

.contact-hero {
    position: relative;
    padding: 185px 0 105px;
    background:
        radial-gradient(circle at 88% 12%,
            rgba(244, 145, 30, 0.12),
            transparent 28%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f6f8fb 100%);
    overflow: hidden;
}

.contact-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: -220px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(7, 17, 31, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.contact-hero::after {
    content: "";
    position: absolute;
    top: 70px;
    right: -130px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(244, 145, 30, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.contact-hero .contact-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
    align-items: end;
    gap: 90px;
}


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

.contact-hero__content {
    max-width: 930px;
}

.contact-hero__content h1 {
    margin: 14px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(3.8rem, 7vw, 7rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.065em;
}

.contact-hero__content h1 span {
    color: var(--orange, #f4911e);
}

.contact-hero__lead {
    max-width: 760px;
    margin: 30px 0 0;
    color: #667085;
    font-size: 1.1rem;
    line-height: 1.8;
}


/* =========================================
   HERO TRUST
========================================= */

.contact-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 32px;
}

.contact-hero__trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(7, 17, 31, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--navy, #07111f);
    font-size: 0.76rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

.contact-hero__trust span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange, #f4911e);
}


/* =========================================
   HERO CONTACT CARD
========================================= */

.contact-hero__card {
    position: relative;
    padding: 31px;
    border-radius: 24px;
    background: var(--navy, #07111f);
    box-shadow: 0 30px 80px rgba(7, 17, 31, 0.18);
    color: #ffffff;
    overflow: hidden;
}

.contact-hero__card::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -95px;
    width: 220px;
    height: 220px;
    border: 35px solid rgba(244, 145, 30, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.contact-hero__card-label {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.contact-hero__phone {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-bottom: 22px;
    color: var(--orange, #f4911e);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-hero__phone:hover {
    color: #ffffff;
}

.contact-hero__card>p:not(.contact-hero__card-label) {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    line-height: 1.7;
}

.contact-hero__jump {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.contact-hero__jump span {
    color: var(--orange, #f4911e);
    transition: transform 0.25s ease;
}

.contact-hero__jump:hover span {
    transform: translateY(4px);
}


/* =========================================
   FORM SECTION
========================================= */

.contact-form-section {
    position: relative;
    padding: 120px 0;
    background: #ffffff;
}

.contact-form-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
    align-items: start;
    gap: 80px;
}


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

.contact-form-intro {
    position: sticky;
    top: 135px;
}

.contact-form-intro h2 {
    margin: 13px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(2.6rem, 4.4vw, 4.8rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.contact-form-intro h2 span {
    color: var(--orange, #f4911e);
}

.contact-form-intro>p {
    max-width: 540px;
    margin: 24px 0 0;
    color: #667085;
    font-size: 0.98rem;
    line-height: 1.8;
}


/* =========================================
   FORM POINTS
========================================= */

.contact-form-points {
    display: grid;
    gap: 24px;
    margin-top: 42px;
}

.contact-form-point {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 17px;
}

.contact-form-point>span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(244, 145, 30, 0.22);
    border-radius: 50%;
    background: rgba(244, 145, 30, 0.08);
    color: var(--orange, #f4911e);
    font-size: 0.73rem;
    font-weight: 800;
}

.contact-form-point strong {
    display: block;
    margin-top: 1px;
    color: var(--navy, #07111f);
    font-size: 0.9rem;
}

.contact-form-point p {
    margin: 4px 0 0;
    color: #98a2b3;
    font-size: 0.8rem;
    line-height: 1.6;
}


/* =========================================
   FORM CARD
========================================= */

.contact-form-card {
    padding: clamp(28px, 4vw, 54px);
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 28px;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfcfd 100%);
    box-shadow:
        0 30px 80px rgba(7, 17, 31, 0.07);
}

.contact-form {
    display: grid;
    gap: 0;
}


/* =========================================
   FORM SECTIONS
========================================= */

.form-section {
    min-width: 0;
    margin: 0;
    padding: 0 0 39px;
    border: 0;
    border-bottom: 1px solid rgba(7, 17, 31, 0.08);
}

.form-section+.form-section {
    padding-top: 39px;
}

.form-section:last-of-type {
    border-bottom: 0;
}

.form-section legend {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--navy, #07111f);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.form-section__intro {
    margin: 8px 0 22px;
    color: #98a2b3;
    font-size: 0.85rem;
    line-height: 1.55;
}


/* =========================================
   ISSUE OPTIONS
========================================= */

.issue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 22px;
}

.issue-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.issue-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.issue-option span {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 14px 17px;
    border: 1px solid rgba(7, 17, 31, 0.1);
    border-radius: 14px;
    background: #ffffff;
    color: #475467;
    font-size: 0.86rem;
    font-weight: 700;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.issue-option span::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 10px;
    border: 2px solid #cbd1d9;
    border-radius: 50%;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.issue-option:hover span {
    border-color: rgba(244, 145, 30, 0.4);
    transform: translateY(-1px);
}

.issue-option input:checked+span {
    border-color: var(--orange, #f4911e);
    background: rgba(244, 145, 30, 0.07);
    color: var(--navy, #07111f);
    box-shadow: 0 10px 28px rgba(244, 145, 30, 0.08);
}

.issue-option input:checked+span::before {
    border-color: var(--orange, #f4911e);
    background: var(--orange, #f4911e);
    box-shadow: inset 0 0 0 2px #ffffff;
}

.issue-option input:focus-visible+span {
    outline: 3px solid rgba(244, 145, 30, 0.2);
    outline-offset: 2px;
}


/* =========================================
   FORM GRID
========================================= */

.form-grid {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field--full {
    grid-column: 1 / -1;
}


/* =========================================
   LABELS
========================================= */

.form-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--navy, #07111f);
    font-size: 0.78rem;
    font-weight: 800;
}

.form-field label span {
    color: #98a2b3;
    font-size: 0.68rem;
    font-weight: 600;
}


/* =========================================
   INPUTS
========================================= */

.form-field input,
.form-field textarea,
.form-field select {
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(7, 17, 31, 0.11);
    border-radius: 13px;
    background: #ffffff;
    color: var(--navy, #07111f);
    font: inherit;
    font-size: 0.92rem;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.form-field input,
.form-field select {
    height: 54px;
    padding: 0 16px;
}

.form-field textarea {
    min-height: 145px;
    padding: 15px 16px;
    resize: vertical;
    line-height: 1.6;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #b1b8c4;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--orange, #f4911e);
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(244, 145, 30, 0.1);
}


/* =========================================
   WORKING KEY / CONTACT METHOD
========================================= */

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.choice-option {
    position: relative;
    cursor: pointer;
}

.choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    min-height: 48px;
    padding: 11px 18px;
    border: 1px solid rgba(7, 17, 31, 0.11);
    border-radius: 999px;
    background: #ffffff;
    color: #667085;
    font-size: 0.82rem;
    font-weight: 750;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.choice-option:hover span {
    border-color: rgba(244, 145, 30, 0.4);
    transform: translateY(-1px);
}

.choice-option input:checked+span {
    border-color: var(--orange, #f4911e);
    background: var(--orange, #f4911e);
    color: #ffffff;
}

.choice-option input:focus-visible+span {
    outline: 3px solid rgba(244, 145, 30, 0.2);
    outline-offset: 2px;
}


/* =========================================
   STORE / CALL-OUT CHOICE
========================================= */

.service-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 21px;
}

.service-choice {
    position: relative;
    cursor: pointer;
}

.service-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.service-choice__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 115px;
    padding: 20px 20px 20px 51px;
    border: 1px solid rgba(7, 17, 31, 0.11);
    border-radius: 17px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.service-choice__content::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 20px;
    width: 14px;
    height: 14px;
    border: 2px solid #cbd1d9;
    border-radius: 50%;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.service-choice strong {
    display: block;
    color: var(--navy, #07111f);
    font-size: 0.9rem;
}

.service-choice small {
    display: block;
    margin-top: 6px;
    color: #98a2b3;
    font-size: 0.76rem;
    line-height: 1.55;
}

.service-choice:hover .service-choice__content {
    border-color: rgba(244, 145, 30, 0.38);
    transform: translateY(-2px);
}

.service-choice input:checked+.service-choice__content {
    border-color: var(--orange, #f4911e);
    background: rgba(244, 145, 30, 0.06);
    box-shadow: 0 13px 32px rgba(244, 145, 30, 0.08);
}

.service-choice input:checked+.service-choice__content::before {
    border-color: var(--orange, #f4911e);
    background: var(--orange, #f4911e);
    box-shadow: inset 0 0 0 3px #ffffff;
}

.service-choice input:focus-visible+.service-choice__content {
    outline: 3px solid rgba(244, 145, 30, 0.2);
    outline-offset: 2px;
}


/* =========================================
   CALLOUT POSTCODE
========================================= */

.form-field--postcode {
    margin-top: 20px;
}

.form-field--postcode[hidden] {
    display: none !important;
}


/* =========================================
   PRIVACY
========================================= */

.form-privacy {
    padding: 28px 0 0;
}

.form-privacy p {
    margin: 0;
    color: #98a2b3;
    font-size: 0.73rem;
    line-height: 1.65;
}

.form-privacy a {
    color: var(--navy, #07111f);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(7, 17, 31, 0.25);
    text-underline-offset: 3px;
}

.form-privacy a:hover {
    color: var(--orange, #f4911e);
}


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

.contact-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: 24px;
    padding: 0 24px;
    min-height: 62px;
    border: 0;
    border-radius: 14px;
    background: var(--orange, #f4911e);
    color: #ffffff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(244, 145, 30, 0.22);
    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.contact-submit span:last-child {
    font-size: 1.2rem;
    transition: transform 0.25s ease;
}

.contact-submit:hover {
    background: var(--navy, #07111f);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(7, 17, 31, 0.18);
}

.contact-submit:hover span:last-child {
    transform: translate(4px, -4px);
}


/* =========================================
   SUCCESS MESSAGE
========================================= */

.form-success {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 17px;
    margin-bottom: 31px;
    padding: 20px;
    border: 1px solid rgba(18, 183, 106, 0.18);
    border-radius: 15px;
    background: rgba(18, 183, 106, 0.07);
}

.form-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #12b76a;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 900;
}

.form-success h2 {
    margin: 2px 0 5px;
    color: var(--navy, #07111f);
    font-size: 1rem;
}

.form-success p {
    margin: 0;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.6;
}


/* =========================================
   INLINE FIELD / CHOICE ERRORS
========================================= */

.form-inline-error {
    margin: 12px 0 0;
    color: #b42318;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.55;
}

.form-section.has-inline-error > legend {
    color: #b42318;
}

.form-section.has-inline-error .service-choice__content,
.form-section.has-inline-error .issue-option span,
.form-section.has-inline-error .choice-option span {
    border-color: rgba(217, 45, 32, 0.42);
}

.form-section.has-inline-error .service-choice__content {
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.06);
}


/* =========================================
   FORM ERRORS
========================================= */

.form-errors {
    margin-bottom: 31px;
    padding: 19px 20px;
    border: 1px solid rgba(217, 45, 32, 0.16);
    border-radius: 15px;
    background: rgba(217, 45, 32, 0.05);
}

.form-errors h2 {
    margin: 0;
    color: #b42318;
    font-size: 0.9rem;
}

.form-errors ul {
    margin: 9px 0 0;
    padding-left: 19px;
    color: #7a271a;
    font-size: 0.78rem;
    line-height: 1.65;
}


/* =========================================
   HONEYPOT
========================================= */

.form-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


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

@media (max-width: 1100px) {

    .contact-hero .contact-shell {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-hero__card {
        max-width: 520px;
    }

    .contact-form-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .contact-form-intro {
        position: static;
        max-width: 760px;
    }

    .contact-form-points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


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

@media (max-width: 760px) {

    .contact-shell {
        width: min(100% - 30px, 1460px);
    }

    .contact-hero {
        padding: 145px 0 75px;
    }

    .contact-hero__content h1 {
        font-size: clamp(3rem, 15vw, 4.6rem);
        line-height: 0.94;
    }

    .contact-hero__lead {
        margin-top: 23px;
        font-size: 0.98rem;
    }

    .contact-hero__trust {
        gap: 7px;
    }

    .contact-hero__trust span {
        font-size: 0.69rem;
    }

    .contact-hero__card {
        padding: 25px;
        border-radius: 20px;
    }

    .contact-form-section {
        padding: 75px 0;
    }

    .contact-form-intro h2 {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .contact-form-points {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .contact-form-card {
        padding: 25px 18px;
        border-radius: 21px;
    }

    .issue-grid {
        grid-template-columns: 1fr;
    }

    .form-grid--2 {
        grid-template-columns: 1fr;
    }

    .form-field--full {
        grid-column: auto;
    }

    .service-choice-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 460px) {

    .contact-hero {
        padding-top: 132px;
    }

    .contact-hero__content h1 {
        font-size: clamp(2.65rem, 14vw, 3.8rem);
    }

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

    .choice-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .choice-option span {
        width: 100%;
    }

    .form-section {
        padding-bottom: 31px;
    }

    .form-section+.form-section {
        padding-top: 31px;
    }

}


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

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

    .issue-option span,
    .choice-option span,
    .service-choice__content,
    .contact-submit,
    .contact-submit span,
    .contact-hero__jump span {
        transition: none;
    }

}

/* =========================================
   MR KEYS LTD
   POLICY PAGES
   Privacy / Cookies / Website Terms
========================================= */


/* =========================================
   POLICY HERO
========================================= */

.policy-hero {
    position: relative;
    padding: 180px 0 90px;
    background:
        radial-gradient(circle at 88% 10%,
            rgba(244, 145, 30, 0.1),
            transparent 26%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f6f8fb 100%);
    overflow: hidden;
}

.policy-hero::before {
    content: "";
    position: absolute;
    top: 40px;
    right: -180px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(7, 17, 31, 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.policy-hero::after {
    content: "";
    position: absolute;
    top: 115px;
    right: -95px;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(244, 145, 30, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.policy-hero .container {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}

.policy-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--orange, #f4911e);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.policy-hero .eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.policy-hero h1 {
    max-width: 900px;
    margin: 0;
    color: var(--navy, #07111f);
    font-size: clamp(3rem, 6vw, 5.6rem);
    font-weight: 800;
    line-height: 0.97;
    letter-spacing: -0.055em;
}

.policy-hero>.container>p:not(.policy-updated) {
    max-width: 760px;
    margin: 24px 0 0;
    color: #667085;
    font-size: 1.02rem;
    line-height: 1.8;
}

.policy-updated {
    margin: 20px 0 0;
    color: #98a2b3;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}


/* =========================================
   POLICY SECTION
========================================= */

.policy-section {
    padding: 90px 0 120px;
    background: #ffffff;
}

.policy-section .container {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}


/* =========================================
   POLICY CARD
========================================= */

.policy-card {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 70px);
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 28px;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfcfd 100%);
    box-shadow:
        0 30px 80px rgba(7, 17, 31, 0.06);
}


/* =========================================
   HEADINGS
========================================= */

.policy-card h2 {
    position: relative;
    margin: 56px 0 18px;
    padding-top: 24px;
    color: var(--navy, #07111f);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.policy-card h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

.policy-card h2:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 3px;
    border-radius: 999px;
    background: var(--orange, #f4911e);
}

.policy-card h3 {
    margin: 34px 0 13px;
    color: var(--navy, #07111f);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}


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

.policy-card p {
    margin: 0 0 17px;
    color: #667085;
    font-size: 0.96rem;
    line-height: 1.82;
}

.policy-card strong {
    color: var(--navy, #07111f);
    font-weight: 800;
}


/* =========================================
   LISTS
========================================= */

.policy-card ul,
.policy-card ol {
    margin: 18px 0 24px;
    padding-left: 0;
    list-style: none;
}

.policy-card li {
    position: relative;
    margin: 10px 0;
    padding-left: 28px;
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.7;
}

.policy-card li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange, #f4911e);
    transform: translateY(-50%);
}


/* =========================================
   LINKS
========================================= */

.policy-card a {
    color: var(--navy, #07111f);
    font-weight: 750;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(7, 17, 31, 0.25);
    text-underline-offset: 3px;
    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

.policy-card a:hover {
    color: var(--orange, #f4911e);
    text-decoration-color: var(--orange, #f4911e);
}


/* =========================================
   COOKIE SETTINGS BUTTON
========================================= */

#openCookieSettings,
.policy-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    margin-top: 6px;
    padding: 0 19px;
    border: 1px solid var(--navy, #07111f);
    border-radius: 12px;
    background: var(--navy, #07111f);
    color: #ffffff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

#openCookieSettings:hover,
.policy-card .btn:hover {
    border-color: var(--orange, #f4911e);
    background: var(--orange, #f4911e);
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================
   OPTIONAL INFO BLOCKS
========================================= */

.policy-card blockquote {
    margin: 28px 0;
    padding: 20px 22px;
    border-left: 4px solid var(--orange, #f4911e);
    border-radius: 0 14px 14px 0;
    background: rgba(244, 145, 30, 0.06);
    color: #475467;
    font-size: 0.93rem;
    line-height: 1.7;
}

.policy-card hr {
    margin: 48px 0;
    border: 0;
    border-top: 1px solid rgba(7, 17, 31, 0.08);
}


/* =========================================
   TABLES
   Just in case we add a cookie table later
========================================= */

.policy-table-wrap {
    width: 100%;
    margin: 24px 0 30px;
    overflow-x: auto;
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 16px;
}

.policy-card table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    background: #ffffff;
}

.policy-card th,
.policy-card td {
    padding: 15px 17px;
    border-bottom: 1px solid rgba(7, 17, 31, 0.08);
    text-align: left;
    vertical-align: top;
}

.policy-card th {
    background: #f6f8fb;
    color: var(--navy, #07111f);
    font-size: 0.78rem;
    font-weight: 800;
}

.policy-card td {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.6;
}

.policy-card tr:last-child td {
    border-bottom: 0;
}


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

@media (max-width: 760px) {

    .policy-hero {
        padding: 145px 0 70px;
    }

    .policy-hero .container,
    .policy-section .container {
        width: min(100% - 30px, 1180px);
    }

    .policy-hero h1 {
        font-size: clamp(2.7rem, 13vw, 4.2rem);
    }

    .policy-hero>.container>p:not(.policy-updated) {
        font-size: 0.95rem;
    }

    .policy-section {
        padding: 65px 0 85px;
    }

    .policy-card {
        padding: 27px 20px;
        border-radius: 21px;
    }

    .policy-card h2 {
        margin-top: 42px;
        font-size: 1.6rem;
    }

    .policy-card h3 {
        font-size: 1.05rem;
    }

    .policy-card p,
    .policy-card li {
        font-size: 0.9rem;
    }

}


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

@media (max-width: 460px) {

    .policy-hero {
        padding-top: 132px;
    }

    .policy-hero h1 {
        font-size: 2.8rem;
    }

    .policy-card {
        padding: 24px 17px;
    }

    #openCookieSettings,
    .policy-card .btn {
        width: 100%;
    }

}

/* =========================================
   SUBMIT LOADING STATE
========================================= */

.contact-submit:disabled {
    cursor: wait;
    opacity: 0.88;
    transform: none;
}

.contact-submit__loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: contactSubmitSpin 0.75s linear infinite;
}

@keyframes contactSubmitSpin {

    to {
        transform: rotate(360deg);
    }

}

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

    .contact-submit__loader {
        animation-duration: 1.5s;
    }

}

/* =========================================
   MR KEYS LTD
   AREAS HUB
========================================= */

.areas-shell {
    width: min(1460px, calc(100% - 64px));
    margin: 0 auto;
}


/* =========================================
   HERO
========================================= */

.areas-hero {
    position: relative;
    padding: 185px 0 115px;
    background:
        radial-gradient(circle at 88% 10%,
            rgba(244, 145, 30, 0.13),
            transparent 28%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f5f7fa 100%);
    overflow: hidden;
}

.areas-hero::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -200px;
    width: 670px;
    height: 670px;
    border: 1px solid rgba(7, 17, 31, 0.05);
    border-radius: 50%;
}

.areas-hero .areas-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    align-items: center;
    gap: 80px;
}

.areas-hero__content h1 {
    margin: 14px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.065em;
}

.areas-hero__content h1 span {
    color: var(--orange, #f4911e);
}

.areas-hero__lead {
    max-width: 780px;
    margin: 29px 0 0;
    color: #667085;
    font-size: 1.08rem;
    line-height: 1.8;
}

.areas-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.areas-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.areas-hero__trust span {
    padding: 8px 12px;
    border: 1px solid rgba(7, 17, 31, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--navy, #07111f);
    font-size: 0.72rem;
    font-weight: 750;
}


/* =========================================
   HERO MAP CARD
========================================= */

.areas-hero__map-card {
    padding: 28px;
    border-radius: 26px;
    background: var(--navy, #07111f);
    box-shadow: 0 35px 90px rgba(7, 17, 31, 0.18);
    color: #fff;
}

.areas-hero__map-top {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.areas-hero__map-dot {
    width: 13px;
    height: 13px;
    border: 4px solid rgba(244, 145, 30, 0.23);
    border-radius: 50%;
    background: var(--orange, #f4911e);
    box-sizing: content-box;
}

.areas-hero__map-top strong {
    display: block;
    font-size: 1rem;
}

.areas-hero__map-top p {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.areas-hero__map-list {
    display: grid;
    gap: 1px;
    margin-top: 18px;
}

.areas-hero__map-list div {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.9rem;
    font-weight: 700;
}

.areas-hero__map-list span {
    color: var(--orange, #f4911e);
    font-size: 0.68rem;
}

.areas-hero__map-footer {
    padding-top: 19px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    line-height: 1.5;
}


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

.areas-intro {
    padding: 110px 0;
    background: #fff;
}

.areas-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 90px;
}

.areas-intro h2,
.areas-section-heading h2,
.areas-services__heading h2,
.areas-location__content h2,
.areas-local__heading h2,
.areas-final-cta h2 {
    margin: 12px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.areas-intro h2 span,
.areas-section-heading h2 span,
.areas-services__heading h2 span,
.areas-location__content h2 span,
.areas-local__heading h2 span,
.areas-final-cta h2 span {
    color: var(--orange, #f4911e);
}

.areas-intro__copy p {
    margin: 0 0 18px;
    color: #667085;
    font-size: 0.98rem;
    line-height: 1.82;
}


/* =========================================
   AREA GRID
========================================= */

.areas-grid-section {
    padding: 110px 0;
    background: #f5f7fa;
}

.areas-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: end;
    gap: 60px;
    margin-bottom: 55px;
}

.areas-section-heading>p {
    margin: 0;
    color: #667085;
    line-height: 1.75;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.area-card {
    position: relative;
    min-height: 310px;
    padding: 27px;
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(7, 17, 31, 0.045);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.area-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 145, 30, 0.35);
    box-shadow: 0 22px 55px rgba(7, 17, 31, 0.075);
}

.area-card__number {
    color: var(--orange, #f4911e);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.area-card__content {
    margin-top: 47px;
}

.area-card__label {
    margin: 0 0 7px;
    color: #98a2b3;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.area-card h3 {
    margin: 0;
    color: var(--navy, #07111f);
    font-size: 1.45rem;
    letter-spacing: -0.035em;
}

.area-card__content>p:not(.area-card__label) {
    margin: 14px 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.7;
}

.area-card__link {
    display: inline-flex;
    gap: 7px;
    margin-top: 22px;
    color: var(--navy, #07111f);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.area-card__link span {
    color: var(--orange, #f4911e);
    transition: transform 0.2s ease;
}

.area-card__link:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   SERVICES
========================================================== */

.home-services {
    padding: 110px 0;
    overflow: hidden;
    background: #fff;
}


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

.home-section-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(300px, 420px);

    align-items: end;

    gap: 70px;

    margin-bottom: 48px;
}


.home-section-heading h2 {
    margin: 11px 0 0;

    color: var(--navy, #07111f);

    font-size:
        clamp(3rem, 4.7vw, 5rem);

    font-weight: 850;

    line-height: 0.95;

    letter-spacing: -0.055em;
}


.home-section-heading h2 span {
    color: var(--orange, #f4911e);
}


.home-section-heading__side {
    display: grid;

    gap: 20px;
}


.home-section-heading__side>p {
    margin: 0;

    color: #667085;

    font-size: 0.9rem;

    line-height: 1.75;
}



/* =========================================================
   SLIDER CONTROLS
========================================================== */

.home-slider-controls {
    display: flex;

    gap: 8px;
}


.home-slider-controls button {
    width: 43px;

    height: 43px;

    border:
        1px solid rgba(7, 17, 31, 0.10);

    border-radius: 50%;

    background: #fff;

    color: var(--navy, #07111f);

    font: inherit;

    font-size: 1rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.home-slider-controls button:hover {
    border-color:
        var(--orange, #f4911e);

    background:
        var(--orange, #f4911e);

    color: #fff;

    transform: translateY(-2px);
}



/* =========================================================
   SERVICE SLIDER
========================================================== */

.home-card-slider {
    overflow: hidden;
}


.home-card-slider__track {
    display: flex;

    gap: 17px;

    transition:
        transform 0.55s cubic-bezier(.2, .7, .2, 1);

    will-change: transform;
}



/* =========================================================
   SERVICE CARD
========================================================== */

.home-service-card {
    position: relative;

    flex:
        0 0 calc((100% - 34px) / 3);

    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(7, 17, 31, 0.08);

    border-radius: 20px;

    background: #fff;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 16px 46px rgba(7, 17, 31, 0.05);

    cursor: pointer;

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


/*
 * The entire <a> is the card, so every
 * part of the service is clickable.
 */

.home-service-card:hover {
    border-color:
        rgba(246, 160, 0, 0.32);

    transform:
        translateY(-5px);

    box-shadow:
        0 24px 58px rgba(7, 17, 31, 0.11);
}


.home-service-card:focus-visible {
    outline:
        3px solid rgba(246, 160, 0, 0.35);

    outline-offset: 4px;
}



/* =========================================================
   SERVICE IMAGE
========================================================== */

.home-service-card__image {
    position: relative;

    display: block;

    width: 100%;

    height: 250px;

    flex-shrink: 0;

    overflow: hidden;

    background: #eef2f5;
}


.home-service-card__image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.home-service-card:hover .home-service-card__image img {
    transform: scale(1.045);
}



/* =========================================================
   NUMBER BADGE
========================================================== */

.home-service-card__image>span {
    position: absolute;

    top: 17px;

    left: 17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 39px;

    height: 39px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.91);

    color:
        var(--orange, #f4911e);

    font-size: 0.66rem;

    font-weight: 850;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}



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

.home-service-card__content {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 24px;
}


.home-service-card__eyebrow {
    margin:
        0 0 7px;

    color: #98a2b3;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.home-service-card h3 {
    margin: 0;

    color:
        var(--navy, #07111f);

    font-size: 1.22rem;

    letter-spacing: -0.025em;

    transition:
        color 0.25s ease;
}


.home-service-card:hover h3 {
    color:
        var(--orange, #f4911e);
}


.home-service-card__content>p:not(.home-service-card__eyebrow) {
    min-height: 82px;

    margin:
        12px 0 0;

    color: #667085;

    font-size: 0.8rem;

    line-height: 1.7;
}



/* =========================================================
   EXPLORE LINK
========================================================== */

.home-service-card__link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    align-self: flex-start;

    margin-top: auto;

    padding-top: 19px;

    color:
        var(--navy, #07111f);

    font-size: 0.75rem;

    font-weight: 850;

    text-decoration: none;
}


.home-service-card__link>span {
    display: inline-block;

    color:
        var(--orange, #f4911e);

    transition:
        transform 0.25s ease;
}


.home-service-card:hover .home-service-card__link>span {
    transform:
        translate(3px, -3px);
}



/* =========================================================
   VIEW ALL SERVICES
========================================================== */

.home-services__all {
    margin-top: 30px;
}



/* =========================================================
   MOBILE SWIPE HINT
========================================================== */

.home-swipe-hint {
    display: none;
}



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

@media (max-width: 700px) {

    .home-services {
        padding: 72px 0;
    }


    .home-section-heading {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 32px;
    }


    .home-section-heading h2 {
        font-size:
            clamp(2.65rem, 12vw, 3.8rem);
    }


    .home-slider-controls--desktop {
        display: none;
    }


    /*
     * Allows the next card to peek onto
     * the screen so visitors know they
     * can swipe.
     */

    .home-card-slider {
        margin-right: -15px;

        overflow: visible;
    }


    .home-card-slider__track {
        gap: 12px;

        overflow-x: auto;

        padding-right: 34px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        transition: none;

        transform: none !important;

        overscroll-behavior-x: contain;

        -webkit-overflow-scrolling: touch;
    }


    .home-card-slider__track::-webkit-scrollbar {
        display: none;
    }


    .home-service-card {
        flex: 0 0 86%;

        scroll-snap-align: start;
    }


    /*
     * Don't raise cards on touch devices.
     */

    .home-service-card:hover {
        transform: none;
    }


    .home-service-card__image {
        height: 220px;
    }


    .home-service-card__content>p:not(.home-service-card__eyebrow) {
        min-height: auto;
    }


    .home-swipe-hint {
        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-top: 14px;

        color: #98a2b3;

        font-size: 0.68rem;
    }

}



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

@media (max-width: 430px) {

    .home-service-card {
        flex-basis: 88%;
    }


    .home-service-card__content {
        padding: 22px;
    }


    .home-service-card__image {
        height: 215px;
    }

}



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

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

    .home-card-slider__track,
    .home-service-card,
    .home-service-card__image img,
    .home-service-card__link>span {
        transition: none !important;
    }

}

/* =========================================
   LOCATION
========================================= */

.areas-location {
    padding: 120px 0;
    background: #fff;
}

.areas-location__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 80px;
}

.areas-location__map {
    overflow: hidden;
    min-height: 530px;
    border-radius: 26px;
    box-shadow: 0 25px 70px rgba(7, 17, 31, 0.1);
}

.areas-location__map iframe {
    display: block;
    width: 100%;
    height: 530px;
    border: 0;
}

.areas-location__content>p:not(.eyebrow) {
    margin: 24px 0 0;
    color: #667085;
    line-height: 1.8;
}

.areas-location__details {
    display: grid;
    gap: 22px;
    margin-top: 34px;
}

.areas-location__details span {
    display: block;
    margin-bottom: 6px;
    color: #98a2b3;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.areas-location__details strong,
.areas-location__details a {
    color: var(--navy, #07111f);
    font-size: 0.9rem;
    line-height: 1.65;
    text-decoration: none;
}

.areas-location__details a:hover {
    color: var(--orange, #f4911e);
}

.areas-location__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 33px;
}


/* =========================================
   LOCAL BENEFITS
========================================= */

.areas-local {
    padding: 110px 0;
    background: #f5f7fa;
}

.areas-local__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 90px;
}

.areas-local__points {
    display: grid;
    gap: 2px;
}

.areas-local-point {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid rgba(7, 17, 31, 0.09);
}

.areas-local-point>span {
    color: var(--orange, #f4911e);
    font-size: 0.72rem;
    font-weight: 800;
}

.areas-local-point h3 {
    margin: 0;
    color: var(--navy, #07111f);
    font-size: 1.08rem;
}

.areas-local-point p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.7;
}


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

.areas-final-cta {
    padding: 100px 0;
    background: #fff;
}

.areas-final-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
    gap: 80px;
    align-items: end;
    padding: 55px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 20%,
            rgba(244, 145, 30, 0.16),
            transparent 32%),
        #07111f;
}

.areas-final-cta h2 {
    color: #fff;
}

.areas-final-cta__action p {
    margin: 0 0 23px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}


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

@media (max-width: 1100px) {

    .areas-hero .areas-shell,
    .areas-intro__grid,
    .areas-location__grid,
    .areas-local__grid {
        grid-template-columns: 1fr;
    }

    .areas-section-heading {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .areas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .areas-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .areas-service-card {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .areas-final-cta__inner {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .areas-shell {
        width: min(100% - 30px, 1460px);
    }

    .areas-hero {
        padding: 145px 0 80px;
    }

    .areas-hero__content h1 {
        font-size: clamp(3rem, 15vw, 4.7rem);
    }

    .areas-intro,
    .areas-grid-section,
    .areas-services,
    .areas-location,
    .areas-local,
    .areas-final-cta {
        padding: 75px 0;
    }

    .areas-grid,
    .areas-services__grid {
        grid-template-columns: 1fr;
    }

    .areas-service-card {
        border-right: 0;
    }

    .areas-location__map,
    .areas-location__map iframe {
        min-height: 390px;
        height: 390px;
    }

    .areas-final-cta__inner {
        padding: 30px 23px;
    }

}

/* =========================================
   AREAS DIRECTORY
========================================= */

.areas-directory {
    padding: 110px 0;
    background: #ffffff;
}

.areas-directory__heading {
    max-width: 850px;
    margin-bottom: 50px;
}

.areas-directory__heading h2 {
    margin: 12px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.areas-directory__heading h2 span {
    color: var(--orange, #f4911e);
}

.areas-directory__heading>p:not(.eyebrow) {
    max-width: 720px;
    margin: 22px 0 0;
    color: #667085;
    line-height: 1.8;
}

.areas-directory__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.areas-directory__group {
    padding: 28px;
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 20px;
    background: #f8fafc;
}

.areas-directory__group h3 {
    margin: 0 0 21px;
    color: var(--navy, #07111f);
    font-size: 1.05rem;
}

.areas-directory__group ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.areas-directory__group li {
    position: relative;
    padding-left: 17px;
    color: #667085;
    font-size: 0.83rem;
}

.areas-directory__group li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange, #f4911e);
}


/* =========================================
   AREA CARD NEARBY
========================================= */

.area-card__nearby {
    margin-top: 15px !important;
    color: #98a2b3 !important;
    font-size: 0.73rem !important;
    line-height: 1.65 !important;
}

.area-card--wide {
    grid-column: span 2;
}


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

.areas-faq {
    padding: 110px 0;
    background: #f5f7fa;
}

.areas-faq__heading {
    max-width: 850px;
    margin-bottom: 45px;
}

.areas-faq__heading h2 {
    margin: 12px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.areas-faq__heading h2 span {
    color: var(--orange, #f4911e);
}

.areas-faq__list {
    max-width: 980px;
}

.areas-faq__item {
    border-top: 1px solid rgba(7, 17, 31, 0.1);
}

.areas-faq__item:last-child {
    border-bottom: 1px solid rgba(7, 17, 31, 0.1);
}

.areas-faq__item summary {
    position: relative;
    padding: 24px 50px 24px 0;
    color: var(--navy, #07111f);
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.areas-faq__item summary::-webkit-details-marker {
    display: none;
}

.areas-faq__item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;
    color: var(--orange, #f4911e);
    font-size: 1.5rem;
    transform: translateY(-50%);
}

.areas-faq__item[open] summary::after {
    content: "−";
}

.areas-faq__item div {
    padding: 0 50px 25px 0;
}

.areas-faq__item p {
    max-width: 780px;
    margin: 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.8;
}


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

@media (max-width: 1100px) {

    .areas-directory__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .areas-directory,
    .areas-faq {
        padding: 75px 0;
    }

    .areas-directory__grid {
        grid-template-columns: 1fr;
    }

    .area-card--wide {
        grid-column: auto;
    }

    .areas-faq__item summary {
        padding-right: 40px;
    }

    .areas-faq__item div {
        padding-right: 0;
    }

}

/* =========================================
   MR KEYS LTD - AREA LANDING PAGES
========================================= */

.area-page-shell {
    width: min(1460px, calc(100% - 64px));
    margin: 0 auto;
}

/* Hero */
.area-page-hero {
    position: relative;
    padding: 86px 0 110px;
    background:
        radial-gradient(circle at 88% 10%, rgba(246, 160, 0, .15), transparent 27%),
        linear-gradient(180deg, #fff 0%, #f5f7fa 100%);
    overflow: hidden;
}

.area-page-hero::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    right: -240px;
    top: -220px;
    border: 1px solid rgba(41, 71, 102, .08);
    border-radius: 50%;
}

.area-page-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .62fr);
    gap: 78px;
    align-items: center;
}

.area-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    color: #7b8794;
    font-size: .72rem;
    font-weight: 700;
}

.area-breadcrumbs a:hover {
    color: var(--orange);
}

.area-breadcrumbs span:last-child {
    color: var(--navy);
}

.area-page-hero h1,
.area-page-section-heading h2,
.area-page-services__heading h2,
.area-page-local__content h2,
.area-page-nearby__heading h2,
.area-page-map__content h2,
.area-page-faq__heading h2,
.area-page-final h2 {
    margin: 12px 0 0;
    color: var(--navy-deep);
    font-family: var(--font-body);
    font-size: clamp(3rem, 5.6vw, 6.5rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.06em;
}

.area-page-hero h1 {
    font-size: clamp(4rem, 7vw, 7.3rem);
}

.area-page-hero h1 span,
.area-page-section-heading h2 span,
.area-page-services__heading h2 span,
.area-page-local__content h2 span,
.area-page-nearby__heading h2 span,
.area-page-map__content h2 span,
.area-page-faq__heading h2 span,
.area-page-final h2 span {
    color: var(--orange);
}

.area-page-hero__lead {
    max-width: 760px;
    margin: 27px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.area-page-hero__actions,
.area-page-map__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 32px;
}

.area-page-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.area-page-hero__trust span {
    padding: 8px 12px;
    border: 1px solid rgba(41, 71, 102, .11);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--navy-deep);
    font-size: .7rem;
    font-weight: 750;
}

.area-page-hero__panel {
    position: relative;
    padding: 29px;
    border-radius: 28px;
    background: var(--navy-deep);
    color: #fff;
    box-shadow: 0 35px 90px rgba(16, 43, 70, .2);
    overflow: hidden;
}

.area-page-hero__panel::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    bottom: -150px;
    border: 36px solid rgba(246, 160, 0, .1);
    border-radius: 50%;
}

.area-page-hero__panel-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.area-page-pin {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 7px rgba(246, 160, 0, .14);
}

.area-page-hero__panel small,
.area-page-stat span,
.area-store-details small {
    display: block;
    color: rgba(255, 255, 255, .48);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.area-page-hero__panel-top strong {
    display: block;
    margin-top: 3px;
    font-size: 1.15rem;
}

.area-page-stat {
    position: relative;
    z-index: 1;
    padding: 19px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.area-page-stat strong {
    display: block;
    margin-top: 5px;
    font-size: .9rem;
    line-height: 1.45;
}

.area-page-panel-link {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    color: var(--orange);
    font-size: .78rem;
    font-weight: 800;
}

/* Coverage rail */
.area-coverage-rail {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.area-coverage-rail__track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 22px;
    padding: 15px 0;
    animation: areaRail 34s linear infinite;
}

.area-coverage-rail:hover .area-coverage-rail__track {
    animation-play-state: paused;
}

.area-coverage-rail__track span {
    color: var(--navy-deep);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.area-coverage-rail__track i {
    color: var(--orange);
    font-style: normal;
}

@keyframes areaRail {
    to {
        transform: translateX(-50%);
    }
}

/* Intro */
.area-page-intro,
.area-page-nearby,
.area-page-map,
.area-page-faq {
    padding: 110px 0;
    background: #fff;
}

.area-page-intro__grid,
.area-page-local__grid,
.area-page-map__grid,
.area-page-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 90px;
    align-items: start;
}

.area-page-section-heading h2,
.area-page-services__heading h2,
.area-page-local__content h2,
.area-page-nearby__heading h2,
.area-page-map__content h2,
.area-page-faq__heading h2,
.area-page-final h2 {
    font-size: clamp(2.8rem, 4.7vw, 5rem);
}

.area-page-prose p,
.area-page-local__content>p:not(.eyebrow),
.area-page-nearby__heading>p:not(.eyebrow),
.area-page-map__content>p:not(.eyebrow),
.area-page-final__action p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .97rem;
    line-height: 1.82;
}

/* Services */
.area-page-services {
    padding: 110px 0;
    background: #f5f7fa;
    overflow: hidden;
}

.area-page-services__heading {
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 60px;
    align-items: end;
    margin-bottom: 48px;
}

.area-page-services__heading>p {
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

.area-card-carousel__viewport {
    overflow: hidden;
}

.area-card-carousel__track {
    display: flex;
    gap: 18px;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.area-service-card {
    flex: 0 0 calc((100% - 54px) / 4);
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid rgba(41, 71, 102, .09);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(16, 43, 70, .05);
}

.area-service-card__number {
    color: var(--orange);
    font-size: .7rem;
    font-weight: 800;
}

.area-service-card h3 {
    margin: 46px 0 0;
    color: var(--navy-deep);
    font-size: 1.32rem;
    letter-spacing: -.03em;
}

.area-service-card p {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.7;
}

.area-service-card a {
    display: inline-flex;
    gap: 7px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--navy-deep);
    font-size: .78rem;
    font-weight: 800;
}

.area-service-card a span {
    color: var(--orange);
}

.area-card-carousel__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
}

.area-card-carousel__buttons {
    display: flex;
    gap: 8px;
}

.area-card-carousel__buttons button {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(41, 71, 102, .14);
    border-radius: 50%;
    background: #fff;
    color: var(--navy-deep);
    cursor: pointer;
    transition: .2s ease;
}

.area-card-carousel__buttons button:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: translateY(-2px);
}

.area-card-carousel__counter {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #98a2b3;
    font-size: .75rem;
    font-weight: 800;
}

.area-card-carousel__counter [data-area-current] {
    color: var(--navy-deep);
    font-size: 1rem;
}

.area-card-carousel__counter i {
    font-style: normal;
}

/* Why */
.area-page-local {
    padding: 110px 0;
    background: var(--navy-deep);
}

.area-page-local__content h2 {
    color: #fff;
}

.area-page-local__content>p:not(.eyebrow) {
    color: rgba(255, 255, 255, .6);
}

.area-page-local__points {
    display: grid;
}

.area-local-point {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.area-local-point>span {
    color: var(--orange);
    font-size: .7rem;
    font-weight: 800;
}

.area-local-point h3 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
}

.area-local-point p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .54);
    font-size: .84rem;
    line-height: 1.7;
}

/* Nearby */
.area-page-nearby {
    background: #fff;
}

.area-page-nearby__heading {
    max-width: 850px;
}

.area-page-nearby__heading>p:not(.eyebrow) {
    max-width: 700px;
    margin-top: 22px;
}

.area-place-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 38px;
}

.area-place-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--navy-deep);
    font-size: .78rem;
    font-weight: 750;
}

.area-place-chip span {
    color: var(--orange);
    font-size: .55rem;
}

/* Map */
.area-page-map {
    background: #f5f7fa;
}

.area-page-map__grid {
    align-items: center;
}

.area-page-map__frame {
    min-height: 520px;
    overflow: hidden;
    border-radius: 26px;
    box-shadow: 0 25px 70px rgba(16, 43, 70, .12);
}

.area-page-map__frame iframe {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
}

.area-store-details {
    display: grid;
    gap: 20px;
    margin-top: 29px;
}

.area-store-details small {
    color: #98a2b3;
}

.area-store-details strong,
.area-store-details a {
    display: block;
    margin-top: 5px;
    color: var(--navy-deep);
    font-size: .9rem;
    line-height: 1.6;
}

.area-store-details a:hover {
    color: var(--orange);
}

/* FAQs */
.area-page-faq__grid {
    align-items: start;
}

.area-page-faq__list {
    border-top: 1px solid var(--line);
}

.area-faq-item {
    border-bottom: 1px solid var(--line);
}

.area-faq-item summary {
    position: relative;
    padding: 23px 48px 23px 0;
    color: var(--navy-deep);
    font-size: .97rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

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

.area-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--orange);
    font-size: 1.45rem;
}

.area-faq-item[open] summary::after {
    content: '−';
}

.area-faq-item div {
    padding: 0 48px 23px 0;
}

.area-faq-item p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.8;
}

/* Final */
.area-page-final {
    padding: 95px 0;
    background: #fff;
}

.area-page-final__inner {
    display: grid;
    grid-template-columns: 1fr minmax(300px, .55fr);
    gap: 70px;
    align-items: end;
    padding: 55px;
    border-radius: 30px;
    background: radial-gradient(circle at 90% 10%, rgba(246, 160, 0, .16), transparent 34%), var(--navy-deep);
}

.area-page-final h2 {
    color: #fff;
}

.area-page-final__action p {
    color: rgba(255, 255, 255, .58);
}

@media (max-width: 1150px) {

    .area-page-hero__grid,
    .area-page-intro__grid,
    .area-page-local__grid,
    .area-page-map__grid,
    .area-page-faq__grid {
        grid-template-columns: 1fr;
    }

    .area-page-hero__panel {
        max-width: 600px;
    }

    .area-page-services__heading {
        grid-template-columns: 1fr;
    }

    .area-service-card {
        flex-basis: calc((100% - 36px) / 3);
    }

    .area-page-final__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .area-service-card {
        flex-basis: calc((100% - 18px) / 2);
    }
}

@media (max-width: 700px) {
    .area-page-shell {
        width: min(100% - 30px, 1460px);
    }

    .area-page-hero {
        padding: 58px 0 72px;
    }

    .area-page-hero h1 {
        font-size: clamp(3rem, 15vw, 4.7rem);
    }

    .area-page-hero__lead {
        font-size: .96rem;
    }

    .area-page-hero__panel {
        padding: 23px;
        border-radius: 22px;
    }

    .area-page-intro,
    .area-page-services,
    .area-page-local,
    .area-page-nearby,
    .area-page-map,
    .area-page-faq,
    .area-page-final {
        padding: 74px 0;
    }

    .area-page-section-heading h2,
    .area-page-services__heading h2,
    .area-page-local__content h2,
    .area-page-nearby__heading h2,
    .area-page-map__content h2,
    .area-page-faq__heading h2,
    .area-page-final h2 {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .area-card-carousel__viewport {
        overflow: visible;
    }

    .area-card-carousel__track {
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        transform: none !important;
        padding-right: 20px;
    }

    .area-card-carousel__track::-webkit-scrollbar {
        display: none;
    }

    .area-service-card {
        flex: 0 0 86%;
        min-height: 310px;
        scroll-snap-align: start;
    }

    .area-card-carousel__buttons {
        display: none;
    }

    .area-page-map__frame,
    .area-page-map__frame iframe {
        min-height: 390px;
        height: 390px;
    }

    .area-page-final__inner {
        padding: 30px 23px;
    }

    .area-page-hero__actions .btn,
    .area-page-map__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .area-coverage-rail__track {
        animation: none;
    }

    .area-card-carousel__track {
        transition: none;
    }
}

/* =========================================
   AREAS HUB
========================================= */
.areas-hub-hero {
    padding: 86px 0 100px;
    background: radial-gradient(circle at 88% 10%, rgba(246, 160, 0, .14), transparent 28%), linear-gradient(180deg, #fff, #f5f7fa);
    overflow: hidden;
}

.areas-hub-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .6fr);
    gap: 80px;
    align-items: center;
}

.areas-hub-hero h1,
.areas-hub-heading h2 {
    margin: 12px 0 0;
    color: var(--navy-deep);
    font-size: clamp(4rem, 7vw, 7.1rem);
    font-weight: 800;
    line-height: .94;
    letter-spacing: -.06em;
}

.areas-hub-hero h1 span,
.areas-hub-heading h2 span {
    color: var(--orange);
}

.areas-hub-hero__content>p:not(.eyebrow) {
    max-width: 760px;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.areas-hub-hero__panel {
    padding: 30px;
    border-radius: 28px;
    background: var(--navy-deep);
    color: #fff;
    box-shadow: 0 35px 90px rgba(16, 43, 70, .2);
}

.areas-hub-hero__panel small {
    color: rgba(255, 255, 255, .48);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.areas-hub-hero__panel strong {
    display: block;
    margin-top: 8px;
    color: var(--orange);
    font-size: 1.5rem;
}

.areas-hub-hero__panel p {
    color: rgba(255, 255, 255, .6);
    font-size: .84rem;
    line-height: 1.7;
}

.areas-hub-hero__panel a {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.areas-hub-hero__panel a span {
    color: var(--orange);
}

.areas-hub-main,
.areas-hub-directory {
    padding: 110px 0;
}

.areas-hub-main {
    background: #f5f7fa;
}

.areas-hub-directory {
    background: #fff;
}

.areas-hub-heading {
    max-width: 900px;
    margin-bottom: 48px;
}

.areas-hub-heading h2 {
    font-size: clamp(2.8rem, 4.8vw, 5rem);
}

.areas-hub-heading>p:not(.eyebrow) {
    max-width: 760px;
    margin-top: 22px;
    color: var(--muted);
    line-height: 1.8;
}

.areas-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.areas-hub-card {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid rgba(41, 71, 102, .09);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(16, 43, 70, .05);
    transition: .25s ease;
}

.areas-hub-card:hover {
    transform: translateY(-4px);
    border-color: rgba(246, 160, 0, .4);
}

.areas-hub-card>span {
    color: var(--orange);
    font-size: .7rem;
    font-weight: 800;
}

.areas-hub-card h3 {
    margin: 44px 0 0;
    color: var(--navy-deep);
    font-size: 1.35rem;
}

.areas-hub-card p {
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.7;
}

.areas-hub-card small {
    color: #98a2b3;
    font-size: .72rem;
    line-height: 1.6;
}

.areas-hub-card a {
    display: inline-flex;
    gap: 7px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--navy-deep);
    font-size: .78rem;
    font-weight: 800;
}

.areas-hub-card a b {
    color: var(--orange);
}

.areas-hub-directory__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.areas-hub-directory__grid>div {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fafc;
}

.areas-hub-directory__grid h3 {
    margin: 0;
    color: var(--navy-deep);
    font-size: 1rem;
}

.areas-hub-directory__grid p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.72;
}

@media (max-width: 1100px) {
    .areas-hub-hero__grid {
        grid-template-columns: 1fr;
    }

    .areas-hub-hero__panel {
        max-width: 600px;
    }

    .areas-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .areas-hub-directory__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .areas-hub-hero {
        padding: 58px 0 72px;
    }

    .areas-hub-hero h1 {
        font-size: clamp(3rem, 15vw, 4.7rem);
    }

    .areas-hub-main,
    .areas-hub-directory {
        padding: 74px 0;
    }

    .areas-hub-grid,
    .areas-hub-directory__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   AREAS HUB - COVERAGE HERO CARD FIX
   These classes are used by areas.php.
========================================= */

.areas-hero__coverage {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
}

.areas-hero__lead--secondary {
    margin-top: 14px;
    font-size: 0.96rem;
}

.areas-intro__heading {
    min-width: 0;
}

.coverage-card {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 10%,
            rgba(244, 145, 30, 0.18),
            transparent 32%),
        var(--navy, #07111f);
    box-shadow: 0 32px 85px rgba(7, 17, 31, 0.18);
    color: #ffffff;
    overflow: hidden;
}

.coverage-card::before {
    content: "";
    position: absolute;
    right: -85px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border: 42px solid rgba(244, 145, 30, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.coverage-card__eyebrow {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    color: var(--orange, #f4911e);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.coverage-card>h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.coverage-card__cities {
    position: relative;
    z-index: 2;
    display: grid;
    margin-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coverage-card__cities a {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 15px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.coverage-card__cities a::after {
    content: "+";
    color: var(--orange, #f4911e);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.coverage-card__cities a:hover {
    padding-left: 7px;
    color: var(--orange, #f4911e);
}

.coverage-card__cities a:hover::after {
    transform: translate(3px, -3px);
}

.coverage-card__cities span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.66rem;
    font-weight: 800;
}

.coverage-card__note {
    position: relative;
    z-index: 2;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.75rem;
    line-height: 1.65;
}

/* Individual area hero text column */
.area-page-hero__content {
    min-width: 0;
    max-width: 900px;
}

@media (max-width: 1100px) {
    .areas-hero__coverage {
        max-width: 620px;
        margin-left: 0;
    }
}

@media (max-width: 700px) {
    .areas-hero__coverage {
        max-width: none;
    }

    .coverage-card {
        padding: 24px 20px;
        border-radius: 22px;
    }

    .coverage-card__cities a {
        min-height: 52px;
        padding: 13px 0;
    }
}

/* =========================================================
   MR KEYS LTD
   HOMEPAGE
========================================================== */

.home-shell {
    width: min(1460px, calc(100% - 64px));
    margin-inline: auto;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 13px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.home-btn:hover {
    transform: translateY(-2px);
}

.home-btn--primary {
    background: var(--orange, #f4911e);
    color: #fff;
    box-shadow: 0 16px 36px rgba(244, 145, 30, 0.24);
}

.home-btn--primary:hover {
    background: var(--navy, #07111f);
    color: #fff;
}

.home-btn--glass {
    border-color: rgba(7, 17, 31, 0.13);
    background: rgba(255, 255, 255, 0.82);
    color: var(--navy, #07111f);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.home-btn--glass:hover,
.home-btn--outline:hover {
    border-color: var(--navy, #07111f);
    background: var(--navy, #07111f);
    color: #fff;
}

.home-btn--outline {
    border-color: rgba(7, 17, 31, 0.14);
    color: var(--navy, #07111f);
    background: transparent;
}

.home-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy, #07111f);
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
}

.home-arrow-link span {
    color: var(--orange, #f4911e);
    transition: transform 0.25s ease;
}

.home-arrow-link:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   HERO
========================================================== */

.home-hero {
    position: relative;
    min-height: clamp(760px, 92vh, 920px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #eef2f5;
}

.home-hero__media,
.home-hero__wash {
    position: absolute;
    inset: 0;
}

.home-hero__media {
    z-index: -3;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center center;
    transform: scale(1.035);
    animation: mrKeysHeroZoom 1.6s cubic-bezier(.22, .7, .2, 1) forwards;
}

.home-hero__wash {
    z-index: -2;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(255, 255, 255, 0.97) 27%,
            rgba(255, 255, 255, 0.82) 45%,
            rgba(255, 255, 255, 0.30) 67%,
            rgba(255, 255, 255, 0.04) 100%),
        linear-gradient(0deg,
            rgba(7, 17, 31, 0.10) 0%,
            transparent 38%);
}

@keyframes mrKeysHeroZoom {
    to {
        transform: scale(1);
    }
}

.home-hero__inner {
    position: relative;
    z-index: 2;
    padding-bottom: 62px;
}

.home-hero__content {
    width: min(780px, 58vw);
}

.home-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 24px;
}

.home-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(7, 17, 31, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--navy, #07111f);
    font-size: 0.7rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.home-hero__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18a957;
    box-shadow: 0 0 0 4px rgba(24, 169, 87, 0.12);
}

.home-hero__location {
    color: #647184;
    font-size: 0.73rem;
    font-weight: 700;
}

.home-hero__eyebrow {
    margin: 0 0 12px;
    color: var(--orange, #f4911e);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-hero h1 {
    margin: 0;
    color: var(--navy, #07111f);
    font-size: clamp(4.6rem, 7vw, 7.6rem);
    font-weight: 900;
    line-height: 0.84;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.home-hero h1 span {
    color: var(--orange, #f4911e);
}

.home-hero__lead {
    max-width: 650px;
    margin: 27px 0 0;
    color: #445164;
    font-size: clamp(0.98rem, 1.15vw, 1.12rem);
    line-height: 1.75;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.home-hero__actions svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.home-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-top: 37px;
}

.home-hero__proof-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-right: 1px solid rgba(7, 17, 31, 0.11);
    color: inherit;
    text-decoration: none;
}

.home-hero__proof-item:first-child {
    padding-left: 0;
}

.home-hero__proof-item:last-child {
    border-right: 0;
}

.home-hero__proof-item strong {
    color: var(--navy, #07111f);
    font-size: 0.76rem;
}

.home-hero__proof-item>span:not(.home-hero__stars) {
    margin-top: 3px;
    color: #7f8998;
    font-size: 0.66rem;
}

.home-hero__stars {
    margin-bottom: 3px;
    color: var(--orange, #f4911e);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.home-hero__floating {
    position: absolute;
    display: grid;
    gap: 3px;
    padding: 14px 17px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 18px 45px rgba(7, 17, 31, 0.11);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.home-hero__floating span {
    color: #7f8998;
    font-size: 0.65rem;
}

.home-hero__floating strong {
    color: var(--navy, #07111f);
    font-size: 0.87rem;
}

.home-hero__floating--price {
    top: 30%;
    right: 2%;
}

.home-hero__floating--location {
    right: 12%;
    bottom: 12%;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

.home-hero__floating--location>i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--orange, #f4911e);
}

.home-hero__floating--location div {
    display: grid;
    gap: 2px;
}

.home-hero__scroll {
    position: absolute;
    right: 34px;
    bottom: 24px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(7, 17, 31, 0.68);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.home-hero__scroll i {
    width: 36px;
    height: 1px;
    background: currentColor;
}

.home-hero-animate {
    opacity: 0;
    transform: translateY(20px);
    animation: mrKeysHeroContent 0.75s ease forwards;
}

.home-hero__eyebrow {
    animation-delay: 0.12s;
}

.home-hero h1 {
    animation-delay: 0.2s;
}

.home-hero__lead {
    animation-delay: 0.31s;
}

.home-hero__actions {
    animation-delay: 0.42s;
}

.home-hero__proof {
    animation-delay: 0.52s;
}

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


/* =========================================================
   MARQUEE - SEAMLESS LOOP
========================================================== */

.home-marquee {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--navy, #07111f);
}

.home-marquee__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    animation: mrKeysMarquee 28s linear infinite;
    will-change: transform;
}

.home-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: max-content;
    padding: 15px 0;
}

.home-marquee__group span {
    flex-shrink: 0;
    padding: 0 19px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-marquee__group i {
    flex-shrink: 0;
    color: var(--orange, #f4911e);
    font-style: normal;
}

@keyframes mrKeysMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}


/* =========================================================
   SHARED SECTION HEADING
========================================================== */

.home-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    align-items: end;
    gap: 70px;
    margin-bottom: 48px;
}

.home-section-heading h2,
.home-one-key h2,
.home-pricing h2,
.home-lost h2,
.home-work h2,
.home-security h2,
.home-store h2 {
    margin: 11px 0 0;
    color: var(--navy, #07111f);
    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 850;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.home-section-heading h2 span,
.home-one-key h2 span,
.home-pricing h2 span,
.home-lost h2 span,
.home-work h2 span,
.home-security h2 span,
.home-store h2 span {
    color: var(--orange, #f4911e);
}

.home-section-heading__side {
    display: grid;
    gap: 20px;
}

.home-section-heading__side>p {
    margin: 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.75;
}

.home-slider-controls {
    display: flex;
    gap: 8px;
}

.home-slider-controls button {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(7, 17, 31, 0.10);
    border-radius: 50%;
    background: #fff;
    color: var(--navy, #07111f);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.home-slider-controls button:hover {
    border-color: var(--orange, #f4911e);
    background: var(--orange, #f4911e);
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================================
   SERVICES
========================================================== */

.home-services {
    padding: 110px 0;
    overflow: hidden;
    background: #fff;
}

.home-card-slider {
    overflow: hidden;
}

.home-card-slider__track {
    display: flex;
    gap: 17px;
    transition: transform 0.55s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}

.home-service-card {
    flex: 0 0 calc((100% - 34px) / 3);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 46px rgba(7, 17, 31, 0.05);
}

.home-service-card__image {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #eef2f5;
    text-decoration: none;
}

.home-service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.home-service-card:hover .home-service-card__image img {
    transform: scale(1.045);
}

.home-service-card__image>span {
    position: absolute;
    top: 17px;
    left: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.91);
    color: var(--orange, #f4911e);
    font-size: 0.66rem;
    font-weight: 850;
    backdrop-filter: blur(8px);
}

.home-service-card__content {
    padding: 24px;
}

.home-service-card__eyebrow {
    margin: 0 0 7px;
    color: #98a2b3;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-service-card h3 {
    margin: 0;
    color: var(--navy, #07111f);
    font-size: 1.22rem;
    letter-spacing: -0.025em;
}

.home-service-card__content>p:not(.home-service-card__eyebrow) {
    min-height: 82px;
    margin: 12px 0 0;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.7;
}

.home-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 19px;
    color: var(--navy, #07111f);
    font-size: 0.75rem;
    font-weight: 850;
    text-decoration: none;
}

.home-service-card a span {
    color: var(--orange, #f4911e);
}

.home-swipe-hint {
    display: none;
}


/* =========================================================
   ONE KEY LEFT
========================================================== */

.home-one-key {
    padding: 78px 0;
    background: #f4f7f9;
}

.home-one-key__inner {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) minmax(290px, 0.52fr);
    align-items: center;
    gap: 42px;
}

.home-one-key__number {
    color: var(--orange, #f4911e);
    font-size: 0.7rem;
    font-weight: 900;
}

.home-one-key__action p {
    margin: 0 0 18px;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.7;
}

.home-one-key__action a {
    display: inline-flex;
    gap: 7px;
    color: var(--navy, #07111f);
    font-size: 0.79rem;
    font-weight: 850;
    text-decoration: none;
}

.home-one-key__action a span {
    color: var(--orange, #f4911e);
}


/* =========================================================
   PRICING
========================================================== */

.home-pricing {
    padding: 115px 0;
    background: #fff;
}

.home-pricing__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 72px;
}

.home-pricing__visual {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    border-radius: 24px;
    background: #edf1f4;
}

.home-pricing__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-pricing__badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    padding: 18px 19px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.home-pricing__badge span {
    display: block;
    color: var(--orange, #f4911e);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-pricing__badge strong {
    display: block;
    margin-top: 4px;
    color: var(--navy, #07111f);
    font-size: 0.82rem;
}

.home-pricing__intro {
    max-width: 590px;
    margin: 22px 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.75;
}

.home-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 28px;
}

.home-price-card {
    padding: 20px;
    border: 1px solid rgba(7, 17, 31, 0.08);
    border-radius: 16px;
    background: #f7f9fb;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.home-price-card:hover {
    transform: translateY(-3px);
    border-color: rgba(244, 145, 30, 0.30);
    background: #fff;
    box-shadow: 0 14px 34px rgba(7, 17, 31, 0.06);
}

.home-price-card span,
.home-price-card small {
    display: block;
    color: #8993a2;
    font-size: 0.68rem;
}

.home-price-card strong {
    display: block;
    margin: 7px 0;
    color: var(--orange, #f4911e);
    font-size: 2rem;
    line-height: 1;
}

.home-pricing__content>.home-arrow-link {
    margin-top: 27px;
}


/* =========================================================
   LOST ALL KEYS
========================================================== */

.home-lost {
    position: relative;
    min-height: 660px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.home-lost__media,
.home-lost__overlay {
    position: absolute;
    inset: 0;
}

.home-lost__media {
    z-index: -2;
    background-image: var(--lost-image);
    background-size: cover;
    background-position: center;
}

.home-lost__overlay {
    z-index: -1;
    background:
        linear-gradient(90deg,
            rgba(7, 17, 31, 0.95) 0%,
            rgba(7, 17, 31, 0.80) 48%,
            rgba(7, 17, 31, 0.22) 100%);
}

.home-lost__content {
    max-width: 680px;
}

.home-lost h2 {
    color: #fff;
    font-size: clamp(4rem, 6.5vw, 6.7rem);
    line-height: 0.88;
}

.home-lost__content>p:not(.eyebrow) {
    max-width: 580px;
    margin: 23px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    line-height: 1.8;
}

.home-lost__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

.home-lost__phone {
    color: #fff;
    font-size: 0.87rem;
    font-weight: 850;
    text-decoration: none;
}


/* =========================================================
   WHY / TRUST
========================================================== */

.home-why {
    padding: 110px 0;
    overflow: hidden;
    background: #f5f7fa;
}

.home-trust-scroller__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(7, 17, 31, 0.09);
}

.home-trust-card {
    min-height: 215px;
    padding: 27px;
    border-right: 1px solid rgba(7, 17, 31, 0.09);
    border-bottom: 1px solid rgba(7, 17, 31, 0.09);
}

.home-trust-card:nth-child(3n) {
    border-right: 0;
}

.home-trust-card>span {
    color: var(--orange, #f4911e);
    font-size: 0.66rem;
    font-weight: 850;
}

.home-trust-card h3 {
    margin: 39px 0 0;
    color: var(--navy, #07111f);
    font-size: 1.05rem;
}

.home-trust-card p {
    margin: 8px 0 0;
    color: #667085;
    font-size: 0.79rem;
    line-height: 1.65;
}


/* =========================================================
   REAL WORK
========================================================== */

.home-work {
    padding: 110px 0;
    background: #fff;
}

.home-work__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 42px;
}

.home-work__grid {
    display: grid;
    grid-template-columns: 1.45fr 0.75fr;
    grid-template-rows: repeat(2, 270px);
    gap: 14px;
}

.home-work-card {
    position: relative;
    overflow: hidden;
    border-radius: 19px;
    background: #edf1f4;
}

.home-work-card--large {
    grid-row: span 2;
}

.home-work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.home-work-card:hover img {
    transform: scale(1.04);
}

.home-work-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,
            rgba(7, 17, 31, 0.66),
            rgba(7, 17, 31, 0.02) 60%);
}

.home-work-card>div {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 19px;
    left: 20px;
    display: grid;
    gap: 4px;
}

.home-work-card>div span {
    color: var(--orange, #f4911e);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-work-card>div strong {
    color: #fff;
    font-size: 0.85rem;
}


/* =========================================================
   AREAS
========================================================== */

.home-areas {
    padding: 110px 0;
    overflow: hidden;
    background: #f5f7fa;
}

.home-area-slider {
    overflow: hidden;
}

.home-area-slider__track {
    display: flex;
    gap: 12px;
    transition: transform 0.55s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
}

.home-area-card {
    flex: 0 0 calc((100% - 24px) / 3);
    min-height: 232px;
    padding: 24px;
    border: 1px solid rgba(7, 17, 31, 0.09);
    border-radius: 17px;
    background: #fff;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.home-area-card:hover {
    transform: translateY(-3px);
    border-color: rgba(244, 145, 30, 0.30);
    box-shadow: 0 16px 40px rgba(7, 17, 31, 0.05);
}

.home-area-card>span {
    color: var(--orange, #f4911e);
    font-size: 0.65rem;
    font-weight: 850;
}

.home-area-card h3 {
    margin: 45px 0 0;
    color: var(--navy, #07111f);
    font-size: 1.3rem;
    letter-spacing: -0.03em;
}

.home-area-card p {
    min-height: 42px;
    margin: 8px 0 17px;
    color: #8a94a4;
    font-size: 0.7rem;
    line-height: 1.55;
}

.home-area-card strong {
    color: var(--navy, #07111f);
    font-size: 0.72rem;
}

.home-areas__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 27px;
}

.home-areas__bottom p {
    margin: 0;
    color: #667085;
    font-size: 0.8rem;
}


/* =========================================================
   SECURITY KEYS
========================================================== */

.home-security {
    padding: 105px 0;
    background: #fff;
}

.home-security__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 62px;
    overflow: hidden;
    border-radius: 26px;
    background: #f4f7f9;
}

.home-security__image {
    min-height: 500px;
    height: 100%;
}

.home-security__image img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
}

.home-security__content {
    max-width: 610px;
    padding: 44px 55px 44px 0;
}

.home-security__content>p:not(.eyebrow) {
    margin: 21px 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.75;
}

.home-security__content>.home-arrow-link {
    margin-top: 24px;
}


/* =========================================================
   STORE
========================================================== */

.home-store {
    padding: 115px 0;
    background: #f5f7fa;
}

.home-store__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 70px;
}

.home-store__content>p:not(.eyebrow) {
    margin: 21px 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.7;
}

.home-store address {
    margin-top: 23px;
    color: var(--navy, #07111f);
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.7;
}

.home-store__hours {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 26px;
}

.home-store__hours span {
    display: block;
    color: #98a2b3;
    font-size: 0.65rem;
}

.home-store__hours strong {
    display: block;
    margin-top: 4px;
    color: var(--navy, #07111f);
    font-size: 0.8rem;
}

.home-store__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 29px;
}

.home-store__visual {
    position: relative;
    min-height: 550px;
    overflow: hidden;
    border-radius: 23px;
    background: #edf1f4;
}

.home-store__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-store__badge {
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 15px 18px;
    border-radius: 14px;
    background: var(--orange, #f4911e);
    color: #fff;
}

.home-store__badge span {
    display: block;
    font-size: 0.63rem;
}

.home-store__badge strong {
    display: block;
    margin-top: 2px;
    font-size: 1.18rem;
}


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

@media (max-width: 1100px) {

    .home-hero__content {
        width: min(720px, 66vw);
    }

    .home-hero__floating {
        display: none;
    }

    .home-section-heading {
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
    }

    .home-section-heading__side {
        max-width: 620px;
    }

    .home-service-card,
    .home-area-card {
        flex-basis: calc((100% - 17px) / 2);
    }

    .home-pricing__grid,
    .home-store__grid {
        grid-template-columns: 1fr;
    }

    .home-pricing__visual,
    .home-store__visual {
        min-height: 480px;
    }

    .home-security__inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .home-security__image,
    .home-security__image img {
        min-height: 400px;
    }

    .home-security__content {
        padding: 36px;
    }

}


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

@media (max-width: 700px) {

    .home-shell {
        width: min(100% - 30px, 1460px);
    }

    .home-hero {
        min-height: 760px;
        align-items: flex-end;
    }

    .home-hero__media {
        background-position: 67% center;
    }

    .home-hero__wash {
        background:
            linear-gradient(0deg,
                rgba(255, 255, 255, 0.99) 0%,
                rgba(255, 255, 255, 0.96) 42%,
                rgba(255, 255, 255, 0.69) 68%,
                rgba(255, 255, 255, 0.14) 100%);
    }

    .home-hero__inner {
        padding-top: 120px;
        padding-bottom: 54px;
    }

    .home-hero__content {
        width: 100%;
    }

    .home-hero__meta {
        margin-bottom: 16px;
    }

    .home-hero__location {
        display: none;
    }

    .home-hero h1 {
        font-size: clamp(3.65rem, 17vw, 5rem);
        line-height: 0.87;
    }

    .home-hero__lead {
        max-width: 96%;
        margin-top: 20px;
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .home-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .home-hero__actions .home-btn {
        width: 100%;
    }

    .home-hero__proof {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 26px;
    }

    .home-hero__proof-item {
        min-height: auto;
        padding: 0 8px;
        border-right: 1px solid rgba(7, 17, 31, 0.10);
    }

    .home-hero__proof-item:first-child {
        padding-left: 0;
    }

    .home-hero__proof-item strong {
        font-size: 0.63rem;
    }

    .home-hero__proof-item>span:not(.home-hero__stars) {
        display: none;
    }

    .home-hero__scroll {
        display: none;
    }

    .home-marquee__group {
        padding: 13px 0;
    }

    .home-services,
    .home-pricing,
    .home-why,
    .home-work,
    .home-areas,
    .home-security,
    .home-store {
        padding: 72px 0;
    }

    .home-section-heading {
        margin-bottom: 32px;
    }

    .home-section-heading h2,
    .home-one-key h2,
    .home-pricing h2,
    .home-work h2,
    .home-security h2,
    .home-store h2 {
        font-size: clamp(2.65rem, 12vw, 3.8rem);
    }

    .home-slider-controls--desktop {
        display: none;
    }

    .home-card-slider,
    .home-area-slider {
        margin-right: -15px;
        overflow: visible;
    }

    .home-card-slider__track,
    .home-area-slider__track {
        gap: 12px;
        overflow-x: auto;
        padding-right: 34px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        transition: none;
        transform: none !important;
        overscroll-behavior-x: contain;
    }

    .home-card-slider__track::-webkit-scrollbar,
    .home-area-slider__track::-webkit-scrollbar,
    .home-trust-scroller__track::-webkit-scrollbar,
    .home-work__grid::-webkit-scrollbar {
        display: none;
    }

    .home-service-card {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    .home-service-card__image {
        height: 220px;
    }

    .home-service-card__content>p:not(.home-service-card__eyebrow) {
        min-height: auto;
    }

    .home-swipe-hint {
        display: flex;
        justify-content: space-between;
        margin-top: 14px;
        color: #98a2b3;
        font-size: 0.68rem;
    }

    .home-one-key {
        padding: 62px 0;
    }

    .home-one-key__inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-one-key__number {
        display: none;
    }

    .home-pricing__grid {
        gap: 38px;
    }

    .home-pricing__visual {
        min-height: 390px;
    }

    .home-price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-lost {
        min-height: 620px;
        align-items: flex-end;
        padding: 70px 0;
    }

    .home-lost__media {
        background-position: 58% center;
    }

    .home-lost__overlay {
        background:
            linear-gradient(0deg,
                rgba(7, 17, 31, 0.97) 0%,
                rgba(7, 17, 31, 0.82) 62%,
                rgba(7, 17, 31, 0.28) 100%);
    }

    .home-lost h2 {
        font-size: clamp(3.8rem, 17vw, 5.2rem);
    }

    .home-trust-scroller {
        margin-right: -15px;
    }

    .home-trust-scroller__track {
        display: flex;
        gap: 11px;
        overflow-x: auto;
        padding-right: 34px;
        border-top: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .home-trust-card {
        flex: 0 0 81%;
        min-height: 225px;
        border: 1px solid rgba(7, 17, 31, 0.09) !important;
        border-radius: 17px;
        scroll-snap-align: start;
    }

    .home-work__heading {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .home-work__grid {
        display: flex;
        gap: 11px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .home-work-card,
    .home-work-card--large {
        flex: 0 0 86%;
        height: 380px;
        grid-row: auto;
        scroll-snap-align: start;
    }

    .home-area-card {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }

    .home-area-card h3 {
        margin-top: 42px;
    }

    .home-areas__bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 22px;
    }

    .home-security__inner {
        border-radius: 21px;
    }

    .home-security__image,
    .home-security__image img {
        min-height: 320px;
        height: 320px;
    }

    .home-security__content {
        padding: 28px 22px 32px;
    }

    .home-store__grid {
        gap: 38px;
    }

    .home-store__visual {
        min-height: 390px;
    }

}


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

@media (max-width: 430px) {

    .home-hero h1 {
        font-size: 3.6rem;
    }

    .home-price-grid {
        grid-template-columns: 1fr;
    }

    .home-hero__proof-item strong {
        font-size: 0.59rem;
    }

}


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

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

    .home-hero__media,
    .home-marquee__track,
    .home-hero-animate {
        animation: none !important;
    }

    .home-hero-animate {
        opacity: 1;
        transform: none;
    }

}

/* =========================================================
   HOME - STORE MAP
========================================================= */

.home-store__map {
    position: relative;
    min-height: 560px;
    overflow: hidden;

    border-radius: 24px;

    background: #eef2f5;

    box-shadow:
        0 24px 60px rgba(7, 17, 31, 0.08);
}


/* Make Google Maps completely fill the container */

.home-store__map iframe {
    position: absolute;
    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;
    min-height: 100%;

    border: 0;
}


/* Open 7 Days badge */

.home-store__map .home-store__badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;

    min-width: 105px;

    padding: 14px 18px;

    border-radius: 14px;

    background: var(--orange, #f4911e);

    color: #fff;

    box-shadow:
        0 14px 32px rgba(7, 17, 31, 0.15);

    pointer-events: none;
}


.home-store__map .home-store__badge span {
    display: block;

    font-size: 0.62rem;
    font-weight: 700;

    opacity: 0.85;
}


.home-store__map .home-store__badge strong {
    display: block;

    margin-top: 2px;

    font-size: 1.1rem;
    font-weight: 850;
}


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

@media (max-width: 1000px) {

    .home-store__map {
        min-height: 480px;
    }

}


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

@media (max-width: 700px) {

    .home-store__map {
        min-height: 390px;

        border-radius: 20px;
    }


    .home-store__map .home-store__badge {
        right: 14px;
        bottom: 14px;

        min-width: 92px;

        padding: 11px 14px;

        border-radius: 12px;
    }


    .home-store__map .home-store__badge strong {
        font-size: 0.95rem;
    }

}

/* =========================================================
   MR KEYS LTD - PRICING PAGE
========================================================= */

.pricing-page,
.pricing-hero,
.pricing-list,
.pricing-why,
.pricing-compare,
.pricing-process,
.pricing-faq {
    --pricing-navy: var(--navy, #294766);
    --pricing-deep: var(--navy-deep, #102b46);
    --pricing-dark: var(--navy-dark, #071a2d);
    --pricing-orange: var(--orange, #f6a000);
    --pricing-ink: var(--ink, #112132);
    --pricing-muted: #687585;
}

.pricing-shell {
    width: min(1320px, calc(100% - 44px));
    margin: 0 auto;
}

.pricing-eyebrow {
    margin: 0;
    color: var(--pricing-orange);
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* HERO */
.pricing-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 0;
    background:
        radial-gradient(circle at 85% 12%, rgba(246, 160, 0, .13), transparent 28%),
        linear-gradient(135deg, #f8fafc 0%, #fff 52%, #f3f6f8 100%);
}

.pricing-hero::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    left: -230px;
    bottom: 35px;
    border: 1px solid rgba(41, 71, 102, .08);
    border-radius: 50%;
}

.pricing-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .72fr);
    align-items: center;
    gap: 78px;
    padding-bottom: 88px;
}

.pricing-hero__content h1 {
    max-width: 850px;
    margin: 14px 0 0;
    color: var(--pricing-dark);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(4.2rem, 7vw, 7.6rem);
    font-weight: 800;
    line-height: .86;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.pricing-hero__content h1 span {
    color: var(--pricing-orange);
}

.pricing-hero__lead {
    max-width: 760px;
    margin: 28px 0 0;
    color: var(--pricing-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.pricing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 31px;
}

.pricing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 13px;
    font-size: .78rem;
    font-weight: 850;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.pricing-btn:hover {
    transform: translateY(-2px);
}

.pricing-btn--primary {
    background: var(--pricing-orange);
    color: #fff;
    box-shadow: 0 14px 28px rgba(246, 160, 0, .22);
}

.pricing-btn--primary:hover {
    box-shadow: 0 18px 34px rgba(246, 160, 0, .28);
}

.pricing-btn--secondary {
    border: 1px solid rgba(7, 26, 45, .12);
    background: #fff;
    color: var(--pricing-dark);
}

.pricing-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.pricing-hero__trust span {
    position: relative;
    padding-left: 14px;
    color: #526173;
    font-size: .7rem;
    font-weight: 800;
}

.pricing-hero__trust span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pricing-orange);
    transform: translateY(-50%);
}

.pricing-hero__panel {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border-radius: 28px;
    background: var(--pricing-dark);
    color: #fff;
    box-shadow: 0 28px 70px rgba(7, 26, 45, .22);
}

.pricing-hero__panel::after {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    top: -110px;
    right: -90px;
    border: 45px solid rgba(246, 160, 0, .10);
    border-radius: 50%;
}

.pricing-hero__panel-top,
.pricing-hero__panel-bottom {
    position: relative;
    z-index: 1;
}

.pricing-hero__panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing-hero__panel-kicker {
    color: var(--pricing-orange);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.pricing-hero__panel-number {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    color: rgba(255, 255, 255, .6);
    font-size: .68rem;
    font-weight: 800;
}

.pricing-hero__price {
    position: relative;
    z-index: 1;
    padding: 54px 0 44px;
}

.pricing-hero__price small {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: .79rem;
}

.pricing-hero__price strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 6rem;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
}

.pricing-hero__price strong span {
    color: var(--pricing-orange);
    font-size: 2rem;
    vertical-align: top;
}

.pricing-hero__price p {
    margin: 13px 0 0;
    color: var(--pricing-orange);
    font-size: .74rem;
    font-weight: 800;
}

.pricing-hero__panel-line {
    height: 1px;
    background: rgba(255, 255, 255, .1);
}

.pricing-hero__panel-bottom {
    padding-top: 20px;
}

.pricing-hero__panel-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, .52);
    font-size: .68rem;
    line-height: 1.65;
}

.pricing-hero__panel-bottom a {
    display: inline-flex;
    gap: 8px;
    margin-top: 18px;
    color: #fff;
    font-size: .73rem;
    font-weight: 850;
}

.pricing-hero__panel-bottom a span {
    color: var(--pricing-orange);
}

/* =========================================================
   PRICING HERO MARQUEE
========================================================= */

.pricing-hero__marquee {
    width: 100%;
    overflow: hidden;
    background: var(--pricing-navy);
}

.pricing-hero__marquee-track {
    display: flex;
    width: max-content;
    animation: pricingMarquee 24s linear infinite;
    will-change: transform;
}

.pricing-hero__marquee-group {
    display: flex;
    align-items: center;
    justify-content: space-around;

    flex-shrink: 0;

    /* THIS is the important bit */
    min-width: 100vw;

    padding: 15px 0;
}

.pricing-hero__marquee span {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    padding: 0 18px;

    color: #fff;
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .1em;
    white-space: nowrap;
}

.pricing-hero__marquee i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--pricing-orange);
    font-style: normal;
}

@keyframes pricingMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* SHARED HEADING */
.pricing-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
    align-items: end;
    gap: 70px;
    margin-bottom: 48px;
}

.pricing-heading h2,
.pricing-why__content h2,
.pricing-faq__intro h2 {
    margin: 10px 0 0;
    color: var(--pricing-dark);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(3.4rem, 5vw, 5.6rem);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.pricing-heading h2 span,
.pricing-why__content h2 span,
.pricing-faq__intro h2 span {
    color: var(--pricing-orange);
}

.pricing-heading>p {
    margin: 0;
    color: var(--pricing-muted);
    font-size: .88rem;
    line-height: 1.8;
}

/* PRICES */
.pricing-list {
    padding: 115px 0;
    background: #fff;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pricing-card {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid rgba(7, 26, 45, .08);
    border-radius: 22px;
    background: #f7f9fb;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(246, 160, 0, .25);
    background: #fff;
    box-shadow: 0 20px 48px rgba(7, 26, 45, .08);
}

.pricing-card--featured {
    background: var(--pricing-dark);
    color: #fff;
}

.pricing-card--featured:hover {
    background: var(--pricing-dark);
}

.pricing-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing-card__number {
    color: #9aa5b1;
    font-size: .68rem;
    font-weight: 900;
}

.pricing-card__tag {
    padding: 7px 10px;
    border-radius: 99px;
    background: var(--pricing-orange);
    color: #fff;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pricing-card__eyebrow {
    margin: 37px 0 7px;
    color: #9aa5b1;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pricing-card h3 {
    margin: 0;
    color: var(--pricing-dark);
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.pricing-card--featured h3 {
    color: #fff;
}

.pricing-card__price {
    margin-top: 24px;
}

.pricing-card__price small {
    display: block;
    color: #8d98a4;
    font-size: .63rem;
    font-weight: 750;
    text-transform: uppercase;
}

.pricing-card__price strong {
    display: block;
    margin-top: 2px;
    color: var(--pricing-orange);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 4.25rem;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
}

.pricing-card__price strong span {
    font-size: 1.35rem;
    vertical-align: top;
}

.pricing-card__copy {
    margin: 21px 0 0;
    color: #697686;
    font-size: .78rem;
    line-height: 1.72;
}

.pricing-card--featured .pricing-card__copy {
    color: rgba(255, 255, 255, .58);
}

.pricing-card>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 25px;
    color: var(--pricing-dark);
    font-size: .73rem;
    font-weight: 850;
}

.pricing-card--featured>a {
    color: #fff;
}

.pricing-card>a span {
    color: var(--pricing-orange);
}

.pricing-note {
    display: grid;
    grid-template-columns: 125px 1fr;
    gap: 28px;
    margin-top: 22px;
    padding: 21px 24px;
    border-radius: 16px;
    background: #f3f6f8;
}

.pricing-note span {
    color: var(--pricing-orange);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pricing-note p {
    margin: 0;
    color: #6e7986;
    font-size: .75rem;
    line-height: 1.65;
}

/* PRICE FACTORS */
.pricing-why {
    padding: 110px 0;
    background: #f3f6f8;
}

.pricing-why__grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 90px;
    align-items: start;
}

.pricing-why__intro {
    max-width: 500px;
    margin: 24px 0 0;
    color: var(--pricing-muted);
    font-size: .88rem;
    line-height: 1.8;
}

.pricing-text-link {
    display: inline-flex;
    gap: 8px;
    margin-top: 24px;
    color: var(--pricing-dark);
    font-size: .75rem;
    font-weight: 850;
}

.pricing-text-link span {
    color: var(--pricing-orange);
}

.pricing-factors {
    border-top: 1px solid rgba(7, 26, 45, .1);
}

.pricing-factors article {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 22px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(7, 26, 45, .1);
}

.pricing-factors article>span {
    color: var(--pricing-orange);
    font-size: .67rem;
    font-weight: 900;
}

.pricing-factors h3 {
    margin: 0;
    color: var(--pricing-dark);
    font-size: 1rem;
}

.pricing-factors p {
    margin: 8px 0 0;
    color: #6b7785;
    font-size: .77rem;
    line-height: 1.7;
}

/* PROCESS */
.pricing-process {
    padding: 112px 0;
    background: var(--pricing-dark);
    color: #fff;
}

.pricing-heading--light h2 {
    color: #fff;
}

.pricing-heading--light>p {
    color: rgba(255, 255, 255, .56);
}

.pricing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pricing-steps article {
    min-height: 240px;
    padding: 29px 30px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.pricing-steps article:last-child {
    border-right: 0;
}

.pricing-steps span {
    color: var(--pricing-orange);
    font-size: .67rem;
    font-weight: 900;
}

.pricing-steps h3 {
    margin: 58px 0 0;
    color: #fff;
    font-size: 1.05rem;
}

.pricing-steps p {
    max-width: 320px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .52);
    font-size: .76rem;
    line-height: 1.7;
}

.pricing-process__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 34px;
    padding: 22px 24px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .055);
}

.pricing-process__cta small {
    display: block;
    color: var(--pricing-orange);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pricing-process__cta strong {
    display: block;
    margin-top: 5px;
    color: #fff;
    font-size: 1rem;
}

.pricing-process__cta a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px;
    border-radius: 11px;
    background: var(--pricing-orange);
    color: #fff;
    font-size: .73rem;
    font-weight: 850;
}

/* FAQ */
.pricing-faq {
    padding: 112px 0;
    background: #fff;
}

.pricing-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
    gap: 90px;
    align-items: start;
}

.pricing-faq__intro>p:last-child {
    max-width: 400px;
    margin: 22px 0 0;
    color: var(--pricing-muted);
    font-size: .82rem;
    line-height: 1.75;
}

.pricing-faq__items {
    border-top: 1px solid rgba(7, 26, 45, .1);
}

.pricing-faq details {
    border-bottom: 1px solid rgba(7, 26, 45, .1);
}

.pricing-faq summary {
    position: relative;
    padding: 25px 45px 25px 0;
    color: var(--pricing-dark);
    font-size: .91rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.pricing-faq summary::-webkit-details-marker {
    display: none;
}

.pricing-faq summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    color: var(--pricing-orange);
    font-size: 1.3rem;
    font-weight: 500;
    transform: translateY(-50%);
}

.pricing-faq details[open] summary::after {
    content: '−';
}

.pricing-faq details p {
    max-width: 700px;
    margin: -5px 0 25px;
    color: #6b7785;
    font-size: .79rem;
    line-height: 1.75;
}

/* RESPONSIVE */
@media (max-width: 1020px) {

    .pricing-hero__grid,
    .pricing-why__grid,
    .pricing-faq__grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .pricing-hero__panel {
        max-width: 620px;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 720px) {
    .pricing-shell {
        width: min(100% - 30px, 1320px);
    }

    .pricing-hero {
        padding-top: 58px;
    }

    .pricing-hero__grid {
        padding-bottom: 58px;
    }

    .pricing-hero__content h1 {
        font-size: clamp(3.5rem, 17vw, 5.2rem);
    }

    .pricing-hero__lead {
        font-size: .88rem;
    }

    .pricing-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pricing-btn {
        width: 100%;
    }

    .pricing-hero__trust {
        gap: 12px 18px;
    }

    .pricing-hero__panel {
        padding: 24px;
        border-radius: 22px;
    }

    .pricing-hero__price strong {
        font-size: 5.2rem;
    }

    .pricing-list,
    .pricing-why,
    .pricing-process,
    .pricing-faq {
        padding: 80px 0;
    }

    .pricing-heading h2,
    .pricing-why__content h2,
    .pricing-faq__intro h2 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        min-height: 385px;
    }

    .pricing-note {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .pricing-why__grid,
    .pricing-faq__grid {
        gap: 42px;
    }

    .pricing-steps {
        grid-template-columns: 1fr;
    }

    .pricing-steps article {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .pricing-steps article:last-child {
        border-bottom: 0;
    }

    .pricing-steps h3 {
        margin-top: 34px;
    }

    .pricing-process__cta {
        align-items: stretch;
        flex-direction: column;
    }

    .pricing-process__cta a {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-hero__marquee-track {
        animation: none;
    }
}

/* =========================================================
   WHY MR KEYS INSTEAD OF A DEALER
========================================================= */

.pricing-compare {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 10%,
            rgba(245, 158, 11, 0.12),
            transparent 30%),
        #f4f6f8;
}

.pricing-compare::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 70px;
    background: rgba(16, 35, 58, 0.16);
}

.pricing-compare__heading {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.pricing-compare__heading h2 {
    margin: 12px 0 22px;
    color: #10233a;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3.2rem, 6vw, 5.7rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.pricing-compare__heading h2 span {
    color: #f59e0b;
}

.pricing-compare__heading>p:last-child {
    max-width: 650px;
    margin: 0 auto;
    color: #687386;
    font-size: 1rem;
    line-height: 1.8;
}


/* GRID */

.pricing-compare__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}


/* CARD */

.pricing-compare-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.pricing-compare-card--keys {
    color: #fff;
    background: #10233a;
    box-shadow: 0 30px 70px rgba(16, 35, 58, 0.18);
}

.pricing-compare-card--keys::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.11);
}

.pricing-compare-card--dealer {
    color: #10233a;
    border: 1px solid #dde2e8;
    background: #fff;
}


/* CARD TOP */

.pricing-compare-card__top {
    position: relative;
    min-height: 190px;
    padding: 34px 38px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-compare-card--dealer .pricing-compare-card__top {
    border-bottom-color: #e8ebef;
}

.pricing-compare-card__label {
    display: block;
    margin-bottom: 25px;
    color: #f59e0b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pricing-compare-card--dealer .pricing-compare-card__label {
    color: #8791a0;
}

.pricing-compare-card__top>strong {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(2.8rem, 4vw, 4.4rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.pricing-compare-card--keys .pricing-compare-card__top>strong {
    color: #fff;
}

.pricing-compare-card__badge {
    position: absolute;
    top: 32px;
    right: 34px;
    padding: 8px 13px;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-compare-card--keys .pricing-compare-card__badge {
    color: #10233a;
    background: #f59e0b;
}

.pricing-compare-card--dealer .pricing-compare-card__badge {
    color: #687386;
    background: #f0f2f5;
}


/* ITEMS */

.pricing-compare-card__items {
    position: relative;
}

.pricing-compare-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
    padding: 27px 38px;
}

.pricing-compare-card--keys .pricing-compare-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-compare-card--dealer .pricing-compare-item {
    border-bottom: 1px solid #e9edf1;
}

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

.pricing-compare-item__icon {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 800;
}

.pricing-compare-card--keys .pricing-compare-item__icon {
    color: #10233a;
    background: #f59e0b;
}

.pricing-compare-card--dealer .pricing-compare-item__icon {
    color: #8a94a3;
    background: #f0f2f5;
}

.pricing-compare-item strong {
    display: block;
    margin-bottom: 7px;
    font-size: 0.98rem;
    font-weight: 800;
}

.pricing-compare-card--keys .pricing-compare-item strong {
    color: #fff;
}

.pricing-compare-item p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.65;
}

.pricing-compare-card--keys .pricing-compare-item p {
    color: rgba(255, 255, 255, 0.58);
}

.pricing-compare-card--dealer .pricing-compare-item p {
    color: #7a8493;
}


/* CTA */

.pricing-compare__cta {
    display: flex;
    margin-top: 24px;
    padding: 42px 46px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(16, 35, 58, 0.08);
}

.pricing-compare__cta>div:first-child {
    max-width: 650px;
}

.pricing-compare__cta>div:first-child>span {
    display: block;
    margin-bottom: 8px;
    color: #f59e0b;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.pricing-compare__cta h3 {
    margin: 0 0 10px;
    color: #10233a;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.pricing-compare__cta p {
    max-width: 570px;
    margin: 0;
    color: #748091;
    line-height: 1.7;
}

.pricing-compare__cta-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
}

.pricing-compare__phone {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.pricing-compare__phone small {
    margin-bottom: 2px;
    color: #8b95a3;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-compare__phone strong {
    color: #10233a;
    font-size: 1rem;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .pricing-compare {
        padding: 85px 0;
    }

    .pricing-compare__grid {
        grid-template-columns: 1fr;
    }

    .pricing-compare__cta {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 600px) {

    .pricing-compare {
        padding: 70px 0;
    }

    .pricing-compare__heading {
        margin-bottom: 40px;
        text-align: left;
    }

    .pricing-compare__heading>p:last-child {
        margin: 0;
    }

    .pricing-compare-card {
        border-radius: 18px;
    }

    .pricing-compare-card__top {
        min-height: 155px;
        padding: 27px 24px;
    }

    .pricing-compare-card__badge {
        top: 25px;
        right: 22px;
    }

    .pricing-compare-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
        padding: 23px 24px;
    }

    .pricing-compare-item__icon {
        width: 34px;
        height: 34px;
    }

    .pricing-compare__cta {
        padding: 30px 25px;
        border-radius: 18px;
    }

    .pricing-compare__cta-actions {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
    }

    .pricing-compare__cta-actions .pricing-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   MR KEYS LTD - CAR KEYS PAGE
========================================================= */

.car-keys-page {
    --ck-navy: var(--navy, #294766);
    --ck-deep: var(--navy-deep, #102b46);
    --ck-dark: var(--navy-dark, #071a2d);
    --ck-orange: var(--orange, #f6a000);
    --ck-ink: var(--ink, #112132);
    --ck-muted: #687585;
    --ck-line: #dfe5eb;
    --ck-soft: #f3f5f7;
    --ck-white: #ffffff;
    overflow: hidden;
    background: #fff;
    color: var(--ck-ink);
}

.car-keys-page *,
.car-keys-page *::before,
.car-keys-page *::after {
    box-sizing: border-box;
}

.ck-shell {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.ck-eyebrow {
    margin: 0;
    color: var(--ck-orange);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ck-btn {
    display: inline-flex;
    min-height: 54px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
}

.ck-btn:hover {
    transform: translateY(-2px);
}

.ck-btn--primary {
    color: var(--ck-dark);
    background: var(--ck-orange);
}

.ck-btn--primary:hover {
    background: #ffae13;
}

.ck-btn--glass {
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
}

.ck-btn--glass:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .14);
}

.ck-btn--outline {
    color: var(--ck-deep);
    border-color: rgba(16, 43, 70, .18);
    background: transparent;
}

.ck-btn--outline:hover {
    border-color: var(--ck-deep);
}

.ck-text-link {
    display: inline-flex;
    margin-top: 28px;
    align-items: center;
    gap: 10px;
    color: var(--ck-deep);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 800;
}

.ck-text-link span {
    color: var(--ck-orange);
}


/* =========================================================
   REVEAL
========================================================= */

.ck-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2, .75, .25, 1);
}

.ck-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ck-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================
   HERO
========================================================= */

.ck-hero {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    color: #fff;
    background: var(--ck-dark);
}

.ck-hero__media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 26, 45, .42), rgba(7, 26, 45, .02)),
        var(--ck-hero-image) center / cover no-repeat;
    transform: scale(1.015);
}

.ck-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(7, 26, 45, .97) 0%,
            rgba(7, 26, 45, .82) 42%,
            rgba(7, 26, 45, .30) 72%,
            rgba(7, 26, 45, .55) 100%),
        linear-gradient(0deg,
            rgba(7, 26, 45, .72) 0%,
            transparent 35%);
}

.ck-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 700px;
    padding: 105px 0 100px;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .55fr);
    gap: 70px;
    align-items: center;
}

.ck-hero__content {
    max-width: 790px;
}

.ck-hero__meta {
    display: flex;
    margin-bottom: 26px;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    color: rgba(255, 255, 255, .67);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.ck-hero__meta span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.ck-hero__meta i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ck-orange);
    box-shadow: 0 0 0 6px rgba(246, 160, 0, .12);
}

.ck-hero h1 {
    margin: 14px 0 24px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(4.8rem, 8.5vw, 8.2rem);
    font-weight: 800;
    line-height: .78;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.ck-hero h1 span {
    color: var(--ck-orange);
}

.ck-hero__lead {
    max-width: 660px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: clamp(.98rem, 1.5vw, 1.12rem);
    line-height: 1.8;
}

.ck-hero__actions {
    display: flex;
    margin-top: 34px;
    flex-wrap: wrap;
    gap: 12px;
}

.ck-hero__proof {
    display: flex;
    margin-top: 44px;
    flex-wrap: wrap;
    gap: 0;
}

.ck-hero__proof>div {
    min-width: 160px;
    padding: 0 28px;
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.ck-hero__proof>div:first-child {
    padding-left: 0;
    border-left: 0;
}

.ck-hero__proof strong,
.ck-hero__proof span {
    display: block;
}

.ck-hero__proof strong {
    margin-bottom: 4px;
    color: #fff;
    font-size: .8rem;
}

.ck-hero__proof span {
    color: rgba(255, 255, 255, .54);
    font-size: .72rem;
}

.ck-hero__feature {
    position: relative;
    overflow: hidden;
    padding: 36px 34px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
    backdrop-filter: blur(16px);
}

.ck-hero__feature::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(246, 160, 0, .13);
}

.ck-hero__feature-kicker {
    position: relative;
    display: block;
    margin-bottom: 25px;
    color: var(--ck-orange);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.ck-hero__feature>strong {
    position: relative;
    display: block;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: .92;
    text-transform: uppercase;
}

.ck-hero__feature>strong em {
    color: var(--ck-orange);
    font-style: normal;
}

.ck-hero__feature p {
    position: relative;
    margin: 22px 0;
    color: rgba(255, 255, 255, .64);
    font-size: .84rem;
    line-height: 1.7;
}

.ck-hero__feature a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
}

.ck-hero__feature a span {
    color: var(--ck-orange);
}

.ck-hero__ticker {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .10);
    background: rgba(7, 26, 45, .88);
    backdrop-filter: blur(12px);
}

.ck-hero__ticker>div {
    display: flex;
    width: max-content;
    padding: 18px 0;
    align-items: center;
    animation: ckTicker 34s linear infinite;
}

.ck-hero__ticker span,
.ck-hero__ticker i {
    flex: 0 0 auto;
}

.ck-hero__ticker span {
    padding: 0 18px;
    color: rgba(255, 255, 255, .74);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.ck-hero__ticker i {
    color: var(--ck-orange);
    font-style: normal;
}

@keyframes ckTicker {
    to {
        transform: translateX(-50%);
    }
}


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

.ck-intro {
    padding: 110px 0;
    background: #fff;
}

.ck-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
    gap: 90px;
    align-items: end;
}

.ck-intro h2,
.ck-section-heading h2,
.ck-feature h2,
.ck-trust__heading h2,
.ck-store h2,
.ck-price-cta h2,
.ck-faq h2 {
    margin: 12px 0 0;
    color: var(--ck-deep);
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3.2rem, 6vw, 5.7rem);
    font-weight: 800;
    line-height: .88;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.ck-intro h2 span,
.ck-section-heading h2 span,
.ck-feature h2 span,
.ck-trust__heading h2 span,
.ck-store h2 span,
.ck-price-cta h2 span,
.ck-faq h2 span {
    color: var(--ck-orange);
}

.ck-intro__copy p {
    margin: 0 0 18px;
    color: var(--ck-muted);
    line-height: 1.8;
}

.ck-intro__copy a {
    display: inline-flex;
    margin-top: 8px;
    align-items: center;
    gap: 10px;
    color: var(--ck-deep);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800;
}

.ck-intro__copy a span {
    color: var(--ck-orange);
}


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

.ck-section-heading {
    display: grid;
    margin-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .64fr);
    gap: 60px;
    align-items: end;
}

.ck-section-heading__side>p {
    margin: 0;
    color: var(--ck-muted);
    line-height: 1.75;
}

.ck-slider-controls {
    display: flex;
    margin-top: 24px;
    gap: 8px;
}

.ck-slider-controls button {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce3e8;
    border-radius: 50%;
    color: var(--ck-deep);
    background: #fff;
    cursor: pointer;
    transition: .2s ease;
}

.ck-slider-controls button:hover {
    color: #fff;
    border-color: var(--ck-deep);
    background: var(--ck-deep);
}


/* =========================================================
   SERVICES
========================================================= */

.ck-services {
    padding: 105px 0;
    background: var(--ck-soft);
}

.ck-service-slider {
    overflow: visible;
}

.ck-service-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ck-service-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(16, 43, 70, .05);
}

.ck-service-card__image {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    background:
        linear-gradient(135deg, #dfe4e8, #f5f6f7);
}

.ck-service-card__image::after,
.ck-image-frame::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    color: rgba(16, 43, 70, .38);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    white-space: nowrap;
}

.ck-service-card__image img,
.ck-image-frame img {
    /* position: relative; */
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ck-service-card__image.is-missing img,
.ck-image-frame.is-missing img {
    display: none;
}

.ck-service-card__number {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 18px;
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(7, 26, 45, .82);
    font-size: .69rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.ck-service-card__tag {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
    padding: 8px 12px;
    border-radius: 100px;
    color: var(--ck-dark);
    background: var(--ck-orange);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ck-service-card__content {
    padding: 26px 26px 28px;
}

.ck-service-card__eyebrow {
    margin: 0 0 9px;
    color: var(--ck-orange);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ck-service-card h3 {
    margin: 0;
    color: var(--ck-deep);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.ck-service-card__content>p:not(.ck-service-card__eyebrow) {
    min-height: 90px;
    margin: 16px 0 22px;
    color: var(--ck-muted);
    font-size: .86rem;
    line-height: 1.7;
}

.ck-service-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    cursor: pointer;

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

.ck-service-card:hover {
    transform: translateY(-5px);
}

.ck-service-card:focus-visible {
    outline: 3px solid rgba(246, 160, 0, .35);
    outline-offset: 4px;
}

.ck-service-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ck-service-card__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;

    margin-top: auto;
    padding-top: 20px;

    color: var(--navy, #07111f);

    font-size: .78rem;
    font-weight: 850;
}

.ck-service-card__link>span {
    display: inline-block;
    color: var(--orange, #f4911e);

    transition: transform .25s ease;
}

.ck-service-card:hover .ck-service-card__link>span {
    transform: translate(3px, -3px);
}

.ck-swipe-hint {
    display: none;
}


/* =========================================================
   ONE KEY
========================================================= */

.ck-one-key {
    padding: 28px 0;
    background: var(--ck-soft);
}

.ck-one-key__panel {
    display: grid;
    padding: 46px;
    grid-template-columns: 90px minmax(0, 1fr) minmax(280px, .72fr);
    gap: 35px;
    align-items: center;
    border-radius: 8px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 10%, rgba(246, 160, 0, .15), transparent 28%),
        var(--ck-deep);
}

.ck-one-key__number {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: var(--ck-orange);
    font-size: .76rem;
    font-weight: 800;
}

.ck-one-key h2 {
    margin: 10px 0 0;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(2.6rem, 4.5vw, 4.3rem);
    font-weight: 800;
    line-height: .88;
    text-transform: uppercase;
}

.ck-one-key h2 span {
    color: var(--ck-orange);
}

.ck-one-key__copy p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .63);
    line-height: 1.7;
}

.ck-one-key__copy a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
}

.ck-one-key__copy a span {
    color: var(--ck-orange);
}


/* =========================================================
   PROGRAMMING FEATURE
========================================================= */

.ck-feature {
    padding: 120px 0;
    background: #fff;
}

.ck-feature__grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    gap: 90px;
    align-items: center;
}

.ck-feature__visual {
    position: relative;
}

.ck-image-frame {
    position: relative;
    /* min-height: 590px; */
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #dfe4e8, #f5f6f7);
}

.ck-feature__floating {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: min(320px, 70%);
    padding: 24px 26px;
    border-radius: 6px;
    color: #fff;
    background: var(--ck-deep);
    box-shadow: 0 20px 55px rgba(16, 43, 70, .20);
}

.ck-feature__floating small,
.ck-feature__floating strong {
    display: block;
}

.ck-feature__floating small {
    margin-bottom: 6px;
    color: var(--ck-orange);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ck-feature__floating strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.7rem;
    text-transform: uppercase;
}

.ck-feature__lead {
    max-width: 610px;
    margin: 26px 0;
    color: var(--ck-muted);
    line-height: 1.8;
}

.ck-check-list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--ck-line);
}

.ck-check-list>div {
    display: grid;
    padding: 17px 0;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border-bottom: 1px solid var(--ck-line);
}

.ck-check-list span {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ck-deep);
    background: var(--ck-orange);
    font-size: .73rem;
    font-weight: 900;
}

.ck-check-list p {
    margin: 2px 0 0;
    color: var(--ck-muted);
    font-size: .86rem;
    line-height: 1.55;
}

.ck-check-list strong {
    color: var(--ck-deep);
}


/* =========================================================
   TYPES
========================================================= */

.ck-types {
    padding: 110px 0;
    background: var(--ck-soft);
}

.ck-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ck-type-card {
    min-height: 285px;
    padding: 26px;
    border: 1px solid #dfe5e9;
    border-radius: 7px;
    background: #fff;
}

.ck-type-card--featured {
    color: #fff;
    border-color: var(--ck-deep);
    background: var(--ck-deep);
}

.ck-type-card>span {
    display: block;
    margin-bottom: 55px;
    color: var(--ck-orange);
    font-size: .7rem;
    font-weight: 800;
}

.ck-type-card h3 {
    margin: 0 0 12px;
    color: var(--ck-deep);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.7rem;
    line-height: 1;
    text-transform: uppercase;
}

.ck-type-card--featured h3 {
    color: #fff;
}

.ck-type-card p {
    margin: 0 0 20px;
    color: var(--ck-muted);
    font-size: .82rem;
    line-height: 1.65;
}

.ck-type-card--featured p {
    color: rgba(255, 255, 255, .62);
}

.ck-type-card strong {
    display: block;
    margin-top: auto;
    color: var(--ck-orange);
    font-size: .8rem;
}

.ck-types__bottom {
    display: flex;
    margin-top: 30px;
    padding-top: 25px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid #dfe4e8;
}

.ck-types__bottom p {
    margin: 0;
    color: var(--ck-muted);
    font-size: .82rem;
}

.ck-types__bottom a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    color: var(--ck-deep);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
}

.ck-types__bottom a span {
    color: var(--ck-orange);
}


/* =========================================================
   MORE
========================================================= */

.ck-more {
    padding: 110px 0;
    background: #fff;
}

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

.ck-more-card {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    background: var(--ck-dark);
}

.ck-more-card__media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, #263c51, #0a1d2e),
        var(--card-image) center / cover no-repeat;
    background-blend-mode: overlay;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.ck-more-card:hover .ck-more-card__media {
    transform: scale(1.035);
}

.ck-more-card__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,
            rgba(7, 26, 45, .96) 0%,
            rgba(7, 26, 45, .48) 55%,
            rgba(7, 26, 45, .14) 100%);
}

.ck-more-card__content {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 38px;
}

.ck-more-card__content>span {
    display: block;
    margin-bottom: 13px;
    color: var(--ck-orange);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.ck-more-card h2 {
    margin: 0;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(4rem, 7vw, 6.5rem);
    font-weight: 800;
    line-height: .76;
    letter-spacing: -.03em;
}

.ck-more-card p {
    max-width: 430px;
    margin: 24px 0;
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
}

.ck-more-card strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: .78rem;
}

.ck-more-card strong i {
    color: var(--ck-orange);
    font-style: normal;
}


/* =========================================================
   TRUST
========================================================= */

.ck-trust {
    padding: 110px 0;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(246, 160, 0, .12), transparent 24%),
        var(--ck-dark);
}

.ck-trust__heading {
    display: grid;
    margin-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr);
    gap: 70px;
    align-items: end;
}

.ck-trust__heading h2 {
    color: #fff;
}

.ck-trust__heading>p {
    margin: 0;
    color: rgba(255, 255, 255, .58);
    line-height: 1.75;
}

.ck-trust-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 7px;
    background: rgba(255, 255, 255, .10);
}

.ck-trust-card {
    min-height: 250px;
    padding: 30px;
    background: var(--ck-dark);
}

.ck-trust-card>span {
    display: block;
    margin-bottom: 55px;
    color: var(--ck-orange);
    font-size: .7rem;
    font-weight: 800;
}

.ck-trust-card h3 {
    margin: 0 0 11px;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.7rem;
    text-transform: uppercase;
}

.ck-trust-card p {
    margin: 0;
    color: rgba(255, 255, 255, .53);
    font-size: .82rem;
    line-height: 1.65;
}


/* =========================================================
   STORE
========================================================= */

.ck-store {
    padding: 120px 0;
    background: #fff;
}

.ck-store__grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
    gap: 90px;
    align-items: center;
}

.ck-store__content>p:not(.ck-eyebrow) {
    max-width: 580px;
    margin: 25px 0;
    color: var(--ck-muted);
    line-height: 1.8;
}

.ck-store address {
    margin: 0 0 26px;
    color: var(--ck-deep);
    font-style: normal;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.65;
}

.ck-store__hours {
    display: flex;
    margin-bottom: 30px;
    gap: 45px;
}

.ck-store__hours span,
.ck-store__hours strong {
    display: block;
}

.ck-store__hours span {
    margin-bottom: 4px;
    color: #8a95a1;
    font-size: .68rem;
}

.ck-store__hours strong {
    color: var(--ck-deep);
    font-size: .84rem;
}

.ck-store__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.ck-store__phone {
    color: var(--ck-deep);
    text-decoration: none;
    font-weight: 800;
}

.ck-store__image {
    position: relative;
}

/* .ck-image-frame--store {
    min-height: 600px;
} */

.ck-store__badge {
    position: absolute;
    right: -0px;
    bottom: 0px;
    min-width: 125px;
    padding: 22px;
    color: var(--ck-dark);
    background: var(--ck-orange);
    box-shadow: 0 18px 45px rgba(16, 43, 70, .16);
}

.ck-store__badge span,
.ck-store__badge strong {
    display: block;
}

.ck-store__badge span {
    margin-bottom: 4px;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.ck-store__badge strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
}


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

.ck-price-cta {
    padding: 28px 0 110px;
    background: #fff;
}

.ck-price-cta__inner {
    display: flex;
    padding: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
    border-radius: 8px;
    background: var(--ck-soft);
}

.ck-price-cta__inner>div:first-child {
    max-width: 760px;
}

.ck-price-cta h2 {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
}

.ck-price-cta p:not(.ck-eyebrow) {
    max-width: 680px;
    margin: 22px 0 0;
    color: var(--ck-muted);
    line-height: 1.75;
}

.ck-price-cta__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
}


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

.ck-faq {
    padding: 110px 0;
    background: var(--ck-soft);
}

.ck-faq__grid {
    display: grid;
    grid-template-columns: minmax(300px, .6fr) minmax(0, 1fr);
    gap: 90px;
    align-items: start;
}

.ck-faq__intro>p:last-child {
    max-width: 390px;
    margin: 24px 0 0;
    color: var(--ck-muted);
    line-height: 1.7;
}

.ck-faq__items {
    border-top: 1px solid #d9e0e5;
}

.ck-faq details {
    border-bottom: 1px solid #d9e0e5;
}

.ck-faq summary {
    position: relative;
    padding: 24px 50px 24px 0;
    color: var(--ck-deep);
    list-style: none;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 800;
}

.ck-faq summary::-webkit-details-marker {
    display: none;
}

.ck-faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 5px;
    color: var(--ck-orange);
    font-size: 1.5rem;
    font-weight: 500;
    transform: translateY(-50%);
}

.ck-faq details[open] summary::after {
    content: "−";
}

.ck-faq details p {
    max-width: 700px;
    margin: -4px 0 24px;
    color: var(--ck-muted);
    font-size: .86rem;
    line-height: 1.75;
}


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

.ck-final {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    color: #fff;
    background: var(--ck-deep);
}

.ck-final::before {
    content: "";
    position: absolute;
    top: -240px;
    right: -120px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.ck-final::after {
    content: "";
    position: absolute;
    right: 120px;
    bottom: -320px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(246, 160, 0, .08);
}

.ck-final__inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.ck-final__number {
    position: absolute;
    top: -15px;
    left: min(68vw, 720px);
    color: rgba(255, 255, 255, .045);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 14rem;
    font-weight: 800;
    line-height: .8;
}

.ck-final h2 {
    margin: 13px 0 22px;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(5rem, 10vw, 9rem);
    font-weight: 800;
    line-height: .75;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.ck-final h2 span {
    color: var(--ck-orange);
}

.ck-final__inner>p:not(.ck-eyebrow) {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, .62);
    line-height: 1.8;
}

.ck-final__actions {
    display: flex;
    margin-top: 34px;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
}

.ck-final__phone {
    display: flex;
    flex-direction: column;
    color: #fff;
    text-decoration: none;
}

.ck-final__phone small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .48);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ck-final__phone strong {
    font-size: 1rem;
}


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

@media (max-width: 1000px) {

    .ck-hero__inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .ck-hero__feature {
        max-width: 540px;
    }

    .ck-intro__grid,
    .ck-feature__grid,
    .ck-store__grid {
        gap: 55px;
    }

    .ck-service-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ck-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ck-trust-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ck-one-key__panel {
        grid-template-columns: 70px 1fr;
    }

    .ck-one-key__copy {
        grid-column: 2;
    }

    .ck-price-cta__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .ck-price-cta__actions {
        flex-direction: row;
    }
}


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

@media (max-width: 760px) {

    .ck-shell {
        width: min(100% - 32px, 1180px);
    }

    .ck-hero {
        min-height: auto;
    }

    .ck-hero__media {
        background-position: 62% center;
    }

    .ck-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(7, 26, 45, .98) 0%,
                rgba(7, 26, 45, .87) 66%,
                rgba(7, 26, 45, .55) 100%);
    }

    .ck-hero__inner {
        min-height: auto;
        padding: 95px 0 115px;
    }

    .ck-hero h1 {
        font-size: clamp(4.25rem, 19vw, 6.4rem);
        line-height: .79;
    }

    .ck-hero__feature {
        display: none;
    }

    .ck-hero__proof {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .ck-hero__proof>div {
        min-width: 0;
        padding: 0 12px;
    }

    .ck-hero__proof strong {
        font-size: .68rem;
    }

    .ck-hero__proof span {
        font-size: .61rem;
    }

    .ck-intro,
    .ck-services,
    .ck-feature,
    .ck-types,
    .ck-more,
    .ck-trust,
    .ck-store,
    .ck-faq,
    .ck-final {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .ck-intro__grid,
    .ck-section-heading,
    .ck-feature__grid,
    .ck-trust__heading,
    .ck-store__grid,
    .ck-faq__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ck-intro h2,
    .ck-section-heading h2,
    .ck-feature h2,
    .ck-trust__heading h2,
    .ck-store h2,
    .ck-price-cta h2,
    .ck-faq h2 {
        font-size: clamp(3.1rem, 15vw, 4.7rem);
    }

    .ck-slider-controls {
        display: none;
    }


    /* SERVICE SWIPE */

    .ck-service-slider {
        margin-right: -16px;
        overflow: visible;
    }

    .ck-service-track {
        display: flex;
        margin-right: 0;
        padding-right: 16px;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ck-service-track::-webkit-scrollbar {
        display: none;
    }

    .ck-service-card {
        flex: 0 0 min(84vw, 330px);
        scroll-snap-align: start;
    }

    .ck-service-card__image {
        min-height: 225px;
    }

    .ck-service-card__content>p:not(.ck-service-card__eyebrow) {
        min-height: auto;
    }

    .ck-swipe-hint {
        display: flex;
        margin-top: 17px;
        align-items: center;
        justify-content: space-between;
        color: #87929e;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .ck-swipe-hint--light {
        color: rgba(255, 255, 255, .45);
    }


    /* ONE KEY */

    .ck-one-key {
        padding: 16px 0;
    }

    .ck-one-key__panel {
        padding: 30px 25px;
        grid-template-columns: 1fr;
        gap: 23px;
    }

    .ck-one-key__number {
        width: 50px;
        height: 50px;
    }

    .ck-one-key__copy {
        grid-column: auto;
    }


    /* FEATURE */

    .ck-image-frame,
    .ck-image-frame--store {
        min-height: 440px;
    }

    .ck-feature__visual {
        order: 2;
    }

    .ck-feature__content {
        order: 1;
    }

    .ck-feature__floating {
        right: 15px;
        bottom: 15px;
        width: calc(100% - 30px);
    }


    /* TYPES SWIPE */

    .ck-type-grid {
        display: flex;
        margin-right: -16px;
        padding-right: 16px;
        gap: 13px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ck-type-grid::-webkit-scrollbar {
        display: none;
    }

    .ck-type-card {
        flex: 0 0 min(78vw, 300px);
        scroll-snap-align: start;
    }

    .ck-types__bottom {
        align-items: flex-start;
        flex-direction: column;
    }


    /* MORE */

    .ck-more__grid {
        grid-template-columns: 1fr;
    }

    .ck-more-card {
        min-height: 500px;
    }

    .ck-more-card__content {
        padding: 28px 25px;
    }


    /* TRUST SWIPE */

    .ck-trust-slider {
        margin-right: -16px;
    }

    .ck-trust-track {
        display: flex;
        padding-right: 16px;
        gap: 12px;
        overflow-x: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ck-trust-track::-webkit-scrollbar {
        display: none;
    }

    .ck-trust-card {
        flex: 0 0 min(80vw, 310px);
        min-height: 260px;
        border: 1px solid rgba(255, 255, 255, .11);
        border-radius: 7px;
        scroll-snap-align: start;
    }


    /* STORE */

    .ck-store__image {
        margin-top: 10px;
    }

    .ck-store__badge {
        right: 15px;
        bottom: 15px;
    }


    /* PRICE */

    .ck-price-cta {
        padding: 16px 0 78px;
    }

    .ck-price-cta__inner {
        padding: 30px 25px;
    }

    .ck-price-cta__actions {
        width: 100%;
        flex-direction: column;
    }

    .ck-price-cta__actions .ck-btn {
        width: 100%;
    }


    /* FINAL */

    .ck-final__number {
        display: none;
    }

    .ck-final h2 {
        font-size: clamp(5rem, 23vw, 7rem);
    }

}


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

@media (max-width: 480px) {

    .ck-shell {
        width: calc(100% - 28px);
    }

    .ck-hero__inner {
        padding-top: 82px;
    }

    .ck-hero__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .ck-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ck-hero__actions .ck-btn {
        width: 100%;
    }

    .ck-hero__proof {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .ck-hero__proof>div {
        padding: 0;
        border-left: 0;
    }

    .ck-service-card {
        flex-basis: 87vw;
    }

    .ck-more-card {
        min-height: 460px;
    }

    .ck-store__hours {
        gap: 25px;
    }

    .ck-store__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ck-store__actions .ck-btn {
        width: 100%;
    }

    .ck-final__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ck-final__actions .ck-btn {
        width: 100%;
    }
}

/* Shared Mr Keys service landing page styles */
.service-detail-page {
    --sd-deep: var(--navy-deep, #102b46);
    --sd-dark: var(--navy-dark, #071a2d);
    --sd-orange: var(--orange, #f6a000);
    --sd-muted: #687585;
    --sd-soft: #f3f5f7;
    --sd-line: #dfe5eb;
    overflow: hidden;
    color: #112132;
    background: #fff
}

.service-detail-page *,
.service-detail-page *:before,
.service-detail-page *:after {
    box-sizing: border-box
}

.sd-shell {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto
}

.sd-eyebrow {
    margin: 0;
    color: var(--sd-orange);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase
}

.sd-btn {
    display: inline-flex;
    min-height: 54px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 800;
    transition: .2s ease
}

.sd-btn:hover {
    transform: translateY(-2px)
}

.sd-btn--primary {
    color: var(--sd-dark);
    background: var(--sd-orange)
}

.sd-btn--glass {
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px)
}

.sd-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sd-deep);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 800
}

.sd-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2, .75, .25, 1)
}

.sd-reveal.is-visible {
    opacity: 1;
    transform: none
}

.sd-hero {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    color: #fff;
    background: var(--sd-dark)
}

.sd-hero__media {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 26, 45, .35), rgba(7, 26, 45, .05)), var(--sd-hero-image) center/cover no-repeat
}

.sd-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 26, 45, .97) 0%, rgba(7, 26, 45, .82) 44%, rgba(7, 26, 45, .42) 78%, rgba(7, 26, 45, .58) 100%)
}

.sd-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 720px;
    padding: 105px 0 90px;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .5fr);
    gap: 75px;
    align-items: center
}

.sd-hero__content {
    max-width: 800px
}

.sd-hero__meta {
    display: flex;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 14px 22px;
    color: rgba(255, 255, 255, .64);
    font-size: .74rem;
    font-weight: 700
}

.sd-hero__meta span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff
}

.sd-hero__meta i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sd-orange);
    box-shadow: 0 0 0 6px rgba(246, 160, 0, .12)
}

.sd-hero h1 {
    margin: 14px 0 25px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(4.8rem, 8.5vw, 8rem);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.035em;
    text-transform: uppercase
}

.sd-hero h1 span {
    color: var(--sd-orange)
}

.sd-hero__lead {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 1.02rem;
    line-height: 1.8
}

.sd-hero__actions {
    display: flex;
    margin-top: 33px;
    flex-wrap: wrap;
    gap: 12px
}

.sd-hero__proof {
    display: flex;
    margin-top: 42px;
    flex-wrap: wrap
}

.sd-hero__proof>div {
    min-width: 155px;
    padding: 0 24px;
    border-left: 1px solid rgba(255, 255, 255, .14)
}

.sd-hero__proof>div:first-child {
    padding-left: 0;
    border-left: 0
}

.sd-hero__proof strong,
.sd-hero__proof span {
    display: block
}

.sd-hero__proof strong {
    font-size: .78rem
}

.sd-hero__proof span {
    margin-top: 4px;
    color: rgba(255, 255, 255, .5);
    font-size: .69rem
}

.sd-hero__card {
    position: relative;
    padding: 34px 32px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    backdrop-filter: blur(16px)
}

.sd-hero__card-label {
    display: block;
    margin-bottom: 26px;
    color: var(--sd-orange);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.sd-hero__card small {
    display: block;
    color: rgba(255, 255, 255, .52);
    font-size: .66rem;
    text-transform: uppercase
}

.sd-hero__card-price,
.sd-hero__card-heading {
    display: block;
    margin: 7px 0 15px;
    color: #fff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 3.7rem;
    font-weight: 800;
    line-height: .9;
    text-transform: uppercase
}

.sd-hero__card-heading {
    font-size: 3rem
}

.sd-hero__card p {
    color: rgba(255, 255, 255, .6);
    font-size: .82rem;
    line-height: 1.65
}

.sd-hero__card a {
    display: inline-flex;
    margin-top: 13px;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 800
}

.sd-hero__card a span {
    color: var(--sd-orange)
}

.sd-intro,
.sd-feature,
.sd-process,
.sd-local,
.sd-related,
.sd-faq,
.sd-final {
    padding: 110px 0
}

.sd-intro__grid,
.sd-feature__grid,
.sd-local__grid,
.sd-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .75fr);
    gap: 90px;
    align-items: center
}

.sd-intro h2,
.sd-feature h2,
.sd-section-heading h2,
.sd-local h2,
.sd-faq h2 {
    margin: 12px 0 0;
    color: var(--sd-deep);
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(3.2rem, 6vw, 5.6rem);
    font-weight: 800;
    line-height: .88;
    letter-spacing: -.03em;
    text-transform: uppercase
}

.sd-intro h2 span,
.sd-feature h2 span,
.sd-section-heading h2 span,
.sd-local h2 span,
.sd-faq h2 span {
    color: var(--sd-orange)
}

.sd-intro__copy p,
.sd-local__content>p:not(.sd-eyebrow),
.sd-faq__intro>p:last-child {
    color: var(--sd-muted);
    line-height: 1.8
}

.sd-intro__copy a {
    display: inline-flex;
    margin-top: 8px;
    gap: 10px;
    color: var(--sd-deep);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 800
}

.sd-feature,
.sd-related {
    background: var(--sd-soft)
}

.sd-feature__visual,
.sd-local__visual {
    position: relative
}

.sd-image-frame {
    position: relative;
    min-height: 590px;
    height: 700px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #dfe4e8, #f5f6f7)
}

.sd-image-frame--local {
    min-height: unset !important;
}

.sd-image-frame:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(16, 43, 70, .38);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em
}

.sd-image-frame img {
    /* position: relative; */
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sd-feature__badge,
.sd-local__badge {
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 22px 25px;
    color: #fff;
    background: var(--sd-deep);
    box-shadow: 0 20px 50px rgba(16, 43, 70, .18)
}

.sd-feature__badge small,
.sd-feature__badge strong,
.sd-local__badge span,
.sd-local__badge strong {
    display: block
}

.sd-feature__badge small,
.sd-local__badge span {
    color: var(--sd-orange);
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase
}

.sd-feature__badge strong,
.sd-local__badge strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.6rem;
    text-transform: uppercase
}

.sd-benefit-list {
    margin-top: 28px;
    border-top: 1px solid #dbe1e6
}

.sd-benefit-list article {
    display: grid;
    padding: 20px 0;
    grid-template-columns: 45px 1fr;
    gap: 16px;
    border-bottom: 1px solid #dbe1e6
}

.sd-benefit-list article>span {
    color: var(--sd-orange);
    font-size: .72rem;
    font-weight: 800
}

.sd-benefit-list h3 {
    margin: 0 0 6px;
    color: var(--sd-deep);
    font-size: .93rem
}

.sd-benefit-list p {
    margin: 0;
    color: var(--sd-muted);
    font-size: .84rem;
    line-height: 1.6
}

.sd-process,
.sd-final {
    color: #fff;
    background: var(--sd-dark)
}

.sd-section-heading {
    display: grid;
    margin-bottom: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr);
    gap: 70px;
    align-items: end
}

.sd-process .sd-section-heading h2 {
    color: #fff
}

.sd-section-heading>p {
    margin: 0;
    color: var(--sd-muted);
    line-height: 1.75
}

.sd-process .sd-section-heading>p {
    color: rgba(255, 255, 255, .56)
}

.sd-step-track,
.sd-related-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

.sd-step-card,
.sd-related-card {
    min-height: 260px;
    padding: 30px;
    border-radius: 7px
}

.sd-step-card {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03)
}

.sd-step-card>span,
.sd-related-card>span {
    display: block;
    margin-bottom: 55px;
    color: var(--sd-orange);
    font-size: .7rem;
    font-weight: 800
}

.sd-step-card h3,
.sd-related-card h3 {
    margin: 0 0 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase
}

.sd-step-card h3 {
    color: #fff
}

.sd-step-card p {
    margin: 0;
    color: rgba(255, 255, 255, .54);
    font-size: .83rem;
    line-height: 1.65
}

.sd-local address {
    margin: 0 0 28px;
    color: var(--sd-deep);
    font-style: normal;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.65
}

.sd-local__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px
}

.sd-local__badge {
    color: var(--sd-dark);
    background: var(--sd-orange)
}

.sd-local__badge span {
    color: var(--sd-dark)
}

.sd-related-card {
    border: 1px solid #dee4e9;
    color: var(--sd-deep);
    text-decoration: none;
    background: #fff
}

.sd-related-card p {
    color: var(--sd-muted);
    font-size: .82rem;
    line-height: 1.6
}

.sd-related-card strong {
    font-size: .76rem
}

.sd-related-card i {
    color: var(--sd-orange);
    font-style: normal
}

.sd-faq__items {
    border-top: 1px solid #d9e0e5
}

.sd-faq details {
    border-bottom: 1px solid #d9e0e5
}

.sd-faq summary {
    position: relative;
    padding: 24px 50px 24px 0;
    color: var(--sd-deep);
    list-style: none;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 800
}

.sd-faq summary:after {
    content: "+";
    position: absolute;
    right: 5px;
    color: var(--sd-orange);
    font-size: 1.5rem
}

.sd-faq details[open] summary:after {
    content: "–"
}

.sd-faq details p {
    margin: -4px 0 24px;
    color: var(--sd-muted);
    font-size: .85rem;
    line-height: 1.75
}

.sd-final {
    background: var(--sd-deep)
}

.sd-final__inner {
    max-width: 850px
}

.sd-final h2 {
    margin: 13px 0 22px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(5rem, 10vw, 8.7rem);
    font-weight: 800;
    line-height: .76;
    text-transform: uppercase
}

.sd-final h2 span {
    color: var(--sd-orange)
}

.sd-final__inner>p:not(.sd-eyebrow) {
    max-width: 600px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.8
}

.sd-final__actions {
    display: flex;
    margin-top: 34px;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px
}

.sd-final__phone {
    display: flex;
    flex-direction: column;
    color: #fff;
    text-decoration: none
}

.sd-final__phone small {
    color: rgba(255, 255, 255, .48);
    font-size: .65rem
}

.sd-swipe-hint {
    display: none
}

@media(max-width:760px) {
    .sd-shell {
        width: min(100% - 32px, 1180px)
    }

    .sd-hero {
        min-height: auto
    }

    .sd-hero__inner {
        min-height: auto;
        padding: 90px 0 80px;
        grid-template-columns: 1fr
    }

    .sd-hero__card {
        display: none
    }

    .sd-hero h1 {
        font-size: clamp(4.1rem, 19vw, 6.2rem)
    }

    .sd-hero__proof {
        display: grid;
        grid-template-columns: repeat(3, 1fr)
    }

    .sd-hero__proof>div {
        min-width: 0;
        padding: 0 10px
    }

    .sd-intro__grid,
    .sd-feature__grid,
    .sd-local__grid,
    .sd-faq__grid,
    .sd-section-heading {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .sd-intro h2,
    .sd-feature h2,
    .sd-section-heading h2,
    .sd-local h2,
    .sd-faq h2 {
        font-size: clamp(3.1rem, 15vw, 4.7rem)
    }

    .sd-feature__visual {
        order: 2
    }

    .sd-feature__content {
        order: 1
    }

    .sd-image-frame {
        min-height: 430px
    }

    .sd-feature__badge,
    .sd-local__badge {
        right: 15px;
        bottom: 15px
    }

    .sd-step-track,
    .sd-related-track {
        display: flex;
        margin-right: -16px;
        padding-right: 16px;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none
    }

    .sd-step-card,
    .sd-related-card {
        flex: 0 0 min(80vw, 310px);
        scroll-snap-align: start
    }

    .sd-swipe-hint {
        display: flex;
        margin-top: 16px;
        justify-content: space-between;
        color: #8994a0;
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase
    }

    .sd-process .sd-swipe-hint {
        color: rgba(255, 255, 255, .42)
    }

    .sd-final h2 {
        font-size: clamp(4.7rem, 22vw, 6.7rem)
    }
}

@media(max-width:480px) {
    .sd-shell {
        width: calc(100% - 28px)
    }

    .sd-hero__actions,
    .sd-local__actions,
    .sd-final__actions {
        flex-direction: column;
        align-items: stretch
    }

    .sd-hero__actions .sd-btn,
    .sd-local__actions .sd-btn,
    .sd-final__actions .sd-btn {
        width: 100%
    }

    .sd-hero__proof {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .sd-hero__proof>div {
        padding: 0;
        border-left: 0
    }
}

/* =========================================================
   MR KEYS LTD - GALLERY
   THREE IMAGE TILES PER ROW
========================================================= */

.gallery-page {
    --gallery-deep: var(--navy-deep, #102b46);
    --gallery-dark: var(--navy-dark, #071a2d);
    --gallery-orange: var(--orange, #f6a000);
    --gallery-muted: #687585;
    --gallery-soft: #f3f5f7;

    overflow: hidden;

    color: #112132;

    background: #fff;
}


.gallery-page *,
.gallery-page *::before,
.gallery-page *::after {
    box-sizing: border-box;
}


.gallery-shell {
    width: min(1240px,
            calc(100% - 48px));

    margin-inline: auto;
}


.gallery-eyebrow {
    margin: 0;

    color: var(--gallery-orange);

    font-size: .71rem;
    font-weight: 800;

    letter-spacing: .17em;

    text-transform: uppercase;
}



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

.gallery-btn {
    display: inline-flex;

    min-height: 54px;

    padding: 0 22px;

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

    gap: 13px;

    border:
        1px solid transparent;

    border-radius: 4px;

    text-decoration: none;

    font-size: .81rem;
    font-weight: 800;

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


.gallery-btn:hover {
    transform:
        translateY(-3px);
}


.gallery-btn--primary {
    color: var(--gallery-dark);

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


.gallery-btn--glass {
    color: #fff;

    border-color:
        rgba(255, 255, 255, .27);

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

    backdrop-filter:
        blur(12px);
}


.gallery-text-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--gallery-deep);

    text-decoration: none;

    font-size: .79rem;
    font-weight: 800;
}


.gallery-text-link span {
    color:
        var(--gallery-orange);
}



/* =========================================================
   REVEALS
========================================================= */

.gallery-reveal {
    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2, .75, .25, 1);
}


.gallery-reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

    .gallery-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

}



/* =========================================================
   HERO
========================================================= */

.gallery-hero {
    position: relative;

    min-height: 760px;

    overflow: hidden;

    color: #fff;

    background:
        var(--gallery-dark);
}


.gallery-hero__media {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(7, 26, 45, .12),
            rgba(7, 26, 45, .02)),
        var(--gallery-hero-image) center / cover no-repeat;
}


.gallery-hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(7, 26, 45, .98) 0%,
            rgba(7, 26, 45, .90) 35%,
            rgba(7, 26, 45, .43) 68%,
            rgba(7, 26, 45, .15) 100%),
        linear-gradient(0deg,
            rgba(7, 26, 45, .68),
            transparent 40%);
}


.gallery-hero__inner {
    position: relative;

    z-index: 2;

    display: grid;

    min-height: 700px;

    padding:
        110px 0 105px;

    grid-template-columns:
        minmax(0, 1.1fr) minmax(250px, .4fr);

    gap: 80px;

    align-items: center;
}


.gallery-hero__content {
    max-width: 780px;
}


.gallery-hero__meta {
    display: flex;

    margin-bottom: 27px;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px 22px;

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

    font-size: .72rem;

    font-weight: 700;
}


.gallery-hero__status {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #fff;
}


.gallery-hero__status i {
    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:
        var(--gallery-orange);

    box-shadow:
        0 0 0 6px rgba(246, 160, 0, .12);
}


.gallery-hero h1 {
    margin: 14px 0 25px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(5rem,
            9vw,
            8.8rem);

    font-weight: 800;

    line-height: .76;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.gallery-hero h1 span {
    color:
        var(--gallery-orange);
}


.gallery-hero__lead {
    max-width: 620px;

    margin: 0;

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

    font-size: 1rem;

    line-height: 1.8;
}


.gallery-hero__actions {
    display: flex;

    margin-top: 34px;

    flex-wrap: wrap;

    gap: 12px;
}


.gallery-hero__counter {
    position: relative;

    padding: 35px 12px;

    overflow: hidden;

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

    border-radius: 7px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, .13),
            rgba(255, 255, 255, .04));

    backdrop-filter:
        blur(15px);
}


.gallery-hero__counter::after {
    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    top: -85px;

    right: -80px;

    border-radius: 50%;

    background:
        rgba(246, 160, 0, .14);
}


.gallery-hero__counter>span {
    position: relative;

    z-index: 1;

    display: block;

    color:
        var(--gallery-orange);

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .13em;
}


.gallery-hero__counter>strong {
    position: relative;

    z-index: 1;

    display: block;

    margin-top: 12px;

    color: #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 6rem;

    font-weight: 800;

    line-height: .8;
}


.gallery-hero__counter small {
    color:
        var(--gallery-orange);

    font-size: .4em;
}


.gallery-hero__counter p {
    position: relative;

    z-index: 1;

    margin: 20px 0 0;

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

    font-size: .76rem;

    line-height: 1.6;
}


.gallery-hero__strip {
    position: absolute;

    z-index: 3;

    right: 0;

    bottom: 0;

    left: 0;

    overflow: hidden;

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

    background:
        rgba(7, 26, 45, .9);

    backdrop-filter:
        blur(12px);
}


.gallery-hero__strip>div {
    display: flex;

    width: max-content;

    padding: 18px 0;

    align-items: center;

    animation:
        galleryTicker 34s linear infinite;
}


.gallery-hero__strip span {
    padding: 0 18px;

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

    font-size: .66rem;

    font-weight: 800;

    letter-spacing: .13em;
}


.gallery-hero__strip i {
    color:
        var(--gallery-orange);

    font-style: normal;
}


@keyframes galleryTicker {

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

}



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

.gallery-intro {
    padding:
        110px 0;
}


.gallery-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(340px, .7fr);

    gap: 90px;

    align-items: end;
}


.gallery-intro h2,
.gallery-work__heading h2,
.gallery-break h2,
.gallery-services__heading h2 {
    margin: 12px 0 0;

    color:
        var(--gallery-deep);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(3.3rem,
            6vw,
            5.7rem);

    font-weight: 800;

    line-height: .87;

    letter-spacing: -.03em;

    text-transform: uppercase;
}


.gallery-intro h2 span,
.gallery-work__heading h2 span,
.gallery-break h2 span,
.gallery-services__heading h2 span {
    color:
        var(--gallery-orange);
}


.gallery-intro__copy>p {
    margin: 0;

    color:
        var(--gallery-muted);

    line-height: 1.8;
}


.gallery-intro__stats {
    display: grid;

    margin-top: 30px;

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

    gap: 1px;

    overflow: hidden;

    border-radius: 6px;

    background: #e2e7eb;
}


.gallery-intro__stats div {
    padding: 17px;

    background: #fff;
}


.gallery-intro__stats strong,
.gallery-intro__stats span {
    display: block;
}


.gallery-intro__stats strong {
    color:
        var(--gallery-deep);

    font-size: .76rem;
}


.gallery-intro__stats span {
    margin-top: 4px;

    color: #89949f;

    font-size: .63rem;
}



/* =========================================================
   WORK
========================================================= */

.gallery-work {
    padding:
        105px 0 115px;

    background:
        var(--gallery-soft);
}


.gallery-work__heading {
    display: grid;

    margin-bottom: 38px;

    grid-template-columns:
        minmax(0, 1fr) minmax(300px, .56fr);

    gap: 70px;

    align-items: end;
}


.gallery-work__heading>p {
    margin: 0;

    color:
        var(--gallery-muted);

    line-height: 1.75;
}



/* =========================================================
   FILTERS
========================================================= */

.gallery-filters {
    display: flex;

    margin-bottom: 30px;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 2px;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
        touch;
}


.gallery-filters::-webkit-scrollbar {
    display: none;
}


.gallery-filters button {
    flex: 0 0 auto;

    min-height: 42px;

    padding: 0 16px;

    border:
        1px solid #d8dfe5;

    border-radius: 100px;

    color: #6f7b87;

    background: #fff;

    cursor: pointer;

    font: inherit;

    font-size: .68rem;

    font-weight: 800;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.gallery-filters button:hover {
    transform:
        translateY(-2px);
}


.gallery-filters button.is-active {
    color: #fff;

    border-color:
        var(--gallery-deep);

    background:
        var(--gallery-deep);
}



/* =========================================================
   THREE PER ROW IMAGE GRID
========================================================= */

.gallery-grid {
    display: grid;

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

    gap: 18px;
}


.gallery-tile {
    position: relative;

    display: block;

    aspect-ratio: 4 / 3;

    width: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(135deg,
            #dfe4e8,
            #f5f6f7);

    cursor: zoom-in;

    box-shadow:
        0 12px 34px rgba(16, 43, 70, .06);

    transition:
        transform .28s cubic-bezier(.2, .7, .2, 1),
        box-shadow .28s ease;
}


.gallery-tile[hidden] {
    display: none !important;
}


.gallery-tile:hover {
    z-index: 3;

    transform:
        translateY(-7px) scale(1.012);

    box-shadow:
        0 25px 55px rgba(16, 43, 70, .16);
}


.gallery-tile__image {
    position: absolute;

    inset: 0;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #dfe4e8,
            #f5f6f7);
}


.gallery-tile__image::after {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 0;

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

    color:
        rgba(16, 43, 70, .38);

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .15em;

    white-space: nowrap;
}


.gallery-tile__image img {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2, .7, .2, 1);
}


.gallery-tile:hover .gallery-tile__image img {
    transform:
        scale(1.065);
}


.gallery-tile__shade {
    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(0deg,
            rgba(7, 26, 45, .88) 0%,
            rgba(7, 26, 45, .10) 48%,
            rgba(7, 26, 45, .08) 100%);

    opacity: .48;

    transition:
        opacity .3s ease;
}


.gallery-tile:hover .gallery-tile__shade {
    opacity: .95;
}


.gallery-tile__number {
    position: absolute;

    z-index: 4;

    top: 16px;

    left: 16px;

    display: flex;

    width: 38px;

    height: 38px;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #fff;

    background:
        rgba(7, 26, 45, .72);

    font-size: .64rem;

    font-weight: 800;

    backdrop-filter:
        blur(8px);
}


.gallery-tile__info {
    position: absolute;

    z-index: 4;

    right: 22px;

    bottom: 22px;

    left: 22px;

    text-align: left;

    transform:
        translateY(9px);

    opacity: 0;

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


.gallery-tile:hover .gallery-tile__info {
    transform:
        translateY(0);

    opacity: 1;
}


.gallery-tile__info span,
.gallery-tile__info strong {
    display: block;
}


.gallery-tile__info span {
    margin-bottom: 6px;

    color:
        var(--gallery-orange);

    font-size: .62rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.gallery-tile__info strong {
    color: #fff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 1.8rem;

    line-height: 1;

    text-transform: uppercase;
}


.gallery-tile__view {
    position: absolute;

    z-index: 5;

    top: 16px;

    right: 16px;

    display: inline-flex;

    padding:
        9px 12px;

    align-items: center;

    gap: 7px;

    border-radius: 100px;

    color:
        var(--gallery-dark);

    background:
        var(--gallery-orange);

    font-size: .61rem;

    font-weight: 800;

    opacity: 0;

    transform:
        translateY(-7px);

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


.gallery-tile:hover .gallery-tile__view {
    opacity: 1;

    transform:
        translateY(0);
}


.gallery-tile__view i {
    font-style: normal;
}


.gallery-empty {
    padding: 65px 25px;

    text-align: center;

    border:
        1px dashed #ccd5dd;

    border-radius: 8px;

    background: #fff;
}


.gallery-empty span {
    display: block;

    color:
        var(--gallery-orange);

    font-size: .64rem;

    font-weight: 800;
}


.gallery-empty strong {
    display: block;

    margin-top: 8px;

    color:
        var(--gallery-deep);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 2rem;

    text-transform: uppercase;
}



/* =========================================================
   DARK BREAK
========================================================= */

.gallery-break {
    padding:
        28px 0 110px;

    background:
        var(--gallery-soft);
}


.gallery-break__inner {
    display: grid;

    padding: 52px;

    grid-template-columns:
        minmax(0, 1fr) minmax(290px, .55fr);

    gap: 70px;

    align-items: end;

    border-radius: 8px;

    color: #fff;

    background:
        radial-gradient(circle at 88% 10%,
            rgba(246, 160, 0, .14),
            transparent 25%),
        var(--gallery-deep);
}


.gallery-break h2 {
    color: #fff;
}


.gallery-break__copy p {
    margin: 0 0 20px;

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

    line-height: 1.75;
}


.gallery-break__copy a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #fff;

    text-decoration: none;

    font-size: .76rem;

    font-weight: 800;
}


.gallery-break__copy a span {
    color:
        var(--gallery-orange);
}



/* =========================================================
   SERVICES
========================================================= */

.gallery-services {
    padding:
        110px 0;

    background: #fff;
}


.gallery-services__heading {
    display: flex;

    margin-bottom: 44px;

    align-items: end;

    justify-content:
        space-between;

    gap: 45px;
}


.gallery-service-track {
    display: grid;

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

    gap: 14px;
}


.gallery-service-card {
    min-height: 245px;

    padding: 27px;

    border:
        1px solid #dde4e9;

    border-radius: 7px;

    color:
        var(--gallery-deep);

    background: #fff;

    text-decoration: none;

    transition:
        transform .22s ease,
        color .22s ease,
        background .22s ease;
}


.gallery-service-card:hover {
    transform:
        translateY(-5px);

    color: #fff;

    background:
        var(--gallery-deep);
}


.gallery-service-card>span {
    display: block;

    margin-bottom: 50px;

    color:
        var(--gallery-orange);

    font-size: .67rem;

    font-weight: 800;
}


.gallery-service-card h3 {
    margin: 0 0 10px;

    color: inherit;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 1.75rem;

    line-height: 1;

    text-transform: uppercase;
}


.gallery-service-card p {
    margin: 0 0 19px;

    color:
        var(--gallery-muted);

    font-size: .79rem;

    line-height: 1.6;
}


.gallery-service-card:hover p {
    color:
        rgba(255, 255, 255, .56);
}


.gallery-service-card strong {
    display: inline-flex;

    gap: 8px;

    font-size: .72rem;
}


.gallery-service-card i {
    color:
        var(--gallery-orange);

    font-style: normal;
}


.gallery-swipe-hint {
    display: none;
}



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

.gallery-final {
    padding:
        120px 0;

    color: #fff;

    background:
        radial-gradient(circle at 87% 12%,
            rgba(246, 160, 0, .12),
            transparent 26%),
        var(--gallery-deep);
}


.gallery-final__inner {
    max-width: 850px;
}


.gallery-final h2 {
    margin: 13px 0 22px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(5rem,
            10vw,
            8.8rem);

    font-weight: 800;

    line-height: .76;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.gallery-final h2 span {
    color:
        var(--gallery-orange);
}


.gallery-final__inner>p:not(.gallery-eyebrow) {
    max-width: 600px;

    margin: 0;

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

    line-height: 1.8;
}


.gallery-final__actions {
    display: flex;

    margin-top: 34px;

    flex-wrap: wrap;

    align-items: center;

    gap: 24px;
}


.gallery-final__phone {
    display: flex;

    flex-direction: column;

    color: #fff;

    text-decoration: none;
}


.gallery-final__phone small {
    color:
        rgba(255, 255, 255, .45);

    font-size: .63rem;

    text-transform: uppercase;
}



/* =========================================================
   LIGHTBOX
========================================================= */

html.gallery-lightbox-open,
body.gallery-lightbox-open {
    overflow: hidden;
}


.gallery-lightbox {
    position: fixed;

    z-index: 99999;

    inset: 0;

    display: flex;

    padding: 28px;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.gallery-lightbox.is-open {
    visibility: visible;

    opacity: 1;
}


.gallery-lightbox__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(3, 11, 19, .93);

    backdrop-filter:
        blur(9px);
}


.gallery-lightbox__dialog {
    position: relative;

    z-index: 2;

    display: grid;

    width:
        min(1180px, 100%);

    max-height:
        calc(100vh - 56px);

    grid-template-rows:
        auto minmax(0, 1fr) auto;

    overflow: hidden;

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

    border-radius: 8px;

    color: #fff;

    background:
        var(--gallery-dark);

    transform:
        translateY(18px) scale(.985);

    transition:
        transform .3s cubic-bezier(.2, .75, .25, 1);
}


.gallery-lightbox.is-open .gallery-lightbox__dialog {
    transform: none;
}


.gallery-lightbox__top {
    display: flex;

    min-height: 74px;

    padding:
        14px 18px 14px 24px;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

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


.gallery-lightbox__top small,
.gallery-lightbox__top strong {
    display: block;
}


.gallery-lightbox__top small {
    margin-bottom: 4px;

    color:
        var(--gallery-orange);

    font-size: .6rem;

    font-weight: 800;

    text-transform: uppercase;
}


.gallery-lightbox__top strong {
    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 1.4rem;

    text-transform: uppercase;
}


.gallery-lightbox__close {
    display: flex;

    width: 44px;

    height: 44px;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #fff;

    background:
        transparent;

    cursor: pointer;

    font-size: 1.5rem;
}


.gallery-lightbox__stage {
    position: relative;

    display: grid;

    min-height: 0;

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

    align-items: center;

    background: #02090f;
}


.gallery-lightbox__image-wrap {
    height:
        min(68vh, 730px);

    overflow: hidden;
}


.gallery-lightbox__image-wrap img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;
}


.gallery-lightbox__nav {
    display: flex;

    width: 44px;

    height: 44px;

    margin: auto;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #fff;

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

    cursor: pointer;
}


.gallery-lightbox__bottom {
    display: grid;

    min-height: 78px;

    padding:
        17px 24px;

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

    gap: 28px;

    align-items: center;

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


.gallery-lightbox__bottom p {
    margin: 0;

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

    font-size: .76rem;

    line-height: 1.55;
}


.gallery-lightbox__bottom a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #fff;

    text-decoration: none;

    font-size: .7rem;

    font-weight: 800;
}


.gallery-lightbox__bottom a span {
    color:
        var(--gallery-orange);
}


.gallery-lightbox__count {
    color:
        rgba(255, 255, 255, .42);

    font-size: .66rem;
}



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

@media (max-width: 960px) {

    .gallery-hero__inner {
        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .gallery-hero__counter {
        max-width: 420px;
    }


    .gallery-grid {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }


    .gallery-service-track {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }

}



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

@media (max-width: 700px) {

    .gallery-shell {
        width:
            min(100% - 32px,
                1240px);
    }


    .gallery-hero {
        min-height: auto;
    }


    .gallery-hero__media {
        background-position:
            65% center;
    }


    .gallery-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(7, 26, 45, .99) 0%,
                rgba(7, 26, 45, .89) 68%,
                rgba(7, 26, 45, .55) 100%);
    }


    .gallery-hero__inner {
        min-height: auto;

        padding:
            88px 0 108px;
    }


    .gallery-hero h1 {
        font-size:
            clamp(4.7rem,
                22vw,
                7rem);
    }


    .gallery-hero__counter {
        display: none;
    }


    .gallery-intro,
    .gallery-work,
    .gallery-services,
    .gallery-final {
        padding-top: 76px;

        padding-bottom: 76px;
    }


    .gallery-intro__grid,
    .gallery-work__heading {
        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .gallery-intro h2,
    .gallery-work__heading h2,
    .gallery-break h2,
    .gallery-services__heading h2 {
        font-size:
            clamp(3.1rem,
                15vw,
                4.7rem);
    }


    .gallery-intro__stats {
        grid-template-columns:
            1fr;
    }


    .gallery-filters {
        margin-right: -16px;

        padding-right: 16px;
    }


    .gallery-grid {
        grid-template-columns:
            1fr;

        gap: 13px;
    }


    .gallery-tile {
        aspect-ratio:
            4 / 3;
    }


    .gallery-tile:hover {
        transform: none;
    }


    .gallery-tile__shade {
        opacity: .62;
    }


    .gallery-tile__info {
        transform: none;

        opacity: 1;
    }


    .gallery-tile__view {
        opacity: 1;

        transform: none;
    }


    .gallery-break {
        padding:
            15px 0 76px;
    }


    .gallery-break__inner {
        grid-template-columns:
            1fr;

        padding:
            34px 27px;

        gap: 24px;
    }


    .gallery-services__heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .gallery-service-track {
        display: flex;

        margin-right: -16px;

        padding-right: 16px;

        gap: 12px;

        overflow-x: auto;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling:
            touch;
    }


    .gallery-service-track::-webkit-scrollbar {
        display: none;
    }


    .gallery-service-card {
        flex:
            0 0 min(80vw, 310px);

        scroll-snap-align:
            start;
    }


    .gallery-swipe-hint {
        display: flex;

        margin-top: 16px;

        justify-content:
            space-between;

        color: #89949f;

        font-size: .63rem;

        font-weight: 700;

        text-transform: uppercase;
    }


    .gallery-final h2 {
        font-size:
            clamp(4.8rem,
                22vw,
                7rem);
    }


    .gallery-lightbox {
        padding: 10px;
    }


    .gallery-lightbox__dialog {
        max-height:
            calc(100vh - 20px);
    }


    .gallery-lightbox__stage {
        grid-template-columns:
            1fr;
    }


    .gallery-lightbox__nav {
        position: absolute;

        z-index: 4;

        top: 50%;

        transform:
            translateY(-50%);
    }


    .gallery-lightbox__nav--prev {
        left: 11px;
    }


    .gallery-lightbox__nav--next {
        right: 11px;
    }


    .gallery-lightbox__image-wrap {
        height: 61vh;
    }


    .gallery-lightbox__bottom {
        grid-template-columns:
            1fr auto;

        gap: 14px;
    }


    .gallery-lightbox__bottom p {
        grid-column:
            1 / -1;
    }

}



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

@media (max-width: 480px) {

    .gallery-shell {
        width:
            calc(100% - 28px);
    }


    .gallery-hero__meta {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 9px;
    }


    .gallery-hero__actions,
    .gallery-final__actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .gallery-hero__actions .gallery-btn,
    .gallery-final__actions .gallery-btn {
        width: 100%;
    }


    .gallery-tile {
        aspect-ratio:
            1 / 1;
    }


    .gallery-tile__info {
        right: 18px;

        bottom: 18px;

        left: 18px;
    }


    .gallery-tile__info strong {
        font-size: 1.6rem;
    }


    .gallery-lightbox__image-wrap {
        height: 56vh;
    }


    .gallery-lightbox__bottom {
        padding:
            14px 16px;
    }

}

.footer-facebook {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 20px;
    padding: 12px 16px;

    width: fit-content;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;

    color: #fff;
    text-decoration: none;

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

    background: rgba(255, 255, 255, 0.05);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.footer-facebook svg {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    fill: currentColor;
}

.footer-facebook__arrow {
    margin-left: 3px;

    font-size: 15px;

    transition: transform 0.25s ease;
}

.footer-facebook:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);

    transform: translateY(-2px);
}

.footer-facebook:hover .footer-facebook__arrow {
    transform: translate(2px, -2px);
}

.footer-facebook:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* =========================================================
   LOST ALL KEYS PAGE
========================================================= */

.lak-page {
    background: #ffffff;
    color: #07111f;
    overflow: hidden;
}

.lak-shell {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.lak-eyebrow {
    margin: 0 0 18px;
    color: #ef7d00;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
}

.lak-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.lak-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   HERO
========================================================= */

.lak-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    background: #08111e;
    isolation: isolate;
}

.lak-hero__image {
    position: absolute;
    inset: 0;
    z-index: -3;

    background:
        url("/assets/images/lost-all-keys/hero.webp") center / cover no-repeat;
}

.lak-hero__image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 10, 18, .96) 0%,
            rgba(4, 10, 18, .88) 38%,
            rgba(4, 10, 18, .55) 67%,
            rgba(4, 10, 18, .72) 100%);
}

.lak-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        radial-gradient(circle at 78% 22%,
            rgba(239, 125, 0, .17),
            transparent 28%);
}

.lak-hero__inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr) minmax(330px, .65fr);

    gap: 90px;
    align-items: center;

    padding-top: 115px;
    padding-bottom: 90px;
}

.lak-hero__content {
    max-width: 760px;
}

.lak-hero__status {
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 30px;

    padding: 10px 15px;

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

    border-radius: 999px;

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

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

    backdrop-filter: blur(10px);
}

.lak-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ef7d00;

    box-shadow:
        0 0 0 5px rgba(239, 125, 0, .14);
}

.lak-hero .lak-eyebrow {
    color: #ff9a2c;
}

.lak-hero h1 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(72px, 8vw, 124px);

    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .79;
    text-transform: uppercase;
}

.lak-hero h1 span {
    color: #ef7d00;
}

.lak-hero__lead {
    max-width: 660px;

    margin: 30px 0 0;

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

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1.85;
}

.lak-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 34px;
}

.lak-button {
    min-height: 57px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 30px;

    padding: 0 22px;

    border-radius: 5px;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.lak-button:hover {
    transform: translateY(-3px);
}

.lak-button--primary {
    background: #ef7d00;
    color: #07111f;
}

.lak-button--glass {
    border:
        1px solid rgba(255, 255, 255, .2);

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

    color: #ffffff;

    backdrop-filter: blur(12px);
}

.lak-button--glass:hover {
    border-color:
        rgba(255, 255, 255, .38);

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

.lak-hero__trust {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    max-width: 700px;

    margin-top: 45px;

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

.lak-hero__trust>div {
    position: relative;

    padding: 22px 20px 0 0;
}

.lak-hero__trust>div+div {
    padding-left: 22px;

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

.lak-hero__trust strong,
.lak-hero__trust span {
    display: block;
}

.lak-hero__trust strong {
    margin-bottom: 5px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.lak-hero__trust span {
    color:
        rgba(255, 255, 255, .55);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
}


/* HERO CARD */

.lak-hero__card {
    position: relative;

    padding: 38px;

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

    border-radius: 8px;

    background:
        rgba(10, 20, 34, .82);

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

    backdrop-filter:
        blur(20px);
}

.lak-hero__card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 38px;

    width: 65px;
    height: 3px;

    background: #ef7d00;
}

.lak-hero__card-label {
    display: block;

    margin-bottom: 20px;

    color: #ef7d00;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lak-hero__card>strong {
    display: block;

    color: #ffffff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 41px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    text-transform: uppercase;
}

.lak-hero__card>p {
    margin: 18px 0 26px;

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

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.8;
}

.lak-hero__card>a {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 17px 18px;

    background: #ffffff;

    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;

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

.lak-hero__card>a:hover {
    background: #ef7d00;
    transform: translateY(-2px);
}

.lak-hero__card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;

    margin-top: 25px;
    padding-top: 23px;

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

.lak-hero__card-bottom>span {
    color:
        rgba(255, 255, 255, .45);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.lak-hero__card-bottom a {
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   URGENT STRIP
========================================================= */

.lak-alert-strip {
    position: relative;
    z-index: 4;

    background: #ef7d00;
}

.lak-alert-strip__inner {
    min-height: 92px;

    display: grid;
    grid-template-columns:
        auto 1fr auto;

    align-items: center;
    gap: 22px;
}

.lak-alert-strip__icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #07111f;
    color: #ffffff;

    font-family:
        "Barlow Condensed",
        sans-serif;

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

.lak-alert-strip__inner strong,
.lak-alert-strip__inner span {
    display: block;
}

.lak-alert-strip__inner strong {
    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.lak-alert-strip__inner>div:nth-child(2)>span {
    margin-top: 3px;

    color: rgba(7, 17, 31, .7);

    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.lak-alert-strip__inner>a {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    padding: 14px 17px;

    background: #07111f;
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform .2s ease;
}

.lak-alert-strip__inner>a:hover {
    transform: translateY(-2px);
}


/* =========================================================
   SHARED SECTION HEADINGS
========================================================= */

.lak-intro,
.lak-feature,
.lak-process,
.lak-security,
.lak-area,
.lak-faq,
.lak-form-section {
    padding:
        clamp(80px, 9vw, 135px) 0;
}

.lak-intro h2,
.lak-feature h2,
.lak-process h2,
.lak-security h2,
.lak-area h2,
.lak-faq h2,
.lak-form-section h2 {
    margin: 0;

    color: #07111f;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(58px, 6vw, 88px);

    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .86;
    text-transform: uppercase;
}

.lak-intro h2 span,
.lak-feature h2 span,
.lak-process h2 span,
.lak-security h2 span,
.lak-area h2 span,
.lak-faq h2 span,
.lak-form-section h2 span {
    color: #ef7d00;
}


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

.lak-intro {
    background: #ffffff;
}

.lak-intro__grid {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr) minmax(0, 1.1fr);

    gap: 100px;
    align-items: start;
}

.lak-intro__copy {
    max-width: 650px;
}

.lak-intro__copy p {
    margin: 0 0 21px;

    color: #5e6877;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.9;
}

.lak-intro__copy a {
    display: inline-flex;
    align-items: center;
    gap: 24px;

    margin-top: 12px;

    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.lak-intro__copy a span {
    color: #ef7d00;
}


/* =========================================================
   FEATURE
========================================================= */

.lak-feature {
    background: #f3f5f7;
}

.lak-feature__grid {
    display: grid;
    grid-template-columns:
        minmax(0, .92fr) minmax(0, 1.08fr);

    gap: clamp(60px, 7vw, 100px);
    align-items: center;
}

.lak-feature__visual {
    position: relative;
}

.lak-image-frame {
    position: relative;

    min-height: 590px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #dce1e7,
            #eef1f4);
}

.lak-image-frame::after {
    content: "MR KEYS";

    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color:
        rgba(7, 17, 31, .1);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 70px;
    font-weight: 800;
    letter-spacing: .05em;
}

.lak-image-frame img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
    min-height: 590px;

    object-fit: cover;
    display: block;
}

.lak-image-frame.is-missing img {
    display: none;
}

.lak-feature__badge {
    position: absolute;

    right: -25px;
    bottom: 35px;
    z-index: 4;

    width: 190px;
    min-height: 112px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 22px;

    background: #ef7d00;

    box-shadow:
        0 25px 55px rgba(7, 17, 31, .18);
}

.lak-feature__badge span,
.lak-feature__badge strong {
    display: block;
}

.lak-feature__badge span {
    margin-bottom: 5px;

    color:
        rgba(7, 17, 31, .65);

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.lak-feature__badge strong {
    color: #07111f;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 25px;
    line-height: .95;
}

.lak-benefits {
    margin-top: 44px;

    border-top:
        1px solid #dce1e7;
}

.lak-benefits article {
    display: grid;
    grid-template-columns:
        46px 1fr;

    gap: 23px;

    padding: 24px 0;

    border-bottom:
        1px solid #dce1e7;
}

.lak-benefits article>span {
    color: #ef7d00;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 18px;
    font-weight: 800;
}

.lak-benefits h3 {
    margin: 0 0 6px;

    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.lak-benefits p {
    margin: 0;

    color: #6c7582;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   PROCESS
========================================================= */

.lak-process {
    background: #07111f;
}

.lak-process .lak-eyebrow {
    color: #ef7d00;
}

.lak-process h2 {
    color: #ffffff;
}

.lak-section-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(320px, .48fr);

    gap: 80px;
    align-items: end;

    margin-bottom: 65px;
}

.lak-section-heading>p {
    margin: 0;

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

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.85;
}

.lak-process__grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);

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

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

.lak-process-card {
    min-height: 335px;

    padding: 27px;

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

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

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

.lak-process-card:hover {
    background:
        rgba(255, 255, 255, .045);

    transform: translateY(-5px);
}

.lak-process-card__number {
    display: block;

    margin-bottom: 45px;

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

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 17px;
    font-weight: 800;
}

.lak-process-card__icon {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    margin-bottom: 25px;

    background: #ef7d00;
    color: #07111f;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 16px;
    font-weight: 800;
}

.lak-process-card h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.lak-process-card p {
    margin: 0;

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

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   SECURITY
========================================================= */

.lak-security {
    background: #ffffff;
}

.lak-security__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr) minmax(340px, .62fr);

    gap: 100px;
    align-items: center;
}

.lak-security__content>p:not(.lak-eyebrow) {
    max-width: 700px;

    margin: 30px 0 0;

    color: #697381;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.9;
}

.lak-security__checks {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-top: 35px;
}

.lak-security__checks>div {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 58px;

    padding: 13px 16px;

    background: #f3f5f7;
}

.lak-security__checks span {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ef7d00;
    color: #07111f;

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

.lak-security__checks p {
    margin: 0;

    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.lak-security__panel {
    position: relative;

    padding: 42px;

    background: #07111f;

    box-shadow:
        0 30px 75px rgba(7, 17, 31, .16);
}

.lak-security__panel::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 80px;
    height: 6px;

    background: #ef7d00;
}

.lak-security__panel-label {
    display: block;

    margin-bottom: 16px;

    color: #ef7d00;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.lak-security__panel>strong {
    display: block;

    color: #ffffff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 36px;
    line-height: 1;
    text-transform: uppercase;
}

.lak-security__panel ul {
    margin: 26px 0;
    padding: 0;

    list-style: none;
}

.lak-security__panel li {
    position: relative;

    padding: 12px 0 12px 25px;

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

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

    font-family: "Manrope", sans-serif;
    font-size: 12px;
}

.lak-security__panel li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;

    width: 7px;
    height: 7px;

    background: #ef7d00;
}

.lak-security__panel>a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 17px;

    background: #ef7d00;
    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   AREAS
========================================================= */

.lak-area {
    background: #f3f5f7;
}

.lak-area__top {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(300px, .45fr);

    gap: 75px;
    align-items: end;

    margin-bottom: 55px;
}

.lak-area__top>p {
    margin: 0;

    color: #66717e;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.85;
}

.lak-area__locations {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid #cfd5dc;

    border-left:
        1px solid #cfd5dc;
}

.lak-area__locations a {
    min-height: 120px;

    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;

    padding: 24px;

    border-right:
        1px solid #cfd5dc;

    border-bottom:
        1px solid #cfd5dc;

    color: #07111f;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 25px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.lak-area__locations a:hover {
    z-index: 2;

    background: #07111f;
    color: #ffffff;

    transform: translateY(-5px);
}

.lak-area__locations span {
    color: #ef7d00;
}


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

.lak-faq {
    background: #ffffff;
}

.lak-faq__grid {
    display: grid;
    grid-template-columns:
        minmax(290px, .58fr) minmax(0, 1.1fr);

    gap: 100px;
}

.lak-faq__intro {
    position: sticky;
    top: 120px;
    align-self: start;
}

.lak-faq__intro>p:not(.lak-eyebrow) {
    max-width: 390px;

    margin: 28px 0 0;

    color: #687382;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.85;
}

.lak-faq__intro>a {
    display: inline-flex;
    align-items: center;
    gap: 25px;

    margin-top: 27px;

    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.lak-faq__intro>a span {
    color: #ef7d00;
}

.lak-faq__items {
    border-top:
        1px solid #dbe0e5;
}

.lak-faq__items details {
    border-bottom:
        1px solid #dbe0e5;
}

.lak-faq__items summary {
    position: relative;

    padding: 27px 55px 27px 0;

    color: #07111f;

    cursor: pointer;

    list-style: none;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.lak-faq__items summary::-webkit-details-marker {
    display: none;
}

.lak-faq__items summary::after {
    content: "+";

    position: absolute;

    right: 3px;
    top: 50%;

    transform:
        translateY(-50%);

    color: #ef7d00;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 30px;
    font-weight: 700;
}

.lak-faq__items details[open] summary::after {
    content: "−";
}

.lak-faq__items details p {
    margin: -5px 0 27px;
    padding-right: 50px;

    color: #687382;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   FORM
========================================================= */

.lak-form-section {
    position: relative;

    background: #07111f;
}

.lak-form-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(circle at 8% 13%,
            rgba(239, 125, 0, .12),
            transparent 26%);
}

.lak-form-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(320px, .65fr) minmax(0, 1fr);

    gap: 85px;
    align-items: start;
}

.lak-form-intro {
    position: sticky;
    top: 120px;
}

.lak-form-intro .lak-eyebrow {
    color: #ef7d00;
}

.lak-form-intro h2 {
    color: #ffffff;
}

.lak-form-intro>p {
    max-width: 440px;

    margin: 28px 0 0;

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

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    line-height: 1.85;
}

.lak-form-intro__steps {
    margin-top: 38px;
}

.lak-form-intro__steps article {
    display: grid;
    grid-template-columns:
        38px 1fr;

    gap: 15px;

    padding: 17px 0;

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

.lak-form-intro__steps article:last-child {
    border-bottom:
        1px solid rgba(255, 255, 255, .1);
}

.lak-form-intro__steps article>span {
    color: #ef7d00;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 17px;
    font-weight: 800;
}

.lak-form-intro__steps strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.lak-form-intro__steps p {
    margin: 0;

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

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    line-height: 1.6;
}

.lak-call-card {
    margin-top: 30px;

    padding: 22px;

    border-left:
        3px solid #ef7d00;

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

.lak-call-card>span,
.lak-call-card>strong {
    display: block;
}

.lak-call-card>span {
    color:
        rgba(255, 255, 255, .42);

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.lak-call-card>strong {
    margin: 5px 0 15px;

    color: #ffffff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 25px;
    text-transform: uppercase;
}

.lak-call-card>a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #ef7d00;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}


/* FORM CARD */

.lak-form-card {
    padding: clamp(28px, 4vw, 52px);

    background: #ffffff;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, .22);
}

.lak-form-group {
    margin: 0;
    padding: 0 0 37px;
}

.lak-form-group+.lak-form-group {
    padding-top: 37px;

    border-top:
        1px solid #e2e6ea;
}

.lak-form-group__heading {
    display: grid;
    grid-template-columns:
        40px 1fr;

    gap: 14px;

    margin-bottom: 25px;
}

.lak-form-group__heading>span {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    background: #07111f;
    color: #ef7d00;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 15px;
    font-weight: 800;
}

.lak-form-group__heading strong {
    display: block;

    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.lak-form-group__heading p {
    margin: 3px 0 0;

    color: #87909b;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
}

.lak-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.lak-form-grid--2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.lak-field--full {
    grid-column: 1 / -1;
}

.lak-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 8px;

    color: #27313f;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.lak-field label small {
    color: #929ba6;

    font-size: 9px;
    font-weight: 600;
}

.lak-field input,
.lak-field select,
.lak-field textarea {
    width: 100%;

    border:
        1px solid #d9dee4;

    border-radius: 0;

    outline: none;

    background: #f7f8fa;
    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 13px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.lak-field input,
.lak-field select {
    height: 55px;

    padding: 0 15px;
}

.lak-field textarea {
    min-height: 135px;

    resize: vertical;

    padding: 15px;
}

.lak-field input::placeholder,
.lak-field textarea::placeholder {
    color: #a4abb3;
}

.lak-field input:focus,
.lak-field select:focus,
.lak-field textarea:focus {
    border-color: #ef7d00;
    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(239, 125, 0, .1);
}


/* CONTACT CHOICE */

.lak-contact-choice {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}

.lak-contact-choice label {
    cursor: pointer;
}

.lak-contact-choice input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.lak-contact-choice span {
    min-height: 52px;

    display: grid;
    place-items: center;

    border:
        1px solid #d8dde3;

    background: #f7f8fa;
    color: #596471;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.lak-contact-choice label:hover span {
    transform: translateY(-2px);

    border-color: #adb5bf;
}

.lak-contact-choice input:checked+span {
    border-color: #07111f;
    background: #07111f;
    color: #ffffff;
}


/* PRIVACY */

.lak-form-privacy {
    margin-top: 4px;

    padding: 18px;

    background: #f3f5f7;
}

.lak-form-privacy p {
    margin: 0;

    color: #7b8590;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
    line-height: 1.7;
}

.lak-form-privacy a {
    color: #07111f;
    font-weight: 800;
}


/* SUBMIT */

.lak-submit {
    width: 100%;
    min-height: 62px;

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

    margin-top: 20px;

    padding: 0 22px;

    border: 0;

    cursor: pointer;

    background: #ef7d00;
    color: #07111f;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;

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

.lak-submit:hover {
    background: #ff921f;

    transform: translateY(-2px);
}

.lak-submit>span:last-child {
    font-size: 18px;
}

.lak-submit-note {
    margin: 13px 0 0;

    text-align: center;

    color: #89919c;

    font-family: "Manrope", sans-serif;
    font-size: 10px;
}

.lak-submit-note a {
    color: #07111f;
    font-weight: 800;
    text-decoration: none;
}


/* MESSAGES */

.lak-form-success,
.lak-form-errors {
    margin-bottom: 28px;

    padding: 20px;

    outline: none;
}

.lak-form-success {
    display: grid;
    grid-template-columns:
        auto 1fr;

    gap: 16px;

    border:
        1px solid #cfe6d7;

    background: #f2faf5;
}

.lak-form-success__icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #147a3d;
    color: #ffffff;

    font-weight: 900;
}

.lak-form-success strong {
    display: block;

    margin-bottom: 5px;

    color: #0f562c;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

.lak-form-success p {
    margin: 0;

    color: #4c6a57;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    line-height: 1.7;
}

.lak-form-errors {
    border:
        1px solid #f0c4c4;

    background: #fff5f5;
}

.lak-form-errors>strong {
    color: #9b2525;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
}

.lak-form-errors ul {
    margin:
        12px 0 0;

    padding-left: 18px;

    color: #8a3e3e;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    line-height: 1.7;
}


/* HONEYPOT */

.lak-hp {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    pointer-events: none !important;
}


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

@media (max-width: 1100px) {

    .lak-hero__inner {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .lak-hero__content {
        max-width: 850px;
    }

    .lak-hero__card {
        max-width: 560px;
    }

    .lak-feature__grid,
    .lak-security__grid {
        gap: 60px;
    }

    .lak-process__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .lak-area__locations {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .lak-form-layout {
        gap: 55px;
    }

}


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

@media (max-width: 900px) {

    .lak-intro__grid,
    .lak-feature__grid,
    .lak-security__grid,
    .lak-faq__grid,
    .lak-form-layout {
        grid-template-columns: 1fr;
    }

    .lak-section-heading,
    .lak-area__top {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .lak-intro__grid,
    .lak-feature__grid,
    .lak-security__grid,
    .lak-faq__grid {
        gap: 55px;
    }

    .lak-faq__intro,
    .lak-form-intro {
        position: static;
    }

    .lak-feature__visual {
        width: calc(100% - 25px);
    }

}


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

@media (max-width: 700px) {

    .lak-shell {
        width:
            min(100% - 30px, 1240px);
    }


    /* HERO */

    .lak-hero {
        min-height: auto;
    }

    .lak-hero__inner {
        padding-top: 115px;
        padding-bottom: 55px;
    }

    .lak-hero h1 {
        font-size:
            clamp(61px, 19vw, 84px);

        line-height: .8;
    }

    .lak-hero__lead {
        font-size: 14px;
        line-height: 1.75;
    }

    .lak-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lak-button {
        width: 100%;
        justify-content: space-between;
    }

    .lak-hero__trust {
        grid-template-columns: 1fr;

        margin-top: 35px;
    }

    .lak-hero__trust>div {
        padding: 16px 0;

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

    .lak-hero__trust>div+div {
        padding-left: 0;

        border-left: 0;
    }

    .lak-hero__card {
        padding: 30px 24px;
    }

    .lak-hero__card>strong {
        font-size: 34px;
    }


    /* ALERT */

    .lak-alert-strip__inner {
        grid-template-columns:
            auto 1fr;

        gap: 14px;

        padding-top: 17px;
        padding-bottom: 17px;
    }

    .lak-alert-strip__inner>a {
        grid-column: 1 / -1;

        justify-content: space-between;
    }


    /* SECTIONS */

    .lak-intro,
    .lak-feature,
    .lak-process,
    .lak-security,
    .lak-area,
    .lak-faq,
    .lak-form-section {
        padding: 78px 0;
    }

    .lak-intro h2,
    .lak-feature h2,
    .lak-process h2,
    .lak-security h2,
    .lak-area h2,
    .lak-faq h2,
    .lak-form-section h2 {
        font-size:
            clamp(52px, 16vw, 70px);
    }


    /* FEATURE */

    .lak-image-frame,
    .lak-image-frame img {
        min-height: 450px;
    }

    .lak-feature__badge {
        right: -15px;
        bottom: 20px;

        width: 165px;
    }


    /* PROCESS */

    .lak-process__grid {
        grid-template-columns: 1fr;
    }

    .lak-process-card {
        min-height: 275px;
    }


    /* SECURITY */

    .lak-security__checks {
        grid-template-columns: 1fr;
    }

    .lak-security__panel {
        padding: 32px 24px;
    }


    /* AREAS */

    .lak-area__locations {
        grid-template-columns: 1fr 1fr;
    }

    .lak-area__locations a {
        min-height: 100px;

        padding: 18px;

        font-size: 21px;
    }


    /* FAQ */

    .lak-faq__items summary {
        padding-right: 45px;
    }


    /* FORM */

    .lak-form-card {
        padding: 26px 20px;
    }

    .lak-form-grid--2 {
        grid-template-columns: 1fr;
    }

    .lak-field--full {
        grid-column: auto;
    }

    .lak-contact-choice {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 430px) {

    .lak-area__locations {
        grid-template-columns: 1fr;
    }

    .lak-hero__status {
        font-size: 9px;
    }

    .lak-feature__visual {
        width: calc(100% - 15px);
    }

}

/* =========================================================
   HOME - LOST ALL KEYS FEATURE
========================================================= */

.home-lost-keys {
    position: relative;
    overflow: hidden;

    padding-top:
        clamp(90px, 10vw, 145px);

    background: #07111f;

    isolation: isolate;
}


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

.home-lost-keys__media {
    position: absolute;
    inset: 0;

    z-index: -3;

    background-image:
        var(--home-lost-keys-image);

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    transform:
        scale(1.03);
}

.home-lost-keys__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 10, 18, .98) 0%,
            rgba(4, 10, 18, .94) 42%,
            rgba(4, 10, 18, .77) 68%,
            rgba(4, 10, 18, .87) 100%);
}

.home-lost-keys__overlay {
    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(circle at 76% 27%,
            rgba(239, 125, 0, .19),
            transparent 28%);
}


/* =========================================================
   GRID
========================================================= */

.home-lost-keys__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr) minmax(340px, .65fr);

    align-items: center;

    gap:
        clamp(65px, 8vw, 120px);

    padding-bottom:
        clamp(80px, 9vw, 130px);
}


/* =========================================================
   STATUS
========================================================= */

.home-lost-keys__status {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    padding: 10px 15px;

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

    border-radius: 999px;

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

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

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

    letter-spacing: .14em;

    text-transform: uppercase;

    backdrop-filter:
        blur(10px);
}

.home-lost-keys__status>span {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #ef7d00;

    box-shadow:
        0 0 0 5px rgba(239, 125, 0, .13);
}


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

.home-lost-keys .eyebrow {
    color: #ef7d00;
}

.home-lost-keys__content h2 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(70px, 7.4vw, 112px);

    font-weight: 800;

    letter-spacing: -.045em;

    line-height: .8;

    text-transform: uppercase;
}

.home-lost-keys__content h2 span {
    color: #ef7d00;
}

.home-lost-keys__lead {
    max-width: 650px;

    margin:
        30px 0 0;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 14px;

    line-height: 1.85;
}


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

.home-lost-keys__features {
    display: grid;

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

    max-width: 720px;

    margin-top: 37px;

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

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

.home-lost-keys__features>div {
    min-height: 105px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        20px 19px 20px 0;
}

.home-lost-keys__features>div+div {
    padding-left: 19px;

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

.home-lost-keys__features p {
    margin: 0;

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

    font-family:
        "Manrope",
        sans-serif;

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

    line-height: 1.55;
}

.home-lost-keys__tick {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ef7d00;

    color: #07111f;

    font-family:
        "Manrope",
        sans-serif;

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


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

.home-lost-keys__actions {
    display: flex;
    align-items: stretch;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}

.home-lost-keys__call {
    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding:
        8px 20px 8px 10px;

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

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

    color: #ffffff;

    text-decoration: none;

    backdrop-filter:
        blur(12px);

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.home-lost-keys__call:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255, 255, 255, .32);

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

.home-lost-keys__call-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: grid;
    place-items: center;

    background: #ef7d00;
}

.home-lost-keys__call-icon svg {
    width: 17px;
    height: 17px;

    fill: #07111f;
}

.home-lost-keys__call small,
.home-lost-keys__call strong {
    display: block;
}

.home-lost-keys__call small {
    margin-bottom: 2px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;
}

.home-lost-keys__call strong {
    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   SIDE CARD
========================================================= */

.home-lost-keys__card {
    position: relative;

    overflow: hidden;

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

    background:
        rgba(8, 18, 31, .82);

    box-shadow:
        0 35px 85px rgba(0, 0, 0, .33);

    backdrop-filter:
        blur(18px);
}

.home-lost-keys__card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 95px;
    height: 5px;

    background: #ef7d00;
}

.home-lost-keys__card-number {
    position: absolute;

    top: 15px;
    right: 21px;

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

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 170px;
    font-weight: 800;

    line-height: 1;

    pointer-events: none;
}

.home-lost-keys__card-content {
    position: relative;
    z-index: 2;

    padding:
        42px 38px 35px;
}

.home-lost-keys__card-label {
    display: block;

    margin-bottom: 22px;

    color: #ef7d00;

    font-family:
        "Manrope",
        sans-serif;

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

    letter-spacing: .14em;

    text-transform: uppercase;
}

.home-lost-keys__card-content>strong {
    display: block;

    color: #ffffff;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(75px, 8vw, 105px);

    font-weight: 800;

    letter-spacing: -.05em;

    line-height: .8;
}

.home-lost-keys__card-content>p {
    margin:
        28px 0 25px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 12px;

    line-height: 1.8;
}

.home-lost-keys__card-content>a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 52px;

    padding:
        0 17px;

    background: #ffffff;

    color: #07111f;

    font-family:
        "Manrope",
        sans-serif;

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

    text-decoration: none;

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

.home-lost-keys__card-content>a:hover {
    transform:
        translateY(-2px);

    background: #ef7d00;
}


/* =========================================================
   CARD STEPS
========================================================= */

.home-lost-keys__card-footer {
    display: grid;

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

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

.home-lost-keys__card-footer>div {
    min-width: 0;

    padding:
        18px 13px;
}

.home-lost-keys__card-footer>div+div {
    border-left:
        1px solid rgba(255, 255, 255, .11);
}

.home-lost-keys__card-footer span,
.home-lost-keys__card-footer strong {
    display: block;
}

.home-lost-keys__card-footer span {
    margin-bottom: 4px;

    color: #ef7d00;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}

.home-lost-keys__card-footer strong {
    color:
        rgba(255, 255, 255, .63);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;
    font-weight: 700;
}


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

.home-lost-keys__bottom {
    position: relative;

    background: #ef7d00;
}

.home-lost-keys__bottom-inner {
    min-height: 92px;

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

    gap: 35px;
}

.home-lost-keys__bottom p {
    margin: 0;

    color:
        rgba(7, 17, 31, .74);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 11px;

    line-height: 1.65;
}

.home-lost-keys__bottom p strong {
    color: #07111f;
}

.home-lost-keys__bottom a {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 25px;

    color: #07111f;

    font-family:
        "Manrope",
        sans-serif;

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

    text-decoration: none;
}

.home-lost-keys__bottom a span {
    font-size: 18px;

    transition:
        transform .2s ease;
}

.home-lost-keys__bottom a:hover span {
    transform:
        translate(3px, -3px);
}


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

@media (max-width: 1050px) {

    .home-lost-keys__grid {
        grid-template-columns:
            minmax(0, 1fr) minmax(300px, .6fr);

        gap: 50px;
    }

    .home-lost-keys__features {
        grid-template-columns: 1fr;
    }

    .home-lost-keys__features>div {
        min-height: auto;

        padding:
            15px 0;
    }

    .home-lost-keys__features>div+div {
        padding-left: 0;

        border-left: 0;

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

}


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

@media (max-width: 800px) {

    .home-lost-keys__grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .home-lost-keys__content {
        max-width: 700px;
    }

    .home-lost-keys__card {
        max-width: 520px;
    }

}


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

@media (max-width: 600px) {

    .home-lost-keys {
        padding-top: 80px;
    }

    .home-lost-keys__grid {
        padding-bottom: 65px;
    }

    .home-lost-keys__content h2 {
        font-size:
            clamp(61px, 19vw, 82px);
    }

    .home-lost-keys__lead {
        font-size: 13px;
    }

    .home-lost-keys__actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .home-lost-keys__actions .home-btn,
    .home-lost-keys__call {
        width: 100%;
    }

    .home-lost-keys__call {
        justify-content: flex-start;
    }

    .home-lost-keys__card-content {
        padding:
            34px 24px 28px;
    }

    .home-lost-keys__card-number {
        font-size: 135px;
    }

    .home-lost-keys__card-footer {
        grid-template-columns: 1fr;
    }

    .home-lost-keys__card-footer>div {
        padding:
            13px 24px;
    }

    .home-lost-keys__card-footer>div+div {
        border-left: 0;

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

    .home-lost-keys__bottom-inner {
        min-height: auto;

        display: grid;

        padding-top: 22px;
        padding-bottom: 22px;
    }

    .home-lost-keys__bottom a {
        justify-content: space-between;
    }

}

/* =========================================================
   GALLERY - VIEW MORE
========================================================= */

.gallery-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    margin-top: 46px;
    text-align: center;
}

.gallery-load-more[hidden] {
    display: none !important;
}

.gallery-load-more__button {
    appearance: none;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 25px 0 29px;
    border: 0;
    border-radius: 999px;
    background: var(--orange);
    color: var(--navy-dark);
    box-shadow: 0 16px 34px rgba(16, 43, 70, .12);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.gallery-load-more__button:hover {
    transform: translateY(-3px);
    background: #ffad09;
    box-shadow: 0 20px 40px rgba(16, 43, 70, .17);
}

.gallery-load-more__button:focus-visible {
    outline: 3px solid rgba(246, 160, 0, .28);
    outline-offset: 4px;
}

.gallery-load-more__button i {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: rgba(7, 26, 45, .10);
    font-style: normal;
    font-size: 1rem;
    line-height: 1;
    transition: transform .25s ease;
}

.gallery-load-more__button:hover i {
    transform: translateY(3px);
}

.gallery-load-more p {
    margin: 0;
    color: #89949f;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .gallery-load-more {
        margin-top: 32px;
    }

    .gallery-load-more__button {
        min-height: 54px;
        padding: 0 21px 0 24px;
    }
}

@media (max-width: 480px) {
    .gallery-load-more__button {
        width: 100%;
        max-width: 320px;
    }
}

/* =========================================================
   ABOUT PAGE
========================================================= */

.about-container {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.about-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #071a2d;
    color: #fff;
}

.about-hero__visual,
.about-hero__overlay {
    position: absolute;
    inset: 0;
}

.about-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-hero__overlay {
    background:
        linear-gradient(90deg,
            rgba(10, 10, 10, .94) 0%,
            rgba(10, 10, 10, .76) 40%,
            rgba(10, 10, 10, .28) 75%,
            rgba(10, 10, 10, .18) 100%),
        linear-gradient(0deg,
            rgba(10, 10, 10, .75) 0%,
            transparent 50%);
}

.about-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: 175px 0 85px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 80px;
}

.about-hero__content {
    max-width: 800px;
}

.about-hero h1 {
    margin: 18px 0 26px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(68px, 8vw, 126px);
    line-height: .84;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.about-hero h1 span {
    color: var(--orange);

}

.about-hero__lead {
    max-width: 670px;
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .76);
}

.about-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.about-hero__badge {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, .22);
    transform: rotate(-7deg);
}

.about-hero__badge-small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .22em;
    opacity: .65;
}

.about-hero__badge strong {
    display: block;
    margin: 6px 0 3px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 27px;
    text-transform: uppercase;
}

.about-hero__badge>span:last-child {
    font-size: 11px;
    opacity: .72;
}


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

.button-primary,
.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 58px;
    padding: 0 26px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: transform .25s ease,
        background-color .25s ease,
        color .25s ease;
}

.button-primary {
    background: var(--orange);
    color: #111;
}

.button-primary:hover {
    transform: translateY(-3px);
}

.button-secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
}

.button-secondary:hover {
    background: #fff;
    color: #111;
}


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

.about-intro {
    padding: 120px 0;
    background: #fff;
}

.about-intro__grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 120px;
}

.about-intro__heading h2,
.about-services__header h2,
.about-why__content h2,
.about-location h2,
.about-final h2 {
    margin: 16px 0 0;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(50px, 6vw, 86px);
    line-height: .95;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.about-intro__heading h2 span,
.about-services__header h2 span,
.about-why__content h2 span,
.about-location h2 span,
.about-final h2 span {
    color: var(--orange);
}

.about-intro__copy {
    padding-top: 4px;
}

.about-intro__copy p {
    max-width: 710px;
    font-size: 16px;
    line-height: 1.85;
    color: #626262;
}

.about-intro__copy .about-intro__large {
    margin-top: 0;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 600;
    color: #151515;
}


/* =========================================================
   STORY
========================================================= */

.about-story {
    padding: 120px 0;
    background: #f4f4f2;
}

.about-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 100px;
}

.about-story__image-wrap {
    position: relative;
}

.about-story__image-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1.05;
    display: block;
    object-fit: cover;
}

.about-story__image-label {
    position: absolute;
    right: -30px;
    bottom: 40px;
    width: 210px;
    padding: 25px;
    background: var(--orange);
    color: #111;
}

.about-story__image-label span {
    display: block;
    margin-bottom: 35px;
    font-size: 12px;
    font-weight: 800;
}

.about-story__image-label p {
    margin: 0;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.about-story__content h2 {
    max-width: 650px;
    margin: 15px 0 28px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(48px, 5vw, 76px);
    line-height: .96;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.about-story__content>p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

.about-story__points {
    margin-top: 34px;
}

.about-story__point {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid #d7d7d2;
}

.about-story__point>span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #071a2d;
    color: var(--orange);
    font-weight: 800;
}

.about-story__point strong {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.about-story__point p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   MOVING STATEMENT
========================================================= */

.about-statement {
    overflow: hidden;
    background: #071a2d;
    color: #fff;
    padding: 28px 0;
}

.about-statement__track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    animation: aboutTicker 26s linear infinite;
}

.about-statement__track span {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .035em;
}

.about-statement__track i {
    color: var(--orange);
    font-style: normal;
}

@keyframes aboutTicker {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-25%);
    }

}


/* =========================================================
   SERVICES
========================================================= */

.about-services {
    padding: 130px 0;
    background: #fff;
}

.about-services__header {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 65px;
}

.about-services__intro {
    max-width: 500px;
    margin: 0 0 7px auto;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}

.about-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
}

.about-service-card {
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    padding: 34px;
    color: #111;
    text-decoration: none;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    transition: background-color .3s ease,
        transform .3s ease;
}

.about-service-card:hover {
    z-index: 2;
    background: #071a2d;
    color: #fff;
    transform: translateY(-7px);
}

.about-service-card__number {
    margin-bottom: 56px;
    color: #999;
    font-size: 11px;
    font-weight: 800;
}

.about-service-card__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 28px;
}

.about-service-card__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-service-card h3 {
    margin: 0 0 14px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 30px;
    text-transform: uppercase;
}

.about-service-card p {
    margin: 0;
    color: #737373;
    font-size: 14px;
    line-height: 1.75;
}

.about-service-card:hover p {
    color: rgba(255, 255, 255, .64);
}

.about-service-card__link {
    margin-top: auto;
    padding-top: 30px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}


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

.about-why {
    padding: 130px 0;
    background: #151515;
    color: #fff;
}

.about-why__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 120px;
}

.about-why__content {
    position: sticky;
    top: 150px;
    align-self: start;
}

.about-why__content>p {
    max-width: 520px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.8;
}

.about-text-link {
    display: inline-flex;
    gap: 16px;
    margin-top: 24px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.about-why__item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 25px;
    padding: 37px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.about-why__item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.about-why__number {
    color: var(--orange);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.about-why__item h3 {
    margin: 0 0 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 37px;
    line-height: 1;
    text-transform: uppercase;
}

.about-why__item p {
    max-width: 520px;
    margin: 0;
    color: rgba(255, 255, 255, .56);
    line-height: 1.75;
}


/* =========================================================
   LOCATION
========================================================= */

.about-location {
    padding: 130px 0;
    background: #efefec;
}

.about-location__card {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 650px;
    background: #fff;
}

.about-location__content {
    padding: 75px;
}

.about-location__content>p {
    max-width: 530px;
    color: #686868;
    line-height: 1.8;
}

.about-location address {
    margin-top: 35px;
    font-style: normal;
    color: #555;
    line-height: 1.8;
}

.about-location address strong {
    color: #111;
}

.about-location__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 37px;
}

.about-location__phone {
    color: #111;
    font-weight: 800;
    text-decoration: none;
}

.about-location__visual {
    position: relative;
    min-height: 550px;
    overflow: hidden;
}

.about-location__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-location__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 165px;
    padding: 20px 25px;
    background: #071a2d;
    color: #fff;
    transform: translate(-50%, -50%);
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .22);
}

.about-location__pin span {
    width: 13px;
    height: 13px;
    display: block;
    margin: 0 auto 12px;
    border: 3px solid var(--orange);
    border-radius: 50%;
}

.about-location__pin strong,
.about-location__pin small {
    display: block;
}

.about-location__pin strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
}

.about-location__pin small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
    letter-spacing: .15em;
}


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

.about-final {
    padding: 120px 0;
    background: var(--orange);
}

.about-final__inner {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 100px;
    align-items: end;
}

.about-final h2 span {
    color: #111;
    opacity: .5;
}

.about-final__action {
    max-width: 500px;
    justify-self: end;
}

.about-final__action p {
    margin: 0 0 27px;
    line-height: 1.8;
}

.about-final .button-primary {
    background: #071a2d;
    color: #fff;
}


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

@media (max-width: 1150px) {

    .about-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-story__grid,
    .about-why__grid {
        gap: 65px;
    }

    .about-location__content {
        padding: 55px;
    }

}


@media (max-width: 900px) {

    .about-container,
    .about-hero__inner {
        width: min(100% - 34px, 1380px);
    }

    .about-hero {
        min-height: 690px;
    }

    .about-hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-hero__badge {
        display: none;
    }

    .about-intro__grid,
    .about-story__grid,
    .about-services__header,
    .about-why__grid,
    .about-location__card,
    .about-final__inner {
        grid-template-columns: 1fr;
    }

    .about-intro__grid,
    .about-story__grid,
    .about-services__header,
    .about-why__grid,
    .about-final__inner {
        gap: 50px;
    }

    .about-story__image-wrap {
        max-width: 680px;
    }

    .about-why__content {
        position: static;
    }

    .about-location__visual {
        min-height: 450px;
    }

    .about-final__action {
        justify-self: start;
    }

}


@media (max-width: 620px) {

    .about-hero {
        min-height: 650px;
    }

    .about-hero__inner {
        padding-top: 150px;
        padding-bottom: 55px;
    }

    .about-hero h1 {
        font-size: 58px;
    }

    .about-hero__lead {
        font-size: 16px;
    }

    .about-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .about-hero__actions a {
        width: 100%;
    }

    .about-intro,
    .about-story,
    .about-services,
    .about-why,
    .about-location,
    .about-final {
        padding: 80px 0;
    }

    .about-intro__copy .about-intro__large {
        font-size: 20px;
    }

    .about-story__image-label {
        right: 15px;
        bottom: 15px;
        width: 175px;
    }

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

    .about-service-card {
        min-height: 330px;
    }

    .about-location__content {
        padding: 40px 25px;
    }

    .about-location__visual {
        min-height: 340px;
    }

    .about-why__item {
        grid-template-columns: 45px 1fr;
    }

}


/* =========================================================
   REVEAL
========================================================= */

.about-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.about-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   ABOUT - TRUST STRIP
========================================================= */

.about-trust-strip {
    background: var(--orange);
}

.about-trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.about-trust-stat {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 30px;
    border-right: 1px solid rgba(0, 0, 0, .16);
}

.about-trust-stat:first-child {
    border-left: 1px solid rgba(0, 0, 0, .16);
}

.about-trust-stat strong {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 45px;
    line-height: 1;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.about-trust-stat span {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   ABOUT - COVERAGE
========================================================= */

.about-coverage {
    padding: 130px 0;
    overflow: hidden;
    background: var(--orange);
}

.about-coverage__grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 120px;
}

.about-coverage__stat {
    text-align: center;
}

.about-coverage__number {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(150px, 20vw, 310px);
    font-weight: 800;
    line-height: .72;
    letter-spacing: -.075em;
}

.about-coverage__number small {
    font-size: .3em;
    vertical-align: top;
    letter-spacing: 0;
}

.about-coverage__stat p {
    margin: 35px 0 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-coverage__content {
    max-width: 650px;
}

.about-coverage__content h2 {
    margin: 15px 0 25px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(54px, 6vw, 90px);
    line-height: .9;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.about-coverage__content h2 span {
    display: block;
    color: rgba(0, 0, 0, .45);
}

.about-coverage__lead {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.about-coverage__content>p:not(.eyebrow) {
    line-height: 1.8;
}

.about-coverage .button-primary {
    margin-top: 18px;
    background: #071a2d;
    color: #fff;
}


/* =========================================================
   PHOTO TO KEY
========================================================= */

.about-photo-key {
    padding: 130px 0;
    background: #071a2d;
    color: #fff;
}

.about-photo-key__header {
    max-width: 850px;
    margin-bottom: 70px;
}

.about-photo-key__header h2 {
    margin: 15px 0 28px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(55px, 7vw, 100px);
    line-height: .88;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.about-photo-key__header h2 span {
    color: var(--orange);
}

.about-photo-key__header>p:last-child {
    max-width: 720px;
    color: rgba(255, 255, 255, .62);
    font-size: 17px;
    line-height: 1.8;
}

.about-photo-key__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .15);
    border-left: 1px solid rgba(255, 255, 255, .15);
}

.about-photo-step {
    min-height: 300px;
    padding: 35px;
    border-right: 1px solid rgba(255, 255, 255, .15);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.about-photo-step>span {
    display: block;
    margin-bottom: 90px;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
}

.about-photo-step strong {
    display: block;
    margin-bottom: 13px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 29px;
    text-transform: uppercase;
}

.about-photo-step p {
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
    line-height: 1.7;
}

.about-photo-key__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin-top: 45px;
}

.about-photo-key__footer p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, .52);
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   ALL KEY TYPES
========================================================= */

.about-all-keys {
    padding: 130px 0;
    background: #f3f3f0;
}

.about-all-keys__grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 110px;
}

.about-all-keys__heading h2 {
    margin: 15px 0 0;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(55px, 6vw, 90px);
    line-height: .9;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.about-all-keys__heading h2 span {
    color: var(--orange);
}

.about-all-keys__lead {
    margin-top: 0;
    font-size: 23px;
    font-weight: 650;
    line-height: 1.5;
}

.about-all-keys__content>p {
    color: #666;
    line-height: 1.8;
}

.about-key-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 32px 0;
}

.about-key-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid #d5d5d0;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.about-all-keys__small {
    font-size: 13px;
}


/* =========================================================
   LOCATION MAP
========================================================= */

.about-location__visual {
    position: relative;
    min-height: 550px;
    overflow: hidden;
}

.about-location__map {
    background: #ddd;
}

.about-location__map iframe {
    width: 100%;
    height: 100%;
    min-height: 550px;
    display: block;
    border: 0;
}


/* =========================================================
   NEW ABOUT RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .about-trust-strip__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-photo-key__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-coverage__grid,
    .about-all-keys__grid {
        gap: 65px;
    }

}


@media (max-width: 800px) {

    .about-coverage__grid,
    .about-all-keys__grid {
        grid-template-columns: 1fr;
    }

    .about-coverage__stat {
        text-align: left;
    }

    .about-coverage__number {
        font-size: 180px;
    }

    .about-photo-key__footer {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 620px) {

    .about-trust-strip__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-trust-stat {
        min-height: 115px;
        padding: 22px 18px;
        border-bottom: 1px solid rgba(0, 0, 0, .16);
    }

    .about-trust-stat strong {
        font-size: 35px;
    }

    .about-coverage,
    .about-photo-key,
    .about-all-keys {
        padding: 80px 0;
    }

    .about-photo-key__steps {
        grid-template-columns: 1fr;
    }

    .about-photo-step {
        min-height: 240px;
    }

    .about-photo-step>span {
        margin-bottom: 55px;
    }

    .about-location__visual,
    .about-location__map iframe {
        min-height: 340px;
    }

}

/* =========================================================
   FOOTER SOCIAL LINKS
========================================================= */

.footer-social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}


.footer-whatsapp,
.footer-facebook {
    width: 100%;
    max-width: 290px;
    min-height: 52px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.footer-whatsapp svg,
.footer-facebook svg {
    width: 22px;
    height: 22px;
    display: block;
}


.footer-whatsapp svg {
    fill: #25d366;
}


.footer-facebook svg {
    fill: #1877f2;
}


.footer-whatsapp:hover,
.footer-facebook:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .25);
}


.footer-social-arrow {
    font-size: 15px;
    opacity: .55;
}



/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    background: #071a2d;
    color: #fff;
    text-decoration: none;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, .24),
        0 4px 12px rgba(0, 0, 0, .16);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.floating-whatsapp:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .30),
        0 6px 16px rgba(0, 0, 0, .18);
}


.floating-whatsapp__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
}


.floating-whatsapp__icon svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}


.floating-whatsapp__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}


.floating-whatsapp__text small {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .58);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.floating-whatsapp__text strong {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}



/* =========================================================
   WHATSAPP PULSE
========================================================= */

.floating-whatsapp__icon {
    position: relative;
}


.floating-whatsapp__icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(37, 211, 102, .55);
    border-radius: inherit;
    animation: whatsappPulse 2.4s ease-out infinite;
}


@keyframes whatsappPulse {

    0% {
        opacity: .7;
        transform: scale(.92);
    }

    70% {
        opacity: 0;
        transform: scale(1.28);
    }

    100% {
        opacity: 0;
        transform: scale(1.28);
    }

}



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

@media (max-width: 700px) {

    .floating-whatsapp {
        right: 14px;
        bottom: 14px;
        min-height: 58px;
        padding: 6px;
    }


    .floating-whatsapp__icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }


    .floating-whatsapp__text {
        display: none;
    }

}

/* =========================================================
   ABOUT TRUST - DESKTOP
========================================================= */

.about-trust-strip {
    overflow: hidden;
    background: var(--orange);
}

.about-trust-slider {
    position: relative;
}

.about-trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.about-trust-stat {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 30px;
    border-right: 1px solid rgba(0, 0, 0, .16);
}

.about-trust-stat:first-child {
    border-left: 1px solid rgba(0, 0, 0, .16);
}

.about-trust-stat strong {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 45px;
    line-height: 1;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.about-trust-stat span {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.about-trust-slider__dots {
    display: none;
}


/* =========================================================
   MOBILE TRUST SLIDER
========================================================= */

@media (max-width: 620px) {

    .about-trust-strip {
        padding: 0 0 22px;
    }

    .about-trust-slider {
        overflow: hidden;
    }

    .about-trust-strip__grid {
        display: flex;
        grid-template-columns: none;
        width: 100%;
        transition: transform .45s ease;
        will-change: transform;
    }

    .about-trust-stat {
        min-width: 100%;
        width: 100%;
        min-height: 180px;
        flex: 0 0 100%;
        padding: 35px 26px;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .about-trust-stat strong {
        font-size: 58px;
    }

    .about-trust-stat span {
        margin-top: 10px;
        font-size: 12px;
    }

    .about-trust-slider__dots {
        display: flex;
        justify-content: center;
        gap: 7px;
        margin-top: 16px;
    }

    .about-trust-slider__dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .25);
        transition:
            width .25s ease,
            background-color .25s ease;
    }

    .about-trust-slider__dots span.is-active {
        width: 22px;
        border-radius: 999px;
        background: #071a2d;
    }

}

/* =========================================================
   CONTACT IMAGE UPLOAD
========================================================= */

.form-upload {
    position: relative;
    margin-top: 10px;
}

.form-upload__label {
    display: block;
    cursor: pointer;
}

.form-upload__box {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 30px;
    border: 2px dashed rgba(7, 17, 31, .18);
    border-radius: 16px;
    background: #f8fafc;
    text-align: left;
    transition:
        border-color .25s ease,
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.form-upload__label:hover .form-upload__box {
    border-color: #f4911e;
    background: #fffaf4;
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(7, 17, 31, .07);
}


/* ICON */

.form-upload__icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #07111f;
}

.form-upload__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #f4911e;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* TEXT */

.form-upload__content strong {
    display: block;
    margin-bottom: 7px;
    color: #07111f;
    font-size: 16px;
    font-weight: 800;
}

.form-upload__content p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.6;
}

.form-upload__content span {
    color: #f4911e;
    font-weight: 800;
}


/* REAL FILE INPUT */

.form-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* FILE RULES */

.form-upload__rules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.form-upload__rules span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eef1f4;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
}


/* SELECTED FILES */

.form-upload__selected {
    margin-top: 15px;
}

.form-upload__selected:empty {
    display: none;
}

.form-upload-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-top: 7px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
}

.form-upload-file__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff4e6;
    color: #f4911e;
    font-weight: 800;
}

.form-upload-file__info {
    min-width: 0;
    flex: 1;
}

.form-upload-file__info strong {
    display: block;
    overflow: hidden;
    color: #07111f;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-upload-file__info span {
    display: block;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 10px;
}


/* FOCUS ACCESSIBILITY */

.form-upload input[type="file"]:focus-visible+.form-upload__box {
    border-color: #f4911e;
    box-shadow: 0 0 0 4px rgba(244, 145, 30, .15);
}


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

@media (max-width: 620px) {

    .form-upload__box {
        min-height: 200px;
        flex-direction: column;
        gap: 16px;
        padding: 28px 20px;
        text-align: center;
    }

    .form-upload__icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .form-upload__rules {
        justify-content: center;
    }

}

/* =========================================================
   COMPACT SITE FOOTER
========================================================= */

.site-footer {
    padding-top: 64px;
}

.site-footer__grid--compact {
    align-items: start;
    padding-bottom: 54px;
}


/* BRAND */

.site-footer__grid--compact .footer-brand__logo {
    display: inline-block;
    margin-bottom: 22px;
}

.site-footer__grid--compact .footer-brand img {
    width: 165px;
    height: auto;
}

.site-footer__grid--compact .footer-brand>p {
    max-width: 330px;
    margin: 0 0 22px;
    line-height: 1.65;
}


/* COLUMNS */

.site-footer__grid--compact .footer-heading {
    margin: 0 0 24px;
}

.site-footer__grid--compact .footer-col>a:not(.footer-phone) {
    margin-bottom: 11px;
}


/* CONTACT */

.site-footer__grid--compact .footer-phone {
    display: inline-block;
    margin-bottom: 16px;
}

.footer-address {
    margin: 0 0 16px;
    line-height: 1.65;
}

.footer-hours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    font-size: 13px;
}

.footer-hours strong {
    color: #fff;
}

.footer-hours span {
    opacity: .35;
}


/* DIRECTIONS + FACEBOOK */

.footer-quick-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.footer-directions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f5a000;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.footer-directions span {
    transition: transform .2s ease;
}

.footer-directions:hover span {
    transform: translateX(4px);
}


.footer-social-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.footer-social-icon svg {
    width: 19px;
    height: 19px;
    fill: #1877f2;
}


/* BOTTOM */

.site-footer__grid--compact+.footer-bottom {
    padding-top: 22px;
    padding-bottom: 22px;
}


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

@media (max-width: 1000px) {

    .site-footer {
        padding-top: 52px;
    }

    .site-footer__grid--compact {
        row-gap: 42px;
        padding-bottom: 44px;
    }

}


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

@media (max-width: 700px) {

    .site-footer {
        padding-top: 42px;
    }

    .site-footer__grid--compact {
        row-gap: 34px;
        padding-bottom: 38px;
    }

    .site-footer__grid--compact .footer-brand img {
        width: 145px;
    }

    .site-footer__grid--compact .footer-heading {
        margin-bottom: 17px;
    }

    .footer-quick-links {
        gap: 16px;
    }

    .footer-hours {
        gap: 5px;
    }

}

.footer-copyright {
    text-align: left;
}

@media (max-width: 700px) {
    .footer-copyright {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   HEADER CONTACT DETAILS
========================================= */

.header-contact-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}


/* =========================================
   EMAIL + PHONE
========================================= */

.header-email,
.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #102b4c;
    text-decoration: none;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


/* =========================================
   ORANGE CONTACT ICONS
========================================= */

.header-email svg,
.header-phone svg {
    width: 16px;
    height: 16px;

    fill: #f5a000;

    flex: 0 0 auto;

    transition: transform 0.2s ease;
}


/* =========================================
   DIVIDER
========================================= */

.header-contact-divider {
    display: block;

    width: 1px;
    height: 16px;

    background: #102b4c;
    opacity: 0.15;

    flex: 0 0 auto;
}


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

.header-email:hover,
.header-phone:hover {
    color: #f5a000;
}

.header-email:hover svg,
.header-phone:hover svg {
    transform: translateY(-1px);
}


/* =========================================
   TABLET
   Hide email before header becomes cramped
========================================= */

@media (max-width: 1050px) {

    .header-email {
        display: none;
    }

    .header-contact-divider {
        display: none;
    }

    .header-contact-links {
        gap: 0;
    }

}


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

@media (max-width: 760px) {

    .header-contact-links {
        display: none;
    }

}

/* =========================================
   MOBILE MENU CONTACT DETAILS
========================================= */

.mobile-menu__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
}

.mobile-menu__contact .mobile-menu__phone,
.mobile-menu__contact .mobile-menu__email {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: white !important;
    text-decoration: none;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.mobile-menu__contact .mobile-menu__phone svg,
.mobile-menu__contact .mobile-menu__email svg {
    width: 17px;
    height: 17px;

    fill: #f5a000;

    flex: 0 0 auto;
}

.mobile-menu__contact .mobile-menu__phone:hover,
.mobile-menu__contact .mobile-menu__email:hover {
    color: #f5a000;
    transform: translateX(2px);
}

/* =========================================================
   HOME HERO - HEADING RESPONSIVE FIX
========================================================= */

.home-hero h1 {
    max-width: 100%;
}

.home-hero h1 span {
    white-space: nowrap;
}

/* Laptop / smaller desktop */
@media (min-width: 901px) and (max-width: 1350px) {

    .home-hero__content {
        width: min(720px, 62vw);
    }

    .home-hero h1 {
        font-size: clamp(4.4rem, 6.4vw, 6.6rem);
        line-height: 0.88;
        letter-spacing: -0.045em;
    }
}

/* Tablet / mobile */
@media (max-width: 900px) {

    .home-hero__content {
        width: 100%;
        max-width: 680px;
    }

    .home-hero h1 {
        font-size: clamp(3.5rem, 13vw, 5rem);
        line-height: 0.88;
        letter-spacing: -0.045em;
    }
}

/* Small mobile */
@media (max-width: 430px) {

    .home-hero h1 {
        font-size: clamp(3.15rem, 14.5vw, 3.75rem);
        line-height: 0.89;
    }
}

/* =========================================================
   HOMEPAGE - HORIZONTAL OVERFLOW FIX
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.home-hero {
    width: 100%;
    max-width: 100%;
}

.home-hero__media,
.home-hero__wash {
    width: 100%;
    max-width: 100%;
}

.home-hero__line {
    display: block;
}

.home-hero__line--navy {
    color: var(--navy, #07111f) !important;
}

.home-hero__line--orange {
    color: var(--orange, #f4911e) !important;
}

.home-hero__line--last {
    white-space: nowrap;
}

@media (min-width: 901px) and (max-width: 1400px) {

    .home-hero__content {
        width: min(720px, 54vw);
    }

    .home-hero h1 {
        font-size: clamp(4.2rem, 5.8vw, 6rem);
        line-height: 0.88;
        letter-spacing: -0.045em;
    }
}

.home-hero__today {
    margin-left: 0.12em;
}

.pricing-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: auto;

    color: #07111f;

    font-size: 0.78rem;
    font-weight: 850;
}

.pricing-card__link>span {
    display: inline-block;
    color: #f6a000;

    transition: transform 0.25s ease;
}

.pricing-card:hover .pricing-card__link>span {
    transform: translate(3px, -3px);
}


/* Dark featured card */
.pricing-card--featured .pricing-card__link {
    color: #ffffff;
}

.pricing-card--featured .pricing-card__link>span {
    color: #f6a000;
}