/* =========================================
   Peace Region IT Inc.
   Base Styles
   ========================================= */

:root {
    --primary: #15803d;
    --primary-dark: #166534;
    --dark: #0f172a;
    --dark-light: #1e293b;
    --text: #334155;
    --muted: #64748b;
    --light: #f8fafc;
    --white: #ffffff;
    --border: #e2e8f0;

    --container: 1180px;

    --radius: 12px;

    --shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
}

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

.container {
    width: min(92%, var(--container));
    margin: 0 auto;
}


/* =========================================
   Navbar
   ========================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--border);
}

.navbar-container {
    min-height: 76px;

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

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;

    font-size: 18px;
    font-weight: 600;
}

.logo-mark {
    width: 40px;
    height: 40px;

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

    background: var(--primary);
    color: white;

    border-radius: 10px;

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

.logo-text strong {
    color: var(--primary);
}

.logo-text,
.nav-links a {
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: baseline;
    gap: 28px;

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

.nav-links a {
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-cta {
    padding: 10px 18px;

    background: var(--primary);
    color: white !important;

    border-radius: 8px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.nav-cta:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.mobile-menu-toggle {
    display: none;

    border: none;
    background: transparent;

    font-size: 26px;
    cursor: pointer;
}


/* =========================================
   Footer
   ========================================= */

.footer {
    margin-top: 80px;

    background: var(--dark);
    color: #cbd5e1;

    padding-top: 60px;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.5fr;

    gap: 50px;
}

.footer-brand p {
    margin-top: 20px;

    max-width: 350px;

    color: #94a3b8;
}

.footer h3 {
    color: white;

    font-size: 15px;

    margin-bottom: 18px;
}

.footer-grid > div:not(.footer-brand) {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.footer-grid a {
    color: #94a3b8;

    font-size: 14px;

    transition: color 0.2s ease;
}

.footer-grid a:hover {
    color: white;
}

.footer-grid p {
    color: #94a3b8;
    font-size: 14px;
}

.footer-bottom {
    margin-top: 50px;
    padding: 25px 0;

    border-top: 1px solid #334155;

    display: flex;
    justify-content: space-between;

    color: #64748b;

    font-size: 13px;
}

.footer-staff-link {
    color: #94a3b8;
    font-size: 13px;
    transition: color 0.2s ease;
}

.footer-staff-link:hover {
    color: #ffffff;
}


/* =========================================
   Responsive
   ========================================= */

@media (max-width: 980px) {

    .mobile-menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;

        position: absolute;

        top: 76px;
        left: 0;
        right: 0;

        padding: 25px;

        background: white;

        border-bottom: 1px solid var(--border);

        flex-direction: column;
        align-items: stretch;

        gap: 18px;
    }

    .nav-links.active {
        display: flex;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================
   Homepage
   ========================================= */

/* Quote request */
.quote-page {
    padding: 88px 0;
    background: #f8fafc;
}

.quote-container {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    max-width: 960px;
}

.quote-intro h1,
.quote-success h1 {
    color: var(--dark);
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.1;
}

.quote-intro p,
.quote-success p {
    margin-top: 18px;
    color: var(--muted);
    font-size: 17px;
}

.quote-form {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.form-field {
    margin-bottom: 18px;
}

.form-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--dark);
    font-size: 14px;
    font-weight: 700;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 11px 12px;
    color: var(--dark);
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.form-field textarea {
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 3px solid rgba(21, 128, 61, 0.16);
    border-color: var(--primary);
}

.field-error {
    margin-top: 6px;
    color: #b91c1c;
    font-size: 13px;
}

.form-error-summary {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 14px;
}

.form-error-summary ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.form-error-summary a {
    color: #92400e;
    font-weight: 700;
    text-decoration: underline;
}

.quote-success {
    display: block;
    max-width: 700px;
    text-align: center;
}

.quote-success .btn {
    margin-top: 28px;
}

@media (max-width: 760px) {
    .quote-page { padding: 62px 0; }
    .quote-container { grid-template-columns: 1fr; gap: 32px; }
    .quote-form { padding: 22px; }
}

.hero {
    background:
        linear-gradient(
            135deg,
            #ecfdf5 0%,
            #ffffff 55%,
            #f8fafc 100%
        );

    padding: 100px 0;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 70px;
}

.hero-eyebrow,
.section-label,
.section-heading > span {
    display: inline-block;

    color: var(--primary);

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

    letter-spacing: 1.5px;

    margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(46px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -3px;
    color: var(--dark);
}

.hero h1 span {
    color: var(--primary);
}

.hero-content > p {
    max-width: 650px;

    margin-top: 25px;

    color: var(--muted);

    font-size: 18px;
}

.hero-buttons {
    display: flex;
    gap: 14px;

    margin-top: 35px;
}

.btn {
    display: inline-flex;

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

    padding: 13px 22px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 700;

    transition: 0.2s ease;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    border: 1px solid var(--border);
    background: white;
    color: var(--dark);
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.hero-trust {
    display: flex;
    gap: 35px;

    margin-top: 50px;
}

.hero-trust div {
    display: flex;
    flex-direction: column;
}

.hero-trust strong {
    color: var(--dark);
    font-size: 15px;
}

.hero-trust span {
    color: var(--muted);
    font-size: 12px;
}


/* Hero visual */

.hero-visual {
    display: flex;
    justify-content: center;
}

.tech-card {
    width: 100%;
    max-width: 450px;

    padding: 18px;

    background: #0f172a;

    border-radius: 20px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.25);

    transform: rotate(2deg);
}

.tech-card-header {
    color: #cbd5e1;

    font-size: 12px;

    padding: 8px;
}

.status-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    margin-right: 7px;

    border-radius: 50%;

    background: #22c55e;
}

.tech-screen {
    margin-top: 15px;

    padding: 30px;

    min-height: 260px;

    background: #020617;

    border-radius: 12px;
}

.screen-line {
    width: 70%;
    height: 8px;

    margin-bottom: 15px;

    background: #334155;

    border-radius: 5px;
}

.screen-line.large {
    width: 90%;
}

.screen-line.short {
    width: 45%;
}

.screen-grid {
    display: grid;

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

    gap: 15px;

    margin-top: 30px;
}

.screen-grid div {
    height: 65px;

    background: #1e293b;

    border-radius: 8px;
}

.tech-card-footer {
    display: flex;
    justify-content: space-between;

    padding: 15px 8px 5px;

    color: #64748b;

    font-size: 11px;
}


/* =========================================
   Services
   ========================================= */

.services-section {
    padding: 110px 0;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.section-heading h2 {
    color: var(--dark);

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.section-heading p {
    margin-top: 18px;

    color: var(--muted);
}

.services-grid {
    display: grid;

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

    gap: 20px;
}

.service-card {
    padding: 30px;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    background: white;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow);
}

.service-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 25px;

    background: #ecfdf5;

    color: var(--primary);

    border-radius: 10px;

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

.service-card h3 {
    color: var(--dark);

    font-size: 18px;

    margin-bottom: 12px;
}

.service-card p {
    color: var(--muted);

    font-size: 14px;

    margin-bottom: 22px;
}

.service-card a {
    color: var(--primary);

    font-size: 13px;

    font-weight: 700;
}


/* =========================================
   Rentals
   ========================================= */

.rental-section {
    padding: 100px 0;

    background: var(--dark);

    color: white;
}

.rental-content {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 80px;

    align-items: center;
}

.rental-section h2 {
    font-size: clamp(34px, 4vw, 50px);

    line-height: 1.1;

    margin-bottom: 20px;
}

.rental-section p {
    max-width: 600px;

    color: #94a3b8;

    margin-bottom: 30px;
}

.rental-box {
    display: flex;

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

    gap: 20px;

    min-height: 250px;

    border: 1px solid #334155;

    border-radius: 20px;

    background: #1e293b;

    font-size: 60px;
}


/* =========================================
   Development
   ========================================= */

.development-section {
    padding: 110px 0;
}

.development-grid {
    display: grid;

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

    gap: 20px;
}

.development-grid > div {
    padding: 30px;

    background: var(--light);

    border-radius: var(--radius);
}

.development-grid h3 {
    color: var(--dark);

    margin-bottom: 10px;
}

.development-grid p {
    color: var(--muted);

    font-size: 14px;
}


/* =========================================
   Training
   ========================================= */

.training-section {
    padding: 90px 0;

    background: #ecfdf5;
}

.training-container {
    display: flex;

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

    gap: 40px;
}

.training-container h2 {
    color: var(--dark);

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.1;

    max-width: 650px;
}

.training-container p {
    margin-top: 15px;

    color: var(--muted);

    max-width: 600px;
}


/* =========================================
   Contact
   ========================================= */

.contact-section {
    padding: 120px 0;
}

.contact-container {
    text-align: center;
}

.contact-container h2 {
    color: var(--dark);

    font-size: clamp(36px, 5vw, 58px);

    line-height: 1.1;
}

.contact-container p {
    color: var(--muted);

    margin: 20px 0 30px;
}


/* =========================================
   Homepage Responsive
   ========================================= */

@media (max-width: 1000px) {

    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        margin-top: 30px;
    }

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

    .rental-content {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {

    .hero {
        padding: 70px 0;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-trust {
        gap: 20px;
        flex-wrap: wrap;
    }

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

    .training-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .rental-box {
        min-height: 180px;
        font-size: 40px;
    }


}
/* Office map address location */

.contact-map {
    padding: 0;
    overflow: hidden;
    min-height: 420px;
}

.contact-map iframe {
    display: block;
    width: 100% !important;
    height: 420px;
    min-height: 420px;
    border: 0;
}

.contact-details {
    margin-top: 28px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.contact-details p + p {
    margin-top: 20px;
}

.contact-map {
    min-height: 460px;
}

.contact-map iframe {
    height: 460px;
    min-height: 460px;
}

.policy-page {
    padding: 88px 0;
}

.policy-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 42px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.policy-content h1,
.policy-content h2 {
    color: var(--dark);
}

.policy-content h1 {
    font-size: clamp(36px, 5vw, 52px);
    margin-bottom: 12px;
}

.policy-content h2 {
    margin: 32px 0 10px;
    font-size: 22px;
}

.policy-content p,
.policy-content li {
    color: var(--muted);
    line-height: 1.7;
}

.policy-content ul {
    padding-left: 22px;
}

.form-note {
    margin: 4px 0 22px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.form-note a {
    color: var(--primary);
    font-weight: 700;
}

.service-help-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    padding: 2rem;
    border: 1px solid #c8e8d4;
    border-radius: 18px;
    background: #f0fbf4;
}

.service-help-panel h2 {
    margin: .45rem 0;
}

.service-help-panel p {
    margin: 0;
}

@media (max-width: 640px) {
    .service-help-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}

.rental-cancellation-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 28px;
    padding: 16px;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
    color: var(--dark);
}

.rental-cancellation-summary span {
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 600px) {
    .policy-page {
        padding: 56px 0;
    }

    .policy-content {
        padding: 28px 22px;
    }
}

.operations-page { padding: 76px 0; }
.operations-intro { max-width: 720px; margin-bottom: 32px; }
.operations-intro h1 { margin: 10px 0; color: var(--dark); font-size: clamp(36px, 5vw, 52px); }
.operations-intro p { color: var(--muted); line-height: 1.7; }
.operations-dashboard-link { display: inline-flex; align-items: center; margin-top: 8px; color: var(--primary); font-weight: 700; text-decoration: none; }
.operations-dashboard-link:hover { color: var(--primary-dark); text-decoration: underline; }
.operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.operations-card { padding: 30px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.operations-card h2 { margin: 0 0 8px; color: var(--dark); }
.operations-card > p { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.operations-card .btn { width: 100%; margin-top: 6px; }
.operations-message { margin: 0 0 20px; padding: 15px 18px; border-radius: 10px; }
.operations-message-success { background: #e7f7ed; color: #146c35; }
@media (max-width: 760px) { .operations-page { padding: 56px 0; } .operations-grid { grid-template-columns: 1fr; } }

/* =========================================
   2026 Homepage — We Come to You
   ========================================= */
:root {
    --primary: #147cff;
    --primary-dark: #0864dc;
    --electric: #22a7ff;
    --dark: #071426;
    --dark-light: #10233e;
    --text: #24364d;
    --muted: #62738a;
    --light: #f3f7fc;
    --border: #dce6f1;
    --radius: 16px;
}

.rental-sample-image,
.rental-detail-image {
    display: block;
    width: 100%;
    height: 190px;
    margin-bottom: 20px;
    border-radius: 12px;
    object-fit: cover;
    background: #e8f1fb;
}

.rental-detail-image { height: min(360px, 52vw); }

.rental-sample-placeholder,
.rental-detail-placeholder {
    display: grid;
    place-items: center;
    min-height: 150px;
    margin-bottom: 20px;
    border: 1px dashed #a7bdd5;
    border-radius: 12px;
    color: #53708f;
    background: linear-gradient(145deg, #edf5fd, #f8fbff);
    font-weight: 750;
    letter-spacing: .08em;
}

.navbar { background: rgba(5, 16, 33, .94); border-bottom-color: rgba(255,255,255,.08); }
.navbar-container { min-height: 78px; }
.logo { color: #fff; }
.logo-mark { position: relative; overflow: hidden; background: linear-gradient(135deg, #1584ff, #16b8ff); border-radius: 9px; box-shadow: 0 0 24px rgba(20,124,255,.3); }
.logo-mark::after { content: ""; position: absolute; width: 18px; height: 2px; background: rgba(255,255,255,.8); transform: rotate(-32deg); }
.logo-text strong { color: #55baff; }
.nav-links { gap: 24px; color: #b6c5d8; }
.nav-links a { line-height: 1.25; text-align: center; }
.nav-links a:hover { color: #fff; }
.nav-cta { background: #147cff; color: #fff !important; padding: 11px 19px; }
.nav-cta:hover { background: #2d8aff; }
.mobile-menu-toggle { color: #fff; }

.home-page { overflow: hidden; background: #fff; }
.home-page em { color: var(--primary); font-style: normal; }
.hero { position: relative; padding: 104px 0 0; color: #fff; background: #061326; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .22; background-image: linear-gradient(rgba(90,150,220,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(90,150,220,.12) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 69px; height: 1px; background: rgba(255,255,255,.09); }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-one { width: 620px; height: 620px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(16,123,255,.2), transparent 68%); }
.hero-glow-two { width: 400px; height: 400px; left: -240px; bottom: -80px; background: radial-gradient(circle, rgba(24,170,255,.12), transparent 70%); }
.hero-container { min-height: 570px; grid-template-columns: 1.05fr .95fr; gap: 62px; padding-bottom: 76px; }
.hero-content { position: relative; z-index: 3; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 8px 13px; color: #a9c9ed; border: 1px solid rgba(85,186,255,.25); border-radius: 100px; background: rgba(11,37,68,.72); letter-spacing: .8px; }
.hero-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #39b9ff; box-shadow: 0 0 0 5px rgba(57,185,255,.12); }
.hero h1 { max-width: 720px; color: #fff; font-size: clamp(52px, 6.2vw, 82px); letter-spacing: -4.5px; line-height: .98; }
.hero h1 em { display: inline-block; color: #28a7ff; }
.hero-content > .hero-lead { max-width: 600px; margin-top: 28px; color: #a9b9ce; font-size: 18px; line-height: 1.75; }
.hero-buttons { margin-top: 34px; }
.btn { min-height: 49px; padding: 13px 23px; border-radius: 9px; }
.btn-primary { gap: 14px; background: linear-gradient(135deg, #147cff, #169ee8); box-shadow: 0 10px 30px rgba(20,124,255,.22); }
.btn-primary:hover { background: linear-gradient(135deg, #2c8aff, #25a9f0); }
.btn-ghost { gap: 9px; color: #dbe8f8; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.035); }
.btn-ghost:hover { border-color: rgba(71,176,255,.5); background: rgba(255,255,255,.07); }
.phone-icon { color: #4cb6ff; }
.hero-proof { display: flex; align-items: center; gap: 15px; margin-top: 36px; }
.proof-faces { display: flex; padding-left: 7px; }
.proof-faces span { display: grid; width: 33px; height: 33px; margin-left: -7px; place-items: center; color: #fff; font-size: 9px; font-weight: 800; border: 2px solid #071426; border-radius: 50%; background: #17466f; }
.proof-faces span:nth-child(2) { background: #126caa; }.proof-faces span:nth-child(3) { background: #147cff; }
.stars { color: #4db7ff; font-size: 11px; letter-spacing: 2px; }
.hero-proof p { color: #8196af; font-size: 12px; }
.hero-visual { position: relative; min-height: 500px; align-items: center; }
.mobile-service-card { position: relative; z-index: 2; width: min(100%, 470px); overflow: hidden; border: 1px solid rgba(92,175,255,.27); border-radius: 18px; background: rgba(10,29,54,.92); box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.05); transform: rotate(1.5deg); }
.card-top { padding: 16px 20px; color: #849ab4; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #32d795; box-shadow: 0 0 10px #32d795; }
.route-map { position: relative; height: 290px; background: radial-gradient(circle at 70% 35%, rgba(20,124,255,.13), transparent 40%), #07182e; }
.route-map svg { width: 100%; height: 100%; }
.map-road { fill: none; stroke: #1a3655; stroke-width: 16; }.map-road.thin { stroke-width: 7; opacity: .6; }.route-line { fill: none; stroke: #159cff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 8; }.route-start,.route-end { fill: #37b5ff; }.route-end-ring { fill: rgba(23,145,255,.16); stroke: #1c9fff; stroke-width: 2; }
.dispatch-badge { position: absolute; right: 25px; top: 43px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(72,181,255,.25); border-radius: 10px; background: rgba(11,32,59,.92); box-shadow: 0 10px 25px rgba(0,0,0,.25); }
.dispatch-badge > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #147cff; font-size: 12px; }.dispatch-badge div { display: flex; flex-direction: column; }.dispatch-badge strong { font-size: 11px; }.dispatch-badge small { color: #7890ac; font-size: 9px; }
.card-bottom { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 20px; }.card-bottom div { display: flex; flex-direction: column; }.card-bottom div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.08); }.card-bottom small { color: #637b98; font-size: 8px; font-weight: 800; letter-spacing: 1px; }.card-bottom strong { color: #ddecff; font-size: 12px; }
.floating-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid rgba(95,180,255,.2); border-radius: 12px; background: rgba(10,31,58,.96); box-shadow: 0 16px 35px rgba(0,0,0,.3); }.floating-chip > span { display: grid; width: 31px; height: 31px; place-items: center; color: #4bb6ff; border-radius: 8px; background: rgba(20,124,255,.14); }.floating-chip div { display: flex; flex-direction: column; }.floating-chip strong { font-size: 11px; }.floating-chip small { color: #7187a2; font-size: 9px; }.chip-fast { top: 35px; right: -15px; }.chip-local { left: -25px; bottom: 40px; }
.signal-ring { position: absolute; border: 1px solid rgba(41,146,255,.13); border-radius: 50%; }.ring-one { width: 520px; height: 520px; }.ring-two { width: 380px; height: 380px; }.service-orbit { position: absolute; width: 570px; height: 570px; border: 1px dashed rgba(37,146,255,.12); border-radius: 50%; }.service-orbit span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #269fff; box-shadow: 0 0 12px #269fff; }.service-orbit span:nth-child(1) { top: 18%; left: 10%; }.service-orbit span:nth-child(2) { right: 3%; top: 52%; }.service-orbit span:nth-child(3) { bottom: 4%; left: 35%; }
.hero-strip { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #617891; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }.hero-strip p { color: #405873; font-weight: 500; letter-spacing: 0; }

.services-section { padding: 105px 0; background: #f7faff; }
.section-heading.centered { max-width: 760px; margin: 0 auto 55px; text-align: center; }
.section-kicker { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: 1.7px; }
.section-heading h2,.why-content h2 { margin-top: 14px; color: #0b1b31; font-size: clamp(36px,4vw,52px); line-height: 1.08; letter-spacing: -2px; }
.section-heading p { max-width: 580px; margin: 18px auto 0; font-size: 16px; }
.services-grid { grid-template-columns: repeat(4,1fr); gap: 16px; }
.service-card { position: relative; min-height: 310px; padding: 29px 25px; border-color: #e2eaf3; border-radius: 15px; box-shadow: 0 8px 28px rgba(17,48,84,.04); }
.service-card.featured { color: #fff; border-color: #147cff; background: linear-gradient(145deg,#117cf4,#0864cf); box-shadow: 0 18px 45px rgba(16,115,224,.22); }
.service-icon { width: 45px; height: 45px; margin-bottom: 44px; color: #1584ef; background: #eaf4ff; font-size: 16px; }.featured .service-icon { color: #fff; background: rgba(255,255,255,.15); }
.service-number { position: absolute; top: 31px; right: 25px; color: #c7d3e1; font-size: 11px; font-weight: 700; }.featured .service-number { color: rgba(255,255,255,.55); }
.service-card h3 { color: #10233c; font-size: 18px; }.service-card p { line-height: 1.7; }.featured h3,.featured p,.featured a { color: #fff; }.featured p { opacity: .75; }.service-card a { position: absolute; left: 25px; bottom: 28px; }.service-card a span { margin-left: 5px; }

.why-section { padding: 115px 0; }.why-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }.why-visual { position: relative; padding: 36px; }.why-visual::before { content:""; position:absolute; inset:0; border-radius: 28px; background: #eef6ff; transform: rotate(-4deg); }.why-panel { position:relative; padding: 48px; color:#fff; border-radius:22px; background: linear-gradient(145deg,#07182d,#0e2c50); box-shadow:0 30px 65px rgba(12,42,75,.22); }.panel-label { color:#6fa7d8; font-size:10px; font-weight:800; letter-spacing:1.7px; }.big-stat { margin-top:30px; font-size:105px; font-weight:800; line-height:1; letter-spacing:-7px; }.big-stat span { color:#28a7ff; font-size:30px; letter-spacing:-1px; }.why-panel > p { max-width:260px; margin-top:10px; color:#91a9c2; }.mini-route { display:flex; align-items:center; gap:12px; margin-top:45px; color:#829bb6; font-size:9px; font-weight:800; letter-spacing:1px; }.mini-route i { position:relative; flex:1; height:1px; border-top:1px dashed #2875b9; }.mini-route i::after { content:"→"; position:absolute; right:0; top:-10px; color:#28a7ff; font-size:16px; }
.why-content > p { margin-top:22px; color:var(--muted); font-size:16px; line-height:1.8; }.why-content ul { margin:30px 0; list-style:none; }.why-content li { display:flex; gap:14px; align-items:flex-start; margin-top:18px; }.why-content li > span { display:grid; flex:0 0 27px; height:27px; place-items:center; color:#147cff; border-radius:50%; background:#e9f4ff; font-size:12px; font-weight:800; }.why-content li div { display:flex; flex-direction:column; }.why-content li strong { color:#12243b; font-size:14px; }.why-content li small { color:#75859a; font-size:13px; }.text-link { color:#147cff; font-size:13px; font-weight:800; }
.steps-section { padding: 100px 0; background:#071426; }.steps-section .section-heading h2 { color:#fff; }.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:55px; background:rgba(255,255,255,.1); }.steps-grid > div { position:relative; padding:25px 48px; background:#071426; text-align:center; }.steps-grid span { display:grid; width:52px; height:52px; margin:0 auto 22px; place-items:center; color:#43afff; border:1px solid rgba(63,175,255,.3); border-radius:50%; font-weight:800; }.steps-grid h3 { color:#fff; font-size:17px; }.steps-grid p { margin-top:8px; color:#7890ab; font-size:13px; }
.home-cta { padding:90px 0; }.cta-card { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:55px 62px; color:#fff; border-radius:22px; background:linear-gradient(125deg,#0874ed,#159ee9); box-shadow:0 24px 60px rgba(12,113,224,.22); }.cta-card .section-kicker { color:#bce5ff; }.cta-card h2 { margin-top:8px; font-size:clamp(31px,4vw,46px); letter-spacing:-1.5px; }.cta-card p { margin-top:7px; color:#d1ebff; }.cta-actions { display:flex; gap:12px; flex-shrink:0; }.btn-light { color:#0d6ed0; background:#fff; }.btn-outline-light { color:#fff; border:1px solid rgba(255,255,255,.45); }

.footer { margin-top:0; background:#050f1e; }.footer .logo-mark { background:linear-gradient(135deg,#1584ff,#16b8ff); }.footer-bottom { border-color:#1d2d42; }
@media (max-width: 1050px) { .hero-container { grid-template-columns:1fr; }.hero-content { max-width:720px; }.hero-visual { width:min(100%,600px); margin:10px auto 0; }.services-grid { grid-template-columns:repeat(2,1fr); }.why-grid { gap:50px; }.hero-strip span:last-child { display:none; } }
@media (max-width: 1120px) { .nav-links { gap:14px; font-size:12px; }.nav-cta { padding:10px 13px; } }
@media (max-width: 980px) { .nav-links { top:78px; background:#071426; border-color:rgba(255,255,255,.1); }.nav-links a { text-align:left; }.why-grid { grid-template-columns:1fr; }.why-visual { max-width:580px; margin:auto; }.steps-grid { grid-template-columns:1fr; background:transparent; gap:25px; }.steps-grid > div { padding:12px 25px; }.cta-card { align-items:flex-start; flex-direction:column; }.hero-strip { flex-wrap:wrap; justify-content:center; padding:20px 0; }.hero-strip p { width:100%; text-align:center; } }
@media (max-width: 600px) { .hero { padding-top:72px; }.hero-container { padding-bottom:45px; }.hero h1 { font-size:49px; letter-spacing:-3px; }.hero-content > .hero-lead { font-size:16px; }.hero-buttons { align-items:stretch; }.hero-visual { width:100%; min-height:390px; margin:0 auto -15px; }.chip-fast { top:18px; right:0; }.chip-local { left:0; bottom:0; }.mobile-service-card { width:100%; min-width:0; }.route-map { height:245px; }.services-section,.why-section,.steps-section { padding:75px 0; }.services-grid { grid-template-columns:1fr; }.service-card { min-height:280px; }.why-visual { padding:18px; }.why-panel { padding:35px 28px; }.big-stat { font-size:82px; }.cta-card { padding:38px 27px; }.cta-actions { width:100%; flex-direction:column; }.footer { padding-top:50px; } }

/* Cinematic homepage revision */
.cinematic-home { color:#d8e8fb; background:#030a12; }
.cinematic-home .container { width:min(94%,1240px); }
.cinematic-home em { color:#149cff; font-style:normal; }
.cinematic-hero { position:relative; min-height:680px; overflow:hidden; background:#020812; }
.hero-scene-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.92; }
.hero-scene-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,8,18,.98) 0%,rgba(2,8,18,.9) 31%,rgba(2,8,18,.26) 58%,rgba(2,8,18,.08) 100%),linear-gradient(0deg,rgba(2,8,18,.9),transparent 30%); }
.cinematic-hero-inner { position:relative; min-height:680px; display:flex; align-items:center; }
.cinematic-copy { position:relative; z-index:2; width:48%; padding:70px 0; }
.micro-label { color:#26a8ff; font-size:10px; font-weight:800; letter-spacing:1.6px; }
.cinematic-copy h1 { margin-top:18px; color:#fff; font-size:clamp(46px,5.2vw,72px); line-height:1.02; letter-spacing:-3.8px; }
.cinematic-copy p { max-width:520px; margin-top:22px; color:#b0c2d8; font-size:15px; line-height:1.65; }
.hero-actions { display:flex; gap:12px; margin-top:28px; }.btn-glass { color:#d9eaff; border:1px solid rgba(98,174,255,.35); background:rgba(4,17,34,.68); }.btn-glass:hover { border-color:#218fff; background:#0a2647; }
.hero-trust-line { margin-top:25px; color:#7893af; font-size:11px; }.hero-trust-line span { margin-right:7px; color:#29adff; }
.scene-callouts { position:absolute; inset:0; pointer-events:none; }.scene-callout { position:absolute; display:flex; align-items:center; gap:9px; padding:9px 11px; color:#fff; border:1px solid rgba(50,154,255,.22); border-radius:9px; background:rgba(3,14,28,.72); backdrop-filter:blur(8px); box-shadow:0 8px 25px rgba(0,0,0,.28); }.scene-callout b { display:grid; width:27px; height:27px; place-items:center; color:#43b4ff; border-radius:7px; background:rgba(25,128,255,.15); }.scene-callout span { display:flex; flex-direction:column; }.scene-callout strong { font-size:10px; }.scene-callout small { color:#7890a9; font-size:8px; }.callout-security { left:53%; top:24%; }.callout-setup { left:66%; top:15%; }.callout-wifi { right:3%; top:23%; }.callout-printer { right:2%; top:54%; }
.doorstep-section { padding:76px 0 86px; background:#06111f; }.compact-heading { margin-bottom:30px; }.compact-heading h2 { margin-top:8px; color:#fff; font-size:35px; line-height:1.02; letter-spacing:-1.5px; }.compact-heading > p { margin-top:9px; color:#8397ad; font-size:13px; }.doorstep-layout { display:grid; grid-template-columns:.8fr 2.2fr; gap:38px; }.doorstep-intro { color:#899db3; font-size:12px; line-height:1.7; }.doorstep-intro ul { margin-top:22px; list-style:none; }.doorstep-intro li { margin-top:9px; color:#b7c7d9; }.doorstep-intro li span { margin-right:8px; color:#1fa9ff; }.visit-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.visit-cards article { overflow:hidden; padding-bottom:20px; border:1px solid #17304d; border-radius:12px; background:#09192c; }.visit-art { position:relative; height:128px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 100%,rgba(34,141,255,.42),transparent 55%),linear-gradient(145deg,#112c4d,#071321); }.visit-art::before,.visit-art::after { content:""; position:absolute; width:95px; height:95px; border:1px solid rgba(53,156,255,.18); border-radius:50%; }.visit-art::after { width:135px; height:135px; }.visit-art span { position:relative; z-index:1; display:grid; width:62px; height:62px; place-items:center; color:#6fc5ff; border:2px solid #168df1; border-radius:18px; background:linear-gradient(145deg,#153b67,#07182d); font-size:26px; font-weight:800; box-shadow:0 0 28px rgba(31,143,255,.35); }.visit-cards h3,.visit-cards p,.visit-cards a { margin-left:18px; margin-right:18px; }.visit-cards h3 { margin-top:16px; color:#fff; font-size:14px; }.visit-cards p { min-height:49px; margin-top:7px; color:#7e93aa; font-size:10px; line-height:1.55; }.visit-cards a { display:inline-block; margin-top:13px; color:#24a9ff; font-size:10px; font-weight:700; }
.solutions-section { padding:0 0 18px; background:#06111f; }.solutions-panel { padding:36px 36px 26px; border:1px solid #17304c; border-radius:13px; background:linear-gradient(145deg,#081a2d,#061321); }.compact-heading.centered { margin-bottom:27px; text-align:center; }.compact-heading.centered h2 { font-size:25px; }.solution-grid { display:grid; grid-template-columns:repeat(6,1fr); }.solution-grid a { display:flex; min-height:150px; padding:12px 15px; align-items:center; flex-direction:column; text-align:center; border-right:1px solid #18304a; }.solution-grid a:last-child { border:0; }.solution-grid a > span { display:grid; width:45px; height:45px; margin-bottom:13px; place-items:center; color:#47b6ff; border-radius:12px; background:#0e2947; font-size:19px; font-weight:800; }.solution-grid strong { color:#edf6ff; font-size:12px; line-height:1.35; }.solution-grid small { margin-top:7px; color:#67819d; font-size:8px; line-height:1.5; }.all-services-link { display:block; width:max-content; margin:18px auto 0; padding:8px 14px; color:#30afff; border:1px solid #1378c4; border-radius:6px; font-size:9px; font-weight:800; }
.support-cta-section { padding:18px 0 36px; background:#06111f; }.support-cta-panel { display:grid; grid-template-columns:1.25fr 1.5fr .75fr; gap:30px; align-items:center; padding:25px 30px; border:1px solid #126ab0; border-radius:12px; background:linear-gradient(115deg,#082442,#071a31); }.support-cta-panel h2 { margin-top:4px; color:#fff; font-size:25px; }.support-cta-panel > div > p { margin-top:7px; color:#9bb0c6; font-size:13px; line-height:1.55; }.support-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.support-benefits > span { display:grid; grid-template-columns:30px 1fr; row-gap:3px; }.support-benefits b { grid-row:1/3; color:#2eacff; font-size:17px; }.support-benefits strong { color:#eef7ff; font-size:15.5px; line-height:1.3; }.support-benefits small { color:#91a7be; font-size:9.5px; line-height:1.5; }.support-actions { display:flex; flex-direction:column; gap:10px; }.support-actions .btn { min-height:42px; padding:10px 14px; font-size:12px; }.support-actions > a:last-child { color:#91a7be; font-size:10px; line-height:1.45; text-align:center; }.support-actions > a:last-child strong { color:#e8f3ff; font-size:13px; }
.cinematic-home + .footer { border-top:1px solid #132943; }
@media(max-width:1000px){.cinematic-copy{width:62%}.scene-callout{display:none}.doorstep-layout{grid-template-columns:1fr}.solution-grid{grid-template-columns:repeat(3,1fr);gap:20px}.solution-grid a{border:0}.support-cta-panel{grid-template-columns:1fr}.support-actions{flex-direction:row;align-items:center}}
@media(max-width:650px){.cinematic-hero,.cinematic-hero-inner{min-height:760px}.hero-scene-image{object-position:68% center;opacity:.64}.hero-scene-shade{background:linear-gradient(180deg,rgba(2,8,18,.96) 0%,rgba(2,8,18,.82) 50%,rgba(2,8,18,.55) 100%)}.cinematic-hero-inner{align-items:flex-start}.cinematic-copy{width:100%;padding-top:80px}.cinematic-copy h1{font-size:46px;letter-spacing:-2.5px}.hero-actions{flex-direction:column;align-items:stretch}.visit-cards{grid-template-columns:1fr}.solution-grid{grid-template-columns:repeat(2,1fr)}.solutions-panel{padding:30px 16px}.support-benefits{grid-template-columns:1fr}.support-actions{flex-direction:column;align-items:stretch}}

/* Service area discovery and landing page */
.home-service-area { padding:18px 0; background:#06111f; }
.home-service-area-panel { display:flex; align-items:center; justify-content:space-between; gap:45px; padding:28px 32px; border:1px solid #173553; border-radius:12px; background:linear-gradient(120deg,#071b31,#0a2340); }
.home-service-area-panel h2 { max-width:700px; margin-top:6px; color:#fff; font-size:23px; letter-spacing:-.6px; }
.home-service-area-panel p { max-width:760px; margin-top:8px; color:#8299b2; font-size:11px; line-height:1.65; }
.home-service-area-panel .btn { flex:0 0 auto; font-size:11px; }
.service-area-page { color:#d9e8f8; background:#06111f; }
.service-area-page em { color:#149cff; font-style:normal; }
.service-area-hero { position:relative; padding:105px 0 95px; overflow:hidden; background:radial-gradient(circle at 75% 30%,rgba(19,128,237,.18),transparent 35%),linear-gradient(145deg,#020a14,#081a30); }
.service-area-hero::after { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(63,135,205,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(63,135,205,.15) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(to bottom,black,transparent); }
.service-area-hero .container { position:relative; z-index:1; }
.service-area-hero h1 { max-width:760px; margin-top:14px; color:#fff; font-size:clamp(48px,7vw,78px); line-height:.98; letter-spacing:-4px; }
.service-area-hero p { max-width:680px; margin-top:25px; color:#9bb0c6; font-size:16px; line-height:1.75; }
.service-area-actions { display:flex; gap:12px; margin-top:30px; }
.service-area-content { padding:85px 0 95px; }
.service-area-grid { display:grid; gap:28px; }
.area-group { padding:38px; border:1px solid #18334f; border-radius:15px; background:#08182a; }
.area-time { display:flex; align-items:center; gap:15px; margin-bottom:28px; }
.area-time > span { display:grid; width:48px; height:48px; place-items:center; color:#53bbff; border:1px solid #176cae; border-radius:12px; background:#0b2846; font-size:14px; font-weight:800; }
.area-time div { display:flex; flex-direction:column; }.area-time strong { color:#fff; font-size:22px; }.area-time small { color:#6e89a5; font-size:11px; }
.location-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.location-list article { padding:18px; border:1px solid #142c45; border-radius:9px; background:#061321; }
.location-list h2 { color:#edf7ff; font-size:14px; }.location-list p { margin-top:5px; color:#7189a2; font-size:10px; line-height:1.5; }
.route-note { margin-top:22px; padding:15px 17px; color:#8199b1; border-left:2px solid #159cff; background:#071524; font-size:11px; line-height:1.65; }
.area-disclaimer { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:32px 38px; border:1px solid #1573bb; border-radius:14px; background:linear-gradient(120deg,#092745,#07182a); }
.area-disclaimer > div { display:grid; grid-template-columns:45px 1fr; column-gap:15px; }.area-disclaimer > div > span { grid-row:1/3; display:grid; width:45px; height:45px; place-items:center; color:#54beff; border-radius:12px; background:#0d3458; font-size:20px; }.area-disclaimer h2 { color:#fff; font-size:20px; }.area-disclaimer p { max-width:720px; margin-top:5px; color:#8299b0; font-size:11px; line-height:1.65; }
.route-sources { display:flex; flex-wrap:wrap; gap:8px 18px; padding:0 5px; color:#526c86; font-size:9px; }.route-sources p { width:100%; }.route-sources a { color:#6685a4; text-decoration:underline; }
@media(max-width:900px){.location-list{grid-template-columns:repeat(2,1fr)}.home-service-area-panel{align-items:flex-start;flex-direction:column}.area-disclaimer{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.service-area-hero{padding:78px 0 68px}.service-area-hero h1{font-size:49px;letter-spacing:-3px}.service-area-actions{flex-direction:column}.service-area-content{padding:60px 0}.area-group{padding:24px 18px}.area-time strong{font-size:18px}.location-list{grid-template-columns:1fr}.area-disclaimer{padding:26px 20px}.area-disclaimer > div{grid-template-columns:1fr}.area-disclaimer > div > span{grid-row:auto;margin-bottom:13px}.home-service-area-panel{padding:25px 22px}}