/* machsd template — industrial export design system */

:root {
    --sd-font-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --sd-font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    --sd-paper: #faf9f6;
    --sd-white: #ffffff;
    --sd-ink: #16222e;
    --sd-ink-soft: #4b5865;
    --sd-line: #e5e1d8;
    --sd-navy-950: #0c1720;
    --sd-navy-900: #101e2a;
    --sd-navy-800: #18293a;
    --sd-navy-700: #22374b;
    --sd-navy-line: rgba(255, 255, 255, 0.14);
    --sd-mist: #c8d2da;
    --sd-mist-dim: #93a5b2;
    --sd-accent: #f59e0b;
    --sd-accent-dark: #d97706;
    --sd-accent-ink: #1c1206;
    --sd-container: 84rem;
    --sd-pad: 1.25rem;
}

@media (width >= 48rem) {
    :root { --sd-pad: 2rem; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
    margin: 0;
    background: var(--sd-paper);
    color: var(--sd-ink);
    font-family: var(--sd-font-body);
    font-size: 1rem;
    line-height: 1.65;
}

img { max-width: 100%; height: auto; }

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

a { color: var(--sd-accent-dark); }

h1, h2, h3, h4 {
    font-family: var(--sd-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin: 0 0 0.75rem;
    color: var(--sd-ink);
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); line-height: 0.98; }
h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); }
h3 { font-size: 1.375rem; line-height: 1.15; }

p { margin: 0 0 1rem; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--sd-accent);
    color: var(--sd-accent-ink);
    padding: 0.5rem 1rem;
    z-index: 200;
}

.skip-link:focus { left: 0; }

/* ---------- eyebrow / section heads ---------- */

.sd-eyebrow {
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--sd-accent);
    margin: 0 0 0.9rem;
}

.sd-section-head { margin-bottom: 2.25rem; }

.sd-section-head .sd-lead,
.sd-lead {
    color: var(--sd-ink-soft);
    font-size: 1.0625rem;
    max-width: 46rem;
    margin: 0.5rem 0 0;
}

.sd-dark .sd-lead,
.sd-hero .sd-lead,
.sd-cta .sd-lead { color: var(--sd-mist); }

/* ---------- buttons ---------- */

.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 1.75rem;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sd-btn-accent { background: var(--sd-accent); color: var(--sd-accent-ink); }
.sd-btn-accent:hover { background: var(--sd-accent-dark); color: #fff; }

.sd-btn-dark { background: var(--sd-navy-800); color: #fff; }
.sd-btn-dark:hover { background: var(--sd-navy-700); }

.sd-btn-ghost-light { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.3); }
.sd-btn-ghost-light:hover { border-color: var(--sd-accent); color: var(--sd-accent); }

.sd-btn-ghost-dark { background: transparent; color: var(--sd-ink); border: 2px solid rgba(22, 34, 46, 0.25); }
.sd-btn-ghost-dark:hover { border-color: var(--sd-accent-dark); color: var(--sd-accent-dark); }

.sd-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

.sd-link-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sd-accent-dark);
}

.sd-link-more::after { content: "\2192"; transition: transform 0.2s ease; }
.sd-link-more:hover::after { transform: translateX(4px); }

.sd-dark .sd-link-more { color: var(--sd-accent); }

/* ---------- topbar ---------- */

.sd-topbar {
    background: var(--sd-navy-950);
    color: var(--sd-mist);
    font-size: 0.8125rem;
}

.sd-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-block: 0.45rem;
}

.sd-topbar-tagline { margin: 0; }

.sd-topbar-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sd-accent);
    text-decoration: none;
    font-weight: 600;
}

.sd-topbar-wa:hover { color: #fff; }

.sd-wa-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--sd-accent);
    flex: none;
}

.sd-topbar-side { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.sd-topbar .mod-languages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sd-topbar .mod-languages li { display: block; margin: 0; }

.sd-topbar .mod-languages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--sd-mist);
    border: 1px solid var(--sd-navy-line);
}

.sd-topbar .mod-languages a:hover { color: #fff; border-color: var(--sd-mist); }

.sd-topbar .mod-languages li.lang-active a {
    background: var(--sd-accent);
    border-color: var(--sd-accent);
    color: var(--sd-navy-950);
}

/* ---------- header ---------- */

.sd-header {
    background: rgba(250, 249, 246, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sd-line);
    z-index: 100;
}

.sd-header-sticky { position: sticky; top: 0; }

.sd-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.75rem;
}

.sd-logo { text-decoration: none; display: inline-flex; align-items: center; }

.sd-logo img { height: 46px; width: auto; }

.sd-logo-text {
    font-family: var(--sd-font-head);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sd-ink);
    line-height: 1;
}

.sd-logo-text::after { content: "."; color: var(--sd-accent); }

.sd-header-cta {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--sd-navy-900);
    color: #fff;
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.7rem 1.35rem;
    white-space: nowrap;
}

.sd-header-cta:hover { background: var(--sd-accent-dark); color: #fff; }

html[lang^="zh"] .sd-btn,
html[lang^="zh"] .sd-header-cta { text-transform: none; }

@media (width >= 48rem) {
    .sd-header-cta { display: inline-flex; }
}

/* nav: desktop horizontal */
.sd-nav { display: none; }

.sd-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sd-nav .mod-menu__toggle-sub { display: none; }

.sd-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 3rem;
    height: 3rem;
    padding: 0.75rem;
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    cursor: pointer;
}

.sd-nav-toggle span {
    display: block;
    height: 2px;
    background: var(--sd-ink);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

body.sd-nav-open .sd-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.sd-nav-open .sd-nav-toggle span:nth-child(2) { opacity: 0; }
body.sd-nav-open .sd-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* nav: mobile drawer */
body.sd-nav-open { overflow: hidden; }

.sd-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 23, 32, 0.55);
    z-index: 90;
}

@media (width < 64rem) {
    .sd-header-cta { margin-left: auto; }

    .sd-nav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: min(22rem, 86vw);
        background: var(--sd-navy-900);
        padding: 5.5rem 2rem 2rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 95;
    }

    body.sd-nav-open .sd-nav { transform: translateX(0); }

    .sd-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }

    .sd-nav a {
        display: block;
        font-family: var(--sd-font-head);
        font-weight: 600;
        font-size: 1.125rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        color: #f2f5f7;
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--sd-navy-line);
    }

    .sd-nav a:hover,
    .sd-nav .active > a,
    .sd-nav .current.active > a { color: var(--sd-accent); }

    .sd-nav ul ul { padding-left: 1rem; }
}

@media (width >= 64rem) {
    .sd-nav { display: block; margin-left: auto; }
    .sd-nav-toggle, .sd-nav-backdrop { display: none; }

    .sd-nav > ul,
    .sd-nav ul.mod-menu {
        display: flex;
        align-items: center;
        gap: 1.6rem;
        flex-wrap: wrap;
    }

    .sd-nav a {
        font-family: var(--sd-font-head);
        font-weight: 600;
        font-size: 0.9375rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--sd-ink);
        padding: 0.4rem 0;
        border-bottom: 2px solid transparent;
    }

    .sd-nav a:hover { color: var(--sd-accent-dark); }

    .sd-nav .active > a,
    .sd-nav .current.active > a,
    .sd-nav .default > a {
        color: var(--sd-accent-dark);
        border-bottom-color: var(--sd-accent);
    }

    /* dropdown level 2 */
    .sd-nav li { position: relative; }

    .sd-nav ul ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 14rem;
        background: var(--sd-white);
        border: 1px solid var(--sd-line);
        border-top: 2px solid var(--sd-accent);
        padding: 0.5rem 0;
        box-shadow: 0 12px 28px rgba(12, 23, 32, 0.12);
        z-index: 80;
    }

    .sd-nav li:hover > ul,
    .sd-nav li:focus-within > ul { display: block; }

    .sd-nav ul ul a { display: block; padding: 0.5rem 1rem; border: 0; }

    /* level 3+ opens sideways so it never covers the level 2 panel */
    .sd-nav ul ul ul {
        top: -1px;
        left: 100%;
        border-top: 1px solid var(--sd-line);
        border-left: 2px solid var(--sd-accent);
    }

    .sd-nav ul ul li:has(> ul) > a::after {
        content: '\203A';
        float: right;
        color: var(--sd-ink-soft);
    }
}

/* ---------- hero ---------- */

.sd-hero {
    position: relative;
    background: var(--sd-navy-900);
    color: #fff;
    overflow: hidden;
}

.sd-hero .container { position: relative; z-index: 2; }

.sd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60rem 30rem at 85% 20%, rgba(245, 158, 11, 0.14), transparent 60%),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px);
    z-index: 1;
}

.sd-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center right;
    opacity: 0.5;
}

.sd-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--sd-navy-900) 15%, rgba(16, 30, 42, 0.72) 55%, rgba(16, 30, 42, 0.35) 100%);
}

.sd-hero-pad { padding: 5rem 0 4rem; }

.sd-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

@media (width >= 64rem) {
    .sd-hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3.5rem; }
}

.sd-hero-panel { display: none; }

@media (width >= 64rem) {
    .sd-hero-panel {
        display: block;
        align-self: start;
        margin: 5rem 0 3rem;
        background: rgba(8, 18, 27, 0.66);
        border: 1px solid var(--sd-navy-line);
        padding: 1.25rem 1.25rem 0.75rem;
    }
}

.sd-hero-panel-title {
    margin: 0 0 0.5rem;
    font-family: var(--sd-font-head);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sd-accent);
}

.sd-hero-panel-list { list-style: none; margin: 0; padding: 0; }

.sd-hero-panel-list li + li { border-top: 1px solid var(--sd-navy-line); }

.sd-hero-panel-list a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0;
    text-decoration: none;
    color: var(--sd-mist);
}

.sd-hero-panel-list a:hover { color: #fff; }

.sd-panel-thumb {
    position: relative;
    flex: none;
    width: 3.75rem;
    height: 2.75rem;
    overflow: hidden;
    background: repeating-linear-gradient(-45deg, var(--sd-navy-800) 0 10px, var(--sd-navy-700) 10px 20px);
}

.sd-panel-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sd-panel-body { display: flex; flex-direction: column; gap: 0.15rem; }

.sd-panel-body strong { color: #fff; font-size: 0.875rem; font-weight: 600; }

.sd-panel-body small { font-size: 0.75rem; color: var(--sd-mist); }

.sd-hero h1 { color: #fff; max-width: 20ch; }

.sd-hero h1 .sd-accent-line { color: var(--sd-accent); display: block; }

.sd-hero .sd-lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--sd-mist);
    max-width: 46rem;
    margin: 1.5rem 0 2.25rem;
}

.sd-hero-keywords {
    margin: 2.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sd-navy-line);
    max-width: 46rem;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--sd-mist-dim);
}

/* stats */
.sd-stats-wrap { border-top: 1px solid var(--sd-navy-line); }

.sd-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
    padding: 2.25rem 0 3rem;
    margin: 0;
}

@media (width >= 48rem) {
    .sd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sd-stat-num {
    display: block;
    font-family: var(--sd-font-head);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--sd-accent);
}

.sd-stat-label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sd-mist-dim);
}

/* ---------- generic sections ---------- */

.sd-section { padding: 4.25rem 0; }

.sd-section-alt { background: var(--sd-white); border-block: 1px solid var(--sd-line); }

.sd-dark { background: var(--sd-navy-900); color: #f2f5f7; }
.sd-dark h1, .sd-dark h2, .sd-dark h3 { color: #fff; }

/* ---------- feature cards ---------- */

.sd-features {
    padding: 3.25rem 0;
    background: var(--sd-white);
    border-block: 1px solid var(--sd-line);
}

.sd-cards-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (width >= 40rem) { .sd-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 64rem) { .sd-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sd-feature-card {
    background: transparent;
    padding: 0;
}

.sd-feature-icon {
    display: inline-flex;
    margin-bottom: 0.9rem;
    color: var(--sd-accent-dark);
}

.sd-feature-icon svg { width: 24px; height: 24px; }

.sd-feature-card h3 { font-size: 1.25rem; }

.sd-feature-card p { margin: 0; color: var(--sd-ink-soft); font-size: 0.9375rem; }

/* ---------- product cards ---------- */

.sd-cards-3,
.sd-cat-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (width >= 40rem) { .sd-cards-3, .sd-cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 64rem) { .sd-cards-3, .sd-cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sd-product-card,
.sd-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sd-product-card:hover,
.sd-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(12, 23, 32, 0.12);
}

.sd-product-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background:
        repeating-linear-gradient(-45deg, var(--sd-navy-800) 0 14px, var(--sd-navy-700) 14px 28px);
    overflow: hidden;
}

.sd-product-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.sd-product-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(24rem 12rem at 70% 30%, rgba(245, 158, 11, 0.18), transparent 65%);
}

.sd-product-media:has(img)::before { display: none; }

.sd-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    z-index: 2;
}

.sd-badge {
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
}

.sd-badge-flag { background: var(--sd-accent); color: var(--sd-accent-ink); }
.sd-badge-cat { background: var(--sd-navy-950); color: #fff; }
.sd-badge-count { background: var(--sd-accent); color: var(--sd-accent-ink); }

.sd-product-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
}

.sd-product-body h3 { margin: 0; }

.sd-product-body h3 a { color: inherit; text-decoration: none; }
.sd-product-body h3 a:hover { color: var(--sd-accent-dark); }

.sd-product-intro {
    color: var(--sd-ink-soft);
    font-size: 0.9375rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* As a flex item this box is blockified, so the clamp above needs a hard backstop. */
    max-height: 3.3em;
}

.sd-product-link { margin-top: auto; padding-top: 0.75rem; }

/* ---------- category tiles ---------- */

.sd-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (width >= 48rem) { .sd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (width >= 64rem) { .sd-tiles { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); } }

.sd-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sd-ink);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sd-tile:hover {
    border-color: var(--sd-accent);
    color: var(--sd-accent-dark);
    transform: translateY(-2px);
}

.sd-tile-count {
    font-weight: 700;
    color: var(--sd-accent-dark);
    flex: none;
}

/* ---------- page head (inner pages) ---------- */

.sd-pagehead {
    background: var(--sd-navy-900);
    color: #fff;
    padding: 3.75rem 0 3rem;
}

.sd-pagehead h1,
.sd-pagehead h2 { color: #fff; margin: 0; }

.sd-pagehead .sd-lead { color: var(--sd-mist); margin-top: 0.9rem; }

.sd-pagehead a.sd-eyebrow { text-decoration: none; }
.sd-pagehead a.sd-eyebrow:hover { color: #fff; }

/* ---------- article page ---------- */

.sd-article {
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    padding: 2.25rem 1.5rem;
}

@media (width >= 48rem) { .sd-article { padding: 3rem 3.25rem; } }

.sd-article h2 { font-size: 1.625rem; margin-top: 2rem; }
.sd-article h3 { font-size: 1.3rem; margin-top: 1.75rem; }

.sd-article > h2:first-child,
.sd-article > h3:first-child { margin-top: 0; }

.sd-article blockquote {
    margin: 2.25rem 0 0;
    padding: 1.15rem 1.35rem;
    border-left: 3px solid var(--sd-accent);
    background: var(--sd-paper);
}

.sd-article blockquote p:last-child { margin-bottom: 0; }

.sd-article img { border: 1px solid var(--sd-line); max-width: 100%; height: auto; }

.sd-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.sd-article th,
.sd-article td {
    border: 1px solid var(--sd-line);
    padding: 0.6rem 0.85rem;
    text-align: left;
    vertical-align: top;
}

.sd-article th {
    background: var(--sd-paper);
    font-family: var(--sd-font-head);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sd-article ul, .sd-article ol { padding-left: 1.25rem; }

.sd-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: var(--sd-ink-soft);
    font-size: 0.875rem;
    border-top: 1px solid var(--sd-line);
    margin-top: 2.5rem;
    padding-top: 1rem;
}

/* ---------- page blocks (faq / services / process) ---------- */

.sd-block + .sd-block { margin-top: 3.25rem; }

.sd-block > .sd-eyebrow { margin-bottom: 0.35rem; color: var(--sd-accent-dark); }

.sd-block > h2 {
    margin: 0 0 1.35rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--sd-line);
}

.sd-block.sd-dark { padding: 2.5rem 1.5rem; }

.sd-block.sd-dark > h2 { border-bottom-color: var(--sd-navy-line); }

.sd-dark .sd-eyebrow { color: var(--sd-accent); }

.sd-dark .sd-feature-icon { color: var(--sd-accent); }

.sd-dark .sd-feature-card p { color: var(--sd-mist); }

/* ---------- faq ---------- */

.sd-faq {
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
}

.sd-faq details + details { border-top: 1px solid var(--sd-line); }

.sd-faq summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1rem 1.35rem;
    font-family: var(--sd-font-head);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

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

.sd-faq summary::after {
    content: '+';
    flex: 0 0 auto;
    color: var(--sd-accent-dark);
    font-size: 1.5rem;
    line-height: 1;
}

.sd-faq summary:hover,
.sd-faq details[open] summary { background: var(--sd-paper); }

.sd-faq details[open] summary::after { content: '\2212'; }

.sd-faq details > p {
    margin: 0;
    padding: 0 1.35rem 1.35rem;
    color: var(--sd-ink-soft);
}

/* ---------- process flow ---------- */

.sd-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

.sd-flow-step {
    position: relative;
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    border-top: 3px solid var(--sd-accent);
    padding: 1.5rem 1.35rem 1.6rem;
}

.sd-flow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0 1rem;
    background: var(--sd-navy-900);
    color: #fff;
    font-family: var(--sd-font-head);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.sd-flow-step h2,
.sd-flow-step h3 { font-size: 1.25rem; margin: 0 0 0.65rem; }

.sd-flow-step > p:not(.sd-flow-num) {
    margin: 0 0 0.5rem;
    color: var(--sd-ink-soft);
    font-size: 0.9375rem;
}

.sd-flow-step > p:last-child { margin-bottom: 0; }

/* the connector sits in the gap, so any number of steps reads as one flow */
.sd-flow-step + .sd-flow-step::before {
    content: '\2193';
    position: absolute;
    left: 50%;
    top: -2rem;
    transform: translateX(-50%);
    color: var(--sd-accent-dark);
    font-size: 1.5rem;
    line-height: 1;
}

@media (width >= 48rem) {
    .sd-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.75rem;
        padding-left: 1.75rem;
    }

    .sd-flow-step + .sd-flow-step::before {
        content: '\2192';
        left: -2.15rem;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (width >= 64rem) {
    .sd-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sd-flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sd-flow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- info panels ---------- */

.sd-infobox {
    display: flex;
    flex-direction: column;
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    padding: 1.5rem 1.35rem;
}

.sd-infobox > .sd-eyebrow { margin-bottom: 1rem; color: var(--sd-accent-dark); }

.sd-infobox > p:not(.sd-eyebrow) {
    margin: 0;
    color: var(--sd-ink-soft);
    font-size: 0.9375rem;
}

.sd-infobox .sd-pd-feats { margin-top: 0; }

.sd-leadlist { list-style: none; margin: 0; padding: 0; }

.sd-leadlist li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--sd-line);
    font-size: 0.9375rem;
}

.sd-leadlist li:last-child { border-bottom: 0; padding-bottom: 0; }

.sd-leadlist li > span:first-child { color: var(--sd-ink); font-weight: 600; }

.sd-leadlist li > span:last-child {
    color: var(--sd-accent-dark);
    font-family: var(--sd-font-head);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sd-nextstep-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: auto;
    padding-top: 1.5rem;
}

.sd-nextstep-actions .sd-btn { justify-content: center; }

/* ---------- about: model copy beside the live counters ---------- */

.sd-about-grid { display: grid; gap: 2.5rem; }

.sd-about-copy > p { color: var(--sd-ink-soft); line-height: 1.75; }

.sd-about-copy > p:last-child { margin-bottom: 0; }

/* The shared stats block is built for the dark hero, so it needs a light restyling here. */
.sd-about-stats .sd-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0;
}

.sd-about-stats .sd-stats-row > .sd-stat {
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    padding: 1.5rem 1.25rem;
}

.sd-about-stats .sd-stat-num {
    color: var(--sd-accent-dark);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.sd-about-stats .sd-stat-label {
    color: var(--sd-ink-soft);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: none;
}

@media (width >= 64rem) {
    .sd-about-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: start;
        gap: 3.5rem;
    }
}

/* ---------- knowledge base (blog) ---------- */

.sd-post-head > p:last-child { margin: 0; color: var(--sd-ink-soft); }

.sd-post-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.5rem 0; }

.sd-post-tab {
    padding: 0.55rem 1rem;
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    color: var(--sd-ink);
    font-family: var(--sd-font-head);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.sd-post-tab:hover { border-color: var(--sd-accent); color: var(--sd-accent-dark); }

.sd-post-tab.is-active { background: var(--sd-navy-800); border-color: var(--sd-navy-800); color: #fff; }

.sd-post-card {
    display: flex;
    flex-direction: column;
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sd-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(12, 23, 32, 0.12);
}

.sd-post-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background:
        repeating-linear-gradient(-45deg, var(--sd-navy-800) 0 14px, var(--sd-navy-700) 14px 28px);
    overflow: hidden;
}

.sd-post-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.sd-post-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(24rem 12rem at 70% 30%, rgba(245, 158, 11, 0.18), transparent 65%);
}

.sd-post-media:has(img)::before { display: none; }

.sd-post-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
    padding: 1.35rem 1.35rem 1.5rem;
}

.sd-post-body h3 { margin: 0; font-size: 1.25rem; }

.sd-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    color: var(--sd-ink-soft);
    font-size: 0.8125rem;
}

.sd-post-excerpt { flex: 1; margin: 0; color: var(--sd-ink-soft); font-size: 0.9375rem; }

.sd-post-date {
    margin: 1.15rem 0 0;
    color: var(--sd-mist-dim);
    font-family: var(--sd-font-head);
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
}

.sd-post-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (width >= 64rem) { .sd-post-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; } }

.sd-post-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sd-accent-dark);
}

.sd-post-back::before { content: "\2190"; transition: transform 0.2s ease; }
.sd-post-back:hover::before { transform: translateX(-4px); }

.sd-post-aside h2 { margin: 0 0 0.65rem; font-size: 1.25rem; }

/* ---------- video / media cards ---------- */

.sd-cards-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (width >= 48rem) { .sd-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sd-media-card { background: var(--sd-white); border: 1px solid var(--sd-line); }

.sd-media-card video,
.sd-media-card iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--sd-navy-950);
    border: 0;
}

.sd-media-card-body { padding: 1.25rem 1.25rem 1.5rem; }

.sd-media-card-body h2,
.sd-media-card-body h3 { margin: 0 0 0.5rem; font-size: 1.5rem; }

.sd-media-card-body p { color: var(--sd-ink-soft); font-size: 0.9375rem; margin: 0; }

.sd-films { background: linear-gradient(135deg, var(--sd-navy-950), var(--sd-navy-700)); }

.sd-films .sd-media-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--sd-navy-line);
    padding: 1rem;
}

.sd-films .sd-media-card-body { padding: 1rem 0 0; }

.sd-films .sd-media-card-body h3 { color: #fff; }

.sd-films .sd-media-card-body p { color: var(--sd-mist); }

/* ---------- certificate / doc chips ---------- */

.sd-docs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (width >= 48rem) { .sd-docs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sd-doc {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--sd-navy-line);
    background: var(--sd-navy-800);
    color: #f2f5f7;
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sd-doc::before { content: "\2193"; color: var(--sd-accent); font-weight: 700; }

.sd-doc:hover { background: var(--sd-accent); color: var(--sd-accent-ink); }
.sd-doc:hover::before { color: var(--sd-accent-ink); }

/* ---------- cta ---------- */

.sd-cta {
    background: var(--sd-accent);
    color: var(--sd-navy-950);
    padding: 3.5rem 0;
}

.sd-cta .custom {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (width >= 64rem) {
    .sd-cta .custom { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
}

.sd-cta h2 { color: var(--sd-navy-950); }

.sd-cta .sd-lead {
    margin: 0.75rem 0 0;
    max-width: 46rem;
    color: rgba(15, 28, 40, 0.78);
}

.sd-cta .sd-btn-row { justify-content: flex-start; }

.sd-cta .sd-btn-accent { background: var(--sd-navy-900); color: #fff; }

.sd-cta .sd-btn-accent:hover { background: var(--sd-navy-950); color: #fff; }

.sd-cta .sd-btn-ghost-light { border-color: rgba(15, 28, 40, 0.55); color: var(--sd-navy-950); }

.sd-cta .sd-btn-ghost-light:hover { border-color: var(--sd-navy-950); color: var(--sd-navy-950); }

.sd-section-action { margin: 2.25rem 0 0; }

/* ---------- contact ---------- */

.sd-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (width >= 64rem) {
    .sd-contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; }
}

.sd-contact-cards { display: grid; gap: 1.25rem; }

.sd-contact-card {
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    padding: 1.5rem;
}

.sd-contact-card .sd-eyebrow { margin: 0 0 0.4rem; }

.sd-contact-value {
    margin: 0;
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sd-ink);
}

.sd-contact-note {
    margin: 0;
    color: var(--sd-ink-soft);
    font-size: 0.9375rem;
}

.sd-form {
    background: var(--sd-white);
    border: 1px solid var(--sd-line);
    padding: 2rem;
}

.sd-form h2 { margin: 0 0 1.5rem; }

.sd-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (width >= 40rem) { .sd-form-row { grid-template-columns: 1fr 1fr; } }

.sd-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    font-family: var(--sd-font-head);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sd-accent-dark);
}

.sd-form-row label { margin-bottom: 0; }

.sd-form input,
.sd-form select,
.sd-form textarea {
    border: 1px solid var(--sd-line);
    background: var(--sd-white);
    padding: 0.65rem 0.75rem;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: var(--sd-ink);
}

.sd-form textarea { min-height: 8rem; resize: vertical; }

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

.sd-form-status { margin: 1rem 0 0; font-size: 0.9375rem; }

.sd-form-status.ok { color: #1a7f37; }

.sd-form-status.err { color: #b3261e; }

html[lang^="zh"] .sd-form label { text-transform: none; }

html[lang^="zh"] .sd-contact-value { text-transform: none; }

html[lang^="zh"] .sd-eyebrow { letter-spacing: 0.12em; }

/* ---------- cookie consent ---------- */

.sd-cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    background: var(--sd-white);
    border-top: 1px solid var(--sd-line);
    box-shadow: 0 -10px 30px rgba(9, 20, 30, 0.14);
    padding: 0.85rem 0;
}

.sd-cookie-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.5rem;
}

.sd-cookie-text {
    margin: 0;
    flex: 1 1 22rem;
    font-size: 0.875rem;
    color: var(--sd-ink-soft);
}

.sd-cookie-text a {
    margin-left: 0.25rem;
    color: var(--sd-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sd-cookie-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.sd-cookie-actions .sd-btn { padding: 0.55rem 1rem; font-size: 0.8125rem; }

.sd-btn-cookie { background: transparent; color: var(--sd-ink); border: 1px solid var(--sd-line); }

.sd-btn-cookie:hover { border-color: var(--sd-ink); }

.sd-cookie-close {
    margin-left: 0.15rem;
    padding: 0.25rem 0.4rem;
    background: none;
    border: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--sd-ink-soft);
    cursor: pointer;
}

.sd-cookie-close:hover { color: var(--sd-ink); }

/* ---------- footer ---------- */

.sd-footer {
    background: var(--sd-navy-950);
    color: var(--sd-mist);
    padding-top: 4rem;
    font-size: 0.9375rem;
}

.sd-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.75rem;
}

@media (width >= 48rem) { .sd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (width >= 64rem) {
    .sd-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

.sd-footer h3,
.sd-footer .sd-footer-title,
.sd-footer .mod-custom > h3 {
    font-family: var(--sd-font-head);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sd-mist-dim);
    margin: 0 0 0.8rem;
}

.sd-footer-brand .sd-logo-text { color: #fff; font-size: 1.375rem; }

html[lang="zh-CN"] .sd-footer h3,
html[lang="zh-CN"] .sd-footer .sd-footer-title {
    letter-spacing: 0.08em;
    text-transform: none;
}

.sd-footer-brand .sd-footer-logo { margin: 1.1rem 0 0; }

.sd-footer-brand .sd-footer-logo img {
    display: block;
    max-width: 13rem;
    height: auto;
    background: var(--sd-white);
    padding: 0.5rem 0.85rem;
    border-radius: 0.375rem;
}

.sd-footer p { color: var(--sd-mist-dim); }

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

.sd-footer ul li { margin: 0; }

.sd-footer ul a {
    display: inline-block;
    padding: 0.22rem 0;
    color: var(--sd-mist);
    text-decoration: none;
}

.sd-footer ul a:hover { color: var(--sd-accent); }

.sd-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    border-top: 1px solid var(--sd-navy-line);
    margin-top: 3.25rem;
    padding-block: 1.25rem;
    font-size: 0.8125rem;
    color: var(--sd-mist-dim);
}

.sd-footer-bottom p { margin: 0; color: inherit; }

/* ---------- site search ---------- */

.sd-search { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }

.sd-search-input {
    flex: 1 1 15rem;
    min-width: 0;
    padding: 0 1rem;
    border: 1px solid var(--sd-line);
    border-radius: 0;
    background: var(--sd-paper);
    color: var(--sd-ink);
    font-family: var(--sd-font-body);
    font-size: 1rem;
    appearance: none;
}

.sd-search-input::placeholder { color: var(--sd-mist-dim); }

.sd-search-input:focus {
    outline: 2px solid var(--sd-accent-dark);
    outline-offset: -2px;
    border-color: var(--sd-accent-dark);
    background: var(--sd-white);
}

/* WebKit paints its own cancel button over the focus ring */
.sd-search-input::-webkit-search-decoration,
.sd-search-input::-webkit-search-cancel-button { appearance: none; }

.sd-search-btn { flex: 0 0 auto; padding-inline: 1.5rem; cursor: pointer; }

.sd-search-wide { max-width: 42rem; margin-bottom: 2.75rem; }

/* Section heading with the search box parked beside it */
.sd-section-head-split { display: grid; gap: 1.75rem; align-items: end; }

@media (width >= 64rem) {
    .sd-section-head-split {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
        gap: 3rem;
    }
}

/* ---------- smart search results ---------- */

.sd-search-explained {
    border-left: 3px solid var(--sd-accent);
    background: var(--sd-paper);
    padding: 0.875rem 1.25rem;
    margin-bottom: 2.25rem;
}

.sd-search-explained p { margin: 0; color: var(--sd-ink-soft); font-size: 0.9375rem; }

.sd-search-explained a { color: var(--sd-accent-dark); }

.sd-search-list { list-style: none; margin: 0; padding: 0; }

.result__item { border-top: 1px solid var(--sd-line); padding: 1.5rem 0; }

.result__item:last-child { border-bottom: 1px solid var(--sd-line); }

.result__title { margin: 0; }

.result__title-link { text-decoration: none; }

.result__title-text {
    display: block;
    font-family: var(--sd-font-head);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sd-navy-800);
}

.result__title-link:hover .result__title-text { color: var(--sd-accent-dark); }

.result__description { margin: 0.5rem 0 0; color: var(--sd-ink-soft); line-height: 1.7; }

.result__date {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-mist-dim);
    margin-bottom: 0.25rem;
}

.result__taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.5rem;
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--sd-ink);
}

.result__taxonomy-item span { color: var(--sd-mist-dim); margin-right: 0.25rem; }

/* The author row only ever names the backend editor account, and every hit on this page is in the page language */
.result__taxonomy--Author,
.result__taxonomy--Language { display: none; }

.sd-search-empty { border: 1px solid var(--sd-line); background: var(--sd-paper); padding: 2rem; }

.sd-search-empty h2 {
    font-family: var(--sd-font-head);
    font-size: 1.5rem;
    color: var(--sd-navy-800);
    margin: 0 0 0.5rem;
}

.sd-search-empty p { margin: 0; color: var(--sd-ink-soft); }

.sd-search-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
}

.sd-search-navigation .sd-pagination { margin: 0; }

.sd-search-navigation .sd-pagination ul.pagination { justify-content: flex-start; }

.sd-search-counter { font-size: 0.875rem; color: var(--sd-ink-soft); }

/* ---------- pagination ---------- */

.sd-pagination { margin: 3rem 0 0; }

/* Joomla outputs a Bootstrap-style list; flatten it into one centred row of boxes */
.sd-pagination ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-pagination .page-item { margin: 0; }

.sd-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--sd-line);
    background: var(--sd-white);
    color: var(--sd-ink);
    font-family: var(--sd-font-head);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.sd-pagination a.page-link:hover { border-color: var(--sd-accent); color: var(--sd-accent-dark); }

.sd-pagination .page-item.active .page-link {
    background: var(--sd-navy-800);
    border-color: var(--sd-navy-800);
    color: #fff;
    pointer-events: none;
}

.sd-pagination .page-item.disabled .page-link { color: var(--sd-mist-dim); }

/* the Bootstrap icon font is not loaded here, so draw the arrows ourselves */
.sd-pagination [class*="icon-angle"] { font-size: 1.125rem; line-height: 1; }

.sd-pagination .icon-angle-double-left::before { content: '\00AB'; }
.sd-pagination .icon-angle-left::before { content: '\2039'; }
.sd-pagination .icon-angle-right::before { content: '\203A'; }
.sd-pagination .icon-angle-double-right::before { content: '\00BB'; }

/* ---------- joomla chrome cleanup ---------- */

.sd-main .moduletable,
.sd-main div[class*="mod-"] { margin: 0; }

.sd-main .btn-outline-primary,
.sd-main .btn-primary { border-radius: 0; }

.system-unpublished { outline: 2px dashed var(--sd-accent-dark); }

/* messages */
#sd-main .alert,
.sd-main .alert {
    border-radius: 0;
    border: 1px solid var(--sd-line);
    border-left: 4px solid var(--sd-accent);
    background: var(--sd-white);
    padding: 1rem 1.25rem;
}

/* login / forms on dark or light: keep inputs square */
.sd-main input,
.sd-main select,
.sd-main textarea {
    border-radius: 0;
    border: 1px solid var(--sd-line);
    padding: 0.65rem 0.85rem;
    font: inherit;
    background: var(--sd-white);
    color: var(--sd-ink);
    max-width: 100%;
}

.sd-main input:focus,
.sd-main select:focus,
.sd-main textarea:focus {
    outline: 2px solid var(--sd-accent);
    outline-offset: 0;
}

/* ---------- product detail ---------- */

.sd-pd-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (width >= 64rem) {
    .sd-pd-hero-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; }
}

.sd-pd-hero-actions { margin-top: 1.75rem; }

.sd-pd-main { margin: 0; }

.sd-pd-main img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.sd-pd-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.sd-pd-thumb {
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
}

.sd-pd-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.sd-pd-thumb.is-active { border-color: var(--sd-accent); }

.sd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid var(--sd-line);
    margin-bottom: 1.75rem;
}

.sd-tab {
    font-family: var(--sd-font-head);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.875rem;
    padding: 0.7rem 1.1rem;
    background: none;
    border: 1px solid var(--sd-line);
    border-bottom: none;
    color: var(--sd-ink-soft);
    cursor: pointer;
}

.sd-tab.is-active { background: var(--sd-navy-900); color: #fff; border-color: var(--sd-navy-900); }

.sd-tabpanel { display: none; }
.sd-tabpanel.is-active { display: block; }

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

.sd-spec-table th,
.sd-spec-table td {
    border: 1px solid var(--sd-line);
    padding: 0.6rem 0.85rem;
    text-align: left;
    vertical-align: top;
}

.sd-spec-table th {
    background: var(--sd-paper);
    font-family: var(--sd-font-head);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 34%;
}

.sd-pd-feats { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.6rem; }

.sd-pd-feats li { position: relative; padding-left: 1.5rem; color: var(--sd-ink-soft); }

.sd-pd-feats li::before { content: "\2713"; position: absolute; left: 0; color: var(--sd-accent-dark); font-weight: 700; }

.sd-pd-subhead { font-size: 1.25rem; margin: 2rem 0 0; }

.sd-pd-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.sd-pd-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--sd-line); }

.sd-pd-overview { border: none; padding: 0; background: none; }

/* ---------- back to top ---------- */

.sd-back-to-top {
    position: fixed;
    right: var(--sd-pad);
    bottom: 1.5rem;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--sd-navy-900);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(9, 20, 30, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
}

.sd-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sd-back-to-top:hover,
.sd-back-to-top:focus-visible {
    background: var(--sd-accent-dark);
    color: var(--sd-accent-ink);
}

.sd-back-to-top svg { display: block; }

/* ---------- print ---------- */
@media print {
    .sd-topbar, .sd-header, .sd-footer, .sd-cta, .sd-nav-toggle, .sd-back-to-top { display: none !important; }
}

/* ---------- language switcher pills ---------- */
.sd-lang-switch ul,
.sd-lang-switch { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 0.35rem; align-items: center; }
.sd-lang-switch li { list-style: none; margin: 0; padding: 0; display: inline; }
.sd-lang-switch a { display: inline-flex; align-items: center; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sd-mist); border: 1px solid transparent; text-decoration: none; transition: all 0.15s ease; }
.sd-lang-switch a:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.sd-lang-switch li.current-lang a { background: var(--sd-accent); color: var(--sd-accent-ink); }

/* ---------- stats band ---------- */
.sd-stats { background: var(--sd-navy-950); color: #fff; padding: 3rem 0; }
.sd-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
@media (min-width: 48rem) { .sd-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.sd-stat-num { font-family: var(--sd-font-head); font-size: 2.75rem; font-weight: 700; line-height: 1; color: var(--sd-accent); }
.sd-stat-label { margin-top: 0.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-mist-dim); }

/* ---------- flagship product (large card) ---------- */
.sd-flagship { background: var(--sd-white); border: 1px solid var(--sd-line); border-radius: 6px; overflow: hidden; margin-bottom: 2.5rem; }
.sd-flagship-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sd-navy-900); }
.sd-flagship-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-flagship-badge { position: absolute; top: 1rem; right: 1rem; background: var(--sd-accent); color: var(--sd-accent-ink); font-family: var(--sd-font-head); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 3px; }
.sd-flagship-body { padding: 1.75rem 2rem 2rem; }
.sd-flagship-cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-accent-dark); margin-bottom: 0.4rem; }
.sd-flagship-title { font-family: var(--sd-font-head); font-size: 1.6rem; font-weight: 600; text-transform: uppercase; color: var(--sd-ink); margin: 0 0 0.5rem; line-height: 1.15; }
.sd-flagship-desc { color: var(--sd-ink-soft); margin: 0 0 1.1rem; font-size: 0.95rem; }
.sd-flagship-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sd-font-head); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sd-accent-dark); text-decoration: none; }
.sd-flagship-link:hover { color: var(--sd-accent); }

/* ---------- amber CTA band ---------- */
.sd-cta-band { background: var(--sd-accent); color: var(--sd-accent-ink); padding: 4rem 0; }
.sd-cta-band h2 { font-family: var(--sd-font-head); font-size: 2.5rem; font-weight: 700; text-transform: uppercase; line-height: 1.05; margin: 0 0 1rem; }
.sd-cta-band p { max-width: 38rem; font-size: 1.05rem; margin: 0 0 1.75rem; }
.sd-cta-band .sd-btn-dark { background: var(--sd-navy-950); color: #fff; border-color: var(--sd-navy-950); }
.sd-cta-band .sd-btn-dark:hover { background: var(--sd-navy-800); }
.sd-cta-band .sd-btn-outline-dark { background: transparent; color: var(--sd-accent-ink); border: 2px solid var(--sd-accent-ink); }
.sd-cta-band .sd-btn-outline-dark:hover { background: var(--sd-accent-ink); color: var(--sd-accent); }

/* ---------- footer categories ---------- */
.sd-footer-cats { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.sd-footer-cats li { margin-bottom: 0.5rem; break-inside: avoid; }
.sd-footer-cats a { color: var(--sd-mist); text-decoration: none; font-size: 0.92rem; }
.sd-footer-cats a:hover { color: var(--sd-accent); }

/* force remove bullets on lang switcher */
.sd-lang-switch, .sd-lang-switch li { list-style: none !important; }
.sd-lang-switch ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* ---------- categories grid ---------- */
.sd-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .sd-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .sd-cat-grid { grid-template-columns: repeat(5, 1fr); } }
.sd-cat-tile {
    display: flex; flex-direction: column; justify-content: space-between;
    background: var(--sd-white); border: 1px solid var(--sd-line); border-radius: 6px;
    padding: 1.1rem 1.25rem; text-decoration: none; min-height: 90px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.sd-cat-tile:hover { border-color: var(--sd-accent); transform: translateY(-2px); }
.sd-cat-tile-name { font-weight: 600; color: var(--sd-ink); font-size: 0.95rem; line-height: 1.3; }
.sd-cat-tile-count { font-size: 0.78rem; color: var(--sd-accent-dark); font-weight: 700; margin-top: 0.4rem; }

/* ---------- films ---------- */
.sd-films { background: var(--sd-navy-950); color: #fff; }
.sd-films .sd-section-title { color: #fff; }
.sd-films .sd-section-desc { color: var(--sd-mist); }
.sd-films-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 48rem) { .sd-films-grid { grid-template-columns: repeat(2, 1fr); } }
.sd-film-card { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); border-radius: 6px; padding: 1rem; }
.sd-film-video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; border-radius: 4px; display: block; }
.sd-film-title { margin: 0.9rem 0 0.3rem; font-family: var(--sd-font-head); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; color: #fff; }
.sd-film-desc { margin: 0; font-size: 0.88rem; color: var(--sd-mist); }

/* hero panel list items with thumbnails */
.sd-hero-panel-list li { list-style: none; margin: 0; padding: 0; }
.sd-hero-panel-list li a {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0;
    border-bottom: 1px solid var(--sd-navy-line); text-decoration: none;
}
.sd-hero-panel-list li:last-child a { border-bottom: none; }
.sd-hero-panel-list img {
    width: 52px; height: 52px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.sd-hero-panel-info { display: flex; flex-direction: column; min-width: 0; }
.sd-hero-panel-name {
    font-family: var(--sd-font-head); font-weight: 600; font-size: 0.95rem;
    text-transform: uppercase; color: #fff; line-height: 1.2;
}
.sd-hero-panel-cat { font-size: 0.75rem; color: var(--sd-mist-dim); margin-top: 0.15rem; }
.sd-hero-panel-list li a:hover .sd-hero-panel-name { color: var(--sd-accent); }

/* override hero panel hidden default */
.sd-hero-panel { display: block !important; }
.sd-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; }
@media (max-width: 48rem) { .sd-hero-inner { grid-template-columns: 1fr !important; } .sd-hero-panel { display: none !important; } }

/* flagship cards aligned to live site: no card border, full-bleed image */
.sd-flagship {
    display: block; background: transparent !important; border: none !important;
    border-radius: 0 !important; margin: 0 0 3rem !important; padding: 0 !important;
}
.sd-flagship-media {
    position: relative; overflow: hidden; border-radius: 0 !important; margin-bottom: 1.5rem;
}
.sd-flagship-media img { border-radius: 0 !important; }
.sd-flagship-badge {
    position: absolute; top: 1rem; right: 1rem; background: var(--sd-accent);
    color: var(--sd-navy-950); font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 0.35rem 0.75rem; border-radius: 2px;
}
.sd-flagship-body { padding: 0 !important; max-width: 640px; }
.sd-flagship-cat { color: var(--sd-accent); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.sd-flagship-title { font-family: var(--sd-font-head); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; color: var(--sd-navy-950); margin: 0 0 0.75rem; line-height: 1.15; }
.sd-flagship-desc { color: var(--sd-mist-dark); font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; }
.sd-flagship-link { color: var(--sd-accent-dark); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ========== trust strip (4 columns) ========== */
.sd-trust-strip { background: var(--sd-white); padding: 3rem 0; border-top: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); }
.sd-trust-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 48rem) { .sd-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .sd-trust-grid { grid-template-columns: repeat(4, 1fr); } }
.sd-trust-grid h4 { font-family: var(--sd-font-head); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sd-navy-950); margin: 0 0 0.5rem; }
.sd-trust-grid p { font-size: 0.88rem; color: var(--sd-mist-dark); line-height: 1.6; margin: 0; }

/* ========== flagship 3-column grid ========== */
.sd-flagship-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 48rem) { .sd-flagship-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .sd-flagship-grid { grid-template-columns: repeat(3, 1fr); } }
.sd-flagship-card { background: var(--sd-white); border: 1px solid var(--sd-line); border-radius: 6px; overflow: hidden; }
.sd-flagship-media { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.sd-flagship-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-flagship-badge {
    position: absolute; top: 0.75rem; right: 0.75rem; background: var(--sd-accent);
    color: var(--sd-navy-950); font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 0.3rem 0.6rem; border-radius: 2px;
}
.sd-flagship-body { padding: 1.25rem 1.25rem 1.5rem; }
.sd-flagship-cat { color: var(--sd-accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.sd-flagship-title { font-family: var(--sd-font-head); font-weight: 700; font-size: 1.05rem; color: var(--sd-navy-950); margin: 0 0 0.4rem; line-height: 1.25; }
.sd-flagship-desc { color: var(--sd-mist-dark); font-size: 0.85rem; line-height: 1.5; margin: 0 0 0.75rem; }
.sd-flagship-link { color: var(--sd-accent-dark); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.sd-text-center { text-align: center; }

/* ========== category pills (flow wrap) ========== */
.sd-cat-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.sd-cat-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--sd-white); border: 1px solid var(--sd-line); border-radius: 4px;
    padding: 0.5rem 0.9rem; text-decoration: none; font-size: 0.85rem; color: var(--sd-ink);
    font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease;
}
.sd-cat-pill:hover { border-color: var(--sd-accent); background: rgba(217,119,6,0.06); }
.sd-cat-pill span { color: var(--sd-mist-dark); font-size: 0.78rem; font-weight: 600; }

/* ========== CTA band: text left, buttons right ========== */
.sd-cta-band .container { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
@media (min-width: 64rem) { .sd-cta-band .container { flex-direction: row; align-items: center; justify-content: space-between; } }
.sd-cta-band h2 { margin: 0 0 0.5rem; }
.sd-cta-band p { margin: 0; max-width: 480px; }

/* hero stats (inside hero, below buttons) */
.sd-hero-stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.sd-hero-stat-num { font-family: var(--sd-font-head); font-weight: 800; font-size: 2rem; color: var(--sd-accent); line-height: 1; }
.sd-hero-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sd-mist); margin-top: 0.35rem; }

/* enlarge hero right panel */
.sd-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; }
.sd-hero-panel { padding: 1.5rem 1.75rem; }
.sd-hero-panel-title { font-size: 0.85rem; margin-bottom: 1rem; }
.sd-hero-panel-list li a { padding: 0.8rem 0; gap: 1rem; }
.sd-hero-panel-list img { width: 64px; height: 64px; border-radius: 4px; }
.sd-hero-panel-name { font-size: 1.02rem; }
.sd-hero-panel-cat { font-size: 0.8rem; }

.sd-trust-item { display: flex; flex-direction: column; }
.sd-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--sd-accent); color: var(--sd-navy-950); margin-bottom: 0.9rem; }
.sd-trust-icon svg { width: 22px; height: 22px; }
.sd-trust-grid h4 { margin-top: 0; }


/* ========== new hero layout (centered, matching old site) ========== */
.sd-hero-inner { text-align: center; padding: 6rem 0 5rem; max-width: 900px; }
.sd-hero-title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; margin: 1rem 0 1.5rem; }
.sd-eyebrow-center { text-align: center; }
.sd-lead-center { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.sd-btn-row-center { justify-content: center; margin-bottom: 2rem; }
.sd-hero-types { font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.8; max-width: 720px; margin: 0 auto; }
.sd-stats-band { background: var(--sd-navy-950); padding: 3rem 0; }
.sd-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 64rem) { .sd-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.sd-stat { text-align: center; }
.sd-stat-num { font-size: 2.5rem; font-weight: 900; color: var(--sd-accent); line-height: 1; margin-bottom: 0.5rem; }
.sd-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }

/* logo two-line */
.sd-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.sd-logo-line1 { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.12em; color: var(--sd-navy-950); }
.sd-logo-line2 { font-size: 1.3rem; font-weight: 900; letter-spacing: 0.08em; color: var(--sd-navy-950); }
.sd-logo-badge { font-size: 0.6rem; font-weight: 700; color: var(--sd-accent); letter-spacing: 0.15em; margin-top: 2px; }

/* override old grid layout for new centered hero */
.sd-hero-inner { display: block !important; grid-template-columns: none !important; text-align: center !important; padding: 6rem 0 5rem; max-width: 900px; }
.sd-hero-pad { display: none !important; }
.sd-hero-panel { display: none !important; }

.sd-logo-img { height: 48px; width: auto; display: block; }

/* ========== hero left-right layout (PC) / centered (mobile) ========== */
.sd-hero-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 2rem; align-items: center; padding: 5rem 0 !important; max-width: 100% !important; text-align: left !important; }
@media (min-width: 64rem) {
  .sd-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; gap: 3rem; }
  .sd-hero-panel { display: block !important; }
}
.sd-eyebrow-left { text-align: left; }
.sd-lead-left { text-align: left; }
.sd-btn-row-left { justify-content: flex-start; }
.sd-hero-types-left { text-align: left; max-width: 100%; }
.sd-hero-panel { display: none; }
.sd-hero-panel-list { list-style: none; padding: 0; margin: 0; }
.sd-hero-panel-list li a { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; background: rgba(255,255,255,0.06); border-radius: 8px; margin-bottom: 0.6rem; text-decoration: none; }
.sd-hero-panel-list li img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sd-hero-panel-info { display: flex; flex-direction: column; }
.sd-hero-panel-name { color: #fff; font-weight: 700; font-size: 0.95rem; }
.sd-hero-panel-cat { color: var(--sd-accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* force hero panel to show on desktop */
.sd-hero-panel { display: none !important; }
@media (min-width: 64rem) {
  .sd-hero-panel { display: block !important; }
}

/* lower breakpoint for hero panel */
@media (min-width: 48rem) {
  .sd-hero-panel { display: block !important; }
  .sd-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; gap: 3rem; }
}

/* fix hero alignment: constrain left text, right panel matches height */
.sd-hero-inner { align-items: stretch !important; }
.sd-hero-text { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 48rem) {
  .sd-hero-types-left { max-width: 480px !important; font-size: 0.8rem; line-height: 1.7; }
  .sd-hero-panel-list { height: 100%; max-height: 420px; overflow-y: auto; }
  .sd-hero-panel-list li:last-child { margin-bottom: 0; }
}

/* further constrain left text width */
@media (min-width: 48rem) {
  .sd-hero-text { max-width: 560px; }
  .sd-hero-types-left { max-width: 100% !important; }
  .sd-lead-left { max-width: 520px; }
}

/* fix hero: no scroll on panel, constrain types to left column */
.sd-hero-panel-list { height: auto !important; max-height: none !important; overflow: visible !important; }
.sd-hero-panel { display: flex; flex-direction: column; justify-content: center; }
.sd-hero-types { max-width: 560px !important; margin: 0 !important; }

/* tighten hero spacing */
.sd-hero-inner { padding: 3rem 0 !important; gap: 2rem !important; }
@media (min-width: 48rem) {
  .sd-hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; }
}

/* ========== hero panel aligned with old site ========== */
.sd-hero-panel { display: none; }
@media (min-width: 64rem) {
  .sd-hero-panel {
    display: block !important;
    align-self: start;
    margin: 5rem 0 3rem;
    background: rgba(8, 18, 27, 0.66);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 1.25rem 1.25rem 0.75rem;
  }
  .sd-hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; gap: 3.5rem !important; }
}
.sd-hero-panel-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-accent, #f59e0b);
}
.sd-hero-panel-list { list-style: none; margin: 0; padding: 0; }
.sd-hero-panel-list li + li { border-top: 1px solid rgba(255,255,255,0.1); }
.sd-hero-panel-list a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0;
  text-decoration: none;
  color: rgba(255,255,255,0.75);
}
.sd-hero-panel-list a:hover { color: #fff; }
.sd-panel-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 3.75rem;
  height: 2.75rem;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.sd-panel-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sd-panel-body strong {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}
.sd-panel-body small {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
}

/* hero container aligned with old site */
.sd-hero .container {
  max-width: 1344px !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* flagship card: whole card clickable */
.sd-flagship-link-card {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.sd-flagship-card { height: 100%; }
.sd-flagship-link { display: inline-block; margin-top: 0.5rem; }

/* flagship card hover effect */
.sd-flagship-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 12px;
  overflow: hidden;
}
.sd-flagship-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.sd-flagship-card:hover .sd-flagship-media img {
  transform: scale(1.05);
}
.sd-flagship-media { overflow: hidden; }
.sd-flagship-media img {
  transition: transform 0.3s ease;
}
.sd-flagship-link {
  color: var(--sd-accent, #f59e0b);
  font-weight: 600;
}

/* footer brand styling */
.sd-footer-logo {
  display: inline-block;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.sd-footer-logo img { height: 44px; width: auto; display: block; }
.sd-footer-brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.sd-footer-brand-desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 320px;
}

/* ========== Single product page ========== */
.sd-product-hero {
  position: relative;
  background: #0f1e2d;
  color: #fff;
  overflow: hidden;
  padding: 4rem 0 3.5rem;
}
.sd-product-hero .sd-hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 0;
}
.sd-product-hero .container { position: relative; z-index: 1; }
.sd-product-crumb {
  color: #f59e0b;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.sd-product-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  color: #fff;
}
.sd-product-overview {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 760px;
  margin-bottom: 2rem;
}
.sd-product-overview p { margin-bottom: 1rem; }
.sd-product-body {
  padding: 3rem 0 4rem;
}
.sd-product-main-image {
  margin: 0 0 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.sd-product-main-image img {
  width: 100%;
  height: auto;
  display: block;
}
.sd-product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.sd-product-gallery img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.sd-product-gallery img:hover { transform: scale(1.03); }
.sd-product-block {
  margin-bottom: 2.5rem;
}
.sd-product-block h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #0f1e2d;
}
.sd-product-block table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.sd-product-block table th,
.sd-product-block table td {
  padding: 0.6rem 1rem;
  border: 1px solid #e5e7eb;
  text-align: left;
}
.sd-product-block table th {
  background: #f9fafb;
  font-weight: 600;
}

/* PC layout: product hero text wider */
@media (min-width: 64rem) {
  .sd-product-hero .container {
    max-width: 1100px;
  }
  .sd-product-body {
    max-width: 1100px;
    margin: 0 auto;
  }
}

/* product gallery thumbnails */
.sd-product-thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.sd-product-thumbs img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.sd-product-thumbs img.active {
  border-color: #f59e0b;
}
.sd-product-thumbs img:hover {
  border-color: #f59e0b;
}

/* specs table */
.sd-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.sd-specs-table th,
.sd-specs-table td {
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  text-align: left;
}
.sd-specs-table th {
  background: #f9fafb;
  font-weight: 600;
  width: 40%;
}

/* features list */
.sd-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sd-features-list li {
  padding: 0.6rem 0 0.6rem 1.75rem;
  position: relative;
  border-bottom: 1px solid #f3f4f6;
  line-height: 1.6;
}
.sd-features-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
}

/* ========== Product page: left-right hero layout ========== */
.sd-product-hero {
  padding: 3rem 0;
}
.sd-product-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 64rem) {
  .sd-product-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}
.sd-product-hero-text {
  color: rgba(255,255,255,0.9);
}
.sd-product-hero-gallery {
  color: #fff;
}
.sd-product-main-image {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.sd-product-main-image img {
  width: 100%;
  height: auto;
  display: block;
}
.sd-product-thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.sd-product-thumbs img {
  width: 100px;
  height: 75px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
}
.sd-product-thumbs img.active,
.sd-product-thumbs img:hover {
  border-color: #f59e0b;
}

/* features list with checkmarks */
.sd-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sd-features-list li {
  padding: 0.6rem 0 0.6rem 2rem;
  position: relative;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.sd-check {
  width: 20px;
  height: 20px;
  color: #10b981;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ========== Product tabs ========== */
.sd-product-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 2rem;
}
.sd-tab {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.sd-tab:hover {
  color: #0f1e2d;
}
.sd-tab.active {
  color: #0f1e2d;
  border-bottom-color: #0f1e2d;
  background: #f9fafb;
}
.sd-tab-panel {
  display: none;
}
.sd-tab-panel.active {
  display: block;
}
.sd-product-overview-text {
  line-height: 1.8;
  color: #374151;
  margin-bottom: 1.5rem;
}
.sd-product-overview-text p {
  margin-bottom: 1rem;
}
.sd-product-gallery-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.sd-product-gallery-full img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

/* ========== Product archive pagination ========== */
.sd-pagination .nav-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.sd-pagination .page-numbers {
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #374151;
  text-decoration: none;
  font-weight: 600;
}
.sd-pagination .page-numbers.current {
  background: #0f1e2d;
  color: #fff;
  border-color: #0f1e2d;
}
.sd-pagination .page-numbers:hover:not(.current) {
  border-color: #0f1e2d;
}

/* ========== Product catalog layout (sidebar + grid) ========== */
.sd-catalog-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.sd-catalog-sidebar {
  position: sticky;
  top: 100px;
}
.sd-catalog-sidebar-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 1rem;
}
.sd-catalog-cats {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #e5e7eb;
}
.sd-catalog-cats li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.sd-catalog-cats li a:hover,
.sd-catalog-cats li.active a {
  color: #f59e0b;
}
.sd-catalog-cat-count {
  font-size: 0.8rem;
  color: #9ca3af;
  font-weight: 400;
}
.sd-catalog-cats li.active .sd-catalog-cat-count {
  color: #f59e0b;
}

@media (max-width: 900px) {
  .sd-catalog-layout {
    grid-template-columns: 1fr;
  }
  .sd-catalog-sidebar {
    position: static;
  }
  .sd-catalog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: none;
  }
  .sd-catalog-cats li a {
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 0.4rem 1rem;
  }
}

/* ========== Catalog search box ========== */
.sd-catalog-search {
  position: relative;
  margin-bottom: 1.5rem;
}
.sd-catalog-search-input {
  width: 100%;
  padding: 0.7rem 2.5rem 0.7rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #f9fafb;
  color: #1f2937;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-catalog-search-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.sd-catalog-search svg {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

/* Sidebar refined styling */
.sd-catalog-sidebar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
}
.sd-catalog-sidebar-title {
  margin-top: 0;
}
.sd-catalog-cats {
  border-top: none;
  margin: 0;
}
.sd-catalog-cats li a {
  border-bottom: none;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s;
}
.sd-catalog-cats li a:hover {
  background: #fffbeb;
  color: #d97706;
}
.sd-catalog-cats li.active a {
  background: #0f1e2d;
  color: #fff;
}
.sd-catalog-cats li.active .sd-catalog-cat-count {
  color: rgba(255,255,255,0.6);
}
.sd-catalog-cat-count {
  background: #f3f4f6;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
}
.sd-catalog-cats li.active .sd-catalog-cat-count {
  background: rgba(255,255,255,0.15);
}

/* ========== Header nav link color fix (match old site) ========== */
.sd-nav a {
  color: #d97706 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sd-nav a:hover,
.sd-nav a:focus {
  color: #b45309 !important;
}

/* ========== Dark page hero (product archive header) ========== */
.sd-page-hero {
  background: #0c1720;
  padding: 3.5rem 0 3rem;
  color: #fff;
}
.sd-page-hero .sd-eyebrow {
  color: #f59e0b;
}
.sd-page-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  margin: 0.5rem 0 0;
  line-height: 1.1;
  text-transform: uppercase;
}

/* ========== Catalog sidebar: dark theme override ========== */
.sd-catalog-sidebar {
  background: #0c1720 !important;
  border: 1px solid #1e293b;
  color: #e2e8f0;
}
.sd-catalog-sidebar-title {
  color: #94a3b8;
}
.sd-catalog-search-input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.sd-catalog-search-input::placeholder {
  color: #64748b;
}
.sd-catalog-search svg {
  color: #64748b;
}
.sd-catalog-cats li a {
  color: #cbd5e1;
}
.sd-catalog-cats li a:hover {
  background: #1e293b;
  color: #f59e0b;
}
.sd-catalog-cats li.active a {
  background: #d97706 !important;
  color: #fff !important;
}
.sd-catalog-cat-count {
  background: #1e293b;
  color: #94a3b8;
}
.sd-catalog-cats li.active .sd-catalog-cat-count {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ========== Snake flow (services order flow) ========== */
.sd-flow-snake {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
  position: relative;
}
.sd-flow-snake .sd-flow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
.sd-flow-snake .sd-flow-step:nth-child(2) { grid-column: 2; grid-row: 1; }
.sd-flow-snake .sd-flow-step:nth-child(3) { grid-column: 3; grid-row: 1; }
.sd-flow-snake .sd-flow-step:nth-child(4) { grid-column: 3; grid-row: 2; }
.sd-flow-snake .sd-flow-step:nth-child(5) { grid-column: 2; grid-row: 2; }
.sd-flow-snake .sd-flow-step:nth-child(6) { grid-column: 1; grid-row: 2; }

/* Right arrows on row 1 (between 01->02->03) */
.sd-flow-snake .sd-flow-step:nth-child(1)::after,
.sd-flow-snake .sd-flow-step:nth-child(2)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -1.5rem;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}

/* Down arrow from 03 to 04 */
.sd-flow-snake .sd-flow-step:nth-child(3)::after {
  content: "↓";
  position: absolute;
  top: auto;
  bottom: -1.8rem;
  right: 50%;
  transform: translateX(50%);
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}

/* Left arrows on row 2 (between 06<-05<-04) */
.sd-flow-snake .sd-flow-step:nth-child(5)::before,
.sd-flow-snake .sd-flow-step:nth-child(6)::before {
  content: "←";
  position: absolute;
  top: 50%;
  left: -1.5rem;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}

.sd-flow-snake .sd-flow-step {
  position: relative;
  border-top: 3px solid #d97706;
  padding-top: 1.5rem;
}

@media (max-width: 900px) {
  .sd-flow-snake {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sd-flow-snake .sd-flow-step:nth-child(1),
  .sd-flow-snake .sd-flow-step:nth-child(2),
  .sd-flow-snake .sd-flow-step:nth-child(3),
  .sd-flow-snake .sd-flow-step:nth-child(4),
  .sd-flow-snake .sd-flow-step:nth-child(5),
  .sd-flow-snake .sd-flow-step:nth-child(6) {
    grid-column: 1;
    grid-row: auto;
  }
  .sd-flow-snake .sd-flow-step::after,
  .sd-flow-snake .sd-flow-step::before {
    display: none;
  }
}

/* Fix snake flow arrows: override original right arrows on row 2 */
.sd-flow-snake .sd-flow-step:nth-child(4)::after {
  content: none !important;
}
.sd-flow-snake .sd-flow-step:nth-child(5)::after {
  content: "←" !important;
  right: auto !important;
  left: -1.5rem !important;
}
.sd-flow-snake .sd-flow-step:nth-child(6)::before {
  content: none !important;
}

/* ========== Snake flow: complete arrow override ========== */
.sd-flow-snake .sd-flow-step::before {
  content: none !important;
}
.sd-flow-snake .sd-flow-step::after {
  position: absolute;
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}

/* Row 1: right arrows between 01->02 and 02->03 */
.sd-flow-snake .sd-flow-step:nth-child(1)::after {
  content: "→";
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}
.sd-flow-snake .sd-flow-step:nth-child(2)::after {
  content: "→";
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}

/* Down arrow from 03 to 04 */
.sd-flow-snake .sd-flow-step:nth-child(3)::after {
  content: "↓";
  bottom: -1.8rem;
  right: 50%;
  top: auto;
  transform: translateX(50%);
}

/* Row 2: left arrows (flow 04->05->06 right to left) */
.sd-flow-snake .sd-flow-step:nth-child(4)::after {
  content: none !important;
}
.sd-flow-snake .sd-flow-step:nth-child(5)::after {
  content: "←";
  top: 50%;
  right: -1.5rem;
  transform: translateY(-50%);
}
.sd-flow-snake .sd-flow-step:nth-child(6)::after {
  content: "←";
  top: 50%;
  right: -1.5rem;
  transform: translateY(-50%);
}

/* Snake flow: hard reset all pseudo-elements first */
.sd-flow-snake .sd-flow-step::before,
.sd-flow-snake .sd-flow-step::after {
  content: none !important;
}
.sd-flow-snake .sd-flow-step:nth-child(1)::after {
  content: "→" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
  position: absolute;
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}
.sd-flow-snake .sd-flow-step:nth-child(2)::after {
  content: "→" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
  position: absolute;
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}
.sd-flow-snake .sd-flow-step:nth-child(3)::after {
  content: "↓" !important;
  bottom: -1.8rem; right: 50%; top: auto;
  transform: translateX(50%);
  position: absolute;
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}
.sd-flow-snake .sd-flow-step:nth-child(5)::after {
  content: "←" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
  position: absolute;
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}
.sd-flow-snake .sd-flow-step:nth-child(6)::after {
  content: "←" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
  position: absolute;
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}

/* ========== 4-column flow (services page) ========== */
.sd-flow-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.sd-flow-4 .sd-flow-step {
  position: relative;
  border-top: 3px solid #d97706;
  padding-top: 1.5rem;
}
.sd-flow-4 .sd-flow-step::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -1.5rem;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}
.sd-flow-4 .sd-flow-step:nth-child(4)::after,
.sd-flow-4 .sd-flow-step:nth-child(8)::after {
  content: none !important;
}
@media (max-width: 1100px) {
  .sd-flow-4 { grid-template-columns: repeat(2, 1fr); }
  .sd-flow-4 .sd-flow-step::after { display: none; }
}
@media (max-width: 600px) {
  .sd-flow-4 { grid-template-columns: 1fr; }
}

/* ========== 4-column snake flow ========== */
.sd-flow-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 2rem;
}
.sd-flow-4 .sd-flow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
.sd-flow-4 .sd-flow-step:nth-child(2) { grid-column: 2; grid-row: 1; }
.sd-flow-4 .sd-flow-step:nth-child(3) { grid-column: 3; grid-row: 1; }
.sd-flow-4 .sd-flow-step:nth-child(4) { grid-column: 4; grid-row: 1; }
.sd-flow-4 .sd-flow-step:nth-child(5) { grid-column: 4; grid-row: 2; }
.sd-flow-4 .sd-flow-step:nth-child(6) { grid-column: 3; grid-row: 2; }
.sd-flow-4 .sd-flow-step:nth-child(7) { grid-column: 2; grid-row: 2; }
.sd-flow-4 .sd-flow-step:nth-child(8) { grid-column: 1; grid-row: 2; }

/* Hard reset all arrows */
.sd-flow-4 .sd-flow-step::before,
.sd-flow-4 .sd-flow-step::after {
  content: none !important;
  position: absolute;
  font-size: 1.5rem;
  color: #d97706;
  font-weight: 700;
}

/* Row 1: right arrows 01->02->03->04 */
.sd-flow-4 .sd-flow-step:nth-child(1)::after {
  content: "→" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}
.sd-flow-4 .sd-flow-step:nth-child(2)::after {
  content: "→" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}
.sd-flow-4 .sd-flow-step:nth-child(3)::after {
  content: "→" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}

/* Down arrow from 04 to 05 */
.sd-flow-4 .sd-flow-step:nth-child(4)::after {
  content: "↓" !important;
  bottom: -1.8rem; right: 50%; top: auto;
  transform: translateX(50%);
}

/* Row 2: left arrows (flow 05->06->07->08 right to left) */
.sd-flow-4 .sd-flow-step:nth-child(6)::after {
  content: "←" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}
.sd-flow-4 .sd-flow-step:nth-child(7)::after {
  content: "←" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}
.sd-flow-4 .sd-flow-step:nth-child(8)::after {
  content: "←" !important;
  top: 50%; right: -1.5rem;
  transform: translateY(-50%);
}

@media (max-width: 1100px) {
  .sd-flow-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .sd-flow-4 .sd-flow-step:nth-child(n) { grid-column: auto; grid-row: auto; }
  .sd-flow-4 .sd-flow-step::before,
  .sd-flow-4 .sd-flow-step::after { display: none !important; }
}
@media (max-width: 600px) {
  .sd-flow-4 { grid-template-columns: 1fr; }
}

/* ========== Page hero: match old site ========== */
.sd-page-hero {
  background: #0c1720 !important;
  padding: 4rem 0 3.5rem !important;
}
.sd-page-hero .sd-eyebrow {
  display: none !important;
}
.sd-page-title {
  font-size: clamp(2rem, 4.5vw, 2.8rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 0.8rem 0 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
}
.sd-page-subtitle {
  font-size: 1.15rem;
  color: #94a3b8;
  margin: 0;
  max-width: 640px;
  line-height: 1.6;
}

/* ========== Page hero: match old site exactly ========== */
.sd-page-hero {
  background: #0c1720 !important;
  padding: 4.5rem 0 4rem !important;
}
.sd-page-hero .sd-eyebrow {
  display: block !important;
  color: #f59e0b !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.8rem !important;
}
.sd-page-title {
  font-size: clamp(2.2rem, 4.5vw, 3rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}
.sd-page-subtitle {
  font-size: 1.1rem;
  color: #94a3b8;
  margin: 0;
  max-width: 680px;
  line-height: 1.65;
}

/* Hero CTA button on dark page hero */
.sd-hero-cta {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ========== Content area: match old site (no bordered card, cream bg) ========== */
body {
  background-color: #faf9f6 !important;
}
.sd-section {
  background: transparent !important;
}
.sd-article {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.sd-article-body {
  padding: 0 !important;
}
/* Dark sections stay dark */
.sd-block.sd-dark {
  background: #0c1720 !important;
  color: #fff;
}

/* ========== Contact page two-column layout ========== */
.sd-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  align-items: start;
}
.sd-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.sd-contact-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1.5rem;
}
.sd-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fef3c7;
  color: #d97706;
  margin-bottom: 0.8rem;
}
.sd-contact-card h4 {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d97706;
}
.sd-contact-card p {
  margin: 0;
  font-size: 1rem;
  color: #16222e;
  font-weight: 600;
}
.sd-contact-form {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 2rem;
}
.sd-contact-form h3 {
  margin: 0 0 1.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #16222e;
  text-transform: uppercase;
}

/* CF7 form styling */
.wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.wpcf7-form p { margin: 0; }
.wpcf7-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.4rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  box-sizing: border-box;
}
.wpcf7-form textarea {
  grid-column: 1 / -1;
  min-height: 120px;
}
.wpcf7-form .wpcf7-submit {
  grid-column: 1 / -1;
  background: #d97706;
  color: #fff;
  border: none;
  padding: 0.9rem 2rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  justify-self: start;
}

@media (max-width: 900px) {
  .sd-contact-layout {
    grid-template-columns: 1fr;
  }
  .wpcf7-form {
    grid-template-columns: 1fr;
  }
}

/* CF7 form row layout (2 columns) */
.sd-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 0.5rem;
}
.sd-form-field {
  margin-bottom: 0.5rem;
}
.sd-form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d97706;
  margin-bottom: 0.4rem;
}
.sd-form-field input,
.sd-form-field select,
.sd-form-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
  box-sizing: border-box;
}
.sd-form-field textarea {
  min-height: 120px;
}
.sd-contact-form .wpcf7-submit {
  background: #d97706 !important;
  color: #fff !important;
  border: none !important;
  padding: 0.9rem 2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin-top: 0.5rem;
}
@media (max-width: 600px) {
  .sd-form-row {
    grid-template-columns: 1fr;
  }
}

/* Contact layout: narrower left, wider right form */
.sd-contact-layout {
  grid-template-columns: 0.8fr 1.5fr;
  gap: 3rem;
}
.sd-contact-card {
  padding: 1.2rem 1.4rem;
}
.sd-contact-card p {
  font-size: 0.95rem;
}
.sd-contact-form {
  padding: 2.5rem;
}
.sd-contact-form h3 {
  font-size: 1.6rem;
}

.sd-contact-value {
  font-size: 1rem;
  color: #16222e;
  font-weight: 600;
  line-height: 1.5;
}

/* Contact cards: horizontal layout (icon left, text right) */
.sd-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.sd-contact-icon {
  flex-shrink: 0;
  margin-bottom: 0;
}
.sd-contact-card h4 {
  margin-bottom: 0.2rem;
}
.sd-contact-value {
  font-size: 0.95rem;
}

/* Contact card: compact icon, wider text */
.sd-contact-card {
  padding: 1rem 1.2rem;
}
.sd-contact-icon {
  width: 36px;
  height: 36px;
}
.sd-contact-value {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Wider left info column */
.sd-contact-layout {
  grid-template-columns: 1fr 1.3fr;
}

/* Contact card: icon left, text block right (h4 above value) */
.sd-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.sd-contact-card > .sd-contact-icon {
  flex-shrink: 0;
}
.sd-contact-card > h4 {
  margin: 0 0 0.2rem 0;
}
.sd-contact-card > .sd-contact-value {
  margin: 0;
}
/* Wrap h4 + value in a text div */
.sd-contact-card > div:not(.sd-contact-icon) {
  flex: 1;
}

/* Contact card: grid layout - icon spans both rows, h4 above value */
.sd-contact-card {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  align-items: start;
}
.sd-contact-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  margin-bottom: 0;
}
.sd-contact-card h4 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.sd-contact-value {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

/* CF7 success message: green checkmark */
.wpcf7-mail-sent-ok {
  border: none !important;
  background: none !important;
  text-align: center;
  padding: 3rem 1rem !important;
  font-size: 1.1rem;
  color: #16222e;
}
.wpcf7-mail-sent-ok::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: #22c55e;
  border-radius: 50%;
  position: relative;
}
.wpcf7-mail-sent-ok::after {
  content: "✓";
  display: block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  margin: -80px auto 1rem;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

/* CF7 success: cover entire form */
.wpcf7-form.sent {
  position: relative;
  min-height: 400px;
}
.wpcf7-form.sent .sd-form-row,
.wpcf7-form.sent p:not(.wpcf7-response-output),
.wpcf7-form.sent input,
.wpcf7-form.sent select,
.wpcf7-form.sent textarea,
.wpcf7-form.sent label,
.wpcf7-form.sent .wpcf7-submit {
  display: none !important;
}
.wpcf7-form.sent .wpcf7-response-output {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 2rem !important;
  background: #fff;
  border-radius: 12px;
}

/* Blog page */
.sd-blog-section {
  padding: 3rem 0 4rem;
}
.sd-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.sd-blog-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}
.sd-blog-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.sd-blog-card-image {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.sd-blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-blog-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #0c1720,
    #0c1720 10px,
    #132235 10px,
    #132235 20px
  );
}
.sd-blog-card-body {
  padding: 1.2rem 1.4rem 1.5rem;
}
.sd-blog-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.sd-blog-badge {
  background: #d97706;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}
.sd-blog-date {
  color: #8899a8;
  font-size: 0.8rem;
}
.sd-blog-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  line-height: 1.35;
}
.sd-blog-card-title a {
  color: #0c1720;
  text-decoration: none;
}
.sd-blog-card-title a:hover {
  color: #d97706;
}
.sd-blog-excerpt {
  color: #556677;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 0.8rem;
}
.sd-blog-more {
  color: #d97706;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.sd-blog-more:hover {
  text-decoration: underline;
}
.sd-pagination {
  margin-top: 2.5rem;
  text-align: center;
}
.sd-pagination .page-numbers {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  margin: 0 0.2rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #0c1720;
  text-decoration: none;
}
.sd-pagination .page-numbers.current {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
}
@media (max-width: 900px) {
  .sd-blog-grid { grid-template-columns: 1fr; }
}

/* Override transparent section for films/videos */
.sd-section.sd-films {
  background: #0c1720 !important;
}
.sd-section.sd-films .sd-section-title {
  color: #fff;
}
.sd-section.sd-films .sd-section-desc {
  color: #c8d2da;
}
.sd-section.sd-films .sd-eyebrow {
  color: #f59e0b;
}

/* Complianz cookie banner - match old site style */
.cmplz-cookiebanner {
  background: #faf9f6 !important;
  border-top: 1px solid #e5e1d8 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
  padding: 1.2rem 2rem !important;
  font-family: var(--sd-font-body) !important;
}
.cmplz-cookiebanner .cmplz-message {
  font-size: 0.9rem !important;
  color: #16222e !important;
  line-height: 1.5 !important;
}
.cmplz-cookiebanner .cmplz-link {
  color: #d97706 !important;
  text-decoration: underline !important;
}
.cmplz-cookiebanner .cmplz-btn {
  border-radius: 6px !important;
  padding: 0.6rem 1.5rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.cmplz-cookiebanner .cmplz-btn-outline {
  background: transparent !important;
  border: 1px solid #16222e !important;
  color: #16222e !important;
}
.cmplz-cookiebanner .cmplz-btn-primary {
  background: #0c1720 !important;
  border: 1px solid #0c1720 !important;
  color: #fff !important;
}
.cmplz-cookiebanner .cmplz-btn:hover {
  opacity: 0.9;
}
.cmplz-close {
  color: #888 !important;
  font-size: 1.2rem !important;
}

/* Complianz buttons - match old site */
.cmplz-btn.cmplz-accept {
  background: #0c1720 !important;
  color: #fff !important;
  border: 1px solid #0c1720 !important;
}
.cmplz-btn.cmplz-deny {
  background: transparent !important;
  color: #16222e !important;
  border: 1px solid #16222e !important;
}