/* ==========================================================================
   Mid-State Industrial Theme - Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    --color-primary: #154B96;
    --color-primary-dark: #0e3670;
    --color-secondary: #1765df;
    --color-accent: #c40505;
    --color-accent-hover: #a00404;
    --color-tan: #F2E0C2;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray-100: #f5f5f7;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-500: #6b7280;
    --color-gray-700: #374151;
    --color-gray-900: #111827;
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --container-width: 1200px;
    --container-wide: 1400px;
    --header-height: 80px;
    --topbar-height: 34px;
    --header-height-scrolled: 64px;
    --topbar-height-scrolled: 26px;
    --service-nav-height: auto;
    --transition: 0.3s ease;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content {
    flex: 1 0 auto;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-900);
    background-color: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.mobile-menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary);
}

ul, ol {
    list-style: none;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
}

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

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.section {
    padding: 5rem 0;
}

.section--gray {
    background-color: var(--color-gray-100);
}

.section__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.section__label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.section__title {
    margin-bottom: 1rem;
}

.section__subtitle {
    font-size: 1.0625rem;
    color: var(--color-gray-500);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.8125rem 1.75rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

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

.btn--primary:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.btn--secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

.btn--secondary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.btn--accent:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn--outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn--large {
    padding: 1rem 2.25rem;
    font-size: 1rem;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* --------------------------------------------------------------------------
   6. Top Bar
   -------------------------------------------------------------------------- */
.top-bar {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.8125rem;
    height: var(--topbar-height);
    transition: height var(--transition), font-size var(--transition);
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.top-bar__contact {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.top-bar__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    transition: color var(--transition);
    white-space: nowrap;
}

.top-bar__contact a:hover {
    color: var(--color-white);
}

.top-bar__contact svg {
    flex-shrink: 0;
}

.top-bar__emergency {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    font-weight: 500;
    font-style: italic;
    white-space: nowrap;
}

.top-bar__sep {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    font-style: normal;
}

/* Hide the emergency text where it would overflow:
   - very small mobile (<480px): phone + emergency line is wider than the viewport
   - tablet zone (768-1023px): top-nav is fighting for space */
@media (max-width: 479.98px),
       (min-width: 768px) and (max-width: 1023.98px) {
    .top-bar__emergency {
        display: none;
    }
}

.top-bar__nav {
    display: none;
}

.top-bar__menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.top-bar__menu li a {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.top-bar__menu li a:hover {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .top-bar__nav {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   7. Site Header
   -------------------------------------------------------------------------- */
/* Sticky header group wraps top-bar + site-header */
.sticky-header-group {
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header {
    background-color: var(--color-white);
    height: var(--header-height);
    box-shadow: var(--shadow-sm);
    transition: height var(--transition);
}

.site-header .container {
    height: 100%;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-header__branding a {
    display: flex;
    align-items: center;
}

.site-header__logo-link {
    display: flex;
    align-items: center;
}

.site-header__logo-img {
    max-height: 55px;
    width: auto;
    transition: max-height var(--transition);
}

.site-header__title {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.site-header__title:hover {
    color: var(--color-secondary);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-header__cta {
    display: none;
    font-size: 0.9375rem;
    padding: 0.6875rem 1.625rem;
}

@media (min-width: 768px) {
    .site-header__cta {
        display: inline-flex;
    }
}

/* Hamburger */
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.hamburger span {
    display: block;
    height: 2.5px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: all var(--transition);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   8. Service Navigation
   -------------------------------------------------------------------------- */
.service-nav {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: none;
    position: sticky;
    top: calc(var(--topbar-height) + var(--header-height));
    z-index: 99;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: top var(--transition);
}

.service-nav__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.service-nav__inner::-webkit-scrollbar {
    display: none;
}

.service-nav__list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.service-nav__list li {
    flex: 1 1 0;
    min-width: 0;
}

.service-nav__list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    line-height: 1.5;
    transition: color var(--transition), background-color var(--transition);
    position: relative;
    min-height: 0;
    max-width: none;
    margin: 0 auto;
}

.service-nav__list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--color-accent);
    transition: width var(--transition);
}

.service-nav__list li a:hover {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.08);
}

.service-nav__list li a:hover::after,
.service-nav__list li.current-menu-item a::after {
    width: 100%;
}

.service-nav__list li.current-menu-item a {
    color: var(--color-white);
}

.service-nav__list li a span {
    display: block;
    max-width: none;
    text-align: center;
}

.service-nav__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
    filter: brightness(0) invert(1);
    transition: opacity var(--transition), transform var(--transition);
}

/* Wider aspect-ratio icons need more width to appear the same visual size */
.service-nav__icon--street-sweeping,
.service-nav__icon--vacuum-excavation {
    width: 46px;
    height: 32px;
}

.service-nav__icon--hydro-excavation {
    width: 52px;
    height: 32px;
}

.service-nav__icon--hydroblasting {
    width: 50px;
    height: 32px;
}

.service-nav__icon--water-truck-services {
    width: 64px;
    height: 36px;
}

.service-nav__icon--storm-drain-cleaning,
.service-nav__icon--cctv-pipeline-inspection,
.service-nav__icon--drain-line-jetting {
    width: 40px;
    height: 32px;
}

.service-nav__list li a:hover .service-nav__icon {
    opacity: 1;
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .service-nav {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   9. Mobile Menu
   -------------------------------------------------------------------------- */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition);
}

.mobile-menu.is-open .mobile-menu__overlay {
    opacity: 1;
}

.mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background-color: var(--color-white);
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-menu.is-open .mobile-menu__panel {
    transform: translateX(0);
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.mobile-menu__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
}

.mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-500);
    transition: color var(--transition);
}

.mobile-menu__close:hover {
    color: var(--color-gray-900);
}

.mobile-menu__content {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

.mobile-menu__section {
    margin-bottom: 1.5rem;
}

.mobile-menu__section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-500);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.mobile-menu__nav li a {
    display: block;
    padding: 0.625rem 0;
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-gray-100);
    transition: color var(--transition);
}

.mobile-menu__nav li a:hover {
    color: var(--color-primary);
}

/* Highlight the menu item for the page the visitor is currently on.
   WordPress adds these classes automatically. */
.mobile-menu__nav li.current-menu-item > a,
.mobile-menu__nav li.current_page_item > a,
.mobile-menu__nav li.current-menu-ancestor > a,
.mobile-menu__nav li.current-page-ancestor > a,
.mobile-menu__nav li a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 700;
    border-left: 3px solid var(--color-primary);
    padding-left: 0.625rem;
    margin-left: -0.625rem;
}

.mobile-menu__cta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
}

/* --------------------------------------------------------------------------
   10. Hero Section
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background-color: var(--color-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.hero__video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    /* iOS Safari can let transformed children escape overflow: hidden.
       clip-path forces clipping; contain: paint creates a paint boundary. */
    clip-path: inset(0);
    contain: paint;
}

.hero__video-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: heroSpinner 0.8s linear infinite;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.hero__video-wrap--loaded::after {
    opacity: 0;
    pointer-events: none;
}

@keyframes heroSpinner {
    to { transform: rotate(360deg); }
}

.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 177.78vh; /* 16:9 aspect ratio */
    height: 56.25vw;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero__video--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 42, 92, 0.65) 0%, rgba(21, 75, 150, 0.55) 50%, rgba(23, 101, 223, 0.45) 100%);
    z-index: 1;
}

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

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .hero__grid {
        grid-template-columns: 1fr auto;
        gap: 3rem;
    }
}

.hero__content {
    max-width: 720px;
    padding: 4rem 0;
}

.hero__logo {
    display: none;
}

@media (min-width: 768px) {
    .hero__logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.hero__logo-img {
    max-width: 280px;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.hero__title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 1.25rem;
    line-height: 1.1;
}

.hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.1875rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   10b. Promo Banner
   -------------------------------------------------------------------------- */
.promo-banner {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-primary-dark);
    text-decoration: none;
    color: var(--color-white);
    border-top: 4px solid var(--color-primary);
}

.promo-banner__bg {
    position: absolute;
    inset: 0;
    background: url('/wp-content/uploads/mid-state-industrial-050.jpg') center 40% / cover no-repeat;
    opacity: 0.2;
    transition: opacity var(--transition);
}

.promo-banner:hover .promo-banner__bg {
    opacity: 0.3;
}

.promo-banner:hover {
    color: var(--color-white);
}

.promo-banner__overlay {
    display: none;
}

.promo-banner .container {
    position: relative;
    z-index: 1;
}

.promo-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1.5rem 0;
}

.promo-banner__text {
    min-width: 0;
    flex: 1 1 auto;
}

.promo-banner__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.promo-banner__headline {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

.promo-banner__headline strong {
    font-weight: 800;
    color: var(--color-white);
}

.promo-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background: var(--color-accent);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.promo-banner:hover .promo-banner__cta {
    background: var(--color-accent-hover);
    gap: 0.75rem;
}

@media (max-width: 991px) {
    .promo-banner__content {
        flex-direction: column;
        /* Stretch fills the cross-axis without the circular sizing that
           width: 100% on a child creates inside a flex item with min-width: 100%. */
        align-items: stretch;
        gap: 1rem;
        padding: 1.25rem 0;
    }

    .promo-banner__cta {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   10c. Promo Slider
   -------------------------------------------------------------------------- */
.promo-slider {
    position: relative;
    overflow: hidden;
}

.promo-slider__track {
    display: flex;
    transition: transform 0.45s ease;
}

.promo-slider__slide {
    /* Fixed 100% basis with no grow/shrink. min-width: 0 prevents the slide
       from being widened by intrinsic content size on narrow viewports. */
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
}

.promo-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
}

.promo-slider__arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.promo-slider__arrow--prev {
    left: 12px;
}

.promo-slider__arrow--next {
    right: 12px;
}

@media (min-width: 768px) {
    .promo-slider__arrow--prev {
        left: 24px;
    }
    .promo-slider__arrow--next {
        right: 24px;
    }
}

/* --------------------------------------------------------------------------
   11. Services Grid
   -------------------------------------------------------------------------- */
.services-section {
    background-color: var(--color-gray-100);
    padding-top: 3rem;
    /* Sticky header is ~120px tall; this keeps the tabs visible when the
       section is the in-page anchor target (e.g., from #services /
       #industries-served hash links or back-navigation). */
    scroll-margin-top: 120px;
}

.services-section .section__header {
    margin-bottom: 1.5rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card__icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: transform var(--transition);
}

.service-card:hover .service-card__icon-wrap {
    transform: scale(1.08);
}

.service-card__icon {
    width: auto;
    height: auto;
    max-width: 64px;
    max-height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.service-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
}

.service-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    opacity: 0;
    transform: translateX(-8px);
    transition: all var(--transition);
    margin-top: auto;
}

.service-card:hover .service-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Services Landing Large Cards */
.services-grid--large {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card--large {
    padding: 2.5rem 2rem;
}

.service-card--large .service-card__image {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}

.service-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-card__excerpt {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-bottom: 1rem;
}

.service-card__link-text {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.875rem;
    transition: gap var(--transition);
}

.service-card:hover .service-card__link-text {
    gap: 0.625rem;
}

/* --------------------------------------------------------------------------
   11b. Tabs (Services / Industries)
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-sm);
}

.tabs__btn {
    flex: 1;
    padding: 0.875rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 2px solid var(--color-primary);
    background: var(--color-white);
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.tabs__btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: 1px solid var(--color-primary);
}

.tabs__btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: 1px solid var(--color-primary);
}

.tabs__btn:hover {
    background: rgba(21, 75, 150, 0.08);
}

.tabs__btn--active {
    background: var(--color-primary);
    color: var(--color-white);
}

.tabs__btn--active:hover {
    background: var(--color-primary-dark);
}

.tabs__panel {
    display: none;
}

.tabs__panel--active {
    display: block;
    animation: tabFadeIn 0.35s ease;
}

.tabs__panel-intro {
    text-align: center;
    color: var(--color-gray-500);
    font-size: 1.0625rem;
    max-width: 640px;
    margin: 0 auto 2rem;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Industry cards */
.service-card--industry .service-card__icon-wrap {
    color: var(--color-white);
}
.service-card--industry .service-card__icon-wrap svg {
    width: 44px;
    height: 44px;
    display: block;
}

/* Equipment cards (home-page Fleet tab). Landscape PNG icons sit at the
   top of the card; title centered below; faint arrow appears on hover.
   Layout intentionally similar to .service-card so the tab section feels
   visually consistent with the Services / Industries tab. */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.equipment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.equipment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.equipment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

.equipment-card:hover::before {
    transform: scaleX(1);
}

.equipment-card__icon-wrap {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform var(--transition);
}

.equipment-card:hover .equipment-card__icon-wrap {
    transform: scale(1.05);
}

.equipment-card__icon {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.equipment-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.equipment-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    opacity: 0;
    transform: translateX(-8px);
    transition: all var(--transition);
}

.equipment-card:hover .equipment-card__arrow {
    opacity: 1;
    transform: translateX(0);
}

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

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

/* --------------------------------------------------------------------------
   12. Trust Section
   -------------------------------------------------------------------------- */
.trust-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.trust-section__content p {
    font-size: 1.0625rem;
    color: var(--color-gray-700);
    margin-bottom: 1.25rem;
}

.trust-section__content .btn {
    margin-top: 0.5rem;
}

.trust-section__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.stat-card {
    background-color: var(--color-gray-100);
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-gray-200);
}

.stat-card__number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-card__label {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    font-weight: 500;
}

/* Stat numbers can be wide (e.g. "1,000,000+"). Step the font-size down
   on narrow viewports so the value never overflows its card. */
@media (max-width: 767px) {
    .stat-card {
        padding: 1.5rem 0.75rem;
    }
    .stat-card__number {
        font-size: 1.75rem;
    }
}
@media (max-width: 420px) {
    .trust-section__stats {
        gap: 0.75rem;
    }
    .stat-card__number {
        font-size: 1.4rem;
    }
    .stat-card__label {
        font-size: 0.8125rem;
    }
}

/* ----- Standalone stats band -----
   Used by the "Mid-State / Stats" Gutenberg pattern when the stats appear
   outside the home-page trust section. Reuses .stat-card styling. */
.sp-stats-band {
    background-color: var(--color-white);
    padding: 4rem 0;
}

.sp-stats-band__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .sp-stats-band__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sp-stats-band__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .trust-section__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   14. Features / Why Choose Us
   -------------------------------------------------------------------------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.feature-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--color-primary);
    transition: all var(--transition);
}

.feature-card:hover .feature-card__icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-white);
}

.feature-card__icon svg {
    width: 40px;
    height: 40px;
    display: block;
}

.feature-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.75rem;
}

.feature-card__text {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   15. Page Header
   -------------------------------------------------------------------------- */
.page-header {
    position: relative;
    /* Default solid 92% navy when no featured image. Matches the no-image
       hero overlay treatment. Conditional bg div + 65% overlay below take
       over when an image is present. */
    background: rgba(14, 54, 112, 0.92);
    padding: 3rem 0;
    text-align: center;
    overflow: hidden;
}

.page-header__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.page-header__overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 54, 112, 0.85);
}

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

.page-header__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 0;
}

.page-header__subtitle {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.75rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.page-header__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}

.page-header__meta a {
    color: rgba(255, 255, 255, 0.85);
}

.page-header__meta a:hover {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   16. Page Content
   -------------------------------------------------------------------------- */
.page-content {
    padding: 3rem 0 4rem;
}

.entry-content {
    max-width: 800px;
    line-height: 1.8;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.entry-content ul {
    list-style-type: disc;
}

.entry-content ol {
    list-style-type: decimal;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content img {
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

.entry-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background-color: var(--color-gray-100);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.entry-thumbnail {
    margin-bottom: 2rem;
}

.entry-thumbnail img {
    border-radius: var(--radius-md);
    width: 100%;
}

.entry-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
}

.entry-tags {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.entry-tags a {
    color: var(--color-secondary);
}

/* Content + Sidebar */
.content-sidebar-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .content-sidebar-wrap {
        grid-template-columns: 1fr 300px;
    }
}

.sidebar .widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.sidebar .widget-title {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

/* Quform sidebar widget */
.sidebar .quform-widget {
    background: var(--color-gray-100);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: calc(var(--header-height) + 80px);
}

.sidebar .quform-widget .widget-title {
    color: var(--color-accent);
    font-size: 0.9375rem;
    font-weight: 800;
    margin: 0 0 0.875rem;
    padding: 0 0 0.625rem;
    border-bottom: 2px solid var(--color-accent);
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   16b. News Category Filter
   -------------------------------------------------------------------------- */
.news-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.news-categories__link {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-200);
    border-radius: 100px;
    transition: all var(--transition);
    text-decoration: none;
}

.news-categories__link:hover {
    border-color: var(--color-primary);
    background: rgba(21, 75, 150, 0.05);
    color: var(--color-primary);
}

.news-categories__link--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.news-categories__link--active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   17. Posts Grid
   -------------------------------------------------------------------------- */
.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 600px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.post-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.post-card__image {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-gray-100, #f3f4f6);
}

.post-card__image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-card:hover .post-card__image img {
    transform: scale(1.03);
}

.post-card__image-placeholder {
    display: block;
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    position: relative;
}

.post-card__image-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.35) 52%, transparent 54%);
    background-size: 40px 40px;
}

@media (min-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.post-card__body {
    padding: 1.5rem;
}

.post-card__date {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    display: block;
    margin-bottom: 0.5rem;
}

.post-card__title {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

.post-card__title a {
    color: var(--color-gray-900);
}

.post-card__title a:hover {
    color: var(--color-primary);
}

.post-card__excerpt {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-bottom: 1rem;
}

.post-card__link {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   18. Post Navigation
   -------------------------------------------------------------------------- */
.post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-gray-200);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.nav-subtitle {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: 0.25rem;
}

.nav-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   19. Pagination
   -------------------------------------------------------------------------- */
.pagination {
    margin-top: 3rem;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--transition);
}

.pagination a {
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
}

.pagination a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.pagination .current {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   20. 404 Page
   -------------------------------------------------------------------------- */
.error-404 {
    text-align: center;
    padding: 4rem 0;
}

.error-404__code {
    display: block;
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-gray-200);
    margin-bottom: 1rem;
}

.error-404__message {
    font-size: 1.125rem;
    color: var(--color-gray-500);
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.error-404__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer__main {
    background-color: var(--color-gray-900);
    padding: 4rem 0 3rem;
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 600px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
    }
}

.site-footer__logo {
    margin-bottom: 1rem;
}

.site-footer__logo img {
    max-height: 50px;
    width: auto;
    filter: brightness(0) invert(1);
}

.site-footer__logo--large img {
    max-height: 120px;
    max-width: 280px;
}

.site-footer__site-title {
    font-size: 1.25rem;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.site-footer__description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__partners {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    background: var(--color-white);
    border-radius: 10px;
    max-width: 320px;
}

.site-footer__partner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    transition: opacity var(--transition);
}

a.site-footer__partner-link {
    opacity: 0.95;
}

a.site-footer__partner-link:hover {
    opacity: 1;
}

.site-footer__partner-logo {
    display: block;
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 48px;
    object-fit: contain;
}

.site-footer__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.site-footer__heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: var(--color-accent);
    border-radius: 2px;
}

.site-footer__menu li a {
    display: block;
    padding: 0.15rem 0;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    transition: all var(--transition);
}

.site-footer__menu li a:hover {
    color: var(--color-white);
}

.site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    font-size: 0.9375rem;
}

.site-footer__contact-item svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-secondary);
}

.site-footer__contact-item a {
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__contact-item a:hover {
    color: var(--color-white);
}

.site-footer__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--transition);
}

.site-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

/* Footer newsletter signup (Mailchimp-backed). Sits below the social
   icons in the contact column. Submits via JSONP so we can render
   success/error inline without redirecting to Mailchimp's hosted page. */
.site-footer__newsletter {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__newsletter-heading {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 0.35rem;
    letter-spacing: 0.02em;
}

.site-footer__newsletter-blurb {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}

.site-footer__newsletter-form {
    position: relative;
}

.site-footer__newsletter-row {
    display: flex;
    gap: 0.5rem;
}

.site-footer__newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), background var(--transition);
}

.site-footer__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.site-footer__newsletter-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-accent);
}

.site-footer__newsletter-button {
    padding: 0.55rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
}

.site-footer__newsletter-button:hover {
    background: var(--color-accent-hover);
}

.site-footer__newsletter-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.site-footer__newsletter-response {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    line-height: 1.4;
    min-height: 1.2em;
}

.site-footer__newsletter-response--success {
    color: #5dd39e;
}

.site-footer__newsletter-response--error {
    color: #ff8b8b;
}

.site-footer__bottom {
    background-color: #0a0a0a;
    padding: 1.25rem 0;
}

.site-footer__bottom-inner {
    text-align: center;
}

.site-footer__copyright {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   21s. Service Page Template (sp-)
   -------------------------------------------------------------------------- */

/* Hero */
.sp-hero {
    position: relative;
    padding: 3.75rem 0 4.5rem;
    overflow: hidden;
}

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

.sp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.sp-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(14, 54, 112, 0.85);
}

/* When the page has no featured image, the overlay sits over a solid color
   background. Bump opacity so the title still reads with crisp contrast. */
.sp-hero__overlay--no-image {
    background: rgba(14, 54, 112, 0.92);
}

.sp-hero__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.sp-hero__content > *:first-child {
    margin-top: 0;
}

.sp-hero__content > *:last-child {
    margin-bottom: 0;
}

.sp-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--color-white);
    font-weight: 800;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 1rem;
}

.sp-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.1875rem);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 560px;
    text-wrap: pretty;
}

.sp-hero__description {
    font-size: clamp(0.9375rem, 1.5vw, 1rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: -1rem 0 2rem 0;
    max-width: 640px;
}

/* Careers form wrapper */
.sp-careers-form {
    max-width: 720px;
    margin: 1.5rem auto 0 auto;
    padding: 2rem 2rem 1.5rem 2rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.sp-careers-form--placeholder {
    background: repeating-linear-gradient(
        135deg,
        #f9fafb 0 12px,
        #f3f4f6 12px 24px
    );
    border: 2px dashed var(--color-gray-300, #d1d5db);
    box-shadow: none;
    padding: 2.25rem 2rem;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase;
    font-size: 0.9375rem;
}

.sp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Sections */
.sp-section {
    padding: 4rem 0;
}

.sp-section--gray {
    background-color: var(--color-gray-100);
}

.sp-section--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.sp-section__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.sp-section__header--light .sp-section__title {
    color: var(--color-white);
}

.sp-section__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.sp-section__subtitle {
    font-size: 1.0625rem;
    color: var(--color-gray-500);
}

/* Intro */
.sp-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.sp-intro__badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-secondary);
    background: rgba(23, 101, 223, 0.08);
    padding: 0.375rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
}

.sp-intro__title {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.sp-intro__text {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-gray-700);
    margin-bottom: 1rem;
}

/* Who We Serve Grid */
.sp-serve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.sp-serve-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
}

.sp-serve-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.sp-serve-card svg {
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
}

.sp-serve-card h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.375rem;
}

.sp-serve-card p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    line-height: 1.5;
    margin: 0;
}

/* Explainer (2-column) */
.sp-explainer {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

.sp-explainer__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.sp-explainer__content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-gray-700);
    margin-bottom: 1rem;
}

/* Check list */
.sp-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-check-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-gray-700);
}

.sp-check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.sp-check-list--accent li::before {
    background-color: var(--color-accent);
}

/* Stat Stack */
.sp-stat-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sp-stat-stack__item {
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--color-gray-200);
}

.sp-stat-stack__number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.sp-stat-stack__label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
}

/* Services Grid (numbered) */
.sp-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.sp-service-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    backdrop-filter: blur(4px);
}

.sp-service-item__num {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.sp-service-item h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.sp-service-item p {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* Callout */
.sp-callout {
    display: flex;
    gap: 1.5rem;
    background: var(--color-gray-100);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 2rem;
}

.sp-callout__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-callout__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.sp-callout__body p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-gray-700);
    margin-bottom: 1rem;
}

/* Reasons Grid */
.sp-reasons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.sp-reasons-grid .sp-reason {
    flex: 0 0 calc(33.333% - 0.875rem);
}

.sp-reason {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-gray-200);
}

.sp-reason__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(21, 75, 150, 0.08);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.sp-reason h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.sp-reason p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    line-height: 1.6;
    margin: 0;
}

/* Area Tags */
.sp-areas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sp-area-tag {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--color-gray-700);
    line-height: 1.5;
}

.sp-area-tag strong {
    display: block;
    color: var(--color-primary);
    font-size: 0.9375rem;
    margin-bottom: 0.125rem;
}

.sp-areas__cta {
    text-align: center;
    font-size: 1rem;
    color: var(--color-gray-500);
}

/* FAQ Accordion */
.sp-faq {
    max-width: 760px;
    margin: 0 auto;
}

.sp-faq__item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.sp-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: left;
}

.sp-faq__question svg {
    flex-shrink: 0;
    color: var(--color-gray-500);
    transition: transform var(--transition);
}

.sp-faq__question[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.sp-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.sp-faq__answer p {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-gray-700);
    margin: 0;
}

.sp-faq__item--open .sp-faq__answer {
    max-height: 300px;
}

/* Bottom CTA */
.sp-cta {
    position: relative;
    background: var(--color-primary-dark);
    padding: 3.5rem 0;
    text-align: center;
    overflow: hidden;
}

/* ----- Gutenberg-block CTA variant -----
   The bottom CTA is rendered as a Gutenberg block pattern (midstate/cta-bottom)
   inserted into post / page content. The base .sp-cta selector above carries
   the section-level treatment (background, padding, overflow); the rules below
   handle Gutenberg's wp-block-group child markup (heading, paragraph, buttons,
   note). */
.sp-cta.wp-block-group {
    text-align: center;
}

/* Overlay via pseudo-element so the editable block has no empty <div> child */
.sp-cta.wp-block-group::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    z-index: 0;
}

/* Stack the editable block's children above the overlay */
.sp-cta.wp-block-group > * {
    position: relative;
    z-index: 1;
}

/* Color overrides use !important to win over theme.json's default text color
   (#1a1a1a) which Gutenberg applies with high specificity. Scoped to .sp-cta
   so the !important doesn't leak. */
.sp-cta.wp-block-group > .wp-block-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--color-white) !important;
    margin: 0 0 0.75rem;
    text-align: center;
}

.sp-cta.wp-block-group > p {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-white) !important;
    margin: 0 auto 2rem;
    max-width: 720px;
    text-align: center;
}

.sp-cta.wp-block-group .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 0;
}

/* Small italic note line below the buttons (e.g. "24/7 emergency dispatch
   available, statewide coverage across Oregon."). Override the Gutenberg
   variant's default <p> styling. */
.sp-cta.wp-block-group > p.sp-cta__note {
    font-size: 0.875rem;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 1.25rem auto 0;
    max-width: 720px;
    text-align: center;
}

.sp-cta.wp-block-group .wp-block-button {
    margin: 0;
}

.sp-cta.wp-block-group .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: 1rem 2.25rem;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}

/* Primary CTA button (yellow, matches .btn--accent .btn--large) */
.sp-cta.wp-block-group .is-style-fill .wp-block-button__link,
.sp-cta.wp-block-group .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.sp-cta.wp-block-group .is-style-fill .wp-block-button__link:hover,
.sp-cta.wp-block-group .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
}

/* Secondary CTA button (outline-light, matches .btn--outline-light .btn--large) */
.sp-cta.wp-block-group .is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.sp-cta.wp-block-group .is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}

/* Responsive */
@media (max-width: 1024px) {
    .sp-serve-grid,
    .sp-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-reasons-grid .sp-reason {
        flex: 0 0 calc(50% - 0.625rem);
    }

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

    .sp-explainer {
        grid-template-columns: 1fr;
    }

    .sp-stat-stack {
        flex-direction: row;
    }
}

@media (max-width: 767px) {
    .sp-hero {
        padding: 2.5rem 0 3rem;
    }

    .sp-hero__actions {
        flex-direction: column;
    }

    .sp-section {
        padding: 3rem 0;
    }

    .sp-serve-grid,
    .sp-services-grid,
    .sp-areas {
        grid-template-columns: 1fr;
    }

    .sp-reasons-grid .sp-reason {
        flex: 0 0 100%;
    }

    .sp-callout {
        flex-direction: column;
    }

    .sp-stat-stack {
        flex-direction: column;
    }

    .sp-cta.wp-block-group .wp-block-buttons {
        flex-direction: column;
        align-items: center;
    }

    .sp-cta.wp-block-group .wp-block-button,
    .sp-cta.wp-block-group .wp-block-button__link {
        width: 100%;
        max-width: 320px;
    }
}

/* Service page scroll reveal animations */
.sp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-reveal.sp-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger FAQ items */
.sp-faq__item.sp-reveal:nth-child(2) { transition-delay: 0.08s; }
.sp-faq__item.sp-reveal:nth-child(3) { transition-delay: 0.16s; }
.sp-faq__item.sp-reveal:nth-child(4) { transition-delay: 0.24s; }

/* Explainer visual slides in from right */
.sp-explainer__visual.sp-reveal {
    transform: translateX(30px);
    opacity: 0;
}

.sp-explainer__visual.sp-revealed {
    transform: translateX(0);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   21a. Related Services Carousel
   -------------------------------------------------------------------------- */
.related-services {
    position: relative;
    padding: 2rem 0 1.5rem;
    overflow: hidden;
    background: var(--color-primary-dark);
}

.related-services__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    opacity: 0.95;
}

.related-services__title {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--color-white);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1.25rem;
}

.related-services__track-wrap {
    position: relative;
    z-index: 1;
    overflow: hidden;
    perspective: 1200px;
    padding: 1rem 0;
    max-width: 1000px;
    margin: 0 auto;
}

.related-services__track {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 260px;
}

.related-services__card {
    position: absolute;
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-white);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.related-services__card.is-center {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.related-services__card:hover {
    color: var(--color-white);
}

.related-services__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: background var(--transition);
}

.related-services__card:hover .related-services__icon-wrap {
    background: rgba(255, 255, 255, 0.2);
}

.related-services__icon-wrap img {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.related-services__card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-white);
}

.related-services__card-link {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-top: auto;
    transition: color var(--transition);
}

.related-services__card:hover .related-services__card-link {
    color: var(--color-white);
}

/* Navigation */
.related-services__nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.related-services__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.2);
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition);
}

.related-services__arrow--prev {
    left: calc(50% - 560px);
}

.related-services__arrow--next {
    right: calc(50% - 560px);
}

.related-services__arrow:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

.related-services__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.related-services__dots {
    display: flex;
    gap: 0.5rem;
}

.related-services__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition);
}

.related-services__dot--active {
    background: var(--color-white);
    transform: scale(1.25);
}

@media (max-width: 767px) {
    .related-services__card {
        width: 200px;
        padding: 1.5rem 1rem 1.25rem;
    }

    .related-services__track {
        height: 280px;
    }
}

/* --------------------------------------------------------------------------
   21b. Service Area Map
   -------------------------------------------------------------------------- */
.service-area-section {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}

.service-area-section > p.has-text-align-center {
    font-size: 1.125rem;
    color: var(--color-gray-600);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.service-area-map {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 520px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--color-gray-200);
}

.service-area-map .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.75);
}

/* Branded label pinned to the top-left of the service-area map. Rendered
   via an L.control in service-area-map.js. */
.service-area-map__brand.leaflet-control {
    background: rgba(255, 255, 255, 0.96);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin: 1rem !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.service-area-map__brand-logo {
    height: 36px;
    width: auto;
    display: block;
}

.service-area-map__brand-slogan {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .service-area-map__brand.leaflet-control {
        margin: 0.5rem !important;
        padding: 0.5rem 0.75rem;
        max-width: 140px;
        gap: 0.25rem;
    }

    .service-area-map__brand-logo {
        height: 26px;
        max-width: 100%;
    }

    /* Hide the slogan on phones; the logo is enough branding and the
       full slogan was forcing the brand box wider than the map. */
    .service-area-map__brand-slogan {
        display: none;
    }

    /* Safety net for the HQ tooltip in case the JS short-text fallback
       doesn't apply (e.g. ad-hoc text changes). Allow wrap and cap width. */
    .service-area-tooltip--hq {
        max-width: 160px;
        white-space: normal;
        font-size: 12px;
        padding: 6px 10px;
        line-height: 1.3;
    }
}

.service-area-map__caption {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-gray-500);
    line-height: 1.5;
}

.service-area-map__caption svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Pin marker. pointer-events: none lets hover events pass through to
   underlying city circle markers (Springfield, Junction City, Cottage
   Grove, Eugene) that sit inside the pin's 36x46 bounding box. The pin
   has a permanent tooltip and no click handler, so it doesn't need to
   intercept any pointer events itself. */
.service-area-pin {
    background: none !important;
    border: none !important;
    pointer-events: none;
}

/* Tooltips */
.service-area-tooltip {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.service-area-tooltip--hq {
    font-size: 14px;
    padding: 8px 14px;
    border-left: 3px solid var(--color-primary);
}

/* Cities grid */
.service-area-cities-section {
    background-color: var(--color-gray-100);
}

.service-area-cities {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}

.service-area-city {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.service-area-city:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.service-area-city__pin {
    flex-shrink: 0;
    color: var(--color-primary);
}

.service-area-city__name {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    color: var(--color-gray-900);
}

/* --------------------------------------------------------------------------
   21sa. Service Area Localized Pages (sa-)
   -------------------------------------------------------------------------- */

/* Hero */
.sa-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sa-hero > .container {
    display: flex;
    align-items: center;
    min-height: 340px;
}

.sa-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary-dark);
}

.sa-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 54, 112, 0.92) 0%, rgba(14, 54, 112, 0.75) 100%);
}

.sa-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: 2.5rem 0;
}

.sa-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.sa-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.sa-hero__breadcrumb a:hover {
    color: var(--color-white);
}

.sa-hero__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.sa-hero__subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.sa-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Service Area local pages: full-width sections using Gutenberg alignfull.
   Group blocks use "Full width" alignment + sp-section CSS class.
   Gutenberg's constrained layout centers inner content automatically.
   We override its contentSize to use our --container-width. */

/* Section padding and backgrounds */
.wp-block-group.sp-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.wp-block-group.sp-section--gray {
    background-color: var(--color-gray-100) !important;
}

.wp-block-group.sp-section--primary {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
}

/* Override Gutenberg's root padding on sections - use our side padding */
.wp-block-group.sp-section.has-global-padding {
    padding-right: max(24px, calc((100% - var(--container-width)) / 2)) !important;
    padding-left: max(24px, calc((100% - var(--container-width)) / 2)) !important;
}

/* Let Gutenberg's constrained layout set the default content width for all
   direct children (paragraphs, lists, details blocks, etc.) uniformly.
   Only override for elements that need to span the full container. */
.wp-block-group.sp-section .wp-block-columns,
.wp-block-group.sp-section h2,
.wp-block-group.sp-section h3 {
    max-width: none !important;
}

/* Intro section: paragraphs span full container width */
.wp-block-group.sp-section--intro > p {
    max-width: none !important;
}

/* Inset image variant: heading centered, then a columns row with text + image side by side.
   Use on any sp-section that contains a wp:columns with a wp:image inside one of the columns. */
.wp-block-group.sp-section--inset-image {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.wp-block-group.sp-section--inset-image > h2 {
    margin-bottom: 0.5rem !important;
}

.wp-block-group.sp-section--inset-image > .wp-block-columns {
    margin-top: 1.25rem !important;
}

.wp-block-group.sp-section--inset-image .wp-block-columns {
    align-items: center;
    gap: 2.5rem;
}

.wp-block-group.sp-section--inset-image .wp-block-image {
    margin: 0;
}

.wp-block-group.sp-section--inset-image .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(14, 54, 112, 0.15);
    display: block;
}

@media (max-width: 781px) {
    .wp-block-group.sp-section--inset-image .wp-block-columns {
        gap: 1.5rem;
    }
    .wp-block-group.sp-section--inset-image .wp-block-image {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Non-intro body text + lists: match FAQ accordion width (820px) */
.wp-block-group.sp-section:not(.sp-section--intro) > p,
.wp-block-group.sp-section:not(.sp-section--intro) > .wp-block-list {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Paragraphs inside cards/columns span their card width */
.wp-block-group.sp-section .wp-block-column p {
    max-width: none !important;
}

/* Typography */
.wp-block-group.sp-section h2 {
    font-size: clamp(1.375rem, 2.5vw, 1.75rem) !important;
    font-weight: 800;
    color: var(--color-primary-dark);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.wp-block-group.sp-section--primary h2,
.wp-block-group.sp-section--primary h3 {
    color: var(--color-white) !important;
}

.wp-block-group.sp-section h3 {
    font-size: 1.0625rem !important;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.wp-block-group.sp-section p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-gray-700);
}

.wp-block-group.sp-section--primary p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Guard: white-background cards keep their dark body text even when
   nested inside a primary (blue) section. Without these overrides the
   .sp-section--primary p / ul li white-text rule above would leak in
   and render the card body invisibly on white. */
.wp-block-group.sp-section--primary .sp-serve-card p,
.wp-block-group.sp-section--primary .sp-why-card p,
.wp-block-group.sp-section--primary .sp-area-card p,
.wp-block-group.sp-section--primary .sp-serve-card ul li,
.wp-block-group.sp-section--primary .sp-why-card ul li,
.wp-block-group.sp-section--primary .sp-area-card ul li {
    color: var(--color-gray-700) !important;
}
.wp-block-group.sp-section--primary .sp-serve-card ul li::before,
.wp-block-group.sp-section--primary .sp-why-card ul li::before,
.wp-block-group.sp-section--primary .sp-area-card ul li::before {
    background: var(--color-primary) !important;
}

/* Lists */
.wp-block-group.sp-section ul {
    padding-left: 0 !important;
    list-style: none !important;
}

.wp-block-group.sp-section ul li {
    position: relative;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-gray-700);
    margin-bottom: 0.625rem;
    padding-left: 1.5rem;
}

.wp-block-group.sp-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.wp-block-group.sp-section--primary ul li {
    color: rgba(255, 255, 255, 0.85) !important;
}

.wp-block-group.sp-section--primary ul li::before {
    background: var(--color-accent);
}

/* Serve cards (Columns in gray sections) */
.wp-block-group.sp-section .wp-block-column.sp-serve-card {
    padding: 1.25rem 1.5rem !important;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--color-primary);
}

.wp-block-group.sp-section .sp-serve-card h3 {
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--color-primary-dark) !important;
    margin: 0 0 0.375rem 0 !important;
    line-height: 1.3;
}

.wp-block-group.sp-section .sp-serve-card p {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 !important;
}

/* Why cards (title + description, larger format) */
.wp-block-group.sp-section .wp-block-column.sp-why-card {
    padding: 1.75rem 1.75rem !important;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--color-accent);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-group.sp-section .wp-block-column.sp-why-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wp-block-group.sp-section .sp-why-card h3 {
    font-size: 1.0625rem !important;
    font-weight: 800;
    color: var(--color-primary-dark) !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.3;
}

.wp-block-group.sp-section .sp-why-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-700);
    margin: 0 !important;
}

/* Service area cards (region + counties) */
.wp-block-group.sp-section .wp-block-column.sp-area-card {
    padding: 1.5rem 1.5rem !important;
    background: var(--color-gray-50, #f9fafb);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-group.sp-section .wp-block-column.sp-area-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.wp-block-group.sp-section .sp-area-card h3 {
    font-size: 1.0625rem !important;
    font-weight: 800;
    margin: 0 0 0.375rem 0 !important;
    line-height: 1.3;
}

.wp-block-group.sp-section .sp-area-card h3 a {
    color: var(--color-primary-dark) !important;
    text-decoration: none;
}

.wp-block-group.sp-section .sp-area-card h3 a:hover {
    color: var(--color-primary) !important;
}

.wp-block-group.sp-section .sp-area-card p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-gray-600);
    margin: 0 !important;
}

/* Callout section: distinct accent treatment for info sections like Oregon 811 */
.wp-block-group.sp-section.sp-section--callout {
    background: #fef5f5 !important;
    border-top: 3px solid var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
}

/* Service item cards (Columns in primary/blue sections) */
.wp-block-group.sp-section .wp-block-column.sp-service-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-block-group.sp-section .sp-service-item h3 {
    color: var(--color-white) !important;
    margin-bottom: 0.375rem;
}

.wp-block-group.sp-section .sp-service-item p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 !important;
}

/* Equipment card: used on Equipment page for each piece of equipment */
.wp-block-group.sp-section .wp-block-group.sp-equipment-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem 2rem !important;
    margin: 0 auto 1.25rem auto !important;
    max-width: 900px;
}

.wp-block-group.sp-section .sp-equipment-card > h3:first-child,
.wp-block-group.sp-section .sp-equipment-card > h3.wp-block-heading:first-child {
    font-size: 1.25rem !important;
    font-weight: 800;
    color: var(--color-primary-dark) !important;
    margin: 0 0 0.625rem 0 !important;
    line-height: 1.3;
}

/* Anchored equipment headings: keep deep links from landing under the
   sticky header on arrival.
   Mobile (<1024px): only top-bar + main header are sticky (~114px initial,
       ~90px scrolled). 140px buffer is plenty.
   Desktop (>=1024px): top-bar + main header + service-nav row are all
       sticky (~194px initial, ~140px scrolled). Use 220px so the heading
       lands clear of the stack regardless of whether the .is-scrolled
       compressed state has applied yet. */
.sp-equipment-card .wp-block-heading[id] {
    scroll-margin-top: 140px;
}

@media (min-width: 1024px) {
    .sp-equipment-card .wp-block-heading[id] {
        scroll-margin-top: 220px;
    }
}

.wp-block-group.sp-section .sp-equipment-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-700);
    margin: 0 0 0.875rem 0 !important;
}

.wp-block-group.sp-section .sp-equipment-card ul {
    margin: 0 0 1rem 0 !important;
    padding: 0 0 0 1.25rem !important;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-gray-700);
    max-width: none !important;
}

.wp-block-group.sp-section .sp-equipment-card ul li {
    margin-bottom: 0.3125rem;
}

.wp-block-group.sp-section .sp-equipment-card .sp-best-for {
    display: block;
    margin: 0 !important;
    padding: 0.625rem 0.875rem;
    background: var(--color-gray-50, #f9fafb);
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--color-gray-800, #1f2937);
}

.wp-block-group.sp-section .sp-equipment-card .sp-best-for strong {
    color: var(--color-primary-dark);
    margin-right: 0.25rem;
}

/* "Our services" style mini-label above a service grid */
.wp-block-group.sp-section h3.sp-section-label {
    text-align: center;
    font-size: 0.875rem !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 auto 1.25rem auto !important;
}

/* Check list: styled list for "Services Include" or similar summary lists on any section */
.wp-block-group.sp-section ul.wp-block-list.sp-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 820px !important;
}

.wp-block-group.sp-section ul.wp-block-list.sp-check-list li {
    position: relative;
    padding: 0.875rem 1rem 0.875rem 3rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-gray-800, #1f2937);
    font-weight: 600;
    list-style: none;
}

.wp-block-group.sp-section ul.wp-block-list.sp-check-list li::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.8125rem 0.8125rem;
}

@media (max-width: 640px) {
    .wp-block-group.sp-section ul.wp-block-list.sp-check-list {
        grid-template-columns: 1fr;
    }
}

/* Reset Gutenberg's is-layout-flow spacing inside cards and details */
.wp-block-group.sp-section .sp-serve-card.is-layout-flow > *,
.wp-block-group.sp-section .sp-service-item.is-layout-flow > *,
.wp-block-group.sp-section .wp-block-details.is-layout-flow > * {
    margin-block-start: 0 !important;
}

/* Details/accordion - matching sp-faq style from hydro page */
.wp-block-group.sp-section .wp-block-details {
    border: 1px solid var(--color-gray-200) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 820px !important;
    overflow: hidden;
    padding: 0 !important;
    background: var(--color-white);
    box-shadow: none !important;
}

.wp-block-group.sp-section .wp-block-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    cursor: pointer;
    list-style: none;
    background: transparent;
    border: none;
    transition: none;
}

.wp-block-group.sp-section .wp-block-details summary:hover {
    background: transparent;
}

/* SVG chevron icon matching the hydro page sp-faq */
.wp-block-group.sp-section .wp-block-details summary::after {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23154B96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    transition: transform var(--transition);
}

.wp-block-group.sp-section .wp-block-details[open] summary::after {
    transform: rotate(180deg);
}

.wp-block-group.sp-section .wp-block-details summary::-webkit-details-marker {
    display: none;
}

.wp-block-group.sp-section .wp-block-details > *:not(summary) {
    padding: 0 1.5rem 1.25rem;
    margin-block-start: 0 !important;
}

.wp-block-group.sp-section .wp-block-details p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-gray-700);
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 767px) {
    .wp-block-group.sp-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* --------------------------------------------------------------------------
   22. Services Landing Intro
   -------------------------------------------------------------------------- */
.services-landing__intro {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   23. WordPress Block Editor Alignment
   -------------------------------------------------------------------------- */
.entry-content .alignwide {
    max-width: var(--container-wide);
    margin-left: auto;
    margin-right: auto;
}

.entry-content .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Full-width entry content (Service Area local pages, etc.) */
.entry-content--full-width {
    max-width: none !important;
}

.entry-content--full-width .alignfull {
    margin-left: 0;
    width: 100%;
    max-width: none;
}

.entry-content .aligncenter {
    text-align: center;
}

.entry-content .wp-block-image {
    margin: 1.5rem 0;
}

.entry-content .wp-block-columns {
    gap: 2rem;
}

.entry-content .wp-block-button__link {
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   24. Quform Overrides
   -------------------------------------------------------------------------- */

/* Global field styles */
.quform-field {
    border: 1px solid var(--color-gray-300) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    font-family: var(--font-body) !important;
    width: 100% !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
    transition: border-color var(--transition) !important;
}

.quform-field:focus {
    border-color: var(--color-secondary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(23, 101, 223, 0.1) !important;
}

.quform-field-textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Tighten spacing between fields */
.quform-spacer {
    margin-bottom: 0.75rem !important;
}

/* Field helper-text (e.g. file extensions hint below the Attach Resume field).
   Renders smaller and more muted than the field's own text. */
.quform-description {
    font-size: 0.75rem !important;
    color: var(--color-gray-500) !important;
    margin: 0.25rem 0 0 !important;
    line-height: 1.4 !important;
}

/* In-field labels (the "Name", "Email" etc. placeholder-style labels that
   sit over the input on the main-content forms): force 1rem so the label
   text matches the field input text size. Quform's default rule uses
   `font-size: 1em` which resolves smaller than the input's `1rem !important`
   when the parent's computed font-size is below 16px. This caused a visible
   mismatch on the Contact Us form where the Service Needed dropdown (showing
   its option at the field's 1rem) read noticeably larger than the adjacent
   inside-labels.

   Scope: `.entry-content` (main-content forms only). The sidebar quote form
   has its own explicit 13px sizing that should not be touched. */
.entry-content .quform-label-inside,
.entry-content .quform-label-inside .quform-label-text {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Inside labels (acting as placeholders) */
.quform-label-inside .quform-label-text {
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    color: var(--color-gray-500) !important;
}

/* Quform select fields:
   1. Quform doesn't apply its inside-label treatment to selects (the
      wrapper doesn't get .quform-labels-inside), so the label renders
      stacked above the field, breaking the floating-placeholder look
      used by every other input. Hide the label for select elements on
      form 1 so the dropdown's first option carries the visual cue.
   2. Force color-scheme: light so the native select doesn't render in
      OS dark mode while every other input stays light. */
.quform-1 .quform-element-select .quform-label {
    display: none !important;
}

.quform-field-select {
    color-scheme: light !important;
    color: var(--color-gray-500) !important;
    background-color: var(--color-white) !important;
    /* Disable native OS control rendering so the select draws its text
       with the same metrics as a regular input. Otherwise browsers
       (Chrome/Safari especially) render <select> text noticeably larger
       and heavier than <input> text at the same CSS font-size. */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Restore a chevron indicator (native arrow disappears with appearance: none). */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
}

/* Once a real (non-empty) option is selected, switch to the standard
   dark text color so the user's choice reads with normal contrast. The
   :has() selector lets us check the selected option's value from the
   parent select. (Modern browsers: Chrome 105+, Safari 15.4+, FF 121+.) */
.quform-field-select:has(option:not([value=""]):checked) {
    color: var(--color-gray-800, #1f2937) !important;
}

/* -- Main content Quform (Request Service, Careers) -- */
.entry-content .quform-2,
.entry-content .quform-3 {
    max-width: 520px;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

/* Tighter row rhythm for the main-content Careers form.
   Quform's default is `padding: 0 0 15px 0; margin: 0 0 5px 0` on
   .quform-spacer, so the effective gap is 20px (15 padding + 5 margin).
   Overriding only margin-bottom doesn't help because most of the gap is
   padding-bottom. Zero the padding-bottom and set an 8px bottom margin
   for the actual visible gap. Brian's call 5/15. */
.quform-form-3 .quform-spacer {
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
}

/* Hide labels since placeholders duplicate them */
.quform-form-2 .quform-label,
.quform-form-3 .quform-label {
    display: none !important;
}

/* Fields */
.quform-form-2 .quform-field,
.quform-form-3 .quform-field {
    padding: 10px 14px !important;
    font-size: 15px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-white) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.quform-form-2 .quform-field:focus,
.quform-form-3 .quform-field:focus {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 0 3px rgba(23, 101, 223, 0.1) !important;
    outline: none !important;
}

.quform-form-2 .quform-field-textarea,
.quform-form-3 .quform-field-textarea {
    min-height: 110px !important;
    resize: vertical !important;
}

/* File upload button (Attach Resume on Careers form): match the padding,
   font-size, and border of the surrounding text inputs so the file row
   visually aligns with the rest of the form rhythm. Quform's default uses
   `padding: 8px 12px` which renders ~5px shorter than our 10px / 14px
   text inputs, making the spacing feel uneven. */
.quform-form-3 .quform-upload-button {
    padding: 10px 14px !important;
    font-size: 15px !important;
    border: 1px solid var(--color-gray-300) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-white) !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* Form title/description.
   Form 2 (Request Service) keeps its title hidden because the page renders
   its own heading. Form 3 (Careers) shows the Quform-set title because
   David set a distinct "Connect With Us" string that's meant to surface. */
.quform-form-2 .quform-form-title {
    display: none !important;
}

.quform-form-3 .quform-form-title {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    color: var(--color-primary-dark) !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
}

.quform-form-2 .quform-form-description,
.quform-form-3 .quform-form-description {
    font-size: 15px !important;
    color: var(--color-gray-500) !important;
    margin: 0 0 1.25rem !important;
    padding: 0 0 1rem !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
}

/* Submit button */
.quform-form-2 .quform-element-submit .quform-spacer,
.quform-form-3 .quform-element-submit .quform-spacer {
    margin-bottom: 0 !important;
    margin-top: 4px !important;
}

.quform-form-2 .quform-button-submit,
.quform-form-3 .quform-button-submit {
    width: 100% !important;
}

.quform-form-2 button.quform-submit,
.quform-form-3 button.quform-submit {
    width: 100% !important;
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.quform-form-2 button.quform-submit .quform-button-text,
.quform-form-3 button.quform-submit .quform-button-text {
    display: block !important;
    width: 100% !important;
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background-color var(--transition) !important;
}

.quform-form-2 button.quform-submit:hover .quform-button-text,
.quform-form-3 button.quform-submit:hover .quform-button-text {
    background-color: var(--color-accent-hover) !important;
}

/* Submit button: Quform styles the span, not the button */
.quform-element-submit .quform-button-submit button.quform-submit {
    width: 100% !important;
    display: block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.quform-element-submit .quform-button-submit button.quform-submit .quform-button-text {
    display: block !important;
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.875rem 2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    transition: background-color var(--transition) !important;
}

.quform-element-submit .quform-button-submit button.quform-submit:hover .quform-button-text {
    background-color: var(--color-accent-hover) !important;
}

/* -- Sidebar Quform -- */
.sidebar .quform-elements .quform-spacer {
    margin-bottom: 7px !important;
    padding: 0 !important;
}

/* All input fields */
.sidebar .quform-form-1 input.quform-field-text,
.sidebar .quform-form-1 input.quform-field-email,
.sidebar .quform-form-1 input.quform-field-captcha {
    padding: 0 10px !important;
    font-size: 13px !important;
    height: 30px !important;
    line-height: 30px !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
}

/* Select field. Matches the size, padding, and height of the input fields
   so the Service Needed dropdown reads at the same scale as the other
   placeholders. The global .quform-field rule applies font-size: 1rem
   which is too big for the sidebar's compact form layout. */
.sidebar .quform-form-1 select.quform-field-select {
    padding: 0 10px !important;
    font-size: 13px !important;
    height: 30px !important;
    line-height: 30px !important;
    box-sizing: border-box !important;
}

/* Textarea */
.sidebar .quform-form-1 textarea.quform-field-textarea {
    padding: 8px 10px !important;
    font-size: 13px !important;
    min-height: 84px !important;
    height: 84px !important;
    line-height: 1.4 !important;
    background: var(--color-white) !important;
    box-sizing: border-box !important;
}

/* Inside labels: vertically center in 34px fields */
.sidebar .quform-form-1 .quform-label-inside {
    top: 0 !important;
    left: 10px !important;
    line-height: 30px !important;
    height: 30px !important;
}

.sidebar .quform-form-1 .quform-element-textarea .quform-label-inside {
    line-height: normal !important;
    height: auto !important;
    top: 8px !important;
}

.sidebar .quform-form-1 .quform-label-inside .quform-label-text {
    font-size: 13px !important;
}

/* Captcha: input and image side by side */
.sidebar .quform-inner-captcha {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.sidebar .quform-inner-captcha .quform-input-captcha {
    flex: 1 !important;
    min-width: 0 !important;
}

.sidebar .quform-inner-captcha .quform-captcha {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar .quform-inner-captcha .quform-captcha .quform-captcha-image {
    line-height: 0 !important;
}

.sidebar .quform-inner-captcha .quform-captcha-image-img {
    height: 30px !important;
    width: auto !important;
    display: block !important;
    border-radius: var(--radius-sm) !important;
    vertical-align: top !important;
}

/* Sidebar submit: target the span */
.sidebar .quform-button-submit button.quform-submit .quform-button-text {
    font-size: 14px !important;
    padding: 10px 1rem !important;
}

.sidebar .quform-element-submit .quform-spacer {
    margin-bottom: 0 !important;
}

.sidebar .quform-edit-form {
    display: none;
}

/* CAPTCHA field */
.quform-captcha-image {
    margin-top: 0.25rem;
}

/* Error states */
.quform-has-error .quform-field {
    border-color: var(--color-accent) !important;
}

.quform-errors > .quform-error {
    font-size: 0.8125rem !important;
    color: var(--color-accent) !important;
    margin-top: 0.25rem !important;
}

/* Success message */
.quform-success-message {
    background-color: rgba(21, 75, 150, 0.08) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-primary) !important;
    padding: 1rem !important;
    font-size: 0.9375rem !important;
}

/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .service-area-cities {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .section {
        padding: 3rem 0;
    }

    .hero {
        /* On phone portrait, drop the tall min-height and lock to 16:9 so
           the video fits its native aspect ratio (no horizontal cropping of
           in-video text). */
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .hero__video {
        /* Override the desktop cover-scale math so the iframe fills the
           wrap exactly. With wrap = 16:9 and video = 16:9, there's no crop. */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        transform: none;
    }

    .hero__content {
        padding: 3rem 0;
    }

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

    .hero__logo {
        display: none;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .tabs {
        max-width: 100%;
    }

    .tabs__btn {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .service-card {
        padding: 1.5rem 1rem;
    }

    .service-card__icon-wrap {
        width: 64px;
        height: 64px;
    }

    .service-card__icon {
        width: auto;
        height: auto;
        max-width: 56px;
        max-height: 30px;
    }

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

    .page-header {
        padding: 2rem 0;
    }

    .service-area-map {
        height: 350px;
    }

    .service-area-cities {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .top-bar__email {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   26. Scroll Animations
   -------------------------------------------------------------------------- */
/* Items start hidden */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   27. Header Scroll State
   -------------------------------------------------------------------------- */
.sticky-header-group.is-scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.sticky-header-group.is-scrolled .top-bar {
    height: var(--topbar-height-scrolled);
    font-size: 0.6875rem;
}

.sticky-header-group.is-scrolled .site-header {
    height: var(--header-height-scrolled);
    box-shadow: none;
}

/* Logo and CTA: small proportional shrink on scroll. Both transition with
   the same duration (defined on .site-header__logo-img and inherited by
   .site-header__cta via .btn) so they animate in lockstep. */
.sticky-header-group.is-scrolled .site-header__logo-img {
    max-height: 46px;
}

.sticky-header-group.is-scrolled .site-header__cta {
    font-size: 0.8125rem;
    padding: 0.5rem 1.25rem;
}

.service-nav.is-scrolled {
    /* Computed from the scrolled-state vars so any future tweak keeps in sync. */
    top: calc(var(--topbar-height-scrolled) + var(--header-height-scrolled));
}

.service-nav.is-scrolled .service-nav__icon {
    display: none !important;
}

.service-nav.is-scrolled .service-nav__list li a {
    padding: 0.4rem 0.25rem !important;
    min-height: 0 !important;
    font-size: 0.6875rem !important;
    justify-content: center !important;
    line-height: 1.3 !important;
    gap: 0 !important;
}

.service-nav.is-scrolled .service-nav__list li a span {
    max-width: none !important;
    text-align: center !important;
}

/* --------------------------------------------------------------------------
   28. Contact Page
   -------------------------------------------------------------------------- */
/* Two-column layout: stacked info cards on the left, form on the right */
.wp-block-group.sp-section .sp-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    max-width: 1100px;
    margin: 0 auto !important;
    align-items: start;
}

.wp-block-group.sp-section .sp-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 !important;
}

.wp-block-group.sp-section .sp-contact-layout > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Standalone info card (used in contact card stack) */
.wp-block-group.sp-section .wp-block-group.sp-info-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.5rem !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.wp-block-group.sp-section .wp-block-group.sp-info-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.wp-block-group.sp-section .sp-info-card h3,
.wp-block-group.sp-section .sp-info-card h3.wp-block-heading {
    font-size: 1rem !important;
    font-weight: 800;
    color: var(--color-primary-dark) !important;
    margin: 0 0 0.375rem 0 !important;
    line-height: 1.3;
}

.wp-block-group.sp-section .sp-info-card p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-gray-700);
    margin: 0 !important;
}

.wp-block-group.sp-section .sp-info-card p a {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.wp-block-group.sp-section .sp-info-card p a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Contact form wrapper */
.sp-contact-form-wrap {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

.sp-contact-form-wrap > h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem !important;
    font-weight: 800;
    color: var(--color-primary-dark) !important;
    margin: 0 0 0.25rem 0 !important;
    line-height: 1.2;
}

.sp-contact-form-wrap > p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-gray-600);
    margin: 0 0 1rem 0 !important;
}

/* Full-bleed map section */
.wp-block-group.sp-section.sp-contact-map-section {
    padding: 0 !important;
    background: var(--color-gray-100, #f3f4f6);
}

.sp-contact-map-section .sp-contact-map-frame {
    position: relative;
    width: 100%;
    height: clamp(360px, 45vw, 520px);
    overflow: hidden;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
}

.sp-contact-map-section .sp-contact-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.sp-contact-map-section .sp-contact-map-pin {
    position: absolute;
    left: clamp(1rem, 4vw, 3rem);
    bottom: clamp(1rem, 4vw, 2.5rem);
    z-index: 2;
    max-width: 320px;
    padding: 1.25rem 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.sp-contact-map-section .sp-contact-map-pin__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.375rem;
}

.sp-contact-map-section .sp-contact-map-pin__title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 0 0 0.25rem 0;
    line-height: 1.25;
}

.sp-contact-map-section .sp-contact-map-pin__body {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-gray-700);
    margin: 0 0 0.625rem 0;
}

.sp-contact-map-section .sp-contact-map-pin__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sp-contact-map-section .sp-contact-map-pin__link::after {
    content: "\2192";
    transition: transform 0.2s ease;
}

.sp-contact-map-section .sp-contact-map-pin__link:hover {
    color: var(--color-accent);
}

.sp-contact-map-section .sp-contact-map-pin__link:hover::after {
    transform: translateX(3px);
}

/* Compact Quform styling inside the contact form wrapper */
.sp-contact-form-wrap .quform-element {
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}

.sp-contact-form-wrap .quform-spacer {
    margin: 0 !important;
    padding: 0 !important;
}

.sp-contact-form-wrap .quform-label {
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
}

.sp-contact-form-wrap .quform-label-text {
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
}

.sp-contact-form-wrap .quform-inner {
    margin: 0 !important;
}

.sp-contact-form-wrap .quform-input {
    margin: 0 !important;
    padding: 0 !important;
}

.sp-contact-form-wrap input[type="text"],
.sp-contact-form-wrap input[type="email"],
.sp-contact-form-wrap input[type="tel"],
.sp-contact-form-wrap input[type="url"],
.sp-contact-form-wrap input[type="number"],
.sp-contact-form-wrap select,
.sp-contact-form-wrap textarea,
.sp-contact-form-wrap .quform-field {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.sp-contact-form-wrap textarea,
.sp-contact-form-wrap textarea.quform-field {
    min-height: 80px !important;
    max-height: 110px !important;
    resize: vertical;
}

/* Captcha field: text input and image side-by-side */
.sp-contact-form-wrap .quform-element-captcha .quform-inner-captcha {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sp-contact-form-wrap .quform-element-captcha .quform-input-captcha {
    flex: 1;
    min-width: 0;
}

.sp-contact-form-wrap .quform-element-captcha .quform-captcha {
    flex: 0 0 auto;
}

.sp-contact-form-wrap .quform-element-captcha .quform-captcha-image img {
    display: block;
    height: 38px;
    width: auto;
    border: 1px solid var(--color-gray-200);
    border-radius: 4px;
    background: var(--color-white);
}

.sp-contact-form-wrap .quform-element-submit {
    margin-top: 0.75rem !important;
}

.sp-contact-form-wrap .quform-submit {
    padding: 0.7rem 1.5rem !important;
    font-size: 0.9375rem !important;
}

@media (max-width: 960px) {
    .wp-block-group.sp-section .sp-contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .sp-contact-map-section .sp-contact-map-pin {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   29. Blog (single post + archive)
   -------------------------------------------------------------------------- */
.blog-hero {
    position: relative;
    color: #fff;
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    overflow: hidden;
}

.blog-hero--has-image {
    background: #0b1f3f;
}

.blog-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.blog-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 31, 63, 0.72) 0%, rgba(11, 31, 63, 0.88) 100%);
    z-index: 1;
}

.blog-hero__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.blog-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.blog-hero__meta time {
    color: #fff;
}

.blog-hero__meta a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-hero__meta a:hover {
    color: #fff;
    border-color: #fff;
}

.blog-hero__sep {
    opacity: 0.5;
}

.blog-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 1rem 0;
    color: #fff;
    text-wrap: balance;
}

.blog-hero__excerpt {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 680px;
}

/* Post body */
.blog-post {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    background: var(--color-white);
}

.blog-post__body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--color-gray-800, #1f2937);
}

/* Supporting image: horizontal "skinny" rectangle above the first paragraph
   of post content. Set per-post via the Supporting Image meta box. Uses the
   blog-supporting (1600x500) crop. */
.blog-post__supporting-image {
    margin: 0 0 2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    line-height: 0;
}

.blog-post__supporting-image-img,
.blog-post__supporting-image img {
    display: block;
    width: 100%;
    height: auto;
}

.blog-post__body > p,
.blog-post__body > ul,
.blog-post__body > ol,
.blog-post__body > blockquote {
    margin: 0 0 1.25rem 0;
}

.blog-post__body h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 2.25rem 0 0.875rem 0;
    line-height: 1.25;
}

.blog-post__body h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    margin: 1.75rem 0 0.625rem 0;
    line-height: 1.3;
}

.blog-post__body h2:first-child,
.blog-post__body h3:first-child {
    margin-top: 0;
}

.blog-post__body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.blog-post__body a:hover {
    color: var(--color-accent);
}

.blog-post__body ul,
.blog-post__body ol {
    padding-left: 1.5rem;
}

.blog-post__body li {
    margin-bottom: 0.4rem;
}

.blog-post__body blockquote {
    border-left: 3px solid var(--color-accent);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--color-gray-700);
}

.blog-post__tags {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gray-200);
    font-size: 0.9375rem;
    color: var(--color-gray-600);
}

.blog-post__tags .tags-label {
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-right: 0.25rem;
}

.blog-post__tags a {
    color: var(--color-primary);
    text-decoration: none;
}

.blog-post__tags a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Post nav (prev/next) */
.blog-post-nav {
    background: var(--color-gray-50, #f9fafb);
    padding: 1.75rem 0;
}

.blog-post-nav__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 1.5rem;
}

.blog-post-nav__card--prev {
    grid-column: 1;
}

.blog-post-nav__card--next {
    grid-column: 2;
}

.blog-post-nav__card {
    width: 100%;
    max-width: 400px;
    min-width: 0;
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.blog-post-nav__card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.blog-post-nav__thumb {
    display: block;
    width: 100%;
    height: 140px;
    background: var(--color-gray-100, #f3f4f6);
    overflow: hidden;
}

.blog-post-nav__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-post-nav__card:hover .blog-post-nav__thumb img {
    transform: scale(1.03);
}

.blog-post-nav__thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

.blog-post-nav__body {
    display: block;
    padding: 1.25rem 1.5rem 1.5rem;
}

.blog-post-nav__direction {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-gray-500);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.blog-post-nav__card--next .blog-post-nav__direction {
    text-align: right;
}

.blog-post-nav__date {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: 0.25rem;
}

.blog-post-nav__title {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.35;
}

@media (max-width: 640px) {
    .blog-post-nav__links {
        grid-template-columns: 1fr;
    }
    .blog-post-nav__card--prev,
    .blog-post-nav__card--next {
        grid-column: 1;
    }
    .blog-post-nav__card--next .blog-post-nav__direction {
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   30. Print
   -------------------------------------------------------------------------- */
@media print {
    .top-bar,
    .service-nav,
    .mobile-menu,
    .mobile-menu-toggle,
    .site-footer {
        display: none;
    }

    .sticky-header-group {
        position: static;
    }

    .site-header {
        box-shadow: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}