/* CDP Lanka (Pvt) Ltd — site styles
   Based on Christic Lanka Polymers design system */

:root {
    /* CDP Lanka primary — dark navy blue (Christic nav / CTA palette) */
    --primary: #1a3660;
    --primary-dark: #122848;
    --primary-light: #e8eef4;
    --primary-rgb: 26, 54, 96;

    /* Legacy aliases — primary was green; now maps to navy site-wide */
    --green: var(--primary);
    --green-dark: var(--primary-dark);
    --green-light: var(--primary-light);

    /* Christic logo brand accents — industries carousel only */
    --brand-green: #1a7f4e;
    --brand-green-dark: #145a38;
    --brand-green-light: #e8f5ee;

    --brand-red: #d4272d;
    --brand-red-dark: #ad1f24;
    --brand-red-light: #fce9ea;
    --brand-red-rgb: 212, 39, 45;
    --brand-blue: #1a3660;
    --brand-blue-dark: #122848;
    --brand-blue-light: #e3eef8;
    --footer-accent: #5a8fc4;
    --footer-accent-soft: #7eb0dc;
    --ink: #1a1f2e;
    --muted: #5c6478;
    --border: #e4e8ef;
    --surface: #ffffff;
    --bg-muted: #f4f6f9;
    --font-head: "Manrope", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --radius: 8px;
    --shadow: 0 8px 30px rgba(26, 31, 46, 0.08);
    /* Individual product cards — dark magenta frame (distinct from category navy) */
    --product-card-border: #8b4590;
    --product-card-border-rgb: 139, 69, 144;
    /* Breakpoints (reference): sm 640 | md 768 | lg 992 | xl 1024 | 2xl 1200 */
    --touch-min: 44px;
    --header-height: 4.25rem;

    /* Fluid type scale — clamp(min, fluid, max) */
    --text-xs:   clamp(0.75rem,   1.2vw,  0.875rem);
    --text-sm:   clamp(0.875rem,  1.5vw,  1rem);
    --text-base: clamp(1rem,      1.8vw,  1.125rem);
    --text-lg:   clamp(1.125rem,  2vw,    1.25rem);
    --text-xl:   clamp(1.25rem,   2.5vw,  1.5rem);
    --text-2xl:  clamp(1.5rem,    3vw,    2rem);
    --text-3xl:  clamp(1.875rem,  4vw,    2.5rem);
    --text-4xl:  clamp(2.25rem,   5vw,    3.5rem);
    --text-5xl:  clamp(2.75rem,   6vw,    4.5rem);

    /* Fluid spacing scale */
    --space-1:  clamp(0.25rem,  0.5vw,  0.5rem);
    --space-2:  clamp(0.5rem,   1vw,    0.75rem);
    --space-3:  clamp(0.75rem,  1.5vw,  1rem);
    --space-4:  clamp(1rem,     2vw,    1.5rem);
    --space-6:  clamp(1.5rem,   3vw,    2rem);
    --space-8:  clamp(2rem,     4vw,    3rem);
    --space-12: clamp(3rem,     6vw,    5rem);
    --space-16: clamp(4rem,     8vw,    7rem);
    --space-section: clamp(3rem, 8vw,   8rem);
    --space-content: clamp(1rem, 3vw,   2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: clip;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

body.nav-open {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

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

.container {
    width: min(1180px, 100% - clamp(1rem, 4vw, 2rem));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.75rem 1rem;
    background: var(--green);
    color: #fff;
    z-index: 9999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Header */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    height: var(--header-height);
    min-height: var(--header-height);
    flex-shrink: 0;
}

.site-header > .container {
    height: 100%;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: var(--header-height);
    min-height: var(--header-height);
    max-height: var(--header-height);
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    height: 100%;
    margin-left: clamp(0.75rem, 2.5vw, 1.5rem);
}

.brand-logo,
.brand img.brand-logo {
    display: block;
    height: 3rem;
    width: auto;
    max-height: calc(var(--header-height) - 1rem);
}

.brand-flag {
    display: block;
    height: 2.15rem;
    width: auto;
    max-height: calc(var(--header-height) - 1.35rem);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 1;
    min-width: 0;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.05rem;
    min-width: 0;
}

.nav-list a {
    display: block;
    padding: 0.45rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    border-radius: var(--radius);
    white-space: nowrap;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
    color: var(--green);
    background: var(--green-light);
}

/* Language switcher */
.lang-switcher {
    position: relative;
    flex-shrink: 0;
}

.header-actions {
    display: none;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.lang-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--touch-min, 2.75rem);
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    font-family: "Noto Sans Sinhala", "Noto Sans Tamil", var(--font-body);
}

.lang-switcher-trigger::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.65;
}

.lang-switcher-trigger:hover,
.lang-switcher-trigger:focus-visible {
    border-color: var(--green);
    color: var(--green);
    outline: none;
}

.lang-switcher.is-open .lang-switcher-trigger {
    border-color: var(--green);
    color: var(--green);
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 500;
    min-width: 9.5rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    display: none;
}

.lang-switcher.is-open .lang-switcher-menu {
    display: block;
}

.lang-switcher-option {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    font-family: "Noto Sans Sinhala", "Noto Sans Tamil", var(--font-body);
}

.lang-switcher-option:hover,
.lang-switcher-option:focus-visible {
    background: var(--green-light);
    color: var(--green);
    outline: none;
}

.lang-switcher-option.is-active {
    background: var(--green-light);
    color: var(--green);
    font-weight: 700;
}

html[lang="si"] body {
    font-family: "Noto Sans Sinhala", var(--font-body);
}

html[lang="ta"] body {
    font-family: "Noto Sans Tamil", var(--font-body);
}

.btn {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.35rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

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

.btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.85);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

@keyframes btn-shine {
    0% {
        background-position: -350px center;
    }

    25% {
        background-position: calc(100% + 350px) center;
    }

    25.001% {
        background-position: -350px center;
    }

    100% {
        background-position: -350px center;
    }
}

@keyframes btn-border-shine {
    0% {
        background-position: 0% center;
    }

    25% {
        background-position: 100% center;
    }

    25.001% {
        background-position: 0% center;
    }

    100% {
        background-position: 0% center;
    }
}

@keyframes hero-btn-text-shine {
    0%,
    25.001%,
    100% {
        background-position: -350px center, center;
    }

    25% {
        background-position: calc(100% + 350px) center, center;
    }
}

@keyframes hero-btn-text-shine-filled {
    0%,
    25.001%,
    100% {
        background-position: -350px center, center, center;
    }

    25% {
        background-position: calc(100% + 350px) center, center, center;
    }
}

/* Nav "Get in touch" — multi-color shine only */
.btn-header {
    position: relative;
    overflow: hidden;
    border-color: transparent;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.6rem 1.1rem;
    font-size: 0.8125rem;
    background-color: var(--green);
    background-image: radial-gradient(
        circle closest-side,
        rgba(254, 155, 11, 0.85) 0%,
        rgba(255, 129, 228, 0.85) 50%,
        rgba(26, 54, 96, 0) 100%
    );
    background-size: 350px 350px;
    background-repeat: no-repeat;
    background-position: -350px center;
    animation: btn-shine 6s ease-in-out 2s infinite both;
}

.btn-header:hover {
    background-color: var(--green-dark);
    color: #fff;
    border-color: var(--green-dark);
}

/* Other CTAs — silver/white shine, half-cycle offset from header */
.btn-primary,
.catalog-cta .btn-primary,
.product-cta-band .btn-primary {
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(
        circle closest-side,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(232, 237, 244, 0.88) 45%,
        rgba(192, 200, 212, 0.35) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 350px 350px;
    background-repeat: no-repeat;
    background-position: -350px center;
    animation: btn-shine 6s ease-in-out 5s infinite both;
    border-color: transparent;
}

/* Hero Explore products — navy text shine on label only */
.hero-cta .btn-primary {
    position: relative;
    overflow: visible;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    border-color: var(--green);
    background-color: var(--green);
    background-image:
        radial-gradient(
            circle closest-side,
            rgba(26, 54, 96, 1) 0%,
            rgba(26, 54, 96, 0.55) 42%,
            rgba(26, 54, 96, 0) 100%
        ),
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(var(--green), var(--green));
    background-size: 350px 350px, 100% 100%, 100% 100%;
    background-position: -350px center, center, center;
    -webkit-background-clip: text, text, border-box;
    background-clip: text, text, border-box;
    animation: hero-btn-text-shine-filled 6s ease-in-out 5s infinite both;
}

/* Hero Request Quote — white text, navy border shine only */
.hero-cta .btn-secondary {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: visible;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    animation: none;
}

.hero-cta .btn-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.92) 44%,
        rgba(26, 54, 96, 1) 50%,
        rgba(255, 255, 255, 0.92) 56%,
        rgba(255, 255, 255, 0.92) 100%
    );
    background-size: 350% 100%;
    background-position: 0% center;
    animation: btn-border-shine 6s ease-in-out 5s infinite both;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.btn-primary:hover,
.catalog-cta .btn-primary:hover,
.product-cta-band .btn-primary:hover {
    background-color: var(--green-dark);
    color: #fff;
    border-color: var(--green-dark);
}

.hero-cta .btn-primary:hover {
    background-color: var(--green-dark);
    border-color: var(--green-dark);
    background-image:
        radial-gradient(
            circle closest-side,
            rgba(26, 54, 96, 1) 0%,
            rgba(26, 54, 96, 0.55) 42%,
            rgba(26, 54, 96, 0) 100%
        ),
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(var(--green-dark), var(--green-dark));
    background-size: 350px 350px, 100% 100%, 100% 100%;
    background-position: -350px center, center, center;
    -webkit-background-clip: text, text, border-box;
    background-clip: text, text, border-box;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero-cta .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    -webkit-text-fill-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .btn-header,
    .btn-primary,
    .catalog-cta .btn-primary,
    .product-cta-band .btn-primary {
        animation: none;
        background-image: none;
    }

    .hero-cta .btn-primary {
        animation: none;
        color: #fff;
        -webkit-text-fill-color: #fff;
        background-image: none;
        background-color: var(--green);
    }

    .hero-cta .btn-secondary {
        color: #fff;
        -webkit-text-fill-color: #fff;
        background-image: none;
        border-color: rgba(255, 255, 255, 0.85);
    }

    .hero-cta .btn-secondary::before {
        animation: none;
        background: rgba(255, 255, 255, 0.85);
        background-size: 100% 100%;
    }
}

.btn-callback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: #fff;
    color: var(--primary);
    border: 2px solid var(--primary);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.75rem 1.35rem;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.25;
    box-sizing: border-box;
    min-height: calc(0.75rem * 2 + 1.25 * 0.875rem + 4px);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

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

.btn-callback-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.product-callback-row {
    margin: 0 0 1.75rem;
}

.callback-dialog {
    width: min(440px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow);
}

.callback-dialog::backdrop {
    background: rgba(14, 27, 43, 0.45);
}

.callback-dialog-inner {
    padding: 1.5rem;
}

.callback-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.callback-dialog-head h2 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    margin: 0;
}

.callback-dialog-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0.15rem;
}

.callback-dialog-close:hover {
    color: var(--ink);
}

.callback-form label {
    display: block;
    margin-bottom: 0.85rem;
}

.callback-form label span {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--ink);
}

.callback-form input,
.callback-form textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.callback-form .btn-callback {
    width: 100%;
    margin-top: 0.25rem;
}

/* Chat with us — floating widget */
.chat-widget {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
}

.chat-widget > * {
    pointer-events: auto;
}

.chat-fabs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-fabs-stack {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 3.5rem;
    min-height: 3.5rem;
}

.chat-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(26, 54, 96, 0.32);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}

.chat-fab--primary:hover,
.chat-fab--secondary:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 24px rgba(26, 54, 96, 0.38);
}

.chat-fab.is-active {
    background: var(--primary-dark);
    box-shadow: 0 8px 24px rgba(26, 54, 96, 0.4);
}

.chat-fab-icon {
    width: 1.55rem;
    height: 1.55rem;
}

a.chat-fab--whatsapp,
a.chat-fab--whatsapp:hover,
a.chat-fab--whatsapp:focus-visible {
    color: #25d366;
}

a.chat-fab--phone,
a.chat-fab--phone:hover,
a.chat-fab--phone:focus-visible,
button.chat-fab--chat,
button.chat-fab--chat:hover,
button.chat-fab--chat:focus-visible {
    color: #fff;
}

.chat-fab--primary {
    position: relative;
    z-index: 2;
}

.chat-fab--primary:hover {
    transform: translateY(-2px);
}

.chat-fab--secondary {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.chat-fabs-stack.is-expanded .chat-fab--phone {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-4.125rem);
}

.chat-fabs-stack.is-expanded .chat-fab--chat {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-8.25rem);
}

.chat-fabs-stack.is-expanded .chat-fab--phone:hover {
    transform: translateY(-4.125rem) scale(1.04);
}

.chat-fabs-stack.is-expanded .chat-fab--chat:hover {
    transform: translateY(-8.25rem) scale(1.04);
}

.chat-fabs-stack.is-expanded {
    min-height: 11.75rem;
}

@media (hover: hover) and (pointer: fine) {
    .chat-fabs-stack:hover .chat-fab--phone,
    .chat-fabs-stack:focus-within .chat-fab--phone {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-4.125rem);
    }

    .chat-fabs-stack:hover .chat-fab--chat,
    .chat-fabs-stack:focus-within .chat-fab--chat {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-8.25rem);
    }

    .chat-fabs-stack:hover .chat-fab--phone:hover,
    .chat-fabs-stack:focus-within .chat-fab--phone:hover {
        transform: translateY(-4.125rem) scale(1.04);
    }

    .chat-fabs-stack:hover .chat-fab--chat:hover,
    .chat-fabs-stack:focus-within .chat-fab--chat:hover {
        transform: translateY(-8.25rem) scale(1.04);
    }

    .chat-fabs-stack:hover,
    .chat-fabs-stack:focus-within {
        min-height: 11.75rem;
    }
}

@media (hover: none), (pointer: coarse), (max-width: 767px) {
    .chat-widget {
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        right: calc(1rem + env(safe-area-inset-right, 0px));
    }
}

.chat-panel {
    width: min(20rem, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface);
    box-shadow: 0 12px 40px rgba(26, 31, 46, 0.18);
    overflow: hidden;
}

.chat-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    background: var(--primary);
    color: #fff;
}

.chat-panel-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
}

.chat-panel-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

.chat-panel-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.chat-panel-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chat-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem;
}

.chat-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.chat-action svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.chat-action:hover {
    background: var(--bg-muted);
    border-color: #cfd6e0;
    color: var(--ink);
}

.chat-action--whatsapp svg {
    fill: #25d366;
}

.chat-action--callback {
    border-color: var(--primary);
    color: var(--primary);
}

.chat-action.btn-callback {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border-width: 1px;
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--surface);
}

.chat-action.btn-callback:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.chat-panel-hours {
    margin: 0;
    padding: 0 0.875rem 0.875rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
}

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

.nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px 0;
    background: var(--ink);
}

/* Hero — full-width image + centered copy */
.hero {
    position: relative;
    min-height: clamp(420px, 58vh, 560px);
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-slider {
    z-index: 0;
}

.hero-slider-track {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.85s ease;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.06);
}

.hero-slide.is-active img {
    animation: hero-slide-drift 18s ease-in-out infinite alternate;
}

@keyframes hero-slide-drift {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1.12);
    }
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(var(--primary-rgb), 0.82) 0%,
        rgba(26, 31, 46, 0.68) 100%
    );
    pointer-events: none;
}

.hero-slider-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, transform 0.2s ease;
}

.hero-slider-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.04);
}

.hero-slider-btn--prev {
    left: max(0.75rem, env(safe-area-inset-left, 0px));
}

.hero-slider-btn--next {
    right: max(0.75rem, env(safe-area-inset-right, 0px));
}

.hero-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
    transform: translateX(-50%);
}

.hero-slider-dot {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.hero-slider-dot[aria-selected="true"] {
    background: #fff;
    transform: scale(1.15);
}

.hero-slider-dot:hover {
    background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
    .hero-slider-btn {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 1.05rem;
    }

    .hero-slider-dots {
        bottom: 0.85rem;
    }
}

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

    .hero-slide.is-active img {
        animation: none;
        transform: scale(1.05);
    }

    .hero-slider-btn {
        transition: none;
    }
}

.hero-inner {
    position: relative;
    z-index: 2;
    padding: 4rem 0;
    width: 100%;
    max-width: 820px;
}

.hero h1 {
    font-family: var(--font-head);
    font-size: clamp(1.875rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 auto 1.25rem;
}

.hero-title-line {
    display: block;
}

@media (min-width: 768px) {
    .hero h1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-height: 3.75em;
    }

    .hero-title-line {
        white-space: nowrap;
    }
}

.hero-lead {
    font-size: 1.0625rem;
    opacity: 0.95;
    margin: 0 auto 2rem;
    max-width: 640px;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.hero-cta .btn,
.hero-cta .btn-callback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.55rem 0.9rem;
    font-size: 0.8125rem;
    min-height: auto;
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .hero-cta {
        display: inline-grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        width: min(100%, 26rem);
        max-width: 100%;
    }

    .hero-cta .btn,
    .hero-cta .btn-callback {
        width: 100%;
        flex: unset;
        min-width: 0;
    }

    .catalog-cta > .container.catalog-cta-inner,
    .catalog-cta .catalog-cta-inner,
    .catalog-cta-inner.boat-build-cta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        max-width: 26rem;
    }

    .catalog-cta > .container.catalog-cta-inner > h2,
    .catalog-cta > .container.catalog-cta-inner > p,
    .catalog-cta .catalog-cta-inner > h2,
    .catalog-cta .catalog-cta-inner > p,
    .catalog-cta-inner.boat-build-cta > h2,
    .catalog-cta-inner.boat-build-cta > p,
    .catalog-cta > .container.catalog-cta-inner > .catalog-cta-actions,
    .catalog-cta .catalog-cta-inner > .catalog-cta-actions,
    .catalog-cta-inner.boat-build-cta > .catalog-cta-actions {
        grid-column: 1 / -1;
    }

    .catalog-cta-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        width: 100%;
    }

    .catalog-cta-actions .btn:only-child {
        grid-column: 1 / -1;
        max-width: 13rem;
        justify-self: center;
    }

    .catalog-cta > .container.catalog-cta-inner .btn,
    .catalog-cta > .container.catalog-cta-inner .btn-callback,
    .catalog-cta .catalog-cta-inner .btn,
    .catalog-cta .catalog-cta-inner .btn-callback,
    .catalog-cta-inner.boat-build-cta .btn,
    .catalog-cta-inner.boat-build-cta .btn-callback {
        width: 100%;
        max-width: none;
        align-self: stretch;
    }

    .catalog-cta > .container.catalog-cta-inner .btn:only-of-type,
    .catalog-cta .catalog-cta-inner .btn:only-of-type,
    .catalog-cta-inner.boat-build-cta .btn:only-of-type {
        grid-column: 1 / -1;
        max-width: 13rem;
        justify-self: center;
    }

    .product-cta-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        max-width: 26rem;
        margin-inline: auto;
    }

    .product-cta-inner .btn-callback,
    .product-cta-inner .btn-primary {
        width: 100%;
        max-width: none;
    }

    .product-cta-inner .btn-outline {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 13rem;
        justify-self: center;
    }
}

/* Performance strip */
.performance {
    padding: 3.5rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.performance-inner {
    text-align: center;
    max-width: 980px;
    margin-inline: auto;
}

.performance h2 {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--ink);
}

.performance-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    max-width: 100%;
    line-height: 1.2;
}

.performance-title-text {
    text-wrap: balance;
}

.performance-iso-badge {
    display: block;
    flex: 0 0 auto;
    width: clamp(3rem, 7.5vw, 4.25rem);
    height: auto;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 4px 18px rgba(var(--primary-rgb), 0.14);
}

.performance-lead {
    color: var(--muted);
    margin: 0;
    font-size: 1.0625rem;
    max-width: 42rem;
    margin-inline: auto;
}

.cert-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-inline: auto;
    margin-top: 0.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    --cert-h: clamp(3.25rem, 7vw, 5.5rem);
}

.cert-badge {
    display: block;
    flex: 0 0 auto;
    height: var(--cert-h);
    width: auto;
    max-width: none;
    object-fit: contain;
}

.cert-badge-iso {
    mix-blend-mode: multiply;
}

.cert-strip-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: inherit;
    width: 100%;
}

@media (min-width: 768px) {
    .cert-strip-clone {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .cert-strip {
        justify-content: flex-start;
        overflow: hidden;
        padding-bottom: 0.35rem;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000 6%,
            #000 94%,
            transparent
        );
        mask-image: linear-gradient(
            90deg,
            transparent,
            #000 6%,
            #000 94%,
            transparent
        );
    }

    .cert-strip:not(.cert-strip--marquee) {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .cert-strip--marquee .cert-strip-track {
        justify-content: flex-start;
        width: max-content;
        animation: cert-marquee 28s linear infinite;
    }

    .cert-strip--marquee:focus-within .cert-strip-track,
    .cert-strip--marquee:hover .cert-strip-track {
        animation-play-state: paused;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .cert-strip--marquee .cert-strip-track {
        animation: none;
    }

    .cert-strip--marquee {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@keyframes cert-marquee {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes cert-marquee-rtl {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Sections */
.section { padding: 4.5rem 0; }
.section-muted { background: var(--bg-muted); }

.section-intro {
    max-width: 640px;
    margin-bottom: 2.5rem;
}

.section-intro.center { text-align: center; margin-inline: auto; margin-bottom: 2.5rem; }

.section-intro h2 {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.section-intro p { margin: 0; color: var(--muted); }

/* Applications — light band (complements dark about-band) */
.applications-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        var(--green-light) 0%,
        #eef3f0 45%,
        var(--bg-muted) 100%
    );
    border-top: 1px solid rgba(var(--primary-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
}

.app-wave-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.app-wave-canvas.is-ready {
    opacity: 1;
}

.applications-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--primary-rgb), 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.applications-section .container {
    position: relative;
    z-index: 1;
}

/* Application blocks */
.app-grid {
    display: grid;
    gap: 1.5rem;
}

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

@media (min-width: 992px) {
    .app-grid { grid-template-columns: repeat(3, 1fr); }
}

.app-block {
    padding: 2rem 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--green);
    transition: box-shadow 0.45s ease, border-color 0.45s ease;
}

.app-block.is-active {
    border-top-color: var(--green-dark);
    box-shadow: 0 10px 32px rgba(var(--primary-rgb), 0.12);
}

.app-num {
    display: block;
    font-family: var(--font-head);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 1rem;
    color: var(--surface);
    -webkit-text-stroke: 2px var(--green);
    paint-order: stroke fill;
    transition: color 0.45s ease, -webkit-text-stroke 0.45s ease;
}

.app-block.is-active .app-num {
    color: var(--green);
    -webkit-text-stroke: 2px var(--green);
}

@media (prefers-reduced-motion: reduce) {
    .app-block,
    .app-num {
        transition: none;
    }
}

.app-block h3 {
    font-family: var(--font-head);
    font-size: 1.125rem;
    margin: 0 0 0.75rem;
}

.app-block p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.applications-intro {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.applications-intro h2 {
    margin-bottom: 0.75rem;
}

.applications-intro p {
    margin: 0;
    color: var(--muted);
}


.app-grid--processes {
    gap: 1.25rem;
}

@media (min-width: 1200px) {
    .app-grid--processes {
        grid-template-columns: repeat(4, 1fr);
    }
}

.app-block-code {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green-dark);
}

.app-block h3 a {
    color: inherit;
    text-decoration: none;
}

.app-block h3 a:hover,
.app-block h3 a:focus-visible {
    color: var(--primary);
}

.app-block-cta {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.app-block-cta:hover,
.app-block-cta:focus-visible {
    text-decoration: underline;
}

/* What we supply — process collage */
.supply-intro {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.supply-intro h2 {
    margin-bottom: 0.75rem;
}

.supply-intro p {
    margin: 0;
    color: var(--muted);
}

.process-collage-wrap {
    position: relative;
    margin-bottom: 2rem;
}

.process-collage-wrap::before,
.process-collage-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    z-index: 2;
    pointer-events: none;
}

.process-collage-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-muted) 0%, transparent 100%);
}

.process-collage-wrap::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg-muted) 0%, transparent 100%);
}

.process-collage {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    padding: 0.5rem 0 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.process-collage-tile {
    flex: 0 0 clamp(7.5rem, 14vw, 10.5rem);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform 0.25s ease;
}

.process-collage-tile:hover,
.process-collage-tile:focus-visible {
    transform: translateY(-4px);
}

.process-collage-tile--tall {
    flex-basis: clamp(8.5rem, 16vw, 11.75rem);
}

.process-collage-media {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 0.65rem;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.process-collage-tile--tall .process-collage-media {
    aspect-ratio: 4 / 5.6;
}

.process-collage-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.process-collage-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
    line-height: 1.3;
    text-align: center;
}

.supply-catalog-row {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .supply-catalog-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.supply-catalog-card {
    padding: 1.5rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--green);
    border-radius: var(--radius);
    box-shadow: none;
    border-top: 4px solid var(--green);
}

.supply-catalog-title {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 0.65rem;
}

.supply-catalog-desc {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted);
    line-height: 1.6;
}

.supply-catalog-action {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.supply-catalog-action:hover,
.supply-catalog-action:focus-visible {
    color: var(--green-dark);
}

/* Industries */
.industries-section {
    background: var(--surface);
}

.industries-tint-box {
    position: relative;
    padding: 2rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(
        155deg,
        var(--brand-blue-light) 0%,
        #e9edf3 46%,
        var(--bg-muted) 100%
    );
    transition: background 0.65s ease;
}

.industries-tint-box[data-theme="blue"] {
    background: linear-gradient(
        155deg,
        var(--brand-blue-light) 0%,
        #e9edf3 46%,
        var(--bg-muted) 100%
    );
}

.industries-tint-box[data-theme="green"] {
    background: linear-gradient(
        155deg,
        var(--brand-green-light) 0%,
        #e9edf0 46%,
        var(--bg-muted) 100%
    );
}

.industries-tint-box[data-theme="red"] {
    background: linear-gradient(
        155deg,
        var(--brand-red-light) 0%,
        #ede9eb 46%,
        var(--bg-muted) 100%
    );
}

@media (min-width: 900px) {
    .industries-tint-box {
        padding: 2.75rem 2.5rem;
    }
}

.industries-split {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 900px) {
    .industries-split {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.industries-copy h2 {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--brand-blue);
}

.industries-copy > p {
    color: var(--muted);
    margin: 0 0 1.5rem;
}

.industry-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

@media (max-width: 899px) {
    .industry-list {
        display: none;
    }
}

.industry-list li {
    margin: 0;
    padding: 0;
}

.industry-trigger {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0 0.45rem 1.25rem;
    border: none;
    background: transparent;
    position: relative;
    text-align: left;
    font: inherit;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
}

.industry-trigger::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 0.2s ease, background 0.2s ease;
}

.industries-tint-box[data-theme="blue"] .industry-trigger:hover,
.industries-tint-box[data-theme="blue"] .industry-trigger:focus-visible,
.industries-tint-box[data-theme="green"] .industry-trigger:hover,
.industries-tint-box[data-theme="green"] .industry-trigger:focus-visible,
.industries-tint-box[data-theme="red"] .industry-trigger:hover,
.industries-tint-box[data-theme="red"] .industry-trigger:focus-visible {
    color: var(--brand-blue);
    background: rgba(var(--primary-rgb), 0.06);
    outline: none;
}

.industries-tint-box[data-theme="blue"] .industry-trigger.is-active,
.industries-tint-box[data-theme="green"] .industry-trigger.is-active,
.industries-tint-box[data-theme="red"] .industry-trigger.is-active {
    font-weight: 700;
    color: var(--brand-blue);
}

.industries-tint-box[data-theme="blue"] .industry-trigger.is-active::before,
.industries-tint-box[data-theme="green"] .industry-trigger.is-active::before,
.industries-tint-box[data-theme="red"] .industry-trigger.is-active::before {
    width: 8px;
    height: 8px;
    background: var(--brand-blue);
}

.industries-media-stack {
    position: relative;
    aspect-ratio: 4 / 5;
    min-height: 22rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--bg-muted);
}

.industries-media-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.2) 45%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.industries-media-stack .industry-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    opacity: 0;
    --zoom-start: 1.12;
    --zoom-end: 1.2;
    transform: scale(var(--zoom-start));
    transform-origin: center 70%;
    transition: opacity 0.5s ease;
    will-change: transform;
}

.industries-media-stack .industry-photo.is-visible {
    opacity: 1;
}

.industries-media-stack .industry-photo.is-animating[data-motion="drift-up"] {
    animation: industry-drift-up 7s ease-in-out forwards;
}

.industries-media-stack .industry-photo.is-animating[data-motion="drift-down"] {
    animation: industry-drift-down 7s ease-in-out forwards;
}

.industries-media-stack .industry-photo.is-animating[data-motion="drift-left"] {
    animation: industry-drift-left 7s ease-in-out forwards;
}

.industries-media-stack .industry-photo.is-animating[data-motion="drift-right"] {
    animation: industry-drift-right 7s ease-in-out forwards;
}

@keyframes industry-drift-up {
    from { transform: scale(var(--zoom-start)) translate(0, 1.5%); }
    to { transform: scale(var(--zoom-end)) translate(0, -2%); }
}

@keyframes industry-drift-down {
    from { transform: scale(var(--zoom-start)) translate(0, -1%); }
    to { transform: scale(var(--zoom-end)) translate(0, 2%); }
}

@keyframes industry-drift-left {
    from { transform: scale(var(--zoom-start)) translate(1.5%, 0); }
    to { transform: scale(var(--zoom-end)) translate(-2%, 0); }
}

@keyframes industry-drift-right {
    from { transform: scale(var(--zoom-start)) translate(-1.5%, 0); }
    to { transform: scale(var(--zoom-end)) translate(2%, 0); }
}

.industry-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0.85rem;
}

.industry-overlay-card {
    position: relative;
    --frame-inset: 7px;
    --text-inset: 8px;
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.2rem;
    padding: calc(var(--frame-inset) + var(--text-inset));
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.industry-overlay-card::before {
    content: "";
    position: absolute;
    inset: var(--frame-inset);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius);
    pointer-events: none;
    z-index: 1;
}

.industry-overlay-title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.industry-overlay-desc {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.industry-overlay-card.is-changing {
    opacity: 0.65;
    transition: opacity 0.25s ease;
}

@media (min-width: 900px) {
    .industries-media-stack {
        aspect-ratio: 4 / 5;
        min-height: 26rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industries-tint-box {
        transition: none;
    }

    .industries-media-stack .industry-photo {
        transition: none;
        transform: scale(var(--zoom-start, 1.05));
        animation: none !important;
    }

    .industry-overlay-card.is-changing {
        transition: none;
    }
}

/* Products */
.product-grid {
    display: grid;
    gap: 1.25rem;
}

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

@media (min-width: 960px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-grid-divider {
    grid-column: 1 / -1;
    position: relative;
    height: 1px;
    margin: 1.25rem 0 0.5rem;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--primary-rgb), 0.1) 10%,
        rgba(var(--primary-rgb), 0.32) 50%,
        rgba(var(--primary-rgb), 0.1) 90%,
        transparent 100%
    );
}

.product-grid-divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: var(--surface);
    border: 1px solid rgba(var(--primary-rgb), 0.4);
    box-shadow:
        0 0 0 5px var(--surface),
        0 0 0 6px rgba(var(--primary-rgb), 0.08);
}

.product-column {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1.25rem;
    min-height: 0;
}

.product-block {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg-muted);
    border-radius: var(--radius);
    border: 1px solid var(--green);
    box-shadow: none;
    min-height: 0;
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.product-block-media {
    display: block;
    min-height: 0;
    border-radius: var(--radius);
    background: #eceff4;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--green);
    box-shadow: none;
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.product-column.is-active .product-block,
.product-column.is-active .product-block-media {
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
}

.product-block-media img {
    width: 100%;
    height: 100%;
    min-height: 10rem;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.product-block-media:hover img {
    transform: scale(1.04);
}

.product-num {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--green);
    margin-bottom: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .product-block,
    .product-block-media {
        transition: none;
    }
}

.product-block h3 {
    font-family: var(--font-head);
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.product-block p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted);
}

/* About band */
.about-band {
    background: var(--green-dark);
    color: #fff;
    padding: 2.5rem 0;
}

.about-band-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.about-band p {
    margin: 0;
    max-width: 720px;
    font-size: 1.0625rem;
}

.link-more {
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 2px;
}
.link-more:hover { color: #fff; border-color: #fff; }

/* Testing / resources — shaded band */
.testing-section {
    position: relative;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        var(--bg-muted) 48%,
        #e8ecf2 100%
    );
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.testing-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26, 31, 46, 0.045) 0%, transparent 70%);
    pointer-events: none;
}

.testing-section .container {
    position: relative;
    z-index: 1;
}

/* Testing — 3D flywheel gallery */
.testing-flywheel {
    margin-top: 0.25rem;
}

.testing-flywheel-viewport {
    position: relative;
    height: clamp(16.5rem, 34vw, 21rem);
    perspective: 1400px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );
}

.testing-flywheel-ring {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.testing-flywheel-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(14rem, 38vw, 22rem);
    margin: 0;
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.1);
    transition:
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.75s ease,
        filter 0.75s ease,
        box-shadow 0.75s ease;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.testing-flywheel-item.is-active {
    box-shadow: 0 18px 48px rgba(var(--primary-rgb), 0.16);
    border-color: rgba(var(--primary-rgb), 0.12);
}

.testing-flywheel-item img {
    display: block;
    width: 100%;
    height: 15rem;
    object-fit: cover;
    object-position: center;
}

.testing-flywheel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.testing-flywheel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.testing-flywheel-btn:hover {
    background: var(--primary-light);
    border-color: rgba(var(--primary-rgb), 0.2);
}

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

.testing-flywheel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    max-width: min(100%, 20rem);
}

.testing-flywheel-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.testing-flywheel-dot[aria-selected="true"] {
    background: var(--primary);
    transform: scale(1.25);
}

.testing-flywheel-dot:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Defect preview carousel (testing page) */
.testing-defects-spotlight {
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.testing-flywheel-viewport--defects {
    height: clamp(22rem, 48vw, 27rem);
}

.testing-flywheel-item--defect {
    width: 24rem;
    max-width: min(24rem, calc(100vw - 3rem));
    padding: 1.25rem 1.2rem 1.2rem;
    border-top: 4px solid var(--primary);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.testing-flywheel-item--defect.is-active {
    border-color: rgba(var(--primary-rgb), 0.18);
    filter: none !important;
}

.testing-defect-preview-cat {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-green);
}

.testing-flywheel-item--defect h3 {
    margin: 0 0 0.45rem;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.testing-defect-preview-summary {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.testing-defect-preview-detail {
    margin: 0;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(var(--primary-rgb), 0.08);
}

.testing-defect-preview-tag {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.2rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.testing-defect-preview-tag--cause {
    color: #9a3412;
    background: #ffedd5;
}

.testing-defect-preview-tag--fix {
    color: var(--brand-green-dark);
    background: var(--brand-green-light);
}

.testing-defect-preview-detail dd {
    margin: 0 0 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text);
}

.testing-defect-preview-detail dd:last-child {
    margin-bottom: 0;
}

.testing-defect-preview-detail dt + dd + dt {
    margin-top: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .testing-flywheel-item {
        transition: none;
        filter: none !important;
    }
}

/* Testing page */
.page-testing .testing-hero {
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.testing-hero-inner {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
}

@media (min-width: 992px) {
    .testing-hero-inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.testing-breadcrumb {
    margin-bottom: 1.25rem;
}

.testing-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
}

.testing-title {
    margin: 0 0 1rem;
    font-family: var(--font-head);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    color: #111827;
    max-width: 20ch;
}

.testing-lead {
    margin: 0;
    max-width: 36rem;
    color: #6b7280;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.testing-hero-media {
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.testing-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.testing-hero-media--diagram {
    background: #f4f8fb;
    border: 1px solid var(--border);
}

.testing-hero-media--diagram img {
    object-fit: contain;
    padding: clamp(0.75rem, 2vw, 1.25rem);
}

.cert-strip-testing {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.25rem, 3vw, 2rem);
    border-top: 1px solid rgba(var(--primary-rgb), 0.08);
}

@media (max-width: 767px) {
    .cert-strip-testing,
    .cert-strip-about {
        width: 100%;
    }
}

.testing-scope-list {
    display: grid;
    gap: 0.85rem 2rem;
    max-width: 42rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .testing-scope-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.testing-scope-list li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--text);
    line-height: 1.55;
}

.testing-scope-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--green);
}

.testing-certs-grid {
    display: grid;
    gap: 1.25rem;
    max-width: 56rem;
    margin-inline: auto;
}

@media (max-width: 767px) {
    .testing-certs-grid {
        display: block;
        max-width: none;
        overflow: hidden;
        padding-bottom: 0.35rem;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000 6%,
            #000 94%,
            transparent
        );
        mask-image: linear-gradient(
            90deg,
            transparent,
            #000 6%,
            #000 94%,
            transparent
        );
    }

    .testing-certs-grid:not(.testing-certs-grid--marquee) {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .testing-certs-grid--marquee .cert-strip-track {
        display: flex;
        align-items: stretch;
        gap: 1rem;
        width: max-content;
        animation: cert-marquee-rtl 42s linear infinite;
    }

    .testing-certs-grid--marquee .testing-cert-card {
        flex: 0 0 min(85vw, 22rem);
        width: min(85vw, 22rem);
    }

    .testing-certs-grid--marquee:focus-within .cert-strip-track,
    .testing-certs-grid--marquee:hover .cert-strip-track {
        animation-play-state: paused;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .testing-certs-grid--marquee .cert-strip-track {
        animation: none;
    }

    .testing-certs-grid--marquee {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (min-width: 720px) {
    .testing-certs-grid {
        display: block;
    }

    .testing-certs-grid .cert-strip-track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        width: 100%;
    }
}

.testing-cert-card {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.testing-cert-card img {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
}

.testing-cert-card figcaption {
    padding: 1rem 1.15rem 1.15rem;
    border-top: 1px solid var(--border);
}

.testing-cert-card strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.testing-cert-card span {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.page-testing .testing-standards {
    padding-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.testing-standards-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .testing-standards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .testing-standards-grid {
        gap: 1.5rem;
    }
}

.testing-standard-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--green);
}

.testing-standard-code {
    margin: 0 0 0.35rem;
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
}

.testing-standard-name {
    margin: 0 0 0.65rem;
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.testing-standard-desc {
    margin: 0 0 1rem;
    flex: 1;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.testing-standard-equipment {
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.testing-equipment-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .testing-equipment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .testing-equipment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.testing-equipment-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.testing-equipment-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.testing-equipment-card img.testing-equipment-sketch {
    object-fit: contain;
    padding: 1.15rem 1.35rem 0.85rem;
    background: var(--primary-light);
}

.testing-equipment-card figcaption {
    padding: 1rem 1.1rem 1.1rem;
}

.testing-equipment-card strong {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 700;
}

.testing-equipment-card span {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.testing-process-steps {
    display: grid;
    gap: 1.25rem;
    max-width: 56rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: testing-step;
}

@media (min-width: 768px) {
    .testing-process-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.testing-process-step {
    padding: 1.35rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.testing-process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 800;
}

.testing-process-step h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
}

.testing-process-step p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.page-testing .section-intro h2 {
    font-family: var(--font-head);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.page-testing .section-intro p {
    max-width: 40rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.page-testing .section-intro.center p {
    margin-inline: auto;
}

.testing-big5-list {
    display: grid;
    gap: 1rem;
    max-width: 48rem;
    margin-inline: auto;
    padding: 0;
    list-style: none;
    counter-reset: testing-big5;
}

.testing-big5-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.15rem 1.15rem 3.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.testing-big5-content {
    flex: 1;
    min-width: 0;
}

.testing-big5-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.65rem;
    background: var(--primary-light);
    color: var(--primary);
    flex-shrink: 0;
}

.testing-big5-icon svg {
    width: 1.85rem;
    height: 1.85rem;
}

.testing-big5-icon--meter .meter-stroke-black {
    stroke: var(--ink);
}

.testing-big5-icon--meter .meter-stroke-red {
    stroke: var(--brand-red);
}

.testing-big5-icon--ph .ph-icon-label {
    fill: #e07a5f;
    font-family: var(--font-head);
}

.testing-big5-icon--ph svg {
    width: 2rem;
    height: 2rem;
}

.testing-big5-item::before {
    counter-increment: testing-big5;
    content: counter(testing-big5);
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 800;
}

.testing-big5-item h3 {
    margin: 0 0 0.35rem;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
}

.testing-big5-item p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .testing-big5-item {
        flex-wrap: wrap;
        padding-bottom: 1rem;
    }

    .testing-big5-icon {
        margin-left: auto;
    }
}

/* Industries page */
.page-industries .industries-hero {
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.industries-hero-inner {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
}

@media (min-width: 992px) {
    .industries-hero-inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.industries-breadcrumb {
    margin-bottom: 1.25rem;
}

.industries-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
}

.industries-title {
    margin: 0 0 1rem;
    font-family: var(--font-head);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    color: #111827;
    max-width: 22ch;
}

.industries-lead {
    margin: 0;
    max-width: 36rem;
    color: #6b7280;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.industries-hero-media {
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.industries-section-page {
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.industries-detail-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .industries-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .industries-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .industries-detail-card--wide {
        grid-column: 1 / -1;
    }
}

.industries-detail-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin: -1.5rem -1.35rem 1rem;
}

.industries-detail-gallery .industries-detail-media {
    margin: 0;
}

.industries-detail-gallery .industries-detail-media img {
    height: 8.5rem;
}

@media (max-width: 639px) {
    .industries-detail-gallery {
        grid-template-columns: 1fr;
    }

    .industries-detail-gallery .industries-detail-media img {
        height: 10rem;
    }
}

.industries-detail-card {
    padding: 1.5rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--green);
    overflow: hidden;
}

.industries-detail-media {
    margin: -1.5rem -1.35rem 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bg-muted);
}

.industries-detail-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.industries-detail-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.industries-hero-carousel {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.about-history-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 560 / 380;
    overflow: hidden;
    border-radius: 10px;
    margin: 0;
}

.about-history-carousel .marine-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.about-history-carousel .marine-carousel-slide.is-visible {
    opacity: 1;
}

.industries-hero-carousel .marine-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.industries-hero-carousel .marine-carousel-slide.is-visible {
    opacity: 1;
}

.industries-detail-carousel .marine-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.industries-detail-carousel .marine-carousel-slide.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .about-history-carousel .marine-carousel-slide,
    .industries-hero-carousel .marine-carousel-slide,
    .industries-detail-carousel .marine-carousel-slide {
        transition: none;
    }
}

.industries-detail-card h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.industries-detail-card p {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.industries-detail-uses {
    margin: 0 0 1rem;
}

.industries-detail-uses-label {
    margin: 0 0 0.5rem;
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--green);
}

.industries-detail-grade {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text);
}

.industries-detail-uses-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.industries-detail-uses-list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.industries-detail-uses-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--green);
}

.industries-detail-card .product-link {
    font-size: 0.875rem;
}

.page-industries .section-intro h2 {
    font-family: var(--font-head);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.page-industries .industries-section-page > .container > .section-intro.center {
    max-width: min(100%, 52rem);
}

.page-industries .section-intro p {
    max-width: 40rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.page-industries .section-intro.center p {
    margin-inline: auto;
}

@media (min-width: 640px) {
    .testing-flywheel-item img {
        height: 16rem;
    }
}

@media (min-width: 992px) {
    .testing-flywheel-item img {
        height: 17rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .testing-flywheel-item {
        transition: none;
    }
}

/* Contact */
.contact-box {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 0.25rem);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    overflow: hidden;
}

.contact-grid {
    display: grid;
    gap: 1.5rem;
}

.contact-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-fact {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    margin-bottom: 1.35rem;
}

.contact-fact-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--green);
}

.contact-fact-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.contact-fact-label {
    margin: 0 0 0.25rem;
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact-fact-value {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.contact-fact-value a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.contact-fact-value a:hover {
    color: var(--green);
}

.contact-hours {
    margin: 0 0 1rem;
    padding-top: 0.25rem;
}

.contact-hours p {
    margin: 0 0 0.2rem;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.contact-hours .contact-fact-label {
    margin-bottom: 0.35rem;
}

.contact-details .contact-social {
    margin-top: 0;
}

#contact-maps {
    scroll-margin-top: 5.5rem;
}

.contact-maps-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}

.contact-map-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-map-pane .contact-map-frame {
    flex: 1;
    min-height: 16rem;
    aspect-ratio: 16 / 11;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.contact-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

@media (min-width: 900px) {
    .contact-box {
        padding: 1.75rem 1.75rem 1.5rem;
    }

    .contact-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2rem;
        row-gap: 1.75rem;
    }

    .contact-details {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .contact-form {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        min-height: 100%;
    }

    .contact-form-row {
        grid-template-columns: 1fr 1fr;
        column-gap: 0.75rem;
    }

    .contact-form label:has(textarea) {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .contact-form textarea {
        flex: 1;
        min-height: 8rem;
        resize: vertical;
    }

    .contact-maps-split {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin: 0 -1.75rem -1.5rem;
        padding: 0;
        border-top: 1px solid var(--border);
    }

    .contact-map-pane {
        padding: 1rem 1.25rem 1.15rem;
    }

    .contact-map-pane + .contact-map-pane {
        border-left: 1px solid var(--border);
    }

    .contact-map-pane .contact-map-frame {
        min-height: 20rem;
        aspect-ratio: auto;
    }
}

@media (min-width: 640px) and (max-width: 899px) {
    .contact-form-row {
        grid-template-columns: 1fr 1fr;
        column-gap: 0.75rem;
    }

    .contact-maps-split {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

.contact-details .contact-form {
    margin-top: 0.25rem;
}

.contact-item {
    margin-bottom: 1.75rem;
}

.contact-item:last-of-type:not(.contact-item--last) {
    margin-bottom: 1.25rem;
}

.contact-item h3 {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--green);
    margin: 0 0 0.35rem;
}

.contact-item p { margin: 0 0 0.25rem; }

.contact-emails {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-emails li {
    margin-bottom: 0.25rem;
}

.contact-emails a {
    word-break: break-word;
}

.contact-emails--footer {
    margin-top: 0.35rem;
}

.contact-emails--footer li {
    margin-bottom: 0.3rem;
}

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.contact-social a,
.contact-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.contact-social-icon {
    cursor: default;
}

.contact-social a:hover {
    background: var(--green-dark, #0a1520);
    transform: translateY(-1px);
}

.contact-social svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.contact-social--footer {
    margin-top: 1.25rem;
}

.site-footer .contact-social a,
.site-footer .contact-social-icon {
    background: rgba(255, 255, 255, 0.12);
}

.site-footer .contact-social a:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.contact-maps {
    display: grid;
    gap: 1.5rem;
}

.contact-map-heading {
    margin: 0 0 0.5rem;
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
}

.contact-map-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-muted);
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 10;
}

.contact-map-frame--streetview {
    aspect-ratio: 16 / 11;
    min-height: 16rem;
}

.contact-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-map-link {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
}

.contact-map-link a {
    font-weight: 500;
}

/* ── How-to-find-us static map images ─────────────────────────── */
.contact-location-maps {
    background: var(--bg-muted);
    border-top: 1px solid var(--border);
    padding: 3rem 0 3.5rem;
}

#how-to-find-us {
    scroll-margin-top: 5.5rem;
}

.contact-location-title {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.4rem;
}

.contact-location-lead {
    color: var(--muted);
    font-size: 0.9375rem;
    margin-bottom: 1.75rem;
}

.contact-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.contact-location-fig {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.contact-location-fig a:first-child {
    display: block;
    overflow: hidden;
}

.contact-location-fig img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.contact-location-fig a:first-child:hover img {
    transform: scale(1.03);
}

.contact-location-fig figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 500;
    gap: 0.5rem;
}

.contact-location-dl {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 0.2em 0.55em;
    transition: background 0.2s, color 0.2s;
}

.contact-location-dl:hover {
    background: var(--primary);
    color: #fff;
}

.contact-location-gmaps {
    margin-top: 2rem;
    text-align: center;
}

.map-lightbox {
    padding: 0;
    border: none;
    max-width: min(96vw, 56rem);
    width: 100%;
    background: transparent;
}

.map-lightbox::backdrop {
    background: rgba(18, 40, 72, 0.72);
}

.map-lightbox-inner {
    position: relative;
    background: var(--surface);
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(26, 31, 46, 0.28);
}

.map-lightbox-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26, 54, 96, 0.35);
}

.map-lightbox-close:hover {
    background: var(--primary-dark);
}

.map-lightbox-img {
    display: block;
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    background: #fff;
}

.contact-form {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem 1.5rem;
    margin-top: 0;
}

.contact-form .btn-primary {
    margin-top: auto;
}

.contact-form h3 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    margin: 0 0 0.35rem;
}

.form-note {
    font-size: 0.8125rem;
    color: var(--muted);
    margin: 0 0 1rem;
}

.contact-form label {
    display: block;
    margin-bottom: 1rem;
}

.contact-form label span {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

/* Careers page */
.page-careers .careers-intro {
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.careers-intro-inner {
    max-width: 40rem;
    margin-inline: auto;
}

.careers-badge {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--green);
    letter-spacing: 0.02em;
}

.careers-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-head);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #111827;
}

.careers-lead {
    margin: 0 auto;
    max-width: 36rem;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.careers-openings {
    padding-top: 0;
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.careers-openings-inner {
    max-width: 56rem;
    margin-inline: auto;
}

.careers-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.careers-filter {
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.careers-filter:hover {
    border-color: var(--green);
    color: var(--green);
}

.careers-filter.is-active {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.careers-openings-list {
    border-top: 1px solid var(--border);
}

.careers-opening {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}

.careers-opening-body {
    flex: 1 1 16rem;
    min-width: 0;
}

.careers-opening-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink);
}

.careers-opening-desc {
    margin: 0 0 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--muted);
}

.careers-opening-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.careers-opening-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.3;
}

.careers-opening-tag svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.careers-opening-apply {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--green);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.careers-opening-apply svg {
    width: 1.1rem;
    height: 1.1rem;
}

.careers-opening-apply:hover {
    gap: 0.55rem;
}

.careers-apply-inner {
    max-width: 40rem;
    margin-inline: auto;
}

.page-careers .section-intro h2 {
    font-family: var(--font-head);
    font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.page-careers .section-intro p {
    max-width: 40rem;
    color: var(--text-muted, var(--muted));
    line-height: 1.6;
}

.page-careers .section-intro.center p {
    margin-inline: auto;
}

.careers-box .contact-form {
    background: transparent;
    border: 0;
    padding: 0;
}

.careers-required {
    color: var(--brand-red);
}

.careers-form select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: inherit;
    line-height: 1.4;
}

.careers-form select:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

.careers-success {
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--brand-green-light);
    color: var(--brand-green-dark);
    font-weight: 600;
    text-align: center;
}

@media (max-width: 639px) {
    .careers-opening-apply {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Footer */
.site-footer {
    position: relative;
    overflow: hidden;
    background: #0a1018;
    color: rgba(255, 255, 255, 0.82);
    padding: clamp(2.75rem, 6vw, 4rem) 0 0;
    font-size: 0.9375rem;
}

.site-footer-watermark {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 16, 24, 0.92) 0%, rgba(10, 16, 24, 0.96) 100%),
        url('../assets/images/home-s02-hero.png') center 45% / cover no-repeat;
    opacity: 0.35;
    pointer-events: none;
}

.footer-main {
    position: relative;
    z-index: 1;
}

.footer-main-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

@media (min-width: 768px) {
    .footer-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .footer-main-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.2fr);
        gap: 2.5rem;
    }
}

.footer-section-title {
    margin: 0 0 1rem;
    font-family: var(--font-head);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.footer-section-title::after {
    content: '';
    display: block;
    width: 100%;
    max-width: 12rem;
    height: 2px;
    margin-top: 0.65rem;
    background: linear-gradient(90deg, var(--brand-red) 0 2.5rem, rgba(255, 255, 255, 0.22) 2.5rem);
}

.footer-accent {
    color: var(--brand-red);
}

.footer-arrow-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-arrow-list li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-arrow-list a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-arrow-list a::before {
    content: '›';
    flex-shrink: 0;
    color: var(--footer-accent);
    font-size: 1.125rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.footer-arrow-list a:hover::before {
    color: var(--footer-accent-soft);
}

.footer-arrow-list a:hover {
    color: #fff;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social-link svg {
    width: 1.05rem;
    height: 1.05rem;
}

.footer-social-link:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.footer-social-link--static {
    cursor: default;
}

.footer-social-link--static:hover {
    transform: none;
}

.footer-brand {
    display: inline-block;
    margin-bottom: 1.25rem;
    color: inherit;
    text-decoration: none;
}

.footer-brand img {
    display: block;
    width: min(10rem, 100%);
    height: auto;
}

.footer-tagline {
    margin: 0.65rem 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.72);
}

.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact-list li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 1rem;
    line-height: 1.55;
}

.footer-contact-list li:last-child {
    margin-bottom: 0;
}

.footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--footer-accent);
}

.footer-contact-icon--spacer {
    visibility: hidden;
}

.footer-contact-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.footer-contact-list a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
}

.footer-contact-list a:hover {
    color: #fff;
}

.footer-address-street,
.contact-address-street {
    white-space: nowrap;
}

.footer-contact-list li:hover .footer-contact-icon {
    color: var(--footer-accent-soft);
}

.site-footer a:hover {
    color: #fff;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.22);
}

.footer-bottom-inner {
    padding: 1rem 0 1.15rem;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72);
}

.footer-bottom .footer-accent {
    color: var(--brand-red);
}

.footer-preview-note {
    margin-top: 0.35rem !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.42) !important;
}

/* Legacy footer helpers (contact section) */
.footer-grid {
    display: grid;
    gap: 2rem;
    padding-bottom: 2rem;
}

.footer-heading {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    margin: 0 0 1rem;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li { margin-bottom: 0.35rem; }

.site-footer .contact-social a,
.site-footer .contact-social-icon {
    background: #fff;
    color: var(--ink);
}

.site-footer .contact-social a:hover {
    background: var(--brand-red);
    color: #fff;
}

/* Mobile nav (≤991px) */
@media (max-width: 991px) {
    :root {
        --header-height: 3.5rem;
    }

    .site-header {
        position: sticky;
    }

    body.nav-open .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 400;
    }

    .header-row {
        height: var(--header-height);
        min-height: var(--header-height);
        max-height: var(--header-height);
        padding: 0;
        overflow: visible;
        position: relative;
        gap: 0.35rem;
    }

    .header-actions {
        display: flex;
        margin-left: auto;
        margin-right: 0.35rem;
    }

    .brand {
        gap: 0.65rem;
        margin-left: 0.65rem;
    }

    .brand-logo,
    .brand img.brand-logo {
        height: 2.2rem;
        max-height: calc(var(--header-height) - 0.85rem);
    }

    .brand-flag {
        height: 1.5rem;
        max-height: calc(var(--header-height) - 1.15rem);
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        margin-right: 0;
    }

    .lang-switcher-trigger {
        min-height: 2.35rem;
        padding: 0.25rem 0.55rem;
        font-size: 0.75rem;
    }

    .nav-toggle span {
        margin: 3px 0;
    }

    .site-nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 300;
        flex-direction: column;
        align-items: stretch;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 1rem;
        box-shadow: var(--shadow);
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav.is-open { display: flex; }

    .site-nav .nav-wave-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 12rem;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .site-nav .nav-wave-bg.is-ready {
        opacity: 1;
    }

    .site-nav .nav-list,
    .site-nav > .btn-header {
        position: relative;
        z-index: 1;
    }

    .nav-list { flex-direction: column; width: 100%; }

    .nav-list a {
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
    }

    .btn-header {
        text-align: center;
        min-height: var(--touch-min);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

@media (min-width: 992px) {
    .site-nav .nav-wave-bg {
        display: none;
    }
}

/* Product detail page */

.page-product .product-hero {
    padding-top: 2.5rem;
}

.breadcrumb ol {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.35rem;
    color: var(--border);
}

.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green); }

.product-label {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
    margin: 0 0 0.5rem;
}

.product-title {
    font-family: var(--font-head);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 2rem;
    line-height: 1.15;
}

.product-intro {
    display: grid;
    gap: 2rem;
}

@media (min-width: 900px) {
    .product-intro {
        grid-template-columns: minmax(240px, 360px) 1fr;
        align-items: start;
    }
}

.product-figure {
    margin: 0;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
}

.product-figure img {
    margin-inline: auto;
    max-height: 320px;
    width: auto;
    object-fit: contain;
}

.product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
}

@media (max-width: 639px) {
    .product-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        margin-inline: -0.25rem;
        padding-inline: 0.25rem;
    }

    .product-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
        min-height: var(--touch-min);
    }
}

.product-tab {
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.product-tab:hover { color: var(--ink); }

.product-tab.is-active {
    color: var(--green);
    border-bottom-color: var(--green);
}

.product-panel {
    font-size: 1rem;
    color: var(--ink);
}

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

.spec-columns {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .spec-columns { grid-template-columns: 1fr 1fr; }
}

.product-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.product-spec-table th,
.product-spec-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    text-align: left;
    vertical-align: top;
}

.product-spec-table th {
    width: 42%;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
}

.pigment-grade-table th {
    width: 58%;
}

.pigment-grade-table tbody tr:target {
    background: rgba(196, 30, 58, 0.06);
}

.product-panel .detail-heading {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
}

.product-panel .detail-heading:first-child {
    margin-top: 0;
}

.product-spec-note {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted, #64748b);
}

.spec-list,
.doc-list,
.detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.spec-list li,
.doc-list li,
.detail-list li {
    padding: 0.4rem 0 0.4rem 1.1rem;
    position: relative;
    font-size: 0.9375rem;
}

.spec-list li::before,
.detail-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}

.doc-list li {
    padding-left: 0;
    border-bottom: 1px solid var(--border);
}

.doc-list li span {
    display: block;
    padding: 0.65rem 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.product-details-grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .product-details-grid { grid-template-columns: 1fr 1fr; }
}

/* Recommended products carousel */
.product-recommended {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.product-recommended[hidden] {
    display: none;
}

.recommended-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    max-width: 520px;
}

.recommended-hand {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.wave-hand,
.recommended-hand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transform-origin: 70% 85%;
    animation: wave-hand 2.5s ease-in-out infinite;
}

.wave-hand img,
.recommended-hand img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

@keyframes wave-hand {
    0% { transform: rotate(0deg); }
    12% { transform: rotate(14deg); }
    24% { transform: rotate(-6deg); }
    36% { transform: rotate(12deg); }
    48% { transform: rotate(-3deg); }
    60%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wave-hand,
    .recommended-hand {
        animation: none;
    }
}

.recommended-title {
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
}

.recommended-sub {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.45;
}

.recommended-track-wrap {
    position: relative;
}

.recommended-track-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3rem;
    background: linear-gradient(to right, transparent, var(--bg-muted));
    pointer-events: none;
}

.recommended-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--green) var(--border);
}

.recommended-track:focus {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.recommended-track::-webkit-scrollbar {
    height: 6px;
}

.recommended-track::-webkit-scrollbar-thumb {
    background: var(--green);
    border-radius: 999px;
}

.recommended-card {
    flex: 0 0 min(200px, 70vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--green);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.recommended-card:hover,
.recommended-card:focus-visible {
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
    transform: translateY(-2px);
    color: inherit;
}

.recommended-card-media {
    aspect-ratio: 1;
    background: var(--bg-muted);
    overflow: hidden;
}

.recommended-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommended-card-body {
    padding: 0.75rem 0.85rem 0.9rem;
}

.recommended-card-code {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--green);
    margin: 0 0 0.25rem;
}

.recommended-card-title {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.35;
}

.detail-heading {
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.insight-card {
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--green);
}

.insight-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--green);
    margin: 0 0 0.5rem;
}

.insight-title {
    font-family: var(--font-head);
    font-size: 1.375rem;
    margin: 0 0 0.75rem;
}

.insight-card p {
    margin: 0 0 1rem;
    color: var(--muted);
}

.link-more-dark {
    color: var(--green);
    border-bottom-color: rgba(var(--primary-rgb), 0.35);
}
.link-more-dark:hover { color: var(--green-dark); border-color: var(--green-dark); }

.faq-block .section-intro {
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 0.75rem;
    padding: 0 1rem;
}

.faq-item summary {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 1rem 0;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    float: right;
    color: var(--green);
    font-weight: 700;
}

.faq-item[open] summary::after { content: "−"; }

.faq-item p {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

.product-cta-band {
    background: var(--green-light);
    border-block: 1px solid var(--border);
    padding: 2rem 0;
}

.product-cta-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
}

.btn-outline {
    background: transparent;
    color: var(--green);
    border: 2px solid var(--green);
}
.btn-outline:hover {
    background: var(--green);
    color: #fff;
}

.product-block h3 a {
    color: inherit;
}
.product-block h3 a:hover { color: var(--green); }

.product-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-head);
}

@media (max-width: 639px) {
    .product-column {
        grid-template-rows: auto auto;
    }

    .product-block {
        height: auto;
    }

    .product-block .product-link {
        margin-top: 0.75rem;
    }
}

.contact-compact { padding-top: 3rem; }

/* Product catalog */

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

.section-intro-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    max-width: none;
}

.section-intro-row > div { max-width: 640px; }

.catalog-header { padding-bottom: 0; }

.catalog-title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    margin: 0 0 0.75rem;
}

.catalog-lead {
    color: var(--muted);
    max-width: 640px;
    margin: 0;
    font-size: 1.0625rem;
}

/* Category groups (level 1) — photo cards */
.category-groups {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .category-groups {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .category-groups {
        grid-template-columns: repeat(3, 1fr);
    }
}

.category-group-card {
    background: var(--surface);
    border: 1px solid var(--green);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.category-group-card.is-active {
    overflow: visible;
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
}

.category-group-trigger {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
}

.category-group-media {
    aspect-ratio: 4 / 3;
    background: var(--bg-muted);
    overflow: hidden;
}

.category-group-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.category-group-card:hover .category-group-media img,
.category-group-card.is-active .category-group-media img {
    transform: scale(1.04);
}

.category-group-body {
    padding: 1.25rem 1.35rem 1.5rem;
}

.category-group-count {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--green);
    margin: 0 0 0.35rem;
}

.category-group-title {
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.category-group-desc {
    font-size: 0.9375rem;
    color: var(--muted);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.category-group-action {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--green);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.35);
}

.category-group-card.is-active .category-group-action::after {
    content: " ↑";
}

/* Expanded category panel (level 2) */
.category-panels {
    margin-top: 0;
}

.category-panels.is-open {
    margin-top: 0;
    animation: catalogFadeIn 0.3s ease;
}

@keyframes catalogFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.category-panel-head {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.category-back {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--green);
    cursor: pointer;
}

.category-back:hover {
    color: var(--green-dark);
}

.category-panel-title {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.category-panel-lead {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    max-width: 640px;
}

/* Category panel */
.category-panel--flow {
    padding-top: 0.5rem;
}

.category-panel-head--flow {
    text-align: center;
    border-bottom: none;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

.category-panel-nav {
    text-align: left;
    margin-bottom: 1rem;
}

.category-flow-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-head);
    font-size: clamp(1.125rem, 2.5vw, 1.625rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ink);
}

.category-flow-intro {
    max-width: 42rem;
    margin: 0 auto;
    text-align: left;
}

.category-flow-intro p {
    margin: 0 0 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink);
}

.category-flow-intro p:last-child {
    margin-bottom: 0;
}

.category-flow-intro a {
    font-weight: 500;
}

.category-panel-grid {
    margin-top: 0.25rem;
}

.category-panel--flow .category-panel-head--flow + .catalog-grid {
    margin-top: 1.5rem;
}

.category-flow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 540px) {
    .category-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .category-flow-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .category-flow-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 42rem;
    }
}

.category-flow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    padding: 1.15rem 1rem;
    border: 1px solid #8fa0ad;
    background: #b8c5cf;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.category-flow-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.12);
    transform: translateY(-2px);
    color: var(--ink);
}

.category-flow-card h3 {
    margin: 0 0 0.45rem;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.category-flow-card p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #2f3844;
}

.category-flow-card--enquiry {
    background: #c5d0d8;
}

.category-flow-card--wide {
    max-width: 24rem;
    margin-inline: auto;
}

.category-flow-cta {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

.category-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 0.25rem;
}

@media (min-width: 540px) {
    .category-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .category-feature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.category-feature-card {
    min-height: 8.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--border);
    background: #eef1f4;
    text-align: center;
}

.category-feature-card h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.category-feature-card p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: left;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--green);
    cursor: pointer;
    text-decoration: underline;
}

.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.catalog-count {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.catalog-sort select {
    font: inherit;
    font-size: 0.875rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.catalog-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    container-type: inline-size;
    container-name: catalog-grid;
}

@media (min-width: 640px) {
    .catalog-grid {
        gap: 1.5rem;
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@container catalog-grid (min-width: 480px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@container catalog-grid (min-width: 860px) {
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.catalog-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--green);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.catalog-card:hover {
    transform: translateY(-2px);
}

.catalog-card:focus-within {
    overflow: visible;
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
    transform: translateY(-2px);
}

.catalog-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.catalog-card-link:hover { color: inherit; }

.catalog-card-media {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--bg-muted);
    overflow: hidden;
}

.catalog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.catalog-card:hover .catalog-card-media img {
    transform: scale(1.04);
}

/* Carousel layers are absolutely stacked — don't apply the blanket scale to all of them */
.catalog-card:hover .card-carousel .card-carousel-img {
    transform: none;
}

/* ── Image carousel (multi-image product cards) ── */
.card-carousel { position: relative; }

/* Both layers fill the container and stack on top of each other */
.card-carousel .card-carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.35s ease;
    transform: none; /* reset parent hover scale per-layer */
}

.card-carousel .card-carousel-img.is-active { opacity: 1; }

/* Keep hover scale on the visible layer only */
.catalog-card:hover .card-carousel .card-carousel-img.is-active {
    transform: scale(1.04);
}

.card-carousel-dots {
    position: absolute;
    bottom: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 2;
    --carousel-dot-bg: rgba(255, 255, 255, 0.45);
    --carousel-dot-border: rgba(255, 255, 255, 0.85);
    --carousel-dot-active: #fff;
}

/* Light product photos — match primary button navy */
.card-carousel-dots[data-dot-tone="light"] {
    --carousel-dot-bg: rgba(var(--primary-rgb), 0.35);
    --carousel-dot-border: var(--primary);
    --carousel-dot-active: var(--primary);
}

/* Dark product photos — muted light blue-gray */
.card-carousel-dots[data-dot-tone="dark"] {
    --carousel-dot-bg: rgba(176, 196, 214, 0.45);
    --carousel-dot-border: rgba(200, 214, 227, 0.9);
    --carousel-dot-active: #c8d6e3;
}

.card-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--carousel-dot-bg);
    border: 1.5px solid var(--carousel-dot-border);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.card-carousel-dot.is-active,
.card-carousel-dot:hover {
    background: var(--carousel-dot-active);
}

.catalog-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    font-family: var(--font-head);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--surface);
    color: var(--ink);
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.catalog-card-body {
    padding: 1.1rem 1.15rem 1.25rem;
}

.catalog-card-code {
    font-family: var(--font-head);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--green);
    margin: 0 0 0.25rem;
    line-height: 1.25;
}

.catalog-card-title {
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.catalog-card-subgroup {
    padding: 0;
}

.catalog-subgroup-trigger {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.catalog-subgroup-trigger:hover .catalog-card-action {
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
}

.catalog-card-product .catalog-card-body {
    flex: 1;
}

.catalog-card-enquiry .catalog-card-media {
    background: var(--green-light);
}

.catalog-card-desc {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0 0 0.85rem;
    line-height: 1.5;
}

.catalog-card-action {
    font-family: var(--font-head);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--green);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.35);
}

.catalog-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1.15rem 1.15rem;
    margin-top: auto;
}

.catalog-card-actions .btn-callback,
.catalog-card-actions .catalog-card-add {
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--touch-min);
    height: var(--touch-min);
    padding: 0 0.85rem;
    font-size: 0.8125rem;
    font-family: var(--font-head);
    line-height: 1.25;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.catalog-card-actions .catalog-card-add {
    flex: 0 0 auto;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border: 2px solid transparent;
}

.catalog-card-actions .catalog-card-add:hover {
    background: var(--primary-dark);
    color: #fff;
}

.catalog-card-actions .btn-callback {
    flex: 1 1 auto;
    font-weight: 700;
    background: #fff;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.catalog-card-actions .btn-callback:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.catalog-card-add {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: var(--touch-min);
    font-size: 0.8125rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
}

.catalog-card-add:hover {
    background: var(--primary-dark);
    color: #fff;
}

.catalog-card-add .btn-cart-icon {
    flex-shrink: 0;
}

.catalog-cta-inner {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.catalog-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.catalog-cta-actions .btn,
.catalog-cta-actions .btn-callback {
    width: 100%;
    max-width: 13rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.catalog-cta-inner h2 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    margin: 0;
}

.catalog-cta-inner p {
    color: var(--muted);
    margin: 0;
}

.catalog-cta > .container.catalog-cta-inner .btn,
.catalog-cta > .container.catalog-cta-inner .btn-callback,
.catalog-cta .catalog-cta-inner .btn,
.catalog-cta .catalog-cta-inner .btn-callback,
.catalog-cta-inner.boat-build-cta .btn,
.catalog-cta-inner.boat-build-cta .btn-callback,
.product-cta-inner .btn,
.product-cta-inner .btn-callback,
.section-intro-row .btn,
.section-intro-row .btn-callback,
.about-hero-cta.btn,
.about-hero-cta.btn-callback,
.boats-hero .btn,
.boats-hero .btn-callback,
.product-callback-row .btn-callback {
    padding: 0.55rem 1.1rem;
    font-size: 0.8125rem;
    min-height: auto;
    line-height: 1.3;
}

.catalog-cta > .container.catalog-cta-inner .btn,
.catalog-cta > .container.catalog-cta-inner .btn-callback,
.catalog-cta .catalog-cta-inner .btn,
.catalog-cta .catalog-cta-inner .btn-callback,
.catalog-cta-inner.boat-build-cta .btn,
.catalog-cta-inner.boat-build-cta .btn-callback {
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 13rem;
    align-self: center;
}

.product-intro-simple {
    align-items: center;
}

.product-summary p {
    margin: 0 0 1rem;
    color: var(--muted);
}

.product-summary .btn { margin-top: 0.5rem; }

/* ── Responsive polish (mobile-first) ── */

@media (max-width: 767px) {
    .section { padding: 3rem 0; }

    .hero {
        min-height: clamp(340px, 68vh, 480px);
    }

    .hero-inner {
        padding: 2.5rem 0;
    }

    .hero-lead {
        font-size: 1rem;
    }

    .hero h1 br {
        display: inline;
    }

    .hero h1 br::after {
        content: " ";
    }

    .hero h1 {
        display: block;
        min-height: 0;
        max-width: 100%;
        padding-inline: 0.25rem;
    }

    .hero-title-line {
        display: inline;
    }

    .hero-title-line + .hero-title-line::before {
        content: " ";
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 13rem;
        margin-inline: auto;
    }

    .hero-cta .btn,
    .hero-cta .btn-callback {
        width: 100%;
        max-width: none;
        justify-content: center;
        box-sizing: border-box;
    }

    .catalog-cta > .container.catalog-cta-inner,
    .catalog-cta-inner.boat-build-cta {
        align-items: center;
    }

    .catalog-cta-actions {
        max-width: 13rem;
        margin-inline: auto;
    }

    .catalog-cta > .container.catalog-cta-inner .btn,
    .catalog-cta > .container.catalog-cta-inner .btn-callback,
    .catalog-cta .catalog-cta-inner .btn,
    .catalog-cta .catalog-cta-inner .btn-callback,
    .catalog-cta-inner.boat-build-cta .btn,
    .catalog-cta-inner.boat-build-cta .btn-callback {
        width: 100%;
        max-width: 13rem;
        align-self: center;
        justify-content: center;
    }

    .section-intro-row {
        flex-direction: column;
        align-items: stretch;
    }

    .section-intro-row .btn,
    .section-intro-row .btn-callback {
        width: 100%;
        max-width: 13rem;
        align-self: center;
        display: inline-flex;
        text-align: center;
        justify-content: center;
    }

    .about-hero-cta.btn,
    .about-hero-cta.btn-callback {
        width: 100%;
        max-width: 13rem;
        display: inline-flex;
        justify-content: center;
    }

    .product-column {
        gap: 0;
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--bg-muted);
        border: 1px solid var(--green);
        box-shadow: none;
    }

    .product-block {
        border: none;
        border-radius: 0;
        border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
        background: transparent;
    }

    .product-block-media {
        border: none;
        border-radius: 0;
        background: #eceff4;
    }

    .product-column.is-active .product-block,
    .product-column.is-active .product-block-media {
        border-color: transparent;
        box-shadow: none;
    }

    .product-column.is-active {
        position: relative;
        z-index: 1;
        overflow: visible;
        box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
    }

    .category-group-card {
        background: var(--bg-muted);
        border: 1px solid var(--green);
        box-shadow: none;
    }

    .category-group-card.is-active {
        overflow: visible;
        box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
    }

    .catalog-card {
        background: var(--bg-muted);
        border: 1px solid var(--green);
        box-shadow: none;
        transform: none;
    }

    .catalog-card:focus-within {
        overflow: visible;
        box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.12);
        transform: none;
    }

    .product-hero.section {
        padding-top: 1.5rem;
    }

    .product-title {
        margin-bottom: 1.5rem;
    }

    .product-cta-inner {
        flex-direction: column;
        align-items: stretch;
        max-width: 13rem;
        margin-inline: auto;
    }

    .product-cta-inner .btn,
    .product-cta-inner .btn-callback {
        width: 100%;
        max-width: none;
        justify-content: center;
        box-sizing: border-box;
    }

    .product-callback-row .btn-callback {
        width: 100%;
        justify-content: center;
    }

    .contact-form input,
    .contact-form textarea,
    .catalog-sort select {
        font-size: 1rem;
    }

    .category-back,
    .link-button,
    .filter-clear {
        min-height: var(--touch-min);
        display: inline-flex;
        align-items: center;
    }

    .recommended-sub {
        font-size: 0.8125rem;
    }

    .insight-card {
        padding: 1.5rem;
    }

    .app-block {
        padding: 1.5rem 1.25rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-inner {
        padding: 3rem 0;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (pointer: coarse) {
    .catalog-card:hover,
    .category-group-card:hover,
    .recommended-card:hover {
        transform: none;
    }

    .btn,
    .product-tab,
    .category-group-trigger,
    .recommended-card {
        -webkit-tap-highlight-color: transparent;
    }
}

/* --- Quote cart (B2B order request) --- */
.nav-list li {
    flex-shrink: 0;
}

.nav-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 3.25rem;
    padding: 0.45rem 0.75rem;
    background: var(--primary-light);
    color: var(--primary);
}

.nav-cart-link:hover,
.nav-cart-link[aria-current="page"] {
    color: var(--primary);
    background: var(--brand-blue-light);
}

.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.btn-add-cart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--green);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--touch-min);
}

.btn-add-cart:hover {
    background: var(--green-dark);
    color: #fff;
}

.btn-cart-icon {
    flex-shrink: 0;
}

body.modal-open {
    overflow: hidden;
}

.qty-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

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

.qty-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.qty-modal-panel {
    position: relative;
    width: min(100%, 22rem);
    padding: 1.5rem;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.qty-modal-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.qty-modal-product {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.qty-modal-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.qty-modal-input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.qty-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cart-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.cart-lead {
    margin: 0;
    color: var(--text-muted);
    max-width: none;
}

.cart-page-head {
    margin-bottom: 1.5rem;
}

.page-cart .cart-shell {
    display: grid;
    gap: 0 2rem;
    align-items: start;
}

.cart-shell-full {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    .page-cart .cart-page-head {
        position: sticky;
        top: 5rem;
        z-index: 15;
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
        padding-bottom: 1.25rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .page-cart .cart-shell {
        grid-template-columns: minmax(0, 1fr) min(22rem, 36%);
        column-gap: 2.5rem;
        row-gap: 0;
    }

    .page-cart .cart-col-items {
        grid-column: 1;
        grid-row: 2;
    }

    .page-cart .cart-col-summary {
        grid-column: 2;
        grid-row: 1 / span 2;
        position: sticky;
        top: 5.5rem;
        align-self: start;
    }
}

.cart-items-panel {
    margin-bottom: 0;
}

.cart-items-scroll {
    max-height: min(28rem, calc(100vh - 22rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.35rem;
    margin-right: -0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.35) transparent;
}

.cart-items-scroll::-webkit-scrollbar {
    width: 6px;
}

.cart-items-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.35);
    border-radius: 999px;
}

@media (max-width: 991px) {
    .cart-page-head {
        position: sticky;
        top: 5rem;
        z-index: 15;
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .cart-items-scroll {
        max-height: min(24rem, calc(100vh - 18rem));
    }
}

.cart-section-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
}

/* Left: line items with image, name, quantity */
.cart-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}

.cart-item-media {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-muted);
    aspect-ratio: 1;
}

.cart-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.cart-item-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.35;
}

.cart-item-name a {
    color: inherit;
    text-decoration: none;
}

.cart-item-name a:hover {
    color: var(--green-dark);
}

.cart-item-code {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.cart-item-qty-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cart-item-qty-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
}

.qty-stepper-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.qty-stepper-btn:hover {
    background: var(--border);
}

.qty-stepper-input {
    width: 3rem;
    padding: 0.35rem 0.25rem;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-size: 1rem;
    text-align: center;
    -moz-appearance: textfield;
}

.qty-stepper-input::-webkit-outer-spin-button,
.qty-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item-remove {
    align-self: flex-start;
    margin-top: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-decoration: underline;
    cursor: pointer;
}

.cart-item-remove:hover {
    color: var(--text);
}

.cart-item-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}

.cart-item-empty p {
    margin: 0 0 0.5rem;
}

.cart-item-empty-hint {
    font-size: 0.875rem;
}

/* Right: summary panel */
.cart-summary-card {
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.cart-summary-heading {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
}

.cart-summary-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    margin-bottom: 0.75rem;
}

.cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.cart-summary-name {
    flex: 1;
    min-width: 0;
}

.cart-summary-qty {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-muted);
}

.cart-summary-empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0.25rem 0 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}

.cart-summary-meta {
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cart-add-more {
    margin-top: 2rem;
    padding: 1.25rem 1.35rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-muted);
}

.cart-add-more-head {
    margin-bottom: 1rem;
}

.cart-add-more-label {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
}

.cart-add-more-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.cart-add-more-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
}

.cart-add-more-note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.cart-form-title {
    margin: 0 0 0.65rem;
    font-size: 0.9375rem;
    font-weight: 700;
}

.cart-search-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    background: #fff;
    margin-bottom: 0.5rem;
}

.cart-addon-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cart-addon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.8125rem;
}

.cart-addon-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.cart-addon-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-addon-name {
    font-weight: 600;
    line-height: 1.35;
}

.cart-addon-code {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cart-browse-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.search-results {
    margin-top: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}

.search-hit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.search-hit:last-child {
    border-bottom: none;
}

.search-hit div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.8125rem;
    min-width: 0;
}

.search-hit strong {
    font-weight: 600;
    line-height: 1.3;
}

.search-hit span {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.search-empty {
    margin: 0;
    padding: 0.65rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.cart-submit-form {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-family: inherit;
    margin-bottom: 0.85rem;
    background: #fff;
}

.form-input[aria-invalid="true"] {
    border-color: #dc2626;
}

.cart-hint,
.cart-disclaimer {
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.btn-block {
    width: 100%;
    min-height: var(--touch-min);
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    min-height: 2rem;
}

.cart-empty {
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.order-success {
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--radius);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.order-success h2 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.order-success-body {
    margin: 1rem 0;
    padding: 1rem;
    background: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    white-space: pre-wrap;
    overflow-x: auto;
}

@media (max-width: 639px) {
    .cart-item {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: 1rem;
        padding: 1rem;
    }

    .cart-item-name {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .catalog-card,
    .category-group-card,
    .recommended-card,
    .category-group-media img,
    .catalog-card-media img {
        transition: none;
    }

    .category-panels.is-open {
        animation: none;
    }
}

/* About page */
.page-about .about-hero {
    padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.page-about .about-hero-inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 992px) {
    .page-about .about-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.about-eyebrow {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.about-title {
    margin: 0 0 1.25rem;
    font-family: var(--font-head);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    color: #111827;
    max-width: 22ch;
}

.about-lead {
    margin: 0 0 2rem;
    max-width: 34rem;
    color: #6b7280;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.about-hero-cta {
    margin-top: 0.25rem;
}

.about-hero-media {
    margin: 0;
}

.about-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.cert-strip-about {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 0;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(var(--primary-rgb), 0.08);
}

.page-about .about-intro {
    padding: clamp(5rem, 11vw, 9.5rem) 0;
}

.about-story-inner {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2rem);
}

.about-story-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.about-story-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    max-width: 18ch;
}

.about-story-prose p {
    margin: 0 0 1.15rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
}

.about-story-prose p:last-child {
    margin-bottom: 0;
}

.about-story-media {
    margin: 0;
    width: 100%;
}

@media (max-width: 767px) {
    .page-about .about-story {
        padding-top: 2.5rem;
        padding-bottom: 1rem;
    }

    .about-story-inner {
        gap: 1.5rem;
    }

    .about-story-title {
        max-width: none;
    }

    .about-story-prose {
        padding-top: 0.25rem;
    }

    .about-story-prose p {
        font-size: 1.0625rem;
        line-height: 1.75;
    }

    .about-story-prose p + p {
        margin-top: 0;
        padding-top: 1rem;
        border-top: 1px solid rgba(var(--primary-rgb), 0.08);
    }
}

@media (min-width: 768px) {
    .about-story-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: clamp(1.25rem, 2.5vw, 1.75rem) clamp(2.5rem, 5vw, 4rem);
    }

    .about-story-head {
        grid-column: 1;
        grid-row: 1;
    }

    .about-story-prose {
        grid-column: 1;
        grid-row: 2;
    }

    .about-story-media {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
    }
}

.about-intro-inner {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 992px) {
    .about-intro-inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(3rem, 6vw, 5rem);
    }
}

.about-intro-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
    max-width: 16ch;
}

.about-intro-copy p {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.65;
    color: #6b7280;
}

.about-intro-copy p:last-child {
    margin-bottom: 0;
}

.page-about .about-stats {
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    background: #fff;
}

.page-about .about-stats-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem) 2.5rem;
}

@media (max-width: 767px) {
    .page-about .about-stats {
        padding: clamp(1.75rem, 4vw, 2rem) 0 0.25rem;
    }

    .page-about .about-stats-grid {
        display: block;
        overflow: hidden;
        padding-bottom: 0;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000 10%,
            #000 90%,
            transparent
        );
        mask-image: linear-gradient(
            90deg,
            transparent,
            #000 10%,
            #000 90%,
            transparent
        );
    }

    .page-about .about-stats-grid:not(.about-stats-grid--marquee) {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .page-about .about-stats-grid--marquee .cert-strip-track {
        display: flex;
        align-items: stretch;
        gap: 1.25rem;
        width: max-content;
        animation: cert-marquee-rtl 32s linear infinite;
    }

    .page-about .about-stats-grid--marquee .about-stat {
        flex: 0 0 min(72vw, 16rem);
        width: min(72vw, 16rem);
        text-align: center;
    }

    .page-about .about-stats-grid--marquee .about-stat-label {
        max-width: none;
        margin-inline: auto;
    }

    .page-about .about-stats-grid--marquee:focus-within .cert-strip-track,
    .page-about .about-stats-grid--marquee:hover .cert-strip-track {
        animation-play-state: paused;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .page-about .about-stats-grid--marquee .cert-strip-track {
        animation: none;
    }

    .page-about .about-stats-grid--marquee {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (min-width: 640px) {
    .page-about .about-stats-grid {
        display: block;
    }

    .page-about .about-stats-grid .cert-strip-track {
        display: grid;
        gap: clamp(2rem, 4vw, 4rem) 2.5rem;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .page-about .about-stats-grid .cert-strip-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .page-about .about-stat {
        text-align: left;
    }
}

.about-stat-value {
    margin: 0 0 0.5rem;
    font-family: var(--font-head);
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #2c3445;
    line-height: 1.1;
}

.about-stat-label {
    margin: 0;
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.5;
    max-width: 18rem;
}

@media (min-width: 992px) {
    .page-about .about-stat-label {
        margin-inline: 0;
    }
}

.about-prose {
    max-width: 46rem;
}

.about-prose p {
    margin: 0 0 1.15rem;
    color: var(--text);
    line-height: 1.65;
}

.about-prose p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .page-about .about-quote {
        margin-bottom: 2.25rem;
    }

    .page-about .about-prose {
        margin-top: 0.5rem;
        margin-bottom: 2.25rem;
        padding-inline: 1.35rem;
    }

    .page-about .about-quote-short {
        margin-top: 0.25rem;
    }
}

.about-values {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .about-values {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.about-value-card {
    padding: 1.5rem 1.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.about-value-card h3 {
    margin: 0 0 0.85rem;
    font-family: var(--font-head);
    font-size: 1.125rem;
}

.about-value-card p,
.about-value-card li {
    margin: 0 0 0.65rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.about-value-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

.about-value-card li:last-child {
    margin-bottom: 0;
}

.about-value-credit {
    margin-top: 1rem;
    margin-bottom: 0;
}

.about-quote {
    margin: 0 0 1.75rem;
    padding: 1.5rem 1.35rem;
    border-left: 4px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--bg-muted);
}

.about-quote p {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text);
}

.about-quote-short {
    margin-bottom: 0;
}

.about-team-heading {
    margin: 0 0 1rem;
    font-family: var(--font-head);
    font-size: 1.0625rem;
}

.about-team-heading + .about-team-grid {
    margin-bottom: 2rem;
}

.about-team-grid {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .about-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .about-team-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.about-team-card {
    padding: 1.25rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.about-team-card h4 {
    margin: 0 0 0.35rem;
    font-family: var(--font-head);
    font-size: 1rem;
}

.about-team-meta {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.about-team-role {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text);
}

.about-stat {
    text-align: center;
}

.about-parallax {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #fff;
}

.about-parallax-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -18%;
    width: 100%;
    height: 136%;
    background-image: url('../assets/images/about-s03-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
}

@media (max-width: 767px) {
    .page-about .about-parallax {
        min-height: clamp(10rem, 28vh, 13rem);
    }

    .page-about .about-parallax-bg {
        top: -30%;
        height: 160%;
        background-position: center 42%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-parallax-bg {
        top: 0;
        height: 100%;
        will-change: auto;
    }
}

/* About history */
.about-history {
    --timeline-accent: var(--primary);
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    background: #fff;
}

@media (max-width: 767px) {
    .page-about .about-history.section {
        padding-top: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .about-history {
        padding-top: 1.25rem;
        padding-bottom: 2.5rem;
    }

    .about-history-intro {
        margin-bottom: 0;
    }
}

.about-history-intro {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.about-history h2 {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #3b3a3a;
}

.about-history-subtitle {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.history-timeline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem;
    margin-top: 2.5rem;
}

.history-timeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    background: var(--timeline-accent);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.history-timeline-arrow:hover:not(:disabled) {
    background: var(--primary-dark);
}

.history-timeline-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.history-timeline-scroller {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scroll-padding-inline: max(1rem, 12vw);
    scrollbar-width: none;
    -ms-overflow-style: none;
    outline: none;
}

.history-timeline-scroller::-webkit-scrollbar {
    display: none;
}

.history-timeline-scroller:focus-visible {
    box-shadow: 0 0 0 2px var(--timeline-accent);
}

.history-timeline-rail {
    display: block;
    width: fit-content;
    min-width: 100%;
    padding: 1.5rem 0 2rem;
    overflow: visible;
}

.history-timeline-axis {
    display: none;
}

.history-timeline-list {
    position: relative;
    z-index: 1;
    display: flex;
    width: fit-content;
    min-width: 100%;
    margin: 0;
    --timeline-edge: clamp(1.25rem, 10vw, 7rem);
    --timeline-slot: 12rem;
    --timeline-stem: 3rem;
    --timeline-node: 0.875rem;
    --timeline-axis-y: calc(var(--timeline-slot) + var(--timeline-stem) + (var(--timeline-node) / 2));
    padding: 0 var(--timeline-edge);
    list-style: none;
}

.history-timeline-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: var(--timeline-axis-y);
    height: 0.5rem;
    margin-top: -0.25rem;
    background: var(--timeline-accent);
    pointer-events: none;
}

.history-timeline-event {
    position: relative;
    display: grid;
    grid-template-rows: var(--timeline-slot) var(--timeline-stem) var(--timeline-node) var(--timeline-slot);
    flex: 0 0 min(16.25rem, 72vw);
    align-items: stretch;
    padding: 0 0.75rem;
    scroll-snap-align: center;
    text-align: center;
    overflow: visible;
}

.history-timeline-upper {
    grid-row: 1;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.history-timeline-event--top .history-timeline-stem {
    grid-row: 2;
    justify-self: center;
    width: 2px;
    height: 100%;
    background: var(--timeline-accent);
}

.history-timeline-node {
    position: relative;
    z-index: 2;
    grid-row: 3;
    justify-self: center;
    align-self: center;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--timeline-accent);
}

.history-timeline-lower {
    grid-row: 4;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.history-timeline-event--bottom .history-timeline-lower .history-timeline-stem {
    width: 2px;
    height: 3rem;
    background: var(--timeline-accent);
}

.history-timeline-media {
    margin: 0;
}

.history-timeline-media img {
    width: 4.5rem;
    height: 4.5rem;
    margin-inline: auto;
    border: 3px solid var(--primary);
    border-radius: 50%;
    object-fit: cover;
}

.history-timeline-date,
.history-timeline-year {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: #3b3a3a;
}

.history-timeline-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: #3b3a3a;
}

@media (min-width: 768px) {
    .history-timeline-title {
        display: none;
    }
}

.history-timeline-text {
    margin: 0;
    max-width: 15rem;
    padding-inline: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.55;
    color: #6b7280;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .history-timeline-event {
        flex-basis: 17.5rem;
        padding: 0 1rem;
    }

    .history-timeline-arrow {
        width: 3rem;
        height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .history-timeline-arrow {
        transition: none;
    }

    .history-timeline-scroller {
        scroll-behavior: auto;
    }
}

/* Mobile vertical timeline — left rail + cards (Reintech / CodyHouse pattern) */
@media (max-width: 767px) {
    .page-about .history-timeline {
        display: block;
        margin-top: 1.5rem;
    }

    .page-about .history-timeline-arrow {
        display: none !important;
    }

    .page-about .history-timeline-scroller {
        overflow: visible;
        scroll-snap-type: none;
        scroll-padding-inline: 0;
    }

    .page-about .history-timeline-rail {
        width: 100%;
        min-width: 0;
        padding: 0;
    }

    .page-about .history-timeline-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        padding: 0;
        margin: 0;
    }

    .page-about .history-timeline-list::before {
        left: 11px;
        right: auto;
        top: 0.85rem;
        bottom: 0.85rem;
        width: 2px;
        height: auto;
        margin-top: 0;
        transform: none;
        background: var(--timeline-accent);
    }

    .page-about .history-timeline-event {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        column-gap: 0.65rem;
        row-gap: 0;
        align-items: start;
        position: relative;
        flex: none;
        width: 100%;
        margin: 0;
        padding: 0 0 1.5rem;
        scroll-snap-align: none;
        text-align: left;
    }

    .page-about .history-timeline-event:last-child {
        padding-bottom: 0;
    }

    .page-about .history-timeline-event::before {
        content: "";
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        align-self: start;
        margin-top: 0.55rem;
        z-index: 2;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--timeline-accent);
        box-shadow: 0 0 0 4px #fff;
    }

    .page-about .history-timeline-stem,
    .page-about .history-timeline-node {
        display: none !important;
    }

    .page-about .history-timeline-upper[aria-hidden="true"],
    .page-about .history-timeline-lower[aria-hidden="true"] {
        display: none !important;
    }

    .page-about .history-timeline-upper,
    .page-about .history-timeline-lower {
        display: contents;
    }

    .page-about .history-timeline-date,
    .page-about .history-timeline-year {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: 0.35rem 0 0.75rem;
        padding: 0;
        font-family: var(--font-head);
        font-size: clamp(1.125rem, 3.6vw, 1.375rem);
        font-weight: 800;
        line-height: 1;
        color: var(--primary);
        white-space: nowrap;
    }

    .page-about .history-timeline-title {
        grid-column: 2;
        grid-row: 3;
        margin: 0;
        padding: 0.85rem 1rem 0.4rem;
        font-family: var(--font-head);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        color: #3b3a3a;
        border: 1px solid var(--border);
        border-top: none;
        border-bottom: none;
        background: var(--surface);
    }

    .page-about .history-timeline-media {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        margin: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        border-radius: var(--radius) var(--radius) 0 0;
        overflow: hidden;
        background: var(--surface);
    }

    .page-about .history-timeline-media img {
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        margin: 0;
        aspect-ratio: 16 / 10;
        border: none;
        border-radius: 0;
        object-fit: cover;
    }

    .page-about .history-timeline-text {
        grid-column: 2;
        grid-row: 4;
        max-width: none;
        margin: 0;
        padding: 0 1rem 1rem;
        font-size: 0.9375rem;
        line-height: 1.65;
        color: var(--muted);
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
    }
}