/* Thermawool homepage styles — ported verbatim from static thermawool-v1.html.
   Loaded only on the front page. Tokens come from brand.css. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* Colour & type tokens come from assets/brand.css (single source of truth) */
    body { font-family: var(--font-body); color: var(--dark); overflow-x: hidden; }

    /* TOPBAR · NAV · FOOTER live in assets/components.css (single source of truth) */

    /* ── HERO ── */
    .hero { position: relative; height: 580px; overflow: hidden; background: #111; }
    .hslide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
    .hslide.active { opacity: 1; }
    .hslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .hslide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.08) 100%); }
    .hero-content { position: absolute; bottom: 0; left: 0; padding: 48px 72px; max-width: 700px; z-index: 2; }
    .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--orange); padding: 5px 16px 5px 6px; border-radius: 3px; margin-bottom: 18px; }
    .hero-badge-icon { background: rgba(255,255,255,.2); width: 26px; height: 26px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #fff; }
    .hero-badge span { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .5px; }

    /* ── A1 FIRE RATED BADGE (site-wide, vivid red, struck-through flame = non-combustible) ── */
    .a1-badge { --a1-red:#e30613; --a1-gap:#fff; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--a1-red); line-height:1; }
    .a1-badge svg { width:22px; height:22px; flex-shrink:0; display:block; }
    .a1-badge .a1-flame { fill:var(--a1-red); }
    .a1-badge .a1-gap { stroke:var(--a1-gap); }
    .a1-badge .a1-slash { stroke:var(--a1-red); }
    .a1-badge--pill { background:rgba(255,255,255,.95); padding:8px 18px 8px 12px; border-radius:100px; color:#1a1a1a; --a1-gap:#fff; box-shadow:0 4px 18px rgba(0,0,0,.18); backdrop-filter:blur(4px); }
    .a1-badge--lg { font-size:13px; gap:10px; }
    .a1-badge--lg svg { width:26px; height:26px; }
    /* Official A1 FIRE RATED logo image (transparent, no backing) */
    .a1-img { display:block; width:auto; }
    .hero-content .a1-img--hero { height:72px; width:auto; margin-bottom:20px; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
    .a1-img--lux { height:64px; margin-bottom:18px; }
    .hero-h1 { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: #fff; line-height: 1.08; letter-spacing: -.5px; margin-bottom: 14px; }
    .hero-p { font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.65; margin-bottom: 26px; max-width: 500px; }
    .hero-btns { display: flex; gap: 12px; }
    .btn-brand { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; padding: 13px 26px; border-radius: 3px; transition: background .2s; }
    .btn-brand:hover { background: var(--brand-dark); }
    .btn-brand svg { width: 14px; height: 14px; fill: #fff; }
    .btn-ghost { display: inline-flex; align-items: center; gap: 8px; border: 2px solid rgba(255,255,255,.45); color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600; padding: 11px 22px; border-radius: 3px; transition: border-color .2s; }
    .btn-ghost:hover { border-color: #fff; }
    .hero-arrows { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0 20px; z-index: 2; pointer-events: none; }
    .harrow { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: all; transition: background .2s, border-color .2s; }
    .harrow:hover { background: var(--brand); border-color: var(--brand); }
    .harrow svg { width: 15px; height: 15px; fill: #fff; }
    .hero-dots { position: absolute; bottom: 22px; right: 72px; display: flex; gap: 8px; z-index: 2; }
    .hdot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.55); cursor: pointer; transition: background .2s; }
    .hdot.active { background: #fff; }

    /* ── FEATURE STRIP ── */
    .feat-strip { background: var(--light); border-bottom: 1px solid var(--border); }
    .feat-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); }
    .feat-item { padding: 28px 24px; display: flex; align-items: center; gap: 16px; border-right: 1px solid var(--border); }
    .feat-item:last-child { border-right: none; }
    .feat-ico { width: 44px; height: 44px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 4px; }
    .feat-ico svg { width: 22px; height: 22px; }
    .feat-lbl { font-size: 13px; font-weight: 700; color: var(--dark); }
    .feat-sub { font-size: 11.5px; color: var(--mid); margin-top: 2px; }

    /* ── SECTION ── */
    .sec { padding: 72px 32px; }
    .sec-sm { padding: 48px 32px; }
    .wrap { max-width: 1280px; margin: 0 auto; }
    .sec-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
    .sec-tag::before { content: ''; width: 28px; height: 3px; background: var(--brand); }
    .sec-tag span { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); }
    h2.sec-title { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 10px; color: var(--dark); }
    p.sec-sub { font-size: 15px; color: var(--mid); line-height: 1.7; max-width: 760px; margin-bottom: 40px; }

    /* ── FEATURE CARDS ── */
    .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .feat-card { background: #fff; border: 1px solid var(--border); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: box-shadow .3s, transform .3s; }
    .feat-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.09); transform: translateY(-4px); }
    .feat-card-img { height: 200px; overflow: hidden; }
    .feat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .feat-card:hover .feat-card-img img { transform: scale(1.05); }
    .feat-card-body { padding: 24px; }
    .feat-card-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--brand); }
    .feat-card-text { font-size: 13px; color: var(--mid); line-height: 1.6; margin-bottom: 16px; }
    .feat-card-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; border: 1.5px solid var(--brand); padding: 8px 16px; transition: background .2s, color .2s; }
    .feat-card:hover .feat-card-link { background: var(--brand); color: #fff; }
    .feat-card-link svg { width: 12px; height: 12px; fill: currentColor; }

    /* ── BANNER ── */
    .banner { position: relative; height: 210px; overflow: hidden; }
    .banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .banner::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.48); }
    .banner-content { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 24px; }
    .banner-content h2 { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 10px; }
    .banner-content p { font-size: 15px; color: rgba(255,255,255,.85); max-width: 540px; }

    /* ── TECH STRIP ── */
    .tech-strip { background: var(--brand); padding: 36px 32px; }
    .tech-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .tech-text { color: #fff; font-size: 19px; font-weight: 700; }
    .tech-text span { display: block; font-size: 13.5px; font-weight: 400; opacity: .8; margin-top: 4px; }
    .btn-white { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--brand); text-decoration: none; font-size: 13.5px; font-weight: 700; padding: 12px 24px; transition: background .2s, color .2s; white-space: nowrap; }
    .btn-white:hover { background: var(--brand-dark); color: #fff; }
    .btn-white svg { width: 14px; height: 14px; fill: currentColor; }

    /* FOOTER styles → assets/components.css */

    /* ────────────────────────────────────
       PRODUCT SECTION ALTERNATIVES
    ──────────────────────────────────── */

    .prod-section-divider {
      background: #1e1e1e;
      padding: 24px 32px;
      text-align: center;
    }
    .prod-section-divider h3 {
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .prod-section-divider .opt-label {
      display: inline-block;
      background: var(--brand);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 4px 14px;
      margin-top: 6px;
    }

    /* ── OPTION A: Current Grid ── */
    .prod-grid-a { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
    .prod-card-a { background: #fff; border: 1px solid var(--border); text-decoration: none; color: inherit; display: block; transition: box-shadow .3s, transform .3s; }
    .prod-card-a:hover { box-shadow: 0 12px 32px rgba(0,0,0,.1); transform: translateY(-4px); }
    .prod-card-a-img { height: 200px; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--light); border-bottom: 1px solid var(--border); }
    .prod-card-a-img img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform .4s; }
    .prod-card-a:hover .prod-card-a-img img { transform: scale(1.07) translateY(-4px); }
    .prod-card-a-body { padding: 20px; }
    .prod-a1 { display: inline-flex; align-items: center; gap: 5px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 2px; margin-bottom: 8px; letter-spacing: .5px; }
    .prod-name-a { font-size: 17px; font-weight: 800; color: var(--brand); margin-bottom: 6px; }
    .prod-desc-a { font-size: 12.5px; color: var(--mid); line-height: 1.55; margin-bottom: 14px; }
    .prod-link-a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand); text-decoration: none; border-bottom: 1.5px solid var(--brand); }
    .prod-card-a:hover .prod-link-a { gap: 10px; }
    .prod-link-a svg { width: 12px; height: 12px; fill: currentColor; }

    /* ── OPTION B: Horizontal Scroll Carousel ── */
    .prod-scroll-wrap { overflow-x: auto; margin-top: 40px; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: var(--brand) var(--border); }
    .prod-scroll-wrap::-webkit-scrollbar { height: 4px; }
    .prod-scroll-wrap::-webkit-scrollbar-track { background: var(--border); }
    .prod-scroll-wrap::-webkit-scrollbar-thumb { background: var(--brand); }
    .prod-scroll-track { display: flex; gap: 20px; padding-bottom: 4px; }
    .prod-card-b { flex: 0 0 300px; background: #fff; border: 1px solid var(--border); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .3s; }
    .prod-card-b:hover { box-shadow: 0 10px 28px rgba(0,0,0,.1); }
    .prod-card-b-img { height: 220px; display: flex; align-items: center; justify-content: center; padding: 28px; background: var(--light); border-bottom: 1px solid var(--border); }
    .prod-card-b-img img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform .4s; }
    .prod-card-b:hover .prod-card-b-img img { transform: scale(1.06) translateY(-4px); }
    .prod-card-b-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
    .prod-card-b-body .prod-name-a { margin-bottom: 8px; }
    .prod-card-b-body .prod-desc-a { flex: 1; }
    .prod-scroll-nav { display: flex; gap: 10px; margin-top: 16px; }
    .prod-scroll-btn { width: 38px; height: 38px; border: 1.5px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; border-radius: 3px; }
    .prod-scroll-btn:hover { background: var(--brand); border-color: var(--brand); }
    .prod-scroll-btn:hover svg { fill: #fff; }
    .prod-scroll-btn svg { width: 14px; height: 14px; fill: var(--dark); }

    /* ── OPTION C: Featured + 3 Mini ── */
    .prod-grid-c { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3px; margin-top: 40px; }
    .prod-feat-c { position: relative; overflow: hidden; display: block; text-decoration: none; background: var(--dark); min-height: 420px; }
    .prod-feat-c-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; display: block; transition: transform .5s; filter: brightness(.8); }
    .prod-feat-c:hover .prod-feat-c-img { transform: scale(1.04); }
    .prod-feat-c-over { position: absolute; bottom: 0; left: 0; right: 0; padding: 36px; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 100%); }
    .prod-feat-c-a1 { background: var(--orange); color: #fff; font-size: 10px; font-weight: 900; padding: 3px 10px; display: inline-block; margin-bottom: 10px; letter-spacing: 1px; }
    .prod-feat-c-name { font-size: 28px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 10px; }
    .prod-feat-c-desc { font-size: 13.5px; color: rgba(255,255,255,.75); line-height: 1.6; margin-bottom: 16px; }
    .prod-feat-c-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; border: 1.5px solid rgba(255,255,255,.4); padding: 9px 18px; transition: border-color .2s, background .2s; }
    .prod-feat-c:hover .prod-feat-c-link { background: var(--brand); border-color: var(--brand); }
    .prod-feat-c-link svg { width: 13px; height: 13px; fill: #fff; }

    .prod-mini-grid { display: flex; flex-direction: column; gap: 3px; }
    .prod-mini-c { background: var(--light); border: 1px solid var(--border); display: flex; align-items: center; gap: 16px; padding: 20px; text-decoration: none; color: inherit; transition: background .2s, box-shadow .2s; flex: 1; }
    .prod-mini-c:hover { background: #fff; box-shadow: inset 3px 0 0 var(--brand); }
    .prod-mini-c img { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; transition: transform .3s; }
    .prod-mini-c:hover img { transform: scale(1.06); }
    .prod-mini-c-body { flex: 1; }
    .prod-mini-c-name { font-size: 15px; font-weight: 800; color: var(--brand); margin-bottom: 4px; }
    .prod-mini-c-desc { font-size: 12px; color: var(--mid); line-height: 1.5; }
    .prod-mini-c-link { font-size: 11.5px; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 4px; margin-top: 6px; text-decoration: none; }
    .prod-mini-c-link svg { width: 11px; height: 11px; fill: currentColor; }

    /* ── OPTION D: List View ── */
    .prod-list-d { display: flex; flex-direction: column; gap: 0; margin-top: 40px; border: 1px solid var(--border); }
    .prod-row-d { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); transition: background .2s; }
    .prod-row-d:last-child { border-bottom: none; }
    .prod-row-d:hover { background: var(--light); }
    .prod-row-d-img { height: 140px; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--light); border-right: 1px solid var(--border); }
    .prod-row-d-img img { max-height: 100%; max-width: 110px; object-fit: contain; transition: transform .35s; }
    .prod-row-d:hover .prod-row-d-img img { transform: scale(1.08); }
    .prod-row-d-body { padding: 24px 28px; }
    .prod-row-d-name { font-size: 20px; font-weight: 800; color: var(--brand); margin-bottom: 6px; }
    .prod-row-d-desc { font-size: 13.5px; color: var(--mid); line-height: 1.6; }
    .prod-row-d-specs { display: flex; gap: 24px; margin-top: 12px; }
    .prod-row-d-spec { font-size: 12px; color: var(--mid); }
    .prod-row-d-spec strong { color: var(--dark); font-size: 14px; font-weight: 700; display: block; margin-bottom: 1px; }
    .prod-row-d-cta { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex-shrink: 0; border-left: 1px solid var(--border); min-width: 170px; }

    /* ── OPTION E: Tabbed Products ── */
    .prod-tabs-e { margin-top: 40px; border: 1px solid var(--border); }
    .prod-tab-nav { display: flex; border-bottom: 1px solid var(--border); }
    .prod-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; font-size: 13px; font-weight: 700; color: var(--mid); background: var(--light); border: none; border-right: 1px solid var(--border); cursor: pointer; transition: background .2s, color .2s; }
    .prod-tab-btn:last-child { border-right: none; }
    .prod-tab-btn img { height: 36px; object-fit: contain; opacity: .6; transition: opacity .2s; }
    .prod-tab-btn.active { background: #fff; color: var(--brand); }
    .prod-tab-btn.active img { opacity: 1; }
    .prod-tab-btn:hover { color: var(--brand); }
    .prod-tab-panel { display: none; }
    .prod-tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; }
    .prod-tab-img { display: flex; align-items: center; justify-content: center; padding: 52px; background: var(--light); border-right: 1px solid var(--border); }
    .prod-tab-img img { max-height: 260px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.12)); transition: transform .4s; }
    .prod-tab-img img:hover { transform: scale(1.04) translateY(-6px); }
    .prod-tab-body { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
    .prod-tab-a1 { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 900; padding: 3px 10px; border-radius: 2px; margin-bottom: 14px; letter-spacing: 1px; width: fit-content; }
    .prod-tab-name { font-size: 32px; font-weight: 800; color: var(--brand); margin-bottom: 12px; }
    .prod-tab-desc { font-size: 14px; color: var(--mid); line-height: 1.75; margin-bottom: 24px; }
    .prod-tab-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); margin-bottom: 28px; }
    .prod-tab-spec { background: var(--light); padding: 14px 16px; text-align: center; }
    .prod-tab-spec-val { font-size: 16px; font-weight: 800; color: var(--dark); }
    .prod-tab-spec-lbl { font-size: 11px; color: var(--brand); font-weight: 600; margin-top: 3px; }
    .prod-tab-btns { display: flex; gap: 12px; }
    .prod-tab-btns .btn-brand { font-size: 13px; padding: 11px 20px; }

    /* ── SHARED BUTTON FOR PROD SECTIONS ── */
    .btn-sm { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand); text-decoration: none; border: 1.5px solid var(--brand); padding: 8px 16px; transition: background .2s, color .2s; }
    .btn-sm:hover { background: var(--brand); color: #fff; }
    .btn-sm svg { width: 12px; height: 12px; fill: currentColor; }
    .btn-sm-ghost { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--mid); text-decoration: none; border: 1.5px solid var(--border); padding: 8px 16px; transition: border-color .2s, color .2s; }
    .btn-sm-ghost:hover { border-color: var(--brand); color: var(--brand); }

    /* ── SCROLL FADE ANIMATION ── */
    /* Scroll reveal: visible by default. The hide-then-reveal only applies once JS
       confirms it can drive it (html.js-reveal), so a blocked/failed script or a
       background/headless render never ships blank sections. */
    .fade-up { opacity: 1; transform: none; }
    .js-reveal .fade-up { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
    .js-reveal .fade-up.in { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .js-reveal .fade-up, .js-reveal .fade-up.in { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) { .feat-inner { grid-template-columns: repeat(2, 1fr); } .prod-grid-a { grid-template-columns: repeat(2, 1fr); } .ft-top { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 768px) { .nav-links { display: none; } .hero { height: 480px; } .hero-content { padding: 28px 20px; } .hero-h1 { font-size: 26px; } .feat-grid { grid-template-columns: 1fr; } .prod-grid-c { grid-template-columns: 1fr; } .prod-tab-panel.active { grid-template-columns: 1fr; } .prod-row-d { grid-template-columns: 1fr; } .ft-top { grid-template-columns: 1fr; } .tech-strip .wrap { flex-direction: column; align-items: flex-start; } }

.lux-sec{padding:110px 32px;background:#fff;position:relative;overflow:hidden;}
  .lux-sec::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:64px;background:linear-gradient(to bottom,var(--brand),transparent);}
  .lux-wrap{max-width:1240px;margin:0 auto;}
  .lux-head{text-align:center;margin-bottom:64px;}
  .lux-eyebrow{font-size:11px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--brand);margin-bottom:16px;}
  .lux-title{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:300;color:var(--ink);line-height:1.12;letter-spacing:-.5px;}
  .lux-title strong{font-weight:800;}
  .lux-sub{font-size:15px;color:var(--mid);line-height:1.7;max-width:540px;margin:18px auto 0;font-weight:400;}

  /* Spotlight stage */
  .lux-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;min-height:440px;}
  .lux-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;}
  /* soft luxury radial glow behind product */
  .lux-visual::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(154,38,38,.06) 0%,rgba(154,38,38,.02) 45%,transparent 70%);z-index:0;}
  .lux-pedestal{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);width:340px;height:60px;background:radial-gradient(ellipse at center,rgba(0,0,0,.14) 0%,transparent 70%);border-radius:50%;filter:blur(8px);z-index:0;}
  .lux-prod-img{position:relative;z-index:2;max-width:440px;max-height:380px;width:100%;object-fit:contain;filter:drop-shadow(0 28px 48px rgba(40,20,10,.22));opacity:0;transform:translateY(20px) scale(.96);transition:opacity .6s var(--ease,cubic-bezier(.4,0,.2,1)),transform .6s var(--ease,cubic-bezier(.4,0,.2,1));}
  .lux-prod-img.show{opacity:1;transform:none;}

  .lux-info{position:relative;}
  .lux-badge{display:inline-flex;align-items:center;gap:7px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:2px;margin-bottom:20px;}
  .lux-name{font-family:var(--font-display);font-size:clamp(34px,4vw,52px);font-weight:800;color:var(--brand);line-height:1;letter-spacing:-1.5px;margin-bottom:8px;}
  .lux-name .pn2{color:var(--name-mute);}   /* 2nd word (CLAD) grey — mirrors the product wordmark */
  .lux-name .pn1-ink{color:var(--ink);}     /* 1st word black for DIM/SOFFIT */
  .lux-name sup{font-size:.36em;vertical-align:super;font-weight:700;}
  .lux-name .pn-reg{color:var(--ink);}      /* ® — black */
  .lux-name .pn-plus{color:var(--brand);font-size:.5em;font-weight:800;}  /* + (WALLCLAD⁺) — red */
  .lux-cat{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:22px;}
  .lux-desc{font-size:15.5px;color:var(--body);line-height:1.8;font-weight:400;margin-bottom:32px;max-width:420px;}
  .lux-specs{display:flex;gap:0;margin-bottom:36px;}
  .lux-spec{padding-right:32px;margin-right:32px;border-right:1px solid var(--border);}
  .lux-spec:last-child{border-right:none;margin-right:0;padding-right:0;}
  .lux-spec-val{font-family:var(--font-display);font-size:24px;font-weight:300;color:var(--ink);letter-spacing:-.5px;line-height:1;margin-bottom:6px;}
  .lux-spec-val strong{font-weight:700;}
  .lux-spec-lbl{font-size:11px;color:var(--mid);font-weight:500;letter-spacing:.3px;}
  .lux-actions{display:flex;align-items:center;gap:22px;}
  .lux-btn{display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;font-size:13.5px;font-weight:600;padding:14px 30px;border-radius:3px;text-decoration:none;transition:background .25s,gap .25s;}
  .lux-btn:hover{background:var(--brand-dark);gap:13px;}
  .lux-btn svg{width:14px;height:14px;fill:#fff;}
  .lux-link{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid var(--border);padding-bottom:3px;transition:color .2s,border-color .2s;}
  .lux-link:hover{color:var(--brand);border-color:var(--brand);}

  /* Selector rail — horizontally scrollable (supports 7+ products) */
  .lux-rail-shell{position:relative;margin-top:72px;border-top:1px solid var(--border);}
  .lux-rail{display:flex;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;}
  .lux-rail::-webkit-scrollbar{display:none;}
  .lux-tab{flex:0 0 248px;scroll-snap-align:start;background:transparent;border:none;border-right:1px solid var(--border);padding:26px 24px;display:flex;align-items:center;gap:16px;cursor:pointer;text-align:left;transition:background .25s;position:relative;}
  .lux-tab:last-child{border-right:none;}
  .lux-tab::before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--brand);transform:scaleX(0);transition:transform .3s var(--ease,cubic-bezier(.4,0,.2,1));transform-origin:left;}
  .lux-tab.active::before{transform:scaleX(1);}
  .lux-tab:hover{background:var(--light);}
  .lux-tab-thumb{width:54px;height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--light);border-radius:4px;overflow:hidden;transition:background .25s;}
  .lux-tab.active .lux-tab-thumb{background:var(--brand-light);}
  .lux-tab-thumb img{max-width:42px;max-height:42px;object-fit:contain;}
  .lux-tab-name{font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--brand);margin-bottom:2px;letter-spacing:-.2px;white-space:nowrap;}  /* 1st word red by default — fixed brand colour, does NOT change on select */
  .lux-tab-name .pn1-ink{color:var(--ink);}     /* 1st word black for DIM/SOFFIT — stays black when active */
  .lux-tab-name .pn2{color:var(--name-mute);}   /* 2nd word (CLAD) grey in the selector rail too */
  .lux-tab-name .pn-reg{color:var(--ink);}      /* ® — black */
  .lux-tab-name .pn-plus{color:var(--brand);font-weight:800;vertical-align:super;font-size:.7em;}  /* + (WALLCLAD⁺) — red */
  .lux-tab-cat{font-size:11px;color:var(--mid);font-weight:500;}
  /* scroll arrows */
  .lux-rail-arr{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 6px 20px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:background .2s,border-color .2s;}
  .lux-rail-arr:hover{background:var(--brand);border-color:var(--brand);}
  .lux-rail-arr:hover svg{fill:#fff;}
  .lux-rail-arr svg{width:14px;height:14px;fill:var(--ink);}
  .lux-rail-prev{left:-14px;}
  .lux-rail-next{right:-14px;}
  /* fade hint on right edge */
  .lux-rail-shell::after{content:'';position:absolute;top:1px;right:0;bottom:0;width:48px;background:linear-gradient(to right,transparent,#fff);pointer-events:none;z-index:2;}

  @media(max-width:900px){
    .lux-stage{grid-template-columns:1fr;gap:24px;text-align:center;}
    .lux-visual{min-height:300px;order:1;}
    .lux-visual::before{width:380px;height:380px;}
    .lux-prod-img{max-height:280px;}
    .lux-info{order:2;}
    .lux-desc{margin-left:auto;margin-right:auto;}
    .lux-specs{justify-content:center;}
    .lux-actions{justify-content:center;}
    .lux-tab{flex:0 0 220px;}
    .lux-rail-arr{display:none;}
    .lux-rail-shell::after{display:none;}
  }
  @media(max-width:520px){
    .lux-tab{flex:0 0 200px;}
  }