/* ===========================================================================
   Service / interior pages. Reusable section components shared across
   Transportation, Warehousing, Logistics, etc. Pairs with the global
   .section-head, .mcc-btn, [data-accordion], [data-tabs] components.
   =========================================================================== */

/* --- Page hero -------------------------------------------------------------
   Full-width image band with a dark scrim, title, subtitle, and buttons. */
.svc-hero {
    position: relative;
    isolation: isolate;
    margin-inline: var(--hero-margin-inline);
    border-radius: 25px;
    overflow: hidden;
    color: var(--color-white);
    background: #000 center center / cover no-repeat;
}

.svc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Dark on the left for text legibility, fading to clear on the right so the
       truck stays bright. */
    background: linear-gradient(90deg, rgba(9, 13, 18, 0.78) 0%, rgba(9, 13, 18, 0.55) 35%, rgba(9, 13, 18, 0.2) 65%, rgba(9, 13, 18, 0) 100%);
}

.svc-hero__inner {
    /* Same centered max-width container as the body sections, so the hero copy
       lines up with the section content and tracks it on resize. */
    max-width: var(--container);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 400px;
    /* Match the body sections' side gutter so hero copy lines up with the
       content below (20px desktop / 10px mobile via the token). */
    padding: 90px var(--hero-margin-inline);
}

.svc-hero__title {
    margin: 0 0 14px;
    /* Global h1 size/weight (80px / 600) via the design tokens. */
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: 0.98;
    letter-spacing: var(--h1-letter-spacing);
    color: var(--color-white);
}

/* Tablet range: 80px is too large for 783–1024px, so scale the interior hero
   title down through this band (mobile ≤782px keeps its own 35px rule). */
@media (min-width: 783px) and (max-width: 1024px) {
    .svc-hero__title {
        font-size: clamp(34px, 5vw, 54px);
    }
}

.svc-hero__subtitle {
    margin: 0 0 26px;
    max-width: 100%;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 600;
}

.svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 16px;
}

/* --- Section wrapper + prose ----------------------------------------------
   Backgroundless sections align to the same inset as the homepage sections. */
.svc-section {
    padding-block-start: clamp(56px, 8vw, 100px);
    padding-inline: var(--hero-margin-inline);
    background: var(--color-white);
}

.svc-section__inner {
    max-width: var(--container);
    margin-inline: auto;
}

/* Blog single post: tighter top gap than the default 100px section (non-mobile;
   mobile keeps the 50px-margin section rhythm). */
@media (min-width: 783px) {
    .svc-section.single-post {
        padding-block-start: 50px;
    }
}

/* First section after the hero: 50px above the eyebrow, 10px below it. Its
   bottom is 0 so the tab section's 100px top is the full gap between them. */
.svc-section--tight-top {
    padding-top: 50px;
    padding-bottom: 0;
}

.svc-section--tight-top .section-head__eyebrow {
    margin-bottom: 10px;
}

/* Industries / tabs section: spacing comes from .svc-tabs' own margins. */
.svc-tabs-section {
    padding-block: 0;
}

/* Transportation "Industries Served": 50px top/bottom padding on mobile. */
@media (max-width: 782px) {
    .svc-tabs-section:has(.svc-tabs--transport) {
        padding-block: 50px;
    }
}

/* 100px above the "Industries Served" heading. */
.svc-tabs-section .section-head__title {
    margin-top: 100px;
}

/* Overview variant: the title sits directly below its eyebrow (which lives in
   the section above), so no extra top gap. */
.svc-tabs-section--overview .section-head__title {
    margin-top: 0;
}

/* 50px top/bottom padding inside the overview grey card (mobile). Higher
   specificity so it wins over the base grey-card `padding: 30px 24px`. */
@media (max-width: 1024px) {
    .svc-tabs-section.svc-tabs-section--overview {
        padding-block: 50px;
    }

    /* Accordion separators stay solid black in every state (default/hover/open),
       not the default light-grey. */
    .svc-tabs-section.svc-tabs-section--overview .svc-tabs {
        border-bottom-color: var(--color-black);
    }

    .svc-tabs-section.svc-tabs-section--overview .svc-tabs__tab {
        border-top-color: var(--color-black);
    }
}

.svc-prose {
    max-width: 100%;
    margin-top: 20px;
}

.svc-prose p {
    margin: 0 0 1.2em;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-prose p:last-child {
    margin-bottom: 0;
}

.svc-prose strong {
    font-weight: 700;
    color: var(--color-dark);
}

/* --- Tabs (industries served) --------------------------------------------- */
.svc-tabs {
    margin-block: 100px 0;
}

/* Tabs sit above the panel; the active one merges into the panel's border.
   No inline padding so the first/last tab align flush with the panel edges. */
.svc-tabs__nav {
    position: relative;
    z-index: 2;
    display: flex;
    /* Never wrap: the five long labels stay on one row and shrink to fit as the
       viewport narrows (gap/padding/size scale with vw), reaching the full
       50px/26px/13px spread only on wide desktops. The accordion takes over at
       <=1024px. */
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
}

.svc-tabs__tab {
    position: relative;
    flex: 0 0 auto;
    /* Deep-linked tabs (e.g. /warehousing/#asset-recovery) clear the sticky
       header when jumped to. */
    scroll-margin-top: 120px;
    /* All tabs overlap the panel by 2px so activating one never shifts it. */
    margin-bottom: -2px;
    padding: 16px clamp(10px, 1.9vw, 26px) 18px;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: clamp(9px, 0.95vw, 13px);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-dark);
    transition: color var(--transition);
}

.svc-tabs__tab:hover {
    color: var(--color-primary);
}

/* Active tab: blue text + blue top/side border, white fill, overlapping the
   panel's top border by 2px so the two read as one continuous outline. */
.svc-tabs__tab.is-active {
    z-index: 3;
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-white);
}

.svc-tabs__tab-label {
    display: block;
}

/* Bolder tab labels on mobile (the accordion tab weight is 600). */
@media (max-width: 782px) {
    .svc-tabs__tab-label {
        font-weight: 700;
    }
}

/* Arrow is only used in the mobile accordion; hidden in desktop tab mode. */
.svc-tabs__tab-arrow {
    display: none;
}

.svc-tabs__panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 64px);
    align-items: center;
    padding: 35px;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
}

.svc-tabs__panel[hidden] {
    display: none;
}

/* First (left-flush) tab active → square the panel's top-left so the tab's
   side border flows flush into the panel outline. Other tabs connect mid-span,
   so both top corners stay rounded. */
.svc-tabs:has(.svc-tabs__tab:first-child.is-active) .svc-tabs__panel {
    border-top-left-radius: 0;
}

.svc-tabs__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
}

.svc-tabs__title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    color: var(--color-dark);
}

/* Transportation page keeps the original larger uppercase tab titles. */
.svc-tabs--transport .svc-tabs__title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.05;
    text-transform: uppercase;
}

.svc-tabs__subtitle {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
}

.svc-tabs__desc {
    margin: 0;
    /* Reserve the tallest description's height so the EXPLORE button sits at the
       same position on every tab (no jump when switching). Reset on mobile. */
    min-height: 150px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.7;
}

.svc-tabs__desc p {
    margin: 0 0 1em;
}

.svc-tabs__desc p:last-child {
    margin-bottom: 0;
}

/* Logistics tabs: the Aerospace copy is longer than the default 150px reserve,
   so give this set a taller reservation (desktop only) to keep the Explore
   button at the same height across all three tabs. */
@media (min-width: 861px) {
    .svc-tabs--logistics .svc-tabs__desc {
        min-height: 240px;
    }

    /* Installation tabs: Banking copy is the longest — reserve enough to keep
       the Explore button aligned across all three. */
    .svc-tabs--install .svc-tabs__desc {
        min-height: 220px;
    }
}

/* "Explore Our Installation Expertise" heading: shown only inside the mobile
   grey card (the desktop layout goes straight into the tabs). */
.svc-installexp__head {
    display: none;
}

@media (max-width: 1024px) {
    .svc-installexp__head {
        display: block;
        margin: 0;
        font-size: 25px;
        font-weight: 600;
        line-height: 1.15;
        text-transform: none;
        color: var(--color-dark);
    }

    /* 50px top/bottom padding inside the expertise grey card. Higher specificity
       so it wins over the base grey-card `padding: 30px 24px`. */
    .svc-tabs-section.svc-tabs-section--installexp {
        padding-block: 50px;
    }

    /* Same 50px padding for the Auto Transport accordion grey card. */
    .svc-tabs-section:has(.svc-tabs--auto) {
        padding-block: 50px;
    }

    /* Accordion separators stay solid black in every state (default/hover/open). */
    .svc-tabs-section.svc-tabs-section--installexp .svc-tabs {
        border-bottom-color: var(--color-black);
    }

    .svc-tabs-section.svc-tabs-section--installexp .svc-tabs__tab {
        border-top-color: var(--color-black);
    }
}

/* --- Callout section (white-glove) ---------------------------------------- */
.svc-callout {
    margin-bottom: 100px;
}

/* Right-align the button (block-level + auto left margin). */
.svc-callout__cta {
    display: flex;
    width: fit-content;
    margin-top: clamp(24px, 3vw, 40px);
    margin-left: auto;
}

/* --- Expertise (dark, inset card) ----------------------------------------- */
.svc-expertise {
    margin-inline: var(--hero-margin-inline);
    padding: 70px 20px;
    color: var(--color-white);
    background: #141414;
    border-radius: 24px;
}

.svc-expertise__inner {
    max-width: var(--container);
    margin-inline: auto;
}

.svc-expertise__inner .section-head {
    margin-bottom: clamp(24px, 3vw, 40px);
}

/* Full-width solid-white separator line beneath the eyebrow. */
.svc-expertise .section-head__eyebrow {
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-white);
}

/* Tabs variant: 40px below the divider line before the title, at all widths. */
.svc-expertise--tabs .section-head__eyebrow {
    margin-bottom: 40px;
}

.svc-expertise__media img {
    width: 100%;
    max-height: 352px;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    border-radius: 16px;
}

.svc-expertise__title {
    margin: clamp(32px, 4vw, 56px) 0 clamp(20px, 3vw, 34px);
    max-width: 100%;
    font-size: clamp(34px, 4.4vw, 64px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

.svc-expertise__prose {
    max-width: 100%;
}

.svc-expertise__prose p {
    margin: 0 0 1.2em;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-expertise__prose p:last-child {
    margin-bottom: 0;
}

/* --- FAQs (accordion) ------------------------------------------------------ */
.svc-faqs {
    margin-bottom: 100px;
}

.svc-faqs__list {
    margin-top: 20px;
}

.svc-faq {
    border-top: 1px solid var(--color-black);
}

.svc-faq:last-of-type {
    border-bottom: 1px solid var(--color-black);
}

.svc-faq__summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 700;
    color: var(--color-dark);
}

.svc-faq__q {
    font-weight: 600;
}

/* Finance & Banking: accordion beside the image uses a larger question type. */
.svc-faqs__list--beside .svc-faq__q {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

.svc-faq__summary::-webkit-details-marker {
    display: none;
}

.svc-faq__summary::marker {
    content: "";
}

.svc-faq__icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-dark);
    transform: rotate(90deg);
    transition: transform var(--transition), color var(--transition);
}

.svc-faq__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* Arrow stroke (overrides the inline stroke-width="2"). */
.svc-faq__icon svg path {
    stroke-width: 2.5;
}

/* Brand blue on hover and when open. */
.svc-faq__summary:hover .svc-faq__icon,
.svc-faq__summary:focus-visible .svc-faq__icon,
.svc-faq[open] .svc-faq__icon {
    color: var(--color-primary);
}

.svc-faq[open] .svc-faq__icon {
    transform: rotate(0deg);
}

.svc-faq__panel {
    padding: 0 0 15px;
    max-width: 100%;
}

.svc-faq__panel p {
    margin: 0 0 1em;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.7;
}

.svc-faq__panel ul {
    margin: 0 0 1em;
    padding-left: 0;
    list-style: none;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
}

/* Blue checkmark markers, matching the WMS Benefits list. */
.svc-faq__panel li {
    position: relative;
    margin: 0 0 0.5em;
    padding-left: 28px;
}

.svc-faq__panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17.5 19 7' stroke='%230069cb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.svc-faq__panel strong {
    font-weight: 700;
    color: var(--color-dark);
}

/* No trailing gap under the last block in a panel. */
.svc-faq__panel > :last-child {
    margin-bottom: 0;
}

/* FAQ page: no per-item gap in the panel lists (all devices). */
.faqs-main .svc-faq__panel li {
    margin: 0;
}

/* FAQ page, mobile: a slightly thicker checkmark. */
@media (max-width: 782px) {
    .faqs-main .svc-faq__panel li::before {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17.5 19 7' stroke='%230069cb' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    }
}

/* --- Prose lead (bold intro paragraph under an overview title) ------------- */
/* Higher specificity than the global `body :is(…, .svc-prose p, …)` body rule
   so the bold lead keeps its own size/weight. */
.svc-prose p.svc-prose__lead {
    margin: 0 0 1.4em;
    color: var(--color-dark);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}

/* Aerospace overview lead is bolder. */
.svc-prose--aerospace p.svc-prose__lead {
    font-weight: 700;
}

/* Larger lead variant (Final-Mile & White-Glove overview). */
.svc-prose p.svc-prose__lead--xl {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 600;
    line-height: 22px;
}

/* Emphasised first body paragraph (Final-Mile & White-Glove overview). */
.svc-prose p.svc-prose__intro {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
}

/* Fitness "Let McCollister's do the heavy lifting" prose. */
.svc-heavylift .svc-prose p {
    font-size: 18px;
    font-weight: 600;
    line-height: 21.6px;
    letter-spacing: -0.54px;
}

/* 30px lead variant (Residential "Who is this for" subtitle). */
.svc-prose p.svc-prose__lead--30 {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
}

/* --- Our Capabilities (three cards) --------------------------------------- */
.svc-caps__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 50px;
    margin-top: 20px;
}

.svc-caps__card {
    display: flex;
    flex-direction: column;
    /* Height follows content; grid still stretches all three to the tallest. */
    min-height: auto;
    padding: clamp(24px, 2.4vw, 34px);
    border-radius: 20px;
    color: var(--color-dark);
    background: rgb(224, 224, 226);
}

/* Dark card carries a background image with a legibility gradient over it. */
.svc-caps__card--dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--color-white);
    background: #141414 center / cover no-repeat;
}

.svc-caps__card--dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.svc-caps__card--blue {
    color: var(--color-white);
    background: var(--color-primary);
}

.svc-caps__title {
    margin: 0 0 16px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    text-transform: capitalize;
    color: var(--color-dark);
}

/* Dark and blue cards get a pure-white title. */
.svc-caps__card--dark .svc-caps__title,
.svc-caps__card--blue .svc-caps__title {
    color: var(--color-white);
}

/* Divider under the title; inherits the card's text colour. */
.svc-caps__rule {
    height: 1px;
    margin: 0 0 20px;
    background: currentColor;
    opacity: 0.35;
}

.svc-caps__text {
    margin: 30px 0 0;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
}

/* --- Our Services (four bordered columns) --------------------------------- */
.svc-services__intro {
    max-width: 100%;
    margin: 20px 0 clamp(40px, 5vw, 64px);
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-services__grid {
    display: grid;
    /* Content-sized columns packed to the left (not stretched full width), so
       each divider sits a consistent distance from its column's text instead of
       floating in the empty space of a wide 1fr cell. */
    grid-template-columns: repeat(4, max-content);
    justify-content: start;
    /* Cells stretch to the tallest column so the dividers align. */
    align-items: stretch;
}

/* Left border divider; extra padding on the left (right side of the line)
   pushes the next column's content over so the line reads centered. */
.svc-services__col {
    padding-inline: 50px;
    border-left: 1px solid var(--color-black);
}

.svc-services__col:first-child {
    padding-left: 0;
    border-left: 0;
}

.svc-services__head {
    margin: 0 0 22px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-dark);
}

.svc-services__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-services__list li {
    margin: 0;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.3;
}

/* --- Warehouse features (image + checklist) ------------------------------- */
.svc-features__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(30px, 4vw, 64px);
    align-items: center;
}

.svc-features__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
}

.svc-features__title {
    margin: 0 0 20px;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    /* Sentence case, not the global uppercase h2 treatment. */
    text-transform: none;
    color: var(--color-dark);
}

.svc-features__text {
    margin: 0 0 30px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-features__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-features__list li {
    display: flex;
    gap: 14px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.4;
}

.svc-features__marker {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-primary);
}

.svc-features__marker svg {
    display: block;
    width: 16px;
    height: 20px;
}

/* --- Warehouse management system (WMS) ------------------------------------ */
.svc-wms__title {
    margin: 0 0 22px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    /* Sentence case, not the global uppercase h2 treatment. */
    text-transform: none;
    color: var(--color-dark);
}

.svc-wms__text {
    max-width: 100%;
    margin: 0 0 clamp(30px, 4vw, 44px);
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-wms__text strong {
    font-weight: 700;
    color: var(--color-dark);
}

.svc-wms__label {
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-dark);
}

/* Column-first flow: the first six benefits fill the left column, the rest
   the right, matching the reference reading order. */
.svc-wms__benefits {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 5px clamp(30px, 5vw, 90px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-wms__benefits li {
    display: flex;
    gap: 14px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.5;
}

.svc-wms__check {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-primary);
}

.svc-wms__check svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* --- Our Certifications (logos + captions) -------------------------------- */
.svc-certs {
    margin-bottom: 100px;
}

.svc-certs__intro {
    max-width: 100%;
    margin: 20px 0 clamp(40px, 5vw, 64px);
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-certs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
}

/* Logos span the full column and are centered within it (common baseline for
   varying logo heights); the caption below stays left-aligned. */
.svc-certs__logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 92px;
    margin-bottom: 24px;
}

.svc-certs__logo img {
    width: auto;
    /* Cap at 190px but never wider than the column (2-up on small phones). */
    max-width: min(190px, 100%);
    max-height: 92px;
    object-fit: contain;
}

.svc-certs__badge {
    display: inline-flex;
    align-items: center;
    /* Center within the 92px logo band (siblings baseline-align to the bottom). */
    align-self: center;
    padding: 8px;
    color: var(--color-white);
    background: var(--color-black);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

.svc-certs__caption {
    /* Narrower block, centered under the icon; text itself stays left-aligned. */
    margin: 0 auto;
    max-width: 220px;
    text-align: left;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
}

/* --- Expertise with tabs (dark section variant) --------------------------- */
.svc-tabs--dark {
    margin-block: clamp(30px, 4vw, 50px) 0;
}

/* Non-active tabs read white on the black background. */
.svc-tabs--dark .svc-tabs__tab {
    color: var(--color-white);
}

.svc-tabs--dark .svc-tabs__tab:hover {
    color: var(--color-brand-yellow);
}

/* Active tab: yellow label, brand-blue top/side border. Its fill matches the
   section background (#141414) so the 2px overlap hides the panel's top border
   under the tab — the tab reads as "open" into the panel. */
.svc-tabs--dark .svc-tabs__tab.is-active {
    color: var(--color-brand-yellow);
    border-color: var(--color-primary);
    background: #141414;
}

.svc-tabs--dark .svc-tabs__panel {
    border-color: var(--color-primary);
    background: transparent;
}

.svc-tabs--dark .svc-tabs__title {
    color: var(--color-white);
}

/* Intro/lead copy in the dark expertise section is pure white (not the default
   72%-opacity light lead) for full contrast on black. */
.svc-expertise .section-head__lead {
    color: var(--color-white);
}

.svc-tabs__prose p {
    margin: 0 0 1.2em;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-tabs__prose p:last-child {
    margin-bottom: 24px;
}

/* Reserve the tallest description's height so the CTA lands at the same height
   on every tab (no jump when switching). Must clear the longest tab (Asset
   Recovery) so its button doesn't drop below the others. Reset on mobile. */
.svc-tabs--dark .svc-tabs__prose {
    min-height: 260px;
}

/* --- Freight brokerage + heavy haul (dark card) --------------------------- */
.svc-freight {
    margin-inline: var(--hero-margin-inline);
    margin-block: clamp(56px, 8vw, 100px) 0;
    padding: 70px clamp(24px, 3vw, 56px);
    color: var(--color-white);
    background: #141414;
    border-radius: 24px;
}

.svc-freight__inner {
    max-width: var(--container);
    margin-inline: auto;
}

.svc-freight .section-head {
    margin-bottom: clamp(24px, 3vw, 40px);
}

/* Full-width white separator beneath each eyebrow, 40px below the line. */
.svc-freight .section-head__eyebrow {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-white);
}

.svc-freight__prose p {
    margin: 0 0 1.2em;
    max-width: 100%;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 22px;
}

.svc-freight__prose p:last-child {
    margin-bottom: 0;
}

.svc-freight__label {
    margin: 34px 0 24px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: var(--color-white);
}

/* Capabilities: two columns, brand-yellow down-right arrow markers. */
.svc-freight__caps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px clamp(30px, 5vw, 90px);
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.svc-freight__caps li {
    display: flex;
    gap: 14px;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.5;
}

.svc-freight__marker {
    flex: 0 0 auto;
    margin-top: -2px;
    color: var(--color-brand-yellow);
}

.svc-freight__marker svg {
    display: block;
    width: 18px;
    height: 18px;
}

.svc-freight__cta {
    display: inline-flex;
    margin-top: 8px;
}

/* Freight-brokerage button (direct child of the inner): 50px above, right-aligned. */
.svc-freight__inner > .svc-freight__cta {
    display: flex;
    width: fit-content;
    margin-top: 50px;
    margin-left: auto;
}

/* Heavy-haul button (direct child of the block): right-aligned. */
.svc-freight__block > .svc-freight__cta {
    display: flex;
    width: fit-content;
    margin-top: 40px;
    margin-left: auto;
}

/* Closing line inside a heavy-haul column, beneath its list (same body styling
   as the column intro). */
.svc-freight__col-closing {
    margin: 20px 0 0;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
}

/* Image between the freight and heavy-haul blocks. */
.svc-freight__media {
    margin: clamp(40px, 5vw, 64px) 0 90px;
}

.svc-freight__media img {
    width: 100%;
    max-height: 360px;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: 16px;
}

/* Heavy haul: two columns of yellow-checkmark lists. */
.svc-freight__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 4vw, 64px);
    margin: clamp(30px, 4vw, 44px) 0 40px;
}

.svc-freight__col-head {
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    text-transform: none;
    color: var(--color-white);
}

.svc-freight__col-intro {
    margin: 0 0 20px;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
}

.svc-freight__list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-freight__list li {
    display: flex;
    gap: 12px;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.4;
}

.svc-freight__check {
    flex: 0 0 auto;
    margin-top: -1px;
    color: var(--color-brand-yellow);
}

.svc-freight__check svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* --- Integrated services (four icon cards) -------------------------------- */
.svc-integrated__intro {
    margin-top: 20px;
}

.svc-integrated__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    margin-top: clamp(40px, 5vw, 64px);
}

/* Fixed 140x140 box so every icon is fully visible (contain) and the text below
   lines up across all four columns regardless of the icon's own proportions. */
.svc-integrated__icon {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 140px;
    height: 140px;
    max-width: 100%;
    margin-bottom: 28px;
}

.svc-integrated__icon img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.svc-integrated__title {
    /* Reserve two lines so every title is the same height and the copy below
       lines up across the four columns. */
    min-height: 2.3em;
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: none;
    color: var(--color-dark);
}

@media (max-width: 782px) {
    .svc-integrated__title {
        min-height: 0;
        line-height: 21px;
    }
}

.svc-integrated__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

.svc-integrated__title a:hover,
.svc-integrated__title a:focus-visible {
    color: var(--color-primary);
}

.svc-integrated__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
}

/* Right-aligned Contact Us button below the cards. */
.svc-integrated__cta {
    display: flex;
    width: fit-content;
    margin-top: clamp(30px, 4vw, 50px);
    margin-left: auto;
}

/* Logistics new-section responsive reflow. */
@media (max-width: 1024px) {
    .svc-integrated__grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(30px, 4vw, 48px);
    }
}

/* Residential "Who is this for": one card per row with black dividers on mobile. */
@media (max-width: 782px) {
    .svc-integrated__grid--stacked {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .svc-integrated__grid--stacked .svc-integrated__card {
        padding-block: 30px;
        border-top: 1px solid var(--color-black);
    }

    .svc-integrated__grid--stacked .svc-integrated__card:first-child {
        padding-top: 0;
        border-top: 0;
    }

    /* Larger icons on mobile. */
    .svc-integrated__grid--stacked .svc-integrated__icon {
        width: 210px;
        height: 210px;
    }
}

@media (max-width: 860px) {
    .svc-freight__caps,
    .svc-freight__cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 782px) {
    .svc-freight {
        margin-block: 50px;
        padding: 50px 20px;
    }

    .svc-freight__caps {
        gap: 10px;
    }

    /* Nudge the list icons down 5px on mobile (from -2px / -1px on desktop). */
    .svc-freight__marker {
        margin-top: 3px;
    }

    .svc-freight__check {
        margin-top: 4px;
    }

    /* Talk-to-an-Expert and Contact Us buttons align left on mobile. */
    .svc-freight__inner > .svc-freight__cta,
    .svc-freight__block > .svc-freight__cta,
    .svc-integrated__cta {
        margin-left: 0;
    }

    .svc-integrated__icon {
        width: 120px;
        height: 120px;
    }
}

/* --- Individuals: dark section title + header layout ---------------------- */
.svc-freight__title {
    margin: 0;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

/* "Our Services"/"Our Features": title on the left sized to its own text so the
   content (prose or list) sits right beside it, not across a wide empty column. */
.svc-freight__header {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: clamp(30px, 3.5vw, 56px);
    align-items: start;
    margin-bottom: clamp(32px, 4vw, 48px);
}

/* Three-column, column-first checkmark list (Our Services). Narrower column gap
   than the base so each item stays on a single line. */
.svc-freight__caps--services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: clamp(16px, 1.8vw, 32px);
}

/* Two-column, column-first arrow list (Our Features) — both columns share the
   header's right cell so title + both list columns sit in a single row. */
.svc-freight__caps--features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    margin-bottom: 0;
}

/* Taller services list (dealer page: 18 items → 6 rows per column). Pairs with
   .svc-freight__caps--services; the mobile resets below still reflow it. Tighter
   column gap widens each column so the longest item stays on one line. */
.svc-freight__caps--tall {
    grid-template-rows: repeat(6, auto);
    column-gap: clamp(12px, 1.2vw, 0px);
}

.svc-freight__caps--tall li {
    gap: 10px;
}

/* Taller services list (OEM page: 21 items → 7 rows per column). */
.svc-freight__caps--tall7 {
    grid-template-rows: repeat(7, auto);
    column-gap: clamp(12px, 1.2vw, 20px);
}

.svc-freight__caps--tall7 li {
    gap: 10px;
}

/* Dealer/OEM dark-section sub-blocks: extra breathing room above each. */
.svc-freight__header--gap,
.svc-freight__fleet--gap {
    margin-top: clamp(56px, 7vw, 100px);
}

/* --- OEM: "Confidence With McCollister's" partnership section -------------- */
.svc-oemconf__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
    margin-top: clamp(32px, 4vw, 52px);
}

.svc-oemconf__lead {
    margin: 0 0 28px;
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    color: var(--color-dark);
}

.svc-oemconf__item {
    margin-bottom: 26px;
}

.svc-oemconf__item:last-child {
    margin-bottom: 0;
}

.svc-oemconf__item-title {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
}

/* Non-mobile type scale for the OEM confidence section. */
@media (min-width: 783px) {
    .svc-oemconf__lead {
        font-size: 30px;
        font-weight: 600;
        line-height: 36px;
        text-transform: capitalize;
    }

    .svc-oemconf__item-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 22px;
        text-transform: capitalize;
    }
}

.svc-oemconf__item-text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 22px;
}

.svc-oemconf__media {
    position: sticky;
    top: 40px;
}

.svc-oemconf__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

@media (max-width: 782px) {
    .svc-oemconf__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .svc-oemconf__media {
        position: static;
        order: -1;
    }
}

.svc-freight__block .svc-freight__title {
    margin-top: clamp(44px, 6vw, 80px);
    margin-bottom: clamp(30px, 3.4vw, 40px);
}

/* Our Features header: top spacing lives on the header so the title aligns with
   the top of the list beside it (not offset by its own top margin). */
.svc-freight__header--features {
    margin-top: clamp(175px, 6vw, 175px);
    margin-bottom: clamp(136px, 6vw, 136px);
}

.svc-freight__header--features .svc-freight__title {
    margin-top: 0;
}

/* "Our Fleet": image on the left sized to its content (so it sits toward the
   left and the text column widens), title + prose on the right. Column gap
   matches the Services/Features header gap. */
.svc-freight__fleet {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: clamp(30px, 3.5vw, 56px);
}

.svc-freight__fleet-media img {
    display: block;
    max-height: 457px;
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

.svc-freight__fleet .svc-freight__title {
    margin-top: 0;
}

/* --- Individuals: service-level packages ---------------------------------- */
.svc-levels__packages-title {
    margin: clamp(44px, 6vw, 80px) 0 0;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.svc-packages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    margin-top: 65px;
}

.svc-package {
    padding-inline: clamp(20px, 2.4vw, 40px);
    border-left: 1px solid var(--color-black);
}

.svc-package:first-child {
    padding-left: 0;
    border-left: 0;
}

.svc-package__title {
    margin: 0 0 30px;
    font-family: var(--font-heading);
    /* Cap at 40px but scale down so the single word never overflows its column. */
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    /* Outlined type: transparent fill with a blue stroke. */
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
    text-stroke: 2px var(--color-primary);
}

.svc-package__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-package__list li {
    display: flex;
    gap: 14px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: 600;
    line-height: 1.5;
}

.svc-package__check {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-primary);
}

.svc-package__check svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Second quote banner sits inline below the packages in the service-levels
   section — no hero overlap. Scoped to .svc-levels so it overrides the base
   -70px pull with a positive 60px top margin. */
.svc-levels .svc-quote {
    max-width: 1000px;
    margin: 60px auto 0;
    padding-inline: 0;
}

/* Individuals responsive reflow. */
@media (max-width: 860px) {
    .svc-freight__header {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .svc-freight__caps--services {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

@media (max-width: 782px) {
    .svc-freight__caps--services,
    .svc-freight__caps--features {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        gap: 10px;
    }

    .svc-freight__header--features {
        margin-top: 70px;
        margin-bottom: 70px;
    }

    .svc-packages {
        grid-template-columns: 1fr;
        gap: 62px;
    }

    .svc-package {
        padding-inline: 0;
        border-left: 0;
    }

    .svc-package__title {
        font-size: 40px;
        text-align: left;
    }

    .svc-freight__fleet {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- Aerospace: two-column prose body ------------------------------------- */
.svc-prose__cols {
    column-count: 2;
    column-gap: clamp(30px, 4vw, 64px);
    margin-top: 1.2em;
}

.svc-prose__cols p {
    margin: 0;
}

/* Right-aligned CTA under a section's copy (left-aligned on mobile). */
.svc-cta-right {
    display: flex;
    width: fit-content;
    margin-top: clamp(24px, 3vw, 40px);
    margin-left: auto;
}

/* --- Aerospace: animated stat counters ------------------------------------ */
.svc-stats {
    margin-inline: var(--hero-margin-inline);
    margin-block: clamp(50px, 7vw, 90px);
}

.svc-stats__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(48px, 8vw, 110px);
    max-width: var(--container);
    margin-inline: auto;
}

.svc-stat {
    text-align: center;
}

.svc-stat__number {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 80px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-primary);
}

.svc-stat__label {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

/* --- Aerospace: full-width image band ------------------------------------- */
.svc-media-band {
    max-width: var(--container);
    margin: clamp(50px, 7vw, 90px) auto 0;
}

.svc-media-band img {
    width: 100%;
    max-height: 520px;
    aspect-ratio: 1000 / 408;
    object-fit: cover;
    border-radius: 24px;
}

/* --- Aerospace: capabilities checklist (three columns) -------------------- */
/* Tighter top (40px) since the image band sits directly above it. */
.svc-checklist-section {
    padding-block-start: 40px;
}

.svc-checklist__intro {
    max-width: 100%;
    margin: 20px 0 clamp(36px, 4vw, 50px);
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-checklist__list {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 12px clamp(30px, 5vw, 80px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-checklist__list li {
    display: flex;
    gap: 14px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.4;
}

.svc-checklist__check {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-primary);
}

.svc-checklist__check svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* --- Aerospace: Confidence (blue box + black box + image) ------------------ */
.svc-confidence {
    margin-inline: var(--hero-margin-inline);
    margin-block: clamp(50px, 7vw, 90px) 0;
}

.svc-confidence__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    max-width: var(--container);
    margin-inline: auto;
}

.svc-confidence__left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.svc-confidence__title-box {
    padding: clamp(30px, 3.4vw, 44px);
    background: var(--color-primary);
    border-radius: 24px;
}

.svc-confidence__title-box h2 {
    margin: 0;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    letter-spacing: -1.8px;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (max-width: 782px) {
    .svc-confidence__title-box h2 {
        font-size: 30px;
        line-height: 1.1;
    }
}

.svc-confidence__text-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 3vw, 40px);
    background: #141414;
    border-radius: 24px;
}

.svc-confidence__text-box p {
    margin: 0 0 1.2em;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.75;
}

.svc-confidence__text-box p:last-child {
    margin-bottom: 0;
}

.svc-confidence__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* Aerospace responsive reflow. */
@media (max-width: 960px) {
    .svc-checklist__list {
        grid-template-rows: repeat(9, auto);
    }
}

@media (max-width: 860px) {
    .svc-confidence__inner {
        grid-template-columns: 1fr;
    }

    .svc-confidence__media img {
        aspect-ratio: 3 / 2;
        height: auto;
    }
}

@media (max-width: 782px) {
    .svc-prose__cols {
        column-count: 1;
    }

    .svc-cta-right {
        margin-left: 0;
    }

    .svc-checklist__list {
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* --- Auto Transport: quote banner (external embed, overlaps hero) --------- */
.svc-quote {
    position: relative;
    z-index: 3;
    max-width: 1000px;
    margin: -70px auto 0;
    padding-inline: var(--hero-margin-inline);
}

.svc-quote__inner {
    overflow: hidden;
    background: var(--color-white);
    border-radius: 25px;
    box-shadow: 0 24px 60px rgba(0, 31, 63, 0.14);
}

.svc-quote__inner iframe {
    display: block;
    width: 100%;
    min-height: 126px;
    border: 0;
    border-radius: 25px;
}

/* Below desktop the hero title can wrap to two lines, pushing the buttons down.
   Mid widths (1400–985px) only need a gentler -30px overlap; smaller screens
   drop the overlap entirely for a positive 50px so the embed never covers the
   last button. */
@media (min-width: 985px) and (max-width: 1400px) {
    .svc-quote {
        margin-top: -30px;
    }
}

@media (max-width: 984px) {
    .svc-quote {
        margin-top: 50px;
    }
}

@media (max-width: 782px) {
    /* Levels-section inline quote runs edge-to-edge (padding-inline: 0) on
       desktop; on mobile give it side padding so the embed's Delivery field
       isn't clipped at the rounded edge. */
    .svc-levels .svc-quote {
        padding-inline: 20px;
    }
}

/* --- Auto Transport: feature icons row ------------------------------------ */
.svc-features-row {
    max-width: var(--container);
    margin: clamp(40px, 6vw, 70px) auto;
    padding-inline: var(--hero-margin-inline);
}

.svc-features-row__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 28px);
}

.svc-feature {
    text-align: center;
}

.svc-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    margin-bottom: 20px;
}

.svc-feature__icon img {
    width: auto;
    max-width: 100%;
    max-height: 132px;
    object-fit: contain;
}

.svc-feature__title {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    /* Shrinks on narrower 5-column widths; nowrap keeps it on one line. */
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-dark);
}

.svc-feature__sub {
    margin: 0;
    font-size: 14px;
    font-weight: var(--body-font-weight);
    color: var(--color-text);
}

/* Feature titles/subs across the pages that use them (individuals, dealers,
   OEMs, auto transport) step up on mobile. Placed after both base rules so it
   wins the equal-specificity cascade. */
@media (max-width: 782px) {
    .svc-feature__title {
        font-size: 13px;
        line-height: 13px;
    }

    .svc-feature__sub {
        font-size: 16px;
        font-weight: 500;
        line-height: 22.4px;
    }
}

/* --- Auto Transport: intro paragraph -------------------------------------- */
.svc-autotransport-intro {
    padding-block-start: 40px;
}

.svc-autotransport-intro__text {
    max-width: 100%;
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}

/* Non-mobile: lighter weight, tighter tracking/leading. */
@media (min-width: 783px) {
    .svc-autotransport-intro__text {
        font-size: 18px;
        font-weight: 600;
        line-height: 21.6px;
        letter-spacing: -0.54px;
    }
}

/* --- Auto Transport: tabs (sentence-case titles, multi-paragraph body) ----- */
/* 30px above the tab buttons (instead of the default 100px). */
.svc-tabs--auto {
    margin-block: 30px 0;
}

.svc-tabs--auto .svc-tabs__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.01em;
    text-transform: capitalize;
}

/* 30px above the Explore button in the Auto Transport tab panels. */
.svc-tabs--auto .svc-tabs__cta {
    margin-top: 30px;
}

/* Multi-paragraph tab descriptions (only affects tabs whose desc wraps <p>). */
.svc-tabs__desc p {
    margin: 0 0 1em;
}

.svc-tabs__desc p:last-child {
    margin-bottom: 0;
}

/* In the mobile accordion the panel title is normally hidden (label == title);
   Auto Transport's label differs from its title, so keep the title visible. */
@media (max-width: 1024px) {
    .svc-tabs-section .svc-tabs--auto .svc-tabs__title {
        display: block;
        margin: 20px 0 0;
    }
}

/* --- Auto Transport: stats heading ---------------------------------------- */
.svc-stats__head {
    margin: 0 0 clamp(30px, 4vw, 50px);
    text-align: center;
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* --- Auto Transport: why customers choose us ------------------------------ */
.svc-whychoose {
    padding-block-start: 0;
}

/* Reuses the features grid, but with a wider landscape image that pushes the
   list content a little further right (scoped so warehousing stays square). */
.svc-whychoose .svc-features__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.svc-whychoose .svc-features__media img {
    aspect-ratio: 3 / 2;
}

.svc-whychoose__title {
    /* Size/weight come from the global h2 rule (60px / 400, 32px on mobile). */
    margin: 0 0 26px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--color-dark);
}

.svc-whychoose__list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-whychoose__list li {
    display: flex;
    gap: 14px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.5;
}

.svc-whychoose__check {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--color-primary);
}

.svc-whychoose__check svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* --- Auto Transport: brand logo strip (seamless infinite marquee) ---------- */
.svc-logos {
    margin: 100px 20px;
    overflow: hidden;
}

/* Two identical groups scroll as one loop (translateX 0 → -50%). Pauses when
   the strip is hovered/focused. */
/* The track is scrolled by JS (requestAnimationFrame) rather than a CSS
   animation — rAF is suspended while the tab is hidden, so returning to the tab
   never produces a catch-up jump. components.js → initMarquee(). */
.svc-logos__track {
    display: flex;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.svc-logos__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.svc-logos__group img {
    flex: 0 0 auto;
    width: auto;
    height: 44px;
    margin-inline: clamp(30px, 4vw, 60px);
    object-fit: contain;
}

/* Lucid is a wide wordmark — shrink it so it isn't oversized next to the rest. */
.svc-logos__group img[src*="lucid"] {
    height: 18px;
}

/* Larger logo variant (Finance & Banking). The source logos are identical
   940×788 canvases with heavy transparent padding, so `contain` makes the mark
   look tiny. Cover-crop a centered landscape window instead, trimming the top/
   bottom padding so the actual logo reads ~80px tall. */
.svc-logos--lg .svc-logos__group img {
    height: 80px;
    aspect-ratio: 2.2 / 1;
    object-fit: cover;
    object-position: center;
    /* Tighter gap than the base marquee (~20px less between logos). */
    margin-inline: clamp(18px, 3vw, 50px);
}

@keyframes svc-logos-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-logos__track {
        animation: none;
    }
}

/* Auto Transport responsive reflow. */
@media (max-width: 960px) {
    .svc-features-row__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 20px;
    }
}

@media (max-width: 782px) {
    .svc-features-row__grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .svc-logos__group img {
        height: 36px;
    }
}

/* --- Aviation: Our Capabilities (image + checklist) ----------------------- */
.svc-avcaps__intro {
    margin-top: 20px;
}

.svc-avcaps__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 100px);
    align-items: center;
    margin-top: clamp(32px, 4vw, 52px);
}

.svc-avcaps__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

/* Top-align the columns when the content list is taller than the square image
   (Final-Mile & White-Glove page). */
.svc-avcaps__grid--top {
    align-items: start;
}

/* Content on the left, image on the right (Residential capabilities). */
.svc-avcaps__grid--reverse .svc-avcaps__media {
    order: 2;
}

/* Image keeps its natural aspect ratio rather than a forced square
   (Residential "Our teams focus on" and "Moving beyond" landscape photos). */
.svc-avcaps__grid--free {
    margin-top: 0;
}

.svc-avcaps__grid--free .svc-avcaps__media img {
    aspect-ratio: auto;
}

/* Capped-height media (Finance & Banking capabilities): the tall portrait image
   maxes at 700px and keeps its ratio, centered in its column. */
.svc-avcaps__media--cap700 img {
    max-height: 700px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

/* Blue emphasised lead above a capabilities list (Residential). */
.svc-avcaps__lead-blue {
    margin: 20px 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

/* "Our teams focus on" sits close to the overview above it (50px total). */
.svc-teams {
    padding-block-start: 50px;
}

/* "Moving beyond" heading sits above its prose. */
.svc-beyond__title {
    margin-bottom: 20px;
}

/* Closing paragraph after the dark checklist (Residential confidence). */
.svc-freight__prose--after-list {
    margin-top: clamp(24px, 3vw, 34px);
}

/* Sub-section (h3) title under a section's h2. Proper case comes straight from
   the source text (text-transform: none, not the inherited heading uppercase). */
.svc-avcaps__list-title {
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.9px;
    text-transform: none;
    color: var(--color-dark);
}

/* Labelled list with divider lines (Final-Mile & White-Glove capabilities). */
.svc-fmlist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-fmlist__item {
    padding: 18px 0;
    border-top: 1px solid var(--color-black);
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
}

.svc-fmlist__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.svc-fmlist__item:last-child {
    padding-bottom: 0;
}

.svc-fmlist__item strong {
    color: var(--color-dark);
    font-weight: 700;
}

.svc-avcaps__list {
    display: grid;
    gap: 14px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.svc-avcaps__list li {
    display: flex;
    gap: 14px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.5;
}

.svc-avcaps__check {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-primary);
}

.svc-avcaps__check svg {
    display: block;
    width: 16px;
    height: 16px;
}

.svc-avcaps__text {
    margin: 0 0 28px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 22px;
}

.svc-avcaps__cta {
    display: inline-flex;
}

/* --- Commercial Relocation: alternating image/content capability blocks ---- */
.svc-capblocks {
    display: grid;
    gap: clamp(48px, 7vw, 96px);
    margin-top: 20px;
}

.svc-capblock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 100px);
    align-items: center;
}

/* Even blocks flip the image to the right (image column reordered). */
.svc-capblock:nth-child(even) .svc-capblock__media {
    order: 2;
}

.svc-capblock__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

.svc-capblock__title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: lowercase;
    color: var(--color-dark);
}

.svc-capblock__title::first-letter {
    text-transform: uppercase;
}

.svc-capblock__text {
    margin: 0 0 20px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 22px;
}

.svc-capblock__list-title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    text-transform: lowercase;
    color: var(--color-dark);
}

.svc-capblock__list-title::first-letter {
    text-transform: uppercase;
}

.svc-capblock__list {
    display: grid;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.svc-capblock__list li {
    display: flex;
    gap: 14px;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.5;
}

.svc-capblock__check {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--color-primary);
}

.svc-capblock__check svg {
    display: block;
    width: 16px;
    height: 16px;
}

.svc-capblock__list li:last-child + .svc-capblock__text,
.svc-capblock__content .svc-capblock__text:last-child {
    margin-bottom: 0;
}

/* Technical services: right-aligned Explore button. */
.svc-techsvc .svc-cta-right {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-top: clamp(30px, 3.5vw, 44px);
}

@media (max-width: 782px) {
    .svc-capblock {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* Image always on top when stacked, regardless of desktop order. */
    .svc-capblock:nth-child(even) .svc-capblock__media {
        order: -1;
    }

    .svc-techsvc .svc-cta-right {
        margin-left: 0;
    }
}

/* --- Fitness: capabilities subtitle + closing + dark sub-headings ---------- */
.svc-avcaps__subtitle {
    margin: 18px 0 0;
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-dark);
}

.svc-avcaps__subtitle + .svc-avcaps__intro {
    margin-top: 20px;
}

/* Fitness: the capabilities subtitle matches the global section h3 styling
   used on the other avcaps pages (aviation/final-mile) — 30px/600/-0.9px, with
   a 30px line-height on mobile (see the mobile rule further down). */
.page-fitness .svc-avcaps__subtitle {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.9px;
    text-transform: none;
}

.svc-avcaps__closing {
    margin-top: clamp(30px, 4vw, 44px);
}

/* Fitness capabilities image capped at 635×635, centered in its column. */
.svc-avcaps__media--635 img {
    max-width: 635px;
    margin-inline: auto;
}

/* Bold white sub-headings above the yellow checklists (dark section). */
.svc-freight__sub {
    margin: clamp(30px, 4vw, 44px) 0 20px;
    font-family: var(--font-heading);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
}

/* Heavy-lift CTA prompt: button right-aligned under the copy. */
.svc-heavylift__cta {
    display: flex;
    width: fit-content;
    margin-top: clamp(30px, 3.5vw, 44px);
    margin-left: auto;
}

@media (max-width: 782px) {
    .svc-heavylift__cta {
        margin-left: 0;
    }
}

/* Fitness dark section: the two "partners who" / "clients choose" groups sit
   side by side, each with its own heading, checklist and closing paragraph. */
.svc-fitconf__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
    margin-top: clamp(20px, 3vw, 40px);
}

/* First heading in each column shouldn't push down past the other. */
.svc-fitconf__col > .svc-freight__sub:first-child {
    margin-top: clamp(24px, 3vw, 36px);
}

@media (max-width: 782px) {
    .svc-fitconf__cols {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* --- Aviation: dark Confidence (image band + title + paras) ---------------- */
.svc-avconf__band {
    margin-bottom: clamp(30px, 4vw, 48px);
}

.svc-avconf__band img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

.svc-avconf__title {
    margin-bottom: clamp(24px, 3vw, 36px);
}

/* Two white sub-columns beneath the intro (Technical Services confidence). */
.svc-avconf__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Two shared rows (title, body) so the body text aligns across both columns
       even when one title wraps to two lines — see the subgrid on the column. */
    grid-template-rows: auto auto;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 0;
    margin-top: clamp(36px, 4.5vw, 60px);
}

.svc-avconf__col {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
}

.svc-avconf__col-title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.9px;
    text-transform: none;
    color: var(--color-white);
}

.svc-avconf__col p {
    margin: 0;
    color: var(--color-white);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 22px;
}

@media (max-width: 782px) {
    .svc-avconf__cols {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 32px;
    }

    /* Stacked: no cross-column alignment needed, so drop the subgrid. */
    .svc-avconf__col {
        display: block;
        grid-row: auto;
    }
}

/* FAQ titles are single-line on desktop; any <br> only takes effect on mobile
   (e.g. Technical Services → "Technical" / "Services"). */
@media (min-width: 783px) {
    .svc-faqs .section-head__title br {
        display: none;
    }
}

@media (max-width: 782px) {
    .svc-avcaps__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .svc-avcaps__list-title,
    .svc-avconf__col-title,
    .page-fitness .svc-avcaps__subtitle {
        line-height: 30px;
    }
}

/* --- About Us -------------------------------------------------------------- */
/* "Watch our video" button pinned to the hero's bottom-right. */
.svc-hero__video {
    position: absolute;
    right: clamp(20px, 3vw, 48px);
    bottom: clamp(20px, 3vw, 40px);
    z-index: 4;
}

@media (max-width: 782px) {
    .svc-hero__video {
        right: var(--hero-margin-inline);
        bottom: 20px;
    }
}

/* Who We Serve: industry banner cards. First card spans full width, the rest
   fall into a 2-up grid. */
.svc-serve {
    padding-block-start: 70px;
}

.svc-serve__intro {
    margin-top: 20px;
}

/* Asymmetric brick grid: Aerospace tall on the left, then wide/narrow pairs.
   4 columns (left column wider); 2 rows sized by grid-auto-rows. */
.svc-serve__grid {
    display: grid;
    /* Aerospace (col 1) and Fitness (cols 2-3) sit a little wider than the
       Technical/Warehousing columns. */
    grid-template-columns: 1.5fr .8fr .8fr 1fr;
    grid-auto-rows: clamp(200px, 22vw, 300px);
    gap: clamp(16px, 1.8vw, 24px);
    margin-top: clamp(32px, 4vw, 52px);
}

.svc-serve__card:nth-child(1) { grid-column: 1;     grid-row: 1 / 3; } /* Aerospace */
.svc-serve__card:nth-child(2) { grid-column: 2 / 4; grid-row: 1; }     /* Fitness */
.svc-serve__card:nth-child(3) { grid-column: 4;     grid-row: 1; }     /* Technical */
.svc-serve__card:nth-child(4) { grid-column: 2;     grid-row: 2; }     /* Auto Transport */
.svc-serve__card:nth-child(5) { grid-column: 3 / 5; grid-row: 2; }     /* Warehousing */

.svc-serve__card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: clamp(18px, 1.8vw, 28px);
    border-radius: 18px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    isolation: isolate;
}

/* Soft top scrim so the top-left label stays legible over bright photos. */
.svc-serve__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 42%);
}

/* Brand-blue gradient that fades in on hover/focus (same as the homepage
   industries cards). */
.svc-serve__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 105, 203, 0.85) 0%,
        rgba(0, 105, 203, 0.55) 35%,
        rgba(0, 105, 203, 0.15) 65%,
        rgba(0, 105, 203, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.65s ease;
    pointer-events: none;
}

.svc-serve__card:hover::before,
.svc-serve__card:focus-visible::before {
    opacity: 1;
}

.svc-serve__label {
    position: relative;
    z-index: 3;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    color: var(--color-white);
}

/* Tablet: 2 columns, each card its own row. */
@media (max-width: 1024px) {
    .svc-serve__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: clamp(180px, 30vw, 260px);
    }

    .svc-serve__card:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
    .svc-serve__card:nth-child(2) { grid-column: 1 / -1; grid-row: auto; }
    .svc-serve__card:nth-child(3),
    .svc-serve__card:nth-child(4),
    .svc-serve__card:nth-child(5) { grid-column: auto; grid-row: auto; }
}

@media (max-width: 782px) {
    .svc-serve__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 139px;
        margin-top: 70px;
    }

    .svc-serve__card:nth-child(n) {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* Centered labels on mobile (with a fuller scrim behind them). */
    .svc-serve__card {
        align-items: center;
        justify-content: center;
    }

    .svc-serve__card::after {
        background: rgba(0, 0, 0, 0.28);
    }
}

/* History timeline: reuses the .svc-logos marquee (initMarquee → rAF-driven,
   pauses on hover) but with year/divider/title/description cards. */
.svc-history-slider {
    margin-top: 80px;
    /* Match the other sections' width; the scrolling slides are clipped to this
       box (overflow: hidden on .svc-logos) rather than bleeding across the body.
       Mobile keeps its own 10px side margin below. */
    max-width: var(--container);
    margin-inline: auto;
}

.svc-history-slider .svc-logos__group {
    align-items: stretch;
}

.svc-history-card {
    flex: 0 0 auto;
    width: clamp(300px, 32vw, 420px);
    margin-inline: clamp(24px, 3.4vw, 56px);
}

.svc-history-card__year {
    margin: 0 0 25px;
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.svc-history-card__divider {
    margin: 0;
    border: 0;
    border-top: 2px solid #111 !important;
}

.svc-history-card__title {
    margin: 15px 0 14px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-transform: none;
    color: var(--color-dark);
}

.svc-history-card__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
}

/* History intro CTA: right-aligned button below the timeline. */
.svc-history__cta {
    display: flex;
    width: fit-content;
    margin-top: clamp(30px, 3.5vw, 44px);
    margin-left: auto;
}

@media (max-width: 782px) {
    .svc-history-slider {
        margin-inline: 10px;
    }

    .svc-history-card__year {
        font-size: 30px;
        line-height: 30px;
    }

    .svc-history__cta {
        margin-left: 0;
    }
}

/* Separation below the "More About" icon cards before the CTA cards, matching
   the pre-CTA spacing used elsewhere (About page ends on .svc-integrated). */
.svc-integrated:has(+ .cta-cards) {
    margin-bottom: clamp(56px, 8vw, 90px);
}

/* Video modal (Vimeo). */
.svc-video[hidden] {
    display: none;
}

.svc-video {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.svc-video__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}

.svc-video__box {
    position: relative;
    width: min(90vw, 1000px);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
}

.svc-video__frame,
.svc-video__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.svc-video__close {
    position: absolute;
    top: -46px;
    right: 0;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 24px;
    line-height: 36px;
    cursor: pointer;
}

/* --- Our History ----------------------------------------------------------- */
.hist-head {
    padding-block-end: 0;
}

.hist-head__crumb {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.hist-head__title {
    margin: 0;
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: 0.98;
    letter-spacing: var(--h1-letter-spacing);
    text-transform: uppercase;
    color: var(--color-dark);
}

/* --- Locations page ------------------------------------------------------- */
/* Plain page header (no hero): breadcrumb + title + lead. Shorter top space
   than the standard section (50px, not the ~100px clamp). */
.loc-head {
    padding-block-start: 50px;
    padding-block-end: 0;
}

/* Font size/weight come from the global eyebrow token rule (components.css). */
.loc-head__crumb {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    color: var(--color-text);
}

.loc-head__title {
    margin: 0;
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: 0.98;
    letter-spacing: var(--h1-letter-spacing);
    text-transform: uppercase;
    color: var(--color-dark);
}

.loc-head__lead {
    margin: clamp(20px, 2.4vw, 30px) 0 0;
    max-width: 640px;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
    color: var(--color-text);
}

/* Title line breaks: desktop breaks after "Footprint,"; mobile breaks after
   "National" and "Local" (see the mobile override below). */
.loc-br--m {
    display: none;
}

/* Store-locator frame — constrains width and rounds the plugin's corners to
   match the live site; the ASL plugin renders the blue search bar, list, and
   map inside. */
.loc-locator {
    padding-block-start: clamp(32px, 5vw, 60px);
    padding-inline: var(--hero-margin-inline);
}

.loc-locator__inner {
    max-width: var(--container);
    margin-inline: auto;
}

.loc-locator__box {
    border-radius: 25px;
    overflow: hidden;
    isolation: isolate;
}

/* Locations list: drop the dashed focus outline (and the native focus ring that
   flashes on click) plus the grey highlight the plugin shows when
   selecting/switching between locations. The extra .sl-list raises specificity
   above the plugin's own `!important` rule, which loads after the theme CSS. */
#asl-storelocator.asl-cont .sl-list li.sl-item:focus,
#asl-storelocator.asl-cont .sl-list li.sl-item:focus-visible,
#asl-storelocator.asl-cont .sl-list li.sl-item:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Selected location: darker grey highlight (plugin's own --sl-highlighted is a
   lighter #F7F7F7, so set #f1f1f1 explicitly). */
#asl-storelocator.asl-cont .sl-main-cont .asl-panel-inner .sl-main-cont-box ul.sl-list li.sl-item.highlighted {
    background-color: #f1f1f1 !important;
}

/* Branded corner radius on the "Directions" button in each location row. */
#asl-storelocator.asl-cont .sl-main-cont .asl-panel-inner .sl-main-cont-box ul.sl-list li.sl-item .sl-addr-sec .sl-act-btns .s-direction {
    border-radius: 15px !important;
}

/* Thinner, white underline under the ASL "Search Location" label (plugin
   default is a heavy 3px black line). Matches the plugin's own selector so it
   overrides cleanly. */
#asl-storelocator.asl-cont.asl-template-1 .asl-wrapper .Filter_section .search_filter label {
    border-bottom: 1px solid #fff !important;
}

/* Narrow the whole info box (not just the inner content) so the library's
   close button — an <img align=right> anchored to the box's right edge — sits
   at the top-right of the visible box. Re-center it over the marker: the
   library uses margin-left: -width/2 (-160 for its 320px default), so a 224px
   box needs -112px. */
#asl-storelocator.asl-cont .infoBox {
    width: 224px !important;
    margin-left: -112px !important;
}

/* Branded rounded corners on the map info-window box (plugin ships it square).
   The box is a title <h3> stacked on the .infowindowContent body, so round the
   header's top corners and the body's bottom corners to form one rounded box. */
#asl-storelocator.asl-cont .infoBox h3 {
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
    /* Match the narrowed body width (box-sizing so padding stays inside). */
    width: 224px !important;
    box-sizing: border-box !important;
}

#asl-storelocator.asl-cont .infoBox .infowindowContent {
    border-radius: 0 0 18px 18px !important;
    /* 30% narrower than the plugin's default 320px box; border-box so it lines
       up exactly with the header (which is also border-box at 224px). */
    width: 224px !important;
    box-sizing: border-box !important;
}

/* Restore bullet markers on the description list (it's a real <ul><li>, but the
   list reset strips the dots) and pull it up a little closer to the title. */
#asl-storelocator.asl-cont .infoBox .infowindowContent ul {
    list-style: disc !important;
    margin: -10px 0 0 !important;
    padding-left: 20px !important;
}

#asl-storelocator.asl-cont .infoBox .infowindowContent ul li {
    display: list-item !important;
    list-style: disc !important;
}

@media (max-width: 782px) {
    /* Smaller title and a 3-line break pattern on phones. */
    .loc-head__title {
        font-size: 35px;
        font-weight: 600;
        line-height: 40px;
    }

    .loc-br--d {
        display: none;
    }

    .loc-br--m {
        display: inline;
    }
}

/* Interactive timeline card. */
.hist-timeline {
    padding-top: clamp(30px, 4vw, 48px);
    padding-bottom: 0;
    padding-inline: var(--hero-margin-inline);
}

/* Total gap above "Today and Beyond" = 80px (no extra from the timeline). */
.hist-today {
    padding-block-start: 80px;
}

.hist-timeline__inner {
    max-width: var(--container);
    margin-inline: auto;
}

.hist-slider {
    position: relative;
    height: clamp(440px, 46vw, 675px);
    border-radius: 25px;
    overflow: hidden;
    background: #101418;
    isolation: isolate;
    /* Shared gap between the year rail and the copy. The divider sits at half
       of it and the copy is inset by the full amount, so the line stays
       centered with equal padding either side as the gap flexes on laptops. */
    --hist-gap: clamp(34px, 4.5vw, 78px);
}

/* Vertical track: all slides stacked in a column; JS translates it by
   -index*100% so the active year slides up/down into view. */
.hist-slider__stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.hist-slider__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Per-slide framing so subjects sit correctly in the crop. */
.hist-slider__slide[data-hist-slide="0"] {
    /* 1945: shift framing up so the person sits a little higher. */
    background-position: center 38%;
}

.hist-slider__slide[data-hist-slide="1"] {
    /* 1955: shift framing down so the head lands mid-slide. */
    background-position: center 22%;
}

.hist-slider__slide[data-hist-slide="2"] {
    /* 1965: shift framing down so the woman's head sits near the title's top line. */
    background-position: center 20%;
}

.hist-slider__slide[data-hist-slide="8"] {
    /* 2025: shift the framing down so the subject's head shows. */
    background-position: center 18%;
}

/* Dark wash — heavier on the left where the year nav + copy sit. */
.hist-slider__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(12, 15, 18, 0.88) 0%,
        rgba(12, 15, 18, 0.66) 42%,
        rgba(12, 15, 18, 0.25) 80%,
        rgba(12, 15, 18, 0.15) 100%
    );
}

.hist-slider__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-width: 1000px;
    /* Left inset = year rail right edge (nav pad + ~90px button) + full gap, so
       the copy always clears the divider by gap/2. */
    padding: clamp(40px, 5vw, 70px) clamp(40px, 5vw, 70px) clamp(40px, 5vw, 70px)
        calc(90px + clamp(30px, 4vw, 48px) + var(--hist-gap));
    color: var(--color-white);
}

.hist-slider__eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.8);
}

.hist-slider__title {
    margin: 0 0 22px;
    font-family: var(--font-heading);
    font-size: clamp(32px, 4.2vw, 60px);
    font-weight: 500;
    line-height: 72px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

.hist-slider__text {
    margin: 0;
    max-width: 600px;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}

/* Year navigation — vertical list pinned to the left, arrows at the bottom. */
.hist-slider__nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: clamp(24px, 3vw, 48px) 0 clamp(24px, 3vw, 48px) clamp(30px, 4vw, 48px);
}

/* Vertical divider centered in the gap between the year list and the slide
   content. */
.hist-slider__nav::after {
    content: "";
    position: absolute;
    top: clamp(85px, 12vw, 165px);
    bottom: clamp(85px, 12vw, 165px);
    left: 100%;
    margin-left: calc(var(--hist-gap) / 2);
    width: 1px;
    background: rgba(255, 255, 255, 0.28);
}

.hist-slider__years {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hist-slider__year {
    position: relative;
    padding: 1px 0 1px 52px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    /* Grey by default; only the active year is white. */
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition);
}

.hist-slider__year:hover,
.hist-slider__year:focus-visible {
    color: rgba(255, 255, 255, 0.7);
}

.hist-slider__year.is-active {
    color: var(--color-white);
}

/* Yellow tick next to the year. Present on every year (collapsed to 0) so it
   can animate its width open when a year becomes active. */
.hist-slider__year::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: var(--color-brand-yellow);
    transition: width 0.25s ease-out;
}

.hist-slider__year.is-active::before {
    width: 34px;
}

.hist-slider__arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    /* Sit just below the year list, centered under the year numbers (the 40px
       left inset matches the year text so the chevrons line up under them). */
    padding-left: 40px;
    margin-top: 7px;
}

.hist-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 20px;
    border: 0;
    background: none;
    color: var(--color-white);
    opacity: 1;
    cursor: pointer;
    transition: opacity var(--transition);
}

/* Dimmed + inert when there's no year to move to in that direction. */
.hist-slider__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.hist-slider__arrow svg {
    display: block;
    width: 38px;
    height: 38px;
}

.hist-slider__arrow svg path {
    stroke-width: 1.4;
}

.hist-slider__arrow--prev svg {
    transform: rotate(180deg);
}

/* Today and Beyond: video button below the copy. */
.hist-today__video {
    margin-top: clamp(30px, 3.5vw, 44px);
}

/* Compact timeline layout for tablets and phones; laptops and desktops keep
   the full side-by-side version. */
@media (max-width: 1024px) {
    /* Definite height so the vertical-track slides resolve their 100% heights. */
    .hist-slider {
        height: 675px;
    }

    /* Copy sits to the right of the year rail + divider, below the arrows. */
    .hist-slider__content {
        padding: clamp(64px, 16vw, 84px) 22px clamp(64px, 16vw, 84px) clamp(88px, 24vw, 104px);
        justify-content: center;
    }

    /* Tighter title leading on mobile so the taller slides don't clip. */
    .hist-slider__title {
        font-size: 22px;
        font-weight: 400;
        line-height: 30px;
    }

    .hist-slider__text {
        font-size: 12px;
        font-weight: 500;
        line-height: 19px;
    }

    /* Full-width so the arrows can reach both slider edges; the empty area
       stays click-through so it doesn't block the copy. */
    .hist-slider__nav {
        width: 100%;
        padding: 24px 0 24px 20px;
        pointer-events: none;
    }

    .hist-slider__year,
    .hist-slider__arrow {
        pointer-events: auto;
    }

    /* Year rail runs down the left, evenly spread rather than bunched; buttons
       stay content-width so the active underline measures against the year. */
    .hist-slider__years {
        align-items: flex-start;
        gap: clamp(32px, 7.5vw, 48px);
    }

    /* No left tick space on mobile — years sit flush left. */
    .hist-slider__year {
        padding-left: 0;
    }

    /* Yellow indicator moves underneath the active year, left-aligned and 10%
       narrower than the year field. No expand animation here (line is below,
       not beside, the year). */
    .hist-slider__year::before {
        transition: none;
    }

    .hist-slider__year.is-active::before {
        top: auto;
        bottom: -3px;
        left: 0;
        transform: none;
        width: 78%;
        height: 2px;
    }

    /* Divider now sits at a fixed left (the nav is full-width, so it can't key
       off the nav's right edge) just past the year rail, spanning the list. */
    .hist-slider__nav::after {
        display: block;
        top: 50%;
        bottom: auto;
        left: clamp(74px, 20vw, 88px);
        transform: translateY(-50%);
        height: clamp(380px, 68vw, 520px);
        margin-left: 0;
    }

    /* Prev/next pinned near the top at the true slider edges (~5% down). */
    .hist-slider__arrows {
        flex-direction: row;
        justify-content: space-between;
        position: absolute;
        top: 5%;
        left: 20px;
        right: 20px;
        margin-top: 0;
        padding-left: 0;
    }

    .hist-slider__arrow--prev svg {
        transform: rotate(90deg);
    }

    .hist-slider__arrow--next svg {
        transform: rotate(-90deg);
    }
}

/* Tablet + large-phone range (compact layout is on, but the taller viewport
   makes the year column run under the top arrows): keep the year gap tight all
   the way down to the mobile width. True phones (<600px) stay untouched. */
@media (min-width: 600px) and (max-width: 1024px) {
    .hist-slider__years {
        gap: clamp(20px, 3vw, 30px);
    }
}

/* --- CTA cards ------------------------------------------------------------- */
.cta-cards {
    padding-block: 0 20px;
    padding-inline: var(--hero-margin-inline);
}

/* Full-width grid (no container cap); just the 20px section padding on each
   side. */
.cta-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.cta-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 460px;
    max-height: 460px;
    padding: clamp(30px, 3vw, 44px);
    border-radius: 20px;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-navy) center / cover no-repeat;
}

.cta-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(9, 13, 18, 0.05) 0%, rgba(9, 13, 18, 0.5) 100%);
}

.cta-card__title {
    margin: 0 0 22px;
    max-width: 100%;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    text-transform: none;
    color: var(--color-white);
}

.cta-card__btn {
    align-self: flex-start;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 860px) {
    .svc-tabs__panel {
        grid-template-columns: 1fr;
    }

    .svc-tabs__media {
        order: -1;
        /* 20px gap above the image at the top of an open accordion panel. */
        margin-top: 20px;
    }

    .svc-tabs__desc,
    .svc-tabs__title,
    .svc-expertise .svc-tabs__prose {
        min-height: 0;
    }
}

/* Tablet and below: the tabs become the accordion inside the grey Industries
   card, well before the row would ever wrap. Dissolve the nav (display:contents)
   so each tab button interleaves with its own panel via `order`. */
@media (max-width: 1024px) {
    .svc-tabs-section {
        margin: 50px var(--hero-margin-inline) 0;
        padding: 30px 24px;
        background: #ececec;
        border-radius: 25px;
    }

    .svc-tabs-section .section-head__title {
        margin-top: 0;
    }

    .svc-tabs-section .svc-tabs {
        display: flex;
        flex-direction: column;
        margin-block: 30px 0;
        border-bottom: 1px solid var(--color-black);
    }

    .svc-tabs-section .svc-tabs__nav {
        display: contents;
    }

    .svc-tabs-section .svc-tabs__tab {
        order: calc(var(--tab-i) * 2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        margin: 0;
        padding: 15px 0;
        border: 0;
        /* Solid black divider at all times (global — no hover/active change). */
        border-top: 1px solid var(--color-black);
        border-radius: 0;
        background: none;
        color: var(--color-dark);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .svc-tabs-section .svc-tabs__tab:hover,
    .svc-tabs-section .svc-tabs__tab.is-active {
        color: var(--color-dark);
        background: none;
        border-top-color: var(--color-black);
    }

    /* Row arrow: down-right when collapsed, up-right + blue when open. */
    .svc-tabs-section .svc-tabs__tab-arrow {
        display: inline-flex;
        flex: 0 0 auto;
        color: var(--color-dark);
        transform: rotate(90deg);
        transition: transform var(--transition), color var(--transition);
    }

    .svc-tabs-section .svc-tabs__tab-arrow svg {
        display: block;
        width: 22px;
        height: 22px;
    }

    .svc-tabs-section .svc-tabs__tab.is-active .svc-tabs__tab-arrow {
        transform: rotate(0deg);
        color: var(--color-primary);
    }

    /* Overview & installation accordions (grey background): arrow also turns
       brand blue on hover, matching its active state. */
    .svc-tabs-section--overview .svc-tabs__tab:hover .svc-tabs__tab-arrow,
    .svc-tabs-section--installexp .svc-tabs__tab:hover .svc-tabs__tab-arrow {
        color: var(--color-primary);
    }

    .svc-tabs-section .svc-tabs__panel {
        order: calc(var(--tab-i) * 2 + 1);
        border: 0;
        border-radius: 0;
        padding: 0 0 50px;
    }

    /* The tab row shows the title, so hide the duplicate one inside the panel. */
    .svc-tabs-section .svc-tabs__title {
        display: none;
    }
}

/* Dark expertise tabs: only four short labels, so they stay horizontal tabs
   much longer than the five-label industries set — they collapse to the
   accordion only on true mobile (<=782px), recoloured for the black section
   (white text, yellow when open, white separators). */
@media (max-width: 782px) {
    /* Grey tab-section cards: 20px side padding on mobile (was 24px from the
       1024px grey-card rule). Sitewide. */
    .svc-tabs-section {
        padding-inline: 20px;
    }

    /* Auto-transport tabs: drop the 30px top margin on mobile. */
    .svc-tabs-section .svc-tabs--auto {
        margin-top: 0;
    }

    /* No space above, 20px below each Auto Transport tab title on mobile. */
    .svc-tabs-section .svc-tabs--auto .svc-tabs__title {
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* No space below the Auto Transport tab description on mobile. */
    .svc-tabs-section .svc-tabs--auto .svc-tabs__desc {
        margin-bottom: 0;
    }

    /* 20px above the Explore button in the Auto Transport tabs on mobile
       (was 30px). */
    .svc-tabs-section .svc-tabs--auto .svc-tabs__cta {
        margin-top: 20px;
    }

    .svc-expertise .svc-tabs {
        display: flex;
        flex-direction: column;
        margin-block: 30px 0;
        border-bottom: 1px solid var(--color-white);
    }

    .svc-expertise .svc-tabs__nav {
        display: contents;
    }

    .svc-expertise .svc-tabs__tab {
        order: calc(var(--tab-i) * 2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        margin: 0;
        padding: 15px 0;
        border: 0;
        border-top: 1px solid var(--color-white);
        border-radius: 0;
        background: none;
        color: var(--color-white);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    /* Title text stays white on hover/active (only the arrow changes colour);
       separators stay pure white — no hover/active colour change. */
    .svc-expertise .svc-tabs__tab:hover,
    .svc-expertise .svc-tabs__tab.is-active {
        color: var(--color-white);
        background: none;
        border-top-color: var(--color-white);
    }

    .svc-expertise .svc-tabs__tab-arrow {
        display: inline-flex;
        flex: 0 0 auto;
        color: var(--color-white);
        transform: rotate(90deg);
        transition: transform var(--transition), color var(--transition);
    }

    .svc-expertise .svc-tabs__tab-arrow svg {
        display: block;
        width: 22px;
        height: 22px;
    }

    /* Arrow turns branded yellow on hover and when active. */
    .svc-expertise .svc-tabs__tab:hover .svc-tabs__tab-arrow,
    .svc-expertise .svc-tabs__tab.is-active .svc-tabs__tab-arrow {
        color: var(--color-brand-yellow);
    }

    .svc-expertise .svc-tabs__tab.is-active .svc-tabs__tab-arrow {
        transform: rotate(0deg);
    }

    .svc-expertise .svc-tabs__panel {
        order: calc(var(--tab-i) * 2 + 1);
        border: 0;
        border-radius: 0;
        padding: 0 0 50px;
    }

    .svc-expertise .svc-tabs__title {
        display: none;
    }
}

/* Smooth the mobile accordion open: the revealed panel fades and slides in.
   (Panels toggle display:none when closed, so only the opening is animated.) */
@keyframes svc-accordion-open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@media (max-width: 782px) {
    .svc-tabs__panel.is-active {
        animation: svc-accordion-open 260ms ease;
    }

    /* Slightly slower arrow rotation to match the smoother panel reveal. */
    .svc-tabs-section .svc-tabs__tab-arrow,
    .svc-expertise .svc-tabs__tab-arrow {
        transition: transform 260ms ease, color var(--transition);
    }
}

/* New warehousing sections: reflow their grids on tablet/mobile. */
@media (max-width: 1024px) {
    /* Four service columns are too tight on tablet — go two-up and drop the
       dividers (they only read cleanly across a single row). */
    .svc-services__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 40px;
    }

    .svc-services__col {
        padding-inline: 0;
        border-left: 0;
    }
}

@media (max-width: 860px) {
    .svc-features__grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* Why-choose keeps its landscape image at desktop, but stacks single-column
       (image above the title) on mobile like the other feature sections. */
    .svc-whychoose .svc-features__grid {
        grid-template-columns: 1fr;
    }

    .svc-features__media {
        order: -1;
    }

    .svc-certs__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 782px) {
    /* Left-align each certification column — logo image and caption — on
       mobile (they center on desktop). */
    .svc-certs__logo {
        justify-content: flex-start;
    }

    /* The CTPAT mark is oversized next to the other logos; trim it on mobile. */
    .svc-certs__logo img[src*="ctpat"] {
        max-height: 74px;
    }

    .svc-caps__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .svc-caps__card {
        min-height: auto;
    }

    /* Mobile typography for the capabilities section. */
    .svc-caps .section-head__title {
        font-size: 30px;
        font-weight: 400;
    }

    .svc-caps__title {
        font-size: 25px;
        font-weight: 700;
    }

    .svc-caps__text {
        margin: 0;
    }

    .svc-services__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Titles collapse to one line (drop the forced two-line break). */
    .svc-services__head {
        font-size: 16px;
        font-weight: 700;
    }

    .svc-services__head br {
        display: none;
    }

    /* List items get the blue checkmark marker (matching the WMS/FAQ lists). */
    .svc-services__list li {
        position: relative;
        margin-bottom: 3.5px;
        padding-left: 26px;
    }

    .svc-services__list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17.5 19 7' stroke='%230069cb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* Benefits collapse to a single column (row flow). */
    .svc-wms__benefits {
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    /* Larger check that sits lower, aligning with the bigger mobile body text. */
    .svc-wms__check svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 782px) {
    /* Uniform 50px separation between sections on mobile (adjacent margins
       collapse to 50px); drop the desktop top padding so it doesn't stack. */
    .svc-section {
        padding-block: 0;
        margin-block: 50px;
    }

    .svc-section--tight-top {
        padding-top: 0;
    }

    /* Eyebrow-only overview section (Logistics): drop its 50px bottom margin so
       it sits close to the grey card below. */
    .svc-section--tight-top:has(.section-head__eyebrow:only-child) {
        margin-bottom: 0;
    }

    /* Overview grey card: drop its 50px top margin so it sits close to the
       eyebrow above. */
    .svc-tabs-section.svc-tabs-section--overview {
        margin-top: 0;
    }

    /* More separation on whatever section sits right before the CTA cards
       (global — works on any page that ends with the CTA cards component). */
    :is(.svc-section, .svc-expertise):has(+ .cta-cards) {
        margin-bottom: 90px;
    }

    /* Bolder, larger FAQ questions on mobile. */
    .svc-faq__q {
        font-size: 18px;
        font-weight: 600;
    }

    /* Numbered FAQ questions on mobile (01. / 02. / 03. …). Scoped to FAQ
       lists so other accordions (e.g. ESG policies) are unaffected. The
       number sits in a fixed left gutter; the question text and the open
       answer both indent past it so they align. */
    .svc-faqs__list {
        counter-reset: faq;
    }

    .svc-faqs__list .svc-faq {
        counter-increment: faq;
    }

    .svc-faqs__list .svc-faq__q {
        position: relative;
        padding-left: 44px;
    }

    .svc-faqs__list .svc-faq__q::before {
        content: counter(faq, decimal-leading-zero) ".";
        position: absolute;
        left: 0;
        top: 0;
        font-weight: 600;
        color: var(--color-dark);
    }

    .svc-faqs__list .svc-faq__panel {
        padding-left: 44px;
    }

    /* Darker, bolder lead paragraph on mobile. */
    .svc-prose p.svc-prose__lead {
        font-weight: 700;
        color: rgb(17, 17, 17);
    }

    /* Larger lead variant scales down on mobile. */
    .svc-prose p.svc-prose__lead--xl,
    .svc-prose p.svc-prose__lead--30 {
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
    }

    /* Emphasised intro lead-in ("Think about it:") is extra-heavy on mobile. */
    .svc-prose p.svc-prose__intro strong {
        font-weight: 900;
    }

    /* Tickers smaller and stacked one per row on mobile. */
    .svc-stat__number {
        font-size: 50px;
    }

    .svc-stats__grid {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    /* Drop the 12px top margin on the stat labels on mobile. */
    .svc-stat__label {
        margin-top: 0;
    }

    /* Keep a 10px inset on the capabilities image on mobile. */
    .svc-media-band {
        padding-inline: 10px;
    }

    /* Larger FAQ arrow icon on mobile. */
    .svc-faq__icon svg {
        width: 25px;
        height: 25px;
    }

    /* Accordion panel content is 95% wide, still left-aligned (global — every
       accordion tab set on mobile). */
    .svc-tabs__panel {
        width: 95%;
    }

    /* Icon-list items use a 22px line-height on mobile. */
    .svc-freight__caps li,
    .svc-freight__list li {
        line-height: 22px;
    }

    /* Freight labels and column headings step down to 25px on mobile. */
    .svc-freight__label,
    .svc-freight__col-head {
        font-size: 25px;
        font-weight: 600;
    }

    /* Individual Auto Transport: keep "Our Services" / "Our Features" on one
       line on mobile (drop the hard <br> in those titles). */
    .page-individuals .svc-freight__title br {
        display: none;
    }

    /* More space above the freight media image, less below, on mobile
       (was 40px top / 90px bottom). */
    .svc-freight__media {
        margin-top: 70px;
        margin-bottom: 30px;
    }

    /* Any visible accordion panel title (global): accordion typography with a
       20px gap below it before the body text. Titles that stay hidden in the
       accordion are unaffected (they're display:none). */
    .svc-tabs-section .svc-tabs__title {
        margin: 24px 0 20px;
        font-size: 18px;
        font-weight: 600;
    }

    /* "The McCollister's Difference" stat heading: bigger and heaviest weight. */
    .svc-stats__head {
        font-size: 35px;
        font-weight: 900;
    }

    /* 20px below the accordion detail text before the CTA button. */
    .svc-tabs .svc-tabs__desc {
        margin-bottom: 20px;
        line-height: 19.2px;
    }

    .svc-tabs--dark .svc-tabs__prose p:last-child {
        margin-bottom: 20px;
    }

    .cta-cards__grid {
        grid-template-columns: 1fr;
    }

    /* Shorter cards with a 25px/600 title on mobile. */
    .cta-card {
        height: 300px;
        max-height: 300px;
        padding: 30px 20px;
    }

    .cta-card__title {
        font-size: 25px;
    }

    /* Hero: fits its content, tighter padding, buttons stack. 20px left inset
       for the hero copy on mobile (right/top/bottom keep the 10px token). */
    .svc-hero__inner {
        height: auto;
        min-height: 340px;
        padding: 90px var(--hero-margin-inline);
        padding-left: 20px;
    }

    /* Interior page-header heroes (History, FAQs) get the same 20px left inset
       for their crumb + title on mobile, and no 50px bottom margin. */
    .svc-section.hist-head {
        padding-left: 20px;
        margin-bottom: 0;
    }

    .svc-hero__title {
        /* Holds 35px on mainstream phones (~389px+) and eases down on the very
           smallest screens so a long single word (e.g. "TRANSPORTATION" on the
           aerospace hero) can't overflow at ~320px. */
        font-size: clamp(28px, 9vw, 32px);
    }

    .svc-hero__subtitle {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
    }

    .svc-hero__actions {
        flex-direction: column;
        align-items: flex-start;
        /* 20px between the two stacked hero buttons on mobile (was 14px). */
        row-gap: 20px;
    }

    /* Interior sections: 20px side padding on mobile (matches the 10px var
       plus keeps text off the edges). */
    .svc-expertise {
        padding: 50px 20px;
    }

    /* White-glove button aligns left on mobile. */
    .svc-callout__cta {
        margin-left: 0;
    }

    /* Scale the expertise title so "A TRANSPORTATION" fits on one line. */
    .svc-expertise__title {
        font-size: clamp(22px, 7vw, 32px);
        /* Keep "A Transportation" on a single line on mobile. */
        white-space: nowrap;
    }
}

/* --- Forms, Certifications & Guides page ---------------------------------- */
/* Anchor targets clear the sticky header when jumped to (#credentials etc.). */
#downloadables,
#credentials,
#guides {
    scroll-margin-top: 110px;
}

/* Logistics deep links (/logistics/#freight-brokerage, #heavy-haul) drop below
   the sticky header so their "/ … /" eyebrow stays visible. Not applied on
   mobile — the header slides away on scroll there, so the eyebrow isn't covered. */
@media (min-width: 783px) {
    #freight-brokerage,
    #heavy-haul {
        scroll-margin-top: 130px;
    }
}

/* Shared blue file icon (PDF / DOC) used by the forms cards + guides list. */
.svc-fileicon {
    display: block;
    width: 44px;
    height: 50px;
}

/* Forms — download cards in a 3-up grid. */
.svc-docs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: clamp(32px, 4vw, 48px);
}

.svc-docs__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    /* Extra bottom room for the corner-pinned download icon. */
    padding: 24px 26px 30px;
    border: 1px solid var(--color-dark);
    border-radius: 15px;
    text-decoration: none;
    color: var(--color-dark);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.svc-docs__card:hover,
.svc-docs__card:focus-visible {
    border-color: var(--color-border);
    box-shadow: 0 6px 20px rgba(21, 25, 29, 0.08);
}

.svc-docs__icon {
    flex: 0 0 auto;
}

.svc-docs__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.svc-docs__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.svc-docs__type {
    font-size: 13px;
    color: var(--color-text);
}

.svc-docs__dl {
    /* Pinned to the bottom-right corner of the card, matching the live layout:
       25px inset + 20px icon on desktop, 15px inset on mobile. */
    position: absolute;
    right: 25px;
    bottom: 25px;
    display: inline-flex;
    color: #111111;
}

.svc-docs__dl svg {
    width: 30px;
    height: 30px;
}

@media (max-width: 840px) {
    .svc-docs__dl {
        right: 15px;
        bottom: 15px;
    }
}

/* Certifications — centered logo rows (4-up desktop wraps to a centered 3;
   2-up mobile with a lone centered BBB). Flex-wrap + centered justification
   keeps each row centered instead of left-aligned like a grid. */
.svc-creds__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(48px, 6vw, 96px) clamp(36px, 4vw, 70px);
    margin-top: clamp(36px, 4.5vw, 56px);
}

.svc-creds__logo {
    flex: 0 0 auto;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-creds__logo img {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.svc-creds__bbb svg {
    display: block;
    height: 96px;
    width: auto;
    fill: var(--color-dark);
}

/* NSC logo runs large next to the others — trim it down. */
.svc-creds__logo--sm img {
    max-height: 74px;
}

/* Linked logos: recolour to brand blue on hover/focus. The <img> SVGs can't be
   filled via CSS, so approximate the brand blue with a filter; the inline BBB
   SVG uses fill directly. */
.svc-creds__logo img,
.svc-creds__bbb svg {
    transition: filter 0.3s ease, fill 0.3s ease;
}

a.svc-creds__logo:hover img,
a.svc-creds__logo:focus-visible img {
    filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(1936%) hue-rotate(196deg) brightness(94%) contrast(101%);
}

a.svc-creds__logo:hover .svc-creds__bbb svg,
a.svc-creds__logo:focus-visible .svc-creds__bbb svg {
    fill: var(--color-primary);
}

/* Helpful Guides — list with top + row dividers. */
.svc-guides__list {
    list-style: none;
    margin: clamp(32px, 4vw, 48px) 0 0;
    padding: 0;
    border-top: 1px solid var(--color-dark);
}

.svc-guides__item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: clamp(24px, 3vw, 34px) 0;
    border-bottom: 1px solid var(--color-dark);
    transition: background-color 0.45s ease, padding 0.45s ease;
}

/* Hover: light-grey fill with the content nudged inward from both edges. */
.svc-guides__item:hover {
    background-color: rgb(237, 237, 237);
    padding-inline: clamp(16px, 2vw, 26px);
}

.svc-guides__icon {
    flex: 0 0 auto;
}

.svc-guides__body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title actions"
        "type  actions";
    align-items: center;
    column-gap: 24px;
    row-gap: 4px;
    min-width: 0;
}

.svc-guides__title {
    grid-area: title;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark);
}

.svc-guides__type {
    grid-area: type;
    font-size: 13px;
    color: var(--color-text);
}

.svc-guides__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 28px;
}

.svc-guides__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

.svc-guides__action:hover,
.svc-guides__action:focus-visible {
    color: var(--color-primary);
}

.svc-guides__action-icon {
    display: inline-flex;
}

.svc-guides__action-icon svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 1024px) {
    .svc-docs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Three certification logos per row on tablets. */
    .svc-creds__logo {
        width: 26%;
    }
}

@media (max-width: 782px) {
    .svc-docs__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }

    /* Two-up on phones; the trailing BBB centers on its own row. */
    .svc-creds__logo {
        width: 38%;
    }

    .svc-creds__logo img {
        max-height: 80px;
    }

    /* NSC reads large on mobile too — keep it smaller than the rest. */
    .svc-creds__logo--sm img {
        max-height: 50px;
    }

    .svc-creds__bbb svg {
        height: 80px;
    }

    /* Stack the guide row: title, type, then the View/Download actions. */
    .svc-guides__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "type"
            "actions";
    }

    .svc-guides__actions {
        margin-top: 14px;
        gap: 40px;
    }
}

/* --- Careers page --------------------------------------------------------- */
/* What Drives You Forward? — prose left, blue Drivers callout right. */
.careers-drives__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
}

/* "Why Work At" mirrors the two-column split above — content left, right empty. */
.careers-why__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
}

@media (max-width: 782px) {
    .careers-why__inner {
        grid-template-columns: 1fr;
    }
}

.careers-drivers {
    position: relative;
    padding: clamp(30px, 3vw, 44px);
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 24px;
}

/* Desktop: map pinned in the upper-right, clear of the contact block below. */
.careers-drivers__map {
    position: absolute;
    top: clamp(24px, 4vw, 52px);
    right: clamp(14px, 2vw, 30px);
    width: clamp(105px, 12.7vw, 165px);
    height: auto;
}

.careers-drivers__title {
    margin: 0 0 16px;
    max-width: 12em;
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 600;
    line-height: 1.15;
    /* Override the global h1–h6 uppercase — this stays Title Case. */
    text-transform: none;
    color: var(--color-white);
}

.careers-drivers__text {
    margin: 0 0 clamp(18px, 2.4vw, 34px);
    max-width: 28em;
    font-size: var(--body-font-size);
    font-weight: 700;
    line-height: 1.6;
}

.careers-drivers__label {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 600;
}

.careers-drivers__contact {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 600;
    white-space: nowrap;
}

.careers-drivers__contact a {
    color: var(--color-white);
    text-decoration: none;
}

.careers-drivers__contact a:hover {
    text-decoration: underline;
}

/* Dark region — differentiators + culture + opportunities. */
.careers-dark {
    margin-inline: var(--hero-margin-inline);
    margin-top: clamp(56px, 8vw, 100px);
    padding: clamp(50px, 6vw, 90px) clamp(24px, 3vw, 56px);
    color: var(--color-white);
    background: #141414;
    border-radius: 24px;
}

.careers-dark__inner {
    max-width: var(--container);
    margin-inline: auto;
}

.careers-dark__title {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: var(--h2-line-height);
    text-transform: uppercase;
    color: var(--color-white);
}

.careers-dark__intro {
    margin: 0 0 22px;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: var(--color-white);
}

.careers-dark__closing {
    margin: 22px 0 0;
    font-size: var(--body-font-size);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/* What Sets Us Apart — top rule, big title, 4 numbered columns. */
.careers-apart__head {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.careers-apart__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    margin-top: clamp(30px, 3.5vw, 48px);
}

.careers-apart__num {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: clamp(44px, 4.4vw, 60px);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-primary);
}

.careers-apart__text {
    margin: 0;
    font-size: var(--body-font-size);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
}

/* Yellow-check list shared by Culture + Opportunities. */
.careers-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.careers-checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: var(--body-font-size);
    line-height: 1.45;
    color: var(--color-white);
}

.careers-check {
    flex: 0 0 auto;
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--color-brand-yellow);
}

.careers-check svg {
    width: 16px;
    height: 16px;
}

/* Our Culture — image left, copy right. */
.careers-culture,
.careers-opps {
    display: grid;
    align-items: center;
    gap: clamp(32px, 4vw, 70px);
    margin-top: clamp(56px, 7vw, 100px);
}

.careers-culture {
    grid-template-columns: 0.9fr 1.1fr;
}

.careers-opps {
    grid-template-columns: 1.1fr 0.9fr;
}

.careers-culture__media img,
.careers-opps__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* Culture people image sits on the dark bg (transparent PNG) — no radius. */
.careers-culture__media img {
    border-radius: 0;
}

.careers-opps__growth {
    margin-top: clamp(36px, 4vw, 56px);
}

/* Careers reuses the homepage .home-testimonials slider; drop its bottom
   padding here since the next section supplies the top spacing. */
.home-testimonials--flush-bottom {
    padding-bottom: 0;
}

/* Join the team — ADP recruitment widget wrapper. */
.careers-join__lead {
    margin: 18px 0 clamp(30px, 3vw, 40px);
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: var(--color-dark);
}

.careers-join__widget {
    min-height: 200px;
}

@media (max-width: 1024px) {
    .careers-apart__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    .careers-drives__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Map drops into the flow, below the title and larger. */
    .careers-drivers__map {
        position: static;
        display: block;
        width: 56%;
        max-width: 250px;
        height: auto;
        margin: 16px 0 20px;
    }

    .careers-drivers__title,
    .careers-drivers__text {
        max-width: none;
    }

    .careers-drivers__contact {
        white-space: normal;
    }

    .careers-apart__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(22px, 6vw, 32px);
    }

    /* Stack media above copy on phones. */
    .careers-culture,
    .careers-opps {
        grid-template-columns: minmax(0, 1fr);
    }

    .careers-culture__media {
        order: -1;
    }

    .careers-opps__media {
        order: -1;
    }

    .careers-dark__intro {
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
    }
}

/* --- ESG Practices page --------------------------------------------------- */
/* Hero image anchored top-left (per the live page). */
.svc-hero--esg {
    background-position: top left;
}

/* Policies intro: a lead paragraph over the standard body copy. */
.esg-intro {
    margin-top: 20px;
    margin-bottom: 40px;
}

.esg-intro p {
    margin: 0 0 14px;
    font-size: var(--body-font-size);
    line-height: 1.7;
    color: var(--color-text);
}

.esg-intro p:last-child {
    margin-bottom: 0;
}

.esg-intro .esg-intro__lead {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color-dark);
}

/* Inset the policy answers from the right. */
.esg-policies__list .svc-faq__panel {
    padding-right: 11%;
}

/* Blue statement band. */
.esg-statement {
    padding: 100px var(--hero-margin-inline);
    background: var(--color-white);
}

/* The statement band supplies the spacing, so the following "More About"
   section drops its top padding. */
.esg-statement + .svc-integrated {
    padding-block-start: 0;
}

.esg-statement__inner {
    max-width: var(--container);
    margin-inline: auto;
    text-align: center;
}

.esg-statement__text {
    margin: 0 auto;
    max-width: 78%;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 900;
    line-height: 36px;
    letter-spacing: -0.96px;
    text-transform: uppercase;
    color: var(--color-primary);
}

@media (max-width: 782px) {
    /* Statement band supplies its own 70px spacing; drop the adjacent sections'
       50px margins so they don't stack on top of it. */
    .esg-statement {
        padding-block: 70px;
    }

    .svc-section.esg-policies {
        margin-bottom: 0;
    }

    .svc-section.svc-integrated {
        margin-top: 0;
    }

    /* Larger, left-aligned statement on phones (matches the live layout). */
    .esg-statement__inner {
        text-align: left;
    }

    .esg-statement__text {
        max-width: none;
        font-size: 32px;
        font-weight: 900;
        line-height: 36px;
        letter-spacing: -0.96px;
    }

    /* Let the statement wrap naturally on phones. */
    .esg-br {
        display: none;
    }
}

/* --- Contact Us page ------------------------------------------------------ */
/* Testimonial spacing on the contact page: fixed 135px top, no bottom. */
.home-testimonials--contact {
    padding-top: 135px;
    padding-bottom: 0;
}

@media (max-width: 782px) {
    .home-testimonials--contact {
        padding-top: 50px;
    }
}

/* Dark hero holding the form + contact info. */
.contact-hero {
    position: relative;
    margin-inline: var(--hero-margin-inline);
    padding: clamp(30px, 3.5vw, 60px);
    border-radius: 25px;
    overflow: hidden;
    color: var(--color-white);
    background-color: #1f1f1f;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.contact-hero__inner {
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(32px, 5vw, 84px);
    align-items: center;
}

.contact-hero__form {
    padding: clamp(26px, 3vw, 48px);
    color: var(--color-dark);
    background: var(--color-white);
    border-radius: 20px;
}

.contact-hero__form-title {
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-family: var(--font-heading);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: uppercase;
    color: var(--color-dark);
}

.contact-hero__eyebrow {
    margin: 0 0 28px;
    font-family: var(--font-heading);
    font-size: var(--eyebrow-font-size);
    font-weight: var(--eyebrow-font-weight);
    color: var(--color-white);
}

.contact-hero__title {
    margin: 0 0 clamp(20px, 2.5vw, 30px);
    font-family: var(--font-heading);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: var(--h2-font-weight);
    line-height: 1.06;
    text-transform: uppercase;
    color: var(--color-white);
}

.contact-hero__text {
    margin: 0 0 clamp(24px, 3vw, 34px);
    max-width: 30em;
    font-size: var(--body-font-size);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.contact-hero__socials {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-hero__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 20px;
    line-height: 1;
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition);
}

.contact-hero__socials i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}

.contact-hero__socials a:hover {
    color: var(--color-brand-yellow);
}

/* Gravity Forms — scoped styling so it matches the card design regardless of
   the plugin's default theme. */
/* Field labels visible in black (matches the live site). */
.contact-hero__gform .gfield_label,
.contact-hero__gform .gform-field-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
}

/* Hide the First/Last sublabels and the redundant field descriptions
   (email/message duplicate the label); keep the consent text + char counter. */
.contact-hero__gform .gform-field-label--type-sub {
    display: none !important;
}

.contact-hero__gform .gfield_description:not(.gfield_consent_description):not(.ginput_counter) {
    display: none;
}

.contact-hero__gform .gform-theme--foundation .gform_fields,
.contact-hero__gform .gform_fields {
    row-gap: 18px !important;
}

.contact-hero__gform .gfield {
    margin-bottom: 0;
}

/* Consent row: same styling as the Talk to an Expert form (#gform_3), just in
   black instead of white. !important mirrors that form so GF can't override. */
.contact-hero__gform .ginput_container_consent {
    display: block !important;
    line-height: 1.7 !important;
}

.contact-hero__gform .ginput_container_consent input[type="checkbox"] {
    display: inline-block !important;
    margin: 1px 8px 0 0 !important;
    vertical-align: top !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-black) !important;
    border-radius: 2px !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Centered black checkmark. */
.contact-hero__gform .ginput_container_consent input[type="checkbox"]::before {
    content: none !important;
}

.contact-hero__gform .ginput_container_consent input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 9px !important;
    border: solid var(--color-black) !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.contact-hero__gform .gfield_consent_label,
.contact-hero__gform .gform-field-label--type-inline {
    display: inline !important;
    margin: 0 !important;
    padding-left: 0 !important;
    font-family: var(--font-body);
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    color: var(--color-dark) !important;
}

.contact-hero__gform .gfield_consent_label a {
    color: var(--color-dark) !important;
    text-decoration: underline !important;
    transition: color var(--transition);
}

.contact-hero__gform .gfield_consent_label a:hover,
.contact-hero__gform .gfield_consent_label a:focus {
    color: var(--color-primary) !important;
}

.contact-hero__gform .gfield_consent_description {
    margin-top: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--color-dark) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.contact-hero__gform .charleft {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

.contact-hero__gform input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-hero__gform textarea,
.contact-hero__gform select {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 3px;
    box-sizing: border-box;
}

.contact-hero__gform input::placeholder,
.contact-hero__gform textarea::placeholder {
    color: #9aa0a6;
    opacity: 1;
}

.contact-hero__gform textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-hero__gform input:focus,
.contact-hero__gform textarea:focus,
.contact-hero__gform select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact-hero__gform .gfield_required {
    color: #d0021b;
}

.contact-hero__gform .gform_footer input[type="submit"],
.contact-hero__gform .gform_footer button,
.contact-hero__gform .gform_button,
.contact-hero__gform button[type="submit"] {
    width: 100% !important;
    padding: 16px 24px !important;
    font-family: var(--font-heading);
    font-size: 15px !important;
    font-weight: 700;
    color: var(--color-white) !important;
    background: var(--color-black) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.contact-hero__gform .gform_footer input[type="submit"]:hover,
.contact-hero__gform .gform_footer button:hover,
.contact-hero__gform .gform_button:hover,
.contact-hero__gform button[type="submit"]:hover,
.contact-hero__gform .gform_button:focus,
.contact-hero__gform button[type="submit"]:focus {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
}

@media (max-width: 1024px) {
    /* Stack: contact info on top, form below (matches mobile screenshots). */
    .contact-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(30px, 6vw, 44px);
    }

    .contact-hero__info {
        order: -1;
    }
}

@media (max-width: 782px) {
    .contact-hero {
        padding: 20px;
    }

    /* Global h1 mobile size (matches svc-hero__title / the design tokens). */
    .contact-hero__form-title {
        font-size: 35px;
        line-height: 40px;
    }

    .contact-hero__text {
        font-weight: 600;
    }

    /* reCAPTCHA is a fixed 304px widget — scale it down so it fits the card. */
    .contact-hero__gform .ginput_recaptcha {
        transform: scale(0.82);
        transform-origin: 0 0;
    }

    /* Keep the message (textarea) border black like the other fields. */
    .contact-hero__gform textarea {
        border: 1px solid var(--color-black) !important;
    }
}

/* --- FAQs page ------------------------------------------------------------ */
/* Small gap under the header title before the accordion. */
.faqs-main {
    padding-block-start: 20px;
}

/* General Questions accordion beside the By Industry list. */
.faqs-main__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(190px, 20vw, 250px);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}

.faqs-main__questions .svc-faqs__list {
    margin-top: 0;
}

.faqs-industries__label {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.faqs-industries__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.faqs-industries__link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    line-height: 1.4;
    color: var(--color-text);
    text-align: left;
    transition: color var(--transition);
}

.faqs-industries__link:hover,
.faqs-industries__link:focus-visible {
    color: var(--color-primary);
}

/* Industry FAQ modal. */
.faqs-modal[hidden] {
    display: none;
}

.faqs-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vw, 48px);
}

.faqs-modal__overlay {
    position: absolute;
    inset: 0;
    /* Fuzzy blue-tinted backdrop, matching the header dropdown overlay. */
    background: rgba(0, 105, 203, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.faqs-modal__box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1040px;
    min-height: 80vh;
    max-height: 94vh;
    padding: clamp(24px, 3vw, 48px);
    background: var(--color-white);
    border-radius: 0;
}

.faqs-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.faqs-modal__title {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.faqs-modal__actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

.faqs-modal__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

.faqs-modal__action:hover {
    color: var(--color-primary);
}

.faqs-modal__action-icon {
    display: inline-flex;
}

.faqs-modal__action-icon svg {
    width: 20px;
    height: 20px;
}

.faqs-modal__close {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0 0 0 4px;
    font-size: 28px;
    line-height: 1;
    color: var(--color-dark);
    transition: color var(--transition);
}

.faqs-modal__close:hover {
    color: var(--color-primary);
}

.faqs-modal__body {
    overflow-y: auto;
    margin-top: 4px;
}

@media (max-width: 1024px) {
    /* Industry list drops below the questions on tablets/phones. */
    .faqs-main__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(40px, 8vw, 56px);
    }
}

@media (max-width: 782px) {
    /* Global h1 mobile size for the "General Questions" title. */
    .faqs-head .hist-head__title {
        font-size: 35px;
        line-height: 40px;
    }

    .svc-section.hist-head.faqs-head {
        margin-bottom: 0;
    }

    .svc-section.faqs-main {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    /* Stack the modal actions under the title on small screens. */
    .faqs-modal__head {
        flex-direction: column;
        gap: 12px;
    }
}

/* Print only the open industry FAQ modal. */
@media print {
    body.faqs-printing * {
        visibility: hidden !important;
    }

    body.faqs-printing .faqs-modal,
    body.faqs-printing .faqs-modal * {
        visibility: visible !important;
    }

    body.faqs-printing .faqs-modal {
        position: absolute;
        inset: 0;
        display: block;
        padding: 0;
    }

    body.faqs-printing .faqs-modal__overlay,
    body.faqs-printing .faqs-modal__actions,
    body.faqs-printing .faqs-modal__close {
        display: none !important;
    }

    body.faqs-printing .faqs-modal__box {
        max-width: none;
        max-height: none;
        padding: 0;
    }

    body.faqs-printing .faqs-modal__body {
        overflow: visible;
    }
}

/* Single post print: strip the site chrome (header, footer, sidebar, share/back
   /prev-next controls, CTA cards, cookie banner) and print only the article —
   title + body — full width. Triggered by the print share button (window.print). */
@media print {
    body.single .site-header,
    body.single .site-footer,
    body.single .blog__sidebar,
    body.single .single-post__back,
    body.single .single-post__share,
    body.single .single-post__nav,
    body.single .cta-cards,
    #cmplz-cookiebanner-container,
    .cmplz-cookiebanner {
        display: none !important;
    }

    /* Collapse the two-column grid so the article fills the page. */
    body.single .blog__inner {
        display: block;
    }

    body.single .svc-section.single-post {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.single .single-post,
    body.single .single-post__head,
    body.single .single-post__main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* --- Press & Media page --------------------------------------------------- */
.press__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-dark);
}

.press__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 3vw, 42px);
    padding: clamp(22px, 3vw, 34px) 0;
    border-bottom: 1px solid var(--color-dark);
    transition: background-color 0.45s ease, padding 0.45s ease;
}

/* Hover: light-grey fill with the content nudged inward (matches Helpful Guides). */
.press__item:hover {
    background-color: rgb(237, 237, 237);
    padding-inline: clamp(16px, 2vw, 26px);
}

.press__icon {
    display: inline-flex;
    color: var(--color-primary);
    transition: color var(--transition);
}

.press__icon svg {
    width: 26px;
    height: 26px;
}

.press__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.press__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

.press__url {
    font-size: var(--body-font-size);
    line-height: 1.5;
    color: var(--color-text);
    text-decoration: none;
    word-break: break-all;
    transition: color var(--transition);
}

.press__title:hover,
.press__url:hover {
    color: var(--color-primary);
}

.press__date {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text);
}

.press__view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

.press__view:hover {
    color: var(--color-primary);
}

.press__view-icon {
    display: inline-flex;
}

.press__view-icon svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 782px) {
    /* Icon + copy on top, View beneath. No inset-on-hover effect on mobile. */
    .press__item {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon body"
            ".    view";
        align-items: start;
        row-gap: 16px;
        transition: background-color 0.3s ease;
    }

    /* Same grey hover fill as desktop (no inset shift on mobile). */
    .press__item:hover {
        background-color: rgb(237, 237, 237);
        padding-inline: 0;
    }

    .press__icon {
        grid-area: icon;
    }

    .press__body {
        grid-area: body;
    }

    .press__view {
        grid-area: view;
    }
}

/* --- Terms & Conditions page ---------------------------------------------- */
/* Space between the terms content and the CTA cards below. */
.terms {
    margin-bottom: 100px;
}

.terms__head {
    padding-bottom: 30px;
}

.terms__title {
    margin: 0 0 20px;
    font-family: var(--font-heading);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: uppercase;
    color: var(--color-dark);
}

.terms__subtitle {
    margin: 0 0 clamp(34px, 4.5vw, 56px);
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    color: var(--color-dark);
}

.terms__body {
    max-width: 1100px;
}

.terms__section {
    margin-bottom: clamp(30px, 3.5vw, 44px);
}

.terms__section:last-child {
    margin-bottom: 0;
}

.terms__heading {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    color: var(--color-dark);
}

.terms__body p {
    margin: 0 0 12px;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
    color: var(--color-text);
}

.terms__body p:last-child {
    margin-bottom: 0;
}

.terms__body a {
    color: var(--color-primary);
    text-decoration: none;
    word-break: break-word;
}

.terms__body a:hover {
    text-decoration: underline;
}

.terms__body ul {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5px;
}

.terms__body ul li {
    position: relative;
    padding-left: 30px;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
    color: var(--color-text);
}

/* Blue check marker. */
.terms__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%230069cb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 782px) {
    /* Global h1 mobile size. */
    .terms__title {
        font-size: 35px;
        line-height: 40px;
    }

    .terms__subtitle {
        font-size: 30px;
    }
}

/* --- Talk to an Expert page ----------------------------------------------- */
.tte-head__intro {
    max-width: 1100px;
    margin-top: clamp(18px, 2.4vw, 28px);
}

.tte-head__intro p {
    margin: 0 0 12px;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
    color: var(--color-text);
}

.tte-head__intro p:last-child {
    margin-bottom: 0;
}

/* Dark form panel. */
.tte {
    margin-inline: var(--hero-margin-inline);
    margin-top: clamp(32px, 4vw, 56px);
    margin-bottom: 100px;
    padding: 100px clamp(40px, 8vw, 120px);
    color: var(--color-white);
    background: #1f1f1f;
    border-radius: 25px;
}

/* Black panels use 50px top/bottom padding on mobile (matches .home-about). */
@media (max-width: 782px) {
    .tte {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.tte__inner {
    max-width: var(--container);
    margin-inline: auto;
}

/* Gravity Forms on the dark panel — white fields, white labels, custom
   checkboxes, white submit. Scoped so it doesn't affect other GF instances. */
/* Force every label/description/section/counter to white on the black panel
   (the input/textarea/select values stay dark on their white fields). */
.tte .gform_wrapper,
.tte .gform_wrapper label,
.tte .gform_wrapper legend,
.tte .gform_wrapper span,
.tte .gform_wrapper p,
.tte .gform_wrapper li,
.tte .gform_wrapper .gfield_label,
.tte .gform_wrapper .gform-field-label,
.tte .gform_wrapper .gsection_title,
.tte .gform_wrapper .gfield_description,
.tte .gform_wrapper .gform_required_legend,
.tte .gform_wrapper .ginput_counter {
    color: var(--color-white) !important;
}

.tte .gfield_label,
.tte label,
.tte .gsection_title,
.tte .gsection .gsection_title,
.tte legend {
    font-family: var(--font-heading);
    font-weight: 600;
}

.tte .gsection_title,
.tte legend {
    font-size: 18px;
}

/* Section divider lines pure white on the dark panel, with even 20px spacing. */
.tte .gform_wrapper .gfield--type-section,
.tte .gform_wrapper .gsection,
.tte .gform_wrapper hr {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--color-white) !important;
}

/* The empty section heading shouldn't add its own spacing. */
.tte .gform_wrapper .gfield--type-section .gsection_title {
    margin: 0 !important;
    padding: 0 !important;
}

/* Consent copy renders as plain text (GF wraps it in a bordered scroll box). */
.tte .gform_wrapper .gfield_consent_description {
    border: 0 !important;
    padding: 0 !important;
    margin-top: 6px;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
}

/* Links inside the form (e.g. Privacy Policy) — white, brand-yellow on hover. */
.tte .gform_wrapper a {
    color: var(--color-white) !important;
    text-decoration: underline;
    transition: color var(--transition);
}

.tte .gform_wrapper a:hover,
.tte .gform_wrapper a:focus {
    color: var(--color-brand-yellow) !important;
}

/* No grid row gap — vertical spacing comes from the field margins below. */
.tte .gform_wrapper .gform_fields {
    grid-row-gap: 0 !important;
    row-gap: 0 !important;
}

.tte .gfield {
    margin-bottom: 18px;
}

.tte input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.tte textarea,
.tte select {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-dark);
    background: var(--color-white);
    border: 0;
    border-radius: 6px;
    box-sizing: border-box;
}

.tte textarea {
    min-height: 160px;
    resize: vertical;
}

.tte input:focus,
.tte textarea:focus,
.tte select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Custom checkboxes: white square, blue check. */
.tte input[type="checkbox"],
.tte input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    background: var(--color-white);
    border: 0;
    border-radius: 3px;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    flex: 0 0 auto;
}

.tte input[type="radio"] {
    border-radius: 50%;
}

/* Remove Gravity Forms' own check glyph so only the custom one shows. */
.tte input[type="checkbox"]::before,
.tte input[type="radio"]::before {
    content: none !important;
    display: none !important;
}

.tte input[type="checkbox"]:checked,
.tte input[type="radio"]:checked {
    background-image: none !important;
}

.tte input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* Checkbox spec (matches the live site): 15px white square, thin white border. */
#gform_3 input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgb(255, 255, 255) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 3px 10px 0 0 !important;
}

.tte input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}

.tte .gchoice {
    display: flex;
    align-items: center;
}

.tte .gchoice label {
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
}

/* Marketing consent: checkbox floats left (vertically centered with the first
   line) so wrapped lines run full width under it, starting at the checkbox's
   left edge. Form-id selector beats Gravity Forms' own flex layout. */
#gform_3 .ginput_container_consent {
    display: block !important;
}

#gform_3 .ginput_container_consent input[type="checkbox"] {
    float: left !important;
    margin: 3px 10px 0 0 !important;
}

#gform_3 .gfield_consent_label {
    display: inline !important;
    color: var(--color-white) !important;
    font-family: var(--font-body);
    font-size: 13px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    cursor: pointer;
}

.tte .ginput_counter,
.tte .gform_required_legend,
.tte .gfield_description {
    color: rgba(255, 255, 255, 0.75);
}

#gform_3 .gform_button {
    width: auto !important;
    background: #fff !important;
    color: #000 !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 16px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: background var(--transition);
}

#gform_3 .gform_button:hover,
#gform_3 .gform_button:focus,
#gform_3 .gform_button:active {
    background: var(--color-brand-yellow) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.tte .gform_footer {
    margin-top: 18px;
}

@media (max-width: 782px) {
    /* All Talk-to-an-Expert form text at 16px on mobile. */
    .tte .gform_wrapper,
    .tte .gform_wrapper label,
    .tte .gform_wrapper legend,
    .tte .gform_wrapper .gfield_label,
    .tte .gform_wrapper .gform-field-label,
    .tte .gform_wrapper .gsection_title,
    .tte .gform_wrapper .gfield_consent_label,
    .tte .gform_wrapper .gfield_description,
    .tte .gform_wrapper .gform_required_legend,
    .tte .gform_wrapper .ginput_counter,
    .tte .gchoice label,
    .tte input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    .tte textarea,
    .tte select {
        font-size: 16px !important;
    }
}

@media (max-width: 782px) {
    /* Keep the consent disclaimer smaller than the rest on mobile. */
    .tte .gform_wrapper .gfield_consent_description {
        font-size: 13px !important;
    }
}

/* --- Blog index page ------------------------------------------------------ */
/* Space between the blog listing and the CTA cards below. */
.blog {
    margin-bottom: 100px;
}

.blog__crumb {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-size: var(--eyebrow-font-size);
    font-weight: var(--eyebrow-font-weight);
    color: var(--color-text);
}

.blog__title {
    margin: 0 0 clamp(32px, 4vw, 50px);
    max-width: 12em;
    font-family: var(--font-heading);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: uppercase;
    color: var(--color-dark);
}

.blog__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 360px);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

.blog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px clamp(24px, 3vw, 40px);
}

/* Post card: meta / title / excerpt / image (image floats to the bottom). */
.blog-card {
    display: flex;
    flex-direction: column;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-dark);
    font-family: var(--font-heading);
    font-size: 13px;
}

.blog-card__date {
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

.blog-card__date:hover {
    color: var(--color-primary);
}

.blog-card__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

.blog-card__cat {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.blog-card__cat:hover {
    color: var(--color-primary);
}

/* Mobile: stack the category under the date and drop the blue separator dot. */
@media (max-width: 782px) {
    .blog-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .blog-card__dot {
        display: none;
    }
}

.blog-card__title {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.blog-card__title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

.blog-card__title a:hover {
    color: var(--color-primary);
}

.blog-card__excerpt {
    margin: 0 0 22px;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
    color: var(--color-text);
}

.blog-card__media {
    display: block;
    margin-top: auto;
    border-radius: 20px;
    overflow: hidden;
}

.blog-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Archive/search cards: brand-blue gradient fades in over the image on hover,
   matching the other clickable image links across the site. */
.blog__grid--three .blog-card__media {
    position: relative;
}

.blog__grid--three .blog-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 105, 203, 0.85) 0%,
        rgba(0, 105, 203, 0.55) 35%,
        rgba(0, 105, 203, 0.15) 65%,
        rgba(0, 105, 203, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.65s ease;
    pointer-events: none;
}

.blog__grid--three .blog-card__media:hover::before,
.blog__grid--three .blog-card__media:focus-visible::before {
    opacity: 1;
}

/* Pagination. */
.blog__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(44px, 5vw, 70px);
}

.blog__pagination .page-numbers {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 21.667101px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

@media (max-width: 782px) {
    .blog__pagination .page-numbers {
        font-size: 13px;
        line-height: 22.4px;
    }
}

/* Hover on any link, and the current page, use the brand blue. */
.blog__pagination a.page-numbers:hover,
.blog__pagination a.page-numbers:focus-visible,
.blog__pagination .page-numbers.current {
    color: var(--color-primary);
}

/* Previous/Next on the first/last page: shown but muted and non-interactive. */
.blog__pagination .page-numbers.is-disabled {
    color: var(--color-muted);
    pointer-events: none;
    cursor: default;
}

/* Sidebar. */
.blog-search {
    position: relative;
}

.blog-search__input {
    width: 100%;
    min-width: 0;
    padding: 10px 44px 10px 0;
    border: 0;
    border-bottom: 1px solid var(--color-dark);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    color: var(--color-dark);
    outline: none;
}

.blog-search input.blog-search__input:focus {
    border-color: #000 !important;
}

/* Hide the native WebKit "clear" (✕) control that appears while typing. */
.blog-search__input::-webkit-search-cancel-button,
.blog-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.blog-search__btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-dark);
}

.blog-search__btn svg {
    width: 22px;
    height: 22px;
}

/* Archive/search: the sidebar search is a bordered, rounded box (the blog index
   keeps the underline style). */
body.archive .blog-search__input,
body.search .blog-search__input {
    padding: 14px 48px 14px 20px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

body.archive .blog-search__btn,
body.search .blog-search__btn {
    right: 16px;
}

.blog-widget {
    margin-top: clamp(36px, 4vw, 52px);
}

.blog-widget__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-dark);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-dark);
}

.blog-widget__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--color-dark);
}

.blog-widget__arrow svg {
    width: 20px;
    height: 20px;
}

.blog-widget__list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
}

.blog-widget__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.blog-widget__list a {
    color: var(--color-text);
    font-size: var(--body-font-size);
    text-decoration: none;
    transition: color var(--transition);
}

.blog-widget__list a:hover {
    color: var(--color-primary);
}

.blog-widget__count {
    flex: 0 0 auto;
    font-size: var(--body-font-size);
    color: var(--color-text);
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

.blog-tag {
    padding: 12px 20px;
    background: #f1f1f1;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: color var(--transition);
}

.blog-tag:hover {
    color: var(--color-primary);
}

.blog-subscribe__text {
    margin: 18px 0 10px;
    font-size: var(--body-font-size);
    line-height: 1.6;
    color: var(--color-text);
}

.blog-subscribe .blog-subscribe__form input {
    width: 100%;
    padding: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    color: var(--color-dark);
    outline: none;
}

/* Keep the underline black on hover/focus (no colour change). */
.blog-subscribe .blog-subscribe__form input:hover,
.blog-subscribe .blog-subscribe__form input:focus {
    border-bottom-color: #000;
}

/* Subscribe button pops out below the field, left-aligned, once revealed
   (same shared .mcc-subscribe styling as the header/footer newsletters). */
.blog-subscribe__form .mcc-newsletter-reveal.is-visible {
    margin-top: 12px;
}

.blog-subscribe__consent {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text);
}

.blog-subscribe__consent a {
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    /* Sidebar drops below the posts on tablets. */
    .blog__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(48px, 7vw, 64px);
    }
}

@media (max-width: 782px) {
    .blog__title {
        font-size: 35px;
        line-height: 40px;
    }

    /* Single-column posts; image moves to the top, excerpt hidden. */
    .blog__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-card__media {
        order: -1;
        margin-top: 0;
        margin-bottom: 16px;
    }

    .blog-card__excerpt {
        display: none;
    }
}

/* Archive/search title is 60px (vs the 80px blog-index title). */
.blog__title--archive {
    font-size: 60px;
    line-height: 63px;
}

@media (max-width: 782px) {
    .blog__title--archive {
        font-size: 35px;
        line-height: 40px;
    }
}

/* Archive/search cards: the divider sits below the meta row (not at the very
   top of the card). */
.blog__grid--three .blog-card {
    padding-top: 0;
    border-top: 0;
}

.blog__grid--three .blog-card__meta {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-dark);
}

/* Archive/search results pack 3 per row (2 on tablet, 1 on mobile). */
.blog__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .blog__grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    .blog__grid--three {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Archive/search on mobile keep the desktop stacking order — meta, divider,
       title, description, then the image at the bottom (not moved to the top),
       with the description shown. Row gap stays 80px from .blog__grid. */
    .blog__grid--three .blog-card__media {
        order: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .blog__grid--three .blog-card__excerpt {
        display: block;
    }

    /* Date and category on one line with the brand-blue dot between them. */
    .blog__grid--three .blog-card__meta {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .blog__grid--three .blog-card__dot {
        display: block;
        width: 8px;
        height: 8px;
    }

    .blog__grid--three .blog-card__date,
    .blog__grid--three .blog-card__date time {
        text-decoration: none;
    }
}

/* ==========================================================================
   Single post (single.php) + Latest Posts sidebar widget
   Layout reuses the .blog__inner grid (main column + global sidebar).
   ========================================================================== */

.single-post {
    margin-bottom: 100px;
}

.single-post__main {
    min-width: 0;
}

.single-post__head {
    min-width: 0;
}

/* Two-column single post (desktop only — the sidebar stacks below at <=1024px).
   The left column stacks header (row 1) over the article body (row 2); the
   sidebar sits in row 2 / column 2, so it starts level with the featured image
   while the title, meta bar and social icons stay left-column width. */
@media (min-width: 1025px) {
    .svc-section.single-post .blog__inner {
        row-gap: clamp(30px, 3.5vw, 40px);
    }

    .single-post__head {
        grid-column: 1;
        grid-row: 1;
    }

    .single-post__main {
        grid-column: 1;
        grid-row: 2;
    }

    .single-post__main + .blog__sidebar {
        grid-column: 2;
        grid-row: 2;
    }

    /* Row-gap already provides the header→image spacing; drop the body's own
       leading margin so the sidebar aligns exactly with the image top. */
    .single-post__main > :first-child {
        margin-top: 0;
    }
}

/* "View All Posts" link sitting above the title (in place of an eyebrow). */
.single-post__back {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-dark);
    /* Underline is a thin gradient anchored bottom-right (spanning through the
       end of the chevron) that shrinks to the right on hover */
    background-image: linear-gradient(0deg, currentColor 0%, currentColor 100%);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 100% 0.0625em;
    /* Shrink is immediate on hover-in (--back-delay 0s); on hover-out the line
       grows back after a short beat (0.2s) as the chevron clears. */
    transition: background-size 0.2s linear var(--back-delay, 0.2s);
}

/* Keep the link black on hover/focus (overrides the global a:hover colour). */
.single-post__back:hover,
.single-post__back:focus-visible {
    color: var(--color-dark);
}

.single-post__back:hover {
    background-size: 0% 0.0625em;
    --back-delay: 0s;
}

/* Diagonal (↗) arrow gives way to a right chevron (›) that slides in from the
   left as the underline finishes retracting — reads as one continuous motion. */
.single-post__back-arrow {
    position: relative;
    display: inline-flex;
    width: 15px;
    height: 15px;
}

.single-post__back-arrow svg {
    position: absolute;
    inset: 0;
    width: 15px;
    height: 15px;
}

.single-post__back-arrow-diagonal {
    transform: scale(0.78);
    /* Fades out at once on hover-in; fades back in with the underline (0.3s)
       on hover-out. */
    transition: opacity 0.2s linear var(--diag-delay, 0.2s);
}

/* Chevron rises from underneath with a little bounce.
   Hover-in : appears AFTER the underline has retracted (--chev-delay 0.2s).
   Hover-out: disappears FIRST, immediately (--chev-delay 0s), before the line
              and diagonal come back. */
.single-post__back-arrow-chevron {
    opacity: 0;
    transform: translateY(10px) rotate(90deg);
    transition:
        opacity var(--chev-dur, 0.2s) var(--chev-ease, ease) var(--chev-delay, 0s),
        transform var(--chev-dur, 0.2s) var(--chev-ease, ease) var(--chev-delay, 0s);
}

.single-post__back:hover .single-post__back-arrow-diagonal {
    opacity: 0;
    --diag-delay: 0s;
}

.single-post__back:hover .single-post__back-arrow-chevron {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    --chev-delay: 0.2s;
    --chev-dur: 0.45s;
    --chev-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Article H1 uses its own type — not the global 80px h1. */
.single-post__title {
    margin: 0 0 22px;
    max-width: 100%;
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 63px;
    text-transform: uppercase;
    color: var(--color-dark);
}

/* Sub-head (ACF) below the article title. */
.single-post__subhead {
    margin: 0 0 26px;
    max-width: 34em;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-transform: none;
    color: var(--color-dark);
}

/* Blue intro excerpt, below the featured image. Fixed type for every article. */
.single-post__excerpt {
    margin: clamp(30px, 3.5vw, 40px) 0 0;
}

.single-post__excerpt p {
    margin: 0 0 0.6em;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 900;
    line-height: 36px;
    letter-spacing: -0.96px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.single-post__excerpt p:last-child {
    margin-bottom: 0;
}

/* Date • category on the left, share icons on the right, over a top rule. */
.single-post__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.single-post__meta-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 13px;
}

.single-post__date {
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-dark);
}

.single-post__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

.single-post__cat {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition);
}

.single-post__cat:hover {
    color: var(--color-primary);
}

.single-post__share {
    display: flex;
    align-items: center;
    gap: 32px;
}

.single-post__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-dark);
    transition: color var(--transition);
}

.single-post__share-btn svg {
    width: 17px;
    height: 17px;
}

.single-post__share-btn:hover {
    color: var(--color-primary);
}

.single-post__media {
    margin: clamp(30px, 3.5vw, 40px) 0 0;
    border-radius: 16px;
    overflow: hidden;
}

.single-post__media img {
    display: block;
    width: 100%;
    max-height: 443px;
    object-fit: cover;
    /* Bias the crop toward the top so faces/subjects (usually in the upper part
       of a photo) stay visible instead of being cut off. Override per post with
       an inline style, e.g. style="object-position: center 60%". */
    object-position: center 5%;
}

/* ---- Post body (Gutenberg content) ---------------------------------- */
.post-content {
    margin-top: clamp(30px, 3.5vw, 40px);
}

/* Author-pasted tables / code blocks scroll within their own box instead of
   overflowing the page on mobile. */
.post-content :is(table, pre) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.post-content > * {
    margin-top: 0;
    margin-bottom: 1.5em;
}

.post-content > *:last-child {
    margin-bottom: 0;
}

.post-content p {
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    /* Tight body leading on posts: 1.2 = 15.6px at the 13px body size (and scales
       safely with the 16px mobile size instead of a fixed px that would overlap). */
    line-height: 1.2;
    color: var(--color-text);
}

/* Post-body H2s match the site-wide section-heading scale (60px / 400 / -1.8px
   desktop, fluid on tablet, 30px on mobile) so blog headings read like the rest
   of the site. */
.post-content h2 {
    margin-top: 50px;
    margin-bottom: 50px;
    font-family: var(--font-heading);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: var(--h2-line-height);
    letter-spacing: -1.8px;
    text-transform: uppercase;
    color: var(--color-dark);
}

/* Tablet range: scale fluidly like the global section titles (avoids the
   30px→60px jump overflowing the narrower column). */
@media (min-width: 783px) and (max-width: 1024px) {
    .post-content h2 {
        font-size: clamp(30px, 4.2vw, 48px);
        line-height: 1.08;
    }
}

.post-content h3 {
    margin-top: 1.2em;
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-dark);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Closing call-out: the post's last H2 and the copy beneath it render inside a
   dark, rounded card with white type (wrapped server-side by
   mcc_wrap_post_closing_section()). Responsive padding/radius for every device. */
.single-post__closing {
    margin-top: clamp(40px, 5vw, 64px);
    padding: clamp(28px, 4.5vw, 72px) 40px;
    border-radius: clamp(18px, 2.2vw, 30px);
    background: var(--color-dark);
    color: var(--color-white);
}

.single-post__closing > * {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.single-post__closing > *:last-child {
    margin-bottom: 0;
}

/* First H2 hugs the top of the card; keep the site heading scale but white. */
.single-post__closing h2 {
    margin-top: 0;
    margin-bottom: clamp(22px, 3vw, 40px);
    color: var(--color-white);
}

.single-post__closing :is(p, li) {
    color: var(--color-white);
}

.single-post__closing a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-content strong {
    font-weight: 700;
    color: var(--color-dark);
}

.post-content img {
    max-width: 100%;
    height: auto;
}

/* Blue-check bullet lists, matching the article design. */
.post-content ul {
    list-style: none;
    padding: 0;
}

.post-content ul li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 32px;
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
    color: var(--color-text);
}

.post-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5' stroke='%230069cb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.post-content ol {
    padding-left: 1.2em;
}

.post-content ol li {
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
    color: var(--color-text);
}

/* Lists inside the dark closing card: white text, brand-yellow checkmarks. */
.single-post__closing ul li,
.single-post__closing ol li {
    color: var(--color-white);
}

.single-post__closing ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5' stroke='%23FFC600' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.post-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 24px;
    border-left: 3px solid var(--color-primary);
    font-style: italic;
    color: var(--color-dark);
}

/* ---- Prev / Next navigation ----------------------------------------- */
.single-post__nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(40px, 5vw, 64px);
}

.single-post__nav-next {
    margin-left: auto;
    text-align: right;
}

.single-post__nav a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-dark);
    transition: color var(--transition);
}

.single-post__nav a:hover {
    color: var(--color-primary);
}

/* The title sets its own colour, so turn it blue on hover too. */
.single-post__nav a:hover .single-post__nav-title {
    color: var(--color-primary);
}

.single-post__nav a svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.single-post__nav-inner {
    display: flex;
    flex-direction: column;
}

.single-post__nav-next .single-post__nav-inner {
    align-items: flex-end;
}

.single-post__nav-label {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.single-post__nav-title {
    /* Stay on one line until the title would exceed ~30% of the screen. */
    max-width: 30vw;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    color: var(--color-text);
}

/* ---- Latest Posts sidebar widget ------------------------------------ */
.blog-latest {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.blog-latest__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.blog-latest__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-latest__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-latest__title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}

.blog-latest__title:hover {
    color: var(--color-primary);
}

/* Archive description (category/tag intro), if any. */
.blog__intro {
    margin: -20px 0 clamp(32px, 4vw, 50px);
    max-width: 60ch;
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
    color: var(--color-text);
}

@media (max-width: 782px) {
    .single-post {
        margin-bottom: 64px;
    }

    .single-post__title {
        font-size: 40px;
        line-height: 44px;
    }

    /* Stack date/category above the share icons. */
    .single-post__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .post-content h2 {
        font-size: 30px;
        line-height: 36px;
    }

    /* Mobile prev/next shows only the label + arrow (no title). */
    .single-post__nav-title {
        display: none;
    }
}

/* ==========================================================================
   Our Team (page-our-team.php) — "Powered by People" header + quote, then
   team_member cards grouped by team_group. Colour headshots greyscale on hover
   while the corner "+" turns brand-blue.
   ========================================================================== */

/* Two-column header: crumb/title/intro on the left, black quote card right. */
.team-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

/* Team page title is smaller than the global h1 (scoped to this header). */
.team-head .loc-head__title {
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    letter-spacing: -1.8px;
}

@media (max-width: 782px) {
    .team-head .loc-head__title {
        font-size: 30px;
        font-weight: 400;
        line-height: 35px;
    }
}

.team-head__intro {
    max-width: 760px;
    margin-top: 20px;
}

.team-head__intro p {
    margin: 0 0 1em;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.7;
    color: var(--color-text);
}

.team-head__intro p:last-child {
    margin-bottom: 0;
}

/* Black rounded quote card: gold outlined mark beside the text + attribution. */
.team-quote {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 40px);
    margin: 0;
    padding: 55px 30px;
    background: #15191d;
    border-radius: 25px;
    color: var(--color-white);
}

.team-quote__mark {
    flex: 0 0 auto;
    width: clamp(56px, 6vw, 92px);
    height: auto;
    align-self: flex-start;
    margin-top: 4px;
}

.team-quote__body {
    min-width: 0;
}

@media (max-width: 782px) {
    /* Stack the quotation mark above the text, both left-aligned. */
    .team-quote {
        flex-direction: column;
        align-items: flex-start;
    }
}

.team-quote__text {
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 21.6px;
    letter-spacing: -0.54px;
    color: var(--color-white);
}

.team-quote__by {
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Team grid ------------------------------------------------------------ */
.team {
    margin-bottom: 0;
}

/* Desktop: tab switcher; only the active group's grid shows, titles hidden. */
.team__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, 4vw, 56px);
    margin-bottom: 30px;
}

.team__tab {
    position: relative;
    margin: 0;
    padding: 0 0 10px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    color: var(--color-dark);
    transition: color var(--transition);
}

.team__tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.team__tab:hover,
.team__tab.is-active {
    color: var(--color-primary);
}

.team__tab:hover::after,
.team__tab.is-active::after {
    transform: scaleX(1);
}

.team__group {
    display: none;
}

.team__group.is-active {
    display: block;
}

.team__group-title {
    display: none;
    margin: 0 0 clamp(24px, 3vw, 40px);
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-dark);
}

/* Flex (not grid) so an incomplete final row centers instead of left-aligning.
   Card width is derived from the column count so full rows still fill edge to
   edge; only orphan rows get centered. */
.team__grid {
    --team-cols: 4;
    --team-col-gap: clamp(20px, 2.4vw, 32px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px var(--team-col-gap);
}

.team-card {
    flex: 0 0 calc((100% - (var(--team-cols) - 1) * var(--team-col-gap)) / var(--team-cols));
    max-width: calc((100% - (var(--team-cols) - 1) * var(--team-col-gap)) / var(--team-cols));
}

.team__empty {
    font-size: var(--body-font-size);
    color: var(--color-text);
}

.team-card {
    display: flex;
    flex-direction: column;
}

/* Colour photo that greyscales on hover; the corner "+" turns blue. Fixed
   height; the image fills that height and keeps its natural ratio (centered,
   sides cropped if wider) so it never distorts. */
.team-card__media {
    position: relative;
    display: block;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-light);
    text-decoration: none;
}

.team-card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Cover the whole box (no grey showing), no distortion. A slight zoom + shift
   nudges the image down while keeping the box fully covered. */
.team-card__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.4) translateY(12%);
    transform-origin: center;
    filter: grayscale(0%);
    transition: filter 0.4s ease;
}

.team-card__img--placeholder {
    width: 100%;
    background: linear-gradient(160deg, #e7ebef 0%, #d7dde3 100%);
}

.team-card__media:hover .team-card__img,
.team-card__media:focus-visible .team-card__img {
    filter: grayscale(1);
}

.team-card__plus {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: #fff;
    transition: color 0.45s ease;
    pointer-events: none;
}

.team-card__plus svg {
    width: 100%;
    height: 100%;
}

.team-card__media:hover .team-card__plus,
.team-card__media:focus-visible .team-card__plus {
    color: var(--color-primary);
}

/* LinkedIn mark (cards that have a link) — fades in on hover, bottom-right. */
.team-card__in {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s ease, color 0.35s ease;
    pointer-events: none;
}

.team-card__in svg {
    width: 100%;
    height: 100%;
}

.team-card__media:hover .team-card__in,
.team-card__media:focus-visible .team-card__in {
    opacity: 1;
    color: var(--color-primary);
}

.team-card__name {
    margin: 16px 0 4px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    color: var(--color-dark);
}

.team-card__name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

.team-card__media:hover + .team-card__name a,
.team-card__name a:hover,
.team-card__name a:focus-visible {
    color: var(--color-primary);
}

.team-card__role {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
}

/* ---- Single team member (leadership detail) ------------------------------- */
.team-single {
    padding-bottom: 100px;
}

.team-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 52px);
    align-items: start;
}

.team-single__media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-light);
}

.team-single__img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
}

.team-single__img--placeholder {
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #e7ebef 0%, #d7dde3 100%);
}

.team-single__body {
    padding-top: 6px;
}

.team-single__title {
    margin: 6px 0 0;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.8px;
}

.team-single__role {
    margin: 10px 0 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

.team-single__divider {
    display: block;
    width: 40px;
    height: 3px;
    margin: 15px 0;
    background: var(--color-brand-yellow);
    border-radius: 2px;
}

.team-single__bio {
    max-width: 700px;
}

.team-single__bio p {
    margin: 0 0 1.1em;
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    color: var(--color-text);
}

.team-single__bio p:last-child {
    margin-bottom: 0;
}

.team-single__back {
    margin-top: 25px;
}

@media (max-width: 782px) {
    .team-single {
        padding-bottom: 0;
    }

    .team-single__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .team-single__title {
        letter-spacing: -0.5px;
    }
}

@media (max-width: 1024px) {
    .team__grid {
        --team-cols: 3;
    }
}

@media (max-width: 1024px) {
    /* Quote card drops below the heading on tablets. */
    .team-head__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(30px, 5vw, 44px);
    }
}

@media (max-width: 782px) {
    .team {
        margin-bottom: 64px;
    }

    .team__grid {
        --team-cols: 1;
        row-gap: 30px;
    }

    .team-card__name {
        margin: 10px 0 4px 20px;
    }

    .team-card__role {
        margin-left: 20px;
    }

    /* Mobile: no tabs — every group stacks with its title as a divider. */
    .team__tabs {
        display: none;
    }

    .team__group,
    .team__group.is-active {
        display: block;
    }

    .team__group + .team__group {
        margin-top: clamp(48px, 8vw, 64px);
    }

    .team__group-title {
        display: block;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--color-black);
        font-size: 25px;
        font-weight: 600;
        text-transform: capitalize;
        color: var(--color-black);
    }
}

/* Body-text + button sections (mobile): 30px between body paragraphs and 40px
   total above the single CTA. Scoped per-section so only prose-with-a-button
   blocks are affected (heroes, card grids, CTA groups are untouched). Matches
   the home-about pattern. Blog pages intentionally excluded. */
@media (max-width: 782px) {
    /* Transportation — svc-callout */
    .svc-callout .svc-prose p:not(:last-child) {
        margin-bottom: 30px;
    }

    .svc-callout__cta {
        margin-top: 40px;
    }

    /* Installation — integrated services intro */
    .svc-integrated__intro p:not(:last-child) {
        margin-bottom: 30px;
    }

    .svc-integrated__cta {
        margin-top: 40px;
    }

    /* Aerospace — overview */
    .svc-prose--aerospace .svc-prose__lead {
        margin-bottom: 30px;
    }

    .svc-prose--aerospace .svc-prose__cols {
        margin-top: 0;
    }

    .svc-cta-right {
        margin-top: 40px;
    }

    /* Commercial relocation — technical services */
    .svc-techsvc .svc-prose p:not(:last-child) {
        margin-bottom: 30px;
    }

    .svc-techsvc .svc-cta-right {
        margin-top: 40px;
    }

    /* Fitness — heavy lifting (single paragraph, so only the button gap moves) */
    .svc-heavylift__cta {
        margin-top: 40px;
    }

    /* Logistics — freight brokerage (single closing paragraph) */
    .svc-freight__inner > .svc-freight__cta {
        margin-top: 40px;
    }
}

/* Consistent 10px row-gap between line items on mobile, for lists whose items
   carry no padding or top/bottom margin. Skips faq / terms / services lists
   (their items have their own padding/margin). Placed last so it wins the
   source-order cascade over each list's own gap. */
@media (max-width: 782px) {
    .svc-avcaps__list,
    .svc-wms__benefits,
    .svc-checklist__list,
    .svc-whychoose__list,
    .svc-package__list,
    .svc-freight__caps,
    .svc-capblock__list,
    .careers-checklist,
    .svc-freight__list,
    .svc-features__list {
        row-gap: 10px;
    }
}

/* Any 28px bottom margin steps down to 20px on mobile, sitewide. Placed last so
   it wins over each element's base margin. */
@media (max-width: 782px) {
    .svc-integrated__icon,
    .svc-oemconf__lead,
    .svc-avcaps__list,
    .svc-avcaps__text,
    .contact-hero__eyebrow {
        margin-bottom: 20px;
    }
}

/* Responsive heading line break: shown only on mobile (hidden by default). */
.section-head__title .br--mobile {
    display: none;
}

@media (max-width: 782px) {
    /* Commercial relocation capability-block title steps to 25px on mobile. */
    .svc-capblock__title {
        font-size: 25px;
    }

    /* Capability-block list title matches the global h4 styling on mobile. */
    .svc-capblock__list-title {
        font-size: var(--h4-font-size);
        font-weight: var(--h4-font-weight);
        line-height: var(--h4-line-height);
        text-transform: none;
    }

    /* Overview title breaks after "Reduce" (not after "Risk,") on mobile so
       "Risk, Stress, And Downtime" stays on one line. */
    .section-head__title .br--mobile {
        display: inline;
    }

    .section-head__title .br--desktop {
        display: none;
    }

    /* Residential relocation: keep "Government & Military Families" on one line
       on mobile (drop the hard break in that card title). */
    .page-residential-relocation .svc-integrated__title br {
        display: none;
    }

    /* Large logo marquee: 70px top/bottom margin on mobile (was 100px). */
    .svc-logos--lg {
        margin-block: 70px;
    }

    /* Aviation/av-caps intro has no bottom spacing of its own — add 70px below
       it on mobile. */
    .svc-avcaps__intro {
        margin-bottom: 70px;
    }

    /* Technical Services: all h3 headings are 25px/30px on mobile. */
    .page-technical-services h3 {
        font-size: 25px;
        line-height: 30px;
    }

    /* Fitness: the freight sub-headings use the 25px h3 styling on mobile
       (matches the capabilities subtitle); kept white for the dark section. */
    .svc-freight__sub {
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
        letter-spacing: -0.75px;
        text-transform: none;
    }

    /* Fitness: the capabilities list title uses the global h4 styling on mobile. */
    .page-fitness .svc-avcaps__list-title {
        font-size: var(--h4-font-size);
        font-weight: var(--h4-font-weight);
        line-height: var(--h4-line-height);
        letter-spacing: 0;
    }

    /* Fitness: capabilities subtitle sizing on mobile. */
    .page-fitness .svc-avcaps__subtitle {
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -0.75px;
        line-height: 30px;
    }

    /* Page-header h1 (History, FAQs) uses the global 35px/40px h1 size on mobile
       (it otherwise stays at the 80px desktop token). */
    .hist-head__title {
        font-size: 35px;
        line-height: 40px;
    }

    /* History timeline slides side to side (not up/down) on mobile — the JS
       switches the transform to translateX to match (components.js). */
    .hist-slider__stage {
        flex-direction: row;
    }

    /* 2025 slide: shift the framing on mobile so the person stays visible. */
    .hist-slider__slide[data-hist-slide="8"] {
        background-position-x: 70%;
    }

    /* Locations page: tighter top padding on the locator on mobile (was 32px). */
    .loc-locator {
        padding-block-start: 20px;
    }

    /* Locations "more" section: 50px top margin on mobile (svc-integrated sections
       are otherwise zeroed at the top). */
    .svc-section.svc-integrated.loc-more {
        margin-top: 50px;
    }

    /* Contact us "More About McCollister's" section: 50px top margin on mobile. */
    .page-contact-us .svc-section.svc-integrated {
        margin-top: 50px;
    }

    /* Deep-linked accordion tab aligns near the top of the screen on mobile
       (the sticky header slides off on scroll-down, so no large offset is
       needed) — the tabs above it scroll out of view. */
    .svc-tabs__tab {
        scroll-margin-top: 10px;
    }
}