/* =============================================================
   HMF Express — Main Stylesheet

   Sections:
   1.  Custom Properties
   2.  Reset & Base
   3.  Layout
   4.  Typography
   5.  Buttons
   6.  Focus
   7.  Header & Navigation
   8.  Hero (homepage)
   9.  Trust Bar
   10. Section Header (shared)
   11. Products Section
   12. Express Section
   13. Why HMF Section
   14. Testimonial Section
   15. Contact Section
   16. Footer
   17. --- Inner Pages ---
   18. Breadcrumb
   19. Page Hero
   20. Stats Bar
   21. Feature Rows
   22. Lead Time Box
   23. Feature List
   24. Expert Resources
   25. Process Steps
   26. CTA Band
   27. Responsive

   NOTE: Brand colors below are PLACEHOLDER values.
   Update --color-brand and related variables once colors
   are confirmed from HMF-WebDesign-R1.pdf.
   ============================================================= */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* Brand — TODO: confirm from design PDF */
    --color-brand:        #C8372D;
    --color-brand-dark:   #A32922;
    --color-brand-light:  #F9EDEC;

    /* Neutrals */
    --color-text:         #1A1A1A;
    --color-text-muted:   #5A5A5A;
    --color-bg:           #FFFFFF;
    --color-bg-subtle:    #F5F5F3;
    --color-bg-dark:      #1A1A1A;
    --color-border:       #E2E2DE;

    /* Typography */
    --font:               'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing scale */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* Layout */
    --container-max:     1280px;
    --container-pad:     1.5rem;
    --header-height:     72px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

    /* Transitions */
    --ease: 200ms ease;
}


/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
address { font-style: normal; }


/* ===== LAYOUT ===== */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}


/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(2rem,   4.5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3vw,  2.75rem); }
h3 { font-size: clamp(1.2rem,  2vw,  1.5rem); }
p  { max-width: 65ch; }


/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.625rem 1.375rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease);
    text-decoration: none;
    border: 1.5px solid transparent;
}
.btn-primary {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
}
.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
    border-color: var(--color-text);
}
.btn-full { width: 100%; justify-content: center; }


/* ===== FOCUS ===== */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}


/* ===================================================
   HEADER
   =================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--ease);
}
.site-header.is-scrolled {
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    height: var(--header-height);
    gap: var(--sp-8);
}

/* Logo */
.logo { flex-shrink: 0; }
.logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.logo-text--light { color: #fff; }
.logo-img {
    height: 36px;
    width: auto;
    display: block;
}
.logo-img--footer {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Nav */
.site-nav { flex: 1; }

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.nav-item { position: relative; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: color var(--ease), background-color var(--ease);
    text-decoration: none;
}
.nav-link:hover,
.nav-item.is-open > .nav-link {
    color: var(--color-brand);
    background: var(--color-brand-light);
}

.nav-chevron {
    transition: transform var(--ease);
    flex-shrink: 0;
}
.nav-item.is-open > .nav-toggle .nav-chevron {
    transform: rotate(180deg);
}

/* Mega Menu */
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-40%);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-brand);
    box-shadow: var(--shadow-lg);
    min-width: 620px;
    padding: var(--sp-6) 0;
}
.nav-item.is-open > .mega-menu { display: block; }

.mega-menu-inner {
    display: flex;
    gap: var(--sp-8);
    padding-inline: 0;
}
.mega-menu .container { padding-inline: var(--sp-6); }

.mega-col { flex: 1; }
.mega-col--narrow { flex: 0 0 160px; }

.mega-heading {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.mega-links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.mega-links a {
    font-size: 0.875rem;
    color: var(--color-text);
    padding: var(--sp-1) 0;
    transition: color var(--ease);
}
.mega-links a:hover { color: var(--color-brand); }
.mega-links .sub-link a {
    color: var(--color-text-muted);
    padding-left: var(--sp-3);
    font-size: 0.8125rem;
}
.mega-links .sub-link a:hover { color: var(--color-brand); }

/* Dropdown */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-brand);
    box-shadow: var(--shadow-md);
    min-width: 210px;
    padding: var(--sp-2);
}
.dropdown--right { left: auto; right: 0; }
.nav-item.is-open > .dropdown { display: block; }

.dropdown-links { display: flex; flex-direction: column; }
.dropdown-links a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--ease), background-color var(--ease);
}
.dropdown-links a:hover {
    color: var(--color-brand);
    background: var(--color-brand-light);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}


.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.mobile-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform var(--ease), opacity var(--ease);
}
.mobile-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* ===================================================
   HERO
   =================================================== */
.hero {
    background:
        linear-gradient(to right, rgba(15,18,22,0.84) 0%, rgba(15,18,22,0.60) 55%, rgba(15,18,22,0.35) 100%),
        url('/images/hero-truck.jpg') center/cover no-repeat;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}

.hero-heading {
    margin-bottom: var(--sp-4);
    max-width: 14ch;
    color: #ffffff;
}

.hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: var(--sp-8);
    max-width: 45ch;
}



/* ===================================================
   TRUST BAR
   =================================================== */
.trust-bar {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-4) 0;
}
.trust-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.trust-bar-inner svg { color: var(--color-brand); flex-shrink: 0; }
.trust-bar-inner strong { color: var(--color-text); }


/* ===================================================
   SECTION HEADER (shared)
   =================================================== */
.section-header {
    text-align: center;
    margin-bottom: var(--sp-12);
}
.section-header h2 { margin-bottom: var(--sp-4); }
.section-intro {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 60ch;
    margin-inline: auto;
}


/* ===================================================
   PRODUCTS SECTION
   =================================================== */
.products-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.product-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}

.product-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    transition: box-shadow var(--ease), transform var(--ease);
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.product-card-img {
    aspect-ratio: 16/9;
    background: var(--color-bg-subtle);
    /* swap for <img> when photography is ready */
}

.product-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    flex: 1;
}
.product-card-body h3 { margin-bottom: 0; }
.product-card-body p  {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    flex: 1;
    max-width: none;
}
.product-card-body .btn { align-self: flex-start; margin-top: var(--sp-2); }

.product-card--accent {
    background: var(--color-brand-light);
    border-color: transparent;
}
.product-card--accent .product-card-img {
    background: rgba(200, 55, 45, 0.08);
}


/* ===================================================
   EXPRESS SECTION
   =================================================== */
.express-section {
    background: var(--color-bg-subtle);
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.express-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    align-items: center;
}

.express-content h2 { margin-bottom: var(--sp-4); }

.express-content h2 em {
    font-style: italic;
    color: var(--color-brand);
}

.express-sub {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-5);
    max-width: none;
}

.express-content p {
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
    max-width: 54ch;
}

.express-ctas {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-6);
}

.express-img {
    aspect-ratio: 4/3;
    background: var(--color-bg) url('/images/factory-frames-floor.jpg') center/cover no-repeat;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}


/* ===================================================
   WHY HMF SECTION
   =================================================== */
.why-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-10);
    margin-bottom: var(--sp-12);
}

.why-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-4);
}

.why-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-light);
    color: var(--color-brand);
    flex-shrink: 0;
}

.why-item h3 { font-size: 1.2rem; }
.why-item p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    max-width: 28ch;
    margin-inline: auto;
}

.why-cta { text-align: center; }


/* ===================================================
   TESTIMONIAL
   =================================================== */
.testimonial-section {
    background: var(--color-bg-dark);
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.testimonial {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}
.testimonial blockquote p {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
    max-width: none;
}
.testimonial figcaption {
    margin-top: var(--sp-6);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.45);
}


/* ===================================================
   CONTACT SECTION
   =================================================== */
.contact-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--sp-16);
    align-items: start;
}

.contact-info h2 { margin-bottom: var(--sp-4); }
.contact-info > p {
    color: var(--color-text-muted);
    margin-bottom: var(--sp-8);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.contact-detail dt {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-1);
}
.contact-detail dd {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.6;
}
.contact-detail a {
    color: var(--color-brand);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--ease);
}
.contact-detail a:hover { text-decoration-color: var(--color-brand); }

/* Contact Form */
.contact-form-wrap {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
}
.form-group label span { color: var(--color-brand); }

.form-group input,
.form-group textarea {
    padding: var(--sp-3) var(--sp-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-bg);
    outline: none;
    transition: border-color var(--ease);
    width: 100%;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--color-brand); }
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}


/* ===================================================
   FOOTER
   =================================================== */
.site-footer {
    background: var(--color-bg-dark);
    color: rgba(255,255,255,0.7);
    padding: var(--sp-12) 0 var(--sp-8);
}

.footer-inner { display: flex; flex-direction: column; gap: var(--sp-8); }

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    flex-wrap: wrap;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6);
}
.footer-nav a {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    transition: color var(--ease);
}
.footer-nav a:hover { color: #ffffff; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: var(--sp-6);
}

.footer-copy {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.35);
    max-width: none;
}

.footer-legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}
.footer-legal a {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.35);
    transition: color var(--ease);
}
.footer-legal a:hover { color: rgba(255,255,255,0.6); }


/* ===================================================
   RESPONSIVE
   =================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .product-cards  { grid-template-columns: 1fr; max-width: 500px; margin-inline: auto; }
    .express-grid   { grid-template-columns: 1fr; gap: var(--sp-8); }
    .express-img    { order: -1; aspect-ratio: 16/7; }
    .why-grid       { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; margin-bottom: var(--sp-8); }
    .contact-grid   { grid-template-columns: 1fr; gap: var(--sp-10); }
}

/* Mobile */
@media (max-width: 768px) {
    :root { --container-pad: 1rem; }

    /* Mobile nav */
    .site-nav {
        display: none;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        background: var(--color-bg);
        overflow-y: auto;
        padding: var(--sp-4);
        border-top: 1px solid var(--color-border);
        z-index: 190;
    }
    .site-nav.is-open { display: block; }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-1);
    }
    .nav-link {
        width: 100%;
        justify-content: space-between;
        padding: var(--sp-3) var(--sp-4);
        font-size: 1rem;
    }
    .mega-menu,
    .dropdown {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        min-width: unset;
        padding: var(--sp-3) var(--sp-4);
        background: var(--color-bg-subtle);
        margin-top: var(--sp-1);
    }
    .mega-menu-inner { flex-direction: column; gap: var(--sp-5); }
    .mega-menu .container { padding-inline: 0; }

    .mobile-nav-toggle { display: flex; }

    .footer-top { flex-direction: column; align-items: flex-start; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .form-row { grid-template-columns: 1fr; }
}

/* Small mobile */
@media (max-width: 480px) {
.express-ctas { flex-direction: column; }
    .express-ctas .btn { justify-content: center; }

    .testimonial blockquote p { font-size: 1.15rem; }
}


/* ===================================================
   INNER PAGES — SHARED
   =================================================== */

/* Active nav state */
.nav-link--active {
    color: var(--color-brand) !important;
}

/* ===== BREADCRUMB ===== */
.breadcrumb { margin-bottom: var(--sp-5); }

.breadcrumb ol {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.breadcrumb li + li::before {
    content: '/';
    margin-right: var(--sp-2);
    opacity: 0.4;
}

.breadcrumb a {
    color: var(--color-text-muted);
    transition: color var(--ease);
}
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 500; }


/* ===== PAGE HERO ===== */
.page-hero {
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.page-hero h1 { margin-bottom: var(--sp-3); }

.page-hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--color-text-muted);
    max-width: 55ch;
}


/* ===== STATS BAR ===== */
.stats-bar {
    background: var(--color-bg-dark);
    padding: clamp(1.5rem, 3vw, 2rem) 0;
}

.stats-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    flex-wrap: wrap;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-1);
}

.stat-value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    max-width: 14ch;
    text-align: center;
    line-height: 1.4;
}

.stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}


/* ===== FEATURE ROWS ===== */
.feature-row {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.feature-row--tinted { background: var(--color-bg-subtle); }

.feature-row-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    align-items: center;
}

.feature-row--reverse .feature-row-inner {
    direction: rtl;
}
.feature-row--reverse .feature-row-inner > * {
    direction: ltr;
}

.feature-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand);
    background: var(--color-brand-light);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 100px;
    margin-bottom: var(--sp-4);
}

.feature-content h2 {
    margin-bottom: var(--sp-5);
}

.feature-content p {
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
    max-width: 52ch;
}

.feature-img {
    aspect-ratio: 4/3;
    background: var(--color-border) url('/images/worker-with-frame-1.jpg') center/cover no-repeat;
    border-radius: var(--radius-lg);
    overflow: hidden;
}


/* ===== LEAD TIME BOX ===== */
.lead-time-box {
    display: flex;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    flex-wrap: wrap;
}

.lead-time-option {
    flex: 1;
    min-width: 150px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.lead-time-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.lead-time-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-brand);
}


/* ===== FEATURE LIST ===== */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 0.9375rem;
    color: var(--color-text);
}

.feature-list svg {
    flex-shrink: 0;
    color: var(--color-brand);
}


/* ===== EXPERT RESOURCES ===== */
.expert-resources {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--color-border);
}

.expert-resources-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-3);
    max-width: none;
}

.expert-resource-links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.resource-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-brand);
    transition: gap var(--ease);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--ease);
}
.resource-link:hover {
    text-decoration-color: var(--color-brand);
}


/* ===== PROCESS STEPS ===== */
.difference-section {
    background: var(--color-bg-subtle);
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.process-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: var(--sp-4);
}

.process-step {
    flex: 1;
    padding: var(--sp-8) var(--sp-8) var(--sp-8) 0;
}

.process-step-number {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-brand);
    opacity: 0.2;
    margin-bottom: var(--sp-4);
    letter-spacing: -0.04em;
}

.process-step h3 { margin-bottom: var(--sp-3); }

.process-step p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    max-width: 30ch;
}

.process-connector {
    width: 1px;
    height: 80px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: center;
    margin-top: -24px; /* offset to align with number */
}


/* ===== CTA BAND ===== */
.cta-band {
    background: var(--color-brand);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    flex-wrap: wrap;
}

.cta-band-content h2 {
    color: #ffffff;
    margin-bottom: var(--sp-2);
}

.cta-band-content p {
    color: rgba(255,255,255,0.75);
    max-width: 48ch;
}

.cta-band-actions {
    display: flex;
    gap: var(--sp-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.btn-outline-light {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-outline-light:hover, .btn-outline-light:focus-visible {
    border-color: #ffffff;
    background: rgba(255,255,255,0.1);
}

/* CTA band primary button needs contrast on red background */
.cta-band .btn-primary {
    background: #ffffff;
    color: var(--color-brand);
    border-color: #ffffff;
}
.cta-band .btn-primary:hover, .cta-band .btn-primary:focus-visible {
    background: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.9);
}


/* ===================================================
   PRODUCTS — OVERVIEW PAGE
   =================================================== */

.catalog-overview {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.category-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}

.category-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    transition: box-shadow var(--ease), transform var(--ease);
}
.category-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.category-card--accent { background: var(--color-brand-light); border-color: transparent; }
.category-card--accent .category-card-img { background: rgba(200,55,45,0.08); }

.category-card-img {
    aspect-ratio: 16/9;
    background: var(--color-bg-subtle);
}

.category-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6);
    flex: 1;
}
.category-card-body h2 { font-size: 1.5rem; }
.category-card-body > p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    flex: 1;
    max-width: none;
}

.subcategory-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}
.subcategory-list a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    transition: color var(--ease);
}
.subcategory-list a::before {
    content: '→';
    font-size: 0.75rem;
    opacity: 0.45;
    flex-shrink: 0;
}
.subcategory-list a:hover { color: var(--color-brand); }

.quick-ship-callout {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand);
    background: rgba(200,55,45,0.08);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
}


/* ===================================================
   PRODUCT LISTING PAGE (PLP)
   =================================================== */

.catalog-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: var(--sp-10);
    padding: var(--sp-10) 0 var(--sp-20);
    align-items: start;
}

.catalog-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--sp-6));
}

.catalog-sidebar-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-2);
}

.catalog-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-6);
}
.catalog-nav a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}
.catalog-nav a:hover,
.catalog-nav a.is-active {
    color: var(--color-brand);
    background: var(--color-brand-light);
    border-left-color: var(--color-brand);
}
.catalog-nav a.is-active { font-weight: 600; }

.sidebar-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--sp-4) 0 var(--sp-5);
}

.subcategory-section {
    margin-bottom: var(--sp-12);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid var(--color-border);
}
.subcategory-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.subcategory-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.subcategory-section-header h2 { font-size: 1.5rem; }
.subcategory-section-header a {
    font-size: 0.875rem;
    color: var(--color-brand);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--ease);
}
.subcategory-section-header a:hover { text-decoration-color: var(--color-brand); }

.subcategory-desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-6);
    max-width: 72ch;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

.product-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.product-tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-brand);
}

.product-tile-img {
    aspect-ratio: 1/1;
    background: var(--color-bg-subtle) url('/images/factory-frames-stacked.jpg') center/cover no-repeat;
}

.product-tile-body { padding: var(--sp-4); }
.product-tile-body h3 {
    font-size: 0.9375rem;
    margin-bottom: var(--sp-2);
}
.product-tile-body p {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ===================================================
   PRODUCT DETAIL PAGE (PDP)
   =================================================== */

.pdp-breadcrumb-bar {
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-3) 0;
}
.pdp-breadcrumb-bar .breadcrumb { margin-bottom: 0; }

.pdp-layout {
    display: grid;
    grid-template-columns: 1fr 272px;
    gap: var(--sp-8);
    padding: var(--sp-8) 0 var(--sp-20);
    align-items: start;
}

.pdp-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

.pdp-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
}

.pdp-image {
    aspect-ratio: 4/3;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pdp-intro-content h1 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: var(--sp-4);
}
.pdp-desc {
    color: var(--color-text-muted);
    margin-bottom: var(--sp-5);
}
.pdp-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.pdp-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: 0.9rem;
}
.pdp-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-brand);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5em;
}

.pdp-section { display: flex; flex-direction: column; gap: var(--sp-4); }

.pdp-section-heading {
    font-size: 1.1rem;
    font-weight: 700;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.specs-table tr { border-bottom: 1px solid var(--color-border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table th {
    text-align: left;
    padding: var(--sp-3) var(--sp-5);
    background: var(--color-bg-subtle);
    font-weight: 600;
    color: var(--color-text);
    width: 33%;
    vertical-align: top;
}
.specs-table td {
    padding: var(--sp-3) var(--sp-5);
    color: var(--color-text-muted);
    vertical-align: top;
}

.document-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.document-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.document-link:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-light);
    color: var(--color-brand);
}
.document-link svg { flex-shrink: 0; color: var(--color-text-muted); }
.document-link:hover svg { color: var(--color-brand); }
.document-link-type {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: var(--color-border);
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
}

.pdp-inquiry {
    border-top: 1px solid var(--color-border);
    padding-top: var(--sp-8);
}
.pdp-inquiry h2 { font-size: 1.35rem; margin-bottom: var(--sp-2); }
.pdp-inquiry > p { color: var(--color-text-muted); margin-bottom: var(--sp-6); }

/* PDP Sidebar */
.pdp-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--sp-6));
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.pdp-sidebar-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    background: var(--color-bg);
}
.pdp-sidebar-card-heading {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
}

.pdp-cta-card {
    background: var(--color-bg-dark);
    border-color: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.pdp-cta-card .pdp-sidebar-card-heading { color: rgba(255,255,255,0.45); }
.pdp-cta-card .btn { width: 100%; justify-content: center; }

.lead-time-list { display: flex; flex-direction: column; }
.lead-time-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}
.lead-time-item:last-of-type { border-bottom: none; padding-bottom: 0; }
.lead-time-item-label { color: var(--color-text-muted); }
.lead-time-item-value { font-weight: 700; color: var(--color-brand); white-space: nowrap; }
.lead-time-footnote {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--sp-3);
    line-height: 1.5;
    max-width: none;
}

.quick-links-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.quick-links-list a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.875rem;
    color: var(--color-brand);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--ease);
}
.quick-links-list a:hover { text-decoration-color: var(--color-brand); }
.quick-links-list svg { flex-shrink: 0; }

/* Active nav item */
.nav-item--active > .nav-toggle { color: var(--color-brand); }

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


/* ===================================================
   QUICK SHIP PAGE
   =================================================== */
.qs-banner {
    background: var(--color-brand);
    color: #fff;
    padding: var(--sp-4) 0;
    text-align: center;
}
.qs-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.qs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    padding: var(--sp-1) var(--sp-4);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.qs-lead { font-size: 1rem; font-weight: 500; }

/* ===================================================
   CONTACT PAGE
   =================================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--sp-16);
    align-items: start;
    padding: var(--sp-16) 0;
}
.contact-info-stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.contact-info-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    border: 1px solid var(--color-border);
}
.contact-info-card h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: var(--sp-3); }
.contact-detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-detail-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 0.875rem; color: var(--color-text-muted); }
.contact-detail-list a { color: var(--color-brand); text-decoration: none; }
.contact-detail-list a:hover { text-decoration: underline; }
.contact-detail-icon { flex-shrink: 0; margin-top: 2px; color: var(--color-brand); }

/* ===================================================
   ARTICLE / BLOG CARDS
   =================================================== */
.articles-section { padding: var(--sp-20) 0; }
.articles-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-10);
    gap: var(--sp-4);
}
.articles-section-header h2 { margin: 0; }
.articles-section-header a { font-size: 0.875rem; color: var(--color-brand); font-weight: 600; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.article-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ease), transform var(--ease);
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.article-card-img { background: var(--color-border); aspect-ratio: 16/9; }
.article-card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.article-card-tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-brand); }
.article-card h3 { font-size: 1rem; font-weight: 700; line-height: 1.4; margin: 0; }
.article-card p { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; flex: 1; }
.article-card-meta { font-size: 0.75rem; color: var(--color-text-muted); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--color-border); }

/* ===================================================
   FAQ PAGE
   =================================================== */
.faq-section { padding: var(--sp-20) 0; }
.faq-categories { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.faq-category-btn {
    padding: var(--sp-2) var(--sp-4);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
    font-family: inherit;
}
.faq-category-btn.is-active, .faq-category-btn:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.faq-item details { display: block; }
.faq-item .faq-summary {
    padding: var(--sp-6) var(--sp-6);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
}
.faq-item .faq-summary::-webkit-details-marker { display: none; }
.faq-item .faq-summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); flex-shrink: 0; line-height: 1; }
.faq-item details[open] .faq-summary::after { content: '−'; }
.faq-item details[open] .faq-summary { border-bottom: 1px solid var(--color-border); }
.faq-body { padding: var(--sp-6) var(--sp-6) var(--sp-6); font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.7; }
.faq-body p { margin: 0 0 var(--sp-3); }
.faq-body p:last-child { margin-bottom: 0; }

/* ===================================================
   TEAM GRID
   =================================================== */
.team-section { padding: var(--sp-16) 0; }
.team-filter { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.team-filter-btn { padding: var(--sp-2) var(--sp-4); border-radius: 999px; border: 1px solid var(--color-border); background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); font-family: inherit; }
.team-filter-btn.is-active, .team-filter-btn:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.team-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; text-align: center; }
.team-card-photo { background: var(--color-border); aspect-ratio: 1/1; }
.team-card-body { padding: var(--sp-4) var(--sp-5); }
.team-card-name { font-weight: 700; font-size: 0.9375rem; margin-bottom: var(--sp-1); }
.team-card-title { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.team-card-region { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-brand); margin-bottom: var(--sp-4); }
.team-card-contact { display: flex; flex-direction: column; gap: var(--sp-1); }
.team-card-contact a { font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: none; }
.team-card-contact a:hover { color: var(--color-brand); }

/* ===================================================
   LOCATIONS PAGE
   =================================================== */
.locations-section { padding: var(--sp-16) 0; }
.location-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.location-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-6); }
.location-card-map { background: var(--color-border); border-radius: var(--radius-sm); height: 160px; margin-bottom: var(--sp-5); }
.location-card-type { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-brand); margin-bottom: var(--sp-2); }
.location-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-3); }
.location-card-address { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--sp-4); }
.location-card-contact { display: flex; flex-direction: column; gap: var(--sp-1); }
.location-card-contact a { font-size: 0.875rem; color: var(--color-brand); text-decoration: none; }
.location-card-contact a:hover { text-decoration: underline; }

/* ===================================================
   CAREERS PAGE
   =================================================== */
.careers-section { padding: var(--sp-16) 0; }
.job-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.job-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ease), border-color var(--ease);
}
.job-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-brand); }
.job-card-info { flex: 1; }
.job-card-title { font-weight: 700; font-size: 1rem; margin-bottom: var(--sp-2); }
.job-card-meta { font-size: 0.8125rem; color: var(--color-text-muted); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.job-card-tag { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: var(--color-border); color: var(--color-text-muted); }
.job-card-cta { font-size: 0.875rem; font-weight: 600; color: var(--color-brand); white-space: nowrap; flex-shrink: 0; }

/* ===================================================
   DOCUMENT LIBRARY
   =================================================== */
.doc-library-section { padding: var(--sp-16) 0; }
.doc-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.doc-filter-btn { padding: var(--sp-2) var(--sp-4); border-radius: 999px; border: 1px solid var(--color-border); background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); font-family: inherit; }
.doc-filter-btn.is-active, .doc-filter-btn:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.doc-list { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.doc-row {
    display: grid;
    grid-template-columns: 1fr 120px 100px;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background var(--ease);
}
.doc-row:last-of-type { border-bottom: none; }
.doc-row:hover { background: var(--color-surface); }
.doc-row-name { font-weight: 600; font-size: 0.9375rem; }
.doc-row-name span { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); margin-top: 2px; }
.doc-row-type { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.doc-row-dl { font-size: 0.875rem; font-weight: 600; color: var(--color-brand); text-align: right; }

/* ===================================================
   LEGAL / PROSE PAGES
   =================================================== */
.legal-section { padding: var(--sp-16) 0; }
.legal-content { max-width: 780px; }
.legal-last-updated { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: var(--sp-10); padding-bottom: var(--sp-10); border-bottom: 1px solid var(--color-border); }
.legal-content h2 { font-size: 1.1875rem; font-weight: 700; margin: var(--sp-10) 0 var(--sp-3); }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p, .legal-content li { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.8; }
.legal-content p { margin-bottom: var(--sp-4); }
.legal-content ul, .legal-content ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
.legal-content li { margin-bottom: var(--sp-2); }
.legal-content a { color: var(--color-brand); }

/* ===================================================
   TESTIMONIALS PAGE
   =================================================== */
.testimonials-section { padding: var(--sp-20) 0; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.testimonial-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); }
.testimonial-quote { font-size: 0.9375rem; line-height: 1.75; color: var(--color-text); font-style: italic; margin: 0; flex: 1; }
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after { content: '\201D'; }
.testimonial-card-author { display: flex; flex-direction: column; gap: 3px; padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }
.testimonial-card-name { font-weight: 700; font-size: 0.9375rem; }
.testimonial-card-title { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ===================================================
   RESOURCE HUB
   =================================================== */
.resource-hub-section { padding: var(--sp-16) 0; }
.resource-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.resource-hub-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-7);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: box-shadow var(--ease), transform var(--ease);
}
.resource-hub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.resource-hub-icon { width: 44px; height: 44px; background: rgba(200,55,45,0.08); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-brand); flex-shrink: 0; }
.resource-hub-card h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.resource-hub-card p { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; flex: 1; }
.resource-hub-card-cta { font-size: 0.875rem; font-weight: 600; color: var(--color-brand); margin-top: auto; }

/* ===================================================
   CATALOG / DOWNLOAD PAGE
   =================================================== */
.catalog-download-section { padding: var(--sp-20) 0; }
.catalog-download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
.catalog-preview { background: var(--color-border); border-radius: var(--radius-md); aspect-ratio: 8.5/11; }
.catalog-download-info { display: flex; flex-direction: column; gap: var(--sp-6); }
.catalog-download-info h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0; }
.catalog-download-info > p { color: var(--color-text-muted); line-height: 1.7; margin: 0; }
.catalog-meta-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.catalog-meta-list li { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.875rem; color: var(--color-text-muted); }
.catalog-meta-list li::before { content: '✓'; color: var(--color-brand); font-weight: 700; flex-shrink: 0; }
.catalog-download-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ===================================================
   RESPONSIVE — Inner Pages
   =================================================== */
@media (max-width: 1024px) {
    .feature-row-inner {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }
    .feature-row--reverse .feature-row-inner {
        direction: ltr;
    }
    .feature-img { order: -1; aspect-ratio: 16/7; }

    .process-steps {
        flex-direction: column;
        gap: var(--sp-2);
    }
    .process-connector {
        width: 40px;
        height: 1px;
        align-self: flex-start;
        margin-left: var(--sp-8);
        margin-top: 0;
    }
    .process-step { padding: var(--sp-6) 0 0; }

    .cta-band-inner { flex-direction: column; align-items: flex-start; }

    /* PLP */
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-sidebar { position: static; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }

    /* PDP */
    .pdp-layout { grid-template-columns: 1fr; }
    .pdp-sidebar { position: static; }
    .pdp-intro { grid-template-columns: 1fr; }

    /* Products overview */
    .category-cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

@media (max-width: 768px) {
    .stats-bar-inner { gap: var(--sp-6); }
    .stat-divider { display: none; }
    .stat { min-width: 120px; }

    .lead-time-box { flex-direction: column; }

    .cta-band-actions { width: 100%; }
    .cta-band-actions .btn { flex: 1; justify-content: center; }

    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .subcategory-section-header { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}

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

@media (max-width: 1024px) {
    .contact-layout { grid-template-columns: 1fr; }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .location-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .resource-hub-grid { grid-template-columns: repeat(2, 1fr); }
    .catalog-download-grid { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 768px) {
    .article-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .location-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .resource-hub-grid { grid-template-columns: 1fr; }
    .doc-row { grid-template-columns: 1fr auto; }
    .doc-row-type { display: none; }
    .job-card { flex-wrap: wrap; }
}

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