/* STEELLY premium white liquid-glass override.
   Non-destructive layer over style.css; remove this file link to roll back. */
:root {
    --bg: #fbfcfd;
    --bg2: #f5f7f9;
    --bg3: #ffffff;
    --bg4: #e8edf2;
    --ink: #0b0d10;
    --ink2: #303841;
    --ink3: #58636d;
    --gold: #101214;
    --gold2: #090b0d;
    --gold3: #dfe6ed;
    --gold-btn: #111315;
    --gold-glow: rgba(8, 15, 22, .34);
    --gold-dim: rgba(16, 18, 20, .08);
    --steel: #101214;
    --steel2: #58636d;
    --steel-dim: rgba(88, 99, 109, .1);
    --line: rgba(120, 135, 150, .18);
    --line2: rgba(120, 135, 150, .28);
    --glass-bg: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.42) 50%, rgba(232,239,246,.58));
    --glass-solid: rgba(255,255,255,.82);
    --shadow: 0 34px 100px -46px rgba(8,15,22,.5);
    --shadow-2: 0 46px 120px -54px rgba(8,15,22,.64);
    --shadow-3: 0 56px 140px -54px rgba(8,15,22,.7);
    --r-sm: 14px;
    --r: 28px;
    --r-lg: 34px;
    --ac-l: #20262c;
    --ac: #111315;
    --ac-d: #090b0d;
    --ac-t: #0b0d10;
    --ac-lt: #dfe6ed;
}

body {
    background: var(--bg);
    color: var(--ink);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(720px 460px at 4% 4%, rgba(113,135,158,.24), transparent 64%),
        radial-gradient(640px 480px at 92% 8%, rgba(219,226,234,.62), transparent 68%),
        radial-gradient(620px 420px at 72% 86%, rgba(96,120,144,.16), transparent 70%),
        linear-gradient(180deg, #fff, #f7f9fb 45%, #fff);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(16,18,20,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,18,20,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 72%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 72%, transparent);
}

h1, h2, h3, h4 {
    font-family: "Cormorant Garamond", "Bodoni 72", Georgia, serif;
    letter-spacing: -.038em;
    color: var(--ink);
}

h1 {
    font-size: clamp(54px, 7.4vw, 98px);
    line-height: .86;
    font-weight: 500;
}

h2 {
    font-size: clamp(40px, 4.8vw, 68px);
    line-height: .92;
    font-weight: 500;
}

h3 {
    font-size: 24px;
    line-height: 1.02;
    font-weight: 500;
}

h1 strong, h2 strong, h1 em, h2 em,
.grad-text {
    color: #424b54;
    font-style: italic;
    font-weight: 500;
}

.eyebrow {
    color: #65717c;
    letter-spacing: .24em;
    font-size: 10.5px;
    font-weight: 800;
}

.eyebrow::before {
    background: #8d98a3;
}

.glass,
.card,
.s-card,
.icon-tile,
.why-item,
.faq-item,
.p-step,
.price-band,
.table-wrap,
.form-card,
.form-panel > div,
.role-card,
.testimonial-card,
.cta-band,
.contact-box,
.callout,
.hero-inline,
.stats-band,
.pcard,
.prod,
.tm,
.ftile,
.pdp-buy,
.co-sum,
.site-header,
.tabbar,
.hx-chip,
.story-im .cap,
.jcard .cap,
.prec-im .badge2,
.cart-drawer,
.buybar,
.menu-sheet {
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(34px) saturate(1.95);
    backdrop-filter: blur(34px) saturate(1.95);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -18px 30px -28px rgba(8,15,22,.42),
        0 26px 64px -44px rgba(8,15,22,.52);
}

.glass::before,
.card::before,
.s-card::before,
.icon-tile::before,
.why-item::before,
.price-band::before,
.cta-band::before,
.testimonial-card::before,
.pcard::before,
.prod::before,
.ftile::before {
    opacity: 1;
    background:
        radial-gradient(120% 55% at 18% -10%, rgba(255,255,255,.9), transparent 58%),
        radial-gradient(260px 160px at 100% 0, rgba(150,170,190,.18), transparent 62%);
}

.glass::after,
.card::after,
.s-card::after,
.icon-tile::after,
.why-item::after,
.price-band::after,
.cta-band::after,
.testimonial-card::after,
.faq-item::after,
.p-step::after {
    background: linear-gradient(155deg, rgba(255,255,255,1), rgba(255,255,255,.38) 28%, transparent 52%, rgba(112,126,140,.17) 82%, rgba(255,255,255,.86));
}

.glass:hover,
.card:hover,
.s-card:hover,
.icon-tile:hover,
.why-item:hover,
.testimonial-card:hover,
.pcard:hover,
.prod:hover,
.tm:hover,
.ftile:hover,
.faq-item:hover,
.p-step:hover,
.price-band:hover,
.cta-band:hover {
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.54) 50%, rgba(232,239,246,.68));
    border-color: rgba(255,255,255,.98);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -18px 30px -28px rgba(8,15,22,.44),
        0 34px 82px -46px rgba(8,15,22,.58);
}

.site-header {
    background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.5));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -16px 30px -26px rgba(6,10,14,.5),
        0 20px 58px -36px rgba(8,15,22,.6);
}

.brand-logo,
.ms-logo,
.footer-brand img {
    filter: none;
}

.hdr-nav .nl {
    color: #38414a;
}

.hdr-nav .nl:hover,
.hdr-dd:focus-within > .nl,
.hdr-nav .nl.on,
.drop a:hover,
.menu-btn:hover {
    background: rgba(16,18,20,.06);
    color: #0b0d10;
}

.btn-primary,
.tabbar .q::before,
.ms-f-ico,
.ms-join {
    background: linear-gradient(145deg, #20262c, #090b0d 72%);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -10px 18px -14px rgba(255,255,255,.16),
        0 20px 38px -22px rgba(8,12,16,.78);
}

.btn-primary:hover {
    background: linear-gradient(145deg, #2b333a, #090b0d 72%);
}

.btn-secondary,
.btn-glass {
    color: var(--ink);
    background: rgba(255,255,255,.58);
    border-color: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 #fff, 0 12px 30px -24px rgba(17,28,39,.5);
}

.btn-steel,
.shop-filter button.on,
.chips li.on,
.chip.on,
.seg input:checked + .opt {
    color: var(--ink);
    background: rgba(16,18,20,.07) !important;
    border-color: rgba(16,18,20,.16) !important;
}

.hx-hero {
    min-height: 88svh;
    padding: 132px 0 72px;
}

.hx-hero-in {
    grid-template-columns: minmax(0, 640px) minmax(260px, 1fr);
    gap: clamp(22px, 4vw, 58px);
    align-items: end;
}

.hx-copy {
    max-width: min(650px, 92vw);
    padding: clamp(8px, 1vw, 12px) 0;
    margin-left: clamp(-10px, -1vw, 0px);
    border-radius: 0;
    background: transparent;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hx-hero h1 {
    max-width: 11.8ch;
    margin: 14px 0 18px;
    color: #ffffff;
    font-size: clamp(54px, 7.2vw, 104px);
    line-height: .84;
    letter-spacing: -.055em;
    font-weight: 600;
    text-wrap: balance;
    text-shadow:
        0 2px 2px rgba(0,0,0,.28),
        0 18px 48px rgba(0,0,0,.46),
        0 0 1px rgba(255,255,255,.55);
}

.hx-hero h1 .ln,
.hx-hero h1 .ln span {
    overflow: visible;
}

.hx-hero h1 em,
.hx-hero h1 strong,
#heroTitle em {
    color: #c9f4ff;
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(115deg, #ffffff 0%, #dff8ff 34%, #a8e7ff 58%, #f2d7a3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 2px 2px rgba(0,0,0,.26),
        0 16px 40px rgba(0,0,0,.42),
        0 0 22px rgba(130,226,255,.2);
}

.hx-hero .lead {
    max-width: 44ch;
    margin-bottom: 22px;
    color: rgba(255,255,255,.9);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.64;
    font-weight: 500;
    text-shadow: 0 2px 18px rgba(0,0,0,.48);
}

.hx-hero .eyebrow,
.hx-ctaband .eyebrow {
    width: fit-content;
    padding: 0;
    border-radius: 999px;
    color: #d9f6ff;
    background: transparent;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: 0 1px 12px rgba(0,0,0,.34);
}

.hx-hero .eyebrow::before,
.hx-ctaband .eyebrow::before {
    background: rgba(255,255,255,.72);
}

.hx-hero .grade::after {
    background:
        radial-gradient(700px 460px at 22% 46%, rgba(0,0,0,.38), transparent 70%),
        linear-gradient(90deg, rgba(4,6,8,.54) 0%, rgba(4,6,8,.25) 34%, rgba(4,6,8,.06) 60%, transparent),
        linear-gradient(180deg, rgba(4,6,8,.18), transparent 32%, transparent 70%, var(--bg) 100%);
}

.hx-play {
    color: #fff;
    font-weight: 750;
    text-shadow: 0 1px 12px rgba(0,0,0,.36);
}

.hx-play .pb {
    background: linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.09));
    border-color: rgba(255,255,255,.36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 32px -22px rgba(0,0,0,.9);
}

.hx-play svg {
    color: #fff;
}

.hx-link {
    color: rgba(255,255,255,.94);
    font-weight: 750;
    border-bottom-color: rgba(255,255,255,.56);
    text-shadow: 0 1px 12px rgba(0,0,0,.36);
}

.hx-chip,
.story-im .cap,
.jcard .cap,
.prec-im .badge2 {
    border-color: rgba(255,255,255,.36);
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
    -webkit-backdrop-filter: blur(24px) saturate(1.7);
    backdrop-filter: blur(24px) saturate(1.7);
}

.hx-chips {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.36));
    box-shadow: inset 0 1px 0 #fff, 0 26px 70px -48px rgba(8,15,22,.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
}

.hx-chips li {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hx-chips b {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 34px;
    color: var(--ink);
}

.pcard,
.prod,
.ftile,
.tm,
.faq-item {
    border-radius: 28px;
}

.pcard .im,
.prod .im,
.story-im,
.jcard,
.prec-im,
.hx-ctaband {
    border-radius: 34px;
    overflow: hidden;
}

.pcard .tg,
.prod .cat,
.pbadge {
    color: #4d5964;
}

.section-alt {
    background: linear-gradient(180deg, rgba(245,247,249,.72), rgba(255,255,255,.4) 85%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.prec-in {
    background: linear-gradient(145deg, rgba(20,23,26,.92), rgba(12,14,16,.88));
    color: #fff;
    border-color: rgba(255,255,255,.18);
}

.prec-in h2,
.prec-in p,
.prec-in .step2 b,
.prec-in .step2 span {
    color: inherit;
}

.prec-in .eyebrow,
.prec-in .step2 .no {
    color: #dfe6ed;
}

.prec-in .btn-primary {
    background: #fff;
    color: #111315;
}

.site-footer {
    background: linear-gradient(180deg, #111315, #090b0d);
}

@media (max-width: 960px) {
    h1 { font-size: clamp(40px, 12vw, 58px); }
    h2 { font-size: clamp(34px, 10vw, 48px); }
    .hx-hero {
        min-height: 84svh;
        padding: 104px 0 64px;
        justify-content: flex-start;
    }
    .hx-hero-in {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
    }
    .hx-copy {
        width: min(100%, 520px);
        padding: 10px 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
    }
    .hx-hero h1 {
        max-width: 10.8ch;
        font-size: clamp(40px, 12.6vw, 62px);
        line-height: .88;
        letter-spacing: -.048em;
        margin: 12px 0 14px;
    }
    .hx-hero .lead {
        max-width: 32ch;
        margin-bottom: 18px;
        font-size: clamp(14px, 3.8vw, 15.5px);
        line-height: 1.55;
    }
    .hx-hero .eyebrow {
        max-width: 100%;
        padding: 0;
        letter-spacing: .18em;
        font-size: 9.5px;
    }
    .hx-cta {
        gap: 12px;
    }
    .hx-play {
        font-size: 13px;
    }
    .hx-link {
        font-size: 13px;
    }
    .hx-side {
        align-items: flex-start;
        margin-top: 0;
    }
    .hx-chip {
        max-width: min(100%, 360px);
        border-radius: 22px;
    }
    .hx-hero .grade::after {
        background:
            radial-gradient(520px 420px at 28% 28%, rgba(0,0,0,.34), transparent 72%),
            linear-gradient(180deg, rgba(4,6,8,.36), rgba(4,6,8,.14) 42%, rgba(4,6,8,.08) 68%, var(--bg) 100%),
            linear-gradient(90deg, rgba(4,6,8,.36), rgba(4,6,8,.04) 82%);
    }
    .menu-sheet {
        background: rgba(251,252,253,.94);
        color: var(--ink);
    }
}

@media (max-width: 420px) {
    .hx-hero {
        min-height: 82svh;
        padding-top: 96px;
    }
    .hx-copy {
        padding: 8px 0;
    }
    .hx-hero h1 {
        max-width: 10.2ch;
        font-size: clamp(37px, 12.2vw, 50px);
        line-height: .9;
    }
    .hx-hero .lead {
        max-width: 30ch;
    }
}

/* ==========================================================================
   v44 — conversion polish: readable hero over a visible photo, click-based
   dropdowns, sticky action bar, upload box, shop cards, accordions, a11y
   ========================================================================== */

/* ---------- 2: hero photo stays visible; only a soft left scrim for text ---------- */
.hx-hero .grade::after {
    background:
        linear-gradient(95deg, rgba(20,17,15,.60) 0%, rgba(20,17,15,.40) 26%, rgba(20,17,15,.14) 46%, rgba(20,17,15,0) 62%),
        linear-gradient(180deg, rgba(20,17,15,.20) 0%, rgba(20,17,15,0) 22%, rgba(20,17,15,0) 64%, var(--bg) 100%);
}
.hx-hero .grade > img, .hx-hero .grade > picture > img { filter: saturate(.96) contrast(1.02); }

/* readability without a heavy overlay */
.hx-hero h1 { text-shadow: 0 2px 18px rgba(16,13,11,.5), 0 1px 3px rgba(16,13,11,.35); }
.hx-hero .eyebrow, .hx-note { text-shadow: 0 1px 10px rgba(16,13,11,.55); }

/* ---------- 1: stable H1 + slide title demoted to supporting text ---------- */
.hx-hero h1 {
    font-size: clamp(30px, 4.1vw, 54px);
    max-width: 17ch; margin: 10px 0 12px; color: #fff; line-height: 1.06;
}
.hx-note {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    max-width: 48ch; margin: 0 0 20px; color: #f1ece3; font-size: 15px;
    transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.hx-note.out { opacity: 0; transform: translateY(8px); }
.hx-note b { font-weight: 600; color: #fff; }
.hx-note b::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold3); margin: 0 2px 0 9px; vertical-align: middle; }
.hx-note b:empty::after, .hx-note b:empty { display: none; }
.hx-note span { color: #e4ded3; }

/* ---------- 3: primary / secondary hero CTAs ---------- */
.hx-cta { gap: 10px; align-items: center; }
.hx-cta .btn { padding: 14px 24px; font-size: 14.5px; }
.btn-hero-ghost {
    color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.42);
    -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.24); border-color: #fff; transform: translateY(-2px); }
.hx-hero .hx-chip { background: rgba(251,250,247,.9); }

/* ---------- 6+7: dropdowns open on click, never on hover ---------- */
.hdr-dd .drop { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.99); pointer-events: none; }
.hdr-dd:hover .drop, .hdr-dd:focus-within .drop { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.99); pointer-events: none; }
.hdr-dd.open .drop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hdr-dd.open > .nl { background: var(--gold-dim); color: var(--gold); }
.hdr-dd.open .car { transform: rotate(180deg); }
.hdr-nav .car { font-size: 10px; transition: transform .25s var(--ease); }

.drop { padding: 14px; border-radius: 20px; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 70px -24px rgba(23,20,18,.35); }
.drop-2 { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 4px 18px; min-width: 400px; }
.drop-4 { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 4px 16px; min-width: 660px; }
.dcol { display: flex; flex-direction: column; }
.drop .dh { margin: 6px 10px 3px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.dcol .dh:not(:first-child) { margin-top: 14px; }
.drop a { padding: 7px 10px; border-radius: 9px; font-size: 13.5px; line-height: 1.35; white-space: normal; }
@media (max-width: 1400px) { .drop-4 { grid-template-columns: repeat(2, minmax(150px, 1fr)); min-width: 380px; } }

/* ---------- 8: mobile sticky action bar — Call · WhatsApp · Get Quote ---------- */
.actionbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 999; display: none; gap: 6px; padding: 7px; border-radius: 22px;
}
.actionbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 52px; padding: 8px 6px; border-radius: 16px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em; position: relative;
    -webkit-tap-highlight-color: transparent; transition: transform .2s var(--spring), filter .2s;
}
.actionbar svg { width: 20px; height: 20px; }
.actionbar a:active { transform: scale(.95); }
.ab-call { color: var(--ink); background: rgba(23,20,18,.06); border: 1px solid rgba(23,20,18,.1); }
.ab-wa { color: #0b3d22; background: rgba(37,181,102,.16); border: 1px solid rgba(37,181,102,.34); }
.ab-quote { color: #fff; background: linear-gradient(160deg, var(--ac-l), var(--ac)); border: 1px solid transparent; box-shadow: 0 10px 22px -10px rgba(23,20,18,.55); flex: 1.25; }
@media (max-width: 960px) { .actionbar { display: flex; } body { padding-bottom: 92px; } }
@media (min-width: 961px) { body { padding-bottom: 0; } }

/* cart FAB sits above the action bar */
@media (max-width: 960px) {
    .cart-fab { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 50px; height: 50px; }
    .buybar { bottom: calc(76px + env(safe-area-inset-bottom)); right: 74px; left: 12px; }
    .buybar ~ .cart-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.cart-saved {
    position: fixed; right: 14px; bottom: calc(132px + env(safe-area-inset-bottom)); z-index: 997;
    font-size: 10.5px; font-weight: 600; color: var(--ink2); background: rgba(251,250,247,.94);
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none;
}
@media (min-width: 961px) { .cart-saved { bottom: 92px; right: 16px; } }

/* ---------- 9: premium upload box ---------- */
.lbl-opt { font-weight: 500; color: var(--ink3); letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.upload-box {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 16px;
    border-radius: 16px; border: 1.5px dashed rgba(23,20,18,.22); background: rgba(255,255,255,.66);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: border-color .25s, background .25s, box-shadow .25s;
}
.upload-box input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.upload-box:hover, .upload-box.drag { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac-t) 10%, transparent); }
.upload-box:focus-within { border-color: var(--ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac-t) 14%, transparent); }
.ub-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--gold-dim); color: var(--ac); }
.ub-ico svg { width: 21px; height: 21px; }
.ub-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ub-main b { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ub-main small { font-size: 12px; color: var(--ink3); line-height: 1.45; }
.upload-box.has-file { border-style: solid; border-color: rgba(31,122,77,.45); background: rgba(31,122,77,.06); }
.upload-box.has-file .ub-ico { background: rgba(31,122,77,.12); color: #1b6b45; }
.ub-clear { position: relative; z-index: 2; margin-left: auto; flex: none; border: 1px solid var(--line2); background: #fff; color: var(--ink2); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 40px; }
.ub-clear:hover { color: var(--err); border-color: rgba(179,38,30,.4); }

/* ---------- 10: shop cards ---------- */
.prod .bd { gap: 7px; }
.prod .cat { display: flex; align-items: center; gap: 6px; }
.prod h3 { font-size: 17px; line-height: 1.25; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 2px; }
.pick label { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span { display: block; text-align: center; padding: 8px 6px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink2); background: rgba(23,20,18,.04); border: 1px solid var(--line); transition: .2s; }
.pick input:checked + span { background: var(--gold-dim); color: var(--ac); border-color: color-mix(in srgb, var(--ac-t) 38%, transparent); }
.pick input:focus-visible + span { outline: 2px solid var(--ac); outline-offset: 2px; }
.prod .pr { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.prod .pr b { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 26px; letter-spacing: -.01em; color: var(--ink); }
.prod .pr small { font-size: 12px; color: var(--ink3); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bdg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.bdg svg { width: 11px; height: 11px; }
.bdg-fit { color: #1b6b45; background: rgba(31,122,77,.1); border: 1px solid rgba(31,122,77,.24); }
.prod .stock { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: rgba(23,20,18,.05); border: 1px solid var(--line); }
.prod .act { gap: 8px; padding-top: 10px; }
.prod .act .btn { min-height: 44px; }

/* ---------- 13: FAQ accordion ---------- */
.faq-item { padding: 0; overflow: hidden; }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 17px 20px; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: "Outfit", sans-serif; font-size: 16.5px; font-weight: 500; color: var(--ink); line-height: 1.4;
}
.faq-q:hover { color: var(--ac); }
.faq-i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line2); }
.faq-i::before, .faq-i::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .3s; }
.faq-i::before { width: 9px; height: 1.5px; }
.faq-i::after { width: 1.5px; height: 9px; }
.faq-q[aria-expanded="true"] .faq-i::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-q[aria-expanded="true"] { color: var(--ac); }
.faq-a { padding: 0 20px 18px; }
.faq-a p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.7; }
.faq-item.open { border-color: color-mix(in srgb, var(--ac-t) 26%, transparent); }
.faq-item:hover { transform: none; }

/* ---------- 4: reviews — static grid when there are only a few ---------- */
.tm-static { padding-inline: 0; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.tm-grid .tm { width: auto; }
@media (max-width: 640px) { .tm-grid { grid-template-columns: 1fr; } }

/* ---------- 12: footer is shorter and scannable on mobile ---------- */
@media (max-width: 640px) {
    .site-footer { padding: 40px 0 34px; }
    .footer-grid { gap: 0; }
    .footer-grid > div { border-bottom: 1px solid rgba(255,255,255,.1); padding: 2px 0; }
    .footer-grid > div:first-child { border-bottom: 0; padding-bottom: 18px; }
    .footer-title.is-acc {
        display: flex; align-items: center; justify-content: space-between;
        margin: 0; padding: 15px 2px; cursor: pointer; min-height: 48px;
        font-size: 12.5px; letter-spacing: .12em; color: var(--on-deep);
    }
    .footer-title.is-acc::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--on-deep2); border-bottom: 1.5px solid var(--on-deep2); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
    .footer-title.is-acc[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
    .footer-title.is-acc + ul { padding-bottom: 12px; }
    .site-footer ul { gap: 2px; }
    .site-footer ul a { padding: 9px 2px; display: block; min-height: 40px; }
    .footer-bottom { margin-top: 22px; gap: 6px; font-size: 11.5px; }
}

/* ---------- 14: focus, touch targets, contrast, motion ---------- */
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .faq-q:focus-visible, .hdr-nav .nl:focus-visible, .drop a:focus-visible,
.actionbar a:focus-visible, .cart-fab:focus-visible, .menu-btn:focus-visible, .ub-clear:focus-visible {
    outline: 2px solid var(--ac); outline-offset: 3px;
}
.hx-hero a:focus-visible, .hx-ctaband a:focus-visible, .drop a:focus-visible { outline-color: #fff; }
.site-footer a:focus-visible, .footer-title.is-acc:focus-visible { outline: 2px solid var(--gold3); outline-offset: 2px; }
@media (max-width: 960px) {
    .btn, .card-link, .site-footer ul a, .drop a, .ms-links a { min-height: 44px; display: inline-flex; align-items: center; }
    .site-footer ul a, .drop a, .ms-links a { display: flex; }
}
.skip-link:focus { left: 0; top: 0; z-index: 2000; }
/* WhatsApp green stays functional-only: never used as a decorative accent */
.btn-whatsapp, .ab-wa, .ms-wa { --wa-only: 1; }

@media (prefers-reduced-motion: reduce) {
    .hx-note, .faq-a, .hdr-dd .drop, .actionbar a, .upload-box { transition: none !important; }
    .hx-hero .grade { animation: none !important; }
    .mq-t, .tm-track { animation: none !important; }
}

/* ---------- v44.1 — fixes found in preview QA ---------- */
/* Cormorant ships oldstyle figures by default: "10,499" rendered as "I0,499" */
.hx-chips b, .hx-stat b, .prod .pr b, .pdp-price b, .cart-tot b, .co-line.tot b,
.stats-band strong, .bf-bd .bmeta, .oid, h1, h2, .tm .stars {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* hero trust chip sits on a light glass panel — its title was white on white */
.hx-chip b { color: var(--ink); }
.hx-chip span { color: var(--ink2); }
.hx-chip .dot { color: var(--ac); background: var(--gold-dim); border-color: color-mix(in srgb, var(--ac-t) 26%, transparent); }

/* H1: keep it to ~3 lines so the CTAs stay near the fold */
.hx-hero h1 { font-size: clamp(27px, 3.5vw, 46px); max-width: 21ch; margin: 8px 0 10px; }
.hx-note { font-size: 14px; margin-bottom: 18px; }
.hx-note b { font-size: 14px; }
@media (max-width: 960px) {
    .hx-hero { min-height: 74svh; padding: 96px 0 56px; }
    .hx-hero h1 { font-size: clamp(25px, 6.6vw, 34px); max-width: 17ch; }
    .hx-note { font-size: 13px; max-width: 34ch; margin-bottom: 16px; }
    .hx-note b { font-size: 13px; }
    .hx-cta { gap: 8px; }
    .hx-cta .btn { padding: 12px 18px; font-size: 13.5px; }
    .hx-hero .eyebrow { font-size: 10px; letter-spacing: .16em; }
}

/* dropdown panels must be readable, not see-through */
.drop, .hdr-dd .drop {
    background: linear-gradient(150deg, rgba(253,252,250,.985), rgba(248,246,242,.975));
    border: 1px solid rgba(23,20,18,.1);
    -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
}
.drop::before, .drop::after { display: none; }

/* ---------- v44.2 — compact stat chips, hero rhythm ---------- */
.hx-chips { gap: 7px; }
.hx-chips li { padding: 8px 13px; gap: 6px; }
.hx-chips b { font-size: 22px; line-height: 1; }
.hx-chips li span { font-size: 12px; }
@media (max-width: 960px) {
    .hx-chips { gap: 6px; }
    .hx-chips li { padding: 7px 11px; gap: 5px; flex: 1 1 auto; }
    .hx-chips b { font-size: 18px; }
    .hx-chips li span { font-size: 11px; line-height: 1.25; }
    .hx-stats-wrap { margin-top: -14px; }
}

/* v44.3 — the [hidden] attribute must beat any display rule (footer lists use display:grid) */
[hidden] { display: none !important; }

/* ==========================================================================
   v45 — dark panel hover fix, footer logo, caption contrast,
   uncropped product photos, animated footer background
   ========================================================================== */

/* ---------- 1: "How we fabricate & install" panel must stay dark on hover ---------- */
/* It carries .glass, so the light-glass hover was washing the whole block out. */
.prec-in, .prec-in.glass, .prec-in:hover, .prec-in.glass:hover {
    background: linear-gradient(160deg, var(--deep), var(--deep2)) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: var(--on-deep);
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -30px rgba(0,0,0,.6) !important;
}
.prec-in::before, .prec-in:hover::before { background: radial-gradient(120% 55% at 18% -10%, rgba(255,255,255,.07), transparent 55%) !important; filter: none !important; }
.prec-in::after, .prec-in:hover::after {
    background: linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 30%, transparent 55%, rgba(255,255,255,.1)) !important;
    filter: none !important;
}
.prec-in h2, .prec-in .step2 b { color: #fff; }
.prec-in > p, .prec-in .step2 span { color: var(--on-deep2); }
.prec-in .step2 { border-color: rgba(255,255,255,.12); }

/* ---------- 2: footer logo — white and bigger ---------- */
.site-footer .footer-brand { display: inline-block; margin-bottom: 18px; }
.site-footer .footer-brand img {
    height: 58px !important; width: auto;
    filter: brightness(0) invert(1) !important;
    opacity: .96;
}
@media (max-width: 640px) { .site-footer .footer-brand img { height: 50px !important; } }

/* ---------- 3: captions over photos — readable, not washed out ---------- */
.jcard .cap, .story-im .cap, .project-overlay {
    background: linear-gradient(150deg, rgba(20,17,15,.82), rgba(20,17,15,.72));
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.6);
}
.jcard .cap b, .project-overlay h3 { color: #fff; }
.jcard .cap span, .project-overlay p { color: #ded7cc; }
.jcard .arb { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.story-im .cap { background: linear-gradient(150deg, rgba(20,17,15,.86), rgba(20,17,15,.74)); }
.story-im .cap h2 { color: #fff; }
.story-im .cap p { color: #ded7cc; }
.story-im .cap .eyebrow { color: var(--gold3); }
.story-im .cap .eyebrow::before { background: var(--gold3); }
.story-im .cap .btn-secondary { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.34); }
.prec-im .badge2 { background: rgba(20,17,15,.8); border-color: rgba(255,255,255,.18); color: #fff; }
.pcard .tg { background: rgba(20,17,15,.78); color: #fff; border-color: rgba(255,255,255,.2); }

/* stat chips: darker label text so the small copy reads on warm white */
.hx-chips li { color: var(--ink); border-color: rgba(23,20,18,.1); }
.hx-chips li span { color: var(--ink2); font-weight: 500; }
.hx-chips b { color: var(--ink); }

/* ---------- 4: show the whole photo — never crop product/project images ---------- */
.pcard .im, .jcard, .prod .im, .card > a:first-child, .blog-grid .card a:first-child, .bf-im, .pdp-main {
    background: linear-gradient(160deg, #efece6, #e3dfd7);
}
.pcard .im img, .jcard > img, .prod .im img, .pdp-main .pdp-shot,
.card > img, .card > a > img, .s-card > img, .blog-grid .card img, .bf-im img, .project-slide img {
    object-fit: contain !important;
    width: 100%; height: 100%;
}
/* fixed heights become aspect boxes so nothing is letterboxed more than needed */
.pcard .im { height: auto; aspect-ratio: 16 / 10; }
.prod .im { height: auto; aspect-ratio: 4 / 3; }
.jcard { height: auto; aspect-ratio: 4 / 5; }
.card img, .s-card img { height: auto; aspect-ratio: 16 / 10; }
.blog-grid .card img { aspect-ratio: 16 / 9; }
.pdp-main { height: auto; aspect-ratio: 4 / 3; }
.project-slide img { height: auto; aspect-ratio: 4 / 3; }
.jcard .cap { position: absolute; }
/* the photo must not zoom past its box when it is contained */
.pcard:hover .im > img, .prod:hover .im img, .jcard:hover > img, .card:hover img, .s-card:hover img { transform: none; }
@media (max-width: 560px) { .jcard { aspect-ratio: 4 / 4.4; } }

/* hero, story, workshop and CTA stay full-bleed — those are backgrounds, not products */
.hx-hero .grade > img, .hx-hero .grade > picture > img,
.story-im > img, .prec-im > img, .hx-ctaband > img, .hero-inline img {
    object-fit: cover !important;
}

/* ---------- 5: premium animated footer background ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer > .container { position: relative; z-index: 2; }
.site-footer::before {
    content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(34% 40% at 18% 28%, rgba(120,140,150,.24), transparent 68%),
        radial-gradient(30% 36% at 78% 20%, rgba(214,187,134,.18), transparent 70%),
        radial-gradient(38% 42% at 62% 82%, rgba(90,120,132,.22), transparent 70%),
        radial-gradient(26% 30% at 12% 84%, rgba(214,187,134,.12), transparent 70%);
    filter: blur(52px);
    animation: footAurora 26s ease-in-out infinite alternate;
}
@keyframes footAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, -2%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}
/* slow drifting hairlines — reads as brushed steel, costs almost nothing */
.site-footer::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px);
    -webkit-mask: radial-gradient(70% 90% at 50% 0%, #000, transparent 75%);
    mask: radial-gradient(70% 90% at 50% 0%, #000, transparent 75%);
    animation: footSheen 18s linear infinite;
}
@keyframes footSheen { from { background-position: 0 0; } to { background-position: 340px 0; } }
@media (prefers-reduced-motion: reduce) {
    .site-footer::before, .site-footer::after { animation: none !important; }
}

/* v45.1 — project cards: whole photo on top, caption underneath (nothing covered) */
.jcard {
    aspect-ratio: auto; height: auto;
    display: flex; flex-direction: column;
    background: linear-gradient(160deg, #efece6, #e3dfd7);
}
.jcard > img, .jcard > picture { position: static; aspect-ratio: 16 / 10; width: 100%; height: auto; }
.jcard .cap {
    position: static; margin: 0; border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(150deg, rgba(20,17,15,.94), rgba(20,17,15,.88));
    box-shadow: none; padding: 14px 16px;
}
@media (max-width: 560px) { .jcard { flex: 0 0 78vw; } }

.project-slide { display: flex; flex-direction: column; background: linear-gradient(160deg, #efece6, #e3dfd7); }
.project-slide img { position: static; aspect-ratio: 16 / 10; }
.project-overlay { position: static; border-radius: 0; padding: 13px 15px; background: linear-gradient(150deg, rgba(20,17,15,.94), rgba(20,17,15,.88)); }

/* ==========================================================================
   v46 — story panel: let the hill photo breathe, tighten the copy
   ========================================================================== */
.story-im { min-height: 600px; }
.story-im .cap {
    right: auto;                       /* was full-width — now it only takes what it needs */
    max-width: min(58%, 460px);
    padding: 20px 22px 22px;
    background: linear-gradient(160deg, rgba(20,17,15,.78), rgba(20,17,15,.9));
    border-radius: 20px;
}
.story-im .cap .eyebrow { font-size: 9.5px; letter-spacing: .18em; margin-bottom: 6px; }
.story-im .cap h2 { font-size: clamp(22px, 2.1vw, 30px); margin: 4px 0 0; line-height: 1.12; }
.story-im .cap p {
    font-size: 13.5px; line-height: 1.6; max-width: 40ch; margin: 9px 0 14px;
    color: #d8d1c6;
}
.story-im .cap .btn { padding: 10px 18px; font-size: 13px; }

@media (max-width: 1200px) { .story-im .cap { max-width: min(72%, 440px); } }
@media (max-width: 960px) {
    .story-im { min-height: 480px; }
    .story-im .cap { left: 16px; bottom: 16px; max-width: none; right: 16px; padding: 16px 18px 18px; }
    .story-im .cap h2 { font-size: clamp(20px, 5.4vw, 26px); }
    .story-im .cap p { font-size: 12.5px; line-height: 1.55; margin: 8px 0 12px; }
}

/* the workshop panel opposite it gets the same restraint */
.prec-in { padding: 34px 36px; }
.prec-in h2 { font-size: clamp(24px, 2.4vw, 34px); }
.prec-in > p { font-size: 14px; line-height: 1.65; }
.prec-in .step2 { padding: 13px 0; }
.prec-in .step2 b { font-size: 15px; }
.prec-in .step2 span { font-size: 12.5px; line-height: 1.45; }
@media (max-width: 960px) { .prec-in { padding: 24px 20px; } }


/* ===== v47: homepage shop tiles ===== */
.hx-shop .st-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.st-tile{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);
  background:var(--bg3);border:1px solid rgba(27,25,23,.08);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 14px 34px -22px rgba(27,25,23,.45);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.st-tile:hover,.st-tile:focus-visible{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 26px 48px -24px rgba(27,25,23,.55)}
.st-im{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%,#fbfaf7,#e6e1d8)}
.st-im img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.st-tile:hover .st-im img{transform:scale(1.05)}
/* no photo yet: brushed-steel plate with the car name, never a fake picture */
.st-plain .st-im{display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;
  background:repeating-linear-gradient(92deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
             linear-gradient(145deg,#c9ced4,#8e959e 45%,#b7bdc4 62%,#767d86)}
.st-plain .st-im::after{content:"";position:absolute;inset:-40%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);
  transform:translateX(-60%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.st-plain:hover .st-im::after{transform:translateX(60%)}
.st-mark{position:relative;font-size:10.5px;letter-spacing:.18em;font-weight:600;color:rgba(23,20,18,.55)}
.st-car{position:relative;font-size:clamp(24px,2.4vw,32px);line-height:1;letter-spacing:-.03em;color:#171412;
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
.st-tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:99px;
  background:rgba(251,250,247,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);border:1px solid rgba(27,25,23,.08)}
.st-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px}
.st-body > b{font-size:15px;line-height:1.3;font-weight:600}
.st-meta{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink3)}
.st-meta strong{color:var(--ink);font-size:16px}
.st-go{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ac);color:#fff;transition:transform .35s}
.st-go svg{width:15px;height:15px}
.st-tile:hover .st-go{transform:translateX(3px)}
@media (max-width:1000px){.hx-shop .st-rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .hx-shop .st-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:4px 16px 14px;scrollbar-width:none}
  .hx-shop .st-rail::-webkit-scrollbar{display:none}
  .st-tile{flex:0 0 68%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.st-tile,.st-im img,.st-plain .st-im::after{transition:none}}

/* v48: hero dots keep their size but get a 32px tap area */
.hx-dots button{position:relative}
.hx-dots button::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%)}