/* ─────────────────────────────────────────────────────────────────────
   SecurityHub white-label storefront
   Standalone stylesheet — deliberately independent of the app's compiled
   Tailwind build (which is purged to the classes the app itself uses, so
   new utility classes would silently render unstyled). Brand colours are
   injected per-tenant by _StorefrontLayout via --sf-primary / --sf-accent.
   ───────────────────────────────────────────────────────────────────── */

:root {
    --sf-primary:      #2B3990;   /* overridden per tenant from BrandProfile */
    --sf-accent:       #BE1E2D;
    --sf-ink:          #161A25;
    --sf-muted:        #5B6172;
    --sf-bg:           #FFFFFF;
    --sf-bg-soft:      #F4F6FA;
    --sf-border:       #E2E6EF;
    --sf-radius:       14px;
    --sf-shadow:       0 1px 2px rgba(22, 26, 37, .06), 0 8px 24px rgba(22, 26, 37, .07);
    --sf-shadow-lift:  0 2px 4px rgba(22, 26, 37, .08), 0 16px 40px rgba(22, 26, 37, .14);
}

* { box-sizing: border-box; }

/* The `hidden` attribute's display:none comes from the BROWSER stylesheet, and
   an author rule beats the browser at any specificity. So every `.x { display:
   flex }` in this file silently defeats `el.hidden = true` on that element —
   the attribute lands, the element stays on screen, and the code that set it
   looks broken for no visible reason. It cost us the privacy notice, which
   could never be dismissed. Restore the attribute's meaning once, here, rather
   than remembering a `.x[hidden]` guard beside all 150 display rules.
   :where() keeps specificity at zero; !important is what actually wins.
   The until-found exception keeps find-in-page expandable content working. */
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }

html { scroll-behavior: smooth; }

/* ── Display typeface — Space Grotesk (OFL, self-hosted) ───────────── */
@font-face {
    font-family: "Space Grotesk";
    src: url("/fonts/space-grotesk-500.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("/fonts/space-grotesk-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

::selection { background: var(--sf-primary); color: #fff; }

.sf-body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sf-ink);
    background: var(--sf-bg);
    -webkit-font-smoothing: antialiased;
}

.sf-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.sf-main { min-height: 60vh; }

a { color: var(--sf-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em;
    font-family: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
}
.sf-btn, .sf-nav-link, .sf-stat b, .sf-eyebrow, .sf-splash-label, .sf-logo-text {
    font-family: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.sf-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--sf-bg);
    border-top: 3px solid var(--sf-accent);   /* the red square in the wordmark */
    border-bottom: 1px solid var(--sf-border);
    box-shadow: 0 1px 0 rgba(22,26,37,.02), 0 6px 18px -12px rgba(22,26,37,.18);
}
.sf-header-inner {
    display: flex; align-items: center; gap: 28px;
    min-height: 130px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px;
}
.sf-logo-link { display: inline-flex; align-items: center; }
.sf-logo { height: 102px; width: auto; max-width: 280px; display: block; }
.sf-footer-logo { height: 87px; width: auto; display: block; margin-bottom: 14px; background: #fff; padding: 8px 14px; border-radius: 8px; }
.sf-logo-text { font-size: 40px; font-weight: 800; color: var(--sf-primary); }

.sf-nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.sf-nav-link {
    padding: 8px 11px; border-radius: 8px;
    font-size: 14.5px; font-weight: 600; color: var(--sf-ink);
    white-space: nowrap;
}
.sf-nav-link:hover { background: var(--sf-bg-soft); text-decoration: none; }
.sf-nav-active { color: var(--sf-primary); box-shadow: inset 0 -3px 0 var(--sf-accent); border-radius: 8px 8px 0 0; }

.sf-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-header-phone { font-weight: 700; font-size: 15px; color: var(--sf-ink); white-space: nowrap; }
.sf-header-phone:hover { color: var(--sf-primary); text-decoration: none; }

/* 901–1240px: the 7-link nav + phone + button can't all fit — drop the phone
   number first (it's repeated in the footer and on /contact). */
@media (max-width: 1240px) and (min-width: 901px) {
    .sf-header-phone { display: none; }
    .sf-logo { height: 84px; max-width: 230px; }
}

/* Hamburger — hidden on desktop; storefront.js toggles .sf-nav-open/.sf-open. */
.sf-nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; flex: none;
    background: transparent; border: 1.5px solid var(--sf-border); border-radius: 10px; cursor: pointer;
}
.sf-nav-toggle span {
    display: block; height: 2.5px; border-radius: 2px;
    background: var(--sf-ink); transition: transform .18s ease, opacity .18s ease;
}
.sf-nav-toggle.sf-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.sf-nav-toggle.sf-open span:nth-child(2) { opacity: 0; }
.sf-nav-toggle.sf-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 10px; border: 2px solid transparent;
    font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sf-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sf-btn:focus-visible, .sf-cat-tile:focus-visible, .sf-card:focus-visible,
.sr-swatch:focus-visible, .sr-thumb:focus-visible, .sf-nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 45%, transparent);
}
.sf-btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 8px; }
.sf-btn-primary { background: var(--sf-primary); color: #fff; }
.sf-btn-primary:hover { box-shadow: var(--sf-shadow-lift); color: #fff; }
.sf-btn-accent { background: var(--sf-accent); color: #fff; }
.sf-btn-accent:hover { box-shadow: var(--sf-shadow-lift); color: #fff; }
.sf-btn-outline { background: transparent; color: var(--sf-primary); border-color: var(--sf-primary); }
.sf-btn-outline:hover { background: var(--sf-primary); color: #fff; }
.sf-btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.sf-btn-ghost-light:hover { background: #fff; color: var(--sf-primary); }

/* ── Hero ───────────────────────────────────────────────────────────── */
/* Faint engineering-drawing grid over the soft gradient — the site sells
   precision steel; the backdrop should read like a title block, not a blog. */
.sf-hero {
    background-image:
        linear-gradient(color-mix(in srgb, var(--sf-primary) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--sf-primary) 5%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, var(--sf-bg-soft) 0%, var(--sf-bg) 100%);
    background-size: 30px 30px, 30px 30px, auto;
    border-bottom: 1px solid var(--sf-border);
}
.sf-hero-grid {
    display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: 48px; align-items: center; padding: 64px 0 56px;
}
.sf-eyebrow {
    display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--sf-accent); margin-bottom: 14px;
}
.sf-hero h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 850; color: var(--sf-ink); }
.sf-hero-sub { font-size: 19px; color: var(--sf-muted); max-width: 56ch; margin: 0 0 28px; }
.sf-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.sf-ticks { display: flex; gap: 22px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.sf-ticks li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sf-muted); }
.sf-tick {
    width: 18px; height: 18px; border-radius: 50%; flex: none;
    background: var(--sf-primary);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 900; line-height: 1;
}

.sf-hero-visual {
    background: linear-gradient(165deg, #232A4E 0%, #11152B 100%);
    border-radius: var(--sf-radius); overflow: hidden; box-shadow: var(--sf-shadow-lift);
    position: relative;
}
.sf-hero-visual model-viewer { width: 100%; height: 440px; display: block; }
.sf-3d-hint {
    position: absolute; left: 14px; bottom: 12px;
    max-width: calc(100% - 28px);
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.35); padding: 5px 11px; border-radius: 99px;
    pointer-events: none;
}
/* On the product detail stage the AR button owns the bottom edge — the hint
   moves to the top so the two can never collide (they overlapped on phones,
   where the hint wraps to two lines). */
.sf-detail-visual .sf-3d-hint { bottom: auto; top: 12px; }
/* The hint's "on a phone, tap View in your space" clause is for DESKTOP
   readers; on AR-capable phones the real button is right there. */
@media (max-width: 900px) {
    .sf-hint-ar { display: none; }
}

/* ── Stats band ─────────────────────────────────────────────────────── */
.sf-stats { background: var(--sf-primary); color: #fff; }
.sf-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; padding: 26px 0; }
.sf-stat { text-align: center; }
.sf-stat b { display: block; font-size: 26px; font-weight: 850; letter-spacing: -.01em; }
.sf-stat span { font-size: 13px; opacity: .82; font-weight: 600; }

/* ── Sections ───────────────────────────────────────────────────────── */
.sf-section { padding: 64px 0; }
.sf-section-soft { background: var(--sf-bg-soft); border-top: 1px solid var(--sf-border); border-bottom: 1px solid var(--sf-border); }
.sf-section-head { max-width: 70ch; margin-bottom: 34px; }
.sf-section-head h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 820; }
.sf-section-head p { color: var(--sf-muted); font-size: 16.5px; margin: 0; }
.sf-section-foot { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── Product cards ──────────────────────────────────────────────────── */
.sf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sf-card {
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .14s ease, box-shadow .14s ease;
    color: var(--sf-ink);
}
.sf-card:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-lift); text-decoration: none; }
.sf-card-cta { transition: transform .14s ease; }
.sf-card:hover .sf-card-cta { transform: translateX(3px); }
.sf-card-visual {
    height: 190px; background: radial-gradient(110% 90% at 50% 12%, #2B3458 0%, #1A2142 52%, #0E1228 100%);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.sf-card-visual svg { width: 54px; height: 54px; color: rgba(255,255,255,.35); }
/* Live 3D in the card: fills the visual, spins, never captures the click —
   the whole card stays one link. loading="lazy" defers each GLB until the
   card nears the viewport. */
.sf-card-mv {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; --poster-color: transparent;
}
.sf-badge-3d {
    position: absolute; top: 10px; left: 10px;
    background: var(--sf-accent); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    padding: 4px 9px; border-radius: 99px; text-transform: uppercase;
}
.sf-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sf-card-cat { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-card-name { font-size: 17px; font-weight: 750; color: var(--sf-ink); }
.sf-card-sku { font-size: 12.5px; color: var(--sf-muted); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.sf-price { font-size: 16px; font-weight: 800; color: var(--sf-primary); }
.sf-price small { font-size: 11px; font-weight: 600; color: var(--sf-muted); }
.sf-card-cta { font-size: 13.5px; font-weight: 700; color: var(--sf-accent); }

.sf-group-h {
    font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sf-muted); border-bottom: 1px solid var(--sf-border);
    padding-bottom: 10px; margin: 44px 0 20px;
}
.sf-group-h:first-of-type { margin-top: 0; }

/* ── Feature band (BIM) ─────────────────────────────────────────────── */
.sf-band { background: linear-gradient(140deg, var(--sf-primary) 0%, #161C45 100%); color: #fff; }
.sf-band-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; padding: 58px 0; }
.sf-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 820; color: #fff; }
.sf-band p { color: rgba(255,255,255,.85); font-size: 16.5px; }
.sf-band-points { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; }
.sf-band-points li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; color: rgba(255,255,255,.92); }
.sf-band-points .sf-tick { background: var(--sf-accent); }
.sf-band-card {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--sf-radius); padding: 26px;
}
.sf-band-card h3 { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.sf-band-card p { font-size: 14.5px; }

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.sf-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--sf-muted); padding: 22px 0 0; }
.sf-crumbs a { color: var(--sf-muted); }
.sf-crumbs a:hover { color: var(--sf-primary); }
.sf-crumbs b { color: var(--sf-ink); font-weight: 600; }

/* ── Product detail ─────────────────────────────────────────────────── */
.sf-detail-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 44px; padding: 28px 0 64px; align-items: start; }
.sf-detail-visual {
    background: linear-gradient(165deg, #232A4E 0%, #11152B 100%);
    border-radius: var(--sf-radius); overflow: hidden; box-shadow: var(--sf-shadow); position: relative;
}
.sf-detail-visual model-viewer { width: 100%; height: 480px; display: block; }
.sf-detail-visual .sf-novisual { height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,.45); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sf-detail-visual .sf-novisual svg { width: 64px; height: 64px; }
.sf-detail h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 830; }
.sf-detail-price { font-size: 24px; font-weight: 850; color: var(--sf-primary); margin: 6px 0 4px; }
.sf-detail-price small { font-size: 13px; font-weight: 600; color: var(--sf-muted); }
.sf-detail-desc { color: var(--sf-muted); font-size: 16px; }
.sf-meta { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.sf-meta li { display: flex; gap: 10px; font-size: 14.5px; }
.sf-meta b { min-width: 130px; font-weight: 700; color: var(--sf-ink); }
.sf-meta span { color: var(--sf-muted); }

.sf-chip {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--sf-primary);
    background: color-mix(in srgb, var(--sf-primary) 10%, white);
    border: 1px solid color-mix(in srgb, var(--sf-primary) 28%, white);
    padding: 4px 10px; border-radius: 99px; margin-bottom: 12px;
}
.sf-chip-bim { color: var(--sf-accent); background: color-mix(in srgb, var(--sf-accent) 8%, white); border-color: color-mix(in srgb, var(--sf-accent) 30%, white); }

.sf-downloads { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 22px; }
.sf-download {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--sf-border); border-radius: 9px; padding: 9px 14px;
    font-size: 13.5px; font-weight: 700; color: var(--sf-ink); background: var(--sf-bg);
}
.sf-download:hover { border-color: var(--sf-primary); color: var(--sf-primary); text-decoration: none; }

/* ── Forms (quote / contact) ────────────────────────────────────────── */
.sf-form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; padding: 36px 0 70px; align-items: start; }
.sf-panel { background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 28px; box-shadow: var(--sf-shadow); }
.sf-panel h2 { font-size: 22px; font-weight: 800; }
.sf-field { margin-bottom: 16px; }
.sf-field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; color: var(--sf-ink); }
.sf-field label small { font-weight: 500; color: var(--sf-muted); }
.sf-input, .sf-textarea {
    width: 100%; border: 1.5px solid var(--sf-border); border-radius: 9px;
    padding: 11px 13px; font-size: 15px; font-family: inherit; color: var(--sf-ink);
    background: var(--sf-bg); outline: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.sf-input:focus, .sf-textarea:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 18%, transparent);
}
.sf-textarea { min-height: 130px; resize: vertical; }
.sf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sf-alert { border-radius: 10px; padding: 14px 18px; font-size: 14.5px; font-weight: 600; margin-bottom: 20px; }
.sf-alert-ok    { background: #EDFAF1; border: 1px solid #BCE8CB; color: #176A36; }
.sf-alert-error { background: #FCEEEF; border: 1px solid #F2C6CA; color: #8E1B26; }

.sf-contact-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.sf-contact-list li { display: flex; flex-direction: column; gap: 2px; }
.sf-contact-list b { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-contact-list a, .sf-contact-list span { font-size: 16.5px; font-weight: 650; color: var(--sf-ink); }

/* ── About ──────────────────────────────────────────────────────────── */
.sf-prose { max-width: 76ch; font-size: 17px; color: var(--sf-ink); }
.sf-prose p { margin: 0 0 1.1em; }
.sf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 38px; }
.sf-fact { background: var(--sf-bg-soft); border: 1px solid var(--sf-border); border-radius: 12px; padding: 18px 20px; }
.sf-fact b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 4px; }
.sf-fact span { font-size: 16.5px; font-weight: 700; }

/* ── CTA band ───────────────────────────────────────────────────────── */
.sf-cta-band { background: var(--sf-bg-soft); border-top: 1px solid var(--sf-border); }
.sf-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 44px 0; }
.sf-cta-inner h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 820; margin: 0; }
.sf-cta-inner p { margin: 4px 0 0; color: var(--sf-muted); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.sf-footer { background: #11152B; color: rgba(255,255,255,.78); margin-top: 0; }
.sf-footer a { color: rgba(255,255,255,.85); }
.sf-footer a:hover { color: #fff; }
.sf-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 52px 0 40px; }
.sf-footer-blurb { font-size: 14.5px; max-width: 44ch; }
.sf-footer-h { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.sf-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; }
.sf-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.sf-footer-bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; font-size: 13px; color: rgba(255,255,255,.55); }
.sf-powered { font-weight: 700; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .sf-hero-grid, .sf-band-grid, .sf-detail-grid, .sf-form-grid { grid-template-columns: 1fr; gap: 32px; }
    .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-footer-grid { grid-template-columns: 1fr 1fr; }
    .sf-hero-grid { padding: 44px 0 40px; }
    .sf-hero-visual model-viewer { height: 360px; }
}
@media (max-width: 640px) {
    .sf-grid { grid-template-columns: 1fr; }
    .sf-footer-grid { grid-template-columns: 1fr; }
    .sf-form-row { grid-template-columns: 1fr; }
    .sf-section { padding: 44px 0; }
    .sf-detail-visual model-viewer { height: 340px; }
}

/* ── Mobile header: one compact row + hamburger menu ─────────────────
   Below 900px the 7-link nav can't fit on one line, and wrapping it made a
   four-row header that ate half the viewport on phones. Instead: logo left,
   quote button + hamburger right, and the nav becomes a tap-friendly
   collapsible list (toggled by storefront.js). */
@media (max-width: 900px) {
    .sf-header-inner { flex-wrap: wrap; gap: 10px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
    .sf-logo { height: 54px; max-width: 190px; }
    .sf-logo-text { font-size: 26px; }
    .sf-header-phone { display: none; }
    .sf-header-actions { margin-left: auto; order: 2; }
    .sf-header-actions .sf-btn-sm { padding: 9px 13px; font-size: 12.5px; }
    .sf-nav-toggle { display: flex; order: 3; }
    .sf-nav {
        display: none; order: 4; flex-basis: 100%;
        flex-direction: column; gap: 0; padding: 4px 0 12px;
    }
    .sf-nav.sf-nav-open { display: flex; }
    .sf-nav-link {
        padding: 14px 10px; font-size: 16px; border-radius: 0;
        border-bottom: 1px solid var(--sf-border);
    }
    .sf-nav-link:last-child { border-bottom: none; }
    .sf-nav-active {
        box-shadow: inset 3px 0 0 var(--sf-accent);
        background: var(--sf-bg-soft); border-radius: 0;
    }
    /* iOS Safari auto-zooms the whole viewport when focusing an input whose
       font-size is under 16px — keep form fields at 16px on mobile. */
    .sf-input, .sf-textarea { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   Category rail + splash transitions
   ════════════════════════════════════════════════════════════════════ */

.sf-cat-rail {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 38px;
}
/* Category rail relocated below the products (the unit is the hero); this
   variant sits under a "Browse the range" divider and hugs the foot CTAs. */
.sf-cat-rail-head {
    font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sf-muted); border-bottom: 1px solid var(--sf-border);
    padding-bottom: 10px; margin: 52px 0 20px;
}
.sf-cat-rail-foot { margin-bottom: 0; }
.sf-cat-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    border: 1.5px solid var(--sf-border); border-radius: 12px;
    padding: 14px 16px 12px; background: var(--sf-bg); color: var(--sf-ink);
    font-size: 14px; font-weight: 700; line-height: 1.25;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sf-cat-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sf-shadow); border-color: var(--sf-primary); }
.sf-cat-tile svg { width: 26px; height: 26px; color: var(--sf-primary); }
/* When an admin assigns a product model to a category, its GLB spins here in
   place of the icon. pointer-events:none keeps the whole tile one link. */
.sf-cat-mv { width: 100%; height: 64px; pointer-events: none; --poster-color: transparent; }
/* Photo-dressed tile (categories whose chosen product has no 3D model). */
.sf-cat-img { width: 100%; height: 64px; object-fit: contain; pointer-events: none; }
.sf-cat-tile b { font-size: 12px; font-weight: 800; color: var(--sf-muted); }
.sf-cat-active { border-color: var(--sf-primary); box-shadow: inset 0 0 0 1.5px var(--sf-primary); }
.sf-cat-active b { color: var(--sf-accent); }

.sf-cat-section[hidden] { display: none; }
.sf-noscroll { overflow: hidden; }

/* ── Splash overlay ─────────────────────────────────────────────────── */
.sf-splash {
    position: fixed; inset: 0; z-index: 200;
    background: radial-gradient(120% 100% at 50% 0%, #1D2547 0%, #0C1022 70%);
    opacity: 1; transition: opacity .26s ease;
}
.sf-splash-out { opacity: 0; }
.sf-splash-stage { position: absolute; inset: 0; overflow: hidden; }
.sf-splash-label {
    position: absolute; left: 0; right: 0; bottom: 9%;
    text-align: center; color: #fff; pointer-events: none;
    font-size: clamp(22px, 4vw, 40px); font-weight: 850;
    letter-spacing: .16em; text-transform: uppercase;
    animation: sfx-label-in 1s ease both .25s;
}
.sf-splash-skip {
    position: absolute; right: 22px; bottom: 22px; z-index: 5;
    background: rgba(255,255,255,.1); color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.35); border-radius: 99px;
    font: inherit; font-size: 13px; font-weight: 700; padding: 8px 18px; cursor: pointer;
}
.sf-splash-skip:hover { background: #fff; color: var(--sf-primary); }
@keyframes sfx-label-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.sfx { position: absolute; inset: 0; }

/* ── Speedgates: wings part, LEDs go green, FOV walks through ───────── */
.sfx-speedgate { perspective: 950px; }
.sfx-speedgate .sfx-floor {
    position: absolute; left: -40%; right: -40%; bottom: -14%; height: 64%;
    transform: rotateX(63deg);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 58px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 120px),
        linear-gradient(180deg, #141A36 0%, #0C1022 100%);
    animation: sfx-floor-rush 2.5s linear both;
}
@keyframes sfx-floor-rush { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 340px, 0 0, 0 0; } }

.sfx-speedgate .sfx-zoom { position: absolute; inset: 0; animation: sfx-walk 2.5s cubic-bezier(.45,0,.4,1) both; }
@keyframes sfx-walk {
    0%, 52%  { transform: scale(1) translateY(0); opacity: 1; }
    96%      { transform: scale(3.1) translateY(7%); opacity: 1; }
    100%     { transform: scale(3.3) translateY(8%); opacity: 0; }
}

.sfx-ped {
    position: absolute; top: 34%; width: 11%; height: 38%;
    background: linear-gradient(100deg, #2A3354 0%, #1A2140 60%, #232C4F 100%);
    border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.sfx-ped-l { left: 22%; }
.sfx-ped-r { right: 22%; }
.sfx-ped .sfx-ped-led {
    position: absolute; top: 12%; bottom: 12%; width: 5px; border-radius: 99px;
    background: #E2362F; box-shadow: 0 0 14px 2px rgba(226,54,47,.8);
    animation: sfx-ped-led 2.5s linear both;
}
.sfx-ped-l .sfx-ped-led { right: 7%; }
.sfx-ped-r .sfx-ped-led { left: 7%; }
@keyframes sfx-ped-led {
    0%, 38%  { background: #E2362F; box-shadow: 0 0 14px 2px rgba(226,54,47,.8); }
    46%, 100%{ background: #2FD06B; box-shadow: 0 0 16px 3px rgba(47,208,107,.85); }
}

.sfx-wing {
    position: absolute; top: 39%; width: 17.5%; height: 27%;
    background: linear-gradient(105deg, rgba(255,255,255,.34) 0%, rgba(214,228,255,.16) 45%, rgba(255,255,255,.30) 100%);
    border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(1px);
    box-shadow: 0 0 26px rgba(160,190,255,.25);
}
.sfx-wing-l { left: 32.4%; border-radius: 8px 22px 22px 8px; animation: sfx-wing-l 2.5s cubic-bezier(.5,0,.2,1) both; }
.sfx-wing-r { right: 32.4%; border-radius: 22px 8px 8px 22px; animation: sfx-wing-r 2.5s cubic-bezier(.5,0,.2,1) both; }
@keyframes sfx-wing-l {
    0%, 40%  { transform: translateX(0); }
    62%, 100%{ transform: translateX(-128%) rotateY(18deg); opacity: .55; }
}
@keyframes sfx-wing-r {
    0%, 40%  { transform: translateX(0); }
    62%, 100%{ transform: translateX(128%) rotateY(-18deg); opacity: .55; }
}

/* ── Vehicle barriers: the BANNER BOOM lifts open ───────────────────────
   Modelled on iMAT's real banner barrier (Kaapzicht install): the arm IS a
   printed advertising panel pivoting up from a navy pedestal on the LEFT.
   rotate(-78deg) around the left hinge swings the free end UP (screen
   coords: a point right of the pivot at negative angle goes up). */
.sfx-bb-road {
    position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
    background: #1A2038;
}
.sfx-bb-road::after {
    content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 6px;
    background: repeating-linear-gradient(90deg,
        rgba(255,255,255,.28) 0 120px, transparent 120px 220px);
    border-radius: 3px;
}
.sfx-bb-ped {
    position: absolute; left: 9.5%; bottom: 17%; width: 6.5%; height: 37%;
    background: linear-gradient(115deg, #34418F 0%, #232C66 70%, #2B3578 100%);
    border: 1.5px solid rgba(255,255,255,.22);
    border-radius: 9px 9px 4px 4px;
    box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
/* Receiver post at the far end of the lane carries the status light — when
   the banner stands fully open it covers the pedestal entirely, so a light
   anywhere on the pedestal would hide the red→green moment. */
.sfx-bb-post {
    position: absolute; right: 13.5%; bottom: 17%; width: 1.6%; height: 26%;
    min-width: 10px;
    background: linear-gradient(180deg, #8A94A8, #5E6678);
    border-radius: 4px 4px 0 0;
}
.sfx-bb-light {
    position: absolute; top: -26px; left: 50%; width: 22px; height: 22px;
    margin-left: -11px; border-radius: 50%;
}
.sfx-bb-light-r { background: #E2362F; box-shadow: 0 0 18px 4px rgba(226,54,47,.75); animation: sfx-ledr 4.4s linear both; }
.sfx-bb-light-g { background: #2FD06B; box-shadow: 0 0 18px 4px rgba(47,208,107,.8);  animation: sfx-ledg 4.4s linear both; }

/* Timeline (4.4s total, must match DURATION.vehicle in storefront.js):
   0–2.0s closed — banner reads, red light blinks; 2.0–3.5s lift; settle. */
.sfx-bb-pivot {
    position: absolute; left: 13%; bottom: 31%; width: 63%; height: 25%;
    transform-origin: 1.5% 80%;
    animation: sfx-bb-lift 4.4s cubic-bezier(.32,1.16,.35,1) both;
}
@keyframes sfx-bb-lift {
    0%, 45%  { transform: rotate(0deg); }
    80%, 100%{ transform: rotate(-78deg); }
}
.sfx-bb-arm {
    position: absolute; left: -1.5%; top: -9%; width: 34%; height: 9%;
    background: linear-gradient(180deg, #8A94A8, #6B7488);
    border-radius: 5px;
}
.sfx-bb-banner {
    position: absolute; inset: 0; display: flex; overflow: hidden;
    border: 3px solid #99A2B4; border-radius: 7px;
    box-shadow: 0 26px 64px rgba(0,0,0,.5);
}
.sfx-bb-cell {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px;
    padding: 12px 16px; min-width: 0;
}
.sfx-bb-cell-brand  { background: linear-gradient(180deg, #FFFFFF, #EEF1F6); }
.sfx-bb-cell-client { background: linear-gradient(180deg, #F2F4F8, #E2E7EF); border-left: 2px dashed #B6BECC; }
.sfx-bb-cell img { max-height: 58%; max-width: 82%; object-fit: contain; }
.sfx-bb-url {
    font-family: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; font-size: clamp(12px, 1.5vw, 18px);
    color: var(--sf-primary); letter-spacing: .05em;
}
.sfx-bb-client-top {
    font-family: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700; font-size: clamp(14px, 2vw, 26px);
    letter-spacing: .2em; color: #7A8398; text-align: center;
}
.sfx-bb-client-sub {
    font-size: clamp(9px, 1vw, 12px); color: #98A1B3;
    letter-spacing: .12em; text-transform: uppercase;
}
/* Red blinks through the 2s closed hold, stays red through the lift, then a
   HARD cut to green at 77% (the moment the banner reaches open) — a crossfade
   would mix the stacked red+green circles into a muddy olive. */
@keyframes sfx-ledr {
    0%, 6%   { opacity: 1; }
    10%      { opacity: .25; }
    14%, 22% { opacity: 1; }
    26%      { opacity: .25; }
    30%, 38% { opacity: 1; }
    42%      { opacity: .25; }
    46%, 76% { opacity: 1; }
    77%, 100%{ opacity: 0; }
}
@keyframes sfx-ledg {
    0%, 76%  { opacity: 0; }
    77%, 100%{ opacity: 1; }
}

/* ── Turnstiles: head-on POV through a FULL-HEIGHT rotor cage ──────────
   You face the floor-to-ceiling barred rotor; it turns edge-on about the
   central spindle (rotateY — true vertical-axis rotation) and you walk
   THROUGH (perspective floor rush + forward zoom, like the speedgate). ── */
.sfx-fh { perspective: 1150px; }
.sfx-fh .sfx-floor {
    position: absolute; left: -40%; right: -40%; bottom: -12%; height: 58%;
    transform: rotateX(64deg);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 58px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 120px),
        linear-gradient(180deg, #141A36 0%, #0C1022 100%);
    animation: sfx-floor-rush 2.4s linear both;
}
/* Scale-only zoom (NO opacity — opacity would flatten preserve-3d and kill the
   rotor's rotateY). Gentle: the cage frame stays put; the core does the moving.
   The splash itself fades out via the #sf-splash overlay. */
.sfx-fh .sfx-zoom { position: absolute; inset: 0; transform-style: preserve-3d; animation: sfx-fh-zoom 2.6s ease-out both; }
@keyframes sfx-fh-zoom {
    0%   { transform: scale(.98); }
    100% { transform: scale(1.08); }
}

/* Tall cage frame — full-height posts, top beam, and the two side cage
   walls (vertical bars) that make it read as a walk-through cage. */
.sfx-fh-frame { position: absolute; left: 22%; right: 22%; top: 6%; bottom: 4%; }
.sfx-fh-wall {
    position: absolute; top: 4%; bottom: 0; width: 13%;
    background:
        repeating-linear-gradient(90deg, rgba(210,218,232,.55) 0 3px, transparent 3px 22px),
        linear-gradient(180deg, rgba(40,48,79,.5), rgba(20,26,54,.5));
    border: 2px solid #2A3354; border-radius: 4px;
}
.sfx-fh-wall-l { left: -13%; }
.sfx-fh-wall-r { right: -13%; }
.sfx-fh-post { position: absolute; top: 0; bottom: 0; width: 15px; background: linear-gradient(180deg, #3C466C, #232C4F); border-radius: 5px; box-shadow: 0 0 34px rgba(0,0,0,.45); }
.sfx-fh-post-l { left: 0; }
.sfx-fh-post-r { right: 0; }
.sfx-fh-beam { position: absolute; left: -8px; right: -8px; top: 0; height: 30px; background: linear-gradient(180deg, #3C466C, #2A3354); border-radius: 6px; }
.sfx-fh-spindle { position: absolute; left: 50%; top: 8%; bottom: 6%; width: 9px; margin-left: -4.5px; background: linear-gradient(180deg, #9AA3BC, #5C657E); border-radius: 5px; }

/* Rotor: a vertical stack of curved rungs spanning the lane, turning edge-on
   about its vertical centre (the spindle) to clear the path. */
/* Three bar-combs (arms) at 0/120/240 around the central vertical spindle; the
   rotor spins about that axis so the rungs visibly sweep through — a real
   full-height turnstile rotor turning, not a flat plane. */
.sfx-fh-rotor {
    position: absolute; left: 27%; right: 27%; top: 11%; bottom: 9%;
    transform-style: preserve-3d; transform-origin: 50% 50%;
    animation: sfx-fh-spin 2.6s linear both;
}
/* Each arm is now a SINGLE half-width spoke from the hub (centre → right),
   not a full-width comb through the centre — so three arms read as three
   spokes, not six. They pivot about the spindle (left edge = rotor centre). */
.sfx-fh-arm {
    position: absolute; left: 50%; right: 0; top: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    transform-origin: 0% 50%; backface-visibility: visible;
}
.sfx-fh-arm-b { transform: rotateY(120deg); }
.sfx-fh-arm-c { transform: rotateY(240deg); }
.sfx-fh-bar {
    height: 12px; border-radius: 99px;
    background: linear-gradient(180deg, #F4F7FB, #C5CDDB);
    box-shadow: 0 1px 0 rgba(0,0,0,.18);
}
/* Central hub of the rotating core — sits over the static spindle. */
.sfx-fh-hub {
    position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
    margin: -13px 0 0 -13px; border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #FFFFFF, #AEB7C9);
    box-shadow: 0 0 12px rgba(0,0,0,.35);
}
/* Continuous rotation of the core only (frame is static). */
@keyframes sfx-fh-spin {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(300deg); }
}

/* ── GLB splash: spin the REAL product model over the rushing floor ──── */
.sfx-glb { position: absolute; inset: 0; perspective: 1100px; }
.sfx-glb .sfx-floor {
    position: absolute; left: -40%; right: -40%; bottom: -12%; height: 56%;
    transform: rotateX(64deg);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 58px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 120px),
        linear-gradient(180deg, #141A36 0%, #0C1022 100%);
    animation: sfx-floor-rush 3s linear both;
}
.sfx-glb-stage { position: absolute; left: 0; right: 0; top: 3%; bottom: 9%; animation: sfx-glb-push 3s ease-out both; }
.sfx-glb-mv { width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
@keyframes sfx-glb-push { 0% { transform: scale(.88); } 100% { transform: scale(1.18); } }

/* ── Gates: full-height PEDESTRIAN gate swings open ──────────────────
   iMAT's gates are pedestrian units (full-height bypass gate, paraplegic
   gates) — not vehicle sliders. Head-on: a full-height barred leaf in an
   aluminium frame; the maglock releases (red→green), the leaf swings open
   away from you, and you walk through. (3000ms = DURATION.gates.) */
.sfx-fhg { perspective: 1100px; }
.sfx-fhg .sfx-floor {
    position: absolute; left: -40%; right: -40%; bottom: -12%; height: 58%;
    transform: rotateX(64deg);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 58px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 120px),
        linear-gradient(180deg, #141A36 0%, #0C1022 100%);
    animation: sfx-fhg-floor 3s linear both;
}
/* Ground scrolls only once you start walking (gate already opening). */
@keyframes sfx-fhg-floor {
    0%, 34% { background-position: 0 0, 0 0, 0 0; }
    100%    { background-position: 0 360px, 0 0, 0 0; }
}
/* Scale-only walk-through (no opacity — would flatten preserve-3d and kill
   the leaf's rotateY); the splash fades via the #sf-splash overlay. */
.sfx-fhg .sfx-zoom { position: absolute; inset: 0; transform-style: preserve-3d; animation: sfx-fhg-walk 3s cubic-bezier(.45,0,.4,1) both; }
@keyframes sfx-fhg-walk {
    0%, 36% { transform: scale(1) translateY(0); }
    97%     { transform: scale(3) translateY(6%); }
    100%    { transform: scale(3.15) translateY(6.5%); }
}
.sfx-fhg-frame { position: absolute; left: 31%; right: 31%; top: 9%; bottom: 5%; transform-style: preserve-3d; }
/* Fixed barred side screens flanking the gateway. */
.sfx-fhg-mesh {
    position: absolute; top: 3%; bottom: 0; width: 34%;
    background:
        repeating-linear-gradient(90deg, rgba(210,218,232,.5) 0 3px, transparent 3px 24px),
        linear-gradient(180deg, rgba(40,48,79,.5), rgba(20,26,54,.5));
    border: 2px solid #2A3354; border-radius: 4px;
}
.sfx-fhg-mesh-l { left: -34%; }
.sfx-fhg-mesh-r { right: -34%; }
.sfx-fhg-post { position: absolute; top: 0; bottom: 0; width: 15px; background: linear-gradient(180deg, #3C466C, #232C4F); border-radius: 5px; box-shadow: 0 0 34px rgba(0,0,0,.45); }
.sfx-fhg-post-l { left: 0; }
.sfx-fhg-post-r { right: 0; }
.sfx-fhg-beam { position: absolute; left: -8px; right: -8px; top: 0; height: 26px; background: linear-gradient(180deg, #3C466C, #2A3354); border-radius: 6px; }
/* The full-height gate leaf — vertical infill bars + a mid-rail, hinged on
   the LEFT post. rotateY(+76deg) swings the free edge INTO the screen: the
   gate opens away from you, inviting the walk-through. */
.sfx-fhg-leaf {
    position: absolute; left: 15px; right: 15px; top: 26px; bottom: 0;
    transform-origin: 0% 50%;
    border: 3px solid #C9D1DF; border-radius: 4px;
    background: repeating-linear-gradient(90deg, rgba(228,234,244,.92) 0 5px, transparent 5px 30px);
    box-shadow: 0 16px 44px rgba(0,0,0,.42);
    animation: sfx-fhg-open 3s cubic-bezier(.5,.05,.28,1) both;
}
.sfx-fhg-leaf::after {
    content: ""; position: absolute; left: 0; right: 0; top: 47%; height: 9px;
    background: linear-gradient(180deg, #E8EDF5, #B9C2D2);
}
@keyframes sfx-fhg-open {
    0%, 20%  { transform: rotateY(0deg); }
    56%, 100%{ transform: rotateY(76deg); }
}
/* Maglock signal on the right post: red = locked, green = released. */
.sfx-fhg-leds { position: absolute; right: -26px; top: 26%; display: flex; flex-direction: column; gap: 9px; }
.sfx-fhg-led { width: 16px; height: 16px; border-radius: 50%; }
.sfx-fhg-led-r { background: #E2362F; box-shadow: 0 0 14px 3px rgba(226,54,47,.8);  animation: sfx-fhg-ledr 3s linear both; }
.sfx-fhg-led-g { background: #2FD06B; box-shadow: 0 0 16px 3px rgba(47,208,107,.85); opacity: .14; animation: sfx-fhg-ledg 3s linear both; }
@keyframes sfx-fhg-ledr { 0%, 13% { opacity: 1; } 17%, 100% { opacity: .12; } }
@keyframes sfx-fhg-ledg { 0%, 13% { opacity: .14; } 17%, 100% { opacity: 1; } }
/* Access reader beside the gate. */
.sfx-fhg-reader {
    position: absolute; right: -24px; top: 50%; width: 13px; height: 22px;
    background: linear-gradient(180deg, #2A3354, #1A2140);
    border: 1px solid rgba(255,255,255,.3); border-radius: 3px;
}

/* ── Security booths: walk up to the glass MANTRAP booth, the front door
   swings open, the signal goes red→green, the rear interlock door opens and
   you walk through. Modelled on iMAT's datasheet: slim anodised-aluminium
   frame, clear safety-glass panels, two in-line hinged glass doors, a red
   fascia cap and a red/green signal beside the door. (timeline = 2800ms,
   matches DURATION.booths.) ── */
.sfx-bth { perspective: 1150px; }
.sfx-bth .sfx-floor {
    position: absolute; left: -40%; right: -40%; bottom: -12%; height: 58%;
    transform: rotateX(64deg);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 2px, transparent 2px 58px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 120px),
        linear-gradient(180deg, #141A36 0%, #0C1022 100%);
    animation: sfx-bth-floor 3.8s linear both;
}
/* Ground scrolls ONLY while the camera moves (step in → hold → walk out) —
   a floor rushing under you while you stand in the interlock reads wrong. */
@keyframes sfx-bth-floor {
    0%, 16%  { background-position: 0 0, 0 0, 0 0; }
    40%, 74% { background-position: 0 150px, 0 0, 0 0; }
    100%     { background-position: 0 390px, 0 0, 0 0; }
}
/* Scale-only walk (no opacity — would flatten preserve-3d and kill the door
   rotateY); the splash fades via the #sf-splash overlay. Three beats: step IN
   through the open front door, HOLD inside the sealed interlock, then walk
   OUT through the rear door once it releases. */
.sfx-bth .sfx-zoom { position: absolute; inset: 0; transform-style: preserve-3d; animation: sfx-bth-walk 3.8s cubic-bezier(.45,0,.4,1) both; }
@keyframes sfx-bth-walk {
    0%, 16%  { transform: scale(1) translateY(0); }
    40%, 74% { transform: scale(1.72) translateY(3%); }
    97%      { transform: scale(3.1) translateY(6%); }
    100%     { transform: scale(3.25) translateY(6.5%); }
}

/* The booth itself — a tall, narrow glass cubicle, centred. */
.sfx-bth-booth {
    position: absolute; left: 38%; right: 38%; top: 12%; bottom: 9%;
    transform-style: preserve-3d;
}
/* Red fascia cap (iMAT's reference booth has a red painted header band). */
.sfx-bth-fascia {
    position: absolute; left: -7%; right: -7%; top: -5.5%; height: 8%;
    background: linear-gradient(180deg, #E0362F, #B81E27);
    border-radius: 4px; box-shadow: 0 7px 20px rgba(0,0,0,.45);
}
/* Anodised-aluminium corner posts. */
.sfx-bth-post {
    position: absolute; top: 0; bottom: 0; width: 9px;
    background: linear-gradient(180deg, #DCE3ED, #969EAE);
    border-radius: 3px; box-shadow: 0 0 26px rgba(0,0,0,.4);
}
.sfx-bth-post-l { left: 0; }
.sfx-bth-post-r { right: 0; }
/* Fixed full-height glass sidelights flanking the door. */
.sfx-bth-glass {
    position: absolute; top: 5%; bottom: 4%; width: 18%;
    background: linear-gradient(110deg, rgba(200,225,255,.16) 0%, rgba(255,255,255,.30) 50%, rgba(200,225,255,.14) 100%);
    border: 1px solid rgba(255,255,255,.42);
}
.sfx-bth-glass-l { left: 9px; }
.sfx-bth-glass-r { right: 9px; }
/* The two in-line interlock doors. */
.sfx-bth-door {
    position: absolute; left: 29%; right: 29%; top: 7%; bottom: 4%;
    border-radius: 3px;
}
/* Rear door sits set-back (translateZ) and opens last — the mantrap second leaf. */
.sfx-bth-door-rear {
    transform: translateZ(-58px) rotateY(0deg); transform-origin: right 50%;
    background: linear-gradient(110deg, rgba(188,218,255,.16), rgba(255,255,255,.26));
    border: 1.5px solid rgba(255,255,255,.45);
    animation: sfx-bth-rear 3.8s ease both;
}
/* Rear leaf stays shut through the whole wait, opens only after the front
   has closed and the signal goes green. */
@keyframes sfx-bth-rear {
    0%, 74%  { transform: translateZ(-58px) rotateY(0deg); }
    86%, 100%{ transform: translateZ(-58px) rotateY(-80deg); }
}
/* Front door: hinged on the left, swings open, holds, then closes. */
.sfx-bth-door-front {
    transform-origin: left 50%;
    background: linear-gradient(110deg, rgba(212,234,255,.32), rgba(255,255,255,.44) 50%, rgba(212,234,255,.26) 100%);
    border: 2px solid rgba(255,255,255,.72);
    box-shadow: 0 0 24px rgba(150,190,255,.28);
    animation: sfx-bth-front 3.8s ease both;
}
/* Tall vision strip down the door. */
.sfx-bth-door-front::after {
    content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 3px;
    margin-left: -1.5px; background: rgba(255,255,255,.5);
}
/* Front leaf: swings open, you step THROUGH it, then it closes BEHIND you —
   fading out as it shuts, because a door at your back shouldn't block the
   view. (Opacity on the leaf itself is safe: it only flattens the leaf's own
   subtree, not the booth's preserve-3d context.) */
@keyframes sfx-bth-front {
    0%, 8%   { transform: rotateY(0deg); opacity: 1; }
    24%, 40% { transform: rotateY(-78deg); opacity: 1; }
    54%, 100%{ transform: rotateY(0deg); opacity: 0; }
}
/* Red/green signal lights on the right post (red = wait, green = walk). */
.sfx-bth-leds {
    position: absolute; right: -24px; top: 28%;
    display: flex; flex-direction: column; gap: 9px;
}
.sfx-bth-led { width: 16px; height: 16px; border-radius: 50%; }
.sfx-bth-led-r { background: #E2362F; box-shadow: 0 0 14px 3px rgba(226,54,47,.8);  animation: sfx-bth-ledr 3.8s linear both; }
.sfx-bth-led-g { background: #2FD06B; box-shadow: 0 0 16px 3px rgba(47,208,107,.85); opacity: .14; animation: sfx-bth-ledg 3.8s linear both; }
/* Stays red through the wait; flips green just before the rear door releases. */
@keyframes sfx-bth-ledr { 0%, 70% { opacity: 1; } 74%, 100% { opacity: .12; } }
@keyframes sfx-bth-ledg { 0%, 70% { opacity: .14; } 74%, 100% { opacity: 1; } }
/* Card reader / intercom beside the door. */
.sfx-bth-reader {
    position: absolute; right: -22px; top: 54%; width: 13px; height: 22px;
    background: linear-gradient(180deg, #2A3354, #1A2140);
    border: 1px solid rgba(255,255,255,.3); border-radius: 3px;
}

/* ── Batteries & inverters: a LiFePO4 pack charges to full ───────────
   Cells fill bottom-to-top and turn green, a lightning bolt energises and the
   pack glows — iMAT's backup-power / load-shedding story. (2600ms.) ── */
.sfx-pwr { overflow: hidden; }
.sfx-pwr .sfx-zoom {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    animation: sfx-pwr-pop 2.6s ease both;
}
@keyframes sfx-pwr-pop { 0% { transform: scale(.84); } 62% { transform: scale(1.05); } 100% { transform: scale(1.12); } }
.sfx-pwr-batt {
    position: relative; width: 150px; height: 224px;
    background: linear-gradient(160deg, #1C2444, #0E1430);
    border: 3px solid #3A4470; border-radius: 14px;
    box-shadow: 0 22px 54px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.45);
}
/* green charge halo once full */
.sfx-pwr-batt::after {
    content: ""; position: absolute; inset: -3px; border-radius: 14px;
    box-shadow: 0 0 0 0 rgba(47,208,107,0); animation: sfx-pwr-glow 2.6s ease both;
}
@keyframes sfx-pwr-glow { 0%, 72% { box-shadow: 0 0 0 0 rgba(47,208,107,0); } 100% { box-shadow: 0 0 44px 5px rgba(47,208,107,.42); } }
.sfx-pwr-cap {
    position: absolute; top: -15px; left: 50%; width: 48px; height: 15px; margin-left: -24px;
    background: #3A4470; border-radius: 6px 6px 0 0;
}
.sfx-pwr-fill { position: absolute; inset: 15px; display: flex; flex-direction: column-reverse; gap: 9px; }
.sfx-pwr-fill i { flex: 1; border-radius: 4px; background: rgba(255,255,255,.07); animation: sfx-pwr-seg .4s ease both; }
.sfx-pwr-fill i:nth-child(1) { animation-delay: .25s; }
.sfx-pwr-fill i:nth-child(2) { animation-delay: .60s; }
.sfx-pwr-fill i:nth-child(3) { animation-delay: .95s; }
.sfx-pwr-fill i:nth-child(4) { animation-delay: 1.30s; }
.sfx-pwr-fill i:nth-child(5) { animation-delay: 1.65s; }
@keyframes sfx-pwr-seg {
    0%   { background: rgba(255,255,255,.07); }
    100% { background: linear-gradient(180deg, #34E07A, #1F9E50); box-shadow: 0 0 14px rgba(47,208,107,.55); }
}
.sfx-pwr-bolt {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 92px; margin: -46px 0 0 -23px;
    background: #FFD23F;
    clip-path: polygon(54% 0, 16% 56%, 46% 56%, 30% 100%, 86% 40%, 52% 40%);
    filter: drop-shadow(0 0 12px rgba(255,210,63,.85));
    animation: sfx-pwr-bolt 2.6s ease both;
}
@keyframes sfx-pwr-bolt {
    0%, 42%  { opacity: 0; transform: scale(.5); }
    56%      { opacity: 1; transform: scale(1.15); }
    66%      { opacity: .85; transform: scale(1); }
    100%     { opacity: 1; transform: scale(1.02); }
}

/* ── Camera poles: a steel mast rises, a camera head settles on top and a
   surveillance cone sweeps the scene. (2700ms.) ── */
.sfx-pole { perspective: 1000px; overflow: hidden; }
.sfx-pole .sfx-floor {
    position: absolute; left: -40%; right: -40%; bottom: -12%; height: 52%;
    transform: rotateX(66deg);
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 64px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 120px),
        linear-gradient(180deg, #141A36 0%, #0C1022 100%);
}
.sfx-pole .sfx-zoom { position: absolute; inset: 0; }
/* The mast grows from its base. */
.sfx-pole-mast {
    position: absolute; left: 50%; bottom: 16%; width: 13px; height: 60%; margin-left: -6.5px;
    background: linear-gradient(90deg, #5E6678 0%, #C2CADA 45%, #5E6678 100%);
    border-radius: 4px 4px 0 0; transform-origin: 50% 100%;
    box-shadow: 0 0 30px rgba(0,0,0,.4);
    animation: sfx-pole-rise 2.7s cubic-bezier(.2,.85,.2,1) both;
}
@keyframes sfx-pole-rise { 0% { transform: scaleY(0); } 46%, 100% { transform: scaleY(1); } }
/* Equipment box on the column (batteries/PSU). */
.sfx-pole-box {
    position: absolute; left: 50%; bottom: 34%; width: 26px; height: 34px; margin-left: 7px;
    background: linear-gradient(180deg, #3A4470, #232C4F);
    border: 1px solid rgba(255,255,255,.25); border-radius: 4px; opacity: 0;
    animation: sfx-pole-box 2.7s ease both;
}
@keyframes sfx-pole-box { 0%, 36% { opacity: 0; } 50%, 100% { opacity: 1; } }
/* Camera head at the top of the mast. */
.sfx-pole-cam {
    position: absolute; left: 50%; bottom: 74%; width: 44px; height: 20px; margin-left: -12px;
    animation: sfx-pole-camin 2.7s ease both;
}
@keyframes sfx-pole-camin { 0%, 42% { opacity: 0; transform: translateY(-10px) scale(.6); } 54%, 100% { opacity: 1; transform: none; } }
.sfx-pole-cam-body {
    position: absolute; left: 0; top: 0; width: 40px; height: 18px;
    background: linear-gradient(180deg, #2A3354, #141A36);
    border: 1px solid rgba(255,255,255,.32); border-radius: 4px 9px 9px 4px;
}
.sfx-pole-cam-body::after { /* lens */
    content: ""; position: absolute; right: -5px; top: 3px; width: 9px; height: 10px;
    background: radial-gradient(circle at 40% 40%, #6FB7FF, #0A0E1F);
    border: 2px solid #3A4470; border-radius: 50%;
}
/* Surveillance cone sweeping from the lens. */
.sfx-pole-scan {
    position: absolute; left: 36px; top: 9px; width: 0; height: 0;
    border-top: 40px solid transparent; border-bottom: 40px solid transparent;
    border-left: 150px solid rgba(120,200,255,.14);
    transform-origin: 0 50%;
    animation: sfx-pole-sweep 2.7s ease-in-out both;
}
@keyframes sfx-pole-sweep {
    0%, 54%  { opacity: 0; transform: rotate(2deg); }
    62%      { opacity: 1; transform: rotate(-16deg); }
    82%      { opacity: 1; transform: rotate(15deg); }
    100%     { opacity: 1; transform: rotate(-5deg); }
}

/* ── Generic: iMAT-style brand mark pop ─────────────────────────────── */
.sfx-brand .sfx-brand-square {
    position: absolute; left: 50%; top: 44%; width: 64px; height: 64px;
    margin: -32px 0 0 -32px; background: var(--sf-accent); border-radius: 10px;
    animation: sfx-square 1.5s cubic-bezier(.3,1.3,.4,1) both;
}
.sfx-brand .sfx-brand-ring {
    position: absolute; left: 50%; top: 44%; width: 64px; height: 64px;
    margin: -32px 0 0 -32px; border: 3px solid rgba(255,255,255,.5); border-radius: 50%;
    animation: sfx-ring 1.5s ease-out both;
}
@keyframes sfx-square {
    0%   { transform: scale(0) rotate(-30deg); }
    55%  { transform: scale(1.15) rotate(6deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes sfx-ring {
    0%   { transform: scale(.4); opacity: 0; }
    45%  { opacity: .9; }
    100% { transform: scale(5.2); opacity: 0; }
}

/* ── 3D showroom ────────────────────────────────────────────────────── */
.sf-showroom { display: grid; grid-template-columns: minmax(0, 13fr) minmax(0, 7fr); gap: 36px; align-items: start; padding: 32px 24px 0; }
.sr-stagewrap {
    position: relative;
    /* Spotlight stage: bright crown over the model, vignette at the edges. */
    background: radial-gradient(95% 75% at 50% 16%, #2E3863 0%, #1B2245 48%, #0D1126 100%);
    border-radius: var(--sf-radius); overflow: hidden; box-shadow: var(--sf-shadow-lift);
}
.sr-stagewrap model-viewer { width: 100%; height: 520px; display: block; }
.sr-side { padding-top: 6px; }
.sr-name { font-size: clamp(22px, 2.6vw, 30px); font-weight: 820; margin: 0 0 2px; }

.sr-finishes { margin: 22px 0 26px; }
.sr-finish-h { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 10px; }
.sr-swatchrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sr-swatch {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--sf-border); border-radius: 99px; background: var(--sf-bg);
    padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 700; color: var(--sf-ink);
    cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease;
}
.sr-swatch:hover { border-color: var(--sf-primary); }
.sr-swatch-active { border-color: var(--sf-accent); box-shadow: inset 0 0 0 1.5px var(--sf-accent); }
.sr-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: none; }
.sr-custom { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--sf-muted); cursor: pointer; }
.sr-custom input { width: 34px; height: 30px; border: 1.5px solid var(--sf-border); border-radius: 7px; background: transparent; padding: 1px; cursor: pointer; }
.sr-finish-note { font-size: 12px; color: var(--sf-muted); margin: 2px 0 0; }

.sr-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 30px; }
.sr-thumb {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    background: linear-gradient(165deg, #232A4E 0%, #11152B 100%);
    border: 1.5px solid transparent; border-radius: 12px; padding: 14px 14px 12px;
    font: inherit; text-align: left; cursor: pointer; color: rgba(255,255,255,.92);
    transition: transform .12s ease, border-color .12s ease;
}
.sr-thumb { text-decoration: none; }
.sr-thumb:hover { transform: translateY(-2px); border-color: var(--sf-primary); text-decoration: none; }
.sr-thumb-active { border-color: var(--sf-accent); box-shadow: 0 0 0 1.5px var(--sf-accent); }
.sr-thumb svg { width: 30px; height: 30px; color: rgba(255,255,255,.45); }
.sr-thumb-name { font-size: 13.5px; font-weight: 750; line-height: 1.3; }
.sr-thumb-sku { font-size: 11px; color: rgba(255,255,255,.55); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

@media (max-width: 960px) {
    .sf-showroom { grid-template-columns: 1fr; }
    .sr-stagewrap model-viewer { height: 380px; }
}

/* ── Video (click-to-play YouTube facade) ───────────────────────────── */
.sf-videowrap { max-width: 900px; }
.sf-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--sf-radius); overflow: hidden; cursor: pointer;
    background: #0D1126; box-shadow: var(--sf-shadow);
}
.sf-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-video::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,17,38,.05), rgba(13,17,38,.35));
    transition: opacity .15s ease; pointer-events: none;
}
.sf-video.sf-video-live::after { display: none; }
.sf-video-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--sf-accent); color: #fff; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .14s ease;
}
.sf-video:hover .sf-video-play { transform: translate(-50%,-50%) scale(1.08); }
.sf-video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.sf-video-cap { font-size: 13px; color: var(--sf-muted); margin: 10px 0 0; }
.sf-video-cap a { font-weight: 700; }

/* ── Footer social row ──────────────────────────────────────────────── */
.sf-socials { display: flex; gap: 10px; margin-top: 16px; }
.sf-social {
    width: 38px; height: 38px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.85); transition: background .12s ease, color .12s ease;
}
.sf-social:hover { background: #fff; color: #11152B; }
.sf-social svg { width: 19px; height: 19px; }

/* ── Branch cards (contact page) ────────────────────────────────────── */
.sf-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 26px 0 8px; }
.sf-branch { background: var(--sf-bg-soft); border: 1px solid var(--sf-border); border-radius: 12px; padding: 18px 20px; }
.sf-branch b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 6px; }
.sf-branch span { display: block; font-size: 14.5px; color: var(--sf-ink); }
.sf-branch a { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 750; }

/* ── Scroll-reveal (progressive enhancement) ────────────────────────────
   storefront.js tags below-the-fold elements with [data-reveal] and flips
   .sf-in via IntersectionObserver. No JS → nothing is ever hidden. */
.sf-anim [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
.sf-anim [data-reveal].sf-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sfx, .sfx * { animation: none !important; }
    .sf-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Product photography — card images, detail hero, install gallery
   Real iMAT renders + installation photos. Product renders are tall/varied,
   so contain (never crop) on a light stage; :has() lights the card visual
   for photos while 3D/icon cards keep the dark stage. ── */
.sf-card-visual:has(.sf-card-img) {
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F6 100%);
}
.sf-card-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 14px; box-sizing: border-box;
    transition: transform .3s ease;
}
.sf-card:hover .sf-card-img { transform: scale(1.045); }

.sf-detail-img {
    display: block; width: 100%; height: 480px;
    object-fit: contain; padding: 22px; box-sizing: border-box;
    background: linear-gradient(165deg, #FFFFFF 0%, #EEF1F6 100%);
}

.sf-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sf-gthumb {
    width: 92px; height: 70px; padding: 0; overflow: hidden; cursor: pointer;
    border: 1.5px solid var(--sf-border); border-radius: 9px; background: #fff;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.sf-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-gthumb:hover { transform: translateY(-2px); border-color: var(--sf-accent); }
.sf-gthumb-active {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-accent) 42%, transparent);
}

.sf-lightbox {
    position: fixed; inset: 0; z-index: 9999; display: none;
    align-items: center; justify-content: center; cursor: zoom-out;
    background: rgba(8, 10, 22, .93); padding: 4vmin;
}
.sf-lightbox.sf-lightbox-open { display: flex; }
.sf-lightbox img {
    /* Source gallery photos can be small (≈200px); scale up to a comfortable
       size so an opened thumbnail isn't a stamp in a black void, capped so we
       don't blow low-res images up past legibility. */
    width: min(88vw, 560px); height: auto;
    max-height: 88vh; object-fit: contain; border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

@media (max-width: 640px) {
    .sf-detail-img { height: 340px; padding: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   Trust band — manufacturer guarantees + marquee clients (home page)
   ════════════════════════════════════════════════════════════════════ */
.sf-trust {
    padding: 30px 0;
    background: var(--sf-bg-soft);
    border-top: 1px solid var(--sf-border);
    border-bottom: 1px solid var(--sf-border);
}
.sf-trust-warranty { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sf-warranty {
    display: flex; align-items: center; gap: 10px;
    background: var(--sf-bg); border: 1px solid var(--sf-border);
    border-radius: 99px; padding: 10px 20px;
}
.sf-warranty b { font-size: 18px; font-weight: 850; color: var(--sf-accent); letter-spacing: -.01em; }
.sf-warranty span { font-size: 13px; color: var(--sf-muted); font-weight: 600; }
.sf-trust-clients-h {
    text-align: center; margin: 24px 0 12px;
    font-size: 11px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--sf-muted);
}
.sf-trust-clients {
    display: flex; flex-wrap: wrap; gap: 12px 30px;
    justify-content: center; align-items: center;
}
.sf-trust-clients span {
    font-size: 15.5px; font-weight: 760; color: var(--sf-ink); opacity: .82;
    position: relative;
}
.sf-trust-clients span:not(:last-child)::after {
    content: "·"; position: absolute; right: -17px; color: var(--sf-muted); opacity: .6;
}

/* ════════════════════════════════════════════════════════════════════
   Content pages — Industries, Support, Resources, Legal
   ════════════════════════════════════════════════════════════════════ */
.sf-narrow { max-width: 840px; margin-left: auto; margin-right: auto; }
.sf-section-head-left { text-align: left; margin-left: 0; }
.sf-section-head-left p { margin-left: 0; }

/* Footer legal row */
.sf-footer-legal { display: flex; gap: 18px; }
.sf-footer-legal a { font-size: 13px; }

/* ── Industries: sectors + clients + reach + partners ── */
.sf-sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.sf-sector {
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    padding: 20px; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.sf-sector:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow); border-color: var(--sf-primary); }
.sf-sector svg { width: 30px; height: 30px; color: var(--sf-accent); }
.sf-sector b { display: block; margin-top: 12px; font-size: 16px; font-weight: 780; color: var(--sf-ink); }
.sf-sector span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--sf-muted); }

.sf-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sf-client {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 20px;
}
.sf-client-mark {
    width: 42px; height: 42px; border-radius: 11px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sf-primary); color: #fff; font-weight: 850; font-size: 20px;
}
.sf-client b { font-size: 15.5px; font-weight: 780; color: var(--sf-ink); line-height: 1.3; }
.sf-client span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-accent); }

.sf-reach { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }
.sf-reach-stat { text-align: center; padding: 0 26px; }
.sf-reach-stat b { display: block; font-size: 34px; font-weight: 860; color: var(--sf-primary); line-height: 1; }
.sf-reach-stat span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--sf-muted); font-weight: 600; }

.sf-partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sf-partner {
    background: var(--sf-bg-soft); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 22px 24px;
}
.sf-partner b { font-size: 19px; font-weight: 820; color: var(--sf-ink); }
.sf-partner span { display: block; margin: 8px 0 12px; font-size: 14px; color: var(--sf-muted); line-height: 1.55; }
.sf-partner a { font-size: 14px; font-weight: 750; }

/* ── Support: warranty cards + services + FAQ ── */
.sf-wcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sf-wcard {
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); padding: 26px 24px;
}
.sf-wcard-hero {
    background: linear-gradient(165deg, var(--sf-primary) 0%, #171E3E 100%);
    border-color: transparent; color: #fff;
}
.sf-wcard b { display: block; font-size: 40px; font-weight: 870; color: var(--sf-accent); line-height: 1; letter-spacing: -.02em; }
.sf-wcard-hero b { color: #fff; }
.sf-wcard-t { display: block; margin: 10px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-wcard-hero .sf-wcard-t { color: rgba(255,255,255,.72); }
.sf-wcard p { font-size: 14px; color: var(--sf-muted); line-height: 1.55; margin: 0; }
.sf-wcard-hero p { color: rgba(255,255,255,.9); }

.sf-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 26px; }
.sf-service { display: flex; gap: 12px; align-items: flex-start; }
.sf-service .sf-tick {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: color-mix(in srgb, var(--sf-accent) 14%, transparent); color: var(--sf-accent);
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin-top: 2px;
}
.sf-service b { display: block; font-size: 15.5px; font-weight: 760; color: var(--sf-ink); }
.sf-service span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--sf-muted); line-height: 1.5; }

.sf-faq { display: flex; flex-direction: column; gap: 10px; }
.sf-faq-item {
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: 12px; overflow: hidden;
}
.sf-faq-item summary {
    cursor: pointer; list-style: none; padding: 16px 20px;
    font-size: 15.5px; font-weight: 720; color: var(--sf-ink);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.sf-faq-item summary::-webkit-details-marker { display: none; }
.sf-faq-item summary::after {
    content: "+"; font-size: 22px; font-weight: 400; color: var(--sf-accent); line-height: 1; flex: none;
    transition: transform .18s ease;
}
.sf-faq-item[open] summary::after { transform: rotate(45deg); }
.sf-faq-a { padding: 0 20px 18px; }
.sf-faq-a p { margin: 0; font-size: 14.5px; color: var(--sf-muted); line-height: 1.6; }

/* ── Resources: download hub ── */
.sf-res-group { margin-bottom: 26px; }
.sf-res-list { display: flex; flex-direction: column; gap: 8px; }
.sf-res-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: 12px; padding: 14px 18px;
}
.sf-res-name { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.sf-res-name b { font-size: 15.5px; font-weight: 740; color: var(--sf-ink); }
.sf-res-name span { font-size: 12px; color: var(--sf-muted); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.sf-res-name:hover b { color: var(--sf-primary); }
.sf-res-dls { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-dl-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--sf-border); border-radius: 99px; padding: 7px 14px;
    font-size: 13px; font-weight: 700; color: var(--sf-ink); background: var(--sf-bg);
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.sf-dl-chip svg { width: 15px; height: 15px; }
.sf-dl-chip:hover { border-color: var(--sf-accent); color: var(--sf-accent); text-decoration: none; }
.sf-dl-chip-quiet { border-style: dashed; color: var(--sf-muted); }

/* ── Legal prose ── */
.sf-legal h3 { font-size: 18px; font-weight: 780; color: var(--sf-ink); margin: 26px 0 8px; }
.sf-legal h3:first-child { margin-top: 0; }
.sf-legal p { font-size: 15px; color: var(--sf-muted); line-height: 1.65; margin: 0 0 10px; }

@media (max-width: 640px) {
    .sf-footer-legal { gap: 14px; }
    .sf-res-row { flex-direction: column; align-items: flex-start; }
    .sf-reach-stat { padding: 0 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   Custom design & fabrication — home band, process steps, finish chips
   ════════════════════════════════════════════════════════════════════ */
.sf-custom-band {
    background:
        radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--sf-accent) 32%, transparent) 0%, transparent 55%),
        linear-gradient(160deg, #1B2245 0%, #0D1126 100%);
    color: #fff; padding: 56px 0;
}
.sf-custom-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; align-items: center; }
.sf-eyebrow-light { color: #FF9B94; }
.sf-custom-band h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin: 8px 0 10px; }
.sf-custom-band p { color: rgba(255,255,255,.78); font-size: 16px; max-width: 560px; }
.sf-custom-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin: 18px 0 0; }
.sf-custom-points li {
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
    border-radius: 99px; padding: 7px 14px;
}
.sf-custom-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sf-btn-light { background: #fff; color: var(--sf-primary); }
.sf-btn-light:hover { box-shadow: var(--sf-shadow-lift); color: var(--sf-primary); }
.sf-custom-quiet { color: rgba(255,255,255,.72); font-size: 14px; font-weight: 700; }
.sf-custom-quiet:hover { color: #fff; }
@media (max-width: 820px) { .sf-custom-inner { grid-template-columns: 1fr; } }

/* Process steps (custom page) */
.sf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.sf-step {
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
    padding: 22px 20px; position: relative;
}
.sf-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px;
    background: var(--sf-accent); color: #fff; font-weight: 850; font-size: 16px;
}
.sf-step b { display: block; font-size: 15.5px; font-weight: 780; color: var(--sf-ink); }
.sf-step span:last-child { display: block; margin-top: 5px; font-size: 13.5px; color: var(--sf-muted); line-height: 1.55; }

/* Materials & finishes chip row */
.sf-finishrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; justify-content: center; }
.sf-finishrow-h { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-muted); margin-right: 6px; }
.sf-finish-chip {
    font-size: 13px; font-weight: 700; color: var(--sf-ink);
    background: var(--sf-bg); border: 1px solid var(--sf-border);
    border-radius: 99px; padding: 7px 14px;
}

/* ── AR ("view in your space") — model-viewer only reveals this slotted
   button when the device actually supports AR (Android Scene Viewer, WebXR,
   or iOS Quick Look), so it stays hidden on desktop. ── */
.sf-ar-btn {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px; z-index: 5;
    background: var(--sf-accent); color: #fff; border: none; border-radius: 99px;
    padding: 11px 20px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
    box-shadow: 0 10px 26px rgba(0,0,0,.35); white-space: nowrap;
    transition: transform .14s ease, box-shadow .14s ease;
}
.sf-ar-btn svg { width: 18px; height: 18px; }
.sf-ar-btn:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.42); }

/* ── AR site-survey stamp (WebXR DOM overlay) ─────────────────────────
   Hidden on the normal page; model-viewer sets ar-status on itself during a
   WebXR session and displays its children as the AR overlay — so the stamp
   (logo + site name + GPS + time) rides on top of the camera view. A phone
   screenshot in AR = a stamped site-survey photo. (Scene Viewer / Quick Look
   run in external apps and cannot carry an overlay.) */
.ar-hud { display: none; }
/* Per the owner's mock-up: LOGO with DATE & TIME beneath it, pinned to the
   bottom-left of the camera view (above model-viewer's exit button). */
model-viewer[ar-status="session-started"] .ar-hud,
model-viewer[ar-status="object-placed"] .ar-hud {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    position: absolute; left: 14px; top: auto; right: auto;
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 80px));
    pointer-events: none;
}
.ar-hud-brand {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.95); border-left: 4px solid var(--sf-accent);
    border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ar-hud-brand img { height: 40px; width: auto; max-width: 140px; }
.ar-hud-brand b { color: var(--sf-primary); font-size: 17px; }
.ar-hud-stamp {
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(13,17,38,.82); color: #fff;
    border-radius: 9px; padding: 6px 11px;
    font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ar-hud-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 88vw;
    background: rgba(13,17,38,.72); color: #fff;
    border-radius: 9px; padding: 5px 9px;
    font-size: 11px; font-weight: 700;
    pointer-events: auto;   /* the site-name input + share stay interactive */
}
/* Screenshot stamper output */
.ar-stamp { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#ar-stamp-out { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex-basis: 100%; }
#ar-stamp-out[hidden] { display: none; }
#ar-stamp-img { max-width: 220px; max-height: 220px; border-radius: 10px; border: 1px solid var(--sf-border); }
.ar-hud-meta input {
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
    border-radius: 7px; color: #fff; font: inherit; padding: 5px 9px; width: 150px;
}
.ar-hud-meta input::placeholder { color: rgba(255,255,255,.6); }
#ar-geo, #ar-time { font-variant-numeric: tabular-nums; }
#ar-share {
    background: var(--sf-accent); color: #fff; border: none; border-radius: 7px;
    font: inherit; font-weight: 800; padding: 6px 12px; cursor: pointer;
}
/* Post-AR prompt: turn the survey into a quote request. */
.ar-after {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 10px; padding: 12px 16px; border-radius: 11px;
    background: color-mix(in srgb, var(--sf-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--sf-accent) 35%, transparent);
    font-size: 14px;
}
.ar-after[hidden] { display: none; }

/* ── In-page survey camera ────────────────────────────────────────────
   getUserMedia viewfinder with the live brand HUD (reuses the .ar-hud-brand /
   .ar-hud-stamp chips) and a shutter that saves an already-stamped photo. */
.survey-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; font-size: 12.5px; color: var(--sf-muted);
}
.survey-cam {
    position: fixed; inset: 0; z-index: 1000; background: #000;
    display: flex; align-items: center; justify-content: center;
}
.survey-cam[hidden] { display: none; }
.survey-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.survey-cam video[hidden] { display: none; }
/* The transparent 3D product layer over the live camera. */
#survey-model-mount { position: absolute; inset: 0; z-index: 1; }
#survey-model-mount[hidden] { display: none; }
#survey-model-mount model-viewer {
    width: 100%; height: 100%; background: transparent; --poster-color: transparent;
}
#survey-model-toggle {
    position: absolute; right: 14px; z-index: 3;
    bottom: max(30px, calc(env(safe-area-inset-bottom) + 30px));
    border: 1px solid rgba(255,255,255,.4); border-radius: 99px; cursor: pointer;
    background: rgba(13,17,38,.72); color: #fff;
    font: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 14px;
}
#survey-model-toggle[hidden] { display: none; }
#survey-close {
    position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(13,17,38,.7); color: #fff; font-size: 18px; font-weight: 800;
}
.survey-hud {
    position: absolute; left: 14px; z-index: 2;
    bottom: max(118px, calc(env(safe-area-inset-bottom) + 118px));
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
#survey-site {
    background: rgba(13,17,38,.72); border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px; color: #fff; font: inherit; font-size: 16px; font-weight: 700;
    padding: 6px 10px; width: 190px;
}
#survey-site::placeholder { color: rgba(255,255,255,.6); }
#survey-shutter {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
    bottom: max(26px, calc(env(safe-area-inset-bottom) + 26px));
    width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
    background: #fff; border: 5px solid rgba(255,255,255,.45);
    background-clip: padding-box; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
#survey-shutter:active { transform: translateX(-50%) scale(.92); }
#survey-shutter[hidden] { display: none; }
.survey-err {
    position: absolute; z-index: 2; left: 20px; right: 20px; top: 45%;
    text-align: center; color: #fff; font-size: 15px; font-weight: 700;
    background: rgba(13,17,38,.85); border-radius: 12px; padding: 18px;
}
.survey-err[hidden] { display: none; }
.survey-result {
    position: absolute; inset: 0; z-index: 2; background: #000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.survey-result[hidden] { display: none; }
.survey-result img {
    max-width: 100%; max-height: calc(100% - 110px); object-fit: contain;
}
.survey-result-btns {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}
/* Product identity line inside the dark HUD chip (mirrors the stamp). */
.ar-hud-prod {
    font-size: 11px; font-weight: 800; letter-spacing: .02em;
    color: #FFD9DD; max-width: 62vw; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
/* The survey tray: captures collected so far (across product pages) + send. */
.survey-tray {
    position: absolute; z-index: 3; left: 14px; right: 64px;
    top: max(14px, env(safe-area-inset-top));
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.survey-tray-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.survey-thumb { position: relative; display: inline-block; }
.survey-thumb img {
    width: 46px; height: 46px; object-fit: cover; display: block;
    border-radius: 8px; border: 2px solid rgba(255,255,255,.75);
}
.survey-thumb button {
    position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
    border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: var(--sf-accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px;
}
.survey-thumb-qty {
    position: absolute; bottom: -6px; right: -6px; z-index: 1;
    background: #16223B; color: #fff; border-radius: 99px; padding: 1px 6px;
    font-style: normal; font-size: 10px; font-weight: 800;
}
/* Units-at-this-placement stepper — the qty rides the stamp and the quote. */
.survey-qty {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(13,17,38,.72); color: #fff;
    border-radius: 8px; padding: 4px 6px; font-size: 12px; font-weight: 700;
    pointer-events: auto;
}
.survey-qty button {
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
    font-size: 16px; font-weight: 800; line-height: 1; padding: 0;
}
.survey-qty b { font-size: 14px; min-width: 20px; text-align: center; display: inline-block; }
/* Send panel + confirmation: centered cards over the camera backdrop. */
.survey-form, .survey-done {
    position: absolute; inset: 0; z-index: 4; background: rgba(6,9,20,.88);
    display: flex; align-items: center; justify-content: center; padding: 18px;
    overflow-y: auto;
}
.survey-form[hidden], .survey-done[hidden] { display: none; }
.survey-form form, .survey-done-card {
    background: var(--sf-bg, #fff); border-radius: 16px; padding: 22px;
    width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px;
    max-height: calc(100vh - 40px); overflow-y: auto;
}
.survey-form h3 { margin: 0; font-size: 19px; }
.survey-form-sub { margin: 0 0 4px; font-size: 13px; color: var(--sf-muted); }
.survey-form-err { margin: 0; font-size: 13px; font-weight: 700; color: #BE1E2D; }
.survey-form-err[hidden] { display: none; }
.survey-done-card { text-align: center; }
.survey-done-card b { font-size: 20px; }
.survey-done-card p { margin: 4px 0 8px; font-size: 14px; color: var(--sf-muted); }

/* ── WhatsApp floating click-to-chat (Rev 119) ── */
.sf-whatsapp {
    /* z-index below the category splash overlay (200) so the FAB never covers
       its Skip button; still floats above ordinary page content. */
    position: fixed; right: 18px; bottom: 18px; z-index: 150;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.28);
    transition: transform .15s ease;
}
.sf-whatsapp:hover { transform: scale(1.08); }
.sf-whatsapp svg { width: 32px; height: 32px; }

/* ── Lane calculator (Rev 119) ── */
.sf-calc { padding: 34px 0 70px; }
.sf-calc-head { max-width: 62ch; margin-bottom: 22px; }
.sf-calc-head h1 { font-size: 30px; margin: 8px 0 8px; }
.sf-calc-head p { color: var(--sf-muted); font-size: 15.5px; }
.sf-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 800px) { .sf-calc-grid { grid-template-columns: 1fr; } }
.sf-calc-card { border: 1px solid var(--sf-border); border-radius: 14px; background: var(--sf-bg); padding: 20px 22px; }
.sf-calc-card .sf-field { margin-bottom: 14px; }
.sf-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sf-calc-result { background: color-mix(in srgb, var(--sf-primary) 5%, transparent); }
.sf-calc-lanes { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sf-calc-lanes b { font-size: 52px; line-height: 1; color: var(--sf-primary); font-weight: 800; }
.sf-calc-lanes span { font-size: 14px; color: var(--sf-muted); font-weight: 700; }
.sf-calc-explain { font-size: 14px; color: var(--sf-ink); margin: 6px 0 12px; }
.sf-calc-spec { font-size: 15px; line-height: 1.7; padding: 12px 0; border-top: 1px solid var(--sf-border); border-bottom: 1px solid var(--sf-border); margin-bottom: 16px; }
.sf-calc-spec b { color: var(--sf-primary); }
.sf-calc-result .sf-btn { width: 100%; text-align: center; }
.sf-calc-note { font-size: 12px; color: var(--sf-muted); margin-top: 12px; }

/* ── Back-office shell (Rev 118): dark left sidebar on every /manage page.
   Views opt in with <body class="sf-body mng-shell"> + the _ManageNav
   partial; their .mng-wrap becomes the scrolling content column. ── */
.mng-shell { display: flex; min-height: 100vh; align-items: stretch; background: #F4F6FA; }
.mng-shell .mng-wrap { flex: 1; min-width: 0; }
.mnav {
    width: 224px; flex: 0 0 224px; position: sticky; top: 0; align-self: flex-start;
    height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #141B2E 0%, #101527 100%);
    padding: 18px 12px 14px;
}
.mnav-brand {
    display: flex; flex-direction: column; gap: 4px; text-decoration: none;
    padding: 4px 10px 14px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mnav-brand img { max-height: 34px; width: auto; align-self: flex-start; background: #fff; border-radius: 7px; padding: 4px 8px; }
.mnav-brand b { color: #fff; font-size: 17px; }
.mnav-brand span { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-accent, #BE1E2D); }
.mnav nav { flex: 1; }
.mnav-sec {
    font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.34); padding: 14px 10px 4px;
}
.mnav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; margin: 1px 0; border-radius: 9px;
    color: rgba(255,255,255,.78); text-decoration: none;
    font-size: 13.5px; font-weight: 650; transition: background .12s ease, color .12s ease;
}
.mnav-item i { font-style: normal; font-size: 15px; width: 20px; text-align: center; }
.mnav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.mnav-item.on { background: var(--sf-accent, #BE1E2D); color: #fff; font-weight: 750; }
.mnav-foot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
/* Logout is a POST form styled to match the nav anchors. */
.mnav-btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
/* Burger state lives in a hidden checkbox. On desktop it and the burger label
   are invisible and .mnav-top collapses (display:contents), so the sidebar is
   byte-for-byte its old self; the mobile drawer below re-materialises them. */
.mnav-toggle { display: none; }
.mnav-burger { display: none; }
.mnav-top { display: contents; }
@media (max-width: 920px) {
    .mng-shell { flex-direction: column; }
    .mng-shell .mng-wrap { width: 100%; }
    .mnav {
        position: static; height: auto;
        width: 100%; max-width: 100vw; min-width: 0; flex: none;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 10px 14px;
    }
    /* iOS zooms the page when a focused control's font-size is under 16px —
       lift every form control to 16px on phones (overrides per-view styles). */
    .sf-input, select.sf-input, textarea.sf-input, .cap { font-size: 16px !important; }
    /* Top bar — logo + burger, always visible. */
    .mnav-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .mnav-brand { flex-direction: row; align-items: center; gap: 8px; border: none; padding: 0; margin: 0; }
    .mnav-brand img { max-height: 28px; }
    .mnav-brand span { display: none; }
    .mnav-burger {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 40px; font-size: 22px; line-height: 1; color: #fff;
        cursor: pointer; border-radius: 9px; background: rgba(255,255,255,.08);
        user-select: none; -webkit-tap-highlight-color: transparent;
    }
    /* Drawer — the full grouped nav + footer, revealed by the burger. Sections
       stay visible so Sell / Clients / Factory grouping is preserved (unlike the
       old horizontal scroll strip). A link click loads a fresh page, so it closes. */
    .mnav nav, .mnav-foot { display: none; }
    .mnav-toggle:checked ~ nav { display: block; padding-top: 10px; }
    .mnav-toggle:checked ~ .mnav-foot {
        display: block; border-top: 1px solid rgba(255,255,255,.08);
        margin-top: 8px; padding-top: 8px;
    }
    .mnav-sec { display: block; }
    .mnav-item { white-space: normal; font-size: 14.5px; padding: 11px 10px; }
}