.button,
.wp-element-button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
}

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

.button--primary:hover,
.button--primary:focus-visible {
    color: var(--color-white);
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.button--outline-light {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.75);
}

.button--outline-light:hover,
.button--outline-light:focus-visible {
    color: var(--color-navy);
    background: var(--color-white);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Global button ---------------------------------------------------------
   The site-wide button: an outline pill with an arrow box on the right. On
   hover an ink fill sweeps in from the right, the label flips to the paper
   colour and nudges toward the arrow, and the arrow "shots" back-then-forward.
   Two custom properties recolour it for any background — --btn-ink (border,
   label, arrow box, sweep fill) and --btn-paper (the contrast against it). The
   default suits dark backgrounds (white ink); add .mcc-btn--on-light on light
   backgrounds to flip to dark ink. */
.mcc-btn {
    --btn-ink: var(--color-white);
    --btn-paper: var(--color-black);
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-height: 43px;
    overflow: hidden;
    color: var(--btn-ink);
    text-decoration: none;
    /* Outline is drawn as an INSET shadow, not a border, so the arrow tab can
       clip to the very same edge and cover it flush on the right — a real 1px
       border sits on the border-box while overflow clips children to the
       padding-box, which leaves a 1px ring around the tab. */
    box-shadow: inset 0 0 0 1px var(--btn-ink);
    border-radius: 10px;
}

.mcc-btn--on-light {
    --btn-ink: var(--color-black);
    --btn-paper: var(--color-white);
}

/* Ink fill that sweeps in from the arrow box (right) on hover/focus. */
.mcc-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--btn-ink);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.55s ease;
}

.mcc-btn:hover::before,
.mcc-btn:focus-visible::before {
    transform: scaleX(1);
}

.mcc-btn__label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    /* Right padding = the tab's visible width (45px) + a 1.71em inset that
       matches the left inset, so the title has equal breathing space on both
       sides with the tab flush on the far right. */
    padding: 1em calc(45px + 1.71em) 1em 1.71em;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--btn-ink);
    transition: color 0.55s ease, transform 0.55s ease;
}

.mcc-btn:hover .mcc-btn__label,
.mcc-btn:focus-visible .mcc-btn__label {
    color: var(--btn-paper);
    transform: translateX(8px);
}

/* Button label is lighter (600) on mobile, globally. The tab geometry (flush,
   pinned px) now lives on the base rule so it applies on every device. */
@media (max-width: 782px) {
    .mcc-btn__label {
        font-weight: 600;
    }
}

/* Arrow box: an ink-filled, rounded box pinned inside the label's right
   padding (like the reference's absolutely-positioned ::after). Its border
   radius rounds the inner corners too. */
.mcc-btn__arrow {
    position: absolute;
    /* 1px overfill on top/right/bottom so the tab clips flush into the button's
       rounded corners with no gap. Left edge lands at 45px from the right
       (width 46 - 1px overfill); the label reserves 47px so the title always
       clears the tab by ~2px. Pinned in px so it matches the label padding on
       every device. */
    top: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    color: var(--btn-paper);
    background: var(--btn-ink);
    /* Only the inner (left) corners round; the right corners get clipped to the
       button's radius by overflow:hidden. */
    border-radius: 9px 0 0 9px;
}

.mcc-btn__arrow svg {
    display: block;
    width: 17px;
    height: 17px;
}

.mcc-btn:hover .mcc-btn__arrow svg,
.mcc-btn:focus-visible .mcc-btn__arrow svg {
    animation: mcc-btn-arrow-shot 0.5s;
}

/* "Shot": a slow windup back (down-left, opposite the arrow), then a fast snap
   forward. Per-keyframe timing makes the release quicker than the pull-back. */
@keyframes mcc-btn-arrow-shot {
    0% {
        transform: translate(0, 0);
        animation-timing-function: ease-in;
    }

    55% {
        transform: translate(-6px, 6px);
        animation-timing-function: cubic-bezier(0.15, 0.85, 0.25, 1);
    }

    100% {
        transform: translate(0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcc-btn::before {
        transition: none;
    }

    .mcc-btn:hover .mcc-btn__arrow svg,
    .mcc-btn:focus-visible .mcc-btn__arrow svg {
        animation: none;
    }
}

/* --- Heading letter-reveal -------------------------------------------------
   Site-wide entrance effect for section <h2>s. components.js splits each
   heading into .mcc-reveal__word > .mcc-reveal__letter spans (with staggered
   inline animation-delays) and adds .is-revealed when the heading scrolls into
   view. Letters fade in while rising from below — matching the reference. */
/* Each word is a mask: its letters rise from behind it and are clipped to the
   line box, so the animation stays inside the heading instead of overlapping the
   text below it. Extra bottom padding + matching negative margin give descenders
   room without clipping, and shift the mask so the baseline stays put. */
.mcc-reveal__word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    white-space: nowrap;
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
}

.mcc-reveal__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(110%);
    will-change: transform, opacity;
}

.mcc-reveal.is-revealed .mcc-reveal__letter {
    animation:
        mcc-reveal-fade 0.35s forwards,
        mcc-reveal-rise 0.7s cubic-bezier(0.26, -0.14, 0, 1.01) forwards;
}

@keyframes mcc-reveal-fade {
    to {
        opacity: 1;
    }
}

@keyframes mcc-reveal-rise {
    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcc-reveal__letter {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* --- Video button (global) -------------------------------------------------
   Plain white pill with just a label (no arrow box); fills brand yellow on
   hover. Used anywhere a "Watch our video" trigger appears. */
.mcc-video-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 26px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.mcc-video-btn:hover,
.mcc-video-btn:focus-visible {
    color: var(--color-black);
    background: var(--color-brand-yellow);
    border-color: var(--color-brand-yellow);
}

/* Outline variant for white-background sections: black border, white fill,
   black text; on hover it fills dark grey with white text (no yellow). */
.mcc-video-btn--outline {
    color: var(--color-black);
    background: var(--color-white);
    border-color: var(--color-black);
}

.mcc-video-btn--outline:hover,
.mcc-video-btn--outline:focus-visible {
    color: var(--color-white);
    background: rgb(51, 51, 51);
    border-color: rgb(51, 51, 51);
}

/* Lighter label weight on mobile, matching the other buttons. */
@media (max-width: 782px) {
    .mcc-video-btn {
        font-weight: 600;
    }
}

.eyebrow {
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Global eyebrow sizing: 13px / 500 across every eyebrow variant, driven by the
   design tokens. The `body` prefix raises specificity so it wins over the
   per-section eyebrow rules regardless of stylesheet load order. */
body :is(
    .eyebrow,
    .section-head__eyebrow,
    .home-services__eyebrow,
    .home-about__eyebrow,
    .home-features__eyebrow,
    .home-industries__eyebrow,
    .home-stats__eyebrow,
    .home-blog__eyebrow,
    .loc-head__crumb,
    .hist-head__crumb
) {
    font-size: var(--eyebrow-font-size);
    font-weight: var(--eyebrow-font-weight);
    /* Consistent 10px gap under every section eyebrow. */
    margin-bottom: 10px;
}

/* Global h2 heading size/weight: 60px / 400 (design tokens) across every
   section-title variant. body prefix wins over the per-section rules
   regardless of load order; mobile scales down so titles don't overflow. */
body :is(
    .section-head__title,
    .svc-expertise__title,
    .svc-whychoose__title,
    .svc-freight__title,
    .svc-levels__packages-title,
    .home-services__title,
    .home-about__title,
    .home-features__title,
    .home-industries__title,
    .home-stats__title,
    .home-testimonials__title,
    .home-blog__title,
    .careers-dark__title
) {
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: var(--h2-line-height);
    letter-spacing: -1.8px;
}

@media (max-width: 782px) {
    body :is(
        .section-head__title,
        .svc-expertise__title,
        .svc-whychoose__title,
        .svc-freight__title,
        .svc-levels__packages-title,
        .contact-hero__title,
        .home-services__title,
        .home-about__title,
        .home-features__title,
        .home-industries__title,
        .home-stats__title,
        .home-testimonials__title,
        .home-blog__title,
        .careers-dark__title
    ) {
        font-size: 30px;
        line-height: 36px;
    }

    /* The other h2 titles carry -1.8px letter-spacing from their base rule;
       the contact hero title isn't in that list, so match it here on mobile. */
    .contact-hero__title {
        letter-spacing: -1.8px;
    }
}

/* Tablet range (783–1024px): the theme jumps straight from the 30px mobile
   size to the 60px desktop size, which overflows the narrower viewport and lets
   titles overlap the body column (home-about, features, testimonials). Scale
   the section H2 fluidly through this band so it fits. */
@media (min-width: 783px) and (max-width: 1024px) {
    body :is(
        .section-head__title,
        .svc-expertise__title,
        .svc-whychoose__title,
        .svc-freight__title,
        .svc-levels__packages-title,
        .contact-hero__title,
        .home-services__title,
        .home-about__title,
        .home-features__title,
        .home-industries__title,
        .home-stats__title,
        .home-testimonials__title,
        .home-blog__title,
        .careers-dark__title
    ) {
        font-size: clamp(30px, 4.2vw, 48px);
        line-height: 1.08;
    }
}

/* Global body / reading text: 13px / 500 across sections, driven by the body
   tokens. The `body` prefix wins over the per-section paragraph rules. */
body :is(
    .section-head__lead,
    .svc-prose p,
    .svc-tabs__desc,
    .svc-faq__panel p,
    .home-service__desc,
    .home-about__body p,
    .home-features__panel p,
    .home-stat__desc,
    .home-blog__excerpt
) {
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
}

/* Body text on dark backgrounds is a touch heavier (600) for legibility on
   desktop; on mobile the larger 16px text reads fine at the standard 500. */
body :is(
    .svc-expertise__prose p,
    .home-about__body p,
    .home-stat__desc
) {
    font-weight: 600;
}

@media (max-width: 782px) {
    body :is(
        .svc-expertise__prose p,
        .home-about__body p,
        .home-stat__desc
    ) {
        font-weight: 500;
    }

    /* 22.4px line-height on all body text on mobile. */
    body :is(
        .section-head__lead,
        .svc-services__intro,
        .svc-prose p,
        .svc-tabs__desc,
        .svc-tabs__prose p,
        .svc-faq__panel p,
        .svc-freight__prose p,
        .svc-freight__col-intro,
        .svc-freight__col-closing,
        .svc-integrated__text,
        .svc-caps__text,
        .svc-features__text,
        .svc-certs__caption,
        .home-service__desc,
        .home-about__body p,
        .home-features__panel p,
        .home-stat__desc,
        .home-blog__excerpt,
        .svc-expertise__prose p
    ) {
        line-height: 22.4px;
    }

    /* 22.4px line-height on all content list items on mobile (was 24px). */
    body :is(
        .svc-faq__panel,
        .svc-services__list,
        .svc-features__list,
        .svc-wms__benefits,
        .svc-freight__caps,
        .svc-freight__caps--tall,
        .svc-freight__caps--tall7,
        .svc-freight__list,
        .svc-package__list,
        .svc-checklist__list,
        .svc-whychoose__list,
        .svc-avcaps__list,
        .svc-capblock__list,
        .careers-checklist
    ) li {
        line-height: 22.4px;
    }
}

/* --- Section head ----------------------------------------------------------
   The site-wide "/ eyebrow /" + big uppercase heading used to open sections.
   Add .section-head--light on dark backgrounds to lighten the text. */
.section-head__eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.section-head__title {
    margin: 0;
    font-size: clamp(38px, 5vw, 74px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.section-head__lead {
    margin: 20px 0 0;
    max-width: 100%;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.7;
}

.section-head--light .section-head__eyebrow {
    color: var(--color-white);
}

/* Eyebrows on dark/black backgrounds are heavier (600) on mobile. Those WITH an
   underline/bottom border (.home-about__eyebrow) keep a 30px gap below; the
   borderless ones sit 10px above the title. */
@media (max-width: 782px) {
    body :is(
        .section-head--light .section-head__eyebrow,
        .home-about__eyebrow,
        .home-stats__eyebrow,
        .home-industries__eyebrow
    ) {
        font-weight: 600;
    }

    /* Borderless dark eyebrows sit 10px above the title. Listed FIRST so the
       bordered rule below wins the specificity tie for eyebrows that are both
       .section-head--light and bordered (svc-expertise / svc-freight). */
    body :is(
        .section-head--light .section-head__eyebrow,
        .home-stats__eyebrow,
        .home-industries__eyebrow
    ) {
        margin-bottom: 10px;
    }

    /* Underlined/bordered eyebrows, sitewide: 10px below the text (inside the
       border) and 30px below the border before the title. */
    body :is(
        .home-about__eyebrow,
        .svc-expertise .section-head__eyebrow,
        .svc-freight .section-head__eyebrow
    ) {
        padding-bottom: 10px;
        margin-bottom: 30px;
    }
}

.section-head--light .section-head__title {
    color: var(--color-white);
}

.section-head--light .section-head__lead {
    color: var(--color-white);
}

.lead {
    max-width: 760px;
    font-size: clamp(18px, 2vw, 22px);
}

.card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.post-card__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.post-card__body {
    padding: 28px;
}

.post-card__meta {
    color: var(--color-muted);
    font-size: 14px;
}

.post-card__title {
    font-size: 26px;
}

.post-card__title a {
    color: inherit;
    text-decoration: none;
}

.text-link {
    font-weight: 700;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-dark);
    background: var(--color-white);
}

textarea {
    min-height: 150px;
}

/* In-place focus indicator, replacing the global outline ring. */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
}

/* --- Newsletter subscribe reveal ---------------------------------------
   Shared by the header dropdowns and the site footer. The wrapper stays
   hidden until navigation.js adds .is-visible (3+ characters typed). */
.mcc-newsletter-reveal {
    display: none;
}

.mcc-newsletter-reveal.is-visible {
    display: block;
}

.mcc-subscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 11px 15px 10px 15px;
    color: var(--color-black);
    background-color: transparent;
    border: 1px solid var(--color-black);
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mcc-subscribe:hover,
.mcc-subscribe:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}