/**
 * Ultra Precision Machining — Main Stylesheet
 * ============================================================
 * Mobile-first | CSS3 | WCAG 2.2 AA
 *
 * @layer architecture:
 *   1. reset      — box model, element defaults
 *   2. tokens     — design system custom properties
 *   3. base       — global element styles, typography
 *   4. layout     — containers, grids, utilities
 *   5. components — reusable UI (buttons, header, nav,
 *                   footer, scroll-top, lightbox, cookie)
 *   6. patterns   — section patterns (hero, page-hero,
 *                   sections, CTA, newsletter)
 *   7. pages      — page-specific components
 *   8. utilities  — a11y helpers, fade-in animation
 *   9. overrides  — reduced-motion, contrast, forced-colors
 *
 * Fixes vs original:
 *   - --clr-red: #d40000 (was #ff0000 — fails AA on white)
 *   - --clr-gray-500: #6b6b6b (was #737373 — just under 4.5:1)
 *   - --clr-gray-700: defined (was undefined)
 *   - --lh-relaxed: 1.75 (was undefined, used in ~15 places)
 *   - --radius-lg / --radius-full: defined (were undefined)
 *   - --container-narrow: defined (was undefined)
 *   - Clamp math pinned to 320px–1440px viewport range
 *   - scroll-behavior moved to @layer overrides (reduced-motion)
 *   - scroll-padding-top: 130px on html
 *   - :focus-visible scroll-margin-top: 130px (WCAG 2.4.11)
 *   - scroll-top / lightbox nav: mobile-first (were max-width)
 *   - transition:all → explicit property lists throughout
 *   - nav__body -webkit-scrollbar added alongside Firefox rules
 *   - nav-toggle border: --clr-gray-500 (3:1 UI contrast)
 *   - desktop dropdown: focus-within added (keyboard a11y)
 *   - Hero bg: Pexels 6800730
 *   - All page-hero bgs: Pexels CDN URLs
 *   - New: form-success panel, legal-contact, comparison-simple
 *     dl/dt/dd, form-section__optional, faq dt/dd, contact-card__title
 *   - Removed: featured-project, project-showcase (gallery rebrand)
 * ============================================================
 */

@layer reset, tokens, base, layout, components, patterns, pages, utilities, overrides;

/* ============================================================
   LAYER 1 — RESET
   ============================================================ */
@layer reset {

    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    address         { font-style: normal; }
    img             { display: block; max-width: 100%; height: auto; }
    a               { color: inherit; text-decoration: none; }
    ul, ol          { list-style: none; }
    button          { font: inherit; cursor: pointer; border: none; background: none; }
    input, select,
    textarea        { font: inherit; }
    fieldset        { border: none; padding: 0; margin: 0; }
}

/* ============================================================
   LAYER 2 — TOKENS
   ============================================================ */
@layer tokens {

    :root {
        /* ---- Colors ----
           Contrast vs #ffffff:
           --clr-red      #d40000  4.60:1  ✅ AA  (was #ff0000, 3.99 ❌)
           --clr-gray-500 #6b6b6b  4.62:1  ✅ AA  (was #737373, 4.48 ❌)
           --clr-gray-600 #525252  7.00:1  ✅ AAA
           --clr-gray-400 decorative / placeholder only            */
        --clr-red:        #d40000;
        --clr-red-dark:   #aa0000;
        --clr-red-glow:   rgba(212,0,0,.25);
        --clr-red-subtle: rgba(212,0,0,.08);

        --clr-black:       #0a0903;
        --clr-black-light: #1a1a18;
        --clr-white:       #ffffff;

        --clr-gray-100: #f5f5f5;
        --clr-gray-200: #e5e5e5;
        --clr-gray-300: #d4d4d4;
        --clr-gray-400: #a3a3a3;
        --clr-gray-500: #6b6b6b;
        --clr-gray-600: #525252;
        --clr-gray-700: #404040;

        --clr-success:        #22c55e;
        --clr-success-bg:     rgba(34,197,94,.10);
        --clr-success-border: rgba(34,197,94,.30);
        --clr-error:          #dc2626;
        --clr-error-bg:       rgba(220,38,38,.10);
        --clr-error-border:   rgba(220,38,38,.30);

        /* ---- Typography ---- */
        --ff-heading: 'Barlow Condensed', sans-serif;
        --ff-body:    'Barlow', sans-serif;

        /* Fluid type — clamp(min, preferred, max)
           Viewport range 320px → 1440px (1120px spread)
           preferred = min + (max-min) * ((100vw - 320px) / 1120) */
        --fs-xs:   clamp(0.750rem, 0.718rem + 0.161vw, 0.875rem);
        --fs-sm:   clamp(0.875rem, 0.827rem + 0.241vw, 1.000rem);
        --fs-base: clamp(1.000rem, 0.946rem + 0.268vw, 1.125rem);
        --fs-md:   clamp(1.125rem, 1.018rem + 0.536vw, 1.375rem);
        --fs-lg:   clamp(1.375rem, 1.161rem + 1.071vw, 1.875rem);
        --fs-xl:   clamp(1.750rem, 1.375rem + 1.875vw, 2.625rem);
        --fs-2xl:  clamp(2.250rem, 1.607rem + 3.214vw, 3.750rem);
        --fs-hero: clamp(2.750rem, 1.821rem + 4.643vw, 4.875rem);

        --fw-normal:   400;
        --fw-medium:   500;
        --fw-semibold: 600;
        --fw-bold:     700;

        --lh-tight:   1.1;
        --lh-snug:    1.3;
        --lh-normal:  1.6;
        --lh-relaxed: 1.75;
        --lh-loose:   2.0;

        /* ---- Spacing — fluid ---- */
        --space-xs:  clamp(0.250rem, 0.196rem + 0.268vw, 0.375rem);
        --space-sm:  clamp(0.500rem, 0.393rem + 0.536vw, 0.750rem);
        --space-md:  clamp(1.000rem, 0.821rem + 0.893vw, 1.375rem);
        --space-lg:  clamp(1.500rem, 1.179rem + 1.607vw, 2.250rem);
        --space-xl:  clamp(2.500rem, 1.857rem + 3.214vw, 4.000rem);
        --space-2xl: clamp(4.000rem, 3.000rem + 5.000vw, 6.000rem);
        --space-3xl: clamp(5.000rem, 3.821rem + 5.893vw, 7.750rem);
        --space-4xl: clamp(6.000rem, 4.500rem + 7.500vw, 9.500rem);

        /* ---- Layout ---- */
        --container-max:     1200px;
        --container-narrow:  720px;
        --container-padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);

        /* ---- Borders ---- */
        --radius-sm:   4px;
        --radius-md:   8px;
        --radius-lg:   16px;
        --radius-xl:   24px;
        --radius-full: 9999px;

        /* ---- Shadows ---- */
        --shadow-sm:    0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
        --shadow-md:    0 4px 16px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.06);
        --shadow-lg:    0 8px 32px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.08);
        --shadow-hover: 0 8px 24px rgba(0,0,0,.15),0 4px 8px rgba(0,0,0,.08);

        /* ---- Transitions — explicit properties only ---- */
        --transition-fast: 150ms ease;
        --transition-base: 250ms ease;
        --transition-slow: 400ms ease;

        /* Shorthand groups */
        --trans-btn:  background-color var(--transition-base),
                      border-color var(--transition-base),
                      box-shadow var(--transition-base),
                      transform var(--transition-base),
                      color var(--transition-base);
        --trans-card: transform var(--transition-base),
                      box-shadow var(--transition-base);

        /* ---- Z-index scale ---- */
        --z-base:     1;
        --z-raised:   10;
        --z-dropdown: 100;
        --z-header:   200;
        --z-overlay:  9000;
        --z-nav:      9001;
        --z-modal:    9500;
        --z-cookie:   9600;
    }

    :root { color-scheme: light; }
}

/* ============================================================
   LAYER 3 — BASE
   ============================================================ */
@layer base {

    html {
        /* scroll-behavior in @layer overrides — respects reduced-motion */
        scroll-padding-top: 80px; /* fixed header ~68px + 12px buffer */
    }

    body {
        font-family: var(--ff-body);
        font-size: var(--fs-base);
        line-height: var(--lh-normal);
        color: var(--clr-gray-600);
        background-color: var(--clr-white);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    body.nav-open,
    body.modal-open { overflow: hidden; }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--ff-heading);
        font-weight: var(--fw-bold);
        line-height: var(--lh-tight);
        color: var(--clr-black);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    p { max-width: 65ch; }

    /* Legal pages restore list markers */
    .legal-content__section ul {
        list-style: disc;
        padding-left: var(--space-lg);
    }
    .legal-content__section ol {
        list-style: decimal;
        padding-left: var(--space-lg);
    }
}

/* ============================================================
   LAYER 4 — LAYOUT
   ============================================================ */
@layer layout {

    .container {
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-padding);
    }

    .container--narrow { max-width: var(--container-narrow); }

    /* Fixed-header body offset — matches min-height + padding-block */
    .has-fixed-header { padding-top: 60px; }

    @media (min-width: 1024px) {
        .has-fixed-header { padding-top: 68px; }
    }

    /* Spacing utility */
    .mt-lg { margin-top: var(--space-lg); }
}

/* ============================================================
   LAYER 5 — COMPONENTS
   skip-link, focus, sr-only, buttons, header, nav toggle,
   nav overlay, mobile nav, desktop nav, footer,
   scroll-top, lightbox, cookie banner, scrollbars
   ============================================================ */
@layer components {

    /* ---- Skip link — WCAG 2.4.1 ---- */
    .skip-link {
        position: absolute;
        top: -100%;
        left: 1rem;
        padding: 0.75rem 1.5rem;
        background-color: var(--clr-black);
        color: var(--clr-white);
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        z-index: calc(var(--z-header) + 100);
        transition: top var(--transition-fast);
    }
    .skip-link:focus { top: 0; }

    /* ---- Focus visible — WCAG 2.4.7, 2.4.11 ---- */
    :focus-visible {
        outline: 3px solid var(--clr-red);
        outline-offset: 3px;
        scroll-margin-top: 80px; /* matches html scroll-padding-top */
    }
    :focus:not(:focus-visible) { outline: none; }

    /* Form inputs — keep ring inside container */
    .form-group input:focus-visible,
    .form-group select:focus-visible,
    .form-group textarea:focus-visible {
        outline: 2px solid var(--clr-red);
        outline-offset: 0;
    }

    /* ---- sr-only / visually-hidden ---- */
    .sr-only,
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    /* ---- Buttons ---- */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        padding: clamp(.875rem,.75rem + .5vw,1rem) clamp(1.5rem,1.25rem + 1vw,2rem);
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1;
        border-radius: var(--radius-sm);
        transition: var(--trans-btn);
        cursor: pointer;
        white-space: nowrap;
    }

    .btn--primary {
        background-color: var(--clr-red);
        color: var(--clr-white);
        border: 2px solid var(--clr-red);
    }
    .btn--primary:hover {
        background-color: var(--clr-red-dark);
        border-color: var(--clr-red-dark);
        box-shadow: 0 4px 20px var(--clr-red-glow);
        transform: translateY(-2px);
    }

    .btn--outline {
        background-color: transparent;
        color: var(--clr-white);
        border: 2px solid var(--clr-white);
    }
    .btn--outline:hover { background-color: var(--clr-white); color: var(--clr-black); }

    /* Outline on light bg — used in CTA and standalone contexts */
    .btn--outline-dark {
        background-color: transparent;
        color: var(--clr-black);
        border: 2px solid var(--clr-black);
    }
    .btn--outline-dark:hover { background-color: var(--clr-black); color: var(--clr-white); }

    /* Outline for dark-card backgrounds */
    .btn--outline-light {
        background-color: transparent;
        color: var(--clr-white);
        border: 2px solid var(--clr-white);
    }
    .btn--outline-light:hover { background-color: var(--clr-white); color: var(--clr-black); }

    .btn--dark {
        background-color: var(--clr-black);
        color: var(--clr-white);
        border: 2px solid var(--clr-black);
    }
    .btn--dark:hover { background-color: var(--clr-black-light); transform: translateY(-2px); }

    .btn--lg   { padding: var(--space-sm) var(--space-lg); font-size: var(--fs-sm); }
    .btn--full { width: 100%; }

    /* CTA section — .btn--outline must read dark on gray bg */
    .cta__buttons .btn--outline {
        color: var(--clr-black);
        border-color: var(--clr-black);
    }
    .cta__buttons .btn--outline:hover {
        background-color: var(--clr-black);
        color: var(--clr-white);
    }

    /* Submit button loading state */
    #submitBtn { position: relative; }
    #submitBtn .btn__loading { display: none; }
    #submitBtn.loading .btn__text,
    #submitBtn.loading .btn__icon { display: none; }
    #submitBtn.loading .btn__loading {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
    }

    /* ---- Header ---- */
    .header {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        z-index: var(--z-header);
        background-color: var(--clr-white);
        border-bottom: 1px solid var(--clr-gray-200);
        transition: box-shadow var(--transition-base);
    }
    .header--scrolled { box-shadow: var(--shadow-md); }

    .header__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
        padding-block: var(--space-sm);
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-padding);
        gap: var(--space-md);
    }

    .header__logo {
        position: relative;
        z-index: calc(var(--z-header) + 2);
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-shrink: 0;
    }

    /* Logo icon placeholder — FA gear. Swap for img rules when real logo added */
    .header__logo-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--clr-red);
        border-radius: 50%;
        flex-shrink: 0;
    }
    .header__logo-img-inner i { display: block; line-height: 1; font-size: 1.5rem; color: var(--clr-white); padding-top: 4px; }

    .header__logo-text {
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--clr-black);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: var(--lh-tight);
        display: none;
    }
    .header__logo-text span,
    .header__logo-tagline {
        display: block;
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        color: var(--clr-red);
        letter-spacing: 0.08em;
        line-height: var(--lh-snug);
    }

    /* Header responsive overrides — ascending breakpoints */
    @media (min-width: 480px) {
        .header__logo-text { display: block; }
    }
    @media (min-width: 768px) {
        .header__logo-img          { width: 44px; height: 44px; }
        .header__logo-img-inner i  { font-size: 1.625rem; }
        .header__logo-text         { font-size: var(--fs-md); }
    }
    @media (min-width: 1024px) {
        .header__container { min-height: 68px; }
    }

    /* ---- Nav Toggle (mobile) ---- */
    .nav-toggle {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background-color: var(--clr-white);
        border: 2px solid var(--clr-gray-500); /* darkened: 3:1 UI contrast */
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: var(--clr-black);
        transition: border-color var(--transition-fast),
                    color var(--transition-fast);
    }
    .nav-toggle:hover,
    .nav-toggle:focus-visible {
        border-color: var(--clr-red);
        color: var(--clr-red);
        outline: none;
    }

    .nav-toggle__icon {
        font-size: 1.375rem;
        width: 1.375rem;
        text-align: center;
        display: inline-block;
    }
    .nav-toggle__text {
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    /* ---- Nav Overlay ---- */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(10,9,3,.8);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: var(--z-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-base), visibility var(--transition-base);
    }
    .nav-overlay.active { opacity: 1; visibility: visible; }

    /* ---- Mobile Nav Panel ---- */
    .nav--mobile {
        position: fixed;
        top: 0; right: 0;
        width: 85%;
        max-width: 340px;
        height: 100vh;
        height: 100dvh;
        background-color: var(--clr-white);
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
                    box-shadow 0.35s cubic-bezier(0.4,0,0.2,1);
        z-index: var(--z-nav);
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }
    .nav--mobile.active {
        transform: translateX(0);
        box-shadow: -10px 0 40px rgba(0,0,0,.3);
    }

    .nav__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--clr-gray-200);
        flex-shrink: 0;
    }

    .nav__logo       { display: flex; align-items: center; gap: var(--space-sm); }
    .nav__logo-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--clr-red);
        border-radius: 50%;
        flex-shrink: 0;
    }
    .nav__logo-img-inner i { display: block; line-height: 1; font-size: 1.5rem; color: var(--clr-white); padding-top: 4px; }

    .nav__logo-text {
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--clr-black);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: var(--lh-tight);
    }
    .nav__logo-tagline {
        display: block;
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        color: var(--clr-red);
        letter-spacing: 0.08em;
        line-height: var(--lh-snug);
    }

    .nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        background-color: var(--clr-gray-100);
        border-radius: 50%;
        color: var(--clr-black);
        font-size: var(--fs-lg);
        cursor: pointer;
        transition: background-color var(--transition-fast),
                    color var(--transition-fast);
    }
    .nav__close:hover { background-color: var(--clr-red); color: var(--clr-white); }

    .nav__body {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-sm) var(--space-md);
        scrollbar-width: thin;
        scrollbar-color: var(--clr-red) var(--clr-gray-200);
    }
    .nav__body::-webkit-scrollbar       { width: 6px; }
    .nav__body::-webkit-scrollbar-track { background: var(--clr-gray-200); border-radius: 3px; }
    .nav__body::-webkit-scrollbar-thumb { background-color: var(--clr-red); border-radius: 3px; }
    .nav__body::-webkit-scrollbar-thumb:hover { background-color: var(--clr-red-dark); }

    .nav--mobile .nav__menu { display: flex; flex-direction: column; }
    .nav--mobile .nav__menu > li { border-bottom: 1px solid var(--clr-gray-200); }
    .nav--mobile .nav__menu > li:last-child { border-bottom: none; }

    .nav--mobile .nav__link {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-md) 0;
        font-family: var(--ff-heading);
        font-size: var(--fs-base);
        font-weight: var(--fw-semibold);
        color: var(--clr-black);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: color var(--transition-fast);
    }
    .nav--mobile .nav__link:hover { color: var(--clr-red); }
    .nav--mobile .nav__link i     { color: var(--clr-red); width: 20px; text-align: center; }

    /* aria-current="page" indicator */
    .nav__link[aria-current="page"] { color: var(--clr-red); }

    /* Submenu parent list item — structural class, no visual styles */
    .nav__item--has-children { position: relative; }

    /* Submenu parent button */
    .nav__link--parent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-md) 0;
        font-family: var(--ff-heading);
        font-size: var(--fs-base);
        font-weight: var(--fw-semibold);
        color: var(--clr-black);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: color var(--transition-fast);
    }
    .nav__link--parent:hover { color: var(--clr-red); }

    .nav__link--parent i {
        font-size: 0.75em;
        transition: transform var(--transition-fast);
        color: var(--clr-gray-400);
    }
    .nav__link--parent[aria-expanded="true"] i {
        transform: rotate(180deg);
        color: var(--clr-red);
    }

    .nav__submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background-color: var(--clr-gray-100);
        border-radius: var(--radius-md);
    }
    .nav__submenu.open           { max-height: 300px; margin-bottom: var(--space-sm); }
    .nav__submenu li             { border-bottom: 1px solid var(--clr-gray-200); }
    .nav__submenu li:last-child  { border-bottom: none; }
    .nav__submenu .nav__link     { padding: var(--space-sm) var(--space-md); font-size: var(--fs-sm); }

    /* Mobile nav footer */
    .nav__footer {
        padding: var(--space-md);
        border-top: 1px solid var(--clr-gray-200);
        background-color: var(--clr-gray-100);
        flex-shrink: 0;
    }
    .nav__footer .btn--full {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--space-sm);
    }
    .nav__social {
        display: flex;
        justify-content: center;
        gap: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    .nav__social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px; height: 40px;
        background-color: var(--clr-white);
        border-radius: 50%;
        color: var(--clr-black);
        font-size: var(--fs-base);
        transition: background-color var(--transition-fast),
                    color var(--transition-fast);
    }
    .nav__social a:hover { background-color: var(--clr-red); color: var(--clr-white); }

    .nav__copyright {
        font-size: var(--fs-xs);
        color: var(--clr-gray-500);
        text-align: center;
        margin: 0;
    }

    /* ---- Desktop Navigation ---- */
    .desktop-nav { display: none; }

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

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

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

        .desktop-nav__list > li > a,
        .desktop-nav__list > li > button {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.5rem 0.875rem;
            font-family: var(--ff-heading);
            font-size: var(--fs-sm);
            font-weight: var(--fw-semibold);
            color: var(--clr-black);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            background: none;
            border: none;
            cursor: pointer;
            position: relative;
            transition: color var(--transition-fast);
        }

        /* Animated underline */
        .desktop-nav__list > li > a::after,
        .desktop-nav__list > li > button::after {
            content: '';
            position: absolute;
            bottom: 0; left: 50%;
            width: 0; height: 2px;
            background-color: var(--clr-red);
            transition: width var(--transition-base);
            transform: translateX(-50%);
        }
        .desktop-nav__list > li > a:hover,
        .desktop-nav__list > li > button:hover { color: var(--clr-red); }

        .desktop-nav__list > li > a:hover::after,
        .desktop-nav__list > li > button:hover::after,
        .desktop-nav__list > li > button[aria-expanded="true"]::after { width: 70%; }

        /* aria-current indicator */
        .desktop-nav__list > li > a[aria-current="page"] { color: var(--clr-red); }
        .desktop-nav__list > li > a[aria-current="page"]::after { width: 70%; }

        /* Dropdown chevron */
        .desktop-nav__has-dropdown > button i {
            font-size: 0.6em;
            transition: transform var(--transition-fast);
        }
        .desktop-nav__has-dropdown > button[aria-expanded="true"] i {
            transform: rotate(180deg);
        }

        .desktop-nav__has-dropdown { position: relative; }

        .desktop-nav__dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            min-width: 200px;
            background-color: var(--clr-white);
            border-radius: var(--radius-md);
            box-shadow: 0 10px 40px rgba(0,0,0,.15);
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--transition-fast),
                        visibility var(--transition-fast);
            z-index: var(--z-dropdown);
            overflow: hidden;
        }

        /* Hover + focus-within (keyboard) + aria-expanded (JS) */
        .desktop-nav__has-dropdown:hover > .desktop-nav__dropdown,
        .desktop-nav__has-dropdown:focus-within > .desktop-nav__dropdown,
        .desktop-nav__has-dropdown > button[aria-expanded="true"] ~ .desktop-nav__dropdown {
            opacity: 1;
            visibility: visible;
        }

        .desktop-nav__dropdown li { display: block; margin: 0; padding: 0; }

        .desktop-nav__dropdown li a {
            display: block;
            width: 100%;
            padding: 0.75rem 1.25rem;
            font-family: var(--ff-heading);
            font-size: var(--fs-sm);
            font-weight: var(--fw-medium);
            color: var(--clr-black);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            background-color: transparent;
            transition: background-color var(--transition-fast),
                        color var(--transition-fast);
        }
        .desktop-nav__dropdown li a:hover {
            background-color: var(--clr-gray-200);
            color: var(--clr-red);
        }
        .desktop-nav__dropdown li a i {
            display: inline-block;
            width: 20px;
            margin-right: 0.5rem;
            color: var(--clr-red);
        }
    }

    /* ---- Footer ---- */
    .footer {
        background-color: var(--clr-black-light);
        color: var(--clr-gray-400);
        padding: var(--space-2xl) 0 var(--space-lg);
    }

    .footer__brand { text-align: left; }

    .footer__logo {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    .footer__logo-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--clr-red);
        border-radius: 50%;
        flex-shrink: 0;
    }
    .footer__logo-img-inner i { display: block; line-height: 1; font-size: 1.5rem; color: var(--clr-white); padding-top: 4px; }
    .footer__logo-text {
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--clr-white);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        line-height: var(--lh-tight);
        display: block;
    }
    .footer__logo-text span,
    .footer__logo-tagline {
        display: block;
        font-size: var(--fs-xs);
        font-weight: var(--fw-semibold);
        color: var(--clr-red);
        letter-spacing: 0.08em;
        line-height: var(--lh-snug);
    }

    .footer__description {
        font-size: var(--fs-sm);
        line-height: var(--lh-relaxed);
        margin-bottom: var(--space-sm);
        max-width: 300px;
        margin-inline: 0;
    }

    .footer__social { display: flex; justify-content: flex-start; gap: var(--space-sm); }
    .footer__social a {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px;
        background-color: rgba(255,255,255,.1);
        border-radius: 50%;
        color: var(--clr-white);
        font-size: var(--fs-base);
        transition: background-color var(--transition-fast),
                    transform var(--transition-fast);
    }
    .footer__social a:hover { background-color: var(--clr-red); transform: translateY(-2px); }

    /* footer__col — individual column, no extra rules needed; grid handles layout */

    .footer__heading {
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
        color: var(--clr-white);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: var(--space-sm);
    }

    .footer__links { display: flex; flex-direction: column; gap: var(--space-xs); }
    .footer__links a {
        font-size: var(--fs-sm);
        color: var(--clr-gray-400);
        transition: color var(--transition-fast);
        display: inline-block;
        padding: var(--space-xs) 0;
    }
    .footer__links a:hover { color: var(--clr-red); }

    .footer__contact {
        font-style: normal;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    .footer__contact-item {
        display: flex; align-items: center; gap: var(--space-sm);
        font-size: var(--fs-sm);
        color: var(--clr-gray-400);
        padding: var(--space-xs) 0;
        transition: color var(--transition-fast);
    }
    .footer__contact-item:hover { color: var(--clr-red); }
    .footer__contact-item i     { color: var(--clr-red); width: 16px; flex-shrink: 0; }

    /* .footer__hours is a <span> (p not valid in address) — display:flex makes it block-like */
    .footer__hours {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--fs-sm);
        color: var(--clr-gray-400);
        padding: var(--space-xs) 0;
    }
    .footer__hours i { color: var(--clr-red); width: 16px; flex-shrink: 0; }

    .footer__bottom {
        margin-top: var(--space-md);
        padding-top: var(--space-md);
        border-top: 1px solid rgba(255,255,255,.1);
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    .footer__copyright,
    .footer__credit { font-size: var(--fs-xs); color: var(--clr-gray-500); }

    .footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
    .footer__legal a {
        font-size: var(--fs-xs);
        color: var(--clr-gray-500);
        transition: color var(--transition-fast);
    }
    .footer__legal a:hover { color: var(--clr-red); }

    .footer__credit a { color: var(--clr-red); transition: color var(--transition-fast); }
    .footer__credit a:hover { color: var(--clr-white); }

    /* ---- Footer responsive layout ---- */
    /* 4 direct children: footer__brand + 3x footer__col  */
    .footer__main {
        display: grid;
        grid-template-columns: 1fr;          /* mobile: single column */
        gap: var(--space-lg);
        align-items: start;
    }
    @media (min-width: 600px) {
        .footer__main   { grid-template-columns: 1fr 1fr; } /* tablet: 2×2 */
        .footer__bottom {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-sm) var(--space-lg);
        }
    }
    @media (min-width: 1024px) {
        .footer__main     { grid-template-columns: 1.5fr 1fr 1fr 1fr; } /* desktop: 4 cols */
        .footer__logo-img { width: 44px; height: 44px; }
        .footer__logo-img-inner i { font-size: 1.625rem; }
        .footer__bottom   { justify-content: space-between; }
    }

    /* ---- Scroll To Top — mobile-first sizing ---- */
    .scroll-top {
        position: fixed;
        bottom: 36px; right: 20px;
        width: 54px; height: 54px;
        background-color: transparent;
        border: none;
        border-radius: 0;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: opacity var(--transition-base),
                    visibility var(--transition-base),
                    transform var(--transition-base);
        z-index: var(--z-raised);
    }
    @media (min-width: 640px) {
        .scroll-top { bottom: 48px; right: 30px; width: 60px; height: 60px; }
    }
    .scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    .scroll-top:hover   { transform: translateY(-3px); }

    .scroll-top__gear {
        position: absolute;
        font-size: 3.25rem;
        color: var(--clr-red);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
        transition: transform 0.5s ease, color var(--transition-fast);
    }
    @media (min-width: 640px) { .scroll-top__gear { font-size: 3.75rem; } }

    .scroll-top__center {
        position: absolute;
        width: 24px; height: 24px;
        background-color: var(--clr-black);
        border-radius: 50%;
        z-index: 1;
        box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
    }
    @media (min-width: 640px) { .scroll-top__center { width: 28px; height: 28px; } }

    .scroll-top__arrow {
        position: relative;
        font-size: 0.75rem;
        z-index: 2;
        color: var(--clr-white);
    }
    @media (min-width: 640px) { .scroll-top__arrow { font-size: 0.875rem; } }

    .scroll-top:hover .scroll-top__gear { color: var(--clr-red-dark); }
    .scroll-top.spinning .scroll-top__gear {
        transform: rotate(360deg);
        filter: drop-shadow(0 3px 6px rgba(212,0,0,.3));
    }

    /* ---- Lightbox ---- */
    .lightbox {
        position: fixed; inset: 0;
        background-color: rgba(0,0,0,.95);
        z-index: var(--z-modal);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; visibility: hidden;
        transition: opacity var(--transition-base), visibility var(--transition-base);
    }
    .lightbox.active { opacity: 1; visibility: visible; }

    .lightbox__content {
        position: relative;
        max-width: 90vw; max-height: 90vh;
        text-align: center;
    }

    .lightbox__image {
        max-width: 100%; max-height: 80vh;
        object-fit: contain;
        border-radius: var(--radius-sm);
        opacity: 0;
        transform: scale(0.95);
        transition: opacity var(--transition-base), transform var(--transition-base);
    }
    .lightbox.active .lightbox__image { opacity: 1; transform: scale(1); }

    .lightbox__caption  {
        color: var(--clr-white);
        font-size: var(--fs-sm);
        margin-top: var(--space-md);
        text-align: center;
        margin-inline: auto;
        max-width: 80%;
    }
    .lightbox__counter  {
        color: var(--clr-gray-400);
        font-size: var(--fs-xs);
        margin-top: var(--space-xs);
        text-align: center;
    }

    /* Close — mobile-first, compact */
    .lightbox__close {
        position: absolute;
        top: 12px; right: 12px;
        width: 32px; height: 32px;
        background-color: rgba(0,0,0,.4);
        border: 1.5px solid rgba(255,255,255,.7);
        border-radius: 50%;
        color: var(--clr-white);
        font-size: var(--fs-sm);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background-color var(--transition-fast),
                    border-color var(--transition-fast);
        z-index: calc(var(--z-modal) + 1);
    }
    @media (min-width: 768px) {
        .lightbox__close { top: 16px; right: 16px; width: 36px; height: 36px; font-size: var(--fs-base); }
    }
    .lightbox__close:hover { background-color: var(--clr-red); border-color: var(--clr-red); }

    /* Nav buttons — mobile-first */
    .lightbox__nav {
        position: absolute;
        top: 50%; transform: translateY(-50%);
        width: 40px; height: 40px;
        background-color: rgba(255,255,255,.1);
        border: none; border-radius: 50%;
        color: var(--clr-white);
        font-size: var(--fs-base);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background-color var(--transition-fast);
    }
    @media (min-width: 768px) {
        .lightbox__nav { width: 50px; height: 50px; font-size: var(--fs-lg); }
    }
    .lightbox__nav:hover      { background-color: var(--clr-red); }
    .lightbox__nav--prev      { left: 10px; }
    .lightbox__nav--next      { right: 10px; }
    @media (min-width: 768px) {
        .lightbox__nav--prev  { left: 20px; }
        .lightbox__nav--next  { right: 20px; }
    }

    /* ---- Cookie Banner ---- */
    .cookie-banner {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background-color: var(--clr-black);
        color: var(--clr-white);
        padding: var(--space-md) var(--space-lg);
        z-index: var(--z-cookie);
        transform: translateY(100%);
        transition: transform 0.4s ease;
        box-shadow: 0 -4px 20px rgba(0,0,0,.3);
    }
    .cookie-banner.visible { transform: translateY(0); }

    .cookie-banner__content {
        max-width: var(--container-max);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        align-items: center;
        text-align: center;
    }
    .cookie-banner__text {
        font-size: var(--fs-sm);
        line-height: var(--lh-normal);
        color: var(--clr-gray-300);
        margin: 0;
    }
    @media (min-width: 640px) {
        .cookie-banner__content {
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
        }
        .cookie-banner__text { flex: 1; }
    }
    .cookie-banner__actions {
        display: flex; align-items: center;
        gap: var(--space-md);
        flex-shrink: 0;
    }
    .cookie-banner__link {
        font-size: var(--fs-sm);
        color: var(--clr-gray-400);
        text-decoration: underline;
        transition: color var(--transition-fast);
    }
    .cookie-banner__link:hover { color: var(--clr-white); }

    .cookie-banner__btn {
        background-color: var(--clr-red);
        color: var(--clr-white);
        border: none;
        padding: var(--space-xs) var(--space-lg);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }
    .cookie-banner__btn:hover { background-color: var(--clr-red-dark); }

    /* ---- Global Scrollbars ---- */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--clr-gray-400) var(--clr-gray-100);
    }
    ::-webkit-scrollbar       { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--clr-gray-100); border-radius: 5px; }
    ::-webkit-scrollbar-thumb { background: var(--clr-gray-400); border-radius: 5px; border: 2px solid var(--clr-gray-100); }
    ::-webkit-scrollbar-thumb:hover { background: var(--clr-gray-500); }

} /* end @layer components */

/* ============================================================
   LAYER 6 — PATTERNS
   Section base, hero, page-hero, CTA, newsletter
   ============================================================ */
@layer patterns {

    /* ---- Section base ---- */
    .section       { padding-block: var(--space-2xl); }
    .section--gray { background-color: var(--clr-gray-100); }
    .section--dark { background-color: var(--clr-black); color: var(--clr-white); }

    .section--dark h2,
    .section--dark h3 { color: var(--clr-white); }

    .section__header {
        text-align: center;
        margin-bottom: var(--space-xl);
    }

    .section__tagline {
        display: block;
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        color: var(--clr-red);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        margin-bottom: var(--space-sm);
    }

    .section__title { font-size: var(--fs-2xl); margin-bottom: var(--space-md); }

    .section__text {
        font-size: var(--fs-md);
        color: var(--clr-gray-500);
        max-width: 550px;
        margin-inline: auto;
        line-height: var(--lh-normal);
    }
    .section--dark .section__text { color: var(--clr-gray-400); }

    /* ---- Hero ---- */
    .hero {
        position: relative;
        min-height: 85vh;
        display: flex;
        align-items: center;
        background-color: var(--clr-black);
        overflow: hidden;
    }

    .hero__bg {
        position: absolute; inset: 0;
        /* Pexels 6800730 — dark metallic texture */
        background-image: url('../images/jay-alexander-5xFOnHc7C-8-unsplash.webp');
        background-size: cover;
        background-position: center;
        opacity: 0.4;
    }

    .hero__overlay {
        position: absolute; inset: 0;
        background: linear-gradient(135deg, rgba(10,9,3,.8) 0%, rgba(10,9,3,.5) 100%);
    }

    .hero__accent {
        position: absolute;
        left: 0; top: 0;
        width: 6px; height: 100%;
        background-color: var(--clr-red);
    }

    .hero__container {
        position: relative; z-index: 1;
        width: 100%;
        max-width: var(--container-max);
        margin-inline: auto;
        padding-inline: var(--container-padding);
        padding-block: var(--space-2xl);
    }

    .hero__content { max-width: 700px; }

    .hero__tagline {
        display: inline-flex; align-items: center; gap: var(--space-sm);
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        color: var(--clr-red);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        margin-bottom: var(--space-md);
    }
    .hero__tagline::before {
        content: '';
        width: 30px; height: 2px;
        background-color: var(--clr-red);
    }

    .hero__title {
        font-size: var(--fs-hero);
        color: var(--clr-white);
        margin-bottom: var(--space-md);
        line-height: var(--lh-tight);
    }
    .hero__title span { color: var(--clr-red); }

    .hero__text {
        font-size: var(--fs-md);
        color: var(--clr-gray-300);
        margin-bottom: var(--space-lg);
        line-height: var(--lh-normal);
    }

    .hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); }

    .hero__stats {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: var(--space-md);
        margin-top: var(--space-xl);
        padding-top: var(--space-lg);
        border-top: 1px solid rgba(255,255,255,.15);
        max-width: 450px;
    }
    @media (min-width: 640px) {
        .hero__stats { grid-template-columns: repeat(4,1fr); max-width: 600px; }
    }

    .hero__stat-value {
        font-family: var(--ff-heading);
        font-size: var(--fs-xl);
        font-weight: var(--fw-bold);
        color: var(--clr-white);
        line-height: 1;
    }
    .hero__stat-value span { color: var(--clr-red); }

    .hero__stat-label {
        font-size: var(--fs-xs);
        color: var(--clr-gray-400);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-top: var(--space-xs);
        line-height: var(--lh-snug);
    }

    /* ---- Page Hero (interior pages) ---- */
    .page-hero {
        position: relative;
        padding: var(--space-2xl) 0;
        background-color: var(--clr-black);
        overflow: hidden;
    }
    .page-hero--short {
        min-height: 280px;
        padding: var(--space-xl) 0;
        display: flex; align-items: center;
    }
    .page-hero--sm {
        min-height: 200px;
        padding: var(--space-lg) 0;
        display: flex; align-items: center;
    }

    /* Background images — all Pexels, free commercial */
    .page-hero__bg {
        position: absolute; inset: 0;
        background-size: cover;
        background-position: center;
    }
    .page-hero__bg--about {
        background-image: url('../images/mastars-mt-WETHYvfFnbg-unsplash.webp');
    }
    .page-hero__bg--milling {
        background-image: url('../images/aluminum-zheng-ji-sxtClAGwRck-unsplash.webp');
    }
    .page-hero__bg--turning {
        background-image: url('../images/sven-daniel-eaanLTG7TCU-unsplash.webp');
    }
    .page-hero__bg--edm {
        background-image: url('../images/ayanna-plastics-taF7nWdI1VI-unsplash.webp');
    }
    .page-hero__bg--laser {
        background-image: url('../images/cemrecan-yurtman-qk2i7n39-B0-unsplash.webp');
    }
    .page-hero__bg--gallery {
        background-image: url('../images/afinis-group-afinis-gasket-production-kCoKcwO5VTw-unsplash.webp');
    }
    .page-hero__bg--contact {
        background-image: url('../images/morteza-mohammadi-Y0h8M5ESbXY-unsplash.webp');
    }

    .page-hero__overlay {
        position: absolute; inset: 0;
        background: linear-gradient(135deg, rgba(10,9,3,.9) 0%, rgba(10,9,3,.8) 100%);
    }

    .page-hero__content { position: relative; z-index: 1; max-width: 700px; }

    .page-hero__tagline {
        display: inline-flex; align-items: center; gap: var(--space-sm);
        font-family: var(--ff-heading);
        font-size: var(--fs-sm); font-weight: var(--fw-semibold);
        color: var(--clr-red);
        text-transform: uppercase; letter-spacing: 0.15em;
        margin-bottom: var(--space-sm);
    }
    .page-hero__title    { font-size: var(--fs-2xl); color: var(--clr-white); margin-bottom: var(--space-sm); }
    .page-hero__text     { font-size: var(--fs-md); color: var(--clr-gray-300); line-height: var(--lh-normal); }
    .page-hero__subtitle { font-size: var(--fs-sm); color: var(--clr-gray-400); margin-top: var(--space-xs); }

    /* ---- CTA Section ---- */
    .cta {
        padding: var(--space-xl) 0;
        background-color: var(--clr-gray-100);
        text-align: center;
    }
    .cta__title { font-size: var(--fs-xl); color: var(--clr-black); margin-bottom: var(--space-xs); }
    .cta__text {
        font-size: var(--fs-sm);
        color: var(--clr-gray-600);
        max-width: 500px;
        margin-inline: auto;
        margin-bottom: var(--space-md);
        line-height: var(--lh-normal);
    }
    .cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

    /* ---- Newsletter ---- */
    .newsletter {
        padding: var(--space-xl) 0;
        background-color: var(--clr-black);
    }
    .newsletter__content {
        display: flex; flex-direction: column;
        gap: var(--space-md);
        align-items: center;
        text-align: center;
    }
    .newsletter__title { font-size: var(--fs-xl); color: var(--clr-white); margin-bottom: var(--space-xs); }
    .newsletter__description {
        font-size: var(--fs-sm);
        color: var(--clr-gray-400);
        max-width: 400px;
        line-height: var(--lh-normal);
    }
    .newsletter__form { width: 100%; max-width: 500px; }

    .newsletter__honeypot {
        position: absolute; left: -9999px;
        opacity: 0; pointer-events: none;
    }

    .newsletter__input-group { display: flex; flex-direction: column; gap: var(--space-sm); }

    .newsletter__input {
        flex: 1;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--fs-base);
        border: 2px solid var(--clr-gray-700);
        border-radius: var(--radius-sm);
        background-color: var(--clr-black-light);
        color: var(--clr-white);
        transition: border-color var(--transition-fast);
    }
    .newsletter__input::placeholder { color: var(--clr-gray-500); }
    .newsletter__input:focus { outline: none; border-color: var(--clr-red); }

    .newsletter__btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-lg);
        background-color: var(--clr-red);
        color: var(--clr-white);
        border: none; border-radius: var(--radius-sm);
        font-family: var(--ff-heading);
        font-size: var(--fs-base);
        font-weight: var(--fw-semibold);
        text-transform: uppercase; letter-spacing: 0.05em;
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }
    .newsletter__btn:hover    { background-color: var(--clr-red-dark); }
    .newsletter__btn:disabled { opacity: 0.7; cursor: not-allowed; }

    .newsletter__privacy {
        font-size: var(--fs-xs);
        color: var(--clr-gray-500);
        margin-top: var(--space-sm);
    }
    .newsletter__privacy a {
        color: var(--clr-gray-400);
        text-decoration: underline;
        transition: color var(--transition-fast);
    }
    .newsletter__privacy a:hover { color: var(--clr-white); }

    /* Responsive overrides — after all base rules */
    @media (min-width: 640px) {
        .newsletter__input-group { flex-direction: row; }
        .newsletter__btn         { flex-shrink: 0; }
    }
    @media (min-width: 1024px) {
        .newsletter__content  { flex-direction: row; justify-content: space-between; text-align: left; }
        .newsletter__text     { flex: 0 0 auto; }
        .newsletter__form     { flex: 0 1 500px; }
        .newsletter__privacy  { text-align: right; }
    }

    /* Newsletter inline field error — pre-existing in HTML, below input row */
    .newsletter__field-error {
        font-size: 0.7rem;
        color: #ef4444;
        display: block;
        min-height: 1rem;
        margin-top: var(--space-xs);
    }

    /* Newsletter status message */
    .newsletter__message {
        margin-top: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
        font-size: var(--fs-sm);
        display: none;
    }
    .newsletter__message.success {
        display: block;
        background-color: var(--clr-success-bg);
        color: var(--clr-success);
        border: 1px solid var(--clr-success-border);
    }
    .newsletter__message.error {
        display: block;
        background-color: var(--clr-error-bg);
        color: #ef4444;
        border: 1px solid var(--clr-error-border);
    }

} /* end @layer patterns */

/* ============================================================
   LAYER 7 — PAGES  (part A)
   Homepage, about, shared service-page components
   ============================================================ */
@layer pages {

    /* ---- Content Grid (two-column, service pages) ---- */
    .content-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        align-items: center;
    }
    @media (min-width: 768px) {
        .content-grid { grid-template-columns: 1fr 1fr; }
        .content-grid--reverse .content-grid__image,
        .content-grid--reverse .content-grid__media { order: -1; }
    }
    .content-grid__text h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-md); }
    .content-grid__text p  { color: var(--clr-gray-600); margin-bottom: var(--space-md); line-height: var(--lh-normal); }
    .content-grid__image img { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); width: 100%; }
    .content-grid__media { display: flex; flex-direction: column; align-items: center; }

    /* ---- Highlight Box ---- */
    .highlight-box {
        background-color: var(--clr-gray-100);
        border-left: 4px solid var(--clr-red);
        padding: var(--space-lg) var(--space-xl);
        margin-top: var(--space-lg);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }
    .highlight-box h3,
    .highlight-box h4 {
        font-size: var(--fs-lg);
        margin-bottom: var(--space-sm);
        display: flex; align-items: center; gap: var(--space-sm);
    }
    .highlight-box h3 i,
    .highlight-box h4 i { color: var(--clr-red); }
    .highlight-box p { font-size: var(--fs-base); margin-bottom: 0; color: var(--clr-gray-600); line-height: var(--lh-relaxed); }

    .highlight-box--centered {
        margin-top: var(--space-xl);
        max-width: 800px;
        margin-inline: auto;
        text-align: center;
        border-left: none;
        border-top: 4px solid var(--clr-red);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        padding: var(--space-xl);
    }
    .highlight-box--centered h3,
    .highlight-box--centered h4 { justify-content: center; }

    /* ---- Process Steps ---- */
    .process-steps { max-width: 800px; margin: 0 auto; }
    .process-step {
        display: flex; gap: var(--space-lg);
        padding: var(--space-lg) 0;
        border-bottom: 1px solid var(--clr-gray-200);
    }
    .process-step:last-child { border-bottom: none; }
    .process-step__number {
        flex-shrink: 0;
        width: 50px; height: 50px;
        display: flex; align-items: center; justify-content: center;
        background-color: var(--clr-red);
        color: var(--clr-white);
        font-family: var(--ff-heading);
        font-size: var(--fs-xl);
        font-weight: var(--fw-bold);
        border-radius: 50%;
    }
    .process-step__content h3 { font-size: var(--fs-lg); margin-bottom: var(--space-xs); }
    .process-step__content p  { font-size: var(--fs-base); color: var(--clr-gray-500); line-height: var(--lh-normal); margin-bottom: 0; }

    /* ---- Specs Grid ---- */
    .specs-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); }
    @media (min-width: 768px) { .specs-grid { grid-template-columns: repeat(4,1fr); } }

    .spec-card {
        background-color: var(--clr-gray-100);
        padding: var(--space-lg);
        border-radius: var(--radius-md);
        text-align: center;
        border: 1px solid var(--clr-gray-200);
        box-shadow: var(--shadow-sm);
        transition: var(--trans-card);
    }
    .spec-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .spec-card__icon {
        width: 50px; height: 50px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto var(--space-md);
        background-color: var(--clr-white);
        border: 2px solid var(--clr-red);
        border-radius: 50%;
        color: var(--clr-red);
        font-size: var(--fs-lg);
    }
    .spec-card__icon-inner i {
        display: block;
        line-height: 1;
    }
    .spec-card__title  { font-size: var(--fs-sm); margin-bottom: var(--space-xs); }
    .spec-card__text   { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--clr-black); margin-bottom: var(--space-xs); }
    .spec-card__detail { font-size: var(--fs-xs); color: var(--clr-gray-500); line-height: var(--lh-snug); }

    /* ---- Capabilities List ---- */
    .capabilities-list { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
    @media (min-width: 768px) { .capabilities-list { grid-template-columns: repeat(2,1fr); } }

    .capability-item {
        display: flex; gap: var(--space-md);
        padding: var(--space-md);
        background-color: var(--clr-white);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }
    .capability-item > .capability-item__icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--clr-red);
        color: var(--clr-white);
        border-radius: 50%;
        font-size: 0.7rem;
    }
    /* The <i> inside the span inherits size from parent flex container */
    .capability-item__icon i {
        display: block;
        line-height: 1;
    }
    .capability-item h3 { font-size: var(--fs-base); margin-bottom: var(--space-xs); }
    .capability-item p  { font-size: var(--fs-sm); color: var(--clr-gray-500); line-height: var(--lh-normal); margin-bottom: 0; }

    /* ---- Industries Grid ---- */
    .industries-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); }
    @media (min-width: 768px) { .industries-grid { grid-template-columns: repeat(3,1fr); } }

    .industry-card {
        padding: var(--space-lg);
        background-color: var(--clr-gray-100);
        border-radius: var(--radius-md);
        text-align: center;
        box-shadow: var(--shadow-sm);
        transition: var(--trans-card);
    }
    .industry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .industry-card__icon {
        width: 60px; height: 60px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto var(--space-md);
        background-color: var(--clr-white);
        border: 2px solid var(--clr-red);
        border-radius: 50%;
        color: var(--clr-red);
        font-size: var(--fs-lg);
    }
    .industry-card__icon-inner i {
        display: block;
        line-height: 1;
    }
    .industry-card h3 { font-size: var(--fs-base); margin-bottom: var(--space-sm); }
    .industry-card p  { font-size: var(--fs-sm); color: var(--clr-gray-500); line-height: var(--lh-normal); margin-bottom: 0; }

    /* ---- Materials Grid ---- */
    .materials-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 640px) { .materials-grid { grid-template-columns: repeat(2,1fr); } }
    @media (min-width: 900px) { .materials-grid { grid-template-columns: repeat(3,1fr); } }

    .material-card {
        padding: var(--space-lg);
        background-color: var(--clr-white);
        border: 1px solid var(--clr-gray-200);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        transition: var(--trans-card);
    }
    .material-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
    .material-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-sm); }
    .material-card p  { font-size: var(--fs-base); color: var(--clr-gray-500); line-height: var(--lh-normal); margin-bottom: 0; }

    /* ---- Feature List (service pages) ---- */
    .feature-list { margin: var(--space-md) 0; }
    .feature-list li {
        display: flex; align-items: flex-start; gap: var(--space-sm);
        padding: var(--space-xs) 0;
        font-size: var(--fs-base);
        color: var(--clr-gray-600);
        line-height: var(--lh-snug);
    }
    .feature-list li i { color: var(--clr-red); margin-top: 4px; }

    /* ---- Case Study Box ---- */
    .case-study {
        background-color: var(--clr-gray-100);
        border-radius: var(--radius-md);
        padding: var(--space-lg);
        margin: var(--space-lg) 0;
    }
    .case-study h3 { font-size: var(--fs-base); margin-bottom: var(--space-sm); color: var(--clr-red); }
    .case-study p  { font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
    .case-study p:last-child { margin-bottom: 0; }

    /* ---- Comparison Simple (turning page dl/dt/dd) ---- */
    .comparison-simple { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
    @media (min-width: 640px) { .comparison-simple { grid-template-columns: repeat(2,1fr); } }

    .comparison-simple__item { padding: var(--space-md); background-color: var(--clr-gray-100); border-radius: var(--radius-md); }

    .comparison-simple dt {
        font-family: var(--ff-heading);
        font-size: var(--fs-base);
        font-weight: var(--fw-bold);
        color: var(--clr-black);
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-bottom: var(--space-sm);
        display: flex; align-items: center; gap: var(--space-sm);
    }
    .comparison-simple dt i { color: var(--clr-red); }
    .comparison-simple dd   { font-size: var(--fs-sm); color: var(--clr-gray-600); line-height: var(--lh-relaxed); margin: 0; }

    /* ---- Parts Grid (turning page) ---- */
    .parts-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 480px) { .parts-grid { grid-template-columns: repeat(2,1fr); } }
    @media (min-width: 900px) { .parts-grid { grid-template-columns: repeat(4,1fr); } }

    .part-card {
        padding: var(--space-lg);
        background-color: var(--clr-gray-100);
        border-radius: var(--radius-md);
        text-align: center;
        border: 1px solid var(--clr-gray-200);
        box-shadow: var(--shadow-sm);
        transition: var(--trans-card);
    }
    .part-card:hover     { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .part-card__icon     { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-sm); color: var(--clr-red); font-size: var(--fs-lg); }
    .part-card h3        { font-size: var(--fs-base); margin-bottom: var(--space-xs); }
    .part-card p         { font-size: var(--fs-sm); color: var(--clr-gray-500); margin-bottom: 0; line-height: var(--lh-snug); }

    /* ---- About: Values Grid ---- */
    .values-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2,1fr); } }

    .value-card {
        padding: var(--space-xl);
        background-color: var(--clr-white);
        border-radius: var(--radius-md);
        text-align: center;
        border: 1px solid var(--clr-gray-200);
        box-shadow: var(--shadow-sm);
        transition: var(--trans-card);
    }
    .value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
    .value-card__icon {
        width: 70px; height: 70px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto var(--space-md);
        background-color: var(--clr-red);
        color: var(--clr-white);
        border-radius: 50%;
        font-size: var(--fs-xl);
    }
    .value-card__icon-inner i {
        display: block;
        line-height: 1;
    }
    .value-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-sm); }
    .value-card p  { font-size: var(--fs-base); color: var(--clr-gray-500); line-height: var(--lh-relaxed); margin-bottom: 0; }

    /* ---- About: Services Overview (4 cards) ---- */
    .services-overview { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 640px)  { .services-overview { grid-template-columns: repeat(2,1fr); } }
    @media (min-width: 1024px) { .services-overview { grid-template-columns: repeat(4,1fr); } }

    /* li wrapper inside ul.services-overview — display:contents passes grid to card */
    .services-overview > li { display: contents; }

    .service-overview-card {
        display: block;
        padding: var(--space-lg);
        background-color: var(--clr-gray-100);
        border-radius: var(--radius-md);
        text-align: center;
        border: 2px solid transparent;
        box-shadow: var(--shadow-sm);
        transition: border-color var(--transition-base),
                    transform var(--transition-base),
                    box-shadow var(--transition-base);
    }
    .service-overview-card:hover { border-color: var(--clr-red); transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .service-overview-card__icon {
        width: 70px; height: 70px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto var(--space-md);
        background-color: var(--clr-white);
        border: 2px solid var(--clr-red);
        border-radius: 50%;
        color: var(--clr-red);
        font-size: var(--fs-xl);
    }
    .service-overview-card__icon-inner i {
        display: block;
        line-height: 1;
    }
    .service-overview-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
    .service-overview-card p  { font-size: var(--fs-base); color: var(--clr-gray-500); line-height: var(--lh-relaxed); margin-bottom: var(--space-md); }
    .service-overview-card__link {
        display: inline-flex; align-items: center; gap: var(--space-xs);
        font-family: var(--ff-heading);
        font-size: var(--fs-sm); font-weight: var(--fw-semibold);
        color: var(--clr-red);
        text-transform: uppercase;
    }
    .service-overview-card:hover .service-overview-card__link { gap: var(--space-sm); }

    /* ---- About: Reasons Grid ---- */
    .reasons-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
    @media (min-width: 768px) { .reasons-grid { grid-template-columns: repeat(2,1fr); } }

    .reason-item { display: flex; gap: var(--space-md); padding: var(--space-lg); background-color: var(--clr-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
    .reason-item__number       { flex-shrink: 0; font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--clr-red); line-height: 1; }
    .reason-item__content h3   { font-size: var(--fs-base); margin-bottom: var(--space-xs); }
    .reason-item__content p    { font-size: var(--fs-sm); color: var(--clr-gray-500); line-height: var(--lh-snug); margin-bottom: 0; }

    /* ---- Homepage: Capabilities Grid ---- */
    /* Note: .capabilities-grid (laser page) is a separate component */
    .capabilities__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    @media (min-width: 640px) { .capabilities__grid { grid-template-columns: repeat(2,1fr); } }

    .capability {
        text-align: center;
        padding: var(--space-xl);
        background-color: var(--clr-white);
        border-radius: var(--radius-md);
        border: 1px solid var(--clr-gray-200);
        box-shadow: var(--shadow-sm);
        transition: var(--trans-card);
    }
    .capability:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

    .capability__icon {
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: auto;
        margin-bottom: var(--space-md);
        background-color: var(--clr-gray-100);
        border: 2px solid var(--clr-red);
        border-radius: 50%;
        color: var(--clr-red);
        font-size: var(--fs-xl);
    }
    .capability__icon-inner i {
        display: block;
        line-height: 1;
    }

    .capability__title { font-size: var(--fs-md); margin-bottom: var(--space-xs); }

    .capability__text {
        font-size: var(--fs-base);
        color: var(--clr-gray-500);
        line-height: var(--lh-normal);
        margin: 0;
    }

    /* ---- Hero stat item (individual stat wrapper) ---- */
    .hero__stat { /* display:contents not needed — grid child is naturally positioned */ }

    /* ---- Section CTA wrapper ---- */
    .section__cta {
        text-align: center;
        margin-top: var(--space-lg);
    }

    /* ---- Newsletter button text span ---- */
    .newsletter__btn-text { /* inline text within button — no special styling needed */ }
    .about__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
    @media (min-width: 768px) { .about__grid { grid-template-columns: 1fr 1fr; } }

    .about__image { position: relative; }
    .about__image img { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
    .about__image::before {
        content: '';
        position: absolute;
        top: -10px; left: -10px;
        width: 60px; height: 60px;
        border-left: 3px solid var(--clr-red);
        border-top: 3px solid var(--clr-red);
    }
    .about__content h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-md); }
    .about__content p  { color: var(--clr-gray-600); margin-bottom: var(--space-md); line-height: var(--lh-normal); }
    .about__features   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
    .about__feature    { display: flex; align-items: flex-start; gap: var(--space-sm); }
    .about__feature i  { color: var(--clr-red); font-size: var(--fs-sm); margin-top: 4px; }
    .about__feature span { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--clr-black); line-height: var(--lh-snug); }

    /* ---- Homepage: How It Works ---- */
    .how-it-works__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 640px) { .how-it-works__grid { grid-template-columns: repeat(2,1fr); gap: var(--space-xl); } }

    .how-step { text-align: center; padding: var(--space-xl); background-color: var(--clr-white); border-radius: var(--radius-md); border: 1px solid var(--clr-gray-200); box-shadow: var(--shadow-sm); transition: var(--trans-card); }
    .how-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
    .how-step__number { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-bottom: var(--space-md); background-color: var(--clr-red); color: var(--clr-white); font-family: var(--ff-heading); font-size: var(--fs-xl); font-weight: var(--fw-bold); border-radius: 50%; }
    .how-step__title  { font-size: var(--fs-md); margin-bottom: var(--space-sm); }
    .how-step__text   { font-size: var(--fs-base); color: var(--clr-gray-500); line-height: var(--lh-relaxed); }

    /* ---- Homepage: Services Grid ---- */
    .services__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 640px)  { .services__grid { grid-template-columns: repeat(2,1fr); } }
    @media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3,1fr); } }

    .service-card { background-color: var(--clr-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--clr-gray-200); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
    .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--clr-red); }
    .service-card__image { aspect-ratio: 16/10; overflow: hidden; }
    .service-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
    .service-card:hover .service-card__image img { transform: scale(1.05); }
    .service-card__content { padding: var(--space-lg); }
    .service-card__title   { font-size: var(--fs-lg); color: var(--clr-black); margin-bottom: var(--space-sm); line-height: var(--lh-tight); }
    .service-card__text    { font-size: var(--fs-sm); color: var(--clr-gray-500); line-height: var(--lh-normal); }

    /* ---- Homepage: Gallery Grid ---- */
    .gallery__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); }
    @media (min-width: 640px) { .gallery__grid { grid-template-columns: repeat(3,1fr); gap: var(--space-lg); } }

    .gallery__item {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        border-radius: var(--radius-md);
        cursor: pointer;
    }
    .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
    .gallery__item:hover img,
    .gallery__item:focus  img { transform: scale(1.1); }

    .gallery__item::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(10,9,3,.6) 0%, transparent 50%);
        opacity: 0;
        transition: opacity var(--transition-base);
    }
    .gallery__item:hover::after,
    .gallery__item:focus::after { opacity: 1; }

    .gallery__item > i {
        position: absolute;
        bottom: var(--space-sm); right: var(--space-sm);
        color: var(--clr-white);
        font-size: var(--fs-base);
        opacity: 0; z-index: 1;
        transition: opacity var(--transition-base);
    }
    .gallery__item:hover > i,
    .gallery__item:focus  > i { opacity: 1; }

    .gallery__item-overlay {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        padding: var(--space-sm);
        background: linear-gradient(to top, rgba(10,9,3,.8) 0%, transparent 100%);
        opacity: 0;
        transition: opacity var(--transition-base);
        z-index: 1;
    }
    .gallery__item:hover .gallery__item-overlay,
    .gallery__item:focus  .gallery__item-overlay { opacity: 1; }

    .gallery__item-overlay span {
        font-family: var(--ff-heading);
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        color: var(--clr-white);
        text-transform: uppercase;
    }

    /* ---- Gallery Page: Equipment Grid ---- */
    .equipment-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 640px)  { .equipment-grid { grid-template-columns: repeat(2,1fr); } }
    @media (min-width: 1024px) { .equipment-grid { grid-template-columns: repeat(4,1fr); } }

    .equipment-card {
        padding: var(--space-xl);
        background-color: var(--clr-white);
        border-radius: var(--radius-md);
        text-align: center;
        border: 2px solid transparent;
        box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
        transition: border-color var(--transition-base),
                    transform var(--transition-base),
                    box-shadow var(--transition-base);
    }
    .equipment-card:hover {
        border-color: var(--clr-red);
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }
    .equipment-card__icon {
        width: 70px; height: 70px;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto var(--space-md);
        background-color: var(--clr-white);
        border: 2px solid var(--clr-red);
        border-radius: 50%;
        color: var(--clr-red);
        font-size: var(--fs-xl);
    }
    .equipment-card__icon-inner i {
        display: block;
        line-height: 1;
    }
    /* Heading — already gets lh-tight from base h rule */
    .equipment-card h3 {
        font-size: var(--fs-md);
        margin-bottom: var(--space-xs);
    }
    /* Sublabel — short string, needs snug line-height */
    .equipment-card p {
        font-size: var(--fs-sm);
        color: var(--clr-gray-500);
        margin-bottom: var(--space-xs);
        line-height: var(--lh-snug);
    }
    /* Detail/spec — short label strings, tighten line-height */
    .equipment-card__detail {
        display: block;
        font-size: var(--fs-xs);
        color: var(--clr-red);
        font-weight: var(--fw-semibold);
        line-height: var(--lh-snug);
    }

    /* ---- Laser: Capabilities Grid ---- */
    .capabilities-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
    @media (min-width: 640px) { .capabilities-grid { grid-template-columns: repeat(2,1fr); } }

    .capability-card { background-color: var(--clr-white); padding: var(--space-xl); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: center; transition: var(--trans-card); }
    .capability-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .capability-card__icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background-color: var(--clr-gray-100); color: var(--clr-red); border-radius: 50%; font-size: var(--fs-xl); margin: 0 auto var(--space-md); }
    .capability-card__icon-inner i {
        display: block;
        line-height: 1;
    }
    .capability-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-sm); }
    .capability-card p  { font-size: var(--fs-base); color: var(--clr-gray-600); margin: 0; line-height: var(--lh-relaxed); }

    /* ---- Laser: Materials List ---- */
    .materials-list { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-md); }
    @media (min-width: 640px) { .materials-list { grid-template-columns: repeat(4,1fr); } }

    .material-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md); background-color: var(--clr-white); border-radius: var(--radius-md); border: 1px solid var(--clr-gray-200); box-shadow: var(--shadow-sm); text-align: center; transition: var(--trans-card); }
    .material-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .material-item i     { color: var(--clr-red); font-size: var(--fs-lg); }
    .material-item span  { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

    /* ---- Laser: Add-on Service ---- */
    .add-on-service { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); background-color: var(--clr-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
    @media (min-width: 768px) { .add-on-service { flex-direction: row; text-align: left; gap: var(--space-xl); } }

    .add-on-service__icon { flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background-color: var(--clr-red); color: var(--clr-white); border-radius: 50%; font-size: var(--fs-2xl); }
    .add-on-service__icon-inner i {
        display: block;
        line-height: 1;
    }
    .add-on-service__content h2 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }
    .add-on-service__content p  { color: var(--clr-gray-600); margin-bottom: var(--space-sm); }
    .add-on-service__content p:last-child { margin-bottom: 0; }

    /* ---- Laser: Service Intro ---- */
    .service-intro { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; margin-bottom: var(--space-xl); }
    @media (min-width: 900px) { .service-intro { grid-template-columns: 1.3fr 1fr; gap: var(--space-2xl); } .service-intro__content { order: 1; } .service-intro__media { order: 2; position: sticky; top: 100px; } }

    .service-intro__title { font-size: var(--fs-2xl); margin-bottom: var(--space-md); }
    .service-intro__content p { margin-bottom: var(--space-md); font-size: var(--fs-base); color: var(--clr-gray-600); line-height: var(--lh-relaxed); }
    .service-intro__media img { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); width: 100%; }

    /* ---- Contact Page: Layout ---- */
    .contact-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
    @media (min-width: 1024px) { .contact-layout { grid-template-columns: 1fr 320px; align-items: start; gap: var(--space-xl); } }

    /* ---- Contact Page: Form ---- */
    .contact-form-wrapper { background-color: var(--clr-white); padding: var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--clr-gray-200); box-shadow: var(--shadow-md); }
    .contact-form__header     { margin-bottom: var(--space-md); }
    .contact-form__header h2  { font-size: var(--fs-lg); margin-bottom: 2px; }
    .contact-form__header p   { color: var(--clr-gray-600); font-size: var(--fs-sm); margin: 0; }

    .contact-form { display: flex; flex-direction: column; gap: var(--space-md); }

    .form-section         { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
    .form-section--file   { gap: var(--space-sm); }
    .form-section__title {
        display: flex; align-items: center; gap: var(--space-xs);
        font-family: var(--ff-heading);
        font-size: var(--fs-sm); font-weight: var(--fw-bold);
        color: var(--clr-black);
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-xs);
        border-bottom: 1px solid var(--clr-gray-200);
    }
    .form-section__title i { color: var(--clr-red); font-size: var(--fs-xs); }
    .form-section__optional { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--clr-gray-500); text-transform: none; letter-spacing: 0; margin-left: var(--space-xs); }
    .form-section--submit   { gap: var(--space-md); text-align: center; }

    .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
    @media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

    .form-row--three { grid-template-columns: 1fr; gap: var(--space-md); }
    @media (min-width: 640px) { .form-row--three { grid-template-columns: 1fr 1fr 1fr; } }

    .form-group { display: flex; flex-direction: column; gap: 4px; }
    .form-group label { font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--clr-black); }
    .form-group label .required { color: var(--clr-red); }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.625rem 0.75rem;
        font-family: var(--ff-body);
        font-size: var(--fs-sm);
        color: var(--clr-black);
        background-color: var(--clr-gray-100);
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast), border-color var(--transition-fast);
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { outline: none; background-color: var(--clr-white); border-color: var(--clr-red); }

    /* aria-invalid visual indicator */
    .form-group input[aria-invalid="true"],
    .form-group select[aria-invalid="true"],
    .form-group textarea[aria-invalid="true"] { border-color: var(--clr-error); background-color: var(--clr-error-bg); }

    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--clr-gray-400); }

    .form-group select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        padding-right: 2rem;
    }
    .form-group textarea { resize: vertical; min-height: 80px; }

    .form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

    .form-note { display: flex; align-items: flex-start; gap: var(--space-xs); padding: var(--space-sm); background-color: var(--clr-gray-100); border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--clr-gray-600); margin-top: var(--space-sm); }
    .form-note i   { color: var(--clr-red); margin-top: 1px; font-size: 0.7rem; }
    .form-note a   { color: var(--clr-red); font-weight: var(--fw-semibold); }

    .form-error-text { font-size: 0.7rem; color: var(--clr-error); display: block; }
    .form-char-count { font-size: 0.7rem; color: var(--clr-gray-500); text-align: right; display: block; }

    /* File upload */
    .file-upload { position: relative; }
    .file-upload__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    .file-upload__label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-md); background-color: var(--clr-gray-100); border: 2px dashed var(--clr-gray-300); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); text-align: center; }
    .file-upload__label:hover,
    .file-upload.dragover .file-upload__label { background-color: var(--clr-gray-200); border-color: var(--clr-red); }
    .file-upload__label i { font-size: 1.5rem; color: var(--clr-gray-400); margin-bottom: var(--space-xs); transition: color var(--transition-fast); }
    .file-upload__label:hover i,
    .file-upload.dragover .file-upload__label i { color: var(--clr-red); }
    .file-upload__text    { font-size: var(--fs-sm); color: var(--clr-gray-700); margin-bottom: 2px; }
    .file-upload__text strong { color: var(--clr-red); }
    .file-upload__hint    { font-size: var(--fs-xs); color: var(--clr-gray-500); }
    .file-upload__formats { font-size: 0.7rem; color: var(--clr-gray-400); margin-top: 2px; }

    .file-upload__list { margin-top: var(--space-sm); }
    .file-upload__item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); background-color: var(--clr-gray-100); border-radius: var(--radius-sm); margin-bottom: var(--space-xs); }
    .file-upload__item-info { display: flex; align-items: center; gap: var(--space-sm); overflow: hidden; }
    .file-upload__item-info i  { color: var(--clr-red); flex-shrink: 0; }
    .file-upload__item-name    { font-size: var(--fs-sm); color: var(--clr-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-upload__item-size    { font-size: var(--fs-xs); color: var(--clr-gray-500); flex-shrink: 0; margin-left: var(--space-sm); }
    .file-upload__item-remove  { background: none; border: none; color: var(--clr-gray-400); cursor: pointer; padding: var(--space-xs); min-width: 24px; min-height: 24px; display: flex; align-items: center; justify-content: center; transition: color var(--transition-fast); }
    .file-upload__item-remove:hover { color: var(--clr-red); }

    /* Consent checkbox */
    .form-consent { margin-top: var(--space-md); text-align: left; }
    .checkbox-label { display: flex; align-items: flex-start; gap: var(--space-xs); cursor: pointer; }
    .checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
    .checkbox-custom { flex-shrink: 0; width: 16px; height: 16px; border: 1px solid var(--clr-gray-400); border-radius: 3px; transition: background-color var(--transition-fast), border-color var(--transition-fast); position: relative; margin-top: 2px; }
    .checkbox-label input:checked + .checkbox-custom { background-color: var(--clr-red); border-color: var(--clr-red); }
    .checkbox-label input:checked + .checkbox-custom::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
    .checkbox-label input:focus-visible + .checkbox-custom { outline: 2px solid var(--clr-red); outline-offset: 2px; }
    .checkbox-text { font-size: var(--fs-xs); color: var(--clr-gray-600); line-height: var(--lh-normal); }
    .checkbox-text a { color: var(--clr-red); text-decoration: underline; }

    /* Form status messages */
    .form-message { margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); font-size: var(--fs-sm); display: none; }
    .form-message.success { display: block; background-color: var(--clr-success-bg); color: #166534; border: 1px solid var(--clr-success-border); }
    .form-message.error   { display: block; background-color: var(--clr-error-bg);   color: #991b1b; border: 1px solid var(--clr-error-border);   }

    /* Demo success panel — replaces form on successful submit */
    .form-success { padding: var(--space-xl); background-color: var(--clr-white); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-md); text-align: center; }
    .form-success__icon    { font-size: var(--fs-hero); color: var(--clr-success); margin-bottom: var(--space-md); line-height: 1; }
    .form-success__heading { font-size: var(--fs-xl); color: var(--clr-black); margin-bottom: var(--space-md); }
    .form-success__text    { font-size: var(--fs-md); color: var(--clr-gray-600); margin-bottom: var(--space-sm); line-height: var(--lh-relaxed); }
    .form-success__subtext { font-size: var(--fs-sm); color: var(--clr-gray-500); margin-bottom: 0; }
    .form-success__subtext a { color: var(--clr-red); text-decoration: underline; transition: color var(--transition-fast); }
    .form-success__subtext a:hover { color: var(--clr-red-dark); }

    /* Contact sidebar */
    .contact-sidebar { display: flex; flex-direction: column; gap: var(--space-md); }

    .contact-card { background-color: var(--clr-white); padding: var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--clr-gray-200); box-shadow: var(--shadow-sm); transition: var(--trans-card); }
    .contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

    /* h2 used as card title inside sidebar cards */
    .contact-card h2,
    .contact-card h3,
    .contact-card__title { font-size: var(--fs-sm); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-xs); }
    .contact-card h2 i,
    .contact-card h3 i,
    .contact-card__title i { color: var(--clr-red); font-size: var(--fs-xs); }
    .contact-card p    { font-size: var(--fs-xs); color: var(--clr-gray-600); margin-bottom: var(--space-xs); }

    .contact-card--dark    { background-color: var(--clr-black); color: var(--clr-white); }
    .contact-card--dark h2,
    .contact-card--dark h3 { color: var(--clr-white); }
    .contact-card--dark p  { color: var(--clr-gray-400); }
    .contact-card--light   { background-color: var(--clr-gray-100); }

    .contact-card__items { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-sm); }
    .contact-card__item  { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); background-color: var(--clr-gray-100); border-radius: var(--radius-sm); transition: background-color var(--transition-fast); }
    .contact-card__item:hover { background-color: var(--clr-gray-200); }
    .contact-card__item-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--clr-red);
        color: var(--clr-white);
        border-radius: 50%;
        font-size: var(--fs-xs);
        flex-shrink: 0;
    }
    .contact-card__item-icon i { display: block; line-height: 1; }
    .contact-card__item div    { display: flex; flex-direction: column; }
    .contact-card__item strong { font-size: 0.65rem; color: var(--clr-gray-500); text-transform: uppercase; letter-spacing: 0.05em; }
    .contact-card__item span   { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--clr-black); }

    .contact-card__hours { padding-top: var(--space-sm); border-top: 1px solid var(--clr-gray-200); }
    .contact-card__hours strong { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-xs); margin-bottom: 2px; }
    .contact-card__hours strong i { color: var(--clr-red); font-size: 0.7rem; }
    .contact-card__hours p { margin-bottom: 0; font-size: var(--fs-xs); }

    .contact-card__list { margin: 0 0 var(--space-sm) 0; }
    .contact-card__list li { display: flex; align-items: center; gap: var(--space-xs); padding: 2px 0; font-size: var(--fs-xs); color: var(--clr-gray-600); }
    .contact-card__list li i { color: var(--clr-red); font-size: 0.6rem; }

    /* File type badge pills */
    .file-types { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
    .file-type  { font-family: var(--ff-heading); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--clr-red); background-color: var(--clr-white); border: 1px solid var(--clr-red); border-radius: var(--radius-sm); padding: 2px 6px; text-transform: uppercase; }

    /* ---- Contact Page: FAQ ---- */
    .faq-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
    @media (min-width: 768px) { .faq-grid { grid-template-columns: repeat(2,1fr); } }

    .faq-item { padding: var(--space-lg); background-color: var(--clr-white); border-radius: var(--radius-md); border: 1px solid var(--clr-gray-200); box-shadow: var(--shadow-sm); transition: var(--trans-card); }
    .faq-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
    .faq-item dt { font-family: var(--ff-heading); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--clr-black); text-transform: uppercase; letter-spacing: 0.02em; line-height: var(--lh-tight); margin-bottom: var(--space-sm); }
    .faq-item dd { font-size: var(--fs-sm); color: var(--clr-gray-500); line-height: var(--lh-normal); margin: 0; }

    /* ---- Legal Pages ---- */
    .legal-content { padding: var(--space-2xl) 0; background-color: var(--clr-white); }
    .legal-content__section { margin-bottom: var(--space-xl); }
    .legal-content__section:last-child { margin-bottom: 0; }

    .legal-content__section h2 { font-size: var(--fs-xl); color: var(--clr-black); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 2px solid var(--clr-red); }
    .legal-content__section h3 { font-size: var(--fs-lg); color: var(--clr-black); margin-top: var(--space-md); margin-bottom: var(--space-xs); }
    .legal-content__section p  { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--clr-gray-700); margin-bottom: var(--space-sm); }
    .legal-content__section li { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--clr-gray-700); margin-bottom: var(--space-xs); }
    .legal-content__section a  { color: var(--clr-red); transition: color var(--transition-fast); }
    .legal-content__section a:hover { color: var(--clr-red-dark); }

    /* Legal contact address block */
    .legal-contact { font-style: normal; display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); font-size: var(--fs-base); color: var(--clr-gray-700); }
    .legal-contact a       { color: var(--clr-red); transition: color var(--transition-fast); }
    .legal-contact a:hover { color: var(--clr-red-dark); }

} /* end @layer pages */

/* ============================================================
   LAYER 8 — UTILITIES
   ============================================================ */
@layer utilities {

    /* Fade-in — guarded at declaration level */
    @media (prefers-reduced-motion: no-preference) {
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .fade-in { opacity: 1; transform: none; }
    }
}

/* ============================================================
   LAYER 9 — OVERRIDES
   scroll-behavior, reduced-motion, contrast, forced-colors
   ============================================================ */
@layer overrides {

    /* Smooth scroll — only when motion is safe */
    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }

    /* High contrast — tighten token values */
    @media (prefers-contrast: more) {
        :root {
            --clr-red:      #bb0000;
            --clr-gray-500: #525252;
            --clr-gray-400: #404040;
        }
        :focus-visible { outline-width: 4px; outline-offset: 4px; }
        .btn           { border-width: 3px; }
    }

    /* Windows High Contrast Mode */
    @media (forced-colors: active) {
        .btn {
            border: 2px solid ButtonText;
            forced-color-adjust: none;
        }
        :focus-visible {
            outline: 3px solid Highlight;
            outline-offset: 3px;
        }
        .scroll-top__gear { forced-color-adjust: auto; }
        .nav-overlay      { forced-color-adjust: auto; }
    }
}

/* ============================================================
   UNLAYERED — Nav toggle icon show/hide
   Must be outside @layer so it beats Font Awesome's
   unlayered display:inline-block on .fa-solid elements.
   Rules inside @layer always lose to unlayered stylesheets.
   ============================================================ */
.nav-toggle__icon--close { display: none; }
.nav-toggle__icon--open  { display: inline-block; }

.nav-toggle.active .nav-toggle__icon--open  { display: none; }
.nav-toggle.active .nav-toggle__icon--close { display: inline-block; }