/* ==========================================================
   EcoHairFactory — Main Stylesheet
   Colors: Forest Green #4A7C59, Warm Wood #C8A882, 
           Cream #FAF8F5, Charcoal #2C2C2C, CTA Orange #D4874D
   Fonts: Playfair Display (headings), Lora (body)
   ========================================================== */

/* ---------- CSS VARIABLES ---------- */
:root {
    --color-primary: #4A7C59;
    --color-primary-dark: #3B6347;
    --color-primary-light: #5E9A6F;
    --color-wood: #C8A882;
    --color-wood-light: #DEC9AE;
    --color-cream: #FAF8F5;
    --color-cream-dark: #F0ECE6;
    --color-charcoal: #2C2C2C;
    --color-text: #3A3A3A;
    --color-text-light: #6B6B6B;
    --color-cta: #D4874D;
    --color-cta-hover: #C0753D;
    --color-white: #FFFFFF;
    --color-border: #E5E0D8;
    --color-wood-dark: #7A5F38;

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    
    --container-max: 1200px;
    --header-height: 72px;
    --radius: 6px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
    --transition: 0.3s ease;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-cream);
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--color-charcoal);
    line-height: 1.3;
    font-weight: 600;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 0.8rem; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 0.6rem; }
h4 { font-size: 1.125rem; margin-bottom: 0.5rem; }

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

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    text-decoration: none;
}

.btn-cta {
    background: var(--color-cta);
    color: var(--color-white);
    border-color: var(--color-cta);
}
.btn-cta:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

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

.btn-sm { padding: 8px 20px; font-size: 0.85rem; }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }

/* ---------- TOP BAR ---------- */
.top-bar {
    background: var(--color-charcoal);
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    padding: 6px 0;
}
.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-bar-text { color: rgba(255,255,255,0.7); font-size: 0.8rem; }
.top-bar-contact { display: flex; align-items: center; gap: 20px; }
.top-bar-contact a { color: rgba(255,255,255,0.85); }
.top-bar-contact a:hover { color: var(--color-white); }
/* WhatsApp: brand-green pill with logo so it reads as a tap-to-chat button */
.top-bar-contact a.top-bar-wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #25D366;
    color: var(--color-white);
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    transition: background 0.2s ease;
}
.top-bar-contact a.top-bar-wa:hover { background: #1EBE5A; color: var(--color-white); }
.top-bar-wa svg { flex-shrink: 0; }

/* ---------- HEADER ---------- */
.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height);
    transition: box-shadow var(--transition);
}
.site-header.scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

/* Logo */
.site-logo { text-decoration: none; }
.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-charcoal);
}
.logo-eco { color: var(--color-primary); }

/* Desktop Nav */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 4px;
}
.nav-item { position: relative; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all var(--transition);
}
.nav-link:hover,
.nav-item.current-menu-item > .nav-link {
    color: var(--color-primary);
    background: rgba(74, 124, 89, 0.06);
}

/* Dropdown arrow */
.dd-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    opacity: 0.6;
}
.has-panel:hover .dd-arrow { transform: rotate(180deg); opacity: 1; }

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
}
.has-dropdown:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown .nav-link {
    padding: 8px 20px;
    font-size: 0.85rem;
    border-radius: 0;
}
.nav-dropdown .nav-link:hover {
    background: var(--color-cream);
}

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 12px; }

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-charcoal);
    transition: all 0.3s;
}

/* Mobile overlay backdrop */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1900;
    backdrop-filter: blur(2px);
}
.mobile-overlay.active { display: block; }

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0; right: 0;
    width: 300px; height: 100vh;
    background: var(--color-white);
    z-index: 2000;
    transform: translateX(100%);   /* off-screen via transform — no document overflow */
    transition: transform 0.35s ease;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}
.mobile-menu.active { transform: translateX(0); }

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 16px 24px;
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
}
.mobile-menu-header .logo-text { font-size: 1.15rem; }

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--color-text-light);
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background var(--transition);
}
.mobile-menu-close:hover { background: var(--color-border); }

.mobile-menu-inner { padding: 8px 24px 40px; }

.mobile-nav-menu { list-style: none; }
.mobile-nav-menu > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}
.mobile-nav-menu > li > a {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 15px 0;
    color: var(--color-charcoal);
    font-weight: 600;
    font-size: 1rem;
}
.mobile-nav-menu > li > a:hover { color: var(--color-primary); }
.mobile-nav-menu > li > a::after { display: none; }

/* Submenu chevron toggle (separate tap target from the parent link) */
.msub-toggle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text-light);
    -webkit-tap-highlight-color: transparent;
}
.msub-toggle svg { transition: transform 0.25s ease; }
.msub-toggle[aria-expanded="true"] { color: var(--color-primary); }
.msub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Sub-menu items */
.mobile-sub-menu {
    display: none;
    flex-basis: 100%;
    list-style: none;
    background: var(--color-cream);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
    padding: 6px 14px;
    margin: 0 0 12px;
}
.mobile-sub-menu.open { display: block; }
.mobile-sub-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 400;
}
.mobile-sub-menu li + li { border-top: 1px solid rgba(0,0,0,0.05); }
.mobile-sub-menu li a:hover { color: var(--color-primary); }

.msub-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1.2;
}

.mobile-cta { display: block; text-align: center; margin-top: 24px; }

.mobile-menu-contact { display: flex; gap: 10px; margin-top: 12px; }
.mobile-menu-contact a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}
.mobile-menu-contact a:hover { color: var(--color-primary); border-color: var(--color-primary); }

.mobile-menu-certs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.mobile-menu-certs span {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 3px 8px;
}

/* ---------- HERO SECTION ---------- */
.hero {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero-subtitle {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-wood-light);
    margin-bottom: 16px;
}
.hero h1 { color: var(--color-white); font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.hero p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-image { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- SECTION STYLES ---------- */
.section { padding: 80px 0; }
.section-alt { background: var(--color-white); }
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}
.section-header p { color: var(--color-text-light); font-size: 1.05rem; }
.section-kicker {
    display: block;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ---------- MATERIAL CARDS (Homepage) ---------- */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.material-card {
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    border: 1px solid var(--color-border);
}
.material-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.material-card-image {
    height: 240px;
    overflow: hidden;
    display: block;
}
.material-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.material-card:hover .material-card-image img { transform: scale(1.05); }
.material-card-body { padding: 28px; }
.material-card-body h3 { margin-bottom: 8px; }
.material-card-body p { color: var(--color-text-light); font-size: 0.95rem; margin-bottom: 16px; }
.material-card-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.material-card-link:hover { gap: 10px; }

/* ============================================================
   MATERIALS LINE-UP (homepage)
   Replaces the bento. One card anatomy — photo left, body right — used at
   two widths: acetate full-row, wood and bamboo half-row each. Emphasis is
   carried by width and by how many spec rows a card gets, never by giving
   one card a different shape from the others.
   ============================================================ */
.mat-lineup { display: grid; gap: 24px; }

.mat-card {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.mat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}
.mat-card--hero { grid-template-columns: 48% minmax(0, 1fr); }

.mat-card-photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-cream-dark);
    min-height: 220px;
}
.mat-card-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.mat-card:hover .mat-card-photo img { transform: scale(1.04); }
.mat-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--color-cta);
    color: #fff;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mat-card-body {
    display: flex;
    flex-direction: column;
    padding: 24px 26px 26px;
}
.mat-card--hero .mat-card-body { padding: 32px 36px; justify-content: center; }
.mat-card-kicker {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.mat-card-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--color-charcoal);
    margin-bottom: 8px;
}
.mat-card--hero .mat-card-name { font-size: 1.75rem; }
.mat-card-lead {
    display: block;
    font-size: 0.87rem;
    line-height: 1.65;
    color: var(--color-text-light);
    margin-bottom: 16px;
}
.mat-card--hero .mat-card-lead { font-size: 0.95rem; line-height: 1.7; margin-bottom: 20px; }

/* The comparison itself. Two columns on the hero card because it has the
   width for it; one on the half-width cards. */
.mat-specs {
    display: grid;
    gap: 0;
    margin-bottom: 18px;
    border-top: 1px solid var(--color-border);
}
.mat-card--hero .mat-specs {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    margin-bottom: 22px;
}
.mat-spec {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border);
}
.mat-spec em {
    display: block;
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 2px;
}
.mat-spec b {
    display: block;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text);
}
.mat-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: gap var(--transition);
}
.mat-card:hover .mat-card-link { gap: 11px; }

.mat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.mat-lineup-note {
    margin: 2px 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--color-text-light);
}

@media (max-width: 900px) {
    .mat-card--hero { grid-template-columns: 40% minmax(0, 1fr); }
    .mat-card--hero .mat-specs { grid-template-columns: 1fr; }
    .mat-pair { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .mat-card,
    .mat-card--hero { grid-template-columns: 1fr; }
    .mat-card-photo { min-height: 0; aspect-ratio: 4 / 3; }
    .mat-card-photo img { position: static; }
    .mat-card--hero .mat-card-body { padding: 22px 22px 24px; }
    .mat-card--hero .mat-card-name { font-size: 1.4rem; }
}

/* ---------- HOMEPAGE: CASE STUDIES ---------- */
.hp-cases-section { background: var(--color-cream); }
.hp-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

/* Card shell */
.hp-case-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Animated top accent bar */
.hp-case-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.hp-case-card:hover::before { transform: scaleX(1); }
.hp-case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.1);
}

/* Image */
.hp-case-image {
    height: 210px;
    overflow: hidden;
    background: var(--color-cream);
}
.hp-case-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}
.hp-case-card:hover .hp-case-image img { transform: scale(1.05); }
.hp-case-image--placeholder {
    height: 210px;
    background: linear-gradient(135deg, #e8e4dc 0%, #d9d3c7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 0.82rem;
}

/* Body */
.hp-case-body {
    padding: 22px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tags */
.hp-case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hp-case-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--color-cream);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}
.hp-case-tag--material {
    background: rgba(74,124,89,0.1);
    color: var(--color-primary);
    border-color: rgba(74,124,89,0.25);
}

/* Title */
.hp-case-body h3 {
    font-size: 1.02rem;
    line-height: 1.45;
    margin-bottom: 10px;
    color: var(--color-charcoal);
}

/* Snapshot */
.hp-case-snapshot {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.65;
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Result callout */
.hp-case-result {
    background: rgba(74,124,89,0.06);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 6px 6px 0;
    padding: 9px 13px;
    font-size: 0.825rem;
    color: var(--color-text);
    line-height: 1.55;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA link */
.hp-case-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-cta);
    transition: gap 0.2s ease;
    margin-top: auto;
}
.hp-case-link:hover { gap: 9px; }

.hp-cases-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 44px;
}

/* ---------- "Can you even make this?" ----------
   Second tier of the case-studies section. The cards above prove we deliver;
   these prove we will take the brief on in the first place. Both lines are
   always visible — a card you have to flip is a card most people never read. */
.hp-odd { margin-top: 56px; }
.hp-odd-head { text-align: center; max-width: 680px; margin: 0 auto 28px; }
.hp-odd-head h3 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 8px; }
.hp-odd-head p { font-size: 0.92rem; color: var(--color-text-light); margin: 0; }

.hp-odd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.hp-odd-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hp-odd-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}
.hp-odd-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 12px; }
.hp-odd-card strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--color-charcoal);
    margin-bottom: 14px;
}
.hp-odd-card p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
}
.hp-odd-card p em {
    display: block;
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 3px;
}
.hp-odd-ask { padding-bottom: 12px; margin-bottom: 12px !important; border-bottom: 1px solid var(--color-border); }
.hp-odd-how { color: var(--color-text) !important; }

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

/* ---------- HOMEPAGE: FINAL CTA ---------- */
.final-cta-section {
    background: var(--color-primary);
    padding: 80px 0;
}
/* ---------- Homepage quote band ----------
   The green band now carries a working form instead of two buttons: pitch and
   proof on the left, a white form card on the right. It is the one place on
   the site where a visitor can type without first opening a popup or loading
   another page. */
/* Centred rather than top-aligned: the form card is taller than the pitch, and
   with align-items:start the left column ended halfway up a wall of green. Any
   remaining difference now splits above and below, which reads as deliberate. */
.hp-quote {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.hp-quote-pitch { padding-top: 6px; }
.hp-quote-pitch h2 {
    color: var(--color-white);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.2;
    margin-bottom: 14px;
}
.hp-quote-pitch > p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 24px;
}
.hp-quote-points {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.hp-quote-points li {
    position: relative;
    padding-left: 28px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}
.hp-quote-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.68rem;
    color: #fff;
}
.hp-quote-direct {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hp-quote-direct-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}
.hp-quote-direct-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.hp-quote-direct-links a {
    padding: 9px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    transition: background var(--transition), border-color var(--transition);
}
.hp-quote-direct-links a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}
.hp-quote-clock {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}
.hp-quote-clock strong { color: #fff; font-variant-numeric: tabular-nums; }

.hp-quote-form {
    max-width: none;
    background: var(--color-white);
    border-radius: 16px;
    padding: 30px 32px 32px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
}
.hp-quote-form .form-group:last-of-type { margin-bottom: 20px; }
.hp-quote-submit { width: 100%; justify-content: center; text-align: center; }
.hp-quote-privacy {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

@media (max-width: 980px) {
    .hp-quote { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    .hp-quote-form { padding: 22px 20px 24px; }
    .hp-quote-form .form-row { grid-template-columns: 1fr; gap: 0; }
}

.final-cta-inner { text-align: center; max-width: 660px; margin: 0 auto; }
.final-cta-inner h2 { color: var(--color-white); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
.final-cta-inner > p { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin-bottom: 32px; line-height: 1.7; }
.final-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.btn-outline-light {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255,255,255,0.6);
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--color-white);
    color: var(--color-white);
}
.final-cta-note { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin: 0; }

/* ---------- PRODUCT GRID ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.product-card {
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.product-card-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-cream-dark); display: block; flex-shrink: 0; }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover .product-card-image img { transform: scale(1.06); }
.product-card-quickview {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-charcoal);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s, transform 0.25s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.product-card:hover .product-card-quickview { opacity: 1; transform: translateY(0); }
.product-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.product-card-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-cta);
    margin-bottom: 6px;
}
.product-card-body h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.product-card-body p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.product-card-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.product-tag {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--color-cream);
    color: var(--color-primary);
    font-weight: 600;
}

/* ---------- CERTIFICATIONS ---------- */
.certs-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 40px 0;
}
.cert-item { text-align: center; }
.cert-item img { height: 60px; margin-bottom: 8px; }
.cert-item span { font-size: 0.8rem; color: var(--color-text-light); display: block; }

/* ---------- WHY CHOOSE US ---------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.feature-item {
    text-align: center;
    padding: 32px 20px;
    background: var(--color-white);
    border-radius: 10px;
    border: 1px solid var(--color-border);
}
.feature-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    background: rgba(74, 124, 89, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.5rem;
}
.feature-item h4 { margin-bottom: 8px; }
.feature-item p { color: var(--color-text-light); font-size: 0.9rem; }

/* ---------- CTA SECTION ---------- */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 60px 0;
    color: var(--color-white);
}
.cta-inner { text-align: center; max-width: 600px; margin: 0 auto; }
.cta-inner h2 { color: var(--color-white); margin-bottom: 12px; }
.cta-inner p { opacity: 0.9; margin-bottom: 28px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- BLOG CARDS ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-card-image { height: 200px; flex: none; overflow: hidden; display: block; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-image-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #EDF3EA, #DCE8D8);
    color: var(--color-primary);
    opacity: 0.7;
}
.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px;
}
.blog-card-meta {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.blog-card-body h3 { font-size: 1.15rem; margin-bottom: 10px; }
.blog-card-body h3 a { color: var(--color-charcoal); }
.blog-card-body h3 a:hover { color: var(--color-primary); }
.blog-card-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-readmore {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-cta);
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}
.blog-card-readmore:hover { color: var(--color-cta-hover); }

/* ---------- INQUIRY FORM ----------
   One control style for every form on the site: the contact page, the popup,
   the shortcode and the homepage band. Labels use the same small-caps treatment
   as the section kickers and spec rows elsewhere, so a form reads as part of
   the page rather than as a browser default dropped into it. */
.ehf-inquiry-form { max-width: 640px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
/* :not(.file-upload-box) because the upload control is itself a <label> — it
   was picking up the caption treatment and rendering its own body text as an
   uppercase field heading. */
.form-group label:not(.file-upload-box) {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 7px;
}
/* Required marker in the CTA colour, not red — nothing has gone wrong yet. */
.form-group label span { color: var(--color-cta); }
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.94rem;
    color: var(--color-text);
    background: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group textarea { min-height: 0; line-height: 1.6; resize: vertical; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.14);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #A8A29A; }

/* ---------- BREADCRUMBS ---------- */
.breadcrumbs {
    padding: 16px 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
}
.breadcrumbs a { color: var(--color-text-light); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }
.breadcrumbs .current { color: var(--color-charcoal); }

/* ---------- PAGE HEADER ---------- */
.page-header {
    background: var(--color-cream-dark);
    padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
}
.page-header h1 { margin-bottom: 8px; }
.page-header p { color: var(--color-text-light); font-size: 1.05rem; }

/* ---------- LONG-FORM PAGE CONTENT (legal pages, generic pages) ---------- */
.page-body {
    max-width: 800px;
    margin: 0 auto;
}
.page-content {
    color: var(--color-text-light);
    line-height: 1.75;
}
.page-content h2 { margin-top: 2.2em; padding-top: 0.4em; border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: 14px; }
.page-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.page-content h3 { margin-top: 1.6em; }
.page-content p, .page-content ul, .page-content ol { margin-bottom: 1.2em; }
.page-content ul, .page-content ol { padding-left: 1.4em; }
.page-content li { margin-bottom: 0.5em; }
.page-content a { color: var(--color-primary); text-decoration: underline; }
.page-content strong { color: var(--color-charcoal); }
.page-content .page-updated { color: var(--color-text-light); font-size: 0.85rem; margin-bottom: 2em; }

.page-heading-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.1);
    color: var(--color-primary);
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 600;
}

/* Sidebar table of contents (added by JS only when a page has 2+ h2 sections) */
.page-toc { display: none; }
.page-body.has-toc {
    max-width: none;
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 56px;
    align-items: start;
}
.page-body.has-toc .page-content { max-width: 800px; }
.page-body.has-toc .page-toc {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + 24px);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}
.page-toc-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-charcoal);
    margin-bottom: 12px;
}
.page-toc ul { list-style: none; }
.page-toc li { margin-bottom: 4px; }
.page-toc a {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--color-text-light);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.page-toc a:hover { color: var(--color-charcoal); background: var(--color-cream-dark); }
.page-toc a.active { color: var(--color-primary); border-left-color: var(--color-primary); background: rgba(74, 124, 89, 0.06); font-weight: 600; }

@media (max-width: 968px) {
    .page-body.has-toc { grid-template-columns: 1fr; }
    .page-body.has-toc .page-toc { position: static; margin-bottom: 24px; }
}

/* ---------- FOOTER ---------- */
.site-footer {
    background: var(--color-charcoal);
    color: rgba(255,255,255,0.7);
    padding: 60px 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer-logo { margin-bottom: 16px; }
.footer-logo .logo-text { color: var(--color-white); }
.footer-about { font-size: 0.9rem; margin-bottom: 16px; }
.footer-certs { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-badge {
    padding: 3px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
}
.site-footer h4 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255,255,255,0.65); font-size: 0.9rem; }
.site-footer a:hover { color: var(--color-white); }
.footer-address { font-size: 0.85rem; line-height: 1.6; }

.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: rgba(255,255,255,0.65);
    transition: color 0.2s, border-color 0.2s;
}
.footer-social a:hover { color: var(--color-white); border-color: rgba(255,255,255,0.5); }

.footer-contact-list { list-style: none; }
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.footer-contact-list svg {
    flex: none;
    margin-top: 5px;
    color: rgba(255,255,255,0.45);
}
.footer-contact-list a { font-size: 0.9rem; }

.footer-bottom {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; align-items: center; gap: 10px; }
.footer-legal a { color: rgba(255,255,255,0.65); font-size: 0.8rem; }
.footer-legal a:hover { color: var(--color-white); }

@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

/* ---------- RESOURCE HUB: two-column sections + upcoming strip ---------- */
.hub-latest { padding-top: 24px; }

.hub-section-body--two { grid-template-columns: 1.3fr 1fr; }

.hub-section-icon {
    margin-left: auto;
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.85;
}

.hub-learn-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin: 20px 0 12px;
    font-family: var(--font-body);
}
.hub-learn-list { list-style: none; padding: 0; }
.hub-learn-list li {
    padding: 6px 0 6px 20px;
    position: relative;
    font-size: 0.88rem;
    color: var(--color-text);
    line-height: 1.5;
}
.hub-learn-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.hub-upcoming { padding: 16px 0 48px; }
.hub-upcoming-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 32px;
}
.hub-upcoming-box h2 { font-size: 1.35rem; margin-bottom: 6px; }
.hub-upcoming-sub { font-size: 0.9rem; color: var(--color-text-light); margin-bottom: 20px; }
.hub-upcoming-list { list-style: none; padding: 0; margin: 0; }
.hub-upcoming-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border);
}
.hub-upcoming-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    flex: none;
}
.hub-upcoming-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hub-upcoming-text strong { font-size: 0.95rem; color: var(--color-charcoal); }
.hub-upcoming-text span { font-size: 0.83rem; color: var(--color-text-light); line-height: 1.5; }
.hub-upcoming-tag {
    flex: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: 4px 10px;
    white-space: nowrap;
}

@media (max-width: 968px) {
    .hub-section-body--two { grid-template-columns: 1fr; }
    .hub-section-body--two .hub-section-desc {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
}

/* Mobile footer: collapse link columns into accordions */
@media (max-width: 640px) {
    .site-footer { padding: 40px 0 0; }
    .footer-grid { gap: 24px; }

    .footer-col-links {
        border-bottom: 1px solid rgba(255,255,255,0.12);
        margin: -12px 0;
    }
    .footer-col-links h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        padding: 14px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .footer-col-links h4::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 1.5px solid rgba(255,255,255,0.5);
        border-bottom: 1.5px solid rgba(255,255,255,0.5);
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex: none;
    }
    .footer-col-links.open h4::after { transform: rotate(-135deg); }
    .footer-col-links ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .footer-col-links.open ul {
        max-height: 300px;
        padding-bottom: 14px;
    }

    .footer-bottom { margin-top: 24px; }
}

/* ---------- MOBILE BOTTOM NAV ---------- */
.mobile-bottom-bar { display: none; }

@media (max-width: 768px) {
    :root {
        --mbb-height: 60px;
        --mbb-safe: env(safe-area-inset-bottom, 0px);
    }

    body {
        padding-bottom: calc(var(--mbb-height) + var(--mbb-safe));
    }

    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 999;
        background: var(--color-white);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        padding: 8px 4px calc(8px + var(--mbb-safe));
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .bar-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        border-radius: 8px;
        color: var(--color-text-light);
        font-size: 0.65rem;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        transition: color 0.2s, background 0.2s;
    }
    .bar-item span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .bar-item svg { flex: none; }
    .bar-item:hover { color: var(--color-primary); }
    .bar-item-active { color: var(--color-primary); font-weight: 600; }
    .bar-item.mbb-cta {
        color: var(--color-white);
        background: var(--color-primary);
        border-radius: 8px;
    }
    .bar-item.mbb-cta:hover {
        background: var(--color-primary-dark);
        color: var(--color-white);
    }

    .scroll-to-top {
        bottom: calc(var(--mbb-height) + var(--mbb-safe) + 16px) !important;
    }
}

/* AOS failure safety net: if the library never initializes, show everything */
body.no-aos [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------- AOS: downgrade horizontal slide-ins to fade-up on mobile ---------- */
@media (max-width: 768px) {
    body [data-aos="fade-left"],
    body [data-aos="fade-right"] {
        transform: translate3d(0, 24px, 0);
    }
    body [data-aos="fade-left"].aos-animate,
    body [data-aos="fade-right"].aos-animate {
        transform: translateZ(0);
    }
}
/* ---------- SCROLL TO TOP ---------- */
.scroll-to-top {
    position: fixed;
    bottom: 32px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-to-top:hover {
    background: var(--color-primary-dark);
}
/* ---------- HERO TRUST SIGNALS ---------- */
.hero-placeholder {
    height: 420px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.6;
    border: 2px dashed rgba(255,255,255,0.15);
}

/* ---------- STATS BAR ---------- */
.stats-bar {
    background: var(--color-white);
    padding: 40px 0;
    border-bottom: 1px solid var(--color-border);
}
/* Green variant — homepage only. Case studies keeps the white base above,
   since its stats bar sits next to an already-green CTA band. */
.stats-bar--green {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    padding: 48px 0;
    border-bottom: none;
}
.stats-bar--green .stat-item { flex: 1; position: relative; }
.stats-bar--green .stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    width: 1px;
    background: rgba(255, 255, 255, 0.22);
}
.stats-bar--green .stat-number { color: var(--color-white); }
.stats-bar--green .stat-label { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 640px) {
    /* Items wrap to 2×2 — the mid-row divider would sit between wrapped rows */
    .stats-bar--green .stat-item + .stat-item::before { display: none; }
}
.stats-grid {
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    gap: 20px;
}
.stat-item { flex: 1; min-width: 140px; }
.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}
.stat-label {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* ---------- CONSULTATION BANNER ---------- */
.consult-banner {
    background: var(--color-cream-dark);
    padding: 36px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.consult-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.consult-text h3 { margin-bottom: 4px; font-size: 1.2rem; }
.consult-text p { color: var(--color-text-light); margin-bottom: 0; font-size: 0.95rem; }
.consult-inner .btn { flex-shrink: 0; white-space: nowrap; }

/* Materials hub — decision helper cards */
.mat-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.mat-choose-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--choose-color, var(--color-primary));
    border-radius: 12px;
    padding: 28px;
}
.mat-choose-tag {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--choose-color, var(--color-primary));
    margin-bottom: 12px;
}
.mat-choose-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 16px;
}
.mat-choose-fit {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-light);
    padding-top: 14px;
    border-top: 1px dashed var(--color-border);
}
@media (max-width: 900px) {
    .mat-choose-grid { grid-template-columns: 1fr; }
}

/* About page — company timeline. Horizontal, matching the same numbered-
   circle + connecting-line visual language as .process-grid elsewhere on
   the site (see "MANUFACTURING PROCESS" / "HOW OEM WORKS" sections), so
   it reads as one design system instead of a bolted-on component. */
.about-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    max-width: 1020px;
    margin: 0 auto;
}
.about-timeline::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
/* Scroll-linked fill: JS sets --tl-progress (0–1) on .about-timeline as the
   section scrolls through the viewport; this overlay grows on top of the
   pale base line above. Degrades gracefully to 0 (invisible) without JS. */
.about-timeline::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 10%;
    height: 2px;
    background: var(--color-primary);
    width: calc(var(--tl-progress, 0) * 80%);
    transition: width 0.15s linear;
    z-index: 0;
}
.tl-item { position: relative; z-index: 1; text-align: center; }
.tl-year {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--color-cream);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.tl-item--active .tl-year {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(74, 124, 89, 0.32);
    transform: scale(1.08);
}
.tl-item h4 { margin-bottom: 8px; font-size: 1.02rem; }
.tl-item p { color: var(--color-text-light); font-size: 0.87rem; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
    .about-timeline { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
    .about-timeline::before, .about-timeline::after { display: none; }
}
@media (max-width: 560px) {
    .about-timeline { grid-template-columns: 1fr; gap: 28px; max-width: 360px; }
}

/* ---------- PROCESS SECTION ---------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.process-grid::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.process-number {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}
.process-step h4 { margin-bottom: 8px; font-size: 1rem; }
.process-step p { color: var(--color-text-light); font-size: 0.85rem; line-height: 1.6; }

/* ---------- CERTIFICATIONS GRID ---------- */
.certs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
.cert-card {
    text-align: center;
    padding: 28px 16px;
    background: var(--color-cream);
    border-radius: 10px;
    border: 1px solid var(--color-border);
}
.cert-card-icon { font-size: 2rem; margin-bottom: 12px; }
.cert-card h4 { margin-bottom: 8px; font-size: 1rem; }
.cert-card p { color: var(--color-text-light); font-size: 0.82rem; line-height: 1.5; }

/* ---------- CLIENTS LOGO WALL ----------
   SINGLE SOURCE OF TRUTH for the logo wall. Two variants layer on top,
   defined near the end of this file:
     .clients-subblock        — full-bleed dark-green band (homepage)
     .clients-subblock--light — white-card wall (OEM / About pages)
   Logo source files are white-on-transparent, so the base renders them as
   dark silhouettes via brightness(0); the green variant re-inverts to white. */
.clients-logo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.client-logo-item {
    flex: 0 1 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 18px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.client-logo-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.client-logo-item img {
    max-height: 36px;
    max-width: 100%;
    width: auto;
    filter: brightness(0);
    opacity: 0.55;
    transition: filter var(--transition), opacity var(--transition);
}
.client-logo-item:hover img { opacity: 0.9; }
.clients-note { text-align: center; font-size: 0.8rem; color: var(--color-text-light); font-style: italic; }
@media (max-width: 640px) {
    .client-logo-item { flex-basis: calc(50% - 10px); min-height: 60px; padding: 12px 14px; }
}

/* ---------- VIDEO SECTION ---------- */
.video-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
}
.video-highlights { list-style: none; margin: 20px 0 28px; }
.video-highlights li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    color: var(--color-text);
    font-size: 0.95rem;
}
.video-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}
.video-embed { border-radius: 12px; overflow: hidden; }
.video-embed iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 12px; }
.video-placeholder {
    aspect-ratio: 16/9;
    background: var(--color-charcoal);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.8;
}

/* ---------- INDUSTRIES GRID ---------- */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.industry-card {
    padding: 28px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: all var(--transition);
}
.industry-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.industry-icon { font-size: 1.8rem; margin-bottom: 12px; }
.industry-card h4 { margin-bottom: 8px; }
.industry-card p { color: var(--color-text-light); font-size: 0.9rem; }

/* ---------- TESTIMONIALS ---------- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.testimonial-card {
    padding: 32px;
    background: var(--color-cream);
    border-radius: 10px;
    border: 1px solid var(--color-border);
}
.testimonial-stars { color: var(--color-cta); font-size: 1.1rem; margin-bottom: 16px; letter-spacing: 2px; }
.testimonial-text { font-size: 0.95rem; font-style: italic; line-height: 1.7; margin-bottom: 20px; color: var(--color-text); }
.testimonial-author strong { display: block; color: var(--color-charcoal); font-size: 0.95rem; }
.testimonial-author span { font-size: 0.8rem; color: var(--color-text-light); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-charcoal);
    cursor: pointer;
    text-align: left;
}
.faq-question:hover { color: var(--color-primary); }
.faq-toggle {
    font-size: 1.4rem;
    color: var(--color-primary);
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 16px;
}
.faq-item.active .faq-toggle { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.active .faq-answer {
    max-height: 300px;
    padding-bottom: 20px;
}
.faq-answer p { color: var(--color-text-light); line-height: 1.7; font-size: 0.95rem; }

/* Homepage FAQ — four flat cards, answers always visible.
   Was an accordion beside a factory photo, restating MOQ, logo methods and
   lead time: three facts already stated three or four times further up the
   page, and hidden behind a click on top of that. Now it carries only the
   questions nothing else on the page answers, and shows them outright.
   Other pages keep the plain .faq-list accordion. */
.hp-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.hp-faq-card {
    padding: 26px 28px 28px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    border-left: 3px solid var(--color-primary);
    transition: box-shadow var(--transition), transform var(--transition);
}
.hp-faq-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hp-faq-card h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--color-charcoal);
    margin-bottom: 12px;
}
/* The verdict is the whole point of the card — someone skimming reads these
   four lines and nothing else, so it gets the weight and the colour. */
.hp-faq-verdict {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.hp-faq-card p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}
.hp-faq-more {
    margin: 28px 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-light);
}
.hp-faq-more a { color: var(--color-primary); font-weight: 600; }
@media (max-width: 860px) {
    .hp-faq-grid { grid-template-columns: 1fr; gap: 16px; }
    .hp-faq-card { padding: 22px 22px 24px; }
}

/* ---------- RESPONSIVE (new sections) ---------- */
@media (max-width: 968px) {
    .process-grid { grid-template-columns: repeat(3, 1fr); }
    .process-grid::before { display: none; }
    .certs-grid { grid-template-columns: repeat(3, 1fr); }
    .video-layout { grid-template-columns: 1fr; }
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: 1fr; }
    .consult-inner { flex-direction: column; text-align: center; }
    .stats-grid { justify-content: center; }
}

@media (max-width: 640px) {
    .process-grid { grid-template-columns: 1fr 1fr; }
    .certs-grid { grid-template-columns: 1fr 1fr; }
    .industries-grid { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.error-page {
    text-align: center;
    padding: 100px 0;
}
.error-page h1 { font-size: 6rem; color: var(--color-primary); margin-bottom: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 968px) {
    .hero-inner { grid-template-columns: 1fr; text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-trust { justify-content: center; gap: 10px 20px; }
    .hero-image { max-width: 500px; margin: 0 auto; }
    .materials-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    /* Case studies: 2 columns on tablet */
    .hp-cases-grid { grid-template-columns: repeat(2, 1fr); }

    /* Featured acetate: stack vertically */

    .main-nav { display: none; }
    .mobile-toggle { display: flex; }
    .header-actions .btn-cta.btn-sm { display: none; }
}

@media (max-width: 640px) {
    .top-bar { display: none; }
    .hero { padding: 48px 0; }
    .section { padding: 48px 0; }
    .features-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .stat-item { min-width: 0; flex: 1 1 calc(50% - 12px); }
    .process-grid { grid-template-columns: 1fr; }
    .certs-grid { grid-template-columns: 1fr; }

    /* Case studies: single column on mobile */
    .hp-cases-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }

    /* Materials: stack secondary grid */ /* hide detail on small screens */

    /* Final CTA */
    .final-cta-section { padding: 56px 0; }
    .final-cta-buttons { flex-direction: column; align-items: center; }
}
/* ==========================================================
   BLOG ARCHITECTURE CSS
   Append this to the end of your main.css file
   ========================================================== */

/* ==========================================
   RESOURCE HUB PAGE
   ========================================== */

/* Hub Hero */
.hub-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 64px 0;
    text-align: center;
}
.hub-hero h1 {
    color: var(--color-white);
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    margin-bottom: 12px;
}
.hub-hero .breadcrumbs,
.hub-hero .breadcrumbs a { color: rgba(255,255,255,0.5); }
.hub-hero .breadcrumbs .current { color: rgba(255,255,255,0.85); }
.hub-hero .breadcrumbs .sep { color: rgba(255,255,255,0.3); }
.hub-hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 640px;
    margin: 0 auto 24px;
}
.hub-hero-badges {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hub-hero-badges span {
    background: rgba(255,255,255,0.12);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Featured Category Cards */
.hub-featured {
    padding: 48px 0;
    background: var(--color-white);
}
.hub-featured-subtitle {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hub-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.hub-featured-card {
    background: var(--color-cream);
    padding: 28px 20px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}
.hub-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.hub-featured-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}
.hub-featured-card h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--color-charcoal);
}
.hub-featured-card p {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* Table of Contents */
.hub-toc {
    padding: 32px 0;
}
.hub-toc-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 36px;
}
.hub-toc-box h2 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1.5rem;
}
.hub-toc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 40px;
}
.hub-toc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.hub-toc-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 32px;
}
.hub-toc-item a {
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.hub-toc-item a:hover {
    color: var(--color-primary);
}

/* Content Sections */
.hub-section {
    padding: 16px 0;
}
.hub-section-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}
.hub-section-card:hover {
    box-shadow: var(--shadow-md);
}
.hub-section-header {
    padding: 20px 28px;
    background: var(--color-cream);
    display: flex;
    align-items: center;
    gap: 16px;
}
.hub-section-num {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 40px;
}
.hub-section-header h2 {
    font-size: 1.25rem;
    margin-bottom: 0;
}
.hub-section-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}
.hub-section-desc {
    padding: 24px 28px;
    border-right: 1px solid var(--color-border);
}
.hub-section-desc p {
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.7;
}
.hub-section-learn {
    padding: 24px 28px;
    border-right: 1px solid var(--color-border);
}
.hub-section-learn h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 12px;
    font-family: var(--font-body);
}
.hub-section-learn ul {
    list-style: none;
    padding: 0;
}
.hub-section-learn li {
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    font-size: 0.88rem;
    color: var(--color-text);
    line-height: 1.5;
}
.hub-section-learn li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}
.hub-section-resources {
    padding: 24px 28px;
}
.hub-section-resources h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 12px;
    font-family: var(--font-body);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hub-view-all {
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-primary);
    font-weight: 600;
}
.hub-section-resources ul {
    list-style: none;
    padding: 0;
}
.hub-section-resources li {
    padding: 0;
    margin-bottom: 8px;
}
.hub-section-resources li a {
    display: block;
    padding: 8px 12px;
    background: var(--color-cream);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
}
.hub-section-resources li a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateX(4px);
}
.hub-coming-soon {
    color: var(--color-text-light);
    font-style: italic;
    font-size: 0.88rem;
}

/* Bottom CTA */
.hub-bottom-cta {
    padding: 48px 0;
}
.hub-bottom-inner {
    text-align: center;
    background: var(--color-cream-dark);
    border-radius: 12px;
    padding: 48px 32px;
    border: 1px solid var(--color-border);
}
.hub-bottom-inner h2 {
    margin-bottom: 8px;
}
.hub-bottom-inner p {
    color: var(--color-text-light);
    margin-bottom: 24px;
}


/* ==========================================================
   CATEGORY ARCHIVE PAGE — v2 (SEO Optimized)
   Replace old .cat- styles in main.css
   ========================================================== */

/* ---------- HERO ---------- */
.cat-hero {
    background: linear-gradient(135deg, var(--color-charcoal) 0%, #1a2a1a 100%);
    padding: 0;
    position: relative;
    overflow: hidden;
}
.cat-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -60px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
}
.cat-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: 120px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.02);
}
.cat-hero-inner {
    position: relative;
    z-index: 1;
    padding: 40px 0 32px;
}
.cat-hero-text {
    flex: 1;
}
.cat-hero .breadcrumbs {
    margin-bottom: 14px;
}
.cat-hero .breadcrumbs,
.cat-hero .breadcrumbs a {
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
}
.cat-hero .breadcrumbs a:hover {
    color: rgba(255,255,255,0.7);
}
.cat-hero .breadcrumbs .current {
    color: rgba(255,255,255,0.7);
}
.cat-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    color: var(--color-white);
    margin-bottom: 8px;
    line-height: 1.25;
}
.cat-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--color-cta);
    border-radius: 2px;
    margin-top: 10px;
}
.cat-description {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 16px;
}
.cat-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cat-meta-count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--color-cta) !important;
    color: var(--color-white) !important;
}
.cat-back-link {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    transition: color 0.2s;
}
.cat-back-link:hover {
    color: var(--color-white);
}
.cat-hero-badge {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cat-hero-icon {
    font-size: 1.8rem;
}
.cat-hero-bar {
    height: 4px;
}

/* ---------- CONTENT LAYOUT ---------- */
.cat-content {
    padding: 48px 0 64px;
}
.cat-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: start;
}

/* ---------- POST GRID (3 columns) ---------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.cat-card {
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border-color: var(--color-primary);
}
.cat-card-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cat-card-image {
    height: 160px;
    overflow: hidden;
}
.cat-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.cat-card:hover .cat-card-image img {
    transform: scale(1.05);
}
.cat-card-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

/* Card Body */
.cat-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cat-card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.cat-card-dot {
    opacity: 0.4;
}
.cat-card-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-charcoal);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-card-excerpt {
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.55;
    margin-bottom: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-card-readmore {
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 12px;
    transition: letter-spacing 0.2s;
}
.cat-card:hover .cat-card-readmore {
    letter-spacing: 0.03em;
}

/* ---------- SIDEBAR ---------- */
.cat-sidebar-inner {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cat-sidebar-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
}
.cat-sidebar-card h3 {
    font-size: 0.9rem;
    color: var(--color-charcoal);
    margin-bottom: 12px;
}

/* Category List */
.cat-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cat-sidebar-list li {
    border-bottom: 1px solid var(--color-border);
}
.cat-sidebar-list li:last-child { border-bottom: none; }
.cat-sidebar-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
    font-size: 0.82rem;
    color: var(--color-text);
    transition: all 0.2s;
}
.cat-sidebar-list a:hover {
    color: var(--color-primary);
    padding-left: 6px;
}
.cat-sidebar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cat-sidebar-count {
    font-size: 0.7rem;
    color: var(--color-text-light);
    background: var(--color-cream);
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: auto;
}
.cat-sidebar-current a {
    color: var(--color-primary);
    font-weight: 600;
}

/* Sidebar CTA */
.cat-sidebar-cta {
    background: var(--color-cream);
    border-width: 1.5px;
}
.cat-sidebar-cta p {
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 12px;
}
.cat-sidebar-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
}

/* Popular Posts */
.cat-sidebar-popular {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cat-sidebar-popular li {
    border-bottom: 1px solid var(--color-border);
}
.cat-sidebar-popular li:last-child { border-bottom: none; }
.cat-sidebar-popular a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    transition: opacity 0.2s;
}
.cat-sidebar-popular a:hover { opacity: 0.8; }
.cat-pop-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.cat-pop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cat-pop-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-charcoal);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-pop-date {
    font-size: 0.7rem;
    color: var(--color-text-light);
}

/* ---------- PAGINATION ---------- */
.cat-pagination {
    text-align: center;
    margin-top: 40px;
}
.cat-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.cat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.cat-pagination .page-numbers:hover,
.cat-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.cat-pagination .prev,
.cat-pagination .next {
    width: auto;
    padding: 0 14px;
}

/* ---------- EMPTY STATE ---------- */
.cat-empty {
    text-align: center;
    padding: 80px 0;
}
.cat-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}
.cat-empty h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.cat-empty p {
    color: var(--color-text-light);
    max-width: 400px;
    margin: 0 auto 24px;
}
.cat-empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 968px) {
    .cat-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cat-sidebar-inner {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }
    .cat-sidebar-card {
        flex: 1 1 calc(50% - 6px);
        min-width: 220px;
    }
}
@media (max-width: 640px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }
    .cat-hero-badge { display: none; }
    .cat-sidebar-card { flex: 1 1 100%; }
    .cat-empty-actions { flex-direction: column; align-items: center; }
}

/* ==========================================
   RESPONSIVE - BLOG PAGES
   ========================================== */
@media (max-width: 1024px) {
    .hub-featured-grid { grid-template-columns: repeat(2, 1fr); }
    .hub-section-body { grid-template-columns: 1fr; }
    .hub-section-desc,
    .hub-section-learn { border-right: none; border-bottom: 1px solid var(--color-border); }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .hub-featured-grid { grid-template-columns: 1fr 1fr; }
    .hub-toc-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

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

/* ---------- OVERRIDE OLD DROPDOWN FOR ABOUT ---------- */
/* Keep the simple dropdown for About menu */
.has-dropdown > .nav-dropdown {
    min-width: 200px;
}

/* ---------- MEGA MENU RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .mega-products .mega-inner {
        grid-template-columns: 1fr 1fr;
    }
    .mega-col-cta {
        grid-column: span 2;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding-left: 0;
        padding-top: 20px;
    }
    .mega-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 968px) {
    .mega-dropdown {
        display: none !important;
    }
}

/* COMPARISON TABLE styles live in the product-detail block below
   (search ".prod-compare { overflow-x: auto; }"). This earlier duplicate
   was fully overridden by it and has been removed. */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 968px) {
    .prod-mat-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
    .prod-oem-layout { grid-template-columns: 1fr; }
    .prod-oem-placeholder { height: 280px; }
    .prod-hero-stats { gap: 24px; }
}
@media (max-width: 640px) {
    .prod-hero-stats { flex-direction: row; flex-wrap: wrap; gap: 16px; }
    .prod-hero-stat { min-width: 45%; }
    .prod-mat-list { grid-template-columns: 1fr; }
}
.mega-col-desc { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 12px; line-height: 1.5; }

/* ==========================================================
   MATERIAL COLLECTION PAGE CSS
   Append to the end of main.css
   ========================================================== */

/* ---------- MATERIAL HERO ---------- */
.mat-hero {
    background: linear-gradient(135deg, #2E4636 0%, #1E3226 100%);
    color: var(--color-white);
    padding: 56px 0 64px;
    position: relative;
    overflow: hidden;
}
.mat-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: var(--mat-color);
    opacity: 0.06;
}
.mat-hero-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.mat-hero .breadcrumbs,
.mat-hero .breadcrumbs a { color: rgba(255,255,255,0.4); }
.mat-hero .breadcrumbs .current { color: rgba(255,255,255,0.85); }
.mat-hero .breadcrumbs .sep { color: rgba(255,255,255,0.3); }
.mat-hero-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mat-color);
    margin-bottom: 12px;
    background: rgba(255,255,255,0.08);
    padding: 4px 14px;
    border-radius: 20px;
}
.mat-hero h1 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin-bottom: 12px;
}
.mat-hero p {
    opacity: 0.85;
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 560px;
}
.mat-hero-tags {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.mat-tag {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}
.mat-hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
/* Material page quick-facts bar */
/* Full-width white band behind the homepage hero quickfacts card — hides the
   cream body background that would otherwise show between hero and section */
.hero-facts-band { background: var(--color-white); }

.mat-quickfacts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: -34px;
    position: relative;
    z-index: 2;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.mat-qf-item { min-width: 0; }
.mat-qf-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 4px;
}
.mat-qf-item strong {
    font-size: 0.92rem;
    color: var(--color-charcoal);
    line-height: 1.4;
}
@media (max-width: 900px) {
    .mat-quickfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
}

/* Product category landing blocks */
.pcat-mat-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}
.pcat-mat-cards-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.pcat-mat-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
.pcat-mat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pcat-mat-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.pcat-mat-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.pcat-mat-card strong { display: block; color: var(--color-charcoal); font-size: 0.98rem; }
.pcat-mat-card div span { font-size: 0.84rem; color: var(--color-text-light); }
.pcat-mat-arrow { margin-left: auto; color: var(--color-primary); font-weight: 700; }

.pcat-custom-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.pcat-custom-item {
    padding: 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 10px;
}
.pcat-custom-item strong { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.pcat-custom-item span { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.5; }
.pcat-custom-cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.pcat-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.pcat-related-label { font-size: 0.88rem; color: var(--color-text-light); margin-right: 4px; }
.pcat-related-chip {
    padding: 7px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    font-size: 0.85rem;
    color: var(--color-text);
    transition: border-color var(--transition), color var(--transition);
}
.pcat-related-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

@media (max-width: 900px) {
    .pcat-mat-cards, .pcat-mat-cards-2 { grid-template-columns: 1fr; max-width: 480px; }
    .pcat-custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .pcat-custom-grid { grid-template-columns: 1fr; }
}

/* Certification pills strip */
.page-certs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}
.page-certs-label {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin-right: 4px;
}
.cert-pill {
    padding: 6px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

/* OEM section without photo: single centered column */
.prod-oem-layout.prod-oem-solo {
    grid-template-columns: 1fr;
    max-width: 880px;
    margin: 0 auto;
}
.prod-oem-solo .prod-oem-text { text-align: center; }
.prod-oem-solo .prod-oem-text > p { max-width: 560px; margin-left: auto; margin-right: auto; }
.prod-oem-solo .prod-oem-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    text-align: left;
    margin-top: 32px;
}
.prod-oem-solo .prod-oem-features .prod-oem-item:last-child {
    grid-column: 1 / -1;
}
@media (max-width: 700px) {
    .prod-oem-solo .prod-oem-features { grid-template-columns: 1fr; }
}
.prod-oem-image img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.mat-hero-photo {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
@media (max-width: 992px) {
    .mat-hero-photo { height: 280px; }
}
.mat-hero-placeholder {
    height: 400px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.25);
    font-size: 1.2rem;
    text-align: center;
    line-height: 2;
    border: 2px dashed rgba(255,255,255,0.12);
}

/* ---------- MATERIAL BENEFITS ---------- */
.mat-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.mat-benefit-card {
    padding: 28px 24px;
    background: var(--color-white);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--mat-color);
    transition: all 0.3s ease;
}
.mat-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.mat-benefit-card h4 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--color-charcoal);
}
.mat-benefit-card p {
    font-size: 0.88rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* ---------- MATERIAL PRODUCT SHOWCASE ---------- */
.mat-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
/* Non-multiple-of-3 counts (e.g. 7 cards): flex with centered wrap, so a
   short last row sits centered instead of leaving an empty grid slot. */
.mat-product-grid-auto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.mat-product-grid-auto .mat-product-card { width: calc((100% - 72px) / 4); }
/* ---------- PRODUCT CARDS — ECO STYLE ---------- */
.mat-product-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.35s ease;
    background: var(--color-white);
    position: relative;
    cursor: pointer;
}
.mat-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mat-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.mat-product-card:hover::before {
    transform: scaleX(1);
}
.mat-product-card:hover {
    border-color: var(--mat-color);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}
.mat-product-image {
    height: 180px;
    overflow: hidden;
    position: relative;
}
.mat-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.mat-product-card:hover .mat-product-image img {
    transform: scale(1.05);
}
.mat-product-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    overflow: hidden;
}
.mat-product-placeholder::after {
    content: '🌿';
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-size: 4rem;
    opacity: 0.06;
    transform: rotate(-15deg);
}
.mat-product-type {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-cta);
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    z-index: 2;
}
.mat-product-body {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
}
.mat-product-body h3 {
    font-size: 1rem;
    color: var(--color-charcoal);
    margin-bottom: 8px;
    transition: color 0.2s;
}
.mat-product-card:hover .mat-product-body h3 {
    color: var(--mat-color);
}
.mat-product-body p {
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 14px;
    flex: 1;
}
.mat-product-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: 6px 14px;
    background: rgba(74, 124, 89, 0.06);
    border-radius: 6px;
    transition: all 0.25s;
    align-self: flex-start;
}
.mat-product-card:hover .mat-product-cta {
    background: var(--color-primary);
    color: var(--color-white);
    gap: 10px;
}

/* ---------- SPECS TABLE ---------- */
.mat-specs-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 56px;
    align-items: center;
}
.mat-specs-text h2 {
    margin-bottom: 12px;
}
.mat-specs-points {
    list-style: none;
    margin: 20px 0 24px;
    padding: 0;
}
.mat-specs-points li {
    position: relative;
    padding: 7px 0 7px 30px;
    font-size: 0.93rem;
    color: var(--color-text);
}
.mat-specs-points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.1);
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-cta {
    display: inline-block;
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
}
.product-card:hover .product-card-cta { text-decoration: underline; }
.product-tag-moq {
    background: rgba(74, 124, 89, 0.1) !important;
    color: var(--color-primary) !important;
    font-weight: 700;
}
.mat-specs-text p {
    color: var(--color-text-light);
}
.mat-specs-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}
.mat-specs-table tr {
    border-bottom: 1px solid var(--color-border);
}
.mat-specs-table tr:last-child {
    border-bottom: none;
}
.mat-specs-label {
    padding: 14px 20px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-charcoal);
    background: var(--color-cream);
    width: 35%;
    white-space: nowrap;
}
.mat-specs-value {
    padding: 14px 20px;
    font-size: 0.88rem;
    color: var(--color-text);
}
.mat-specs-table tr:hover .mat-specs-value {
    background: rgba(74, 124, 89, 0.03);
}

/* ---------- CROSS-SELL OTHER MATERIALS ---------- */
.mat-crosssell-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
}
.mat-crosssell-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.mat-crosssell-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}
.mat-crosssell-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.mat-crosssell-card h3 {
    font-size: 1.05rem;
    color: var(--color-charcoal);
    margin-bottom: 2px;
}
.mat-crosssell-link {
    font-size: 0.82rem;
    color: var(--color-primary);
    font-weight: 600;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 968px) {
    .mat-hero-inner { grid-template-columns: 1fr; }
    .mat-hero-placeholder { height: 280px; }
    .mat-benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .mat-product-grid { grid-template-columns: repeat(2, 1fr); }
    .mat-specs-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mat-benefits-grid { grid-template-columns: 1fr; }
    .mat-product-grid { grid-template-columns: 1fr; }
    .mat-crosssell-grid { grid-template-columns: 1fr; }
    .mat-hero-buttons { flex-direction: column; }
}
/* ==========================================================
   NAVIGATION DROPDOWN CSS — CLEAN VERSION
   ========================================================== */

/* ---------- PANEL CORE ---------- */
.has-panel { position: static !important; }
.dd-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--color-white);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}
.has-panel:hover > .dd-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.has-panel::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.dd-bar {
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-wood), var(--color-primary));
}
.dd-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    z-index: 2;
}

/* ---------- PRODUCTS DROPDOWN ---------- */
.dd-products {
    width: 100%;
    left: 0;
    right: 0;
    transform: translateY(10px);
    border-radius: 0 0 16px 16px;
    border-top: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04);
}
.has-panel:hover > .dd-products {
    transform: translateY(0);
}
.dd-products-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr) 230px;
    gap: 0;
}
/* Megamenu middle column: Shop by Category quick links */
.dd-products-cats {
    padding: 34px 30px 28px;
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.dd-cats-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 16px;
}
.dd-cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
.dd-cats-grid a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    padding: 3px 0;
    transition: color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.dd-cats-grid a:hover {
    color: var(--color-primary);
    transform: translateX(3px);
}
@media (max-width: 1080px) {
    .dd-products-inner { grid-template-columns: 1fr 230px; }
    .dd-products-cats { display: none; }
}
.dd-products-left {
    padding: 32px 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.dd-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}
.dd-pcard {
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--color-white);
    position: relative;
}
.dd-pcard:hover {
    border-color: var(--color-primary);
    box-shadow: 0 12px 28px rgba(74, 124, 89, 0.12);
    transform: translateY(-4px);
}
.dd-pcard-active {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(74, 124, 89, 0.08);
}
.dd-pcard-img {
    height: 110px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.dd-pcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.dd-pcard:hover .dd-pcard-img img {
    transform: scale(1.06);
}
.dd-pcard-body {
    padding: 14px 16px 16px;
}
.dd-pcard-body strong {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-charcoal);
    margin-bottom: 5px;
    transition: color 0.25s;
}
.dd-pcard:hover .dd-pcard-body strong {
    color: var(--color-primary);
}
.dd-pcard-body span {
    font-size: 0.78rem;
    color: var(--color-text-light);
    line-height: 1.5;
    display: block;
}
.dd-pcard-body .dd-core {
    display: inline-flex;
    align-items: center;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary);
    padding: 2px 9px 3px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.dd-products-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 14px 0 0;
    border-top: 1px solid var(--color-border);
    transition: all 0.2s;
}
.dd-products-all:hover {
    color: var(--color-primary-dark);
    gap: 10px;
}

/* ---- Right CTA ---- */
.dd-products-right {
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin: 32px 16px 32px 8px;
    align-self: start;
}
.dd-products-right::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}
.dd-products-right::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}
.dd-products-right h4 {
    color: var(--color-white);
    font-size: 1.25rem;
    font-family: var(--font-heading);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.dd-products-right p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.84rem;
    line-height: 1.6;
    margin-bottom: 22px;
    max-width: 180px;
    position: relative;
    z-index: 1;
}
.dd-products-btn {
    display: inline-block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    background: var(--color-white);
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}
.dd-products-btn:hover {
    background: var(--color-cream);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    color: var(--color-primary-dark);
}

@media (max-width: 968px) {
    .dd-products { display: none !important; }
}
/* ---------- COMPACT DROPDOWN (Blog & About) ---------- */
.dd-compact {
    width: auto;
    min-width: 360px;
    left: auto;
    right: auto;
    transform: translateX(-30%) translateY(10px);
}
.has-panel:hover > .dd-compact {
    transform: translateX(-30%) translateY(0);
}
.dd-narrow {
    min-width: 300px;
}
.dd-compact .dd-body {
    padding: 8px;
}
.dd-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}
.dd-row:hover {
    background: var(--color-cream);
}
.dd-row-featured {
    background: rgba(74, 124, 89, 0.05);
    margin-bottom: 2px;
}
.dd-row-featured:hover {
    background: rgba(74, 124, 89, 0.1);
}
.dd-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dd-row strong {
    font-size: 0.88rem;
    color: var(--color-charcoal);
    white-space: nowrap;
}
.dd-row:hover strong {
    color: var(--color-primary);
}
.dd-row-desc {
    font-size: 0.73rem;
    color: var(--color-text-light);
    margin-left: auto;
    white-space: nowrap;
}
.dd-row-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 14px;
}
.dd-row .dd-badge {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
}
/* ---------- PRODUCT CATEGORY ARCHIVE ---------- */
.pcat-hero {
    background: var(--color-charcoal);
    color: var(--color-white);
    padding: 56px 0 76px;
}
.pcat-hero .breadcrumbs,
.pcat-hero .breadcrumbs a { color: rgba(255,255,255,0.4); }
.pcat-hero .breadcrumbs .current { color: rgba(255,255,255,0.85); }
.pcat-hero .breadcrumbs .sep { color: rgba(255,255,255,0.3); }
.pcat-hero h1 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin-bottom: 8px;
}
.pcat-desc {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    max-width: 640px;
    line-height: 1.75;
    margin-bottom: 0;
}

/* Filter Tabs */
.pcat-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.pcat-filter {
    padding: 8px 20px;
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    background: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}
.pcat-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.pcat-filter.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Product Grid */
.pcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}
.pcat-card {
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: var(--color-white);
    transition: all 0.35s ease;
}
.pcat-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.pcat-card-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}
.pcat-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-cream-dark);
    flex-shrink: 0;
}
.pcat-card:hover .product-card-quickview { opacity: 1; transform: translateY(0); }
.pcat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.pcat-card:hover .pcat-card-img img {
    transform: scale(1.06);
}
.pcat-card-placeholder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-text-light);
}
.pcat-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pcat-card-body h3 {
    font-size: 1rem;
    color: var(--color-charcoal);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pcat-card:hover .pcat-card-body h3 {
    color: var(--color-primary);
}
.pcat-card-body p {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pcat-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pcat-mat-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(74, 124, 89, 0.08);
    color: var(--color-primary);
}
.pcat-card-cta {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
}

/* Empty State */
.pcat-empty,
.pcat-empty-msg {
    text-align: center;
    padding: 60px 0;
}
.pcat-empty h2 { margin-bottom: 8px; }
.pcat-empty p,
.pcat-empty-msg p {
    color: var(--color-text-light);
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .pcat-grid { grid-template-columns: 1fr; }
    .pcat-filters { gap: 6px; }
    .pcat-filter { padding: 6px 14px; font-size: 0.8rem; }
}

/* ==========================================================
   PRODUCT OVERVIEW PAGE CSS — UPDATED (Acetate-first)
   Replace the old PRODUCT OVERVIEW CSS section in main.css
   ========================================================== */

/* ---------- PRODUCT HERO ---------- */
.prod-hero {
    background: linear-gradient(135deg, #2E4636 0%, #1E3226 100%);
    color: var(--color-white);
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}
.prod-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: var(--color-primary-light);
    opacity: 0.08;
}
.prod-hero .container {
    position: relative;
    z-index: 1;
}
.prod-hero .breadcrumbs, .prod-hero .breadcrumbs a { color: rgba(255,255,255,0.4); }
.prod-hero .breadcrumbs .current { color: rgba(255,255,255,0.85); }
.prod-hero .breadcrumbs .sep { color: rgba(255,255,255,0.3); }
.prod-hero h1 { color: var(--color-white); font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 12px; max-width: 700px; }
.prod-hero-desc { font-size: 1.05rem; opacity: 0.8; max-width: 640px; margin-bottom: 32px; line-height: 1.7; }
.prod-hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.prod-hero-stat { text-align: center; }
.prod-hero-stat strong { display: block; font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--color-cta); }
.prod-hero-stat span { font-size: 0.8rem; opacity: 0.6; }

/* ---------- ACETATE FEATURED SECTION ---------- */
.prod-featured-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
}
.prod-featured-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 400px;
    background: var(--color-cream-dark);
}
.prod-featured-image img {
    width: 100%; height: 100%; object-fit: cover;
}
.prod-featured-badge {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.prod-featured-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.prod-featured-text h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 12px;
}
.prod-featured-text > p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}
.prod-featured-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.prod-featured-products span {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 4px 12px;
    background: rgba(74, 124, 89, 0.08);
    color: var(--color-primary);
    border-radius: 16px;
}
.prod-featured-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.prod-featured-meta span {
    font-size: 0.78rem;
    color: var(--color-text-light);
    font-weight: 500;
}
.prod-featured-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- OTHER MATERIALS (Wood & Bamboo) ---------- */
.prod-other-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.prod-other-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    text-decoration: none;
    background: var(--color-white);
    transition: all 0.3s ease;
}
.prod-other-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.prod-other-img {
    height: 100%;
    min-height: 200px;
    overflow: hidden;
}
.prod-other-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s;
}
.prod-other-card:hover .prod-other-img img {
    transform: scale(1.08);
}
.prod-other-body {
    padding: 24px;
}
.prod-other-body h3 {
    font-size: 1.15rem;
    color: var(--color-charcoal);
    margin-bottom: 4px;
}
.prod-other-card:hover .prod-other-body h3 {
    color: var(--color-primary);
}
.prod-other-body em {
    font-size: 0.8rem;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 10px;
}
.prod-other-body p {
    font-size: 0.88rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 12px;
}
.prod-other-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.prod-other-meta span {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-weight: 500;
}
.prod-other-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* ---------- PRODUCT CARD LINK FIX ---------- */
/* Flex column so "View Details" pins to the bottom of every card at the
   same height, regardless of how many lines the title/tags take. */
.product-card-link { text-decoration: none; display: flex; flex-direction: column; height: 100%; color: inherit; }

/* ---------- OEM SECTION ---------- */
.prod-oem-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.prod-oem-text h2 { margin-bottom: 12px; }
.prod-oem-text > p { color: var(--color-text-light); margin-bottom: 24px; }
.prod-oem-features { display: flex; flex-direction: column; gap: 12px; }
.prod-oem-item { padding: 14px 18px; background: var(--color-cream); border-radius: 8px; border-left: 3px solid var(--color-primary); transition: all 0.3s; }
.prod-oem-item:hover { border-left-color: var(--color-cta); transform: translateX(4px); }
.prod-oem-item strong { display: block; font-size: 0.92rem; color: var(--color-charcoal); margin-bottom: 2px; }
.prod-oem-item span { font-size: 0.82rem; color: var(--color-text-light); }
.prod-oem-placeholder { height: 400px; background: var(--color-cream-dark); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--color-text-light); font-size: 1rem; text-align: center; line-height: 2; border: 2px dashed var(--color-border); }

/* ---------- COMPARISON TABLE ---------- */
.prod-compare { overflow-x: auto; }
.prod-compare-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.prod-compare-table thead { background: var(--color-primary); color: var(--color-white); }
.prod-compare-table th { padding: 14px 18px; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; text-align: left; }
.prod-compare-table th:first-child { background: var(--color-primary-dark); }
.prod-compare-table td { padding: 12px 18px; font-size: 0.85rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.prod-compare-table td:first-child { font-weight: 600; color: var(--color-charcoal); background: var(--color-cream); white-space: nowrap; }
.prod-compare-table tbody tr:hover td { background: rgba(74, 124, 89, 0.03); }
.prod-compare-table tbody tr:hover td:first-child { background: rgba(74, 124, 89, 0.06); }
.prod-compare-table tbody tr:last-child td { border-bottom: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 968px) {
    .prod-featured-layout { grid-template-columns: 1fr; }
    .prod-featured-image { height: 280px; }
    .prod-other-grid { grid-template-columns: 1fr; }
    .prod-other-card { grid-template-columns: 1fr; }
    .prod-other-img { min-height: 180px; }
    .prod-oem-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .prod-hero-stats { gap: 16px; }
    .prod-hero-stat { min-width: 45%; }
}
@media (max-width: 968px) {
    .mat-product-grid-auto .mat-product-card { width: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
    .mat-product-grid-auto .mat-product-card { width: 100%; }
}
/* ==========================================================
   SINGLE BLOG POST — v2
   Add to main.css before SINGLE PRODUCT section
   ========================================================== */

.post-breadcrumb-bar {
    background: var(--color-cream);
    padding: 14px 0 0;
    border-bottom: none;
}
.post-header-cream-blend {
    background: var(--color-cream);
    padding: 16px 0 56px;
    border-bottom: none;
    position: relative;
}
.post-header-cream-blend::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.post-header-cream-blend .post-header-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* 略微调整比例，给文字更多空间 */
    gap: 56px;
    align-items: center;
}
.post-cat-badge-wrapper {
    margin-bottom: 18px;
}
.post-meta-cat-blend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
}
.post-meta-cat-blend .cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.post-header-cream-blend .post-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    line-height: 1.3;
    color: var(--color-charcoal);
    margin-bottom: 24px;
}
.post-header-cream-blend .post-meta {
    margin-bottom: 24px;
}
.post-header-cream-blend .post-share {
    padding-top: 0;
    border-top: none;
    width: 100%;
    max-width: 360px;
}
.post-header-image-blend {
    position: relative;
    background: none;
    padding: 0;
    border: none;
}
/* Category-colored offset frame behind the featured image */
.post-header-image-blend::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 16px;
    right: -14px;
    bottom: -14px;
    border-radius: 14px;
    background: var(--pf-accent, var(--color-primary));
    opacity: 0.14;
}
.post-header-image-blend img {
    position: relative;
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
/* .post-content-section padding is defined once below in "CONTENT + SIDEBAR"
   (48px 0 40px); the duplicate that used to sit here was fully overridden. */
@media (max-width: 968px) {
    .post-header-cream-blend {
        padding: 16px 0 36px;
    }
    .post-header-cream-blend .post-header-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .post-header-image-blend {
        max-width: 480px;
        margin: 0 auto;
    }
    .post-header-image-blend::before {
        top: 10px; left: 10px; right: -10px; bottom: -10px;
    }
    /* Sidebar drops below the article on small screens — a TOC there is useless */
    .post-toc-card { display: none !important; }
}

/* ---------- HEADER: LEFT TITLE + RIGHT IMAGE ---------- */
.post-header {
    background: var(--color-white);
    padding: 40px 0 36px;
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.post-header-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: center;
}
.post-title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    color: var(--color-charcoal);
    line-height: 1.3;
    margin-bottom: 20px;
}

/* Meta row */
.post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.post-meta-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.post-meta-avatar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 124, 89, 0.12);
    color: var(--color-primary);
}
.post-meta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.post-meta-line {
    font-size: 0.82rem;
    color: var(--color-text);
}
.post-meta-line strong { color: var(--color-charcoal); }
.post-meta-sub {
    font-size: 0.75rem;
    color: var(--color-text-light);
}
.post-meta-sep { opacity: 0.3; margin: 0 2px; }
.post-meta-cat {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    text-decoration: none;
}

/* Share buttons */
.post-share {
    display: flex;
    align-items: center;
    gap: 6px;
}
.post-share-label {
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-right: 4px;
}
.post-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-cream);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
}
.post-share-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.post-share-copy {
    width: auto;
    padding: 0 12px;
    border-radius: 16px;
    font-size: 0.72rem;
}

/* Featured image (right side) */
.post-header-image {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.post-header-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

/* ---------- CONTENT + SIDEBAR ---------- */
.post-content-section { padding: 48px 0 40px; }
.post-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
}

/* Article Content */
.post-content {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--color-text);
}
.post-content h2 {
    font-size: 1.4rem;
    color: var(--color-charcoal);
    margin-top: 40px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    scroll-margin-top: 90px;
}
.post-content h3 {
    font-size: 1.15rem;
    color: var(--color-charcoal);
    margin-top: 28px;
    margin-bottom: 10px;
    scroll-margin-top: 90px;
}
.post-content p { margin-bottom: 16px; }
.post-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover { color: var(--color-primary-dark); }
.post-content ul, .post-content ol { padding-left: 24px; margin-bottom: 16px; }
.post-content li { margin-bottom: 6px; }
.post-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }
.post-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 16px 20px;
    margin: 20px 0;
    background: var(--color-cream);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}
.post-content blockquote p { margin-bottom: 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.9rem; }
.post-content table th, .post-content table td { padding: 10px 14px; border: 1px solid var(--color-border); text-align: left; }
.post-content table th { background: var(--color-charcoal); color: var(--color-white); font-weight: 600; }
.post-content table tr:nth-child(even) { background: var(--color-cream); }

/* Sidebar */
.post-sidebar-inner {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.post-sidebar-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
}
.post-sidebar-card h3 { font-size: 0.9rem; color: var(--color-charcoal); margin-bottom: 12px; }

/* TOC */
.post-toc-card { border-color: var(--color-primary); border-width: 1.5px; }
.post-toc-list {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
}
.post-toc-list::-webkit-scrollbar {
    width: 3px;
}
.post-toc-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}
.post-toc-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}
.post-toc-item {
    display: block;
    padding: 5px 0 5px 12px;
    font-size: 0.78rem;
    color: var(--color-text-light);
    border-left: 2px solid var(--color-border);
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1.4;
}
.post-toc-item:hover { color: var(--color-primary); border-color: var(--color-primary); }
.post-toc-active { color: var(--color-primary) !important; border-color: var(--color-primary) !important; font-weight: 600; }
.post-toc-h3 { padding-left: 24px; font-size: 0.74rem; }

/* Sidebar CTA */
.post-sidebar-cta { background: var(--color-cream); border-color: var(--color-cta); border-width: 1.5px; }
.post-sidebar-cta p { font-size: 0.8rem; color: var(--color-text-light); line-height: 1.5; margin-bottom: 12px; }
.post-sidebar-btn { display: block; width: 100%; text-align: center; padding: 10px 16px; font-size: 0.85rem; }

/* Related Posts */
.post-sidebar-related { list-style: none; padding: 0; margin: 0; }
.post-sidebar-related li { border-bottom: 1px solid var(--color-border); }
.post-sidebar-related li:last-child { border-bottom: none; }
.post-sidebar-related a { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; transition: opacity 0.2s; }
.post-sidebar-related a:hover { opacity: 0.8; }
.post-rel-thumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.post-rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-rel-title { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-charcoal); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-rel-cat { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* Browse Categories */
.post-sidebar-cats { list-style: none; padding: 0; margin: 0; }
.post-sidebar-cats li { border-bottom: 1px solid var(--color-border); }
.post-sidebar-cats li:last-child { border-bottom: none; }
.post-sidebar-cats a { display: flex; align-items: center; gap: 8px; padding: 7px 2px; font-size: 0.82rem; color: var(--color-text); transition: all 0.2s; }
.post-sidebar-cats a:hover { color: var(--color-primary); padding-left: 4px; }
.post-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.post-cat-count { font-size: 0.7rem; color: var(--color-text-light); background: var(--color-cream); padding: 1px 8px; border-radius: 10px; margin-left: auto; }

/* ---------- AUTHOR BIO ---------- */
.post-author-section { padding: 32px 0; }
.post-author-card {
    display: flex;
    gap: 24px;
    padding: 28px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    max-width: calc(100% - 328px);
}
.post-author-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--color-primary); }
.post-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-author-label { font-size: 0.7rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.06em; }
.post-author-info h3 { font-size: 1.1rem; color: var(--color-charcoal); margin: 2px 0; }
.post-author-title { font-size: 0.8rem; color: var(--color-primary); font-weight: 500; display: block; margin-bottom: 8px; }
.post-author-info p { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.6; }

/* ---------- TAGS ---------- */
.post-tags-section { padding: 0 0 24px; }
.post-tags-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-tags-label { font-size: 0.82rem; font-weight: 600; color: var(--color-text-light); }
.post-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.2s;
}
.post-tag:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* ---------- SHARE BOTTOM ---------- */
.post-share-bottom { padding: 0 0 32px; }
.post-share-bottom-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

/* ---------- PREV / NEXT ---------- */
.post-nav-section { padding: 0 0 48px; }
.post-nav-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.post-nav-link {
    display: block;
    padding: 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s;
}
.post-nav-link:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
.post-nav-dir { display: block; font-size: 0.72rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.post-nav-title { display: block; font-size: 0.88rem; font-weight: 600; color: var(--color-charcoal); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.post-nav-date { font-size: 0.72rem; color: var(--color-text-light); }
.post-nav-next { text-align: right; }

.post-featured-heading {
    font-size: 1.6rem;
    color: var(--color-charcoal);
    margin-bottom: 28px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--color-primary);
    display: inline-block;
}
.post-featured-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.post-feat-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.post-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border-color: var(--color-primary);
}
.post-feat-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}
.post-feat-img {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.post-feat-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(transparent, rgba(44, 44, 44, 0.15));
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0;
}
.post-feat-card:hover .post-feat-img::after {
    opacity: 1;
}
.post-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.post-feat-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.post-feat-date {
    font-size: 0.78rem;
    color: var(--color-cta);
    margin-bottom: 8px;
    font-weight: 500;
}
.post-feat-body h3 {
    font-size: 1.05rem;
    color: var(--color-charcoal);
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-feat-body p {
    font-size: 0.82rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-feat-readmore {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: auto;
    transition: color 0.2s;
}
.post-feat-card:hover .post-feat-readmore {
    color: var(--color-primary);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 968px) {
    .post-header-layout { grid-template-columns: 1fr; gap: 20px; }
    .post-header-image img { height: 200px; }
    .post-layout { grid-template-columns: 1fr; gap: 36px; }
    .post-sidebar-inner { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .post-sidebar-card { flex: 1 1 calc(50% - 6px); min-width: 220px; }
    .post-author-card, .post-tags-inner, .post-nav-inner, .post-share-bottom-inner { max-width: 100%; }
}
@media (max-width: 640px) {
    .post-header-image { display: none; }
    .post-sidebar-card { flex: 1 1 100%; }

    /* Author card: avatar left, name + title right, bio full-width below */
    .post-author-card {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 14px;
        row-gap: 0;
        align-items: center;
        padding: 20px;
    }
    .post-author-avatar {
        width: 56px;
        height: 56px;
        grid-row: 1 / span 2;
    }
    .post-author-info { display: contents; }
    .post-author-label { display: none; } /* redundant on mobile — header meta already says "Written by" */
    .post-author-info h3 { grid-column: 2; margin: 0; align-self: end; }
    .post-author-title { grid-column: 2; margin-bottom: 0; align-self: start; }
    .post-author-info p {
        grid-column: 1 / -1;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--color-border);
    }
    .post-nav-inner { grid-template-columns: 1fr; }
    .post-feat-link { gap: 16px; }
    .post-featured-list { grid-template-columns: 1fr; }
}
/* ==========================================================
   SINGLE PRODUCT PAGE CSS — v3
   Zone 1: Compact Hero  |  Zone 2: Content + Sidebar  |  Zone 3: Full-width
   Replace everything from "SINGLE PRODUCT DETAIL PAGE CSS" to end of file
   ========================================================== */

/* ---------- BREADCRUMB BAR ---------- */
.sp-breadcrumb-bar {
    background: var(--color-cream);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}


/* ==============================================
   ZONE 1: COMPACT PRODUCT HERO
   ============================================== */
.sp-hero {
    padding: 32px 0 40px;
    border-bottom: 1px solid var(--color-border);
}
.sp-hero-layout {
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 40px;
    align-items: start;
    position: relative;
}

/* --- Image Gallery --- */
.sp-gallery-inner {
    position: relative;
    padding-left: 66px;
}

/* Vertical Thumbnails */
.sp-thumbs-col {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sp-thumbs-track {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow: hidden;
    scroll-behavior: smooth;
}
.sp-thumbs-arrow {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.sp-thumbs-arrow:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.sp-thumb {
    width: 56px;
    height: 56px;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--color-cream);
    flex-shrink: 0;
}
.sp-thumb:hover { border-color: var(--color-wood-light); }
.sp-thumb-active { border-color: var(--color-primary) !important; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Main Image */
.sp-gallery-main {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    position: relative;
    cursor: crosshair;
}
.sp-gallery-main img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    display: block;
    transition: opacity 0.25s;
}
/* Zoom panel */
.sp-zoom-box {
    display: none;
    position: absolute;
    border: 2px solid rgba(74, 124, 89, 0.3);
    background: rgba(74, 124, 89, 0.08);
    pointer-events: none;
    z-index: 5;
}
.sp-zoom-panel {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 530px);
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-white);
    background-repeat: no-repeat;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
}
.sp-gallery-solo {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-white);
}
.sp-gallery-solo img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    display: block;
}
.sp-gallery-empty {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 1rem;
    background: var(--color-cream);
}

/* --- Brief Info (right side of hero) --- */
.sp-brief {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.sp-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sp-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0.02em;
}
.sp-tag-material {
    background: rgba(74, 124, 89, 0.08);
    color: var(--color-primary);
}
.sp-tag-category {
    background: rgba(200, 168, 130, 0.12);
    color: #9B7B5B;
}
.sp-brief h1 {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    margin-bottom: 6px;
    line-height: 1.35;
}
.sp-subtitle {
    font-size: 0.88rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Key Params — inline row */
.sp-key-params {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-white);
}
.sp-kp-item {
    flex: 1;
    padding: 10px 14px;
    border-right: 1px solid var(--color-border);
}
.sp-kp-item:last-child { border-right: none; }
.sp-kp-label {
    display: block;
    font-size: 0.62rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}
.sp-kp-value {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-charcoal);
    line-height: 1.3;
}

/* Hero CTA */
.sp-hero-cta {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.sp-btn-quote {
    flex: 1;
    text-align: center;
    padding: 12px 20px;
    font-size: 0.95rem;
}
.btn-outline-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn-outline-green:hover {
    background: var(--color-primary);
    color: var(--color-white);
}


/* ==============================================
   ZONE 2: CONTENT + SIDEBAR
   ============================================== */
.sp-content-zone {
    padding: 48px 0 64px;
}
.sp-content-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
}

/* --- Table of Contents --- */
.sp-toc {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 36px;
}
.sp-toc-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.sp-toc a {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-primary);
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.2s;
}
.sp-toc a:hover {
    background: rgba(74, 124, 89, 0.08);
    color: var(--color-primary-dark);
}

/* --- Content Sections --- */
.sp-section {
    margin-bottom: 48px;
    scroll-margin-top: 90px;
}
.sp-section:last-child { margin-bottom: 0; }
.sp-section h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.65rem);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}
.sp-section-intro {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* --- Spec Table --- */
.sp-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.sp-spec-table tr { border-bottom: 1px solid var(--color-border); }
.sp-spec-table tr:last-child { border-bottom: none; }
.sp-spec-table td {
    padding: 11px 16px;
    vertical-align: top;
}
.sp-spec-table tr:nth-child(odd) { background: var(--color-cream); }
.sp-spec-table tr:nth-child(even) { background: var(--color-white); }
.sp-spec-td-label {
    font-weight: 600;
    color: var(--color-charcoal);
    width: 160px;
    white-space: nowrap;
}

/* --- Description --- */
.sp-desc-content {
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.8;
}
.sp-desc-content p { margin-bottom: 14px; }
.sp-desc-content h3 { margin-top: 20px; margin-bottom: 8px; }
.sp-desc-content ul, .sp-desc-content ol { padding-left: 20px; margin-bottom: 14px; }
.sp-desc-content li { margin-bottom: 5px; }
.sp-desc-content img { border-radius: 8px; max-width: 100%; height: auto; margin: 14px 0; }

/* --- OEM Grid --- */
.sp-oem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.sp-oem-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px 18px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.sp-oem-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.3s;
}
.sp-oem-card:hover::before { transform: scaleX(1); }
.sp-oem-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.sp-oem-icon { font-size: 1.6rem; margin-bottom: 8px; }
.sp-oem-card h4 { font-size: 0.88rem; color: var(--color-charcoal); margin-bottom: 4px; }
.sp-oem-card p { font-size: 0.78rem; color: var(--color-text-light); line-height: 1.5; }

/* --- Material Intro --- */
.sp-material-intro p {
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 14px;
}

/* --- FAQ --- */
.sp-faq-list {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
.sp-faq-item {
    border-bottom: 1px solid var(--color-border);
}
.sp-faq-item:last-child { border-bottom: none; }
.sp-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--color-white);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-charcoal);
    transition: background 0.2s;
}
.sp-faq-q:hover { background: var(--color-cream); }
.sp-faq-chevron {
    flex-shrink: 0;
    transition: transform 0.25s;
    color: var(--color-text-light);
}
.sp-faq-open .sp-faq-chevron { transform: rotate(180deg); }
.sp-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 18px;
}
.sp-faq-open .sp-faq-a {
    max-height: 300px;
    padding: 0 18px 16px;
}
.sp-faq-a p {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.7;
}


/* --- Sticky Sidebar --- */
.sp-sidebar-inner {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Sidebar Cards (shared) */
.sp-sidebar-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    background: var(--color-white);
}
.sp-sidebar-card h4 {
    font-size: 0.9rem;
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

/* Sidebar CTA */
.sp-sidebar-cta {
    background: var(--color-cream);
    border-color: var(--color-primary);
    border-width: 1.5px;
}
.sp-sidebar-cta p {
    font-size: 0.8rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin-bottom: 14px;
}
.sp-sidebar-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 16px;
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.sp-sidebar-link {
    display: block;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 500;
}
.sp-sidebar-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Sidebar PDF */
.sp-sidebar-pdf {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.2s;
    padding: 16px;
}
.sp-sidebar-pdf:hover {
    border-color: var(--color-primary);
    background: rgba(74, 124, 89, 0.03);
}
.sp-sidebar-pdf svg { flex-shrink: 0; color: var(--color-cta); }
.sp-sidebar-pdf strong {
    display: block;
    font-size: 0.82rem;
    color: var(--color-charcoal);
    margin-bottom: 1px;
}
.sp-sidebar-pdf span {
    font-size: 0.72rem;
    color: var(--color-text-light);
}

/* Sidebar Category Nav */
.sp-sidebar-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sp-sidebar-cat-list li { border-bottom: 1px solid var(--color-border); }
.sp-sidebar-cat-list li:last-child { border-bottom: none; }
.sp-sidebar-cat-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    font-size: 0.82rem;
    color: var(--color-text);
    transition: all 0.2s;
}
.sp-sidebar-cat-list a:hover {
    color: var(--color-primary);
    padding-left: 8px;
}
.sp-cat-current a {
    color: var(--color-primary);
    font-weight: 600;
}
.sp-cat-count {
    font-size: 0.7rem;
    color: var(--color-text-light);
    background: var(--color-cream);
    padding: 1px 8px;
    border-radius: 10px;
}

/* Sidebar Certifications */
.sp-sidebar-cert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.sp-sidebar-cert {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(74, 124, 89, 0.08);
    padding: 3px 10px;
    border-radius: 4px;
}


/* ==============================================
   ZONE 3: FULL-WIDTH SECTIONS
   ============================================== */

/* --- Video --- */
.sp-video-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: center;
}
.sp-video-text h2 { margin-bottom: 12px; }
.sp-video-text > p { color: var(--color-text-light); line-height: 1.7; margin-bottom: 16px; }
.sp-video-highlights { list-style: none; padding: 0; margin: 0 0 24px; }
.sp-video-highlights li {
    font-size: 0.88rem;
    color: var(--color-text);
    padding: 5px 0 5px 20px;
    position: relative;
}
.sp-video-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}
.sp-video-player {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-charcoal);
    aspect-ratio: 16/9;
}
.sp-video-player iframe { width: 100%; height: 100%; border: none; }

/* --- Reviews --- */
.sp-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.sp-review-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 24px 20px;
    position: relative;
    transition: all 0.3s;
}
.sp-review-card::before {
    content: '\201C';
    position: absolute;
    top: 14px; right: 18px;
    font-size: 3rem;
    font-family: var(--font-heading);
    color: var(--color-primary);
    opacity: 0.1;
    line-height: 1;
}
.sp-review-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.sp-review-stars { color: #E8A838; font-size: 0.9rem; margin-bottom: 8px; letter-spacing: 2px; }
.sp-review-text { font-size: 0.85rem; color: var(--color-text); line-height: 1.7; font-style: italic; margin-bottom: 14px; }
.sp-review-author strong { display: block; font-size: 0.85rem; color: var(--color-charcoal); }
.sp-review-author span { font-size: 0.75rem; color: var(--color-text-light); }


/* ==============================================
   STICKY BOTTOM BAR
   ============================================== */
.sp-sticky-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 900;
    padding: 10px 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.sp-sticky-bar.sp-sticky-visible { transform: translateY(0); }
.sp-sticky-inner { display: flex; justify-content: space-between; align-items: center; }
.sp-sticky-product { display: flex; align-items: center; gap: 12px; }
.sp-sticky-thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.sp-sticky-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-sticky-product strong { font-size: 0.85rem; color: var(--color-charcoal); }
.sp-sticky-product span { font-size: 0.72rem; color: var(--color-text-light); margin-left: 8px; }


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

/* Tablet / Mobile — Product Detail Page */
@media (max-width: 968px) {
    /* Zone 1: Hero — collapse to single column */
    .sp-hero-layout {
        grid-template-columns: minmax(0, 1fr); /* minmax(0) prevents auto min-width overflow */
        gap: 24px;
    }
    /* Grid items must not exceed container */
    .sp-gallery, .sp-brief { min-width: 0; }

    /* Gallery: main image on top, thumbs strip below */
    .sp-gallery-inner {
        display: flex;
        flex-direction: column-reverse; /* DOM: thumbs→main; visual: main on top, thumbs at bottom */
        padding-left: 0;
    }
    .sp-thumbs-col {
        position: static;
        height: auto; width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 6px;
        padding: 8px 0 2px;
    }
    .sp-thumbs-track {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px; flex: 1; min-width: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sp-thumbs-track::-webkit-scrollbar { display: none; }
    .sp-thumbs-arrow { width: 28px; height: 34px; flex-shrink: 0; }
    .sp-thumbs-arrow svg { transform: rotate(-90deg); }     /* ∧ → ← (prev) */
    .sp-thumbs-arrow-down svg { transform: rotate(-90deg); }/* ∨ → → (next) */
    .sp-thumb { width: 54px; height: 54px; }

    /* Zoom panel: hide on touch screens */
    .sp-zoom-panel { display: none !important; }

    /* Zone 2: Content + Sidebar */
    .sp-content-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    .sp-content-main, .sp-sidebar { min-width: 0; }
    .sp-sidebar-inner {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }
    .sp-sidebar-card {
        flex: 1 1 calc(50% - 6px);
        min-width: 200px;
    }

    /* Zone 3 */
    .sp-video-layout { grid-template-columns: minmax(0, 1fr); }
    .sp-reviews-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile — Product Detail Page */
@media (max-width: 640px) {
    .sp-thumb { width: 46px; height: 46px; }
    .sp-thumbs-arrow { width: 24px; height: 30px; }

    /* Key Params: stack vertically */
    .sp-key-params { flex-direction: column; }
    .sp-kp-item { border-right: none; border-bottom: 1px solid var(--color-border); }
    .sp-kp-item:last-child { border-bottom: none; }

    /* CTA buttons: stack vertically */
    .sp-hero-cta { flex-direction: column; }

    /* Trust badges: single column on very small screens */
    .sp-trust-grid { grid-template-columns: minmax(0, 1fr); }
    .sp-trust-item span { overflow-wrap: break-word; word-break: break-word; }

    /* OEM grid: single column */
    .sp-oem-grid { grid-template-columns: minmax(0, 1fr); }

    /* Sidebar cards: full width */
    .sp-sidebar-card { flex: 1 1 100%; min-width: 0; }

    /* Sticky bar: compact on mobile — truncate long product name, button stays one line */
    .sp-sticky-bar { padding: 8px 0; }
    .sp-sticky-product { flex: 1; min-width: 0; overflow: hidden; }
    .sp-sticky-product strong {
        font-size: 0.78rem;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sp-sticky-product span { display: none; }
    .sp-sticky-bar .btn {
        padding: 10px 18px;
        font-size: 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Spec table: fixed label width, allow table to scroll if needed */
    .sp-spec-td-label { width: 110px; white-space: normal; }
    .sp-spec-table { table-layout: fixed; }
    .sp-spec-table td { word-break: break-word; }

    /* TOC: horizontal scroll */
    .sp-toc {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 10px 14px 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-items: center;
    }
    .sp-toc::-webkit-scrollbar { display: none; }
    /* Keep label on one line, separated from links by a divider */
    .sp-toc-label {
        white-space: nowrap;
        flex-shrink: 0;
        padding-right: 10px;
        margin-right: 4px;
        border-right: 1px solid var(--color-border);
    }
    .sp-toc a { white-space: nowrap; }

    /* Reduce gap between content zone and video section */
    .sp-content-zone { padding-bottom: 28px; }
    .sp-video { padding-top: 32px !important; padding-bottom: 40px !important; }
}
.sp-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}
.sp-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.sp-trust-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-primary);
}
.sp-trust-item span {
    font-size: 0.76rem;
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.3;
}

/* ==========================================================
   CASE STUDIES PAGE STYLES
   Append to main.css or load as separate file
   ========================================================== */

/* ---------- CS HERO ---------- */
.cs-hero {
    padding: 56px 0 64px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}
.cs-hero__inner {
    max-width: 680px;
    text-align: center;
    margin: 0 auto;
}
.cs-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
}
.cs-hero h1 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin-bottom: 16px;
    line-height: 1.25;
}
.cs-hero p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    margin-bottom: 28px;
}
.cs-hero__buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-outline-dark {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-outline-dark:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ---------- CS TRUST STRIP ---------- */
.cs-trust-strip {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0;
}
.cs-trust-strip__inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}
.cs-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    font-weight: 500;
    white-space: nowrap;
}
.cs-trust-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ---------- CS INDUSTRY CONTEXT ---------- */
.cs-context {
    padding: 60px 0;
    border-bottom: 1px solid var(--color-border);
}
.cs-context__inner {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: center;
}
.cs-context__text h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    margin-bottom: 16px;
    line-height: 1.3;
}
.cs-context__text p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.7;
}
.cs-context__stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cs-context__stat {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
}
.cs-context__stat-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}
.cs-context__stat-label {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* ---------- CS FEATURED CASES (spotlight + tab switcher) ---------- */
.cs-spotlight__stage {
    position: relative;
    background: var(--color-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.cs-spotlight__panel {
    display: none;
}
.cs-spotlight__panel.is-active {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    animation: cs-spotlight-fade 0.4s ease;
}
@keyframes cs-spotlight-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.cs-spotlight__image {
    position: relative;
    height: 100%;
    aspect-ratio: 3 / 2;
    min-width: 300px;
    max-width: 480px;
    overflow: hidden;
    background: var(--color-cream-dark);
}
.cs-spotlight__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.cs-spotlight__type {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    padding: 4px 12px;
    border-radius: 4px;
}
.cs-spotlight__country {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-charcoal);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    padding: 4px 12px;
    border-radius: 4px;
}
.cs-spotlight__content {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.cs-spotlight__content h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    line-height: 1.35;
}
.cs-spotlight__content h3 a {
    color: var(--color-charcoal);
}
.cs-spotlight__content h3 a:hover {
    color: var(--color-primary);
}
.cs-spotlight__snapshot {
    font-size: 0.92rem;
    color: var(--color-text-light);
    line-height: 1.65;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-spotlight__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.cs-spotlight__result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-primary-dark);
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.5;
    background: rgba(74, 124, 89, 0.08);
    border-left: 3px solid var(--color-primary);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
}
.cs-spotlight__result svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Tabs (compact pills — no images, minimal footprint) */
.cs-spotlight__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}
.cs-spotlight__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 8px 18px 8px 8px;
    cursor: pointer;
    transition: all var(--transition);
}
.cs-spotlight__tab:hover {
    border-color: var(--color-primary);
}
.cs-spotlight__tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.cs-spotlight__tab-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-cream-dark);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.cs-spotlight__tab.is-active .cs-spotlight__tab-num {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}
.cs-spotlight__tab-title {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    transition: color var(--transition);
}
.cs-spotlight__tab.is-active .cs-spotlight__tab-title {
    color: var(--color-white);
}

/* ---------- CS FILTER ---------- */
.cs-filter {
    margin-bottom: 32px;
}
.cs-filter__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cs-filter__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.cs-pill {
    padding: 8px 20px;
    border-radius: 24px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.cs-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.cs-pill--active {
    background: rgba(74, 124, 89, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}
.cs-filter__count {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 32px;
}
.cs-filter__clear {
    background: none;
    border: none;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
    padding: 0;
}
.cs-filter__clear:hover {
    color: var(--color-primary-dark);
}

/* ---------- CS CARD GRID ---------- */
.cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}
.cs-card {
    background: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}
.cs-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.cs-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-cream-dark);
}
.cs-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}
.cs-card:hover .cs-card__image img {
    transform: scale(1.05);
}
.cs-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-border);
}
.cs-card__placeholder span {
    font-size: 0.8rem;
    color: var(--color-text-light);
    opacity: 0.5;
}
.cs-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}
.cs-card__country {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.cs-card__body {
    padding: 22px 22px 0;
    flex: 1;
}
.cs-card__meta {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-wood-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cs-card__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.cs-tag {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    background: rgba(200, 168, 130, 0.15);
    color: var(--color-wood-dark);
    padding: 3px 10px;
    border-radius: 4px;
}
.cs-card__snapshot {
    font-size: 0.85rem;
    color: var(--color-text-light);
    line-height: 1.55;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-card__footer {
    padding: 18px 22px 22px;
    margin-top: auto;
}
.cs-card__btn {
    width: 100%;
    text-align: center;
}

/* Load More */
.cs-load-more {
    text-align: center;
    margin-top: 36px;
}

/* No Results / Empty */
.cs-no-results {
    text-align: center;
    padding: 48px 0;
}
.cs-no-results p {
    color: var(--color-text-light);
    font-size: 1rem;
}
.cs-empty-state {
    text-align: center;
    padding: 64px 24px;
    max-width: 480px;
    margin: 0 auto;
}
.cs-empty-state h3 {
    margin-top: 20px;
    font-size: 1.3rem;
}
.cs-empty-state p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ---------- CS WORRY GRID ---------- */
.cs-worry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cs-worry-card {
    background: var(--color-cream);
    border-radius: 10px;
    padding: 28px;
    border: 1px solid var(--color-border);
    transition: border-color var(--transition);
}
.cs-worry-card:hover {
    border-color: var(--color-primary);
}
.cs-worry-card__icon {
    color: var(--color-primary);
    margin-bottom: 14px;
}
.cs-worry-card h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 8px;
}
.cs-worry-card p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 14px;
}
.cs-worry-card__link {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}
.cs-worry-card__link:hover {
    color: var(--color-primary-dark);
}


/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .cs-worry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cs-spotlight__panel.is-active {
        display: flex;
        flex-direction: column;
    }
    .cs-spotlight__image {
        width: 100%;
        height: auto;
        min-width: 0;
        max-width: none;
        max-height: 320px;
    }
    .cs-spotlight__content {
        padding: 24px;
    }
    .cs-context__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cs-context__stats {
        flex-direction: row;
    }
    .cs-context__stat {
        flex: 1;
    }
}
@media (max-width: 768px) {
    .cs-hero {
        padding: 40px 0 48px;
    }
    .cs-hero h1 {
        font-size: 1.7rem;
    }
    .cs-hero h1 br {
        display: none;
    }
    .cs-trust-strip__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
    }
    .cs-trust-item {
        font-size: 0.75rem;
        white-space: normal;
    }
    .cs-grid {
        grid-template-columns: 1fr;
    }
    .cs-filter__pills {
        gap: 6px;
    }
    .cs-pill {
        padding: 6px 16px;
        font-size: 0.8rem;
    }
    .cs-stats__inner {
        gap: 20px;
    }
    .cs-stat {
        min-width: 120px;
    }
    .cs-stat__number {
        font-size: 1.8rem;
    }
    .cs-spotlight__tab-title {
        max-width: 140px;
    }
}
@media (max-width: 560px) {
    .cs-worry-grid {
        grid-template-columns: 1fr;
    }
    .cs-hero__buttons {
        flex-direction: column;
        align-items: center;
    }
    .cs-hero__buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    .cs-trust-strip__inner {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .cs-trust-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        gap: 6px;
        background: var(--color-cream-dark);
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 14px 8px;
    }
    .cs-trust-item svg {
        width: 20px;
        height: 20px;
    }
    .cs-context__stats {
        flex-direction: column;
    }
    .cs-context__text h2 br {
        display: none;
    }
    .cs-spotlight__tabs {
        justify-content: center;
    }
    .cs-spotlight__tab {
        padding: 4px;
        border-radius: 50%;
    }
    .cs-spotlight__tab-title {
        display: none;
    }
    .cs-spotlight__tab-num {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* ==========================================================
   CONTACT PAGE
   ========================================================== */

.contact-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: start;
}
/* The form is still the taller of the two columns. Rather than stretch the
   info card into a hollow box, it follows the scroll — so the email address
   and WhatsApp link stay reachable while someone works down the form. */
.contact-side { position: sticky; top: calc(var(--header-height) + 24px); }
@media (max-width: 968px) {
    .contact-side { position: static; }
}

/* Form side */
.contact-form-title { font-size: 1.5rem; margin-bottom: 6px; }
.contact-form-subtitle { color: var(--color-text-light); font-size: 0.95rem; margin-bottom: 28px; }

/* Chevron for the selects. Sizing and focus now come from the shared
   .form-group rules above; this only replaces the OS dropdown arrow. */
.form-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B6B6B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px;
    padding-right: 34px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* File upload */
.file-upload-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    border: 1.5px dashed var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-text-light);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
    overflow: hidden;
}
.file-upload-box:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.file-upload-box input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.file-upload-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Phone with country code */
.phone-group { display: flex; gap: 8px; }
.phone-group select { flex: 0 0 108px; min-width: 0; }
.phone-group input { flex: 1; min-width: 0; }

/* Searchable country-code picker (progressive enhancement over .phone-group select) */
.pcp { position: relative; flex: 0 0 108px; }
.pcp select.pcp-native-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pcp-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition);
}
.pcp-trigger:focus,
.pcp-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
}
.pcp-code { flex: 1; text-align: left; }
.pcp-chevron { flex: none; transition: transform var(--transition); }
.pcp-trigger[aria-expanded="true"] .pcp-chevron { transform: rotate(180deg); }

.pcp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 270px;
    max-width: 80vw;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    z-index: 50;
    overflow: hidden;
}
.pcp-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--color-white);
}
.pcp-search:focus { outline: none; }
.pcp-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 240px;
    overflow-y: auto;
}
.pcp-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
}
.pcp-list li:hover,
.pcp-list li:focus {
    background: var(--color-cream-dark);
    outline: none;
}
.pcp-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcp-dial { margin-left: auto; flex: none; color: var(--color-text-light); }
.pcp-list li[hidden] { display: none; }
.pcp-empty {
    margin: 0;
    padding: 14px 12px;
    color: var(--color-text-light);
    font-size: 0.85rem;
    text-align: center;
}

/* Inquiry popup modal */
.ehfm-overlay[hidden] { display: none; }
.ehfm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(30, 41, 34, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
    overflow-y: auto;
}
.ehfm-overlay.ehfm-open { opacity: 1; }
.ehfm {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--color-white);
    border-radius: 16px;
    padding: 36px 36px 28px;
    transform: translateY(16px);
    transition: transform 0.2s ease;
}
.ehfm-overlay.ehfm-open .ehfm { transform: translateY(0); }
.ehfm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f2efe9;
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--transition);
}
.ehfm-close:hover { background: #e5e0d6; }
.ehfm-head { margin-bottom: 22px; }
.ehfm-head h3 { font-size: 1.45rem; margin-bottom: 6px; }
.ehfm-head p { color: var(--color-text-light); font-size: 0.92rem; margin: 0; }
/* Design preview strip — only rendered for the 3D-customizer context. Showing
   visitors their own brush inside the form is what makes them finish it. */
.ehfm-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.ehfm-preview[hidden] { display: none; }
.ehfm-preview img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--color-white);
}
.ehfm-preview-text { min-width: 0; }
.ehfm-preview-text strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-primary);
}
.ehfm-preview-text span {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-top: 2px;
}

.ehfm-form .form-group { margin-bottom: 14px; }
.ehfm-form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-white)
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B6B6B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
        no-repeat right 12px center / 12px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.ehfm-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
}
.ehfm-privacy {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-light);
}
@media (max-width: 560px) {
    .ehfm { padding: 28px 20px 22px; }
    .ehfm-overlay { padding: 12px; align-items: flex-start; }
}

/* Thank You page */
.ty-section { padding-top: 72px; padding-bottom: 80px; }
.ty-card {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 40px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}
.ty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ty-card h1 { font-size: 2rem; margin-bottom: 14px; }
.ty-lead {
    color: var(--color-text-light);
    max-width: 500px;
    margin: 0 auto 12px;
}
.ty-whatsapp { margin-bottom: 30px; }
.ty-whatsapp a { font-weight: 600; color: var(--color-primary); }
.ty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.ty-steps {
    max-width: 880px;
    margin: 56px auto 0;
    text-align: center;
}
.ty-steps h2 { font-size: 1.4rem; margin-bottom: 28px; }
.ty-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}
.ty-step {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
}
.ty-step-num {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.ty-step strong { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.ty-step p { font-size: 0.88rem; color: var(--color-text-light); margin: 0; }
@media (max-width: 768px) {
    .ty-card { padding: 40px 24px; }
    .ty-card h1 { font-size: 1.6rem; }
    .ty-steps-grid { grid-template-columns: 1fr; }
}

/* Factory map under form */
/* Full width now, below the form/info columns rather than stacked under the
   form. It was what made the left column so much taller than the right, and a
   map is more use at full width anyway. */
.contact-map { margin-top: 56px; }
.contact-map h3 { font-size: 1.2rem; margin-bottom: 4px; }
.contact-map-note {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin-bottom: 14px;
}
.contact-map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 12px;
    display: block;
    border: 1px solid var(--color-border);
}

/* What happens next — three across, full width. Same component as
   .ehf3d-nextsteps on the homepage. */
.contact-next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 40px 0 0;
    padding: 28px 26px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}
.contact-next li { display: flex; flex-direction: column; }
.contact-next-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgba(74, 124, 89, 0.1);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}
.contact-next li strong {
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-charcoal);
    margin-bottom: 6px;
}
.contact-next li span:not(.contact-next-num) {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-light);
}
@media (max-width: 860px) {
    .contact-next { grid-template-columns: 1fr; gap: 24px; }
    .contact-map iframe { height: 300px; }
}

/* Info side */
.contact-info-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 36px;
    position: sticky;
    top: calc(var(--header-height) + 24px);
}
.contact-info-box h3 { font-size: 1.2rem; margin-bottom: 4px; }
.contact-info-box > p { color: var(--color-text-light); font-size: 0.9rem; margin-bottom: 24px; }

.contact-info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
}
.contact-info-item:last-of-type { border-bottom: none; }

.contact-info-icon {
    width: 44px;
    height: 44px;
    background: rgba(74, 124, 89, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.contact-info-text strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 4px;
}
.contact-info-text a,
.contact-info-text span {
    color: var(--color-charcoal);
    font-size: 0.95rem;
    font-family: var(--font-body);
}
.contact-info-text a:hover { color: var(--color-primary); }

.contact-response-promise {
    background: rgba(74, 124, 89, 0.06);
    border: 1px solid rgba(74, 124, 89, 0.18);
    border-radius: 8px;
    padding: 18px 20px;
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.contact-response-promise .crp-icon { font-size: 1.3rem; flex-shrink: 0; }
.contact-response-promise p { margin: 0; font-size: 0.88rem; color: var(--color-text); line-height: 1.6; }
.contact-response-promise strong { color: var(--color-primary); }

/* Trust bar */
.contact-trust-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
    max-width: 820px;
    margin: 0 auto;
    gap: 18px 40px;
    padding: 24px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.contact-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--color-text-light);
}
.contact-trust-item .cti-icon {
    width: 36px;
    height: 36px;
    background: rgba(74, 124, 89, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Success / error notice */
.contact-notice {
    padding: 14px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 0.95rem;
}
.contact-notice.success {
    background: rgba(74, 124, 89, 0.08);
    border: 1px solid rgba(74, 124, 89, 0.25);
    color: var(--color-primary-dark);
}

/* Responsive */
@media (max-width: 968px) {
    .contact-layout { grid-template-columns: 1fr; gap: 40px; }
    .contact-info-box { position: static; }
    .contact-trust-bar { gap: 24px; }
}
@media (max-width: 640px) {
    .contact-trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
    .contact-trust-item { font-size: 0.8rem; }
}

/* ==========================================================
   HOMEPAGE RESTRUCTURE — merged blocks & mobile compaction
   ========================================================== */

/* Industries strip (merged into Products section) */
.industries-strip {
    margin-top: 48px;
    padding: 30px 24px 32px;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    text-align: center;
}
/* Real heading, not a whispered uppercase label — boss wants this seen */
.industries-strip-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-charcoal);
    margin-bottom: 18px;
}
.industries-strip-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.industries-strip-items span {
    padding: 8px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

/* Factory video merged into Process section */
.process-video { margin-top: 64px; }
.process-video .video-text h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}
.process-video .video-text > p { color: var(--color-text-light); }

/* Client logos merged into Certifications section */
/* Dark green band. Grey logos at 60% opacity on white cards on a cream page
   was three pale layers stacked — the wall read as filler rather than as the
   strongest proof on the page. Knocked out on the brand green they read as a
   badge wall, and the band gives the long cream homepage a break.
   Bleeds past the container so the colour runs edge to edge. */
.clients-subblock {
    margin: 72px calc(50% - 50vw) -80px;
    padding: 58px calc(50vw - 50%) 62px;
    background: var(--color-primary-dark);
}
.clients-subblock h3 {
    text-align: center;
    font-size: 1.3rem;
    color: var(--color-white);
    margin-bottom: 30px;
}
.clients-subblock .clients-logo-row { margin-bottom: 18px; }

/* No card around each logo any more — the band is the container. Wider basis
   and a taller cap than the boxed version had: with the cards gone there is no
   frame to fill, so the marks have to carry their own presence. */
.clients-subblock .client-logo-item {
    flex: 0 1 185px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 78px;
    padding: 12px 14px;
}
.clients-subblock .client-logo-item:hover { border: none; box-shadow: none; }
/* brightness(0) flattens the mark to black, invert(1) lifts it back to white —
   forces white whatever the source file happens to be. The hover rule repeats
   the filter on purpose: a later generic rule sets brightness(0) on hover for
   the white-card version of this wall, and at equal specificity it would win
   and drop the logos to black on the green. */
.clients-subblock .client-logo-item img {
    filter: brightness(0) invert(1);
    opacity: 0.78;
    max-height: 48px;
    max-width: 100%;
    transition: opacity var(--transition), transform var(--transition);
}
.clients-subblock .client-logo-item:hover img {
    filter: brightness(0) invert(1);
    opacity: 1;
    transform: scale(1.05);
}
.clients-subblock .clients-note {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Mobile compaction */
@media (max-width: 640px) {
    /* Show only the first 2 case studies on phones */
    .hp-cases-grid > article:nth-child(n+3) { display: none; }

    /* Process: centered circles -> compact left-aligned timeline */
    .process-grid { gap: 0; }
    .process-step {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 16px;
        text-align: left;
        padding: 12px 0;
    }
    .process-number {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        margin: 0;
        font-size: 1rem;
    }
    .process-step h4 { align-self: center; margin-bottom: 2px; }
    .process-step p { grid-column: 2; }

    .process-video { margin-top: 40px; }
    .clients-subblock { margin-top: 40px; }
    .industries-strip { margin-top: 32px; padding-top: 24px; }
    .industries-strip-items span { padding: 7px 12px; font-size: 0.8rem; }

    /* Resource hub: upcoming list — header already says "coming soon" */
    .hub-upcoming-box { padding: 22px 18px; }
    .hub-upcoming-list li { align-items: flex-start; gap: 10px; }
    .hub-upcoming-tag { display: none; }

    /* Certifications: centered cards -> compact left-aligned rows */
    .certs-grid { gap: 12px; }
    .cert-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 14px;
        align-items: start;
        text-align: left;
        padding: 14px 16px;
    }
    .cert-card-icon {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin: 0;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 50%;
    }
    .cert-card h4 { align-self: center; margin-bottom: 2px; font-size: 0.95rem; }
    .cert-card p { grid-column: 2; }
}


/* ---------- OEM / WHOLESALE SECTION (homepage) ---------- */
.oem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.oem-card {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 28px 24px;
}
.oem-card h4 { margin-bottom: 10px; font-size: 1.05rem; }
.oem-card p { color: var(--color-text-light); font-size: 0.9rem; line-height: 1.6; }
.oem-wholesale {
    margin-top: 40px;
    background: var(--color-primary-dark);
    border-radius: 12px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.oem-wholesale-text h2 { color: var(--color-white); font-size: 1.5rem; margin-bottom: 8px; }
.oem-wholesale-text p { color: rgba(255,255,255,0.85); max-width: 640px; }
@media (max-width: 992px) {
    .oem-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .oem-grid { grid-template-columns: 1fr; }
    .oem-wholesale { padding: 28px 24px; }
}

/* OEM page: MOQ / order-volume tiers — gives buyers a visual price ladder
   instead of only a sentence buried in the FAQ. Middle tier raised and
   badged since it's the most common order size. */
.moq-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.moq-tier {
    padding: 28px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-align: center;
}
.moq-tier--featured {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px);
}
.moq-tier-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-primary);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.moq-tier-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.moq-tier-range {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    color: var(--color-charcoal);
    margin-bottom: 10px;
}
.moq-tier-range small { font-size: 0.9rem; font-weight: 400; color: var(--color-text-light); margin-left: 4px; }
.moq-tier p { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.55; }
@media (max-width: 900px) {
    .moq-tiers { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .moq-tier--featured { transform: none; }
}

/* ---------- MATERIAL PAGE: MANUFACTURING PROCESS ---------- */
.mat-process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.mat-process-step {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 24px 20px;
}
.mat-process-num {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.mat-process-step h4 { margin-bottom: 8px; font-size: 0.98rem; }
.mat-process-step p { color: var(--color-text-light); font-size: 0.84rem; line-height: 1.55; }
.mat-finishes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}
.mat-finish-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 10px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.mat-finish-tag {
    display: inline-block;
    background: var(--color-cream-dark);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 12px;
}
.mat-finish-card h4 { margin-bottom: 8px; font-size: 1.1rem; }
.mat-finish-card p { color: var(--color-text-light); font-size: 0.92rem; line-height: 1.6; }
.mat-finish-note {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    text-align: left;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 24px;
}
/* flex-basis lets long note text wrap inside its own box, so the button
   stays on the same row (right side) instead of dropping to a second line */
.mat-finish-note p { margin-bottom: 0; color: var(--color-text); font-size: 0.92rem; flex: 1 1 320px; }
.mat-finish-note .btn { flex-shrink: 0; }
@media (max-width: 992px) {
    .mat-process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .mat-process-steps { grid-template-columns: 1fr; }
    .mat-finishes { grid-template-columns: 1fr; }
}

/* Process step & finish card images */
.mat-process-img {
    margin: -24px -20px 14px;
    height: 130px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.mat-process-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-finish-img {
    margin: -28px -28px 18px;
    height: 210px;
    overflow: hidden;
    border-radius: 0 10px 0 0;
}
.mat-finish-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- PRODUCT CATEGORY PAGE: TYPES + PROCESS BLOCKS ---------- */
.pcat-types, .pcat-process { margin-top: 72px; }

/* Keyword-focused editorial sections (per-category 'sections' copy) —
   centered card column so the copy reads as designed blocks, not bare text */
.pcat-sections {
    margin: 64px auto 0;
    display: grid;
    gap: 24px;
    max-width: 920px;
}
.pcat-seo-section {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 30px 34px;
    box-shadow: var(--shadow-sm);
}
.pcat-seo-section h2 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    padding-left: 14px;
    border-left: 4px solid var(--color-primary);
}
.pcat-seo-section p {
    color: var(--color-text-light);
    line-height: 1.75;
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.pcat-seo-section p:last-child { margin-bottom: 0; }
.pcat-seo-section a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.pcat-seo-section a:hover { color: var(--color-primary-dark); }
/* Variant with a product photo on the right */
.pcat-seo-section--media { display: flex; gap: 30px; align-items: center; }
.pcat-seo-section--media .pcat-seo-text { flex: 1; min-width: 0; }
.pcat-seo-img {
    flex-shrink: 0;
    width: 250px;
    align-self: stretch;
    max-height: 300px;
    border-radius: 10px;
    overflow: hidden;
}
.pcat-seo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
    .pcat-seo-section { padding: 24px 22px; }
    .pcat-seo-section--media { flex-direction: column; align-items: stretch; }
    .pcat-seo-img { width: 100%; max-height: 220px; align-self: auto; }
}
.pcat-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pcat-type-card {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 26px 24px;
}
.pcat-type-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.pcat-type-card p { color: var(--color-text-light); font-size: 0.9rem; line-height: 1.6; }
.mat-process-steps--4 { grid-template-columns: repeat(4, 1fr); }
.mat-process-steps--6 { grid-template-columns: repeat(6, 1fr); }
.taxonomy-product_category .oem-wholesale { margin-top: 64px; }
@media (max-width: 992px) {
    .pcat-types-grid { grid-template-columns: 1fr 1fr; }
    .mat-process-steps--4 { grid-template-columns: repeat(2, 1fr); }
    .mat-process-steps--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
    .pcat-types-grid { grid-template-columns: 1fr; }
    .mat-process-steps--4 { grid-template-columns: 1fr; }
    .mat-process-steps--6 { grid-template-columns: 1fr; }
}

/* Bristle/finish option grid: 3-card variant */
.mat-finishes-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 992px) { .mat-finishes-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .mat-finishes-3 { grid-template-columns: 1fr; } }

/* Material pages: tighter vertical rhythm — 80px section padding reads as
   huge empty bands here because several same-background sections stack. */
.page-template-page-material-collection .section { padding: 60px 0; }
@media (max-width: 640px) {
    .page-template-page-material-collection .section { padding: 48px 0; }
}

/* ===== Process combo: compact step list + sticky portrait video =====
   Used when a material's process video is vertical (acetate). Replaces
   the old "6 cards row + separate full-width video block" stack. */
.mat-process-combo {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}
.mat-process-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-border);
}
.mat-process-row:first-child { padding-top: 0; }
.mat-process-row:last-child { border-bottom: none; padding-bottom: 0; }
.mat-process-row-img {
    flex-shrink: 0;
    width: 136px;
    height: 94px;
    border-radius: 8px;
    overflow: hidden;
}
.mat-process-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-process-row-num {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-right: 10px;
}
.mat-process-row-body h4 { font-size: 1rem; margin-bottom: 6px; }
.mat-process-row-body p { color: var(--color-text-light); font-size: 0.88rem; line-height: 1.6; }
.mat-process-video-side {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 16px;
    padding: 24px 24px 26px;
}
.mat-process-video-side .mat-process-video-tag {
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    margin-bottom: 0;
}
.mat-process-video-note {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
    margin: 0;
}
@media (max-width: 992px) {
    .mat-process-combo { grid-template-columns: 1fr; gap: 32px; }
    /* No room for a side column — video becomes a normal block after the steps */
    .mat-process-video-side { position: static; max-width: 400px; margin: 0 auto; width: 100%; }
}

/* Two-finish variant (acetate): horizontal media-object cards — image left,
   text right — half the height of the old stacked image-on-top cards. */
.mat-finishes-2 .mat-finish-card {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}
.mat-finishes-2 .mat-finish-img {
    margin: 0;
    width: 42%;
    height: auto;
    min-height: 200px;
    flex-shrink: 0;
    border-radius: 0;
}
.mat-finishes-2 .mat-finish-body { padding: 22px 24px; }
@media (max-width: 1100px) {
    /* Side-by-side horizontal cards get cramped — stack them full-width instead */
    .mat-finishes-2 { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .mat-finishes-2 .mat-finish-card { flex-direction: column; }
    .mat-finishes-2 .mat-finish-img { width: 100%; height: 180px; min-height: 0; }
}

/* Two-card product grid: centered, wider cards */
.mat-product-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 640px) {
    .mat-product-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- OEM SERVICES PAGE ---------- */
/* (product-line cards now use .oemp-photo-card — see ABOUT / OEM PAGE REDESIGN below) */

/* ---------- MATERIALS PAGE: SCIENCE / KNOWLEDGE BLOCKS ---------- */
/* Homepage factory-proof band: centered CTA row under the photo mosaic */
.hp-factory-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

/* ============================================================
   PRODUCTION TIMELINE — material tabs + step rail + detail card
   Replaces the old four-card process row: eight to ten real stages per
   material, switchable, with a play mode that walks through them.
   ============================================================ */
.pr {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 22px;
}

/* ---- Material tabs ---- */
/* Auto-fit rather than a fixed three: wood and bamboo were merged into one
   route, and the count should follow the data rather than the other way round. */
.pr-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.pr-tab {
    padding: 14px 16px;
    text-align: left;
    background: var(--color-cream);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition);
}
.pr-tab:hover { border-color: var(--color-wood); }
.pr-tab.is-on {
    background: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.pr-tab strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    color: var(--color-charcoal);
}
.pr-tab.is-on strong { color: var(--color-primary); }
.pr-tab em {
    display: block;
    font-style: normal;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--color-text-light);
    margin-top: 3px;
}

.pr-track { display: none; }
.pr-track.is-on { display: block; }

/* ---- Rail head: play control + running day counter ---- */
.pr-railhead {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}
.pr-play {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 10px 20px;
    background: transparent;
    color: var(--color-charcoal);
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.pr-play:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pr-play.is-playing { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pr-play-icon { font-size: 0.68rem; }

.pr-daynow {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
}
.pr-daynow strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Thin overall progress bar, the same idea as the node line but always visible
   even when the rail has scrolled out of view horizontally. */
.pr-progress {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: var(--color-border);
    overflow: hidden;
}
.pr-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--color-primary);
    transition: width 0.4s ease;
}

/* ---- Step rail: numbered nodes on a connecting line ---- */
/* The horizontal scroll needs overflow-y: hidden, which clips anything taller
   than the rail — and the active dot is taller, because it scales 1.12 and
   carries a 4px halo. Padding gives that halo room instead of cropping it. */
.pr-railwrap {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    margin-bottom: 26px;
    padding: 10px 0 6px;
}
.pr-rail {
    position: relative;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 100%;
}
/* The line runs behind the dots, at the dot centre (18px of a 36px dot) */
.pr-rail::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
}
.pr-rail li { flex: 1 0 108px; }
.pr-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 0 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.pr-node-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--color-text-light);
    transition: all var(--transition);
}
.pr-node:hover .pr-node-dot { border-color: var(--color-wood); color: var(--color-charcoal); }
.pr-node.is-done .pr-node-dot {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: #fff;
}
.pr-node.is-on .pr-node-dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.14);
}
.pr-node-name {
    font-size: 0.76rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-text-light);
    transition: color var(--transition);
}
.pr-node.is-on .pr-node-name { color: var(--color-charcoal); }
.pr-node-day {
    font-size: 0.7rem;
    color: var(--color-text-light);
    opacity: 0.8;
}
.pr-node.is-on .pr-node-day { color: var(--color-primary); opacity: 1; }

/* ---- Detail card ---- */
.pr-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 24px;
    align-items: stretch;
}
/* The photo follows the text column's height instead of forcing 4:3 on it.
   Fixing the aspect ratio here used to leave a large empty block under the
   copy on short stages. */
.pr-detail-media {
    position: relative;
    min-height: 340px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark));
}
.pr-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-detail-media img[hidden] { display: none; }
.pr-detail-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 3.2rem;
    color: rgba(255, 255, 255, 0.85);
}
.pr-detail-fallback[hidden] { display: none; }

.pr-detail-body { display: flex; flex-direction: column; }
.pr-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.pr-detail-step {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.pr-detail-days {
    padding: 3px 11px;
    border-radius: 20px;
    background: rgba(212, 135, 77, 0.12);
    color: var(--color-cta);
    font-size: 0.72rem;
    font-weight: 600;
}
.pr-detail-days[hidden] { display: none; }
.pr-detail-body h3 { font-size: 1.45rem; margin-bottom: 10px; }
.pr-detail-body > p {
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--color-text-light);
    margin-bottom: 18px;
}
.pr-detail-nav {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
.pr-detail-nav .btn { flex: 1; justify-content: center; text-align: center; padding: 11px 14px; font-size: 0.84rem; }
.pr-detail-nav .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Equipment / check / why — the three specifics that turn a paragraph into
   something a sourcing manager can actually evaluate. */
.pr-detail-pts {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.pr-detail-pts li {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--color-border);
}
.pr-detail-pts dt,
.pr-detail-pts .pr-pt-k {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding-top: 2px;
}
.pr-detail-pts .pr-pt-v {
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* ---- Footer ---- */
.pr-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}
.pr-lead {
    font-size: 0.9rem;
    color: var(--color-text);
    margin-bottom: 6px;
}
.pr-lead strong {
    display: inline-block;
    margin-right: 10px;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(74, 124, 89, 0.1);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.pr-note {
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--color-text-light);
    margin: 0;
}

/* ---- Arrival estimator ----
   Now a band inside the .pr card rather than a card of its own: one heading
   row with the port picker inline, then the result. The old left column
   repeated a pitch the visitor had already read on the way down. */
.pr-lt {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}
.pr-lt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}
.pr-lt-head h3 { font-size: 1.3rem; margin: 0; }
.pr-lt-portpick {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pr-lt-portpick > span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
    white-space: nowrap;
}
.pr-lt-select {
    min-width: 290px;
    padding: 10px 13px;
    background: var(--color-cream);
    border: 1.5px solid var(--color-border);
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
    cursor: pointer;
}
.pr-lt-select:focus { outline: none; border-color: var(--color-primary); }

/* Full width now, so the date sits beside the breakdown instead of above it:
   date column left, stacked bar and legend right, disclaimer under both. */
.pr-lt-out {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto auto auto;
    column-gap: 28px;
    padding: 22px 24px;
    background: var(--color-cream);
    border-radius: 14px;
}
.pr-lt-outhead {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: center;
    padding-right: 24px;
    border-right: 1px solid var(--color-border);
}
.pr-lt-out > .pr-lt-bar    { grid-column: 2; grid-row: 1; align-self: end; }
.pr-lt-out > .pr-lt-legend { grid-column: 2; grid-row: 2; }
.pr-lt-out > .pr-lt-disc   { grid-column: 1 / -1; grid-row: 3; padding-top: 14px; border-top: 1px solid var(--color-border); }
.pr-lt-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.pr-lt-date {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.1rem;
    line-height: 1.2;
    color: var(--color-charcoal);
    margin: 6px 0 4px;
}
.pr-lt-sub {
    display: block;
    font-size: 0.86rem;
    color: var(--color-cta);
}
.pr-lt-sub b { font-weight: 700; }

/* Stacked bar: one segment per stage, widths proportional to days */
.pr-lt-bar {
    display: flex;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
.pr-lt-seg {
    display: grid;
    place-items: center;
    min-width: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    transition: flex-grow 0.4s ease;
}
.pr-lt-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.pr-lt-legend li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 0.86rem;
    color: var(--color-text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.pr-lt-legend li:last-child { border-bottom: none; }
.pr-lt-legend i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}
.pr-lt-legend b {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pr-lt-disc {
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
    text-align: left;
    font-style: italic;
}

@media (max-width: 900px) {
    .pr-tabs { grid-auto-flow: row; gap: 8px; }
    .pr-detail { grid-template-columns: 1fr; gap: 18px; }
    .pr-detail-media { aspect-ratio: 4 / 3; min-height: 0; }
    .pr-lt-head { flex-direction: column; align-items: stretch; }
    .pr-lt-portpick { flex-direction: column; align-items: stretch; gap: 6px; }
    .pr-lt-select { min-width: 0; width: 100%; }
    .pr-lt-out { grid-template-columns: 1fr; row-gap: 18px; }
    .pr-lt-outhead {
        grid-column: 1;
        grid-row: auto;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .pr-lt-out > .pr-lt-bar,
    .pr-lt-out > .pr-lt-legend,
    .pr-lt-out > .pr-lt-disc { grid-column: 1; grid-row: auto; }
}
@media (max-width: 600px) {
    .pr { padding: 16px; }
    .pr-railhead { flex-direction: column; align-items: stretch; }
    .pr-play { justify-content: center; }
    .pr-daynow { text-align: center; }
    .pr-progress { width: 100%; }
    .pr-detail-nav { flex-direction: column; }
    .pr-detail-pts li { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================================================
   WALK THE FLOOR — room mosaic + hover-driven detail panel
   Left tiles are real photos of each room; the right panel repaints on
   hover. Big rooms get a double-width tile so scale reads honestly
   without claiming an exact floor plan.
   ============================================================ */
.ffw {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    align-items: stretch;
}
.ffw-fig,
.ffw-panel {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 20px;
}
.ffw-fig { display: flex; flex-direction: column; }

/* Fixed row height on purpose. The tiles used to stretch to whatever height
   the right-hand panel happened to be, so a room with a three-line note made
   the entire mosaic grow and the section jumped on every hover. Rows are now
   a constant; only the card around them stretches. */
.ffw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 176px;
    align-content: start;
    gap: 10px;
    flex: 1;
}
.ffw-room {
    position: relative;
    display: block;
    padding: 0;
    min-height: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-cream-dark);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ffw-room.is-wide { grid-column: span 2; }
.ffw-room img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter var(--transition);
    filter: saturate(0.96);
}
/* Scrim sits on the bottom third only. A full-tile wash read grey and pulled
   this section out of the site's warm palette; the label just needs a footing,
   not the whole photo darkened. */
.ffw-room::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 24, 20, 0.80) 0%, rgba(26, 24, 20, 0.34) 38%, rgba(26, 24, 20, 0) 66%);
    transition: background var(--transition);
}
.ffw-room.is-empty { background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark)); }

.ffw-room:hover,
.ffw-room:focus-visible,
.ffw-room.is-on {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.ffw-room:hover img,
.ffw-room.is-on img { filter: none; transform: scale(1.05); }
.ffw-room.is-on::after {
    background: linear-gradient(to top, rgba(26, 24, 20, 0.76) 0%, rgba(26, 24, 20, 0.22) 42%, rgba(26, 24, 20, 0) 70%);
}

.ffw-room-label {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    z-index: 2;
}
/* Text shadows do the legibility work the heavy scrim used to do */
.ffw-room-label strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.ffw-room-label em {
    display: block;
    font-style: normal;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.ffw-cap {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-text-light);
}

/* ---- Detail panel ---- */
.ffw-panel-photo {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-cream-dark);
    margin-bottom: 16px;
}
.ffw-panel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ffw-panel h3 { font-size: 1.3rem; margin-bottom: 8px; }
/* Reserve three lines whatever the room. Copy is written to 135–160 chars so
   it lands inside this box, and nothing below it shifts on hover. */
.ffw-panel > p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: 16px;
    min-height: 5.1em;
}
.ffw-panel-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ffw-panel-stats > div {
    background: var(--color-cream);
    border-radius: 10px;
    padding: 12px 14px;
}
.ffw-panel-gear { grid-column: 1 / -1; }
.ffw-panel-stats strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-charcoal);
}
/* Two lines reserved: the equipment strings run one line for some rooms and
   two for others, and that was the second source of the hover jump. */
.ffw-panel-gear strong { font-size: 0.86rem; line-height: 1.5; min-height: 3em; }
.ffw-panel-stats span {
    display: block;
    font-size: 0.74rem;
    color: var(--color-text-light);
    margin-top: 3px;
}

/* ---- Totals + CTA ---- */
.ffw-totals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 26px;
    padding: 22px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}
.ffw-total { text-align: center; }
.ffw-total strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--color-primary);
}
.ffw-total span {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-top: 3px;
}
.ffw-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

@media (max-width: 980px) {
    .ffw { grid-template-columns: 1fr; }
    .ffw-totals { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .ffw-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 128px; }
    .ffw-room.is-wide { grid-column: span 2; }
    .ffw-totals { grid-template-columns: 1fr 1fr; }
    .ffw-panel > p { min-height: 0; }
}

/* ============================================================
   MEET YOUR ACCOUNT MANAGER (front page)
   Distinct from .team-card below, which is the About page grid.
   ============================================================ */
.team-section { background: var(--color-cream); }
.team-clock {
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

/* Founder gets a wide two-column card of her own, above the grid */
.team-founder {
    display: grid;
    grid-template-columns: 360px 1fr;
    margin-bottom: 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}
.team-founder-photo { background: var(--color-cream-dark); min-height: 320px; }
.team-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-founder-photo.is-empty {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--color-charcoal), #4a4a4a);
}
.team-founder-body { padding: 36px 40px; align-self: center; }
.team-founder-body h3 { font-size: 1.5rem; margin-bottom: 3px; }
.team-founder-body p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-text-light);
    margin-bottom: 22px;
    max-width: 60ch;
}

/* Full-width fact row — fills the horizontal space the short note leaves */
.team-founder-stats {
    display: flex;
    flex-wrap: wrap;
    row-gap: 14px;
}
.team-founder-stats > div {
    display: flex;
    flex-direction: column;
    padding: 2px 28px;
    border-left: 1px solid var(--color-border);
}
.team-founder-stats > div:first-child { padding-left: 0; border-left: 0; }
.team-founder-stats strong {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1;
    color: var(--color-primary);
}
.team-founder-stats span {
    margin-top: 7px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.team-founder-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(74, 124, 89, 0.1);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.team-founder-btn { padding: 11px 26px; font-size: 0.86rem; }

/* Six account managers, all in a single row */
.team-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.team-member {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.team-member:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-wood);
}
/* Square: a 4:3 crop at five-across leaves faces too small */
.team-member-photo {
    aspect-ratio: 1 / 1;
    background: var(--color-cream-dark);
    overflow: hidden;
}
.team-member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Until real photos land, a quiet initials tile — better an honest
   placeholder than a stock face on a page that says "not an inbox". */
.team-member-photo.is-empty {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark));
}
.team-member-initials {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.06em;
}

.team-member-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 13px 18px;
    text-align: center;
}
.team-member-body h3 {
    font-size: 1rem;
    margin-bottom: 9px;
}
/* The one line, in the person's own voice — a quiet quotation mark
   opens it so it reads as something a human said, not a caption. */
.team-member-quote {
    position: relative;
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--color-text-light);
    padding-top: 12px;
}
.team-member-quote::before {
    content: "\201C";
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.5;
}

/* One inquiry button for the whole section, below the grid */
.team-cta {
    margin-top: 30px;
    text-align: center;
}
.team-note {
    max-width: 720px;
    margin: 0 auto 20px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-text-light);
}
.team-cta-btn {
    padding: 13px 40px;
    font-size: 0.92rem;
}

@media (max-width: 1100px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .team-founder { grid-template-columns: 1fr; }
    .team-founder-photo { min-height: 0; aspect-ratio: 4 / 3; }
    .team-founder-body { padding: 24px; }
}
@media (max-width: 560px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 380px; margin: 0 auto; }
}

/* About page team cards — appear once photos land in assets/images/team/ */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.about-team-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.about-team-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; }
.team-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.team-card-photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card-body { padding: 18px 16px 22px; }
.team-card-body h3 { font-size: 1.02rem; margin-bottom: 4px; }
.team-card-role {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.team-card-body p { font-size: 0.84rem; color: var(--color-text-light); line-height: 1.6; }
@media (max-width: 900px) {
    .about-team-grid, .about-team-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .about-team-grid, .about-team-grid-2, .about-team-grid-3 { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* Certifications page: anchor pills under the "why it matters" grid */
.cert-jump {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.cert-jump-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-right: 4px;
}
.cert-jump a {
    padding: 8px 18px;
    border: 1px solid var(--color-primary);
    border-radius: 100px;
    background: var(--color-white);
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}
.cert-jump a:hover { background: var(--color-primary); color: var(--color-white); }
/* Land below the sticky header when jumping to a certificate block */
#grs, #fsc, #bsci, #brcgs, #iso { scroll-margin-top: 90px; }

/* Photo splits inside the science area: without a bottom margin the photo's
   edge crashes into the next block's heading; 980px width keeps their left
   edge from drifting too far from the centered 780px text blocks below. */
.mat-science .editorial-split {
    max-width: 980px;
    margin: 0 auto 56px;
}
.mat-science .editorial-split .editorial-text h2 {
    font-size: 1.5rem;
}
.mat-science-block {
    max-width: 780px;
    margin: 0 auto 40px;
}
.mat-science-block:last-child { margin-bottom: 0; }
.mat-science-block h2 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-cream-dark);
}
.mat-science-block p {
    color: var(--color-text);
    line-height: 1.75;
}

/* ==========================================================
   UNIFIED PAGE HERO BACKGROUND
   Same gradient as the homepage hero, site-wide:
   materials hub / contact / about / faq / certifications /
   resource hub (.hub-hero), category pages & OEM (.pcat-hero),
   blog categories (.cat-hero), material pages (.mat-hero),
   products overview (.prod-hero).
   Circle decoration: cat/mat/prod heroes already have their own;
   hub-hero & pcat-hero get the homepage-style circle below.
   ========================================================== */
.hub-hero,
.pcat-hero,
.cat-hero,
.mat-hero,
.prod-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    position: relative;
    overflow: hidden;
}
.hub-hero::after,
.pcat-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.hub-hero > .container,
.pcat-hero > .container {
    position: relative;
    z-index: 1;
}

/* Hero readability fixes on the unified green background */
.mat-hero-badge {
    color: var(--color-white);
    background: rgba(255,255,255,0.16);
}
.prod-hero-stat strong { color: var(--color-white); }
.prod-hero-stat span { opacity: 0.85; }

/* ---------- RESOURCE HUB: SECTION VISUAL PANEL ---------- */
.hub-section-card--visual {
    display: grid;
    grid-template-columns: 280px 1fr;
    overflow: hidden;
}
.hub-visual {
    position: relative;
    color: var(--color-white);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    overflow: hidden;
}
.hub-visual::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    pointer-events: none;
}
.hub-visual-num {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.55;
    margin-bottom: 8px;
}
.hub-visual-title {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0;
}
@media (max-width: 900px) {
    .hub-section-card--visual { grid-template-columns: 1fr; }
    .hub-visual { min-height: 150px; padding: 22px; }
}

/* ---------- FACTORY GALLERY (About + OEM) ----------
   Flexbox instead of a strict grid: when the photo count doesn't divide
   evenly into rows, the leftover item centers on its own row instead of
   sitting alone against the left edge with an empty gap beside it. */
.factory-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}
.factory-item {
    margin: 0;
    flex: 0 1 calc(50% - 12px);
}
.factory-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    box-shadow: var(--shadow-sm);
}
.factory-item figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
}
@media (max-width: 768px) {
    .factory-item { flex-basis: 100%; }
    .factory-item img { height: 220px; }
}

/* ---------- PACKAGING GALLERY (OEM page) ---------- */
.pkg-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}
.pkg-item { margin: 0; }
.pkg-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    box-shadow: var(--shadow-sm);
}
.pkg-item figcaption {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
}
@media (max-width: 768px) {
    .pkg-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- CERTIFICATE SCANS ---------- */
.cert-scan-figure {
    margin: 0;
    text-align: center;
}
.cert-scan-figure a {
    display: inline-block;
    border-radius: 8px;
    transition: transform 0.25s ease;
}
.cert-scan-figure a:hover { transform: translateY(-4px); }
.cert-scan {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
.cert-scan-caption {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
}

/* 5-step variant of the process grid (About page) */
.process-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 992px) {
    .process-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .process-grid--5 { grid-template-columns: 1fr; }
}

/* ---------- HOMEPAGE: PROCESS STEP PHOTOS + VIDEO FALLBACK GRID ---------- */
.process-step-photo { margin-top: 16px; }
.process-step-photo img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: var(--shadow-sm);
}
.video-photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.video-photo-grid img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.video-frame {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 640px) {
    .video-photo-grid img { height: 120px; }
}

/* Align process step photos to the bottom regardless of text length */
.process-grid .process-step {
    display: flex;
    flex-direction: column;
}
.process-grid .process-step .process-step-photo {
    margin-top: auto;
    padding-top: 16px;
}

/* CLIENT LOGO WALL — base styles consolidated into the single block near the
   top of this file ("CLIENTS LOGO WALL"); variants at the very end. */

/* Homepage cert cards: official certification body logos */
.cert-logo-img {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.cert-logo-img img {
    max-height: 48px;
    max-width: 130px;
    width: auto;
}

/* ===== Self-hosted process videos (homepage + material pages) ===== */
.hp-video-player {
    display: block;
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    background: #000;
}
.hp-video-caption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
}
/* v3: split card — white text column + green media panel, video with play overlay */
.mat-process-video {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.mat-process-video-text {
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.mat-process-video-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--color-cream-dark);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 14px;
}
.mat-process-video-text h3 { font-size: 1.5rem; margin-bottom: 12px; }
.mat-process-video-text p { color: var(--color-text-light); line-height: 1.7; margin-bottom: 18px; }
.mat-process-video--vertical { grid-template-columns: 1.3fr 1fr; }
.mat-process-video .video-highlights { margin: 0 0 24px; }
.mat-process-video-media {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 32px;
}
.mat-process-video-media::after {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.mat-process-player {
    display: block;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
    background: #000;
}
.mat-process-player--vertical { aspect-ratio: 9 / 16; }

/* Video shell: wraps every self-hosted video with a big play-button overlay */
.video-shell {
    position: relative;
    z-index: 1;
    width: 100%;
}
.video-shell video { display: block; width: 100%; }
.video-shell--vertical { max-width: 280px; margin: 0 auto; }
.video-shell-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.vsp-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.vsp-circle svg { margin-left: 3px; }
.video-shell-play:hover .vsp-circle { transform: scale(1.1); }
.vsp-label {
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.video-shell.is-playing .video-shell-play {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@media (max-width: 900px) {
    .mat-process-video,
    .mat-process-video--vertical { grid-template-columns: 1fr; }
    .mat-process-video-media { order: -1; padding: 28px 24px; }
    .mat-process-video-text { padding: 28px 24px 32px; }
    .video-shell--vertical { max-width: 260px; }
}

/* ===== SVG icons replacing emoji ===== */
.feature-icon svg, .cti-icon svg, .contact-info-icon svg, .hub-featured-icon svg, .sp-oem-icon svg, .crp-icon svg {
    display: inline-block;
    vertical-align: middle;
}
.feature-icon, .hub-featured-icon, .sp-oem-icon, .cti-icon, .contact-info-icon, .crp-icon { color: var(--color-primary); }

/* Material swatch chips (assets/images/materials/swatch-*.webp) */
.mat-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: -6px;
    margin-right: 4px;
}
th .mat-swatch { width: 22px; height: 22px; vertical-align: -5px; border: 1px solid rgba(255, 255, 255, 0.5); }
.mat-crosssell-icon .mat-swatch {
    width: 56px;
    height: 56px;
    display: block;
    margin: 0 auto;
}

/* ===== Floating contact bar (desktop) ===== */
.float-bar {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
    padding: 10px 8px;
}
.float-bar-item {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-charcoal);
    background: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
}
.float-bar-item:hover, .float-bar-item:focus { color: var(--color-primary); transform: scale(1.06); }
.float-bar-item svg { display: block; }
.float-bar-item--wa:hover, .float-bar-item--wa:focus { color: #25D366; }
.float-bar-item--wx:hover, .float-bar-item--wx:focus { color: #07C160; }
/* Hover tooltip label, e.g. "Chat on WhatsApp" */
.float-bar-item[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-charcoal, #2B2B2B);
    color: var(--color-white);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 7px 13px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.float-bar-item[data-tip]::before {
    content: '';
    position: absolute;
    right: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--color-charcoal, #2B2B2B);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.float-bar-item[data-tip]:hover::after,
.float-bar-item[data-tip]:hover::before { opacity: 1; visibility: visible; }
.float-bar-top { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--color-border); border-radius: 0 0 12px 12px; opacity: 0.45; height: 52px; }
.float-bar-top.visible { opacity: 1; }
/* Scroll progress ring on back-to-top buttons */
.scroll-ring {
    position: absolute;
    width: 40px;
    height: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 16px); /* content is pushed down 8px by padding-top, so center is +4px */
    transform: rotate(-90deg);
    pointer-events: none;
}
.scroll-ring circle { fill: none; stroke-width: 2.5; }
.scroll-ring-bg { stroke: var(--color-border); opacity: 0.6; }
.scroll-ring-fill {
    stroke: var(--color-primary);
    stroke-linecap: round;
    stroke-dasharray: 131.95; /* 2 * PI * r (r=21) */
    stroke-dashoffset: 131.95;
    transition: stroke-dashoffset 0.1s linear;
}
.float-bar-pop {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 12px;
    width: 164px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.float-bar-pop::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: var(--color-white);
}
.float-bar-wechat:hover .float-bar-pop,
.float-bar-wechat:focus .float-bar-pop,
.float-bar-wechat:focus-within .float-bar-pop { opacity: 1; visibility: visible; }
.float-bar-pop img { width: 140px; height: 140px; object-fit: contain; display: block; margin: 0 auto; }
.float-bar-pop span { display: block; margin-top: 8px; font-size: 0.78rem; color: var(--color-text); word-break: break-all; }

/* Mobile back-to-top (the float bar is desktop-only; this keeps scroll-top on phones) */
.scroll-top-mobile {
    display: none;
    position: fixed;
    right: 14px;
    bottom: 20px;
    z-index: 899;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: var(--color-primary-dark);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.scroll-top-mobile .scroll-ring {
    width: 42px;
    height: 42px;
    left: calc(50% - 21px);
    top: calc(50% - 21px);
}
@media (max-width: 992px) {
    .float-bar { display: none; }
    .scroll-top-mobile { display: flex; }
    .scroll-top-mobile.visible { opacity: 1; visibility: visible; }
}
@media (max-width: 768px) {
    /* Sit above the mobile bottom nav */
    .scroll-top-mobile { bottom: calc(var(--mbb-height, 60px) + var(--mbb-safe, 0px) + 14px); }
}

/* ===== Mobile fixes from the responsive audit ===== */
/* The desktop bottom-align rule for process step photos must not override
   the compact 640px timeline layout of homepage process steps */
@media (max-width: 640px) {
    .process-grid .process-step { display: grid; }
    .process-grid .process-step .process-step-photo {
        grid-column: 2;
        margin-top: 10px;
        padding-top: 0;
    }
    /* Cert cards with an official logo image: full-width row instead of the 44px icon slot */
    .cert-card:has(.cert-logo-img) { grid-template-columns: 1fr; }
    .cert-card:has(.cert-logo-img) h4,
    .cert-card:has(.cert-logo-img) p { grid-column: 1; }
    .cert-card .cert-logo-img { grid-column: 1; justify-self: start; margin-bottom: 4px; }
    .cert-card .cert-logo-img img { max-height: 36px; }
    /* Unified heroes: tighter padding on phones */
    .hub-hero { padding: 44px 0; }
    .pcat-hero { padding: 40px 0 56px; }
    .hub-hero-badges { gap: 8px; }
    .hub-hero-badges span { font-size: 0.78rem; padding: 5px 12px; }
    /* Green video panel: keep it comfortable on small screens */
    .mat-process-video { border-radius: 16px; }
    .mat-process-video-text h3 { font-size: 1.25rem; }
}

/* ==========================================================
   ABOUT / OEM PAGE REDESIGN
   Page-scoped hero photo variant, editorial split, asymmetric
   photo mosaic, stat band, single CTA band, photo-led OEM cards.
   Reuses existing tokens (--color-*, --radius, --shadow-*, --font-*)
   so it stays visually consistent with the rest of the site.
   ========================================================== */

/* Inner-page hero — brand green gradient (same identity as the homepage
   hero), but the photo dissolves into the gradient via a mask-image fade
   instead of sitting in a separate boxed card, so text and photo read as
   one continuous surface. Kept deliberately short (~fits well under half
   the viewport on a normal laptop screen) instead of a tall banner.
   Used on About & OEM in place of the shared .hub-hero/.pcat-hero (every
   other page keeps those untouched). */
.inner-hero {
    padding: 26px 0 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}
.inner-hero > .container { position: relative; z-index: 1; }
.inner-hero .breadcrumbs, .inner-hero .breadcrumbs a { color: rgba(255,255,255,0.5); }
.inner-hero .breadcrumbs .current { color: rgba(255,255,255,0.85); }
.inner-hero .breadcrumbs .sep { color: rgba(255,255,255,0.3); }
.inner-hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    align-items: center;
    gap: 24px;
}
.inner-hero-content {
    padding: 22px 0 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.inner-hero-kicker {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-wood-light);
    margin-bottom: 14px;
}
.inner-hero-content h1 { color: var(--color-white); font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.inner-hero-content p { font-size: 0.98rem; opacity: 0.9; margin-bottom: 1.3rem; max-width: 480px; }
/* Photo sits in a rounded card — same treatment as the homepage hero
   (.hero-image) — instead of a hard-edged rectangle. */
.inner-hero-image { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.inner-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inner-hero-image .hero-placeholder { height: 100%; background: rgba(255,255,255,0.06); }

/* Compact stat row used inside the About hero */
.hero-stat-row {
    display: flex;
    gap: 26px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.hero-stat-row .hero-stat b {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--color-white);
    line-height: 1;
}
.hero-stat-row .hero-stat span {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .inner-hero-inner { grid-template-columns: 1fr; text-align: center; min-height: 0; }
    .inner-hero-content { padding: 8px 0 28px; }
    .inner-hero-content p { margin-left: auto; margin-right: auto; }
    .inner-hero-image { aspect-ratio: 16 / 9; max-width: 520px; margin: 0 auto; }
    .hero-stat-row { justify-content: center; }
}
@media (max-width: 768px) {
    .inner-hero { padding: 20px 0 0; }
    .hero-stat-row { gap: 20px; margin-top: 16px; }
}
/* OEM page only: .mat-quickfacts (white card) overlaps -34px into the hero
   below it — give the compact hero enough bottom clearance to absorb that
   overlap without covering the CTA buttons. */
.page-template-template-oem .inner-hero { padding-bottom: 44px; }
@media (max-width: 900px) {
    .page-template-template-oem .inner-hero { padding-bottom: 0; }
}

/* Editorial split — image + text as a magazine spread, used for the
   founder story and "see this process" blocks. */
.editorial-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
/* Explicit order on both children (not just .reverse's media) — otherwise
   "reverse" had no effect on desktop: media was already last in source order,
   so giving it order:2 alone didn't move it past a text block sitting at the
   default order:0. */
.editorial-split .editorial-text { order: 1; }
.editorial-split .editorial-media { order: 2; }
.editorial-split.reverse .editorial-text { order: 2; }
.editorial-split.reverse .editorial-media { order: 1; }
.editorial-split .editorial-kicker {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.editorial-split .editorial-text h2 { font-size: 1.9rem; margin-bottom: 16px; }
.editorial-split .editorial-text p { margin-bottom: 14px; }
.editorial-split .editorial-quote {
    border-left: 3px solid var(--color-wood);
    padding-left: 18px;
    font-style: italic;
    color: var(--color-charcoal);
    font-size: 1.08rem;
    margin: 18px 0;
}
.editorial-media img {
    width: 100%;
    aspect-ratio: 4 / 3.1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    display: block;
}
@media (max-width: 900px) {
    .editorial-split, .editorial-split.reverse { grid-template-columns: 1fr; }
    .editorial-split.reverse .editorial-media { order: 0; }
}

/* Asymmetric photo mosaic — replaces the uniform factory-gallery grid
   with one lead photo + up to a 2x2 supporting cluster, so real photos
   read as proof instead of a stock thumbnail wall. Row count and the
   lead's row-span are computed in PHP as explicit pixel tracks (see
   ehf_photo_mosaic()), so the two columns always line up exactly —
   no nested-grid percentage-height drift, no overlap. */
.photo-mosaic {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 14px;
}
.photo-mosaic.mosaic-solo { grid-template-columns: 1fr; }
.photo-mosaic .mosaic-lead { grid-column: 1; grid-row: 1 / -1; }
/* Supporting photos get an explicit grid-column/grid-row inline style
   from PHP (see ehf_photo_mosaic()) — deterministic per-item placement,
   not CSS auto-placement, so an odd trailing photo reliably spans both
   right-hand columns instead of leaving a gap. */
.photo-mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow-sm); }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-mosaic.mosaic-solo img { aspect-ratio: 16/8; height: auto; }
.photo-mosaic figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 18px 12px;
    background: linear-gradient(0deg, rgba(15,20,15,.72) 0%, rgba(15,20,15,0) 100%);
    color: #fff;
    font-size: 0.8rem;
}
.photo-mosaic .mosaic-lead figcaption { font-size: 0.92rem; padding: 22px 22px 16px; }
@media (max-width: 900px) {
    .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none !important; }
    .photo-mosaic .mosaic-lead { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .photo-mosaic .mosaic-lead img { aspect-ratio: 16/9; height: auto; }
    /* Reset the desktop inline per-item placement and let a plain 2-col
       auto-flow grid handle mobile; the trailing odd photo spans full width. */
    .photo-mosaic figure:not(.mosaic-lead) { grid-column: auto !important; grid-row: auto !important; height: 180px; }
    /* mosaic-lead is always the 1st child, so an odd count of supporting
       photos (1 or 3) makes the LAST child's overall sibling index even. */
    .photo-mosaic figure:not(.mosaic-lead):last-child:nth-child(even) { grid-column: 1 / -1 !important; }
}
@media (max-width: 560px) {
    .photo-mosaic { grid-template-columns: 1fr !important; }
    .photo-mosaic figure:not(.mosaic-lead) { height: 200px; }
}
/* Hover zoom — mirrors .photo-grid-uniform; both open the shared lightbox below */
.photo-mosaic figure { cursor: zoom-in; }
.photo-mosaic img { transition: transform 0.6s; }
.photo-mosaic figure:hover img { transform: scale(1.05); }
.photo-grid-uniform figure { cursor: zoom-in; }

/* ===== Photo lightbox (mosaic + uniform grid, built in main.js) ===== */
.ehf-lb {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    padding: 56px 64px;
    background: rgba(15, 20, 15, 0.93);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.ehf-lb.ehf-lb-open { opacity: 1; visibility: visible; }
.ehf-lb-img {
    max-width: 100%;
    max-height: calc(100% - 40px);
    object-fit: contain;
    border-radius: 8px;
    transition: opacity 0.2s ease;
}
.ehf-lb-footer {
    display: flex;
    align-items: baseline;
    gap: 16px;
    color: #fff;
}
.ehf-lb-caption { font-size: 0.92rem; }
.ehf-lb-counter { font-size: 0.8rem; opacity: 0.6; }
.ehf-lb-close, .ehf-lb-prev, .ehf-lb-next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ehf-lb-close:hover, .ehf-lb-prev:hover, .ehf-lb-next:hover { background: rgba(255, 255, 255, 0.22); }
.ehf-lb-close { top: 16px; right: 16px; }
.ehf-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.ehf-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) {
    .ehf-lb { padding: 48px 10px 56px; }
    /* Keep arrows out of the photo area on small screens; swipe also works */
    .ehf-lb-prev, .ehf-lb-next { top: auto; bottom: 8px; transform: none; }
    .ehf-lb-prev { left: calc(50% - 56px); }
    .ehf-lb-next { right: calc(50% - 56px); }
}

/* Uniform photo grid — plain equal-size square cells (see ehf_photo_grid()),
   for sets of same-shape 1:1 product photos where the asymmetric mosaic
   above isn't a fit. Reuses the same figure/figcaption look as .photo-mosaic. */
.photo-grid-uniform {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.photo-grid-uniform figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    background: var(--color-cream);
    aspect-ratio: 1 / 1;
    transition: transform var(--transition), box-shadow var(--transition);
}
/* Border + shadow above keep the card edge visible even when the product
   photo itself has a white/near-white background — otherwise it disappears
   into the section's white background with nothing to show where it ends. */
.photo-grid-uniform figure:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.photo-grid-uniform img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s; }
.photo-grid-uniform figure:hover img { transform: scale(1.05); }
.photo-grid-uniform figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px 10px;
    background: linear-gradient(0deg, rgba(15,20,15,.72) 0%, rgba(15,20,15,0) 100%);
    color: #fff;
    font-size: 0.8rem;
}
@media (max-width: 700px) {
    .photo-grid-uniform { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .photo-grid-uniform { grid-template-columns: 1fr; }
}

/* Stat band — large-format numbers on a dark band, used once per page
   instead of small pill badges, so the hard proof points carry weight. */
.stat-band {
    background: var(--color-primary-dark);
    border-radius: 12px;
    padding: 40px 44px;
}
.stat-band .stat-band-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.stat-band .stat-band-item b {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.1rem;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 6px;
}
.stat-band .stat-band-item span {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .stat-band { padding: 28px 24px; }
    .stat-band .stat-band-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}

/* Single strong CTA band — one per page, replacing the repeated
   button-after-every-section pattern. */
.cta-band {
    background: var(--color-charcoal);
    border-radius: 14px;
    padding: 44px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.cta-band-text h3 { color: var(--color-white); font-size: 1.4rem; margin-bottom: 6px; max-width: 480px; }
.cta-band-text p { color: rgba(255,255,255,0.65); margin: 0; max-width: 480px; font-size: 0.94rem; }
@media (max-width: 576px) {
    .cta-band { padding: 30px 26px; }
}

/* Photo-led OEM product cards — same 8-card grid & links as before,
   but the product photo carries the card instead of plain text. */
.oemp-photo-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    aspect-ratio: 3 / 3.6;
    display: block;
}
.oemp-photo-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--transition);
}
.oemp-photo-card:hover img { transform: scale(1.05); }
.oemp-photo-card .oemp-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(15,20,15,.88) 0%, rgba(15,20,15,.25) 55%, rgba(15,20,15,0) 100%);
}
.oemp-photo-card .oemp-photo-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 20px 20px 18px;
    color: #fff;
}
.oemp-photo-card .oemp-photo-body h4 { color: #fff; font-size: 1.02rem; margin-bottom: 6px; }
.oemp-photo-card .oemp-photo-body p { color: rgba(255,255,255,0.82); font-size: 0.8rem; margin: 0; line-height: 1.5; }
.oemp-photo-card.oemp-card-cta {
    background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.oemp-photo-card.oemp-card-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.oemp-photo-card.oemp-card-cta .oemp-cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    margin-bottom: 14px;
}
.oemp-photo-card.oemp-card-cta h4 { color: var(--color-white); font-size: 1.02rem; margin-bottom: 8px; }
.oemp-photo-card.oemp-card-cta p { color: rgba(255,255,255,0.82); font-size: 0.85rem; margin: 0; }
/* Fallback for a product line whose photo hasn't been uploaded yet */
.oemp-photo-card--noimg {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: flex-end;
    padding: 20px;
}
.oemp-photo-card--noimg .oemp-photo-body { position: static; padding: 0; color: var(--color-text); }
.oemp-photo-card--noimg .oemp-photo-body h4 { color: var(--color-charcoal); }
.oemp-photo-card--noimg .oemp-photo-body p { color: var(--color-text-light); }
@media (max-width: 900px) {
    .photo-mosaic { border-radius: 10px; }
}

/* ===== Front-page full-bleed banner hero =====
   banner.webp (2560×1080) sits right-anchored at its natural aspect
   ratio, so the products are never vertically cropped or blown up by a
   cover-fit. The media wrapper's ::after blends the photo's left edge
   into the hero's solid brand green (gradient is sized to the IMAGE, so
   the blend holds on any screen width); the hero's ::before adds a left
   scrim that keeps the copy readable. */
/* Height tracks the viewport width (~36.5vw) so the right-anchored,
   natural-ratio image grows wide enough to reach the text zone — its
   built-in sketch texture fills what would otherwise be a flat green
   strip on the left. */
.hero--banner {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: clamp(520px, 36.5vw, 900px);
    /* asymmetric padding biases the block upward, into the emptier top-left */
    padding: 48px 0 104px;
    background: var(--color-primary);
}
/* Replace the base hero's single decorative circle with two soft circles
   over the hero's left side — same device as the inner-page heroes, here
   filling the quiet zone around the copy (kept within the left ~40% so
   they never wash out the product photo) */
.hero--banner::after {
    content: '';
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle 340px at 4% 6%, rgba(255,255,255,0.055) 99%, rgba(255,255,255,0) 100%),
        radial-gradient(circle 230px at 27% 108%, rgba(255,255,255,0.045) 99%, rgba(255,255,255,0) 100%);
}
.hero-banner-media {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 2560 / 1080;
    max-width: 100%;
}
.hero-banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}
.hero-banner-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-primary) 0%, rgba(74,124,89,0) 32%);
}
/* Readability scrim over the photo, under the text — darker than the
   brand green so the left side visibly deepens and the white copy pops.
   The bottom-left ellipse additionally tones down the chalk sketches
   below the buttons without dimming the products on the right. */
.hero--banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 920px 440px at 30% 106%, rgba(30,52,38,0.58) 0%, rgba(30,52,38,0) 72%),
        linear-gradient(90deg, rgba(30,52,38,0.62) 0%, rgba(30,52,38,0.38) 38%, rgba(30,52,38,0) 62%);
}
/* width:100% — as a flex item the container otherwise shrinks to fit its
   content and drifts toward the middle instead of aligning with the nav.
   The wider max-width pulls the copy toward the left edge on big screens
   (deliberately past the nav's 1200px container) so the hero's left side
   doesn't read as empty. */
.hero--banner .container {
    width: 100%;
    max-width: 1680px;
    position: relative;
    z-index: 2;
}
.hero--banner .hero-content { max-width: 800px; }
/* Larger type scale than the base hero — the block has a full-height
   banner to hold its own against, not a half-column */
.hero--banner .hero-subtitle {
    font-size: 0.92rem;
    letter-spacing: 0.14em;
}
.hero--banner h1 {
    font-size: clamp(2.4rem, 3.6vw, 4.1rem);
    line-height: 1.14;
    margin-bottom: 20px;
}
.hero--banner p {
    max-width: 700px;
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 22px;
}
/* Ticked selling points — give the copy vertical rhythm and B2B scannability */
.hero-points {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    display: grid;
    gap: 13px;
}
.hero-points li {
    position: relative;
    padding-left: 32px;
    font-size: 1.04rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
}
.hero-points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mid-size desktops / large tablets (Nest Hub Max 1280, laptops ~1366) —
   the full desktop overlay is tuned for 1600px+; between 1025 and 1400px the
   800px copy column pushes right into the product photo so text and products
   read as one crowded mass. Tighten the copy column, drop the type scale one
   notch, deepen the left scrim, and nudge the products right so they separate
   again without removing any content. */
@media (min-width: 1025px) and (max-width: 1400px) {
    .hero--banner {
        min-height: clamp(460px, 52vh, 620px);
        padding: 40px 0 96px;
    }
    .hero--banner .hero-content { max-width: 600px; margin-left: 40px;}
    .hero--banner h1 {
        font-size: clamp(2.2rem, 3vw, 2.9rem);
        margin-bottom: 16px;
    }
    .hero--banner p {
        font-size: 1.05rem;
        line-height: 1.6;
        margin-bottom: 18px;
        max-width: 560px;
    }
    .hero-points { gap: 10px; margin-bottom: 28px; }
    .hero-points li { font-size: 0.98rem; }
    /* widen and deepen the copy-side scrim: the products now sit closer, so
       the words need a stronger backing to stay readable */
    .hero--banner::before {
        background:
            radial-gradient(ellipse 760px 420px at 26% 106%, rgba(30,52,38,0.6) 0%, rgba(30,52,38,0) 70%),
            linear-gradient(90deg, rgba(30,52,38,0.66) 0%, rgba(30,52,38,0.42) 34%, rgba(30,52,38,0) 56%);
    }
    /* push the composition right so the large hero brush clears the copy */
    .hero-banner-media img { object-position: 78% center; }
}

/* Tablet: photo area shrinks — strengthen the scrim so text never fights
   the products */
@media (max-width: 1024px) {
    .hero--banner::before {
        background: linear-gradient(90deg, rgba(74,124,89,0.95) 0%, rgba(74,124,89,0.8) 45%, rgba(74,124,89,0.25) 80%);
    }
}

/* Mobile: same image behind a full green mask, content centered */
@media (max-width: 768px) {
    .hero--banner {
        min-height: 0;
        padding: 64px 0;
        text-align: center;
    }
    .hero-banner-media {
        aspect-ratio: auto;
        width: 100%;
    }
    .hero-banner-media img { object-position: 68% center; }
    .hero-banner-media::after { content: none; }
    .hero--banner::after { display: none; }
    .hero--banner::before { background: rgba(59,99,71,0.82); }
    .hero--banner .hero-content { max-width: 100%; }
    .hero--banner .hero-buttons { justify-content: center; }
    .hero--banner h1 { font-size: 2.1rem; }
    .hero--banner p { max-width: 100%; font-size: 1.05rem; }
    /* Centered block, left-aligned ticks — centered multi-line list items
       read poorly on narrow screens */
    .hero-points {
        max-width: 420px;
        margin: 0 auto 30px;
        text-align: left;
    }
}

/* ============================================================
   OEM PAGE OVERRIDES (scoped — do not affect homepage / about /
   materials / product pages that share these classes)
   ============================================================ */

/* --- Brands wall: light variant ---------------------------------
   The shared .clients-subblock is a full-bleed dark-green band built
   for the cream homepage. On the OEM page it lands directly under the
   green hero (green-on-green) and the white knockout logos read as
   washed out. This variant drops the green band and renders a clean
   white-card trust wall with dark monochrome logos instead. */
.clients-subblock--light {
    margin: 0;
    padding: 0;
    background: transparent;
}
.clients-subblock--light h3 {
    color: var(--color-charcoal);
    margin-bottom: 26px;
}
.clients-subblock--light .client-logo-item {
    flex: 0 1 180px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    min-height: 76px;
    padding: 16px 22px;
}
.clients-subblock--light .client-logo-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
/* Source logos are white-on-transparent → brightness(0) flattens them to
   a dark silhouette so they're legible on the white cards. */
.clients-subblock--light .client-logo-item img {
    filter: brightness(0);
    opacity: 0.5;
    max-height: 34px;
    max-width: 100%;
    transform: none;
}
.clients-subblock--light .client-logo-item:hover img {
    filter: brightness(0);
    opacity: 0.85;
    transform: none;
}

/* --- Packaging photo grid: smaller tiles, clearer edges ----------
   The shared .photo-grid-uniform uses tall 1:1 squares whose hairline
   border vanishes behind the white packaging shots. Scoped here to a
   shorter 4:3 tile with a stronger frame so each card reads distinctly. */
.oem-packaging-grid .photo-grid-uniform {
    gap: 18px;
}
.oem-packaging-grid .photo-grid-uniform figure {
    aspect-ratio: 4 / 3;
    border: 1px solid #d9d5cb;
    box-shadow: 0 2px 12px rgba(20, 30, 20, 0.07);
    border-radius: 12px;
}
.oem-packaging-grid .photo-grid-uniform figure:hover {
    border-color: var(--color-wood);
}
@media (max-width: 700px) {
    .oem-packaging-grid .photo-grid-uniform figure { aspect-ratio: 3 / 2; }
}

/* ============================================================
   TRUST BAR + PROOF CASES + MADE-TO-ORDER
   Shared proof modules used on category archives, material hubs,
   product and case pages. Kept deliberately compact: these run on
   landing pages that already carry their own long-form copy.
   ============================================================ */

.trust-bar {
    padding: 34px 0 30px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    background: var(--color-bg-alt, #FAF8F5);
}
/* Material collection pages: drop the hairline top seam where the band meets the section above. */
.page-template-page-material-collection .trust-bar { border-top: 0; }
.trust-bar-block + .trust-bar-block {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px dashed rgba(0, 0, 0, .09);
}
.trust-bar-label {
    display: block;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-text-light, #8A8178);
    margin-bottom: 18px;
}
.trust-bar-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 34px;
}
.trust-bar-logo img {
    display: block;
    height: 30px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    /* Client logo files are white-on-transparent, so they have to be inverted
       to dark silhouettes to show up on a light band. grayscale() does nothing
       to a white PNG. Same treatment as .client-logo-item img on the homepage. */
    filter: brightness(0);
    opacity: .55;
    transition: opacity .25s ease;
}
.trust-bar-logo img:hover {
    opacity: .9;
}
.trust-bar-cert img {
    height: 44px;
    max-width: 92px;
    filter: none;
    opacity: .92;
}
.trust-bar-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--color-primary, #7A5C3E);
    text-decoration: none;
}
.trust-bar-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .trust-bar { padding: 26px 0 24px; }
    .trust-bar-logos { gap: 12px 22px; }
    .trust-bar-logo img { height: 24px; max-width: 92px; }
    .trust-bar-cert img { height: 36px; max-width: 76px; }
}

/* ---------- Proof cases ---------- */

.proof-cases { padding: 64px 0; }
.proof-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.proof-case {
    background: var(--color-white, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.proof-case:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
}
.proof-case-link { display: block; text-decoration: none; color: inherit; }
.proof-case-media { position: relative; aspect-ratio: 16 / 10; background: #EFEAE3; overflow: hidden; }
.proof-case-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-case-country {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, .94);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.proof-case-body { padding: 20px 20px 22px; }
.proof-case-kicker {
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-light, #8A8178);
    margin-bottom: 8px;
}
.proof-case-title {
    font-size: 1.02rem;
    line-height: 1.4;
    margin: 0 0 10px;
}
.proof-case-result {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--color-primary-dark, #5C4530);
    font-weight: 600;
    margin: 0 0 14px;
}
.proof-case-facts { list-style: none; margin: 0 0 14px; padding: 0; }
.proof-case-facts li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
    font-size: .84rem;
}
.proof-case-facts span { color: var(--color-text-light, #8A8178); flex: 0 0 auto; }
.proof-case-facts strong { text-align: right; font-weight: 600; }
.proof-case-more { font-size: .86rem; font-weight: 600; color: var(--color-primary, #7A5C3E); }
.proof-cases-foot { text-align: center; margin-top: 32px; }

/* ---------- Made-to-order (replaces the old "coming soon" empty state) ---------- */

.pcat-madetoorder {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 28px;
    border: 1px dashed rgba(0, 0, 0, .16);
    border-radius: 18px;
    background: var(--color-bg-alt, #FAF8F5);
}
.pcat-madetoorder h2 { margin-bottom: 14px; }
.pcat-madetoorder p { margin: 0 auto 12px; max-width: 60ch; line-height: 1.7; }
.pcat-madetoorder-sub { color: var(--color-text-light, #8A8178); font-size: .93rem; }
.pcat-madetoorder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}

/* ---------- Mega-menu promo title (was an out-of-order <h4>) ---------- */

.dd-products-right .dd-products-right-title {
    display: block;
    color: var(--color-white, #fff);
    font-size: 1.25rem;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   PRODUCT PAGE — sidebar TOC, option chips, packaging, ordering
   ============================================================ */

/* ---------- Sidebar table of contents (scroll-spy) ---------- */

.sp-toc-card h4 { margin-bottom: 12px; }
.sp-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--color-border, #E7E1D8);
}
.sp-toc-list li { margin: 0; }
.sp-toc-list a {
    display: block;
    padding: 7px 0 7px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: .86rem;
    line-height: 1.35;
    color: var(--color-text-light, #8A8178);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}
.sp-toc-list a:hover { color: var(--color-primary, #7A5C3E); }
.sp-toc-list a.is-active {
    color: var(--color-primary-dark, #5C4530);
    border-left-color: var(--color-primary, #7A5C3E);
    font-weight: 600;
}

/* ---------- Option chips (colourways / bristles) ---------- */

.sp-chip-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
}
.sp-chip {
    padding: 8px 16px;
    border: 1px solid var(--color-border, #E7E1D8);
    border-radius: 999px;
    background: var(--color-white, #fff);
    font-size: .88rem;
    font-weight: 500;
    color: var(--color-text, #3A342E);
}
.sp-section-note {
    font-size: .87rem;
    color: var(--color-text-light, #8A8178);
    font-style: italic;
    margin: 0;
}

/* ---------- Packaging grid ---------- */

.sp-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
}
.sp-pack-card {
    border: 1px solid var(--color-border, #E7E1D8);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-white, #fff);
    display: flex;
    flex-direction: column;
}
.sp-pack-img {
    aspect-ratio: 4 / 3;
    background: #F3EFE9;
    overflow: hidden;
}
.sp-pack-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.sp-pack-card:hover .sp-pack-img img { transform: scale(1.05); }
.sp-pack-card strong {
    display: block;
    padding: 14px 14px 4px;
    font-size: .94rem;
}
.sp-pack-card span {
    display: block;
    padding: 0 14px 16px;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--color-text-light, #8A8178);
}

/* ---------- Samples / production / shipping ---------- */

.sp-order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.sp-order-card {
    border: 1px solid var(--color-border, #E7E1D8);
    border-radius: 12px;
    padding: 20px;
    background: var(--color-white, #fff);
}
.sp-order-card h4 {
    margin: 0 0 10px;
    font-size: 1rem;
}
.sp-order-card p {
    margin: 0 0 10px;
    font-size: .88rem;
    line-height: 1.65;
    color: var(--color-text-light, #8A8178);
}
.sp-order-meta {
    margin: 0 !important;
    padding-top: 10px;
    border-top: 1px solid var(--color-border, #E7E1D8);
    font-size: .84rem !important;
}
.sp-order-meta strong { color: var(--color-text, #3A342E); }

@media (max-width: 900px) {
    /* The sidebar stacks under the content on narrow screens, where a
       sticky table of contents would just take up a screenful. */
    .sp-toc-card { display: none; }
}

/* ============================================================
   PRODUCT PAGE ROUND 2 — working sticky sidebar, colour swatches,
   bristle photo cards
   ============================================================ */

/* ---------- Sticky sidebar, actually sticky ----------
   .sp-content-layout used align-items:start, which shrank the <aside> to its
   content height. A sticky child can only travel inside a container that is
   taller than itself, so with an equal-height container it never engaged.
   Stretching just the sidebar column gives it that room. */
.sp-sidebar {
    align-self: stretch;
    height: 100%;
}
.sp-sidebar-inner {
    position: -webkit-sticky;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.sp-sidebar-inner::-webkit-scrollbar { width: 6px; }
.sp-sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .14);
    border-radius: 3px;
}

/* ---------- Colour swatches ---------- */

.sp-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 18px 14px;
    margin-bottom: 16px;
}
.sp-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.sp-swatch-chip {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 76px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12),
                0 3px 10px rgba(0, 0, 0, .10);
    transition: transform .2s ease;
}
.sp-swatch:hover .sp-swatch-chip { transform: scale(1.06); }
.sp-swatch-chip-custom {
    background: conic-gradient(#D9A3A3, #CF8A2E, #6B7C3F, #3B5A78, #722F37, #D9A3A3);
    position: relative;
}
.sp-swatch-chip-custom::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.sp-swatch-name {
    font-size: .8rem;
    line-height: 1.3;
    color: var(--color-text-light, #8A8178);
}
.sp-swatch-custom .sp-swatch-name {
    color: var(--color-primary, #7A5C3E);
    font-weight: 600;
}

/* ---------- Bristle photo cards ---------- */

.sp-bristle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
    margin-bottom: 16px;
}
.sp-bristle-card {
    border: 1px solid var(--color-border, #E7E1D8);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-white, #fff);
    display: flex;
    flex-direction: column;
}
.sp-bristle-img {
    aspect-ratio: 4 / 3;
    background: #F3EFE9;
    overflow: hidden;
}
.sp-bristle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.sp-bristle-card:hover .sp-bristle-img img { transform: scale(1.06); }
.sp-bristle-card strong {
    display: block;
    padding: 14px 14px 5px;
    font-size: .92rem;
    line-height: 1.35;
}
.sp-bristle-card span {
    display: block;
    padding: 0 14px 16px;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--color-text-light, #8A8178);
}

@media (max-width: 900px) {
    .sp-sidebar-inner {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ============================================================
   4-PER-ROW PRODUCT GRIDS (category pages, material pages, related)
   Overrides the earlier auto-fill declarations so a full desktop
   row shows four products instead of three. Responsive down to 1.
   ============================================================ */
.product-grid,
.pcat-grid {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
    .product-grid,
    .pcat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .product-grid,
    .pcat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
    .product-grid,
    .pcat-grid { grid-template-columns: 1fr; }
}
/* On material pages the "shop by type" cards and the real product grid
   are both tinted sections; drop the seam between them so they read as
   one product zone rather than two boxes with a gap. */
.mat-products + .mat-products-list { margin-top: -1px; }
.mat-products-list { padding-top: 0; }

/* ============================================================
   DETAIL PAGE — SECTION CARDS + READABLE DESCRIPTION
   Each content block becomes a distinct white card on the tinted
   page, so a buyer can see where one section ends and the next
   begins; the description reads as chapters instead of a wall.
   ============================================================ */
.sp-content-zone { background: var(--color-cream); }
.sp-content-main > .sp-section {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 30px 34px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(30, 30, 30, 0.03);
}
@media (max-width: 640px) {
    .sp-content-main > .sp-section { padding: 22px 20px; }
}

/* Description: comfortable measure, chapter-style subheads ---- */
.sp-desc-content { font-size: 1rem; line-height: 1.8; color: var(--color-text); }
.sp-desc-content > p { margin-bottom: 1.15em; }
.sp-desc-content > p:first-of-type { font-size: 1.07rem; }
.sp-desc-content h3 {
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 1.9em 0 0.55em;
    padding-left: 14px;
    border-left: 3px solid var(--color-primary);
}
.sp-desc-content ul { margin: 0 0 1.15em 1.15em; }
.sp-desc-content li { margin-bottom: 0.4em; line-height: 1.7; }

/* 图文结合: float a product photo so copy wraps around it -------- */
.sp-desc-figure {
    float: right;
    width: 290px;
    max-width: 40%;
    margin: 4px 0 22px 30px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-cream);
}
.sp-desc-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) {
    .sp-desc-figure { float: none; width: 100%; max-width: 100%; margin: 0 0 20px; }
}

/* ============================================================
   LOAD MORE button + hidden cards
   ============================================================ */
.ehf-hidden { display: none !important; }
.ehf-loadmore-wrap { text-align: center; margin-top: 34px; }
.ehf-loadmore-btn { min-width: 260px; }

/* 图文结合: gallery photos interleaved through the description, sides
   alternating so the copy wraps around them like an article. */
.sp-desc-inline {
    width: 290px;
    max-width: 42%;
    margin: 6px 0 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-cream);
}
.sp-desc-inline img { display: block; width: 100%; height: auto; }
.sp-desc-inline--right { float: right; margin-left: 30px; }
.sp-desc-inline--left  { float: left;  margin-right: 30px; }
.sp-desc-content h3 { clear: both; }
@media (max-width: 620px) {
    .sp-desc-inline,
    .sp-desc-inline--right,
    .sp-desc-inline--left {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px;
    }
}

/* Fix: do NOT clear h3 (it would drop the heading below the floated
   photo instead of wrapping); just contain the floats in the block. */
.sp-desc-content h3 { clear: none; }
.sp-desc-content::after { content: ""; display: block; clear: both; }

/* Bristle = clean single row of 4; Packaging (6, fixed) = clean rows of 3,
   so neither section leaves an orphan card wrapping underneath. */
.sp-bristle-grid { grid-template-columns: repeat(4, 1fr); }
.sp-pack-grid    { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
    .sp-bristle-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .sp-bristle-grid,
    .sp-pack-grid { grid-template-columns: repeat(2, 1fr); }
}


/* FIX: inline description photos carried a 14px top/bottom margin from
   .sp-desc-content img, revealing the figure background as two empty
   bands. Zero it so the photo fills the frame square. */
.sp-desc-inline img { margin: 0; }

/* FIX: proof-cases stretched a single case card to full width (huge).
   Cap card width and center so 1, 2 or 3 cases all look right. */
.proof-cases-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
}
.proof-cases-grid:has(.proof-case:only-child) {
    grid-template-columns: minmax(0, 380px);
}

/* ===== Product page: material filter tabs ===== */
.prod-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}
.prod-tab {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-light);
    background: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    padding: 9px 22px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.prod-tab span { opacity: 0.55; font-weight: 500; margin-left: 2px; }
.prod-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.prod-tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.prod-tab.is-active span { opacity: 0.85; }
.prod-loadmore-wrap { margin-top: 40px; }

/* ============================================================
   OEM / ODM — Bento grid (replaces old single-column + lone image)
   ============================================================ */
.oem-bento {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    grid-template-areas:
        "img logo shape"
        "img color packg"
        "label label cta";
    gap: 16px;
    margin-top: 10px;
}
.oem-bento-img { grid-area: img; border-radius: 18px; overflow: hidden; min-height: 320px; }
.oem-bento-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oem-ga-logo { grid-area: logo; }
.oem-ga-shape { grid-area: shape; }
.oem-ga-color { grid-area: color; }
.oem-ga-packg { grid-area: packg; }
.oem-ga-label { grid-area: label; }
.oem-bento-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.oem-bento-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 14px 32px rgba(74, 124, 89, .10);
    transform: translateY(-3px);
}
.oem-bento-ic {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px;
    background: rgba(74, 124, 89, .10);
    color: var(--color-primary);
    margin-bottom: 4px;
}
.oem-bento-card strong { font-size: 1.02rem; color: var(--color-charcoal); }
.oem-bento-desc { font-size: .86rem; color: var(--color-text-light); line-height: 1.55; }
.oem-bento-cta {
    grid-area: cta;
    background: linear-gradient(150deg, var(--color-cta) 0%, var(--color-cta-hover) 100%);
    border-radius: 18px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.oem-bento-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(212, 135, 77, .32); }
.oem-bento-cta strong { color: #fff; font-size: 1.12rem; font-family: var(--font-heading); }
.oem-bento-cta span { color: rgba(255, 255, 255, .92); font-size: .88rem; font-weight: 600; }
@media (max-width: 900px) {
    .oem-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "img img"
            "logo shape"
            "color packg"
            "label label"
            "cta cta";
    }
    .oem-bento-img { min-height: 240px; }
}
@media (max-width: 560px) {
    .oem-bento {
        grid-template-columns: 1fr;
        grid-template-areas: "img" "logo" "shape" "color" "packg" "label" "cta";
    }
}

/* ============================================================
   PRODUCTS megamenu — grouped link columns + featured card
   (replaces the material-card + heavy green slab layout)
   ============================================================ */
.dd-mega {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr 300px;
    align-items: stretch;
    padding: 28px 24px 30px;
}
.dd-col {
    padding: 4px 30px;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}
.dd-col:first-child { padding-left: 10px; }
.dd-col:last-of-type { border-right: none; }
.dd-col-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: 14px;
}
.dd-col-link {
    display: inline-flex;
    align-items: center;
    font-size: .92rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    padding: 7px 0;
    transition: color .2s ease, transform .2s ease;
}
.dd-col-link:hover { color: var(--color-primary); transform: translateX(3px); }
.dd-col-core { font-weight: 600; }
.dd-mega .dd-core {
    display: inline-flex;
    align-items: center;
    font-size: .56rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    padding: 2px 8px 3px;
    border-radius: 9px;
    margin-left: 8px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dd-col-all {
    margin-top: auto;
    padding-top: 14px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color .2s ease;
}
.dd-col-all:hover { color: var(--color-primary-dark); }
.dd-feat {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    margin-left: 24px;
    transition: box-shadow .25s ease, transform .25s ease;
}
.dd-feat:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.dd-feat-img { display: block; height: 132px; overflow: hidden; }
.dd-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.dd-feat:hover .dd-feat-img img { transform: scale(1.05); }
.dd-feat-body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 5px; }
.dd-feat-body strong { font-size: .98rem; color: var(--color-charcoal); font-family: var(--font-heading); }
.dd-feat-desc { font-size: .82rem; color: var(--color-text-light); line-height: 1.5; }
.dd-feat-cta { font-size: .85rem; font-weight: 700; color: var(--color-primary); margin-top: 3px; }
@media (max-width: 1024px) {
    .dd-mega { grid-template-columns: 1fr 1fr; max-width: 680px; row-gap: 4px; }
    .dd-col { border-right: none; }
    .dd-col:nth-of-type(odd) { border-right: 1px solid var(--color-border); }
    .dd-feat { grid-column: 1 / -1; flex-direction: row; align-items: center; margin: 12px 0 0; }
    .dd-feat-img { width: 140px; height: 96px; flex: 0 0 auto; }
    .dd-feat-body { flex: 1; }
}