/* =============================================================================
   Mechanical Studio Limited — components.css
   All UI components: buttons, nav, hero, cards, badges, forms, footer, modals
   ============================================================================= */

/* =============================================================================
   1. BUTTONS
   ============================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    height: 48px;
    padding: 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

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

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

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

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

/* Ghost (for dark backgrounds) */
.btn--ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.65);
    color: var(--color-white);
}

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

/* Ghost teal (for light backgrounds) */
.btn--ghost-teal {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

/* Small */
.btn--sm {
    height: 38px;
    padding: 0 var(--space-3);
    font-size: var(--text-body-sm);
}

/* Icon + text */
.btn--video {
    gap: 8px;
}

/* Mobile touch target */
@media (max-width: 640px) {
    .btn {
        min-height: 44px;
    }
}

/* =============================================================================
   2. SITE HEADER & NAVIGATION
   ============================================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 80px;
    display: flex;
    align-items: center;
    transition: background-color 250ms ease,
        box-shadow 250ms ease,
        border-color 250ms ease;
}

/* Transparent over hero */
.site-header[data-scrolled="false"] {
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

/* Solid on scroll */
.site-header[data-scrolled="true"] {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-card);
    box-shadow: var(--shadow-sm);
}

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

/* Logo */
.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.site-header__logo-img {
    height: 40px;
    width: auto;
}

/* Logo text fallback (used until SVG is ready) */
.site-header__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.site-header__logo-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: -0.02em;
}

.site-header__logo-name span {
    color: var(--color-primary);
}

.site-header[data-scrolled="true"] .site-header__logo-name {
    color: var(--color-ink);
}

.site-header__logo-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 3px;
}

.site-header[data-scrolled="true"] .site-header__logo-tag {
    color: var(--color-muted);
}

/* Desktop Nav */
.site-nav {
    display: flex;
    align-items: center;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-1) var(--space-2);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.site-header[data-scrolled="true"] .site-nav__link {
    color: var(--color-ink);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    color: var(--color-primary);
}

.site-nav__link svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

/* Dropdown */
.site-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base),
        visibility var(--transition-base),
        transform var(--transition-base);
    transform: translateX(-50%) translateY(-8px);
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.site-nav__item--dropdown:hover .site-nav__link svg {
    transform: rotate(180deg);
}

.site-nav__dropdown-item {
    display: block;
    padding: 10px var(--space-2);
    font-size: var(--text-body-sm);
    font-weight: 500;
    color: var(--color-ink);
    border-radius: var(--radius);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-nav__dropdown-item:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.site-nav__dropdown-divider {
    height: 1px;
    background: var(--color-card);
    margin: var(--space-1) 0;
}

/* Muted "Industries We Serve →" link at bottom of Services dropdown */
.site-nav__dropdown-item--muted {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
}
.site-nav__dropdown-item--muted:hover {
    color: var(--color-primary-dark);
}

/* Header CTA */
.site-header__cta {
    flex-shrink: 0;
    margin-left: var(--space-3);
}

/* Hamburger (mobile) */
.site-header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    padding: var(--space-1);
    border-radius: var(--radius);
    cursor: pointer;
    margin-left: var(--space-2);
}

.site-header__hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 250ms ease, opacity 250ms ease, background-color 250ms ease;
}

.site-header[data-scrolled="true"] .site-header__hamburger-bar {
    background: var(--color-ink);
}

.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bar:nth-child(2) {
    opacity: 0;
}

.site-header__hamburger[aria-expanded="true"] .site-header__hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {

    .site-nav,
    .site-header__cta {
        display: none;
    }

    .site-header__hamburger {
        display: flex;
    }
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 850;
    background-color: var(--color-charcoal);
    padding: 96px var(--space-3) var(--space-5);
    overflow-y: auto;
    flex-direction: column;
}

.mobile-menu[aria-hidden="false"] {
    display: flex;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu__link {
    display: block;
    padding: 14px var(--space-2);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color var(--transition-fast);
}

.mobile-menu__link:hover {
    background-color: rgba(255,255,255,0.06);
}

.mobile-menu__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px var(--space-2);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-white);
    background: none;
    border: none;
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.mobile-menu__accordion-trigger:hover {
    background-color: rgba(255,255,255,0.06);
}

.mobile-menu__sub {
    display: none;
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    list-style: none;
}

.mobile-menu__sub.is-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-menu__sub-link {
    display: block;
    padding: 10px var(--space-2);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.80);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-menu__sub-link:hover {
    background-color: rgba(255,255,255,0.06);
    color: var(--color-white);
}

.mobile-menu__sub-link--muted {
    color: var(--color-primary-mid);
    font-size: 13px;
    font-style: italic;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 10px;
}

.mobile-menu__cta {
    display: block;
    text-align: center;
    margin-top: var(--space-4);
    width: 100%;
}

/* =============================================================================
   3. HERO SLIDER
   ============================================================================= */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: var(--color-charcoal);
}

.hero-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.hero-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.hero-slider__slide.is-leaving {
    opacity: 0;
    z-index: 2;
}

/* Background image */
.hero-slider__bg {
    position: absolute;
    inset: 0;
}

.hero-slider__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Gradient overlay — heavier at bottom where text sits */
.hero-slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(11, 15, 20, 0.88) 0%,
            rgba(11, 15, 20, 0.55) 45%,
            rgba(11, 15, 20, 0.20) 100%);
}

/* Text content — bottom-left */
.hero-slider__content {
    position: absolute;
    bottom: clamp(80px, 10vh, 130px);
    left: 0;
    right: 0;
    z-index: 5;
    max-width: 700px;
    padding-inline: clamp(16px, 5vw, 80px);
}

/* Hero eyebrow pill */
.hero__eyebrow {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-3);
}

/* Hero headline */
.hero__title {
    font-size: var(--text-hero);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.06;
    margin-bottom: var(--space-3);
    max-width: 16ch;
}

/* Hero sub-line */
.hero__sub {
    font-size: var(--text-body-lg);
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.6;
    margin-bottom: var(--space-4);
    max-width: 54ch;
}

/* Hero CTA group */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* Staggered entrance animation */
.hero-slider__slide.is-entering .hero__eyebrow {
    animation: heroFadeUp 500ms 0ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slider__slide.is-entering .hero__title {
    animation: heroFadeUp 500ms 80ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slider__slide.is-entering .hero__sub {
    animation: heroFadeUp 500ms 160ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slider__slide.is-entering .hero__actions {
    animation: heroFadeUp 500ms 240ms both cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider__slide {
        transition: none;
    }

    .hero-slider__slide.is-entering .hero__eyebrow,
    .hero-slider__slide.is-entering .hero__title,
    .hero-slider__slide.is-entering .hero__sub,
    .hero-slider__slide.is-entering .hero__actions {
        animation: none;
    }
}

/* Prev / Next arrow buttons */
.hero-slider__prev,
.hero-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(11, 15, 20, 0.25);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-base),
        background var(--transition-base);
    backdrop-filter: blur(4px);
}

.hero-slider__prev {
    left: clamp(12px, 3vw, 40px);
}

.hero-slider__next {
    right: clamp(12px, 3vw, 40px);
}

.hero-slider__prev:hover,
.hero-slider__next:hover {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(11, 15, 20, 0.50);
}

@media (max-width: 640px) {

    .hero-slider__prev,
    .hero-slider__next {
        display: none;
    }
}

/* Dot indicators */
.hero-slider__dots {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.hero-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 200ms ease, transform 200ms ease;
}

.hero-slider__dot[aria-current="true"] {
    background: var(--color-primary);
    transform: scale(1.5);
}

/* Scroll indicator */
.hero-slider__scroll-indicator {
    position: absolute;
    bottom: var(--space-4);
    right: clamp(24px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    z-index: 10;
    opacity: 0.5;
    transition: opacity var(--transition-slow);
}

.hero-slider__scroll-indicator.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.scroll-indicator__line {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.4);
}

.scroll-indicator__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    margin-top: -24px;
    animation: scrollDot 1.5s ease-in-out infinite;
}

@keyframes scrollDot {
    0% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(16px);
        opacity: 1;
    }

    100% {
        transform: translateY(32px);
        opacity: 0;
    }
}

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

/* =============================================================================
   4. CAPABILITY STRIP
   ============================================================================= */
.capability-strip__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}

.capability-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.capability-item__icon {
    width: 48px;
    height: 48px;
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.capability-item__title {
    font-size: var(--text-h5);
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
}

.capability-item__desc {
    font-size: var(--text-body-sm);
    color: var(--color-muted);
    line-height: 1.5;
    max-width: 100%;
}

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

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

/* =============================================================================
   5. SERVICE CARDS
   ============================================================================= */
.service-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: transform var(--transition-slow),
        box-shadow var(--transition-slow),
        border-color var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

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

.service-card__icon {
    width: 52px;
    height: 52px;
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    transition: background var(--transition-slow);
    flex-shrink: 0;
}

.service-card:hover .service-card__icon {
    background: var(--color-teal-100);
}

.service-card__title {
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.service-card__desc {
    font-size: var(--text-body-sm);
    color: var(--color-muted);
    line-height: 1.55;
    flex-grow: 1;
    margin-bottom: var(--space-3);
    max-width: 100%;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.service-card__link:hover {
    color: var(--color-primary-dark);
    gap: 10px;
}

.service-card--proposed {
    opacity: 0.7;
}

.service-card__badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    background: var(--color-card);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

/* =============================================================================
   6. PROJECT CARDS
   ============================================================================= */
.project-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-slow),
        box-shadow var(--transition-slow);
}

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

.project-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

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

/* Video play overlay */
.project-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 153, 153, 0.88);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base),
        transform var(--transition-base),
        background var(--transition-fast);
}

.project-card--has-video:hover .project-card__play,
.project-card--has-video:focus-within .project-card__play {
    opacity: 1;
}

.project-card__play:hover {
    background: var(--color-primary-dark);
    transform: translate(-50%, -50%) scale(1.1);
}

.project-card__body {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    flex-grow: 1;
}

.project-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.project-card__year {
    font-size: var(--text-body-sm);
    color: var(--color-muted);
    font-weight: 500;
}

.project-card__title {
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.project-card__scope {
    font-size: var(--text-body-sm);
    color: var(--color-muted);
    line-height: 1.55;
    flex-grow: 1;
    margin-bottom: var(--space-3);
    max-width: 100%;
}

.project-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition-fast), color var(--transition-fast);
    margin-top: auto;
}

.project-card__link:hover {
    color: var(--color-primary-dark);
    gap: 10px;
}

/* =============================================================================
   7. INDUSTRY CARDS
   ============================================================================= */
.industry-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: transform var(--transition-slow),
        box-shadow var(--transition-slow),
        border-color var(--transition-slow);
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.industry-card__icon {
    width: 52px;
    height: 52px;
    background: var(--color-primary-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.industry-card__title {
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
}

.industry-card__desc {
    font-size: var(--text-body-sm);
    color: var(--color-muted);
    line-height: 1.55;
    flex-grow: 1;
    margin-bottom: var(--space-3);
    max-width: 100%;
}

.industry-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.industry-card__link:hover {
    color: var(--color-primary-dark);
    gap: 10px;
}

/* =============================================================================
   8. BADGES / TAGS
   ============================================================================= */
.badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    line-height: 1.5;
}

.badge--industry {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.badge--service {
    background: var(--color-teal-100);
    color: var(--color-teal-800);
}

.badge--coming-soon {
    background: var(--color-card);
    color: var(--color-muted);
}

/* =============================================================================
   9. SECTION CONTENT PATTERNS
   ============================================================================= */

/* Section header */
.section__header {
    margin-bottom: var(--space-6);
}

.section__header--center {
    text-align: center;
}

.section__header--center .section__lead {
    margin-inline: auto;
}

/* Safety pillars */
.safety-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.safety-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
}

.safety-pillar__icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 153, 153, 0.20);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-mid);
}

.safety-pillar__title {
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--color-white);
}

.safety-pillar__desc {
    font-size: var(--text-body-sm);
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.55;
    max-width: 100%;
}

@media (max-width: 640px) {
    .safety-pillars {
        grid-template-columns: 1fr;
    }
}

/* Clients strip */
.clients-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
}

.client-logo {
    font-size: var(--text-h5);
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: -0.01em;
    transition: color var(--transition-base);
    text-align: center;
}

.client-logo:hover {
    color: var(--color-ink);
}

/* CTA Section */
.cta-section {
    text-align: center;
    padding-block: var(--space-section);
}

.cta-section__heading {
    font-size: var(--text-h1);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-3);
    max-width: 18ch;
    margin-inline: auto;
}

.cta-section__sub {
    font-size: var(--text-body-lg);
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: var(--space-5);
    max-width: 52ch;
    margin-inline: auto;
}

.cta-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   10. BREADCRUMB
   ============================================================================= */
.breadcrumb {
    padding-block: var(--space-3);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-body-sm);
    color: var(--color-muted);
}

.breadcrumb__item::after {
    content: '/';
    color: var(--color-card);
}

.breadcrumb__item:last-child::after {
    display: none;
}

.breadcrumb__item a {
    color: var(--color-muted);
    transition: color var(--transition-fast);
}

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

.breadcrumb__item--current {
    color: var(--color-ink);
    font-weight: 500;
}

/* =============================================================================
   11. FORMS
   ============================================================================= */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.form-label {
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--color-ink);
}

.form-label .required {
    color: var(--color-error);
    margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    color: var(--color-ink);
    background: var(--color-white);
    border: 1.5px solid #D1D5DB;
    border-radius: var(--radius);
    transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    appearance: none;
}

.form-textarea {
    height: auto;
    min-height: 140px;
    padding: var(--space-2) var(--space-3);
    resize: vertical;
    line-height: 1.65;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.15);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
    border-color: var(--color-error);
}

.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color: var(--color-success);
}

.form-error {
    font-size: var(--text-body-sm);
    color: var(--color-error);
    display: none;
}

.form-error.is-visible {
    display: block;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767171' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-group--consent {
    margin-top: var(--space-2);
}

.form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-body-sm);
    color: var(--color-muted);
    cursor: pointer;
    line-height: 1.5;
}

.form-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-success {
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 168, 150, 0.10);
    border: 1px solid var(--color-success);
    border-radius: var(--radius);
    color: var(--color-ink);
    font-size: var(--text-body);
    display: none;
}

.form-success.is-visible {
    display: block;
}

.form-error-global {
    padding: var(--space-3) var(--space-4);
    background: rgba(185, 28, 28, 0.08);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
    color: var(--color-error);
    font-size: var(--text-body);
    display: none;
}

.form-error-global.is-visible {
    display: block;
}

/* =============================================================================
   12. VIDEO MODAL
   ============================================================================= */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
}

.video-modal[hidden] {
    display: none;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 15, 20, 0.93);
    animation: backdropIn 300ms ease-out forwards;
    cursor: pointer;
}

.video-modal__container {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    animation: modalIn 300ms ease-out forwards;
    z-index: 1;
}

.video-modal__video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    border-radius: var(--radius);
}

.video-modal__close {
    position: absolute;
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-fast),
        background var(--transition-fast);
}

.video-modal__close:hover {
    border-color: var(--color-white);
    background: rgba(255, 255, 255, 0.10);
}

@keyframes backdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .video-modal__backdrop,
    .video-modal__container {
        animation: none;
    }
}

/* =============================================================================
   13. SITE FOOTER
   ============================================================================= */
.site-footer {
    background: linear-gradient(180deg, #003333 0%, #001e1e 100%);
    color: #ffffff;
}

/* ── Top section: brand left + nav columns right ── */
.site-footer__top {
    padding-block: 5rem 3.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.site-footer__top > .container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
}

/* Brand column — fixed width, right border divider */
.site-footer__brand-column {
    flex: 0 0 340px;
    min-width: 280px;
    padding-right: 3.5rem;
    border-right: 1px solid rgba(255,255,255,0.08);
    margin-right: 3.5rem;
}

.site-footer__brand-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    margin-bottom: 1rem;
}

.site-footer__logo-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    line-height: 1.1;
}

.site-footer__logo-name span {
    color: var(--color-primary-mid);
}

.site-footer__tagline {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
}

.site-footer__desc {
    font-size: 14px;
    color: rgba(255,255,255,0.60);
    line-height: 1.65;
    margin-block: 1.25rem 2rem;
    max-width: 32ch;
}

/* Contact items */
.site-footer__contact-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.site-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: rgba(255,255,255,0.80);
    font-size: 13.5px;
    transition: color var(--transition-fast);
}

.site-footer__contact-item svg {
    color: var(--color-primary-mid);
    flex-shrink: 0;
}

.site-footer__contact-item:hover {
    color: #ffffff;
}

/* Nav columns wrapper — takes remaining space, flex row */
.site-footer__links-column {
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 4rem;
}

/* Each individual nav column */
.site-footer__link-column {
    flex: 1;
}

.site-footer__col-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary-mid);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__nav li + li {
    border-top: 1px solid rgba(255,255,255,0.04);
}

.site-footer__nav-link {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.site-footer__nav-link:hover {
    color: #ffffff;
    padding-left: 6px;
}

/* ── Bottom bar ── */
.site-footer__bottom {
    background: rgba(0,0,0,0.20);
    padding-block: 1.5rem;
}

.site-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-footer__copy {
    font-size: 13px;
    color: rgba(255,255,255,0.40);
}

.site-footer__legal {
    display: flex;
    gap: 2rem;
}

.site-footer__legal-link {
    font-size: 13px;
    color: rgba(255,255,255,0.40);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-footer__legal-link:hover {
    color: rgba(255,255,255,0.85);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .site-footer__brand-column {
        flex: 0 0 280px;
        padding-right: 2.5rem;
        margin-right: 2.5rem;
    }

    .site-footer__links-column {
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .site-footer__top > .container {
        flex-direction: column;
    }

    .site-footer__brand-column {
        flex: none;
        width: 100%;
        min-width: unset;
        padding-right: 0;
        border-right: none;
        margin-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding-bottom: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .site-footer__desc {
        max-width: 100%;
    }

    .site-footer__links-column {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .site-footer__links-column {
        flex-direction: column;
        gap: 2rem;
    }
}

/* =============================================================================
   14. STATS STRIP (disabled by default)
   ============================================================================= */
.stats-strip[data-enabled="false"] {
    display: none;
}

.stats-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    text-align: center;
}

.stat-item__number {
    display: block;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    color: var(--color-primary-mid);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.stat-item__label {
    font-size: var(--text-body-sm);
    color: rgba(255, 255, 255, 0.60);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

/* =============================================================================
   15. SCROLL REVEAL
   ============================================================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-reveal),
        transform var(--transition-reveal);
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =============================================================================
   HERO VIDEO (homepage)
   ============================================================================= */
.hero-video {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-video__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video__vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-video__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(11,15,20,0.75) 0%,
        rgba(1,61,61,0.55) 60%,
        rgba(11,15,20,0.40) 100%);
}

.hero-video__content {
    position: relative;
    z-index: 2;
    padding-block: 120px 80px;
}

.hero-panel {
    display: none;
    max-width: 680px;
}

.hero-panel.is-active {
    display: block;
}

.hero__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary-mid);
    margin-bottom: var(--space-3);
    padding: 5px 12px;
    border: 1px solid rgba(91,189,189,0.35);
    border-radius: var(--radius-pill);
    background: rgba(91,189,189,0.08);
}

.hero__title {
    font-size: var(--text-hero);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}

.hero__sub {
    font-size: var(--text-body-lg);
    color: rgba(255,255,255,0.80);
    max-width: 52ch;
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.hero__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Hero dots */
.hero-video__dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.hero-slider__dot {
    width: 28px;
    height: 3px;
    background: rgba(255,255,255,0.35);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-fast), width var(--transition-fast);
}

.hero-slider__dot[aria-current="true"] {
    background: var(--color-primary-mid);
    width: 44px;
}

/* Scroll indicator */
.hero-slider__scroll-indicator {
    position: absolute;
    bottom: 32px;
    right: 32px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 1;
    transition: opacity var(--transition-slow);
}

.hero-slider__scroll-indicator.is-hidden { opacity: 0; }

.scroll-indicator__line {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.35);
}

.scroll-indicator__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary-mid);
    animation: scrollBounce 1.5s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* =============================================================================
   SERVICE FEATURED SECTION (homepage)
   ============================================================================= */
.svc-featured-section {
    background: var(--color-charcoal);
    padding-block: var(--space-section);
}

.svc-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.svc-feat-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.svc-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.svc-feat-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.svc-feat-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.svc-feat-card:hover .svc-feat-card__img img {
    transform: scale(1.05);
}

.svc-feat-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(11,15,20,0.92) 0%,
        rgba(11,15,20,0.45) 55%,
        transparent 100%);
    pointer-events: none;
}

.svc-feat-card__body {
    position: relative;
    z-index: 2;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
}

.svc-feat-card__num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-mid);
    margin-bottom: 6px;
}

.svc-feat-card__title {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 8px;
}

.svc-feat-card__desc {
    font-size: var(--text-body-sm);
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
    margin-bottom: var(--space-2);
    max-width: 42ch;
}

.svc-feat-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary-mid);
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.svc-feat-card:hover .svc-feat-card__cta {
    gap: 10px;
    color: var(--color-white);
}

/* Also links */
.svc-also {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.svc-also__label {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: var(--space-2);
}

.svc-also__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
}

.svc-also__link {
    display: inline-block;
    padding: 8px 16px;
    font-size: var(--text-body-sm);
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.svc-also__link:hover {
    border-color: var(--color-primary-mid);
    color: var(--color-white);
    background-color: rgba(0,153,153,0.12);
}

/* =============================================================================
   SAFETY BAR (homepage)
   ============================================================================= */
.safety-bar {
    background: var(--color-primary-dark);
    padding-block: var(--space-3);
}

.safety-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.safety-bar__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
}

.safety-bar__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.90);
}

.safety-bar__pill svg {
    color: var(--color-primary-mid);
    flex-shrink: 0;
}

.safety-bar__sep {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.15);
}

.safety-bar__text {
    font-size: var(--text-body-sm);
    color: rgba(255,255,255,0.60);
}

.safety-bar__link {
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--color-primary-mid);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.safety-bar__link:hover {
    color: var(--color-white);
}

/* =============================================================================
   SKIP LINK (accessibility)
   ============================================================================= */
.skip-link {
    position: absolute;
    top: -40px;
    left: var(--space-3);
    z-index: 10000;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-body-sm);
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-3);
}

/* =============================================================================
   PAGE HERO (inner pages)
   ============================================================================= */
.page-hero {
    position: relative;
    min-height: clamp(300px, 45vh, 500px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--color-charcoal);
}

.page-hero__bg {
    position: absolute;
    inset: 0;
}

.page-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(11,15,20,0.88) 0%,
        rgba(11,15,20,0.55) 60%,
        rgba(11,15,20,0.20) 100%);
}

.page-hero__content {
    position: relative;
    z-index: 2;
    padding-top: calc(80px + var(--space-7));
    padding-bottom: var(--space-7);
    width: 100%;
}

.page-hero__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-mid);
    background: rgba(0,153,153,0.15);
    border: 1px solid rgba(0,153,153,0.30);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    margin-bottom: var(--space-3);
}

.page-hero__title {
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: var(--space-3);
    max-width: 20ch;
}

.page-hero__desc {
    font-size: clamp(14px, 1.8vw, 17px);
    color: rgba(255,255,255,0.65);
    max-width: 56ch;
    line-height: 1.7;
}

/* Responsive mobile menu breakpoint override */
@media (max-width: 1024px) {
    .site-header__hamburger { display: flex; }
    .site-nav { display: none; }
    .site-header__cta { display: none; }
}


/* =============================================================================
   ACTIVE NAV LINK
   ============================================================================= */
.site-nav__link--active {
    color: var(--color-primary) !important;
}

/* Underline indicator for active link */
.site-nav__link--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: var(--space-2);
    right: var(--space-2);
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

.site-nav__item { position: relative; }

/* =============================================================================
   SCROLL BREADCRUMB BAR
   ============================================================================= */
.scroll-breadcrumb {
    position: fixed;
    top: 80px;          /* sits flush below the 80px header */
    left: 0;
    right: 0;
    z-index: 990;       /* just below header (1000) */
    height: 36px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-card);
    box-shadow: 0 2px 8px rgba(11, 15, 20, 0.06);

    /* Hidden by default — slides down from behind the header */
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition:
        opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state — added by JS */
.scroll-breadcrumb.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-breadcrumb__inner {
    height: 100%;
    display: flex;
    align-items: center;
}

.scroll-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

.scroll-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    flex-shrink: 0;
}

/* Last item can shrink/truncate */
.scroll-breadcrumb__item--current {
    flex-shrink: 1;
    min-width: 0;
}

.scroll-breadcrumb__link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 0;
    transition: color var(--transition-fast);
}

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

.scroll-breadcrumb__sep {
    color: var(--color-card);
    flex-shrink: 0;
    margin: 0 2px;
}

.scroll-breadcrumb__current {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

/* First item: Home — add a tiny home icon prefix */
.scroll-breadcrumb__item:first-child .scroll-breadcrumb__link::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767171' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    vertical-align: -1px;
    margin-right: 4px;
    opacity: 0.65;
}

/* Teal tint accent line on left edge */
.scroll-breadcrumb::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
}

/* Responsive */
@media (max-width: 640px) {
    .scroll-breadcrumb__item:not(:last-child):not(:nth-last-child(2)) {
        display: none; /* On mobile: only show immediate parent + current */
    }

    .scroll-breadcrumb__current {
        max-width: 180px;
    }
}

/* Don't show on homepage (no breadcrumbs rendered there) */
/* When breadcrumb bar is visible, offset any anchor targets */
.scroll-breadcrumb.is-visible ~ * [id] {
    scroll-margin-top: 120px;
}


/* =============================================================================
   PAGE-SPECIFIC STYLES (extracted from inline <style> blocks)
   ============================================================================= */

/* ── HERO VIDEO (homepage) ──────────────────────────────────── */
.hero-video{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;background:#0B0F14}
.hero-video__bg{position:absolute;inset:0}
.hero-video__vid{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-video__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,15,20,.88) 0%,rgba(11,15,20,.52) 45%,rgba(11,15,20,.18) 100%)}
.hero-video__content{position:absolute;bottom:clamp(80px,10vh,130px);left:0;right:0;z-index:5;padding-inline:clamp(16px,5vw,80px);max-width:calc(var(--max-width) + clamp(32px,10vw,160px));margin-inline:auto}
.hero-panel{max-width:700px;opacity:0;transform:translateY(18px);transition:opacity 650ms cubic-bezier(.16,1,.3,1),transform 650ms cubic-bezier(.16,1,.3,1);pointer-events:none;position:absolute;bottom:0}
.hero-panel.is-active{opacity:1;transform:none;pointer-events:auto;position:relative}
@media(prefers-reduced-motion:reduce){.hero-panel{transition:opacity 200ms ease;transform:none !important}}
.hero-video__dots{position:absolute;bottom:var(--space-4);left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
@media(max-width:480px){.hero-video{height:92vh}}

/* ── CLIENTS MARQUEE (homepage) ─────────────────────────────── */
.clients-marquee-wrap{background:var(--color-charcoal);overflow:hidden;padding-block:var(--space-4);border-bottom:1px solid rgba(255,255,255,.06)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}
.marquee__track{display:flex;align-items:center;gap:var(--space-6);width:max-content;animation:marqueeScroll 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}
.marquee-client{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.marquee-client__logo{height:68px;width:auto;object-fit:contain;transition:transform 220ms cubic-bezier(.34,1.56,.64,1);border-radius:4px}
.marquee-client:hover .marquee-client__logo{transform:scale(1.18)}
.marquee__sep{width:5px;height:5px;border-radius:50%;background:rgba(0,153,153,.35);flex-shrink:0;display:block}

/* ── PROCESS TIMELINE — Step 1→6 with draw-in line ──────────── */
.proc-section { padding-bottom: var(--space-9); }

.proc-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: var(--space-7);
  padding-bottom: var(--space-5);
}

/* The track holds the background rail and the animated fill */
.proc-timeline__track {
  position: absolute;
  top: 28px; /* vertically centred on the circle */
  left: calc(100% / 12); /* start at first node centre */
  right: calc(100% / 12); /* end at last node centre */
  height: 2px;
  background: rgba(0, 153, 153, 0.15);
  z-index: 0;
}

/* Animated fill — drawn left to right by JS */
.proc-timeline__line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-primary), var(--color-primary-mid));
  transform-origin: left center;
  transform: scaleX(0);
  transition: none; /* driven by JS */
  box-shadow: 0 0 8px rgba(0, 153, 153, 0.5);
}

/* Each step */
.proc-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}

/* The circle node */
.proc-step__node {
  position: relative;
  flex-shrink: 0;
}

.proc-step__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-card);
  border: 2px solid rgba(0, 153, 153, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 153, 153, 0.4);
  transition: background 400ms ease, border-color 400ms ease,
              color 400ms ease, box-shadow 400ms ease;
}

.proc-step__icon {
  transition: stroke 400ms ease;
}

/* Active state — triggered by JS */
.proc-step.is-active .proc-step__circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 0 0 6px rgba(0, 153, 153, 0.12),
              0 0 20px rgba(0, 153, 153, 0.3);
}

/* Step number — counts up via JS */
.proc-step__num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(0, 153, 153, 0.35);
  line-height: 1;
  margin-bottom: 4px;
  transition: color 400ms ease;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.proc-step.is-active .proc-step__num {
  color: var(--color-primary);
}

.proc-step__title {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600;
  color: var(--color-muted);
  line-height: 1.35;
  margin: 0;
  transition: color 400ms ease;
}

.proc-step.is-active .proc-step__title {
  color: var(--color-ink);
}

/* Reduced motion — show all active immediately */
@media (prefers-reduced-motion: reduce) {
  .proc-timeline__line { transform: scaleX(1); }
  .proc-step.is-active .proc-step__circle,
  .proc-step { /* show all */ }
}

/* ── Mobile — vertical timeline ─────────────────────────────── */
@media (max-width: 767px) {
  .proc-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding-left: 36px;
  }

  .proc-timeline__track {
    top: calc(100% / 12);
    bottom: calc(100% / 12);
    left: 27px;  /* circle centre */
    right: auto;
    width: 2px;
    height: auto;
  }

  .proc-timeline__line {
    transform-origin: top center;
    transform: scaleY(0);
  }

  .proc-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
  }

  .proc-step__node { flex-shrink: 0; }

  .proc-step__circle {
    width: 44px;
    height: 44px;
  }

  .proc-step__content { padding-top: 6px; }
}

@media (max-width: 580px) {
  .proc-step__title { font-size: 14px; }
}


/* ── SERVICE ROWS PAGE (services.html) ──────────────────────── */
.svc-rows{background:var(--color-card);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) clamp(16px,5vw,80px)}
.svc-row{display:grid;grid-template-columns:60fr 40fr;height:420px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--color-white);border-left:4px solid transparent;transition:border-color 250ms ease,box-shadow 250ms ease}
.svc-row:hover{border-left-color:var(--color-primary);box-shadow:var(--shadow-md)}
.svc-row--flip{grid-template-columns:40fr 60fr}
.svc-row--flip .svc-row__text{order:2}
.svc-row--flip .svc-row__img-wrap{order:1}
.svc-row__text{background:var(--color-white);padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);overflow:hidden}
.svc-row__num{font-size:clamp(28px,4vw,48px);font-weight:900;color:rgba(0,153,153,.12);line-height:1;letter-spacing:-.02em;display:block;transition:color 250ms ease}
.svc-row:hover .svc-row__num{color:rgba(0,153,153,.35)}
.svc-row__title{font-size:clamp(18px,2.2vw,26px);font-weight:700;color:var(--color-ink);line-height:1.15;margin:0;transition:color 200ms ease}
.svc-row:hover .svc-row__title{color:var(--color-primary-dark)}
.svc-row__lead{font-size:clamp(12px,1.3vw,14px);color:var(--color-muted);line-height:1.6;max-width:52ch}
.svc-row__caps{display:flex;flex-direction:column;gap:5px;padding:0;margin:0}
.svc-row__caps li{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--color-muted);line-height:1.5}
.svc-row__caps li::before{content:'';width:5px;height:5px;background:var(--color-primary);border-radius:50%;flex-shrink:0;margin-top:5px;transition:background 200ms ease,transform 200ms ease}
.svc-row:hover .svc-row__caps li::before{background:var(--color-primary-dark);transform:scale(1.3)}
.svc-row__cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--color-primary);text-decoration:none;margin-top:var(--space-1);transition:gap 200ms ease,color 200ms ease}
.svc-row__cta svg{transition:transform 200ms ease}
.svc-row:hover .svc-row__cta{color:var(--color-primary-dark);gap:12px}
.svc-row:hover .svc-row__cta svg{transform:translateX(4px)}
.svc-row__img-wrap{position:relative;overflow:hidden;height:100%}
.svc-row__img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.svc-row:hover .svc-row__img-wrap img{transform:scale(1.05)}
.svc-row__img-overlay{position:absolute;inset:0;background:rgba(11,15,20,.22);transition:background 250ms ease}
.svc-row:hover .svc-row__img-overlay{background:rgba(11,15,20,.08)}
@media(max-width:900px){.svc-row{height:340px}.svc-row__text{padding:var(--space-4)}.svc-row__lead{display:none}}
@media(max-width:640px){.svc-rows{gap:var(--space-2);padding:var(--space-4) var(--space-2)}.svc-row{grid-template-columns:1fr 80px;height:auto;min-height:130px;border-radius:var(--radius)}.svc-row--flip{grid-template-columns:80px 1fr}.svc-row__text{padding:var(--space-3);gap:var(--space-1)}.svc-row__num{font-size:20px}.svc-row__title{font-size:14px}.svc-row__lead,.svc-row__caps{display:none}.svc-row__cta{font-size:11px;margin-top:var(--space-1)}}
@media(prefers-reduced-motion:reduce){.svc-row__img-wrap img,.svc-row,.svc-row__title,.svc-row__cta{transition:none}}

/* ── ABOUT PAGE STYLES ──────────────────────────────────────── */
.about-hero{position:relative;min-height:clamp(680px,90vh,960px);overflow:hidden;background:var(--color-charcoal);display:flex;align-items:flex-end}
.about-hero__bg{position:absolute;inset:0;z-index:0}
.about-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.about-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(11,15,20,.88) 0%,rgba(11,15,20,.55) 60%,rgba(11,15,20,.20) 100%)}
.about-hero__content{position:relative;z-index:2;width:100%;padding-top:calc(80px + var(--space-8));padding-bottom:clamp(var(--space-8),10vh,var(--space-9))}
.about-hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary-mid);background:rgba(0,153,153,.15);border:1px solid rgba(0,153,153,.30);border-radius:var(--radius-pill);padding:6px 16px;margin-bottom:var(--space-3)}
.about-hero__title{font-size:clamp(28px,5vw,54px);font-weight:800;color:var(--color-white);line-height:1.1;margin-bottom:var(--space-3);max-width:14ch}
.about-hero__sub{font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.68);max-width:54ch;line-height:1.65}
.about-section-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3)}
.about-section-label svg{color:var(--color-primary);flex-shrink:0}
.about-section-title{font-size:var(--text-h2);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-6);line-height:1.15}
.about-split{display:grid;grid-template-columns:1fr 360px;gap:var(--space-8);align-items:start}
@media(max-width:900px){.about-split{grid-template-columns:1fr}}
.about-split__text p{font-size:var(--text-body-lg);color:var(--color-muted);line-height:1.75;margin-bottom:var(--space-3);max-width:64ch}
.about-split__facts{display:flex;flex-direction:column;gap:0}
.about-fact-card{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-white);border-bottom:1px solid var(--color-card);transition:background var(--transition-fast)}
.about-fact-card:first-child{border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:1px solid var(--color-card);border-bottom:none}
.about-fact-card:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg);border:1px solid var(--color-card);border-top:none}
.about-fact-card:not(:first-child):not(:last-child){border:1px solid var(--color-card);border-top:none}
.about-fact-card:hover{background:var(--color-primary-light)}
.about-fact-card__icon{width:38px;height:38px;background:var(--color-primary-light);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0}
.about-fact-card__label{font-size:11px;font-weight:600;color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.about-fact-card__value{font-size:14px;font-weight:600;color:var(--color-ink)}
.about-fact-card__link{color:var(--color-primary-dark);text-decoration:none}
.about-fact-card__link:hover{text-decoration:underline}
.about-mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:768px){.about-mv-grid{grid-template-columns:1fr}}
.about-mv-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.about-mv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.about-mv-card--vision::before{background:var(--color-primary)}
.about-mv-card--mission::before{background:var(--color-primary-dark)}
.about-mv-card__header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.about-mv-card__icon{width:52px;height:52px;background:var(--color-primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0}
.about-mv-card__label{font-size:var(--text-h4);font-weight:700;color:var(--color-ink)}
.about-mv-card__quote{font-size:var(--text-body);color:var(--color-muted);line-height:1.8;font-style:italic;border-left:3px solid var(--color-primary-light);padding-left:var(--space-3);margin:0}
.about-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:768px){.about-values-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.about-values-grid{grid-template-columns:1fr}}
.about-value{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--color-card);border-radius:var(--radius-lg);transition:transform var(--transition-slow),box-shadow var(--transition-slow),border-color var(--transition-slow)}
.about-value:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary-light)}
.about-value__icon{width:48px;height:48px;background:var(--color-primary-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-primary)}
.about-value__title{font-size:var(--text-h5);font-weight:700;color:var(--color-ink)}
.about-value__desc{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.65;max-width:100%}
.about-why-list{display:flex;flex-direction:column;gap:var(--space-4)}
.about-why-item{display:grid;grid-template-columns:60px 52px 1fr;gap:0 var(--space-3);align-items:start;padding:var(--space-4);background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-card);transition:border-color var(--transition-slow),box-shadow var(--transition-slow)}
.about-why-item:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-sm)}
.about-why-item__num{font-size:clamp(28px,4vw,42px);font-weight:900;color:rgba(0,153,153,.12);line-height:1;letter-spacing:-.02em;display:flex;align-items:flex-start}
.about-why-item__icon{width:52px;height:52px;background:var(--color-primary-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-primary)}
.about-why-item__title{font-size:var(--text-h5);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-1)}
.about-why-item__desc{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.65;max-width:64ch}
@media(max-width:640px){.about-why-item{grid-template-columns:1fr}.about-why-item__num{display:none}}
.about-explore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
@media(max-width:900px){.about-explore-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.about-explore-grid{grid-template-columns:1fr}}
.about-explore-card{display:flex;flex-direction:column;padding:var(--space-4);background:var(--color-white);border:1px solid var(--color-card);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:transform var(--transition-slow),box-shadow var(--transition-slow),border-color var(--transition-slow)}
.about-explore-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary-light)}
.about-explore-card--cta{background:var(--color-primary);border-color:var(--color-primary)}
.about-explore-card--cta .about-explore-card__icon{background:rgba(255,255,255,.15);color:var(--color-white)}
.about-explore-card--cta .about-explore-card__title{color:var(--color-white)}
.about-explore-card--cta .about-explore-card__desc{color:rgba(255,255,255,.75)}
.about-explore-card--cta .about-explore-card__cta{color:rgba(255,255,255,.85)}
.about-explore-card__icon{width:52px;height:52px;background:var(--color-primary-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-primary);margin-bottom:var(--space-3)}
.about-explore-card__title{font-size:var(--text-h5);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-1)}
.about-explore-card__desc{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.55;flex:1;margin-bottom:var(--space-3);max-width:100%}
.about-explore-card__cta{font-size:13px;font-weight:600;color:var(--color-primary);margin-top:auto}

/* ── SAFETY PAGE STYLES ─────────────────────────────────────── */
.safety-hero{position:relative;overflow:hidden;background:var(--color-charcoal)}
.safety-hero__bg{position:absolute;inset:0}
.safety-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.safety-hero__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(11,15,20,.92) 0%,rgba(11,15,20,.70) 50%,rgba(11,15,20,.30) 100%)}
.safety-hero__content{position:relative;z-index:2;padding-top:calc(80px + var(--space-8));padding-bottom:var(--space-8)}
.safety-hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary-mid);background:rgba(0,153,153,.15);border:1px solid rgba(0,153,153,.30);border-radius:var(--radius-pill);padding:6px 16px;margin-bottom:var(--space-3)}
.safety-hero__title{font-size:clamp(28px,5vw,52px);font-weight:800;color:var(--color-white);line-height:1.1;margin-bottom:var(--space-3);max-width:15ch}
.safety-hero__sub{font-size:clamp(14px,1.8vw,17px);color:rgba(255,255,255,.65);max-width:56ch;line-height:1.7}
.safety-hero__principles{position:relative;z-index:2;background:rgba(0,153,153,.10);border-top:1px solid rgba(0,153,153,.20);padding-block:var(--space-4)}
.safety-principles-bar{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.safety-principle{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:180px}
.safety-principle__icon{width:44px;height:44px;background:rgba(0,153,153,.20);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary-mid);flex-shrink:0}
.safety-principle__label{font-size:13px;font-weight:700;color:var(--color-white);margin-bottom:2px}
.safety-principle__desc{font-size:11px;color:rgba(255,255,255,.50);line-height:1.4}
.safety-principle__divider{width:1px;height:48px;background:rgba(255,255,255,.12);flex-shrink:0}
@media(max-width:640px){.safety-principle__divider{display:none}.safety-principles-bar{gap:var(--space-4)}}
.safety-section-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3)}
.safety-section-label svg{color:var(--color-primary);flex-shrink:0}
.safety-section-title{font-size:var(--text-h2);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-4);line-height:1.15}
.safety-split{display:grid;grid-template-columns:1fr 400px;gap:var(--space-8);align-items:start}
@media(max-width:900px){.safety-split{grid-template-columns:1fr}}
.safety-split p{font-size:var(--text-body-lg);color:var(--color-muted);line-height:1.75;margin-bottom:var(--space-3);max-width:64ch}
.safety-philosophy-card{background:var(--color-charcoal);border-radius:var(--radius-lg);padding:var(--space-6);position:relative;overflow:hidden}
.safety-philosophy-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-primary)}
.safety-philosophy-card__icon{width:56px;height:56px;background:rgba(0,153,153,.20);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary-mid);margin-bottom:var(--space-4)}
.safety-philosophy-card__quote{font-size:var(--text-body);color:rgba(255,255,255,.80);line-height:1.8;font-style:italic;border-left:3px solid var(--color-primary);padding-left:var(--space-4);margin:0 0 var(--space-3)}
.safety-philosophy-card__attr{font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase}
.safety-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:900px){.safety-pillars-grid{grid-template-columns:1fr}}
.safety-pillar-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform var(--transition-slow),box-shadow var(--transition-slow)}
.safety-pillar-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.safety-pillar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--color-primary)}
.safety-pillar-card__number{font-size:48px;font-weight:900;color:rgba(0,153,153,.08);line-height:1;margin-bottom:var(--space-2)}
.safety-pillar-card__icon{width:52px;height:52px;background:var(--color-primary-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-primary);margin-bottom:var(--space-3);transition:background var(--transition-base),color var(--transition-base)}
.safety-pillar-card:hover .safety-pillar-card__icon{background:var(--color-primary);color:var(--color-white)}
.safety-pillar-card__title{font-size:var(--text-h4);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-2)}
.safety-pillar-card__desc{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.65;margin-bottom:var(--space-3);max-width:100%}
.safety-pillar-card__points{display:flex;flex-direction:column;gap:6px;padding:0;margin:0}
.safety-pillar-card__points li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--color-muted);line-height:1.5}
.safety-pillar-card__points li::before{content:'';width:5px;height:5px;background:var(--color-primary);border-radius:50%;flex-shrink:0;margin-top:5px}
.safety-program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media(max-width:900px){.safety-program-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.safety-program-grid{grid-template-columns:1fr}}
.safety-program-item{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--color-card);border-radius:var(--radius-lg);border-left:3px solid var(--color-primary-light);transition:background var(--transition-base),border-color var(--transition-base),transform var(--transition-base)}
.safety-program-item:hover{background:var(--color-white);border-left-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.safety-program-item__icon{width:44px;height:44px;background:var(--color-primary-light);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0;transition:background var(--transition-base),color var(--transition-base)}
.safety-program-item:hover .safety-program-item__icon{background:var(--color-primary);color:var(--color-white)}
.safety-program-item__title{font-size:var(--text-h5);font-weight:700;color:var(--color-ink);margin:0}
.safety-program-item__desc{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.65;max-width:100%}
.section--charcoal{background:var(--color-charcoal);padding-block:var(--space-section)}
.safety-commitment{display:flex;gap:var(--space-6);align-items:flex-start;background:rgba(0,153,153,.08);border:1px solid rgba(0,153,153,.20);border-radius:var(--radius-lg);padding:var(--space-6)}
@media(max-width:640px){.safety-commitment{flex-direction:column;gap:var(--space-4)}}
.safety-commitment__icon{width:72px;height:72px;background:rgba(0,153,153,.20);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary-mid);flex-shrink:0}
.safety-commitment__title{font-size:var(--text-h3);font-weight:700;color:var(--color-white);margin-bottom:var(--space-3)}
.safety-commitment__text{font-size:var(--text-body);color:rgba(255,255,255,.65);line-height:1.75;max-width:68ch;margin-bottom:var(--space-4)}
.safety-commitment__btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--color-primary-mid);background:rgba(0,153,153,.15);border:1px solid rgba(0,153,153,.30);border-radius:var(--radius-pill);padding:8px 20px;text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast)}
.safety-commitment__btn:hover{background:rgba(0,153,153,.30);color:var(--color-white)}

/* ── CONTACT PAGE STYLES ────────────────────────────────────── */
.contact-page{display:grid;grid-template-columns:420px 1fr;min-height:100vh}
@media(max-width:900px){.contact-page{grid-template-columns:1fr}}
.contact-context{background:var(--color-charcoal)}
.contact-context__inner{padding:var(--space-8) var(--space-6)}
.contact-context__badge{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary-mid);background:rgba(0,153,153,.12);border:1px solid rgba(0,153,153,.25);border-radius:var(--radius-pill);padding:5px 14px;margin-bottom:var(--space-4)}
.contact-context__title{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--color-white);line-height:1.15;margin-bottom:var(--space-3)}
.contact-context__sub{font-size:15px;color:rgba(255,255,255,.55);line-height:1.65;margin-bottom:var(--space-5);max-width:100%}
.contact-channel{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3)}
.contact-channel--placeholder{opacity:.45}
.contact-channel__icon{width:40px;height:40px;background:rgba(0,153,153,.15);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--color-primary-mid);flex-shrink:0}
.contact-channel__label{font-size:11px;font-weight:600;color:rgba(255,255,255,.40);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.contact-channel__value{font-size:14px;font-weight:600;color:var(--color-white);text-decoration:none;transition:color var(--transition-fast)}
.contact-channel__value:hover{color:var(--color-primary-mid)}
.contact-channel__value--muted{color:rgba(255,255,255,.35)}
.contact-divider{height:1px;background:rgba(255,255,255,.08);margin:var(--space-5) 0}
.contact-expect__heading{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.40);margin-bottom:var(--space-3)}
.contact-steps{display:flex;flex-direction:column;gap:var(--space-3);padding:0}
.contact-step{display:flex;align-items:flex-start;gap:var(--space-3)}
.contact-step__dot{width:24px;height:24px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--color-white);flex-shrink:0;margin-top:1px}
.contact-step__text{font-size:13px;color:rgba(255,255,255,.60);line-height:1.55;max-width:100%}
.contact-trust{display:flex;flex-direction:column;gap:var(--space-2)}
.contact-trust-item{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.50);line-height:1.4}
.contact-trust-item svg{color:var(--color-primary-mid);flex-shrink:0}
.contact-form-panel{background:var(--color-white)}
.contact-form-panel__inner{padding:var(--space-8) clamp(var(--space-5),6vw,var(--space-8));max-width:680px}
.contact-form-panel__title{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--color-ink);margin-bottom:var(--space-2)}
.contact-form-panel__sub{font-size:15px;color:var(--color-muted);margin-bottom:var(--space-6)}
.contact-form{display:flex;flex-direction:column;gap:0}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}
@media(max-width:640px){.contact-form__row{grid-template-columns:1fr}}
.contact-form__field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3)}
.contact-form__label{font-size:13px;font-weight:600;color:var(--color-ink)}
.contact-form__req{color:var(--color-primary)}
.contact-form__input,.contact-form__select,.contact-form__textarea{width:100%;padding:12px 14px;font-family:var(--font-sans);font-size:14px;color:var(--color-ink);background:var(--color-card);border:1.5px solid transparent;border-radius:var(--radius);transition:border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast);appearance:none;-webkit-appearance:none}
.contact-form__input:focus,.contact-form__select:focus,.contact-form__textarea:focus{outline:none;border-color:var(--color-primary);background:var(--color-white);box-shadow:0 0 0 3px rgba(0,153,153,.12)}
.contact-form__input.is-error,.contact-form__select.is-error,.contact-form__textarea.is-error{border-color:var(--color-error)}
.contact-form__input::placeholder,.contact-form__textarea::placeholder{color:rgba(0,0,0,.28)}
.contact-form__textarea{min-height:130px;resize:vertical;line-height:1.65}
.contact-form__select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767171' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;cursor:pointer}
.contact-form__error{font-size:12px;color:var(--color-error);display:none;align-items:center;gap:5px}
.contact-form__error.is-visible{display:flex}
.contact-form__consent{margin-bottom:var(--space-4)}
.contact-form__consent-label{display:flex;align-items:flex-start;gap:var(--space-2);font-size:12px;color:var(--color-muted);line-height:1.55;cursor:pointer}
.contact-form__consent-label input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--color-primary);cursor:pointer}
.contact-form__submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;background:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--radius);font-family:var(--font-sans);font-size:15px;font-weight:700;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);margin-bottom:var(--space-3)}
.contact-form__submit:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,153,153,.30)}
.contact-form__submit:active{transform:none}
.contact-form__fallback{font-size:12px;color:var(--color-muted);text-align:center}
.contact-form__fallback a{color:var(--color-primary-dark);font-weight:600;text-decoration:none}
.contact-form__fallback a:hover{text-decoration:underline}
.form-success{display:none;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);background:rgba(0,168,150,.06);border:1.5px solid rgba(0,168,150,.25);border-radius:var(--radius-lg);margin-bottom:var(--space-5)}
.form-success.is-visible{display:flex}
.form-success__icon{width:56px;height:56px;background:rgba(0,168,150,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-success)}
.form-success h3{font-size:var(--text-h4);font-weight:700;color:var(--color-ink);margin:0}
.form-success p{font-size:var(--text-body-sm);color:var(--color-muted);margin:0}
.form-error-global{display:none;padding:var(--space-3) var(--space-4);background:rgba(185,28,28,.06);border:1.5px solid rgba(185,28,28,.20);border-radius:var(--radius);font-size:13px;color:var(--color-error);margin-bottom:var(--space-4);line-height:1.6}
.form-error-global.is-visible{display:block}
.form-error-global a{color:var(--color-error);font-weight:600}
@media(prefers-reduced-motion:reduce){.contact-form__submit{transition:none}.contact-form__submit:hover{transform:none}}

/* ── NEWS PAGE STYLES ───────────────────────────────────────── */
.nw-featured-hero{background:var(--color-charcoal);padding-top:calc(80px + var(--space-8));padding-bottom:0}
.nw-featured-hero__inner{padding-bottom:var(--space-8)}
.nw-featured-hero__layout{display:grid;grid-template-columns:1fr 420px;gap:var(--space-7);align-items:center}
@media(max-width:900px){.nw-featured-hero__layout{grid-template-columns:1fr}}
.nw-cat-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:var(--radius-pill);background:rgba(0,153,153,.25);color:var(--color-primary-mid);border:1px solid rgba(0,153,153,.3)}
.nw-cat-chip--featured{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary)}
.nw-featured-hero__meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.nw-featured-hero__date,.nw-featured-hero__read{font-size:12px;color:rgba(255,255,255,.45)}
.nw-featured-hero__title{font-size:clamp(22px,3.5vw,40px);font-weight:800;color:var(--color-white);line-height:1.15;margin-bottom:var(--space-3);max-width:22ch}
.nw-featured-hero__excerpt{font-size:var(--text-body);color:rgba(255,255,255,.60);line-height:1.7;max-width:56ch;margin-bottom:var(--space-5)}
.nw-featured-hero__link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--color-primary-mid);transition:gap var(--transition-fast)}
.nw-featured-hero__link:hover{gap:12px;color:var(--color-primary)}
.nw-featured-hero__img-wrap{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;position:relative}
.nw-featured-hero__img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.nw-featured-hero__img-overlay{position:absolute;inset:0;background:rgba(11,15,20,.2)}
.nw-filter-bar{background:var(--color-white);border-bottom:1px solid var(--color-card);position:sticky;top:80px;z-index:50;padding-block:var(--space-2)}
.nw-filters{display:flex;gap:var(--space-1);flex-wrap:wrap}
.nw-filter{background:none;border:1.5px solid var(--color-card);border-radius:var(--radius-pill);padding:6px 16px;font-size:13px;font-weight:500;color:var(--color-muted);cursor:pointer;transition:all var(--transition-base)}
.nw-filter:hover{border-color:var(--color-primary-light);color:var(--color-primary)}
.nw-filter.is-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}
.nw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);grid-auto-rows:auto;align-items:start}
@media(max-width:900px){.nw-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.nw-grid{grid-template-columns:1fr}}
.nw-card--wide{grid-column:span 2}
@media(max-width:580px){.nw-card--wide{grid-column:span 1}}
.nw-card{background:var(--color-white);border:1px solid var(--color-card);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition-slow),box-shadow var(--transition-slow)}
.nw-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.nw-card__image{position:relative;overflow:hidden;aspect-ratio:16/9}
.nw-card--wide .nw-card__image{aspect-ratio:21/9}
.nw-card__image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--transition-slow)}
.nw-card:hover .nw-card__image img{transform:scale(1.04)}
.nw-card__image .nw-cat-chip{position:absolute;top:var(--space-2);left:var(--space-2);background:rgba(11,15,20,.75);color:rgba(255,255,255,.85);border-color:transparent;backdrop-filter:blur(4px)}
.nw-card__body{padding:var(--space-4)}
.nw-card__meta{font-size:12px;color:var(--color-muted);margin-bottom:var(--space-2)}
.nw-card__title{font-size:clamp(15px,1.6vw,18px);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-2);line-height:1.3}
.nw-card__excerpt{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.6;margin-bottom:var(--space-3);max-width:100%}
.nw-card__link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--color-primary);transition:gap var(--transition-fast),color var(--transition-fast)}
.nw-card__link:hover{gap:10px;color:var(--color-primary-dark)}
.nw-card[hidden]{display:none}
.nw-no-results{text-align:center;padding:var(--space-7);font-size:var(--text-body);color:var(--color-muted)}
.nw-no-results a{color:var(--color-primary)}

/* ── CAREERS PAGE STYLES ────────────────────────────────────── */
.cr-hero{display:grid;grid-template-columns:55fr 45fr;min-height:clamp(480px,60vh,640px)}
@media(max-width:900px){.cr-hero{grid-template-columns:1fr;min-height:auto}}
.cr-hero__left{background:var(--color-charcoal);padding:calc(80px + var(--space-8)) clamp(var(--space-4),5vw,var(--space-7)) var(--space-8);display:flex;flex-direction:column;justify-content:flex-end}
.cr-hero__right{background:var(--color-teal-900);display:flex;align-items:center;justify-content:center;padding:var(--space-7) var(--space-5)}
.cr-hero__eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary-mid);margin-bottom:var(--space-3);display:block}
.cr-hero__title{font-size:clamp(40px,7vw,82px);font-weight:800;color:var(--color-white);line-height:1;margin-bottom:var(--space-4)}
.cr-hero__sub{font-size:clamp(14px,1.8vw,18px);color:rgba(255,255,255,.55);max-width:48ch;line-height:1.7;margin-bottom:var(--space-5)}
.cr-hero__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.cr-culture-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);width:100%;max-width:380px}
.cr-culture-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);padding:var(--space-3);display:flex;flex-direction:column;gap:8px}
.cr-culture-tile__icon{width:40px;height:40px;background:rgba(0,153,153,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary-mid)}
.cr-culture-tile__title{font-size:14px;font-weight:700;color:var(--color-white)}
.cr-culture-tile__sub{font-size:11px;color:rgba(255,255,255,.40);line-height:1.4}
.cr-section-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3)}
.cr-section-title{font-size:var(--text-h2);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-6);line-height:1.15}
.cr-life-strips{display:flex;flex-direction:column;gap:0}
.cr-life-strip{display:grid;grid-template-columns:4px 64px 1fr;gap:0 var(--space-4);align-items:start;padding-block:var(--space-5);border-bottom:1px solid var(--color-card)}
.cr-life-strip:last-child{border-bottom:none}
.cr-life-strip__accent{background:var(--color-primary);border-radius:2px;align-self:stretch}
.cr-life-strip__icon{width:64px;height:64px;background:var(--color-primary-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0}
.cr-life-strip__title{font-size:var(--text-h3);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-2)}
.cr-life-strip__desc{font-size:var(--text-body);color:var(--color-muted);line-height:1.75;max-width:68ch}
@media(max-width:640px){.cr-life-strip{grid-template-columns:4px 1fr}.cr-life-strip__icon{display:none}}
.cr-job-board{border:1px solid var(--color-card);border-radius:var(--radius-lg);overflow:hidden}
.cr-job-row{border-bottom:1px solid var(--color-card)}
.cr-job-row:last-child{border-bottom:none}
.cr-job-row__header{width:100%;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-white);border:none;cursor:pointer;text-align:left;transition:background var(--transition-base)}
.cr-job-row__header:hover{background:var(--color-card)}
.cr-job-row__header[aria-expanded="true"]{background:rgba(0,153,153,.05);border-left:3px solid var(--color-primary)}
.cr-job-row__info{flex:1;display:flex;flex-direction:column;gap:4px}
.cr-job-row__title{font-size:16px;font-weight:700;color:var(--color-ink)}
.cr-job-row__dept{font-size:12px;color:var(--color-muted)}
.cr-job-row__meta{display:flex;gap:var(--space-1);flex-wrap:wrap}
.cr-job-chip{font-size:11px;font-weight:600;color:var(--color-primary-dark);background:var(--color-primary-light);border-radius:var(--radius-pill);padding:3px 10px}
.cr-job-row__arrow{color:var(--color-muted);flex-shrink:0;transition:transform var(--transition-base)}
.cr-job-row__header[aria-expanded="true"] .cr-job-row__arrow{transform:rotate(180deg)}
.cr-job-row__detail{padding:var(--space-4) var(--space-5) var(--space-5);background:var(--color-card);border-top:1px solid rgba(0,153,153,.15)}
.cr-job-row__detail p{font-size:var(--text-body);color:var(--color-muted);line-height:1.7;max-width:72ch;margin-bottom:var(--space-4)}
.cr-job-detail-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-bottom:var(--space-4)}
@media(max-width:600px){.cr-job-detail-cols{grid-template-columns:1fr}}
.cr-job-detail-cols h4{font-size:13px;font-weight:700;color:var(--color-ink);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.06em}
.cr-job-detail-cols ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.cr-job-detail-cols li{font-size:13px;color:var(--color-muted);padding-left:16px;position:relative}
.cr-job-detail-cols li::before{content:'';width:5px;height:5px;background:var(--color-primary);border-radius:50%;position:absolute;left:0;top:7px}
.cr-job-apply-btn{margin-top:var(--space-2)}
.cr-process{display:flex;flex-direction:column;gap:0;max-width:700px}
.cr-process-step{display:grid;grid-template-columns:48px 1fr;gap:var(--space-4);padding-bottom:var(--space-5);position:relative}
.cr-process-step::before{content:'';position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--color-card)}
.cr-process-step:last-child::before{display:none}
.cr-process-step__num{width:48px;height:48px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--color-white);flex-shrink:0;position:relative;z-index:1}
.cr-process-step__content h3{font-size:var(--text-h4);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-1)}
.cr-process-step__content p{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.65;max-width:64ch}
.cr-process-step__content a{color:var(--color-primary)}
.cr-bottom-cta{background:var(--color-teal-900);padding-block:var(--space-section)}
.cr-cta-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);max-width:800px;margin:0 auto}
@media(max-width:600px){.cr-cta-cards{grid-template-columns:1fr}}
.cr-cta-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);color:var(--color-white)}
.cr-cta-card--teal{background:var(--color-primary);border-color:var(--color-primary)}
.cr-cta-card svg{color:var(--color-white);opacity:.85}
.cr-cta-card h3{font-size:var(--text-h4);font-weight:700}
.cr-cta-card p{font-size:var(--text-body-sm);color:rgba(255,255,255,.65);line-height:1.55;max-width:100%}

/* ── CLIENTS PAGE STYLES ────────────────────────────────────── */
.cl-hero{background:var(--color-charcoal);padding-top:calc(80px + var(--space-8));overflow:hidden}
.cl-hero__inner{padding-bottom:var(--space-8)}
.cl-hero__eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary-mid);margin-bottom:var(--space-3);display:block}
.cl-hero__title{font-size:clamp(34px,6vw,76px);font-weight:800;color:var(--color-white);line-height:1.02;margin-bottom:var(--space-4)}
.cl-hero__title span{color:var(--color-primary-mid)}
.cl-hero__sub{font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.55);max-width:56ch;line-height:1.65}
.cl-marquee-wrap{background:rgba(0,153,153,.12);border-top:1px solid rgba(0,153,153,.2);padding-block:var(--space-3);overflow:hidden;white-space:nowrap}
.cl-marquee{display:inline-flex;gap:var(--space-4);animation:clScroll 22s linear infinite}
@keyframes clScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cl-marquee{animation:none}}
.cl-marquee span{font-size:14px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap}
.cl-marquee__sep{color:var(--color-primary-mid) !important;font-weight:400}
.cl-metrics{background:var(--color-ink);padding-block:var(--space-5)}
.cl-metrics__grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4)}
.cl-metric{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:130px;text-align:center}
.cl-metric__num{font-size:clamp(24px,3.5vw,38px);font-weight:800;color:var(--color-primary-mid);line-height:1}
.cl-metric__label{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase}
.cl-metric__div{width:1px;height:44px;background:rgba(255,255,255,.08);flex-shrink:0}
.cl-section-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3)}
.cl-section-title{font-size:var(--text-h2);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-7);line-height:1.15}
.cl-row{display:grid;grid-template-columns:1fr 260px;gap:0;border-bottom:1px solid var(--color-card);padding-block:var(--space-6);transition:background var(--transition-base)}
.cl-row:hover{background:rgba(0,153,153,.02)}
.cl-row:first-child{border-top:1px solid var(--color-card)}
.cl-row--alt{background:var(--color-card)}
.cl-row--alt:hover{background:rgba(0,153,153,.04)}
@media(max-width:760px){.cl-row{grid-template-columns:1fr}}
.cl-row__main{padding-right:var(--space-6)}
.cl-row__sector{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2)}
.cl-row__name{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--color-ink);margin-bottom:var(--space-3);line-height:1.1}
.cl-row__desc{font-size:var(--text-body);color:var(--color-muted);line-height:1.75;max-width:68ch;margin-bottom:var(--space-3)}
.cl-row__evidence{display:flex;flex-direction:column;gap:6px;padding:0;margin:0}
.cl-row__evidence li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--color-muted)}
.cl-row__evidence li::before{content:'✓';font-size:11px;font-weight:700;color:var(--color-primary);margin-top:2px;flex-shrink:0}
.cl-row__stats{display:flex;flex-direction:column;gap:0;align-self:stretch;border-left:1px solid var(--color-card)}
@media(max-width:760px){.cl-row__stats{border-left:none;border-top:1px solid var(--color-card);flex-direction:row;margin-top:var(--space-4);padding-top:var(--space-4)}}
.cl-row__stat{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-card);display:flex;flex-direction:column;gap:4px;flex:1}
.cl-row__stat:last-child{border-bottom:none}
.cl-row__stat-val{font-size:clamp(16px,2vw,22px);font-weight:700;color:var(--color-primary-dark);line-height:1}
.cl-row__stat-key{font-size:11px;color:var(--color-muted);letter-spacing:.04em}
.cl-commit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-2)}
@media(max-width:768px){.cl-commit-grid{grid-template-columns:1fr}}
.cl-commit-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-5);border-left:4px solid var(--color-primary);box-shadow:var(--shadow-sm);transition:transform var(--transition-slow),box-shadow var(--transition-slow)}
.cl-commit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cl-commit-card__icon{width:48px;height:48px;background:var(--color-primary-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-primary);margin-bottom:var(--space-3)}
.cl-commit-card__title{font-size:var(--text-h4);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-2)}
.cl-commit-card__desc{font-size:var(--text-body-sm);color:var(--color-muted);line-height:1.65;max-width:100%}

/* ── CAPABILITIES PAGE STYLES ───────────────────────────────── */
.cap-hero{background:var(--color-charcoal);position:relative;overflow:hidden}
.cap-hero__content{position:relative;z-index:2;padding-top:calc(80px + var(--space-8));padding-bottom:var(--space-7)}
.cap-hero__eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary-mid);margin-bottom:var(--space-3);display:block}
.cap-hero__title{font-size:clamp(36px,6vw,70px);font-weight:800;color:var(--color-white);line-height:1.02;margin-bottom:var(--space-4)}
.cap-hero__sub{font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.55);max-width:56ch;line-height:1.65}
.cap-hero__stats{background:rgba(0,153,153,.12);border-top:1px solid rgba(0,153,153,.20);padding-block:var(--space-4)}
.cap-stat-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4)}
.cap-stat{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:120px;text-align:center}
.cap-stat__num{font-size:clamp(22px,3.5vw,36px);font-weight:800;color:var(--color-primary-mid);line-height:1}
.cap-stat__label{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.06em;text-transform:uppercase}
.cap-stat__div{width:1px;height:40px;background:rgba(255,255,255,.12);flex-shrink:0}
.cap-section-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3)}
.cap-section-title{font-size:var(--text-h2);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-5);line-height:1.15}
.cap-explorer{display:grid;grid-template-columns:280px 1fr;gap:var(--space-6);align-items:start}
@media(max-width:900px){.cap-explorer{grid-template-columns:1fr}}
.cap-tabs{display:flex;flex-direction:column;gap:2px}
@media(max-width:900px){.cap-tabs{flex-direction:row;flex-wrap:wrap;gap:var(--space-1)}}
.cap-tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-card);border:none;border-radius:var(--radius);cursor:pointer;text-align:left;transition:background var(--transition-base),color var(--transition-base)}
.cap-tab:hover{background:var(--color-primary-light)}
.cap-tab.is-active{background:var(--color-primary);color:var(--color-white)}
.cap-tab__num{font-size:11px;font-weight:700;color:var(--color-muted);letter-spacing:.1em}
.cap-tab.is-active .cap-tab__num{color:rgba(255,255,255,.65)}
.cap-tab__name{font-size:14px;font-weight:600;color:var(--color-ink);flex:1}
.cap-tab.is-active .cap-tab__name{color:var(--color-white)}
.cap-panels{background:var(--color-card);border-radius:var(--radius-lg);padding:var(--space-6)}
.cap-panel{display:none}
.cap-panel.is-active{display:block}
.cap-panel__eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2)}
.cap-panel__title{font-size:var(--text-h3);font-weight:700;color:var(--color-ink);margin-bottom:var(--space-3);line-height:1.2}
.cap-panel__desc{font-size:var(--text-body);color:var(--color-muted);line-height:1.7;margin-bottom:var(--space-4);max-width:68ch}
.cap-panel__specs{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.cap-spec-item{display:flex;align-items:center;gap:var(--space-2);font-size:14px;color:var(--color-ink)}
.cap-spec-dot{width:6px;height:6px;background:var(--color-primary);border-radius:50%;flex-shrink:0}
.cap-panel__link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--color-primary);text-decoration:none;transition:gap var(--transition-fast),color var(--transition-fast)}
.cap-panel__link:hover{gap:12px;color:var(--color-primary-dark)}
.cap-standards-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
@media(max-width:900px){.cap-standards-layout{grid-template-columns:1fr}}
.section--tint .cap-section-label{color:rgba(255,255,255,.6)}
.cap-quote-block{font-size:var(--text-body-lg);color:rgba(255,255,255,.80);line-height:1.8;font-style:italic;border-left:4px solid var(--color-primary-mid);padding-left:var(--space-4);margin:0}
.cap-badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media(max-width:640px){.cap-badge-grid{grid-template-columns:1fr 1fr}}
.cap-std-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);transition:background var(--transition-base),border-color var(--transition-base)}
.cap-std-badge:hover{background:rgba(255,255,255,.12);border-color:rgba(0,153,153,.4)}
.cap-std-badge__icon{width:40px;height:40px;background:rgba(0,153,153,.20);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--color-primary-mid)}
.cap-std-badge__title{font-size:14px;font-weight:700;color:var(--color-white)}
.cap-std-badge__sub{font-size:11px;color:rgba(255,255,255,.45)}

/* ── BREADCRUMB INLINE OVERRIDES ────────────────────────────── */
.breadcrumb--hero a{color:rgba(255,255,255,.55)}
.breadcrumb--hero .breadcrumb__item--current{color:rgba(255,255,255,.85)}

/* ── CTA SECTION ────────────────────────────────────────────── */
.cta-section{text-align:center}
.cta-section__heading{font-size:var(--text-h1);font-weight:700;color:var(--color-white);margin-bottom:var(--space-3);max-width:18ch;margin-inline:auto}
.cta-section__sub{font-size:var(--text-body-lg);color:rgba(255,255,255,.72);margin-bottom:var(--space-5);max-width:52ch;margin-inline:auto}
.cta-section__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:center}


/* ── CAPABILITIES PAGE — ADDITIONAL STYLES ──────────────────── */
.cap-explorer{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--color-card);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-5)}
@media(max-width:860px){.cap-explorer{grid-template-columns:1fr}}
.cap-tabs{background:var(--color-charcoal);display:flex;flex-direction:column;min-height:480px}
.cap-tab{display:flex;align-items:center;gap:var(--space-2);padding:16px var(--space-3);background:none;border:none;border-left:3px solid transparent;cursor:pointer;text-align:left;transition:background var(--transition-base),border-color var(--transition-base);width:100%}
.cap-tab.is-active{background:rgba(0,153,153,.15);border-left-color:var(--color-primary)}
.cap-tab:hover:not(.is-active){background:rgba(255,255,255,.04)}
.cap-tab__num{font-size:11px;font-weight:700;color:rgba(255,255,255,.25);min-width:24px;flex-shrink:0}
.cap-tab.is-active .cap-tab__num{color:var(--color-primary-mid)}
.cap-tab__name{font-size:13px;font-weight:500;color:rgba(255,255,255,.55);flex:1;line-height:1.3}
.cap-tab.is-active .cap-tab__name{color:var(--color-white)}
.cap-tab svg{color:rgba(255,255,255,.2);flex-shrink:0;transition:color var(--transition-base)}
.cap-tab.is-active svg{color:var(--color-primary)}
.cap-panels{padding:var(--space-6);background:var(--color-white);display:flex;align-items:stretch}
.cap-panel{display:none;flex-direction:column;gap:var(--space-3)}
.cap-panel.is-active{display:flex}
.cap-panel__eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);border-left:3px solid var(--color-primary);padding-left:var(--space-2)}
.cap-panel__title{font-size:clamp(20px,2.5vw,28px);font-weight:700;color:var(--color-ink);line-height:1.2;max-width:20ch}
.cap-panel__desc{font-size:var(--text-body);color:var(--color-muted);line-height:1.75;max-width:60ch}
.cap-panel__specs{display:flex;flex-direction:column;gap:8px;margin-top:var(--space-1)}
.cap-spec-item{display:flex;align-items:center;gap:10px;font-size:var(--text-body-sm);color:var(--color-ink)}
.cap-spec-dot{width:6px;height:6px;background:var(--color-primary);border-radius:50%;flex-shrink:0}
.cap-panel__link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--color-primary);margin-top:var(--space-2);transition:gap var(--transition-fast)}
.cap-panel__link:hover{gap:12px;color:var(--color-primary-dark)}
@media(max-width:860px){.cap-tabs{min-height:auto;flex-direction:row;flex-wrap:wrap}.cap-tab{flex:0 0 50%}.cap-panels{padding:var(--space-4)}}
.cap-standards-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}
@media(max-width:860px){.cap-standards-layout{grid-template-columns:1fr}}
.cap-standards-quote-col{background:var(--color-charcoal);border-radius:var(--radius-lg);padding:var(--space-6)}
.cap-quote-block{font-size:var(--text-body-lg);color:rgba(255,255,255,.75);line-height:1.8;font-style:italic;border-left:3px solid var(--color-primary);padding-left:var(--space-4);margin:0}
.cap-badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
@media(max-width:640px){.cap-badge-grid{grid-template-columns:repeat(2,1fr)}}
.cap-std-badge{background:var(--color-white);border:1px solid var(--color-card);border-radius:var(--radius-lg);padding:var(--space-3);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:border-color var(--transition-base),transform var(--transition-slow),box-shadow var(--transition-slow)}
.cap-std-badge:hover{border-color:var(--color-primary-light);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.cap-std-badge__icon{width:44px;height:44px;background:var(--color-primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary)}
.cap-std-badge__title{font-size:13px;font-weight:700;color:var(--color-ink)}
.cap-std-badge__sub{font-size:11px;color:var(--color-muted);line-height:1.3}
.cap-timeline{position:relative}
.cap-timeline-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);position:relative}
@media(max-width:900px){.cap-timeline-steps{grid-template-columns:1fr}}
.cap-timeline__track{position:absolute;top:20px;left:0;right:0;height:2px;background:linear-gradient(to right,var(--color-primary),var(--color-primary-light));z-index:0;border-radius:2px}
@media(max-width:900px){.cap-timeline__track{display:none}}
.cap-timeline-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);position:relative;z-index:1}
@media(max-width:900px){.cap-timeline-step{flex-direction:row;text-align:left;align-items:flex-start}}
.cap-timeline-step__dot{width:40px;height:40px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 6px var(--color-white),0 0 0 8px var(--color-primary-light)}
.cap-timeline-step__dot span{font-size:12px;font-weight:700;color:var(--color-white)}
.cap-timeline-step__content{display:flex;flex-direction:column;align-items:center;gap:8px}
@media(max-width:900px){.cap-timeline-step__content{align-items:flex-start}}
.cap-timeline-step__content svg{color:var(--color-primary)}
.cap-timeline-step__content h3{font-size:14px;font-weight:700;color:var(--color-ink);line-height:1.3}
.cap-timeline-step__content p{font-size:12px;color:var(--color-muted);line-height:1.5;max-width:100%}


/* =============================================================================
   SCROLL BREADCRUMB BAR
   Hidden by default — slides in from top when page scrolls > 10px
   ============================================================================= */
.scroll-bc {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 990;
  height: 40px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-card);
  box-shadow: 0 2px 12px rgba(11, 15, 20, 0.06);

  /* Hidden by default */
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Teal accent line on left edge */
.scroll-bc::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-dark));
}

/* Visible state — added by JS on scroll */
.scroll-bc.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-bc__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.scroll-bc__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.scroll-bc__item {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex-shrink: 0;
}

.scroll-bc__item--current {
  min-width: 0;
  flex-shrink: 1;
}

.scroll-bc__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  transition: color var(--transition-fast);
}

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

/* Home item gets a small home icon */
.scroll-bc__item:first-child .scroll-bc__link::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767171' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  vertical-align: -1px;
  margin-right: 5px;
  opacity: 0.65;
  transition: opacity var(--transition-fast);
}

.scroll-bc__item:first-child .scroll-bc__link:hover::before {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23009999' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.scroll-bc__sep {
  color: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  margin: 0 3px;
}

.scroll-bc__current {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Back to top button */
.scroll-bc__top {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-card);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.scroll-bc__top:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* Responsive */
@media (max-width: 640px) {
  /* On mobile show only immediate parent + current */
  .scroll-bc__item:not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }
  .scroll-bc__current {
    max-width: 180px;
  }
  .scroll-bc__top span {
    display: none;
  }
}

/* Push main content down when breadcrumb is visible */
.scroll-bc.is-visible ~ main,
.scroll-bc.is-visible + main {
  scroll-margin-top: 124px;
}

/* =============================================================================
   CONTACT PAGE — Full-width dark top bar
   Spans both columns, gives the fixed header a dark surface to sit against.
   Height is slightly taller than the 80px header so it feels deliberate.
   ============================================================================= */
.contact-top-bar {
  background: var(--color-charcoal);
  width: 100%;
  padding-top: 80px;          /* clears the fixed header */
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contact-top-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  padding-top: var(--space-4);
}

.contact-top-bar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-mid);
  background: rgba(0, 153, 153, 0.12);
  border: 1px solid rgba(0, 153, 153, 0.25);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  width: fit-content;
}

.contact-top-bar__title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  margin: 0;
}