/* =========================================================
   MICHAEL WOOD — SERVICES V2
========================================================= */

.svcContainer {
    width: min(1500px, calc(100% - 60px));
    margin: 0 auto;
}

.svcLight {
    color: #081225;
    background: #fff;
}

.svcSoft {
    color: #081225;
    background: #f8faff;
}

.svcDark {
    color: #fff;
    background: #050b1a;
}


/* =========================================================
   SHARED
========================================================= */

.svcEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #66e3ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.svcEyebrow > span {
    width: 27px;
    height: 1px;
    background: linear-gradient(90deg,#66e3ff,#8b7bff);
}

.svcEyebrow--dark {
    color: #315f93;
}

.svcEyebrow--dark > span {
    background: linear-gradient(90deg,#3d7fa9,#7a6bc4);
}

.svcReveal {
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

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

.svcDelay1 { transition-delay: .08s; }
.svcDelay2 { transition-delay: .16s; }
.svcDelay3 { transition-delay: .24s; }
.svcDelay4 { transition-delay: .32s; }

.svcButton {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.svcButton:hover {
    transform: translateY(-2px);
}

.svcButton--primary {
    color: #fff;
    border: 1px solid rgba(102,227,255,.3);
    background: linear-gradient(110deg,#3d65ef,#8049ed);
    box-shadow: 0 18px 45px rgba(61,71,220,.18);
}

.svcButton--outline {
    color: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.025);
}

.svcButton--light {
    color: #081225;
    border: 1px solid #d8dee8;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15,23,42,.05);
}

.svcSectionHead {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr);
    align-items: end;
    gap: 90px;
    margin-bottom: 42px;
}

.svcSectionHead h2,
.svcDirectory__head h2,
.svcFaq__intro h2 {
    max-width: 900px;
    margin: 15px 0 0;
    color: #081225;
    font-size: clamp(44px,5vw,72px);
    line-height: .98;
    letter-spacing: -.06em;
}

.svcSectionHead h2 span,
.svcDirectory__head h2 span,
.svcFaq__intro h2 span {
    color: #081225;
}

.svcSectionHead__copy {
    margin: 0;
    color: #53617a;
    font-size: 14px;
    line-height: 1.75;
}

.svcSwipeHint {
    display: none;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    color: #7b8496;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.svcSwipeHint--dark {
    color: rgba(255,255,255,.34);
}


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

.svcHero {
    position: relative;
    overflow: hidden;
    background: #050b1a;
}

.svcHero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
}

.svcHero__glow {
    position: absolute;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    filter: blur(85px);
    pointer-events: none;
}

.svcHero__glow--one {
    left: -180px;
    top: 12%;
    background: rgba(45,102,255,.13);
}

.svcHero__glow--two {
    right: -160px;
    bottom: -140px;
    background: rgba(139,123,255,.11);
}

.svcHero__inner {
    position: relative;
    z-index: 2;
    min-height: 760px;
    display: grid;
    grid-template-columns: minmax(0,1.17fr) minmax(340px,.83fr);
    gap: 95px;
    align-items: center;
    padding: 90px 0 110px;
}

.svcHero__copy h1 {
    max-width: 1000px;
    margin: 26px 0 24px;
    color: #fff;
    font-size: clamp(62px,6.6vw,108px);
    line-height: .91;
    letter-spacing: -.075em;
}

.svcHero__copy h1 span {
    background: linear-gradient(90deg,#d7e5ff,#aab9ff,#a78bff,#69deff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.svcHero__lead {
    max-width: 780px;
    margin: 0;
    color: rgba(239,243,255,.64);
    font-size: 16px;
    line-height: 1.75;
}

.svcHero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 34px;
}

.svcHero__stats {
    max-width: 760px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 54px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.svcHero__stats > div {
    padding: 0 22px;
    border-left: 1px solid rgba(255,255,255,.08);
}

.svcHero__stats > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.svcHero__stats strong,
.svcHero__stats span {
    display: block;
}

.svcHero__stats strong {
    color: #fff;
    font-size: 15px;
}

.svcHero__stats span {
    margin-top: 5px;
    color: rgba(239,243,255,.4);
    font-size: 10px;
}

.svcHero__route {
    padding: 30px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    background: rgba(8,17,38,.68);
    backdrop-filter: blur(14px);
}

.svcHero__routeLabel {
    color: #66e3ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.svcHero__route h2 {
    margin: 15px 0 10px;
    color: #fff;
    font-size: 34px;
    letter-spacing: -.045em;
}

.svcHero__route > p {
    margin: 0 0 25px;
    color: rgba(239,243,255,.48);
    font-size: 12px;
    line-height: 1.65;
}

.svcHero__route a {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.svcHero__route a b {
    color: #66e3ff;
}

.svcHero__route a:hover {
    color: #fff;
}


/* =========================================================
   ROUTES
========================================================= */

.svcRoutes {
    padding: 125px 0;
}

.svcRouteGrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
}

.svcRouteCard {
    min-height: 365px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 27px;
    border: 1px solid #e5e9f0;
    border-radius: 17px;
    color: #081225;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15,23,42,.045);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.svcRouteCard:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 48px rgba(15,23,42,.085);
}

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

.svcRouteCard__top span {
    color: #5573a9;
    font-size: 9px;
    font-weight: 900;
}

.svcRouteCard__top i {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe2ec;
    border-radius: 12px;
    color: #315fc4;
    background: #f5f8fc;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.svcRouteCard h3 {
    margin: 0 0 12px;
    font-size: 27px;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.svcRouteCard p {
    margin: 0;
    color: #53617a;
    font-size: 13px;
    line-height: 1.65;
}

.svcRouteCard footer {
    display: flex;
    justify-content: space-between;
    color: #263653;
    font-size: 10px;
    font-weight: 850;
}

.svcRouteCard footer span {
    color: #315fc4;
}


/* =========================================================
   PROBLEMS
========================================================= */

.svcProblems {
    padding: 125px 0;
}

.svcProblemCards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
}

.svcProblemCard {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border: 1px solid #e1e6ee;
    border-radius: 17px;
    color: #081225;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.035);
    text-decoration: none;
}

.svcProblemCard__number {
    color: #5573a9;
    font-size: 9px;
    font-weight: 900;
}

.svcProblemCard h3 {
    margin: 45px 0 12px;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.svcProblemCard p {
    margin: 0;
    color: #53617a;
    font-size: 12px;
    line-height: 1.65;
}

.svcProblemCard footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #263653;
    font-size: 10px;
    font-weight: 850;
}

.svcProblemCard footer span {
    color: #315fc4;
}


/* =========================================================
   DIRECTORY
========================================================= */

.svcDirectory {
    padding: 125px 0;
}

.svcDirectory__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: end;
    margin-bottom: 42px;
}

.svcDirectory__head p {
    max-width: 650px;
    margin: 16px 0 0;
    color: #53617a;
    font-size: 13px;
    line-height: 1.7;
}

.svcFilters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.svcFilters button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dfe4ec;
    border-radius: 999px;
    color: #5d677d;
    background: #fff;
    font: inherit;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.svcFilters button.is-active {
    color: #fff;
    border-color: #243b76;
    background: #17213b;
}

.svcDirectory__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 13px;
}

.svcServiceCard {
    min-height: 315px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid #e5e9f0;
    border-radius: 17px;
    color: #081225;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,.035);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.svcServiceCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(15,23,42,.075);
}

.svcServiceCard[hidden] {
    display: none !important;
}

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

.svcServiceCard__top span {
    color: #5573a9;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.svcServiceCard__top i {
    color: #315fc4;
    font-style: normal;
}

.svcServiceCard h3 {
    margin: 50px 0 12px;
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.svcServiceCard p {
    margin: 0;
    color: #53617a;
    font-size: 12px;
    line-height: 1.65;
}

.svcServiceCard footer {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    color: #263653;
    font-size: 10px;
    font-weight: 850;
}

.svcServiceCard footer span {
    color: #315fc4;
}


/* =========================================================
   SYSTEMS
========================================================= */

.svcSystems {
    padding: 125px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

.svcSystems__grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    align-items: start;
}

.svcSystems__copy h2 {
    margin: 15px 0 20px;
    font-size: clamp(44px,5vw,72px);
    line-height: .98;
    letter-spacing: -.06em;
}

.svcSystems__copy h2 span {
    color: rgba(255,255,255,.4);
}

.svcSystems__copy p {
    margin: 0 0 28px;
    color: rgba(239,243,255,.52);
    font-size: 14px;
    line-height: 1.75;
}

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

.svcSystemCard {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 17px;
    color: #fff;
    background: rgba(255,255,255,.018);
    text-decoration: none;
}

.svcSystemCard > span {
    color: #66e3ff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.svcSystemCard h3 {
    margin: 44px 0 12px;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.svcSystemCard p {
    margin: 0;
    color: rgba(239,243,255,.48);
    font-size: 12px;
    line-height: 1.65;
}

.svcSystemCard b {
    margin-top: auto;
    color: rgba(255,255,255,.7);
    font-size: 10px;
}


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

.svcTrust {
    padding: 125px 0;
}

.svcTrust__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 13px;
}

.svcTrustCard {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid #e2e6ed;
    border-radius: 18px;
    background: #fff;
}

.svcTrustCard__tag {
    color: #5573a9;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.svcTrustCard h2 {
    margin: 45px 0 15px;
    color: #081225;
    font-size: 32px;
    line-height: 1.02;
    letter-spacing: -.05em;
}

.svcTrustCard h2 span {
    color: #53617a;
}

.svcTrustCard p {
    margin: 0;
    color: #53617a;
    font-size: 13px;
    line-height: 1.7;
}

.svcTrustCard > a {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    color: #263653;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}

.svcTrustCard > a span {
    color: #315fc4;
}


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

.svcFaq {
    padding: 125px 0;
}

.svcFaq__grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    align-items: start;
}

.svcFaq__intro {
    position: sticky;
    top: 170px;
}

.svcFaq__intro p {
    max-width: 520px;
    margin: 18px 0 26px;
    color: #53617a;
    font-size: 13px;
    line-height: 1.7;
}

.svcFaq__items {
    border-top: 1px solid #dfe4ec;
}

.svcFaqItem {
    border-bottom: 1px solid #dfe4ec;
}

.svcFaqItem summary {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #17213b;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 750;
}

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

.svcFaqItem summary i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border: 1px solid #dfe4ec;
    border-radius: 50%;
    color: #315fc4;
    font-style: normal;
    transition: transform .2s ease;
}

.svcFaqItem[open] summary i {
    transform: rotate(45deg);
}

.svcFaqItem > div {
    padding: 0 55px 24px 0;
    color: #53617a;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   FINAL
========================================================= */

.svcFinal {
    padding: 0 30px 90px;
    background: #fff;
}

.svcFinal__inner {
    padding: 52px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: end;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    background:
        radial-gradient(650px 300px at 90% 0%,rgba(139,123,255,.1),transparent 65%),
        #071021;
}

.svcFinal h2 {
    max-width: 900px;
    margin: 15px 0 0;
    color: #fff;
    font-size: clamp(42px,5vw,70px);
    line-height: .98;
    letter-spacing: -.06em;
}

.svcFinal h2 span {
    color: rgba(255,255,255,.42);
}

.svcFinal__buttons {
    min-width: 215px;
    display: grid;
    gap: 10px;
}


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

@media (max-width: 1200px) {
    .svcRouteGrid,
    .svcProblemCards {
        grid-template-columns: repeat(2,1fr);
    }

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

@media (max-width: 980px) {
    .svcHero__inner,
    .svcSectionHead,
    .svcSystems__grid,
    .svcFaq__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .svcHero__route {
        max-width: 760px;
    }

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

    .svcFilters {
        justify-content: flex-start;
    }

    .svcFaq__intro {
        position: static;
    }

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

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

@media (max-width: 720px) {
    .svcContainer {
        width: calc(100% - 28px);
    }

    .svcHero__inner {
        min-height: 0;
        padding: 65px 0 80px;
    }

    .svcHero__copy h1 {
        font-size: clamp(50px,15vw,76px);
    }

    .svcHero__lead {
        font-size: 15px;
    }

    .svcHero__actions {
        display: grid;
    }

    .svcButton {
        justify-content: space-between;
    }

    .svcHero__stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .svcHero__stats > div {
        padding: 0 0 16px;
        border-left: 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .svcRoutes,
    .svcProblems,
    .svcDirectory,
    .svcSystems,
    .svcTrust,
    .svcFaq {
        padding: 82px 0;
    }

    .svcMobileSlider {
        width: calc(100vw - 14px);
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-right: 28px;
    }

    .svcMobileSlider::-webkit-scrollbar {
        display: none;
    }

    .svcMobileSlider > * {
        scroll-snap-align: start;
    }

    .svcRouteGrid .svcRouteCard,
    .svcSystemCards .svcSystemCard {
        width: calc(100vw - 52px);
        min-width: calc(100vw - 52px);
    }

    .svcSwipeHint {
        display: flex;
    }

    .svcProblemCards,
    .svcDirectory__grid {
        grid-template-columns: 1fr;
    }

    .svcProblemCard,
    .svcServiceCard {
        min-height: 275px;
    }

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

    .svcTrustCard {
        min-height: 290px;
    }

    .svcFinal {
        padding: 0 14px 70px;
    }

    .svcFinal__inner {
        padding: 34px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svcReveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   V5 — LIGHT SECTION COLOUR REFINEMENT
========================================================= */
.svcSectionHead h2 span,
.svcDirectory__head h2 span,
.svcFaq__intro h2 span,
.svcSystems__copy h2 span,
.svcTrustCard h2 span {
    background: linear-gradient(100deg, #4769df 0%, #6d63da 48%, #8a62df 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.svcLight {
    background: #ffffff;
}

.svcSoft {
    background: #f8faff;
}