/* =========================================================================
   Res-Com Excavating Ltd. — style.css
   Sections:
     1. @font-face
     2. Design tokens
     3. Reset
     4. Base typography
     5. Utility
   ========================================================================= */

/* 1. @font-face
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/barlow-condensed-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}

/* 2. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Colors */
    --c-bg: #0a0a0a;
    --c-surface: #141414;
    --c-surface-2: #181818;
    --c-border: #242424;
    --c-text: #f2f2f2;
    --c-text-dim: #a8a8a8;
    --c-muted: #7a7a7a;
    --c-accent: #fdd300;
    --c-accent-ink: #111;
    --c-danger: #c81616;
    --c-danger-hi: #d71c1c;

    /* Typography */
    --f-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --f-body: 'Inter', system-ui, -apple-system, Arial, sans-serif;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 80px;

    /* Radius */
    --r-sm: 3px;
    --r-md: 4px;

    /* Layout */
    --content-max: 1200px;
    --frame-max: 1320px;

    /* Breakpoints (documented; media queries use literal values for perf) */
    --bp-sm: 600px;
    --bp-md: 900px;
    --bp-lg: 1200px;
}

/* 3. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
a {
    color: inherit;
    text-decoration: none;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* 4. Base typography
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
body {
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.is-locked {
    overflow: hidden;
}

/* 5. Utility
   -------------------------------------------------------------------------- */
.wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--sp-5);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role='button']:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Section titles and eyebrows (used across pages) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--c-accent);
    text-transform: uppercase;
}
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 2px;
    background: var(--c-accent);
}

.section-title {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    margin-top: 10px;
}
.section-title--lg {
    font-size: 52px;
}
.section-title__accent {
    color: var(--c-accent);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 24px;
    border-radius: var(--r-sm);
    transition:
        filter 0.2s,
        transform 0.2s;
}
.btn--primary {
    background: var(--c-accent);
    color: var(--c-accent-ink);
}
.btn--primary:hover {
    filter: brightness(0.95);
}
.btn--ghost {
    background: transparent;
    color: var(--c-text);
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 11px 22px;
}
.btn--ghost:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}
.btn--quote {
    background: var(--c-danger);
    background-image: linear-gradient(180deg, var(--c-danger-hi), var(--c-danger));
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 2px;
}
.btn--quote:hover {
    filter: brightness(1.08);
}

/* 6. Header
   -------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--c-bg);
    transition: box-shadow 0.25s;
}
.header--scrolled {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.header__topbar {
    background: #000;
    color: var(--c-muted);
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 0;
    text-align: center;
    max-height: 38px;
    overflow: hidden;
    transition:
        max-height 0.25s,
        padding 0.25s,
        opacity 0.25s;
}
.header--scrolled .header__topbar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}
@media (max-width: 899px) {
    .header__topbar {
        display: none;
    }
}

.header__main {
    padding: 22px 0;
    transition: padding 0.25s;
    background: var(--c-bg);
}
.header--scrolled .header__main {
    padding: 12px 0;
}
.header__main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
    min-width: 0;
}

.header__logo img {
    height: 60px;
    width: auto;
    transition: height 0.25s;
}
.header--scrolled .header__logo img {
    height: 40px;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: nowrap;
}

.header__contact {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.header__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--c-text);
    letter-spacing: 0.5px;
    transition: font-size 0.25s;
    white-space: nowrap;
}
.header--scrolled .header__phone {
    font-size: 17px;
}
.header__phone-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: var(--c-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.header--scrolled .btn--quote {
    padding: 8px 16px;
    font-size: 13px;
}

/* Burger (mobile) */
.header__burger {
    display: none;
    width: 44px;
    height: 44px;
    position: relative;
}
.header__burger span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--c-text);
    transition:
        transform 0.2s,
        opacity 0.2s;
}
.header__burger span:nth-child(1) {
    top: 14px;
}
.header__burger span:nth-child(2) {
    top: 21px;
}
.header__burger span:nth-child(3) {
    top: 28px;
}

/* Nav (inline desktop) */
.nav {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}
.nav__link {
    position: relative;
    padding: 12px 14px;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--c-text-dim);
    transition: color 0.2s;
    white-space: nowrap;
}
.nav__link:hover {
    color: var(--c-accent);
}
.nav__link--active {
    color: var(--c-accent);
}
.nav__link--active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 3px;
    background: var(--c-accent);
}

/* Tighten nav padding at narrow desktop widths so nothing wraps */
@media (max-width: 1149px) and (min-width: 900px) {
    .nav__link {
        padding: 12px 10px;
        letter-spacing: 1.8px;
        font-size: 14px;
    }
    .nav__link--active::after {
        left: 10px;
        right: 10px;
    }
    .header__right {
        gap: 16px;
    }
    .header__phone {
        font-size: 17px;
    }
}

/* Responsive: hide inline nav + contact cluster on mobile, show burger on the right */
@media (max-width: 899px) {
    .header__burger {
        display: block;
        order: 2;
        margin-left: auto;
    }
    .header__right {
        display: none;
    }
    .header__logo img {
        height: 44px;
    }
    .header--scrolled .header__logo img {
        height: 36px;
    }
}

/* 7. Footer
   -------------------------------------------------------------------------- */
.footer {
    background: #000;
    padding: 44px 0 24px;
    border-top: 1px solid #161616;
    margin-top: var(--sp-9);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer__logo {
    height: 54px;
    width: auto;
    margin-bottom: 14px;
    filter: brightness(0.9);
}
.footer__brand p {
    color: #7a7a7a;
    font-size: 12px;
    line-height: 1.65;
    max-width: 280px;
}
.footer__col-title {
    font-family: var(--f-display);
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--c-accent);
    margin-bottom: 12px;
}
.footer__col a,
.footer__col p {
    display: block;
    color: #a8a8a8;
    font-size: 13px;
    line-height: 1.8;
}
.footer__col a:hover {
    color: var(--c-accent);
}
.footer__col--contact .footer__phone {
    color: var(--c-accent);
    font-weight: 700;
}

.footer__sig {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #151515;
    font-size: 11px;
    color: var(--c-muted); /* #7a7a7a on #000 → 4.98:1 (AA) */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.footer__sig a {
    color: var(--c-text-dim);
    display: inline;
} /* #a8a8a8 on #000 → 9.0:1 */
.footer__sig a:hover {
    color: var(--c-accent);
}

@media (max-width: 1199px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 599px) {
    .footer__grid {
        grid-template-columns: 1fr;
    }
}

/* 8. Quote modal
   -------------------------------------------------------------------------- */
.quote-modal {
    background: var(--c-surface);
    color: var(--c-text);
    max-width: 460px;
    padding: 28px 28px 32px;
    border-top: 3px solid var(--c-accent);
    border-radius: var(--r-md);
}
.quote-modal__title {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--c-danger);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 10px;
}

/* Fancybox panel override (sans border-radius clash etc.) */
.fancybox__container .quote-modal {
    margin: 0 auto;
}

/* 9. Forms
   -------------------------------------------------------------------------- */
.form__row {
    margin-bottom: 14px;
}
.form__label {
    display: block;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-text-dim);
    margin-bottom: 6px;
}
.form__input {
    width: 100%;
    padding: 10px 12px;
    background: #0f0f0f;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.15s;
}
.form__input:focus-visible {
    outline: none;
    border-color: var(--c-accent);
}
.form__textarea {
    min-height: 100px;
    resize: vertical;
}

/* Field error state — set by the form-submit JS when the server reports a
   bad field via `res.fields = [name, ...]`. Both the generic `.error` class
   (office pattern) and the BEM-ful `.form__input--error` point at the same
   visual. */
.form__input.error,
.form__input--error {
    border-color: var(--c-danger);
    background: rgba(200, 22, 22, 0.08);
}
.form__input.error:focus-visible,
.form__input--error:focus-visible {
    outline-color: var(--c-danger);
}

/* reCAPTCHA v3 privacy notice — small disclosure required when the floating
   badge is hidden. Shown once per form, styled to read as legal fine print. */
.form__recaptcha-notice {
    margin: 6px 0 12px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--c-text-dim);
}
.form__recaptcha-notice a {
    color: var(--c-accent);
    text-decoration: underline;
}
.form__recaptcha-notice a:hover {
    text-decoration: none;
}

/* Hide the floating reCAPTCHA badge (the required notice lives in each form). */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Inline .form__error / .form__success blocks have been removed — submit
   feedback now comes from Notyf toasts driven by the office submitForm()
   pattern. The legacy HTML elements (if present) are hidden instead of being
   styled, so they can't flash visible during form reset. */
.form__error,
.form__success {
    display: none;
}

.form__submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

/* Loading state for form submit buttons — shown while the AJAX is in flight. */
.btn--loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
    opacity: 0.85;
}
.btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--c-accent-ink);
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}
.btn--quote.btn--loading::after {
    border-top-color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Notyf — brand-coloured themes match the site palette. */
.notyf__toast { font-family: var(--f-body); }
.notyf__toast--success .notyf__message { color: var(--c-accent-ink); font-weight: 600; }
.notyf__toast--error .notyf__message { color: #fff; font-weight: 600; }

/* 10. Nav drawer (mobile)
   -------------------------------------------------------------------------- */
.nav-drawer {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.98);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
}
.nav-drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}
.nav-drawer[aria-hidden='false'] {
    /* mirrors .is-open for screen readers */
}

.nav-drawer__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 1;
    color: var(--c-text);
}

/* The inner <nav> must stack its links vertically; otherwise they read as one blob. */
.nav-drawer > nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 0 var(--sp-5);
}
.nav-drawer__link {
    display: block;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--c-text);
    padding: 8px 12px;
    text-align: center;
}
.nav-drawer__link:hover,
.nav-drawer__link:focus-visible {
    color: var(--c-accent);
}

.nav-drawer__footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    margin-top: 20px;
}
.nav-drawer__phone {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--c-accent);
    letter-spacing: 0.5px;
}

/* Hamburger "X" animation while drawer is open (the burger button stays
   in the header, but since header is on top of drawer z-wise, it can show open/close state). */
.header__burger[aria-expanded='true'] span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.header__burger[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}
.header__burger[aria-expanded='true'] span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* 11. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
}

/* Small alignment-mark corner brackets (top-left + top-right) — a nod to
   blueprints / surveying marks. Sized small enough to read as decoration,
   not ornament. */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    top: 20px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--c-accent);
    z-index: 4;
    pointer-events: none;
}
.hero::before {
    left: 20px;
    border-right: 0;
    border-bottom: 0;
}
.hero::after {
    right: 20px;
    border-left: 0;
    border-bottom: 0;
}
@media (max-width: 599px) {
    .hero::before,
    .hero::after {
        top: 14px;
        width: 16px;
        height: 16px;
    }
    .hero::before {
        left: 14px;
    }
    .hero::after {
        right: 14px;
    }
}
.hero__swiper {
    width: 100%;
    height: 520px;
}
@media (max-width: 1199px) {
    .hero__swiper {
        height: 480px;
    }
}
@media (max-width: 899px) {
    .hero__swiper {
        height: 420px;
    }
}
@media (max-width: 599px) {
    .hero__swiper {
        height: 380px;
    }
}

.hero__slide {
    position: relative;
}
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.7);
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
}
.hero__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 0 var(--sp-8);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 599px) {
    .hero__content {
        padding: 0 var(--sp-5);
    }
}

.hero__title {
    margin-top: 18px;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 66px;
    line-height: 0.98;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.hero__title-accent {
    color: var(--c-accent);
}
@media (max-width: 899px) {
    .hero__title {
        font-size: 48px;
    }
}
@media (max-width: 599px) {
    .hero__title {
        font-size: 38px;
    }
}

.hero__sub {
    margin-top: 16px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #e1e1e1;
    max-width: 520px;
}
.hero__actions {
    margin-top: var(--sp-5);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ken Burns slow zoom on the active slide's bg image */
.hero__bg {
    transform: scale(1);
    transition: transform 8000ms ease-out;
    will-change: transform;
}
.swiper-slide-active .hero__bg {
    transform: scale(1.06);
}

/* Unified control bar centered at bottom: [‹] • • • • • [›]
   Wrapped in a container capped at 1920px so the bar aligns with the content
   column on ultra-wide (4K+) screens. */
.hero__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    z-index: 3;
    pointer-events: none;
    padding: 0 var(--sp-5);
}
.hero__controls > * {
    pointer-events: auto;
}

/* Pagination bullets sit in the center of the bar, inline.
   Swiper adds `.swiper-pagination-bullets.swiper-pagination-horizontal` at runtime
   with `width: 100%` (specificity 0,2,0). We lift specificity via the id selector
   so the group is naturally sized and doesn't push the arrows to the edges. */
.hero__dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
#hero-pagination.swiper-pagination {
    position: static;
    width: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
}
.hero__dots .swiper-pagination-bullet {
    width: 28px;
    height: 3px;
    border-radius: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
    cursor: pointer;
    transition:
        background 0.2s,
        width 0.2s;
}
.hero__dots .swiper-pagination-bullet-active {
    background: var(--c-accent);
    width: 44px;
}

/* Arrow buttons flank the dots on the same horizontal axis. */
.hero__arrow {
    position: static;
    margin: 0;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 50%;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s,
        transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero__arrow::after {
    display: none;
    content: none;
} /* kill Swiper default glyph */
.hero__arrow::before {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    color: inherit;
}
.hero__arrow--prev::before {
    content: '‹';
    margin-right: 2px;
}
.hero__arrow--next::before {
    content: '›';
    margin-left: 2px;
}
.hero__arrow:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-accent-ink);
    transform: scale(1.05);
}

@media (max-width: 599px) {
    .hero__controls {
        gap: 12px;
        bottom: 18px;
    }
    .hero__arrow {
        width: 38px;
        height: 38px;
    }
    .hero__dots .swiper-pagination-bullet {
        width: 20px;
    }
    .hero__dots .swiper-pagination-bullet-active {
        width: 32px;
    }
}

/* 12. Welcome
   -------------------------------------------------------------------------- */
.welcome {
    padding: 72px 0 60px;
    background: var(--c-bg);
    position: relative;
    overflow: hidden;
}
/* Subtle "EST 1978" outlined watermark — adds depth without shouting. */
.welcome::before {
    content: 'EST · 1978';
    position: absolute;
    top: -24px;
    right: -14px;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 220px;
    line-height: 1;
    letter-spacing: -4px;
    color: transparent;
    -webkit-text-stroke: 2px rgba(253, 211, 0, 0.07);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.welcome > .wrap {
    position: relative;
    z-index: 1;
}
@media (max-width: 899px) {
    .welcome::before {
        font-size: 140px;
        top: -10px;
    }
}
@media (max-width: 599px) {
    .welcome::before {
        display: none;
    }
}
.welcome__title {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-top: 10px;
}
.welcome__title-accent {
    color: var(--c-accent);
}
@media (max-width: 899px) {
    .welcome__title {
        font-size: 38px;
    }
}

.welcome__grid {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 899px) {
    .welcome__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Image framed by small yellow L-brackets on top-left + bottom-right corners. */
.welcome__img-frame {
    position: relative;
    display: block;
    width: 100%;
  }
  .welcome__img-frame::before,
  .welcome__img-frame::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    border: 3px solid var(--c-accent);
    pointer-events: none;
    z-index: 2;
  }
  .welcome__img-frame::before {
    top: -8px;
    left: -8px;
    border-right: 0;
    border-bottom: 0;
  }
  .welcome__img-frame::after {
    bottom: -8px;
    right: -8px;
    border-left: 0;
    border-top: 0;
  }
  .welcome__img {
    width: 100%;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    display: block;
    object-fit: cover;
}
.welcome__copy p {
    color: var(--c-text-dim);
    line-height: 1.75;
    font-size: 15px;
}
.welcome__copy p + p {
    margin-top: 14px;
}

.welcome__stats {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 599px) {
    .welcome__stats {
        grid-template-columns: 1fr;
    }
}

.welcome__stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    padding: 14px 18px;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}
.welcome__stat-icon {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    color: var(--c-accent);
    flex-shrink: 0;
    opacity: 0.9;
}
.welcome__stat-value {
    display: block;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 26px;
    color: var(--c-accent);
    line-height: 1;
}
.welcome__stat-label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--c-text-dim);
}

/* 13. Services grid (home + related strip on detail pages)
   -------------------------------------------------------------------------- */
.services {
    padding: 64px 0 80px;
    background: #0f0f0f;
    border-top: 1px solid #1a1a1a;
}
.services__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.services__sub {
    color: var(--c-text-dim);
    font-size: 14px;
    max-width: 440px;
    line-height: 1.55;
    margin-top: 8px;
}

.services__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1199px) {
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 899px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 599px) {
    .services__grid {
        grid-template-columns: 1fr;
    }
}

.service-card {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s,
        border-color 0.25s;
}
.service-card:hover {
    transform: translateY(-3px);
    border-color: var(--c-accent);
}
.service-card--active {
    border-color: var(--c-accent);
    background: #1c1c1c;
}

.service-card__img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.4s;
}
.service-card:hover .service-card__img {
    transform: scale(1.05);
}

.service-card__body {
    padding: 16px 14px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.service-card__title {
    margin: 0 0 8px;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 17px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--c-text);
    min-height: 2.4em;
}
.service-card__desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--c-text-dim);
    flex: 1;
}
.service-card__more {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-display);
    font-weight: 800;
    color: var(--c-accent);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 14. Page head band (shared across inner pages)
   -------------------------------------------------------------------------- */
.page-head {
    padding: 56px 0 40px;
    background: linear-gradient(180deg, #141414 0%, var(--c-bg) 100%);
    border-bottom: 1px solid #151515;
    text-align: center;
}
.page-head__title {
    margin-top: 10px;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}
.page-head__title-accent {
    color: var(--c-accent);
}
.page-head__sub {
    margin: 14px auto 0;
    max-width: 620px;
    color: var(--c-text-dim);
    font-size: 15px;
    line-height: 1.55;
}
.page-head .eyebrow {
    justify-content: center;
}
.page-head .eyebrow::before {
    display: none;
}
.page-head .eyebrow::after {
    content: '';
    margin-left: 14px;
    width: 40px;
    height: 2px;
    background: var(--c-accent);
}

@media (max-width: 899px) {
    .page-head__title {
        font-size: 36px;
    }
}

/* 15. Services feature grid (services.html only)
   -------------------------------------------------------------------------- */
.services-feature {
    padding: 64px 0 80px;
}
.services-feature__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 899px) {
    .services-feature__grid {
        grid-template-columns: 1fr;
    }
}

.services-feature__grid .feature-block:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 760px;
    margin: 0 auto;
}

/* Whole card is an anchor (block-link) so the image, title, bullet list, and
   "View details" all navigate to the service page. */
.feature-block {
    display: grid;
    grid-template-columns: 40% 60%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    align-items: stretch;
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.feature-block:hover,
.feature-block:focus-visible {
    transform: translateY(-3px);
    border-color: var(--c-accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.feature-block:focus-visible { outline: none; } /* replaced by the yellow border above */
.feature-block__img { transition: transform 0.4s; }
.feature-block:hover .feature-block__img { transform: scale(1.04); }
.feature-block:hover .feature-block__more,
.feature-block:focus-visible .feature-block__more { letter-spacing: 3px; }
@media (max-width: 599px) {
    .feature-block {
        grid-template-columns: 100%;
    }
}

/* Image fills the column; cover crops the excess to keep a consistent look. */
.feature-block__img-wrap {
    overflow: hidden;
    min-height: 200px;
    display: block;
}
.feature-block__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.feature-block__body {
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
}
.feature-block__title {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 24px;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.feature-block__list {
    padding-left: 0;
    margin-bottom: 14px;
}
.feature-block__list li {
    position: relative;
    padding: 6px 0 6px 22px;
    color: var(--c-text-dim);
    font-size: 14px;
    line-height: 1.5;
}
.feature-block__list li::before {
    content: '■';
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--c-accent);
    font-size: 11px;
    line-height: 1.5;
}
.feature-block__more {
    margin-top: auto;
    font-family: var(--f-display);
    font-weight: 800;
    color: var(--c-accent);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 16. Service detail
   -------------------------------------------------------------------------- */
.service-detail {
    padding: 56px 0 72px;
}
/* Swiper doesn't measure reliably inside `fr`-sized grid tracks — it enters a
   resize feedback loop and the slide explodes. Use fixed-percentage columns
   that account for the gap explicitly. */
.service-detail__grid {
    display: grid;
    gap: 48px;
    grid-template-columns: calc(50% - 24px) calc(50% - 24px); /* 2 × (50% - gap/2) */
    align-items: start;
}
@media (max-width: 899px) {
    .service-detail__grid {
        grid-template-columns: 100%;
    }
}

.service-detail__gallery {
    width: 100%;
}
.service-detail__gallery .swiper {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    aspect-ratio: 3 / 2; /* matches most site photos (1.3–1.5), minimises crop */
}
.service-detail__gallery .swiper-slide {
    display: block;
}
/* Cover — fills the whole slide; aspect-ratio on the container keeps the crop
   visually small since it's close to the source images' aspects. */
.service-detail__gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.service-detail__gallery--single .swiper-button-next,
.service-detail__gallery--single .swiper-button-prev,
.service-detail__gallery--single .swiper-pagination {
    display: none;
}

/* Gallery prev/next buttons share the hero arrow's visual vocabulary:
   circular, semi-transparent dark plate, 1 px light border, chunky condensed
   chevron, yellow + tiny scale on hover. Swiper positions them at top:50%
   on each side of the gallery, so we keep that layout and only restyle. */
.service-detail__gallery .swiper-button-prev,
.service-detail__gallery .swiper-button-next {
    width: 44px;
    height: 44px;
    margin-top: -22px;    /* re-center now that height is fixed (Swiper default relies on its own sizing var) */
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.service-detail__gallery .swiper-button-prev { left: 16px; }
.service-detail__gallery .swiper-button-next { right: 16px; }
.service-detail__gallery .swiper-button-prev:hover,
.service-detail__gallery .swiper-button-next:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-accent-ink);
    transform: scale(1.05);
}
.service-detail__gallery .swiper-button-prev::after,
.service-detail__gallery .swiper-button-next::after {
    display: none;
    content: none;
}
.service-detail__gallery .swiper-button-prev::before,
.service-detail__gallery .swiper-button-next::before {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    color: inherit;
}
.service-detail__gallery .swiper-button-prev::before {
    content: '‹';
    margin-right: 2px;
}
.service-detail__gallery .swiper-button-next::before {
    content: '›';
    margin-left: 2px;
}
.service-detail__gallery .swiper-pagination-bullet-active {
    background: var(--c-accent);
}

.service-detail__features {
    margin: 0;
    padding: 0;
    list-style: none;
}
.service-detail__features li {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    padding: 14px 18px;
    margin-bottom: 10px;
    color: var(--c-text);
    font-size: 14.5px;
    line-height: 1.55;
}

/* 17. Services related strip (under each service page)
   -------------------------------------------------------------------------- */
.services-related {
    padding: 40px 0 80px;
    background: #0f0f0f;
    border-top: 1px solid #1a1a1a;
}
.services-related__head {
    margin-bottom: 24px;
}

/* 18. Contact
   -------------------------------------------------------------------------- */
.contact {
    padding: 56px 0 80px;
}
.contact__grid {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
@media (max-width: 899px) {
    .contact__grid {
        grid-template-columns: 1fr;
    }
}

.contact__info-block {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.contact__info-title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 10px;
}
.contact__info-block p {
    color: var(--c-text-dim);
    font-size: 14.5px;
    line-height: 1.7;
}
.contact__info-block a {
    color: var(--c-accent);
}

.contact__phone-hero {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: 38px;
    color: var(--c-accent);
    letter-spacing: 0.5px;
    display: inline-block;
}

.contact__map {
    margin-top: 18px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--c-border);
}
.contact__map iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: 0;
}

.contact__form {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 24px;
}

/* 19. Careers
   -------------------------------------------------------------------------- */
.careers {
    padding: 56px 0 56px;
}
.careers__grid {
    display: grid;
    gap: 48px;
    /* Fixed first track (360px), second track takes the rest via calc — avoids
     using fr alongside Swiper-sensitive layouts elsewhere on the site. */
    grid-template-columns: 360px calc(100% - 360px - 48px);
    align-items: stretch;
}
@media (max-width: 899px) {
    .careers__grid {
        grid-template-columns: 100%;
        gap: 28px;
        align-items: start;
    }
}

/* Image fills the column (cover); mobile drops back to natural aspect. */
.careers__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
}
@media (max-width: 899px) {
    .careers__img {
        height: auto;
    }
}
.careers__copy p {
    color: var(--c-text-dim);
    line-height: 1.75;
    font-size: 15px;
}
.careers__copy p + p {
    margin-top: 14px;
}
.careers__copy strong {
    color: var(--c-text);
}
.careers__copy a {
    color: var(--c-accent);
    font-weight: 700;
}

.apply {
    margin-top: 32px;
    padding: 20px 22px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r-sm);
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.apply__title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-right: 12px;
}
.apply a {
    color: var(--c-text);
    font-weight: 700;
}
.apply a:hover {
    color: var(--c-accent);
}

/* Skip-to-content link (visually hidden until focused) */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}
.skip-link:focus-visible {
    position: absolute;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    border-radius: var(--r-sm);
    font-weight: 800;
    outline: 2px solid var(--c-accent-ink);
    outline-offset: 2px;
}

/* Contact-form heading variant (uses accent instead of danger) */
.quote-modal__title--accent {
    color: var(--c-accent);
    margin-bottom: 20px;
}