/* Services reference: 1600px desktop canvas, shared components unchanged. */

.services-page header:not(.scrolled) {
    height: 6.375vw;
}

.services-page header::before {
    content: '';
    position: absolute;
    inset: .625vw -2.7483vw;
    border-radius: 1.25vw;
    background: #fff;
    z-index: -1;
    pointer-events: none;
}

.services-container {
    width: 84.5vw;
    margin-inline: auto;
}

.services-hero {
    min-height: 42.5vw;
    padding: 12.8125vw 0 6.25vw;
    background: url('../assets/services/hero.webp') center / cover no-repeat;
}

.services-hero-copy {
    width: 38.125vw;
    margin-left: 8.625vw;
}

.services-eyebrow {
    display: flex;
    align-items: center;
    gap: 1vw;
    font: max(var(--compact-small-font, 0vw), .75vw)/max(var(--compact-small-line, 0vw), 1vw) I-M;
    color: #52605a;
}

.services-eyebrow::before {
    content: '';
    width: 2.5vw;
    height: 0.0625vw;
    background: #0fb488;
    flex-shrink: 0;
}

.services-hero h1 {
    margin: 1.5vw 0 1.5vw;
    font-size: max(var(--compact-h1-font, 0vw), 2.75vw);
    line-height: max(var(--compact-h1-line, 0vw), 3.375vw);
    letter-spacing: -.075vw;
}

.services-hero p {
    font-size: max(var(--compact-body-font, 0vw), 1vw);
    line-height: max(var(--compact-body-line, 0vw), 1.625vw);
}

.services-hero p+p {
    margin-top: 1.75vw;
}

html:has(.services-page) {
    scroll-padding-top: var(--services-scroll-offset, 18vw);
}

.services-nav {
    position: sticky;
    top: var(--services-header-offset, calc(6.371vw + 0.75vw));
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    margin-top: -5vw;
    border-radius: .875vw;
    background: #fff;
    box-shadow: 0 .75vw 2.25vw rgba(12,75,54,.06);
    overflow: hidden;
}

.services-nav a {
    height: 8.25vw;
    padding: .75vw .625vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75vw;
    border-right: 0.0625vw solid #e4e9e6;
    color: #15231d;
    text-align: center;
    font: max(var(--compact-body-font, 0vw), .875vw)/max(var(--compact-body-line, 0vw), 1.125vw) I-SB;
    transition: background .2s,color .2s;
}

.services-nav a:last-child {
    border-right: 0;
}

.services-nav a[aria-current='location'] {
    background: #007d49;
    color: #fff;
    border-radius: .625vw;
}

.services-nav .service-icon {
    width: 2.75vw;
    height: 2.25vw;
    display: grid;
    place-items: center;
}

.services-nav img {
    width: auto;
    height: auto;
    object-fit: contain;
}

.services-nav a:first-child:not([aria-current]) img {
    filter: brightness(0);
    opacity: .65;
}

.services-nav a[aria-current='location'] img {
    filter: brightness(0) invert(1);
}

.services-group {
    padding-top: 7.5vw;
}

.service-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5vw 3.625vw;
    margin-bottom: 9.375vw;
    scroll-margin-top: 0;
}

.service-copy {
    min-width: 0;
}

.service-section.floating .service-copy {
    padding-left: 2.25vw;
}

.service-section.floating {
    grid-template-columns: 37.25vw 45vw;
    column-gap: 2.25vw;
}

.service-section.wide {
    grid-template-columns: 40.625vw 1fr;
}

.service-section.wide .service-copy {
    grid-column: 2;
    grid-row: 1;
}

.service-section.wide .service-visual {
    grid-column: 1;
    grid-row: 1;
}

.service-copy h2 {
    margin: 1vw 0 .5vw;
    font-size: max(var(--compact-h2-font, 0vw), 2vw);
    line-height: max(var(--compact-h2-line, 0vw), 2.75vw);
    letter-spacing: -.09375vw;
    color: #0c1712;
}

.service-copy h3 {
    font: max(var(--compact-body-font, 0vw), .875vw)/max(var(--compact-body-line, 0vw), 1.375vw) I-SB;
    color: #15231d;
    margin-bottom: 1.5vw;
}

.service-copy p {
    font: max(var(--compact-body-font, 0vw), .875vw)/max(var(--compact-body-line, 0vw), 1.4375vw) I-R;
    color: #617068;
}

.service-copy p+p {
    margin-top: 1.5vw;
}

.service-visual {
    min-width: 0;
    padding-top: .375vw;
}

.service-photo {
    width: 100%;
    height: 15.5vw;
    border-radius: 1.25vw;
    object-fit: cover;
}

.wide .service-photo {
    height: 21.5vw;
}

.service-capabilities {
    background: #f3f9f6;
    border-radius: .875vw;
    padding: .9375vw 1.375vw;
    color: #617068;
}

.service-capabilities h3 {
    font: max(var(--compact-body-font, 0vw), .875vw)/max(var(--compact-body-line, 0vw), 1.25vw) I-SB;
    color: #08745b;
    margin-bottom: .5vw;
}

.service-capabilities ul {
    list-style: none;
    display: grid;
    grid-template-rows: repeat(3,auto);
    grid-auto-flow: column;
    grid-template-columns: 1.1fr 1.2fr;
    gap: .375vw 1.25vw;
}

.service-capabilities li {
    display: flex;
    align-items: baseline;
    gap: .5vw;
    font: max(var(--compact-body-font, 0vw), .875vw)/max(var(--compact-body-line, 0vw), 1.25vw) I-R;
}

.service-capabilities li::before {
    content: '\2713';
    color: #0fb488;
    font-family: I-SB;
    flex: 0 0 auto;
}

.floating .service-capabilities-wrap {
    margin: -2vw 1.25vw 0;
    padding: 1.375vw;
    position: relative;
    background: #fff;
    border-radius: 1.375vw;
    box-shadow: 0 .625vw 1.375vw rgba(12,75,54,.06);
}

.wide>.service-capabilities-wrap {
    grid-column: 1/-1;
}

.wide .service-capabilities ul {
    grid-template-rows: repeat(2,auto);
    grid-template-columns: max-content max-content max-content 1fr;
}

.wide .service-capabilities li:nth-child(5) {
    grid-column: 3;
    grid-row: 1;
}

.wide .service-capabilities li:nth-child(6) {
    grid-column: 4;
    grid-row: 1;
}

.services-cta {
    position: relative;
    min-height: 32.5vw;
    padding: 6.25vw 7.75vw;
    border-radius: 4.5vw 0 0 0;
    overflow: hidden;
    background: #003d30 url('../assets/services/contact-banner.webp') right center / auto 100% no-repeat;
    color: #fff;
}

.services-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(0,61,48,.98) 0%,rgba(0,61,48,.85) 30%,rgba(0,61,48,.25) 70%,transparent);
}

.services-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 0 100%,transparent 22vw,rgba(255,255,255,.08) calc(22vw + 0.0625vw),transparent calc(22vw + 0.125vw)),radial-gradient(circle at 0 100%,transparent 26vw,rgba(255,255,255,.06) calc(26vw + 0.0625vw),transparent calc(26vw + 0.125vw));
}

.services-cta-copy {
    width: 43.75vw;
    position: relative;
    z-index: 1;
}

.services-cta .services-eyebrow {
    color: #d4e5dc;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.services-cta .services-eyebrow::before {
    background: #d4e5dc;
}

.services-cta h2 {
    margin: 2vw 0 1.75vw;
    font-size: max(var(--compact-h2-font, 0vw), 2.5vw);
    line-height: max(var(--compact-h2-line, 0vw), 3vw);
    letter-spacing: -.05vw;
    color: #fff;
}

.services-cta p {
    font-size: max(var(--compact-body-font, 0vw), 1vw);
    line-height: max(var(--compact-body-line, 0vw), 1.5vw);
    margin-bottom: 1.75vw;
}

.services-group:last-child {
    padding-bottom: 6.25vw;
}

.services-group:last-child .service-section:last-child {
    margin-bottom: 0;
}

@media (min-width: 1025px), (hover: hover) {
    .services-nav a:hover {
        background: #eef8f3;
        color: #08745b;
    }

    .services-nav a[aria-current='location']:hover {
        background: #00663c;
        color: #fff;
    }
}

/* Compact desktop: readable type and spacing from 961px through 1200px. */

@media (max-width: 1200px) {
.services-nav a {
    height: auto;
    min-height: 132px;
    padding: 12px 8px;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.services-nav .service-icon {
    width: 32px;
    height: 32px;
}

.service-copy p + p {
    margin-top: 20px;
}

.service-capabilities {
    padding: 16px;
}

.service-capabilities ul {
    gap: 10px 16px;
}

.service-capabilities li {
    gap: 8px;
}

.wide .service-capabilities ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
}

.wide .service-capabilities li:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
}

.wide .service-capabilities li:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
}
}

@media (max-width: 960px) {
.services-cta::after {
    background: radial-gradient(circle at 0 100%,transparent 22vw,rgba(255,255,255,.08) calc(22vw + 0.23256vw),transparent calc(22vw + 0.46512vw)),radial-gradient(circle at 0 100%,transparent 26vw,rgba(255,255,255,.06) calc(26vw + 0.23256vw),transparent calc(26vw + 0.46512vw));
}

.services-page header:not(.scrolled) {
    height: 20.4651vw;
}

.services-page header::before {
    inset: 0 -2.5vw;
    border-radius: 3.72093vw;
}

.services-container {
    width: calc(100% - 9.30233vw);
}

.services-hero {
    min-height: 0;
    padding: 32.55814vw 5.5814vw 18.60465vw;
    background-image: linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),url('../assets/services/hero.webp');
    background-position: 65% center;
}

.services-hero-copy {
    width: 100%;
    margin-left: 0;
}

.services-eyebrow {
    gap: 3.25581vw;
    font-size: 2.55814vw;
    line-height: 4.65116vw;
}

.services-eyebrow::before {
    height: 0.23256vw;
    width: 7.44186vw;
}

.services-hero h1 {
    margin: 4.65116vw 0 5.5814vw;
    font-size: 6.97674vw;
    line-height: 1.15;
    letter-spacing: -0.23256vw;
}

.services-hero p {
    font-size: 3.48837vw;
    line-height: 5.81395vw;
}

.services-hero p+p {
    margin-top: 4.65116vw;
}

.services-nav {
    top: var(--services-header-offset, calc(6.371vw + 2.7907vw));
    grid-template-columns: repeat(8,minmax(25.5814vw,1fr));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    margin-top: -7.44186vw;
    border-radius: 2.7907vw;
    box-shadow: 0 2.32558vw 6.97674vw rgba(12,75,54,.07);
}

.services-nav .service-icon {
    width: 8.37209vw;
    height: 8.37209vw;
}

.services-nav img {
    max-width: 7.90698vw;
    max-height: 8.37209vw;
}

.services-nav a[aria-current='location'] {
    border-radius: 1.86047vw;
}

.services-group {
    padding-top: 14.88372vw;
}

.service-section {
    grid-template-columns: 1fr;
    gap: 5.5814vw;
    margin-bottom: 14.88372vw;
    scroll-margin-top: 0;
}

.service-section.floating {
    grid-template-columns: 1fr;
    gap: 5.5814vw;
    margin-bottom: 14.88372vw;
    scroll-margin-top: 0;
}

.service-section.wide {
    grid-template-columns: 1fr;
    gap: 5.5814vw;
    margin-bottom: 14.88372vw;
    scroll-margin-top: 0;
}

.service-section.floating .service-copy {
    padding-left: 0;
}

.service-copy {
    display: contents;
}

.service-heading {
    order: 1;
}

.service-description {
    order: 4;
}

.service-section.wide .service-copy {
    grid-column: auto;
    grid-row: auto;
}

.service-section.wide .service-visual {
    grid-column: auto;
    grid-row: auto;
}

.service-copy h2 {
    font-size: 6.04651vw;
    line-height: 1.2;
    margin: 3.72093vw 0 2.32558vw;
    letter-spacing: -0.18605vw;
}

.service-copy h3 {
    font-size: 3.25581vw;
    line-height: 5.11628vw;
    margin-bottom: 0;
}

.service-copy p {
    font-size: 3.48837vw;
    line-height: 5.81395vw;
}

.service-copy p+p {
    margin-top: 4.65116vw;
}

.service-visual {
    padding-top: 0;
    order: 2;
}

.service-photo {
    height: auto;
    aspect-ratio: auto;
    border-radius: 3.72093vw;
}

.wide .service-photo {
    height: auto;
    aspect-ratio: auto;
    border-radius: 3.72093vw;
}

.service-capabilities {
    border-radius: 2.7907vw;
    padding: 4.18605vw;
}

.service-capabilities h3 {
    font-size: 3.02326vw;
    line-height: 4.88372vw;
    margin-bottom: 2.7907vw;
}

.service-capabilities li {
    gap: 1.62791vw;
    font-size: 3.02326vw;
    line-height: 4.88372vw;
}

.wide .service-capabilities li:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
}

.wide .service-capabilities li:nth-child(6) {
    grid-column: auto;
    grid-row: auto;
}

.floating .service-capabilities-wrap {
    margin: -5.5814vw 2.7907vw 0;
    padding: 2.7907vw;
    border-radius: 3.72093vw;
    box-shadow: 0 1.86047vw 5.11628vw rgba(12,75,54,.06);
}

.wide>.service-capabilities-wrap {
    grid-column: auto;
    order: 3;
}

.services-cta {
    min-height: 97.67442vw;
    padding: 14.88372vw 5.5814vw;
    border-radius: 9.30233vw 0 0 0;
    background-position: 65% center;
    background-size: auto 100%;
}

.services-cta-copy {
    width: 100%;
}

.services-cta h2 {
    font-size: 6.51163vw;
    line-height: 1.15;
    margin: 5.5814vw 0;
    letter-spacing: -0.18605vw;
}

.services-cta p {
    font-size: 3.48837vw;
    line-height: 5.81395vw;
    margin-bottom: 6.51163vw;
}

.services-group:last-child {
    padding-bottom: 14.88372vw;
}

.services-nav a {
    border-right: 0.23256vw solid #e4e9e6;
    height: auto;
    min-height: 26.04651vw;
    padding: 2.7907vw 1.62791vw;
    gap: 2.32558vw;
    border-bottom: 0.23256vw solid #e4e9e6;
    line-height: 3.48837vw;
    font-size: 2.32558vw;
    padding-inline: 0.93023vw;
}

.service-capabilities ul {
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 2.32558vw 3.72093vw;
    grid-template-columns: 1fr;
}

.wide .service-capabilities ul {
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 2.32558vw 3.72093vw;
    grid-template-columns: 1fr;
}
}
