html {
    scroll-behavior: smooth;
}

body {
    padding-top: 74px;
    color: #16202a;
    background: #f6f8fb;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

h1,
h2,
h3,
h4,
.navbar-brand {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
}

p {
    color: #4d5963;
}

a,
a:hover,
a:visited,
a:link,
a:active {
    color: inherit;
    text-decoration: none;
}

.btn {
    border-radius: 6px;
    border-width: 0;
    font-weight: 800;
    letter-spacing: 0;
    padding: 12px 18px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(12, 32, 53, .16);
}

.btn-primary {
    background: #1268c4;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #0d559f;
}

.btn-default {
    background: #fff;
    color: #16202a !important;
    border: 1px solid rgba(22, 32, 42, .14);
}

.modern-nav {
    min-height: 74px;
    background: rgba(255, 255, 255, .95);
    border: 0;
    box-shadow: 0 10px 30px rgba(22, 32, 42, .08);
}

.modern-nav .container {
    min-height: 74px;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 10px 15px;
    color: #101923 !important;
}

.brand-logo {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.brand-name {
    font-size: 19px;
    line-height: 1;
    white-space: nowrap;
}

.modern-nav .navbar-nav > li > a {
    color: #22313f;
    font-weight: 800;
    padding-bottom: 27px;
    padding-top: 27px;
}

.modern-nav .navbar-nav > li > a:hover,
.modern-nav .navbar-nav > li > a:focus {
    color: #1268c4;
}

.modern-nav .navbar-toggle {
    margin-top: 19px;
    border: 0;
}

.modern-nav .navbar-toggle .icon-bar {
    background: #16202a;
}

.modern-hero {
    min-height: calc(100vh - 74px);
    display: flex;
    align-items: center;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(11, 25, 38, .93), rgba(11, 25, 38, .72) 48%, rgba(11, 25, 38, .24)),
        url('../pics/networking.jpg') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

.modern-hero:after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 160px;
    background: linear-gradient(0deg, rgba(246, 248, 251, 1), rgba(246, 248, 251, 0));
}

.modern-hero .container {
    position: relative;
    z-index: 1;
}

.hero-layout {
    padding: 90px 0 42px;
}

.eyebrow {
    color: #1268c4;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.modern-hero .eyebrow {
    color: #93c7ff;
}

.modern-hero h1 {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    margin: 0 0 22px;
    max-width: 900px;
}

.hero-lede {
    color: rgba(255, 255, 255, .88);
    font-size: 22px;
    line-height: 1.5;
    max-width: 760px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 32px 0;
}

.brand-strip,
.hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brand-strip span,
.hero-highlights span {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    color: #fff;
    font-weight: 800;
    padding: 10px 13px;
}

.hero-highlights {
    margin-bottom: 70px;
}

.hero-highlights i {
    color: #7bd88f;
    margin-right: 7px;
}

.section-block {
    padding: 78px 0;
}

.muted-band {
    background: #fff;
}

.section-heading {
    margin-bottom: 30px;
    max-width: 820px;
}

.section-heading h2,
.contact-band h2 {
    color: #16202a;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.12;
    margin: 0;
}

.split-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    max-width: none;
}

.feature-card,
.service-card,
.plan-card {
    background: #fff;
    border: 1px solid rgba(22, 32, 42, .09);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(22, 32, 42, .07);
    height: 100%;
    overflow: hidden;
}

.image-card img {
    display: block;
    height: 235px;
    object-fit: cover;
    width: 100%;
}

.image-card div,
.service-card,
.plan-card {
    padding: 28px;
}

.card-label {
    background: #e7f1fb;
    border-radius: 6px;
    color: #1268c4;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 14px;
    padding: 7px 10px;
    text-transform: uppercase;
}

.feature-card h3,
.service-card h3,
.plan-card h3 {
    color: #16202a;
    font-size: 24px;
    line-height: 1.18;
    margin: 0 0 12px;
}

.service-card i {
    align-items: center;
    background: #e7f1fb;
    border-radius: 8px;
    color: #1268c4;
    display: flex;
    font-size: 24px;
    height: 54px;
    justify-content: center;
    margin-bottom: 22px;
    width: 54px;
}

.service-card.accent-green i {
    background: #e7f7eb;
    color: #16803a;
}

.service-card.accent-gold i {
    background: #fff3d8;
    color: #a66a00;
}

.clean-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.clean-list li {
    color: #3c4852;
    margin-bottom: 10px;
}

.clean-list i {
    color: #16803a;
    margin-right: 8px;
}

.plan-card {
    border-top: 5px solid #a76c3a;
}

.plan-card.silver {
    border-top-color: #78838c;
}

.plan-card.gold {
    border-top-color: #d2a32c;
}

.featured-plan {
    transform: translateY(-10px);
}

.contact-band {
    background: #11202d;
    color: #fff;
}

.contact-band h2,
.contact-band p,
.contact-band a {
    color: #fff;
}

.contact-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: 140px;
}

.page-hero {
    background: #11202d;
    color: #fff;
    padding: 104px 0 72px;
    position: relative;
}

.page-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .28;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.services-hero:before {
    background: url('../pics/services2.jpg') center center / cover no-repeat;
}

.contact-hero:before {
    background: url('../pics/central.jpg') center center / cover no-repeat;
}

.page-hero h1 {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 52px;
    line-height: 1.08;
    margin: 0 0 18px;
    max-width: 900px;
}

.page-hero p:not(.eyebrow) {
    color: rgba(255, 255, 255, .86);
    font-size: 20px;
    max-width: 720px;
}

.detailed-grid .service-card {
    min-height: 330px;
}

.wide-copy {
    color: #33414c;
    font-size: 20px;
    max-width: 880px;
}

.contact-page {
    background: #f6f8fb;
}

.contact-card {
    background: #fff;
    border: 1px solid rgba(22, 32, 42, .09);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(22, 32, 42, .07);
    min-height: 100%;
    padding: 32px;
}

.primary-contact-card {
    border-top: 5px solid #1268c4;
}

.contact-logo {
    height: 72px;
    margin-bottom: 18px;
    object-fit: contain;
    width: 92px;
}

.contact-card h2,
.contact-card h3 {
    color: #16202a;
    margin-top: 0;
}

.contact-line {
    color: #3c4852;
    font-size: 17px;
    margin-bottom: 16px;
    padding-left: 30px;
    position: relative;
}

.contact-line i {
    color: #1268c4;
    left: 0;
    position: absolute;
    top: 5px;
}

.contact-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.map-card {
    min-height: 360px;
}

.map-preview {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(18, 104, 196, .86), rgba(17, 32, 45, .82)),
        url('../pics/central.jpg') center center / cover no-repeat;
    border-radius: 8px;
    color: #fff;
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
    min-height: 210px;
    padding: 28px;
}

.map-preview i {
    background: #fff;
    border-radius: 8px;
    color: #1268c4;
    font-size: 28px;
    height: 62px;
    line-height: 62px;
    text-align: center;
    width: 62px;
}

.map-preview h3,
.map-preview p {
    color: #fff;
    margin: 0;
}

@media (max-width: 991px) {
    body {
        padding-top: 68px;
    }

    .modern-nav,
    .modern-nav .container,
    .brand-lockup {
        min-height: 68px;
    }

    .brand-logo {
        height: 46px;
        width: 46px;
    }

    .brand-name {
        font-size: 17px;
    }

    .modern-nav .navbar-nav > li > a {
        padding-bottom: 14px;
        padding-top: 14px;
    }

    .modern-hero {
        min-height: auto;
    }

    .hero-layout {
        padding: 72px 0 30px;
    }

    .modern-hero h1,
    .page-hero h1,
    .section-heading h2,
    .contact-band h2 {
        font-size: 42px;
    }

    .split-heading {
        align-items: flex-start;
        display: block;
    }

    .split-heading .btn {
        margin-top: 18px;
    }

    .feature-card,
    .service-card,
    .plan-card,
    .contact-card {
        margin-bottom: 24px;
    }

    .featured-plan {
        transform: none;
    }

    .contact-actions {
        justify-content: flex-start;
        min-height: 0;
        padding-top: 18px;
    }
}

@media (max-width: 640px) {
    .brand-name {
        display: none;
    }

    .modern-hero,
    .page-hero {
        text-align: left;
    }

    .modern-hero h1,
    .page-hero h1,
    .section-heading h2,
    .contact-band h2 {
        font-size: 36px;
    }

    .hero-lede,
    .page-hero p:not(.eyebrow),
    .wide-copy {
        font-size: 18px;
    }

    .hero-actions .btn,
    .contact-button-row .btn {
        width: 100%;
    }

    .section-block {
        padding: 56px 0;
    }
}

.tablePrice{

    font-size: 30px;

    font-weight: bold;

    color: #001ee1;

}

.hours{

    font-weight: bold;

    font-size: 25px;

}

.checks{

    color:#001ee1;

}

.alignMiddle{

    vertical-align: middle !important;

}

.tablePadding{

    border-left: 10px solid white;

    border-right: 10px solid white;

}

.trLead{

    width: 40%

}

.trFollow{

    width: 20%

}

.angular-google-map-container {

        height: 400px;

}

.divContent{

    padding-top: 50px;

}

/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */

.business-header {

    height: 350px;

    background: url('../pics/background.jpg') center center no-repeat scroll;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    background-size: cover;

    -o-background-size: cover;

}

/* Customize the text color and shadow color and to optimize text legibility. */

.tagline {

    text-shadow: 0 0 10px #000;

    color: #fff;

}

.img-center {

    margin: 0 auto;

}

.center-image{

    width:100%;

    display: block; 

    margin-left: auto; 

    margin-right: auto;

}

.noPointer{

    cursor: default;

}

footer,
.site-footer {
    background: #0d1823;
    color: rgba(255, 255, 255, .78);
    margin: 0;
    padding: 0;
}

.footer-grid {
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(230px, 1.1fr) minmax(125px, .4fr) minmax(195px, .68fr) minmax(165px, .58fr) minmax(200px, .68fr);
    padding: 42px 15px 34px;
}

.footer-grid:before,
.footer-grid:after,
.footer-bottom:before,
.footer-bottom:after {
    content: none;
    display: none;
}

.footer-brand-block strong {
    color: #fff;
    display: block;
    font-size: 22px;
    margin-bottom: 12px;
}

.site-footer p,
.site-footer a {
    color: rgba(255, 255, 255, .74);
}

.site-footer p {
    margin: 0;
}

.site-footer a {
    display: block;
    font-weight: 700;
    line-height: 1.55;
    margin-bottom: 8px;
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #fff;
    text-decoration: none;
}

.footer-bottom {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    justify-content: space-between;
    padding: 18px 15px;
}

.footer-bottom p {
    color: rgba(255, 255, 255, .58);
    font-size: 13px;
}

.footer-bottom p:last-child {
    align-items: center;
    display: flex;
    gap: 14px;
}

.site-footer .employee-login-link {
    border-left: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .5);
    display: inline-block;
    font-size: 12px;
    letter-spacing: .08em;
    margin: 0;
    padding-left: 14px;
    text-transform: uppercase;
}

.site-footer .employee-login-link:hover,
.site-footer .employee-login-link:focus {
    color: #fff;
}

#success_message{ 

    display: none;

}

.col-centered {

    display:inline-block;

    float:none;

    /* reset the text-align */

    text-align:left;

    /* inline-block space fix */

    margin-right:-4px;

}

.serviceLink{

    text-decoration: none; 

    color: #333;

}

.serviceLink:hover{

    text-decoration: none;

    color: black;

}

.serviceLink:hover .fa-inverse{

    text-decoration: none;

    color: black;

}

/* Minimal redesign */
body {
    background: #fff;
    color: #111820;
    font-size: 16px;
    line-height: 1.6;
    padding-top: 68px;
}

p {
    color: #53606b;
}

.modern-nav {
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid #e6ebef;
    box-shadow: none;
    min-height: 68px;
}

.modern-nav .container,
.brand-lockup {
    min-height: 68px;
}

.brand-lockup {
    gap: 10px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.brand-logo {
    height: 46px;
    width: 46px;
}

.brand-name {
    font-size: 17px;
}

.modern-nav .navbar-nav > li > a {
    color: #1f2933;
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 24px;
    padding-top: 24px;
}

.btn {
    border-radius: 4px;
    box-shadow: none;
    font-size: 15px;
    padding: 12px 18px;
}

.btn:hover,
.btn:focus {
    box-shadow: none;
    transform: none;
}

.btn-primary {
    background: #0b5cab;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #084f94;
}

.btn-default {
    background: #fff;
    border: 1px solid #cfd7df;
}

.minimal-hero {
    align-items: center;
    background:
        linear-gradient(90deg, rgba(8, 18, 28, .94), rgba(8, 18, 28, .78) 56%, rgba(8, 18, 28, .48)),
        url('../pics/networking.jpg') center center / cover no-repeat;
    color: #fff;
    display: flex;
    min-height: calc(100vh - 68px);
    padding: 90px 0;
}

.minimal-hero-copy {
    max-width: 760px;
}

.minimal-hero h1,
.minimal-page-hero h1 {
    color: inherit;
    font-size: clamp(44px, 7vw, 78px);
    font-weight: 800;
    line-height: 1;
    margin: 0 0 24px;
    max-width: 820px;
}

.minimal-hero .eyebrow {
    color: #9dccff;
}

.minimal-hero .hero-lede,
.minimal-hero .quiet-note {
    color: rgba(255, 255, 255, .86);
}

.minimal-hero .hero-lede {
    font-size: 21px;
    line-height: 1.55;
    max-width: 680px;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 30px 0 18px;
}

.minimal-hero .btn-default {
    background: rgba(255, 255, 255, .94);
    border-color: transparent;
}

.quiet-note {
    font-size: 15px;
    margin: 0;
}

.minimal-section {
    padding: 82px 0;
}

.intro-section,
.secondary-details,
.muted-minimal {
    background: #f7f9fb;
}

.minimal-two-column {
    display: grid;
    gap: 56px;
    grid-template-columns: minmax(260px, 420px) 1fr;
}

.minimal-two-column h2,
.minimal-heading-row h2,
.minimal-call-band h2 {
    color: #111820;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.12;
    margin: 0;
}

.minimal-copy-block {
    max-width: 680px;
}

.minimal-copy-block p {
    font-size: 18px;
    margin: 0 0 18px;
}

.minimal-copy-block p:last-child {
    margin-bottom: 0;
}

.minimal-heading-row {
    align-items: end;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin-bottom: 34px;
}

.text-link {
    border-bottom: 1px solid currentColor;
    color: #0b5cab !important;
    font-weight: 800;
    white-space: nowrap;
}

.company-list,
.detail-list,
.service-briefs,
.contact-action-grid {
    border-top: 1px solid #dfe5ea;
}

.company-row {
    border-bottom: 1px solid #dfe5ea;
    display: grid;
    gap: 40px;
    grid-template-columns: 220px 1fr;
    padding: 26px 0;
}

.company-row h3,
.detail-list h3,
.service-brief h2,
.contact-action strong {
    color: #111820;
}

.company-row h3,
.detail-list h3 {
    font-size: 22px;
    margin: 0;
}

.company-row p {
    font-size: 18px;
    margin: 0;
    max-width: 860px;
}

.detail-list {
    display: grid;
    gap: 34px;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 28px;
}

.detail-list article {
    min-width: 0;
}

.detail-list p {
    margin-bottom: 0;
}

.minimal-call-band {
    background: #f7f9fb;
    border-top: 1px solid #dfe5ea;
    color: #111820;
    padding: 56px 0;
}

.minimal-call-band .eyebrow,
.minimal-call-band h2,
.minimal-call-band p {
    color: #111820;
}

.call-band-inner {
    align-items: center;
    display: flex;
    gap: 32px;
    justify-content: space-between;
}

.call-band-inner h2 {
    max-width: 760px;
}

.minimal-page-hero {
    background: #fff;
    border-bottom: 1px solid #e6ebef;
    color: #111820;
    padding: 92px 0 62px;
}

.minimal-page-hero p:not(.eyebrow) {
    font-size: 20px;
    max-width: 720px;
}

.minimal-page-hero .cta-row {
    margin-bottom: 0;
}

.service-brief {
    border-bottom: 1px solid #dfe5ea;
    display: grid;
    gap: 34px;
    grid-template-columns: 320px 1fr;
    padding: 36px 0;
}

.service-brief h2 {
    font-size: 30px;
    line-height: 1.15;
    margin: 0;
}

.service-brief ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-brief li {
    border-bottom: 1px solid #edf1f4;
    color: #53606b;
    font-size: 17px;
    padding: 0 0 14px;
    margin-bottom: 14px;
}

.service-brief li:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact-actions-section {
    padding-bottom: 70px;
}

.contact-action-grid {
    display: grid;
    gap: 34px;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 28px;
}

.contact-action {
    color: inherit !important;
    display: block;
    min-width: 0;
}

.contact-action span {
    color: #0b5cab;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.contact-action strong {
    display: block;
    font-size: 24px;
    line-height: 1.16;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.contact-action small {
    color: #53606b;
    font-size: 15px;
}

@media (max-width: 991px) {
    .minimal-hero {
        min-height: auto;
        padding: 86px 0 76px;
    }

    .minimal-two-column,
    .company-row,
    .service-brief {
        gap: 20px;
        grid-template-columns: 1fr;
    }

    .detail-list,
    .contact-action-grid {
        grid-template-columns: 1fr;
    }

    .minimal-heading-row,
    .call-band-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    body {
        padding-top: 64px;
    }

    .modern-nav,
    .modern-nav .container,
    .brand-lockup {
        min-height: 64px;
    }

    .brand-logo {
        height: 42px;
        width: 42px;
    }

    .minimal-hero h1,
    .minimal-page-hero h1 {
        font-size: 40px;
    }

    .minimal-hero .hero-lede,
    .minimal-page-hero p:not(.eyebrow) {
        font-size: 18px;
    }

    .minimal-two-column h2,
    .minimal-heading-row h2,
    .minimal-call-band h2 {
        font-size: 30px;
    }

    .minimal-section,
    .minimal-page-hero {
        padding: 58px 0;
    }

    .cta-row .btn,
    .call-band-inner .btn {
        width: 100%;
    }
}

.hero-grid {
    align-items: center;
    display: grid;
    gap: 68px;
    grid-template-columns: minmax(0, 1fr) 420px;
}

.route-graphic {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .18);
    overflow: hidden;
    padding: 26px;
}

.route-card {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    color: #111820;
    display: flex;
    gap: 12px;
    min-height: 76px;
    padding: 16px;
}

.route-card img {
    height: 52px;
    object-fit: contain;
    width: 52px;
}

.route-card span {
    color: #5f6c77;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.route-card strong {
    display: block;
    font-size: 19px;
    line-height: 1.15;
}

.route-card i {
    align-items: center;
    background: #eef4fa;
    border-radius: 6px;
    color: #0b5cab;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.route-lines {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 72px;
    position: relative;
}

.route-lines:before {
    background: rgba(255, 255, 255, .35);
    content: '';
    height: 1px;
    left: 16.666%;
    position: absolute;
    right: 16.666%;
    top: 36px;
}

.route-lines span {
    justify-self: center;
    position: relative;
    width: 1px;
}

.route-lines span:before,
.route-lines span:after {
    background: rgba(255, 255, 255, .35);
    content: '';
    left: 0;
    position: absolute;
    width: 1px;
}

.route-lines span:before {
    height: 36px;
    top: 0;
}

.route-lines span:after {
    bottom: 0;
    height: 36px;
}

.route-destinations {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
}

.route-destinations .route-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 122px;
}

.route-destinations .route-card strong {
    font-size: 16px;
}

.capability-graphic,
.service-route-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.capability-graphic {
    border-top: 1px solid #dfe5ea;
    margin-top: 34px;
    padding-top: 24px;
}

.capability-graphic span,
.service-route-strip span {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe3ea;
    border-radius: 999px;
    color: #26313b;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    padding: 9px 13px;
}

.service-route-strip {
    margin-top: 28px;
}

.service-route-strip i {
    color: #0b5cab;
}

.page-hero-grid {
    align-items: center;
    display: grid;
    gap: 64px;
    grid-template-columns: minmax(0, 1fr) 380px;
}

.page-hero-grid:before,
.page-hero-grid:after {
    content: none;
    display: none;
}

.service-hero-graphic,
.contact-hero-graphic {
    background:
        linear-gradient(135deg, rgba(246, 248, 251, .98), rgba(255, 255, 255, .96));
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(17, 24, 32, .07);
}

.service-hero-graphic {
    padding: 28px;
}

.service-hub {
    align-items: center;
    background: #111820;
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 30px;
    font-weight: 800;
    height: 116px;
    justify-content: center;
    letter-spacing: 0;
}

.service-branches {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
}

.service-branches span {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 8px;
    color: #111820;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    min-height: 88px;
}

.service-branches i {
    color: #0b5cab;
    font-size: 20px;
}

.contact-hero-graphic {
    padding: 24px;
}

.contact-hero-graphic img {
    display: block;
    height: 64px;
    margin-bottom: 16px;
    object-fit: contain;
    width: 64px;
}

.contact-hero-detail {
    border-top: 1px solid #dfe5ea;
    padding: 15px 0;
}

.contact-hero-detail:last-child {
    padding-bottom: 0;
}

.contact-hero-detail span {
    color: #0b5cab;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.contact-hero-detail strong {
    color: #111820;
    display: block;
    font-size: 20px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.office-graphic {
    background: #f6f8fb;
    border: 1px solid #dfe5ea;
    border-radius: 10px;
    color: inherit !important;
    display: block;
    margin-top: 44px;
    min-height: 270px;
    overflow: hidden;
    position: relative;
}

.map-grid-lines {
    background-image:
        linear-gradient(#e5ebf0 1px, transparent 1px),
        linear-gradient(90deg, #e5ebf0 1px, transparent 1px);
    background-size: 42px 42px;
    inset: 0;
    opacity: .8;
    position: absolute;
}

.map-route {
    border-bottom: 5px solid #0b5cab;
    border-left: 5px solid #0b5cab;
    border-radius: 0 0 0 30px;
    height: 132px;
    left: 11%;
    opacity: .9;
    position: absolute;
    top: 28%;
    transform: rotate(-5deg);
    width: 55%;
}

.map-pin {
    align-items: center;
    background: #0b5cab;
    border: 6px solid #fff;
    border-radius: 50%;
    box-shadow: 0 18px 36px rgba(11, 92, 171, .22);
    color: #fff;
    display: flex;
    font-size: 22px;
    height: 74px;
    justify-content: center;
    left: 58%;
    position: absolute;
    top: 28%;
    width: 74px;
}

.office-card {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 8px;
    bottom: 28px;
    box-shadow: 0 20px 50px rgba(17, 24, 32, .08);
    padding: 20px;
    position: absolute;
    right: 28px;
    width: min(310px, calc(100% - 56px));
}

.office-card span {
    color: #0b5cab;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.office-card strong {
    color: #111820;
    display: block;
    font-size: 24px;
    line-height: 1.1;
}

.office-card small {
    color: #53606b;
    display: block;
    font-size: 15px;
    margin-top: 8px;
}

@media (max-width: 991px) {
    .hero-grid {
        gap: 42px;
        grid-template-columns: 1fr;
    }

    .page-hero-grid {
        gap: 36px;
        grid-template-columns: 1fr;
    }

    .route-graphic {
        max-width: 520px;
    }

    .service-hero-graphic,
    .contact-hero-graphic {
        max-width: 520px;
    }
}

@media (max-width: 640px) {
    .route-graphic {
        padding: 18px;
    }

    .route-destinations {
        grid-template-columns: 1fr;
    }

    .route-lines {
        display: none;
    }

    .route-destinations .route-card {
        align-items: center;
        flex-direction: row;
        min-height: 74px;
    }

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

    .service-branches span {
        flex-direction: row;
        min-height: 58px;
    }

    .office-graphic {
        min-height: 330px;
    }

    .map-route {
        left: 8%;
        width: 68%;
    }

    .map-pin {
        left: 54%;
        top: 22%;
    }
}

.route-graphic.line-graphic,
.service-hero-graphic.line-graphic,
.contact-hero-graphic.line-graphic {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}

.line-illustration {
    display: block;
    height: auto;
    max-width: 100%;
    overflow: visible;
    width: 100%;
}

.route-illustration {
    color: #fff;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .14));
}

.line-thread,
.light-thread,
.contact-route {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.line-thread {
    stroke: #9dccff;
    stroke-width: 2.4;
}

.line-thread-soft {
    stroke: rgba(255, 255, 255, .48);
}

.line-ring,
.line-node-circle {
    fill: rgba(255, 255, 255, .06);
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 1.5;
}

.line-dot {
    fill: #9dccff;
}

.line-icon {
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.node-kicker,
.node-label,
.node-sub,
.light-label,
.light-sub,
.map-kicker,
.map-label,
.map-sub {
    letter-spacing: 0;
}

.node-kicker {
    fill: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.node-label {
    fill: currentColor;
    font-size: 16px;
    font-weight: 800;
}

.node-sub {
    fill: rgba(255, 255, 255, .66);
    font-size: 12px;
}

.service-hero-graphic.line-graphic,
.contact-hero-graphic.line-graphic {
    color: #111820;
}

.diagram-field {
    fill: #f7f9fb;
    stroke: #dfe5ea;
    stroke-width: 1;
}

.light-thread {
    stroke: #0b5cab;
    stroke-width: 2.3;
}

.contact-route {
    stroke: #0b5cab;
    stroke-width: 3;
}

.contact-route-muted {
    stroke: #c9d4de;
    stroke-width: 1.6;
}

.contact-field {
    fill: #f8fafc;
}

.contact-map-line {
    fill: none;
    stroke: #0b5cab;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.soft-map-line {
    stroke: #cdd8e2;
    stroke-width: 1.5;
}

.symbol-ring {
    fill: #fff;
    stroke: #0b5cab;
    stroke-width: 1.8;
}

.pin-body {
    fill: #fff;
    stroke: #0b5cab;
    stroke-linejoin: round;
    stroke-width: 2;
}

.pin-center {
    fill: #0b5cab;
}

.contact-caption line {
    stroke: #0b5cab;
    stroke-linecap: round;
    stroke-width: 2;
}

.contact-caption text {
    fill: #111820;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
}

.core-ring,
.light-node-circle {
    fill: #fff;
    stroke: #0b5cab;
    stroke-width: 1.8;
}

.core-dot {
    fill: #0b5cab;
}

.light-icon {
    fill: none;
    stroke: #0b5cab;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.light-label {
    fill: #111820;
    font-size: 15px;
    font-weight: 800;
}

.large-label {
    font-size: 26px;
}

.light-sub {
    fill: #53606b;
    font-size: 12px;
}

.capability-graphic {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.capability-graphic span {
    background: transparent;
    border: 0;
    border-left: 1px solid #dfe5ea;
    border-radius: 0;
    color: #26313b;
    display: block;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    min-height: 54px;
    padding: 20px 16px 0 16px;
    position: relative;
}

.capability-graphic span:before {
    background: #0b5cab;
    border-radius: 50%;
    content: '';
    height: 7px;
    left: -4px;
    position: absolute;
    top: 0;
    width: 7px;
}

.office-graphic {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #dfe5ea;
    border-radius: 0;
    border-top: 1px solid #dfe5ea;
    min-height: 300px;
}

.office-map-illustration {
    display: block;
    height: 300px;
    width: 100%;
}

.map-background {
    fill: #f7f9fb;
}

.map-street {
    fill: none;
    stroke: #d4dde6;
    stroke-linecap: round;
    stroke-width: 2;
}

.map-main-route {
    fill: none;
    stroke: #0b5cab;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.map-stop {
    fill: #fff;
    stroke: #0b5cab;
    stroke-width: 3;
}

.map-pin-shape path {
    fill: #0b5cab;
}

.map-pin-shape circle {
    fill: #fff;
}

.map-kicker {
    fill: #0b5cab;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
}

.map-label {
    fill: #111820;
    font-size: 32px;
    font-weight: 800;
}

.map-sub {
    fill: #53606b;
    font-size: 17px;
}

@media (max-width: 991px) {
    .route-graphic.line-graphic,
    .service-hero-graphic.line-graphic,
    .contact-hero-graphic.line-graphic {
        max-width: 560px;
    }
}

@media (max-width: 640px) {
    .capability-graphic {
        grid-template-columns: 1fr;
    }

    .capability-graphic span {
        border-left: 0;
        border-top: 1px solid #dfe5ea;
        min-height: 0;
        padding: 14px 0 14px 20px;
    }

    .capability-graphic span:before {
        left: 0;
        top: 21px;
    }

    .office-map-illustration {
        height: 360px;
        width: 124%;
    }
}

.minimal-hero {
    min-height: min(760px, calc(100vh - 68px));
    padding: 74px 0;
}

.minimal-hero-copy {
    max-width: 660px;
}

.minimal-hero h1,
.minimal-page-hero h1 {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.04;
    margin-bottom: 20px;
    max-width: 700px;
}

.minimal-hero .hero-lede {
    font-size: 19px;
    max-width: 620px;
}

.hero-grid {
    gap: 52px;
    grid-template-columns: minmax(0, .95fr) minmax(500px, .75fr);
}

.route-graphic.line-graphic {
    justify-self: end;
    width: min(100%, 560px);
}

.minimal-section {
    padding: 64px 0;
}

.minimal-page-hero {
    padding: 70px 0 50px;
}

.page-hero-grid {
    gap: 52px;
    grid-template-columns: minmax(0, .95fr) minmax(460px, .7fr);
}

.service-hero-graphic.line-graphic,
.contact-hero-graphic.line-graphic {
    justify-self: end;
    width: min(100%, 500px);
}

.btn {
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.btn:hover,
.btn:focus {
    box-shadow: 0 12px 28px rgba(17, 24, 32, .14);
    transform: translateY(-1px);
}

.line-thread,
.light-thread,
.contact-map-line,
.map-main-route,
.service-map-thread {
    stroke-dasharray: 12 14;
    animation: lineFlow 18s linear infinite;
}

.line-dot,
.core-dot,
.service-map-core-dot {
    animation: quietPulse 2.8s ease-in-out infinite;
}

.service-switcher {
    margin-top: 30px;
}

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

.switcher-tabs {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
}

.switcher-tab {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    min-height: 112px;
    padding: 20px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.switcher-tab span {
    color: #0b5cab;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.switcher-tab strong {
    color: #111820;
    display: block;
    font-size: 21px;
    line-height: 1.15;
}

.switcher-tab:hover {
    border-color: #b8c8d6;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .08);
    transform: translateY(-2px);
}

.switcher-stage {
    align-items: center;
    border-bottom: 1px solid #dfe5ea;
    border-top: 1px solid #dfe5ea;
    display: grid;
    gap: 52px;
    grid-template-columns: minmax(420px, 1.05fr) minmax(320px, .85fr);
    margin-top: 28px;
    padding: 34px 0;
}

.service-map-illustration {
    display: block;
    height: auto;
    width: 100%;
}

.service-map-field {
    fill: #f7f9fb;
    stroke: #dfe5ea;
    stroke-width: 1;
}

.service-map-thread {
    fill: none;
    stroke: #c4d0db;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease;
}

.service-map-core-ring,
.service-map-node-ring {
    fill: #fff;
    stroke: #cfd9e2;
    stroke-width: 1.8;
    transition: stroke .25s ease, stroke-width .25s ease, fill .25s ease;
}

.service-map-core-dot {
    fill: #0b5cab;
}

.service-map-core text:first-of-type,
.service-map-node text {
    fill: #111820;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0;
}

.service-map-core text:last-of-type {
    fill: #53606b;
    font-size: 12px;
    font-weight: 700;
}

.service-map-icon {
    fill: none;
    stroke: #0b5cab;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.3;
}

.service-map-node {
    opacity: .52;
    transition: opacity .25s ease, transform .25s ease;
}

.switcher-copy {
    min-height: 284px;
    position: relative;
}

.switcher-panel {
    animation: panelIn .32s ease both;
    display: none;
}

.switcher-panel h3 {
    color: #111820;
    font-size: 34px;
    line-height: 1.08;
    margin: 0 0 14px;
}

.switcher-panel p {
    font-size: 18px;
    margin-bottom: 22px;
}

.switcher-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.switcher-panel li {
    border-top: 1px solid #e5ebf0;
    color: #26313b;
    font-weight: 700;
    padding: 12px 0 12px 22px;
    position: relative;
}

.switcher-panel li:before {
    background: #0b5cab;
    border-radius: 50%;
    content: '';
    height: 6px;
    left: 0;
    position: absolute;
    top: 21px;
    width: 6px;
}

#service-focus-it:checked ~ .switcher-tabs .tab-it,
#service-focus-voice:checked ~ .switcher-tabs .tab-voice,
#service-focus-security:checked ~ .switcher-tabs .tab-security {
    background: #f8fbff;
    border-color: #0b5cab;
    box-shadow: 0 20px 46px rgba(11, 92, 171, .11);
}

#service-focus-it:checked ~ .switcher-stage .panel-it,
#service-focus-voice:checked ~ .switcher-stage .panel-voice,
#service-focus-security:checked ~ .switcher-stage .panel-security {
    display: block;
}

#service-focus-it:checked ~ .switcher-stage .node-it,
#service-focus-voice:checked ~ .switcher-stage .node-voice,
#service-focus-security:checked ~ .switcher-stage .node-security {
    opacity: 1;
}

#service-focus-it:checked ~ .switcher-stage .node-it .service-map-node-ring,
#service-focus-voice:checked ~ .switcher-stage .node-voice .service-map-node-ring,
#service-focus-security:checked ~ .switcher-stage .node-security .service-map-node-ring {
    stroke: #0b5cab;
    stroke-width: 2.6;
}

#service-focus-it:checked ~ .switcher-stage .thread-it,
#service-focus-voice:checked ~ .switcher-stage .thread-voice,
#service-focus-security:checked ~ .switcher-stage .thread-security {
    opacity: 1;
    stroke: #0b5cab;
    stroke-width: 3.2;
}

@keyframes lineFlow {
    to {
        stroke-dashoffset: -208;
    }
}

@keyframes quietPulse {
    0%, 100% {
        opacity: .72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1199px) {
    .hero-grid,
    .page-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(420px, .74fr);
    }

    .switcher-stage {
        grid-template-columns: minmax(360px, 1fr) minmax(300px, .9fr);
    }
}

@media (max-width: 991px) {
    .hero-grid,
    .page-hero-grid,
    .switcher-stage {
        grid-template-columns: 1fr;
    }

    .route-graphic.line-graphic,
    .service-hero-graphic.line-graphic,
    .contact-hero-graphic.line-graphic {
        justify-self: start;
        width: min(100%, 620px);
    }

    .switcher-tabs {
        grid-template-columns: 1fr;
    }

    .switcher-copy {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .minimal-hero {
        padding: 58px 0 54px;
    }

    .minimal-hero h1,
    .minimal-page-hero h1 {
        font-size: 38px;
    }

    .minimal-section,
    .minimal-page-hero {
        padding: 48px 0;
    }

    .switcher-tab {
        min-height: 0;
        padding: 17px;
    }

    .switcher-stage {
        gap: 28px;
        padding: 26px 0;
    }
}

.minimal-hero h1,
.minimal-page-hero h1 {
    font-size: clamp(38px, 4.4vw, 56px);
}

.minimal-two-column h2,
.minimal-heading-row h2,
.minimal-call-band h2 {
    font-size: 32px;
}

.hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(540px, .95fr);
}

.route-graphic.line-graphic {
    width: min(100%, 600px);
}

.detail-list,
.service-briefs,
.contact-action-grid {
    border-top: 0;
    gap: 18px;
}

.detail-list {
    padding-top: 0;
}

.detail-list article,
.service-brief,
.contact-action {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.detail-list article {
    padding: 24px;
}

.service-briefs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.service-briefs:before,
.service-briefs:after {
    content: none;
    display: none;
}

.service-brief {
    border-bottom: 1px solid #dfe5ea;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px;
}

.service-brief h2 {
    font-size: 24px;
}

.service-brief li {
    font-size: 16px;
}

.contact-action-grid {
    padding-top: 0;
}

.contact-action {
    padding: 24px;
}

.detail-list article:hover,
.service-brief:hover,
.contact-action:hover {
    border-color: #b9c9d7;
    box-shadow: 0 24px 54px rgba(17, 24, 32, .08);
    transform: translateY(-2px);
}

.office-graphic {
    margin-top: 26px;
}

.minimal-call-band {
    padding: 46px 0;
}

@media (max-width: 1199px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(460px, .9fr);
    }

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

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .minimal-hero h1,
    .minimal-page-hero h1 {
        font-size: 36px;
    }

    .minimal-two-column h2,
    .minimal-heading-row h2,
    .minimal-call-band h2 {
        font-size: 28px;
    }

    .detail-list article,
    .service-brief,
    .contact-action {
        padding: 20px;
    }
}

body {
    padding-top: 88px;
}

.modern-nav,
.modern-nav .container,
.brand-lockup {
    min-height: 88px;
}

.brand-lockup {
    gap: 14px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.brand-logo {
    height: 68px;
    width: 68px;
}

.brand-name {
    color: #111820;
    font-size: 18px;
    font-weight: 800;
}

.modern-nav .navbar-nav > li > a {
    font-size: 13px;
    letter-spacing: .01em;
    padding: 34px 10px;
}

.modern-nav .navbar-nav > li > a:hover,
.modern-nav .navbar-nav > li > a:focus {
    color: #0b5cab;
}

.minimal-hero {
    background:
        linear-gradient(115deg, rgba(6, 15, 27, .96) 0%, rgba(7, 26, 42, .9) 42%, rgba(8, 55, 66, .72) 100%),
        linear-gradient(155deg, transparent 0 58%, rgba(22, 120, 113, .28) 58% 100%),
        url('../pics/networking.jpg') center center / cover no-repeat;
    overflow: hidden;
    position: relative;
}

.minimal-hero:before {
    background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
    bottom: 0;
    content: '';
    height: 42%;
    left: 58%;
    position: absolute;
    transform: skewX(-18deg);
    width: 34%;
}

.home-hero-refresh {
    background:
        radial-gradient(circle at 82% 16%, rgba(82, 177, 221, .24), transparent 34%),
        radial-gradient(circle at 10% 88%, rgba(56, 102, 65, .12), transparent 30%),
        linear-gradient(125deg, #f7fbff 0%, #fff 48%, #eef7f6 100%);
    color: #111820;
    overflow: hidden;
    position: relative;
}

.home-hero-refresh:before {
    background: linear-gradient(135deg, rgba(29, 79, 145, .1), rgba(29, 79, 145, 0));
    content: '';
    height: 460px;
    position: absolute;
    right: -120px;
    top: -160px;
    transform: rotate(18deg);
    width: 420px;
}

.home-hero-layout {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: minmax(0, .9fr) minmax(560px, .95fr);
    min-height: 640px;
    padding-bottom: 78px;
    padding-top: 78px;
    position: relative;
    z-index: 1;
}

.home-hero-layout:before,
.home-hero-layout:after,
.home-hook-grid:before,
.home-hook-grid:after,
.home-about-layout:before,
.home-about-layout:after,
.home-plan-layout:before,
.home-plan-layout:after,
.home-method-grid:before,
.home-method-grid:after,
.home-contact-card:before,
.home-contact-card:after {
    content: none;
    display: none;
}

.home-hero-copy h1 {
    color: #111820;
    font-size: clamp(44px, 5.1vw, 70px);
    font-weight: 800;
    line-height: 1.02;
    margin: 0 0 24px;
    max-width: 820px;
}

.home-hero-copy .eyebrow {
    color: #1d4f91;
}

.home-hero-copy .hero-lede {
    color: #53606b;
    font-size: 21px;
    line-height: 1.65;
    max-width: 760px;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.home-hero-actions .btn-default {
    background: #fff;
    border-color: #cddae6;
    color: #111820;
}

.home-system-panel {
    background: rgba(255, 255, 255, .78);
    border: 1px solid #d6e2ec;
    border-radius: 24px;
    box-shadow: 0 34px 90px rgba(17, 24, 32, .12);
    min-height: 500px;
    padding: 30px;
    position: relative;
}

.home-system-panel:before {
    background: radial-gradient(circle, rgba(29, 79, 145, .18) 0 2px, transparent 3px);
    background-size: 20px 20px;
    bottom: 20px;
    content: '';
    height: 160px;
    opacity: .45;
    position: absolute;
    right: 18px;
    width: 180px;
}

.home-system-panel:after {
    border: 1px solid rgba(29, 79, 145, .16);
    border-radius: 999px;
    content: '';
    inset: 56px 42px 52px 72px;
    position: absolute;
    transform: rotate(-12deg);
}

.system-panel-core,
.system-lane,
.system-wire-line {
    position: relative;
    z-index: 1;
}

.system-panel-core {
    align-items: center;
    background:
        radial-gradient(circle at 82% 12%, rgba(82, 177, 221, .22), transparent 36%),
        #111820;
    border: 1px solid #dfe7ee;
    border-radius: 999px;
    box-shadow: 0 24px 58px rgba(17, 24, 32, .16);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 178px;
    justify-content: center;
    left: 50%;
    padding: 24px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 178px;
}

.system-panel-core span,
.system-lane span,
.home-hook-card span,
.home-plan-list span,
.home-method-steps span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.system-panel-core span {
    color: #9dccff;
    margin-bottom: 10px;
}

.system-panel-core strong {
    display: block;
    font-size: 25px;
    line-height: 1.1;
}

.system-wire-line {
    background: linear-gradient(90deg, rgba(29, 79, 145, .24), rgba(173, 83, 43, .18));
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform-origin: left center;
    width: 190px;
}

.line-open {
    transform: rotate(-145deg);
}

.line-live {
    transform: rotate(-4deg);
}

.line-close {
    transform: rotate(132deg);
}

.system-lane {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 999px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .08);
    color: #111820 !important;
    display: block;
    max-width: 220px;
    padding: 18px 22px;
    position: absolute;
    text-decoration: none;
    transition: background-color .2s ease;
}

.system-lane:hover,
.system-lane:focus {
    background: #f7fbff;
    text-decoration: none;
}

.system-lane span {
    background: transparent;
    border-radius: 0;
    color: #1d4f91;
    display: block;
}

.home-route-graphic {
    align-self: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    overflow: visible;
    padding: 0;
}

.home-route-graphic:before,
.home-route-graphic:after {
    display: none;
}

.home-route-illustration {
    color: #111820;
    display: block;
    filter: drop-shadow(0 30px 46px rgba(17, 24, 32, .14));
    height: auto;
    max-width: 660px;
    overflow: visible;
    width: 100%;
}

.home-route-field {
    fill: rgba(255, 255, 255, .52);
    stroke: rgba(29, 79, 145, .1);
    stroke-width: 1;
}

.home-route-illustration .line-thread {
    stroke: #1d4f91;
    stroke-dasharray: 10 14;
    stroke-linecap: round;
    stroke-width: 2.4;
    animation: routeThreadFlow 7s linear infinite;
}

.home-route-illustration .line-thread-soft {
    stroke: rgba(29, 79, 145, .42);
}

.home-route-illustration .line-ring,
.home-route-illustration .line-node-circle {
    fill: rgba(255, 255, 255, .72);
    stroke: rgba(29, 79, 145, .72);
    transform-box: fill-box;
    transform-origin: center;
}

.home-route-illustration .line-node-circle {
    animation: routeNodeBreathe 4.8s ease-in-out infinite;
}

.home-route-illustration .line-dot {
    fill: #1d4f91;
}

.home-flow-dot {
    fill: #1d4f91;
    filter: drop-shadow(0 0 8px rgba(29, 79, 145, .45));
    opacity: .82;
}

.dot-two {
    fill: #52b1dd;
}

.dot-three {
    fill: #386641;
}

.home-route-illustration .line-icon {
    color: #1d4f91;
}

.home-route-illustration .node-kicker,
.home-route-illustration .node-label {
    fill: #111820;
}

.home-route-illustration .node-sub {
    fill: #53606b;
}

@keyframes routeThreadFlow {
    to { stroke-dashoffset: -96; }
}

@keyframes routeNodeBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    .home-route-illustration .line-thread,
    .home-route-illustration .line-node-circle {
        animation: none;
    }
}

.system-lane strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
    margin: 4px 0 6px;
}

.system-lane small {
    color: #53606b;
    display: block;
    font-size: 14px;
    margin-top: 3px;
}

.lane-open {
    left: 0;
    top: 22px;
}

.lane-live {
    right: 0;
    top: 168px;
}

.lane-close {
    bottom: 24px;
    left: 28px;
}

.home-hook-section {
    background:
        linear-gradient(180deg, #eef7f6 0%, #fff 18%, #fff 74%, #f7fbff 100%);
    padding: 86px 0 88px;
}

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

.home-section-heading h2,
.home-about-copy h2,
.home-contact-card h2 {
    color: #111820;
    font-size: clamp(34px, 3.6vw, 50px);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 16px;
}

.home-section-heading p:not(.eyebrow),
.home-about-copy p,
.home-contact-card p {
    color: #53606b;
    font-size: 18px;
    line-height: 1.65;
}

.home-hook-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}

.home-hook-card {
    --hook-rgb: 29, 79, 145;
    background:
        radial-gradient(circle at 86% 8%, rgba(var(--hook-rgb), .13), transparent 32%),
        #fff;
    border: 1px solid #dfe7ee;
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .055);
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 390px;
    overflow: hidden;
    padding: 28px;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.home-hook-card:hover,
.home-hook-card:focus {
    border-color: rgba(var(--hook-rgb), .36);
    box-shadow: 0 28px 64px rgba(17, 24, 32, .09);
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
}

.hook-it { --hook-rgb: 29, 79, 145; }
.hook-voice { --hook-rgb: 173, 83, 43; }
.hook-security { --hook-rgb: 56, 102, 65; }

.hook-card-top span,
.home-about-copy .eyebrow {
    color: rgb(var(--hook-rgb, 29, 79, 145));
}

.hook-card-top strong {
    color: #111820;
    display: block;
    font-size: 27px;
    line-height: 1.1;
    margin-top: 12px;
}

.hook-visual {
    align-items: center;
    display: flex;
    gap: 12px;
    margin: 32px 0 24px;
    min-height: 74px;
}

.m365-hook-visual img {
    background: #fff;
    border: 1px solid rgba(var(--hook-rgb), .16);
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(var(--hook-rgb), .12);
    height: 54px;
    padding: 9px;
    width: 54px;
}

.voice-hook-visual i{
    align-items: center;
    background: rgba(var(--hook-rgb), .1);
    border: 1px solid rgba(var(--hook-rgb), .16);
    border-radius: 15px;
    color: rgb(var(--hook-rgb));
    display: inline-flex;
    font-size: 22px;
    font-weight: 800;
    height: 54px;
    justify-content: center;
    min-width: 54px;
    padding: 0 14px;
}

.home-hook-card p {
    color: #53606b;
    line-height: 1.6;
    margin-bottom: 24px;
}

.hook-link {
    color: rgb(var(--hook-rgb));
    display: block;
    margin-top: auto;
}

.hook-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.hook-actions .hook-link {
    align-items: center;
    border: 1px solid rgba(var(--hook-rgb), .22);
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    margin-top: 0;
    padding: 9px 14px;
    text-decoration: none;
}

.hook-actions .primary-hook-link {
    background: rgb(var(--hook-rgb));
    color: #fff;
}

.hook-actions .hook-link:hover,
.hook-actions .hook-link:focus {
    border-color: rgba(var(--hook-rgb), .42);
    text-decoration: none;
}

.home-about-section {
    background:
        radial-gradient(circle at 14% 16%, rgba(29, 79, 145, .12), transparent 30%),
        linear-gradient(135deg, #f7fbff 0%, #eef5ff 54%, #fff 54%, #f7f9fb 100%);
    color: #111820;
    overflow: hidden;
    padding: 92px 0;
}

.home-about-layout {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
}

.home-about-copy {
    max-width: 620px;
}

.home-about-copy .eyebrow,
.home-about-copy h2,
.home-about-copy p {
    color: #111820;
}

.home-about-copy h2 {
    font-size: clamp(40px, 4.2vw, 58px);
    letter-spacing: 0;
}

.home-about-copy p {
    color: #53606b;
    max-width: 560px;
}

.home-about-link {
    align-items: center;
    color: #1d4f91;
    display: inline-flex;
    font-weight: 800;
    gap: 12px;
    margin-top: 24px;
    text-decoration: none;
}

.home-about-link:after {
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: '';
    height: 9px;
    transform: rotate(45deg);
    width: 9px;
}

.home-about-link:hover,
.home-about-link:focus {
    color: #0f3d73;
    text-decoration: none;
}

.home-contact-finale {
    background: #f7f9fb;
    padding: 72px 0 78px;
}

.home-contact-card {
    align-items: center;
    background:
        radial-gradient(circle at 82% 18%, rgba(29, 79, 145, .13), transparent 34%),
        #fff;
    border: 1px solid #dfe7ee;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(17, 24, 32, .08);
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(0, 1fr) max-content;
    padding: 40px;
}

.home-contact-actions {
    display: grid;
    gap: 12px;
}

.home-contact-actions .btn-default {
    background: #fff;
}

.about-page {
    background: #fff;
    color: #111820;
}

.about-hero {
    background:
        radial-gradient(circle at 80% 12%, rgba(82, 177, 221, .18), transparent 34%),
        linear-gradient(135deg, #f7fbff 0%, #fff 48%, #eef7f6 100%);
    padding: 88px 0;
}

.about-hero-grid,
.about-story-section {
    display: grid;
    gap: 70px;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr);
}

.about-hero-grid:before,
.about-hero-grid:after,
.about-story-section:before,
.about-story-section:after {
    content: none;
    display: none;
}

.about-hero h1,
.about-story-copy h2 {
    color: #111820;
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 22px;
}

.about-hero h1 {
    font-size: clamp(42px, 5vw, 70px);
    max-width: 780px;
}

.about-hero p:not(.eyebrow),
.about-story-copy p {
    color: #53606b;
    font-size: 20px;
    line-height: 1.65;
    max-width: 720px;
}

.about-signal-panel {
    background: rgba(255, 255, 255, .82);
    border: 1px solid #d6e2ec;
    border-radius: 24px;
    box-shadow: 0 34px 90px rgba(17, 24, 32, .1);
    display: grid;
    gap: 12px;
    padding: 22px;
}

.about-signal-panel div {
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    padding: 22px;
}

.about-signal-panel span{
    color: #1d4f91;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-signal-panel strong {
    color: #111820;
    display: block;
    font-size: 22px;
    line-height: 1.1;
}

.about-signal-panel small {
    color: #53606b;
    display: block;
    font-size: 14px;
    line-height: 1.45;
    margin-top: 8px;
}

.about-story-section {
    align-items: start;
    padding: 82px 15px;
}

.about-story-copy h2 {
    font-size: clamp(34px, 3.6vw, 52px);
}

.about-story-copy .btn {
    margin-top: 18px;
}

.minimal-hero > .container {
    position: relative;
    z-index: 1;
}

.hero-company-links {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 26px;
    max-width: 620px;
}

.hero-company-links a {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    color: #fff !important;
    display: block;
    padding: 16px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.hero-company-links a:hover,
.hero-company-links a:focus {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(157, 204, 255, .7);
    transform: translateY(-2px);
}

.hero-company-links span {
    color: #9dccff;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-company-links strong {
    display: block;
    font-size: 20px;
    line-height: 1.15;
    margin-top: 8px;
}

.shared-access-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 28px;
}

.shared-access-grid div {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 10px;
    padding: 18px;
}

.shared-access-grid span {
    color: #0b5cab;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.shared-access-grid strong {
    color: #111820;
    display: block;
    font-size: 17px;
    line-height: 1.25;
}

.panel-link {
    border-bottom: 1px solid currentColor;
    color: #0b5cab !important;
    display: inline-block;
    font-weight: 800;
    margin: 0 0 18px;
}

.line-thread,
.light-thread,
.contact-map-line,
.map-main-route,
.service-map-thread,
.line-dot,
.core-dot,
.service-map-core-dot {
    animation: none;
    stroke-dasharray: none;
}

.service-map-node,
.service-map-core,
.company-node,
.company-core {
    transform-box: fill-box;
    transform-origin: center;
}

#service-focus-it:checked ~ .switcher-stage .node-it,
#service-focus-voice:checked ~ .switcher-stage .node-voice,
#service-focus-security:checked ~ .switcher-stage .node-security {
    transform: scale(1.05);
}

#service-focus-it:checked ~ .switcher-stage .thread-it,
#service-focus-voice:checked ~ .switcher-stage .thread-voice,
#service-focus-security:checked ~ .switcher-stage .thread-security {
    animation: selectedLine .38s ease both;
}

.company-page {
    --company-accent: #1d4f91;
    --company-accent-rgb: 29, 79, 145;
    --company-soft: #eef5ff;
    background: #fff;
}

.company-voice-page {
    --company-accent: #ad532b;
    --company-accent-rgb: 173, 83, 43;
    --company-soft: #fff3ec;
}

.company-security-page {
    --company-accent: #386641;
    --company-accent-rgb: 56, 102, 65;
    --company-soft: #f1f7ed;
}

.company-hero {
    background:
        linear-gradient(135deg, #f7f9fb 0%, #fff 45%, var(--company-soft) 100%);
    border-bottom: 1px solid #dfe5ea;
    padding: 72px 0 48px;
}

.company-hero-grid {
    align-items: center;
    display: grid;
    gap: 68px;
    grid-template-columns: minmax(0, .95fr) minmax(500px, .9fr);
}

.company-hero-grid:before,
.company-hero-grid:after {
    content: none;
    display: none;
}

.company-trail {
    align-items: center;
    color: #53606b;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 10px;
    margin-bottom: 24px;
}

.company-trail a {
    color: var(--company-accent) !important;
}

.company-trail span:before {
    color: #93a0aa;
    content: '/';
    margin-right: 10px;
}

.company-trail.standalone-trail {
    color: var(--company-accent);
    letter-spacing: 0;
}

.company-trail.standalone-trail span:before {
    content: none;
    margin-right: 0;
}

.company-page .eyebrow {
    color: var(--company-accent);
}

.company-hero h1 {
    color: #111820;
    font-size: clamp(40px, 4.6vw, 58px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 22px;
    max-width: 760px;
}

.company-hero p:not(.eyebrow) {
    color: #53606b;
    font-size: 20px;
    max-width: 700px;
}

.service-hero-shell {
    border-bottom: 1px solid #dfe5ea;
    overflow: hidden;
    padding: 74px 0 56px;
}

.service-hero-shell h1 {
    color: #111820;
    font-size: clamp(40px, 4.6vw, 58px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 22px;
    max-width: 760px;
}

.service-hero-shell p:not(.eyebrow) {
    color: #53606b;
    font-size: 20px;
    max-width: 700px;
}

.it-hero {
    background:
    radial-gradient(circle at 84% 18%, rgba(29, 79, 145, .16), transparent 34%),
    linear-gradient(135deg, #f7f9fb 0%, #fff 48%, #eef5ff 100%);
}

.it-hero-grid {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
}

.it-hero-grid:before,
.it-hero-grid:after,
.it-package-section:before,
.it-package-section:after,
.it-services-directory:before,
.it-services-directory:after,
.it-plan-tiers:before,
.it-plan-tiers:after,
.it-suite-list:before,
.it-suite-list:after,
.it-scope-list:before,
.it-scope-list:after,
.it-included-list:before,
.it-included-list:after,
.voice-hero-grid:before,
.voice-hero-grid:after,
.voice-builder-section:before,
.voice-builder-section:after,
.voice-feature-grid:before,
.voice-feature-grid:after,
.security-hero-grid:before,
.security-hero-grid:after,
.security-planning-section:before,
.security-planning-section:after,
.security-check-grid:before,
.security-check-grid:after,
.security-product-section:before,
.security-product-section:after,
.security-product-grid:before,
.security-product-grid:after,
.suite-tier-grid:before,
.suite-tier-grid:after,
.suite-addons-section:before,
.suite-addons-section:after,
.suite-addons-grid:before,
.suite-addons-grid:after,
.m365-addons-section:before,
.m365-addons-section:after,
.m365-domain-plan-section:before,
.m365-domain-plan-section:after,
.m365-domain-plan-card:before,
.m365-domain-plan-card:after,
.m365-addons-header:before,
.m365-addons-header:after,
.m365-addon-grid:before,
.m365-addon-grid:after {
    content: none;
    display: none;
}

.it-dashboard-visual {
    background:
        radial-gradient(circle at 82% 12%, rgba(29, 79, 145, .16), transparent 30%),
        linear-gradient(145deg, #fff, #f5f9fc);
    border: 1px solid #d7e3f0;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(29, 79, 145, .12);
    color: #111820;
    overflow: hidden;
    padding: 30px;
    position: relative;
}

.it-dashboard-visual:before {
    background: linear-gradient(180deg, rgba(29, 79, 145, .16), rgba(29, 79, 145, 0));
    content: '';
    height: 260px;
    position: absolute;
    right: 68px;
    top: 92px;
    width: 2px;
}

.it-dashboard-visual:after {
    background: radial-gradient(circle, rgba(29, 79, 145, .18) 0 2px, transparent 3px);
    background-size: 18px 18px;
    bottom: -16px;
    content: '';
    height: 150px;
    opacity: .8;
    position: absolute;
    right: -8px;
    width: 170px;
}

.it-system-card,
.it-system-grid div {
    position: relative;
    z-index: 1;
}

.it-system-card {
    background: #fff;
    border: 1px solid rgba(29, 79, 145, .18);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(17, 24, 32, .06);
    padding: 26px;
}

.it-system-card span,
.it-system-grid span {
    color: #1d4f91;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.it-system-card strong {
    color: #111820;
    display: block;
    font-size: 28px;
    line-height: 1.12;
}

.it-system-path {
    background: linear-gradient(90deg, #1d4f91, rgba(29, 79, 145, .08));
    border-radius: 99px;
    height: 5px;
    margin: 24px 0;
    position: relative;
    z-index: 1;
}

.it-system-path:after {
    background: #1d4f91;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(29, 79, 145, .2);
    content: '';
    height: 18px;
    position: absolute;
    right: 18%;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
}

.it-system-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

.it-system-grid div {
    background: rgba(255, 255, 255, .86);
    border: 1px solid #d7e5f3;
    border-radius: 14px;
    padding: 18px;
}

.it-system-grid strong {
    color: #111820;
    display: block;
    font-size: 17px;
    line-height: 1.25;
}

.dashboard-header {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.dashboard-header span {
    background: #b9c9d7;
    border-radius: 99px;
    height: 10px;
    width: 10px;
}

.dashboard-status {
    background: linear-gradient(135deg, #eef5ff, #fff);
    border-radius: 12px;
    color: #111820;
    margin-bottom: 18px;
    padding: 22px;
}

.dashboard-status strong {
    display: block;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dashboard-status p {
    color: #1d4f91 !important;
    font-size: 30px !important;
    font-weight: 800;
    margin: 6px 0 0;
}

.dashboard-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

.dashboard-grid div {
    background: #f7fbff;
    border: 1px solid #d7e5f3;
    border-radius: 10px;
    padding: 18px;
}

.dashboard-grid span {
    color: #1d4f91;
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
}

.dashboard-line {
    background: linear-gradient(90deg, #1d4f91, #4d8ed2, #c5e5ff);
    border-radius: 99px;
    height: 5px;
    margin-top: 22px;
}

.it-package-section {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .8fr);
    padding: 46px 15px 72px;
}

.it-plan-tiers {
    display: grid;
    gap: 16px;
}

.it-plan-card,
.it-included-panel {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    padding: 28px;
}

.it-plan-card {
    align-items: center;
    color: inherit !important;
    display: grid;
    gap: 18px;
    grid-template-columns: 100px minmax(0, .65fr) minmax(0, 1fr);
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.it-plan-card span,
.it-included-panel > span {
    color: #1d4f91;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.it-plan-tiers h2,
.it-included-panel h2 {
    color: #111820;
    font-size: 28px;
    line-height: 1.1;
    margin: 0;
}

.it-plan-tiers p,
.it-included-panel p {
    margin-bottom: 0;
}

.it-plan-tiers .featured-tier {
    border-color: rgba(29, 79, 145, .38);
    box-shadow: 0 24px 56px rgba(29, 79, 145, .1);
}

.it-plan-card:hover,
.it-plan-card:focus {
    border-color: rgba(29, 79, 145, .45);
    box-shadow: 0 26px 58px rgba(29, 79, 145, .12);
    transform: translateY(-2px);
}

.it-included-panel {
    background: linear-gradient(135deg, #fff, #eef5ff);
}

.it-included-list {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.it-included-list div {
    border-top: 1px solid #d7e5f3;
    padding-top: 16px;
}

.it-included-list strong {
    color: #111820;
    display: block;
    margin-bottom: 6px;
}

.it-services-directory {
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(300px, .48fr) minmax(0, 1fr);
    padding: 52px 15px 76px;
}

.it-services-rail {
    align-self: start;
    border-left: 5px solid #1d4f91;
    padding: 8px 0 8px 26px;
}

.it-services-rail > span,
.it-suite-row span:not(.suite-index) {
    color: #1d4f91;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.it-services-rail h2 {
    color: #111820;
    font-size: 38px;
    line-height: 1.08;
    margin: 0 0 18px;
}

.it-scope-list {
    display: grid;
    gap: 12px;
    margin: 26px 0 18px;
}

.it-scope-list div {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.it-scope-list i {
    color: #1d4f91;
    font-size: 18px;
    text-align: center;
    width: 22px;
}

.it-scope-list strong {
    color: #111820;
}

.it-suite-list {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    box-shadow: 0 22px 52px rgba(17, 24, 32, .045);
    overflow: hidden;
}

.it-suite-row {
    align-items: center;
    color: inherit !important;
    display: grid;
    gap: 24px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding: 30px;
    text-decoration: none !important;
    transition: background .18s ease, transform .18s ease;
}

.it-suite-row + .it-suite-row {
    border-top: 1px solid #e5ebf0;
}

.it-suite-row:hover,
.it-suite-row:focus {
    background: #f7fbff;
    transform: translateX(4px);
}

.suite-index {
    align-items: center;
    background: #eef5ff;
    border: 1px solid #d7e5f3;
    border-radius: 50%;
    color: #1d4f91;
    display: flex;
    font-weight: 800;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.it-suite-row h2 {
    color: #111820;
    font-size: 30px;
    line-height: 1.08;
    margin: 0 0 10px;
}

.it-suite-row p {
    margin-bottom: 0;
}

.it-suite-row > strong {
    border-bottom: 2px solid #1d4f91;
    color: #1d4f91;
    font-weight: 800;
    padding-bottom: 3px;
}

.voice-hero {
    background:
    linear-gradient(90deg, rgba(173, 83, 43, .12), transparent 42%),
    linear-gradient(135deg, #fff8f2, #fff 54%, #eef8f8);
}

.voice-hero-grid {
    align-items: center;
    display: grid;
    gap: 66px;
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1fr);
}

.voice-flow-visual {
    background: #fff;
    border: 1px solid #efd4c7;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(173, 83, 43, .12);
    display: grid;
    gap: 18px;
    padding: 30px;
}

.voice-node {
    align-items: center;
    background: #fff7f1;
    border: 1px solid #efd4c7;
    border-radius: 12px;
    display: flex;
    gap: 14px;
    padding: 18px;
}

.voice-node span {
    align-items: center;
    background: #ad532b;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.voice-path-line {
    background: linear-gradient(180deg, #ad532b, #0f7d86);
    border-radius: 99px;
    height: 44px;
    justify-self: center;
    width: 4px;
}

.voice-endpoints {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
}

.voice-endpoints div {
    background: #fff;
    border: 1px solid #efd4c7;
    border-radius: 10px;
    color: #111820;
    font-weight: 800;
    padding: 16px 12px;
    text-align: center;
}

.voice-endpoints i {
    color: #ffbf8c;
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
}

.voice-builder-section {
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(300px, .55fr) minmax(0, 1fr);
    padding: 52px 15px 74px;
}

.voice-builder-copy {
    border-left: 5px solid #ad532b;
    padding: 8px 0 8px 26px;
}

.voice-builder-copy span,
.voice-feature-grid span {
    color: #ad532b;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.voice-builder-copy h2 {
    color: #111820;
    font-size: 38px;
    line-height: 1.08;
    margin: 0 0 18px;
}

.voice-feature-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, 1fr);
}

.voice-feature-grid article {
    border: 1px solid #dfe5ea;
    color: inherit;
    margin: -1px 0 0 -1px;
    padding: 28px;
}

.voice-feature-grid h3 {
    color: #111820;
    font-size: 23px;
    margin: 0 0 12px;
}

.security-hero {
    background:
    linear-gradient(135deg, rgba(56, 102, 65, .14), transparent 34%),
    linear-gradient(180deg, #fbfaf5, #fff 62%, #f1f7ed);
}

.security-hero-grid {
    align-items: center;
    display: grid;
    gap: 64px;
    grid-template-columns: minmax(0, .9fr) minmax(410px, .88fr);
}

.security-property-visual {
    padding: 12px;
}

.property-outline {
    aspect-ratio: 1.28;
    background:
        linear-gradient(90deg, rgba(56, 102, 65, .12) 1px, transparent 1px),
        linear-gradient(rgba(56, 102, 65, .12) 1px, transparent 1px),
        #fff;
    background-size: 34px 34px;
    border: 3px solid #386641;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(56, 102, 65, .14);
    position: relative;
}

.zone {
    background: #fff;
    border: 1px solid #c8dccf;
    border-radius: 10px;
    color: #111820;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 12px;
    position: absolute;
}

.zone.front { left: 8%; top: 12%; }
.zone.office { right: 10%; top: 18%; }
.zone.storage { left: 13%; bottom: 16%; }
.zone.rear { right: 9%; bottom: 20%; }

.sensor {
    background: #f59f55;
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(245, 159, 85, .35);
    height: 25px;
    position: absolute;
    width: 25px;
}

.sensor-one { left: 47%; top: 8%; }
.sensor-two { left: 5%; top: 48%; }
.sensor-three { right: 8%; bottom: 10%; }

.security-planning-section {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(300px, .65fr) minmax(0, 1fr);
    padding: 52px 15px 74px;
}

.security-survey-panel {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    color: #111820;
    padding: 32px;
}

.security-survey-panel span,
.security-check-grid span {
    color: #74b47e;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.security-survey-panel h2 {
    color: #111820;
    font-size: 38px;
    line-height: 1.08;
    margin: 0 0 18px;
}

.security-survey-panel p {
    color: #53606b;
}

.security-check-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}

.security-check-grid a {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .04);
    color: inherit !important;
    padding: 26px;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.security-check-grid a:hover,
.security-check-grid a:focus {
    border-color: rgba(56, 102, 65, .42);
    box-shadow: 0 24px 54px rgba(56, 102, 65, .1);
    transform: translateY(-2px);
}

.security-check-grid h3 {
    color: #111820;
    font-size: 23px;
    margin: 0 0 12px;
}

.security-product-section {
    padding: 52px 15px 78px;
}

.security-products-intro {
    margin-bottom: 28px;
}

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

.security-product-card {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(17, 24, 32, .045);
    min-height: 360px;
    overflow: visible;
    padding: 30px 26px 28px;
    position: relative;
}

.product-float-visual {
    align-items: center;
    display: flex;
    height: 150px;
    justify-content: center;
    margin: -2px 0 20px;
    pointer-events: none;
}

.product-float-visual svg {
    fill: none;
    filter: drop-shadow(0 18px 18px rgba(56, 102, 65, .16));
    height: 150px;
    overflow: visible;
    stroke: #386641;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
    width: 120px;
}

.product-door svg,
.product-window svg {
    stroke: #2d6f7c;
}

.product-motion svg,
.product-keypad svg {
    stroke: #ad532b;
}

.product-siren svg {
    stroke: #1d4f91;
}

.security-product-card span {
    color: #386641;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.security-product-card h3 {
    color: #111820;
    font-size: 24px;
    line-height: 1.12;
    margin: 0 0 12px;
}

.security-product-card p {
    margin-bottom: 0;
}

.plan-marketing-page {
    --plan-accent: #1d4f91;
    --plan-accent-rgb: 29, 79, 145;
    --plan-soft: #eef5ff;
    --company-accent: var(--plan-accent);
    background: #fff;
}

.plan-detail-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(var(--plan-accent-rgb), .14), transparent 32%),
        linear-gradient(135deg, #f7f9fb 0%, #fff 48%, var(--plan-soft) 100%);
    border-bottom: 1px solid #dfe5ea;
    padding: 72px 0 54px;
}

.plan-detail-grid {
    align-items: center;
    display: grid;
    gap: 56px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .58fr);
}

.plan-detail-grid:before,
.plan-detail-grid:after,
.plan-detail-content:before,
.plan-detail-content:after,
.plan-loop-inner:before,
.plan-loop-inner:after {
    content: none;
    display: none;
}

.plan-detail-hero h1 {
    color: #111820;
    font-size: clamp(40px, 4.6vw, 58px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 22px;
    max-width: 780px;
}

.plan-detail-hero p:not(.eyebrow) {
    color: #53606b;
    font-size: 20px;
    max-width: 720px;
}

.plan-marketing-page .eyebrow,
.plan-detail-content span,
.plan-detail-summary span,
.plan-loop-band .eyebrow {
    color: var(--plan-accent);
}

.plan-marketing-page .btn-primary,
.plan-loop-band .btn-primary {
    background: var(--plan-accent);
    border-color: var(--plan-accent);
}

.plan-detail-summary {
    background: #fff;
    border: 1px solid rgba(var(--plan-accent-rgb), .25);
    border-radius: 14px;
    box-shadow: 0 26px 60px rgba(var(--plan-accent-rgb), .1);
    padding: 30px;
}

.plan-detail-summary span,
.plan-detail-content span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.plan-detail-summary strong {
    color: #111820;
    display: block;
    font-size: 28px;
    line-height: 1.12;
    margin-bottom: 16px;
}

.plan-detail-summary p {
    margin-bottom: 0;
}

.plan-detail-content {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
    padding: 46px 15px 72px;
}

.plan-detail-content article {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    padding: 28px;
}

.plan-detail-content h2 {
    color: #111820;
    font-size: 25px;
    line-height: 1.12;
    margin: 0 0 14px;
}

.plan-loop-band {
    background: #f7f9fb;
    border-top: 1px solid #dfe5ea;
    color: #111820;
    padding: 46px 0;
}

.plan-loop-inner {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.plan-loop-band h2 {
    color: #111820;
    font-size: 32px;
    line-height: 1.12;
    margin: 0;
}

.suite-tier-grid {
    display: grid;
    align-items: stretch;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
    padding: 46px 15px 72px;
}

.suite-tier-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), #fff 42%),
        radial-gradient(circle at 86% 8%, rgba(29, 79, 145, .08), transparent 34%);
    border: 1px solid #dfe5ea;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(17, 24, 32, .06), 0 2px 0 rgba(255, 255, 255, .9) inset;
    overflow: hidden;
    padding: 34px 30px 30px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.suite-tier-card:hover {
    box-shadow: 0 28px 64px rgba(17, 24, 32, .1), 0 2px 0 rgba(255, 255, 255, .9) inset;
    transform: translateY(-4px);
}

.featured-suite-tier {
    border-color: rgba(107, 119, 133, .55);
    box-shadow: 0 34px 78px rgba(69, 82, 96, .2), 0 2px 0 rgba(255, 255, 255, .95) inset;
    transform: translateY(-10px);
}

.featured-suite-tier:hover {
    box-shadow: 0 40px 90px rgba(69, 82, 96, .24), 0 2px 0 rgba(255, 255, 255, .95) inset;
    transform: translateY(-14px);
}

.suite-tier-card.bronze-tier {
    --tier-color: #9a5b2f;
    --tier-soft: #fff6ee;
}

.suite-tier-card.silver-tier {
    --tier-color: #6b7785;
    --tier-soft: #f4f7fa;
}

.suite-tier-card.gold-tier {
    --tier-color: #b8871f;
    --tier-soft: #fff8df;
}

.suite-tier-card.m365-tier {
    --tier-color: #1d4f91;
    --tier-soft: #eef5ff;
    background:
        radial-gradient(circle at 84% 12%, rgba(var(--icon-rgb, 29, 79, 145), .13), transparent 33%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), #fff 42%),
        linear-gradient(135deg, rgba(var(--icon-rgb, 29, 79, 145), .08), transparent 54%);
    position: relative;
}

.suite-tier-card.m365-tier:after {
    background: radial-gradient(circle, rgba(var(--icon-rgb, 29, 79, 145), .16) 0 2px, transparent 3px);
    background-size: 18px 18px;
    bottom: -24px;
    content: '';
    height: 120px;
    opacity: .6;
    position: absolute;
    right: -18px;
    width: 150px;
}

.suite-tier-card.email-tier {
    --icon-rgb: 0, 120, 212;
}

.suite-tier-card.workspace-tier {
    --icon-rgb: 91, 95, 199;
}

.suite-tier-card.office-tier {
    --icon-rgb: 216, 59, 1;
}

.m365-card-top {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.suite-tier-card .m365-product-logo {
    align-items: center;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(var(--icon-rgb, 29, 79, 145), .24);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(var(--icon-rgb, 29, 79, 145), .12);
    display: inline-flex;
    flex: 0 0 54px;
    height: 54px;
    justify-content: center;
    margin: -4px 0 0;
    padding: 9px;
    width: 54px;
}

.m365-product-logo img {
    display: block;
    height: 34px;
    width: 34px;
}

.suite-tier-card.m365-tier h2,
.suite-tier-card.m365-tier .plan-price,
.suite-tier-card.m365-tier ul {
    position: relative;
    z-index: 1;
}

.suite-tier-card.bronze-tier,
.suite-tier-card.silver-tier,
.suite-tier-card.gold-tier {
    border-color: color-mix(in srgb, var(--tier-color) 32%, #dfe5ea);
    position: relative;
}

.suite-tier-card.bronze-tier {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), #fff 44%),
        radial-gradient(circle at 86% 8%, rgba(154, 91, 47, .14), transparent 36%);
}

.suite-tier-card.silver-tier {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .97), #fff 42%),
        radial-gradient(circle at 82% 6%, rgba(107, 119, 133, .2), transparent 38%);
}

.suite-tier-card.gold-tier {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), #fff 44%),
        radial-gradient(circle at 86% 8%, rgba(184, 135, 31, .18), transparent 36%);
}

.suite-tier-card.bronze-tier:before,
.suite-tier-card.silver-tier:before,
.suite-tier-card.gold-tier:before {
    background: var(--tier-color);
    border-radius: 18px 18px 0 0;
    content: '';
    height: 6px;
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
}

.suite-tier-card.m365-tier:before {
    background: var(--tier-color);
    border-radius: 18px 18px 0 0;
    content: '';
    height: 6px;
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
}

.m365-domain-plan-section {
    padding: 0 15px 24px;
}

.m365-domain-plan-card {
    align-items: center;
    background:
        radial-gradient(circle at 88% 18%, rgba(0, 120, 212, .13), transparent 30%),
        radial-gradient(circle at 8% 86%, rgba(16, 124, 16, .09), transparent 26%),
        linear-gradient(135deg, #fff 0%, #f5f9fc 100%);
    border: 1px solid rgba(29, 79, 145, .22);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(17, 24, 32, .055);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
    padding: 30px;
}

.m365-domain-plan-card span,
.m365-domain-plan-card li:before {
    color: #1d4f91;
}

.m365-domain-plan-card > div > span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.m365-domain-plan-card .domain-card-icon {
    align-items: center;
    background: #eef7ff;
    border: 1px solid rgba(29, 79, 145, .2);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(29, 79, 145, .12);
    color: #1d4f91;
    display: inline-flex;
    font-size: 16px;
    font-weight: 800;
    height: 58px;
    justify-content: center;
    margin: 0 0 16px;
    width: 58px;
}

.m365-domain-plan-card h2 {
    color: #111820;
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 16px;
}

.m365-domain-plan-card .plan-price {
    margin-bottom: 0;
}

.plan-price.plan-price-call {
    font-size: 24px;
}

.m365-billing-input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.m365-billing-control {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 30px 15px 0;
}

.m365-billing-control span {
    color: #1d4f91;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.m365-billing-control strong {
    color: #111820;
    display: block;
    font-size: 20px;
    line-height: 1.2;
}

.m365-billing-options {
    background: #eef3f7;
    border: 1px solid #d8e2eb;
    border-radius: 999px;
    display: inline-flex;
    padding: 5px;
}

.m365-billing-options label {
    border-radius: 999px;
    color: #53606b;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    padding: 12px 18px;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}

.m365-billing-monthly:checked ~ .m365-billing-control label[for="m365Monthly"],
.m365-billing-annual:checked ~ .m365-billing-control label[for="m365Annual"] {
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 24, 32, .08);
    color: #1d4f91;
}

.annual-price,
.annual-period,
.m365-billing-annual:checked ~ .suite-tier-grid .monthly-price,
.m365-billing-annual:checked ~ .suite-tier-grid .monthly-period,
.m365-billing-annual:checked ~ .m365-domain-plan-section .monthly-price,
.m365-billing-annual:checked ~ .m365-domain-plan-section .monthly-period,
.m365-billing-annual:checked ~ .m365-addons-section .monthly-price,
.m365-billing-annual:checked ~ .m365-addons-section .monthly-period {
    display: none;
}

.m365-billing-annual:checked ~ .suite-tier-grid .annual-price,
.m365-billing-annual:checked ~ .suite-tier-grid .annual-period,
.m365-billing-annual:checked ~ .m365-domain-plan-section .annual-price,
.m365-billing-annual:checked ~ .m365-domain-plan-section .annual-period {
    display: inline;
}

.m365-billing-annual:checked ~ .m365-addons-section .addon-price .annual-price,
.m365-billing-annual:checked ~ .m365-addons-section .addon-price .annual-period {
    display: block;
}

.plan-price .billing-price {
    color: var(--tier-color, #1d4f91);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    margin-left: 0;
    text-transform: none;
}

.plan-price .billing-period {
    color: #53606b;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    margin-left: 6px;
    text-transform: none;
}

.m365-domain-plan-card ul {
    display: grid;
    gap: 10px 22px;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.m365-domain-plan-card li {
    color: #53606b;
    line-height: 1.55;
    padding-left: 20px;
    position: relative;
}

.m365-domain-plan-card li:before {
    background: #1d4f91;
    border-radius: 50%;
    content: '';
    height: 7px;
    left: 0;
    position: absolute;
    top: 10px;
    width: 7px;
}

.m365-addons-section {
    padding: 24px 15px 76px;
}

.m365-addons-header {
    align-items: end;
    background: #f7f9fb;
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
    margin-bottom: 24px;
    padding: 28px;
}

.m365-addons-header span {
    color: #1d4f91;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.m365-addons-header h2 {
    color: #111820;
    font-size: 34px;
    line-height: 1.1;
    margin: 0;
    max-width: 720px;
}

.m365-addons-header p {
    color: #53606b;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.m365-addon-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}

.m365-addon-grid article {
    --addon-rgb: 29, 79, 145;
    background:
        radial-gradient(circle at 96% 0%, rgba(var(--addon-rgb), .1), transparent 28%),
        #fff;
    border: 1px solid #dfe7ee;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(17, 24, 32, .045);
    display: grid;
    gap: 22px;
    grid-template-columns: 148px minmax(0, 1fr);
    min-height: 178px;
    overflow: hidden;
    padding: 26px;
    position: relative;
}

.m365-addon-grid article:after {
    background: linear-gradient(180deg, rgba(var(--addon-rgb), .22), rgba(var(--addon-rgb), 0));
    content: '';
    height: 74px;
    position: absolute;
    right: 18px;
    top: 0;
    width: 2px;
}

.m365-addon-grid .office-addon {
    --addon-rgb: 216, 59, 1;
}

.m365-addon-grid .teams-addon {
    --addon-rgb: 91, 95, 199;
}

.m365-addon-grid .encryption-addon {
    --addon-rgb: 16, 124, 16;
}

.m365-addon-grid .security-addon {
    --addon-rgb: 29, 79, 145;
}

.m365-addon-grid article.wide-addon {
    grid-column: auto;
}

.m365-addon-grid .addon-price {
    align-self: start;
    background:
        radial-gradient(circle at 82% 18%, rgba(var(--addon-rgb), .13), transparent 34%),
        #eef5ff;
    border: 1px solid rgba(var(--addon-rgb), .18);
    border-radius: 14px;
    color: rgb(var(--addon-rgb));
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 0;
    min-height: 92px;
    padding: 16px 14px;
    text-align: center;
}

.m365-addon-grid .addon-price,
.m365-addon-grid .addon-copy {
    position: relative;
    z-index: 1;
}

.m365-addon-grid .addon-price strong {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.m365-addon-grid .addon-price small {
    color: #53606b;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 8px;
}

.m365-addon-grid .addon-price .annual-price,
.m365-addon-grid .addon-price .annual-period,
.m365-billing-annual:checked ~ .m365-addons-section .addon-price .monthly-price,
.m365-billing-annual:checked ~ .m365-addons-section .addon-price .monthly-period {
    display: none;
}

.m365-billing-annual:checked ~ .m365-addons-section .addon-price .annual-price,
.m365-billing-annual:checked ~ .m365-addons-section .addon-price .annual-period {
    display: block;
}

.m365-addon-grid .addon-copy {
    align-self: center;
}

.addon-logo,
.addon-seal {
    align-items: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(var(--addon-rgb), .2);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(var(--addon-rgb), .14);
    display: inline-flex;
    justify-content: center;
    margin-bottom: 16px;
    min-height: 46px;
    min-width: 46px;
    padding: 9px;
}

.addon-logo img {
    display: block;
    height: 32px;
    width: 32px;
}

.addon-seal {
    color: #fff;
    flex-direction: column;
    gap: 3px;
    min-width: 104px;
    padding: 9px 13px;
}

.addon-seal b {
    color: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
}

.addon-seal small {
    color: rgba(255, 255, 255, .84);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1;
    text-transform: uppercase;
}

.hipaa-seal {
    background:
        linear-gradient(135deg, rgba(16, 124, 16, .96), rgba(16, 124, 16, .72)),
        #107c10;
}

.dmarc-seal {
    background:
        linear-gradient(135deg, rgba(29, 79, 145, .96), rgba(17, 24, 32, .76)),
        #1d4f91;
}

.m365-addon-grid h3 {
    color: #111820;
    font-size: 21px;
    line-height: 1.18;
    margin: 0 0 12px;
}

.m365-addon-grid p {
    color: #53606b;
    line-height: 1.55;
    margin: 0;
}

.plan-badge {
    background: #111820;
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    margin: 0 0 18px;
    padding: 8px 12px;
    text-transform: uppercase;
}

.suite-tier-card span {
    color: var(--tier-color, #1d4f91);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.suite-tier-card h2 {
    color: #111820;
    font-size: 30px;
    line-height: 1.08;
    margin: 0 0 20px;
}

.plan-audience {
    background: var(--tier-soft, #eef5ff);
    border: 1px solid color-mix(in srgb, var(--tier-color, #1d4f91) 24%, #dfe5ea);
    border-radius: 999px;
    color: #53606b;
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    margin: -6px 0 18px;
    padding: 7px 12px;
}

.plan-price {
    color: var(--tier-color, #1d4f91);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 24px;
}

.plan-price span {
    color: #53606b;
    display: inline;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    margin-left: 6px;
    text-transform: none;
}

.plan-price .annual-price,
.plan-price .annual-period,
.m365-billing-annual:checked ~ .suite-tier-grid .plan-price .monthly-price,
.m365-billing-annual:checked ~ .suite-tier-grid .plan-price .monthly-period,
.m365-billing-annual:checked ~ .m365-domain-plan-section .plan-price .monthly-price,
.m365-billing-annual:checked ~ .m365-domain-plan-section .plan-price .monthly-period {
    display: none;
}

.m365-billing-annual:checked ~ .suite-tier-grid .plan-price .annual-price,
.m365-billing-annual:checked ~ .suite-tier-grid .plan-price .annual-period,
.m365-billing-annual:checked ~ .m365-domain-plan-section .plan-price .annual-price,
.m365-billing-annual:checked ~ .m365-domain-plan-section .plan-price .annual-period {
    display: inline;
}

.suite-tier-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.suite-tier-card li {
    border-top: 1px solid #e5ebf0;
    color: #53606b;
    padding: 13px 0 13px 22px;
    position: relative;
}

.suite-tier-card li:before {
    background: var(--tier-color, #1d4f91);
    border-radius: 50%;
    content: '';
    height: 7px;
    left: 0;
    position: absolute;
    top: 22px;
    width: 7px;
}

.plan-inline-link {
    border-bottom: 2px solid color-mix(in srgb, var(--tier-color, #1d4f91) 34%, transparent);
    color: var(--tier-color, #1d4f91);
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    margin-left: 6px;
    text-decoration: none;
    white-space: nowrap;
    width: max-content;
}

.plan-inline-link:hover,
.plan-inline-link:focus {
    border-bottom-color: var(--tier-color, #1d4f91);
    color: var(--tier-color, #1d4f91);
    text-decoration: none;
}

.plan-card-see-more {
    background: rgba(255, 255, 255, .72);
    border: 1px solid color-mix(in srgb, var(--tier-color, #1d4f91) 24%, #dfe5ea);
    border-radius: 12px;
    margin: 22px 0 0;
    padding: 14px;
}

.plan-card-see-more a {
    color: var(--tier-color, #1d4f91);
    display: block;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.plan-card-see-more a:hover,
.plan-card-see-more a:focus {
    color: #111820;
    text-decoration: none;
}

.backup-stack {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 0 22px;
}

.backup-stack div {
    background: linear-gradient(180deg, #f8fbfd, #eef4f8);
    border: 1px solid #dfe7ee;
    border-radius: 12px;
    min-height: 102px;
    padding: 14px 12px;
}

.backup-stack b {
    color: #111820;
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.backup-stack small {
    color: #53606b;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.backup-pricing-section {
    padding: 46px 15px 72px;
}

.backup-pricing-header {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(240px, .54fr) minmax(0, 1fr);
    margin-bottom: 22px;
}

.backup-pricing-header span {
    color: #1d4f91;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.backup-pricing-header h2 {
    color: #111820;
    font-size: 34px;
    line-height: 1.1;
    margin: 0;
}

.backup-pricing-header p {
    color: #53606b;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.backup-pricing-layout {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr);
    align-items: stretch;
}

.backup-pricing-table-wrap {
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(17, 24, 32, .07);
    overflow: hidden;
}

.backup-pricing-table {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}

.backup-pricing-table th,
.backup-pricing-table td {
    border-bottom: 1px solid #e6edf2;
    color: #53606b;
    padding: 18px 22px;
    vertical-align: middle;
}

.backup-pricing-table th {
    background: #f5f8fb;
    color: #111820;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.backup-pricing-table td:first-child {
    color: #111820;
    font-size: 19px;
    font-weight: 800;
}

.backup-pricing-table td:nth-child(2) {
    color: #1d4f91;
    font-weight: 800;
}

.backup-pricing-table tbody tr:last-child td {
    border-bottom: 0;
}

.backup-pricing-table tbody tr:hover td {
    background: #f8fbfd;
}

.backup-step-stack {
    display: grid;
    gap: 14px;
}

.backup-step-stack article {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(248, 251, 253, .98)),
        radial-gradient(circle at 92% 10%, rgba(29, 79, 145, .14), transparent 38%);
    border: 1px solid #dfe7ee;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(17, 24, 32, .055);
    display: grid;
    gap: 14px;
    grid-template-columns: 46px 1fr;
    min-height: 118px;
    padding: 20px;
}

.backup-step-stack span {
    align-items: center;
    background: #1d4f91;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(29, 79, 145, .2);
    color: #fff;
    display: flex;
    font-size: 18px;
    font-weight: 800;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.backup-step-stack strong {
    color: #111820;
    display: block;
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.backup-step-stack p {
    color: #53606b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
}

.backup-overage-note {
    background: #f8fbfd;
    border-top: 1px solid #e6edf2;
    color: #53606b;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 18px 22px;
}

.backup-overage-note strong {
    color: #111820;
}

.backup-contact-cta {
    align-items: center;
    background:
        repeating-linear-gradient(135deg, rgba(29, 79, 145, .08) 0 2px, transparent 2px 12px),
        radial-gradient(circle at 94% 86%, rgba(29, 79, 145, .26), transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(29, 79, 145, .16), transparent 35%),
        linear-gradient(135deg, #fff, #f7fafc),
        radial-gradient(circle at 92% 12%, rgba(29, 79, 145, .12), transparent 36%);
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    box-shadow: 0 24px 58px rgba(17, 24, 32, .07);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) max-content;
    margin-bottom: 76px;
    overflow: hidden;
    padding: 34px;
    position: relative;
}

.backup-contact-cta:before,
.backup-contact-cta:after {
    content: none;
    display: none;
}

.backup-contact-cta > div {
    max-width: 820px;
    position: relative;
    z-index: 1;
}

.backup-contact-cta span {
    color: #1d4f91;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.backup-contact-cta h2 {
    color: #111820;
    font-size: 32px;
    line-height: 1.12;
    margin: 0 0 12px;
}

.backup-contact-cta p {
    color: #53606b;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 720px;
}

.backup-contact-cta .backup-contact-button {
    align-items: center;
    align-self: center;
    background: #fff;
    border: 1px solid rgba(29, 79, 145, .28);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(17, 24, 32, .06);
    color: #1d4f91;
    display: flex;
    font-size: 15px;
    font-weight: 800;
    gap: 12px;
    justify-content: center;
    justify-self: end;
    line-height: 1;
    margin: 0;
    min-height: 48px;
    padding: 0 18px 0 22px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
    width: max-content;
    z-index: 1;
}

.backup-contact-cta .backup-contact-button:after {
    align-items: center;
    background: #1d4f91;
    border-radius: 50%;
    color: #fff;
    content: '';
    display: flex;
    height: 28px;
    justify-content: center;
    line-height: 1;
    width: 28px;
}

.backup-contact-cta .backup-contact-button:before {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: '';
    height: 8px;
    position: absolute;
    right: 28px;
    transform: rotate(45deg);
    width: 8px;
    z-index: 1;
}

.backup-contact-cta .backup-contact-button:hover,
.backup-contact-cta .backup-contact-button:focus {
    border-color: rgba(29, 79, 145, .52);
    box-shadow: 0 16px 34px rgba(17, 24, 32, .1);
    color: #1d4f91;
    text-decoration: none;
}

.backup-return-card {
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(17, 24, 32, .06);
    color: inherit;
    padding: 30px 34px;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.backup-return-card:hover,
.backup-return-card:focus {
    border-color: rgba(29, 79, 145, .34);
    box-shadow: 0 24px 58px rgba(17, 24, 32, .09);
    color: inherit;
    text-decoration: none;
    transform: translateY(-3px);
}

.return-button {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    min-width: 240px;
    padding-left: 24px;
    padding-right: 24px;
    white-space: nowrap;
}

.return-button:before {
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: '';
    height: 9px;
    transform: rotate(45deg);
    width: 9px;
}

.suite-addons-section {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr);
    padding: 0 15px 76px;
}

.suite-addons-section > div:first-child {
    border-left: 5px solid #1d4f91;
    padding-left: 24px;
}

.suite-addons-section span,
.suite-addons-grid h3 {
    color: #1d4f91;
}

.suite-addons-section span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.suite-addons-section h2 {
    color: #111820;
    font-size: 36px;
    line-height: 1.08;
    margin: 0 0 18px;
}

.suite-addons-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
}

.suite-addons-grid article {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .04);
    padding: 26px;
}

.suite-addons-grid h3 {
    font-size: 22px;
    margin: 0 0 12px;
}

.suite-addons-grid p {
    margin-bottom: 0;
}

.company-page .btn-primary,
.shared-company-band .btn-primary {
    background: var(--company-accent, #0b5cab);
    border-color: var(--company-accent, #0b5cab);
}

.company-visual svg {
    display: block;
    height: auto;
    width: 100%;
}

.company-field {
    fill: #fff;
    stroke: rgba(var(--company-accent-rgb), .22);
    stroke-width: 1.2;
}

.company-line {
    fill: none;
    stroke: #c8d3de;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.company-line.active-line {
    stroke: var(--company-accent);
    stroke-width: 3.4;
}

.company-core circle,
.company-node circle {
    fill: #fff;
    stroke: #cfd9e2;
    stroke-width: 1.8;
}

.company-core circle {
    stroke: var(--company-accent);
    stroke-width: 2.4;
}

.company-node.active-node circle {
    stroke: var(--company-accent);
    stroke-width: 2.6;
}

.company-core text,
.company-node text {
    fill: #111820;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
}

.company-node rect,
.company-node path,
.company-node circle:not(:first-child) {
    fill: none;
    stroke: var(--company-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.company-visual:hover .active-node,
.company-visual:focus-within .active-node {
    transform: scale(1.05);
}

.company-content-grid:before,
.company-content-grid:after {
    content: none;
    display: none;
}

.service-page-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 30px;
}

.service-page-card {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    color: inherit !important;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    overflow: hidden;
    padding: 26px;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.service-page-card:before {
    background: #1d4f91;
    content: '';
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.service-page-card.card-voice:before {
    background: #ad532b;
}

.service-page-card.card-security:before {
    background: #386641;
}

.service-page-card:hover,
.service-page-card:focus {
    border-color: #b9c9d7;
    box-shadow: 0 24px 54px rgba(17, 24, 32, .08);
    transform: translateY(-3px);
}

.service-page-card span,
.plan-intro-card span,
.plan-includes-grid span {
    color: #1d4f91;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.service-page-card.card-voice span,
.company-voice-page .plan-intro-card span,
.company-voice-page .plan-includes-grid span {
    color: #ad532b;
}

.service-page-card.card-security span,
.company-security-page .plan-intro-card span,
.company-security-page .plan-includes-grid span {
    color: #386641;
}

.service-page-card h3 {
    color: #111820;
    font-size: 26px;
    line-height: 1.1;
    margin: 0 0 16px;
}

.service-page-card p {
    font-size: 16px;
    margin-bottom: 24px;
}

.service-page-card strong {
    border-top: 1px solid #e5ebf0;
    color: #111820;
    display: block;
    margin-top: auto;
    padding-top: 18px;
}

.service-plan-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
    padding: 42px 15px 68px;
}

.service-plan-layout:before,
.service-plan-layout:after,
.plan-includes-grid:before,
.plan-includes-grid:after {
    content: none;
    display: none;
}

.plan-intro-card,
.plan-includes-grid article {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    padding: 28px;
}

.plan-intro-card {
    background: linear-gradient(135deg, #fff, var(--company-soft));
}

.plan-intro-card h2 {
    color: #111820;
    font-size: 34px;
    line-height: 1.08;
    margin: 0 0 18px;
}

.plan-intro-card p {
    font-size: 18px;
}

.plan-includes-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
}

.plan-includes-grid h3 {
    color: #111820;
    font-size: 22px;
    line-height: 1.12;
    margin: 0 0 12px;
}

.plan-includes-grid p {
    margin-bottom: 0;
}

.company-content-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
    padding: 42px 15px 68px;
}

.company-content-grid article {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    padding: 26px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.company-content-grid article:hover {
    border-color: rgba(var(--company-accent-rgb), .45);
    box-shadow: 0 24px 54px rgba(17, 24, 32, .08);
    transform: translateY(-2px);
}

.company-content-grid span {
    color: var(--company-accent);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.company-content-grid h2 {
    color: #111820;
    font-size: 25px;
    line-height: 1.12;
    margin: 0 0 14px;
}

.company-content-grid p {
    margin-bottom: 0;
}

.shared-company-band {
    background: #f7f9fb;
    border-top: 1px solid #dfe5ea;
    color: #111820;
    padding: 46px 0;
}

.shared-company-band .eyebrow,
.shared-company-band h2,
.shared-company-band p {
    color: #111820;
}

body {
    padding-top: 128px;
}

.modern-nav {
    min-height: 128px;
}

.modern-nav .nav-center-shell {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 128px;
}

.modern-nav .nav-brand-row {
    display: flex;
    float: none;
    justify-content: center;
    min-height: 76px;
    position: relative;
    width: 100%;
}

.modern-nav .brand-lockup {
    align-items: center;
    display: inline-flex;
    float: none;
    gap: 14px;
    justify-content: center;
    margin-left: 0 !important;
    min-height: 76px;
    padding: 9px 15px 6px;
}

.modern-nav .brand-logo {
    height: 58px;
    width: 58px;
}

.modern-nav .brand-name {
    color: #111820;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}

.modern-nav .nav-links-row {
    border-top: 1px solid rgba(17, 24, 32, .08);
    box-shadow: none;
    float: none;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    width: 100%;
}

.centered-bracket-nav {
    align-items: center;
    display: flex;
    float: none;
    gap: 8px;
    justify-content: center;
    margin: 0;
    width: 100%;
}

.modern-nav .centered-bracket-nav > li {
    float: none;
}

.modern-nav .centered-bracket-nav > li > a,
.nav-company-cluster a {
    color: #22313f;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 15px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .18s ease, transform .18s ease;
}

.modern-nav .centered-bracket-nav > li > a:hover,
.modern-nav .centered-bracket-nav > li > a:focus,
.nav-company-cluster a:hover,
.nav-company-cluster a:focus {
    color: #0b5cab;
    text-decoration: none;
    transform: translateY(-1px);
}

.nav-company-cluster {
    align-items: center;
    display: inline-flex !important;
    gap: 2px;
    padding: 0 8px;
    position: relative;
}

.nav-company-cluster:before,
.nav-company-cluster:after {
    background: linear-gradient(90deg, transparent, rgba(29, 79, 145, .28), transparent);
    content: '';
    height: 1px;
    left: 18px;
    position: absolute;
    right: 18px;
    transition: opacity .18s ease, transform .18s ease;
}

.nav-company-cluster:before {
    top: 8px;
}

.nav-company-cluster:after {
    bottom: 8px;
}

.nav-company-cluster:hover:before,
.nav-company-cluster:focus-within:before {
    opacity: 1;
    transform: translateY(-2px);
}

.nav-company-cluster:hover:after,
.nav-company-cluster:focus-within:after {
    opacity: 1;
    transform: translateY(2px);
}

.nav-bracket {
    color: #1d4f91;
    font-family: 'Source Serif 4', serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    padding: 0 4px;
    transition: transform .18s ease;
}

.nav-company-cluster:hover .nav-bracket,
.nav-company-cluster:focus-within .nav-bracket {
    transform: scale(1.08);
}

.nav-separator {
    color: #8b98a4;
    font-weight: 800;
}

.support-page,
.login-page-modern {
    background: #fff;
    color: #111820;
}

.support-hero,
.login-page-modern {
    background:
        radial-gradient(circle at 82% 16%, rgba(82, 177, 221, .16), transparent 34%),
        linear-gradient(135deg, #f7fbff 0%, #fff 50%, #eef7f6 100%);
    padding: 88px 0;
}

.support-hero-grid,
.login-panel-grid {
    align-items: center;
    display: grid;
    gap: 70px;
    grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr);
}

.support-hero-grid:before,
.support-hero-grid:after,
.login-panel-grid:before,
.login-panel-grid:after {
    content: none;
    display: none;
}

.support-hero h1,
.login-page-modern h1 {
    color: #111820;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 22px;
}

.support-hero p:not(.eyebrow),
.login-page-modern p:not(.eyebrow) {
    color: #53606b;
    font-size: 20px;
    line-height: 1.65;
    max-width: 700px;
}

.support-session-panel,
.login-form-card {
    background: rgba(255, 255, 255, .84);
    border: 1px solid #d6e2ec;
    border-radius: 24px;
    box-shadow: 0 34px 90px rgba(17, 24, 32, .1);
    display: grid;
    gap: 12px;
    padding: 22px;
}

.support-session-panel div {
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    padding: 22px;
}

.support-session-panel span {
    color: #1d4f91;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.support-session-panel strong {
    color: #111820;
    display: block;
    font-size: 22px;
    line-height: 1.1;
}

.support-session-panel small {
    color: #53606b;
    display: block;
    font-size: 14px;
    line-height: 1.45;
    margin-top: 8px;
}

/* ── Remote Assist embed ───────────────────────────────────── */
.support-assist {
    background: #fff;
    border-top: 1px solid #eef2f6;
    padding: 76px 0;
}

.assist-head {
    margin: 0 0 40px;
    max-width: 760px;
}

.assist-head h2 {
    color: #111820;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    margin: 6px 0 14px;
}

.assist-head p {
    color: #53606b;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

.assist-grid {
    align-items: start;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
}

/* Left: pseudo "app window" launcher */
.assist-window {
    background: #fff;
    border: 1px solid #d6e2ec;
    border-radius: 18px;
    box-shadow: 0 34px 90px rgba(17, 24, 32, .12);
    overflow: hidden;
}

.assist-window-bar {
    align-items: center;
    background: linear-gradient(180deg, #f7fbff, #eaf1f8);
    border-bottom: 1px solid #e2eaf1;
    display: flex;
    gap: 7px;
    padding: 13px 18px;
}

.assist-window-bar .dot {
    border-radius: 50%;
    display: inline-block;
    height: 11px;
    width: 11px;
}

.assist-window-bar .dot.red { background: #ff5f57; }
.assist-window-bar .dot.amber { background: #febc2e; }
.assist-window-bar .dot.green { background: #28c840; }

.assist-window-bar strong {
    color: #111820;
    font-size: 14px;
    font-weight: 700;
    margin-left: 8px;
}

.assist-window-bar strong i { color: #1d4f91; margin-right: 5px; }

.assist-window-bar .src {
    color: #8b98a4;
    font-size: 12px;
    letter-spacing: .04em;
    margin-left: auto;
}

.assist-window-body {
    background:
        radial-gradient(circle at 84% 8%, rgba(82, 177, 221, .12), transparent 46%),
        linear-gradient(135deg, #fbfdff 0%, #fff 60%, #f3f9f8 100%);
    padding: 48px 36px 44px;
    text-align: center;
}

.assist-launch-icon {
    align-items: center;
    background: #eaf3fb;
    border: 1px solid #d3e6f5;
    border-radius: 50%;
    color: #1d4f91;
    display: inline-flex;
    font-size: 30px;
    height: 72px;
    justify-content: center;
    margin-bottom: 18px;
    width: 72px;
}

.assist-window-body h3 {
    color: #111820;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 10px;
}

.assist-window-body > p {
    color: #53606b;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto 24px;
    max-width: 460px;
}

.assist-launch-btn {
    font-size: 18px;
    padding: 14px 34px;
}

.assist-launch-btn i { margin-right: 8px; }

.assist-launch-note {
    color: #53606b;
    font-size: 13px;
    margin: 18px auto 0;
    max-width: 380px;
}

.assist-launch-note i { color: #1d4f91; margin-right: 4px; }
.assist-launch-note a { color: #1d4f91; font-weight: 600; }

/* Right: info column */
.assist-side {
    display: grid;
    gap: 24px;
}

.assist-side h3 {
    color: #1d4f91;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.assist-steps {
    counter-reset: step;
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.assist-steps li {
    color: #53606b;
    font-size: 15px;
    line-height: 1.5;
    padding-left: 46px;
    position: relative;
}

.assist-steps li strong {
    color: #111820;
    display: block;
    font-size: 16px;
    margin-bottom: 2px;
}

.assist-steps li:before {
    align-items: center;
    background: #1d4f91;
    border-radius: 50%;
    color: #fff;
    content: counter(step);
    counter-increment: step;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 30px;
}

.assist-safety {
    background: #fff7ed;
    border: 1px solid #f4d8b0;
    border-radius: 14px;
    color: #7a5326;
    font-size: 14px;
    line-height: 1.5;
    padding: 14px 16px;
}

.assist-safety i { color: #d98a1f; margin-right: 6px; }

/* ── Plan upsell ───────────────────────────────────────────── */
.support-upsell {
    background:
        radial-gradient(circle at 82% 16%, rgba(82, 177, 221, .16), transparent 34%),
        linear-gradient(135deg, #f7fbff 0%, #fff 50%, #eef7f6 100%);
    border-top: 1px solid #eef2f6;
    padding: 76px 0;
    text-align: center;
}

.support-upsell h2 {
    color: #111820;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 14px;
}

.support-upsell p {
    color: #53606b;
    font-size: 18px;
    line-height: 1.6;
    margin: 0 auto 26px;
    max-width: 700px;
}

.support-upsell .cta-row {
    justify-content: center;
}

@media (max-width: 991px) {
    .assist-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes selectedLine {
    from {
        opacity: .35;
        stroke-width: 2;
    }

    to {
        opacity: 1;
        stroke-width: 3.2;
    }
}

@media (max-width: 1199px) {
    .modern-nav .navbar-nav > li > a {
        padding-left: 8px;
        padding-right: 8px;
    }

    .company-hero-grid,
    .it-hero-grid,
    .voice-hero-grid,
    .security-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr);
    }

}

/* Five footer columns do not fit the 970px container between 992-1199px.
   Range-bounded on purpose: below 992px .footer-grid collapses to one column,
   and a stray "grid-column: span 3" there creates implicit columns and makes
   the whole page scroll sideways on a phone. */
@media (min-width: 992px) and (max-width: 1199px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand-block {
        grid-column: span 3;
    }
}

@media (max-width: 991px) {
    body {
        padding-top: 92px;
    }

    .modern-nav,
    .modern-nav .container,
    .brand-lockup {
        min-height: 92px;
    }

    .modern-nav .nav-center-shell {
        min-height: 92px;
    }

    .modern-nav .nav-brand-row {
        min-height: 92px;
    }

    .modern-nav .brand-lockup {
        min-height: 92px;
        padding-right: 68px;
    }

    .modern-nav .navbar-toggle {
        margin-right: 15px;
        margin-top: 28px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 4;
    }

    .modern-nav .nav-links-row {
        border-top: 1px solid #dfe7ee;
        width: 100%;
    }

    .centered-bracket-nav {
        display: grid;
        gap: 8px;
        padding: 12px 0 18px;
    }

    .modern-nav .centered-bracket-nav > li > a,
    .nav-company-cluster a {
        justify-content: center;
        padding: 10px 12px;
    }
    .login-form-card {
        gap: 14px;
    }
    .login-form-card label {
        color: #111820;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .12em;
        margin: 0;
        text-transform: uppercase;
    }
    .login-form-card .form-control {
        border-color: #d6e2ec;
        border-radius: 12px;
        box-shadow: none;
        height: 50px;
    }

    .about-story-section,
    .support-hero-grid,
    .login-panel-grid {
        justify-self: center;
        max-width: 100%;
    }

    .support-hero-grid,
    .login-panel-grid {
        grid-template-columns: 1fr;
    }

    .brand-logo {
        width: 56px;
    }

    .company-content-grid,
    .it-hero-grid,
    .voice-hero-grid,
    .security-hero-grid,
    .it-package-section,
    .it-services-directory,
    .voice-builder-section,
    .security-planning-section,
    .security-product-section {
        grid-template-columns: 1fr;
    }

    .voice-flow-visual {
        order: 2;
    }

    .company-visual {
        max-width: 620px;
    }

    .hero-company-links,
    .shared-access-grid,
    .service-page-grid,
    .service-plan-layout,
    .home-hero-layout,
    .home-hook-grid,
    .home-about-layout,
    .home-contact-card,
    .about-hero-grid,
    .about-story-section {
        grid-template-columns: 1fr;
    }

    .home-system-panel {
        max-width: 640px;
    }

    .home-contact-actions {
        justify-self: start;
    }

    .plan-includes-grid,
    .voice-feature-grid,
    .security-check-grid,
    .security-product-grid,
    .suite-tier-grid,
    .footer-grid,
    .m365-addons-header,
    .m365-domain-plan-card {
        grid-template-columns: 1fr;
    }

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

    .m365-addon-grid article.wide-addon {
        grid-column: span 2;
    }

    .m365-domain-plan-card ul {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .it-plan-card {
        grid-template-columns: 1fr;
    }

    .it-suite-row {
        align-items: start;
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .it-suite-row > strong {
        grid-column: 2;
        justify-self: start;
    }

    .plan-detail-grid,
    .plan-detail-content,
    .plan-loop-inner,
    .backup-pricing-layout,
    .backup-contact-cta {
        grid-template-columns: 1fr;
    }

    .backup-contact-cta .backup-contact-button,
    .return-button {
        justify-self: start;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    body {
        padding-top: 82px;
    }

    .modern-nav,
    .modern-nav .container,
    .brand-lockup {
        min-height: 82px;
    }

    .modern-nav .nav-center-shell,
    .modern-nav .nav-brand-row,
    .modern-nav .brand-lockup {
        min-height: 82px;
    }

    .modern-nav .brand-lockup {
        gap: 10px;
        padding-left: 8px;
        padding-right: 58px;
    }

    .brand-logo {
        height: 50px;
        width: 50px;
    }

    .brand-name {
        font-size: 14px;
    }

    .modern-nav .navbar-toggle {
        margin-top: 23px;
    }

    .nav-company-cluster {
        border-radius: 24px;
        flex-wrap: wrap;
        padding: 4px 10px;
    }

    .nav-bracket {
        font-size: 22px;
    }

    .company-hero,
    .plan-detail-hero,
    .service-hero-shell {
        padding: 50px 0 36px;
    }

    .company-hero h1,
    .plan-detail-hero h1,
    .service-hero-shell h1 {
        font-size: 36px;
    }

    .company-hero p:not(.eyebrow),
    .plan-detail-hero p:not(.eyebrow),
    .service-hero-shell p:not(.eyebrow) {
        font-size: 18px;
    }

    .it-dashboard-visual,
    .voice-flow-visual,
    .security-survey-panel {
        padding: 22px;
    }

    .it-system-card strong {
        font-size: 22px;
    }

    .it-system-grid,
    .m365-addon-grid {
        grid-template-columns: 1fr;
    }

    .m365-addon-grid article {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .m365-billing-control {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .m365-billing-options {
        width: 100%;
    }

    .m365-billing-options label {
        flex: 1;
        text-align: center;
    }

    .m365-addon-grid .addon-price {
        justify-self: start;
        min-width: 148px;
    }

    .m365-addon-grid article.wide-addon {
        grid-column: auto;
    }

    .home-hero-layout {
        min-height: 0;
        padding-bottom: 54px;
        padding-top: 54px;
    }

    .home-hook-section,
    .home-about-section,
    .about-hero,
    .about-story-section {
        padding: 52px 0;
    }

    .home-about-section {
        background: linear-gradient(160deg, #f7fbff 0%, #eef5ff 58%, #fff 58%, #f7f9fb 100%);
    }

    .home-system-panel {
        min-height: 0;
    }

    .home-system-panel:after,
    .system-wire-line {
        display: none;
    }

    .system-panel-core,
    .system-lane {
        left: auto;
        max-width: none;
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: auto;
    }

    .system-panel-core {
        border-radius: 26px;
        height: auto;
        margin-bottom: 14px;
        min-height: 132px;
    }

    .system-lane {
        border-radius: 22px;
        margin-top: 12px;
    }

    .home-contact-card {
        padding: 26px;
    }

    .m365-addons-header h2 {
        font-size: 28px;
    }

    .voice-endpoints {
        grid-template-columns: 1fr;
    }

    .it-package-section,
    .it-services-directory,
    .plan-detail-content,
    .suite-tier-grid,
    .voice-builder-section,
    .security-planning-section,
    .security-product-section {
        padding-bottom: 48px;
        padding-top: 28px;
    }

    .company-content-grid {
        padding-bottom: 48px;
        padding-top: 28px;
    }

    .backup-contact-cta,
    .backup-return-card {
        padding: 24px;
    }

    .backup-contact-cta .backup-contact-button,
    .return-button {
        justify-self: stretch;
        min-width: 0;
        width: 100%;
    }
}

/* ── Tools Page ─────────────────────────────────────────────── */

.tools-hero {
    background: #0c1c2b;
}

.tools-content {
    padding: 56px 0 80px;
}

.tools-category {
    margin-bottom: 56px;
}

.tools-cat-heading {
    align-items: center;
    border-bottom: 2px solid rgba(22, 32, 42, .1);
    color: #16202a;
    display: flex;
    font-size: 17px;
    gap: 10px;
    margin: 0 0 24px;
    padding-bottom: 14px;
}

.tools-cat-heading i {
    color: #1268c4;
}

.tool-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 24px;
    overflow: visible !important;
    padding: 24px;
    position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
}

.tool-card:hover {
    box-shadow: 0 22px 54px rgba(22, 32, 42, .12);
    transform: translateY(-2px);
}

.tool-card.is-selected {
    border-color: #1268c4 !important;
    box-shadow: 0 0 0 2px rgba(18, 104, 196, .28), 0 18px 46px rgba(22, 32, 42, .07) !important;
}

/* Checkbox */
.tool-select {
    cursor: pointer;
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
}

.tool-select input {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}

.tool-check-ui {
    background: #fff;
    border: 2px solid rgba(22, 32, 42, .22);
    border-radius: 5px;
    display: block;
    height: 22px;
    position: relative;
    transition: background .15s, border-color .15s;
    width: 22px;
}

.tool-select:hover .tool-check-ui {
    border-color: #1268c4;
}

.tool-select input:checked + .tool-check-ui {
    background: #1268c4;
    border-color: #1268c4;
}

.tool-select input:checked + .tool-check-ui::after {
    border: 2.5px solid #fff;
    border-right: none;
    border-top: none;
    content: '';
    display: block;
    height: 6px;
    left: 4px;
    position: absolute;
    top: 5px;
    transform: rotate(-48deg);
    width: 10px;
}

/* Icon */
.tool-icon-wrap {
    align-items: center;
    background: #e7f1fb;
    border-radius: 8px;
    color: #1268c4;
    display: flex;
    font-size: 22px;
    height: 50px;
    justify-content: center;
    margin-bottom: 18px;
    width: 50px;
}

/* Body */
.tool-body {
    flex: 1;
}

.tool-body .card-label {
    margin-bottom: 10px;
}

.tool-body h3 {
    font-size: 19px;
    margin: 0 0 8px;
    padding-right: 28px;
}

.tool-body p {
    color: #4d5963;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
}

/* Tags */
.tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.tool-tag {
    background: #f0f4f8;
    border-radius: 4px;
    color: #4d5963;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 4px 8px;
    text-transform: uppercase;
}

.tool-tag.tag-portable {
    background: #e7f7eb;
    color: #16803a;
}

.tool-tag.tag-installer {
    background: #e7f1fb;
    color: #1268c4;
}

/* Actions */
.tool-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.tool-actions .btn {
    font-size: 13px;
    padding: 9px 14px;
    text-align: center;
}

.tool-actions .btn i {
    margin-right: 6px;
}

/* Office card */
.office-installer-card {
    padding: 28px;
}

.office-card-note {
    color: #4d5963;
    font-size: 14px;
    margin: 0 0 20px;
}

.office-version-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, 1fr);
}

.office-ver-btn {
    align-items: center;
    background: #f6f8fb;
    border: 1px solid rgba(22, 32, 42, .1);
    border-radius: 7px;
    color: #16202a !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 8px;
    text-align: center;
    text-decoration: none !important;
    transition: background .15s, border-color .15s, transform .15s;
}

.office-ver-btn i {
    color: #1268c4;
    font-size: 16px;
}

.office-ver-btn strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.office-ver-btn span {
    color: #7a8a96;
    font-size: 11px;
    font-weight: 600;
}

.office-ver-btn:hover {
    background: #1268c4;
    border-color: #1268c4;
    color: #fff !important;
    transform: translateY(-2px);
}

.office-ver-btn:hover i,
.office-ver-btn:hover strong,
.office-ver-btn:hover span {
    color: #fff;
}

/* Bundle bar */
.tools-bundle-bar {
    background: #0c1c2b;
    bottom: 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
    left: 0;
    opacity: 0;
    padding: 14px 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.22,.68,0,1.2), opacity .2s ease;
    z-index: 1040;
}

.tools-bundle-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tools-bundle-bar .container {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.bundle-info {
    align-items: center;
    display: flex;
    gap: 10px;
}

.bundle-icon {
    color: #7bd4ff;
    font-size: 20px;
}

.bundle-count {
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    font-weight: 600;
}

.bundle-count strong {
    color: #fff;
    font-size: 18px;
}

.bundle-btns {
    align-items: center;
    display: flex;
    gap: 10px;
}

.bundle-clear {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    color: rgba(255, 255, 255, .65);
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    transition: background .15s, color .15s;
}

.bundle-clear:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Tools responsive */
@media (max-width: 991px) {
    .office-version-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .tools-bundle-bar .container {
        flex-direction: column;
        gap: 10px;
    }

    .bundle-btns {
        width: 100%;
    }

    .bundle-btns .btn,
    .bundle-clear {
        flex: 1;
        text-align: center;
    }

    .office-version-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ==========================================================================
   TOTAL SECURITY
   Hub (#/security), Camera Systems (#/security/cameras),
   Alarm Panels & Sensors (#/security/panels).

   Family accent is the Total Security green (#386641). Cameras lean on a
   teal support tone, alarm/monitoring on amber, so the two offers read as
   different products inside one system. Appended as a self-contained block:
   nothing above this line changes.
   ========================================================================== */

.company-security-page,
.plan-security-detail {
    --sec-green: #386641;
    --sec-green-rgb: 56, 102, 65;
    --sec-green-deep: #2a4d31;
    --sec-soft: #f1f7ed;
    --sec-teal: #2d6f7c;
    --sec-teal-rgb: 45, 111, 124;
    --sec-teal-soft: #eef6f8;
    --sec-amber: #b8651f;
    --sec-amber-rgb: 184, 101, 31;
    --sec-amber-soft: #fdf3e8;
    --sec-ink: #111820;
    --sec-body: #53606b;
    --sec-line: #dfe5ea;
}

/* Security detail pages inherit the plan-page shell but recolor it green.
   Declared after .plan-marketing-page so the green wins. */
.plan-security-detail {
    --plan-accent: #386641;
    --plan-accent-rgb: 56, 102, 65;
    --plan-soft: #f1f7ed;
    --company-accent: #386641;
}

.plan-security-cameras {
    --plan-accent: #2d6f7c;
    --plan-accent-rgb: 45, 111, 124;
    --plan-soft: #eef6f8;
    --company-accent: #2d6f7c;
}

/* Bootstrap floats leak into every grid on this site; kill them per grid. */
.security-coverage-visual:before,
.security-coverage-visual:after,
.security-process-grid:before,
.security-process-grid:after,
.camera-cost-split:before,
.camera-cost-split:after,
.detect-chip-row:before,
.detect-chip-row:after,
.sensor-catalog:before,
.sensor-catalog:after,
.sensor-group:before,
.sensor-group:after,
.sensor-list:before,
.sensor-list:after,
.zwave-grid:before,
.zwave-grid:after,
.security-section-head:before,
.security-section-head:after,
.survey-cta-actions:before,
.survey-cta-actions:after,
.coverage-legend:before,
.coverage-legend:after {
    content: none;
    display: none;
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.security-section-head {
    margin-bottom: 30px;
    max-width: 800px;
}

.security-section-head span {
    color: var(--sec-green);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.security-section-head h2 {
    color: var(--sec-ink);
    font-size: 38px;
    line-height: 1.08;
    margin: 0 0 16px;
}

.security-section-head p {
    color: var(--sec-body);
    font-size: 18px;
    margin-bottom: 0;
}

/* The pill that separates "buy it once" from "carries a monthly plan".
   This distinction is the most important thing on these pages. */
.cost-flag {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    letter-spacing: .04em;
    padding: 7px 15px;
}

.cost-flag:before {
    border-radius: 50%;
    content: '';
    flex: none;
    height: 8px;
    width: 8px;
}

.cost-flag.no-fee {
    background: var(--sec-soft);
    border: 1px solid rgba(var(--sec-green-rgb), .3);
    color: var(--sec-green-deep);
}

.cost-flag.no-fee:before {
    background: var(--sec-green);
}

.cost-flag.monthly {
    background: var(--sec-amber-soft);
    border: 1px solid rgba(var(--sec-amber-rgb), .3);
    color: var(--sec-amber);
}

.cost-flag.monthly:before {
    background: var(--sec-amber);
}

/* --------------------------------------------------------------------------
   Hub hero visual - a property with camera cones and sensor points
   -------------------------------------------------------------------------- */

.security-coverage-visual {
    background:
        radial-gradient(circle at 80% 14%, rgba(var(--sec-green-rgb), .14), transparent 34%),
        linear-gradient(145deg, #fff, #f6faf3);
    border: 1px solid #d3e2d6;
    border-radius: 18px;
    box-shadow: 0 30px 72px rgba(var(--sec-green-rgb), .13);
    padding: 26px 26px 22px;
}

.security-coverage-visual svg {
    display: block;
    height: auto;
    overflow: visible;
    width: 100%;
}

.coverage-building {
    fill: #fff;
    stroke: var(--sec-green);
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.coverage-room {
    fill: none;
    stroke: rgba(var(--sec-green-rgb), .28);
    stroke-width: 1.6;
}

.coverage-cone {
    fill: rgba(var(--sec-teal-rgb), .16);
    stroke: rgba(var(--sec-teal-rgb), .45);
    stroke-width: 1.4;
}

.coverage-cam {
    fill: var(--sec-teal);
}

.coverage-sensor {
    fill: #fff;
    stroke: var(--sec-amber);
    stroke-width: 3;
}

.coverage-panel-box {
    fill: var(--sec-green);
}

.coverage-label {
    fill: #46525d;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}

.coverage-legend {
    border-top: 1px solid #e2ebe3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 18px;
    padding-top: 16px;
}

.coverage-legend div {
    align-items: center;
    color: #46525d;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 9px;
}

.coverage-legend i {
    border-radius: 50%;
    display: inline-block;
    flex: none;
    height: 11px;
    width: 11px;
}

.coverage-legend .key-cam { background: var(--sec-teal); }
.coverage-legend .key-sensor { background: var(--sec-amber); }
.coverage-legend .key-panel { background: var(--sec-green); }

.company-security-page .panel-link {
    color: var(--sec-green) !important;
}

/* --------------------------------------------------------------------------
   Hub - how a job actually goes
   -------------------------------------------------------------------------- */

.security-process-section {
    padding: 34px 15px 76px;
}

.security-process-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, 1fr);
}

.security-process-step {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    padding: 26px 24px 24px;
}

.security-process-step:before {
    background: var(--sec-green);
    border-radius: 999px;
    content: '';
    display: block;
    height: 4px;
    margin-bottom: 18px;
    width: 34px;
}

.security-process-step span {
    color: var(--sec-green);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.security-process-step h3 {
    color: var(--sec-ink);
    font-size: 21px;
    line-height: 1.15;
    margin: 0 0 10px;
}

.security-process-step p {
    color: var(--sec-body);
    font-size: 15px;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cameras - the one-time vs monthly contrast
   -------------------------------------------------------------------------- */

.camera-cost-section {
    padding: 50px 15px 10px;
}

.camera-cost-split {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.cost-panel {
    border-radius: 16px;
    padding: 32px 30px 28px;
}

.cost-panel > span:not(.cost-flag) {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.cost-panel h3 {
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 14px;
}

.cost-panel p {
    margin-bottom: 16px;
}

.cost-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cost-panel li {
    padding: 7px 0 7px 26px;
    position: relative;
}

.cost-panel li:before {
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: '';
    height: 6px;
    left: 2px;
    position: absolute;
    top: 14px;
    transform: rotate(-45deg);
    width: 11px;
}

.cost-panel.cost-once {
    background: #fff;
    border: 1px solid var(--sec-line);
    box-shadow: 0 20px 48px rgba(17, 24, 32, .05);
}

.cost-panel.cost-once > span { color: var(--sec-teal); }
.cost-panel.cost-once h3 { color: var(--sec-ink); }
.cost-panel.cost-once p { color: var(--sec-body); }
.cost-panel.cost-once li { color: var(--sec-body); }
.cost-panel.cost-once li:before { color: var(--sec-teal); }

.cost-panel.cost-none {
    background:
        radial-gradient(circle at 88% 10%, rgba(var(--sec-green-rgb), .16), transparent 40%),
        linear-gradient(150deg, #f4faf0, #eaf4e6);
    border: 1px solid rgba(var(--sec-green-rgb), .28);
    box-shadow: 0 24px 56px rgba(var(--sec-green-rgb), .14);
}

.cost-panel.cost-none > span { color: var(--sec-green); }
.cost-panel.cost-none h3 { color: var(--sec-green-deep); }
.cost-panel.cost-none p { color: #44544a; }
.cost-panel.cost-none li { color: #44544a; }
.cost-panel.cost-none li:before { color: var(--sec-green); }

.cost-zero {
    align-items: baseline;
    color: var(--sec-green-deep);
    display: flex;
    flex-wrap: wrap;
    font-size: 62px;
    font-weight: 800;
    gap: 4px 12px;
    letter-spacing: -.02em;
    line-height: 1;
    margin: 4px 0 18px;
}

.cost-zero small {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}

.cost-note {
    color: var(--sec-body);
    font-size: 15px;
    margin: 22px 0 0;
    padding: 0 4px;
}

/* Detection chips */
.detect-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.detect-chip {
    align-items: center;
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 12px;
    color: var(--sec-ink);
    display: flex;
    font-weight: 700;
    gap: 11px;
    padding: 13px 18px;
}

.detect-chip i {
    color: var(--sec-teal);
    font-size: 17px;
}

/* --------------------------------------------------------------------------
   Panels - the sensor catalog (the meat of the page)
   -------------------------------------------------------------------------- */

.sensor-catalog-section {
    padding: 54px 15px 20px;
}

.sensor-catalog {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.sensor-group {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(17, 24, 32, .045);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sensor-group-head {
    align-items: center;
    background: var(--sec-soft);
    border-bottom: 1px solid rgba(var(--sec-green-rgb), .16);
    display: flex;
    gap: 16px;
    padding: 22px 26px;
}

.sensor-group-head i {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--sec-green-rgb), .24);
    border-radius: 12px;
    color: var(--sec-green);
    display: flex;
    flex: none;
    font-size: 20px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.sensor-group-head span {
    color: var(--sec-green);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.sensor-group-head h3 {
    color: var(--sec-ink);
    font-size: 22px;
    line-height: 1.12;
    margin: 0;
}

.sensor-list {
    display: grid;
    margin: 0;
    padding: 6px 26px 22px;
}

.sensor-item {
    border-bottom: 1px solid #eef2f4;
    padding: 17px 0;
}

.sensor-item:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.sensor-item strong {
    color: var(--sec-ink);
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
}

.sensor-item p {
    color: var(--sec-body);
    font-size: 15px;
    margin-bottom: 0;
}

/* Life-safety group reads warm so it is visibly not an intrusion sensor. */
.sensor-group.group-safety .sensor-group-head {
    background: var(--sec-amber-soft);
    border-bottom-color: rgba(var(--sec-amber-rgb), .18);
}

.sensor-group.group-safety .sensor-group-head i {
    border-color: rgba(var(--sec-amber-rgb), .26);
    color: var(--sec-amber);
}

.sensor-group.group-safety .sensor-group-head span {
    color: var(--sec-amber);
}

/* --------------------------------------------------------------------------
   Panels - Z-Wave automation add-ons
   -------------------------------------------------------------------------- */

.zwave-section {
    padding: 54px 15px 20px;
}

.zwave-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

.zwave-grid article {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(17, 24, 32, .04);
    padding: 24px 22px;
}

.zwave-grid i {
    color: var(--sec-green);
    display: block;
    font-size: 20px;
    margin-bottom: 14px;
}

.zwave-grid h3 {
    color: var(--sec-ink);
    font-size: 19px;
    line-height: 1.14;
    margin: 0 0 9px;
}

.zwave-grid p {
    color: var(--sec-body);
    font-size: 15px;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Survey CTA shared by both detail pages
   -------------------------------------------------------------------------- */

.security-survey-cta {
    align-items: center;
    background:
        radial-gradient(circle at 8% 20%, rgba(var(--sec-green-rgb), .22), transparent 44%),
        linear-gradient(140deg, #1d2a22, #2c4434);
    border-radius: 18px;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 54px 0 0;
    padding: 40px 42px;
}

.security-survey-cta:before,
.security-survey-cta:after {
    content: none;
    display: none;
}

.security-survey-cta > div > span {
    color: #9ed3a8;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.security-survey-cta h2 {
    color: #fff;
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 12px;
}

.security-survey-cta p {
    color: rgba(255, 255, 255, .82);
    margin-bottom: 0;
    max-width: 620px;
}

.survey-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.plan-marketing-page .survey-cta-actions .btn-primary {
    background: #fff;
    border-color: #fff;
    color: #23372a !important;
}

.plan-marketing-page .survey-cta-actions .btn-primary:hover,
.plan-marketing-page .survey-cta-actions .btn-primary:focus {
    background: #eaf4e6;
    border-color: #eaf4e6;
    color: #1d2a22 !important;
}

.survey-cta-actions .btn-default {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: #fff !important;
}

.survey-cta-actions .btn-default:hover,
.survey-cta-actions .btn-default:focus {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .7);
    color: #fff !important;
}

/* Green return band for the security detail pages */
.plan-security-loop .backup-return-card:hover,
.plan-security-loop .backup-return-card:focus {
    border-color: rgba(var(--sec-green-rgb), .34);
}

.plan-security-loop .eyebrow {
    color: #386641;
}

.plan-security-loop .return-button {
    border-bottom: 2px solid #386641;
    color: #386641;
    padding-bottom: 3px;
}

/* --------------------------------------------------------------------------
   Total Security responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .zwave-grid,
    .security-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .camera-cost-split,
    .sensor-catalog,
    .security-survey-cta {
        grid-template-columns: 1fr;
    }

    .survey-cta-actions {
        justify-self: start;
    }

    .security-survey-cta {
        padding: 34px 30px;
    }

    .cost-zero {
        font-size: 52px;
    }
}

@media (max-width: 640px) {
    .security-section-head h2{
        font-size: 30px;
    }
    .zwave-grid,
    .security-process-grid{
        grid-template-columns: 1fr;
    }

    .security-coverage-visual,
    .cost-panel{
        padding: 24px 22px;
    }

    .cost-zero {
        font-size: 44px;
    }

    .cost-panel h3{
        font-size: 25px;
    }
    .security-survey-cta h2 {
        font-size: 26px;
    }

    .sensor-list {
        padding: 6px 22px 20px;
    }

    .sensor-group-head {
        gap: 13px;
        padding: 20px 22px;
    }

    .security-survey-cta {
        padding: 28px 24px;
    }

    .survey-cta-actions .btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Hub - the money, side by side.
   Reuses .cost-panel from the cameras page and adds the amber "monthly"
   variant so the two cards read as opposites at a glance.
   -------------------------------------------------------------------------- */

.security-money-section {
    padding: 20px 15px 10px;
}

.security-money-section .camera-cost-split {
    align-items: stretch;
}

.cost-panel.cost-monthly {
    background:
        radial-gradient(circle at 88% 10%, rgba(var(--sec-amber-rgb), .14), transparent 40%),
        linear-gradient(150deg, #fdf6ee, #f8eadb);
    border: 1px solid rgba(var(--sec-amber-rgb), .3);
    box-shadow: 0 24px 56px rgba(var(--sec-amber-rgb), .12);
}

.cost-panel.cost-monthly > span { color: var(--sec-amber); }
.cost-panel.cost-monthly h3 { color: #7d4415; }
.cost-panel.cost-monthly p { color: #5a4632; }
.cost-panel.cost-monthly li { color: #5a4632; }
.cost-panel.cost-monthly li:before { color: var(--sec-amber); }

.cost-panel .cost-flag {
    margin-bottom: 18px;
}

.cost-closing {
    color: var(--sec-body);
    font-size: 16px;
    margin: 22px 0 0;
    text-align: center;
}

.cost-closing strong {
    color: var(--sec-ink);
}

/* Scoping footnote that keeps "no monthly fee" from bleeding onto the
   alarm side. It has to be impossible to miss. */
/* Deliberately a normal block, not a flex row: the gap on a flex container
   would detach the sentence's punctuation from the inline link. */
.cost-scope-note {
    background: var(--sec-amber-soft);
    border: 1px solid rgba(var(--sec-amber-rgb), .28);
    border-radius: 12px;
    color: #5a4632;
    margin: 20px 0 0;
    padding: 18px 22px;
}

.cost-scope-note a {
    border-bottom: 1px solid currentColor;
    color: var(--sec-amber) !important;
    font-weight: 800;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Panels - the existing-wiring section and shared note card
   -------------------------------------------------------------------------- */

.takeover-section {
    padding: 54px 15px 20px;
}

/* Small clarifying note that sits under a card grid. */
.panel-note {
    background: #f7f9fb;
    border: 1px solid var(--sec-line);
    border-left: 5px solid var(--sec-green);
    border-radius: 12px;
    color: var(--sec-body);
    margin: 22px 0 0;
    padding: 22px 26px;
}

.panel-note strong {
    color: var(--sec-ink);
}

/* ui-router's autoscroll calls scrollIntoView() on the ui-view element, which
   scrolls it flush to y=0 — underneath the 129px fixed navbar. Every page was
   therefore loading with its breadcrumb and eyebrow hidden. scroll-margin-top
   makes the scroll stop below the nav instead. */
[ui-view] {
    scroll-margin-top: 140px;
}

@media (max-width: 991px) {
    [ui-view] {
        scroll-margin-top: 104px;
    }
}

@media (max-width: 640px) {
    [ui-view] {
        scroll-margin-top: 94px;
    }
}

/* On all three company hub pages the standalone trail repeats the eyebrow
   underneath it word for word ("Total IT Solutions" / "Total IT Solutions").
   It read as a duplicate only because the autoscroll bug above kept it hidden
   behind the navbar; with that fixed it would show twice. Real breadcrumbs on
   the detail pages ("Total Security / Camera Systems") use .company-trail
   without .standalone-trail and are unaffected. */
.company-trail.standalone-trail {
    display: none;
}

/* The shared call band sits outside .company-security-page, so it never
   inherited --company-accent and its button fell back to the default blue.
   Total Security's band gets the Total Security green. */
.shared-company-band.security-call-band .btn-primary {
    background: #386641;
    border-color: #386641;
}

.shared-company-band.security-call-band .btn-primary:hover,
.shared-company-band.security-call-band .btn-primary:focus {
    background: #2a4d31;
    border-color: #2a4d31;
}

/* ==========================================================================
   TOTAL SECURITY - VISUAL LAYER
   Product illustrations, drop-in photo slots, gallery, and the night-vision
   comparison. Added after the owner asked for graphics instead of prose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Photo slot.

   Every product visual ships with a vector illustration AND an <img> pointed
   at pics/security/<name>.jpg. The illustration is what shows by default, so
   a missing photo never produces a broken-image icon. When the photo does
   load, its onload handler adds .has-photo and the photo takes over. Drop a
   file in, it appears; delete it, the illustration comes back. No build step,
   which matters on a host that runs no server-side code.
   -------------------------------------------------------------------------- */

.product-visual {
    align-items: center;
    background:
        radial-gradient(circle at 26% 18%, rgba(var(--sec-teal-rgb), .1), transparent 58%),
        linear-gradient(160deg, #f4f8f9, #e8f0f2);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 14px;
    position: relative;
}

.product-visual.visual-green {
    background:
        radial-gradient(circle at 26% 18%, rgba(var(--sec-green-rgb), .11), transparent 58%),
        linear-gradient(160deg, #f4f8f1, #e9f1e5);
}

.product-visual img {
    border-radius: 8px;
    display: none;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.product-visual.has-photo img {
    display: block;
}

.product-visual.has-photo .product-art {
    visibility: hidden;
}

.product-art {
    display: block;
    height: auto;
    width: 100%;
}

/* Illustration palette. Two tones plus a lens, so the shapes read as products
   rather than icons. Green variant for the alarm hardware. */
.product-art .art-shadow { fill: rgba(17, 24, 32, .07); }
.product-art .art-body { fill: #eaf1f3; stroke: #2d6f7c; stroke-width: 3; }
.product-art .art-body-2 { fill: #cfe0e5; stroke: #2d6f7c; stroke-width: 3; }
.product-art .art-lens-ring { fill: #b9d2d8; stroke: #2d6f7c; stroke-width: 3; }
.product-art .art-lens { fill: #1b3d45; stroke: none; }
.product-art .art-glint { fill: #86c8d6; }
.product-art .art-line { fill: none; stroke: #2d6f7c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.product-art .art-accent { fill: #2d6f7c; }
.product-art .art-screen { fill: #21414a; stroke: #2d6f7c; stroke-width: 3; }
.product-art .art-soft { fill: rgba(45, 111, 124, .16); stroke: none; }

.product-art.art-green .art-body { stroke: #386641; }
.product-art.art-green .art-body-2 { fill: #d6e4d6; stroke: #386641; }
.product-art.art-green .art-lens-ring { fill: #c2d8c4; stroke: #386641; }
.product-art.art-green .art-lens { fill: #23402a; }
.product-art.art-green .art-glint { fill: #8fc79a; }
.product-art.art-green .art-line { stroke: #386641; }
.product-art.art-green .art-accent { fill: #386641; }
.product-art.art-green .art-screen { fill: #23402a; stroke: #386641; }
.product-art.art-green .art-soft { fill: rgba(56, 102, 65, .16); }

/* --------------------------------------------------------------------------
   Camera gallery - the centrepiece of the cameras page
   -------------------------------------------------------------------------- */

.camera-gallery-section {
    padding: 50px 15px 20px;
}

.camera-gallery {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

.camera-gallery:before,
.camera-gallery:after,
.night-grid:before,
.night-grid:after,
.two-path-cards:before,
.two-path-cards:after {
    content: none;
    display: none;
}

.gallery-card {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(17, 24, 32, .05);
    display: flex;
    flex-direction: column;
    padding: 16px 16px 24px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gallery-card:hover {
    border-color: rgba(var(--sec-teal-rgb), .4);
    box-shadow: 0 26px 58px rgba(var(--sec-teal-rgb), .13);
    transform: translateY(-3px);
}

.gallery-card .product-visual {
    aspect-ratio: 4 / 3;
}

.gallery-card > span {
    color: var(--sec-teal);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 8px;
    padding: 0 8px;
    text-transform: uppercase;
}

.gallery-card h3 {
    color: var(--sec-ink);
    font-size: 22px;
    line-height: 1.12;
    margin: 0 0 10px;
    padding: 0 8px;
}

.gallery-card p {
    color: var(--sec-body);
    margin-bottom: 16px;
    padding: 0 8px;
}

/* Dense spec strip that replaces a paragraph of prose. */
.spec-line {
    border-top: 1px solid #eaf0f2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: auto 0 0;
    padding: 14px 8px 0;
}

.spec-line em {
    background: var(--sec-teal-soft);
    border-radius: 6px;
    color: #235863;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 5px 9px;
}

/* --------------------------------------------------------------------------
   Night vision - three rendered scenes instead of three paragraphs
   -------------------------------------------------------------------------- */

.night-section {
    padding: 54px 15px 20px;
}

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

.night-card {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(17, 24, 32, .05);
    overflow: hidden;
}

.night-card > div {
    padding: 22px 24px 24px;
}

.night-card span {
    color: var(--sec-teal);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.night-card h3 {
    color: var(--sec-ink);
    font-size: 20px;
    line-height: 1.14;
    margin: 0 0 8px;
}

.night-card p {
    color: var(--sec-body);
    font-size: 15px;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hub - the two big product cards
   -------------------------------------------------------------------------- */

.two-path-section {
    padding: 54px 15px 20px;
}

.two-path-cards {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
}

.path-card {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 18px;
    box-shadow: 0 22px 52px rgba(17, 24, 32, .06);
    color: inherit !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.path-card:hover,
.path-card:focus {
    border-color: rgba(var(--sec-green-rgb), .4);
    box-shadow: 0 30px 70px rgba(var(--sec-green-rgb), .14);
    transform: translateY(-4px);
}

.path-card .product-visual {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    margin-bottom: 0;
    padding: 18px;
}

.path-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 28px 30px 30px;
}

.path-card-body > span {
    color: var(--sec-green);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.path-card h2 {
    color: var(--sec-ink);
    font-size: 30px;
    line-height: 1.08;
    margin: 0 0 12px;
}

.path-card p {
    color: var(--sec-body);
    margin-bottom: 18px;
}

.path-card .cost-flag {
    align-self: flex-start;
    margin-bottom: 18px;
}

.path-card > .path-card-body > strong {
    border-bottom: 2px solid var(--sec-green);
    align-self: flex-start;
    color: var(--sec-green);
    font-weight: 800;
    margin-top: auto;
    padding-bottom: 3px;
}

.path-card.path-alarm .path-card-body > span,
.path-card.path-alarm > .path-card-body > strong {
    color: var(--sec-amber);
}

.path-card.path-alarm > .path-card-body > strong {
    border-bottom-color: var(--sec-amber);
}

.path-card.path-alarm:hover,
.path-card.path-alarm:focus {
    border-color: rgba(var(--sec-amber-rgb), .4);
    box-shadow: 0 30px 70px rgba(var(--sec-amber-rgb), .14);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .camera-gallery,
    .night-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .camera-gallery,
    .night-grid,
    .two-path-cards {
        grid-template-columns: 1fr;
    }

    .path-card .product-visual {
        aspect-ratio: 21 / 9;
    }
}

@media (max-width: 640px) {
    .gallery-card h3,
    .path-card h2 {
        font-size: 22px;
    }

    .path-card-body {
        padding: 24px 22px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-card,
    .path-card {
        transition: none;
    }

    .gallery-card:hover,
    .path-card:hover,
    .path-card:focus {
        transform: none;
    }
}

/* Hero summary stat row - replaces the summary paragraph on the cameras page. */
.summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

.summary-stats em {
    background: var(--sec-teal-soft);
    border: 1px solid rgba(var(--sec-teal-rgb), .22);
    border-radius: 8px;
    color: #235863;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    padding: 7px 12px;
}

.wide-feature {
    align-items: center;
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(17, 24, 32, .05);
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr);
    padding: 26px 30px 26px 26px;
}

.wide-feature:before,
.wide-feature:after,
.summary-stats:before,
.summary-stats:after {
    content: none;
    display: none;
}

.wide-feature .product-visual {
    aspect-ratio: 4 / 3;
    margin-bottom: 0;
}

.wide-feature > div > span {
    color: var(--sec-teal);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.wide-feature h3 {
    color: var(--sec-ink);
    font-size: 26px;
    line-height: 1.12;
    margin: 0 0 12px;
}

.wide-feature p {
    color: var(--sec-body);
    margin-bottom: 16px;
}

.wide-feature .spec-line {
    border-top: 1px solid #eaf0f2;
    margin: 0;
    padding: 16px 0 0;
}

@media (max-width: 991px) {
    .wide-feature {
        grid-template-columns: 1fr;
        padding: 24px;
    }
}

/* Green variant of the wide feature card, for the alarm side. */
.wide-feature.feature-green > div > span,
.wide-feature.feature-green .spec-line em {
    color: #2a4d31;
}

.wide-feature.feature-green > div > span {
    color: #386641;
}

.wide-feature.feature-green .spec-line em {
    background: #f1f7ed;
}

/* --------------------------------------------------------------------------
   Panels - the single-panel EDGE showcase and the written investment note.
   Replaced the two-card comparison after the owner cut the GC2e and asked
   for prose over fragment pills.
   -------------------------------------------------------------------------- */

.edge-section,
.invest-section {
    padding: 50px 15px 20px;
}
.edge-points:before,
.edge-points:after {
    content: none;
    display: none;
}

.edge-points {
    align-self: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.edge-points li {
    color: var(--sec-body);
    padding: 12px 0 12px 30px;
    position: relative;
}

.edge-points li + li {
    border-top: 1px solid #eef2ef;
}

.edge-points li:before {
    border-bottom: 2px solid var(--sec-green);
    border-left: 2px solid var(--sec-green);
    content: '';
    height: 6px;
    left: 3px;
    position: absolute;
    top: 21px;
    transform: rotate(-45deg);
    width: 12px;
}

.edge-points li strong {
    color: var(--sec-ink);
}

/* The investment note - full sentences, not pills. */
.invest-note {
    margin-top: 0;
    padding: 30px 34px;
}

.invest-note p {
    color: var(--sec-body);
    font-size: 17px;
    max-width: 900px;
}

.invest-note p:last-child {
    margin-bottom: 0;
}

.invest-note .invest-camera-line {
    border-top: 1px solid #e5ebe6;
    font-size: 15px;
    margin-top: 20px;
    padding-top: 18px;
}

.invest-note .invest-camera-line a {
    border-bottom: 1px solid currentColor;
    color: var(--sec-green) !important;
    font-weight: 800;
    text-decoration: none !important;
}

@media (max-width: 640px) {

    .invest-note {
        padding: 24px 22px;
    }
}

/* ==========================================================================
   TOTAL SECURITY - PREMIUM PASS
   Dark cinematic heroes on the three security pages, hero stat rows, a
   phone mockup for the app story, the EDGE showcase photo, and real sensor
   thumbnails in the catalog. All scoped to the security pages.
   ========================================================================== */

.company-security-page,
.plan-security-detail {
    --hero-ink: #0e1713;
    --hero-ink-2: #152019;
    --hero-accent-light: #9ed3a8;
    --hero-text: rgba(255, 255, 255, .78);
}

.plan-security-cameras {
    --hero-ink: #0c1517;
    --hero-ink-2: #13201f;
    --hero-accent-light: #8fd0dd;
}

/* --------------------------------------------------------------------------
   Dark heroes
   -------------------------------------------------------------------------- */

.company-security-page .security-hero,
.plan-security-detail .plan-detail-hero {
    background:
        radial-gradient(circle at 82% 8%, rgba(var(--plan-accent-rgb, 56, 102, 65), .3), transparent 42%),
        radial-gradient(circle at 8% 92%, rgba(var(--plan-accent-rgb, 56, 102, 65), .16), transparent 38%),
        linear-gradient(155deg, var(--hero-ink) 0%, var(--hero-ink-2) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.company-security-page .security-hero h1,
.plan-security-detail .plan-detail-hero h1 {
    color: #fff;
}

.company-security-page .security-hero p:not(.eyebrow),
.plan-security-detail .plan-detail-hero p:not(.eyebrow) {
    color: var(--hero-text);
}

.company-security-page .security-hero .eyebrow,
.plan-security-detail .plan-detail-hero .eyebrow {
    color: var(--hero-accent-light);
}

.plan-security-detail .plan-detail-hero .company-trail,
.plan-security-detail .plan-detail-hero .company-trail span:before {
    color: rgba(255, 255, 255, .5);
}

.plan-security-detail .plan-detail-hero .company-trail a {
    color: var(--hero-accent-light) !important;
}

.company-security-page .security-hero .btn-default,
.plan-security-detail .plan-detail-hero .btn-default {
    background: transparent;
    border-color: rgba(255, 255, 255, .38);
    color: #fff !important;
}

.company-security-page .security-hero .btn-default:hover,
.company-security-page .security-hero .btn-default:focus,
.plan-security-detail .plan-detail-hero .btn-default:hover,
.plan-security-detail .plan-detail-hero .btn-default:focus {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .65);
    color: #fff !important;
}

/* Summary card becomes dark glass */
.plan-security-detail .plan-detail-summary {
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(var(--plan-accent-rgb), .34);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}

.plan-security-detail .plan-detail-summary span {
    color: var(--hero-accent-light);
}

.plan-security-detail .plan-detail-summary strong {
    color: #fff;
}

.plan-security-detail .plan-detail-summary p {
    color: var(--hero-text);
}

.plan-security-detail .plan-detail-summary p strong {
    color: #fff;
    display: inline;
    font-size: inherit;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Hub coverage diagram, re-lit for the dark hero
   -------------------------------------------------------------------------- */

.company-security-page .security-coverage-visual {
    background:
        radial-gradient(circle at 80% 12%, rgba(56, 102, 65, .22), transparent 42%),
        rgba(255, 255, 255, .045);
    border: 1px solid rgba(158, 211, 168, .22);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
}

.company-security-page .coverage-building {
    fill: rgba(255, 255, 255, .03);
    stroke: #9ed3a8;
}

.company-security-page .coverage-room {
    stroke: rgba(158, 211, 168, .32);
}

.company-security-page .coverage-cone {
    fill: rgba(134, 200, 214, .14);
    stroke: rgba(134, 200, 214, .4);
}

.company-security-page .coverage-cam {
    fill: #86c8d6;
}

.company-security-page .coverage-sensor {
    fill: #16241c;
    stroke: #f0a35e;
}

.company-security-page .coverage-panel-box {
    fill: #58a06a;
}

.company-security-page .coverage-label {
    fill: #b9cec0;
}

.company-security-page .coverage-legend {
    border-top-color: rgba(255, 255, 255, .12);
}

.company-security-page .coverage-legend div {
    color: #cfe0d4;
}

.company-security-page .coverage-legend .key-cam { background: #86c8d6; }
.company-security-page .coverage-legend .key-sensor { background: #f0a35e; }
.company-security-page .coverage-legend .key-panel { background: #58a06a; }

/* --------------------------------------------------------------------------
   Hero stat rows
   -------------------------------------------------------------------------- */

.hero-stat-row {
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 46px;
    padding-top: 30px;
}

.hero-stat-row.three-up {
    grid-template-columns: repeat(3, 1fr);
}

.hero-stat-row:before,
.hero-stat-row:after {
    content: none;
    display: none;
}

.hero-stat-row strong {
    color: #fff;
    display: block;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 8px;
}

.hero-stat-row span {
    color: rgba(255, 255, 255, .62);
    display: block;
    font-size: 14px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Phone mockup - the app story
   -------------------------------------------------------------------------- */

.camera-hero-visual {
    display: grid;
    gap: 18px;
    justify-items: center;
}

.camera-hero-visual:before,
.camera-hero-visual:after{
    content: none;
    display: none;
}

.hero-chips {
    justify-content: center;
    margin: 0;
}

.plan-security-cameras .hero-chips em {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(143, 208, 221, .34);
    color: #cfe6ec;
}

.sensor-thumb {
    background: #fff;
    border: 1px solid rgba(56, 102, 65, .22);
    border-radius: 12px;
    display: block;
    flex: none;
    height: 54px;
    object-fit: cover;
    width: 54px;
}

.group-safety .sensor-thumb {
    border-color: rgba(184, 101, 31, .26);
}

/* --------------------------------------------------------------------------
   Photo hover polish
   -------------------------------------------------------------------------- */

.product-visual.has-photo img {
    transition: transform .5s ease;
}

.gallery-card:hover .product-visual.has-photo img,
.path-card:hover .product-visual.has-photo img,
.path-card:focus .product-visual.has-photo img {
    transform: scale(1.045);
}

/* --------------------------------------------------------------------------
   Responsive + motion
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .hero-stat-row {
        gap: 20px;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 34px;
        padding-top: 24px;
    }

    .hero-stat-row.three-up {
        grid-template-columns: repeat(3, 1fr);
    }

    .camera-hero-visual {
        justify-items: start;
    }

    .hero-chips {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .hero-stat-row strong {
        font-size: 28px;
    }

    .hero-stat-row.three-up {
        gap: 12px;
    }

    .sensor-thumb {
        height: 46px;
        width: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-visual.has-photo img {
        transition: none;
    }

    .gallery-card:hover .product-visual.has-photo img,
    .path-card:hover .product-visual.has-photo img,
    .path-card:focus .product-visual.has-photo img {
        transform: none;
    }
}

/* ==========================================================================
   TOTAL SECURITY - SHOWROOM PASS
   The three Reolink sets, the reseller badge, the animated EDGE/GC2e
   switcher, and the rebuilt Connection band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reseller badge (dark hero)
   -------------------------------------------------------------------------- */

.reseller-badge {
    align-items: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(143, 208, 221, .38);
    border-radius: 999px;
    color: #cfe6ec;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 800;
    gap: 9px;
    letter-spacing: .05em;
    margin: 18px 0 0;
    padding: 9px 18px 9px 12px;
    text-transform: uppercase;
}

.reseller-badge svg {
    height: 20px;
    width: 20px;
}

/* --------------------------------------------------------------------------
   The three Reolink sets
   -------------------------------------------------------------------------- */

.sets-section {
    padding: 54px 15px 20px;
}

.sets-grid {
    align-items: stretch;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

.sets-grid:before,
.sets-grid:after {
    content: none;
    display: none;
}

.set-card {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 18px;
    box-shadow: 0 22px 52px rgba(17, 24, 32, .06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.set-card:hover {
    border-color: rgba(var(--sec-teal-rgb), .42);
    box-shadow: 0 30px 70px rgba(var(--sec-teal-rgb), .14);
    transform: translateY(-4px);
}

.set-card.set-featured {
    border-color: rgba(var(--sec-teal-rgb), .45);
    box-shadow: 0 30px 70px rgba(var(--sec-teal-rgb), .16);
}

.set-photo {
    aspect-ratio: 16 / 9;
    background: #10181b;
    overflow: hidden;
}

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

.set-card:hover .set-photo img {
    transform: scale(1.045);
}

.set-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px 28px 26px;
}

.set-body > span {
    color: var(--sec-teal);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.set-body h3 {
    color: var(--sec-ink);
    font-size: 25px;
    line-height: 1.1;
    margin: 0 0 10px;
}

.set-body p {
    color: var(--sec-body);
    margin-bottom: 16px;
}

.set-body .spec-line {
    margin-top: auto;
    padding-left: 0;
    padding-right: 0;
}

/* --------------------------------------------------------------------------
   EDGE / GC2e switcher - CSS only, no scripts
   -------------------------------------------------------------------------- */

.panel-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-tabs {
    background: #eef2ef;
    border: 1px solid #dbe4dc;
    border-radius: 999px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto 26px;
    max-width: 380px;
    padding: 5px;
    position: relative;
}

.switch-tabs:before,
.switch-tabs:after,
.switch-stage:before,
.switch-stage:after,
.panel-pane:before,
.panel-pane:after {
    content: none;
    display: none;
}

.switch-pill {
    background: var(--sec-green);
    border-radius: 999px;
    bottom: 5px;
    box-shadow: 0 8px 20px rgba(var(--sec-green-rgb), .35);
    left: 5px;
    position: absolute;
    top: 5px;
    transition: transform .38s cubic-bezier(.55, 0, .2, 1.2);
    width: calc(50% - 5px);
}

#pick-gc2e:checked ~ .switch-tabs .switch-pill {
    transform: translateX(100%);
}

.switch-tabs label {
    border-radius: 999px;
    color: #46525d;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    margin: 0;
    padding: 11px 10px;
    position: relative;
    text-align: center;
    transition: color .25s ease;
    z-index: 1;
}

#pick-edge:checked ~ .switch-tabs label[for="pick-edge"],
#pick-gc2e:checked ~ .switch-tabs label[for="pick-gc2e"] {
    color: #fff;
}

.switch-stage {
    display: grid;
}

.panel-pane {
    align-items: center;
    background:
        radial-gradient(circle at 88% 8%, rgba(var(--sec-green-rgb), .1), transparent 36%),
        #fff;
    border: 1px solid rgba(var(--sec-green-rgb), .3);
    border-radius: 18px;
    box-shadow: 0 26px 62px rgba(var(--sec-green-rgb), .12);
    display: grid;
    gap: 40px;
    grid-area: 1 / 1;
    grid-template-columns: minmax(250px, .52fr) minmax(0, 1fr);
    opacity: 0;
    padding: 36px 40px;
    pointer-events: none;
    transform: translateX(14px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
    visibility: hidden;
}

.pane-edge {
    transform: translateX(-14px);
}

#pick-edge:checked ~ .switch-stage .pane-edge,
#pick-gc2e:checked ~ .switch-stage .pane-gc2e {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.pane-visual img {
    border: 1px solid #e2eae3;
    border-radius: 14px;
    box-shadow: 0 26px 60px rgba(17, 24, 32, .14);
    display: block;
    height: auto;
    width: 100%;
}

.pane-copy > span {
    color: var(--sec-green);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.pane-copy h3 {
    color: var(--sec-ink);
    font-size: 32px;
    line-height: 1.06;
    margin: 0 0 14px;
}

.pane-copy > p {
    color: var(--sec-body);
    font-size: 17px;
}

.pane-copy .edge-points {
    margin-top: 4px;
}

.pane-copy .edge-foot {
    border-top: 1px solid #e5ebe6;
    color: var(--sec-body);
    font-size: 15px;
    margin: 20px 0 0;
    padding-top: 16px;
}

.pane-copy .edge-foot strong {
    color: var(--sec-ink);
}

/* --------------------------------------------------------------------------
   Connection band - dark, with animated signal paths
   -------------------------------------------------------------------------- */

.connection-section {
    padding: 54px 15px 20px;
}

.connection-band {
    align-items: center;
    background:
        radial-gradient(circle at 86% 16%, rgba(56, 102, 65, .3), transparent 46%),
        linear-gradient(150deg, #0e1713, #16241c);
    border: 1px solid rgba(158, 211, 168, .16);
    border-radius: 20px;
    display: grid;
    gap: 44px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .68fr);
    padding: 44px 46px;
}

.connection-band:before,
.connection-band:after {
    content: none;
    display: none;
}

.connection-copy > span {
    color: #9ed3a8;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.connection-copy h2 {
    color: #fff;
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 14px;
}

.connection-copy p {
    color: rgba(255, 255, 255, .78);
}

.connection-chips {
    border-top: 0 !important;
    margin: 18px 0 0;
    padding: 0;
}

.connection-chips em {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(158, 211, 168, .32);
    color: #cfe0d4;
}

.connection-visual svg {
    display: block;
    height: auto;
    overflow: visible;
    width: 100%;
}

.cx-panel {
    fill: #58a06a;
}

.cx-panel-dot {
    fill: #d9f2de;
}

.cx-chip {
    fill: rgba(255, 255, 255, .06);
    stroke: rgba(158, 211, 168, .38);
    stroke-width: 1.5;
}

.cx-icon {
    fill: none;
    stroke: #9ed3a8;
    stroke-linecap: round;
    stroke-width: 2.6;
}

.cx-icon-dot {
    fill: #9ed3a8;
}

.cx-label {
    fill: rgba(255, 255, 255, .6);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.cx-label-light {
    fill: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.cx-path {
    fill: none;
    stroke: rgba(158, 211, 168, .75);
    stroke-dasharray: 3 9;
    stroke-linecap: round;
    stroke-width: 2.6;
}

.cx-path-soft {
    stroke: rgba(134, 200, 214, .55);
}

.cx-flow {
    animation: cx-signal 1.6s linear infinite;
}

.cx-flow-2 {
    animation-duration: 2.1s;
}

@keyframes cx-signal {
    to { stroke-dashoffset: -24; }
}

.cx-panel-dot {
    animation: cx-blink 2.4s ease-in-out infinite;
}

@keyframes cx-blink {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Responsive + motion
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .sets-grid {
        grid-template-columns: 1fr;
    }

    .set-photo {
        aspect-ratio: 21 / 9;
    }
}

@media (max-width: 991px) {
    .panel-pane,
    .connection-band {
        grid-template-columns: 1fr;
        padding: 28px 26px;
    }

    .pane-visual {
        max-width: 380px;
    }

    .connection-visual {
        max-width: 460px;
    }
}

@media (max-width: 640px) {
    .pane-copy h3,
    .connection-copy h2 {
        font-size: 26px;
    }

    .set-body {
        padding: 22px 22px;
    }

    .panel-pane {
        padding: 22px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .switch-pill,
    .panel-pane,
    .set-photo img {
        transition: none;
    }

    .cx-flow,
    .cx-flow-2,
    .cx-panel-dot{
        animation: none;
    }

    .set-card:hover .set-photo img {
        transform: none;
    }
}

/* Real-footage upgrades: night samples, phone feed tiles, hub brand row. */
.night-photo {
    aspect-ratio: 2 / 1;
    display: block;
    object-fit: cover;
    width: 100%;
}

.brand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brand-row:before,
.brand-row:after {
    content: none;
    display: none;
}

.brand-row .reseller-badge {
    margin-top: 18px;
}

.reseller-badge.brand-2gig {
    border-color: rgba(158, 211, 168, .4);
    color: #cfe0d4;
}

.reseller-badge .badge-logo {
    display: block;
    height: 15px;
    width: auto;
}

/* The hero card IS the phone: dark bezel shell around the real app screen. */
.phone-shell {
    background: linear-gradient(165deg, #2c3439, #0b1013);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 46px;
    box-shadow:
        0 42px 95px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    padding: 13px;
    width: min(302px, 100%);
}

.phone-shell-screen {
    background: #e8eef2;
    border-radius: 34px;
    overflow: hidden;
}

.phone-shell-screen img {
    display: block;
    height: auto;
    width: 100%;
}

.app-caption-line {
    color: rgba(255, 255, 255, .68);
    font-size: 12.5px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Cameras - the unified back half. One journey card (camera -> phone), a
   slim no-wiring strip, and a compact install line. Replaces four separate
   section styles that read as choppy.
   -------------------------------------------------------------------------- */

.journey-section,
.installday-section {
    padding: 54px 15px 20px;
}

.journey {
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 18px;
    box-shadow: 0 22px 52px rgba(17, 24, 32, .05);
    overflow: hidden;
}

.journey-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 34px 26px 28px;
    position: relative;
}

.journey-steps:before {
    background: linear-gradient(90deg, rgba(var(--sec-teal-rgb), .0), rgba(var(--sec-teal-rgb), .35) 12%, rgba(var(--sec-teal-rgb), .35) 88%, rgba(var(--sec-teal-rgb), .0));
    content: '';
    height: 2px;
    left: 26px;
    position: absolute;
    right: 26px;
    top: 58px;
}

.journey-steps:after {
    content: none;
    display: none;
}

.journey-step {
    padding: 0 18px;
    position: relative;
    text-align: center;
}

.journey-step i {
    align-items: center;
    background: var(--sec-teal-soft);
    border: 2px solid rgba(var(--sec-teal-rgb), .45);
    border-radius: 50%;
    color: var(--sec-teal);
    display: inline-flex;
    font-size: 18px;
    height: 48px;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    width: 48px;
    z-index: 1;
}

.journey-step h3 {
    color: var(--sec-ink);
    font-size: 18px;
    margin: 0 0 8px;
}

.journey-step p {
    color: var(--sec-body);
    font-size: 14.5px;
    margin-bottom: 0;
}

.journey-detect {
    background: #f7fafb;
    border-top: 1px solid #e8eef0;
    padding: 24px 30px 26px;
}

.journey-detect:before,
.journey-detect:after,
.journey-steps .journey-step:before,
.nowire-strip:before,
.nowire-strip:after,
.install-line:before,
.install-line:after {
    content: none;
    display: none;
}

.journey-detect strong {
    color: var(--sec-ink);
    display: block;
    font-size: 15px;
    margin-bottom: 14px;
}

.journey-detect .detect-chip-row {
    margin-top: 0;
}

.journey-detect .detect-chip {
    background: #fff;
}

.journey-detect p {
    color: #5d6a75;
    font-size: 13.5px;
    margin: 14px 0 0;
}

.nowire-strip {
    align-items: center;
    background: #fff;
    border: 1px solid var(--sec-line);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    display: flex;
    gap: 26px;
    margin-top: 20px;
    padding: 18px 28px 18px 18px;
}

.nowire-strip img {
    border-radius: 10px;
    flex: none;
    width: 150px;
}

.nowire-strip h3 {
    color: var(--sec-ink);
    font-size: 19px;
    margin: 0 0 8px;
}

.nowire-strip p {
    color: var(--sec-body);
    font-size: 15px;
    margin-bottom: 0;
}

.install-line {
    counter-reset: iline;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0 0 44px;
    padding: 0;
    position: relative;
}

.install-line li {
    border-left: 2px solid rgba(var(--sec-teal-rgb), .28);
    counter-increment: iline;
    padding: 2px 22px 2px 20px;
    position: relative;
}

.install-line li:before {
    background: var(--sec-teal);
    border-radius: 50%;
    color: #fff;
    content: counter(iline);
    font-size: 12px;
    font-weight: 800;
    height: 22px;
    left: -12px;
    line-height: 22px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 22px;
}

.install-line strong {
    color: var(--sec-ink);
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    padding-top: 0;
}

.install-line p {
    color: var(--sec-body);
    font-size: 14.5px;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .journey-steps {
        gap: 26px;
        grid-template-columns: 1fr 1fr;
    }

    .journey-steps:before {
        content: none;
    }

    .install-line {
        gap: 22px;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .journey-steps {
        grid-template-columns: 1fr;
        padding: 26px 20px 22px;
    }

    .journey-step {
        display: grid;
        gap: 4px 16px;
        grid-template-columns: 48px 1fr;
        text-align: left;
    }

    .journey-step i {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    .install-line {
        grid-template-columns: 1fr;
    }

    .nowire-strip {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .nowire-strip img {
        width: 100%;
    }
}

/* ==========================================================================
   SITE-WIDE POLISH PASS
   Nav active state, footer headings, home trust band + division index,
   about page upgrade, contact steps, support tidy-up.
   ========================================================================== */

/* Current-section indicator in the nav */
.modern-nav .centered-bracket-nav > li.active > a,
.nav-company-cluster a.active {
    box-shadow: inset 0 -3px 0 #1268c4;
    color: #0b5cab;
}

/* Footer column headings demoted from h2 to p; keep the exact look */
.site-footer .footer-head {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Home - trust band, real security photos in the hook card, division index
   -------------------------------------------------------------------------- */

.home-trust-band {
    background: #fff;
    border-bottom: 1px solid #eef2f6;
}

.home-trust-row {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, 1fr);
    padding: 26px 15px;
}

.home-trust-row:before,
.home-trust-row:after,
.division-index:before,
.division-index:after,
.about-division-grid:before,
.about-division-grid:after,
.contact-steps:before,
.contact-steps:after {
    content: none;
    display: none;
}

.home-trust-row strong {
    color: #111820;
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}

.home-trust-row span {
    color: #53606b;
    font-size: 14px;
}

.security-hook-photos {
    display: flex;
    gap: 12px;
}

.security-hook-photos img {
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(var(--hook-rgb), .16);
    border-radius: 14px;
    object-fit: cover;
    width: calc(50% - 6px);
}

.division-index {
    display: grid;
    gap: 14px;
}

.division-row {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(17, 24, 32, .06);
    color: #111820 !important;
    display: grid;
    gap: 18px;
    grid-template-columns: 52px 1fr;
    padding: 20px 24px;
    text-decoration: none !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

.division-row:hover,
.division-row:focus {
    box-shadow: 0 26px 56px rgba(17, 24, 32, .11);
    transform: translateY(-3px);
}

.division-row > span {
    align-items: center;
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.division-row.row-it > span { background: #eef5ff; border-color: rgba(29, 79, 145, .28); color: #1d4f91; }
.division-row.row-voice > span { background: #fff3ec; border-color: rgba(173, 83, 43, .28); color: #ad532b; }
.division-row.row-security > span { background: #f1f7ed; border-color: rgba(56, 102, 65, .28); color: #386641; }

.division-row strong {
    display: block;
    font-size: 21px;
    line-height: 1.1;
}

.division-row small {
    color: #53606b;
    display: block;
    font-size: 13.5px;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   About - stat row light variant, section head, division cards
   -------------------------------------------------------------------------- */

.about-stat-row {
    border-top-color: #dfe7ee;
}

.about-stat-row strong {
    color: #111820;
}

.about-stat-row span {
    color: #53606b;
}

.about-divisions-section {
    padding: 64px 15px 8px;
}

.about-section-head {
    margin-bottom: 30px;
    max-width: 780px;
}

.about-section-head span {
    color: #1d4f91;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.about-section-head h2 {
    color: #111820;
    font-size: 38px;
    line-height: 1.08;
    margin: 0 0 14px;
}

.about-section-head p {
    color: #53606b;
    font-size: 18px;
    margin-bottom: 0;
}

.about-division-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}

.about-division-card {
    --division-accent: #1d4f91;
    background: #fff;
    border: 1px solid #dfe7ee;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .05);
    color: inherit !important;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 26px;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.about-division-card.card-voice { --division-accent: #ad532b; }
.about-division-card.card-security { --division-accent: #386641; }

.about-division-card:hover,
.about-division-card:focus {
    border-color: var(--division-accent);
    box-shadow: 0 26px 58px rgba(17, 24, 32, .1);
    transform: translateY(-3px);
}

.about-division-card > span {
    color: var(--division-accent);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-division-card h3 {
    color: #111820;
    font-size: 21px;
    line-height: 1.16;
    margin: 0 0 10px;
}

.about-division-card p {
    color: #53606b;
    font-size: 15px;
    margin-bottom: 18px;
}

.about-division-card > strong {
    border-bottom: 2px solid var(--division-accent);
    align-self: flex-start;
    color: var(--division-accent);
    font-weight: 800;
    margin-top: auto;
    padding-bottom: 3px;
}

/* --------------------------------------------------------------------------
   Contact - hero support line, map hint, next-step cards
   -------------------------------------------------------------------------- */

.minimal-page-hero p.hero-support-line {
    font-size: 16px;
    margin: 14px 0 0;
}

.map-hint {
    fill: #0b5cab;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.office-graphic:hover .map-hint {
    text-decoration: underline;
}

.contact-next-section h2 {
    margin: 6px 0 28px;
    max-width: 720px;
}

.contact-steps {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
}

.contact-steps article {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(17, 24, 32, .045);
    padding: 26px 24px 24px;
}

.contact-steps span {
    color: #0b5cab;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.contact-steps h3 {
    color: #111820;
    font-size: 20px;
    margin: 0 0 10px;
}

.contact-steps p {
    color: #53606b;
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0;
}

/* Support - the hero safety note spacing that used to be inline */
.support-hero .assist-safety {
    margin-top: 26px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .home-trust-row {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .about-division-grid,
    .contact-steps {
        grid-template-columns: 1fr;
    }

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

    .nav-company-cluster a,
    .modern-nav .centered-bracket-nav > li > a {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

@media (max-width: 640px) {
    .about-section-head h2 {
        font-size: 30px;
    }

    .security-hook-photos {
        flex-direction: column;
    }

    .security-hook-photos img {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .division-row,
    .about-division-card {
        transition: none;
    }

    .division-row:hover,
    .division-row:focus,
    .about-division-card:hover,
    .about-division-card:focus {
        transform: none;
    }
}

/* ===================================================================
   Bootstrap 3 leftovers.

   The pages are Bootstrap 3 markup; the application loads Bootstrap 5.
   Almost everything lines up — the grid, buttons, cards, alerts and the
   spacing utilities are all there — so this is only the handful of class
   names BS3 had and BS5 renamed or dropped. site.css loads after Bootstrap,
   so the design above still wins wherever it has an opinion.
   =================================================================== */

/* Bootstrap 5's .navbar-nav is a column. This navigation is a row and its
   own CSS never had to say so, because Bootstrap 3 laid it out with floats
   and a bare `display: flex` defaults to a row. Two classes, so it wins on
   specificity rather than on load order. */
.modern-nav .navbar-nav,
.modern-nav .centered-bracket-nav { flex-direction: row; flex-wrap: wrap; }

/* Same reason: BS5 stacks the company cluster's own links. */
.modern-nav .nav-company-cluster { display: flex; align-items: center; }

/* BS3's .navbar-fixed-top took the bar out of the flow, and the design paid
   for that with body{padding-top:74px} — a number that only holds while the
   bar is exactly one row tall. It is two here, brand above links, so the
   hero slid underneath it.

   Sticky rather than a bigger number: the bar keeps its place in the flow,
   so its height is whatever it turns out to be and nothing can overlap,
   while still staying put as you scroll. The 74px would then be counted
   twice, so it goes. */
body { padding-top: 0; }
.navbar-fixed-top { position: sticky; top: 0; z-index: 1030; }

/* BS5 has no .navbar-header; the brand row is a plain flex row now. */
.navbar-header { display: flex; align-items: center; gap: .75rem; }

/* The mobile toggle: BS5 calls it .navbar-toggler and ships no .icon-bar. */
.navbar-toggle { display: none; background: transparent; border: 1px solid currentColor;
                 border-radius: 8px; padding: .45rem .6rem; cursor: pointer; }
.navbar-toggle .icon-bar { display: block; width: 20px; height: 2px;
                           background: currentColor; border-radius: 2px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
@media (max-width: 767px) {
  .navbar-toggle { display: block; }
  .navbar-collapse { display: none; width: 100%; }
  .navbar-collapse.is-open { display: block; }
}

/* BS3 input sizing, still used by the sign-in form. */
.input-lg { font-size: 1.05rem; padding: .6rem .9rem; }

/* BS3's quiet panel. */
.well { padding: 1.25rem; border-radius: 12px; background: rgba(0, 0, 0, .03); }

/* The one nav item the old site did not have. */
.nav-signin a { font-weight: 700; }